确认组件

src/App.vue

@@ -1,4 +1,7 @@
 <script>
+import orderBtn from './components/orderBtn.vue';
+import NavTitle from './components/NavTitle.vue';
+import NavHeader from './components/NavHeader.vue';
 export default {
     onLaunch(options) {
         wx.login({

src/components/NavHeaders.vue

@@ -1,47 +0,0 @@
-<template>
-    <div
-        class="header"
-        style="height:44px"
-        :style="{ paddingTop: systemInfo.statusBarHeight + 'px', color: fontColor }"
-    >
-        <van-icon name="arrow-left" :size="24" :color="fontColor" @click="navigateBack" />
-    </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-export default {
-    data() {
-        return {
-            colorType: 'light'
-        };
-    },
-    computed: {
-        ...mapState(['systemInfo']),
-        fontColor() {
-            if (this.colorType == 'light') {
-                return '#fff';
-            } else {
-                return '#000';
-            }
-        }
-    }
-};
-</script>
-
-<style lang="less" scoped>
-.header {
-    top: 0;
-    left: 0;
-    right: 0;
-    position: fixed;
-    z-index: 999;
-    transition: all ease-in-out 0.3s;
-    padding: 0 15px;
-    .flex();
-    ._van-icon {
-        position: relative;
-        z-index: 999;
-    }
-}
-</style>

src/components/NavMerchantir.vue

@@ -1,47 +0,0 @@
-<template>
-    <div
-        class="header"
-        style="height:44px"
-        :style="{ paddingTop: systemInfo.statusBarHeight + 'px', color: fontColor }"
-    >
-        <van-icon name="arrow-left" :size="24" :color="fontColor" @click="navigateBack" />
-    </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-export default {
-    data() {
-        return {
-            colorType: 'light'
-        };
-    },
-    computed: {
-        ...mapState(['systemInfo']),
-        fontColor() {
-            if (this.colorType == 'light') {
-                return '#fff';
-            } else {
-                return '#000';
-            }
-        }
-    }
-};
-</script>
-
-<style lang="less" scoped>
-/deep/.header {
-    top: 0;
-    left: 0;
-    right: 0;
-    position: fixed;
-    z-index: 100;
-    transition: all ease-in-out 0.3s;
-    padding: 0 15px;
-    .flex();
-    /deep/ ._van-icon {
-        position: relative;
-        z-index: 100;
-    }
-}
-</style>

src/components/NavTitles.vue

@@ -1,62 +0,0 @@
-<template>
-    <div
-        class="header"
-        style="height:44px"
-        :style="{ paddingTop: systemInfo.statusBarHeight + 'px', color: fontColor, backgroundColor: bgColor }"
-    >
-        <span class="name" :style="{ color: fontColor }"><slot></slot></span>
-        <van-icon name="arrow-left" :size="24" :color="fontColor" @click="navigateBack" />
-    </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-export default {
-    data() {
-        return {
-            colorType: 'light'
-        };
-    },
-    computed: {
-        ...mapState(['systemInfo']),
-        fontColor() {
-            if (this.colorType == 'light') {
-                return '#fff';
-            } else {
-                return '#000';
-            }
-        }
-    }
-};
-</script>
-
-<style lang="less" scoped>
-.header {
-    top: 0;
-    left: 0;
-    right: 0;
-    position: fixed;
-    z-index: 101;
-    transition: all ease-in-out 0.3s;
-    padding: 0 15px;
-    .flex();
-
-    .name {
-        padding: 0 100px;
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 44px;
-        bottom: 0;
-        font-size: 17px;
-        line-height: 44px;
-        text-align: center;
-        z-index: 101;
-    }
-
-    ._van-icon {
-        position: relative;
-        z-index: 101;
-    }
-}
-</style>

src/components/orderBtn.vue

@@ -0,0 +1,201 @@
+<template>
+    <div>
+        <div class="box-total">
+            <div class="ImgBox">
+                <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'
+                        }`
+                    "
+                    alt=""
+                    @click="addFlag"
+                />
+                <div>
+                    <div class="box-num">
+                        <img
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
+                            alt=""
+                        />
+                        <p>{{ tal }}</p>
+                        <div class="text1">.00</div>
+                    </div>
+                    <div class="text1">另外配送费2元</div>
+                </div>
+            </div>
+            <van-button :disabled="!canSubmit" type="warning" @click="order">结算</van-button>
+        </div>
+        <van-popup :show="show" 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="merchantroCon">
+                    <img :src="item.image" alt="" />
+                    <div>
+                        <div class="text1">{{ item.name }}</div>
+                        <div class="bottom" @click.stop>
+                            <div class="price">¥{{ item.price }}.00</div>
+                            <van-stepper
+                                :min="min"
+                                disable-input
+                                @minus="minus(item.price)"
+                                @plus="add(item.price)"
+                                @change="onChange"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        tal: {
+            type: Number
+        },
+        count: {
+            type: Number
+        },
+        merchantorLists: {
+            type: Object
+        }
+    },
+    data() {
+        return {
+            show: false
+        };
+    },
+    computed: {
+        canSubmit() {
+            if (this.tal) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    },
+    methods: {
+        addFlag() {
+            if (this.count > 0) {
+                if (this.show === true) {
+                    this.show = false;
+                } else {
+                    this.show = true;
+                }
+            }
+        },
+        order() {
+            if (!this.tal) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请选择商品'
+                });
+                return;
+            }
+            this.navigateTo('/pages/confirmorder');
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .van-popup {
+    margin-bottom: 73px;
+    border-radius: 12px 12px 0 0;
+}
+.box-total {
+    .bottom();
+    .flex();
+    z-index: 101;
+    box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
+    .btn();
+    .ImgBox {
+        .flex();
+        img {
+            width: 72px;
+            height: 72px;
+            margin-bottom: 6px;
+        }
+        .box-num {
+            .flex();
+            span {
+                .span();
+            }
+            img {
+                width: 13px;
+                height: 13px;
+                margin-top: 16px;
+            }
+            p {
+                .p();
+            }
+            .text1 {
+                .text10();
+            }
+        }
+        .text1 {
+            font-size: 14px;
+            font-weight: 400;
+            color: #c8c9cc;
+            line-height: 24px;
+        }
+    }
+}
+.popupTop {
+    .flex();
+    margin: 16px 0 0 16px;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 18px;
+    .text1 {
+        color: #1c1c1c;
+        margin-right: 6px;
+    }
+    .text2 {
+        color: #939599;
+    }
+    .text3 {
+        color: #ff7f1f;
+    }
+}
+.popup {
+    padding: 0 16px 0 16px;
+    .merchantroCon {
+        .flex();
+        margin-top: 20px;
+        img {
+            width: 80px;
+            height: 80px;
+            border-radius: 8px;
+            margin: 0 10px 0 0;
+        }
+        .text1 {
+            .span();
+            color: #1c1c1c;
+            margin-bottom: 32px;
+        }
+        .text2 {
+            font-size: 13px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 18px;
+            margin: 2px 0 6px;
+        }
+        .bottom {
+            .flex();
+            justify-content: space-between;
+            width: 252px;
+            .price {
+                .price();
+            }
+            .add {
+                .add();
+            }
+        }
+    }
+}
+</style>

src/pages/allorder.vue

@@ -1,6 +1,6 @@
 <config>
 {
-    "navigationBarTitleText": "购物车",
+    "navigationBarTitleText": "我的订单",
     "navigationBarBackgroundColor": "#ffffff",
 }
 </config>

src/pages/confirmorder.vue

@@ -2,7 +2,6 @@
 {
     "navigationBarTextStyle": "white",
     "navigationStyle": "custom",
-    "backgroundColorTop":'#159EFF',
 }
 </config>
 <template>

src/pages/merchantorders.vue

@@ -1,13 +1,12 @@
 <config>
 {
     "navigationStyle": "custom",
-     "navigationBarTextStyle": "white",
-    "backgroundColorTop":'#159EFF'
+     "navigationBarTextStyle": "white"
 }
 </config>
 <template>
     <div class="container">
-        <nav-merchantir></nav-merchantir>
+        <nav-header></nav-header>
         <van-sticky>
             <div class="top">
                 <img
@@ -205,72 +204,21 @@
                 </div>
             </div>
         </div>
-        <div class="box-total">
-            <div class="ImgBox">
-                <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'
-                        }`
-                    "
-                    alt=""
-                    @click="addFlag"
-                />
-                <div>
-                    <div class="box-num">
-                        <img
-                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
-                            alt=""
-                        />
-                        <p>{{ tal }}</p>
-                        <div class="text1">.00</div>
-                    </div>
-                    <div class="text1">另外配送费2元</div>
-                </div>
-            </div>
-            <van-button :disabled="!canSubmit" type="warning" @click="order">结算</van-button>
-        </div>
-        <van-popup :show="show" 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="merchantroCon">
-                    <img :src="item.image" alt="" />
-                    <div>
-                        <div class="text1">{{ item.name }}</div>
-                        <div class="bottom" @click.stop>
-                            <div class="price">¥{{ item.price }}.00</div>
-                            <van-stepper
-                                :min="min"
-                                disable-input
-                                @minus="minus(item.price)"
-                                @plus="add(item.price)"
-                                @change="onChange"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </van-popup>
+        <orderBtn :tal="tal" :count="count" :merchantorLists="merchantorLists"></orderBtn>
     </div>
 </template>
 <script>
 import { mapState } from 'vuex';
-import NavMerchantir from '../components/NavMerchantir.vue';
+import NavHeader from '../components/NavHeader.vue';
+import orderBtn from '../components/orderBtn.vue';
 export default {
-    components: { NavMerchantir },
+    components: { NavHeader, orderBtn },
     data() {
         return {
             active: '点餐',
             active2: '全部',
             falg: 0,
             min: 0,
-            or_amount: 0,
-            // now_amount: 0,
-            show: false,
             count: 0,
             tal: 0,
             tabs: ['点餐', '评价', '商家'],
@@ -344,26 +292,16 @@ export default {
         };
     },
     computed: {
-        ...mapState(['userInfo']),
-        canSubmit() {
-            if (this.tal) {
-                return true;
-            } else {
-                return false;
-            }
-        }
+        ...mapState(['userInfo'])
+        // canSubmit() {
+        //     if (this.tal) {
+        //         return true;
+        //     } else {
+        //         return false;
+        //     }
+        // }
     },
     methods: {
-        order() {
-            if (!this.tal) {
-                wx.showToast({
-                    icon: 'none',
-                    title: '请选择商品'
-                });
-                return;
-            }
-            this.navigateTo('/pages/confirmorder');
-        },
         tab(item) {
             this.active = item;
         },
@@ -376,15 +314,7 @@ export default {
         onChange(e) {
             this.count = e.detail;
         },
-        addFlag() {
-            if (this.count > 0) {
-                if (this.show === true) {
-                    this.show = false;
-                } else {
-                    this.show = true;
-                }
-            }
-        },
+
         falgs(price) {
             this.tal = price * 1;
             this.count = 1;
@@ -676,96 +606,5 @@ export default {
             }
         }
     }
-    .box-total {
-        .bottom();
-        .flex();
-        z-index: 101;
-        box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
-        .btn();
-        .ImgBox {
-            .flex();
-            img {
-                width: 72px;
-                height: 72px;
-                margin-bottom: 6px;
-            }
-            .box-num {
-                .flex();
-                span {
-                    .span();
-                }
-                img {
-                    width: 13px;
-                    height: 13px;
-                    margin-top: 16px;
-                }
-                p {
-                    .p();
-                }
-                .text1 {
-                    .text10();
-                }
-            }
-            .text1 {
-                font-size: 14px;
-                font-weight: 400;
-                color: #c8c9cc;
-                line-height: 24px;
-            }
-        }
-    }
-    .popupTop {
-        .flex();
-        margin: 16px 0 0 16px;
-        font-size: 13px;
-        font-weight: 400;
-        line-height: 18px;
-        .text1 {
-            color: #1c1c1c;
-            margin-right: 6px;
-        }
-        .text2 {
-            color: #939599;
-        }
-        .text3 {
-            color: #ff7f1f;
-        }
-    }
-    .popup {
-        padding: 0 16px 0 16px;
-        .merchantroCon {
-            .flex();
-            margin-top: 20px;
-            img {
-                width: 80px;
-                height: 80px;
-                border-radius: 8px;
-                margin: 0 10px 0 0;
-            }
-            .text1 {
-                .span();
-                color: #1c1c1c;
-                margin-bottom: 32px;
-            }
-            .text2 {
-                font-size: 13px;
-                font-weight: 400;
-                color: #939599;
-                line-height: 18px;
-                margin: 2px 0 6px;
-            }
-            .bottom {
-                .flex();
-                justify-content: space-between;
-                width: 252px;
-                .price {
-                    .price();
-                }
-                .add {
-                    .add();
-                }
-            }
-        }
-    }
 }
 </style>

src/pages/orderdetails.vue

@@ -114,7 +114,7 @@
     </div>
 </template>
 <script>
-import NavHeader from '../components/NavHeaders.vue';
+import NavHeader from '../components/NavHeader.vue';
 export default {
     components: { NavHeader },
     data() {

src/pages/shoppingCart.vue

@@ -124,7 +124,7 @@
 </template>
 <script>
 import { mapState } from 'vuex';
-import NavTitle from '../components/NavTitles.vue';
+import NavTitle from '../components/NavTitle.vue';
 export default {
     components: { NavTitle },
     computed: {

src/pages/storedetails.vue

@@ -109,37 +109,15 @@
                 </div>
             </div>
         </div>
-        <div class="box-total">
-            <div class="ImgBox">
-                <img
-                    :src="
-                        `https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
-                            tal ? '2021-09-01-16-30-24QYDxYMzU.png' : '2021-09-01-16-30-03wvZqsAeX.png'
-                        }`
-                    "
-                    alt=""
-                />
-                <div>
-                    <div class="box-num">
-                        <img
-                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-03-40cShzZQEk.png"
-                            alt=""
-                        />
-                        <p>{{ tal }}</p>
-                        <div class="text1">.00</div>
-                    </div>
-                    <div class="text1">另外配送费2元</div>
-                </div>
-            </div>
-            <van-button :disabled="!canSubmit" type="warning" @click="order">结算</van-button>
-        </div>
+        <orderBtn :tal="tal" :count="count" :merchantorLists="merchantorLists"></orderBtn>
     </div>
 </template>
 <script>
 import { mapState } from 'vuex';
 import NavHeader from '../components/NavHeader.vue';
+import orderBtn from '../components/orderBtn.vue';
 export default {
-    components: { NavHeader },
+    components: { NavHeader, orderBtn },
     data() {
         return {
             swiperCurrent: 0,
@@ -181,29 +159,12 @@ export default {
         };
     },
     computed: {
-        ...mapState(['userInfo']),
-        canSubmit() {
-            if (this.tal) {
-                return true;
-            } else {
-                return false;
-            }
-        }
+        ...mapState(['userInfo'])
     },
     methods: {
         change(e) {
             this.active = e;
         },
-        order() {
-            if (!this.tal) {
-                wx.showToast({
-                    icon: 'none',
-                    title: '请选择商品'
-                });
-                return;
-            }
-            this.navigateTo('/pages/confirmorder');
-        },
         swiperChange(e) {
             this.swiperCurrent = e.detail.current;
         },
@@ -264,7 +225,7 @@ export default {
         position: absolute;
         right: 14px;
         top: 333px;
-        z-index: 9999;
+        z-index: 99;
         width: 44px;
         height: 20px;
         line-height: 20px;
@@ -275,7 +236,7 @@ export default {
     }
     .title {
         position: absolute;
-        z-index: 9999;
+        z-index: 99;
         background: #ffffff;
         border-radius: 12px;
         padding: 20px 14px;
@@ -492,41 +453,5 @@ export default {
             }
         }
     }
-    .box-total {
-        .bottom();
-        .flex();
-        .btn();
-        .ImgBox {
-            .flex();
-            img {
-                width: 72px;
-                height: 72px;
-                margin-bottom: 6px;
-            }
-            .box-num {
-                .flex();
-                span {
-                    .span();
-                }
-                img {
-                    width: 13px;
-                    height: 13px;
-                    margin-top: 16px;
-                }
-                p {
-                    .p();
-                }
-                .text1 {
-                    .text10();
-                }
-            }
-            .text1 {
-                font-size: 14px;
-                font-weight: 400;
-                color: #c8c9cc;
-                line-height: 24px;
-            }
-        }
-    }
 }
 </style>