├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── preview
    ├── cart.png
    ├── category.png
    ├── eat.png
    ├── home.png
    └── mine.png
├── public
    ├── icon.png
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── img
    │   │   ├── ali.png
    │   │   ├── avatar.jpg
    │   │   ├── default_grey.jpg
    │   │   ├── empty_address.png
    │   │   ├── empty_cart.png
    │   │   ├── empty_order.jpg
    │   │   ├── hb.png
    │   │   ├── home_bg.png
    │   │   ├── icon_loading.png
    │   │   ├── top.png
    │   │   ├── vip.png
    │   │   └── wx.png
    │   └── js
    │   │   └── area.js
    ├── components
    │   ├── bscroll.vue
    │   ├── dropBall.vue
    │   ├── loading.vue
    │   └── scrollTop.vue
    ├── http.js
    ├── main.js
    ├── plugins
    │   ├── format.js
    │   ├── global.js
    │   ├── index.js
    │   └── rem.js
    ├── router.js
    ├── store
    │   ├── actions.js
    │   ├── index.js
    │   ├── mutation-types.js
    │   ├── mutations.js
    │   └── state.js
    └── views
    │   ├── cart
    │       ├── index.vue
    │       └── order
    │       │   ├── components
    │       │       └── timelist.vue
    │       │   ├── goodsList.vue
    │       │   └── orderFill.vue
    │   ├── category
    │       └── index.vue
    │   ├── detail
    │       └── index.vue
    │   ├── eat
    │       ├── collection
    │       │   └── collection.vue
    │       └── index.vue
    │   ├── home
    │       ├── components
    │       │   ├── header.vue
    │       │   ├── limit.vue
    │       │   └── special.vue
    │       ├── index.vue
    │       └── myMap.vue
    │   ├── layout.vue
    │   ├── login
    │       └── index.vue
    │   └── mine
    │       ├── address
    │           ├── addAddress.vue
    │           ├── editAddress.vue
    │           └── myAddress.vue
    │       ├── coupon.vue
    │       ├── index.vue
    │       ├── order.vue
    │       ├── profile
    │           ├── changeName.vue
    │           └── profile.vue
    │       └── vip
    │           ├── payVip.vue
    │           └── vip.vue
├── vue.config.js
└── yarn.lock


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 移动端叮咚买菜 vue + vant
 2 | 
 3 | ### 免责说明
 4 | 本项目仅限技术交流，不建议商业使用，产生的一切侵权著作法律后果，与本作者无关。
 5 | 
 6 | ### 预览
 7 | <div style="width:100%;display:flex;flex-wrap:wrap;">
 8 |   <img src="./preview/home.png" width="33%" alt="">
 9 |   <img src="./preview/category.png" width="33%" alt="">
10 |   <img src="./preview/eat.png" width="33%" alt="">
11 |   <img src="./preview/cart.png" width="33%" alt="">
12 |   <img src="./preview/mine.png" width="33%" alt="">
13 | </div>
14 | 
15 | ### 安装依赖（推荐yarn）
16 | ```
17 | yarn install
18 | ```
19 | 
20 | ### 本地运行
21 | ```
22 | yarn serve
23 | ```
24 | 
25 | ### 本地打包
26 | ```
27 | yarn build
28 | ```
29 | 
30 | 
31 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     '@vue/cli-plugin-babel/preset'
 4 |   ],
 5 |   plugins: [
 6 |     ['import', {
 7 |       libraryName: 'vant',
 8 |       libraryDirectory: 'es',
 9 |       style: true
10 |     }, 'vant']
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ding-buy",
 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 |     "axios": "^0.19.0",
12 |     "better-scroll": "^1.15.2",
13 |     "core-js": "^3.3.2",
14 |     "fastclick": "^1.0.6",
15 |     "reset-css": "^5.0.1",
16 |     "vant": "^2.2.13",
17 |     "vue": "^2.6.10",
18 |     "vue-amap": "^0.5.10",
19 |     "vue-router": "^3.1.3",
20 |     "vue-waterfall2": "^1.9.5",
21 |     "vuex": "^3.1.2"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "^4.0.0",
25 |     "@vue/cli-plugin-eslint": "^4.0.0",
26 |     "@vue/cli-service": "^4.0.0",
27 |     "babel-eslint": "^10.0.3",
28 |     "babel-plugin-import": "^1.12.2",
29 |     "eslint": "^5.16.0",
30 |     "eslint-plugin-vue": "^5.0.0",
31 |     "node-sass": "^4.13.0",
32 |     "sass-loader": "^8.0.0",
33 |     "vue-template-compiler": "^2.6.10"
34 |   },
35 |   "eslintConfig": {
36 |     "root": true,
37 |     "env": {
38 |       "node": true
39 |     },
40 |     "extends": [
41 |       "plugin:vue/essential",
42 |       "eslint:recommended"
43 |     ],
44 |     "rules": {},
45 |     "parserOptions": {
46 |       "parser": "babel-eslint"
47 |     }
48 |   },
49 |   "postcss": {
50 |     "plugins": {
51 |       "autoprefixer": {}
52 |     }
53 |   },
54 |   "browserslist": [
55 |     "> 1%",
56 |     "last 2 versions"
57 |   ]
58 | }
59 | 


--------------------------------------------------------------------------------
/preview/cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/preview/cart.png


--------------------------------------------------------------------------------
/preview/category.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/preview/category.png


--------------------------------------------------------------------------------
/preview/eat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/preview/eat.png


--------------------------------------------------------------------------------
/preview/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/preview/home.png


--------------------------------------------------------------------------------
/preview/mine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/preview/mine.png


--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/public/icon.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
 7 |     <link rel="icon" href="<%= BASE_URL %>icon.png">
 8 |     <title>叮咚买菜</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but ding-buy doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | <style>
 7 | #app {
 8 |   width: 100%;
 9 |   height: 100%;
10 |   touch-action: none;
11 | }
12 | img {
13 |   width: 100%;
14 |   height: 100%;
15 |   vertical-align: middle !important;
16 | }
17 | .van-nav-bar .van-icon {
18 |   color: grey;
19 | }
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/assets/img/ali.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/ali.png


--------------------------------------------------------------------------------
/src/assets/img/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/avatar.jpg


--------------------------------------------------------------------------------
/src/assets/img/default_grey.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/default_grey.jpg


--------------------------------------------------------------------------------
/src/assets/img/empty_address.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/empty_address.png


--------------------------------------------------------------------------------
/src/assets/img/empty_cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/empty_cart.png


--------------------------------------------------------------------------------
/src/assets/img/empty_order.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/empty_order.jpg


--------------------------------------------------------------------------------
/src/assets/img/hb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/hb.png


--------------------------------------------------------------------------------
/src/assets/img/home_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/home_bg.png


--------------------------------------------------------------------------------
/src/assets/img/icon_loading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/icon_loading.png


--------------------------------------------------------------------------------
/src/assets/img/top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/top.png


--------------------------------------------------------------------------------
/src/assets/img/vip.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/vip.png


--------------------------------------------------------------------------------
/src/assets/img/wx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZedCoding/ding-buy/3449edfd7a41deea67c46ffb538f662c1782cbca/src/assets/img/wx.png


--------------------------------------------------------------------------------
/src/components/bscroll.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div ref="wrapper">
  3 |     <slot></slot>
  4 |   </div>
  5 | </template>
  6 | <script >
  7 | import BScroll from "better-scroll";
  8 | export default {
  9 |   props: {
 10 |     /**
 11 |      * 1 滚动的时候会派发scroll事件，会截流。
 12 |      * 2 滚动的时候实时派发scroll事件，不会截流。
 13 |      * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
 14 |      */
 15 |     probeType: {
 16 |       type: Number,
 17 |       default: 1
 18 |     },
 19 |     /**
 20 |      * 点击列表是否派发click事件
 21 |      */
 22 |     click: {
 23 |       type: Boolean,
 24 |       default: true
 25 |     },
 26 |     /**
 27 |      * 是否开启横向滚动
 28 |      */
 29 |     scrollX: {
 30 |       type: Boolean,
 31 |       default: false
 32 |     },
 33 |     /**
 34 |      * 是否开启纵向滚动
 35 |      */
 36 |     scrollY: {
 37 |       type: Boolean,
 38 |       default: false
 39 |     },
 40 |     /**
 41 |      * 是否派发滚动事件
 42 |      */
 43 |     listenScroll: {
 44 |       type: Boolean,
 45 |       default: false
 46 |     },
 47 |     /**
 48 |      * 列表的数据
 49 |      */
 50 |     data: {
 51 |       type: Array,
 52 |       default: () => []
 53 |     },
 54 |     /**
 55 |      * 是否派发滚动到底部的事件，用于上拉加载
 56 |      */
 57 |     pullup: {
 58 |       type: Boolean,
 59 |       default: false
 60 |     },
 61 |     /**
 62 |      * 是否派发顶部下拉的事件，用于下拉刷新
 63 |      */
 64 |     pulldown: {
 65 |       type: Boolean,
 66 |       default: false
 67 |     },
 68 |     /**
 69 |      * 是否派发列表滚动开始的事件
 70 |      */
 71 |     beforeScroll: {
 72 |       type: Boolean,
 73 |       default: false
 74 |     },
 75 |     /**
 76 |      * 当数据更新后，刷新scroll的延时。
 77 |      */
 78 |     refreshDelay: {
 79 |       type: Number,
 80 |       default: 20
 81 |     }
 82 |   },
 83 |   mounted() {
 84 |     // 保证在DOM渲染完毕后初始化better-scroll
 85 |     setTimeout(() => {
 86 |       this._initScroll();
 87 |     }, 50);
 88 |   },
 89 |   methods: {
 90 |     _initScroll() {
 91 |       if (!this.$refs.wrapper) return;
 92 |       // better-scroll的初始化
 93 |       this.scroll = new BScroll(this.$refs.wrapper, {
 94 |         probeType: this.probeType,
 95 |         click: this.click,
 96 |         scrollX: this.scrollX,
 97 |         scrollY: this.scrollY
 98 |       });
 99 |       // 是否派发滚动事件
100 |       if (this.listenScroll) {
101 |         let me = this;
102 |         this.scroll.on("scroll", pos => {
103 |           me.$emit("scroll", pos);
104 |         });
105 |       }
106 |       // 是否派发滚动到底部事件，用于上拉加载
107 |       if (this.pullup) {
108 |         this.scroll.on("scrollEnd", () => {
109 |           // 滚动到底部
110 |           if (this.scroll.y <= this.scroll.maxScrollY + 50) {
111 |             this.$emit("scrollToEnd");
112 |           }
113 |         });
114 |       }
115 |       // 是否派发顶部下拉事件，用于下拉刷新
116 |       if (this.pulldown) {
117 |         this.scroll.on("touchend", pos => {
118 |           // 下拉动作
119 |           if (pos.y > 50) {
120 |             this.$emit("pulldown");
121 |           }
122 |         });
123 |       }
124 |       // 是否派发列表滚动开始的事件
125 |       if (this.beforeScroll) {
126 |         this.scroll.on("beforeScrollStart", () => {
127 |           this.$emit("beforeScroll");
128 |         });
129 |       }
130 |     },
131 |     disable() {
132 |       // 代理better-scroll的disable方法
133 |       this.scroll && this.scroll.disable();
134 |     },
135 |     enable() {
136 |       // 代理better-scroll的enable方法
137 |       this.scroll && this.scroll.enable();
138 |     },
139 |     refresh() {
140 |       // 代理better-scroll的refresh方法
141 |       this.scroll && this.scroll.refresh();
142 |     },
143 |     scrollTo() {
144 |       // 代理better-scroll的scrollTo方法
145 |       this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
146 |     },
147 |     scrollToElement() {
148 |       // 代理better-scroll的scrollToElement方法
149 |       this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
150 |     }
151 |   },
152 |   watch: {
153 |     // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
154 |     data() {
155 |       setTimeout(() => {
156 |         this.refresh();
157 |       }, this.refreshDelay);
158 |     }
159 |   }
160 | };
161 | </script>


--------------------------------------------------------------------------------
/src/components/dropBall.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="drop-ball">
 3 |     <transition
 4 |       appear
 5 |       @after-appear="afterEnter"
 6 |       @before-appear="beforeEnter"
 7 |       v-for="(item,index) in dots"
 8 |       :key="index"
 9 |     >
10 |       <div class="move-dot" v-if="item">
11 |         <img :src="dropImg" class="img" alt />
12 |       </div>
13 |     </transition>
14 |   </div>
15 | </template>
16 | <script>
17 | export default {
18 |   name: "dropBall",
19 |   props: ["dropImg", "elLeft", "elTop", "dots"],
20 | 
21 |   methods: {
22 |     beforeEnter(el) {
23 |       // 设置transform值
24 |       el.style.transform = `translate3d(${this.elLeft - 30}px,${this.elTop -
25 |         100}px , 0)`;
26 |       // 设置透明度
27 |       el.style.opacity = 0;
28 |     },
29 |     afterEnter(el) {
30 |       // 获取底部购物车徽标的位置
31 |       const badgePosition = document
32 |         .getElementById("buycar")
33 |         .getBoundingClientRect();
34 |       // 设置位移
35 |       el.style.transform = `translate3d(${badgePosition.left +
36 |         30}px,${badgePosition.top - 30}px,0)`;
37 |       // 增加贝塞尔曲线
38 |       el.style.transition =
39 |         "transform .88s cubic-bezier(0.3, -0.25, 0.7, -0.15)";
40 |       el.style.transition = "transform .88s linear";
41 |       this.$emit("change", false);
42 |       // 设置透明度
43 |       el.style.opacity = 1;
44 |       // 监听小球动画结束方法
45 |       el.addEventListener("transitionend", () => {
46 |         el.style.display = "none";
47 |       });
48 |       el.addEventListener("webkitAnimationEnd", () => {
49 |         el.style.display = "none";
50 |       });
51 |     },
52 |   }
53 | };
54 | </script>
55 | <style lang='scss' scoped>
56 | .drop-ball {
57 |   position: relative;
58 |   .move-dot {
59 |     position: fixed;
60 |     top: 1rem;
61 |     width: 3rem;
62 |     height: 3rem;
63 |     border-radius: 50%;
64 |     z-index: 100;
65 |     .img {
66 |       animation: 0.88s mymove ease-in-out;
67 |       border-radius: 50%;
68 |     }
69 |   }
70 |   @keyframes mymove {
71 |     0% {
72 |       transform: scale(1);
73 |     }
74 |     25% {
75 |       transform: scale(0.8);
76 |     }
77 |     50% {
78 |       transform: scale(0.6);
79 |     }
80 |     75% {
81 |       transform: scale(0.4);
82 |     }
83 |     100% {
84 |       transform: scale(0.2);
85 |     }
86 |   }
87 | }
88 | </style>


--------------------------------------------------------------------------------
/src/components/loading.vue:
--------------------------------------------------------------------------------
 1 |  <template>
 2 |   <div class="loading_container" v-show="show">
 3 |     <div class="load_img" :style="{backgroundPositionY: -(positionY%7)*2.5 + 'rem'}"></div>
 4 |     <svg class="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
 5 |       <ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;" />
 6 |     </svg>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props:{
13 |     show: {
14 |       type: Boolean,
15 |       default: true
16 |     }
17 |   },
18 |   data() {
19 |     return {
20 |       positionY: 0,
21 |       timer: null
22 |     };
23 |   },
24 |   mounted() {
25 |     this.timer = setInterval(() => {
26 |       this.positionY++;
27 |     }, 600);
28 |   },
29 |   beforeDestroy() {
30 |     clearInterval(this.timer);
31 |   }
32 | };
33 | </script>
34 | 
35 | <style lang="scss" scoped>
36 | $icon: "~@/assets/img/icon_loading.png";
37 | @keyframes load {
38 |   0% {
39 |     transform: translateY(0px);
40 |   }
41 |   50% {
42 |     transform: translateY(-50px);
43 |   }
44 |   100% {
45 |     transform: translateY(0px);
46 |   }
47 | }
48 | @keyframes ellipse {
49 |   0% {
50 |     transform: scale(1);
51 |   }
52 |   50% {
53 |     transform: scale(0.3);
54 |   }
55 |   100% {
56 |     transform: scale(1);
57 |   }
58 | }
59 | .loading_container {
60 |   position: fixed;
61 |   top: 50%;
62 |   left: 50%;
63 |   transform: translate(-50%, -50%);
64 |   width: 2.5rem;
65 |   height: 2.5rem;
66 | }
67 | .load_img {
68 |   width: 100%;
69 |   height: 100%;
70 |   background: url($icon) no-repeat 0 0;
71 |   background-size: 2.5rem auto;
72 |   transform: translateY(0px);
73 |   animation: load 0.6s infinite ease-in-out;
74 |   position: relative;
75 |   z-index: 11;
76 | }
77 | .load_ellipse {
78 |   position: absolute;
79 |   width: 2.6rem;
80 |   height: 2.6rem;
81 |   top: 2.2rem;
82 |   left: 0.2rem;
83 |   z-index: 10;
84 |   animation: ellipse 0.6s infinite ease-in-out;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/scrollTop.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="scroll-top" v-show="show" @click="backTop">
 3 |     <img :src="require('@/assets/img/top.png')" alt />
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: "scrollTop",
 9 |   data() {
10 |     return {
11 |       show: false,
12 |       scrollTop: 0
13 |     };
14 |   },
15 |   methods: {
16 |     backTop() {
17 |       let timer = setInterval(() => {
18 |         let speed = Math.floor(-this.scrollTop / 5);
19 |         document.documentElement.scrollTop = document.body.scrollTop =
20 |           this.scrollTop + speed;
21 |         if (this.scrollTop === 0) {
22 |           clearInterval(timer);
23 |         }
24 |       }, 15);
25 |     },
26 |     scrollToTop() {
27 |       let scrollTop =
28 |         window.pageYOffset ||
29 |         document.documentElement.scrollTop ||
30 |         document.body.scrollTop;
31 |       this.scrollTop = scrollTop;
32 |       this.show = scrollTop > 0 ? true : false;
33 |     }
34 |   },
35 |   mounted() {
36 |     window.addEventListener("scroll", this.scrollToTop);
37 |   },
38 |   beforeDestroy() {
39 |     window.removeEventListener("scroll", this.scrollToTop);
40 |   }
41 | };
42 | </script>
43 | <style lang='scss' scoped>
44 | .scroll-top {
45 |   position: fixed;
46 |   right: 0.5rem;
47 |   bottom: 8rem;
48 | }
49 | </style>


--------------------------------------------------------------------------------
/src/http.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import router from './router'
 3 | import { Notify } from 'vant';
 4 | 
 5 | const http = axios.create({
 6 |   baseURL: 'https://mock.cangdu.org/mock/5d940466d360e8289c6a8eb7',
 7 |   timeout: 60000 // 请求超时时间,
 8 | })
 9 | 
10 | http.interceptors.request.use(config => {
11 |   config.url += '?t=' + new Date().getTime(); // 加时间戳防止请求缓存
12 |   return { ...config }
13 | }, error => {
14 |   return Promise.reject(error)
15 | })
16 | 
17 | http.interceptors.response.use(response => {
18 |   return response
19 | }, error => {
20 |   if (error && error.response) {
21 |     switch (error.response.status) {
22 |       case 400: case 500:
23 |         error.message = error.response.data.Message;
24 |         break;
25 |       case 401:
26 |         error.message = '无效授权，请重新登录(401)';
27 |         router.push({ path: '/login' })
28 |         break;
29 |       case 404:
30 |         error.message = "请求未找到(404)";
31 |         break;
32 |       default:
33 |         error.message = "连接出错啦~"
34 |         break;
35 |     }
36 |   } else {
37 |     error.message = "连击服务器失败"
38 |   }
39 |   Notify({ type: 'danger', message: error.message, duration: 800 });
40 |   return new Promise(() => { }) // pending的promise，中止promise链
41 | })
42 | 
43 | export default http
44 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import App from './App';
  3 | import router from './router';
  4 | import store from './store'
  5 | import "reset-css";
  6 | import waterfall from "vue-waterfall2";
  7 | import { rem, format } from './plugins';
  8 | import FastClick from 'fastclick';
  9 | import {
 10 |   Toast,
 11 |   Tabbar,
 12 |   TabbarItem,
 13 |   Icon,
 14 |   Button,
 15 |   Swipe,
 16 |   SwipeItem,
 17 |   Search,
 18 |   Divider,
 19 |   CountDown,
 20 |   Tab,
 21 |   Tabs,
 22 |   Loading,
 23 |   Lazyload,
 24 |   Cell,
 25 |   CellGroup,
 26 |   Grid,
 27 |   GridItem,
 28 |   Tag,
 29 |   NavBar,
 30 |   ActionSheet,
 31 |   DatetimePicker,
 32 |   Field,
 33 |   AddressList,
 34 |   AddressEdit,
 35 |   Dialog,
 36 |   CouponCell,
 37 |   CouponList,
 38 |   RadioGroup,
 39 |   Radio,
 40 |   Checkbox,
 41 |   Stepper,
 42 |   SubmitBar,
 43 |   ContactCard,
 44 |   ContactList,
 45 |   ContactEdit,
 46 |   Popup,
 47 |   Switch,
 48 |   Sticky,
 49 |   SwipeCell
 50 | } from 'vant';
 51 | 
 52 | Vue.use(Toast)
 53 |   .use(Tabbar)
 54 |   .use(TabbarItem)
 55 |   .use(Icon)
 56 |   .use(Button)
 57 |   .use(Swipe)
 58 |   .use(SwipeItem)
 59 |   .use(Search)
 60 |   .use(Divider)
 61 |   .use(CountDown)
 62 |   .use(Tab)
 63 |   .use(Tabs)
 64 |   .use(Loading)
 65 |   .use(Lazyload)
 66 |   .use(Cell)
 67 |   .use(CellGroup)
 68 |   .use(Grid)
 69 |   .use(GridItem)
 70 |   .use(Tag)
 71 |   .use(NavBar)
 72 |   .use(ActionSheet)
 73 |   .use(DatetimePicker)
 74 |   .use(Field)
 75 |   .use(AddressList)
 76 |   .use(AddressEdit)
 77 |   .use(Dialog)
 78 |   .use(CouponCell)
 79 |   .use(CouponList)
 80 |   .use(RadioGroup)
 81 |   .use(Radio)
 82 |   .use(Checkbox)
 83 |   .use(Stepper)
 84 |   .use(SubmitBar)
 85 |   .use(ContactCard)
 86 |   .use(ContactList)
 87 |   .use(ContactEdit)
 88 |   .use(Popup)
 89 |   .use(Switch)
 90 |   .use(Sticky)
 91 |   .use(SwipeCell)
 92 |   .use(waterfall)
 93 |   .use(format)
 94 |   .use(rem)
 95 | 
 96 | // 全局设置toast属性duration
 97 | Toast.setDefaultOptions({ duration: 1500 });
 98 | 
 99 | import http from './http'
100 | Vue.prototype.$http = http;
101 | 
102 | import loading from '@/components/loading';
103 | import scrollTop from '@/components/scrollTop';
104 | import dropBall from '@/components/dropBall';
105 | Vue.component('loading', loading);
106 | Vue.component('scrollTop', scrollTop);
107 | Vue.component('dropBall', dropBall);
108 | 
109 | // 解决移动端点击延迟200ms的问题
110 | if ('addEventListener' in document) {
111 |   document.addEventListener('DOMContentLoaded', function () {
112 |     FastClick.attach(document.body);
113 |   }, false);
114 | }
115 | 
116 | Vue.prototype.onClickLeft = () => {
117 |   router.back();
118 | }
119 | 
120 | Vue.config.productionTip = false
121 | 
122 | new Vue({
123 |   router,
124 |   store,
125 |   render: h => h(App),
126 | }).$mount('#app')
127 | 


--------------------------------------------------------------------------------
/src/plugins/format.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   install(Vue) {
 3 |     Vue.prototype.format = function (cur, format) {
 4 |       let date = new Date(cur);
 5 |       let args = {
 6 |         "M+": date.getMonth() + 1,
 7 |         "d+": date.getDate(),
 8 |         "h+": date.getHours(),
 9 |         "m+": date.getMinutes(),
10 |         "s+": date.getSeconds(),
11 |         "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
12 |         "S": date.getMilliseconds()
13 |       };
14 |       if (/(y+)/.test(format))
15 |         format = format.replace(
16 |           RegExp.$1,
17 |           (date.getFullYear() + "").substr(4 - RegExp.$1.length)
18 |         );
19 |       for (let i in args) {
20 |         let n = args[i];
21 |         if (new RegExp("(" + i + ")").test(format))
22 |           format = format.replace(
23 |             RegExp.$1,
24 |             RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length)
25 |           );
26 |       }
27 |       return format;
28 |     }
29 |   }
30 | }


--------------------------------------------------------------------------------
/src/plugins/global.js:
--------------------------------------------------------------------------------
 1 | // 本地储存
 2 | export const setLocalStore = (key, value) => {
 3 |   if (!key) return;
 4 |   window.localStorage.setItem(key, JSON.stringify(value));
 5 | }
 6 | 
 7 | export const getLocalStore = (key) => {
 8 |   if (!key) return;
 9 |   let temp = window.localStorage.getItem(key);
10 |   return JSON.parse(temp);
11 | }
12 | 
13 | export const removeLocalStore = (key) => {
14 |   if (!key) return;
15 |   window.localStorage.removeItem(key);
16 | }


--------------------------------------------------------------------------------
/src/plugins/index.js:
--------------------------------------------------------------------------------
1 | import rem from './rem'
2 | import format from './format'
3 | 
4 | export { rem, format }


--------------------------------------------------------------------------------
/src/plugins/rem.js:
--------------------------------------------------------------------------------
 1 | (function (doc, win) {
 2 |   var docEl = doc.documentElement,
 3 |     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 4 |     recalc = function () {
 5 |       var clientWidth = docEl.clientWidth;
 6 |       if (!clientWidth) return;
 7 |       docEl.style.fontSize = 15 * (clientWidth / 375) + 'px';
 8 |     };
 9 |   if (!doc.addEventListener) return;
10 |   win.addEventListener(resizeEvt, recalc, false);
11 |   doc.addEventListener('DOMContentLoaded', recalc, false);
12 | })(document, window);


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Router from 'vue-router'
  3 | Vue.use(Router)
  4 | 
  5 | const Home = () => import('@/views/home');
  6 | const Category = () => import('@/views/category');
  7 | const Eat = () => import('@/views/eat');
  8 | const Cart = () => import('@/views/cart');
  9 | const Mine = () => import('@/views/mine');
 10 | 
 11 | // 解决vue-router导航重复
 12 | const originalPush = Router.prototype.push;
 13 | Router.prototype.push = function push(location) {
 14 |   return originalPush.call(this, location).catch(err => err);
 15 | };
 16 | 
 17 | const router = new Router({
 18 |   mode: "history",
 19 |   routes: [
 20 |     {
 21 |       path: '/',
 22 |       redirect: "/dashboard/home"
 23 |     },
 24 |     {
 25 |       path: "/login",
 26 |       name: "Login",
 27 |       component: () => import('@/views/login')
 28 |     },
 29 |     {
 30 |       path: "/dashboard",
 31 |       component: () => import('@/views/layout'),
 32 |       children: [
 33 |         {
 34 |           path: 'home',
 35 |           name: "Home",
 36 |           component: Home,
 37 |           meta: {
 38 |             keepAlive: true
 39 |           }
 40 |         },
 41 |         {
 42 |           path: "category",
 43 |           name: "Category",
 44 |           component: Category,
 45 |         },
 46 |         {
 47 |           path: "eat",
 48 |           name: "Eat",
 49 |           component: Eat,
 50 |           meta: {
 51 |             keepAlive: true
 52 |           }
 53 |         },
 54 |         {
 55 |           path: 'cart',
 56 |           name: "Cart",
 57 |           component: Cart
 58 |         },
 59 |         {
 60 |           path: "mine",
 61 |           name: "Mine",
 62 |           component: Mine,
 63 |           meta: {
 64 |             keepAlive: true
 65 |           }
 66 |         }
 67 |       ]
 68 |     },
 69 |     {
 70 |       path: "/dashboard/home/map",
 71 |       name: "MyMap",
 72 |       component: () => import('@/views/home/myMap')
 73 |     },
 74 |     {
 75 |       path: "/mine/profile",
 76 |       name: "Profile",
 77 |       component: () => import('@/views/mine/profile/profile')
 78 |     },
 79 |     {
 80 |       path: "/profile/changeName",
 81 |       name: "ChangeName",
 82 |       component: () => import('@/views/mine/profile/changeName')
 83 |     },
 84 |     {
 85 |       path: "/mine/order",
 86 |       name: "Order",
 87 |       component: () => import('@/views/mine/order')
 88 |     },
 89 |     {
 90 |       path: "/mine/coupons",
 91 |       name: "Coupon",
 92 |       component: () => import('@/views/mine/coupon')
 93 |     },
 94 |     {
 95 |       path: "/mine/myaddress",
 96 |       name: "Address",
 97 |       component: () => import('@/views/mine/address/myAddress')
 98 |     },
 99 |     {
100 |       path: "/mine/addaddress",
101 |       name: "AddAddress",
102 |       component: () => import('@/views/mine/address/addAddress')
103 |     },
104 |     {
105 |       path: "/mine/editaddress",
106 |       name: "EditAddress",
107 |       component: () => import('@/views/mine/address/editAddress')
108 |     },
109 |     {
110 |       path: "/mine/myVip",
111 |       name: "Vip",
112 |       component: () => import('@/views/mine/vip/vip'),
113 |       meta: {
114 |         keepAlive: true
115 |       }
116 |     },
117 |     {
118 |       path: "/mine/myVip/pay",
119 |       name: "PayVip",
120 |       component: () => import('@/views/mine/vip/payVip')
121 |     },
122 |     {
123 |       path: "/orderfill",
124 |       name: "OrderFill",
125 |       component: () => import('@/views/cart/order/orderFill')
126 |     },
127 |     {
128 |       path: "/goodslist",
129 |       name: "GoodsList",
130 |       component: () => import('@/views/cart/order/goodsList')
131 |     },
132 |     {
133 |       path: "/collection",
134 |       name: "Collection",
135 |       component: () => import('@/views/eat/collection/collection')
136 |     }
137 |     
138 |   ]
139 | })
140 | 
141 | router.beforeEach((to, from, next) => {
142 |   // const { token } = store.state;
143 |   // if (!token && to.path !== "/login") {
144 |   //   next({
145 |   //     path: "/login"
146 |   //   });
147 |   // }
148 | 
149 |   next();
150 | });
151 | 
152 | 
153 | 
154 | export default router;


--------------------------------------------------------------------------------
/src/store/actions.js:
--------------------------------------------------------------------------------
1 | import { USER_INFO } from './mutation-types'
2 | export default {
3 |   // 同步用户信息
4 |   syncUserInfo({ commit }, userInfo) {
5 |     commit(USER_INFO, userInfo)
6 |   }
7 | }


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import state from './state'
 4 | import actions from './actions'
 5 | import mutations from './mutations'
 6 | 
 7 | Vue.use(Vuex)
 8 | 
 9 | export default new Vuex.Store({
10 |   state,
11 |   actions,
12 |   mutations
13 | }) 


--------------------------------------------------------------------------------
/src/store/mutation-types.js:
--------------------------------------------------------------------------------
 1 | // 用户信息
 2 | export const USER_INFO = 'USER_INFO';
 3 | // 修改用户名
 4 | export const CHANGE_USER_NAME = "CHANGE_USER_NAME";
 5 | // 修改性别
 6 | export const CHANGE_SEX = "CHANGE_SEX";
 7 | // 修改生日
 8 | export const CHANGE_BIRTHDAY = "CHANGE_BIRTHDAY";
 9 | // 增加地址
10 | export const ADD_ADDRESS = "ADD_ADDRESS";
11 | // 修改地址
12 | export const EDIT_ADDRESS = "EDIT_ADDRESS";
13 | // 删除地址
14 | export const REMOVE_ADDRESS = "REMOVE_ADDRESS";
15 | 
16 | // 加入购物车
17 | export const ADD_GOODS = "ADD_GOODS";
18 | // 删除商品
19 | export const REMOVE_GOODS = "REMOVE_GOODS";
20 | // 清空购物车
21 | export const CLEAR_CART = "CLEAR_CART";
22 | // 全选/不选商品
23 | export const SELECT_ALL_GOODS = "SELECT_ALL_GOODS";
24 | 
25 | // 退出登录
26 | export const LOG_OUT = 'LOG_OUT';


--------------------------------------------------------------------------------
/src/store/mutations.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   USER_INFO,
  3 |   CHANGE_USER_NAME,
  4 |   CHANGE_SEX,
  5 |   CHANGE_BIRTHDAY,
  6 |   ADD_ADDRESS,
  7 |   EDIT_ADDRESS,
  8 |   REMOVE_ADDRESS,
  9 |   ADD_GOODS,
 10 |   REMOVE_GOODS,
 11 |   CLEAR_CART,
 12 |   SELECT_ALL_GOODS,
 13 |   LOG_OUT
 14 | } from './mutation-types'
 15 | 
 16 | import { setLocalStore, removeLocalStore } from '../plugins/global';
 17 | export default {
 18 |   [USER_INFO](state, userInfo) {
 19 |     state.userInfo = userInfo;
 20 |     setLocalStore('userInfo', userInfo);
 21 |   },
 22 |   [CHANGE_USER_NAME](state, name) {
 23 |     state.userInfo.user_name = name;
 24 |     setLocalStore('userInfo', state.userInfo);
 25 |   },
 26 |   [CHANGE_SEX](state, sex) {
 27 |     state.userInfo.sex = sex;
 28 |     setLocalStore('userInfo', state.userInfo);
 29 |   },
 30 |   [CHANGE_BIRTHDAY](state, day) {
 31 |     state.userInfo.birth_day = day;
 32 |     setLocalStore('userInfo', state.userInfo);
 33 |   },
 34 |   [ADD_ADDRESS](state, address) {
 35 |     state.addressInfo.push(address);
 36 |     setLocalStore('addressInfo', state.addressInfo);
 37 |   },
 38 |   [EDIT_ADDRESS](state, address) {
 39 |     let addressInfo = state.addressInfo;
 40 |     addressInfo = addressInfo.map(item => {
 41 |       if (item.id === address.id) {
 42 |         item = address;
 43 |       }
 44 |       return item;
 45 |     })
 46 |     state.addressInfo = [...addressInfo];
 47 |     setLocalStore('addressInfo', state.addressInfo);
 48 |   },
 49 |   [REMOVE_ADDRESS](state, id) {
 50 |     let addressInfo = state.addressInfo
 51 |     let currentIndex;
 52 |     addressInfo.forEach((item, index) => {
 53 |       if (item.id === id) {
 54 |         currentIndex = index;
 55 |       }
 56 |     })
 57 |     addressInfo.splice(currentIndex, 1);
 58 |     state.addressInfo = [...addressInfo];
 59 |     setLocalStore('addressInfo', state.addressInfo);
 60 |   },
 61 |   [ADD_GOODS](state, { id, name, small_image, price }) {
 62 |     let shopCartInfo = state.shopCartInfo
 63 |     if (shopCartInfo[id]) {
 64 |       shopCartInfo[id]['number']++;
 65 |     } else {
 66 |       shopCartInfo[id] = {
 67 |         id,
 68 |         number: 1,
 69 |         name,
 70 |         small_image,
 71 |         price,
 72 |         checked: true
 73 |       }
 74 |     }
 75 |     state.shopCartInfo = { ...shopCartInfo };
 76 |     setLocalStore('shopCartInfo', state.shopCartInfo);
 77 |   },
 78 |   [REMOVE_GOODS](state, id) {
 79 |     let shopCartInfo = state.shopCartInfo
 80 |     delete shopCartInfo[id];
 81 |     state.shopCartInfo = { ...shopCartInfo };
 82 |     setLocalStore('shopCartInfo', state.shopCartInfo);
 83 |   },
 84 |   [CLEAR_CART](state) {
 85 |     state.shopCartInfo = {};
 86 |     removeLocalStore('shopCartInfo');
 87 |   },
 88 |   [SELECT_ALL_GOODS](state, flag) {
 89 |     let shopCartInfo = state.shopCartInfo;
 90 |     Object.values(shopCartInfo).forEach(item => item.checked = flag);
 91 |     state.shopCartInfo = { ...shopCartInfo };
 92 |     setLocalStore('shopCartInfo', state.shopCartInfo);
 93 |   },
 94 |   [LOG_OUT](state) {
 95 |     state.userInfo = {};
 96 |     state.addressInfo = [];
 97 |     state.shopCartInfo = {};
 98 |     removeLocalStore('userInfo');
 99 |     removeLocalStore('addressInfo');
100 |     removeLocalStore('shopCartInfo');
101 |   }
102 | }


--------------------------------------------------------------------------------
/src/store/state.js:
--------------------------------------------------------------------------------
1 | import { getLocalStore } from '../plugins/global'
2 | 
3 | const state = {
4 |   userInfo: getLocalStore('userInfo') || {}, // 用户信息
5 |   shopCartInfo: getLocalStore('shopCartInfo') || {}, // 购物车信息
6 |   addressInfo: getLocalStore('addressInfo') || [], // 地址信息
7 | }
8 | 
9 | export default state


--------------------------------------------------------------------------------
/src/views/cart/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cart">
  3 |     <van-nav-bar
  4 |       title="购物车"
  5 |       :right-text="rightText"
  6 |       @click-right="onClickRight"
  7 |       fixed
  8 |       :class="{'nav-bar-disabled':rightTextDisabled}"
  9 |     />
 10 |     <template v-if="!showLoading">
 11 |       <div class="cart-empty" v-if="!totalCount">
 12 |         <img :src="require('@/assets/img/empty_cart.png')" alt />
 13 |         <p class="text">购物车还是空的</p>
 14 |         <van-button type="primary" to="home" round style="width:50%;">去逛逛</van-button>
 15 |       </div>
 16 |       <div class="cart-list" v-else>
 17 |         <van-swipe-cell v-for="item in shopCartInfo" :key="item.id">
 18 |           <div class="left">
 19 |             <van-checkbox v-model="item.checked" checked-color="#45C763" icon-size="16" />
 20 |           </div>
 21 |           <div class="center">
 22 |             <img :src="item.small_image" class="image" alt />
 23 |           </div>
 24 |           <div class="right">
 25 |             <span class="name">{{item.name}}</span>
 26 |             <div class="price">
 27 |               <span>￥{{item.price}}</span>
 28 |               <van-stepper
 29 |                 v-model="item.number"
 30 |                 :min="0"
 31 |                 input-width="24"
 32 |                 button-size="24"
 33 |                 @change="onStepChange(item.id, $event)"
 34 |               />
 35 |             </div>
 36 |           </div>
 37 |           <template slot="right">
 38 |             <van-button square type="danger" text="删除" @click="onRemove(item.id)" />
 39 |           </template>
 40 |         </van-swipe-cell>
 41 |       </div>
 42 |       <van-divider :style="{color: '#999', borderColor: '#999',padding:'0 16px'}">猜你喜欢</van-divider>
 43 |       <div class="product-list">
 44 |         <div v-for="item in productList" :key="item.id" class="product-item">
 45 |           <img :src="item.small_image" v-lazy="item.small_image" alt />
 46 |           <p class="title text-overflow">{{item.product_name}}</p>
 47 |           <p class="spec text-overflow">{{item.spec}}</p>
 48 |           <div class="price">
 49 |             <div>
 50 |               <span class="now-price">￥{{item.price}}</span>
 51 |               <span class="origin-price">￥{{item.origin_price}}</span>
 52 |             </div>
 53 |             <div class="buy-cart" @click="addCart(item)">
 54 |               <svg data-v-da2028b6 viewBox="0 0 52 52" class="icon icon-60">
 55 |                 <defs data-v-da2028b6>
 56 |                   <radialGradient
 57 |                     data-v-da2028b6
 58 |                     cx="27.0288363%"
 59 |                     cy="10.3693483%"
 60 |                     fx="27.0288363%"
 61 |                     fy="10.3693483%"
 62 |                     r="93.8427229%"
 63 |                     id="radialGradient-1"
 64 |                   >
 65 |                     <stop data-v-da2028b6 stop-color="#4ECA75" offset="0%" />
 66 |                     <stop data-v-da2028b6 stop-color="#39B460" offset="100%" />
 67 |                   </radialGradient>
 68 |                 </defs>
 69 |                 <g data-v-da2028b6 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 70 |                   <g data-v-da2028b6 transform="translate(-678.000000, -2742.000000)">
 71 |                     <g data-v-da2028b6 transform="translate(678.000000, 2742.000000)">
 72 |                       <rect
 73 |                         data-v-da2028b6
 74 |                         fill="url(#radialGradient-1)"
 75 |                         x="0"
 76 |                         y="0"
 77 |                         width="51.8699976"
 78 |                         height="51.8699976"
 79 |                         rx="25.9349988"
 80 |                       />
 81 |                       <path
 82 |                         data-v-da2028b6
 83 |                         fill="#FFFFFF"
 84 |                         d="M20.3666667,39 C19.1700497,39 18.2,38.0299503 18.2,36.8333333 C18.2,35.6367164 19.1700497,34.6666667 20.3666667,34.6666667 C21.5632836,34.6666667 22.5333333,35.6367164 22.5333333,36.8333333 C22.5333333,38.0299503 21.5632836,39 20.3666667,39 Z M33.3666667,38.1333333 C32.1700497,38.1333333 31.2,37.1632836 31.2,35.9666667 C31.2,34.7700497 32.1700497,33.8 33.3666667,33.8 C34.5632836,33.8 35.5333333,34.7700497 35.5333333,35.9666667 C35.5333333,37.1632836 34.5632836,38.1333333 33.3666667,38.1333333 Z"
 85 |                       />
 86 |                       <path
 87 |                         data-v-da2028b6
 88 |                         stroke="#FFFFFF"
 89 |                         stroke-width="2.6"
 90 |                         stroke-linecap="round"
 91 |                         d="M12.1333333,13.8666667 L13.6768756,13.8666667 C15.4621209,13.8666667 16.9554584,15.222463 17.1274221,16.9994069 L18.2224287,28.314386 C18.4068512,30.2200702 20.1012175,31.6154285 22.0069016,31.431006 C22.0111286,31.4305969 22.0153548,31.4301801 22.0195802,31.4297555 L33.2997819,30.296256 C34.7947282,30.1460352 36.0227397,29.0499108 36.3411182,27.581556 L37.8958814,20.4110205 C38.0987345,19.4754663 37.5047629,18.5526049 36.5692087,18.3497518 C36.3853963,18.3098964 36.1963225,18.3002236 36.0094025,18.3211126 L22.8968424,19.7864909"
 92 |                       />
 93 |                     </g>
 94 |                   </g>
 95 |                 </g>
 96 |               </svg>
 97 |             </div>
 98 |           </div>
 99 |         </div>
100 |       </div>
101 |       <van-submit-bar
102 |         :price="totalAmount"
103 |         button-text="结算"
104 |         @submit="onSubmit"
105 |         :disabled="!checkedAll"
106 |         v-if="totalCount"
107 |       >
108 |         <van-checkbox v-model="checkedAll" checked-color="#45C763" icon-size="16">全选</van-checkbox>
109 |       </van-submit-bar>
110 |       <scroll-top />
111 |       <drop-ball
112 |         :dropImg="dropImg"
113 |         :elLeft="elLeft"
114 |         :elTop="elTop"
115 |         :dots="dots"
116 |         @change="onDotChange"
117 |       />
118 |     </template>
119 |     <loading :show="showLoading" />
120 |   </div>
121 | </template>
122 | <script>
123 | import { mapMutations, mapState } from "vuex";
124 | export default {
125 |   name: "cart",
126 |   data() {
127 |     return {
128 |       showLoading: true,
129 |       productList: [],
130 |       dropImg: "",
131 |       elLeft: null,
132 |       elTop: null,
133 |       dots: [] // 小球集合
134 |     };
135 |   },
136 |   created() {
137 |     this.getList();
138 |   },
139 |   computed: {
140 |     ...mapState(["userInfo", "shopCartInfo"]),
141 |     totalCount() {
142 |       return Object.keys(this.shopCartInfo).length;
143 |     },
144 |     rightText() {
145 |       return this.totalCount > 0 ? "删除" : "";
146 |     },
147 |     totalAmount() {
148 |       let amount = 0;
149 |       Object.values(this.shopCartInfo).forEach(item => {
150 |         if (item.checked) {
151 |           amount += item.number * item.price;
152 |         }
153 |       });
154 |       return amount * 100;
155 |     },
156 |     checkedAll: {
157 |       get() {
158 |         return Object.values(this.shopCartInfo).every(
159 |           item => item.checked === true
160 |         );
161 |       },
162 |       set(value) {
163 |         this.SELECT_ALL_GOODS(value);
164 |       }
165 |     },
166 |     // 右上角删除文字状态
167 |     rightTextDisabled() {
168 |       return Object.values(this.shopCartInfo).every(
169 |         item => item.checked !== true
170 |       );
171 |     }
172 |   },
173 |   methods: {
174 |     ...mapMutations([
175 |       "ADD_GOODS",
176 |       "CLEAR_CART",
177 |       "SELECT_ALL_GOODS",
178 |       "REMOVE_GOODS"
179 |     ]),
180 |     async getList() {
181 |       let res = await this.$http("/api/cart/youlike");
182 |       if (res.data.code === 0) {
183 |         this.productList = res.data.data.product_list;
184 |         this.showLoading = false;
185 |       }
186 |     },
187 |     addCart({ id, name, small_image, price }) {
188 |       if (!Object.keys(this.userInfo).length) {
189 |         this.$router.push({ path: "/login" });
190 |         return;
191 |       }
192 |       this.ADD_GOODS({ id, name, small_image, price });
193 |       this.dropImg = small_image;
194 |       this.elLeft = event.target.getBoundingClientRect().left;
195 |       this.elTop = event.target.getBoundingClientRect().top;
196 |       this.dots = [...this.dots, true];
197 |     },
198 |     onDotChange(data) {
199 |       this.dots = [...this.dots, data];
200 |     },
201 |     onClickRight() {
202 |       if (this.rightTextDisabled) return;
203 |       this.$dialog
204 |         .confirm({
205 |           message: "确定删除勾选商品吗？"
206 |         })
207 |         .then(() => {
208 |           this.CLEAR_CART();
209 |         })
210 |         .catch(() => {});
211 |     },
212 |     onConfirm() {
213 |       this.CLEAR_CART();
214 |     },
215 |     onStepChange(id, value) {
216 |       if (value === 0) {
217 |         this.$dialog
218 |           .confirm({
219 |             message: "确定删除该商品吗？"
220 |           })
221 |           .then(() => {
222 |             this.REMOVE_GOODS(id);
223 |           })
224 |           .catch(() => {});
225 |       }
226 |     },
227 |     onRemove(id) {
228 |       this.REMOVE_GOODS(id);
229 |     },
230 |     onSubmit() {
231 |       this.$router.push({ path: "/orderfill" });
232 |     }
233 |   }
234 | };
235 | </script>
236 | <style lang='scss' scoped>
237 | .cart {
238 |   padding-top: 46px;
239 |   padding-bottom: 110px !important;
240 |   .van-nav-bar {
241 |     .van-nav-bar__text {
242 |       color: #45c763;
243 |     }
244 |   }
245 |   .nav-bar-disabled {
246 |     .van-nav-bar__text {
247 |       color: grey;
248 |     }
249 |   }
250 |   .cart-empty {
251 |     width: 100%;
252 |     margin: 2rem 0;
253 |     text-align: center;
254 |     img {
255 |       width: 50%;
256 |     }
257 |     .text {
258 |       margin: 2rem 0;
259 |       color: grey;
260 |     }
261 |   }
262 |   .cart-list {
263 |     /deep/ .van-swipe-cell__wrapper {
264 |       display: flex;
265 |       justify-content: center;
266 |       align-items: center;
267 |       .left {
268 |         flex: 1;
269 |         .van-checkbox {
270 |           justify-content: center;
271 |         }
272 |       }
273 |       .center {
274 |         flex: 3;
275 |       }
276 |       .right {
277 |         flex: 6;
278 |         padding-left: 0.5rem;
279 |         .name {
280 |           display: block;
281 |           height: 2.4rem;
282 |           line-height: 1.2rem;
283 |           font-size: 0.9375rem;
284 |           margin-bottom: 0.5rem;
285 |           overflow: hidden;
286 |         }
287 |         .price {
288 |           display: flex;
289 |           justify-content: space-between;
290 |           align-items: center;
291 |           padding-right: 0.8rem;
292 |         }
293 |       }
294 |       .van-swipe-cell__right {
295 |         top: 25%;
296 |       }
297 |     }
298 |   }
299 |   .product-list {
300 |     width: 100%;
301 |     overflow: hidden;
302 |     .product-item {
303 |       width: 48%;
304 |       margin-right: 2%;
305 |       display: inline-block;
306 |       padding: 0 0.5rem;
307 |       box-sizing: border-box;
308 |       .title {
309 |         font-size: 0.625rem;
310 |         padding-left: 0.5rem;
311 |       }
312 |       .spec {
313 |         font-size: 0.45rem;
314 |         color: grey;
315 |         padding: 0.5rem 0 0.5rem 0.5rem;
316 |         white-space: nowrap;
317 |         overflow: hidden;
318 |         text-overflow: ellipsis;
319 |       }
320 |       .text-overflow {
321 |         white-space: nowrap;
322 |         overflow: hidden;
323 |         text-overflow: ellipsis;
324 |       }
325 |       .price {
326 |         padding: 0 0.15rem;
327 |         display: flex;
328 |         justify-content: space-between;
329 |         align-items: center;
330 |         .now-price {
331 |           font-size: 0.928rem;
332 |           color: #f37078;
333 |         }
334 |         .origin-price {
335 |           font-size: 0.6875rem;
336 |           color: #999;
337 |           text-decoration: line-through;
338 |         }
339 |         .buy-cart {
340 |           width: 1.5rem;
341 |           height: 1.5rem;
342 |         }
343 |       }
344 |     }
345 |   }
346 |   .van-submit-bar {
347 |     bottom: 50px;
348 |     .van-checkbox {
349 |       margin-left: 0.8rem;
350 |     }
351 |   }
352 | }
353 | </style>


--------------------------------------------------------------------------------
/src/views/cart/order/components/timelist.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="time-list">
  3 |     <van-popup
  4 |       v-model="show"
  5 |       round
  6 |       position="bottom"
  7 |       closeable
  8 |       safe-area-inset-bottom
  9 |       @close="onClose"
 10 |       @click-overlay="onClose"
 11 |     >
 12 |       <div class="title">选择送达时间</div>
 13 |       <div class="wrapper">
 14 |         <div class="left-content">
 15 |           <div
 16 |             v-for="(item,index) in leftData"
 17 |             :key="item.id"
 18 |             @click="onLeftClick(index)"
 19 |             class="item"
 20 |             :class="{'item-active':dateIndex === index}"
 21 |           >
 22 |             <span>{{item.time}}</span>
 23 |           </div>
 24 |         </div>
 25 |         <div class="right-content">
 26 |           <div
 27 |             v-for="(item,index) in timeList"
 28 |             :key="index"
 29 |             @click="onRightClick(index)"
 30 |             class="item"
 31 |             :class="{'item-active':timeIndex === index}"
 32 |           >
 33 |             <span>{{item}}</span>
 34 |             <van-icon name="success" v-if="timeIndex === index" />
 35 |           </div>
 36 |         </div>
 37 |       </div>
 38 |       <van-button type="primary" round @click="onClose">确定</van-button>
 39 |     </van-popup>
 40 |   </div>
 41 | </template>
 42 | <script>
 43 | export default {
 44 |   name: "timeList",
 45 |   props: {
 46 |     show: {
 47 |       type: Boolean,
 48 |       default: false
 49 |     }
 50 |   },
 51 |   data() {
 52 |     return {
 53 |       //show: this.showPop,
 54 |       dateIndex: 0,
 55 |       timeIndex: 0,
 56 |       deliveryTime: ""
 57 |     };
 58 |   },
 59 |   computed: {
 60 |     leftData() {
 61 |       let today = this.format(new Date(), "MM月dd日");
 62 |       let tomorrow = this.format(
 63 |         new Date().getTime() + 24 * 60 * 60 * 1000,
 64 |         "MM月dd日"
 65 |       );
 66 |       let arr = [
 67 |         {
 68 |           id: 1,
 69 |           time: `今天${today}`
 70 |         },
 71 |         {
 72 |           id: 2,
 73 |           time: `明天${tomorrow}`
 74 |         }
 75 |       ];
 76 |       return arr;
 77 |     },
 78 |     timeList() {
 79 |       let arr = this.timeGroup();
 80 |       let nowHour = Number(this.format(new Date(), "hh:mm").split(":")[0]),
 81 |         nowMinute = Number(this.format(new Date(), "hh:mm").split(":")[1]);
 82 |       if (this.dateIndex === 0 && nowHour < 22) {
 83 |         let index = (nowHour - 7) * 2;
 84 |         if (nowMinute >= 30) {
 85 |           index += 1;
 86 |         }
 87 |         return arr.splice(index);
 88 |       } else {
 89 |         return arr;
 90 |       }
 91 |     }
 92 |   },
 93 |   methods: {
 94 |     timeGroup() {
 95 |       let arr = [];
 96 |       for (let i = 7; i < 22; i++) {
 97 |         let temp = i < 10 ? `0${i}:00-0${i}:30` : `${i}:00-${i}:30`;
 98 |         let temp2 = i < 9 ? `0${i}:30-0${i + 1}:00` : `${i}:30-${i + 1}:00`;
 99 |         arr.push(temp);
100 |         arr.push(temp2);
101 |       }
102 |       return arr;
103 |     },
104 |     onLeftClick(index) {
105 |       this.dateIndex = index;
106 |     },
107 |     onRightClick(index) {
108 |       this.timeIndex = index;
109 |       let time = this.timeList[index];
110 |       this.deliveryTime = this.dateIndex === 0 ? `今天${time}` : `明天${time}`;
111 |     },
112 |     onClose() {
113 |       this.$emit("change", false, this.deliveryTime);
114 |     }
115 |   }
116 | };
117 | </script>
118 | <style lang='scss' scoped>
119 | .time-list {
120 |   .title {
121 |     height: 3rem;
122 |     line-height: 3rem;
123 |     text-align: center;
124 |   }
125 |   .wrapper {
126 |     display: flex;
127 |     align-items: center;
128 |     .left-content {
129 |       width: 7rem;
130 |       display: flex;
131 |       flex-direction: column;
132 |       text-align: center;
133 |       height: 50vh;
134 |       background-color: LightGray;
135 |       .item {
136 |         width: 100%;
137 |         height: 3rem;
138 |         line-height: 3rem;
139 |         color: grey;
140 |         border-top: 1px solid #e8e9e8;
141 |       }
142 |       .item-active {
143 |         color: #000;
144 |         background-color: #fff;
145 |       }
146 |     }
147 |     .right-content {
148 |       flex: 1;
149 |       display: flex;
150 |       flex-direction: column;
151 |       align-items: center;
152 |       height: 50vh;
153 |       overflow-x: hidden;
154 |       overflow-y: auto;
155 |       .item {
156 |         width: 100%;
157 |         height: 3rem;
158 |         line-height: 3rem;
159 |         margin-left: 0.5rem;
160 |         padding-left: 0.5rem;
161 |         border-top: 1px solid #e8e9e8;
162 |         position: relative;
163 |         .van-icon {
164 |           position: absolute;
165 |           top: 50%;
166 |           right: 2.5rem;
167 |           transform: translateY(-50%);
168 |         }
169 |       }
170 |       .item-active {
171 |         color: #3bba63;
172 |       }
173 |     }
174 |   }
175 |   .van-button {
176 |     width: 90%;
177 |     margin: 0.3rem 5%;
178 |   }
179 | }
180 | </style>


--------------------------------------------------------------------------------
/src/views/cart/order/goodsList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="goods-list">
 3 |     <van-nav-bar title="商品清单" left-arrow @click-left="onClickLeft" fixed />
 4 |     <div class="column">
 5 |       <span>商品</span>
 6 |       <span>{{computedCount}}</span>
 7 |     </div>
 8 |     <div class="wrap">
 9 |       <div v-for="item in shopCartInfo" :key="item.id" class="item">
10 |         <div class="left">
11 |           <img :src="item.small_image" class="image" alt />
12 |           <div class="text">
13 |             <span class="name">{{item.name}}</span>
14 |             <div class="text-grey">
15 |               <span>单价:￥{{item.price}} </span>
16 |               <span>数量:{{item.number}}</span>
17 |             </div>
18 |           </div>
19 |         </div>
20 |         <div class="right">
21 |           <span>￥{{item.price*item.number}}</span>
22 |         </div>
23 |       </div>
24 |     </div>
25 |   </div>
26 | </template>
27 | <script>
28 | import { mapState } from "vuex";
29 | export default {
30 |   name: "goodsList",
31 |   data() {
32 |     return {};
33 |   },
34 |   computed: {
35 |     ...mapState(["shopCartInfo"]),
36 |     computedCount() {
37 |       let len = Object.keys(this.shopCartInfo).length;
38 |       return `共${len}件`;
39 |     }
40 |   }
41 | };
42 | </script>
43 | <style lang='scss' scoped>
44 | .goods-list {
45 |   padding-top: 46px;
46 |   margin-top: 0.5rem;
47 |   background-color: #f2f2f2;
48 |   .column {
49 |     display: flex;
50 |     justify-content: space-between;
51 |     align-items: center;
52 |     height: 2.5rem;
53 |     line-height: 2.5rem;
54 |     padding: 0 0.6rem;
55 |     background-color: #fff;
56 |     border-bottom: 1px solid #f2f2f2;
57 |   }
58 |   .wrap {
59 |     .item {
60 |       display: flex;
61 |       justify-content: space-between;
62 |       align-items: center;
63 |       padding: 0.5rem 0.6rem 0.8rem;
64 |       border-bottom: 1px solid #f2f2f2;
65 |       background-color: #fff;
66 |       .left {
67 |         display: flex;
68 |         align-items: center;
69 |         .image {
70 |           width: 3rem;
71 |           margin-right: 0.5rem;
72 |         }
73 |         .text {
74 |           font-size: 1rem;
75 |           .text-grey {
76 |             margin-top: 0.5rem;
77 |             font-size: 0.8rem;
78 |             color: grey;
79 |           }
80 |         }
81 |       }
82 |     }
83 |   }
84 | }
85 | </style>


--------------------------------------------------------------------------------
/src/views/cart/order/orderFill.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="order-fill">
  3 |     <van-nav-bar title="填写订单" left-arrow @click-left="onClickLeft" fixed />
  4 |     <van-contact-card
  5 |       :type="cardType"
  6 |       :name="currentContact.name"
  7 |       :tel="currentContact.tel"
  8 |       @click="onContactClick"
  9 |     />
 10 |     <van-cell-group>
 11 |       <van-cell
 12 |         title="送达时间"
 13 |         label
 14 |         :value="deliveryTime"
 15 |         is-link
 16 |         @click="showPopup"
 17 |         :class="{'van-cell-valid':computeValid}"
 18 |       >
 19 |         <template slot="label">
 20 |           <span>超时10分钟可获赔300积分</span>
 21 |           <van-icon name="question-o" />
 22 |         </template>
 23 |       </van-cell>
 24 |       <van-cell is-link :value="computedCount" class="van-cell-img" @click="onDetailClick">
 25 |         <template slot="title">
 26 |           <div v-for="item in shopCartInfo" :key="item.id" class="item-img">
 27 |             <img :src="item.small_image" alt />
 28 |           </div>
 29 |         </template>
 30 |       </van-cell>
 31 |     </van-cell-group>
 32 |     <time-list :show.sync="showPop" @change="handleChange" />
 33 |     <van-radio-group v-model="radio">
 34 |       <van-cell-group title="支付方式">
 35 |         <van-cell v-for="item in payList" :key="item.type">
 36 |           <template slot="title">
 37 |             <img :src="require(`@/assets/img/${item.icon}.png`)" class="icon" alt />
 38 |             <span class="text">{{item.text}}</span>
 39 |           </template>
 40 |           <template slot="right-icon">
 41 |             <van-radio :name="item.type" checked-color="#07c160" />
 42 |           </template>
 43 |         </van-cell>
 44 |       </van-cell-group>
 45 |     </van-radio-group>
 46 |     <van-cell-group>
 47 |       <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
 48 |       <van-popup v-model="showList" position="bottom">
 49 |         <van-coupon-list
 50 |           :coupons="coupons"
 51 |           :chosen-coupon="chosenCoupon"
 52 |           :disabled-coupons="disabledCoupons"
 53 |           @change="onChange"
 54 |           @exchange="onExchange"
 55 |         />
 56 |       </van-popup>
 57 |       <van-cell>
 58 |         <template slot="title">
 59 |           <div @click="showInfo = true">
 60 |             <span>使用800积分抵扣￥8.00</span>
 61 |             <van-icon name="question-o" />
 62 |           </div>
 63 |         </template>
 64 |         <template slot="right-icon">
 65 |           <van-switch v-model="pointsChecked" active-color="#07c160" size="20" />
 66 |         </template>
 67 |       </van-cell>
 68 |     </van-cell-group>
 69 |     <van-popup
 70 |       v-model="showInfo"
 71 |       position="bottom"
 72 |       closeable
 73 |       round
 74 |       safe-area-inset-bottom
 75 |       class="info-popup"
 76 |     >
 77 |       <div class="title">积分说明</div>
 78 |       <div class="wrap">
 79 |         <h2 class="subtitle">使用条件</h2>
 80 |         <ul class="ul">
 81 |           <li>1.积分数量大于100；</li>
 82 |           <li>2.商品金额≥5元。</li>
 83 |         </ul>
 84 |       </div>
 85 |       <div class="wrap">
 86 |         <h2 class="subtitle">使用规则</h2>
 87 |         <ul class="ul">
 88 |           <li>1.每100积分可抵用现金1元。</li>
 89 |         </ul>
 90 |       </div>
 91 |       <van-button type="primary" round size="small" @click="showInfo=false">确定</van-button>
 92 |     </van-popup>
 93 |     <van-cell-group>
 94 |       <van-cell title="备注" value="选填，可以告诉我们您的特殊需求" is-link class="van-cell-remarks" />
 95 |     </van-cell-group>
 96 |     <van-cell-group>
 97 |       <van-cell title="商品金额" :value="productPrice" />
 98 |       <van-cell title="配送费" value="￥6.00" />
 99 |       <van-cell title="优惠券" value="-￥1.50" v-if="chosenCoupon>-1" class="van-cell-discount" />
100 |       <van-cell title="积分" value="-￥8.00" v-if="pointsChecked" class="van-cell-discount" />
101 |     </van-cell-group>
102 |     <van-submit-bar :price="actualPrice" label="实付：" button-text="提交订单" @submit="onSubmit" />
103 |   </div>
104 | </template>
105 | <script>
106 | import { mapState } from "vuex";
107 | import TimeList from "./components/timelist";
108 | export default {
109 |   name: "orderFill",
110 |   data() {
111 |     const startAt = new Date().getTime() / 1000;
112 |     const endAt = new Date().getTime() / 1000 + 7 * 24 * 60 * 60;
113 |     const coupon = {
114 |       available: 1,
115 |       condition: "无使用门槛\n最多优惠1.5元",
116 |       reason: "",
117 |       value: 150,
118 |       name: "优惠券1号",
119 |       startAt,
120 |       endAt,
121 |       valueDesc: "1.5",
122 |       unitDesc: "元"
123 |     };
124 |     return {
125 |       deliveryTime: "请选择送达时间",
126 |       showPop: false,
127 |       payList: [
128 |         {
129 |           type: "wechat",
130 |           icon: "wx",
131 |           text: "微信支付",
132 |           checked: true
133 |         },
134 |         {
135 |           type: "alipay",
136 |           icon: "ali",
137 |           text: "支付宝支付",
138 |           checked: false
139 |         },
140 |         {
141 |           type: "huabei",
142 |           icon: "hb",
143 |           text: "花呗支付",
144 |           checked: false
145 |         }
146 |       ],
147 |       radio: "wechat",
148 |       showList: false,
149 |       chosenCoupon: -1,
150 |       coupons: [coupon],
151 |       disabledCoupons: [coupon],
152 |       pointsChecked: false, // 是否使用积分
153 |       productPrice: null,
154 |       showInfo: false
155 |     };
156 |   },
157 |   computed: {
158 |     ...mapState(["addressInfo", "shopCartInfo"]),
159 |     cardType() {
160 |       return this.addressInfo.length ? "edit" : "add";
161 |     },
162 |     currentContact() {
163 |       if (!this.addressInfo.length) {
164 |         return {};
165 |       } else {
166 |         let defaultArr = this.addressInfo.filter(
167 |           item => (item.isDefault = true)
168 |         );
169 |         if (defaultArr.length) {
170 |           return defaultArr[0];
171 |         } else {
172 |           return this.addressInfo[0];
173 |         }
174 |       }
175 |     },
176 |     computeValid() {
177 |       return this.deliveryTime === "请选择送达时间" ? false : true;
178 |     },
179 |     computedCount() {
180 |       let len = Object.keys(this.shopCartInfo).length;
181 |       return `共${len}件`;
182 |     },
183 |     actualPrice() {
184 |       let price = 0;
185 |       Object.values(this.shopCartInfo).forEach(item => {
186 |         if (item.checked) {
187 |           price += item.number * item.price;
188 |         }
189 |       });
190 |       this.productPrice = `￥${price.toFixed(2)}`;
191 |       // 优惠券
192 |       if (this.chosenCoupon > -1) {
193 |         price -= this.coupons[this.chosenCoupon].value / 100;
194 |       }
195 |       // 积分
196 |       if (this.pointsChecked) {
197 |         price -= 8;
198 |       }
199 |       // 归零
200 |       if(price < 0) {
201 |         price = 0;
202 |       }
203 |       return price * 100;
204 |     }
205 |   },
206 |   methods: {
207 |     onContactClick() {
208 |       this.$router.push({ path: "/mine/myaddress" });
209 |     },
210 |     showPopup() {
211 |       this.showPop = true;
212 |     },
213 |     onDetailClick() {
214 |       this.$router.push({ path: "/goodslist" });
215 |     },
216 |     handleChange(flag, data) {
217 |       this.showPop = flag;
218 |       if (!data) return;
219 |       this.deliveryTime = data;
220 |     },
221 |     onChange(index) {
222 |       this.showList = false;
223 |       this.chosenCoupon = index;
224 |     },
225 |     onExchange(code) {
226 |       this.coupons.push(coupon);
227 |     },
228 |     onSubmit() {
229 |       if (this.cardType === "add") {
230 |         this.$toast("请选择收货地址");
231 |         return;
232 |       }
233 |       if (this.deliveryTime === "请选择送达时间") {
234 |         this.$toast("请选择送达时间");
235 |         return;
236 |       }
237 |       this.$toast("提交订单");
238 |     }
239 |   },
240 |   components: {
241 |     TimeList
242 |   }
243 | };
244 | </script>
245 | <style lang='scss' scoped>
246 | .order-fill {
247 |   padding-top: 46px;
248 |   padding-bottom: 50px;
249 |   background-color: #f2f2f2;
250 |   .van-radio-group {
251 |     margin-top: 10px;
252 |     background-color: #fff;
253 |   }
254 |   .van-cell-group {
255 |     margin-top: 10px;
256 |     .van-cell__title {
257 |       .icon {
258 |         width: 1.5rem;
259 |         margin-right: 0.5rem;
260 |       }
261 |     }
262 |     .van-cell-img {
263 |       align-items: center;
264 |       .van-cell__title {
265 |         flex: 4;
266 |         overflow-x: auto;
267 |         white-space: nowrap;
268 |         -webkit-overflow-scrolling: touch;
269 |         .item-img {
270 |           display: inline-block;
271 |           width: 3rem;
272 |           height: 3rem;
273 |         }
274 |       }
275 |     }
276 |     .van-cell-remarks {
277 |       .van-cell__value {
278 |         flex: 2;
279 |       }
280 |     }
281 |     .van-cell-discount {
282 |       .van-cell__value {
283 |         color: #ee0a24;
284 |       }
285 |     }
286 |     .van-cell-valid {
287 |       .van-cell__value {
288 |         color: #3bba63;
289 |       }
290 |     }
291 |   }
292 |   .van-submit-bar__price {
293 |     font-size: 1rem;
294 |   }
295 |   .info-popup {
296 |     .title {
297 |       height: 3rem;
298 |       line-height: 3rem;
299 |       text-align: center;
300 |       margin-bottom: 1rem;
301 |       border-bottom: 1px solid #f2f2f2;
302 |     }
303 |     .wrap {
304 |       margin: 0 0 1rem 1rem;
305 |       .subtitle {
306 |         font-weight: 700;
307 |       }
308 |       .ul {
309 |         line-height: 1.2rem;
310 |       }
311 |     }
312 |     .van-button {
313 |       width: 90%;
314 |       margin: 0 5% 0.5rem;
315 |     }
316 |   }
317 | }
318 | </style>


--------------------------------------------------------------------------------
/src/views/category/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="category">
  3 |     <van-search placeholder="搜索一下" v-model="value" @search="onSearch" />
  4 |     <template v-if="!showLoading">
  5 |       <b-scroll :data="categoriesList" :scrollY="true" ref="leftWrap" class="left-wrap">
  6 |         <div ref="leftContent">
  7 |           <div
  8 |             v-for="(item,index) in categoriesList"
  9 |             :key="item.id"
 10 |             class="item"
 11 |             :class="{'item-active':cateIndex === index}"
 12 |             @click="onCateClick(item.params,index)"
 13 |             ref="leftItem"
 14 |           >
 15 |             <span>{{item.name}}</span>
 16 |           </div>
 17 |         </div>
 18 |       </b-scroll>
 19 |       <div class="right-wrap">
 20 |         <b-scroll :data="detailsList" :scrollX="true" ref="navWrap" class="nav-wrap">
 21 |           <div ref="navContent">
 22 |             <div
 23 |               v-for="(item,index) in detailsList"
 24 |               :key="item.id"
 25 |               class="item"
 26 |               :class="{'item-active':navIndex === index}"
 27 |               @click="onNavClick(index)"
 28 |               ref="navItem"
 29 |             >
 30 |               <span>{{item.name}}</span>
 31 |             </div>
 32 |           </div>
 33 |         </b-scroll>
 34 |         <div class="nav-all" @click="onAllClick" v-show="cateIndex!==0">
 35 |           <van-icon :name="arrowName" />
 36 |         </div>
 37 |         <div class="nav-all-wrap" v-show="showAll" @click="showAll=false">
 38 |           <div class="nav-all-list">
 39 |             <div
 40 |               v-for="(item,index) in detailsList"
 41 |               :key="item.id"
 42 |               class="nav-item"
 43 |               :class="{'nav-item-active':navIndex===index}"
 44 |               @click="onNavClick(index, 'all')"
 45 |             >
 46 |               <span>{{item.name}}</span>
 47 |             </div>
 48 |           </div>
 49 |         </div>
 50 |         <b-scroll :data="productList" :scrollY="true" ref="listWrap" class="list-wrap">
 51 |           <div ref="listContent">
 52 |             <span class="nav-title">{{navTitle}}</span>
 53 |             <div v-for="item in productList" :key="item.id" class="list-item">
 54 |               <img :src="item.small_image" class="image" alt />
 55 |               <div class="content">
 56 |                 <span class="name">{{item.name}}</span>
 57 |                 <span class="spec">{{item.spec}}</span>
 58 |                 <div class="price">
 59 |                   <div>
 60 |                     <span class="now-price">￥{{item.price}}</span>
 61 |                     <span class="origin-price">￥{{item.origin_price}}</span>
 62 |                   </div>
 63 |                   <div class="buy-cart" @click="addCart(item, $event)">
 64 |                     <svg data-v-da2028b6 viewBox="0 0 52 52" class="icon icon-60">
 65 |                       <defs data-v-da2028b6>
 66 |                         <radialGradient
 67 |                           data-v-da2028b6
 68 |                           cx="27.0288363%"
 69 |                           cy="10.3693483%"
 70 |                           fx="27.0288363%"
 71 |                           fy="10.3693483%"
 72 |                           r="93.8427229%"
 73 |                           id="radialGradient-1"
 74 |                         >
 75 |                           <stop data-v-da2028b6 stop-color="#4ECA75" offset="0%" />
 76 |                           <stop data-v-da2028b6 stop-color="#39B460" offset="100%" />
 77 |                         </radialGradient>
 78 |                       </defs>
 79 |                       <g
 80 |                         data-v-da2028b6
 81 |                         stroke="none"
 82 |                         stroke-width="1"
 83 |                         fill="none"
 84 |                         fill-rule="evenodd"
 85 |                       >
 86 |                         <g data-v-da2028b6 transform="translate(-678.000000, -2742.000000)">
 87 |                           <g data-v-da2028b6 transform="translate(678.000000, 2742.000000)">
 88 |                             <rect
 89 |                               data-v-da2028b6
 90 |                               fill="url(#radialGradient-1)"
 91 |                               x="0"
 92 |                               y="0"
 93 |                               width="51.8699976"
 94 |                               height="51.8699976"
 95 |                               rx="25.9349988"
 96 |                             />
 97 |                             <path
 98 |                               data-v-da2028b6
 99 |                               fill="#FFFFFF"
100 |                               d="M20.3666667,39 C19.1700497,39 18.2,38.0299503 18.2,36.8333333 C18.2,35.6367164 19.1700497,34.6666667 20.3666667,34.6666667 C21.5632836,34.6666667 22.5333333,35.6367164 22.5333333,36.8333333 C22.5333333,38.0299503 21.5632836,39 20.3666667,39 Z M33.3666667,38.1333333 C32.1700497,38.1333333 31.2,37.1632836 31.2,35.9666667 C31.2,34.7700497 32.1700497,33.8 33.3666667,33.8 C34.5632836,33.8 35.5333333,34.7700497 35.5333333,35.9666667 C35.5333333,37.1632836 34.5632836,38.1333333 33.3666667,38.1333333 Z"
101 |                             />
102 |                             <path
103 |                               data-v-da2028b6
104 |                               stroke="#FFFFFF"
105 |                               stroke-width="2.6"
106 |                               stroke-linecap="round"
107 |                               d="M12.1333333,13.8666667 L13.6768756,13.8666667 C15.4621209,13.8666667 16.9554584,15.222463 17.1274221,16.9994069 L18.2224287,28.314386 C18.4068512,30.2200702 20.1012175,31.6154285 22.0069016,31.431006 C22.0111286,31.4305969 22.0153548,31.4301801 22.0195802,31.4297555 L33.2997819,30.296256 C34.7947282,30.1460352 36.0227397,29.0499108 36.3411182,27.581556 L37.8958814,20.4110205 C38.0987345,19.4754663 37.5047629,18.5526049 36.5692087,18.3497518 C36.3853963,18.3098964 36.1963225,18.3002236 36.0094025,18.3211126 L22.8968424,19.7864909"
108 |                             />
109 |                           </g>
110 |                         </g>
111 |                       </g>
112 |                     </svg>
113 |                   </div>
114 |                 </div>
115 |               </div>
116 |             </div>
117 |             <span class="bottom-text">到底了，看看别的分类吧</span>
118 |           </div>
119 |         </b-scroll>
120 |       </div>
121 |       <drop-ball
122 |         :dropImg="dropImg"
123 |         :elLeft="elLeft"
124 |         :elTop="elTop"
125 |         :dots="dots"
126 |         @change="onDotChange"
127 |       />
128 |     </template>
129 |     <loading :show="showLoading" />
130 |   </div>
131 | </template>
132 | <script>
133 | import BScroll from "@/components/bscroll";
134 | import { mapMutations, mapState } from "vuex";
135 | export default {
136 |   name: "category",
137 |   data() {
138 |     return {
139 |       value: "",
140 |       showLoading: true,
141 |       categoriesList: [],
142 |       cateIndex: 0,
143 |       detailsList: [],
144 |       navIndex: 0,
145 |       showAll: false,
146 |       dropImg: "",
147 |       elLeft: null,
148 |       elTop: null,
149 |       dots: [] // 小球集合
150 |     };
151 |   },
152 |   created() {
153 |     this.initData();
154 |   },
155 |   computed: {
156 |     ...mapState(['userInfo']),
157 |     arrowName() {
158 |       return this.showAll ? "arrow-up" : "arrow-down";
159 |     },
160 |     productList() {
161 |       return this.detailsList.length
162 |         ? this.detailsList[this.navIndex].products
163 |         : [];
164 |     },
165 |     navTitle() {
166 |       return this.detailsList.length
167 |         ? this.detailsList[this.navIndex].name
168 |         : "";
169 |     }
170 |   },
171 |   methods: {
172 |     ...mapMutations(["ADD_GOODS"]),
173 |     initData() {
174 |       this.getCategories();
175 |       this.getDetails();
176 |     },
177 |     async getCategories() {
178 |       let res = await this.$http("/api/homeApi/categories");
179 |       if (res.data.code === 0) {
180 |         this.categoriesList = res.data.data.cate.map((cate, index) => {
181 |           cate.params = index < 9 ? `lk00${index + 1}` : `lk0${index + 1}`;
182 |           return cate;
183 |         });
184 |       }
185 |     },
186 |     async getDetails(params = "lk001") {
187 |       let res = await this.$http(`/api/homeApi/categoriesdetail/${params}`);
188 |       if (res.data.code === 0) {
189 |         this.detailsList = res.data.data.cate;
190 |         this.showLoading = false;
191 |         this.$nextTick(() => {
192 |           this.getNavWidth();
193 |         });
194 |       }
195 |     },
196 |     onSearch() {
197 |       this.$toast("搜索功能未实现");
198 |       this.value = "";
199 |     },
200 |     onCateClick(params, index) {
201 |       this.showLoading = true;
202 |       this.cateIndex = index;
203 |       this.showAll = false;
204 |       this.getDetails(params);
205 |       setTimeout(() => {
206 |         let leftItem = this.$refs.leftItem;
207 |         let el = leftItem[index];
208 |         this.$refs.leftWrap.scrollToElement(el, 300);
209 |       }, 500);
210 |     },
211 |     onNavClick(index, type) {
212 |       this.navIndex = index;
213 |       let navItem = this.$refs.navItem;
214 |       let el = navItem[index];
215 |       this.$refs.navWrap.scrollToElement(el, 300);
216 |       if (type === "all") {
217 |         this.showAll = false;
218 |       }
219 |     },
220 |     onAllClick() {
221 |       this.showAll = !this.showAll;
222 |     },
223 |     addCart({ id, name, small_image, price }, event) {
224 |       if (!Object.keys(this.userInfo).length) {
225 |         this.$router.push({ path: "/login" });
226 |         return;
227 |       }
228 |       this.ADD_GOODS({ id, name, small_image, price });
229 |       this.dropImg = small_image;
230 |       this.elLeft = event.target.getBoundingClientRect().left;
231 |       this.elTop = event.target.getBoundingClientRect().top;
232 |       this.dots = [...this.dots, true];
233 |     },
234 |     onDotChange(data) {
235 |       this.dots = [...this.dots, data];
236 |     },
237 |     getNavWidth() {
238 |       let contentWidth = 0;
239 |       let el = this.$refs.navItem;
240 |       for (let i = 0; i < el.length; i++) {
241 |         contentWidth += el[i].clientWidth * 1.2;
242 |       }
243 |       this.$refs.navContent.style.width = contentWidth + "px";
244 |     }
245 |   },
246 |   mounted() {
247 |     const { query, index } = this.$route.params;
248 |     if (index) {
249 |       setTimeout(() => {
250 |         this.onCateClick(query, index + 1);
251 |       }, 50);
252 |     }
253 |   },
254 |   components: {
255 |     BScroll
256 |   }
257 | };
258 | </script>
259 | <style lang='scss' scoped>
260 | .category {
261 |   position: relative;
262 |   .van-search {
263 |     position: fixed;
264 |     top: 0;
265 |     left: 0;
266 |     right: 0;
267 |     z-index: 20;
268 |     .van-search__content {
269 |       background-color: #f2f2f2;
270 |     }
271 |   }
272 |   .left-wrap {
273 |     position: absolute;
274 |     top: 50px;
275 |     left: 0;
276 |     width: 25%;
277 |     height: 85vh;
278 |     overflow: hidden;
279 |     background-color: #f2f2f2;
280 |     .item {
281 |       display: inline-block;
282 |       width: 100%;
283 |       height: 3rem;
284 |       line-height: 3rem;
285 |       text-align: center;
286 |       color: grey;
287 |       border-bottom: 1px solid rgba(7, 17, 27, 0.1);
288 |       position: relative;
289 |     }
290 |     .item-active {
291 |       background-color: #fff;
292 |       color: #000;
293 |       &::before {
294 |         content: "";
295 |         display: inline-block;
296 |         position: absolute;
297 |         top: 0.5rem;
298 |         left: 0;
299 |         width: 0.2rem;
300 |         height: 2rem;
301 |         background-color: #3bba63;
302 |       }
303 |     }
304 |   }
305 |   .right-wrap {
306 |     position: absolute;
307 |     top: 50px;
308 |     right: 0;
309 |     width: 75%;
310 |     height: 85vh;
311 |     overflow: hidden;
312 |     .nav-wrap {
313 |       position: absolute;
314 |       left: 0;
315 |       right: 2rem;
316 |       width: 100%;
317 |       overflow: hidden;
318 |       white-space: nowrap;
319 |       .item {
320 |         display: inline-block;
321 |         height: 3rem;
322 |         line-height: 3rem;
323 |         padding: 0 1rem;
324 |         text-align: center;
325 |       }
326 |       .item-active {
327 |         color: #3bba63;
328 |       }
329 |     }
330 |     .nav-all {
331 |       position: absolute;
332 |       top: 1rem;
333 |       right: 0;
334 |       width: 2.5rem;
335 |       text-align: center;
336 |       background-color: #fff;
337 |     }
338 |     .nav-all-wrap {
339 |       position: fixed;
340 |       top: 6.5rem;
341 |       bottom: 50px;
342 |       background-color: hsla(0, 0%, 100%, 0.6);
343 |       z-index: 20;
344 |       .nav-all-list {
345 |         padding: 1rem;
346 |         background-color: #fff;
347 |         .nav-item {
348 |           display: inline-block;
349 |           padding: 0.4rem 0.6rem;
350 |           margin: 0 1rem 1rem 0;
351 |           border: 1px solid #dedede;
352 |           font-size: 0.9375rem;
353 |           color: rgba(0, 0, 0, 0.7);
354 |           border-radius: 1rem;
355 |         }
356 |         .nav-item-active {
357 |           color: #3bba63;
358 |         }
359 |       }
360 |     }
361 |     .list-wrap {
362 |       position: absolute;
363 |       top: 3rem;
364 |       left: 0;
365 |       right: 0;
366 |       height: 90%;
367 |       overflow: hidden;
368 |       .nav-title {
369 |         display: inline-block;
370 |         width: 100%;
371 |         padding-left: 1rem;
372 |         line-height: 3rem;
373 |         font-size: 0.8rem;
374 |         color: #93999f;
375 |         background-color: #f3f5f7;
376 |         position: relative;
377 |         &::before {
378 |           content: "";
379 |           display: inline-block;
380 |           position: absolute;
381 |           top: 0.5rem;
382 |           left: 0;
383 |           width: 0.2rem;
384 |           height: 2rem;
385 |           background-color: #d9dde1;
386 |         }
387 |       }
388 |       .list-item {
389 |         display: flex;
390 |         border-bottom: 1px solid rgba(7, 17, 27, 0.1);
391 |         padding: 1rem 0.5rem;
392 |         .image {
393 |           width: 4.2rem;
394 |           height: 4.2rem;
395 |           margin-right: 0.3rem;
396 |         }
397 |         .content {
398 |           flex: 1;
399 |           display: flex;
400 |           flex-direction: column;
401 |           .name {
402 |             font-size: 1rem;
403 |             color: #07111b;
404 |           }
405 |           .spec {
406 |             margin: 0.5rem 0;
407 |             font-size: 0.8rem;
408 |             color: #93999f;
409 |             line-height: 1.2;
410 |           }
411 |           .price {
412 |             display: flex;
413 |             justify-content: space-between;
414 |             align-items: center;
415 |             .now-price {
416 |               color: red;
417 |             }
418 |             .origin-price {
419 |               margin-left: 0.5rem;
420 |               font-size: 0.8rem;
421 |               color: #b2b2b2;
422 |               text-decoration: line-through;
423 |             }
424 |             .buy-cart {
425 |               width: 1.5rem;
426 |               height: 1.5rem;
427 |             }
428 |           }
429 |         }
430 |       }
431 |       .bottom-text {
432 |         display: inline-block;
433 |         width: 100%;
434 |         line-height: 3rem;
435 |         text-align: center;
436 |       }
437 |     }
438 |   }
439 | }
440 | </style>


--------------------------------------------------------------------------------
/src/views/detail/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class='detail'>
 3 | 
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: "detail",
 9 |   data() {
10 |     return {};
11 |   },
12 |   created() {},
13 |   methods: {},
14 | };
15 | </script>
16 | <style lang='scss' scoped>
17 | </style>


--------------------------------------------------------------------------------
/src/views/eat/collection/collection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="collection">
 3 |     <van-nav-bar title="我的菜" left-arrow @click-left="onClickLeft"  @click-right="onClickRight" fixed>
 4 |       <van-icon name="shopping-cart-o" size="20" slot="right" />
 5 |     </van-nav-bar>
 6 |     <div class="wrap" v-if="list.length">
 7 |       <div v-for="item in list" :key="item.id"></div>
 8 |     </div>
 9 |     <div class="empty" v-else>
10 |       <img :src="require('@/assets/img/empty_order.jpg')" class="img" alt />
11 |       <span class="text">可以把菜谱收藏到这里哦~</span>
12 |     </div>
13 |   </div>
14 | </template>
15 | <script>
16 | export default {
17 |   name: "collection",
18 |   data() {
19 |     return {
20 |       list: []
21 |     };
22 |   },
23 |   created() {},
24 |   methods: {
25 |     onClickRight() {
26 |       this.$router.push({ path: "/dashboard/cart" });
27 |     }
28 |   }
29 | };
30 | </script>
31 | <style lang='scss' scoped>
32 | .collection {
33 |   padding-top: 46px;
34 |   background-color: #f2f2f2;
35 |   .empty {
36 |     display: flex;
37 |     flex-direction: column;
38 |     justify-content: center;
39 |     align-items: center;
40 |     height: calc(100vh - 46px);
41 |     .img {
42 |       width: 10rem;
43 |       height: 10rem;
44 |     } 
45 |     .text {
46 |       margin-top: 0.5rem;
47 |       font-size: 0.8rem;
48 |       color:grey;
49 |     }
50 |   }
51 | }
52 | </style>


--------------------------------------------------------------------------------
/src/views/eat/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="eat">
  3 |     <div class="search-wrap">
  4 |       <van-search placeholder="搜索菜谱、食材" v-model="value" background="#f0f0f0" @search="onSearch" />
  5 |       <div class="collection" @click="onCollection">
  6 |         <svg
  7 |           data-v-fe6f31e2
  8 |           t="1569828707785"
  9 |           viewBox="0 0 1165 1024"
 10 |           version="1.1"
 11 |           xmlns="http://www.w3.org/2000/svg"
 12 |           p-id="8465"
 13 |           width="18"
 14 |           height="18"
 15 |         >
 16 |           <path
 17 |             data-v-fe6f31e2
 18 |             d="M945.230769 1024H220.553846A220.553846 220.553846 0 0 1 0 803.446154V220.553846A220.553846 220.553846 0 0 1 220.553846 0h192.512a78.769231 78.769231 0 0 1 69.159385 41.117538l67.584 123.98277a15.753846 15.753846 0 0 0 13.863384 8.192H945.230769a220.553846 220.553846 0 0 1 220.553846 220.553846v409.6a220.553846 220.553846 0 0 1-220.553846 220.553846zM220.553846 63.015385A157.538462 157.538462 0 0 0 63.015385 220.553846v582.892308a157.538462 157.538462 0 0 0 157.538461 157.538461h724.676923a157.538462 157.538462 0 0 0 157.538462-157.538461V393.846154a157.538462 157.538462 0 0 0-157.538462-157.538462H563.672615a78.769231 78.769231 0 0 1-69.159384-41.117538L426.929231 71.207385a15.753846 15.753846 0 0 0-13.863385-8.192z"
 19 |             fill="#45c763"
 20 |             p-id="8466"
 21 |           />
 22 |           <path
 23 |             data-v-fe6f31e2
 24 |             d="M707.505231 842.043077a53.563077 53.563077 0 0 1-25.678769-7.089231L582.892308 782.651077 481.910154 834.953846a54.665846 54.665846 0 0 1-78.769231-57.816615l19.692308-111.379693-80.502154-78.76923a54.508308 54.508308 0 0 1 30.562461-92.790154l111.852308-15.753846L535.630769 376.832A53.878154 53.878154 0 0 1 583.837538 346.584615a54.350769 54.350769 0 0 1 48.679385 30.562462l49.624615 101.612308 111.69477 16.856615a54.350769 54.350769 0 0 1 29.774769 92.947692l-81.289846 78.769231 18.589538 111.379692a54.350769 54.350769 0 0 1-21.897846 53.248 54.980923 54.980923 0 0 1-31.507692 10.082462z m3.938461-62.070154zM582.892308 718.532923a54.823385 54.823385 0 0 1 25.678769 6.301539l88.379077 47.261538-15.753846-98.934154a54.193231 54.193231 0 0 1 15.753846-47.261538l71.995077-69.632-99.091693-15.753846a54.665846 54.665846 0 0 1-40.96-29.932308l-43.795692-90.112-44.898461 89.639384a53.720615 53.720615 0 0 1-41.117539 29.617231l-99.249231 14.020923 71.522462 70.262154a54.508308 54.508308 0 0 1 15.753846 48.364308l-17.486769 98.619077L557.056 724.676923a54.508308 54.508308 0 0 1 25.836308-6.144z"
 25 |             fill="#45c763"
 26 |             p-id="8467"
 27 |           />
 28 |         </svg>
 29 |         <span class="text">收藏</span>
 30 |       </div>
 31 |       <div class="today-menu">今日菜单</div>
 32 |     </div>
 33 |     <div class="nav-wrap">
 34 |       <div class="wrapper" ref="wrapper">
 35 |         <ul ref="content">
 36 |           <li
 37 |             v-for="(item,index) in navList"
 38 |             :key="item.id"
 39 |             class="menu-item"
 40 |             :class="{'menu-item-active':item.active}"
 41 |             ref="item"
 42 |             @click="onItemClick(item,index)"
 43 |           >
 44 |             <span>{{item.name}}</span>
 45 |           </li>
 46 |         </ul>
 47 |       </div>
 48 |       <div class="menu-all" @click="onAllClick">
 49 |         <span>{{menuName}}</span>
 50 |         <van-icon :name="arrowName" />
 51 |       </div>
 52 |     </div>
 53 |     <div class="nav-all-wrap" v-show="showAll">
 54 |       <template v-if="historyList.length">
 55 |         <span class="title">最近找过</span>
 56 |         <div class="history-list">
 57 |           <div v-for="item in historyList" :key="item.id" class="item">
 58 |             <span>{{item.name}}</span>
 59 |           </div>
 60 |         </div>
 61 |       </template>
 62 |       <span class="title">菜单分类</span>
 63 |       <div class="nav-list">
 64 |         <div
 65 |           v-for="(item,index) in navList"
 66 |           :key="item.id"
 67 |           class="item"
 68 |           @click="onItemClick(item,index)"
 69 |         >
 70 |           <span>{{item.name}}</span>
 71 |         </div>
 72 |       </div>
 73 |     </div>
 74 |     <div class="menu-list" v-show="!showAll">
 75 |       <waterfall :col="col" :data="menuList" @loadmore="loadmore">
 76 |         <div class="cell-item" v-for="item in menuList" :key="item.id" ref="item">
 77 |           <img v-lazy="item.image" />
 78 |           <p class="desc">{{item.name}}</p>
 79 |           <div class="footer">
 80 |             <img class="avatar" v-lazy="item.author_avatar" alt />
 81 |             <span class="name">{{item.author_name}}</span>
 82 |           </div>
 83 |         </div>
 84 |       </waterfall>
 85 |     </div>
 86 |     <scroll-top />
 87 |     <loading :show="showLoading" />
 88 |   </div>
 89 | </template>
 90 | <script>
 91 | import Vue from "vue";
 92 | import BScroll from "better-scroll";
 93 | export default {
 94 |   name: "eat",
 95 |   data() {
 96 |     return {
 97 |       showLoading: true,
 98 |       value: "",
 99 |       navList: [], // 菜单
100 |       col: 2,
101 |       menuList: [], // 菜谱
102 |       showAll: false,
103 |       historyList: [], // 最近找过
104 |       page: 1
105 |     };
106 |   },
107 |   created() {
108 |     this.getMenu();
109 |     this.getList();
110 |   },
111 |   computed: {
112 |     menuName() {
113 |       return this.showAll ? "收起" : "全部";
114 |     },
115 |     arrowName() {
116 |       return this.showAll ? "arrow-up" : "arrow-down";
117 |     }
118 |   },
119 |   methods: {
120 |     onSearch() {
121 |       this.$toast("搜索功能未实现");
122 |       this.value = "";
123 |     },
124 |     onCollection() {
125 |       this.$router.push({ path: "/collection" });
126 |     },
127 |     async getMenu() {
128 |       let res = await this.$http("/api/recipe/allScene");
129 |       if (res.data.code === 0) {
130 |         this.navList = res.data.data.list.map((item, index) => {
131 |           if (index === 0) {
132 |             item.active = true;
133 |           }
134 |           return item;
135 |         });
136 |         this.initScroll();
137 |       }
138 |     },
139 |     initScroll() {
140 |       this.$nextTick(() => {
141 |         if (!this.scroll) {
142 |           let contentWidth = 0;
143 |           let el = this.$refs.item;
144 |           for (let i = 0; i < el.length; i++) {
145 |             contentWidth += el[i].clientWidth * 1.18;
146 |           }
147 |           this.$refs.content.style.width = contentWidth + "px";
148 |           this.scroll = new BScroll(this.$refs.wrapper, {
149 |             probeType: 3,
150 |             startX: 0,
151 |             click: true,
152 |             scrollX: true
153 |           });
154 |         }
155 |       });
156 |     },
157 |     onAllClick() {
158 |       this.showAll = !this.showAll;
159 |     },
160 |     onItemClick({ id, name }, index) {
161 |       this.navList = this.navList.map(item => {
162 |         if (item.id === id) {
163 |           item.active = true;
164 |         } else {
165 |           item.active = false;
166 |         }
167 |         return { ...item };
168 |       });
169 |       let el = this.$refs.item[index];
170 |       this.scroll.scrollToElement(el, 500);
171 |       this.showAll = false;
172 |       let obj = {
173 |         id,
174 |         name
175 |       };
176 |       let flag = true;
177 |       this.historyList.forEach(item => {
178 |         if (item.id === id) {
179 |           flag = false;
180 |         }
181 |       });
182 |       if (!flag) return;
183 |       this.historyList.unshift(obj);
184 |     },
185 |     async getList() {
186 |       let res = await this.$http("/api/recipe/menulist/lk01");
187 |       if (res.data.code === 0) {
188 |         this.menuList = res.data.data.big_recommend.list;
189 |         this.showLoading = false;
190 |       }
191 |     },
192 |     async loadmore() {
193 |       let index = ++this.page;
194 |       if (index > 31) {
195 |         this.$toast("别拉了，到底啦~");
196 |         return;
197 |       }
198 |       let param = index >= 10 ? `/lk${index}` : `/lk0${index}`;
199 |       let res = await this.$http(`/api/recipe/menulist${param}`);
200 |       if (res.data.code === 0) {
201 |         this.menuList = this.menuList.concat(res.data.data.big_recommend.list);
202 |       }
203 |     }
204 |   }
205 | };
206 | </script>
207 | <style lang='scss' scoped>
208 | .eat {
209 |   .search-wrap {
210 |     position: fixed;
211 |     top: 0;
212 |     right: 0;
213 |     left: 0;
214 |     background-color: #fff;
215 |     z-index: 10;
216 |     .van-search {
217 |       padding-right: 40px;
218 |     }
219 |     .collection {
220 |       position: absolute;
221 |       top: 12px;
222 |       right: 10px;
223 |       display: flex;
224 |       flex-direction: column;
225 |       align-items: center;
226 |       .text {
227 |         font-size: 0.8rem;
228 |         color: #3bba63;
229 |       }
230 |     }
231 |     .today-menu {
232 |       margin: 12px 0 12px 12px;
233 |       padding-left: 0.5rem;
234 |       line-height: 1.5rem;
235 |       border-left: 0.2rem solid #75a342;
236 |       font-size: 1.2rem;
237 |       font-weight: 700;
238 |     }
239 |   }
240 |   .nav-wrap {
241 |     position: fixed;
242 |     top: 6rem;
243 |     right: 0;
244 |     left: 0;
245 |     z-index: 10;
246 |     padding-left: 12px;
247 |     padding-top: 12px;
248 |     height: 2rem;
249 |     white-space: nowrap;
250 |     font-size: 0.8rem;
251 |     overflow: hidden;
252 |     background-color: #fff;
253 |     .wrapper {
254 |       width: 84%;
255 |       overflow: hidden;
256 |       .menu-item {
257 |         display: inline-block;
258 |         padding: 0.4rem 0.6rem;
259 |         border: 1px solid #dedede;
260 |         border-radius: 1rem;
261 |         margin-right: 0.5rem;
262 |       }
263 |       .menu-item-active {
264 |         border-color: #3cb963;
265 |         color: #3cb963;
266 |       }
267 |     }
268 |     .menu-all {
269 |       position: absolute;
270 |       top: 1.25rem;
271 |       right: 0.5rem;
272 |       color: grey;
273 |       .van-icon {
274 |         vertical-align: bottom;
275 |       }
276 |     }
277 |   }
278 |   .nav-all-wrap {
279 |     margin-top: 9rem;
280 |     padding-left: 1.1rem;
281 |     .title {
282 |       display: inline-block;
283 |       margin: 1rem 0;
284 |       font-size: 0.8rem;
285 |       color: grey;
286 |     }
287 |     .item {
288 |       display: inline-block;
289 |       padding: 0.6rem 0.8rem;
290 |       font-size: 0.9375rem;
291 |       border: 1px solid #dedede;
292 |       color: rgba(0, 0, 0, 0.7);
293 |       border-radius: 1.2rem;
294 |       margin: 0 1rem 1rem 0;
295 |     }
296 |   }
297 |   .menu-list {
298 |     width: 100%;
299 |     overflow: hidden;
300 |     margin-top: 9rem;
301 |     .cell-item {
302 |       padding: 0.5rem;
303 |       text-align: center;
304 |       box-sizing: border-box;
305 |       img {
306 |         border-radius: 0.8rem;
307 |       }
308 |       .desc {
309 |         margin: 1rem 0;
310 |         font-size: 1.1rem;
311 |         font-weight: bolder;
312 |       }
313 |       .footer {
314 |         display: flex;
315 |         align-items: center;
316 |         padding-left: 1rem;
317 |         .avatar {
318 |           width: 2rem;
319 |           border-radius: 50%;
320 |         }
321 |         .name {
322 |           margin-left: 0.5rem;
323 |           font-size: 0.9375rem;
324 |           color: grey;
325 |         }
326 |       }
327 |     }
328 |   }
329 | }
330 | </style>


--------------------------------------------------------------------------------
/src/views/home/components/header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="head">
  3 |     <div class="search">
  4 |       <div class="search-top">
  5 |         <div class="address" @click="onAddressClick">
  6 |           <van-icon name="location-o" color="#fff" size="1.2rem" />
  7 |           <span class="text">{{myAddress}}</span>
  8 |           <van-icon name="arrow-down" color="#fff" size="0.8rem" />
  9 |         </div>
 10 |       </div>
 11 |       <van-sticky>
 12 |         <van-search
 13 |           v-model="value"
 14 |           placeholder="搜索一下"
 15 |           shape="round"
 16 |           @search="onSearch"
 17 |           background="#3bba63"
 18 |         />
 19 |       </van-sticky>
 20 |     </div>
 21 |     <van-swipe :autoplay="3000" indicator-color="#75A342">
 22 |       <van-swipe-item v-for="item in swiperList" :key="item.cid">
 23 |         <img :src="item.icon_url" :alt="item.public_name" />
 24 |       </van-swipe-item>
 25 |     </van-swipe>
 26 |     <div class="tip-img">
 27 |       <img :src="tipImg" alt />
 28 |       <img :src="adImg" alt @click="getVip" />
 29 |     </div>
 30 |   </div>
 31 | </template>
 32 | <script>
 33 | export default {
 34 |   props: {
 35 |     swiperList: {
 36 |       type: Array,
 37 |       default: () => []
 38 |     },
 39 |     tipImg: {
 40 |       type: String,
 41 |       default: ""
 42 |     },
 43 |     adImg: {
 44 |       type: String,
 45 |       default: ""
 46 |     },
 47 |     userInfo: {
 48 |       type: Object,
 49 |       default: {}
 50 |     },
 51 |     addressInfo: {
 52 |       type: Array,
 53 |       default: () => []
 54 |     }
 55 |   },
 56 |   data() {
 57 |     return {
 58 |       value: "" // 搜索字段
 59 |     };
 60 |   },
 61 |   computed: {
 62 |     myAddress() {
 63 |       if (Object.keys(this.$route.params).length) {
 64 |         return this.$route.params.name;
 65 |       }
 66 |       if (!this.addressInfo.length) {
 67 |         return "请选择位置";
 68 |       }
 69 |       let defaultArr = this.addressInfo.filter(
 70 |         address => address.isDefault === true
 71 |       );
 72 |       if (defaultArr.length) {
 73 |         return defaultArr[0].county;
 74 |       } else {
 75 |         return this.addressInfo[0].county;
 76 |       }
 77 |     }
 78 |   },
 79 |   methods: {
 80 |     onAddressClick() {
 81 |       this.$router.push({ path: "/dashboard/home/map" });
 82 |     },
 83 |     onSearch() {
 84 |       this.$toast("搜索功能暂未实现");
 85 |       this.value = "";
 86 |     },
 87 |     getVip() {
 88 |       if (!this.userInfo.token) {
 89 |         this.$router.push({ path: "/login" });
 90 |       } else {
 91 |         this.$router.push({ path: "/mine/myVip" });
 92 |       }
 93 |     }
 94 |   }
 95 | };
 96 | </script>
 97 | <style lang='scss' scoped>
 98 | $bg: "~@/assets/img/home_bg.png";
 99 | .head {
100 |   width: 100%;
101 |   height: 100%;
102 |   background: url($bg) no-repeat;
103 |   background-size: cover;
104 |   .search {
105 |     background-color: #3bba63;
106 |     .search-top {
107 |       display: flex;
108 |       justify-content: space-between;
109 |       align-items: center;
110 |       padding: 0.6rem 0.6rem 0 0.6rem;
111 |       .address {
112 |         display: flex;
113 |         align-items: center;
114 |         padding: 0.3rem 0.5rem;
115 |         border-radius: 0.6rem;
116 |         background-color: rgba(0, 0, 0, 0.4);
117 |         max-width: 8rem;
118 |         box-sizing: border-box;
119 |         .text {
120 |           margin: 0 2px;
121 |           font-size: 0.9375rem;
122 |           color: #fff;
123 |           white-space: nowrap;
124 |           overflow: hidden;
125 |           text-overflow: ellipsis;
126 |         }
127 |       }
128 |     }
129 |     .van-sticky--fixed {
130 |       .van-search {
131 |         background-color: #fff!important;
132 |         .van-search__content {
133 |           background-color: #f2f2f2;
134 |         }
135 |       }
136 |     }
137 |     
138 |   }
139 |   .van-swipe {
140 |     width: 95%;
141 |     height: 10rem;
142 |     margin: 1rem auto;
143 |     border-bottom-left-radius: 1rem;
144 |     border-bottom-right-radius: 1rem;
145 |   }
146 | }
147 | </style>


--------------------------------------------------------------------------------
/src/views/home/components/limit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="limit">
  3 |     <div class="header">
  4 |       <div class="title-wrapper">
  5 |         <span class="title">限时抢购</span>
  6 |         <van-count-down :time="time">
  7 |           <template v-slot="timeData">
  8 |             <span class="item">{{ timeData.hours }}</span>
  9 |             <span class="item">{{ timeData.minutes }}</span>
 10 |             <span class="item">{{ timeData.seconds }}</span>
 11 |           </template>
 12 |         </van-count-down>
 13 |       </div>
 14 |       <span class="more">更多</span>
 15 |     </div>
 16 |     <b-scroll :data="flashFoods" :scrollX="true" class="wrapper" ref="wrapper">
 17 |       <ul ref="content">
 18 |         <li v-for="item in flashFoods" :key="item.id" class="content-item" ref="item">
 19 |           <img :src="item.small_image" alt />
 20 |           <span class="title">{{item.name}}</span>
 21 |           <div class="price">
 22 |             <div>
 23 |               <p class="now-price">￥{{item.price}}</p>
 24 |               <p class="origin-price">￥{{item.origin_price}}</p>
 25 |             </div>
 26 |             <div class="buy-cart" @click="addCart(item,$event)">
 27 |               <svg data-v-da2028b6 viewBox="0 0 52 52" class="icon icon-60">
 28 |                 <defs data-v-da2028b6>
 29 |                   <radialGradient
 30 |                     data-v-da2028b6
 31 |                     cx="27.0288363%"
 32 |                     cy="10.3693483%"
 33 |                     fx="27.0288363%"
 34 |                     fy="10.3693483%"
 35 |                     r="93.8427229%"
 36 |                     id="radialGradient-1"
 37 |                   >
 38 |                     <stop data-v-da2028b6 stop-color="#4ECA75" offset="0%" />
 39 |                     <stop data-v-da2028b6 stop-color="#39B460" offset="100%" />
 40 |                   </radialGradient>
 41 |                 </defs>
 42 |                 <g data-v-da2028b6 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 43 |                   <g data-v-da2028b6 transform="translate(-678.000000, -2742.000000)">
 44 |                     <g data-v-da2028b6 transform="translate(678.000000, 2742.000000)">
 45 |                       <rect
 46 |                         data-v-da2028b6
 47 |                         fill="url(#radialGradient-1)"
 48 |                         x="0"
 49 |                         y="0"
 50 |                         width="51.8699976"
 51 |                         height="51.8699976"
 52 |                         rx="25.9349988"
 53 |                       />
 54 |                       <path
 55 |                         data-v-da2028b6
 56 |                         fill="#FFFFFF"
 57 |                         d="M20.3666667,39 C19.1700497,39 18.2,38.0299503 18.2,36.8333333 C18.2,35.6367164 19.1700497,34.6666667 20.3666667,34.6666667 C21.5632836,34.6666667 22.5333333,35.6367164 22.5333333,36.8333333 C22.5333333,38.0299503 21.5632836,39 20.3666667,39 Z M33.3666667,38.1333333 C32.1700497,38.1333333 31.2,37.1632836 31.2,35.9666667 C31.2,34.7700497 32.1700497,33.8 33.3666667,33.8 C34.5632836,33.8 35.5333333,34.7700497 35.5333333,35.9666667 C35.5333333,37.1632836 34.5632836,38.1333333 33.3666667,38.1333333 Z"
 58 |                       />
 59 |                       <path
 60 |                         data-v-da2028b6
 61 |                         stroke="#FFFFFF"
 62 |                         stroke-width="2.6"
 63 |                         stroke-linecap="round"
 64 |                         d="M12.1333333,13.8666667 L13.6768756,13.8666667 C15.4621209,13.8666667 16.9554584,15.222463 17.1274221,16.9994069 L18.2224287,28.314386 C18.4068512,30.2200702 20.1012175,31.6154285 22.0069016,31.431006 C22.0111286,31.4305969 22.0153548,31.4301801 22.0195802,31.4297555 L33.2997819,30.296256 C34.7947282,30.1460352 36.0227397,29.0499108 36.3411182,27.581556 L37.8958814,20.4110205 C38.0987345,19.4754663 37.5047629,18.5526049 36.5692087,18.3497518 C36.3853963,18.3098964 36.1963225,18.3002236 36.0094025,18.3211126 L22.8968424,19.7864909"
 65 |                       />
 66 |                     </g>
 67 |                   </g>
 68 |                 </g>
 69 |               </svg>
 70 |             </div>
 71 |           </div>
 72 |         </li>
 73 |       </ul>
 74 |     </b-scroll>
 75 |     <drop-ball
 76 |       :dropImg="dropImg"
 77 |       :elLeft="elLeft"
 78 |       :elTop="elTop"
 79 |       :dots="dots"
 80 |       @change="onDotChange"
 81 |     />
 82 |   </div>
 83 | </template>
 84 | <script>
 85 | import BScroll from "@/components/bscroll";
 86 | import { mapMutations, mapState } from "vuex";
 87 | export default {
 88 |   name: "limit",
 89 |   props: {
 90 |     flashFoods: {
 91 |       type: Array,
 92 |       default: () => []
 93 |     }
 94 |   },
 95 |   data() {
 96 |     return {
 97 |       time: 24 * 60 * 60 * 1000 * 7,
 98 |       dropImg: "",
 99 |       elLeft: null,
100 |       elTop: null,
101 |       dots: [] // 小球集合
102 |     };
103 |   },
104 |   computed: {
105 |     ...mapState(['userInfo'])
106 |   },
107 |   methods: {
108 |     ...mapMutations(["ADD_GOODS"]),
109 |     addCart({ id, name, small_image, price }, event) {
110 |       if (!Object.keys(this.userInfo).length) {
111 |         this.$router.push({ path: "/login" });
112 |         return;
113 |       }
114 |       this.ADD_GOODS({ id, name, small_image, price });
115 |       this.dropImg = small_image;
116 |       this.elLeft = event.target.getBoundingClientRect().left;
117 |       this.elTop = event.target.getBoundingClientRect().top;
118 |       this.dots = [...this.dots, true];
119 |     },
120 |     onDotChange(data) {
121 |       this.dots = [...this.dots, data];
122 |     },
123 |     getWidth() {
124 |       let contentWidth = 0;
125 |       let el = this.$refs.item;
126 |       for (let i = 0; i < el.length; i++) {
127 |         contentWidth += el[i].clientWidth * 1.15;
128 |       }
129 |       this.$refs.content.style.width = contentWidth + "px";
130 |     }
131 |   },
132 |   mounted() {
133 |     this.$nextTick(() => {
134 |       this.getWidth();
135 |     });
136 |   },
137 |   components: {
138 |     BScroll
139 |   }
140 | };
141 | </script>
142 | <style lang='scss' scoped>
143 | .limit {
144 |   margin-top: 0.625rem;
145 |   padding: 1.25rem 0 0.9375rem 0;
146 |   .header {
147 |     position: relative;
148 |     margin: 0 0.625rem 0.625rem 0.625rem;
149 |     line-height: 1.5625rem;
150 |     display: flex;
151 |     justify-content: space-between;
152 |     .title-wrapper {
153 |       display: flex;
154 |       align-items: center;
155 |       padding-left: 0.3125rem;
156 |       border-left: 4px solid #3cb963;
157 |       .title {
158 |         font-size: 1.1875rem;
159 |       }
160 |       .van-count-down {
161 |         margin-left: 0.5rem;
162 |         .item {
163 |           display: inline-block;
164 |           width: 22px;
165 |           margin-right: 5px;
166 |           color: #fff;
167 |           font-size: 12px;
168 |           text-align: center;
169 |           background-color: #000;
170 |         }
171 |       }
172 |     }
173 | 
174 |     .more {
175 |       font-size: 0.8rem;
176 |       color: #3cb963;
177 |     }
178 |   }
179 |   .wrapper {
180 |     width: 100%;
181 |     overflow: hidden;
182 |     white-space: nowrap;
183 |     .content-item {
184 |       display: inline-block;
185 |       width: 6.6rem;
186 |       margin-right: 1rem;
187 |       font-size: 0.8rem;
188 |       .title {
189 |         display: block;
190 |         height: 1.8rem;
191 |         line-height: 1.2;
192 |         padding: 0.2rem;
193 |         white-space: normal;
194 |         overflow: hidden;
195 |         text-overflow: ellipsis;
196 |       }
197 |       .price {
198 |         margin-top: 0.5rem;
199 |         padding: 0 0.2rem;
200 |         display: flex;
201 |         justify-content: space-between;
202 |         align-items: center;
203 |         .now-price {
204 |           font-size: 0.9375rem;
205 |           color: #f37078;
206 |         }
207 |         .origin-price {
208 |           font-size: 0.6875rem;
209 |           color: #999;
210 |           text-decoration: line-through;
211 |         }
212 |         .buy-cart {
213 |           width: 1.5rem;
214 |           height: 1.5rem;
215 |         }
216 |       }
217 |     }
218 |   }
219 | }
220 | </style>


--------------------------------------------------------------------------------
/src/views/home/components/special.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="special">
 3 |     <div class="header">
 4 |       <span class="title">特色专区</span>
 5 |     </div>
 6 |     <ul class="content-wrap">
 7 |       <li v-for="item in arr" :key="item.id" class="content-item">
 8 |         <p class="title">{{item.title}}</p>
 9 |         <p class="subtitle">{{item.subtitle}}</p>
10 |         <div class="img-wrap">
11 |           <template v-if="item.id === 4">
12 |             <img :src="item.image" alt />
13 |           </template>
14 |           <template v-else>
15 |             <img :src="item.imageOne" alt />
16 |             <img :src="item.imageTwo" alt />
17 |           </template>
18 |         </div>
19 |       </li>
20 |     </ul>
21 |   </div>
22 | </template>
23 | <script>
24 | export default {
25 |   name: "special",
26 |   props: {
27 |     specialZone: {
28 |       type: Object,
29 |       default: () => {}
30 |     }
31 |   },
32 |   data() {
33 |     return {
34 |       arr: []
35 |     };
36 |   },
37 |   created() {
38 |     const {
39 |       newItemList,
40 |       hotItemList,
41 |       vipItemList,
42 |       otherItemList,
43 |       lowPriceItemList
44 |     } = this.specialZone;
45 |     this.arr.push(
46 |       newItemList[0],
47 |       hotItemList[0],
48 |       vipItemList[0],
49 |       lowPriceItemList[0]
50 |     );
51 |   }
52 | };
53 | </script>
54 | <style lang='scss' scoped>
55 | .special {
56 |   padding: 0.625rem;
57 |   .header {
58 |     margin-bottom: 0.625rem;
59 |     .title {
60 |       padding-left: 0.3125rem;
61 |       border-left: 4px solid#3cb963;
62 |       font-size: 1.1875rem;
63 |     }
64 |   }
65 |   .content-wrap {
66 |     display: flex;
67 |     align-items: center;
68 |     flex-wrap: wrap;
69 |     border-top: 0.01rem solid #dddbc0;
70 |     border-right: 0.01rem solid #dddbc0;
71 |     .content-item {
72 |       width: 50%;
73 |       padding: 0.5rem;
74 |       border-left: 0.01rem solid #dddbc0;
75 |       border-bottom: 0.01rem solid #dddbc0;
76 |       box-sizing: border-box;
77 |       .title {
78 |         font-size: 0.45rem;
79 |         color: #000;
80 |       }
81 |       .subtitle {
82 |         margin: 0.4rem 0;
83 |         font-size: 0.45rem;
84 |         color: grey;
85 |       }
86 |       .img-wrap {
87 |         img {
88 |           display: inline-block;
89 |           width: 3rem;
90 |           height: 2.5rem;
91 |           margin-right: 1rem;
92 |         }
93 |       }
94 |     }
95 |   }
96 | }
97 | </style>


--------------------------------------------------------------------------------
/src/views/home/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <template v-if="!showLoading">
  4 |       <Header
  5 |         :swiperList="swiperList"
  6 |         :tipImg="tipImg"
  7 |         :adImg="adImg"
  8 |         v-if="flag"
  9 |         :userInfo="userInfo"
 10 |         :addressInfo="addressInfo"
 11 |       />
 12 |       <div class="category">
 13 |         <template v-for="(item,index) in categoryList">
 14 |           <div class="category-item" :key="item.name" @click="onItemClick(item.query,index)">
 15 |             <img :src="item.icon_url" class="item-icon" alt />
 16 |             <span class="item-text">{{item.name}}</span>
 17 |           </div>
 18 |         </template>
 19 |       </div>
 20 |       <div class="vip-panel" @click="onVipClick">
 21 |         <svg
 22 |           data-v-389090ce
 23 |           t="1573098700994"
 24 |           viewBox="0 0 1024 1024"
 25 |           version="1.1"
 26 |           xmlns="http://www.w3.org/2000/svg"
 27 |           p-id="2324"
 28 |           width="32"
 29 |           height="32"
 30 |           class="icon"
 31 |         >
 32 |           <path
 33 |             data-v-389090ce
 34 |             d="M194.38562 786.988463L120.219765 404.58321l179.981649 39.013924L511.997 189.23963l211.799586 254.357504 179.981649-39.013924-74.165855 382.405253z"
 35 |             fill="#CFEB70"
 36 |             p-id="2325"
 37 |           />
 38 |           <path
 39 |             data-v-389090ce
 40 |             d="M108.973787 384.285249m-83.293837 0a83.293837 83.293837 0 1 0 166.587674 0 83.293837 83.293837 0 1 0-166.587674 0Z"
 41 |             fill="#FECC85"
 42 |             p-id="2326"
 43 |           />
 44 |           <path
 45 |             data-v-389090ce
 46 |             d="M915.032213 384.285249m-83.293837 0a83.293837 83.293837 0 1 0 166.587674 0 83.293837 83.293837 0 1 0-166.587674 0Z"
 47 |             fill="#FECC85"
 48 |             p-id="2327"
 49 |           />
 50 |           <path
 51 |             data-v-389090ce
 52 |             d="M512.003 155.907695m-83.293837 0a83.293837 83.293837 0 1 0 166.587674 0 83.293837 83.293837 0 1 0-166.587674 0Z"
 53 |             fill="#FECC85"
 54 |             p-id="2328"
 55 |           />
 56 |           <path
 57 |             data-v-389090ce
 58 |             d="M194.885619 786.980463h634.226762v164.411679H194.885619z"
 59 |             fill="#FECC85"
 60 |             p-id="2329"
 61 |           />
 62 |           <path
 63 |             data-v-389090ce
 64 |             d="M587.264853 460.5671c-42.171918 0-75.259853 47.021908-75.259853 47.021909s-31.209939-47.021908-75.277853-47.021909c-42.863916 0-77.865848 35.351931-80.155843 78.155848-1.287997 24.181953 6.505987 42.585917 17.487965 59.251884 21.947957 33.299935 117.90177 113.471778 138.087731 113.471778 20.60396 0 115.701774-79.879844 137.793731-113.471778 11.005979-16.743967 18.779963-35.071932 17.483965-59.251884-2.289996-42.799916-37.293927-78.155847-80.159843-78.155848"
 65 |             fill="#FF5E8A"
 66 |             p-id="2330"
 67 |           />
 68 |           <path
 69 |             data-v-389090ce
 70 |             d="M512.147 737.12856c-7.225986 0-24.149953 0-84.749835-50.141902-27.031947-22.363956-60.871881-53.781895-74.773854-74.877854-10.19998-15.47597-23.537954-40.061922-21.689957-74.751854 3.075994-57.457888 49.545903-102.4638 105.797793-102.463799 32.355937 0 58.537886 17.963965 75.461853 33.993933 17.097967-16.017969 43.355915-33.993934 75.075853-33.993933 56.25389 0 102.723799 45.007912 105.799793 102.461799 1.855996 34.611932-11.477978 59.223884-21.665957 74.731855-14.019973 21.317958-47.681907 52.709897-74.511855 74.985853-60.301882 50.055902-77.431849 50.055902-84.743834 50.055902z m-3.247994-50.9979z m-72.171859-199.88561c-28.469944 0-52.925897 24.157953-54.515894 53.851895-0.815998 15.29397 3.157994 28.381945 13.287975 43.753915 17.741965 26.917947 92.847819 89.787825 116.705772 100.975802 23.653954-11.041978 98.459808-73.855856 116.283772-100.957802 10.26998-15.627969 14.125972-28.309945 13.295975-43.769915-1.589997-29.695942-26.045949-53.855895-54.517894-53.855895-23.543954 0-47.667907 26.749948-54.261894 36.11993-4.88199 6.931986-12.797975 11.087978-21.347958 10.897978a25.66795 25.66795 0 0 1-21.041959-11.475977c-6.645987-9.815981-29.405943-35.539931-53.887895-35.539931zM612.340804 894.634253H335.039346c-14.181972 0-25.67795-11.497978-25.67795-25.67795s11.495978-25.67795 25.67795-25.67795h277.303458c14.181972 0 25.67795 11.497978 25.67795 25.67795s-11.497978 25.67795-25.67995 25.67795zM688.964654 894.640253a25.81195 25.81195 0 0 1-18.153964-7.523986 25.341951 25.341951 0 0 1-5.571989-8.345983 25.259951 25.259951 0 0 1-1.951996-9.809981c0-1.665997 0.154-3.363993 0.487999-5.03199 0.333999-1.617997 0.821998-3.235994 1.463997-4.801991a26.079949 26.079949 0 0 1 5.545989-8.317984 26.089949 26.089949 0 0 1 8.343984-5.573989 26.993947 26.993947 0 0 1 4.80199-1.459997c8.345984-1.669997 17.229966 1.051998 23.185955 7.035986 1.181998 1.181998 2.259996 2.489995 3.183994 3.901993 0.923998 1.385997 1.719997 2.875994 2.361995 4.415991 0.641999 1.565997 1.129998 3.157994 1.463997 4.801991 0.333999 1.669997 0.513999 3.365993 0.513999 5.03199a26.007949 26.007949 0 0 1-4.339991 14.249972 24.489952 24.489952 0 0 1-3.183994 3.905992 25.85195 25.85195 0 0 1-18.151965 7.521986z"
 71 |             fill
 72 |             p-id="2331"
 73 |           />
 74 |           <path
 75 |             data-v-389090ce
 76 |             d="M915.026213 275.325462c-60.087883 0-108.971787 48.883905-108.971787 108.971787 0 5.08199 0.377999 10.06998 1.051998 14.967971l-73.541857 15.939969-148.58771-178.445651c22.087957-19.955961 35.99193-48.803905 35.99193-80.847843 0-60.087883-48.883905-108.971787-108.971787-108.971787s-108.971787 48.883905-108.971787 108.971787c0 32.041937 13.903973 60.889881 35.99193 80.847843l-148.58771 178.449651-73.541857-15.939969c0.675999-4.89599 1.051998-9.887981 1.051998-14.967971 0-60.087883-48.883905-108.971787-108.971787-108.971787S0 324.209367 0 384.295249c0 60.083883 48.883905 108.969787 108.971787 108.969788 0.765999 0 1.519997-0.044 2.281996-0.056L169.17967 791.874453c0.008 0.044 0.02 0.082 0.03 0.126v159.383689c0 14.177972 11.495978 25.67795 25.677949 25.67795h634.226762c14.181972 0 25.67795-11.497978 25.677949-25.67795v-159.383689c0.008-0.044 0.02-0.082 0.03-0.126l57.925887-298.667416c0.761999 0.016 1.517997 0.056 2.281996 0.056 60.087883 0 108.971787-48.883905 108.971787-108.969788-0.004-60.083883-48.887905-108.967787-108.975787-108.967787zM511.997 98.291808c31.769938 0 57.617887 25.84595 57.617887 57.617887s-25.84595 57.613887-57.617887 57.613888S454.379113 187.679633 454.379113 155.909695s25.84795-57.617887 57.617887-57.617887zM51.3539 384.295249c0-31.769938 25.84595-57.617887 57.617887-57.617887s57.617887 25.84595 57.617888 57.617887-25.84595 57.613887-57.617888 57.613888-57.617887-25.84195-57.617887-57.613888z m752.080531 541.414943H220.561569v-113.043779h582.872862v113.043779z m5.00199-164.401679H215.561579L161.005686 480.015062a109.777786 109.777786 0 0 0 36.561928-32.391936l97.19781 21.067959a25.70595 25.70595 0 0 0 25.171951-8.665983l165.275677-198.487613a108.871787 108.871787 0 0 0 26.789948 3.339994c9.241982 0 18.211964-1.165998 26.789948-3.339994l165.275677 198.487613a25.69595 25.69595 0 0 0 25.171951 8.665983l97.19781-21.067959a109.733786 109.733786 0 0 0 36.561928 32.391936l-54.563893 281.293451z m106.589792-319.395376c-31.769938 0-57.617887-25.84395-57.617888-57.613888s25.84595-57.617887 57.617888-57.617887c31.769938 0 57.617887 25.84595 57.617887 57.617887s-25.84795 57.613887-57.617887 57.613888z"
 77 |             fill
 78 |             p-id="2332"
 79 |           />
 80 |         </svg>
 81 |         <span class="title">加入会员·每年预计节省806元</span>
 82 |         <span class="sub-title">5折开卡></span>
 83 |       </div>
 84 |       <Limit :flashFoods="flashFoods" v-if="flag" />
 85 |       <!-- <Special :specialZone="specialZone" v-if="flag" /> -->
 86 |       <van-tabs
 87 |         v-model="activeName"
 88 |         color="#3bba63"
 89 |         title-active-color="#3bba63"
 90 |         title-inactive-color="#7d7e80"
 91 |         @click="onClick"
 92 |         @change="onChange"
 93 |         swipeable
 94 |         animated
 95 |         sticky
 96 |         :offset-top="50"
 97 |       >
 98 |         <van-tab v-for="tab in tabs" :key="tab.title" :title="tab.title" :name="tab.name">
 99 |           <div class="product-list">
100 |             <div v-for="item in productList" :key="item.id" class="product-item">
101 |               <img :src="item.small_image" v-lazy="item.small_image" alt />
102 |               <p class="title text-overflow">{{item.name}}</p>
103 |               <p class="spec text-overflow">{{item.spec}}</p>
104 |               <div class="price">
105 |                 <div>
106 |                   <span class="now-price">￥{{item.price}}</span>
107 |                   <span class="origin-price">￥{{item.origin_price}}</span>
108 |                 </div>
109 |                 <div class="buy-cart" @click="addCart(item, $event)">
110 |                   <svg data-v-da2028b6 viewBox="0 0 52 52" class="icon icon-60">
111 |                     <defs data-v-da2028b6>
112 |                       <radialGradient
113 |                         data-v-da2028b6
114 |                         cx="27.0288363%"
115 |                         cy="10.3693483%"
116 |                         fx="27.0288363%"
117 |                         fy="10.3693483%"
118 |                         r="93.8427229%"
119 |                         id="radialGradient-1"
120 |                       >
121 |                         <stop data-v-da2028b6 stop-color="#4ECA75" offset="0%" />
122 |                         <stop data-v-da2028b6 stop-color="#39B460" offset="100%" />
123 |                       </radialGradient>
124 |                     </defs>
125 |                     <g
126 |                       data-v-da2028b6
127 |                       stroke="none"
128 |                       stroke-width="1"
129 |                       fill="none"
130 |                       fill-rule="evenodd"
131 |                     >
132 |                       <g data-v-da2028b6 transform="translate(-678.000000, -2742.000000)">
133 |                         <g data-v-da2028b6 transform="translate(678.000000, 2742.000000)">
134 |                           <rect
135 |                             data-v-da2028b6
136 |                             fill="url(#radialGradient-1)"
137 |                             x="0"
138 |                             y="0"
139 |                             width="51.8699976"
140 |                             height="51.8699976"
141 |                             rx="25.9349988"
142 |                           />
143 |                           <path
144 |                             data-v-da2028b6
145 |                             fill="#FFFFFF"
146 |                             d="M20.3666667,39 C19.1700497,39 18.2,38.0299503 18.2,36.8333333 C18.2,35.6367164 19.1700497,34.6666667 20.3666667,34.6666667 C21.5632836,34.6666667 22.5333333,35.6367164 22.5333333,36.8333333 C22.5333333,38.0299503 21.5632836,39 20.3666667,39 Z M33.3666667,38.1333333 C32.1700497,38.1333333 31.2,37.1632836 31.2,35.9666667 C31.2,34.7700497 32.1700497,33.8 33.3666667,33.8 C34.5632836,33.8 35.5333333,34.7700497 35.5333333,35.9666667 C35.5333333,37.1632836 34.5632836,38.1333333 33.3666667,38.1333333 Z"
147 |                           />
148 |                           <path
149 |                             data-v-da2028b6
150 |                             stroke="#FFFFFF"
151 |                             stroke-width="2.6"
152 |                             stroke-linecap="round"
153 |                             d="M12.1333333,13.8666667 L13.6768756,13.8666667 C15.4621209,13.8666667 16.9554584,15.222463 17.1274221,16.9994069 L18.2224287,28.314386 C18.4068512,30.2200702 20.1012175,31.6154285 22.0069016,31.431006 C22.0111286,31.4305969 22.0153548,31.4301801 22.0195802,31.4297555 L33.2997819,30.296256 C34.7947282,30.1460352 36.0227397,29.0499108 36.3411182,27.581556 L37.8958814,20.4110205 C38.0987345,19.4754663 37.5047629,18.5526049 36.5692087,18.3497518 C36.3853963,18.3098964 36.1963225,18.3002236 36.0094025,18.3211126 L22.8968424,19.7864909"
154 |                           />
155 |                         </g>
156 |                       </g>
157 |                     </g>
158 |                   </svg>
159 |                 </div>
160 |               </div>
161 |             </div>
162 |           </div>
163 |         </van-tab>
164 |       </van-tabs>
165 |       <scroll-top />
166 |       <van-divider>我是有底线的</van-divider>
167 |       <drop-ball
168 |         :dropImg="dropImg"
169 |         :elLeft="elLeft"
170 |         :elTop="elTop"
171 |         :dots="dots"
172 |         @change="onDotChange"
173 |       />
174 |     </template>
175 |     <loading :show="showLoading" />
176 |   </div>
177 | </template>
178 | <script>
179 | import Header from "./components/header";
180 | import Limit from "./components/limit";
181 | import Special from "./components/special";
182 | import { mapState, mapMutations } from "vuex";
183 | export default {
184 |   name: "home",
185 |   data() {
186 |     return {
187 |       showLoading: true,
188 |       flag: false,
189 |       swiperList: [], // 轮播
190 |       tipImg: "",
191 |       adImg: "",
192 |       categoryList: [], // 类目
193 |       flashFoods: [], // 限时购
194 |       specialZone: {}, // 特殊专区
195 |       activeName: "all",
196 |       tabs: [
197 |         {
198 |           id: 0,
199 |           name: "all",
200 |           title: "全部"
201 |         },
202 |         {
203 |           id: 1,
204 |           name: "dinner",
205 |           title: "晚餐"
206 |         },
207 |         {
208 |           id: 2,
209 |           name: "popular",
210 |           title: "人气"
211 |         },
212 |         {
213 |           id: 3,
214 |           name: "heart",
215 |           title: "心选"
216 |         }
217 |       ],
218 |       productList: [],
219 |       dropImg: "",
220 |       elLeft: null,
221 |       elTop: null,
222 |       dots: [] // 小球集合
223 |     };
224 |   },
225 |   created() {
226 |     this.getHomeData();
227 |   },
228 |   computed: {
229 |     ...mapState(["userInfo", "addressInfo"])
230 |   },
231 |   methods: {
232 |     ...mapMutations(["ADD_GOODS"]),
233 |     async getHomeData() {
234 |       let res = await this.$http("/api/homeApi");
235 |       this.showLoading = false;
236 |       if (res.data.code !== 0) return;
237 |       const { home_ad, list, special_zone } = res.data.data;
238 |       this.adImg = home_ad.image_url;
239 |       this.swiperList = list[0].icon_list;
240 |       this.tipImg = list[1].image_url;
241 |       this.categoryList = list[2].icon_list.map((item, index) => {
242 |         item.query = index < 9 ? `lk00${index + 1}` : `lk0${index + 1}`;
243 |         return item;
244 |       });
245 |       this.flashFoods = list[3].product_list;
246 |       this.specialZone = special_zone;
247 |       this.productList = list[12].product_list;
248 |       this.flag = true;
249 |     },
250 |     onItemClick(query, index) {
251 |       this.$router.push({ name: "Category", params: { query, index } });
252 |     },
253 |     onVipClick() {
254 |       if (!this.userInfo.token) {
255 |         this.$router.push({ path: "/login" });
256 |       } else {
257 |         this.$router.push({ path: "/mine/myVip" });
258 |       }
259 |     },
260 |     onClick() {
261 |       this.shuffle(this.productList);
262 |     },
263 |     onChange() {
264 |       this.shuffle(this.productList);
265 |     },
266 |     // 数组洗牌
267 |     shuffle(array) {
268 |       let m = array.length,
269 |         t,
270 |         i;
271 |       while (m) {
272 |         i = Math.floor(Math.random() * m--);
273 |         t = array[m];
274 |         array[m] = array[i];
275 |         array[i] = t;
276 |       }
277 |       return array;
278 |     },
279 |     addCart({ id, name, small_image, price }, event) {
280 |       if (!Object.keys(this.userInfo).length) {
281 |         this.$router.push({ path: "/login" });
282 |         return;
283 |       }
284 |       this.ADD_GOODS({ id, name, small_image, price });
285 |       this.dropImg = small_image;
286 |       this.elLeft = event.target.getBoundingClientRect().left;
287 |       this.elTop = event.target.getBoundingClientRect().top;
288 |       this.dots = [...this.dots, true];
289 |     },
290 |     onDotChange(data) {
291 |       this.dots = [...this.dots, data];
292 |     }
293 |   },
294 |   components: {
295 |     Header,
296 |     Limit,
297 |     Special
298 |   }
299 | };
300 | </script>
301 | <style lang='scss' scoped>
302 | .home {
303 |   .category {
304 |     display: flex;
305 |     justify-content: space-around;
306 |     align-items: center;
307 |     flex-wrap: wrap;
308 |     .category-item {
309 |       width: 20%;
310 |       display: flex;
311 |       flex-direction: column;
312 |       align-items: center;
313 |       padding: 16px 8px;
314 |       box-sizing: border-box;
315 |       .item-icon {
316 |         width: 28px;
317 |         height: 28px;
318 |       }
319 |       .item-text {
320 |         margin-top: 8px;
321 |         font-size: 12px;
322 |         color: #7d7e80;
323 |       }
324 |     }
325 |   }
326 |   .vip-panel {
327 |     display: flex;
328 |     justify-content: space-around;
329 |     align-items: center;
330 |     width: 95%;
331 |     margin: 0.5rem auto;
332 |     border-radius: 0.2rem;
333 |     font-size: 12px;
334 |     color: #fff;
335 |     background-color: #3bba63;
336 |   }
337 |   .product-list {
338 |     width: 100%;
339 |     overflow: hidden;
340 |     .product-item {
341 |       width: 48%;
342 |       margin-right: 2%;
343 |       margin-top: 1rem;
344 |       display: inline-block;
345 |       padding: 0 0.5rem;
346 |       box-sizing: border-box;
347 |       .title {
348 |         font-size: 0.625rem;
349 |         padding-left: 0.5rem;
350 |       }
351 |       .spec {
352 |         font-size: 0.45rem;
353 |         padding: 0.5rem 0 0.5rem 0.5rem;
354 |         color: grey;
355 |       }
356 |       .text-overflow {
357 |         white-space: nowrap;
358 |         overflow: hidden;
359 |         text-overflow: ellipsis;
360 |       }
361 |       .price {
362 |         display: flex;
363 |         justify-content: space-between;
364 |         align-items: center;
365 |         .now-price {
366 |           font-size: 0.928rem;
367 |           color: #f37078;
368 |           margin-right: 0.5rem;
369 |         }
370 |         .origin-price {
371 |           font-size: 0.6875rem;
372 |           color: #999;
373 |           text-decoration: line-through;
374 |         }
375 |         .buy-cart {
376 |           width: 1.5rem;
377 |           height: 1.5rem;
378 |         }
379 |       }
380 |     }
381 |   }
382 | }
383 | </style>


--------------------------------------------------------------------------------
/src/views/home/myMap.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="my-map">
  3 |     <van-nav-bar
  4 |       title="选择收货地址"
  5 |       left-arrow
  6 |       right-text="新增地址"
  7 |       @click-left="onClickLeft"
  8 |       @click-right="onClickRight"
  9 |       fixed
 10 |       :z-index="99999"
 11 |     />
 12 |     <div class="map-container">
 13 |       <el-amap-search-box
 14 |         class="search-box"
 15 |         :search-option="searchOption"
 16 |         :on-search-result="onSearchResult"
 17 |       />
 18 |       <el-amap
 19 |         ref="map"
 20 |         vid="amap-demo"
 21 |         :plugin="plugin"
 22 |         :zoom="zoom"
 23 |         :center="center"
 24 |         :events="events"
 25 |       >
 26 |         <el-amap-marker
 27 |           vid="component-marker"
 28 |           :position="makerConf.position"
 29 |           :content="makerConf.content"
 30 |         />
 31 |       </el-amap>
 32 |       <van-cell-group title="我的收货地址" v-if="addressInfo.length">
 33 |         <van-cell @click="onItemClick(addressInfo[0].addressDetail)">
 34 |           <template slot="title">
 35 |             <span>{{addressInfo[0].addressDetail}}</span>
 36 |             <van-tag round type="success" style="margin-left:0.2rem;">默认</van-tag>
 37 |           </template>
 38 |           <template slot="label">
 39 |             <span>{{addressInfo[0].name}} {{addressInfo[0].tel}}</span>
 40 |           </template>
 41 |         </van-cell>
 42 |       </van-cell-group>
 43 |       <template v-if="locationList.length">
 44 |         <van-cell-group title="当前地址">
 45 |           <van-cell
 46 |             :title="locationList[0].name"
 47 |             :label="locationList[0].address"
 48 |             @click="onItemClick(locationList[0].name)"
 49 |           />
 50 |         </van-cell-group>
 51 |         <van-cell-group title="附近地址">
 52 |           <template v-for="item in locationList">
 53 |             <van-cell
 54 |               :key="item.id"
 55 |               :title="item.name"
 56 |               :label="item.address"
 57 |               @click="onItemClick(item.name)"
 58 |             />
 59 |           </template>
 60 |         </van-cell-group>
 61 |       </template>
 62 |     </div>
 63 |     <loading :show="showLoading" />
 64 |   </div>
 65 | </template>
 66 | <script>
 67 | import Vue from "vue";
 68 | import VueAMap from "vue-amap";
 69 | import { mapState } from "vuex";
 70 | Vue.use(VueAMap);
 71 | VueAMap.initAMapApiLoader({
 72 |   // 申请的高德key
 73 |   key: "cde7aa4cab0681d34ddb6916431125b2",
 74 |   // 插件集合所有的
 75 |   plugin: [
 76 |     "AMap.Autocomplete",
 77 |     "AMap.PlaceSearch",
 78 |     "AMap.Scale",
 79 |     "AMap.OverView",
 80 |     "AMap.ToolBar",
 81 |     "AMap.MapType",
 82 |     "AMap.PolyEditor",
 83 |     "AMap.CircleEditor",
 84 |     "AMap.Geolocation"
 85 |   ],
 86 |   uiVersion: "1.0",
 87 |   v: "1.4.4"
 88 | });
 89 | export default {
 90 |   name: "myMap",
 91 |   data() {
 92 |     this.city = this.city || "杭州";
 93 |     return {
 94 |       showLoading: true,
 95 |       locationList: [], // 位置列表
 96 |       zoom: 16,
 97 |       center: ["120.153576", "30.287459"],
 98 |       events: {
 99 |         init: o => {
100 |           o.setCity(this.city, res => {
101 |             if (res && res.length > 0) {
102 |               this.center = res;
103 |               this.makerConf.position = res;
104 |               this.getLocationList(res);
105 |             }
106 |           });
107 |           setTimeout(() => {
108 |             //去掉logo
109 |             document.getElementsByClassName("amap-logo")[0].style.display =
110 |               "none";
111 |             // 去掉版权信息
112 |             document.getElementsByClassName(
113 |               "amap-copyright"
114 |             )[0].style.visibility = "hidden";
115 |             // 隐藏比例尺
116 |             document.getElementsByClassName(
117 |               "amap-scalecontrol"
118 |             )[0].style.visibility = "hidden";
119 |             // 修改定位当前位置
120 |             document.getElementsByClassName(
121 |               "amap-geolocation-con"
122 |             )[0].style.left = "85%";
123 |           }, 50);
124 |         }
125 |       },
126 |       // 标记
127 |       makerConf: {
128 |         position: ["120.153576", "30.287459"],
129 |         content: "杭州"
130 |       },
131 |       searchOption: {
132 |         city: this.city,
133 |         citylimit: true
134 |       },
135 |       plugin: [
136 |         "Scale",
137 |         {
138 |           pName: "Geolocation",
139 |           events: {
140 |             init: o => {
141 |               // 获取当前位置
142 |               o.getCurrentPosition((status, result) => {
143 |                 if (result && result.position) {
144 |                   self.lng = result.position.lng;
145 |                   self.lat = result.position.lat;
146 |                   self.center = [self.lng, self.lat];
147 |                   self.loaded = true;
148 |                   //me.$nextTick();
149 |                 }
150 |               });
151 |             },
152 |             // 定位成功
153 |             complete: result => {
154 |               let address = result.formattedAddress;
155 |               let point = result.position;
156 |               var obj = {
157 |                 address,
158 |                 name: "",
159 |                 location: point
160 |               };
161 |               this.makerConf.position = [point.lng, point.lat];
162 |               //this.getLocationList([point.lng, point.lat]);
163 |             },
164 |             // 错误回调
165 |             error: err => {
166 |               console.log(err);
167 |             }
168 |           }
169 |         }
170 |       ]
171 |     };
172 |   },
173 |   computed: {
174 |     ...mapState(["addressInfo"])
175 |   },
176 |   methods: {
177 |     // 获取位置列表
178 |     getLocationList(options) {
179 |       if (!AMap) return;
180 |       AMap.plugin(["AMap.Geocoder"], () => {
181 |         const geocoder = new AMap.Geocoder({
182 |           radius: 1000,
183 |           extensions: "all"
184 |         });
185 |         const lnglatXY = options || ["120.153576", "30.287459"]; //已知点坐标
186 |         geocoder.getAddress(lnglatXY, (status, res) => {
187 |           this.showLoading = false;
188 |           if (status === "complete" && res.info === "OK") {
189 |             if (res.regeocode && res.regeocode.pois) {
190 |               this.locationList = res.regeocode.pois;
191 |             }
192 |           }
193 |         });
194 |       });
195 |     },
196 |     // 搜索结果
197 |     onSearchResult(result) {
198 |       if (result && result.length > 0) {
199 |         let { lng, lat, name } = result[0];
200 |         this.center = [lng, lat];
201 |         this.makerConf.position = [lng, lat];
202 |         this.makerConf.content = name;
203 |         this.locationList = result;
204 |       }
205 |     },
206 |     onItemClick(name) {
207 |       this.$router.push({ name: "Home", params: { name } });
208 |     },
209 |     onClickRight() {
210 |       this.$router.push({ path: "/mine/addaddress" });
211 |     }
212 |   }
213 | };
214 | </script>
215 | <style lang='scss' scoped>
216 | .my-map {
217 |   padding-top: 90px;
218 |   background-color: #f5f5f5;
219 |   .van-nav-bar {
220 |     .van-nav-bar__text {
221 |       color: #45c763;
222 |     }
223 |   }
224 |   .search-box {
225 |     position: fixed;
226 |     top: 46px;
227 |     margin: 0 10px;
228 |     height: 30px;
229 |     font-size: 0.8rem;
230 |   }
231 | }
232 | </style>


--------------------------------------------------------------------------------
/src/views/layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="layout">
 3 |     <keep-alive>
 4 |       <router-view style="padding-bottom:50px;" v-if="$route.meta.keepAlive" />
 5 |     </keep-alive>
 6 |     <router-view style="padding-bottom:50px;" v-if="!$route.meta.keepAlive" />
 7 |     <van-tabbar
 8 |       v-model="active"
 9 |       active-color="#3bba63"
10 |       inactive-color="#7d7e80"
11 |       route
12 |       safe-area-inset-bottom
13 |     >
14 |       <template v-for="bar in barList">
15 |         <van-tabbar-item
16 |           :key="bar.name"
17 |           :name="bar.name"
18 |           :icon="bar.icon"
19 |           :to="`/dashboard${bar.route}`"
20 |           :info="bar.name === '购物车' ? infoNumber:null"
21 |           :id="bar.name === '购物车'?'buycar':null"
22 |           replace
23 |         >{{bar.name}}</van-tabbar-item>
24 |       </template>
25 |     </van-tabbar>
26 |   </div>
27 | </template>
28 | <script>
29 | import { mapState } from "vuex";
30 | export default {
31 |   name: "layout",
32 |   data() {
33 |     return {
34 |       active: "首页",
35 |       barList: [
36 |         {
37 |           name: "首页",
38 |           icon: "wap-home-o",
39 |           route: "/home"
40 |         },
41 |         {
42 |           name: "分类",
43 |           icon: "search",
44 |           route: "/category"
45 |         },
46 |         {
47 |           name: "吃什么",
48 |           icon: "smile-o",
49 |           route: "/eat"
50 |         },
51 |         {
52 |           name: "购物车",
53 |           icon: "shopping-cart-o",
54 |           route: "/cart"
55 |         },
56 |         {
57 |           name: "我的",
58 |           icon: "user-o",
59 |           route: "/mine"
60 |         }
61 |       ]
62 |     };
63 |   },
64 |   computed: {
65 |     ...mapState(["shopCartInfo"]),
66 |     infoNumber() {
67 |       return Object.keys(this.shopCartInfo).length || null;
68 |     }
69 |   }
70 | };
71 | </script>


--------------------------------------------------------------------------------
/src/views/login/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login">
  3 |     <van-nav-bar title="登录/注册" left-text="取消" @click-left="onClickLeft" :border="false" />
  4 |     <van-cell-group>
  5 |       <van-field v-model="phone" type="tel" placeholder="输入手机号（新号码自动注册）" maxlength="11" clearable />
  6 |       <van-field
  7 |         v-model="code"
  8 |         type="tel"
  9 |         placeholder="输入验证码"
 10 |         maxlength="4"
 11 |         clearable
 12 |         style="padding-right:5px;"
 13 |       >
 14 |         <van-button
 15 |           slot="button"
 16 |           size="small"
 17 |           type="primary"
 18 |           :disabled="codeDisabled"
 19 |           @click="onSendCode"
 20 |         >{{msg}}</van-button>
 21 |       </van-field>
 22 |       <van-button type="primary" class="login-button" round :disabled="disabled" @click="onLogin">登录</van-button>
 23 |     </van-cell-group>
 24 |     <div class="fixed-bottom">
 25 |       <van-divider
 26 |         :style="{ fontSize: '12px',color: 'grey', borderColor: 'grey', padding: '0 16px' }"
 27 |       >第三方账户登录</van-divider>
 28 |       <div class="party-wrap">
 29 |         <div class="wechat element" @click="onPartyLogin">
 30 |           <svg
 31 |             data-v-c1415252
 32 |             t="1571242875453"
 33 |             viewBox="0 0 1024 1024"
 34 |             version="1.1"
 35 |             xmlns="http://www.w3.org/2000/svg"
 36 |             p-id="7519"
 37 |             width="40"
 38 |             height="40"
 39 |             class="icon"
 40 |           >
 41 |             <path
 42 |               data-v-c1415252
 43 |               d="M347.729118 353.0242c-16.487119 0-29.776737 13.389539-29.776737 29.776737S331.241998 412.677596 347.729118 412.677596s29.776737-13.389539 29.776737-29.776737-13.289617-29.876659-29.776737-29.876659zM577.749415 511.800156c-13.689305 0-24.880562 11.091335-24.880563 24.880562 0 13.689305 11.091335 24.880562 24.880563 24.880562 13.689305 0 24.880562-11.191257 24.880562-24.880562s-11.191257-24.880562-24.880562-24.880562zM500.909446 412.677596c16.487119 0 29.776737-13.389539 29.776737-29.776737s-13.389539-29.776737-29.776737-29.776737c-16.487119 0-29.776737 13.389539-29.776737 29.776737s13.289617 29.776737 29.776737 29.776737zM698.455113 511.600312c-13.689305 0-24.880562 11.091335-24.880562 24.880562 0 13.689305 11.091335 24.880562 24.880562 24.880562 13.689305 0 24.880562-11.091335 24.880562-24.880562-0.099922-13.689305-11.191257-24.880562-24.880562-24.880562z"
 44 |               fill="#00C800"
 45 |               p-id="7520"
 46 |             />
 47 |             <path
 48 |               data-v-c1415252
 49 |               d="M511.601093 0.799375C229.12178 0.799375 0.000781 229.820453 0.000781 512.399688s229.021077 511.600312 511.600312 511.600312 511.600312-229.021077 511.600312-511.600312S794.180328 0.799375 511.601093 0.799375z m-90.229508 634.504294c-27.37861 0-49.361436-5.595628-76.839969-10.991413l-76.640125 38.469945 21.882904-65.948477c-54.957065-38.370023-87.73146-87.831382-87.73146-148.084309 0-104.318501 98.722873-186.554254 219.32865-186.554255 107.815769 0 202.34192 65.648712 221.327088 153.979703-6.994536-0.799375-13.989071-1.298985-21.083529-1.298985-104.118657 0-186.454333 77.739266-186.454332 173.564403 0 15.98751 2.498048 31.275566 6.794692 45.964091-6.794692 0.599532-13.689305 0.899297-20.583919 0.899297z m323.547228 76.839969l16.48712 54.757221-60.153006-32.874317c-21.882904 5.495706-43.965652 10.991413-65.848555 10.991413-104.318501 0-186.554254-71.344262-186.554255-159.175644 0-87.631538 82.135831-159.175644 186.554255-159.175644 98.523029 0 186.254489 71.444184 186.254488 159.175644 0.099922 49.461358-32.774395 93.227166-76.740047 126.301327z"
 50 |               fill="#00C800"
 51 |               p-id="7521"
 52 |             />
 53 |           </svg>
 54 |           <span class="text">微信登录</span>
 55 |         </div>
 56 |         <div class="qq element" @click="onPartyLogin">
 57 |           <svg
 58 |             data-v-c1415252
 59 |             t="1571243237084"
 60 |             viewBox="0 0 1024 1024"
 61 |             version="1.1"
 62 |             xmlns="http://www.w3.org/2000/svg"
 63 |             p-id="7750"
 64 |             width="40"
 65 |             height="40"
 66 |             class="icon"
 67 |           >
 68 |             <path
 69 |               data-v-c1415252
 70 |               d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z"
 71 |               fill="#FAAD08"
 72 |               p-id="7751"
 73 |             />
 74 |             <path
 75 |               data-v-c1415252
 76 |               d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z"
 77 |               fill="#FAAD08"
 78 |               p-id="7752"
 79 |             />
 80 |             <path
 81 |               data-v-c1415252
 82 |               d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z"
 83 |               fill="#000000"
 84 |               p-id="7753"
 85 |             />
 86 |             <path
 87 |               data-v-c1415252
 88 |               d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017"
 89 |               fill="#000000"
 90 |               p-id="7754"
 91 |             />
 92 |             <path
 93 |               data-v-c1415252
 94 |               d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453"
 95 |               fill="#FFFFFF"
 96 |               p-id="7755"
 97 |             />
 98 |             <path
 99 |               data-v-c1415252
100 |               d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498"
101 |               fill="#FAAD08"
102 |               p-id="7756"
103 |             />
104 |             <path
105 |               data-v-c1415252
106 |               d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135"
107 |               fill="#000000"
108 |               p-id="7757"
109 |             />
110 |             <path
111 |               data-v-c1415252
112 |               d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927"
113 |               fill="#FFFFFF"
114 |               p-id="7758"
115 |             />
116 |             <path
117 |               data-v-c1415252
118 |               d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574"
119 |               fill="#EB1C26"
120 |               p-id="7759"
121 |             />
122 |             <path
123 |               data-v-c1415252
124 |               d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z"
125 |               fill="#EB1C26"
126 |               p-id="7760"
127 |             />
128 |           </svg>
129 |           <span class="text">QQ登录</span>
130 |         </div>
131 |       </div>
132 |       <p>登录即代表你同意叮咚买菜《服务协议》和《隐私政策》</p>
133 |     </div>
134 |   </div>
135 | </template>
136 | <script>
137 | import { mapActions } from "vuex";
138 | export default {
139 |   name: "login",
140 |   data() {
141 |     return {
142 |       phone: "",
143 |       code: "",
144 |       msg: "获取验证码",
145 |       canSend: true
146 |     };
147 |   },
148 |   computed: {
149 |     codeDisabled() {
150 |       return this.phone.length === 11 && this.canSend ? false : true;
151 |     },
152 |     disabled() {
153 |       return this.phone.length === 11 && this.code.length === 4 ? false : true;
154 |     }
155 |   },
156 |   methods: {
157 |     ...mapActions(["syncUserInfo"]),
158 |     onSendCode() {
159 |       this.canSend = false;
160 |       let count = 60;
161 |       this.timer = setInterval(() => {
162 |         if (count === 0) {
163 |           clearInterval(this.timer);
164 |           this.msg = "重新获取";
165 |           this.canSend = true;
166 |         } else {
167 |           this.msg = `重新获取（${count}s）`;
168 |         }
169 |         count--;
170 |       }, 1000);
171 |       this.$toast("验证码已发送");
172 |     },
173 |     async onLogin() {
174 |       const res = await this.$http.post("/api/login_code", {
175 |         phone: this.phone,
176 |         captcha: this.code
177 |       });
178 |       this.$toast("登录成功");
179 |       this.syncUserInfo(res.data.data);
180 |       this.$router.back();
181 |     },
182 |     onPartyLogin() {
183 |       this.$toast("第三方登录暂未实现");
184 |     }
185 |   },
186 |   beforeDestroy() {
187 |     this.timer && clearInterval(this.timer);
188 |   }
189 | };
190 | </script>
191 | <style lang='scss' scoped>
192 | .login {
193 |   .van-cell-group {
194 |     padding: 0 0.8rem;
195 |     .van-field {
196 |       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
197 |     }
198 |     .login-button {
199 |       width: 100%;
200 |       margin-top: 1rem;
201 |     }
202 |   }
203 |   .fixed-bottom {
204 |     position: fixed;
205 |     bottom: 1rem;
206 |     right: 0;
207 |     left: 0;
208 |     width: 100%;
209 |     text-align: center;
210 |     font-size: 0.8rem;
211 |     color: grey;
212 |     .party-wrap {
213 |       display: flex;
214 |       justify-content: space-around;
215 |       align-items: center;
216 |       width: 80%;
217 |       margin: 0 auto;
218 |     }
219 |     .element {
220 |       display: flex;
221 |       flex-direction: column;
222 |       align-items: center;
223 |       .text {
224 |         margin: 0.5rem 0 1rem 0;
225 |       }
226 |     }
227 |   }
228 | }
229 | </style>


--------------------------------------------------------------------------------
/src/views/mine/address/addAddress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="add-address">
 3 |     <van-nav-bar title="添加地址" left-arrow @click-left="onClickLeft" />
 4 |     <van-address-edit
 5 |       :area-list="areaList"
 6 |       show-postal
 7 |       save-button-text="保存"
 8 |       show-set-default
 9 |       show-search-result
10 |       @save="onSave"
11 |     />
12 |   </div>
13 | </template>
14 | <script>
15 | import areaList from "@/assets/js/area";
16 | import { mapMutations } from "vuex";
17 | export default {
18 |   name: "addAddress",
19 |   data() {
20 |     return {
21 |       areaList
22 |     };
23 |   },
24 |   methods: {
25 |     ...mapMutations(["ADD_ADDRESS"]),
26 |     onSave(address) {
27 |       let id = new Date().getTime().toString();
28 |       address.id = id;
29 |       this.ADD_ADDRESS(address);
30 |       this.$toast("保存成功");
31 |       this.$router.back();
32 |     }
33 |   }
34 | };
35 | </script>
36 | <style lang='scss' scoped>
37 | </style>


--------------------------------------------------------------------------------
/src/views/mine/address/editAddress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="edit-address">
 3 |     <van-nav-bar
 4 |       title="编辑地址"
 5 |       left-arrow
 6 |       right-text="删除"
 7 |       @click-left="onClickLeft"
 8 |       @click-right="onClickRight"
 9 |     />
10 |     <van-address-edit
11 |       :area-list="areaList"
12 |       show-postal
13 |       show-set-default
14 |       save-button-text="保存"
15 |       show-search-result
16 |       :address-info="defaultInfo"
17 |       @save="onSave"
18 |     />
19 |   </div>
20 | </template>
21 | <script>
22 | import areaList from "@/assets/js/area";
23 | import { mapMutations, mapState } from "vuex";
24 | export default {
25 |   name: "edit-address",
26 |   data() {
27 |     return {
28 |       areaList
29 |     };
30 |   },
31 |   created() {
32 |     let len = Object.keys(this.$route.params).length;
33 |     if (!len) {
34 |       this.$router.back();
35 |     }
36 |   },
37 |   computed: {
38 |     ...mapState(["addressInfo"]),
39 |     defaultInfo() {
40 |       let index = this.$route.params.index;
41 |       return this.addressInfo[index];
42 |     }
43 |   },
44 |   methods: {
45 |     ...mapMutations(["EDIT_ADDRESS", "REMOVE_ADDRESS"]),
46 |     onClickRight() {
47 |       this.$dialog
48 |         .confirm({
49 |           message: "确定要删除该地址吗？"
50 |         })
51 |         .then(() => {
52 |           this.REMOVE_ADDRESS(this.defaultInfo.id);
53 |           this.$toast("删除成功");
54 |           this.$router.back();
55 |         })
56 |         .catch(() => {});
57 |     },
58 |     onSave(address) {
59 |       this.EDIT_ADDRESS(address);
60 |       this.$toast("修改成功");
61 |       this.$router.back();
62 |     }
63 |   }
64 | };
65 | </script>
66 | <style lang='scss' scoped>
67 | </style>


--------------------------------------------------------------------------------
/src/views/mine/address/myAddress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="my-address">
 3 |     <van-nav-bar title="我的地址" left-arrow @click-left="onClickLeft" fixed />
 4 |     <template v-if="addressInfo.length">
 5 |       <van-address-list
 6 |         v-model="chosenAddressId"
 7 |         :list="computedList"
 8 |         add-button-text="+ 添加新地址"
 9 |         @add="onAdd"
10 |         @edit="onEdit"
11 |       />
12 |     </template>
13 |     <template v-else>
14 |       <img :src="require('@/assets/img/empty_address.png')" class="empty-img" alt />
15 |       <p class="empty-text">还没有添加过地址呢，添加一个吧😄</p>
16 |       <van-button type="primary" class="add-button" round @click="onAdd">+ 新增地址</van-button>
17 |     </template>
18 |   </div>
19 | </template>
20 | <script>
21 | import { mapState } from "vuex";
22 | import Vue from "vue";
23 | export default {
24 |   name: "myAddress",
25 |   data() {
26 |     return {
27 |       chosenAddressId: null
28 |     }
29 |   },
30 |   computed: {
31 |     ...mapState(["addressInfo"]),
32 |     computedList() {
33 |       return this.addressInfo.map(item => {
34 |         let obj = {
35 |           id: item.id,
36 |           name: item.name,
37 |           tel: item.tel,
38 |           address: `${item.province} ${item.city} ${item.county}`
39 |         };
40 |         return obj;
41 |       });
42 |     },
43 |   },
44 |   methods: {
45 |     onAdd() {
46 |       this.$router.push({ path: "/mine/addaddress" });
47 |     },
48 |     onEdit(item, index) {
49 |       this.$router.push({
50 |         name: "EditAddress",
51 |         params: { index }
52 |       });
53 |     }
54 |   },
55 |   watch: {
56 |     chosenAddressId: {
57 |       handler(val) {
58 |         console.log(val, );
59 |         this.$router.back()
60 |       }
61 |     }
62 |   }
63 | };
64 | </script>
65 | <style lang='scss' scoped>
66 | .my-address {
67 |   display: flex;
68 |   flex-direction: column;
69 |   justify-content: center;
70 |   align-items: center;
71 |   width: 100%;
72 |   height: 100vh;
73 |   position: relative;
74 |   .van-address-list {
75 |     margin-top: 46px;
76 |     width: 100%;
77 |     .van-address-list__add {
78 |       background-color: #3bba63;
79 |       border: 0;
80 |     }
81 |   }
82 |   .empty-img {
83 |     width: 40%;
84 |     height: 20%;
85 |   }
86 |   .empty-text {
87 |     font-size: 0.75rem;
88 |     color: grey;
89 |   }
90 |   .add-button {
91 |     position: fixed;
92 |     bottom: 2rem;
93 |     width: 60%;
94 |   }
95 | }
96 | </style>


--------------------------------------------------------------------------------
/src/views/mine/coupon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="coupon">
 3 |     <van-nav-bar title="我的优惠券" left-arrow @click-left="onClickLeft" />
 4 |     <van-coupon-list
 5 |       :coupons="coupons"
 6 |       :chosen-coupon="chosenCoupon"
 7 |       :disabled-coupons="disabledCoupons"
 8 |       :show-close-button="false"
 9 |       input-placeholder="请输入666兑换码"
10 |       @change="onChange"
11 |       @exchange="onExchange"
12 |     />
13 |   </div>
14 | </template>
15 | <script>
16 | const startAt = new Date().getTime() / 1000;
17 | const endAt = new Date().getTime() / 1000 + 7 * 24 * 60 * 60;
18 | const coupon = {
19 |   available: 1,
20 |   condition: "无使用门槛\n最多优惠1.5元",
21 |   reason: "",
22 |   value: 150,
23 |   name: "优惠券1",
24 |   startAt,
25 |   endAt,
26 |   valueDesc: "1.5",
27 |   unitDesc: "元"
28 | };
29 | const coupon2 = {
30 |   available: 1,
31 |   condition: "无使用门槛\n最多优惠2.0元",
32 |   reason: "",
33 |   value: 150,
34 |   name: "优惠券2",
35 |   startAt,
36 |   endAt,
37 |   valueDesc: "2.0",
38 |   unitDesc: "元"
39 | };
40 | export default {
41 |   name: "coupon",
42 |   data() {
43 |     return {
44 |       chosenCoupon: -1,
45 |       coupons: [coupon, coupon2],
46 |       disabledCoupons: []
47 |     };
48 |   },
49 |   methods: {
50 |     onChange(index) {
51 |       this.chosenCoupon = index;
52 |       this.$toast(`当前选中第${index + 1}张优惠券`);
53 |     },
54 |     onExchange(code) {
55 |       if (code !== "666") {
56 |         this.$toast("兑换码不对哦");
57 |         return;
58 |       }
59 |       this.$toast("兑换成功");
60 |       this.coupons.push(coupon);
61 |     }
62 |   }
63 | };
64 | </script>
65 | <style lang='scss' scoped>
66 | </style>


--------------------------------------------------------------------------------
/src/views/mine/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="mine">
  3 |     <header class="mine-header">
  4 |       <span class="text">我的</span>
  5 |     </header>
  6 |     <van-cell class="mine-info" is-link @click="onMineClick">
  7 |       <!-- 使用 title 插槽来自定义标题 -->
  8 |       <template slot="title">
  9 |         <div class="slot-content">
 10 |           <template v-if="!userInfo.token">
 11 |             <img :src="require('@/assets/img/default_grey.jpg')" class="slot-img" alt />
 12 |             <span>立即登录</span>
 13 |           </template>
 14 |           <template v-else>
 15 |             <img :src="require('@/assets/img/avatar.jpg')" class="slot-img" alt />
 16 |             <div class="slot-middle">
 17 |               <span>{{userInfo.user_name}}</span>
 18 |               <span>手机号：{{phoneNumber}}</span>
 19 |             </div>
 20 |           </template>
 21 |         </div>
 22 |       </template>
 23 |     </van-cell>
 24 |     <van-cell title="我的订单" icon="label" color="red" is-link value="查看全部订单" @click="getOrder(-1)" />
 25 |     <van-grid>
 26 |       <van-grid-item
 27 |         v-for="(item,index) in itemList"
 28 |         :key="item.text"
 29 |         :icon="item.icon"
 30 |         :text="item.text"
 31 |         @click="getOrder(index)"
 32 |       />
 33 |     </van-grid>
 34 |     <van-cell-group>
 35 |       <van-cell
 36 |         title="我的优惠券"
 37 |         icon="gold-coin"
 38 |         is-link
 39 |         value="2张"
 40 |         @click="checkClick('/mine/coupons')"
 41 |       />
 42 |       <van-cell title="我的收货地址" icon="todo-list" is-link @click="checkClick('/mine/myaddress')" />
 43 |       <van-cell icon="vip-card" is-link @click="checkClick('/mine/myVip')">
 44 |         <template slot="title">
 45 |           <span class="custom-title" style="margin-right:5px;">我的绿卡</span>
 46 |           <van-tag type="danger" round>new</van-tag>
 47 |         </template>
 48 |       </van-cell>
 49 |       <van-cell title="联系客服" icon="phone" is-link value="客服时间 09:00-21:00" @click="onPhoneClick" />
 50 |       <van-cell title="意见反馈" icon="comment" is-link @click="onCommentClick" />
 51 |     </van-cell-group>
 52 |     <div class="version">当前版本1.0.0</div>
 53 |   </div>
 54 | </template>
 55 | <script>
 56 | import { mapState } from "vuex";
 57 | export default {
 58 |   name: "mine",
 59 |   data() {
 60 |     return {
 61 |       itemList: [
 62 |         {
 63 |           text: "待支付",
 64 |           icon: "cart-circle-o"
 65 |         },
 66 |         {
 67 |           text: "待收货",
 68 |           icon: "point-gift-o"
 69 |         },
 70 |         {
 71 |           text: "待评价",
 72 |           icon: "smile-comment-o"
 73 |         },
 74 |         {
 75 |           text: "售后/退款",
 76 |           icon: "cash-back-record"
 77 |         }
 78 |       ]
 79 |     };
 80 |   },
 81 |   computed: {
 82 |     ...mapState(["userInfo"]),
 83 |     phoneNumber() {
 84 |       // 设置隐藏手机号中间四位
 85 |       var mobile = String(this.userInfo.phone);
 86 |       var reg = /^(\d{3})\d{4}(\d{4})$/;
 87 |       return mobile.replace(reg, "$1****$2");
 88 |     }
 89 |   },
 90 |   methods: {
 91 |     onMineClick() {
 92 |       if (this.userInfo.token) {
 93 |         this.$router.push({ path: "/mine/profile" });
 94 |       } else {
 95 |         this.$router.push({ path: "/login" });
 96 |       }
 97 |     },
 98 |     getOrder(index) {
 99 |       if (!this.userInfo.token) {
100 |         this.$router.push({ path: "/login" });
101 |         return;
102 |       }
103 |       if (index === -1) {
104 |         this.$router.push({ path: "/mine/order" });
105 |       }
106 |       if (index === 3) {
107 |         this.$toast("等待实现~");
108 |         return;
109 |       }
110 |       this.$router.push({
111 |         name: "Order",
112 |         params: { activeIndex: index + 1 }
113 |       });
114 |     },
115 |     checkClick(path) {
116 |       if (!this.userInfo.token) {
117 |         this.$router.push({ path: "/login" });
118 |         return;
119 |       }
120 |       this.$router.push({ path });
121 |     },
122 |     onPhoneClick() {
123 |       this.$toast("客服小姐姐还没上班~");
124 |     },
125 |     onCommentClick() {
126 |       this.$dialog.alert({
127 |         message: "移动端vue + vant学习项目 哈哈哈哈~"
128 |       });
129 |     }
130 |   }
131 | };
132 | </script>
133 | <style lang='scss' scoped>
134 | .mine {
135 |   .default-img {
136 |     width: 3.5rem;
137 |     border-radius: 50%;
138 |     margin-right: 0.8rem;
139 |   }
140 |   .mine-header {
141 |     line-height: 2.5rem;
142 |     text-align: center;
143 |     color: #fff;
144 |     background-color: #3bba63;
145 |   }
146 |   .mine-info {
147 |     background-color: #3bba63;
148 |     align-items: center;
149 |     .slot-content {
150 |       display: flex;
151 |       align-items: center;
152 |       color: #fff;
153 |       .slot-img {
154 |         width: 3.5rem;
155 |         border-radius: 50%;
156 |         margin-right: 0.8rem;
157 |       }
158 |       .slot-middle {
159 |         display: flex;
160 |         flex-direction: column;
161 |       }
162 |     }
163 |     .van-cell__right-icon {
164 |       color: #fff !important;
165 |     }
166 |   }
167 |   .van-cell__left-icon {
168 |     font-size: 1.2rem;
169 |     color: #45c763;
170 |   }
171 |   .version {
172 |     font-size: 0.75rem;
173 |     line-height: 2rem;
174 |     text-align: center;
175 |     color: grey;
176 |   }
177 | }
178 | </style>


--------------------------------------------------------------------------------
/src/views/mine/order.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="order">
 3 |     <van-nav-bar title="我的订单" left-arrow @click-left="onClickLeft" />
 4 |     <van-tabs
 5 |       v-model="active"
 6 |       animated
 7 |       swipeable
 8 |       sticky
 9 |       color="#3bba63"
10 |       title-active-color="#3bba63"
11 |       title-inactive-color="#7d7e80"
12 |     >
13 |       <van-tab v-for="item in orderTabs" :key="item.id" :title="item.title">
14 |         <template v-if="orderList.length">111</template>
15 |         <template v-else>
16 |           <div class="empty-wrap">
17 |             <img :src="require('@/assets/img/empty_order.jpg')" class="empty-img" alt />
18 |             <span class="empty-text">{{item.emptyText}}</span>
19 |           </div>
20 |         </template>
21 |       </van-tab>
22 |     </van-tabs>
23 |   </div>
24 | </template>
25 | <script>
26 | export default {
27 |   name: "order",
28 |   data() {
29 |     const activeIndex = +this.$route.params.activeIndex || 0;
30 |     return {
31 |       active: activeIndex,
32 |       orderTabs: [
33 |         {
34 |           id: 0,
35 |           title: "全部",
36 |           emptyText: "暂时还没有相关订单"
37 |         },
38 |         {
39 |           id: 1,
40 |           title: "待支付",
41 |           emptyText: "暂时还没有待支付订单"
42 |         },
43 |         {
44 |           id: 2,
45 |           title: "待收货",
46 |           emptyText: "暂时还没有待收货订单"
47 |         },
48 |         {
49 |           id: 3,
50 |           title: "待评价",
51 |           emptyText: "暂时还没有待评价订单"
52 |         }
53 |       ],
54 |       orderList: []
55 |     };
56 |   },
57 |   created() {},
58 |   methods: {}
59 | };
60 | </script>
61 | <style lang='scss' scoped>
62 | .order {
63 |   .empty-wrap {
64 |     display: flex;
65 |     flex-direction: column;
66 |     justify-content: center;
67 |     align-items: center;
68 |     min-height: 20rem;
69 |     .empty-img {
70 |       width: 60%;
71 |       height: 60%;
72 |     }
73 |     .empty-text {
74 |       font-size: 0.75rem;
75 |       color: grey;
76 |     }
77 |   }
78 | }
79 | </style>


--------------------------------------------------------------------------------
/src/views/mine/profile/changeName.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="change-name">
 3 |     <van-nav-bar
 4 |       title="修改昵称"
 5 |       right-text="保存"
 6 |       left-arrow
 7 |       @click-left="onClickLeft"
 8 |       @click-right="onClickRight"
 9 |       :class="{'nav-active':userInfo.user_name}"
10 |     />
11 |     <p class="tip">请输入新昵称，30天内限修改1次</p>
12 |     <van-field v-model="userInfo.user_name" placeholder="请输入新昵称" clearable />
13 |   </div>
14 | </template>
15 | <script>
16 | import { mapState, mapMutations } from "vuex";
17 | export default {
18 |   name: "changeName",
19 |   computed: {
20 |     ...mapState(["userInfo"])
21 |   },
22 |   methods: {
23 |     ...mapMutations(['CHANGE_USER_NAME']),
24 |     onClickRight() {
25 |       if (!this.userInfo.user_name) return;
26 |       this.CHANGE_USER_NAME(this.userInfo.user_name);
27 |       this.$router.back();
28 |     }
29 |   }
30 | };
31 | </script>
32 | <style lang='scss' scoped>
33 | .change-name {
34 |   background-color: #f2f2f2;
35 |   .van-nav-bar__text {
36 |     color: grey;
37 |   }
38 |   .tip {
39 |     margin: 10px 16px;
40 |     font-size: 0.8rem;
41 |     color: rgba(0, 0, 0, 0.5);
42 |   }
43 |   .van-field {
44 |     border-top: 1px solid rgba(0, 0, 0, 0.1);
45 |     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
46 |   }
47 |   .nav-active {
48 |     .van-nav-bar__text {
49 |       color: #3bba63;
50 |     }
51 |   }
52 | }
53 | </style>


--------------------------------------------------------------------------------
/src/views/mine/profile/profile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="profile">
  3 |     <van-nav-bar title="个人资料" left-arrow @click-left="onClickLeft" />
  4 |     <van-cell-group>
  5 |       <van-cell title="头像" style="align-items:center;" is-link>
  6 |         <template slot="right-icon">
  7 |           <img
  8 |             :src="require('@/assets/img/avatar.jpg')"
  9 |             style="width:2.5rem;border-radius:50%;"
 10 |             alt
 11 |           />
 12 |         </template>
 13 |       </van-cell>
 14 |       <van-cell title="昵称" :value="userInfo.user_name" is-link to="/profile/changeName" />
 15 |       <van-cell title="性别" :value="userInfo.sex||'未填写'" is-link @click="onSexClick" />
 16 |       <van-cell title="生日" :value="userInfo.birth_day||'未填写'" is-link @click="onDateClick" />
 17 |       <van-cell title="手机号" :value="phoneNumber" is-link />
 18 |     </van-cell-group>
 19 |     <div class="button-wrap" @click="onLogOut">
 20 |       <van-button type="primary" round>退出登录</van-button>
 21 |     </div>
 22 |     <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
 23 |     <van-action-sheet v-model="dateShow">
 24 |       <van-datetime-picker
 25 |         type="date"
 26 |         :min-date="minDate"
 27 |         :formatter="formatter"
 28 |         title="我的生日"
 29 |         @confirm="handleConfirm"
 30 |         @cancel="handleCancel"
 31 |       />
 32 |     </van-action-sheet>
 33 |   </div>
 34 | </template>
 35 | <script>
 36 | import { mapMutations, mapState } from "vuex";
 37 | export default {
 38 |   name: "profile",
 39 |   data() {
 40 |     return {
 41 |       show: false,
 42 |       actions: [
 43 |         {
 44 |           name: "女"
 45 |         },
 46 |         {
 47 |           name: "男"
 48 |         }
 49 |       ],
 50 |       dateShow: false,
 51 |       minDate: new Date("1989,01,01"),
 52 |     };
 53 |   },
 54 |   computed: {
 55 |     ...mapState(["userInfo"]),
 56 |     phoneNumber() {
 57 |       // 设置隐藏手机号中间四位
 58 |       let mobile = String(this.userInfo.phone);
 59 |       let reg = /^(\d{3})\d{4}(\d{4})$/;
 60 |       return mobile.replace(reg, "$1****$2");
 61 |     }
 62 |   },
 63 |   methods: {
 64 |     ...mapMutations(["CHANGE_SEX", "CHANGE_BIRTHDAY", "LOG_OUT"]),
 65 |     onSexClick() {
 66 |       this.show = true;
 67 |     },
 68 |     onDateClick() {
 69 |       this.dateShow = true;
 70 |     },
 71 |     onSelect({ name }) {
 72 |       this.show = false;
 73 |       this.CHANGE_SEX(name);
 74 |     },
 75 |     formatter(type, value) {
 76 |       if (type === "year") {
 77 |         return `${value}年`;
 78 |       } else if (type === "month") {
 79 |         return `${value}月`;
 80 |       } else if (type === "day") {
 81 |         return `${value}日`;
 82 |       }
 83 |     },
 84 |     handleConfirm(value) {
 85 |       this.dateShow = false;
 86 |       let birthDay = this.format(value, "yyyy-MM-dd");
 87 |       this.CHANGE_BIRTHDAY(birthDay);
 88 |     },
 89 |     handleCancel() {
 90 |       this.dateShow = false;
 91 |     },
 92 |     onLogOut() {
 93 |       this.$dialog
 94 |         .confirm({
 95 |           message: "确定退出登录吗？"
 96 |         })
 97 |         .then(() => {
 98 |           this.LOG_OUT();
 99 |           this.$toast("退出成功");
100 |           this.$router.back();
101 |         })
102 |         .catch(() => {});
103 |     }
104 |   }
105 | };
106 | </script>
107 | <style lang='scss' scoped>
108 | .profile {
109 |   .button-wrap {
110 |     width: 100%;
111 |     margin-top: 4rem;
112 |     text-align: center;
113 |     .van-button {
114 |       width: 60%;
115 |     }
116 |   }
117 | }
118 | </style>


--------------------------------------------------------------------------------
/src/views/mine/vip/payVip.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="pay-vip">
  3 |     <van-nav-bar title="开通绿卡" left-arrow :border="false" @click-left="onClickLeft" />
  4 |     <div class="avatar">
  5 |       <img :src="require('@/assets/img/avatar.jpg')" class="icon" alt="">
  6 |       <div class="text">
  7 |         <span>{{userInfo.user_name}}</span>
  8 |         <span style="font-size:0.8rem;">绿卡暂未开通</span>
  9 |       </div>
 10 |     </div>
 11 |     <p class="top-tip">开通绿卡享三大权益,预计每单省6.66元</p>
 12 |     <van-grid>
 13 |       <van-grid-item icon="vip-card-o" text="专享券" />
 14 |       <van-grid-item icon="discount" text="专享特权" />
 15 |       <van-grid-item icon="gem-o" text="2倍积分" />
 16 |     </van-grid>
 17 |     <van-radio-group v-model="radio" @change="onChange">
 18 |       <div class="type-list">
 19 |         <div
 20 |           v-for="item in typeList"
 21 |           :key="item.type"
 22 |           class="type-item"
 23 |           :class="{'type-item-checked':item.type === radio}"
 24 |         >
 25 |           <span class="discount">{{item.discount}}</span>
 26 |           <div style="position:relative;">
 27 |             <span class="title">{{item.title}}</span>
 28 |             <van-radio :name="item.type" icon-size="16" checked-color="#07c160" />
 29 |           </div>
 30 |           <span class="money">相当于约{{item.money}}元/天</span>
 31 |           <div>
 32 |             <span class="price">￥{{item.price}}</span>
 33 |             <span class="origin-price">￥{{item.origin_price}}</span>
 34 |           </div>
 35 |         </div>
 36 |       </div>
 37 |     </van-radio-group>
 38 |     <van-radio-group v-model="radio2" @change="onChange">
 39 |       <van-cell-group title="支付方式">
 40 |         <van-cell v-for="item in payList" :key="item.type">
 41 |           <template slot="title">
 42 |             <img :src="require(`@/assets/img/${item.icon}.png`)" class="icon" alt />
 43 |             <span class="text">{{item.text}}</span>
 44 |           </template>
 45 |           <template slot="right-icon">
 46 |             <van-radio :name="item.type" checked-color="#07c160" />
 47 |           </template>
 48 |         </van-cell>
 49 |       </van-cell-group>
 50 |     </van-radio-group>
 51 |     <van-button type="primary" round class="pay-button" @click="onPay">立即支付</van-button>
 52 |   </div>
 53 | </template>
 54 | <script>
 55 | import {mapState} from 'vuex';
 56 | export default {
 57 |   name: "payVip",
 58 |   data() {
 59 |     return {
 60 |       typeList: [
 61 |         {
 62 |           type: "year",
 63 |           discount: "5折",
 64 |           title: "年卡·365天",
 65 |           money: 0.24,
 66 |           price: 88,
 67 |           origin_price: 188
 68 |         },
 69 |         {
 70 |           type: "season",
 71 |           discount: "7折",
 72 |           title: "季卡·90天",
 73 |           money: 0.33,
 74 |           price: 30,
 75 |           origin_price: 45
 76 |         }
 77 |       ],
 78 |       payList: [
 79 |         {
 80 |           type: "wechat",
 81 |           icon: "wx",
 82 |           text: "微信支付",
 83 |           checked: true
 84 |         },
 85 |         {
 86 |           type: "alipay",
 87 |           icon: "ali",
 88 |           text: "支付宝支付",
 89 |           checked: false
 90 |         },
 91 |         {
 92 |           type: "huabei",
 93 |           icon: "hb",
 94 |           text: "花呗支付",
 95 |           checked: false
 96 |         }
 97 |       ],
 98 |       radio: "year",
 99 |       radio2: "wechat"
100 |     };
101 |   },
102 |   computed: {
103 |     ...mapState(['userInfo'])
104 |   },
105 |   methods: {
106 |     onChange(val) {
107 |       console.log(val);
108 |     },
109 |     onPay() {
110 |       this.$toast("支付成功");
111 |     }
112 |   }
113 | };
114 | </script>
115 | <style lang='scss' scoped>
116 | .pay-vip {
117 |   .van-nav-bar {
118 |     background-color: #303747;
119 |     .van-nav-bar__left {
120 |       .van-icon {
121 |         color: #fff;
122 |       }
123 |     }
124 |     .van-nav-bar__title {
125 |       color: #fff;
126 |     }
127 |   }
128 |   .avatar {
129 |     display: flex;
130 |     align-items: center;
131 |     background-color:#303747;
132 |     padding-left: 1rem;
133 |     padding-bottom: 1rem;
134 |     .icon {
135 |       width: 2.4rem;
136 |       border-radius: 50%;
137 |       margin-right:0.5rem;
138 |     }
139 |     .text {
140 |       display: flex;
141 |       flex-direction: column;
142 |       font-size: 0.9375rem;
143 |       line-height: 1.3;
144 |       color:#fff;
145 |     }
146 |   }
147 |   .top-tip {
148 |     margin: 1rem 0;
149 |     font-size: 0.9375rem;
150 |     font-weight: bolder;
151 |     text-align: center;
152 |   }
153 |   .van-grid {
154 |     justify-content: space-around;
155 |     color: rgb(96, 184, 106);
156 |   }
157 |   .type-list {
158 |     display: flex;
159 |     align-items: center;
160 |     .type-item {
161 |       width: 35%;
162 |       margin-left: 1rem;
163 |       padding-bottom: 1rem;
164 |       border-radius: 0.5rem;
165 |       background-color: #f5f5f5;
166 |       display: flex;
167 |       flex-direction: column;
168 |       .van-radio {
169 |         position: absolute;
170 |         top: 0;
171 |         right: 1rem;
172 |       }
173 |       .discount {
174 |         width: 2rem;
175 |         padding: 0.2rem;
176 |         border-radius: 0.5rem 0.2rem 0.2rem 0;
177 |         background-color: #ed504a;
178 |         color: #fff;
179 |         box-sizing: border-box;
180 |       }
181 |       .title {
182 |         margin-top: 0.2rem;
183 |         padding-left: 0.5rem;
184 |         font-size: 0.9375rem;
185 |         color: #000;
186 |       }
187 |       .money {
188 |         margin-bottom: 1.2rem;
189 |         margin-top: 0.4rem;
190 |         padding-left: 0.5rem;
191 |         font-size: 0.8rem;
192 |         color: grey;
193 |       }
194 |       .price {
195 |         padding: 0 0.5rem;
196 |         font-size: 1.5rem;
197 |         color: #60b86a;
198 |       }
199 |       .origin-price {
200 |         font-size: 0.8rem;
201 |         color: grey;
202 |         text-decoration: line-through;
203 |       }
204 |     }
205 |     .type-item-checked {
206 |       background-color: #ecfef0;
207 |     }
208 |   }
209 |   .van-cell-group {
210 |     .van-cell__title {
211 |       .icon {
212 |         width: 1.5rem;
213 |         margin-right: 0.5rem;
214 |       }
215 |     }
216 |   }
217 |   .pay-button {
218 |     position: fixed;
219 |     bottom: 1rem;
220 |     right: 2%;
221 |     left: 2%;
222 |     width: 96%;
223 |   }
224 | }
225 | </style>


--------------------------------------------------------------------------------
/src/views/mine/vip/vip.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vip">
  3 |     <template v-if="!showLoading">
  4 |       <van-nav-bar title="绿卡" left-arrow :border="false" @click-left="onClickLeft" fixed />
  5 |       <div class="vip-header">
  6 |         <img :src="banner" alt />
  7 |       </div>
  8 |       <div class="vip-privilege">
  9 |         <span class="title">绿卡特权</span>
 10 |         <van-grid :border="false">
 11 |           <van-grid-item icon="vip-card-o" text="专项券" />
 12 |           <van-grid-item icon="discount" text="专项特权" />
 13 |           <van-grid-item icon="gem-o" text="2倍积分" />
 14 |           <van-grid-item icon="more-o" text="更多特权" />
 15 |         </van-grid>
 16 |       </div>
 17 |       <van-button class="open-button" round @click="getPay">5折开通绿卡</van-button>
 18 |       <div class="coupon-floor">
 19 |         <div class="floor-title">
 20 |           <span class="number">1</span>
 21 |           <span class="desc">绿卡专享券 天天领取优惠</span>
 22 |         </div>
 23 |         <div class="ticket-wrap">
 24 |           <span class="ticket-title">
 25 |             今日专享券
 26 |             <span style="padding-left:0.4rem;color:grey;">{{todayTicket.notice}}</span>
 27 |           </span>
 28 |           <div class="ticket-list">
 29 |             <div v-for="item in todayTicket.tickets" :key="item.id" class="ticket-item">
 30 |               <div class="item-left">
 31 |                 <span class="money">
 32 |                   ￥
 33 |                   <span style="font-size:1.8rem;">{{item.money}}</span>
 34 |                 </span>
 35 |                 <span class="tip">满{{item.pay_min}}元使用</span>
 36 |                 <span class="desc">{{item.description}}</span>
 37 |               </div>
 38 |               <div class="item-right">立即领取</div>
 39 |             </div>
 40 |           </div>
 41 |         </div>
 42 |         <div class="ticket-wrap">
 43 |           <span class="ticket-title">
 44 |             本周专享券
 45 |             <span style="padding-left:0.4rem;color:grey;">{{weekTicket.notice}}</span>
 46 |           </span>
 47 |           <div class="ticket-list">
 48 |             <div v-for="item in weekTicket.tickets" :key="item.id" class="ticket-item">
 49 |               <div class="item-left">
 50 |                 <span class="money">
 51 |                   ￥
 52 |                   <span style="font-size:1.6rem;">{{item.money}}</span>
 53 |                 </span>
 54 |                 <span class="tip">满{{item.pay_min}}元使用</span>
 55 |                 <span class="desc">{{item.description}}</span>
 56 |               </div>
 57 |               <div class="item-right">立即领取</div>
 58 |             </div>
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 |       <div class="coupon-floor" ref="scrollFloor">
 63 |         <div class="floor-title">
 64 |           <span class="number">2</span>
 65 |           <span class="desc">绿卡专享券 天天领取优惠</span>
 66 |         </div>
 67 |         <van-button class="open-button" round style="margin-top:1rem;" @click="getPay">立即开启积分加速</van-button>
 68 |       </div>
 69 |       <div class="coupon-floor">
 70 |         <div class="floor-title">
 71 |           <span class="number">3</span>
 72 |           <span class="desc">绿卡专享特价</span>
 73 |         </div>
 74 |         <div v-for="cate in cateList" :key="cate.id" class="cate-item">
 75 |           <img :src="cate.small_image" class="cate-img" alt />
 76 |           <div class="cate-content">
 77 |             <span class="name">{{cate.name}}</span>
 78 |             <span class="spec">{{cate.spec}}</span>
 79 |             <div class="price-wrap">
 80 |               <div class="price">
 81 |                 <p class="origin-price">￥{{cate.origin_price}}</p>
 82 |                 <p class="now-price">
 83 |                   ￥{{cate.price}}
 84 |                   <span class="label">绿卡价格</span>
 85 |                 </p>
 86 |               </div>
 87 |               <div class="cart">
 88 |                 <svg data-v-dd2b8fe2 viewBox="0 0 52 52" class="icon iconCart">
 89 |                   <defs data-v-dd2b8fe2>
 90 |                     <radialGradient
 91 |                       data-v-dd2b8fe2
 92 |                       cx="27.0288363%"
 93 |                       cy="10.3693483%"
 94 |                       fx="27.0288363%"
 95 |                       fy="10.3693483%"
 96 |                       r="93.8427229%"
 97 |                       id="radialGradient-1"
 98 |                     >
 99 |                       <stop data-v-dd2b8fe2 stop-color="#d7d7d7" offset="0%" />
100 |                       <stop data-v-dd2b8fe2 stop-color="#d7d7d7" offset="100%" />
101 |                     </radialGradient>
102 |                   </defs>
103 |                   <g
104 |                     data-v-dd2b8fe2
105 |                     stroke="none"
106 |                     stroke-width="1"
107 |                     fill="none"
108 |                     fill-rule="evenodd"
109 |                   >
110 |                     <g data-v-dd2b8fe2 transform="translate(-678.000000, -2742.000000)">
111 |                       <g data-v-dd2b8fe2 transform="translate(678.000000, 2742.000000)">
112 |                         <rect
113 |                           data-v-dd2b8fe2
114 |                           fill="url(#radialGradient-1)"
115 |                           x="0"
116 |                           y="0"
117 |                           width="51.8699976"
118 |                           height="51.8699976"
119 |                           rx="25.9349988"
120 |                         />
121 |                         <path
122 |                           data-v-dd2b8fe2
123 |                           fill="#FFFFFF"
124 |                           d="M20.3666667,39 C19.1700497,39 18.2,38.0299503 18.2,36.8333333 C18.2,35.6367164 19.1700497,34.6666667 20.3666667,34.6666667 C21.5632836,34.6666667 22.5333333,35.6367164 22.5333333,36.8333333 C22.5333333,38.0299503 21.5632836,39 20.3666667,39 Z M33.3666667,38.1333333 C32.1700497,38.1333333 31.2,37.1632836 31.2,35.9666667 C31.2,34.7700497 32.1700497,33.8 33.3666667,33.8 C34.5632836,33.8 35.5333333,34.7700497 35.5333333,35.9666667 C35.5333333,37.1632836 34.5632836,38.1333333 33.3666667,38.1333333 Z"
125 |                         />
126 |                         <path
127 |                           data-v-dd2b8fe2
128 |                           stroke="#FFFFFF"
129 |                           stroke-width="2.6"
130 |                           stroke-linecap="round"
131 |                           d="M12.1333333,13.8666667 L13.6768756,13.8666667 C15.4621209,13.8666667 16.9554584,15.222463 17.1274221,16.9994069 L18.2224287,28.314386 C18.4068512,30.2200702 20.1012175,31.6154285 22.0069016,31.431006 C22.0111286,31.4305969 22.0153548,31.4301801 22.0195802,31.4297555 L33.2997819,30.296256 C34.7947282,30.1460352 36.0227397,29.0499108 36.3411182,27.581556 L37.8958814,20.4110205 C38.0987345,19.4754663 37.5047629,18.5526049 36.5692087,18.3497518 C36.3853963,18.3098964 36.1963225,18.3002236 36.0094025,18.3211126 L22.8968424,19.7864909"
132 |                         />
133 |                       </g>
134 |                     </g>
135 |                   </g>
136 |                 </svg>
137 |               </div>
138 |             </div>
139 |           </div>
140 |         </div>
141 |         <p class="bottom-tip">更多特权敬请期待...</p>
142 |       </div>
143 |       <div style="height:4rem;"></div>
144 |       <div class="button-fixed" v-show="showButton">
145 |         <div class="fixed-left">
146 |           <span>年卡</span>
147 |           <span class="now-price">88元</span>
148 |           <span class="origin-price">180元</span>
149 |         </div>
150 |         <div class="fixed-right" @click="getPay">开通绿卡</div>
151 |       </div>
152 |     </template>
153 |     <div class="loading-wrap">
154 |       <van-loading color="#3bba63" />
155 |     </div>
156 |   </div>
157 | </template>
158 | <script>
159 | export default {
160 |   name: "vip",
161 |   data() {
162 |     return {
163 |       showLoading: true,
164 |       banner: "",
165 |       todayTicket: {},
166 |       weekTicket: {},
167 |       cateList: [],
168 |       showButton: false,
169 |       scrollTop: 0
170 |     };
171 |   },
172 |   created() {
173 |     this.getData();
174 |   },
175 |   methods: {
176 |     async getData() {
177 |       let res = await this.$http("/api/vip");
178 |       if (res.data.code === 0) {
179 |         const {
180 |           load_banner,
181 |           today_ticket,
182 |           week_ticket,
183 |           cate_detail
184 |         } = res.data.data;
185 |         this.banner = load_banner;
186 |         this.todayTicket = today_ticket;
187 |         this.weekTicket = week_ticket;
188 |         this.cateList = cate_detail;
189 |         this.showLoading = false;
190 |       }
191 |     },
192 |     getPay() {
193 |       this.$router.push({ path: "/mine/myVip/pay" });
194 |     },
195 |     scrollToTop() {
196 |       let scrollTop =
197 |         document.documentElement.scrollTop ||
198 |         window.pageYOffset ||
199 |         document.body.scrollTop;
200 |       let validTop =
201 |         this.$refs.scrollFloor &&
202 |         this.$refs.scrollFloor.getBoundingClientRect().top;
203 |       this.showButton = scrollTop > validTop ? true : false;
204 |     }
205 |   },
206 |   mounted() {
207 |     this.$nextTick(() => {
208 |       window.addEventListener("scroll", this.scrollToTop);
209 |     });
210 |   },
211 |   beforeDestroy() {
212 |     window.removeEventListener("scroll", this.scrollToTop);
213 |   }
214 | };
215 | </script>
216 | <style lang='scss' scoped>
217 | .vip {
218 |   .van-nav-bar {
219 |     background-color: #303747;
220 |     .van-nav-bar__left {
221 |       .van-icon {
222 |         color: #fff;
223 |       }
224 |     }
225 |     .van-nav-bar__title {
226 |       color: #fff;
227 |     }
228 |   }
229 |   .vip-header {
230 |     margin-top: 46px;
231 |   }
232 |   .vip-privilege {
233 |     .title {
234 |       padding-left: 1rem;
235 |       font-size: 1.2rem;
236 |       color: #000;
237 |       font-weight: bolder;
238 |     }
239 |   }
240 |   .open-button {
241 |     width: 60%;
242 |     margin: 0 20%;
243 |     height: 2.8rem;
244 |     line-height: 2.8rem;
245 |     text-align: center;
246 |     background-color: #303747;
247 |     color: #5fa85f;
248 |     font-weight: bolder;
249 |   }
250 |   .coupon-floor {
251 |     margin-top: 2rem;
252 |     padding: 1rem;
253 |     .floor-title {
254 |       display: flex;
255 |       align-items: center;
256 |       .number {
257 |         width: 1.5rem;
258 |         height: 1.5rem;
259 |         line-height: 1.5rem;
260 |         text-align: center;
261 |         border-radius: 0.1rem;
262 |         color: #fff;
263 |         background-color: #60b86a;
264 |       }
265 |       .desc {
266 |         margin-left: 0.5rem;
267 |         font-size: 1.2rem;
268 |         font-weight: bolder;
269 |       }
270 |     }
271 |     .ticket-wrap {
272 |       width: 100%;
273 |       overflow: hidden;
274 |       .ticket-title {
275 |         display: inline-block;
276 |         margin-top: 0.8rem;
277 |         font-size: 0.75rem;
278 |       }
279 |       .ticket-list {
280 |         display: flex;
281 |         flex-wrap: wrap;
282 |         .ticket-item {
283 |           width: 45%;
284 |           border-top: 1px solid #60b86a;
285 |           border-right: 1px solid #60b86a;
286 |           border-bottom: 1px solid #60b86a;
287 |           border-left: 2px dashed #60b86a;
288 |           border-radius: 0 2px 2px 0;
289 |           margin-top: 0.8rem;
290 |           margin-right: 5%;
291 |           position: relative;
292 |           box-sizing: border-box;
293 |           .item-left {
294 |             display: flex;
295 |             flex-direction: column;
296 |             margin: 0.3rem 1.2rem 0.3rem 0.3rem;
297 |             font-size: 0.75rem;
298 |             color: #60b86a;
299 |             .tip {
300 |               margin: 0.3rem 0;
301 |               color: #565656;
302 |             }
303 |             .desc {
304 |               word-break: break-all;
305 |               display: -webkit-box;
306 |               overflow: hidden;
307 |               text-overflow: ellipsis;
308 |               -webkit-line-clamp: 1;
309 |               -webkit-box-orient: vertical;
310 |             }
311 |           }
312 |           .item-right {
313 |             position: absolute;
314 |             top: 0;
315 |             right: 0;
316 |             bottom: 0;
317 |             width: 1.4rem;
318 |             line-height: 1.5rem;
319 |             text-align: center;
320 |             writing-mode: vertical-rl;
321 |             font-size: 0.75rem;
322 |             color: #fff;
323 |             background-color: #60b86a;
324 |             border-radius: 0 2px 2px 0;
325 |           }
326 |         }
327 |       }
328 |     }
329 |     .cate-item {
330 |       display: flex;
331 |       align-items: center;
332 |       padding: 1rem 0;
333 |       border-bottom: 1px solid rgba(7, 17, 27, 0.1);
334 |       .cate-img {
335 |         width: 4.8rem;
336 |         height: 4.8rem;
337 |         margin-right: 0.4rem;
338 |       }
339 |       .cate-content {
340 |         flex: 1;
341 |         display: flex;
342 |         flex-direction: column;
343 |         .name {
344 |           margin-bottom: 0.5rem;
345 |           font-size: 1rem;
346 |           color: #07111b;
347 |         }
348 |         .spec {
349 |           margin-bottom: 0.5rem;
350 |           font-size: 0.8rem;
351 |           color: #93999f;
352 |         }
353 |         .price-wrap {
354 |           display: flex;
355 |           justify-content: space-between;
356 |           align-items: center;
357 |           .price {
358 |             .origin-price {
359 |               margin-bottom: 0.5rem;
360 |               font-size: 0.8rem;
361 |               color: #8f8f8f;
362 |             }
363 |             .now-price {
364 |               font-size: 0.9375rem;
365 |               color: #5fa85f;
366 |               .label {
367 |                 display: inline-block;
368 |                 padding: 0.2rem 0.4rem;
369 |                 font-size: 0.8rem;
370 |                 border: 1px solid #5fa85f;
371 |                 border-top-right-radius: 0.5rem;
372 |                 border-bottom-right-radius: 0.5rem;
373 |               }
374 |             }
375 |           }
376 |           .cart {
377 |             width: 1.8rem;
378 |             margin-top: 1.1rem;
379 |           }
380 |         }
381 |       }
382 |     }
383 |     .bottom-tip {
384 |       padding-top: 1rem;
385 |       font-size: 0.8rem;
386 |       color: grey;
387 |       text-align: center;
388 |     }
389 |   }
390 |   .button-fixed {
391 |     position: fixed;
392 |     bottom: 1rem;
393 |     right: 1rem;
394 |     left: 1rem;
395 |     display: flex;
396 |     align-items: center;
397 |     height: 3rem;
398 |     line-height: 3rem;
399 |     color: #fff;
400 |     font-size: 1rem;
401 |     .fixed-left {
402 |       width: 70%;
403 |       height: 100%;
404 |       padding-left: 1.5rem;
405 |       box-sizing: border-box;
406 |       border-top-left-radius: 2rem;
407 |       border-bottom-left-radius: 2rem;
408 |       background-color: #303747;
409 |       .now-price {
410 |         margin: 0 0.2rem;
411 |         color: #f2525a;
412 |       }
413 |       .origin-price {
414 |         font-size: 0.8rem;
415 |         text-decoration: line-through;
416 |       }
417 |     }
418 |     .fixed-right {
419 |       width: 30%;
420 |       height: 100%;
421 |       text-align: center;
422 |       border-top-right-radius: 2rem;
423 |       border-bottom-right-radius: 2rem;
424 |       background-color: #3cb963;
425 |     }
426 |   }
427 |   .loading-wrap {
428 |     display: flex;
429 |     justify-content: center;
430 |     align-items: center;
431 |     height: 100vh;
432 |   }
433 | }
434 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const resolve = dir => path.join(__dirname, dir)
 3 | const isProduction = process.env.NODE_ENV === 'production' ? true : false;
 4 | 
 5 | module.exports = {
 6 |   productionSourceMap: false,
 7 |   lintOnSave: false,
 8 |   chainWebpack: config => { 
 9 |     config.resolve.alias
10 |       .set("@", resolve('src'))
11 |       .set('assets', resolve('src/assets'))
12 |       .set('components',resolve('src/components'))
13 |       .set('views', resolve('src/views'))
14 |   },
15 |   devServer: {
16 |     open: true,
17 |   }
18 | }


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