升级Vue3，iView替换ElementPlus

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

seller/src/views/home/home.scss

@@ -11,7 +11,7 @@ h4 {
   margin: 20px 0;
   font-size: 18px;
 }
-::v-deep .ivu-icon {
+:deep(.el-icon) {
   margin-right: 10px;
 }
 .rate-box {
@@ -82,7 +82,7 @@ h4 {
   font-weight: bold;
   width: 286px;
   display: flex;
-  ::v-deep span {
+  :deep(span) {
     color: $theme_color;
     font-size: 18px;
   }

seller/src/views/home/home.vue

@@ -1,58 +1,72 @@
 <template>
   <div>
-
-    <Modal v-model="noticeFlage" :title="noticesDetail.title">
-      <div v-if="noticesDetail" class="noticesDetail" v-html="noticesDetail.content">
-
-      </div>
-    </Modal>
+    <el-dialog v-model="noticeFlage" :title="noticesDetail.title">
+      <div v-if="noticesDetail" class="noticesDetail" v-html="noticesDetail.content"></div>
+    </el-dialog>
     <div class="box flex">
       <div class="box-left">
         <div class="card shop flex">
           <div>
-            <h4>Hi,<span style="margin-left:5px;">{{ userData.nickName }}</span></h4>
-            <img class="shop-logo" :src="userData.storeLogo || require('@/assets/logo1.png')" alt="">
+            <h4>Hi,<span style="margin-left: 5px">{{ userData.nickName }}</span></h4>
+            <img
+              class="shop-logo"
+              :src="userData.storeLogo || require('@/assets/logo1.png')"
+              alt=""
+            />
           </div>
           <div class="shop-box">
             <div class="box-item">
-              <div>店铺名称：{{ userData.storeName || '暂无' }}</div>
+              <div>店铺名称：{{ userData.storeName || "暂无" }}</div>
             </div>
             <div class="box-item">
-              <div>店铺状态：{{ userData.storeDisable == 'OPEN' ? '开启中' : '关闭' }}</div>
+              <div>店铺状态：{{ userData.storeDisable == "OPEN" ? "开启中" : "关闭" }}</div>
             </div>
             <div class="box-item" @click="im()">
-              <Button type="info" :loading='load'>点击登录客服</Button>
+              <el-button type="info" :loading="load">点击登录客服</el-button>
             </div>
           </div>
 
           <div class="rate-box">
             <div>
-              <i-circle :size="120" stroke-color="#fecb89" :trail-width="4" :stroke-width="5"
-                :percent="(userData.serviceScore * 20)" stroke-linecap="square">
-                <div class="demo-Circle-custom">
-
+              <el-progress
+                type="circle"
+                :width="120"
+                :stroke-width="5"
+                :percentage="userData.serviceScore * 20"
+                color="#fecb89"
+              >
+                <template #default>
                   <p class="bold">{{ userData.serviceScore }}分</p>
-                </div>
-              </i-circle>
+                </template>
+              </el-progress>
               <h5>服务得分</h5>
             </div>
             <div>
-              <i-circle :size="120" stroke-color="#a7c5eb" :trail-width="4" :stroke-width="5"
-                :percent="(userData.deliveryScore * 20)" stroke-linecap="square">
-                <div>
-
+              <el-progress
+                type="circle"
+                :width="120"
+                :stroke-width="5"
+                :percentage="userData.deliveryScore * 20"
+                color="#a7c5eb"
+              >
+                <template #default>
                   <p class="bold">{{ userData.deliveryScore }}分</p>
-                </div>
-              </i-circle>
+                </template>
+              </el-progress>
               <h5>交货得分</h5>
             </div>
             <div>
-              <i-circle :size="120" stroke-color="#848ccf" :trail-width="4" :stroke-width="5"
-                :percent="(userData.descriptionScore * 20)" stroke-linecap="square">
-                <div>
+              <el-progress
+                type="circle"
+                :width="120"
+                :stroke-width="5"
+                :percentage="userData.descriptionScore * 20"
+                color="#848ccf"
+              >
+                <template #default>
                   <p class="bold">{{ userData.descriptionScore }}分</p>
-                </div>
-              </i-circle>
+                </template>
+              </el-progress>
               <h5>评价得分</h5>
             </div>
           </div>
@@ -66,9 +80,7 @@
                 <span>{{ homeData.unPaidOrder || 0 }}</span>
                 <div>待付款</div>
               </div>
-              <div class="detail-title">
-                交易前
-              </div>
+              <div class="detail-title">交易前</div>
             </div>
 
             <div class="detail-item" @click="navigateTo('orderList')">
@@ -80,9 +92,7 @@
                 <span>{{ homeData.deliveredOrder || 0 }}</span>
                 <div>待收货</div>
               </div>
-              <div class="detail-title">
-                交易中
-              </div>
+              <div class="detail-title">交易中</div>
             </div>
             <div class="detail-item">
               <div @click="navigateTo('returnMoneyOrder')">
@@ -97,21 +107,16 @@
                 <span>{{ homeData.memberEvaluation || 0 }}</span>
                 <div>待评价</div>
               </div>
-              <div class="detail-title">
-                交易后
-              </div>
+              <div class="detail-title">交易后</div>
             </div>
             <div class="detail-item" @click="navigateTo('orderComplaint')">
               <div>
                 <span>{{ homeData.complaint || 0 }}</span>
                 <div>待处理</div>
               </div>
-
-              <div class="detail-title">
-                投诉
-              </div>
+              <div class="detail-title">投诉</div>
             </div>
-            <div class="detail-item" >
+            <div class="detail-item">
               <div @click="navigateTo('alert-goods-quantity')">
                 <span>{{ homeData.alertQuantityNum || 0 }}</span>
                 <div>库存预警</div>
@@ -120,9 +125,7 @@
                 <span>{{ homeData.waitAuth || 0 }}</span>
                 <div>审核中</div>
               </div>
-              <div class="detail-title">
-                商品
-              </div>
+              <div class="detail-title">商品</div>
             </div>
 
             <div class="detail-item">
@@ -134,15 +137,11 @@
                 <span>{{ homeData.waitPayBill || 0 }}</span>
                 <div>等待对账</div>
               </div>
-              <div class="detail-title">
-                其他
-              </div>
+              <div class="detail-title">其他</div>
             </div>
-
           </div>
         </div>
       </div>
-      <!-- 公告 -->
       <div class="card box-right">
         <h4>平台公告</h4>
         <div>
@@ -153,49 +152,46 @@
       </div>
     </div>
 
-    <div class="card ">
+    <div class="card">
       <h4>统计数据</h4>
       <div class="count-list flex">
         <div class="count-item" @click="navigateTo('goods')">
           <div>
-            <Icon class="icon" size="31" type="md-photos" />
+            <el-icon class="icon" :size="31"><Picture /></el-icon>
           </div>
           <div>
             <div class="counts">{{ homeData.goodsNum || 0 }}</div>
             <div>上架商品数量</div>
           </div>
-
         </div>
         <div class="count-item" @click="navigateTo('orderStatistics')">
           <div>
-            <Icon class="icon" size="31" type="ios-card" />
+            <el-icon class="icon" :size="31"><CreditCard /></el-icon>
           </div>
           <div>
-            <div class="counts">{{ homeData.orderPrice || 0 | unitPrice('￥') }}</div>
+            <div class="counts">
+              {{ $filters.unitPrice(homeData.orderPrice || 0, "￥") }}
+            </div>
             <div>今日订单总额</div>
           </div>
-
         </div>
         <div class="count-item" @click="navigateTo('orderList')">
           <div>
-
-            <Icon class="icon" size="31" type="md-list" />
+            <el-icon class="icon" :size="31"><List /></el-icon>
           </div>
           <div>
             <div class="counts">{{ homeData.orderNum || 0 }}</div>
             <div>今日订单数量</div>
           </div>
-
         </div>
         <div class="count-item" @click="navigateTo('trafficStatistics')">
           <div>
-            <Icon class="icon" size="31" type="md-person" />
+            <el-icon class="icon" :size="31"><User /></el-icon>
           </div>
           <div>
             <div class="counts">{{ homeData.storeUV || 0 }}</div>
             <div>今日访客数量</div>
           </div>
-
         </div>
       </div>
     </div>
@@ -203,99 +199,90 @@
 </template>
 
 <script>
+import { Picture, CreditCard, List, User } from "@element-plus/icons-vue";
 import { getSellerHomeData, getHomeNotice } from "@/api/index";
-import { getIMDetail } from "@/api/common"
+import { getIMDetail } from "@/api/common";
 import { seeArticle } from "@/api/pages";
 import Cookies from "js-cookie";
 import { userMsg } from "@/api/index";
+
 export default {
   name: "home",
-  data () {
+  components: {
+    Picture,
+    CreditCard,
+    List,
+    User,
+  },
+  data() {
     return {
-      noticeFlage: false, // 控制平台公告显隐
-
-      homeData: {}, // 首页数据
-      userData: "", // 店铺信息
-      notices: "", // 平台公告列表
-      noticesDetail: { // 平台公告详情
+      noticeFlage: false,
+      homeData: {},
+      userData: "",
+      notices: "",
+      noticesDetail: {
         title: "",
       },
       IMLink: "",
-      load:false, //加载Im
+      load: false,
     };
   },
-
   methods: {
-    // 跳转页面
-    navigateTo (name) {
-      this.$router.push({
-        name,
-      });
+    navigateTo(name) {
+      this.$router.push({ name });
     },
-    // 初始化数据
-    async init () {
-      let userInfo = JSON.parse(Cookies.get("userInfoSeller"));
-
+    async init() {
+      const userInfo = JSON.parse(Cookies.get("userInfoSeller"));
       this.userData = userInfo;
 
-      let res = await getHomeNotice();
+      const res = await getHomeNotice();
       if (res.success) {
         this.notices = res.result.records;
       }
     },
-    // 跳转文章页
-    async clickLinkNotices (val) {
-      let res = await seeArticle(val.id);
+    async clickLinkNotices(val) {
+      const res = await seeArticle(val.id);
       if (res.success) {
         this.noticesDetail = res.result;
         this.noticeFlage = true;
       }
     },
-
-    /**
-     * 点击登录im的时候需要去判断一下当前店铺信息是否失效
-     * 失效的话重新请求刷新token保证最新的token去访问im
-     */
-    async im () {
-      // 获取访问Token
-      let accessToken = this.getStore("accessToken");
-      this.load = true
+    async im() {
+      const accessToken = this.getStore("accessToken");
+      this.load = true;
       await this.getIMDetailMethods();
       const userInfo = await userMsg();
-      this.load = false
+      this.load = false;
       if (userInfo.success && this.IMLink) {
         window.open(`${this.IMLink}?token=` + accessToken);
-      }
-      else{
+      } else {
         this.$Message.error("请登录后再联系客服");
       }
     },
-
-    // 获取im信息
-    async getIMDetailMethods () {
-      let res = await getIMDetail();
+    async getIMDetailMethods() {
+      const res = await getIMDetail();
       if (res.success) {
         this.IMLink = res.result;
       }
     },
-    // 获取首页数据
-    async getHomeData () {
-      let res = await getSellerHomeData();
+    async getHomeData() {
+      const res = await getSellerHomeData();
       if (res.success) {
         this.homeData = res.result;
       }
     },
   },
-  mounted () {
+  mounted() {
     this.init();
     this.getHomeData();
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @import "./home.scss";
-.noticesDetail{
-  ::v-deep img{
+.noticesDetail {
+  :deep(img) {
     max-width: 100%;
     max-height: 200px;
   }