商品点餐

src/components/orderBtn.vue

@@ -5,7 +5,7 @@
                 <img
                     :src="
                         `https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
-                            tal ? '2021-09-15-13-52-40fgNrakko.png' : '2021-09-01-16-30-03wvZqsAeX.png'
+                            totalPrice ? '2021-09-15-13-52-40fgNrakko.png' : '2021-09-01-16-30-03wvZqsAeX.png'
                         }`
                     "
                     alt=""
@@ -17,7 +17,7 @@
                             src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
                             alt=""
                         />
-                        <p>{{ tal }}</p>
+                        <p>{{ totalPrice }}</p>
                         <div class="text1">.00</div>
                     </div>
                     <div class="text1">另外配送费2元</div>
@@ -25,13 +25,13 @@
             </div>
             <van-button :disabled="!canSubmit" type="warning" @click="order">结算</van-button>
         </div>
-        <van-popup :show="show" position="bottom" @close="show = false">
+        <van-popup :show="show && totalPrice > 0" position="bottom" @close="show = false">
             <div class="popupTop">
                 <div class="text1">已选商品</div>
                 <div class="text2">(包装费&nbsp;&nbsp;</div>
                 <div class="text3">¥5)</div>
             </div>
-            <div class="popup" v-for="(item, index) in merchantorLists" :key="index">
+            <div class="popup" v-for="(item, index) in allreadyGoodsList" :key="index">
                 <div class="merchantroCon">
                     <img :src="item.image" alt="" />
                     <div>
@@ -40,10 +40,10 @@
                             <div class="price">¥{{ item.price }}.00</div>
                             <van-stepper
                                 :min="min"
+                                :value="item.currentNum"
                                 disable-input
-                                @minus="minus(item.price)"
-                                @plus="add(item.price)"
-                                @change="onChange"
+                                @minus="minus(item)"
+                                @plus="add(item)"
                             />
                         </div>
                     </div>
@@ -55,14 +55,11 @@
 <script>
 export default {
     props: {
-        tal: {
+        totalPrice: {
             type: Number
         },
-        count: {
-            type: Number
-        },
-        merchantorLists: {
-            type: Object
+        allreadyGoodsList: {
+            type: Array
         }
     },
     data() {
@@ -72,7 +69,7 @@ export default {
     },
     computed: {
         canSubmit() {
-            if (this.tal) {
+            if (this.totalPrice) {
                 return true;
             } else {
                 return false;
@@ -81,16 +78,12 @@ export default {
     },
     methods: {
         addFlag() {
-            if (this.count > 0) {
-                if (this.show === true) {
-                    this.show = false;
-                } else {
-                    this.show = true;
-                }
+            if (this.totalPrice > 0) {
+                this.show = !this.show;
             }
         },
         order() {
-            if (!this.tal) {
+            if (!this.totalPrice) {
                 wx.showToast({
                     icon: 'none',
                     title: '请选择商品'
@@ -98,6 +91,14 @@ export default {
                 return;
             }
             this.navigateTo('/pages/confirmorder');
+        },
+        add(item) {
+            item.currentNum++;
+            item.currentCount = item.currentNum * item.price;
+        },
+        minus(item) {
+            item.currentNum--;
+            item.currentCount = item.currentNum * item.price;
         }
     }
 };

src/pages/merchantorders.vue

@@ -65,7 +65,7 @@
                             <div
                                 @click="navigateTo('/pages/storedetails')"
                                 class="merchantroCon"
-                                v-for="(item, index) in merchantorLists"
+                                v-for="(item, index) in merchantorListsData"
                                 :key="index"
                             >
                                 <img :src="item.image" alt="" />
@@ -74,17 +74,17 @@
                                     <div class="text2">月销{{ item.num }}&nbsp;&nbsp; 赞{{ item.fabulous }}</div>
                                     <div class="bottom" @click.stop>
                                         <div class="price">¥{{ item.price }}.00</div>
-                                        <div v-if="count == 0">
-                                            <div class="add" @click="falgs(item.price)">+</div>
+                                        <div class="addcon">
+                                            <div v-if="item.currentNum > 0">
+                                                <div class="add" @click="minus(item)">-</div>
+                                            </div>
+                                            <div class="text" v-show="item.currentNum > 0">
+                                                {{ item.currentNum }}
+                                            </div>
+                                            <div>
+                                                <div class="add" @click="add(item)">+</div>
+                                            </div>
                                         </div>
-                                        <van-stepper
-                                            v-else
-                                            :min="min"
-                                            disable-input
-                                            @minus="minus(item.price)"
-                                            @plus="add(item.price)"
-                                            @change="onChange"
-                                        />
                                     </div>
                                 </div>
                             </div>
@@ -204,13 +204,14 @@
                 </div>
             </div>
         </div>
-        <orderBtn :tal="tal" :count="count" :merchantorLists="merchantorLists"></orderBtn>
+        <orderBtn :totalPrice="totalPrice" :allreadyGoodsList="allreadyGoodsList"></orderBtn>
     </div>
 </template>
 <script>
 import { mapState } from 'vuex';
 import NavHeader from '../components/NavHeader.vue';
 import orderBtn from '../components/orderBtn.vue';
+import { merchantorLists } from './mock/merchantorList.js';
 export default {
     components: { NavHeader, orderBtn },
     data() {
@@ -218,9 +219,6 @@ export default {
             active: '点餐',
             active2: '全部',
             falg: 0,
-            min: 0,
-            count: 0,
-            tal: 0,
             tabs: ['点餐', '评价', '商家'],
             tabs2: ['全部', '最新', '有图'],
             items: [
@@ -264,22 +262,6 @@ export default {
                     distribution: '起送20元/约20分钟送达/配送费2元'
                 }
             ],
-            merchantorLists: [
-                {
-                    name: '寿司',
-                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
-                    num: '226',
-                    fabulous: '40',
-                    price: 20.0
-                },
-                {
-                    name: '冒菜',
-                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif',
-                    num: '12',
-                    fabulous: '6',
-                    price: 10.0
-                }
-            ],
             merchantorListss: [
                 {
                     name: '油条',
@@ -288,11 +270,29 @@ export default {
                     fabulous: '6',
                     price: '2'
                 }
-            ]
+            ],
+            merchantorListsData: []
         };
     },
     computed: {
-        ...mapState(['userInfo'])
+        ...mapState(['userInfo']),
+        totalPrice() {
+            let result = this.merchantorListsData.reduce(function(prev, curr, idx, arr) {
+                return prev + curr.currentCount;
+            }, 0);
+            return result;
+        },
+        allreadyGoodsList() {
+            let resultArr = this.merchantorListsData.filter(item => item.currentNum > 0);
+            return resultArr;
+        }
+    },
+    created() {
+        merchantorLists.forEach(item => {
+            item.currentNum = 0;
+            item.currentCount = 0;
+            this.merchantorListsData.push(item);
+        });
     },
     methods: {
         tab(item) {
@@ -304,24 +304,13 @@ export default {
         change(e) {
             this.active2 = e;
         },
-        onChange(e) {
-            this.count = e.detail;
-        },
-
-        falgs(price) {
-            this.tal = price * 1;
-            this.count = 1;
-            this.min = 1;
-        },
-        add(price) {
-            var that = this;
-            this.or_amount = 0;
-            this.now_amount = 0;
-            this.tal = this.tal + price + this.count;
+        add(item) {
+            item.currentNum++;
+            item.currentCount = item.currentNum * item.price;
         },
-        minus(price) {
-            this.min = 0;
-            this.tal = price * this.count;
+        minus(item) {
+            item.currentNum--;
+            item.currentCount = item.currentNum * item.price;
         }
     }
 };
@@ -489,8 +478,19 @@ export default {
                 .price {
                     .price();
                 }
-                .add {
-                    .add();
+                .addcon {
+                    .flex();
+                    .text {
+                        width: 24px;
+                        height: 24px;
+                        text-align: center;
+                        line-height: 24px;
+                        background: #f5f7fa;
+                        margin: 0 4px;
+                    }
+                    .add {
+                        .add();
+                    }
                 }
             }
         }

src/pages/mock/merchantorList.js

@@ -0,0 +1,16 @@
+export const merchantorLists = [
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '冒菜',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif',
+        num: '12',
+        fabulous: '6',
+        price: 10.0
+    }
+];