style(client): 我的订单样式优化

src/PageMine/orderModules/index.vue

@@ -1,18 +1,13 @@
 <template>
-  <view class="container">
+  <view class="order-modules">
     <page-navbar bgColor="#fff" title="我的订单"></page-navbar>
 
-    <u-sticky bgColor="#fff">
-      <u-tabs
-        lineWidth="40"
-        :list="list"
-        :current="current"
-        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
-      />
+    <u-sticky bgColor="#fff" :customNavHeight="topIconDistance">
+      <base-tabs :list="list" :current="current" />
     </u-sticky>
 
     <view class="order-box">
-      <view class="order-item" v-for="(item, index) of 3" :key="index">
+      <view class="order-item" v-for="(item, index) of 10" :key="index">
         <view class="item-top">
           <view class="top-left">
             <image src="@/static/home/icon_home_detail_shop.png" class="img"></image>
@@ -21,7 +16,7 @@
           <view class="top-right"> 待付款 </view>
         </view>
 
-        <view class="goods-item" v-for="(item, index) of 3" :key="index">
+        <view class="goods-item" v-for="(item, index) of 2" :key="index">
           <view class="item-left">
             <image src="@/static/QR57a.jpg" class="img"></image>
           </view>
@@ -37,14 +32,72 @@
         <u-line margin="24rpx 0"></u-line>
 
         <view class="price-box">
-          <view class="price">需付款￥1559.9</view>
+          <!-- <view class="price">需付款￥1559.9</view> -->
+          <view class="price">实款￥1559.9</view>
         </view>
 
         <view class="btn-box">
-          <button class="btn btn2">继续付款</button>
-          <!-- <button class="btn btn1">查看卷码</button>
-          <button class="btn btn2">再来一单</button>
-          <button class="btn btn2">退款进度</button> -->
+          <!-- 待付款 -->
+          <!-- <base-text
+            text="放弃支付"
+            width="160rpx"
+            height="60rpx"
+            fontSize="28rpx"
+            background="#fff"
+            color="#616570"
+            :baseTextStyle="baseTextStyle"
+          />
+          <base-text
+            text="继续支付"
+            width="160rpx"
+            height="60rpx"
+            fontSize="28rpx"
+            background="#fff"
+          /> -->
+          <!-- 带使用 -->
+          <!-- <base-text
+            text="查看券码"
+            width="160rpx"
+            height="60rpx"
+            fontSize="28rpx"
+            background="#fff"
+            color="#616570"
+            :baseTextStyle="baseTextStyle"
+          />
+          <base-text
+            text="再来一单"
+            width="160rpx"
+            height="60rpx"
+            fontSize="28rpx"
+            background="#fff"
+          /> -->
+          <!-- 已完成 -->
+          <base-text
+            text="再来一单"
+            width="160rpx"
+            height="60rpx"
+            fontSize="28rpx"
+            background="#fff"
+            color="#616570"
+            :baseTextStyle="baseTextStyle"
+          />
+          <base-text
+            text="去评价"
+            width="160rpx"
+            height="60rpx"
+            fontSize="28rpx"
+            background="#fff"
+          />
+          <!-- 退款/取消 -->
+          <!-- <base-text
+            text="再次购买"
+            width="188rpx"
+            height="60rpx"
+            fontSize="28rpx"
+            background="#fff"
+            color="#616570"
+            :baseTextStyle="baseTextStyle"
+          /> -->
         </view>
       </view>
     </view>
@@ -58,33 +111,44 @@ export default {
       current: 0,
       list: [
         {
-          name: '待付款',
+          name: '全部',
           type: 0,
         },
         {
-          name: '已付款',
+          name: '待付款',
           type: 1,
         },
         {
-          name: '已完成',
+          name: '待使用',
           type: 3,
         },
         {
-          name: '已关闭',
+          name: '已完成',
           type: 4,
         },
+        {
+          name: '退款/取消',
+          type: 5,
+        },
       ],
     };
   },
+  computed: {
+    baseTextStyle() {
+      return {
+        marginRight: '20rpx',
+      };
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.container {
+.order-modules {
   font-size: 28rpx;
   padding: 0 0 30rpx;
   .order-box {
-    margin-top: 18rpx;
+    margin-top: 24rpx;
 
     .order-item {
       padding: 34rpx 32rpx;
@@ -166,37 +230,12 @@ export default {
         font-size: 30rpx;
         font-weight: bold;
       }
-
-      .btn-box {
-        display: flex;
-        justify-content: flex-end;
-
-        .btn {
-          padding: 0 24rpx;
-          border-radius: 8rpx;
-          box-sizing: border-box;
-          margin-right: 24rpx;
-          height: 60rpx;
-          line-height: 60rpx;
-          font-size: 28rpx;
-        }
-
-        .btn:last-child {
-          margin: 0;
-        }
-
-        .btn1 {
-          color: #616570;
-          border: 2rpx solid #616570;
-        }
-
-        .btn2 {
-          color: #215ebe;
-          border: 2rpx solid #215ebe;
-        }
-      }
     }
   }
+  .btn-box {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 </style>
 

src/components/base-tabs/base-tabs.vue

@@ -0,0 +1,74 @@
+<template>
+  <view class="base-tabs">
+    <u-tabs
+      :list="list"
+      @click="handleClick"
+      :lineWidth="lineWidth"
+      lineColor="#215ebe"
+      :activeStyle="activeStyle"
+      :inactiveStyle="inactiveStyle"
+      :itemStyle="itemStyle"
+      :scrollable="true"
+    ></u-tabs>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'base-tabs',
+  props: {
+    list: {
+      type: Array,
+      default: [],
+    },
+    height: {
+      type: String,
+      default: '44px',
+    },
+    lineWidth: {
+      type: Number,
+      default: 30,
+    },
+    paddingLeft: {
+      type: String,
+      default: '0px',
+    },
+    paddingRight: {
+      type: String,
+      default: '0px',
+    },
+  },
+  computed: {
+    activeStyle() {
+      return {
+        color: '#215ebe',
+        fontWeight: 'bold',
+      };
+    },
+    inactiveStyle() {
+      return {
+        color: '#333333',
+        transform: 'scale(1)',
+      };
+    },
+    itemStyle() {
+      let { height, paddingLeft, paddingRight } = this;
+      return {
+        height,
+        paddingLeft,
+        paddingRight,
+      };
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.base-tabs {
+}
+</style>

src/components/base-text/base-text.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="base-text">
+  <view class="base-text" @click="handleClick">
     <view :style="[textStyle]">{{ text }}</view>
   </view>
 </template>
@@ -8,6 +8,12 @@
 export default {
   name: 'base-text',
   props: {
+    baseTextStyle: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
     text: {
       type: String,
       default: '',
@@ -62,9 +68,15 @@ export default {
         borderRadius,
         textAlign,
         lineHeight: height,
-        border: ` 2rpx solid ${borderColor} `,
+        border: `2rpx solid ${borderColor}`,
+        ...this.baseTextStyle,
       };
     },
   },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    },
+  },
 };
 </script>

src/mixin/index.js

@@ -10,12 +10,35 @@ const globalMixins = {
   data() {
     return {
       str: '--',
+      topIconDistance: '',
+      statusBarHeight: '', //状态栏高度
+      navBarHeight: '', //导航栏高度
     };
   },
   computed: {
     ...mapGetters(['userId', 'gender', 'avatar', 'nickname', 'invitationCode', 'location']),
   },
-  methods: {},
+  onShow() {
+    this.getSystemInfo();
+  },
+  methods: {
+    getSystemInfo() {
+      uni.getSystemInfo({
+        success: res => {
+          // 获取手机顶部状态栏的高度
+          this.statusBarHeight = res.statusBarHeight || 0;
+
+          // 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
+          const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+          this.navBarHeight =
+            menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;
+
+          // 计算顶部图标距离
+          this.topIconDistance = this.statusBarHeight + this.navBarHeight;
+        },
+      });
+    },
+  },
 };
 
 export default globalMixins;