refactor: 更新u-tabs组件使用方式及样式调整

2026-08-06 02:47:25 +08:00 · 2026-07-01 10:07:55 +08:00
parent dc2bef455a
commit 6654c1de51
16 changed files with 246 additions and 153 deletions
--- a/pages/cart/coupon/index.vue
+++ b/pages/cart/coupon/index.vue
@@ -1,15 +1,12 @@
 <template>
  <div class="wrapper">
    <u-tabs
+      class="coupon-tabs"
      :list="list"
-      :is-scroll="false"
-      :active-color="lightColor"
-      :current="current"
-      @change="
-        (i) => {
-          current = i;
-        }
-      "
+      :scrollable="false"
+      :lineColor="lightColor"
+      :activeStyle="{ color: lightColor }"
+      v-model:current="current"
    >
    </u-tabs>

@@ -160,6 +157,11 @@ export default {
 .wrapper {
  background: #f9f9f9;
  overflow: hidden;
+
+  .coupon-tabs {
+    width: 100%;
+    background: #fff;
+  }
 }
 .coupon-item {
  display: flex;
--- a/pages/mine/distribution/join.vue
+++ b/pages/mine/distribution/join.vue
@@ -2,10 +2,10 @@
  <view class="wrapper">
    <u-tabs
      :list="list"
-      :is-scroll="false"
-      :current="current"
-      @change="change"
-      :active-color="$lightColor"
+      :scrollable="false"
+      v-model:current="current"
+      :lineColor="lightColor"
+      :activeStyle="{ color: lightColor }"
    ></u-tabs>

  
@@ -53,6 +53,7 @@ export default {
  data() {
    return {
      current:0,
+      lightColor: this.$lightColor,
      list: [
        {
          name: "推广人资料",
--- a/pages/mine/myCollect.vue
+++ b/pages/mine/myCollect.vue
@@ -10,12 +10,12 @@
 			<template #center>
 				<view class="slot-wrap">
 					<u-tabs
-						:active-color="lightColor"
+						:lineColor="lightColor"
+						:activeStyle="{ color: lightColor }"
 						class="collect-tabs"
 						:list="navList"
-						:is-scroll="true"
-						:current="tabCurrentIndex"
-						@change="tabClick"
+						:scrollable="true"
+						v-model:current="tabCurrentIndex"
 					></u-tabs>
 				</view>
 			</template>
@@ -206,13 +206,6 @@
 				});
 			},

-			/**
-			 * 顶部tab点击
-			 */
-			tabClick(index) {
-				this.tabCurrentIndex = index;
-			},
-
 			/**
 			 * 查看商品详情
 			 */
--- a/pages/order/afterSales/afterSales.vue
+++ b/pages/order/afterSales/afterSales.vue
@@ -2,12 +2,12 @@
  <view class="content">
    <view class="u-tabs-box">
      <u-tabs
-        bg-color="#fff"
        :list="list"
-        :is-scroll="false"
-        :current="current"
+        :scrollable="false"
+        v-model:current="current"
        @change="change"
-        :active-color="$lightColor"
+        :lineColor="$lightColor"
+        :activeStyle="{ color: $lightColor }"
      ></u-tabs>
    </view>
    <div class="u-tabs-search">
@@ -272,7 +272,8 @@ export default {
    /**
     * 切换tab页时，初始化数据
     */
-    change(index) {
+    change(e) {
+      const index = typeof e === 'object' && e != null ? e.index : e;
      this.current = index;
      this.params = {
        pageNumber: 1,
--- a/pages/order/evaluate/myEvaluate.vue
+++ b/pages/order/evaluate/myEvaluate.vue
@@ -2,8 +2,15 @@
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
-        <u-tabs :list="list" :is-scroll="false" inactive-color="#333" :current="current" class="utabs"
-          :active-color="$lightColor" @change="changeTab"></u-tabs>
+        <u-tabs
+          :list="list"
+          :scrollable="false"
+          :inactiveStyle="{ color: '#333' }"
+          v-model:current="current"
+          class="utabs"
+          :lineColor="$lightColor"
+          :activeStyle="{ color: $lightColor }"
+        ></u-tabs>
      </view>
      <swiper class="swiper-box" :current="current" @change="changeSwiper" duration="500">
        <swiper-item v-for="(item, listIndex) in list" :key="listIndex">
@@ -183,13 +190,6 @@ export default {
      });
    },

-    /**
-     * 点击tab触发
-     */
-    changeTab(index) {
-      this.current = index;
-    },
-
    /**
     * 点击swiper
     */
--- a/pages/order/fillorder.vue
+++ b/pages/order/fillorder.vue
@@ -219,14 +219,14 @@
          </u-col>
        </u-row>
        <u-row>
-          <u-col :offset="0" :span="4" class="tl" style="text-align: left"
-            >备注信息</u-col
-          >
-          <u-col :span="8" textAlign="right">
+          <u-col :offset="0" :span="4" class="tl">备注信息</u-col>
+          <u-col :span="8" textAlign="right" class="remark-col">
            <u-input
-              style="text-align: right"
              class="uinput"
              v-model="remarkVal[index].remark"
+              border="none"
+              input-align="right"
+              placeholder="请输入备注信息"
            />
          </u-col>
        </u-row>
@@ -239,12 +239,15 @@
      @callbackInvoice="callbackInvoice"
      v-if="invoiceFlag"
    />
-    <u-select
-      @confirm="confirmDistribution"
+    <u-picker
      v-model:show="shippingFlag"
      v-if="shippingMethod.length != 0"
-      :list="shippingMethod"
-    ></u-select>
+      :columns="[shippingMethod]"
+      keyName="label"
+      valueName="value"
+      title="配送方式"
+      @confirm="confirmDistribution"
+    ></u-picker>

    <div class="box box5" v-if="orderMessage.priceDetailDTO">
      <div>
@@ -284,9 +287,9 @@
          orderMessage.priceDetailDTO.goodsPrice != null
        "
      >
-        <u-col :offset="0" :span="9" @click="GET_Discount()">优惠券</u-col>
+        <u-col :offset="0" :span="8" @click="GET_Discount()">优惠券</u-col>
        <u-col
-          :span="3"
+          :span="4"
          v-if="
            orderMessage.priceDetailDTO &&
            orderMessage.priceDetailDTO.couponPrice
@@ -299,9 +302,11 @@
          >
        </u-col>
        <!--unitPrice(orderMessage.priceDetailDTO.couponPrice)  -->
-        <u-col :span="3" v-else textAlign="right" @click="GET_Discount()">
-          {{ orderMessage.canUseCoupons.length || "0" }} 张可用
-          <u-icon name="arrow-right"></u-icon>
+        <u-col :span="4" v-else textAlign="right" class="coupon-col" @click="GET_Discount()">
+          <view class="coupon-col__content">
+            <text>{{ orderMessage.canUseCoupons.length || "0" }} 张可用</text>
+            <u-icon name="arrow-right" size="14" color="#909399"></u-icon>
+          </view>
        </u-col>
      </u-row>
      <div>
@@ -759,12 +764,16 @@ export default {

    // 选择配送
    async confirmDistribution(val) {
+      const selected = val?.value?.[0] || val?.[0];
+      if (!selected?.value) {
+        return;
+      }
      let res = await API_Trade.setShipMethod({
-        shippingMethod: val[0].value,
+        shippingMethod: selected.value,
        way: this.routerVal.way,
      });

-      this.shippingText = val[0].value;
+      this.shippingText = selected.value;
      if (res.data.success) {
        this.getOrderList();
      }
@@ -868,9 +877,21 @@ page {
 }

 .uinput {
-  ::v-deep input {
-    text-align: right;
+  width: 100%;
+
+  ::v-deep .u-input {
+    width: 100%;
  }
+
+  ::v-deep .u-input__content__field-wrapper__field {
+    text-align: right;
+    font-size: 28rpx;
+  }
+}
+
+.remark-col {
+  display: flex;
+  justify-content: flex-end;
 }

 .promotionNotice {
@@ -967,6 +988,15 @@ page {
  text-align: right;
 }

+.coupon-col__content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+  gap: 4rpx;
+  white-space: nowrap;
+}
+
 .bar {
  height: 4rpx;
  overflow: hidden;
--- a/pages/product/goods.vue
+++ b/pages/product/goods.vue
@@ -461,34 +461,7 @@ export default {
    },
  },
  mounted () {
-    const { windowHeight } = uni.getSystemInfoSync();
-    let bottomHeight = 0;
-    let topHeight = 0;
-    uni.getSystemInfo({
-      success: function (res) {
-        // res - 各种参数
-        let bottom = uni.createSelectorQuery().select(".page-bottom");
-        bottom
-          .boundingClientRect(function (data) {
-            if (data && data.height) {
-              //data - 各种参数
-              bottomHeight = data.height; // 获取元素宽度
-            }
-          })
-          .exec();
-        let top = uni.createSelectorQuery().select(".header");
-        top
-          .boundingClientRect(function (data) {
-            if (data && data.height) {
-              //data - 各种参数
-              topHeight = data.height; // 获取元素宽度
-            }
-          })
-          .exec();
-      },
-    });
-
-    this.productRefHeight = windowHeight - bottomHeight + "px";
+    this.calcProductHeight();
  },
  async onLoad (options) {
    this.routerVal = options;
@@ -516,6 +489,19 @@ export default {
  },

  methods: {
+    calcProductHeight () {
+      this.$nextTick(() => {
+        const { windowHeight } = uni.getWindowInfo();
+        uni.createSelectorQuery()
+          .in(this)
+          .select('#pageBottom')
+          .boundingClientRect((data) => {
+            const bottomHeight = data && data.height ? data.height : 0;
+            this.productRefHeight = `${windowHeight - bottomHeight}px`;
+          })
+          .exec();
+      });
+    },
    // 重新打开下架
    reStartTakeDownSale(){
      this.$refs.takeDownSale.show = true
--- a/pages/product/shopPage.vue
+++ b/pages/product/shopPage.vue
@@ -82,7 +82,13 @@

      <!-- 基础店铺模式 -->
      <div v-if="basePageData">
-        <u-tabs :list="tabs" :active-color="mainColor" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
+        <u-tabs
+          :list="tabs"
+          :lineColor="mainColor"
+          :activeStyle="{ color: mainColor }"
+          :scrollable="false"
+          v-model:current="current"
+        ></u-tabs>
        <div class="content" v-if="current == 0">
          <u-empty style='margin-top:100rpx' v-if="goodsList.length == 0" class="empty" text='暂无商品信息'></u-empty>
          <goodsTemplate style="width:100%;" v-else :res="goodsList" :storeName="false" />
@@ -396,11 +402,6 @@ export default {
      });
    },

-    /** 点击tab */
-    changeTab(index) {
-      this.current = index;
-    },
-
    /**
     * 店铺信息
     */
--- a/pages/promotion/lives.vue
+++ b/pages/promotion/lives.vue
@@ -9,7 +9,16 @@
    <u-swiper @click="clickSwiper" class="swiper" keyName="image" :list="swiperImg">

    </u-swiper>
-    <u-tabs :is-scroll="false" @change="changeTabs" :current="current" :active-color="activeColor" inactive-color="#606266" ref="tabs" :list="tabs"></u-tabs>
+    <u-tabs
+      :scrollable="false"
+      v-model:current="current"
+      @change="changeTabs"
+      :lineColor="activeColor"
+      :activeStyle="{ color: activeColor }"
+      :inactiveStyle="{ color: '#606266' }"
+      ref="tabs"
+      :list="tabs"
+    ></u-tabs>

    <div class="wrapper">
      <!-- 直播中 全部 直播回放 -->
@@ -114,8 +123,7 @@ export default {
    /**
     * 点击标签栏切换
     */
-    changeTabs(index) {
-      this.current = index;
+    changeTabs() {
      this.init();
    },

--- a/pages/tabbar/cart/cartList.vue
+++ b/pages/tabbar/cart/cartList.vue
@@ -17,7 +17,7 @@
      <image src="/static/emptyCart.png" mode="aspectFit"></image>
      <view class="empty-tips">
        空空如也
-        <navigator class="navigator" url="/pages/tabbar/home/index" open-type="switchTab">随便逛逛></navigator>
+        <navigator class="navigator" url="/pages/tabbar/home/index" open-type="switchTab">随便逛逛</navigator>
      </view>
    </view>
    <!-- 店铺商品信息 -->
--- a/pages/tabbar/home/title.vue
+++ b/pages/tabbar/home/title.vue
@@ -1,7 +1,12 @@
 <template>
 	<view>
 		<view>
-			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+			<u-tabs
+				:list="list"
+				:scrollable="false"
+				v-model:current="current"
+				@change="change"
+			></u-tabs>
 			<view v-if="showLoading" style="width:500rpx;margin:0 auto;text-align: center;height:800rpx;line-height: 800rpx;">
 				<u-loading mode="flower" ></u-loading>
 				<text>正在加载中</text>
@@ -136,13 +141,13 @@
 				}
 			},
 			change(e) {
+				const index = typeof e === 'object' && e != null ? e.index : e;
 				this.showLoading = true;
-				console.log(e)
-				this.current = e;
-				if (e == 0) {
+				this.current = index;
+				if (index == 0) {
 					this.params.status = "UN_READY"
 					this.params.pageNumber = 1;
-				} else if (e == 1) {
+				} else if (index == 1) {
 					this.params.status = "ALREADY_READY"
 					this.params.pageNumber = 1;
 				}