fix

pages/index/index.vue

@@ -17,18 +17,21 @@
 
       <view class="statistic ss-m-t-24">
         <view class="title ss-font-24 ss-m-b-20">
-          {{ `今日收款金额（成功收款${state.statistic?.todayPaymentCount || 0}笔）` }}
+          {{ `今日收款金额` }}
         </view>
         <view class="income flex justify-between align-center">
           <view class="left flex align-center">
             <view class="unit self-start">￥</view>
-            <view class="sincome ss-font-60">{{ fen2yuan(state.statistic.todayPaymentAmount || 0) }}</view>
+            <view class="sincome ss-font-60">{{ fen2yuan(state.statistic.todaySales || 0) }}</view>
           </view>
           <!-- <button class="right-btn ss-reset-button">查看详情</button> -->
         </view>
         <view class="des ss-m-t-20">
-          总销售额 {{ fen2yuan(state.statistic.totalSalesAmount) }} 元 | 成功退款 {{ state.statistic.refundCount }} 笔 |
+          总订单数 {{ state.statistic.total }} 笔 | 已完成订单 {{ state.statistic.countCompleted }} 笔 | 总付款额
-          退款金额 {{ fen2yuan(state.statistic.refundAmount) }} 元
+          {{ fen2yuan(state.statistic.totalPayPrice) }} 元
+        </view>
+        <view class="des ss-m-t-20">
+          取消订单 {{ state.statistic.countCanceled }} 笔 | 退款金额 {{ fen2yuan(state.statistic.totalRefundPrice) }} 元
         </view>
       </view>
 
@@ -37,13 +40,13 @@
         <view class="items">
           <view class="item" v-for="(item, index) in state.now" :key="item.name">
             <view class="label">{{ item.name }}</view>
-            <view class="value">{{ index !== 0 ? item.value : fen2yuan(item.value) }}</view>
+            <view class="value">{{ index.name?.includes('金额') ? fen2yuan(item.value) : item.value }}</view>
             <!-- <view class="last"> 昨日 {{ index === 0 ? fen2yuan(item.last) : item.last ? item.last : 0 }} </view> -->
           </view>
         </view>
       </view>
 
-      <view class="more ss-m-t-40">
+      <view class="more ss-m-t-40" style="margin-bottom: 40rpx">
         <view class="title ss-m-b-30">昨日数据</view>
         <view class="items">
           <view class="item" v-for="(item, index) in state.yesterday" :key="item.name">
@@ -75,43 +78,59 @@ const bgStyle = {
 
 const state = ref({
   statistic: {
-    todayPaymentCount: 0,
+    todaySales: 0,
-    todayPaymentAmount: 0,
+    countCompleted: 0, // 总完成订单笔数
-    totalSalesAmount: 0,
+    total: 0, // 总订单
-    refundCount: 0,
+    totalPayPrice: 0, // 总付款额
-    refundAmount: 0,
+    countCanceled: 0, // 总取消订单
+    totalRefundPrice: 0, // 总退款金额
   },
   now: [
     {
       name: '销售金额',
-      key: 'Amount',
+      key: 'todaySales',
       value: 0,
     },
     {
       name: '订单数',
-      key: 'orderCount',
+      key: 'todayOrders',
+      value: 0,
+    },
+    {
+      name: '待支付订单',
+      key: 'countPayTodo',
       value: 0,
     },
     {
       name: '待核销',
-      key: 'verificationOrderCount',
+      key: 'countTodoUnverified',
       value: 0,
     },
     {
       name: '待配送',
-      key: 'deliveryOrderCount',
+      key: 'countTodoWaitingDelivery',
+      value: 0,
+    },
+    {
+      name: '退款笔数',
+      key: 'todayRefunds',
       value: 0,
     },
   ],
   yesterday: [
     {
       name: '销售金额',
-      key: 'Amount',
+      key: 'yesterdaySales',
       value: 0,
     },
     {
       name: '订单数',
-      key: 'orderCount',
+      key: 'yesterdayOrders',
+      value: 0,
+    },
+    {
+      name: '退款金额',
+      key: 'yesterdayRefunds',
       value: 0,
     },
   ],
@@ -129,12 +148,13 @@ async function getStatistic() {
     state.value.statistic[key] = res.data[key]
   }
 
-  state.value.now[0].value = res.data.todayPaymentAmount ?? 0
+  for (let obj of state.value.now) {
-  state.value.yesterday[0].value = res.data.yesterdaySalesAmount ?? 0
+    obj.value = res.data[obj.key] ?? 0
-  state.value.now[1].value = res.data.orderCount
+  }
-  state.value.yesterday[1].value = res.data.yesterdayOrderCount
+
-  state.value.now[2].value = res.data.verificationOrderCount
+  for (let obj of state.value.yesterday) {
-  state.value.now[3].value = res.data.deliveryOrderCount
+    obj.value = res.data[obj.key] ?? 0
+  }
 }
 
 /**
@@ -200,7 +220,7 @@ onShow(() => {
   }
 
   .statistic {
-    height: 200rpx;
+    // height: 200rpx;
     background-color: #fffefe;
     opacity: 0.9;
     border-radius: 26rpx;

pages/index/order.vue

@@ -9,7 +9,21 @@
     :leftIcon="''"
   >
     <pb-sticky bgColor="#fff">
-      <pb-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
+      <pb-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab">
+        <template #right>
+          <uni-icons
+            type="search"
+            size="20"
+            :color="state.searchStatus ? '#ff3000' : '#000'"
+            :style="{
+              position: 'relative',
+              top: '2px',
+              'margin-right': '20rpx',
+            }"
+            @click="onSearch"
+          ></uni-icons>
+        </template>
+      </pb-tabs>
     </pb-sticky>
     <p-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" bgColor="transparent" />
     <view v-if="state.pagination.total > 0">
@@ -25,6 +39,11 @@
               {{ formatOrderStatus(order) }}
             </view>
           </view>
+          <view class="ss-p-x-20">
+            <view class="order-no">收货人：{{ order?.user.nickname }}</view>
+            <view class="order-no">联系电话：{{ order?.user.mobile }}</view>
+            <view class="order-no">下单时间：{{ formatDate(order.createTime) }}</view>
+          </view>
           <view class="border-bottom" v-for="item in order.items" :key="item.id">
             <p-goods-item
               :img="item.picUrl"
@@ -112,6 +131,29 @@
       :status="state.loadStatus"
       :content-text="{ contentdown: '上拉加载更多' }"
     />
+    <uni-popup type="right" ref="filterPopupRef" background-color="#fff">
+      <view class="query-form">
+        <uni-forms v-model="state.queryForm">
+          <uni-forms-item name="userNickname" label="昵称">
+            <uni-easyinput type="text" v-model="state.queryForm.userNickname" placeholder="请输入昵称" clearable />
+          </uni-forms-item>
+          <uni-forms-item label="联系电话" name="userMobile">
+            <uni-easyinput type="number" v-model="state.queryForm.userMobile" placeholder="请输入联系电话" />
+          </uni-forms-item>
+          <uni-forms-item name="no" label="订单号">
+            <uni-easyinput type="text" v-model="state.queryForm.no" placeholder="请输入订单号" clearable />
+          </uni-forms-item>
+          <uni-forms-item name="createTime" label="创建时间">
+            <uni-datetime-picker v-model="state.queryForm.createTime" type="daterange" />
+          </uni-forms-item>
+        </uni-forms>
+
+        <view class="btns">
+          <button class="ss-reset-button query-btn shadow" @tap="onSubmit">查询</button>
+          <button class="ss-reset-button reset-btn shadow" @tap="reset">重置</button>
+        </view>
+      </view>
+    </uni-popup>
   </pb-layout>
 </template>
 
@@ -122,7 +164,7 @@ import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-
 import { fen2yuan, formatOrderColor, formatOrderStatus, handleOrderButtons } from '@/peach/hooks/useGoods'
 import peach from '@/peach'
 import _, { isEmpty } from 'lodash'
-import { resetPagination } from '@/peach/utils'
+import { resetPagination, formatDate } from '@/peach/utils'
 
 const bgStyle = {
   backgroundColor: 'var(--ui-BG-1)',
@@ -138,8 +180,17 @@ const state = ref({
     pageSize: 6,
   },
   loadStatus: '',
+  queryForm: {
+    userNickname: '',
+    userMobile: '',
+    no: '',
+    createTime: [],
+  },
+  searchStatus: false,
 })
 
+const filterPopupRef = ref(null)
+
 const tabMaps = [
   {
     name: '全部',
@@ -192,6 +243,34 @@ function totalPricePerOrder(order) {
   }
 }
 
+function onSearch() {
+  filterPopupRef.value.open()
+}
+
+function onSubmit() {
+  state.value.pagination.list = []
+  filterPopupRef.value.close()
+  state.value.searchStatus = true
+  getOrderList()
+}
+
+function resetFields() {
+  state.value.queryForm = {
+    userNickname: '',
+    userMobile: '',
+    no: '',
+    createTime: [],
+  }
+}
+
+function reset() {
+  state.value.pagination.list = []
+  state.value.searchStatus = false
+  filterPopupRef.value.close()
+  resetFields()
+  getOrderList()
+}
+
 // 切换选项卡
 function onTabsChange(e) {
   if (state.value.currentTab === e.index) {
@@ -224,6 +303,7 @@ async function getOrderList() {
         ? false
         : true
       : undefined,
+    ...state.value.queryForm,
   })
 
   data.list.forEach((item) => {
@@ -263,6 +343,8 @@ onReachBottom(() => {
 // 下拉刷新
 onPullDownRefresh(() => {
   resetPagination(state.value.pagination)
+  state.value.searchStatus = false
+  resetFields()
   getOrderList()
   setTimeout(function () {
     uni.stopPullDownRefresh()
@@ -311,8 +393,7 @@ onPullDownRefresh(() => {
 
 .order-list-card-box {
   .order-card-header {
-    height: 80rpx;
+    padding-top: 20rpx;
-
     .order-no {
       font-size: 26rpx;
       font-weight: 500;
@@ -370,6 +451,29 @@ onPullDownRefresh(() => {
   }
 }
 
+.query-form {
+  width: 600rpx;
+  margin-top: 230rpx;
+  padding: 0 20rpx;
+  .btns {
+    display: flex;
+    gap: 20px;
+    .query-btn {
+      flex: 1;
+      height: 80rpx;
+      border-radius: 40rpx;
+      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+      color: $white;
+    }
+    .reset-btn {
+      flex: 1;
+      height: 80rpx;
+      border-radius: 40rpx;
+      border: 1px solid #000;
+    }
+  }
+}
+
 :deep(.uni-tooltip-popup) {
   background: var(--ui-BG);
 }

pages/product/manageGoods.vue

@@ -364,8 +364,9 @@ function getProduct(id) {
     richValues.value = res.data.description ? res.data.description + '<p><br/></p>' : ''
 
     // 循环遍历 categoryList，从二级分类找出和 formData.value.categoryId 相等的
+
     let tempCategory = categoryList.value.find((item) => {
-      return item.children.find((child) => {
+      return item.children?.find((child) => {
         return child.id === formData.value.categoryId
       })
     })
@@ -378,6 +379,7 @@ function getProduct(id) {
       }).name
 
     // 循环遍历 brandList, 从一级分类找出和 formData.value.brandId 相等的
+
     let tempBrand = brandList.value.find((item) => {
       return item.id === formData.value.brandId
     })

pages/user/info/index.vue

@@ -135,7 +135,7 @@
 <script setup>
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import sheep from '@/peach'
+import peach from '@/peach'
 import $store from '@/peach/store'
 import UserApi from '@/peach/api/member/user'
 import { mobile, idCard, bankName, bankCode } from '@/peach/validate/form'
@@ -292,7 +292,7 @@ const rules = {
   },
 }
 
-const statusBarHeight = sheep.$platform.device.statusBarHeight * 2
+const statusBarHeight = peach.$platform.device.statusBarHeight * 2
 
 const timeSlotRef = ref(null)
 const formRef = ref(null)

peach/api/member/user.js

@@ -56,6 +56,10 @@ const UserUtil = {
       url: '/shop/particulars/update',
       method: 'PUT',
       data,
+      custom: {
+        successMsg: '修改成功',
+        auth: true,
+      },
     })
   },
 

peach/api/trade/order.js

@@ -1,49 +1,66 @@
 import request from '@/peach/request'
 
 const OrderUtil = {
-    // 获取订单列表
+  // 获取订单列表
-    getOrderPage: (data) => {
+  getOrderPage: (data) => {
-        return request({
+    for (let key in data) {
-            url: '/trade/order/page',
+      if (!data[key]) {
-            method: 'GET',
+        delete data[key]
-            params: data,
+      }
-        })
+    }
-    },
 
-    // 订单详情
+    let temp = JSON.parse(JSON.stringify(data))
-    getOrderDetail: (data) => {
-        return request({
-            url: '/trade/order/get-detail',
-            method: 'GET',
-            params: data,
-        })
-    },
 
-    // 商品核销
+    if (temp.createTime.length > 0) {
-    orderVerification: (data) => {
+      temp['createTime[0]'] = data.createTime[0] + ' 00:00:00'
-        return request({
+      temp['createTime[1]'] = data.createTime[1] + ' 00:00:00'
-            url: '/trade/order/verify-code',
+    }
-            method: 'POST',
+    delete temp.createTime
-            data: data,
-        })
-    },
 
-    // 完成订单
+    const queryString = Object.keys(temp)
-    orderComplete: (data) => {
+      .map((key) => encodeURIComponent(key) + '=' + temp[key])
-        return request({
+      .join('&')
-            url: '/trade/order/completed-order',
-            method: 'POST',
-            data: data,
-        })
-    },
 
-    // 订单商品评论
+    return request({
-    orderComment: (id) => {
+      url: `/trade/order/page?${queryString}`,
-        return request({
+      method: 'GET',
-            url: '/product/comment/get-by-order-id/' + id,
+    })
-            method: 'GET',
+  },
-        })
+
-    },
+  // 订单详情
+  getOrderDetail: (data) => {
+    return request({
+      url: '/trade/order/get-detail',
+      method: 'GET',
+      params: data,
+    })
+  },
+
+  // 商品核销
+  orderVerification: (data) => {
+    return request({
+      url: '/trade/order/verify-code',
+      method: 'POST',
+      data: data,
+    })
+  },
+
+  // 完成订单
+  orderComplete: (data) => {
+    return request({
+      url: '/trade/order/completed-order',
+      method: 'POST',
+      data: data,
+    })
+  },
+
+  // 订单商品评论
+  orderComment: (id) => {
+    return request({
+      url: '/product/comment/get-by-order-id/' + id,
+      method: 'GET',
+    })
+  },
 }
 
 export default OrderUtil

peach/request/index.js

@@ -64,7 +64,7 @@ const http = new Request({
 
 http.interceptors.request.use(
   (config) => {
-    console.log(config)
+    // console.log(config)
     // 自定义处理【auth 授权】：必须登录的接口，否则提示登录
     if (config.custom.auth && !$store('user').isLogin) {
       // 处理登录

peach/ui/pb-tabs/pb-tabs.vue

@@ -1,74 +1,71 @@
 <template>
-    <view class="u-tabs">
+  <view class="u-tabs">
-        <view class="u-tabs__wrapper">
+    <view class="u-tabs__wrapper">
-            <slot name="left" />
+      <slot name="left" />
-            <view class="u-tabs__wrapper__scroll-view-wrapper">
+      <view class="u-tabs__wrapper__scroll-view-wrapper">
-                <scroll-view
+        <scroll-view
-                    :scroll-x="scrollable"
+          :scroll-x="scrollable"
-                    :scroll-left="scrollLeft"
+          :scroll-left="scrollLeft"
-                    scroll-with-animation
+          scroll-with-animation
-                    enable-flex
+          enable-flex
-                    class="u-tabs__wrapper__scroll-view white-space"
+          class="u-tabs__wrapper__scroll-view white-space"
-                    :show-scrollbar="false"
+          :show-scrollbar="false"
-                    ref="u-tabs__wrapper__scroll-view"
+          ref="u-tabs__wrapper__scroll-view"
-                >
+        >
-                    <view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
+          <view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
-                        <view
+            <view
-                            class="u-tabs__wrapper__nav__item"
+              class="u-tabs__wrapper__nav__item"
-                            v-for="(item, index) in list"
+              v-for="(item, index) in list"
-                            :key="index"
+              :key="index"
-                            @tap="clickHandler(item, index)"
+              @tap="clickHandler(item, index)"
-                            :ref="`u-tabs__wrapper__nav__item-${index}`"
+              :ref="`u-tabs__wrapper__nav__item-${index}`"
-                            :style="[addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
+              :style="[addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
-                            :class="[
+              :class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
-                                `u-tabs__wrapper__nav__item-${index}`,
+            >
-                                item.disabled && 'u-tabs__wrapper__nav__item--disabled',
+              <text
-                            ]"
+                :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
-                        >
+                class="u-tabs__wrapper__nav__item__text"
-                            <text
+                :style="[textStyle(index)]"
-                                :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
+                >{{ item[keyName] }}</text
-                                class="u-tabs__wrapper__nav__item__text"
+              >
-                                :style="[textStyle(index)]"
-                                >{{ item[keyName] }}</text
-                            >
-                        </view>
-                        <!-- #ifdef APP-NVUE -->
-                        <view
-                            class="u-tabs__wrapper__nav__line"
-                            ref="u-tabs__wrapper__nav__line"
-                            :style="[
-                                {
-                                    width: addUnit(lineWidth),
-                                    height: addUnit(lineHeight),
-                                    background: lineColor ? lineColor : 'var(--ui-BG-Main)',
-                                    backgroundSize: lineBgSize,
-                                },
-                            ]"
-                        ></view>
-                        <!-- #endif -->
-                        <!-- #ifndef APP-NVUE -->
-                        <view
-                            class="u-tabs__wrapper__nav__line"
-                            ref="u-tabs__wrapper__nav__line"
-                            :style="[
-                                {
-                                    width: addUnit(lineWidth),
-                                    transform: `translate(${lineOffsetLeft}px)`,
-                                    transitionDuration: `${firstTime ? 0 : duration}ms`,
-                                    height: addUnit(lineHeight),
-                                    background: lineColor ? lineColor : 'var(--ui-BG-Main)',
-                                    backgroundSize: lineBgSize,
-                                },
-                            ]"
-                        >
-                        </view>
-                        <!-- #endif -->
-                    </view>
-                </scroll-view>
             </view>
-            <slot name="right" />
+            <!-- #ifdef APP-NVUE -->
-        </view>
+            <view
+              class="u-tabs__wrapper__nav__line"
+              ref="u-tabs__wrapper__nav__line"
+              :style="[
+                {
+                  width: addUnit(lineWidth),
+                  height: addUnit(lineHeight),
+                  background: lineColor ? lineColor : 'var(--ui-BG-Main)',
+                  backgroundSize: lineBgSize,
+                },
+              ]"
+            ></view>
+            <!-- #endif -->
+            <!-- #ifndef APP-NVUE -->
+            <view
+              class="u-tabs__wrapper__nav__line"
+              ref="u-tabs__wrapper__nav__line"
+              :style="[
+                {
+                  width: addUnit(lineWidth),
+                  transform: `translate(${lineOffsetLeft}px)`,
+                  transitionDuration: `${firstTime ? 0 : duration}ms`,
+                  height: addUnit(lineHeight),
+                  background: lineColor ? lineColor : 'var(--ui-BG-Main)',
+                  backgroundSize: lineBgSize,
+                },
+              ]"
+            >
+            </view>
+            <!-- #endif -->
+          </view>
+        </scroll-view>
+      </view>
+      <slot name="right" />
     </view>
+  </view>
 </template>
 
 <script>
@@ -90,343 +87,341 @@ const dom = uni.requireNativePlugin('dom')
  * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
  */
 export default {
-    name: 'pb-tabs',
+  name: 'pb-tabs',
-    data() {
+  data() {
+    return {
+      addStyle,
+      addUnit,
+      firstTime: true,
+      scrollLeft: 0,
+      scrollViewWidth: 0,
+      lineOffsetLeft: 0,
+      tabsRect: {
+        left: 0,
+      },
+      innerCurrent: 0,
+      moving: false,
+    }
+  },
+  props: {
+    // 滑块的移动过渡时间，单位ms
+    duration: {
+      type: Number,
+      default: 300,
+    },
+    // tabs标签数组
+    list: {
+      type: Array,
+      default: [],
+    },
+    // 滑块颜色
+    lineColor: {
+      type: String,
+      default: '',
+    },
+    // 菜单选择中时的样式
+    activeStyle: {
+      type: [String, Object],
+      default() {
         return {
-            addStyle,
+          color: '#303133',
-            addUnit,
-            firstTime: true,
-            scrollLeft: 0,
-            scrollViewWidth: 0,
-            lineOffsetLeft: 0,
-            tabsRect: {
-                left: 0,
-            },
-            innerCurrent: 0,
-            moving: false,
         }
+      },
     },
-    props: {
+    // 菜单非选中时的样式
-        // 滑块的移动过渡时间，单位ms
+    inactiveStyle: {
-        duration: {
+      type: [String, Object],
-            type: Number,
+      default() {
-            default: 300,
+        return {
-        },
+          color: '#606266',
-        // tabs标签数组
+        }
-        list: {
+      },
-            type: Array,
-            default: [],
-        },
-        // 滑块颜色
-        lineColor: {
-            type: String,
-            default: '',
-        },
-        // 菜单选择中时的样式
-        activeStyle: {
-            type: [String, Object],
-            default() {
-                return {
-                    color: '#303133',
-                }
-            },
-        },
-        // 菜单非选中时的样式
-        inactiveStyle: {
-            type: [String, Object],
-            default() {
-                return {
-                    color: '#606266',
-                }
-            },
-        },
-        // 滑块长度
-        lineWidth: {
-            type: [String, Number],
-            default: 20,
-        },
-        // 滑块高度
-        lineHeight: {
-            type: [String, Number],
-            default: 3,
-        },
-        // 滑块背景显示大小，当滑块背景设置为图片时使用
-        lineBgSize: {
-            type: String,
-            default: 'cover',
-        },
-        // 菜单item的样式
-        itemStyle: {
-            type: [String, Object],
-            default() {
-                return {
-                    height: '44px',
-                }
-            },
-        },
-        // 菜单是否可滚动
-        scrollable: {
-            type: Boolean,
-            default: true,
-        },
-        // 当前选中标签的索引
-        current: {
-            type: [Number, String],
-            default: 0,
-        },
-        // 默认读取的键名
-        keyName: {
-            type: String,
-            default: 'name',
-        },
     },
-    watch: {
+    // 滑块长度
-        current: {
+    lineWidth: {
-            immediate: true,
+      type: [String, Number],
-            handler(newValue, oldValue) {
+      default: 20,
-                // 内外部值不相等时，才尝试移动滑块
-                if (newValue !== this.innerCurrent) {
-                    this.innerCurrent = newValue
-                    this.$nextTick(() => {
-                        this.resize()
-                    })
-                }
-            },
-        },
-        // list变化时，重新渲染list各项信息
-        list() {
-            this.$nextTick(() => {
-                this.resize()
-            })
-        },
     },
-    computed: {
+    // 滑块高度
-        textStyle() {
+    lineHeight: {
-            return (index) => {
+      type: [String, Number],
-                const style = {}
+      default: 3,
-                // 取当期是否激活的样式
-                const customeStyle =
-                    index === this.innerCurrent ? addStyle(this.activeStyle) : addStyle(this.inactiveStyle)
-                // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
-                if (this.list[index].disabled) {
-                    style.color = '#c8c9cc'
-                }
-                return deepMerge(customeStyle, style)
-            }
-        },
     },
-    async mounted() {
+    // 滑块背景显示大小，当滑块背景设置为图片时使用
-        this.init()
+    lineBgSize: {
+      type: String,
+      default: 'cover',
     },
-    methods: {
+    // 菜单item的样式
-        $uGetRect(selector, all) {
+    itemStyle: {
-            return new Promise((resolve) => {
+      type: [String, Object],
-                uni.createSelectorQuery()
+      default() {
-                    .in(this)
+        return {
-                    [all ? 'selectAll' : 'select'](selector)
+          height: '44px',
-                    .boundingClientRect((rect) => {
+        }
-                        if (all && Array.isArray(rect) && rect.length) {
+      },
-                            resolve(rect)
+    },
-                        }
+    // 菜单是否可滚动
-                        if (!all && rect) {
+    scrollable: {
-                            resolve(rect)
+      type: Boolean,
-                        }
+      default: true,
-                    })
+    },
-                    .exec()
+    // 当前选中标签的索引
-            })
+    current: {
-        },
+      type: [Number, String],
-        setLineLeft() {
+      default: 0,
-            const tabItem = this.list[this.innerCurrent]
+    },
-            if (!tabItem) {
+    // 默认读取的键名
-                return
+    keyName: {
-            }
+      type: String,
-            // 获取滑块该移动的位置
+      default: 'name',
-            let lineOffsetLeft = this.list
+    },
-                .slice(0, this.innerCurrent)
+  },
-                .reduce((total, curr) => total + curr.rect.width, 0)
+  watch: {
-            // 获取下划线的数值px表示法
+    current: {
-            const lineWidth = getPx(this.lineWidth)
+      immediate: true,
-            this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
+      handler(newValue, oldValue) {
-            // #ifdef APP-NVUE
+        // 内外部值不相等时，才尝试移动滑块
-            // 第一次移动滑块，无需过渡时间
+        if (newValue !== this.innerCurrent) {
-            this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
+          this.innerCurrent = newValue
-            // #endif
+          this.$nextTick(() => {
-
-            // 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
-            // 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
-            if (this.firstTime) {
-                setTimeout(() => {
-                    this.firstTime = false
-                }, 10)
-            }
-        },
-        // nvue下设置滑块的位置
-        animation(x, duration = 0) {
-            // #ifdef APP-NVUE
-            const ref = this.$refs['u-tabs__wrapper__nav__line']
-            animation.transition(ref, {
-                styles: {
-                    transform: `translateX(${x}px)`,
-                },
-                duration,
-            })
-            // #endif
-        },
-        // 点击某一个标签
-        clickHandler(item, index) {
-            // 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
-            this.$emit('click', {
-                ...item,
-                index,
-            })
-            // 如果disabled状态，返回
-            if (item.disabled) return
-            this.innerCurrent = index
             this.resize()
-            this.$emit('change', {
+          })
-                ...item,
+        }
-                index,
+      },
-            })
-        },
-        init() {
-            sleep().then(() => {
-                this.resize()
-            })
-        },
-        setScrollLeft() {
-            // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
-            const tabRect = this.list[this.innerCurrent]
-            // 累加得到当前item到左边的距离
-            const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
-                return total + curr.rect.width
-            }, 0)
-            // 此处为屏幕宽度
-            const windowWidth = sys().windowWidth
-            // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
-            let scrollLeft =
-                offsetLeft -
-                (this.tabsRect.width - tabRect.rect.width) / 2 -
-                (windowWidth - this.tabsRect.right) / 2 +
-                this.tabsRect.left / 2
-            // 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
-            scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
-            this.scrollLeft = Math.max(0, scrollLeft)
-        },
-        // 获取所有标签的尺寸
-        resize() {
-            // 如果不存在list，则不处理
-            if (this.list.length === 0) {
-                return
-            }
-            Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
-                this.tabsRect = tabsRect
-                this.scrollViewWidth = 0
-                itemRect.map((item, index) => {
-                    // 计算scroll-view的宽度，这里
-                    this.scrollViewWidth += item.width
-                    // 另外计算每一个item的中心点X轴坐标
-                    this.list[index].rect = item
-                })
-                // 获取了tabs的尺寸之后，设置滑块的位置
-                this.setLineLeft()
-                this.setScrollLeft()
-            })
-        },
-        // 获取导航菜单的尺寸
-        getTabsRect() {
-            return new Promise((resolve) => {
-                this.queryRect('u-tabs__wrapper__scroll-view').then((size) => resolve(size))
-            })
-        },
-        // 获取所有标签的尺寸
-        getAllItemRect() {
-            return new Promise((resolve) => {
-                const promiseAllArr = this.list.map((item, index) =>
-                    this.queryRect(`u-tabs__wrapper__nav__item-${index}`, true)
-                )
-                Promise.all(promiseAllArr).then((sizes) => resolve(sizes))
-            })
-        },
-        // 获取各个标签的尺寸
-        queryRect(el, item) {
-            // #ifndef APP-NVUE
-            // $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
-            // 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
-            return new Promise((resolve) => {
-                this.$uGetRect(`.${el}`).then((size) => {
-                    resolve(size)
-                })
-            })
-            // #endif
-
-            // #ifdef APP-NVUE
-            // nvue下，使用dom模块查询元素高度
-            // 返回一个promise，让调用此方法的主体能使用then回调
-            return new Promise((resolve) => {
-                dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], (res) => {
-                    resolve(res.size)
-                })
-            })
-            // #endif
-        },
     },
+    // list变化时，重新渲染list各项信息
+    list() {
+      this.$nextTick(() => {
+        this.resize()
+      })
+    },
+  },
+  computed: {
+    textStyle() {
+      return (index) => {
+        const style = {}
+        // 取当期是否激活的样式
+        const customeStyle = index === this.innerCurrent ? addStyle(this.activeStyle) : addStyle(this.inactiveStyle)
+        // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
+        if (this.list[index].disabled) {
+          style.color = '#c8c9cc'
+        }
+        return deepMerge(customeStyle, style)
+      }
+    },
+  },
+  async mounted() {
+    this.init()
+  },
+  methods: {
+    $uGetRect(selector, all) {
+      return new Promise((resolve) => {
+        uni
+          .createSelectorQuery()
+          .in(this)
+          [all ? 'selectAll' : 'select'](selector)
+          .boundingClientRect((rect) => {
+            if (all && Array.isArray(rect) && rect.length) {
+              resolve(rect)
+            }
+            if (!all && rect) {
+              resolve(rect)
+            }
+          })
+          .exec()
+      })
+    },
+    setLineLeft() {
+      const tabItem = this.list[this.innerCurrent]
+      if (!tabItem) {
+        return
+      }
+      // 获取滑块该移动的位置
+      let lineOffsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => total + curr.rect.width, 0)
+      // 获取下划线的数值px表示法
+      const lineWidth = getPx(this.lineWidth)
+      this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
+      // #ifdef APP-NVUE
+      // 第一次移动滑块，无需过渡时间
+      this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
+      // #endif
+
+      // 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
+      // 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
+      if (this.firstTime) {
+        setTimeout(() => {
+          this.firstTime = false
+        }, 10)
+      }
+    },
+    // nvue下设置滑块的位置
+    animation(x, duration = 0) {
+      // #ifdef APP-NVUE
+      const ref = this.$refs['u-tabs__wrapper__nav__line']
+      animation.transition(ref, {
+        styles: {
+          transform: `translateX(${x}px)`,
+        },
+        duration,
+      })
+      // #endif
+    },
+    // 点击某一个标签
+    clickHandler(item, index) {
+      // 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
+      this.$emit('click', {
+        ...item,
+        index,
+      })
+      // 如果disabled状态，返回
+      if (item.disabled) return
+      this.innerCurrent = index
+      this.resize()
+      this.$emit('change', {
+        ...item,
+        index,
+      })
+    },
+    init() {
+      sleep().then(() => {
+        this.resize()
+      })
+    },
+    setScrollLeft() {
+      // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+      const tabRect = this.list[this.innerCurrent]
+      // 累加得到当前item到左边的距离
+      const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
+        return total + curr.rect.width
+      }, 0)
+      // 此处为屏幕宽度
+      const windowWidth = sys().windowWidth
+      // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
+      let scrollLeft =
+        offsetLeft -
+        (this.tabsRect.width - tabRect.rect.width) / 2 -
+        (windowWidth - this.tabsRect.right) / 2 +
+        this.tabsRect.left / 2
+      // 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
+      scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
+      this.scrollLeft = Math.max(0, scrollLeft)
+    },
+    // 获取所有标签的尺寸
+    resize() {
+      // 如果不存在list，则不处理
+      if (this.list.length === 0) {
+        return
+      }
+      Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+        this.tabsRect = tabsRect
+        this.scrollViewWidth = 0
+        itemRect.map((item, index) => {
+          // 计算scroll-view的宽度，这里
+          this.scrollViewWidth += item.width
+          // 另外计算每一个item的中心点X轴坐标
+          this.list[index].rect = item
+        })
+        // 获取了tabs的尺寸之后，设置滑块的位置
+        this.setLineLeft()
+        this.setScrollLeft()
+      })
+    },
+    // 获取导航菜单的尺寸
+    getTabsRect() {
+      return new Promise((resolve) => {
+        this.queryRect('u-tabs__wrapper__scroll-view').then((size) => resolve(size))
+      })
+    },
+    // 获取所有标签的尺寸
+    getAllItemRect() {
+      return new Promise((resolve) => {
+        const promiseAllArr = this.list.map((item, index) =>
+          this.queryRect(`u-tabs__wrapper__nav__item-${index}`, true)
+        )
+        Promise.all(promiseAllArr).then((sizes) => resolve(sizes))
+      })
+    },
+    // 获取各个标签的尺寸
+    queryRect(el, item) {
+      // #ifndef APP-NVUE
+      // $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
+      // 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+      return new Promise((resolve) => {
+        this.$uGetRect(`.${el}`).then((size) => {
+          resolve(size)
+        })
+      })
+      // #endif
+
+      // #ifdef APP-NVUE
+      // nvue下，使用dom模块查询元素高度
+      // 返回一个promise，让调用此方法的主体能使用then回调
+      return new Promise((resolve) => {
+        dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], (res) => {
+          resolve(res.size)
+        })
+      })
+      // #endif
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .u-tabs {
-    background: #fff;
+  background: #fff;
-    border-bottom: 2rpx solid #eee;
+  border-bottom: 2rpx solid #eee;
 
-    &__wrapper {
+  &__wrapper {
+    @include flex;
+    align-items: center;
+
+    &__scroll-view-wrapper {
+      flex: 1;
+      /* #ifndef APP-NVUE */
+      overflow: auto hidden;
+      /* #endif */
+    }
+
+    &__nav {
+      @include flex;
+      position: relative;
+
+      &__item {
+        padding: 0 11px;
         @include flex;
         align-items: center;
+        justify-content: center;
 
-        &__scroll-view-wrapper {
+        &--disabled {
-            flex: 1;
+          /* #ifndef APP-NVUE */
-            /* #ifndef APP-NVUE */
+          cursor: not-allowed;
-            overflow: auto hidden;
+          /* #endif */
-            /* #endif */
         }
 
-        &__nav {
+        &__text {
-            @include flex;
+          font-size: 14px;
-            position: relative;
+          color: #606266;
+          white-space: nowrap !important;
 
-            &__item {
+          &--disabled {
-                padding: 0 11px;
+            color: #c8c9cc !important;
-                @include flex;
+          }
-                align-items: center;
-                justify-content: center;
-
-                &--disabled {
-                    /* #ifndef APP-NVUE */
-                    cursor: not-allowed;
-                    /* #endif */
-                }
-
-                &__text {
-                    font-size: 14px;
-                    color: #606266;
-                    white-space: nowrap !important;
-
-                    &--disabled {
-                        color: #c8c9cc !important;
-                    }
-                }
-            }
-
-            &__line {
-                height: 3px;
-                background: #3c9cff;
-                width: 30px;
-                position: absolute;
-                bottom: 2px;
-                border-radius: 100px;
-                transition-property: transform;
-                transition-duration: 300ms;
-            }
         }
+      }
+
+      &__line {
+        height: 3px;
+        background: #3c9cff;
+        width: 30px;
+        position: absolute;
+        bottom: 2px;
+        border-radius: 100px;
+        transition-property: transform;
+        transition-duration: 300ms;
+      }
     }
+  }
 }
 </style>