升级Vue3，iView替换ElementPlus

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

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{