升级Vue3，iView替换ElementPlus

- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本

buyer/src/pages/promotion/PointGoodsDetail.vue

@@ -4,10 +4,10 @@
     <Search style="border-bottom:2px solid red;"></Search>
     <!-- <drawer></drawer> -->
     <div class="base-width cate-container">
-      <Breadcrumb>
-        <BreadcrumbItem to="/">首页</BreadcrumbItem>
-        <BreadcrumbItem>{{goodsMsg.pointsGoodsCategoryName}}</BreadcrumbItem>
-      </Breadcrumb>
+      <el-breadcrumb>
+        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{goodsMsg.pointsGoodsCategoryName}}</el-breadcrumb-item>
+      </el-breadcrumb>
     </div>
     <!-- 商品信息展示 -->
     <div class="item-detail-show">
@@ -15,7 +15,13 @@
       <div class="item-detail-left">
         <!-- 大图、放大镜 -->
         <div class="item-detail-big-img">
-          <pic-zoom v-if="goodsSku.thumbnail" :url="goodsSku.thumbnail" :scale="2"></pic-zoom>
+          <el-image
+            v-if="goodsSku.thumbnail"
+            :src="goodsSku.thumbnail"
+            :preview-src-list="[goodsSku.thumbnail]"
+            fit="contain"
+            style="width: 100%; height: 400px"
+          />
         </div>
         <div class="item-detail-img-row">
           <div class="item-detail-img-small">
@@ -49,7 +55,7 @@
               <p>数量</p>
             </div>
             <div class="item-select-row">
-              <InputNumber :min="1" :disabled="goodsSku.quantity === 0" v-model="count"></InputNumber>
+              <el-input-number :min="1" :disabled="goodsSku.quantity === 0" v-model="count"></el-input-number>
               <span class="inventory"> 库存{{goodsSku.quantity}}</span>
             </div>
           </div>
@@ -62,7 +68,7 @@
             </div>
           </div>
           <div class="add-buy-car">
-            <Button type="error" :loading="loading" :disabled="goodsSku.quantity === 0" @click="pointBuy">积分购买</Button>
+            <el-button type="danger" :loading="loading" :disabled="goodsSku.quantity === 0" @click="pointBuy">积分购买</el-button>
           </div>
         </div>
       </div>
@@ -73,14 +79,13 @@
       <div v-html="goodsSku.intro" class="mt_10 ml_10" v-if="goodsSku.intro"></div>
       <div v-else style="margin:20px;">暂无商品介绍</div>
     </div>
-    <Spin size="large" fix v-if="isLoading"></Spin>
+    <el-skeleton size="large" fix v-if="isLoading"></el-skeleton>
     <BaseFooter></BaseFooter>
   </div>
 </template>
 
 <script>
 import Search from '@/components/Search';
-import PicZoom from 'vue-piczoom';
 import { addCartGoods } from '@/api/cart.js';
 import { pointGoodsDetail } from '@/api/promotion';
 export default {
@@ -157,7 +162,7 @@ export default {
     }
   },
   components: {
-    Search, PicZoom
+    Search,
   }
 };
 </script>

buyer/src/pages/promotion/PointMall.vue

@@ -4,9 +4,9 @@
     <Search></Search>
     <cateNav></cateNav>
     <h3 class="promotion-decorate">积分商品</h3>
-    <Select @on-select="selectCate" size="small" class="cate-select-con" v-model="cateId">
-      <Option v-for="(cate, index) in cateList" :value="cate.id" :key="index">{{cate.name}}</Option>
-    </Select>
+    <el-select @select="selectCate" size="small" class="cate-select-con" v-model="cateId">
+      <el-option v-for="(cate, index) in cateList" :value="cate.id" :key="index">{{cate.name}}</el-option>
+    </el-select>
     <!-- 列表 -->
     <div class="goods-list">
       <empty v-if="goodsList.length === 0" />
@@ -29,8 +29,7 @@
           <span>{{ item.goodsSku.goodsName }}</span>
         </div>
         <div class="goods-show-num">
-          已有<span>{{ item.commentNum || 0 }}</span
-          >人评价
+          已有<span>{{ item.commentNum || 0 }}</span>人评价
         </div>
         <div class="goods-show-seller">
           <span>{{ item.storeName }}</span>
@@ -38,12 +37,9 @@
       </div>
     </div>
     <div class="page-size">
-      <Page :total="total" @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="params.pageSize"
-        show-total
-        show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+        @size-change="changePageSize"
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
     </div>
     <BaseFooter></BaseFooter>
   </div>

buyer/src/pages/promotion/seckill.vue

@@ -32,12 +32,8 @@
         </div>
         <div class="goods-show-price">
           <span>
-            <span class="seckill-price text-danger">{{
-              item.price | unitPrice("￥")
-            }}</span>
-            <span style="color: #999; text-decoration: line-through">{{
-              item.originalPrice | unitPrice("￥")
-            }}</span>
+            <span class="seckill-price text-danger">{{ $filters.unitPrice(item.price, "￥") }}</span>
+            <span style="color: #999; text-decoration: line-through">{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
           </span>
         </div>
         <div class="goods-show-detail" style="margin-bottom: 20px">
@@ -59,12 +55,15 @@
                 (item.salesNum / (item.quantity)) * 100
               )
               : 100) + "%"
-          }}</span><Progress hide-info stroke-color="#df0021" style="width: 110px" class="ml_10" :percent="item.quantity && item.quantity > 0
-      ? Math.ceil(
-        (item.salesNum / (item.quantity)) * 100
-      )
-      : 100
-    " />
+          }}</span><el-progress
+            :show-text="false"
+            color="#df0021"
+            style="width: 110px"
+            class="ml_10"
+            :percentage="item.quantity && item.quantity > 0
+              ? Math.ceil((item.salesNum / item.quantity) * 100)
+              : 100"
+          />
         </div>
         <div class="goods-show-seller">
           <span>{{ item.storeName }}</span>
@@ -88,8 +87,7 @@ export default {
       nowHour: new Date().getHours(), // 当前小时数
     };
   },
-  beforeDestroy () {
-    // 销毁前清除定时器
+  beforeUnmount () {
     clearInterval(this.interval);
   },
   watch: {
@@ -265,7 +263,7 @@ export default {
   justify-content: center;
 }
 
-.ivu-progress-success .ivu-progress-bg {
-  background-color: #111fff;
+.el-progress-bar__inner {
+  background-color: #df0021;
 }
 </style>