修改

project.private.config.json

@@ -40,6 +40,13 @@
                     "query": "",
                     "scene": null
                 },
+                {
+                    "id": -1,
+                    "name": "店家搜索",
+                    "pathName": "/pages/shopsearch",
+                    "query": "",
+                    "scene": null
+                },
                 {
                     "id": -1,
                     "name": "商品详情",

src/components/NavHeader.vue

@@ -35,13 +35,13 @@ export default {
     left: 0;
     right: 0;
     position: fixed;
-    z-index: 9999;
+    z-index: 999;
     transition: all ease-in-out 0.3s;
     padding: 0 15px;
     .flex();
     ._van-icon {
         position: relative;
-        z-index: 9999;
+        z-index: 999;
     }
 }
 </style>

src/components/NavHeaders.vue

@@ -30,18 +30,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/deep/.header {
+.header {
     top: 0;
     left: 0;
     right: 0;
     position: fixed;
-    z-index: 9999;
+    z-index: 999;
     transition: all ease-in-out 0.3s;
     padding: 0 15px;
     .flex();
-    /deep/ ._van-icon {
+    ._van-icon {
         position: relative;
-        z-index: 9999;
+        z-index: 999;
     }
 }
 </style>

src/components/NavMerchantir.vue

@@ -0,0 +1,47 @@
+<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: 999;
+    transition: all ease-in-out 0.3s;
+    padding: 0 15px;
+    .flex();
+    /deep/ ._van-icon {
+        position: relative;
+        z-index: 999;
+    }
+}
+</style>

src/components/NavTitle.vue

@@ -4,8 +4,8 @@
         style="height:44px"
         :style="{ paddingTop: systemInfo.statusBarHeight + 'px', color: fontColor, backgroundColor: bgColor }"
     >
-        <van-icon name="arrow-left" :size="24" :color="fontColor" @click="navigateBack" />
         <span class="name" :style="{ color: fontColor }"><slot></slot></span>
+        <van-icon name="arrow-left" :size="24" :color="fontColor" @click="navigateBack" />
     </div>
 </template>
 
@@ -36,7 +36,7 @@ export default {
     left: 0;
     right: 0;
     position: fixed;
-    z-index: 999;
+    z-index: 101;
     transition: all ease-in-out 0.3s;
     padding: 0 15px;
     .flex();
@@ -51,12 +51,12 @@ export default {
         font-size: 17px;
         line-height: 44px;
         text-align: center;
-        z-index: 999;
+        z-index: 101;
     }
 
     ._van-icon {
         position: relative;
-        z-index: 999;
+        z-index: 101;
     }
 }
 </style>

src/main.js

@@ -39,6 +39,7 @@ export default {
             'pages/merchantorders',
             'pages/storedetails',
             'pages/confirmorder',
+            'pages/shopsearch',
             'pages/orderdetails',
             'pages/apply'
         ],

src/pages/confirmorder.vue

@@ -1,6 +1,5 @@
 <config>
 {
-    "navigationBarTitleText": "确认订单",
     "navigationBarTextStyle": "white",
     "navigationStyle": "custom",
     "backgroundColorTop":'#159EFF',

src/pages/merchantorders.vue

@@ -1,25 +1,27 @@
 <config>
 {
     "navigationStyle": "custom",
+     "navigationBarTextStyle": "white",
     "backgroundColorTop":'#159EFF'
 }
 </config>
 <template>
     <div class="container">
+        <nav-merchantir></nav-merchantir>
         <van-sticky>
             <div class="top">
                 <img class="mytest" src="../native/imgs/img_home_top@4x.png" alt="" />
                 <div class="box">
-                    <div class="title">
+                    <div class="title" v-for="(item, index) in topList" :key="index">
                         <div>
                             <div class="text">
-                                <div class="text1">益禾堂 (一食堂)</div>
+                                <div class="text1">{{ item.address }}</div>
                                 <div class="text2">接受预定</div>
                             </div>
-                            <div class="text1">起送20元/约20分钟送达/配送费2元</div>
-                            <div class="text2">公告：美好的一天从点心开始</div>
+                            <div class="text1">{{ item.distribution }}</div>
+                            <div class="text2">公告：{{ item.notice }}</div>
                         </div>
-                        <div>1111</div>
+                        <img :src="item.image" alt="" />
                     </div>
                 </div>
             </div>
@@ -35,38 +37,276 @@
                 >
                     {{ item }}
                 </div>
+                <div class="text">
+                    <img src="../native/imgs/icon-shoucang@3x.png" alt="" />
+                    <div class="text2">收藏</div>
+                </div>
+                <img
+                    @click="navigateTo('/pages/shopsearch')"
+                    class="search"
+                    src="../native/imgs/icon-sosuo@3x.png"
+                    alt=""
+                />
+            </div>
+            <div v-if="active == '点餐'">
+                <van-tree-select
+                    :items="items"
+                    :main-active-index="mainActiveIndex"
+                    :active-id="activeId"
+                    @onClickNav="onClickNav"
+                    @onSelectItem="onSelectItem"
+                >
+                    <div slot="content">
+                        <div v-if="falg == 0">
+                            <div
+                                @click="navigateTo('/pages/storedetails')"
+                                class="merchantroCon"
+                                v-for="(item, index) in merchantorLists"
+                                :key="index"
+                            >
+                                <img :src="item.image" alt="" />
+                                <div>
+                                    <div class="text1">{{ item.name }}</div>
+                                    <div class="text2">月销{{ item.num }}&nbsp;&nbsp; 赞60</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>
+                                        <van-stepper
+                                            v-else
+                                            :min="min"
+                                            @minus="minus(item.price)"
+                                            @plus="add(item.price)"
+                                            @change="onChange"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="falg == 1">
+                            <div
+                                @click="navigateTo('/pages/storedetails')"
+                                class="merchantroCon"
+                                v-for="(item, index) in merchantorListss"
+                                :key="index"
+                            >
+                                <img :src="item.image" alt="" />
+                                <div>
+                                    <div class="text1">{{ item.name }}</div>
+                                    <div class="text2">月销{{ item.num }}&nbsp;&nbsp; 赞60</div>
+                                    <div class="bottom" @click.stop>
+                                        <div class="price">¥{{ item.price }}.00</div>
+                                        <van-stepper :value="1" @change="onChange" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </van-tree-select>
+            </div>
+            <div v-if="active == '评价'">
+                <div class="tabs2">
+                    <div
+                        class="tab2"
+                        :class="{ active2: item === active2 }"
+                        v-for="(item, index) in tabs2"
+                        :key="index"
+                        @click="change(item)"
+                    >
+                        {{ item }}
+                    </div>
+                </div>
+                <div class="evaluateCon">
+                    <img v-if="userInfo" :src="userInfo.avatar" alt="" />
+                    <div class="conr">
+                        <div class="name">
+                            <div class="txt1" v-if="userInfo">{{ userInfo.nickname }}</div>
+                            <div class="text2">2021.07.03</div>
+                        </div>
+                        <!-- 点赞 -->
+                        <div class="give">
+                            <img src="../native/imgs/icon-zan@3x.png" alt="" />
+                            <div class="text1">赞了该商品</div>
+                        </div>
+                        <div class="remark">哇塞，太好吃了吧，下次还要点，收藏起来。</div>
+                        <div class="image">
+                            <div v-for="(item, index) in lists" :key="index">
+                                <img class="img" :src="item.image" alt="" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="characteristic" v-if="active == '商家'">
+                <div v-for="(item, index) in merchantorList" :key="index">
+                    <div class="title">商家特色</div>
+                    <div class="text1">{{ item.title }}</div>
+                    <div class="border"></div>
+                    <div class="text">
+                        <div class="text1">地址</div>
+                        <div class="text2">{{ item.address }}</div>
+                    </div>
+                    <img :src="item.image" alt="" />
+                    <div class="border"></div>
+                    <div class="title">营业时间</div>
+                    <div class="text1">
+                        上午：{{ item.timeMorning }}&nbsp;&nbsp;&nbsp; 下午：{{ item.timeAfternoon }}
+                    </div>
+                    <div class="border"></div>
+                    <div class="title">商家公告</div>
+                    <div class="text1">{{ item.notice }}</div>
+                </div>
             </div>
         </div>
         <div class="box-total">
             <div class="ImgBox">
-                <img src="../native/imgs/info_icon_yidiancan@3x.png" alt="" />
+                <img
+                    :src="
+                        `${
+                            tal
+                                ? '../native/imgs/info_icon_yidiancan@3x.png'
+                                : '../native/imgs/info_icon_weidiancan@3x.png'
+                        }`
+                    "
+                    alt=""
+                />
                 <div>
                     <div class="box-con-num">
                         <img src="../native/imgs/icon_jiage@3x.png" alt="" />
-                        <p>22.00</p>
+                        <p>{{ tal }}.00</p>
                     </div>
                     <div class="text1">另外配送费2元</div>
                 </div>
             </div>
-            <van-button type="warning" @click="order">结算</van-button>
+            <van-button :disabled="!canSubmit" type="warning" @click="order">结算</van-button>
         </div>
     </div>
 </template>
 <script>
 import { mapState } from 'vuex';
+import NavMerchantir from '../components/NavMerchantir.vue';
 export default {
+    components: { NavMerchantir },
     data() {
         return {
             active: '点餐',
-            tabs: ['点餐', '评价', '商家']
+            active2: '全部',
+            falg: 0,
+            min: 0,
+            count: 0,
+            tal: 0,
+            tabs: ['点餐', '评价', '商家'],
+            tabs2: ['全部', '最新', '有图'],
+            items: [
+                {
+                    text: '热销'
+                },
+                {
+                    text: '清新素粥'
+                }
+            ],
+            lists: [
+                {
+                    price: '11',
+                    name: '南瓜粥',
+                    num: '1',
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg'
+                },
+                {
+                    price: '22',
+                    name: '南瓜粥,八宝粥',
+                    num: '2',
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif'
+                }
+            ],
+            merchantorList: [
+                {
+                    title:
+                        '一家经典的家常菜，吃完会不会想起妈妈的味道呢。一家经典的家常菜，吃完会不会想起妈妈的味道呢。',
+                    address: '江宁学院二楼食堂',
+                    timeMorning: '07:00-14:00',
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+                    timeAfternoon: '16:00-23:00',
+                    notice: '美好的一天从点心开始'
+                }
+            ],
+            topList: [
+                {
+                    address: '益禾堂 (一食堂)',
+                    notice: '美好的一天从点心开始',
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+                    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',
+                    price: 20
+                },
+                {
+                    name: '八宝粥',
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif',
+                    num: '226',
+                    price: 10
+                }
+            ],
+            merchantorListss: [
+                {
+                    name: '油条',
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif',
+                    num: '226',
+                    price: '2'
+                }
+            ]
         };
     },
     computed: {
-        ...mapState(['userInfo'])
+        ...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;
+        },
+        onClickNav(e) {
+            this.falg = e.detail.index;
+        },
+        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) {
+            this.tal = this.tal + price + this.count;
+        },
+        minus(price) {
+            this.min = 0;
+            this.tal = price * this.count;
         }
     }
 };
@@ -85,6 +325,32 @@ export default {
         margin-right: 16px;
         border: 0;
     }
+    /deep/ .van-tree-select {
+        margin: 21px -20px 0 -20px;
+    }
+    /deep/ .van-tree-select__nav {
+        -webkit-flex: 0.6;
+        --sidebar-padding: 12px 8px 12px 12px;
+    }
+    /deep/ .van-stepper__minus {
+        width: 28px;
+        height: 24px;
+        background: #159eff;
+        color: #fff;
+    }
+    /deep/ .van-stepper__plus {
+        width: 28px;
+        height: 24px;
+        background: #159eff;
+        color: #fff;
+    }
+    /deep/ .van-stepper__input {
+        width: 28px;
+        height: 24px;
+        background: #f5f7fa;
+        border-radius: 2px;
+        margin: 0 2px;
+    }
     .top {
         padding: 96px 0 0 16px;
         .mytest {
@@ -143,11 +409,16 @@ export default {
                     color: #939599;
                     line-height: 22px;
                 }
+                img {
+                    width: 80px;
+                    height: 80px;
+                    border-radius: 8px;
+                }
             }
         }
     }
     .content {
-        padding: 21px 16px 0;
+        margin: 28px 16px 0;
         .tab {
             .flex();
             .tabs {
@@ -163,6 +434,189 @@ export default {
                 }
             }
             border-bottom: 1px solid @bg;
+            .text {
+                .flex();
+                padding: 0 0 10px 50px;
+                img {
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 8px;
+                }
+                .text2 {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                }
+            }
+            .search {
+                width: 16px;
+                height: 16px;
+                padding: 0 0 10px 19px;
+            }
+        }
+        .merchantroCon {
+            .flex();
+            margin-bottom: 20px;
+            img {
+                width: 80px;
+                height: 80px;
+                border-radius: 8px;
+                margin: 0 10px 0 14px;
+            }
+            .text1 {
+                font-size: 14px;
+                font-weight: bold;
+                color: #1c1c1c;
+                line-height: 24px;
+            }
+            .text2 {
+                font-size: 13px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 18px;
+                margin: 2px 0 6px;
+            }
+            .bottom {
+                .flex();
+                justify-content: space-between;
+                width: 168px;
+                .price {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #ff7f1f;
+                    line-height: 24px;
+                }
+                .add {
+                    width: 24px;
+                    height: 24px;
+                    background: @prim;
+                    line-height: 24px;
+                    text-align: center;
+                    font-weight: bold;
+                    color: #fff;
+                }
+            }
+        }
+
+        .tabs2 {
+            .flex();
+            margin-top: 20px;
+            .tab2 {
+                width: 38px;
+                height: 20px;
+                background: #d3edff;
+                border-radius: 2px;
+                margin-right: 20px;
+                font-size: 13px;
+                color: #939599;
+                text-align: center;
+                line-height: 20px;
+                &.active2 {
+                    color: @prim;
+                }
+            }
+        }
+        .evaluateCon {
+            display: flex;
+            margin-top: 20px;
+            img {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                margin-right: 8px;
+            }
+            .conr {
+                width: 293px;
+                .name {
+                    .flex();
+                    justify-content: space-between;
+                    .text1 {
+                        font-size: 15px;
+                        font-weight: 400;
+                        color: #000000;
+                        line-height: 24px;
+                    }
+                    .text2 {
+                        font-size: 13px;
+                        font-weight: 400;
+                        color: #939599;
+                        line-height: 22px;
+                    }
+                }
+                .give {
+                    .flex();
+                    margin: 4px 0;
+                    img {
+                        width: 16px;
+                        height: 16px;
+                    }
+                    .text1 {
+                        font-size: 13px;
+                        font-weight: 400;
+                        color: #939599;
+                        line-height: 24px;
+                        margin-left: 4px;
+                    }
+                }
+                .remark {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #000000;
+                    line-height: 22px;
+                }
+                .image {
+                    .flex();
+                    .img {
+                        width: 80px;
+                        height: 80px;
+                        border-radius: 8px;
+                        margin-right: 12px;
+                        margin-top: 5px;
+                    }
+                }
+            }
+        }
+        .characteristic {
+            .title {
+                font-size: 14px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 24px;
+                margin: 20px 0 6px;
+            }
+            .text1 {
+                font-size: 13px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 22px;
+            }
+            .border {
+                border-bottom: 1px solid @bg;
+                margin: 20px 0;
+            }
+            .text {
+                .flex();
+                .text1 {
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 24px;
+                }
+                .text2 {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 22px;
+                    margin-left: 9px;
+                }
+            }
+            img {
+                width: 80px;
+                height: 80px;
+                border-radius: 8px;
+                margin: 10px 12px 0 0;
+            }
         }
     }
     .box-total {

src/pages/shopsearch.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="container">
+        <van-search :value="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel" />
+    </div>
+</template>
+<script>
+export default {
+    data() {}
+};
+</script>
+<style lang="less" scoped>
+/deep/ .van-search {
+    padding: 0;
+    // .van-cell--hover {
+    // }
+}
+.container {
+    min-height: 720px;
+    background: @bg;
+}
+</style>

src/pages/storedetails.vue

@@ -1,6 +1,5 @@
 <config>
 {
-    "navigationBarTitleText": "商品详情",
     "navigationBarTextStyle": "white",
     "navigationStyle": "custom",
 }