refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能
- 优化状态管理和事件处理逻辑，简化代码结构
- 更新样式和布局以适应新组件结构
- 添加新功能和修复已知问题，提升用户体验

pages/promotion/bargain/detail.vue

@@ -17,7 +17,7 @@
               </div>
               <div class="flex price-box">
                 <div class="purchase-price">
-                  当前:<span>￥{{ activityData.surplusPrice == 0 ? this.bargains.purchasePrice :unitPrice(activityData.surplusPrice)}}</span>
+                  当前:<span>￥{{ activityData.surplusPrice == 0 ? bargains.purchasePrice : unitPrice(activityData.surplusPrice)}}</span>
                 </div>
                 <div class="max-price">原价:<span>￥{{unitPrice(bargainDetail.price)}}</span>
 
@@ -47,7 +47,7 @@
             </div>
           </div>
           <!-- 我要开团 -->
-          <div class="start" v-if="activityData.memberId != isLogin().id" @click="startOpenGroup">我要开团
+          <div class="start" v-if="activityData.memberId != loginUser.id" @click="startOpenGroup">我要开团
           </div>
         </div>
       </div>
@@ -84,7 +84,7 @@
       <u-modal title="恭喜您砍掉了" v-model:show="Bargaining" mask-close-able :show-confirm-button="false"
         :title-style="{color: lightColor}">
         <view class="slot-content">
-          <u-count-to :start-val="0" ref="uCountTo" font-size="100" :color="lightColor" :end-val="kanjiaPrice"
+          <u-count-to :start-val="0" ref="uCountToRef" font-size="100" :color="lightColor" :end-val="kanjiaPrice"
             :decimals="2" :autoplay="autoplay"></u-count-to><span class="price">元</span>
         </view>
       </u-modal>
@@ -103,233 +103,226 @@
         :goodsName="bargainDetail.goodsName" v-if="shareFlage " />
 
       <!-- 购买 -->
-      <popupGoods ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="bargainDetail"
+      <popupGoods ref="popupGoodsRef" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="bargainDetail"
         :goodsSpec="goodsSpec" v-if="bargainDetail.id " @handleClickSku="getGoodsDetail" />
 
     </div>
   </div>
 </template>
 
-<script>
-import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+// #ifdef MP-WEIXIN
+import { onShareAppMessage } from '@dcloudio/uni-app'
+// #endif
+import { useStore } from '@/store'
+import popupGoods from '@/components/m-buy/goods'
 import {
   getBargainDetail,
   getBargainActivity,
   openBargain,
   getBargainLog,
   helpBargain,
-} from "@/api/promotions";
-import shares from "@/components/m-share/index";
-import config from "@/config/config";
-export default {
-  components: {
-    shares,
-    popupGoods,
-  },
-  data() {
-    return {
-      style: {
-        img:"display:block"
-      },
-      background: {
-        backgroundColor: "transparent",
-      },
-      maskFlag: false, //商品弹框
-      shareFlage: false,
-      lightColor: this.$lightColor,
-      bargains: {},
-      bargainDetail: {}, //砍价商品详情
-      Bargaining: false, //砍价弹出框
-      helpBargainFlage: false, //帮砍弹出框
-      autoplay: false, //砍价金额滚动
-      kanjiaPrice: 0, //砍价金额
-      totalPercent: 0, //砍价半分比
-      activityData: "", //砍价活动
-      cutPrice: 0, //已砍金额
-      params: {
-        // id: "", //砍价活动ID
-        // kanjiaActivityGoodsId: "", //砍价商品SkuID
-        // kanjiaActivityId: "", //邀请活动ID，有值说明是被邀请人
-        // status: "", //状态
-      },
+} from '@/api/promotions'
+import shares from '@/components/m-share/index'
+import config from '@/config/config'
+import { unitPrice, noPassByName, isLogin } from '@/utils/filters.js'
 
-      logData: [], // 帮砍记录
-      //获取帮砍记录参数
-      logParams: {
-        pageNumber: 1,
-        pageSize: 20,
-        kanJiaActivityId: "",
-      },
+const store = useStore()
 
-      goodsDetail: {}, //商品详情
-      goodsSpec: {}, //商品规格
-      selectedGoods: "", //选择的商品
-    };
-  },
-  onLoad(options) {
-    this.routerVal = options;
-    if (options.activityId) {
-      this.params.kanjiaActivityId = options.activityId;
+const lightColor = computed(() => store.getters.lightColor)
+
+const style = ref({
+  img: 'display:block',
+})
+
+const background = ref({
+  backgroundColor: 'transparent',
+})
+
+const maskFlag = ref(false)
+const shareFlage = ref(false)
+const bargains = ref<any>({})
+const bargainDetail = ref<any>({})
+const Bargaining = ref(false)
+const helpBargainFlage = ref(false)
+const autoplay = ref(false)
+const kanjiaPrice = ref(0)
+const totalPercent = ref(0)
+const activityData = ref<any>({})
+const cutPrice = ref<number | string>(0)
+
+const params = ref<Record<string, any>>({})
+
+const logData = ref<any[]>([])
+
+const logParams = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  kanJiaActivityId: '',
+})
+
+const goodsSpec = ref<any>({})
+const routerVal = ref<Record<string, string>>({})
+
+const loginUser = computed(() => isLogin() || {})
+
+const popupGoodsRef = ref<any>(null)
+const uCountToRef = ref<any>(null)
+
+onLoad((options) => {
+  routerVal.value = options || {}
+  if (options?.activityId) {
+    params.value.kanjiaActivityId = options.activityId
+  }
+})
+
+// #ifdef MP-WEIXIN
+onShareAppMessage(() => {
+  return {
+    path: share(),
+    title: `请快来帮我砍一刀${bargainDetail.value.goodsName}`,
+    imageUrl: bargainDetail.value.thumbnail || config.logo,
+  }
+})
+// #endif
+
+onShow(() => {
+  init()
+})
+
+watch(Bargaining, (val) => {
+  if (val) {
+    nextTick(() => {
+      uCountToRef.value?.start?.()
+    })
+  }
+})
+
+watch(
+  activityData,
+  (val) => {
+    if (val) {
+      totalPercent.value =
+        100 -
+        Math.floor((val.surplusPrice / bargainDetail.value.price) * 100)
+      cutPrice.value = (
+        bargainDetail.value.price - activityData.value.surplusPrice
+      ).toFixed(2)
+
+      logParams.value.kanJiaActivityId = val.id
+
+      if (params.value.kanjiaActivityId && val.help) {
+        helpBargainFlage.value = true
+      }
+
+      getBargainLogList()
     }
   },
+  { immediate: true }
+)
 
-  // #ifdef MP-WEIXIN
-  onShareAppMessage(res) {
-    return {
-      path: this.share(),
-      title: `请快来帮我砍一刀${this.bargainDetail.goodsName}`,
-      imageUrl: this.bargainDetail.thumbnail || config.logo,
-    };
-  },
-  // #endif
+function share() {
+  return (
+    '/pages/promotion/bargain/detail?id=' +
+    routerVal.value.id +
+    '&activityId=' +
+    activityData.value.id
+  )
+}
 
-  onShow() {
-    this.init();
-  },
-  watch: {
-    // 砍价弹窗
-    Bargaining(val) {
-      if (val) {
-        this.$nextTick(() => {
-          this.$refs.uCountTo.start();
-        });
-      }
-    },
-    // 监听砍价活动金额
-    activityData: {
-      handler(val) {
-        if (val) {
-          // 计算砍价百分比
-          this.totalPercent =
-            100 -
-            Math.floor((val.surplusPrice / this.bargainDetail.price) * 100);
-          this.cutPrice = (
-            this.bargainDetail.price - this.activityData.surplusPrice
-          ).toFixed(2);
-          // 获取砍价日志
-          this.logParams.kanJiaActivityId = val.id;
+function back() {
+  if (getCurrentPages().length > 1) {
+    uni.navigateBack()
+  } else {
+    uni.redirectTo({
+      url: `/pages/promotion/bargain/list`,
+    })
+  }
+}
 
-          // 判断是否是帮砍
-          if (this.params.kanjiaActivityId && val.help) {
-            this.helpBargainFlage = true;
-          }
+function startOpenGroup() {
+  uni.redirectTo({
+    url: `/pages/promotion/bargain/list`,
+  })
+}
 
-          this.getBargainLogList();
-        }
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    share() {
-      return (
-        "/pages/promotion/bargain/detail?id=" +
-        this.routerVal.id +
-        "&activityId=" +
-        this.activityData.id
-      );
-    },
-    // 返回上一级
-    back() {
-      // 进行路由栈判定如果当前路由栈是空的就返回拼团列表页面
-      if (getCurrentPages().length > 1) {
-        uni.navigateBack();
-      } else {
-        uni.redirectTo({
-          url: `/pages/promotion/bargain/list`,
-        });
-      }
-    },
+function closePopupBuy() {
+  maskFlag.value = false
+}
 
-    // 跳转选择商品页面
-    startOpenGroup() {
-      uni.redirectTo({
-        url: `/pages/promotion/bargain/list`,
-      });
-    },
-    closePopupBuy(val) {
-      this.maskFlag = false;
-    },
-    closeShare() {
-      this.shareFlage = false;
-    },
-    // 邀请砍价
-    shareBargain() {
-      this.shareFlage = true;
-    },
+function closeShare() {
+  shareFlage.value = false
+}
 
-    // 获取商品详情
-    getGoodsDetail() {
-      uni.showLoading({
-        title: "加载中",
-        mask: true,
-      });
-      this.$refs.popupGoods.buy({
-        skuId: this.bargainDetail.id,
-        id: this.routerVal.id,
-        num: 1,
-        cartType: "KANJIA",
-      });
-    },
+function shareBargain() {
+  shareFlage.value = true
+}
 
-    // 初始化商品以及砍价活动
-    async init() {
-      // 获取商品
-      let res = await getBargainDetail(this.routerVal.id);
-      if (res.data.success) {
-        this.bargainDetail = res.data.result.goodsSku;
-        this.bargains = res.data.result;
-        // 被邀请活动id
-        if (this.params.kanjiaActivityId) {
-        } else {
-          this.params.kanjiaActivityGoodsId = this.routerVal.id;
-        }
-        // 获取砍价活动
-        this.activity();
-      }
-    },
-    // 获取砍价活动
-    async activity() {
-      let res = await getBargainActivity(this.params);
-      // 判断当前是否是第一次进入，如果是第一次进入默认砍一刀
-      res.data.success
-        ? res.data.result.launch
-          ? (this.activityData = res.data.result)
-          : this.openActivity()
-        : "";
-    },
-    // 分页获取砍价活动-帮砍记录
-    async getBargainLogList() {
-      let res = await getBargainLog(this.logParams);
-      if (res.data.success) {
-        this.logData = res.data.result.records;
-      }
-    },
-    // 帮忙砍一刀
-    async handleClickHelpBargain() {
-      let res = await helpBargain(this.params.kanjiaActivityId);
-      if (res.data.success) {
-        this.helpBargainFlage = false;
-        this.kanjiaPrice = res.data.result.kanjiaPrice;
-        this.Bargaining = true;
-        // 帮砍完成之后查询帮砍记录
-        this.init();
-      } else {
-        this.helpBargainFlage = false;
-      }
-    },
-    // 发起砍价活动
-    async openActivity(data) {
-      let res = await openBargain({ id: this.routerVal.id });
-      if (res.data.success) {
-        this.kanjiaPrice = res.data.result.kanjiaPrice;
-        this.Bargaining = true;
-        // 查询帮砍记录
-        this.init();
-      }
-    },
-  },
-};
+function getGoodsDetail() {
+  uni.showLoading({
+    title: '加载中',
+    mask: true,
+  })
+  popupGoodsRef.value?.buy({
+    skuId: bargainDetail.value.id,
+    id: routerVal.value.id,
+    num: 1,
+    cartType: 'KANJIA',
+  })
+}
+
+async function init() {
+  const res = await getBargainDetail(routerVal.value.id)
+  if (res.data.success) {
+    bargainDetail.value = res.data.result.goodsSku
+    bargains.value = res.data.result
+    if (!params.value.kanjiaActivityId) {
+      params.value.kanjiaActivityGoodsId = routerVal.value.id
+    }
+    activity()
+  }
+}
+
+async function activity() {
+  const res = await getBargainActivity(params.value)
+  if (res.data.success) {
+    if (res.data.result.launch) {
+      activityData.value = res.data.result
+    } else {
+      openActivity()
+    }
+  }
+}
+
+async function getBargainLogList() {
+  const res = await getBargainLog(logParams.value)
+  if (res.data.success) {
+    logData.value = res.data.result.records
+  }
+}
+
+async function handleClickHelpBargain() {
+  const res = await helpBargain(params.value.kanjiaActivityId)
+  if (res.data.success) {
+    helpBargainFlage.value = false
+    kanjiaPrice.value = res.data.result.kanjiaPrice
+    Bargaining.value = true
+    init()
+  } else {
+    helpBargainFlage.value = false
+  }
+}
+
+async function openActivity() {
+  const res = await openBargain({ id: routerVal.value.id })
+  if (res.data.success) {
+    kanjiaPrice.value = res.data.result.kanjiaPrice
+    Bargaining.value = true
+    init()
+  }
+}
 </script>
 <style lang="scss">
 page {

pages/promotion/bargain/list.vue

@@ -15,58 +15,53 @@
   </div>
 </template>
 
-<script>
-import { getBargainList } from "@/api/promotions";
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow, onReachBottom } from '@dcloudio/uni-app'
+import { getBargainList } from '@/api/promotions'
 import goodsTemplate from '@/components/m-goods-list/promotion'
-export default {
-  components:{goodsTemplate},
-  data() {
-    return {
-      background: {
-        backgroundColor: "transparent",
-      },
-      params: {
-        promotionStatus: "START", //开始/上架
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      bargainList: [], //砍价活动列表
-    };
-  },
-  onShow() {
-    this.params.pageNumber = 1;
-    this.bargainList = [];
-    this.init();
-  },
-  onReachBottom() {
-    this.params.pageNumber++;
-    this.init();
-  },
-  methods: {
-    // 返回上一级
-    back() {
-      uni.switchTab({
-        url: "/pages/tabbar/home/index",
-      });
-    },
-    /**
-     * 初始化砍价列表
-     */
-    async init() {
-      let res = await getBargainList(this.params); //砍价列表
-      if (res.data.success) {
-        this.bargainList.push(...res.data.result.records);
-      }
-    },
 
-    // 跳转到砍价详情
-    navigateToBargainDetail(val) {
-      uni.navigateTo({
-        url: `/pages/promotion/bargain/detail?id=${val.id}`,
-      });
-    },
-  },
-};
+const background = ref({
+  backgroundColor: 'transparent',
+})
+
+const params = ref({
+  promotionStatus: 'START',
+  pageNumber: 1,
+  pageSize: 20,
+})
+
+const bargainList = ref<any[]>([])
+
+onShow(() => {
+  params.value.pageNumber = 1
+  bargainList.value = []
+  init()
+})
+
+onReachBottom(() => {
+  params.value.pageNumber++
+  init()
+})
+
+function back() {
+  uni.switchTab({
+    url: '/pages/tabbar/home/index',
+  })
+}
+
+async function init() {
+  const res = await getBargainList(params.value)
+  if (res.data.success) {
+    bargainList.value.push(...res.data.result.records)
+  }
+}
+
+function navigateToBargainDetail(val: any) {
+  uni.navigateTo({
+    url: `/pages/promotion/bargain/detail?id=${val.id}`,
+  })
+}
 </script>
 <style lang="scss">
 page {
@@ -129,4 +124,4 @@ page {
 .empty {
   height: 400rpx;
 }
-</style>
+</style>

pages/promotion/bargain/log.vue

@@ -1,80 +1,80 @@
 <template>
-  <div class="box">
-    <div v-if="bargainLog.length != 0">
-      <div v-for="(item,index) in bargainLog" class="flex" :key="index">
-        <div>
-          <u-image border-radius="20" width='230' height="230" :src="item.thumbnail"></u-image>
-        </div>
-        <div class="goods">
-          <div class="wes-2">
+  <view class="box">
+    <view v-if="bargainLog.length != 0">
+      <view v-for="(item,index) in bargainLog" class="flex" :key="index">
+        <view class="goods-img">
+          <u-image radius="20rpx" width="230rpx" height="230rpx" :src="item.thumbnail"></u-image>
+        </view>
+        <view class="goods">
+          <view class="wes-2">
             {{item.goodsName}}
-          </div>
-          <div>
-            还剩<span class="surplusPrice">{{unitPrice(item.surplusPrice)}}元</span>
-          </div>
+          </view>
+          <view class="surplus">
+            还剩<text class="surplusPrice">{{unitPrice(item.surplusPrice)}}元</text>
+          </view>
 
-          <div @click="navigateToBargainDetail(item)" v-if="item.status == 'START'" class="buy">
+          <view @click="navigateToBargainDetail(item)" v-if="item.status == 'START'" class="buy">
             继续免费领
-          </div>
-        </div>
-        <div class="tips-box">
-          <div class="tips" :class="[item.status]">
+          </view>
+        </view>
+        <view class="tips-box">
+          <view class="tips" :class="[item.status]">
             {{statusWay[item.status]}}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-else>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-else>
       <u-empty style="margin-top:20%;" text="暂无砍价活动"></u-empty>
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
 
-<script>
-import { getMineBargainLog } from "@/api/promotions";
-export default {
-  data() {
-    return {
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-      bargainLog: [],
-      statusWay: {
-        START: "砍价开始",
-        FAIL: "砍价失败",
-        SUCCESS: "砍价成功",
-        END: "活动结束",
-      },
-    };
-  },
-  onReachBottom() {
-    this.params.pageNumber++;
-    this.init();
-  },
-  onShow() {
-    this.params.pageNumber = 1;
-    this.bargainLog = [];
-    this.init();
-  },
-  methods: {
-    // 初始化砍价记录
-    async init() {
-      let res = await getMineBargainLog(this.params);
-      if (res.data.success) {
-        this.bargainLog.push(...res.data.result.records);
-      }
-    },
-    // 跳转到砍价详情
-    navigateToBargainDetail(val) {
-      uni.navigateTo({
-        url: `/pages/promotion/bargain/detail?id=${val.kanjiaActivityGoodsId}`,
-      });
-    },
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow, onReachBottom } from '@dcloudio/uni-app'
+import { getMineBargainLog } from '@/api/promotions'
+import { unitPrice } from '@/utils/filters.js'
+
+const params = ref({
+  pageNumber: 1,
+  pageSize: 10,
+})
+
+const bargainLog = ref<any[]>([])
+
+const statusWay: Record<string, string> = {
+  START: '砍价开始',
+  FAIL: '砍价失败',
+  SUCCESS: '砍价成功',
+  END: '活动结束',
+}
+
+onReachBottom(() => {
+  params.value.pageNumber++
+  init()
+})
+
+onShow(() => {
+  params.value.pageNumber = 1
+  bargainLog.value = []
+  init()
+})
+
+async function init() {
+  const res = await getMineBargainLog(params.value)
+  if (res.data.success) {
+    bargainLog.value.push(...res.data.result.records)
+  }
+}
+
+function navigateToBargainDetail(val: any) {
+  uni.navigateTo({
+    url: `/pages/promotion/bargain/detail?id=${val.kanjiaActivityGoodsId}`,
+  })
+}
 </script>
-<style scoped>
+<style>
 page {
   background: #fff;
 }
@@ -84,14 +84,20 @@ page {
   padding: 0 32rpx;
   background: #fff;
 }
+.goods-img {
+  width: 230rpx;
+  height: 230rpx;
+  flex: 0 0 230rpx;
+}
 .buy {
   background: $light-color;
   color: #fff;
-  display: inline;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 10rpx 0;
   border-radius: 100rpx;
   width: 200rpx;
-  text-align: center;
   font-size: 24rpx;
   margin-top: 20rpx;
 }
@@ -113,6 +119,11 @@ page {
   font-weight: bold;
   color: $light-color;
 }
+.surplus {
+  color: #333;
+  font-size: 26rpx;
+  margin-top: 12rpx;
+}
 .goods {
   margin: 0 20rpx;
   display: flex;
@@ -122,7 +133,8 @@ page {
 }
 .flex {
   border-bottom: 1rpx solid #f7f7f7;
-
+  display: flex;
+  align-items: center;
   padding: 20rpx 0;
   margin: 10rpx 0;
 }
@@ -138,4 +150,4 @@ page {
 .FAIL {
   color: $main-color;
 }
-</style>
+</style>