refactor: 四端完成 Options API → script setup + vuex → pinia 迁移

- buyer(95) / seller(169) / im(53) / manager(280) 共 597 个组件全部从 Options API 转换为 <script setup>
- 四端 vuex 全部移除，状态管理统一迁移至 pinia 4（stores/ 目录）
- util.js 等基础设施去除 vm 首参依赖；全局属性（$Message/$filters 等）在 script 内改为具名导入
- 被外部 ref 访问的公共组件均已补齐 defineExpose（清单见各端 MIGRATION-VUE3.md）
- 各端 eslint 启用 vue/component-api-style 防止新代码回退 Options API
- 四端 yarn build 全部通过；迁移约定与注意事项已更新至各端 MIGRATION-VUE3.md

buyer/src/pages/promotion/PointGoodsDetail.vue

@@ -93,6 +93,18 @@
 </template>
 
 <script>
+export default {
+  name: "PointGoodsDetail",
+  beforeRouteEnter(to, from, next) {
+    window.scrollTo(0, 0);
+    next();
+  },
+};
+</script>
+
+<script setup>
+import { ref, computed, onMounted, nextTick } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import Search from "@/components/Search";
 import { addCartGoods } from "@/api/cart.js";
@@ -104,115 +116,109 @@ import {
   E_COUPON_CART_POINTS,
 } from "@/constants/goodsType";
 
-export default {
-  name: "PointGoodsDetail",
-  components: { Search },
-  beforeRouteEnter(to, from, next) {
-    window.scrollTo(0, 0);
-    next();
-  },
-  created() {
-    this.getGoodsDetail();
-  },
-  mounted() {
-    window.addEventListener("scroll", this.handleScroll);
-  },
-  data() {
-    return {
-      goodsMsg: {},
-      goodsSku: {},
-      isLoading: false,
-      onceFlag: true,
-      count: 1,
-      loading: false,
-    };
-  },
-  computed: {
-    isECouponSku() {
-      return isECoupon(this.goodsSku.goodsType);
-    },
-    displayStock() {
-      if (this.isECouponSku) {
-        return getECouponStock(this.goodsSku);
+const route = useRoute();
+const router = useRouter();
+
+const goodsMsg = ref({});
+const goodsSku = ref({});
+const isLoading = ref(false);
+const onceFlag = ref(true);
+const count = ref(1);
+const loading = ref(false);
+const itemIntroGoods = ref(null);
+
+const isECouponSku = computed(() => {
+  return isECoupon(goodsSku.value.goodsType);
+});
+const displayStock = computed(() => {
+  if (isECouponSku.value) {
+    return getECouponStock(goodsSku.value);
+  }
+  return Number(goodsSku.value.quantity) || 0;
+});
+const quantityMax = computed(() => {
+  if (isECouponSku.value) {
+    return getECouponMaxBuyNum(goodsSku.value);
+  }
+  const qty = Number(goodsSku.value.quantity) || 0;
+  return qty > 0 ? qty : 1;
+});
+const isOutOfStock = computed(() => {
+  return displayStock.value <= 0;
+});
+
+function getGoodsDetail() {
+  isLoading.value = true;
+  pointGoodsDetail(route.query.id)
+    .then((res) => {
+      isLoading.value = false;
+      if (res.success) {
+        goodsMsg.value = res.result;
+        goodsSku.value = res.result.goodsSku || {};
+        syncCountWithQuantity();
+      } else {
+        Message.error(res.message);
+        router.push("/");
       }
-      return Number(this.goodsSku.quantity) || 0;
-    },
-    quantityMax() {
-      if (this.isECouponSku) {
-        return getECouponMaxBuyNum(this.goodsSku);
+    })
+    .catch(() => {
+      router.push("/");
+    });
+}
+
+function syncCountWithQuantity() {
+  const max = quantityMax.value;
+  if (max <= 0) {
+    count.value = 1;
+    return;
+  }
+  if (count.value > max) count.value = max;
+  if (count.value < 1) count.value = 1;
+}
+
+function pointBuy() {
+  const params = {
+    num: count.value,
+    skuId: goodsMsg.value.skuId,
+    cartType: E_COUPON_CART_POINTS,
+  };
+  loading.value = true;
+  addCartGoods(params)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        router.push({ path: "/pay", query: { way: params.cartType } });
+      } else {
+        Message.warning(res.message);
       }
-      const qty = Number(this.goodsSku.quantity) || 0;
-      return qty > 0 ? qty : 1;
-    },
-    isOutOfStock() {
-      return this.displayStock <= 0;
-    },
-  },
-  methods: {
-    getGoodsDetail() {
-      this.isLoading = true;
-      pointGoodsDetail(this.$route.query.id)
-        .then((res) => {
-          this.isLoading = false;
-          if (res.success) {
-            this.goodsMsg = res.result;
-            this.goodsSku = res.result.goodsSku || {};
-            this.syncCountWithQuantity();
-          } else {
-            Message.error(res.message);
-            this.$router.push("/");
-          }
-        })
-        .catch(() => {
-          this.$router.push("/");
-        });
-    },
-    syncCountWithQuantity() {
-      const max = this.quantityMax;
-      if (max <= 0) {
-        this.count = 1;
-        return;
-      }
-      if (this.count > max) this.count = max;
-      if (this.count < 1) this.count = 1;
-    },
-    pointBuy() {
-      const params = {
-        num: this.count,
-        skuId: this.goodsMsg.skuId,
-        cartType: E_COUPON_CART_POINTS,
-      };
-      this.loading = true;
-      addCartGoods(params)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.$router.push({ path: "/pay", query: { way: params.cartType } });
-          } else {
-            Message.warning(res.message);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    handleScroll() {
-      if (this.onceFlag) {
-        this.$nextTick(() => {
-          this.changeHeight();
-        });
-        this.onceFlag = false;
-      }
-    },
-    changeHeight() {
-      const goodsDetailCon = document.querySelector(".item-intro");
-      if (!goodsDetailCon || !this.$refs.itemIntroGoods) return;
-      let heightCss = window.getComputedStyle(goodsDetailCon).height;
-      heightCss = parseInt(heightCss.substr(0, heightCss.length - 2), 10) + 89;
-      this.$refs.itemIntroGoods.style.height = heightCss + "px";
-    },
-  },
-};
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
+function handleScroll() {
+  if (onceFlag.value) {
+    nextTick(() => {
+      changeHeight();
+    });
+    onceFlag.value = false;
+  }
+}
+
+function changeHeight() {
+  const goodsDetailCon = document.querySelector(".item-intro");
+  if (!goodsDetailCon || !itemIntroGoods.value) return;
+  let heightCss = window.getComputedStyle(goodsDetailCon).height;
+  heightCss = parseInt(heightCss.substr(0, heightCss.length - 2), 10) + 89;
+  itemIntroGoods.value.style.height = heightCss + "px";
+}
+
+getGoodsDetail();
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
 </script>
 
 <style scoped lang="scss">

buyer/src/pages/promotion/PointMall.vue

@@ -44,78 +44,92 @@
     <BaseFooter></BaseFooter>
   </div>
 </template>
-<script>
-import {pointGoods, pointGoodsCategory} from '@/api/promotion.js'
-export default {
-  data () {
-    return {
-      goodsList: [], // 积分商品列表
-      cateList: [{ // 商品分类
-        name: '全部分类',
-        id: 0
-      }], // 积分分类列表
-      params: { // 商品列表请求参数
-        pageNumber: 1,
-        pageSize: 20,
-        pointsGoodsCategoryId: ''
-      },
-      total: 0, // 商品总数
-      cateId: '' // 店铺分类id
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { pointGoods, pointGoodsCategory } from "@/api/promotion.js";
+
+const route = useRoute();
+const router = useRouter();
+
+const goodsList = ref([]); // 积分商品列表
+const cateList = ref([{ // 商品分类
+  name: "全部分类",
+  id: 0,
+}]); // 积分分类列表
+// 商品列表请求参数
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  pointsGoodsCategoryId: "",
+});
+const total = ref(0); // 商品总数
+const cateId = ref(""); // 店铺分类id
+
+onMounted(() => {
+  params.pointsGoodsCategoryId = route.query.categoryId || "";
+  cateId.value = route.query.categoryId || 0;
+  getList();
+  getCate();
+});
+
+/** 列表 API 返回 PointsGoods（thumbnail/goodsName 在顶层）；详情 API 才有 goodsSku */
+function itemThumbnail(item) {
+  return item?.goodsSku?.thumbnail || item?.thumbnail || "";
+}
+
+function itemGoodsName(item) {
+  return item?.goodsSku?.goodsName || item?.goodsName || "";
+}
+
+// 获取列表
+function getList() {
+  pointGoods(params).then((res) => {
+    if (res.success) {
+      goodsList.value = res.result.records;
+      total.value = res.result.total;
     }
-  },
-  mounted () {
-    this.params.pointsGoodsCategoryId = this.$route.query.categoryId || ''
-    this.cateId = this.$route.query.categoryId || 0
-    this.getList()
-    this.getCate()
-  },
-  methods: {
-    /** 列表 API 返回 PointsGoods（thumbnail/goodsName 在顶层）；详情 API 才有 goodsSku */
-    itemThumbnail (item) {
-      return item?.goodsSku?.thumbnail || item?.thumbnail || ''
-    },
-    itemGoodsName (item) {
-      return item?.goodsSku?.goodsName || item?.goodsName || ''
-    },
-    getList () { // 获取列表
-      pointGoods(this.params).then(res => {
-        if (res.success) {
-          this.goodsList = res.result.records
-          this.total = res.result.total
-        }
-      })
-    },
-    getCate () { // 获取分类
-      pointGoodsCategory(this.params).then(res => {
-        if (res.success) {
-          this.cateList.push(...res.result.records)
-        }
-      })
-    },
-    selectCate (item) { // 选择商品分类
-      let cateId = item.value === 0 ? '' : item.value
-      this.params.pointsGoodsCategoryId = cateId
-      this.getList()
-      this.$router.push({query: {categoryId: cateId}})
-    },
-    goGoodsDetail (id) { // 跳转商品详情
-      this.$router.push({path: '/pointGoodsDetail', query: {id}})
-      // let routerUrl = this.$router.resolve({
-      //   path: '/pointGoodsDetail',
-      //   query: {id}
-      // })
-      // window.open(routerUrl.href, '_blank')
-    },
-    changePageNum (val) { // 修改页码
-      this.params.pageNumber = val;
-      this.getList()
-    },
-    changePageSize (val) { // 修改页数
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList()
+  });
+}
+
+// 获取分类
+function getCate() {
+  pointGoodsCategory(params).then((res) => {
+    if (res.success) {
+      cateList.value.push(...res.result.records);
     }
-  }
+  });
+}
+
+// 选择商品分类
+function selectCate(item) {
+  let cateId = item.value === 0 ? "" : item.value;
+  params.pointsGoodsCategoryId = cateId;
+  getList();
+  router.push({ query: { categoryId: cateId } });
+}
+
+// 跳转商品详情
+function goGoodsDetail(id) {
+  router.push({ path: "/pointGoodsDetail", query: { id } });
+  // let routerUrl = router.resolve({
+  //   path: '/pointGoodsDetail',
+  //   query: {id}
+  // })
+  // window.open(routerUrl.href, '_blank')
+}
+
+// 修改页码
+function changePageNum(val) {
+  params.pageNumber = val;
+  getList();
+}
+
+// 修改页数
+function changePageSize(val) {
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList();
 }
 </script>
 <style lang="scss" scoped>

buyer/src/pages/promotion/seckill.vue

@@ -61,121 +61,127 @@
     <BaseFooter />
   </div>
 </template>
-<script>
+<script setup>
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
 import { seckillByDay } from "@/api/promotion";
-export default {
-  data () {
-    return {
-      list: [], // 秒杀时段列表
-      goodsList: [], // 商品列表
-      interval: null, // 定时器
-      currIndex: 0, // 当前时间段的下标
-      currTime: 0, // 当前显示的倒计时
-      diffSeconds: 0, // 倒计时时间戳
-      nowHour: new Date().getHours(), // 当前小时数
-    };
-  },
-  beforeUnmount () {
-    clearInterval(this.interval);
-  },
-  watch: {
-    currIndex (val) {
-      clearInterval(this.interval);
-      this.interval = null;
-      this.nowHour = new Date().getHours();
-      this.countDown(val);
-      this.goodsList = this.list[val].seckillGoodsList;
-    },
-    diffSeconds (val) {
-      const hours = Math.floor(val / 3600);
-      // 当前秒数 / 60，向下取整
-      // 获取到所有分钟数 3600 / 60 = 60分钟
-      // 对60取模，超过小时数的分钟数
-      const minutes = Math.floor(val / 60) % 60;
-      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
-      const seconds = val % 60;
-      this.currTime =
-        filteTime(hours) + ":" + filteTime(minutes) + ":" + filteTime(seconds);
-      if (val <= 0) {
-        clearInterval(this.interval);
-        this.interval = null;
-      }
-      function filteTime (time) {
-        if (time < 10) {
-          return "0" + time;
-        } else {
-          return time;
-        }
-      }
-    },
-  },
-  methods: {
-    getListByDay () {
-      // 当天秒杀活动
-      seckillByDay().then((res) => {
-        if (res.success) {
-          this.list = res.result;
-          this.goodsList = this.list[0].seckillGoodsList;
-          this.countDown(this.currIndex);
-        }
-      });
-    },
-    goGoodsDetail (skuId, goodsId) {
-      // 跳转商品详情
-      let routeUrl = this.$router.resolve({
-        path: "/goodsDetail",
-        query: { skuId, goodsId },
-      });
-      window.open(routeUrl.href, "_blank");
-    },
-    // 已售占比。没有库存时按售罄展示
-    salePercent (item) {
-      if (!item.quantity || item.quantity <= 0) return 100;
-      return Math.min(100, Math.ceil((item.salesNum / item.quantity) * 100));
-    },
-    // 场次已开始，且销量达到库存
-    isSoldOut (item) {
-      return this.nowHour >= this.list[this.currIndex].timeLine && item.quantity <= item.salesNum;
-    },
-    // 场次已开始且未售罄才可抢
-    canBuy (item) {
-      return this.nowHour >= this.list[this.currIndex].timeLine && !this.isSoldOut(item);
-    },
-    // 按钮文案：未开始 / 已售罄 / 立即抢购
-    buyText (item) {
-      if (this.nowHour < this.list[this.currIndex].timeLine) return "即将开始";
-      if (this.isSoldOut(item)) return "已售罄";
-      return "立即抢购";
-    },
-    countDown (currIndex) {
-      // 倒计时
-      // 0点时间戳
-      let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-      let currTime = new Date().getTime();
-      let actTime = 0;
-      let nowHour = new Date().getHours(); // 当前小时数
-      if (this.list[currIndex].timeLine > nowHour) {
-        // 活动未开始
-        actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000;
-      } else if (this.list[currIndex].timeLine <= nowHour) {
-        // 活动进行中
-        if (currIndex === this.list.length - 1) {
-          // 如果是最后一个活动，直到24点结束
-          actTime = zeroTime + 24 * 3600 * 1000;
-        } else {
-          actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000;
-        }
-      }
-      this.diffSeconds = Math.floor((actTime - currTime) / 1000);
-      this.interval = setInterval(() => {
-        this.diffSeconds--;
-      }, 1000);
-    },
-  },
-  mounted () {
-    this.getListByDay();
-  },
-};
+
+const router = useRouter();
+
+const list = ref([]); // 秒杀时段列表
+const goodsList = ref([]); // 商品列表
+let interval = null; // 定时器
+const currIndex = ref(0); // 当前时间段的下标
+const currTime = ref(0); // 当前显示的倒计时
+const diffSeconds = ref(0); // 倒计时时间戳
+const nowHour = ref(new Date().getHours()); // 当前小时数
+
+watch(currIndex, (val) => {
+  clearInterval(interval);
+  interval = null;
+  nowHour.value = new Date().getHours();
+  countDown(val);
+  goodsList.value = list.value[val].seckillGoodsList;
+});
+
+watch(diffSeconds, (val) => {
+  const hours = Math.floor(val / 3600);
+  // 当前秒数 / 60，向下取整
+  // 获取到所有分钟数 3600 / 60 = 60分钟
+  // 对60取模，超过小时数的分钟数
+  const minutes = Math.floor(val / 60) % 60;
+  // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+  const seconds = val % 60;
+  currTime.value =
+    filteTime(hours) + ":" + filteTime(minutes) + ":" + filteTime(seconds);
+  if (val <= 0) {
+    clearInterval(interval);
+    interval = null;
+  }
+  function filteTime (time) {
+    if (time < 10) {
+      return "0" + time;
+    } else {
+      return time;
+    }
+  }
+});
+
+function getListByDay () {
+  // 当天秒杀活动
+  seckillByDay().then((res) => {
+    if (res.success) {
+      list.value = res.result;
+      goodsList.value = list.value[0].seckillGoodsList;
+      countDown(currIndex.value);
+    }
+  });
+}
+
+function goGoodsDetail (skuId, goodsId) {
+  // 跳转商品详情
+  let routeUrl = router.resolve({
+    path: "/goodsDetail",
+    query: { skuId, goodsId },
+  });
+  window.open(routeUrl.href, "_blank");
+}
+
+// 已售占比。没有库存时按售罄展示
+function salePercent (item) {
+  if (!item.quantity || item.quantity <= 0) return 100;
+  return Math.min(100, Math.ceil((item.salesNum / item.quantity) * 100));
+}
+
+// 场次已开始，且销量达到库存
+function isSoldOut (item) {
+  return nowHour.value >= list.value[currIndex.value].timeLine && item.quantity <= item.salesNum;
+}
+
+// 场次已开始且未售罄才可抢
+function canBuy (item) {
+  return nowHour.value >= list.value[currIndex.value].timeLine && !isSoldOut(item);
+}
+
+// 按钮文案：未开始 / 已售罄 / 立即抢购
+function buyText (item) {
+  if (nowHour.value < list.value[currIndex.value].timeLine) return "即将开始";
+  if (isSoldOut(item)) return "已售罄";
+  return "立即抢购";
+}
+
+function countDown (currIndex) {
+  // 倒计时
+  // 0点时间戳
+  let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+  let currTime = new Date().getTime();
+  let actTime = 0;
+  let nowHour = new Date().getHours(); // 当前小时数
+  if (list.value[currIndex].timeLine > nowHour) {
+    // 活动未开始
+    actTime = zeroTime + list.value[currIndex].timeLine * 3600 * 1000;
+  } else if (list.value[currIndex].timeLine <= nowHour) {
+    // 活动进行中
+    if (currIndex === list.value.length - 1) {
+      // 如果是最后一个活动，直到24点结束
+      actTime = zeroTime + 24 * 3600 * 1000;
+    } else {
+      actTime = zeroTime + list.value[currIndex + 1].timeLine * 3600 * 1000;
+    }
+  }
+  diffSeconds.value = Math.floor((actTime - currTime) / 1000);
+  interval = setInterval(() => {
+    diffSeconds.value--;
+  }, 1000);
+}
+
+onMounted(() => {
+  getListByDay();
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
 </script>
 <style lang="scss" scoped>
 @import "../../assets/styles/goodsList.scss";