升级Vue3，iView替换ElementPlus

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

buyer/src/components/goodsDetail/Promotion.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="wrapper" v-if="type === 'goodsDetail'">
-      <div class="wr-l"><Icon size="23" type="ios-alarm-outline" /> 秒杀活动</div>
+      <div class="wr-l"><el-icon :size="23"><AlarmClock /></el-icon> 秒杀活动</div>
       <div class="count-down" v-if="end === ''">
       <p>倒计时：</p><span>{{ hours }}</span><span>{{ minutes }}</span><span>{{ seconds }}</span>
       </div>
@@ -14,7 +14,9 @@
   </div>
 </template>
 <script>
+import { AlarmClock } from '@element-plus/icons-vue';
 export default {
+  components: { AlarmClock },
   props: {
     time: { // 传入的初始时间
       default: 1718977559428

buyer/src/components/goodsDetail/ShowGoods.vue

@@ -6,7 +6,12 @@
         <!-- 大图、放大镜 -->
         <!-- <div  id="dplayer"></div> -->
         <div class="item-detail-big-img" v-if="imgList[imgIndex]">
-          <pic-zoom :url="imgList[imgIndex].url || imgList[imgIndex]" :scale="2"></pic-zoom>
+          <el-image
+            :src="currentImg"
+            :preview-src-list="previewList"
+            fit="contain"
+            style="width: 100%; height: 400px"
+          />
         </div>
 
         <!-- <div  id="dplayer"></div> -->
@@ -24,11 +29,7 @@
 
         <div class="goodsConfig mt_10">
           <span @click="collect"
-            ><Icon
-              type="ios-heart"
-              :color="isCollected ? '#ed3f14' : '#666'"
-            />{{ isCollected ? "已收藏" : "收藏" }}</span
-          >
+            ><el-icon :color="isCollected ? '#ed3f14' : '#666'"><StarFilled /></el-icon>{{ isCollected ? "已收藏" : "收藏" }}</span>
         </div>
       </div>
       <!-- 右侧商品信息、活动信息、操作展示 -->
@@ -36,18 +37,18 @@
         <div class="item-detail-title">
           <p>
             {{ skuDetail.goodsName }}
-            <Tag
+            <el-tag
               v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
               style="margin-top:10px;rgb(153, 149, 149);"
             >
               实物商品
-            </Tag>
-            <Tag
+            </el-tag>
+            <el-tag
               v-else-if="skuDetail.goodsType == 'VIRTUAL_GOODS'"
               style="margin-top:10px;rgb(153, 149, 149);"
             >
               虚拟商品
-            </Tag>
+            </el-tag>
           </p>
         </div>
         <div class="sell-point">
@@ -68,14 +69,9 @@
             >
               <p>
                 <span class="item-price-title" v-if="promotionMap['SECKILL']"
-                  >秒 &nbsp;杀&nbsp;价</span
-                >
-                <span class="item-price">{{
-                  skuDetail.promotionPrice | unitPrice("￥")
-                }}</span>
-                <span class="item-price-old">{{
-                  skuDetail.price | unitPrice("￥")
-                }}</span>
+                  >秒 &nbsp;杀&nbsp;价</span>
+                <span class="item-price">{{ $filters.unitPrice(skuDetail.promotionPrice, "￥") }}</span>
+                <span class="item-price-old">{{ $filters.unitPrice(skuDetail.price, "￥") }}</span>
               </p>
             </div>
             <!-- 商品原价 -->
@@ -92,7 +88,7 @@
                     :key="index"
                     class="item-price item-num"
                   >
-                    {{ item | unitPrice("￥") }}
+                    {{ $filters.unitPrice(item, "￥") }}
                   </div>
                 </div>
                 <div class="flex">
@@ -110,11 +106,8 @@
               <!-- 普通价格 -->
               <div v-else>
                 <span class="item-price-title"
-                  >价 &nbsp;&nbsp;&nbsp;&nbsp;格</span
-                >
-                <span class="item-price">{{
-                  skuDetail.price | unitPrice("￥")
-                }}</span>
+                  >价 &nbsp;&nbsp;&nbsp;&nbsp;格</span>
+                <span class="item-price">{{ $filters.unitPrice(skuDetail.price, "￥") }}</span>
               </div>
             </div>
             <!-- 优惠券展示 -->
@@ -129,13 +122,11 @@
                     @click="receiveCoupon(item.id)"
                   >
                     <span v-if="item.couponType == 'PRICE'"
-                      >满{{ item.consumeThreshold }}减{{ item.price }}</span
-                    >
+                      >满{{ item.consumeThreshold }}减{{ item.price }}</span>
                     <span v-if="item.couponType == 'DISCOUNT'"
                       >满{{ item.consumeThreshold }}打{{
                         item.couponDiscount
-                      }}折</span
-                    >
+                      }}折</span>
                   </span>
                 </span>
 
@@ -149,13 +140,11 @@
                         @click="receiveCoupon(item.id)"
                       >
                         <span v-if="item.couponType == 'PRICE'"
-                          >满{{ item.consumeThreshold }}减{{ item.price }}</span
-                        >
+                          >满{{ item.consumeThreshold }}减{{ item.price }}</span>
                         <span v-if="item.couponType == 'DISCOUNT'"
                           >满{{ item.consumeThreshold }}打{{
                             item.couponDiscount
-                          }}折</span
-                        >
+                          }}折</span>
                       </span>
                     </div>
                   </div>
@@ -165,16 +154,14 @@
             <div class="item-price-row" v-if="promotionMap['FULL_DISCOUNT']">
               <p>
                 <span class="item-price-title"
-                  >促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span
-                >
+                  >促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                 <span class="item-promotion">满减</span>
                 <span
                   class="item-desc-pintuan"
                   v-if="promotionMap['FULL_DISCOUNT'].fullMinus"
                   >满{{ promotionMap["FULL_DISCOUNT"].fullMoney }}元，立减现金{{
                     promotionMap["FULL_DISCOUNT"].fullMinus
-                  }}元</span
-                >
+                  }}元</span>
                 <span
                   class="item-desc-pintuan"
                   v-if="
@@ -183,8 +170,7 @@
                   "
                   >满{{ promotionMap["FULL_DISCOUNT"].fullMoney }}元，立享{{
                     promotionMap["FULL_DISCOUNT"].fullRate
-                  }}折</span
-                >
+                  }}折</span>
               </p>
             </div>
           </div>
@@ -193,8 +179,7 @@
               <p>累计评价</p>
               <p>
                 <span class="item-remarks-num"
-                  >{{ skuDetail.commentNum || 0 }} 条</span
-                >
+                  >{{ skuDetail.commentNum || 0 }} 条</span>
               </p>
             </div>
           </div>
@@ -236,14 +221,14 @@
               <p>数量</p>
             </div>
             <div class="item-select-row">
-              <InputNumber
+              <el-input-number
                 :min="1"
                 :max="skuDetail.quantity"
                 :disabled="skuDetail.quantity === 0"
                 v-model="count"
                 :precision="0.1"
-                @on-blur="changeCount"
-              ></InputNumber>
+                @blur="changeCount"
+              ></el-input-number>
               <span class="inventory"> 库存{{ skuDetail.quantity }}</span>
             </div>
           </div>
@@ -264,12 +249,12 @@
             class="add-buy-car"
             v-if="$route.query.way === 'POINT' && skuDetail.authFlag === 'PASS'"
           >
-            <Button
-              type="error"
+            <el-button
+              type="danger"
               :loading="loading"
               :disabled="skuDetail.quantity === 0"
               @click="pointPay"
-              >积分购买</Button
+              >积分购买</el-button
             >
           </div>
           <div
@@ -277,37 +262,37 @@
             v-if="$route.query.way !== 'POINT' && skuDetail.authFlag === 'PASS'"
           >
 
-           <Button
-              type="error"
+           <el-button
+              type="danger"
               v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
               :loading="loading"
               :disabled="skuDetail.quantity === 0"
               @click="addShoppingCartBtn"
-              >加入购物车</Button
+              >加入购物车</el-button
             >
-            <Button
+            <el-button
               type="warning"
               :loading="loading1"
               :disabled="skuDetail.quantity === 0"
               @click="buyNow"
-              >立即购买</Button
+              >立即购买</el-button
             >
-            <Tooltip content="观看视频" v-if="skuDetail.goodsVideo">
+            <el-tooltip content="观看视频" v-if="skuDetail.goodsVideo">
               <img class="view-video" @click="showGoodsVideo = true" :src="require('@/assets/iconfont/play.svg')" alt="">
-            </Tooltip>
+            </el-tooltip>
           </div>
         </div>
       </div>
-      <Modal title="浏览视频" v-model="showGoodsVideo">
-        <div id="dplayer"></div>
-      </Modal>
+      <el-dialog title="浏览视频" v-model="showGoodsVideo">
+          <div id="dplayer"></div>
+        </el-dialog>
     </div>
   </div>
 </template>
 
 <script>
+import { StarFilled } from '@element-plus/icons-vue';
 import Promotion from "./Promotion.vue";
-import PicZoom from "vue-piczoom"; // 图片放大
 import DPlayer from "dplayer";
 import {
   collectGoods,
@@ -371,8 +356,15 @@ export default {
       isCollected: false, // 是否收藏
     };
   },
-  components: { PicZoom, Promotion },
+  components: { Promotion, StarFilled },
   computed: {
+    currentImg() {
+      const item = this.imgList[this.imgIndex];
+      return item ? item.url || item : "";
+    },
+    previewList() {
+      return this.imgList.map((item) => item.url || item);
+    },
     wholesalePrice(key) {
       return this.wholesaleList.length
         ? this.wholesaleList.map((item) => {
@@ -417,7 +409,7 @@ export default {
     },
     select(index, value) {
       // 选择规格
-      this.$set(this.currentSelceted, index, value);
+      this.currentSelceted[index] = value;
       let selectedSkuId = this.goodsSpecList.find((i) => {
         let matched = true;
         let specValues = i.specValues.filter((j) => j.specName !== "images");

buyer/src/components/goodsDetail/ShowGoodsDetail.vue

@@ -3,21 +3,23 @@
     <div class="item-intro-show">
       <div class="item-intro-detail" ref="itemIntroDetail">
         <div class="item-intro-nav item-tabs">
-          <Tabs :animated="false" @on-click="tabClick">
-            <TabPane label="商品介绍">
+          <el-tabs v-model="activeDetailTab" @tab-click="(tab) => tabClick(tab.paneName)">
+            <el-tab-pane label="商品介绍" name="intro">
               <div class="item-intro-img" ref="itemIntroGoods">
                 <div class="item-intro" v-html="skuDetail.intro" v-if="skuDetail.intro"></div>
                 <div v-else style="margin:20px;">暂无商品介绍</div>
               </div>
-            </TabPane>
-            <TabPane label="商品评价">
+            </el-tab-pane>
+            <el-tab-pane label="商品评价" name="comment">
               <div class="remarks-container" ref="itemGoodsComment">
                 <div class="remarks-analyse-box">
                   <div class="remarks-analyse-goods">
-                    <i-circle :percent="skuDetail.grade" stroke-color="#5cb85c">
-                      <span class="remarks-analyse-num">{{skuDetail.grade}}%</span>
-                      <p class="remarks-analyse-title">好评率</p>
-                    </i-circle>
+                    <el-progress type="circle" :percentage="Number(skuDetail.grade) || 0" color="#5cb85c" :width="120">
+                      <template #default>
+                        <span class="remarks-analyse-num">{{ skuDetail.grade }}%</span>
+                        <p class="remarks-analyse-title">好评率</p>
+                      </template>
+                    </el-progress>
                   </div>
                 </div>
                 <div class="remarks-bar">
@@ -31,12 +33,12 @@
                 </div>
                 <div class="remarks-box" v-for="(item,index) in commentList" :key="index" v-else>
                   <div class="remarks-user">
-                    <Avatar :src="item.memberProfile" />
-                    <span class="remarks-user-name">{{item.memberName | secrecyMobile}}</span>
+                    <el-avatar :src="item.memberProfile" :size="40" />
+                    <span class="remarks-user-name">{{ $filters.secrecyMobile(item.memberName ) }}</span>
                   </div>
                   <div class="remarks-content-box">
                     <p>
-                      <Rate disabled :value="Number(item.descriptionScore)" allow-half class="remarks-star"></Rate>
+                      <el-rate disabled :value="Number(item.descriptionScore)" allow-half class="remarks-star"></el-rate>
                     </p>
                     <p class="remarks-content">{{item.content}}</p>
                     <div class="comment-img" v-if="item.images">
@@ -50,8 +52,8 @@
 
                     <div class="preview-img"  v-if="item.previewImg"  @click.prevent="hidePreviewImg(item)">
                       <div>
-                        <span @click.stop="rotatePreviewImg(0, item)"><Icon type="md-refresh" />左转</span>
-                        <span @click.stop="rotatePreviewImg(1, item)"><Icon type="md-refresh" />右转</span>
+                        <span @click.stop="rotatePreviewImg(0, item)"><el-icon><Refresh /></el-icon>左转</span>
+                        <span @click.stop="rotatePreviewImg(1, item)"><el-icon><Refresh /></el-icon>右转</span>
                       </div>
                       <img :src="item.previewImg" :style="{transform:`rotate(${item.deg}deg)`}" width="198" alt="">
                     </div>
@@ -78,15 +80,15 @@
                   </div>
                 </div>
                 <div class="remarks-page">
-                  <Page :total="commentTotal" size="small"
-                    @on-change="changePageNum"
-                    @on-page-size-change="changePageSize"
+                  <el-pagination :total="commentTotal" small
+                    @current-change="changePageNum"
+                    @size-change="changePageSize"
                     :page-size="commentParams.pageSize"
-                    ></Page>
+                     layout="prev, pager, next"></el-pagination>
                 </div>
               </div>
-            </TabPane>
-            <TabPane label="商品参数">
+            </el-tab-pane>
+            <el-tab-pane label="商品参数">
               <template v-if="goodsParamsList.length">
                 <div class="item-param-container">
                   <div class="item-param-box" v-for="param in goodsParamsList" :key="param.paramId || param.paramName">
@@ -96,8 +98,8 @@
                 </div>
               </template>
               <div v-else>暂无商品参数</div>
-            </TabPane>
-          </Tabs>
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </div>
     </div>
@@ -105,8 +107,10 @@
 </template>
 
 <script>
+import { Refresh } from '@element-plus/icons-vue';
 import { goodsComment, goodsCommentNum } from '@/api/member.js';
 export default {
+  components: { Refresh },
   name: 'ShowGoodsDetail',
   props: {
     detail: { // 商品详情
@@ -116,6 +120,7 @@ export default {
   },
   data () {
     return {
+      activeDetailTab: "intro",
       commentList: [], // 评论列表
       commentParams: { // 评论传参
         pageNumber: 1,
@@ -187,12 +192,12 @@ export default {
       });
     },
     viewByGrade (grade) { // 好中差评切换
-      this.$set(this.commentParams, 'grade', grade);
+      this.commentParams['grade'] = grade;
       this.commentParams.pageNumber = 1;
       this.getList();
     },
     tabClick (name) { // 商品详情和评价之间的tab切换
-      if (name === 0) {
+      if (name === "intro") {
         this.$nextTick(() => {
           this.changeHeight('itemIntroGoods')
         });
@@ -203,13 +208,13 @@ export default {
       }
     },
     previewImg (img, item) { // 预览图片
-      this.$set(item, 'previewImg', img);
+      item['previewImg'] = img;
       this.$nextTick(() => {
         this.changeHeight('itemGoodsComment')
       });
     },
     hidePreviewImg (item) { // 隐藏预览图片
-      this.$set(item, 'previewImg', '');
+      item['previewImg'] = '';
       this.$nextTick(() => {
         this.changeHeight('itemGoodsComment')
       });
@@ -217,15 +222,15 @@ export default {
     rotatePreviewImg (type, item) { // 图片旋转
       if (type) {
         if (item.deg) {
-          this.$set(item, 'deg', item.deg + 90);
+          item['deg'] = item.deg + 90;
         } else {
-          this.$set(item, 'deg', 90);
+          item['deg'] = 90;
         }
       } else {
         if (item.deg) {
-          this.$set(item, 'deg', item.deg - 90);
+          item['deg'] = item.deg - 90;
         } else {
-          this.$set(item, 'deg', -90);
+          item['deg'] = -90;
         }
       }
     },
@@ -347,7 +352,7 @@ export default {
 .item-intro-img {
   width: 100%;
   min-height: 300px;
-  ::v-deep img{
+  :deep img{
     margin:0 auto;
   }
 }
@@ -461,7 +466,7 @@ export default {
         border-radius: 4px;
         cursor: pointer;
       }
-      span:nth-child(1) .ivu-icon {
+      span:nth-child(1) .el-icon {
         transform: rotateY(180deg);
       }
     }
@@ -487,24 +492,23 @@ export default {
   justify-content:flex-end;
 }
 /***************商品详情介绍和推荐侧边栏结束***************/
-/* 改变便签页样式 */
-.ivu-tabs-ink-bar {
+/* 改变标签页样式 */
+:deep(.el-tabs__active-bar) {
   background-color: $theme_color !important;
 }
-::v-deep.ivu-tabs-bar{
+:deep(.el-tabs__header) {
   border: none;
 }
-.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab{
+.item-tabs > .el-tabs > .el-tabs__header .el-tabs__item {
   border-radius: 0px;
   color: #999;
   height: 38px;
-  // background: #F7F7F7;
 }
-.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active{
+.item-tabs > .el-tabs > .el-tabs__header .el-tabs__item.is-active {
   color: #fff;
   background-color: $theme_color;
 }
-.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active:before{
+.item-tabs > .el-tabs > .el-tabs__header .el-tabs__item.is-active:before {
   content: '';
   display: block;
   width: 100%;
@@ -515,7 +519,7 @@ export default {
   top: 0;
   left: 0;
 }
-.ivu-rate-star-full:before, .ivu-rate-star-half .ivu-rate-star-content:before {
+:deep(.el-rate__icon) {
   color: $theme_color;
 }
 table{