胶囊

src/components/AddressInfo.vue

@@ -79,8 +79,9 @@ export default {
         border: 1px solid #ccc;
         width: 60px;
         color: #ccc;
-        height: 32px;
-        line-height: 32px;
+        font-size: 14px;
+        height: 30px;
+        line-height: 30px;
         text-align: center;
         margin-right: 16px;
         border-radius: 8px;

src/components/NavHeader.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>
+.header {
+    top: 0;
+    left: 0;
+    right: 0;
+    position: fixed;
+    z-index: 9999;
+    transition: all ease-in-out 0.3s;
+    padding: 0 15px;
+    .flex();
+    ._van-icon {
+        position: relative;
+        z-index: 9999;
+    }
+}
+</style>

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

src/components/NavTitle.vue

@@ -0,0 +1,62 @@
+<template>
+    <div
+        class="header"
+        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>
+    </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();
+
+    .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: 999;
+    }
+
+    ._van-icon {
+        position: relative;
+        z-index: 999;
+    }
+}
+</style>

src/pages/confirmorder.vue

@@ -1,13 +1,15 @@
 <config>
 {
     "navigationBarTitleText": "确认订单",
+    "navigationBarTextStyle": "white",
     "navigationStyle": "custom",
     "backgroundColorTop":'#159EFF',
 }
 </config>
 <template>
     <div class="container">
-        <van-sticky :offset-top="0">
+        <nav-title>提交订单</nav-title>
+        <van-sticky>
             <div class="top">
                 <img class="mytest" src="../native/imgs/img_home_top@4x.png" alt="" />
                 <div class="box">
@@ -136,7 +138,9 @@
 </template>
 <script>
 import { mapState } from 'vuex';
+import NavTitle from '../components/NavTitle.vue';
 export default {
+    components: { NavTitle },
     computed: {
         ...mapState(['userInfo'])
         // items() {

src/pages/merchantorders.vue

@@ -24,7 +24,19 @@
                 </div>
             </div>
         </van-sticky>
-        <div class="content"></div>
+        <div class="content">
+            <div class="tab">
+                <div
+                    class="tabs"
+                    :class="{ active: active === item }"
+                    v-for="(item, index) in tabs"
+                    :key="index"
+                    @click="tab(item)"
+                >
+                    {{ item }}
+                </div>
+            </div>
+        </div>
         <div class="box-total">
             <div class="ImgBox">
                 <img src="../native/imgs/info_icon_yidiancan@3x.png" alt="" />
@@ -45,13 +57,18 @@ import { mapState } from 'vuex';
 export default {
     data() {
         return {
+            active: '点餐',
             tabs: ['点餐', '评价', '商家']
         };
     },
     computed: {
         ...mapState(['userInfo'])
     },
-    methods: {}
+    methods: {
+        tab(item) {
+            this.active = item;
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
@@ -129,6 +146,25 @@ export default {
             }
         }
     }
+    .content {
+        padding: 21px 16px 0;
+        .tab {
+            .flex();
+            .tabs {
+                font-size: 16px;
+                font-weight: 400;
+                color: #000000;
+                line-height: 22px;
+                margin-right: 36px;
+                padding-bottom: 11px;
+                &.active {
+                    color: #159eff;
+                    border-bottom: 2px solid #159eff;
+                }
+            }
+            border-bottom: 1px solid @bg;
+        }
+    }
     .box-total {
         .bottom();
         .flex();

src/pages/orderdetails.vue

@@ -9,7 +9,8 @@
 </config>
 <template>
     <div class="container">
-        <van-sticky :offset-top="0">
+        <nav-header></nav-header>
+        <van-sticky>
             <div class="top">
                 <img class="mytest" src="../native/imgs/img_home_top@4x.png" alt="" />
                 <div class="text1">待支付</div>
@@ -102,7 +103,9 @@
     </div>
 </template>
 <script>
+import NavHeader from '../components/NavHeaders.vue';
 export default {
+    components: { NavHeader },
     data() {
         return {
             takeout: [],

src/pages/storedetails.vue

@@ -1,11 +1,13 @@
 <config>
 {
     "navigationBarTitleText": "商品详情",
+    "navigationBarTextStyle": "white",
     "navigationStyle": "custom",
 }
 </config>
 <template>
     <div class="container">
+        <nav-header></nav-header>
         <van-sticky>
             <swiper class="swiper" @change="swiperChange" :current="current">
                 <swiper-item v-for="(item, index) in banners" :key="index">
@@ -39,6 +41,7 @@
                 </div>
             </div>
         </van-sticky>
+
         <div class="conTent">
             <div class="text">详情</div>
             <div class="border"></div>
@@ -113,7 +116,9 @@
 </template>
 <script>
 import { mapState } from 'vuex';
+import NavHeader from '../components/NavHeader.vue';
 export default {
+    components: { NavHeader },
     data() {
         return {
             swiperCurrent: 0,
@@ -196,7 +201,6 @@ export default {
         height: 20px;
         line-height: 20px;
         text-align: center;
-        font-weight: bold;
         color: #ffffff;
         background: rgba(0, 0, 0, 0.3);
         border-radius: 9px;