修改

src/pages/Home.vue

@@ -1,18 +1,19 @@
 <config>
 {
-   "backgroundTextStyle":"light",
+    "navigationBarTextStyle": "white",
     "navigationStyle": "custom",
 }
 </config>
 <template>
     <div class="container">
-        <img class="mytest" src="../native/imgs/img_home_top@3x.png" alt="" />
+        <img
+            class="mytest"
+            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-01-17-33-55YcQJEaXa.png"
+            alt=""
+        />
         <div class="top">
             <div class="address">
-                <img
-                    class="avatar"
-                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-31-24egsujwUw.jpg"
-                />
+                <img class="avatar" v-if="userInfo" :src="userInfo.avatar" />
                 <div>
                     <div class="text1">南京***大学</div>
                     <div class="text1">江宁校区</div>
@@ -20,9 +21,8 @@
             </div>
             <div class="search">
                 <van-field
-                    @confirm="searchData"
                     :value="searchVal"
-                    @change="change"
+                    @click="navigateTo('/pages/shopsearch')"
                     type="text"
                     clearable
                     placeholder="搜索"
@@ -34,19 +34,72 @@
                 </swiper-item>
             </swiper>
         </div>
+        <div class="tab">
+            <div
+                class="tabs"
+                :class="{ active: item === active }"
+                v-for="(item, index) in tabs"
+                :key="index"
+                @click="tab(item)"
+            >
+                {{ item }}
+            </div>
+        </div>
+        <div class="conTent">
+            <div
+                @click="navigateTo('/pages/merchantorders')"
+                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">起送20元 免配费&nbsp;&nbsp;&nbsp;&nbsp; 20分钟 1km</div>
+                    <div class="text3">蛋黄派&nbsp;&nbsp; 曲奇饼干</div>
+                    <div class="bottom">
+                        <div class="text2">月销{{ item.num }}</div>
+                        <img
+                            class="imgBox"
+                            src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-01-17-35-13FNlQpGNP.png"
+                            alt=""
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script>
+import { mapState } from 'vuex';
 export default {
+    computed: {
+        ...mapState(['userInfo'])
+    },
     data() {
         return {
-            banners: [
-                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-40-54wLiqaRNi.png',
-                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-31-24egsujwUw.jpg'
-            ]
+            banners: ['https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-40-54wLiqaRNi.png'],
+            merchantorLists: [
+                {
+                    name: '南瓜粥',
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+                    num: '226'
+                },
+                {
+                    name: '八宝粥',
+                    image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif',
+                    num: '26'
+                }
+            ],
+            active: '综合排序',
+            tabs: ['综合排序', '一食堂', '二食堂', '三食堂']
         };
     },
-    methods: {}
+    methods: {
+        tab(item) {
+            this.active = item;
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
@@ -104,5 +157,72 @@ export default {
             }
         }
     }
+    .tab {
+        .flex();
+        .tabs {
+            font-size: 16px;
+            font-weight: 400;
+            color: #000000;
+            line-height: 22px;
+            width: 100%;
+            margin-top: 26px;
+            text-align: center;
+            justify-content: space-between;
+            padding-bottom: 11px;
+            &.active {
+                border-bottom: 1px solid #159eff;
+            }
+        }
+        border-bottom: 1px solid @bg;
+    }
+    .conTent {
+        margin-top: 27px;
+        .merchantroCon {
+            .flex();
+            margin-bottom: 20px;
+            img {
+                width: 116px;
+                height: 116px;
+                border-radius: 8px;
+                margin: 0 10px 0 14px;
+            }
+            .text1 {
+                font-size: 16px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 24px;
+            }
+            .text2 {
+                font-size: 13px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 22px;
+                margin: 2px 0 6px;
+            }
+            .text3 {
+                font-size: 13px;
+                font-weight: 400;
+                color: #159eff;
+                line-height: 20px;
+            }
+            .bottom {
+                .flex();
+                justify-content: space-between;
+                width: 100%;
+                .text2 {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 22px;
+                    margin-top: 6px;
+                }
+                .imgBox {
+                    width: 16px;
+                    height: 16px;
+                    margin: 0;
+                }
+            }
+        }
+    }
 }
 </style>

src/pages/merchantorders.vue

@@ -163,10 +163,8 @@
             <div class="ImgBox">
                 <img
                     :src="
-                        `${
-                            tal
-                                ? '../native/imgs/info_icon_yidiancan@3x.png'
-                                : '../native/imgs/info_icon_weidiancan@3x.png'
+                        `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=""
@@ -625,6 +623,7 @@ export default {
         height: 56px;
         justify-content: space-between;
         background: #ffffff;
+        box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
         width: 100%;
         position: fixed;
         bottom: 0;

src/pages/storedetails.vue

@@ -100,7 +100,10 @@
         </div>
         <div class="box-total">
             <div class="ImgBox">
-                <img src="../native/imgs/info_icon_yidiancan@3x.png" alt="" />
+                <img
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-01-16-30-03wvZqsAeX.png"
+                    alt=""
+                />
                 <div>
                     <div class="box-con-num">
                         <img src="../native/imgs/icon_jiage@3x.png" alt="" />