├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── bj.jpg
    │   ├── car.png
    │   ├── hot.jpg
    │   ├── qd.jpg
    │   ├── 二维码.png
    │   ├── 火.png
    │   ├── 用户.png
    │   ├── 购物车.png
    │   ├── 钻石.png
    │   ├── logo.png
    │   ├── 支付成功.png
    │   ├── avator.jpg
    │   └── welcome.jpg
    ├── shims-vue.d.ts
    ├── main.ts
    ├── store
    │   └── index.ts
    ├── components
    │   ├── Blank.vue
    │   ├── Go.vue
    │   ├── Sign.vue
    │   ├── GoodsSwipe.vue
    │   ├── Swipe.vue
    │   ├── Tab.vue
    │   ├── Title.vue
    │   ├── Swipe2.vue
    │   ├── QRcode.vue
    │   ├── Grid.vue
    │   ├── List.vue
    │   ├── HelloWorld.vue
    │   ├── Recommend.vue
    │   └── goodsStyle.vue
    ├── views
    │   ├── mine
    │   │   ├── member.vue
    │   │   ├── AddAddress.vue
    │   │   ├── EditAddress.vue
    │   │   ├── message.vue
    │   │   └── Address.vue
    │   ├── Car
    │   │   ├── EmptyCar.vue
    │   │   └── ShopCar.vue
    │   ├── Car.vue
    │   ├── search
    │   │   └── search.vue
    │   ├── login
    │   │   ├── Register.vue
    │   │   └── Login.vue
    │   ├── Order
    │   │   ├── myOrder.vue
    │   │   └── ConfirmOrder.vue
    │   ├── category
    │   │   └── category.vue
    │   ├── Goods
    │   │   └── GoodsHot.vue
    │   ├── Classify.vue
    │   ├── Personal.vue
    │   ├── Home.vue
    │   └── GoodsInfo.vue
    ├── utils
    │   ├── api.js
    │   └── axios.js
    ├── App.vue
    └── router
    │   └── index.ts
├── babel.config.js
├── .editorconfig
├── .gitignore
├── README.md
├── .eslintrc.js
├── tsconfig.json
├── package.json
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/bj.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/bj.jpg


--------------------------------------------------------------------------------
/src/assets/car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/car.png


--------------------------------------------------------------------------------
/src/assets/hot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/hot.jpg


--------------------------------------------------------------------------------
/src/assets/qd.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/qd.jpg


--------------------------------------------------------------------------------
/src/assets/二维码.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/二维码.png


--------------------------------------------------------------------------------
/src/assets/火.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/火.png


--------------------------------------------------------------------------------
/src/assets/用户.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/用户.png


--------------------------------------------------------------------------------
/src/assets/购物车.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/购物车.png


--------------------------------------------------------------------------------
/src/assets/钻石.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/钻石.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/支付成功.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/支付成功.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/avator.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/avator.jpg


--------------------------------------------------------------------------------
/src/assets/welcome.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu-qing1998/furniture_mall/HEAD/src/assets/welcome.jpg


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 
8 | declare module '*.js'
9 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import store from './store'
5 | import Vant from 'vant';
6 | import 'vant/lib/index.css';
7 | 
8 | createApp(App).use(Vant).use(store).use(router).mount('#app')
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { createStore } from 'vuex'
 2 | import createPersistedState from 'vuex-persistedstate'
 3 | 
 4 | export default createStore({
 5 |   state: {
 6 |     userName: "",
 7 |     password: "",
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   },
15 |   plugins: [createPersistedState()]
16 | })
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # furniture_mall
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/components/Blank.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div
 4 |       class="sign"
 5 |       v-for="item in blankList"
 6 |       :key="item.image_id"
 7 |       style="height:30px"
 8 |     >
 9 |       <img :src="item.image_url" />
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script lang='ts'>
15 | export default {
16 |    
17 |    name:'Sign',
18 |    props:{
19 |        blankList:[]
20 |    },
21 | 
22 | 
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/vue3-essential',
 8 |     '@vue/standard',
 9 |     '@vue/typescript/recommended'
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 2020
13 |   },
14 |   rules: {
15 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/Go.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div
 4 |       class="sign"
 5 |       v-for="item in goList"
 6 |       :key="item.image_id"
 7 |     >
 8 |       <img :src="item.image_url" />
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script lang='ts'>
14 | export default {
15 |    
16 |    name:'Go',
17 |    props:{
18 |        goList:[]
19 |    },
20 | 
21 | 
22 | }
23 | </script>
24 | 
25 | <style scoped lang="less">
26 | .sign {
27 |   width: 750rpx;
28 |   height: 70rpx;
29 |   img {
30 |     width: 100%;
31 |     height: 100%;
32 |   }
33 |   margin-bottom:20px;
34 | }
35 | </style>


--------------------------------------------------------------------------------
/src/components/Sign.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div
 4 |       class="sign"
 5 |       v-for="item in generalList"
 6 |       :key="item.image_id"
 7 |     >
 8 |       <img :src="item.image_url" />
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script lang='ts'>
14 | export default {
15 |    
16 |    name:'Sign',
17 |    props:{
18 |        generalList:[]
19 |    },
20 | 
21 | 
22 | }
23 | </script>
24 | 
25 | <style scoped lang="less">
26 | .sign {
27 |   width: 750rpx;
28 |   height: 70rpx;
29 |   img {
30 |     width: 100%;
31 |     height: 100%;
32 |   }
33 | }
34 | </style>
35 | 
36 | 


--------------------------------------------------------------------------------
/src/components/GoodsSwipe.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <!-- 轮播图 -->
 4 |     <van-swipe
 5 |       :autoplay="3000"
 6 |       class="swipe"
 7 |     >
 8 |       <van-swipe-item
 9 |         v-for="item in lunboList"
10 |         :key="item"
11 |       >
12 |         <img :src="item" />
13 |       </van-swipe-item>
14 |     </van-swipe>
15 | 
16 |   </div>
17 | </template>
18 | 
19 | <script lang='ts'>
20 | export default {
21 |   name: "GoodsSwipe",
22 |   props: {
23 |     lunboList: [],
24 |   },
25 | };
26 | </script>
27 | 
28 | <style scoped lang="less">
29 | .swipe {
30 |   width: 750rpx;
31 |   height: 800rpx;
32 |   overflow: hidden;
33 |   img {
34 |     width: 100%;
35 |     height: 100%;
36 |   }
37 | }
38 | </style>


--------------------------------------------------------------------------------
/src/components/Swipe.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |          <van-swipe
 4 |       :autoplay="5000"
 5 |       class="swipe"
 6 |     >
 7 |       <van-swipe-item
 8 |         v-for="item in lunboList"
 9 |         :key="item.image_id"
10 |       >
11 |         <img :src="item.image_url" />
12 |       </van-swipe-item>
13 |     </van-swipe>
14 |     </div>
15 | </template>
16 | 
17 | <script lang='ts'>
18 | export default {
19 |    
20 |    name:'Swipe',
21 |    props:{
22 |        lunboList:[]
23 |    },
24 | 
25 | 
26 | }
27 | </script>
28 | 
29 | <style scoped lang="less">
30 |   .swipe {
31 |   width: 750rpx;
32 |   height: 950rpx;
33 |   overflow: hidden;
34 |   img {
35 |     width: 100%;
36 |     height: 100%;
37 |   }
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/Tab.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <ul v-for="item in List" :key="item.id" class="box">
 4 |           <list class="list">
 5 |             <span>{{item.name}}</span>
 6 |             <van-icon name="arrow" />
 7 |           </list>
 8 |         </ul>
 9 |     </div>
10 | </template>
11 | 
12 | <script lang="ts">
13 | export default {
14 |     name: "Tab",
15 |   props: {
16 |    List:[]
17 |   },
18 | }; 
19 |     
20 | 
21 | </script>
22 | 
23 | 
24 | <style scoped lang="less">
25 |   .box{
26 |     padding:0 30px;
27 |     .list{
28 |       padding:15px 0;
29 |       display:flex;
30 |       justify-content: space-between;
31 |       border-bottom:1px #c0c0c0 solid;
32 |   }
33 |   }
34 |   
35 | 
36 | </style>
37 |     
38 | 


--------------------------------------------------------------------------------
/src/components/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="continer">
 3 |         
 4 |         <div class="big">{{title.big_title}}</div>
 5 |         <div class="small">{{title.small_title}}</div>
 6 | 
 7 |     </div>
 8 | </template>
 9 | 
10 | <script lang='ts'>
11 | export default {
12 |   name: "Title",
13 |   props: {
14 |    title:{}
15 |   },
16 | };
17 | </script>
18 | 
19 | <style scoped lang="less">
20 |     .continer{
21 |         text-align:center;
22 |         .big{
23 |             
24 |             font-size: 18px;
25 |             font-weight:bold;
26 |         
27 |             }
28 |         .small{
29 |             padding-top:10px;
30 |             font-size: 14px;
31 |             color:#888;
32 |         }
33 | 
34 |     }
35 |    
36 | </style>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <meta name="referrer"  content="no-referrer" />
 9 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
10 |     <title>
11 |         <%= htmlWebpackPlugin.options.title %>
12 |     </title>
13 | </head>
14 | 
15 | <body>
16 |     <noscript>
17 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
18 |     </noscript>
19 |     <div id="app"></div>
20 |     <!-- built files will be auto injected -->
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/src/components/Swipe2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 | 
 4 | 
 5 | 
 6 | </div>
 7 | 
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | export default {
12 |     name:'Swipe2',
13 |     props:{
14 |        lunboList:[]
15 |    },
16 |     
17 | }
18 | </script>
19 | 
20 | <style scoped lang="less">
21 |  body {
22 |       background: #fff;
23 |       font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
24 |       font-size: 14px;
25 |       color: #000;
26 |       margin: 0;
27 |       padding: 0;
28 |     }
29 | 
30 |     .swiper-container {
31 |       width: 100%;
32 |       padding-top: 50px;
33 |       padding-bottom: 50px;
34 |     }
35 | 
36 |     .swiper-slide {
37 |       background-position: center;
38 |       background-size: cover;
39 |       width: 300px;
40 |       height: 300px;
41 | 
42 |     }
43 | 
44 | </style>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": false,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env"
16 |     ],
17 |     "paths": {
18 |       "@/*": [
19 |         "src/*"
20 |       ]
21 |     },
22 |     "lib": [
23 |       "esnext",
24 |       "dom",
25 |       "dom.iterable",
26 |       "scripthost"
27 |     ]
28 |   },
29 |   "include": [
30 |     "src/**/*.ts",
31 |     "src/**/*.tsx",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |     "tests/**/*.tsx"
35 |   ],
36 |   "exclude": [
37 |     "node_modules"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/src/views/mine/member.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <van-nav-bar
 4 |       title="会员码"
 5 |       left-arrow
 6 |       @click-left="onClickLeft"
 7 |     />
 8 |     <q-rcode :name="state.name"></q-rcode>
 9 | 
10 |     
11 | 
12 |   </div>
13 | </template>
14 | 
15 | <script lang="ts">
16 | import { useRouter } from "vue-router";
17 | import QRcode from "../../components/QRcode.vue";
18 | import Login from "../login/Login.vue"
19 | import { ref,reactive } from 'vue';
20 | export default {
21 |   name: "Member",
22 |   components: { QRcode,Login },
23 |   props:["name"],
24 |   setup(props) {
25 |     const state=reactive({
26 |       name:sessionStorage
27 |     })
28 |     const router = useRouter();
29 |     const onClickLeft = () => {
30 |       router.push("/personal");
31 |     };
32 | 
33 |     return { onClickLeft ,state};
34 |   },
35 | };
36 | </script>
37 | 
38 | 


--------------------------------------------------------------------------------
/src/views/Car/EmptyCar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |          <div class="img">
 4 |       <img src="../../assets/car.png" />
 5 |       <div class="toast">购物车还是空的</div>
 6 |       <router-link :to="'/'"><button >进店逛逛吧</button></router-link>
 7 |     </div>
 8 |     </div>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | export default {
13 |     name:"EmptyCar"
14 |     
15 | }
16 | </script>
17 | 
18 | <style lang="less" scoped>
19 | .img {
20 |   font-size: 30px;
21 |  font-family: cursive;
22 |   img {
23 |     margin-left: 70px;
24 |     margin-top: 40px;
25 |   }
26 |   .toast {
27 |     margin-left: 90px;
28 |     margin-top: 20px;
29 |   }
30 |   button {
31 |     width: 150px;
32 |     height: 50px;
33 |     font-size:22px;
34 |     border-radius: 20px;
35 |     background-color:#fb5039;
36 |     margin-top: 30px;
37 |     margin-left: 115px;
38 |     border:0;
39 |     color:#000  ;
40 | }
41 | }
42 | 
43 | </style>


--------------------------------------------------------------------------------
/src/utils/api.js:
--------------------------------------------------------------------------------
 1 | export const LunboUrl = "/api/getlunbo"
 2 | export const generalUrl = "/api/getgeneral"
 3 | export const blankUrl = "/api/getblank"
 4 | export const goUrl = "/api/getgo"
 5 | export const general2Url = "/api/getgeneral2"
 6 | export const iconUrl = "/api/geticon"
 7 | export const goodsNatureUrl = "/api/getgoodsNature"
 8 | export const goodsUrl = "/api/getgoods"
 9 | export const TitleUrl = "/api/getTitle"
10 | export const cupUrl = "/api/getCup"
11 | export const chairUrl = "/api/getChair"
12 | export const easyUrl = "/api/getEasy"
13 | export const chair2Url = "/api/getchair2"
14 | export const officeUrl = "/api/getoffice"
15 | export const bigLightUrl = "/api/getbiglight"
16 | export const lampsUrl = "/api/getlamps"
17 | export const deskUrl = "/api/getdesk"
18 | export const woodsUrl = "/api/getwoods"
19 | export const newUrl = "/api/getnew/"
20 | export const categoryUrl = "/api/getlist/"
21 | export const checkUrl = "/api/login"


--------------------------------------------------------------------------------
/src/components/QRcode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="qrCode">
 3 |     <div id="code"></div>
 4 |     <canvas id="canvas"></canvas>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import QRcode from "qrcode";
10 | import { defineComponent, onMounted, reactive, toRefs } from "vue";
11 | export default defineComponent({
12 |   name: "QRcode",
13 |   props:['name'],
14 |   setup(props) {
15 |     const state = {
16 |       msg: "欢迎来到Cabana家具店",
17 |       code: "",
18 |     };
19 | 
20 |     const useqrcode = () => {
21 |       console.log(props.name,"cccccccccc")
22 |       const canvas = document.getElementById("canvas");
23 |       QRcode.toCanvas(
24 |         canvas,
25 |         state.msg,
26 |       );
27 |     };
28 |     onMounted(() => {
29 |         useqrcode();
30 |     });
31 | 
32 |     return { ...toRefs(state), useqrcode };
33 |   },
34 | });
35 | </script>
36 | 
37 | <style scoped lang="less">
38 |  #canvas{
39 |    margin-top:50px;
40 |    margin-left:120px;
41 |  }
42 | </style>


--------------------------------------------------------------------------------
/src/components/Grid.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <van-grid
 4 |       :gutter="3"
 5 |       class="grid"
 6 |       :border="false"
 7 |     >
 8 |       <van-grid-item
 9 |         v-for="item in gridList"
10 |         :key="item.image_url"
11 |         :to="'/goodsInfo/' + item.id"
12 |         class="box"
13 |       >
14 |         <van-image :src="item.image_url" />
15 |         <div class="content">{{item.title}}</div>
16 |         <div class="content">￥{{item.price}}</div>
17 |       </van-grid-item>
18 |     </van-grid>
19 |   </div>
20 | </template>
21 | 
22 | <script lang='ts'>
23 | export default {
24 |   name: "Grid",
25 |   props: {
26 |     gridList: [],
27 |   },
28 | };
29 | </script>
30 | 
31 | <style scoped lang="less">
32 | .van-grid {
33 |   margin-top: 20px;
34 |   /deep/ .van-grid-item {
35 |       padding:0;
36 |        /deep/ .van-grid-item__content {
37 |            padding-top:0;
38 |            padding-left:0;
39 |            padding-right:0;
40 |            padding-bottom:0;
41 |            .content{
42 |                width:100%;
43 |                height:35px;
44 |                font-size: 12px;
45 |                font-weight:bold;
46 |                overflow:hidden;
47 |                text-overflow:ellipsis;
48 |                text-align:center;
49 | 
50 |            }
51 |   }
52 |   }
53 | }
54 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "furniture_mall",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@types/qrcode": "^1.4.0",
12 |     "axios": "^0.21.1",
13 |     "core-js": "^3.6.5",
14 |     "qrcode": "^1.4.4",
15 |     "vant": "^3.0.6",
16 |     "vue": "^3.0.0",
17 |     "vue-router": "^4.0.0-0",
18 |     "vuex": "^4.0.0-0",
19 |     "vuex-persistedstate": "^4.0.0-beta.3"
20 |   },
21 |   "devDependencies": {
22 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
23 |     "@typescript-eslint/parser": "^2.33.0",
24 |     "@vue/cli-plugin-babel": "~4.5.0",
25 |     "@vue/cli-plugin-eslint": "~4.5.0",
26 |     "@vue/cli-plugin-router": "~4.5.0",
27 |     "@vue/cli-plugin-typescript": "~4.5.0",
28 |     "@vue/cli-plugin-vuex": "~4.5.0",
29 |     "@vue/cli-service": "~4.5.0",
30 |     "@vue/compiler-sfc": "^3.0.0",
31 |     "@vue/eslint-config-standard": "^5.1.2",
32 |     "@vue/eslint-config-typescript": "^5.0.2",
33 |     "eslint": "^6.7.2",
34 |     "eslint-plugin-import": "^2.20.2",
35 |     "eslint-plugin-node": "^11.1.0",
36 |     "eslint-plugin-promise": "^4.2.1",
37 |     "eslint-plugin-standard": "^4.0.0",
38 |     "eslint-plugin-vue": "^7.0.0-0",
39 |     "less": "^3.0.4",
40 |     "less-loader": "^5.0.0",
41 |     "typescript": "~3.9.3"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/views/Car.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="body">
 3 |     <van-nav-bar
 4 |       title="购物车"
 5 |       class="car"
 6 |       fixed="true"
 7 |     />
 8 |      <shop-car v-if="goodsList.length>0"  :goods="goodsList"></shop-car>
 9 |      <empty-car v-else></empty-car>
10 |   
11 |      
12 |   </div>
13 | 
14 | </template>
15 | <script lang="ts">
16 | import { defineComponent, toRefs ,reactive} from "vue";
17 | import EmptyCar from "./Car/EmptyCar.vue"
18 | import ShopCar from "./Car/ShopCar.vue"
19 | import xqaxios from '../utils/axios'
20 | import {Toast} from 'vant'
21 | import { useRouter } from "vue-router";
22 | export default defineComponent({
23 |   name: "Car",
24 |   components:{EmptyCar,ShopCar},
25 |   setup(){
26 |     const state=reactive({
27 |       goodsList:[],
28 |       flag:false
29 |     })
30 |      const getGoodsList = async () => {
31 |       let result = await xqaxios("GET", "/api/getcar");
32 |       state.goodsList = result.message;
33 |       console.log(state.goodsList,"000000000000")
34 |     };
35 |     const router=useRouter()
36 |     const justify=()=>{
37 |      if(!sessionStorage.getItem("isLogin")){
38 |        router.push('/personal')
39 |        Toast("请先登录")
40 |      }
41 |     }
42 |     justify();
43 |     getGoodsList();
44 |     return {...toRefs(state)}
45 |   }
46 | });
47 | </script>
48 | 
49 | <style scoped lang="less">
50 |   .body{
51 |     padding-bottom:100px;
52 |   }
53 | 
54 | 
55 | </style>


--------------------------------------------------------------------------------
/src/views/search/search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <van-nav-bar
 4 |       left-arrow
 5 |       placeholder="true"
 6 |       @click-left="onClickLeft"
 7 |     >
 8 |       <template #title>
 9 |         商品搜索
10 |       </template>
11 |     </van-nav-bar>
12 |     <form action="/">
13 |       <van-search
14 |         v-model="value"
15 |         show-action
16 |         placeholder="请输入搜索关键词"
17 |         @search="onSearch"
18 |       />
19 |     </form>
20 |      <list :goodsList="goodsList"></list>
21 |   </div>
22 | </template>
23 | 
24 | <script lang="ts">
25 | import { ref,reactive,toRefs } from "vue";
26 | import { Toast } from "vant";
27 | import xqaxios from "../../utils/axios.js";
28 | import {useRouter} from 'vue-router';
29 | import List from '../../components/List.vue'
30 | export default {
31 |   name: "Search",
32 |   components:{List},
33 |   setup() {
34 |     const state=reactive({
35 |         goodsList:[]
36 |     })
37 | 
38 |     const value = ref("");
39 |     const getGoodsList = async (name) => {
40 |         console.log(name,"9999999999");
41 |       let result = await xqaxios("GET", "/api/search/" + `${name}`);
42 |       state.goodsList = result.message;
43 |     };
44 |     const onSearch = (val) => {
45 |         console.log(val);
46 |         getGoodsList(val)
47 |     };
48 |     const router=useRouter();
49 |     
50 |     const onClickLeft=()=>{
51 |       router.push('/classify')
52 |     }
53 | 
54 |     return {
55 |       value,
56 |       onSearch,
57 |       onClickLeft,
58 |       ...toRefs(state)
59 |     };
60 |   },
61 | };
62 | </script>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 |   <div>
 4 |     <div class="container">
 5 |       <router-view />
 6 |       <van-tabbar v-model="active" v-show='$route.meta.showTabbar' fixed="true" placeholder="true" >
 7 |         <van-tabbar-item
 8 |           icon="home-o"
 9 |           to='/'
10 |         >首页</van-tabbar-item>
11 |         <van-tabbar-item
12 |           icon="bag-o"
13 |           to='/classify'
14 |         >分类</van-tabbar-item>
15 |         <van-tabbar-item to='/car'>
16 |           <van-action-bar-icon
17 |             icon="shopping-cart-o"
18 |             text="购物车"
19 |           />
20 |         </van-tabbar-item>
21 |         <van-tabbar-item
22 |           icon="friends-o"
23 |           to='/personal'
24 |         >个人中心</van-tabbar-item>
25 |       </van-tabbar>
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <style lang="less" >
31 | * {
32 |   margin: 0px;
33 |   padding: 0px;
34 | }
35 | .container {
36 |   
37 |  /deep/ .van-tabbar--fixed {
38 |     z-index: 999;
39 | }
40 |   .van-tabbar-item--active {
41 |     background: #eee;
42 |     .van-action-bar-icon {
43 |       color: rgba(12, 168, 177, 0.801);
44 |       background-color: transparent;
45 |       .van-icon-shopping-cart-o {
46 |         color: rgba(12, 168, 177, 0.801);
47 |       }
48 |     }
49 |   }
50 | }
51 | </style>
52 | 
53 | <script lang="ts">
54 | import { defineComponent, ref } from "vue";
55 | 
56 | export default defineComponent({
57 |   setup() {
58 |     const active = ref(0);
59 |     return { active };
60 |   },
61 |   name: "Home",
62 |   components: {},
63 | });
64 | </script>
65 | 
66 | 
67 | 
68 | 


--------------------------------------------------------------------------------
/src/utils/axios.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import QS from 'qs';
 3 | 
 4 | //设置超时时间
 5 | axios.defaults.timeout = 10000;
 6 | // post请求头
 7 | axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 8 | 
 9 | 
10 | export default function xqaxios(method, url, params) {
11 |     if (method == 'GET') {
12 |         return get(url, params);
13 |     } else if (method == 'POST') {
14 |         return post(url, params);
15 |     }
16 | }
17 | 
18 | // 封装get方法
19 | function get(url, params) {
20 |     return new Promise((resolve, reject) => {
21 |         axios.get(url, params).then(res => {
22 |             resolve(res.data);
23 |         }).catch(err => {
24 |             reject(err.data);
25 |         })
26 |     });
27 | }
28 | 
29 | // 封装post方法  {name:"xiaoming",age:123}  --->  name=xiaoming&age=123
30 | function post(url, params) {
31 |     return new Promise((resolve, reject) => {
32 |         axios.post(url, QS.stringify(params))
33 |             .then(res => {
34 |                 resolve(res.data);
35 |             })
36 |             .catch(err => {
37 |                 reject(err.data)
38 |             })
39 |     });
40 | }
41 | 
42 | axios.interceptors.request.use(function(request) {
43 |     //console.log("请求执行之前",response)
44 |     return request;
45 | }, function(error) {
46 |     return Promise.reject(error);
47 | });
48 | 
49 | //响应的拦截器
50 | axios.interceptors.response.use(
51 |     response => {
52 |         //console.log("响应处理之前",response);
53 |         return response
54 |     },
55 |     error => {
56 |         return Promise.reject(error)
57 |     }
58 | )


--------------------------------------------------------------------------------
/src/views/login/Register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <van-nav-bar
 4 |       title="注册"
 5 |       left-arrow
 6 |       @click-left="onClickLeft"
 7 |       fixed="true"
 8 |     />
 9 |     <div class="body">
10 | <van-form @submit="onSubmit">
11 |   <van-field
12 |     v-model="state.username"
13 |     name="用户名"
14 |     label="用户名"
15 |     placeholder="用户名"
16 |     :rules="[{ required: true, message: '请填写用户名' }]"
17 |   />
18 |   <van-field
19 |     v-model="state.password"
20 |     type="password"
21 |     name="密码"
22 |     label="密码"
23 |     placeholder="密码"
24 |     :rules="[{ required: true, message: '请填写密码' }]"
25 |   />
26 |   <div style="margin: 16px;">
27 |     <van-button round block type="primary" native-type="submit" >
28 |       提交
29 |     </van-button>
30 |   </div>
31 | </van-form>
32 | </div>
33 |   </div>
34 | </template>
35 | 
36 | <script>
37 | import { useRouter } from "vue-router";
38 | import {reactive} from 'vue'
39 | import xqaxios from "../../utils/axios.js"
40 | import { Toast } from 'vant';
41 | export default {
42 |   name: "Register",
43 |   setup() {
44 |     const route = useRouter();
45 |     const state = reactive({
46 |       username: '',
47 |       password: '',
48 |       userName:'',
49 |       pw:''
50 |     });
51 |     const onSubmit = async(values) => {
52 |       state.userName=state.username;
53 |       state.pw=state.password;
54 |       let result = await xqaxios("POST", "/api/register",{username:state.userName,password:state.pw});
55 |       Toast("注册成功！！！")
56 |       route.push("/personal");
57 |     };
58 |     const onClickLeft = () => {
59 |       route.push("/personal");
60 |     };
61 |     return {onClickLeft, state,onSubmit,};
62 |   },
63 | };
64 | </script>
65 | 
66 | <style scoped>
67 |     .body{
68 |         padding-top:50px;
69 |     }
70 | </style>


--------------------------------------------------------------------------------
/src/components/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="head">
 4 |       <van-grid
 5 |         :gutter="3"
 6 |         :border="false"
 7 |         :column-num="2"
 8 |       >
 9 |         <van-grid-item
10 |           v-for="item in goodsList"
11 |           :key="item"
12 |           :to="'/goodsInfo/' + item.id"
13 |         >
14 |           <van-image :src="item.pictures.split(',')[0]" />
15 |           <div class="foot">
16 |             <div class="title">{{item.title}}</div>
17 |             <div class="under">
18 |               <span>￥{{item.min_price}}</span>
19 |               <div class="car">
20 |                 <img src="../assets/购物车.png" />
21 |               </div>
22 |             </div>
23 | 
24 |           </div>
25 |         </van-grid-item>
26 |       </van-grid>
27 | 
28 |     </div>
29 |     </div>
30 | </template>
31 | <script lang="ts">
32 | export default {
33 |     name:'List',
34 |     props: {
35 |     goodsList: [],
36 |   },
37 |   setup(props){
38 |     const ss=()=>{
39 |       console.log(props.goodsList,"kkkkkkkkkkkk")
40 |     }
41 |     ss();
42 |   }
43 | 
44 |     
45 | }
46 | </script>
47 | 
48 | <style scoped lang="less">
49 | .head {
50 |   .foot {
51 |     display: flex;
52 |     flex-direction: column;
53 |     justify-content: space-between;
54 |     font-size: 14px;
55 |     width:149px;
56 |     padding:0 8px;
57 |     .title {
58 |       
59 |       height: 20px;
60 |       text-align: left;
61 |       word-break: break-all;
62 |       display: -webkit-box;
63 |       -webkit-line-clamp: 2;
64 |       -webkit-box-orient: vertical;
65 |       overflow: hidden;
66 |     }
67 |     .under {
68 |       height: 20px;
69 |       width: 149px;
70 |       display: flex;
71 |       font-weight:550;
72 |       color:#2c2c2c;
73 |       justify-content: space-between;
74 |       margin-top:15px;
75 |       .car{
76 |         border:1px solid #2c2c2c;
77 |         border-radius: 50%;
78 |       }
79 |     }
80 |   }
81 | }
82 | </style>


--------------------------------------------------------------------------------
/src/views/mine/AddAddress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |    
 4 |     <van-nav-bar
 5 |   title=" 添加收货地址"
 6 |   left-arrow
 7 |   @click-left="onClickLeft"
 8 | />
 9 |     <van-form @submit="onSubmit">
10 |   <van-field
11 |     v-model="state.username"
12 |     label="收货人"
13 |     placeholder="收货人"
14 |     :rules="[{ required: true, message: '请填写收货人' }]"
15 |   />
16 |   <van-field
17 |     v-model="state.phone"
18 |     label="手机号码"
19 |     placeholder="手机号码"
20 |     :rules="[{ required: true, message: '请填写手机号码' }]"
21 |   />
22 |   <van-field
23 |     v-model="state.province"
24 |     label="选择地区"
25 |     placeholder="省、市、区"
26 |     :rules="[{ required: true, message: '选择填写地区' }]"
27 |   />
28 |   <van-field
29 |     v-model="state.address"
30 |     label="详细地址"
31 |     placeholder="详细地址"
32 |     :rules="[{ required: true, message: '请填写详细地址' }]"
33 |   />
34 |   <div style="margin: 16px;">
35 |     <van-button round block type="primary" native-type="submit">
36 |       保存
37 |     </van-button>
38 |   </div>
39 | </van-form>
40 | </div>
41 | </template>
42 | 
43 | <script>
44 | import { Toast } from 'vant'
45 | import { defineComponent,ref,reactive } from 'vue'
46 | import { useRouter } from 'vue-router'
47 | import xqaxios from "../../utils/axios.js"
48 | export default defineComponent ({
49 |     name:"AddAddress",
50 |     setup() {
51 |         const router=useRouter()
52 |         const state=reactive({
53 |             username:'',
54 |             phone:'',
55 |             province:'',
56 |             address:''
57 |         })
58 |         const onClickLeft=()=>{
59 |             router.go(-1)
60 | 
61 |         }
62 |         const onSubmit = (values) => {
63 |             addAddress(state);
64 |         
65 |     };
66 | 
67 |      const addAddress = async (goods) => {
68 |       let result = await xqaxios("POST", "/api/addAddress",goods);
69 |       router.go(-1)
70 | 
71 |         };  
72 | 
73 | 
74 |       
75 |         return{onClickLeft,state,onSubmit}
76 |     }
77 | 
78 | })
79 | </script>
80 | 
81 | <style scoped lang="less">
82 |     /deep/.van-button--primary {
83 |     color: #fff;
84 |     background-color: #ff4400;
85 |     border: 1px solid #ff4400;
86 | }
87 | 
88 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | //官网配置： https://cli.vuejs.org/zh/config/#filenamehashing
 2 | 
 3 | const path = require('path');
 4 | const debug = process.env.NODE_ENV !== 'production'
 5 | 
 6 | module.exports = {
 7 |     //部署应用包时的基本URL，如果是生产环境，部署到 /cli-study/dist 路径；如果是开发环境，部署到根路径
 8 |     publicPath: !debug ?
 9 |         '/cli-study/dist' : '/',
10 |     //输出文件路径
11 |     outputDir: 'dist',
12 |     //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
13 |     assetsDir: 'static',
14 |     //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
15 |     filenameHashing: true,
16 |     // eslint-loader 是否在保存的时候检查
17 |     lintOnSave: false,
18 |     // 是否使用包含运行时编译器的Vue构建版本，设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
19 |     runtimeCompiler: true,
20 |     // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
21 |     transpileDependencies: [],
22 |     // 生产环境不需要sourceMap
23 |     productionSourceMap: false,
24 | 
25 |     // 官网：https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
26 |     // 更多配置参考：https://www.jb51.net/article/150844.htm
27 |     configureWebpack: {
28 |         resolve: {
29 |             alias: {
30 |                 '@': path.resolve(__dirname, './src')
31 |             }
32 |         }
33 |     },
34 | 
35 |     // webpack的链式操作，允许对内部的 webpack 配置进行更细粒度的修改
36 |     // 参考： https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
37 |     chainWebpack: (config) => {
38 |         if (debug) {
39 |             // 本地开发配置
40 |         } else {
41 |             // 生产开发配置
42 |         }
43 |     },
44 | 
45 |     // css的相关配置
46 |     css: {},
47 |     //所有 webpack-dev-server 的选项都支持
48 |     devServer: {
49 |         open: true,
50 |         host: '127.0.0.1',
51 |         port: 3003,
52 |         https: false,
53 |         hotOnly: false,
54 |         proxy: {
55 |             //凡是请求以api开头的都会使用下面的代理服务器
56 |             '/api/*': {
57 |                 target: 'http://localhost:9000/', // 目标服务器地址
58 |                 secure: false, // 目标服务器地址是否是安全协议
59 |                 changeOrigin: true, // 是否修改来源, 为true时会让目标服务器以为是webpack-dev-server发出的请求!服务端和服务端的请求是没有跨域的
60 |                 //pathRewrite: {'^/api': '/'}     // 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
61 |             }
62 |         }
63 |     },
64 |     // 第三方插件配置
65 |     pluginOptions: {}
66 | };


--------------------------------------------------------------------------------
/src/views/Order/myOrder.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <van-nav-bar
 4 |   title="我的订单"
 5 |   left-arrow
 6 |   @click-left="onClickLeft"
 7 |   fixed
 8 | />
 9 |     <div class="contents">
10 |           <div
11 |             v-for="item in List"
12 |             :key="item.id"
13 |           >
14 |             <div class="top">
15 |               <div class="img">
16 |                 <img
17 |                   :src="item.imgUrl"
18 |                   alt=""
19 |                 >
20 |               </div>
21 |               <div class="right">
22 |                 <div class="first">{{item.name}}</div>
23 |                 <div class="second">{{item.title}}</div>
24 |                 <div class="third">
25 |                   <span class="left">￥{{item.price/100}}</span>
26 |                   <span class="right">x{{item.count}}</span>
27 |                 </div>
28 |               </div>
29 |             </div>
30 | 
31 |           </div>
32 |         </div>
33 | 
34 |     </div>
35 | </template>
36 | 
37 | <script lang="ts">
38 | import { defineComponent } from "vue";
39 | import { useRouter } from "vue-router";
40 | 
41 | 
42 | export default defineComponent({
43 |     name:'myOrder',
44 |     setup(){
45 |         const router=useRouter()
46 |         const onClickLeft = () => {
47 |             router.push('/personal')
48 |         };
49 |         const List = JSON.parse(sessionStorage.getItem("orderList"));
50 | 
51 |         return{onClickLeft,List}
52 |     }
53 |     
54 | })
55 | </script>
56 | 
57 | <style lang="less" scoped>
58 |     .contents{
59 |         padding-top:46px;
60 |         background-color:#f0f0f0;
61 |         height:620px;
62 |         .top{
63 |             padding:15px;
64 |             margin-top:20px;
65 |             background-color: #fff;
66 |             border-radius:10px;
67 |             display:flex;
68 |             .img{
69 |                 width:100px;
70 |                 height:100px;
71 |                 img{
72 |                     border-radius:10px;
73 |                     width:100%;
74 |                     height:100%;
75 | 
76 |                 }
77 |             }
78 |             .right{
79 |                 margin-left: 10px;
80 |                 .first{
81 |                     font-weight: 600;
82 |                 }
83 |                 .second{
84 |                     color:#3f3d3d;
85 |                     font-size:14px;
86 |                 }
87 |                 .third{
88 |                     margin-top:20px;
89 |                     display:flex;
90 |                     justify-content: space-between;
91 |                 }
92 |             }
93 |         }
94 |     }
95 | 
96 | </style>


--------------------------------------------------------------------------------
/src/views/category/category.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <van-nav-bar
  4 |       left-arrow
  5 |       placeholder="true"
  6 |     @click-left="onClickLeft"
  7 |     safe-area-inset-top="true"
  8 |     >
  9 |       <template #title>
 10 |         {{name}}
 11 |       </template>
 12 |     </van-nav-bar>
 13 |    <van-pull-refresh v-model="loading" @refresh="onRefresh">
 14 |     <list :goodsList="goodsList"></list>
 15 |     </van-pull-refresh>
 16 | 
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script lang="ts">
 21 | import { defineComponent, toRefs, reactive } from "vue";
 22 | import xqaxios from "../../utils/axios.js";
 23 | import {useRouter} from 'vue-router';
 24 | import { Toast } from 'vant';
 25 | import List from '../../components/List.vue'
 26 | 
 27 | export default defineComponent({
 28 |   name: "Category",
 29 |   props: ["name"],
 30 |   components:{List},
 31 |   setup(props, context) {
 32 |     const state = reactive({
 33 |       goodsList: [],
 34 |       name: props.name,
 35 |       List: [],
 36 |       count: 0,
 37 |       loading: false,
 38 |       finished: false,
 39 |     });
 40 |     const router=useRouter();
 41 |     const getGoodsList = async () => {
 42 |       let result = await xqaxios("GET", "/api/getlist/" + `${state.name}`);
 43 |       state.goodsList = result.message;
 44 |     };
 45 |     const onClickLeft=()=>{
 46 |       router.push('/classify')
 47 |     }
 48 | const onRefresh = () => {
 49 |       setTimeout(() => {
 50 |         Toast('刷新成功');
 51 |         state.loading = false;
 52 |         state.count++;
 53 |       }, 1000);
 54 |     };
 55 |     
 56 | 
 57 |     getGoodsList();
 58 |     return { ...toRefs(state),onClickLeft,onRefresh,};
 59 |   },
 60 | });
 61 | </script>
 62 | 
 63 | <style scoped lang="less">
 64 | 
 65 | /deep/ .van-nav-bar {
 66 |     position: fixed;
 67 |     z-index: 999;
 68 |     width: 100%;
 69 | }
 70 | .head {
 71 |  
 72 |   .foot {
 73 |     display: flex;
 74 |     flex-direction: column;
 75 |     justify-content: space-between;
 76 |     font-size: 14px;
 77 |     width:149px;
 78 |     padding:0 8px;
 79 |     .title {
 80 |       
 81 |       height: 20px;
 82 |       text-align: left;
 83 |       word-break: break-all;
 84 |       display: -webkit-box;
 85 |       -webkit-line-clamp: 2;
 86 |       -webkit-box-orient: vertical;
 87 |       overflow: hidden;
 88 |     }
 89 |     .under {
 90 |       height: 20px;
 91 |       width: 149px;
 92 |       display: flex;
 93 |       font-weight:550;
 94 |       color:#2c2c2c;
 95 |       justify-content: space-between;
 96 |       margin-top:15px;
 97 |       .car{
 98 |         border:1px solid #2c2c2c;
 99 |         border-radius: 50%;
100 |       }
101 |     }
102 |   }
103 | }
104 | </style>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
14 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
15 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
16 |     </ul>
17 |     <h3>Essential Links</h3>
18 |     <ul>
19 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
20 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
21 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
22 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
23 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
24 |     </ul>
25 |     <h3>Ecosystem</h3>
26 |     <ul>
27 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
28 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
29 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
30 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
31 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
32 |     </ul>
33 |   </div>
34 | </template>
35 | 
36 | <script lang="ts">
37 | import { defineComponent } from 'vue'
38 | 
39 | export default defineComponent({
40 |   name: 'HelloWorld',
41 |   props: {
42 |     msg: String
43 |   }
44 | })
45 | </script>
46 | 
47 | <!-- Add "scoped" attribute to limit CSS to this component only -->
48 | <style scoped lang="less">
49 | h3 {
50 |   margin: 40px 0 0;
51 | }
52 | ul {
53 |   list-style-type: none;
54 |   padding: 0;
55 | }
56 | li {
57 |   display: inline-block;
58 |   margin: 0 10px;
59 | }
60 | a {
61 |   color: #42b983;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/components/Recommend.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="body">
  3 |     <div class="title">更多精选商品</div>
  4 |     <van-grid
  5 |       :border="false"
  6 |       :column-num="2"
  7 |     >
  8 |       <van-grid-item
  9 |         v-for="item in recommendList"
 10 |         :key="item.id"
 11 |         @click="goInfo(item.id)"
 12 |       >
 13 |         <van-image :src="item.pictures.split(',')[0]" />
 14 |         <div class="foot">
 15 |           <div class="title">{{item.title}}</div>
 16 |           <div class="under">
 17 |             <span>￥{{item.min_price}}</span>
 18 |             <div class="car">
 19 |               <img src="../assets/购物车.png" />
 20 |             </div>
 21 |           </div>
 22 |         </div>
 23 |       </van-grid-item>
 24 |     </van-grid>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script lang="ts">
 29 | import List from "./List.vue";
 30 | import xqaxios from "../utils/axios";
 31 | import { toRefs,reactive } from "vue";
 32 | import { useRouter } from "vue-router";
 33 | export default {
 34 |   name: "Recommend",
 35 |   components: { List },
 36 |   setup() {
 37 |     const state = reactive({
 38 |       recommendList: [],
 39 |     });
 40 | 
 41 |     const getList = async () => {
 42 |       let result = await xqaxios("GET", "/api/recommend");
 43 |       state.recommendList = result.message;
 44 |       // console.log(state.recommendList, "jjjjjjjjjjjjj");
 45 |     };
 46 | 
 47 |     const router=useRouter()
 48 |     const goInfo=(id)=>{
 49 |       console.log(id,"gogogogo")
 50 |       router.push(`/goodsInfo/${id}`)
 51 |     }
 52 |     getList();
 53 | 
 54 |     return { ...toRefs(state),goInfo };
 55 |   },
 56 | };
 57 | </script>
 58 | 
 59 | <style scoped lang="less">
 60 | .body {
 61 |   padding: 10;
 62 |   padding-bottom: 30px;
 63 |   .van-grid-item {
 64 |     margin-top: 20px;
 65 |   }
 66 |   .title {
 67 |     height: 30px;
 68 |     padding: 10px 0;
 69 |     margin-top: 20px;
 70 |     font-size: 16px;
 71 |     font-weight: bold;
 72 |     text-align: center;
 73 |     line-height: 30px;
 74 |   }
 75 |   .foot {
 76 |     display: flex;
 77 |     flex-direction: column;
 78 |     justify-content: space-between;
 79 |     font-size: 14px;
 80 |     width: 145px;
 81 |     padding: 0 8px;
 82 |     .title {
 83 |       height: 20px;
 84 |       text-align: left;
 85 |       word-break: break-all;
 86 |       display: -webkit-box;
 87 |       -webkit-line-clamp: 2;
 88 |       -webkit-box-orient: vertical;
 89 |       overflow: hidden;
 90 |     }
 91 |     .under {
 92 |       height: 20px;
 93 |       width: 145px;
 94 |       display: flex;
 95 |       font-weight: 550;
 96 |       color: #2c2c2c;
 97 |       justify-content: space-between;
 98 |       margin-top: 15px;
 99 |       .car {
100 |         border: 1px solid #2c2c2c;
101 |         border-radius: 50%;
102 |       }
103 |     }
104 |   }
105 | }
106 | </style>


--------------------------------------------------------------------------------
/src/views/mine/EditAddress.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <van-nav-bar
  4 |       title=" 编辑收货地址"
  5 |       left-arrow
  6 |       @click-left="onClickLeft"
  7 |     />
  8 | 
  9 |     <van-form @submit="onSubmit">
 10 |       <van-field
 11 |         v-model="username"
 12 |         label="收货人"
 13 |         placeholder="收货人"
 14 |         :rules="[{ required: true, message: '请填写收货人' }]"
 15 |       />
 16 |       <van-field
 17 |         v-model="phone"
 18 |         label="手机号码"
 19 |         placeholder="手机号码"
 20 |         :rules="[{ required: true, message: '请填写手机号码' }]"
 21 |       />
 22 |       <van-field
 23 |         v-model="provinces"
 24 |         label="选择地区"
 25 |         placeholder="省、市、区"
 26 |         :rules="[{ required: true, message: '选择填写地区' }]"
 27 |       />
 28 |       <van-field
 29 |         v-model="address"
 30 |         label="详细地址"
 31 |         placeholder="详细地址"
 32 |         :rules="[{ required: true, message: '请填写详细地址' }]"
 33 |       />
 34 |       <div style="margin: 16px;">
 35 |         <van-button
 36 |           round
 37 |           block
 38 |           type="primary"
 39 |           native-type="submit"
 40 |         >
 41 |           保存
 42 |         </van-button>
 43 |       </div>
 44 |     </van-form>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import { defineComponent, reactive, toRefs } from "vue";
 50 | import xqaxios from "../../utils/axios.js";
 51 | import { useRouter } from "vue-router";
 52 | export default defineComponent({
 53 |   name: "EditAddress",
 54 |   props: ["id"],
 55 |   setup(props) {
 56 |     const state = reactive({
 57 |       id: props.id,
 58 |       address: {},
 59 |       username: "",
 60 |       phone: "",
 61 |       provinces: "",
 62 |       address:'',
 63 |       msg: [],
 64 |     });
 65 |     const getAddressByid = async (id) => {
 66 |       let result = await xqaxios("GET", "/api/oneaddress/" + `${id}`);
 67 |       state.msg = result.message[0];
 68 |       state.username=state.msg.username;
 69 |       state.phone=state.msg.phone;
 70 |       state.provinces=state.msg.provinces;
 71 |       state.address=state.msg.address;
 72 |       console.log(state.msg, "sssssssss");
 73 |     };
 74 |     getAddressByid(state.id);
 75 | 
 76 |      const editAddress = async (goods) => {
 77 |       let result = await xqaxios("POST", "/api/editAddress",goods);
 78 |       router.go(-1)
 79 | 
 80 |         };  
 81 |     const onSubmit = (value) => {
 82 |        editAddress(state);
 83 |     };
 84 |     const router = useRouter();
 85 |     const onClickLeft = () => {
 86 |       router.go(-1);
 87 |     };
 88 | 
 89 |     return { ...toRefs(state), onSubmit, onClickLeft };
 90 |   },
 91 | });
 92 | </script>
 93 | 
 94 | <style scoped lang="less">
 95 | /deep/.van-button--primary {
 96 |   color: #fff;
 97 |   background-color: #ff4400;
 98 |   border: 1px solid #ff4400;
 99 | }
100 | </style>


--------------------------------------------------------------------------------
/src/views/Goods/GoodsHot.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <van-nav-bar
  4 |       title=" 店铺热榜"
  5 |       left-arrow
  6 |       @click-left="onClickLeft"
  7 |     />
  8 |     <div class="image">
  9 |       <img src="../../assets/hot.jpg" />
 10 |      
 11 |     </div>
 12 | 
 13 |     <div class="content">
 14 |         <div v-for="item in hotList" :key="item.id">
 15 |             <div class="box">
 16 |                 <div class="left"><img :src="item.pictures.split(',')[0]"/>
 17 |                  <div class="number">{{item.ranking}}</div></div>
 18 |                 <div class="right">
 19 |                     <div>{{item.title}}</div>
 20 |                     <div class="down">￥{{item.min_price}}</div>
 21 |                 </div>
 22 |             </div>
 23 |         </div>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | 
 29 | <script lang="ts">
 30 | import { useRouter } from "vue-router";
 31 | import xqaxios from "../../utils/axios.js";
 32 | import { reactive, toRefs } from "vue";
 33 | export default {
 34 |   name: "GoodsHot",
 35 |   setup() {
 36 |     const state = reactive({
 37 |       hotList: [],
 38 |     });
 39 |     const router = useRouter();
 40 |     const onClickLeft = () => {
 41 |       router.go(-1);
 42 |     };
 43 | 
 44 |     const getHot = async () => {
 45 |       let result = await xqaxios("GET", "/api/hot");
 46 |       state.hotList = result.message;
 47 |       console.log(state.hotList,"222222222")
 48 |     };
 49 |     getHot();
 50 | 
 51 |     return { onClickLeft,...toRefs(state) };
 52 |   },
 53 | };
 54 | </script>
 55 | 
 56 | <style lang="less" scoped>
 57 | .image {
 58 |   width: 100%;
 59 |   height: 120px;
 60 |   img {
 61 |     width: 100%;
 62 |     height: 100%;
 63 |   }
 64 | }
 65 | 
 66 | .content{
 67 |     padding:10px;
 68 |     background-color: #e8e8e8;
 69 |     .box{
 70 |         padding:0;
 71 |         background-color: #fff;
 72 |         border-radius:10px;
 73 |         height:140px;
 74 |         display:flex;
 75 |         margin-bottom:20px;
 76 |         font-size:14px;
 77 |         font-weight:bold;
 78 |         .left{
 79 |             position:relative;
 80 |             width:140px;
 81 |             img{
 82 |                 width:100%;
 83 |                 height:100%
 84 |             }
 85 |             .number{
 86 |                 position:absolute;
 87 |                 color:#fff;
 88 |                 width:40px;
 89 |                 height:40px;
 90 |                 top:15px;
 91 |                 left:10px;
 92 |                 background-color:rgba(235, 155, 155, 0.418);
 93 |                 border-radius:50%;
 94 |                 text-align:center;
 95 |                 line-height:40px;
 96 |                 font-size: 20px;
 97 |             }
 98 |         }
 99 | 
100 |         .right{
101 |             flex:1;
102 |             position:relative;
103 |             .down{
104 |                 position:absolute;
105 |                 bottom:10px;
106 |                 left:5px;
107 |             }
108 |         }
109 | 
110 | 
111 | }
112 | }
113 | 
114 | </style>


--------------------------------------------------------------------------------
/src/views/Classify.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <van-nav-bar
  4 |       title="家具分类"
  5 |       @click-left="onClickLeft"
  6 |       fixed
  7 |       :z-index="999"
  8 |     >
  9 |       <template #left>
 10 |         <van-icon
 11 |           name="wap-home-o"
 12 |           size="28"
 13 |           color="black"
 14 |         />
 15 |       </template>
 16 |     </van-nav-bar>
 17 |     <div>
 18 |       <van-sticky :offset-top="46">
 19 |         <van-search
 20 |           v-model="value"
 21 |           placeholder="搜索商品"
 22 |           input-align="center"
 23 |           disabled 
 24 |           @click="toSearch"
 25 |         />
 26 |       </van-sticky>
 27 |     </div>
 28 | 
 29 |     <van-tabs
 30 |       v-model:active="active"
 31 |       class="tab"
 32 |     >
 33 |       <van-tab title="家具">
 34 |         <van-list>
 35 |           <van-cell
 36 |             v-for="item in furnitureList"
 37 |             :key="item.name"
 38 |             :title="item.name"
 39 |             :to="'/category/'+item.name"
 40 |             is-link
 41 |           />
 42 |         </van-list>
 43 |       </van-tab>
 44 |       <van-tab title="灯具">
 45 |         <van-list>
 46 |           <van-cell
 47 |             v-for="item in lamp"
 48 |             :key="item.name"
 49 |             :title="item.name"
 50 |            :to="'/category/'+item.name"
 51 |            is-link
 52 |           />
 53 |         </van-list>
 54 |       </van-tab>
 55 | 
 56 |       <van-tab title="配饰">
 57 |         <van-list>
 58 |           <van-cell
 59 |             v-for="item in accessory"
 60 |             :key="item.name"
 61 |             :title="item.name"
 62 |            :to="'/category/'+item.name"
 63 |            is-link
 64 |           />
 65 |         </van-list>
 66 |       </van-tab>
 67 |     </van-tabs>
 68 |   </div>
 69 | 
 70 | </template>
 71 | <script lang="ts">
 72 | import { defineComponent, reactive, toRefs,ref } from "vue";
 73 | import Tab from "../components/Tab.vue";
 74 | import { useRouter } from "vue-router";
 75 | export default defineComponent({
 76 |   components: { Tab },
 77 |   name: "Classify",
 78 |   setup() {
 79 |      const active = ref(0);
 80 |     const state = reactive({
 81 | 
 82 |       furnitureList: [
 83 |         { name: "餐椅" },
 84 |         { name: "餐桌" },
 85 |         { name: "沙发" },
 86 |         { name: "咖啡桌" },
 87 |         { name: "柜架" },
 88 |         { name: "地毯" },
 89 |         { name: "吧椅板凳" },
 90 |         { name: "书桌" },
 91 |         { name: "办公椅" },
 92 |       ],
 93 |       lamp: [
 94 |         { name: "吊灯" },
 95 |         { name: "台灯" },
 96 |         { name: "落地灯" },
 97 |         { name: "壁灯" },
 98 |         { name: "吸顶灯" },
 99 |       ],
100 |       accessory: [
101 |         { name: "玻璃器皿" },
102 |         { name: "咖啡茶具" },
103 |         { name: "装饰画" },
104 |         { name: "花瓶" },
105 |         { name: "餐盘刀叉" },
106 |         { name: "靠垫毯子" },
107 |         { name: "香氛" },
108 |         { name: "镜子" },
109 |         { name: "洗浴用品" },
110 |       ],
111 |     });
112 |     const router = useRouter();
113 |     const onClickLeft = () => {
114 |       router.push("/");
115 |     };
116 |     const toSearch=()=>{
117 |       router.push("/search")
118 |     }
119 |     return { ...toRefs(state), onClickLeft,active ,toSearch};
120 |   },
121 | });
122 | </script>
123 | 
124 | <style scoped lang="less">
125 | .tab {
126 |   padding-top: 50px;
127 |   /deep/.van-tab {
128 |     height: 24px;
129 |     border-right: 1px #f0f0f0 solid;
130 |     /deep/.van-tabs__line {
131 |       background-position: #fff;
132 |     }
133 |   }
134 |   .van-cell{
135 |     padding:10px 26px;
136 |   }
137 | }
138 | </style>


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
  1 | import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  2 | import Home from '../views/Home.vue'
  3 | import Car from '../views/Car.vue'
  4 | import Classify from '../views/Classify.vue'
  5 | import Personl from '../views/Personal.vue'
  6 | import GoodsInfo from '../views/GoodsInfo.vue'
  7 | import Member from '../views/mine/member.vue'
  8 | import Category from '../views/category/category.vue'
  9 | import Search from '../views/search/search.vue'
 10 | import Address from '../views/mine/Address.vue'
 11 | import Register from '../views/login/Register.vue'
 12 | import Message from '../views/mine/message.vue'
 13 | import AddAddress from '../views/mine/AddAddress.vue'
 14 | import EditAddress from '../views/mine/EditAddress.vue'
 15 | import GoodsHot from '../views/Goods/GoodsHot.vue'
 16 | import ConfirmOrder from '../views/Order/ConfirmOrder.vue'
 17 | import myOrder from '../views/Order/myOrder.vue'
 18 | const routes: Array<RouteRecordRaw> = [
 19 |   {
 20 |     path: '/',
 21 |     name: 'Home',
 22 |     component: Home,
 23 |     meta:{
 24 |       showTabbar:true
 25 |     }
 26 |   },
 27 |   {
 28 |     path:'/car',
 29 |     name:'Car',
 30 |     component:Car,
 31 |     meta:{
 32 |       showTabbar:true
 33 |     }
 34 |   },
 35 |   {
 36 |     path:'/classify',
 37 |     name:'Classify',
 38 |     component:Classify,
 39 |     meta:{
 40 |       showTabbar:true
 41 |     }
 42 |   },{
 43 |     path:'/personal',
 44 |     name:'Personl',
 45 |     component:Personl,
 46 |     props: true,
 47 |     meta:{
 48 |       showTabbar:true
 49 |     }
 50 |   },{
 51 |     path:'/goodsInfo/:id',
 52 |     name:'GoodsInfo',
 53 |     component:GoodsInfo,
 54 |     props: true,
 55 |     meta:{
 56 |       showTabbar:false
 57 |     }
 58 |   },{
 59 |     path:'/code/:name',
 60 |     name:'Member',
 61 |     component:Member,
 62 |     meta:{
 63 |       showTabbar:false
 64 |     }
 65 |   },{
 66 |     path:'/category/:name',
 67 |     name:'Category',
 68 |     props: true,
 69 |     component:Category,
 70 |     meta:{
 71 |       showTabbar:false
 72 |     }
 73 |   },{
 74 |     path:'/search',
 75 |     name:'Search',
 76 |     props: true,
 77 |     component:Search,
 78 |     meta:{
 79 |       showTabbar:false
 80 |     }
 81 |   },{
 82 |     path:'/api/address',
 83 |     name:'Address',
 84 |     props: true,
 85 |     component:Address,
 86 |     meta:{
 87 |       showTabbar:false
 88 |     }
 89 |   },{
 90 |     path:'/api/register',
 91 |     name:'Register',
 92 |     props: true,
 93 |     component:Register,
 94 |     meta:{
 95 |       showTabbar:false
 96 |     }
 97 |   },{
 98 |     path:'/api/message',
 99 |     name:'Message',
100 |     props: true,
101 |     component:Message,
102 |     meta:{
103 |       showTabbar:false
104 |     }
105 |   },{
106 |     path:'/api/address/add',
107 |     name:'AddAddress',
108 |     props: true,
109 |     component:AddAddress,
110 |     meta:{
111 |       showTabbar:false
112 |     }
113 |   },{
114 |     path:'/api/address/edit/:id',
115 |     name:'EditAddress',
116 |     props: true,
117 |     component:EditAddress,
118 |     meta:{
119 |       showTabbar:false
120 |     }
121 |   },{
122 |     path:'/api/hot',
123 |     name:'GoodsHot',
124 |     props: true,
125 |     component:GoodsHot,
126 |     meta:{
127 |       showTabbar:false
128 |     }
129 |   },{
130 |     path:'/api/confirm',
131 |     name:'ConfirmOrder',
132 |     props: true,
133 |     component:ConfirmOrder,
134 |     meta:{
135 |       showTabbar:false
136 |     }
137 |   },{
138 |     path:'/api/order',
139 |     name:'myOrder',
140 |     props: true,
141 |     component:myOrder,
142 |     meta:{
143 |       showTabbar:false
144 |     }
145 |   }
146 |   
147 |   
148 | ]
149 | 
150 | const router = createRouter({
151 |   history: createWebHashHistory(),
152 |   routes
153 | })
154 | 
155 | export default router
156 | 


--------------------------------------------------------------------------------
/src/views/login/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="body">
  3 |     <div class="dd">
  4 |       <van-form
  5 |         @submit="onSubmit"
  6 |         class="form"
  7 |       >
  8 |         <van-field
  9 |           v-model="state.userName"
 10 |           name="用户名"
 11 |           label="用户名"
 12 |           placeholder="用户名"
 13 |           :rules="[{ required: true, message: '请填写用户名' }]"
 14 |         />
 15 |         <van-field
 16 |           v-model="state.password"
 17 |           type="password"
 18 |           name="密码"
 19 |           label="密码"
 20 |           placeholder="密码"
 21 |           :rules="[{ required: true, message: '请填写密码' }]"
 22 |         />
 23 |         <div style="margin: 16px;">
 24 |           <van-button
 25 |             round
 26 |             block
 27 |             type="info"
 28 |             native-type="submit"
 29 |             class="button"
 30 |             @click="onSubmit"
 31 |           >登录</van-button>
 32 |           <van-button
 33 |             round
 34 |             block
 35 |             type="info"
 36 |             native-type="submit"
 37 |             class="button"
 38 |             :to="'/api/register'"
 39 |           >注册</van-button>
 40 |         </div>
 41 |       </van-form>
 42 | 
 43 |     </div>
 44 | 
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import { reactive, ref } from "vue";
 50 | import xqaxios from "../../utils/axios.js";
 51 | import checkUrl from "../../utils/api.js";
 52 | import { Toast } from "vant";
 53 | export default {
 54 |   name: "Login",
 55 |   setup(props, context) {
 56 |     const state = reactive({
 57 |       userName: "",
 58 |       password: "",
 59 |       list: {},
 60 |       userList: [],
 61 |       name: "",
 62 |       login: false,
 63 |     });
 64 |     let psTrue = false;
 65 |     const checkOut = async () => {
 66 |       let result = await xqaxios("GET", "/api/login");
 67 |       state.userList = result.message;
 68 |     };
 69 | 
 70 |     checkOut();
 71 |     const onSubmit = (values) => {
 72 |       console.log("submit", values, "333333333333");
 73 |       console.log(state.userList, "kkkkkkkkkk");
 74 |       const isright = state.userList.find((item) => {
 75 |         if (
 76 |           item.userName == state.userName &&
 77 |           item.password == state.password
 78 |         ) {
 79 |           let user = JSON.stringify(item);
 80 |           sessionStorage.user = user;
 81 |           sessionStorage.isLogin = true;
 82 |           return true;
 83 |         } else {
 84 |           return false;
 85 |         }
 86 |       });
 87 | 
 88 |       psTrue = isright;
 89 |       context.emit("func", state.login, state.name);
 90 |       if (psTrue) {
 91 |         Toast("登录成功");
 92 |         window.location.reload();
 93 |       } else {
 94 |         Toast("用户名或密码错误请重新输入！！");
 95 |       }
 96 |     };
 97 | 
 98 |     // const send=()=>{
 99 | 
100 |     // }
101 | 
102 |     return {
103 |       state,
104 |       onSubmit,
105 |       // send
106 |     };
107 |   },
108 | };
109 | </script>
110 | 
111 | 
112 | <style scoped lang="less">
113 | .body {
114 |   .dd {
115 |     width: 375px;
116 |     height: 621px;
117 |     background-image: url("../../assets/bj.jpg");
118 |     background-size: cover;
119 |     .form {
120 |       opacity: 0.7;
121 |       position: relative;
122 |       font-size: 20px !important;
123 |       top: 200px;
124 |       .van-cell {
125 |         line-height: 50px;
126 |         height: 50px;
127 |         margin-top: 30px;
128 |         border-radius: 28px;
129 |         width: 280px;
130 |         margin-left: 45px;
131 |         .van-cell__title {
132 |           /deep/span {
133 |             font-size: 20px;
134 |           }
135 |         }
136 |       }
137 |       .button {
138 |         width: 200px;
139 |         margin-top: 20px;
140 |         margin-left: -100px;
141 |         left: 50%;
142 |         background-color: rgba(233, 233, 233, 0.788);
143 |         border: 0;
144 |       }
145 |     }
146 |   }
147 | }
148 | </style>


--------------------------------------------------------------------------------
/src/views/mine/message.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <van-nav-bar
  4 |       title="个人信息"
  5 |       left-arrow
  6 |       @click-left="onClickLeft"
  7 |     />
  8 | 
  9 |     <van-cell-group>
 10 |       <van-cell
 11 |         title="头像"
 12 |         isLink
 13 |         @click="showPopup"
 14 |       >
 15 |         <div v-if="imageUrl">
 16 |           <img :src="imageUrl" />
 17 |         </div>
 18 |       </van-cell>
 19 |       <van-cell
 20 |         title="用户名"
 21 |         isLink
 22 |       >{{name}}</van-cell>
 23 |       <van-cell
 24 |         title="性别"
 25 |         isLink
 26 |         @click="changeSex"
 27 |       >{{gender}}
 28 |       </van-cell>
 29 |       <van-cell
 30 |         title="生日"
 31 |         isLink
 32 |         @click="changeBirth"
 33 |       >{{birthday}}</van-cell>
 34 |       <!-- <van-cell
 35 |         title="地区"
 36 |         isLink
 37 |         @click="changeRegion"
 38 |       /> -->
 39 |       <van-cell
 40 |         title="收货地址"
 41 |         isLink
 42 |         :to="'/api/address'"
 43 |       />
 44 |     </van-cell-group>
 45 | 
 46 |     <!-- 头像弹出层 -->
 47 |     <van-popup
 48 |       v-model:show="show"
 49 |       round
 50 |       position="bottom"
 51 |       :style="{ height: '50%' }"
 52 |     >
 53 |       <van-uploader
 54 |         v-model="fileList"
 55 |         multiple
 56 |       />
 57 |       <button @click="ensure">确定</button>
 58 |     </van-popup>
 59 | 
 60 |     <!-- 性别弹出层 -->
 61 |     <van-popup
 62 |       v-model:show="sex"
 63 |       position="bottom"
 64 |       :style="{ height: '60%' }"
 65 |     >
 66 |       <!-- <van-cell-group >
 67 |   <van-cell  value="男" @click="choose"   id="sex"/>
 68 |   <van-cell  value="女" @click="choose" id="sex" />
 69 |   <van-cell  value="保密" @click="choose"  id="sex"/>
 70 | </van-cell-group> -->
 71 |       <van-button
 72 |         type="default"
 73 |         block
 74 |         @click="choose"
 75 |         id="sex"
 76 |       >男</van-button>
 77 |       <van-button
 78 |         type="default"
 79 |         block
 80 |         id="sex"
 81 |         @click="choose"
 82 |       >女</van-button>
 83 |       <van-button
 84 |         type="default"
 85 |         block
 86 |         id="sex"
 87 |         @click="choose"
 88 |       >保密</van-button>
 89 |     </van-popup>
 90 | 
 91 |     <!-- 生日弹出层 -->
 92 |     <van-popup
 93 |       v-model:show="birth"
 94 |       position="bottom"
 95 |       :style="{ height: '60%' }"
 96 |     >
 97 |       <van-datetime-picker
 98 |         v-model="currentDate"
 99 |         type="date"
100 |         title="选择年月日"
101 |         :min-date="minDate"
102 |         :max-date="maxDate"
103 |         :formatter="formatter"
104 |         @click="chooseDay"
105 |       />
106 | 
107 |     </van-popup>
108 | 
109 |     <!-- 地区弹出层 -->
110 |     <!-- <van-popup
111 |       v-model:show="regin"
112 |       position="bottom"
113 |       :style="{ height: '60%' }"
114 |     >
115 |     <van-area title="标题" :area-list="areaList" value="110101" />
116 |     </van-popup> -->
117 | 
118 |   </div>
119 | 
120 | </template>
121 | 
122 | <script lang="ts">
123 | import { useRouter } from "vue-router";
124 | import { toRefs, ref, reactive } from "vue";
125 | import { Toast } from "vant";
126 | export default {
127 |   name: "Message",
128 |   setup() {
129 |     const state = reactive({
130 |       name: "",
131 |       imageUrl: "",
132 |       gender: "",
133 |       birthday:''
134 |     });
135 |     const router = useRouter();
136 |     const show = ref(false);
137 |     const sex = ref(false);
138 |     const birth = ref(false);
139 |     const regin = ref(false);
140 |     const currentDate = ref(new Date());
141 |     
142 |     const onClickLeft = () => {
143 |       router.push("/personal");
144 |     };
145 |     const afterRead = (file) => {
146 |       // 此时可以自行将文件上传至服务器
147 |       console.log(file.target);
148 |     };
149 | 
150 |     const showPopup = () => {
151 |       show.value = true;
152 |     };
153 | 
154 |     const changeSex = () => {
155 |       sex.value = true;
156 |     };
157 |     const changeBirth = () => {
158 |       birth.value = true;
159 |     };
160 | 
161 |     const changeRegion = () => {
162 |       regin.value = true;
163 |     };
164 |     const getName = () => {
165 |       state.name = JSON.parse(sessionStorage.user).userName;
166 |     };
167 |     const ensure = () => {
168 |       show.value = false;
169 |     };
170 | 
171 |     const choose = () => {
172 |       let value = document.getElementById("sex").innerText;
173 |       state.gender = value;
174 |       Toast("修改成功");
175 |       sex.value = false;
176 |     };
177 | 
178 |     const chooseDay=()=>{
179 |         state.birthday=currentDate.value.toLocaleDateString()
180 |         Toast("修改成功");
181 |         birth.value = false;
182 | 
183 |     }
184 |    
185 | 
186 |     getName();
187 |     return {
188 |       onClickLeft,
189 |       ...toRefs(state),
190 |       show,
191 |       showPopup,
192 |       afterRead,
193 |       ensure,
194 |       changeSex,
195 |       changeBirth,
196 |       sex,
197 |       birth,
198 |       changeRegion,
199 |       regin,
200 |       choose,
201 |       minDate: new Date(1970, 0, 1),
202 |       maxDate: new Date(2025, 10, 1),
203 |       currentDate,
204 |       chooseDay
205 |     };
206 |   },
207 | };
208 | </script>
209 | 
210 | <style scoped lang="less">
211 | </style>


--------------------------------------------------------------------------------
/src/views/mine/Address.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <van-nav-bar
  4 |       title="我的收货地址"
  5 |       left-arrow
  6 |       @click-left="onClickLeft"
  7 |       fixed
  8 |     />
  9 |     <div class="body">
 10 |       <div
 11 |         v-for="item in addressList"
 12 |         :key="item.id"
 13 |         class="box"
 14 |       >
 15 |         <!-- 姓名 号码 -->
 16 |         <div class="contines">
 17 |           <div class="up">
 18 |             <!-- 上 -->
 19 |             <div class="left">
 20 |               <div class="name">{{item.username}}</div>
 21 | 
 22 |             </div>
 23 | 
 24 |             <div class="center">
 25 |               <div class="center_1">
 26 |                 <span class="name">{{item.username}}</span>
 27 |                 <span class="phone">{{item.phone}}</span>
 28 |               </div>
 29 |               <div class="center_2">{{item.provinces}}{{item.address}}</div>
 30 | 
 31 |             </div>
 32 | 
 33 |             <div class="right">
 34 |               <div class="edit"  @click="goEdit(item.id)">
 35 |                 <van-icon
 36 |                   name="edit"
 37 |                   size="20"
 38 |                 />
 39 |               </div>
 40 |             </div>
 41 | 
 42 |           </div>
 43 |           <div
 44 |             class="down"
 45 |             @click="deleteAddress(item.id)"
 46 |           >
 47 |             <div class="delete">删除</div>
 48 |           </div>
 49 | 
 50 |         </div>
 51 | 
 52 |         <!-- 下 -->
 53 | 
 54 |       </div>
 55 | 
 56 |       <div
 57 |         class="add"
 58 |         @click="addAddress"
 59 |       >
 60 |         <van-button block>添加收货地址</van-button>
 61 |       </div>
 62 | 
 63 |     </div>
 64 | 
 65 |   </div>
 66 | </template>
 67 | 
 68 | 
 69 | <script>
 70 | import { reactive, toRefs } from "vue";
 71 | import xqaxios from "../../utils/axios.js";
 72 | import { useRouter } from "vue-router";
 73 | 
 74 | export default {
 75 |   name: "Address",
 76 |   setup() {
 77 |     const state = reactive({
 78 |       addressList: [],
 79 |     });
 80 | 
 81 |     const getAddress = async () => {
 82 |       let result = await xqaxios("GET", "/api/address");
 83 |       state.addressList = result.message;
 84 |     };
 85 | 
 86 |     const router = useRouter();
 87 |     const onClickLeft = () => {
 88 |       router.go(-1);
 89 |     };
 90 |     getAddress();
 91 |     const addAddress = () => {
 92 |       router.push("/api/address/add");
 93 |     };
 94 | 
 95 |     const deleteAddress = async (id) => {
 96 |       let result = await xqaxios("POST", "/api/deleteAddress", {"id":id});
 97 |       window.location.reload();
 98 |     };
 99 | 
100 |     const goEdit=(id)=>{
101 |         router.push(`/api/address/edit/${id}`)
102 |     }
103 | 
104 |     return { ...toRefs(state), onClickLeft, addAddress, deleteAddress,goEdit };
105 |   },
106 | };
107 | </script>
108 | 
109 | <style scoped lang="less">
110 | .body {
111 |   background-color: #e6e6e6;
112 |   padding: 60px 10px 10px 0;
113 | 
114 |   height: 600px;
115 |   position: relative;
116 |   .box {
117 |     font-size: 12px;
118 |     padding: 10px;
119 |     border-radius: 10px;
120 |     .contines {
121 |       background-color: #fff;
122 |       .up {
123 |         display: flex;
124 |         margin-bottom: 20px;
125 | 
126 |         border-bottom: 1px solid rgba(102, 102, 102, 0.178);
127 |         padding: 10px 0;
128 |         .left {
129 |           width: 30px;
130 |           position: relative;
131 |           .name {
132 |             position: absolute;
133 |             background-color: #f7e3c99f;
134 |             border-radius: 50%;
135 |             width: 30px;
136 |             height: 30px;
137 |             text-align: center;
138 |             line-height: 30px;
139 |             top: 50%;
140 |             margin-top:-15px;
141 |             margin-right:10px;
142 |             left: 5px;
143 |             color: rgb(250, 142, 0);
144 |           }
145 |         }
146 | 
147 |         .center {
148 |           flex: 1;
149 |           margin-left:10px;
150 |           .center_1 {
151 |             .name {
152 |               display: inline-block;
153 |               font-size: 16px;
154 |               margin-right: 10px;
155 |               color: #413f3fe8;
156 |             }
157 |             .phone {
158 |               display: inline-block;
159 |               color: #c2bfbfd5;
160 |             }
161 |           }
162 |           .center_2 {
163 |             font-size: 14px;
164 |             font-size: 16px;
165 |           }
166 |         }
167 | 
168 |         .right {
169 |           width: 30px;
170 |           position: relative;
171 |           .edit {
172 |             position: absolute;
173 |             top: 15px;
174 |             right: 10px;
175 |           }
176 |         }
177 |         
178 |       }
179 |       .down {
180 |           height: 20px;
181 |           position: relative;
182 |           .delete {
183 |             position: absolute;
184 |             right:10px;
185 |             bottom:5px;
186 |             text-align: right;
187 |             color: #413f3fe8;
188 |           }
189 |         }
190 |     }
191 |   }
192 | 
193 |   .add {
194 |     position: fixed;
195 |     bottom: 0;
196 |     .van-button {
197 |       width: 320px;
198 |       background-color: #ff4200;
199 |       border-radius: 20px;
200 |       margin-left: 23px;
201 |       color: #fff;
202 |     }
203 |   }
204 | }
205 | </style>


--------------------------------------------------------------------------------
/src/components/goodsStyle.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="body">
  3 |     <div class="head">
  4 |       <div class="left">
  5 |         <img
  6 |           :src="goodInfo.pictures.split(',')[0]"
  7 |           style="width:100px"
  8 |         />
  9 |       </div>
 10 |       <div class="right">
 11 |         <div class="price">
 12 |           <span>￥{{goodInfo.min_price}}</span>
 13 |           <span v-if="goodInfo.max_price>0">-{{goodInfo.max_price}}</span>
 14 |         </div>
 15 |         <div class="second">剩余{{goodInfo.counts}}件</div>
 16 |         <div class="second">请选择款式</div>
 17 |       </div>
 18 |     </div>
 19 |     <div class="ks">
 20 |       <div class="title">款式</div>
 21 |       <div
 22 |         v-for="(item,index) in list"
 23 |         :key="item.id"
 24 |         class="form"
 25 |         
 26 |          @click="hh(index)"
 27 |       >
 28 |         <div
 29 |           class="item"
 30 |           id="choose"
 31 |           @click="select(item)"
 32 |           
 33 |         >
 34 |         
 35 |           <img
 36 |             :src="item.imgUrl"
 37 |             style="width:40px"
 38 |           />
 39 |           <div class="name" :class="{'active':index==selected}" >
 40 |             <span>{{item.name}}</span>
 41 |           </div>
 42 |           
 43 |         </div>   
 44 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
 45 |       </div>
 46 |        <div class="count">
 47 |           
 48 |             <div>购买数量</div>
 49 |             <van-stepper v-model="value" min="1" :max="goodInfo.counts" />
 50 |         
 51 |         </div>  
 52 |     </div>
 53 |       <van-action-bar
 54 |           safe-area-inset-bottom
 55 |           style="padding:0 10px"
 56 |         >
 57 |           <van-action-bar-button
 58 |             color="#E8E8E8"
 59 |             type="warning"
 60 |             text="加入购物车"
 61 |             style="color:black"
 62 |             @click="addCar(goods)"
 63 |           />
 64 |           <van-action-bar-button
 65 |             color="#282828 "
 66 |             type="danger"
 67 |             text="立即购买"
 68 |             @click="buy(goods)"
 69 |           />
 70 |         </van-action-bar>
 71 |   </div>
 72 | </template>
 73 | 
 74 | <script>
 75 | import { toRefs ,ref} from "vue";
 76 | import axios from "axios";
 77 | import xqaxios from "../utils/axios.js"
 78 | import { useRoute, useRouter } from 'vue-router';
 79 | export default {
 80 |   name: "GoodsStyle",
 81 |   props: { list: [], goodInfo: {} },
 82 | 
 83 |   setup(props) {
 84 |     const state = {
 85 |       flag: false,
 86 |       flag2:false,
 87 |       show:0,
 88 |       goods:{}
 89 |     };
 90 | 
 91 |     const value = ref(1);
 92 |     let selected=ref(0);
 93 |     const hh=(index)=>{
 94 |        
 95 |       console.log(index,"indexindexindex")
 96 |       selected.value=index;
 97 | 
 98 |     }
 99 |     const select = (goods) => {
100 |       // document.getElementById("choose").style.backgroundColor="red";
101 |       
102 |       state.flag = true;
103 |       state.show=1;
104 |       state.goods=goods;
105 | 
106 |     };
107 |     const add = async (goods) => {
108 |       goods.count=value.value;
109 |       goods.pictures=props.goodInfo.pictures.split(',')[0];
110 |       goods.bigname=props.goodInfo.title;
111 |       console.log(goods,"kkkkkkkkkkkkkk");
112 |       let result = await xqaxios("POST", "/api/car",goods);
113 |         };  
114 |     const addCar=(goods)=>{
115 |         add(goods);
116 |     }
117 |     
118 |     const handleClick=()=>{
119 |         state.flag2=true;
120 |     }
121 | 
122 |     const router=useRouter();
123 |     const buy=(goods)=>{
124 |       console.log(goods,"mmmmmmmmmmmmmm");
125 |       let good=[];
126 |       good.push(goods)
127 |       sessionStorage.orderList=JSON.stringify(good) ;
128 |       router.push('/api/confirm')
129 |     }
130 | 
131 | 
132 |     return { select, ...toRefs(state), addCar,handleClick ,value,selected,hh,buy};
133 |   },
134 | };
135 | </script>
136 | 
137 | <style lang="less" scoped>
138 | .body{
139 |   padding-bottom:40px;
140 | }
141 | .count{
142 |   margin-top:20px;
143 |   display: flex;
144 |   padding: 10px ;
145 |   justify-content: space-between;
146 | }
147 | 
148 | .bg{
149 |   background-color: red;
150 | }
151 | .head {
152 |   display: flex;
153 |   .left {
154 |     padding: 15px;
155 |   }
156 | }
157 | van-action-bar {
158 |   .left {
159 |     color: black;
160 |   }
161 | }
162 | 
163 | .right {
164 |   // padding-left: 10px;
165 |   .price {
166 |     margin-top: 40px;
167 |     font-weight: bold;
168 |     font-size: 20px;
169 |   }
170 |   .second {
171 |     margin-top: 5px;
172 |     color: #c8c8c8;
173 |     font-size: 14px;
174 |   }
175 | }
176 | 
177 | .ks {
178 |   padding-left: 15px;
179 |   .title {
180 |     font-size: 16px;
181 |   }
182 |   .form {
183 |     margin-top: 20px;
184 |     .item {
185 |       background-color: #f0f0f0;
186 |       display: flex;
187 |       padding: 2px;
188 |       width: 300px;
189 |       border-radius: 10px;
190 |       img {
191 |         border-radius: 8px;
192 |       }
193 |       .name {
194 |         margin-top: 12px;
195 |         margin-left: 10px;
196 |         flex: auto;
197 |         display: inline-block;
198 |         span {
199 |           display: block;
200 |           color: #444;
201 |         }
202 |       }
203 |     }
204 |   }
205 |   .active{
206 |     background-color:rgb(138, 138, 138);
207 |   }
208 | }
209 | </style>


--------------------------------------------------------------------------------
/src/views/Car/ShopCar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="body">
  3 |     <div class="top">
  4 |       <div class="left">
  5 |         <van-icon name="shop-o" />
  6 |         <span>Cabana家具店</span>
  7 |         <van-icon name="arrow" />
  8 |       </div>
  9 |       <div class="right">
 10 |         编辑
 11 |       </div>
 12 |     </div>
 13 | 
 14 |     <div
 15 |       v-for="item in carList"
 16 |       :key="item.id"
 17 |     >
 18 |       <van-swipe-cell class="card">
 19 |         <van-checkbox
 20 |           v-model="item.checked"
 21 |           class="checkbox"
 22 |           @click="choose"
 23 |         />
 24 |         
 25 |         <img :src="item.picture"/>
 26 |         <div class="right">
 27 |           <div class="name">{{item.name}}</div>
 28 |         <div class="price">￥{{item.price/100}}</div>
 29 |         <div class="title">{{item.title}}</div>
 30 |         </div>
 31 |          <div class="count">
 32 |             <van-stepper v-model="item.count" min="1"  />
 33 |         </div>  
 34 |         <template #right>
 35 |           <van-button
 36 |             square
 37 |             text="删除"
 38 |             type="danger"
 39 |             class="delete-button"
 40 |             @click="deleteCar(item.id)"
 41 |           />
 42 |         </template>
 43 |       </van-swipe-cell>
 44 | 
 45 |     </div>
 46 |   <div class="hh">
 47 |     <van-submit-bar :price="price" button-text="提交订单"  @click="goConfirm"></van-submit-bar>
 48 |      <van-checkbox v-model="checkedAll" @click="chooseAll">全选</van-checkbox>
 49 |   
 50 |   </div>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script lang="ts">
 55 | import xqaxios from '../../utils/axios'
 56 | import { toRefs, ref ,reactive, defineComponent,computed} from "vue";
 57 | import {useRouter} from 'vue-router'
 58 | import {Toast}from 'vant'
 59 | export default defineComponent({
 60 |   name: "ShopCar",
 61 |   props: { goods:<any>[] },
 62 |   setup(props, context) {
 63 |     const checked = ref(true);
 64 |     const checkedAll = ref(false);
 65 |     const state=reactive({
 66 |       carList:props.goods
 67 |     })
 68 | 
 69 |     const deleteCar=async(id)=>{
 70 |       let result = await xqaxios("POST", "/api/deleteCar", {"id":id});
 71 |       window.location.reload();
 72 |     }
 73 | 
 74 | 
 75 |     const zhuanhuan=()=>{
 76 |       for(let i=0;i<state.carList.length;i++){
 77 |        state.carList[i].checked=(state.carList[i].checked=="1"?false:true);
 78 |        console.log(state.carList[i].checked,"kkkkkkkkkk")
 79 |       }
 80 |     }
 81 | 
 82 |     zhuanhuan();
 83 |       const price = computed(() => {
 84 |         let sum=0;
 85 |         for(let i=0;i<state.carList.length;i++){
 86 |           console.log(state.carList[i].checked,"llllllllllll")
 87 |           if(state.carList[i].checked==true){
 88 |             sum+=state.carList[i].price*state.carList[i].count;
 89 |           }
 90 |         }
 91 |         return sum ;
 92 |     })
 93 | 
 94 |     const choose=()=>{
 95 |       let t=true
 96 |       for(let i=0;i<state.carList.length;i++){
 97 |         if(state.carList[i].checked==false){
 98 |           t=false;
 99 |         }
100 |       }
101 |       if(t==true) checkedAll.value=true
102 |     }
103 | 
104 |     const original=()=>{
105 |       let t=true
106 |       for(let i=0;i<state.carList.length;i++){
107 |         if(state.carList[i].checked==false){
108 |           t=false;
109 |         }
110 |       }
111 |       if(t==true) checkedAll.value=true
112 | 
113 |     }
114 |     original();
115 |     const chooseAll=()=>{
116 |       if(checkedAll.value==true){
117 |           for(let i=0;i<state.carList.length;i++){
118 |         state.carList[i].checked=true
119 |       }
120 |       } 
121 |       if(checkedAll.value==false){
122 |         for(let i=0;i<state.carList.length;i++){
123 |         state.carList[i].checked=false
124 |       }
125 |       
126 |     }
127 |     }
128 | 
129 | 
130 | 
131 |     const router=useRouter()
132 |     const orderList=[]
133 |     const goConfirm=()=>{
134 |       if(price.value==0){
135 |         Toast("您还未选商品，请先选中商品")
136 |       }
137 |       else{
138 |         for(let i=0;i<state.carList.length;i++){
139 |         if( state.carList[i].checked==true){
140 |           orderList.push(state.carList[i]);
141 |         }
142 |       }
143 |       sessionStorage.orderList=JSON.stringify(orderList) ;
144 |       router.push('/api/confirm')
145 |       }
146 |       
147 |     }
148 | 
149 |     return { deleteCar,checkedAll,price ,...toRefs(state),chooseAll,goConfirm,choose};
150 | 
151 |   },
152 | });
153 | </script>
154 | 
155 | <style lang="less">
156 | .body {
157 |   background-color: #fafafa !important;
158 |   padding: 0 10px;
159 |   
160 |   .top {
161 |     display: flex;
162 |     justify-content: space-between;
163 |     padding: 10px;
164 |     font-size: 14px;
165 |     background-color: #fff;
166 |   }
167 |   .card {
168 |     margin-top: 20px;
169 |     border-radius: 10px;
170 |     background-color: #fff;
171 |     padding:10px 0;
172 |     padding-left: 10px;
173 |     position:relative;
174 |     height:100px;
175 |      .delete-button {
176 |         height: 120px;
177 |       }
178 |    
179 |     .checkbox {
180 |       position:absolute;
181 |       top:40px;
182 |       display: inline-block;
183 |     }
184 |     .right{
185 |       position:absolute;
186 |       left:100px;
187 |       top:0;
188 |        .name{
189 |       position:absolute;
190 |       display:inline-block;
191 |       top:15px;
192 |       left:40px;
193 |       font-size:15px;
194 |       width:200px;
195 |     }
196 | 
197 |     .title{
198 |       border-radius: 8px;
199 |       width:150px;
200 |       height:20px;
201 |       background-color: #e8e8e8;
202 |       font-size:12px;
203 |       position:absolute;
204 |       top:50px;
205 |       left:40px;
206 | 
207 |       overflow:hidden;
208 |     }
209 | 
210 |     .price{
211 |       position:absolute;
212 |       top:80px;
213 |       left:40px;
214 | 
215 |     }
216 |     }
217 |      .count{
218 |       position: absolute;
219 |       margin-top:80px;
220 |       margin-left:230px;
221 |     }
222 |     img {
223 |       width: 100px;
224 |       position:absolute;
225 |       left:30px;
226 |       border-radius: 10px;
227 |     }
228 |   }
229 | 
230 |   /deep/.hh{
231 |     margin-bottom:50px;
232 |     display:flex;
233 |     position:relative;
234 |   }
235 |   /deep/.van-submit-bar__bar{
236 |     margin-bottom:50px;
237 |   }
238 |  /deep/.van-checkbox{
239 |     position:absolute;
240 |     top:122px;
241 |     z-index:999;
242 | 
243 |   }
244 | }
245 | </style>


--------------------------------------------------------------------------------
/src/views/Order/ConfirmOrder.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <van-nav-bar
  4 |       title=" 确认订单"
  5 |       left-arrow
  6 |       @click-left="onClickLeft"
  7 |       fixed
  8 |     />
  9 |     <div class="body">
 10 |       <div class="address">
 11 |         <div class="provinces">{{provinces}}</div>
 12 |         <div class="more">{{address}}</div>
 13 |         <div class="connenxt">
 14 |           <span class="left">{{username}}</span>
 15 |           <span class="right">{{phone}}</span>
 16 |         </div>
 17 |         <div class="send">
 18 |           <div>配送方式</div>
 19 |           <div>快递&nbsp;&nbsp;&nbsp;免运费</div>
 20 |         </div>
 21 |       </div>
 22 | 
 23 |       <div class="goods">
 24 |         <div class="title">
 25 |           <van-icon name="shop-o" />
 26 |           <span class="name">Cabana家具店</span>
 27 |         </div>
 28 |         <div class="boxes">
 29 |           <div
 30 |             v-for="item in List"
 31 |             :key="item.id"
 32 |           >
 33 |             <div class="top">
 34 |               <div class="img">
 35 |                 <img
 36 |                   :src="item.imgUrl"
 37 |                   alt=""
 38 |                 >
 39 |               </div>
 40 |               <div class="right">
 41 |                 <div class="first">{{item.name}}</div>
 42 |                 <div class="second">{{item.title}}</div>
 43 |                 <div class="third">
 44 |                   <span class="left">￥{{item.price/100}}</span>
 45 |                   <span class="right">x{{item.count}}</span>
 46 |                 </div>
 47 |               </div>
 48 |             </div>
 49 | 
 50 |           </div>
 51 |           <div class="bottom">
 52 |             <span class="left">共{{count}}件</span>
 53 |             <span class="right">商品小计：￥{{price}}</span>
 54 |           </div>
 55 |         </div>
 56 | 
 57 |       </div>
 58 | 
 59 |     </div>
 60 |     <van-tabbar class="tab">
 61 |       <div class="text">应付：￥{{price}}</div>
 62 |       <button
 63 |         class="btn"
 64 |         @click="pay"
 65 |       >提交订单</button>
 66 |     </van-tabbar>
 67 |     <van-popup
 68 |       v-model:show="show"
 69 |       round
 70 |       position="bottom"
 71 |       :style="{ height: '70%' }"
 72 |     >
 73 |       <van-password-input
 74 |         :value="value"
 75 |         info="密码为 6 位数字"
 76 |         :error-info="errorInfo"
 77 |         :focused="showKeyboard"
 78 |         @focus="showKeyboard = true"
 79 |       />
 80 |       <van-number-keyboard
 81 |         v-model="value"
 82 |         :show="showKeyboard"
 83 |         @blur="showKeyboard = false"
 84 |       />
 85 |     </van-popup>
 86 | 
 87 |   </div>
 88 | </template>
 89 | 
 90 | <script lang="ts">
 91 | import { Toast } from "vant";
 92 | import { defineComponent, reactive, toRefs, ref, watch } from "vue";
 93 | import { useRouter } from "vue-router";
 94 | import xqaxios from "../../utils/axios.js";
 95 | export default defineComponent({
 96 |   name: "ConfirmOrder",
 97 |   setup() {
 98 |     const router = useRouter();
 99 |     const onClickLeft = () => {
100 |       router.go(-1);
101 |     };
102 | 
103 |     const state = reactive({
104 |       addressList: [],
105 |       provinces: "",
106 |       address: "",
107 |       username: "",
108 |       phone: "",
109 |     });
110 |     let price = 0;
111 |     let count = 0;
112 |     const value = ref("");
113 |     const errorInfo = ref("");
114 |     const showKeyboard = ref(true);
115 |     const List = JSON.parse(sessionStorage.getItem("orderList"));
116 |     console.log(List,"xxxxxxxxxxxxxxxxx")
117 |     const getprice = () => {
118 |       for (let i = 0; i < List.length; i++) {
119 |         price += List[i].price / 100;
120 |         count += List[i].count;
121 |       }
122 |     };
123 | 
124 |     getprice();
125 |     const getAddress = async () => {
126 |       let result = await xqaxios("GET", "/api/address");
127 |       state.addressList = result.message;
128 |       state.provinces = state.addressList[0].provinces;
129 |       state.address = state.addressList[0].address;
130 |       state.username = state.addressList[0].username;
131 |       state.phone = state.addressList[0].phone;
132 |       console.log(state.addressList[0].provinces, "111111111");
133 |     };
134 |     getAddress();
135 |     const show = ref(false);
136 |     const pay = () => {
137 |       show.value = true;
138 |     };
139 |     watch(value, (newVal) => {
140 |       if (newVal.length === 6 && newVal !== "123456") {
141 |         errorInfo.value = "密码错误";
142 |       } else if (newVal.length === 6 && newVal == "123456") {
143 |         Toast({
144 |           message: "支付成功",
145 |           icon: "passed",
146 |         });
147 |         router.push('/personal')
148 |       }
149 | 
150 | 
151 |     });
152 | 
153 |     return {
154 |       onClickLeft,
155 |       List,
156 |       ...toRefs(state),
157 |       price,
158 |       count,
159 |       show,
160 |       pay,
161 |       value,
162 |       errorInfo,
163 |       showKeyboard,
164 |     };
165 |   },
166 | });
167 | </script>
168 | 
169 | <style lang="less" scoped>
170 | .body {
171 |   background-color: #f0f0f0 !important;
172 |   height: 600px;
173 |   padding: 10px;
174 |   padding-top: 60px;
175 |   padding-bottom: 80px;
176 |   .address {
177 |     padding: 10px;
178 |     background-color: #fff;
179 |     border-radius: 10px;
180 |     .more {
181 |       font-size: 20px;
182 |       font-weight: bold;
183 |       margin-bottom: 10px;
184 |     }
185 |     .provinces {
186 |       margin-bottom: 10px;
187 |     }
188 |     .connenxt {
189 |       margin-bottom: 10px;
190 |       padding-bottom: 10px;
191 |       border-bottom: 1px #f0f0f0 solid;
192 |       .left {
193 |         margin-right: 10px;
194 |       }
195 |     }
196 |     .send {
197 |       display: flex;
198 |       justify-content: space-between;
199 |       color: rgb(170, 170, 170);
200 |     }
201 |   }
202 | 
203 |   .goods {
204 |     margin-top: 10px;
205 |     border-radius: 10px;
206 |     background-color: #fff;
207 |     padding: 10px;
208 |     padding-bottom: 40px;
209 |     .title {
210 |       margin-bottom: 20px;
211 |       .name {
212 |         display: inline-block;
213 |         margin-left: 10px;
214 |       }
215 |     }
216 | 
217 |     .boxes {
218 |       .top {
219 |         margin-top: 10px;
220 |         .img {
221 |           width: 100px;
222 |           height: 100px;
223 |           margin-left: 0;
224 | 
225 |           img {
226 |             width: 100%;
227 |             height: 100%;
228 |             border-radius: 10px;
229 |           }
230 |         }
231 |         .right {
232 |           color: #383838;
233 |           margin-left: 0;
234 |           .second {
235 |             font-size: 13px;
236 |             color: rgb(182, 181, 181);
237 |           }
238 |           .third {
239 |             margin-top: 45px;
240 |             position: relative;
241 |             .left {
242 |               display: inline-block;
243 |             }
244 |             .right {
245 |               display: inline-block;
246 |               position: absolute;
247 |               right: 0;
248 |               color: rgb(182, 181, 181);
249 |             }
250 |           }
251 |         }
252 |       }
253 | 
254 |       .bottom {
255 |         margin-top: 10px;
256 |         position: relative;
257 |         font-size: 12px;
258 |         .left {
259 |           position: absolute;
260 |           display: inline-block;
261 |           right: 120px;
262 |         }
263 | 
264 |         .right {
265 |           position: absolute;
266 |           display: inline-block;
267 |           right: 0;
268 |         }
269 |       }
270 |     }
271 |   }
272 | }
273 | 
274 | .tab {
275 |   padding: 0 10px;
276 |   display: flex;
277 |   background-color: #fff;
278 | 
279 |   .text {
280 |     margin-top: 12px;
281 |   }
282 |   .btn {
283 |     background-color: #383838;
284 |     color: #fff;
285 |     border-radius: 30px;
286 |     padding: 0 30px;
287 |     margin-left: 125px;
288 |   }
289 | }
290 | </style>


--------------------------------------------------------------------------------
/src/views/Personal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vv">
  3 | 
  4 |     <van-nav-bar
  5 |       title="个人中心"
  6 |       class="car"
  7 |       fixed="true"
  8 |     />
  9 |     <div v-if="isLogin">
 10 |       <div class="top">
 11 |         <div class="avator">
 12 |           <img src="https://img.yzcdn.cn/upload_files/2020/03/18/Fh621V9kuCPPuPUYHhN9Ktxs9DU7.jpg" />
 13 |         </div>
 14 |         <div class="name">{{username}}</div>
 15 |         <div
 16 |           class="qr"
 17 |           @click="memberQd(username)"
 18 |         >
 19 |           <img src="../assets/二维码.png">
 20 |           <span>会员码</span>
 21 |         </div>
 22 |         <div class="card">
 23 |           <div class="left">
 24 |             <img src='../assets/钻石.png' />
 25 |             <span>Cabana家具店</span>
 26 |           </div>
 27 |           <div class="right">
 28 |             成为会员
 29 |             <van-icon name="arrow" />
 30 |           </div>
 31 |         </div>
 32 |       </div>
 33 | 
 34 |       <div class="center">
 35 |         <div class="grid">
 36 |           <van-grid
 37 |             :border="false"
 38 |             :column-num="5"
 39 |           >
 40 |             <van-grid-item>
 41 |               <div>0.00</div>
 42 |               <div>余额</div>
 43 |             </van-grid-item>
 44 |             <van-grid-item>
 45 |               <div>0</div>
 46 |               <div>积分</div>
 47 |             </van-grid-item>
 48 |             <van-grid-item>
 49 |               <div>0</div>
 50 |               <div>卡</div>
 51 |             </van-grid-item>
 52 |             <van-grid-item>
 53 |               <div>0</div>
 54 |               <div>优惠券</div>
 55 |             </van-grid-item>
 56 |             <van-grid-item>
 57 |               <van-icon
 58 |                 name="gold-coin-o"
 59 |                 size="20"
 60 |               />
 61 |               <div>零钱</div>
 62 |             </van-grid-item>
 63 |           </van-grid>
 64 |         </div>
 65 | 
 66 |         <div class="order">
 67 |           <div class="head" @click="goOrder">
 68 |             <div class="left" >我的订单</div>
 69 |             <div class="right">查看全部订单
 70 |               <van-icon name="arrow" />
 71 |             </div>
 72 |           </div>
 73 |           <div class="main">
 74 |             <van-grid
 75 |               :border="false"
 76 |               :column-num="5"
 77 |             >
 78 |               <van-grid-item
 79 |                 icon="coupon"
 80 |                 text="待付款"
 81 |               />
 82 |               <van-grid-item
 83 |                 icon="invition"
 84 |                 text="待发货"
 85 |               />
 86 |               <van-grid-item
 87 |                 icon="send-gift"
 88 |                 text="待收货"
 89 |               />
 90 |               <van-grid-item
 91 |                 icon="chat"
 92 |                 text="评价"
 93 |               />
 94 |               <van-grid-item
 95 |                 icon="gold-coin"
 96 |                 text="退款售后"
 97 |               />
 98 |             </van-grid>
 99 |           </div>
100 |         </div>
101 |         <div class="third">
102 |           <van-cell
103 |             is-link
104 |             class="cell"
105 |             :to="'/car'"
106 |           >
107 |             <van-icon
108 |               name="cart-o"
109 |               size="20"
110 |             />
111 |             购物车
112 |           </van-cell>
113 |           <van-cell
114 |             is-link
115 |             class="cell"
116 |           >
117 |             <van-icon
118 |               name="gold-coin-o"
119 |               size="25"
120 |             />
121 |             返现
122 |           </van-cell>
123 |           <van-cell
124 |             is-link
125 |             class="cell"
126 |           >
127 |             <van-icon
128 |               name="bag-o"
129 |               size="25"
130 |             />
131 |             赠品
132 |           </van-cell>
133 |         </div>
134 |         <van-cell
135 |           is-link
136 |           class="cell"
137 |           :to="'/api/address'"
138 |         >
139 | 
140 |           <van-icon
141 |             name="location-o"
142 |             size="25"
143 |           />
144 |           收货地址
145 |         </van-cell>
146 |         <van-cell
147 |           is-link
148 |           class="cell"
149 |           :to="'/api/message'"
150 |         >
151 |           <van-icon
152 |             name="user-o"
153 |             size="25"
154 |           />
155 |           个人信息
156 |         </van-cell>
157 |         <van-cell
158 |           is-link
159 |           class="cell"
160 |           @click="showPopup"
161 |         >
162 |           <van-icon
163 |             name="manager-o"
164 |             size="25"
165 |           />
166 |           账号设置
167 |         </van-cell>
168 |         <van-button  block @click="exit">退出登录</van-button>
169 |       </div>
170 |     </div>
171 |     <login
172 |       v-if="!isLogin"
173 |       :msg="login"
174 |       :name="name"
175 |       @func="receiveFromChild"
176 |     ></login>
177 |     <!-- <login v-if="!isLogin" ></login> -->
178 |     
179 |   </div>
180 | 
181 | </template>
182 | <script lang="ts">
183 | import { defineComponent, ref } from "vue";
184 | import { useRouter } from "vue-router";
185 | import Login from "./login/Login.vue";
186 | export default defineComponent({
187 |   name: "Personal",
188 |   components: { Login },
189 |   setup() {
190 |     const router = useRouter();
191 |     const isLogin = ref(false);
192 |     const username = ref("");
193 |     const show = ref(false);
194 | 
195 |     const memberQd = (name) => {
196 |       router.push(`/code/${name}`);
197 |     };
198 | 
199 |     const showPopup = () => {
200 |       show.value = true;
201 |     };
202 |     const getmessage = () => {
203 |       if (sessionStorage.user) {
204 |         username.value = JSON.parse(sessionStorage.getItem("user")).userName;
205 |         console.log(username.value);
206 |         isLogin.value = JSON.parse(sessionStorage.getItem("isLogin"));
207 |       } else {
208 |         isLogin.value = false;
209 |       }
210 |     };
211 | 
212 |     const receiveFromChild = (msg, name) => {
213 |       isLogin.value = JSON.parse(sessionStorage.getItem("isLogin"));
214 |     };
215 | 
216 |     const exit=()=>{
217 |       sessionStorage.removeItem("user");
218 |       sessionStorage.removeItem("isLogin");
219 |       window.location.reload();
220 |     }
221 |     const goOrder=()=>{
222 |       router.push('/api/order')
223 |     }
224 |     getmessage();
225 |     return { memberQd, isLogin, username, receiveFromChild, show, showPopup ,exit,goOrder};
226 |   },
227 | });
228 | </script>
229 | 
230 | 
231 | <style scoped lang="less">
232 | .vv {
233 |   padding-bottom: 50px;
234 | }
235 | .top {
236 |   position: absolute;
237 |   top: 46px;
238 |   width: 355px;
239 |   padding: 10px;
240 |   height: 150px;
241 |   background-image: url("http://img.yzcdn.cn/upload_files/2019/01/31/Fp3kIohim8ZiB1yLepoMMW8is_qY.png");
242 |   background-size: over;
243 |   .avator {
244 |     width: 80px;
245 |     height: 80px;
246 |     background-color: #f0f0f0;
247 |     border-radius: 50%;
248 |     position: absolute;
249 |     top: 30px;
250 |     overflow: hidden;
251 |     img {
252 |       width: 100%;
253 |       height: 100%;
254 |     }
255 |   }
256 | 
257 |   .name {
258 |     font-size: 20px;
259 |     font-weight: bold;
260 |     position: absolute;
261 |     top: 55px;
262 |     left: 110px;
263 |   }
264 | 
265 |   .qr {
266 |     position: absolute;
267 |     top: 30px;
268 |     right: 20px;
269 |     background-color: #7e552f;
270 |     border-radius: 8px;
271 |     font-size: 12px;
272 |     width: 60px;
273 |     padding: 0 5px;
274 |     height: 20px;
275 |     color: #fff;
276 |     display: flex;
277 |     span {
278 |       line-height: 20px;
279 |       text-align: center;
280 |     }
281 |   }
282 | 
283 |   .card {
284 |     width: 325px;
285 |     padding: 10px;
286 |     height: 15px;
287 |     background-color: #37332d;
288 |     position: absolute;
289 |     bottom: 0px;
290 |     left: 15px;
291 |     border-radius: 8px 8px 0 0;
292 |     display: flex;
293 |     justify-content: space-between;
294 |     font-size: 12px;
295 |     color: #fff;
296 |     .left {
297 |       color: #ffcc00;
298 |     }
299 |   }
300 | }
301 | 
302 | .center {
303 |   padding: 10px;
304 |   background-color: #f0f0f0;
305 |   .grid {
306 |     margin-top: 220px;
307 |     border-radius: 8px;
308 |   }
309 |   .order {
310 |     margin-top: 10px;
311 |     background-color: #fff;
312 |     padding: 5px;
313 |     .head {
314 |       height: 40px;
315 |       border-bottom: 1px #f0f0f0 solid;
316 |       display: flex;
317 |       justify-content: space-between;
318 |       line-height: 40px;
319 |       .left {
320 |         font-size: 18px;
321 |         font-weight: bold;
322 |       }
323 |       .right {
324 |         color: #aca9a99a;
325 |       }
326 |     }
327 |   }
328 | 
329 |   .third {
330 |     margin-top: 10px;
331 |     padding: 5px;
332 |     background-color: #fff;
333 |     .cell {
334 |       border-bottom: 1px #f0f0f0 solid;
335 |     }
336 |   }
337 | }
338 | 
339 | .van-button--default {
340 |     color: #fff;
341 |     margin-top:40px;
342 |     background-color: #383838;
343 |     border: 1px solid #ebedf0;
344 |     border-radius: 16px;
345 | }
346 | </style>


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box">
  3 |     <van-nav-bar
  4 |       fixed
  5 |       title="Cabana家具店"
  6 |     />
  7 |     <!-- 轮播大图 -->
  8 |     <swipe :lunboList="lunboList"></swipe>
  9 | 
 10 |     <!-- 品牌推荐和空行 -->
 11 |     <sign :generalList="generalList"></sign>
 12 | 
 13 |     <!-- 品牌图标 -->
 14 |     <!-- <van-swipe
 15 |       :autoplay="7000"
 16 |       class="swipe_1"
 17 |     >
 18 |       <van-swipe-item
 19 |         v-for="item in iconList"
 20 |         :key="item.image_id"
 21 |       >
 22 |         <img :src="item.image_url" />
 23 |       </van-swipe-item>
 24 |     </van-swipe> -->
 25 |     
 26 |     <div class="big">
 27 |         <div class="middle">
 28 |     <div v-for="item in iconList" :key="item.image_id" class="small" >
 29 |         <img :src="item.image_url"/>
 30 |     </div>
 31 |     </div>
 32 |     </div>
 33 |     <!-- <grid :gridList="gridList"></grid> -->
 34 |     
 35 |     <!-- 新品上架和空行 -->
 36 |     <sign :generalList="generalList2"></sign>
 37 | 
 38 |     <!-- 推荐商品 -->
 39 |     <grid :gridList="gridList"></grid>
 40 | 
 41 |     <blank :blankList="blankList"></blank>
 42 | 
 43 |     <!-- 去逛逛 -->
 44 |     <go :goList="goList"></go>
 45 | 
 46 |     <!-- 自然之美 -->
 47 |     <div class="swipe">
 48 |       <img src="http://img01.yzcdn.cn/upload_files/2020/03/25/FgEbAWyAaIGAHvMyHSwJt2q6bcLc.jpg" />
 49 |     </div>
 50 | 
 51 |     <grid
 52 |       :gridList="goodsNatureList"
 53 |       class="box"
 54 |     ></grid>
 55 | 
 56 |     <!-- 去逛逛 -->
 57 |     <go
 58 |       :goList="goList"
 59 |       class="top"
 60 |     ></go>
 61 | 
 62 |     <!-- 玻璃艺术品 -->
 63 |     <div class="swipe">
 64 |       <img src="http://img01.yzcdn.cn/upload_files/2020/03/25/Frva2FhvXeg59Dsvr9xCl4hMAv_c.jpg" />
 65 |     </div>
 66 |     <grid :gridList="cupList"></grid>
 67 | 
 68 |     <!-- 椅子 -->
 69 |     <blank :blankList="blankList"></blank>
 70 |     <div class="swipe">
 71 |       <img src="http://img01.yzcdn.cn/upload_files/2020/04/03/FtmsDt0GVeLpyt6mRcSTOodJ4N3k.jpg" />
 72 | 
 73 |     </div>
 74 |     <blank :blankList="blankList"></blank>
 75 |     <blank :blankList="blankList"></blank>
 76 |     <div class="sign">
 77 |       <img src="http://img01.yzcdn.cn/upload_files/2020/03/25/Fk8-fjW3Tp433lwKEUW0EI6ztgOi.jpg" />
 78 |     </div>
 79 |     <grid :gridList="chairList"></grid>
 80 |     <!-- 去逛逛 -->
 81 |     <go
 82 |       :goList="goList"
 83 |       class="top"
 84 |     ></go>
 85 |     <blank :blankList="blankList"></blank>
 86 |     <div class="sign">
 87 |       <img src="http://img01.yzcdn.cn/upload_files/2020/03/25/FvgGm8ilpxn1qIXqjBCJ16Zgs2E5.jpg" />
 88 |     </div>
 89 | 
 90 |     <swipe :lunboList="easyList"></swipe>
 91 |     <grid :gridList="chair2List"></grid>
 92 | 
 93 |     <!-- 去逛逛 -->
 94 |     <go
 95 |       :goList="goList"
 96 |       class="top"
 97 |     ></go>
 98 |     <blank :blankList="blankList"></blank>
 99 |     <div class="sign">
100 |       <img src="http://img01.yzcdn.cn/upload_files/2020/03/25/FnA__hIhfGzgI4VCSal2CqCAviC5.jpg" />
101 |     </div>
102 |     <grid :gridList="officeList"></grid>
103 |     <blank :blankList="blankList"></blank>
104 |     <blank :blankList="blankList"></blank>
105 |     <!-- 办公 -->
106 |     <div class="sign">
107 |       <img src="http://img01.yzcdn.cn/upload_files/2020/03/26/Fi71FYXsImfkdQh8qYcTectuvGuF.jpg" />
108 |     </div>
109 | 
110 |     <swipe :lunboList="biglightList"></swipe>
111 |     <grid :gridList="lamps"></grid>
112 |     <!-- 去逛逛 -->
113 |     <go
114 |       :goList="goList"
115 |       class="top"
116 |     ></go>
117 |     <blank :blankList="blankList"></blank>
118 |     <blank :blankList="blankList"></blank>
119 | 
120 |     <!-- FREDERICIA -->
121 |     <div class="sign">
122 |       <img src="http://img01.yzcdn.cn/upload_files/2020/03/25/Fs9ICO0eUh214dIynQBwblXvI0MA.jpg" />
123 |     </div>
124 |     <swipe :lunboList="deskList"></swipe>
125 |     <grid :gridList="woodsList"></grid>
126 | 
127 |     <blank :blankList="blankList"></blank>
128 |     
129 | 
130 |   </div>
131 | 
132 | </template>
133 | <script lang="ts">
134 | import { defineComponent, reactive, toRefs } from "vue";
135 | import swipe from "../components/Swipe.vue";
136 | import sign from "../components/Sign.vue";
137 | import blank from "../components/Blank.vue";
138 | import Grid from "../components/Grid.vue";
139 | import Go from "../components/Go.vue";
140 | import Title from "../components/Title.vue";
141 | import xqaxios from "../utils/axios.js";
142 | import {
143 |   LunboUrl,
144 |   generalUrl,
145 |   blankUrl,
146 |   goUrl,
147 |   general2Url,
148 |   iconUrl,
149 |   goodsNatureUrl,
150 |   TitleUrl,
151 |   cupUrl,
152 |   chairUrl,
153 |   easyUrl,
154 |   chair2Url,
155 |   officeUrl,
156 |   bigLightUrl,
157 |   lampsUrl,
158 |   goodsUrl,
159 |   deskUrl,
160 |   woodsUrl,
161 | } from "../utils/api.js";
162 | 
163 | export default defineComponent({
164 |   name: "Home",
165 |   components: {
166 |     swipe,
167 |     sign,
168 |     blank,
169 |     Grid,
170 |     Go,
171 |     Title,
172 |   
173 |   },
174 |   setup() {
175 |     const state = reactive({
176 |       lunboList: [],
177 |       generalList: [],
178 |       iconList: [],
179 |       generalList2: [],
180 |       blankList: [],
181 |       gridList: [],
182 |       goList: [],
183 |       goodsNatureList: [],
184 |       titleList: [],
185 |       cupList: [],
186 |       chairList: [],
187 |       easyList: [],
188 |       chair2List: [],
189 |       officeList: [],
190 |       biglightList: [],
191 |       lamps: [],
192 |       deskList: [],
193 |       woodsList: [],
194 |     });
195 | 
196 |     const getLunbo = async () => {
197 |       let result = await xqaxios("GET", LunboUrl);
198 |       state.lunboList = result.message;
199 |     };
200 |     const getGeneral = async () => {
201 |       let result = await xqaxios("GET", generalUrl);
202 |       state.generalList = result.message;
203 |     };
204 | 
205 |     const getblank = async () => {
206 |       let result = await xqaxios("GET", blankUrl);
207 |       state.blankList = result.message;
208 |     };
209 | 
210 |     const getgo = async () => {
211 |       let result = await xqaxios("GET", goUrl);
212 |       state.goList = result.message;
213 |     };
214 | 
215 |     const getGeneral2 = async () => {
216 |       let result = await xqaxios("GET", general2Url);
217 |       state.generalList2 = result.message;
218 |     };
219 | 
220 |     const getIcon = async () => {
221 |       let result = await xqaxios("GET", iconUrl);
222 |       state.iconList = result.message;
223 |     };
224 | 
225 |     const getgoods = async () => {
226 |       let result = await xqaxios("GET", goodsUrl);
227 |       state.gridList = result.message;
228 |     };
229 | 
230 |     const getgoodsNature = async () => {
231 |       let result = await xqaxios("GET", goodsNatureUrl);
232 |       state.goodsNatureList = result.message;
233 |     };
234 | 
235 |     const getTitle = async () => {
236 |       let result = await xqaxios("GET", TitleUrl);
237 |       state.titleList = result.message;
238 |     };
239 | 
240 |     const getCup = async () => {
241 |       let result = await xqaxios("GET", cupUrl);
242 |       state.cupList = result.message;
243 |     };
244 | 
245 |     const getChair = async () => {
246 |       let result = await xqaxios("GET", chairUrl);
247 |       state.chairList = result.message;
248 |     };
249 | 
250 |     const getEasy = async () => {
251 |       let result = await xqaxios("GET", easyUrl);
252 |       state.easyList = result.message;
253 |     };
254 | 
255 |     const getchair2 = async () => {
256 |       let result = await xqaxios("GET", chair2Url);
257 |       state.chair2List = result.message;
258 |     };
259 | 
260 |     const getoffice = async () => {
261 |       let result = await xqaxios("GET", officeUrl);
262 |       state.officeList = result.message;
263 |     };
264 | 
265 |     const getbiglight = async () => {
266 |       let result = await xqaxios("GET", bigLightUrl);
267 |       state.biglightList = result.message;
268 |     };
269 | 
270 |     const getlamps = async () => {
271 |       let result = await xqaxios("GET", lampsUrl);
272 |       state.lamps = result.message;
273 |     };
274 | 
275 |     const getdesk = async () => {
276 |       let result = await xqaxios("GET", deskUrl);
277 |       state.deskList = result.message;
278 |     };
279 | 
280 |     const getwoods = async () => {
281 |       let result = await xqaxios("GET", woodsUrl);
282 |       state.woodsList = result.message;
283 |     };
284 | 
285 |     getLunbo();
286 |     getGeneral();
287 |     getblank();
288 |     getGeneral2();
289 |     getIcon();
290 |     getgoods();
291 |     getgo();
292 |     getgoodsNature();
293 |     getTitle();
294 |     getCup();
295 |     getChair();
296 |     getEasy();
297 |     getchair2();
298 |     getoffice();
299 |     getbiglight();
300 |     getlamps();
301 |     getdesk();
302 |     getwoods();
303 |     return { ...toRefs(state) };
304 |   },
305 | });
306 | </script>
307 | 
308 | <style lang='less'>
309 | .box {
310 |   padding-top: 46px;
311 |   padding-bottom: 50px;
312 |   overflow: hidden;
313 |   .swipe_1 {
314 |     width: 750rpx;
315 |     height: 200rpx;
316 |     overflow: hidden;
317 |     img {
318 |       width: 100px;
319 |       height: 100px;
320 |     }
321 |   }
322 | 
323 |   .swipe {
324 |     width: 750rpx;
325 |     height: 900rpx;
326 |     overflow: hidden;
327 |     margin-bottom: 0;
328 |     img {
329 |       width: 100%;
330 |       height: 100%;
331 |     }
332 |   }
333 | 
334 |   .top {
335 |     margin-top: 30px;
336 |   }
337 | 
338 |   .sign {
339 |     width: 750rpx;
340 |     height: 70rpx;
341 |     img {
342 |       width: 100%;
343 |       height: 100%;
344 |     }
345 |   }
346 | 
347 |   .big{
348 |     margin-top:30px;
349 |     width:100%;
350 |     height:100px;
351 |     overflow-x: scroll;
352 |     .middle{
353 |       width:1200px;
354 |          .small{
355 |       width:80px;
356 |       height:80px;
357 |       display: inline-block;
358 |         img{
359 |           width:80px;
360 |           height:80px;
361 |         }
362 |     
363 |     }
364 |     }
365 |    
366 |   }
367 | }
368 | </style>


--------------------------------------------------------------------------------
/src/views/GoodsInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="continer">
  3 |     <van-nav-bar fixed left-arrow
  4 |   @click-left="onClickLeft"><template #title>
  5 |         {{goodsInfo.title}}
  6 |       </template>
  7 |     </van-nav-bar>
  8 |     <div class="top">
  9 |       <goods-swipe :lunboList="lunboList"></goods-swipe>
 10 |       <div class="price">
 11 |         <span>￥{{goodsInfo.min_price}}</span>
 12 |         <span v-if="goodsInfo.max_price>0">-{{goodsInfo.max_price}}</span>
 13 |       </div>
 14 |       <div class="title">
 15 |         <div class="left">{{goodsInfo.title}}</div>
 16 |         <div
 17 |           class="right"
 18 |           @click="showShare = true"
 19 |         >
 20 | 
 21 |           <van-icon
 22 |             name="share"
 23 |             color="#555"
 24 |             style="text-align:center"
 25 |           />
 26 |           <span>分享</span>
 27 |         </div>
 28 |         <van-share-sheet
 29 |           v-model:show="showShare"
 30 |           title="立即分享给好友"
 31 |           :options="options"
 32 |           @select="onSelect"
 33 |         />
 34 | 
 35 |       </div>
 36 | 
 37 |       <div
 38 |         v-if='goodsInfo.presaleinfo>0'
 39 |         class="presaleinfo"
 40 |       >
 41 |         <span class="radio">预售</span>
 42 |         <span>付款后{{goodsInfo.presaleinfo}}天后发货</span>
 43 |       </div>
 44 |     </div>
 45 | 
 46 |     <div
 47 |       class="second"
 48 |       v-if="goodsInfo.ranking>0"
 49 |     >
 50 |       <div @click="toHot">
 51 |         <img src="../assets/火.png" />
 52 |         <span class="desc">店铺商品热榜排行第{{goodsInfo.ranking}}名</span>
 53 |       </div>
 54 |       <van-icon name="arrow" />
 55 |     </div>
 56 | 
 57 |     <div class="third">
 58 |       <div class="box">
 59 |         <span class="left">运费</span>
 60 |         <span>免运费</span>
 61 |       </div>
 62 |       <div>剩余{{goodsInfo.counts}}</div>
 63 | 
 64 |     </div>
 65 | 
 66 |     <div
 67 |       class="third"
 68 |       is-link
 69 |       @click="showPopup"
 70 |     >
 71 |       <div class="box">
 72 |         <span class="left">服务</span>
 73 |         <span>{{goodsInfo.labelname}}</span>
 74 |       </div>
 75 |       <div>
 76 |         <van-icon name="arrow" />
 77 |       </div>
 78 |     </div>
 79 |     <van-popup
 80 |       v-model:show="show"
 81 |       round
 82 |       position="bottom"
 83 |       :style="{ height: '50%' }"
 84 |     >
 85 |       <div class="prop">
 86 |         <div class="title">{{smallList[0]}}</div>
 87 |         <div class="content">{{bigList[0]}}</div>
 88 |         <div class="title">{{smallList[1]}}</div>
 89 |         <div class="content">{{bigList[1]}}</div>
 90 |         <div class="title">{{smallList[2]}}</div>
 91 |         <div class="content">{{bigList[2]}}</div>
 92 |         <div><button
 93 |             class="btn"
 94 |             @click="closePopup"
 95 |           >我知道了</button></div>
 96 | 
 97 |       </div>
 98 | 
 99 |     </van-popup>
100 | 
101 |     <div class="third big">
102 |       <div
103 |         class="box"
104 |         @click="showPopup2"
105 |       >
106 |         <span class="left">选择</span>
107 |         <span>款式</span>
108 |         <div class="kuanshi">
109 |           <van-grid
110 |             :border="false"
111 |             :column-num="newList.length"
112 |           >
113 |             <van-grid-item
114 |               v-for='item in newList'
115 |               :key="item.id"
116 |             >
117 |               <van-image :src="item.imgUrl" />
118 |             </van-grid-item>
119 |           </van-grid>
120 |           <div class="sign">
121 |             <div class="text">共有{{newList.length}}种款式可选</div>
122 |           </div>
123 |         </div>
124 |       </div>
125 |       <van-icon name="arrow" />
126 |       <van-popup
127 |         v-model:show="show2"
128 |         round
129 |         position="bottom"
130 |         closeable
131 |         :style="{ height: '70%' }"
132 |       >
133 |         <goods-style
134 |           :list="newList"
135 |           :goodInfo="goodsInfo"
136 |         ></goods-style>
137 |       </van-popup>
138 |     </div>
139 | 
140 |     <div class="third">
141 |       <div class="box">
142 |         <span class="left">
143 |           <img
144 |             :src="goodsInfo.logo"
145 |             class="img"
146 |           />
147 |         </span>
148 |         <span class="name">Canban家具店</span>
149 |       </div>
150 |       <div class="right">
151 | 
152 |         <router-link :to="'/'"><button
153 |             class='btn'
154 |             :to="'/'"
155 |           >进店逛逛</button></router-link>
156 |       </div>
157 | 
158 |     </div>
159 | 
160 |     <div
161 |       v-html="goodsInfo.content"
162 |       class="desc"
163 |     ></div>
164 | 
165 |     <div>
166 |       <recommend></recommend>
167 |     </div>
168 | 
169 |     <van-action-bar>
170 |       <van-action-bar-icon
171 |         icon="shop-o"
172 |         text="店铺"
173 |         :to="'/'"
174 |       />
175 |       <van-action-bar-icon
176 |         icon="cart-o"
177 |         text="购物车"
178 |         :to="'/car'"
179 |       />
180 |       <van-action-bar-button
181 |         type="warning"
182 |         color="#E8E8E8"
183 |         text="加入购物车"
184 |         style="color:black"
185 |          @click="showPopup2"
186 |       />
187 |       <van-action-bar-button
188 |         type="danger"
189 |         color="#282828 "
190 |         text="立即购买"
191 |          @click="showPopup2"
192 |       />
193 |     </van-action-bar>
194 | 
195 |   </div>
196 | 
197 | </template>
198 | 
199 | <script lang="ts">
200 | import { defineComponent, reactive, toRefs, ref } from "vue";
201 | import xqaxios from "../utils/axios.js";
202 | import { newUrl } from "../utils/api.js";
203 | import axios from "axios";
204 | import GoodsStyle from "../components/goodsStyle.vue";
205 | import GoodsSwipe from "../components/GoodsSwipe.vue";
206 | import Recommend from "../components/Recommend.vue";
207 | import { useRouter } from "vue-router";
208 | export default defineComponent({
209 |   name: "GoodsInfo",
210 |   props: ["id"],
211 |   components: { GoodsSwipe, GoodsStyle, Recommend },
212 |   setup(props: any, context) {
213 |     const showShare = ref(false);
214 |     const options = [
215 |       [
216 |         { name: "微信", icon: "wechat" },
217 |         { name: "朋友圈", icon: "wechat-moments" },
218 |         { name: "微博", icon: "weibo" },
219 |         { name: "QQ", icon: "qq" },
220 |       ],
221 |       [
222 |         { name: "复制链接", icon: "link" },
223 |         { name: "分享海报", icon: "poster" },
224 |         { name: "二维码", icon: "qrcode" },
225 |         { name: "小程序码", icon: "weapp-qrcode" },
226 |       ],
227 |     ];
228 |     const state: any = reactive({
229 |       loading: true,
230 |       id: props.id,
231 |       goodsInfo: [],
232 |       lunboList: [],
233 |       smallList: [],
234 |       bigList: [],
235 |       goodsList: [],
236 |       newList: [],
237 |     });
238 |     const getGoodsInfo = async () => {
239 |       let result = await xqaxios("GET", newUrl + `${state.id}`);
240 |       state.goodsInfo = result.message[0];
241 |       console.log(state.goodsInfo, "000000000000");
242 |       state.lunboList = state.goodsInfo.pictures.split(",");
243 |       state.smallList = state.goodsInfo.labelname.split(",");
244 |       state.goodsList = state.goodsInfo.style.split("&");
245 |       console.log(state.goodsList,"00000000000")
246 |       state.bigList = state.goodsInfo.labeldesc.split("·");
247 |       for (let i = 0; i < state.goodsList.length; i++) {
248 |         // console.log(state.goodsList[i],"ccccccccccccccccccc");
249 |         state.newList.push(JSON.parse(state.goodsList[i]));
250 |         console.log(state.newList, "ppppppppppppppp");
251 |       }
252 |     };
253 | 
254 |     getGoodsInfo();
255 |     const show = ref(false);
256 |     const showPopup = () => {
257 |       show.value = true;
258 |     };
259 |     const show2 = ref(false);
260 |     const showPopup2 = () => {
261 |       show2.value = true;
262 |     };
263 |     const closePopup = () => {
264 |       show.value = false;
265 |     };
266 |     const onSelect = () => {
267 |       showShare.value = false;
268 |     };
269 |     const router=useRouter();
270 |     const onClickLeft=()=>{
271 |       router.go(-1)
272 |     }
273 | 
274 |     const toHot=()=>{
275 |       router.push("/api/hot")
276 |     }
277 |     // state.lunboList=state.goodsInfo.pictures.split(',');
278 |     return {
279 |       ...toRefs(state),
280 |       show,
281 |       showPopup,
282 |       closePopup,
283 |       options,
284 |       showShare,
285 |       onSelect,
286 |       show2,
287 |       showPopup2,
288 |       onClickLeft,toHot
289 |     };
290 |   },
291 | });
292 | </script>
293 | 
294 | <style scoped lang="less">
295 | /deep/.van-swipe__track {
296 |   padding-top: 46px;
297 | }
298 | .continer {
299 |   padding-top: 0px;
300 |   margin-top: 0;
301 |   padding-bottom: 50px;
302 |   font-size: 14px;
303 |   background-color: #f0f0f0;
304 |   /deep/ .desc {
305 |     padding: 10px;
306 |     background-color: #fff;
307 |     /deep/ p {
308 |       font-size: 16px;
309 |       margin-bottom: 10px;
310 |       img {
311 |         width: 100%;
312 |         margin-bottom: 10px;
313 |       }
314 |     }
315 |   }
316 |   .top {
317 |     margin-top: 0;
318 |     padding: 0 10px;
319 |     background-color: #fff;
320 |     margin-bottom: 20px;
321 |     padding-bottom: 10px;
322 |     .price {
323 |       font-weight: bold;
324 |       font-size: 20px;
325 |     }
326 |     .title {
327 |       margin: 10px auto;
328 |       display: flex;
329 |       font-size: 14px;
330 |       justify-content: space-between;
331 |       .van-popup {
332 |         .van-share-sheet__options {
333 |           padding: 16px 0;
334 |           display: flex;
335 |           justify-content: center;
336 |         }
337 |       }
338 |       .left {
339 |         line-height: 33px;
340 |       }
341 |       .right {
342 |         display: flex;
343 |         flex-direction: column;
344 |       }
345 |     }
346 | 
347 |     .presaleinfo {
348 |       font-size: 12px;
349 |       .radio {
350 |         padding: 0 4px;
351 |         border-radius: 4px;
352 |         background-color: #d8d8d8;
353 |       }
354 |     }
355 |   }
356 | 
357 |   .second {
358 |     margin-top: 20px;
359 |     padding: 10px;
360 |     font-size: 14px;
361 |     display: flex;
362 |     justify-content: space-between;
363 |     background-color: #fff;
364 |     .desc {
365 |       position: absolute;
366 |       top: 540px;
367 |     }
368 |   }
369 | 
370 |   .third {
371 |     margin-top: 10px;
372 |     padding: 10px 20px;
373 |     display: flex;
374 |     background-color: #fff;
375 |     justify-content: space-between;
376 |     /deep/.box {
377 |       padding: 0;
378 |       position: relative;
379 |       overflow: inherit;
380 |       .left {
381 |         color: rgb(168, 165, 165);
382 |         margin-right: 20px;
383 |         .img {
384 |           width: 50px;
385 |           height: 50px;
386 |         }
387 |       }
388 | 
389 |       .name {
390 |         font-size: 18px;
391 |         width: 120px;
392 |         position: absolute;
393 |         top: 20px;
394 |         z-index: 999;
395 |       }
396 |     }
397 | 
398 |     .right {
399 |       position: relative;
400 |       .btn {
401 |         width: 80px;
402 |         height: 30px;
403 |         border: 1px solid #000;
404 |         color: #000;
405 |         border-radius: 10px;
406 |         background-color: #fff;
407 |         position: absolute;
408 |         top: 17px;
409 |         right: 10px;
410 |       }
411 |     }
412 |   }
413 | 
414 |   .big {
415 |     height: 80px;
416 | 
417 |     /deep/.van-grid {
418 |       height: 50px;
419 |       width: 160px;
420 |       overflow: hidden;
421 |     }
422 |     .box {
423 |       padding: 0;
424 | 
425 |       .kuanshi {
426 |         padding-left: 40px;
427 |         display: flex;
428 |         /deep/.van-grid-item__content--center {
429 |           width: 50px;
430 |           padding: 10px;
431 |           /deep/img.van-image__img {
432 |             border-radius: 4px;
433 |           }
434 |         }
435 |         .sign {
436 |           padding-top: 10px;
437 |           padding-left: 10px;
438 |           .text {
439 |             background-color: #f0f0f0;
440 |             border-radius: 4px;
441 |             color: #c0c0c0;
442 |             font-size: 12px;
443 |             height: 30px;
444 |             line-height: 30px;
445 |           }
446 |         }
447 |       }
448 |     }
449 |   }
450 | 
451 |   .van-popup {
452 |     .prop {
453 |       padding: 20px;
454 |       .title {
455 |         font-weight: bold;
456 |         font-size: 16px;
457 |         margin-bottom: 10px;
458 |       }
459 |       .content {
460 |         margin-bottom: 10px;
461 |         color: #b8b8b8;
462 |       }
463 | 
464 |       .btn {
465 |         position: absolute;
466 |         bottom: 20px;
467 |         left: 50%;
468 |         margin-left: -140px;
469 |         width: 280px;
470 |         height: 40px;
471 |         background-color: #2f2f34;
472 |         border-radius: 20px;
473 |         color: #fff;
474 |       }
475 |     }
476 |   }
477 | }
478 | </style>


--------------------------------------------------------------------------------