升级Vue3，iView替换ElementPlus

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

buyer/src/components/Search.vue

@@ -9,18 +9,20 @@
         @click="$router.push('/')"
       />
       <div :class="{'small-search-box':useClass == 'fixed-show'}" class="search-box">
-        <i-input
+        <el-input
           v-model="searchData"
           size="large"
           class="search "
           placeholder="输入你想查找的商品"
-          @keyup.enter.native="search"
+          @keyup.enter="search"
         >
 
-          <div class="search-icon" slot="append" @click="search">
-            <Icon type="ios-search" size="21"/>
-          </div>
-        </i-input>
+          <template #append>
+            <div class="search-icon" @click="search">
+              <el-icon :size="21"><SearchIcon /></el-icon>
+            </div>
+          </template>
+        </el-input>
         <template v-if="showTag">
           <div class="only-store" v-if="storeId" @click="research()">
             切换为{{!onlyStore ? '店铺内' : '平台'}}搜索
@@ -46,9 +48,11 @@
 <script>
 import storage from '@/plugins/storage.js'
 import {hotWords} from '@/api/goods.js'
+import { Search as SearchIcon } from '@element-plus/icons-vue'
 
 export default {
   name: 'search',
+  components: { SearchIcon },
   props: {
     showTag: { // 是否展示搜索栏下方热门搜索
       type: Boolean,
@@ -173,7 +177,7 @@ export default {
   border-radius: 18.9px;
 
 
-  ::v-deep .ivu-input.ivu-input-large {
+  :deep(.el-input--large .el-input__wrapper) {
     border: 1.4px solid $theme_color;
     box-sizing: border-box;
     border-radius: 19.6px;
@@ -183,12 +187,10 @@ export default {
     font-weight: normal;
     height: 37.8px;
     color: #999;
-    &:focus {
-      box-shadow: none;
-    }
+    box-shadow: none;
   }
 
-  ::v-deep .ivu-input-group-append {
+  :deep(.el-input-group__append) {
     border-radius: 19.6px !important;
     cursor: pointer;
     box-sizing: border-box;

buyer/src/components/addressManage/index.vue

@@ -1,44 +1,44 @@
 <template>
   <div>
-    <Modal v-model="showAddr" width="800" title="收件人地址">
-      <Form
+    <el-dialog v-model="showAddr" width="800" title="收件人地址">
+      <el-form
         :model="formData"
         ref="form"
         label-position="left"
-        :label-width="100"
+        label-width="100px"
         :rules="ruleInline"
       >
-        <FormItem label="收件人" prop="name">
-          <i-input v-model="formData.name" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="收件地区" prop="address">
+        <el-form-item label="收件人" prop="name">
+          <el-input v-model="formData.name" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="收件地区" prop="address">
           {{ formData.address || '暂无地址' }}
-          <Button type="primary" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</Button>
-        </FormItem>
-        <FormItem label="详细地址" prop="detail">
-          <i-input v-model="formData.detail" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="手机号码" prop="mobile">
-          <i-input v-model="formData.mobile" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="地址别名">
-          <i-input
+          <el-button type="primary" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</el-button>
+        </el-form-item>
+        <el-form-item label="详细地址" prop="detail">
+          <el-input v-model="formData.detail" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号码" prop="mobile">
+          <el-input v-model="formData.mobile" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="地址别名">
+          <el-input
             v-model="formData.alias"
             length
             :maxlength="4"
             placeholder="请输入地址别名，例如公司"
             style="width: 600px"
-          ></i-input>
-        </FormItem>
-        <FormItem label="默认地址">
-          <i-switch v-model="formData.isDefault" />
-        </FormItem>
-      </Form>
-      <div class="mt_20" slot="footer">
-        <Button @click="hide">取消</Button>
-        <Button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</Button>
-      </div>
-    </Modal>
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="默认地址">
+          <el-switch v-model="formData.isDefault" />
+        </el-form-item>
+      </el-form>
+      <template #footer><div class="mt_20">
+        <el-button @click="hide">取消</el-button>
+        <el-button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</el-button>
+      </div></template>
+    </el-dialog>
     <multipleMap ref="map" @callback="getAddress"></multipleMap>
   </div>
 </template>
@@ -130,15 +130,15 @@ export default {
        if(val.type === 'select'){
         const paths = val.data.map(item => item.name).join(',')
         const ids = val.data.map(item => item.id).join(',')
-        this.$set(this.formData,'address',paths)
-        this.$set(this.formData,'consigneeAddressIdPath',ids)
+        this.formData['address'] = paths
+        this.formData['consigneeAddressIdPath'] = ids
         const coord = val.data[val.data.length - 1].center.split(',')
         this.formData.lat = coord[1]
         this.formData.lon = coord[0]
       }else{
-        this.$set(this.formData, "address", val.data.addr);
-        this.$set(this.formData, "consigneeAddressIdPath", val.data.addrId);
-        this.$set(this.formData, "detail", val.data.address);
+        this.formData["address"] = val.data.addr;
+        this.formData["consigneeAddressIdPath"] = val.data.addrId;
+        this.formData["detail"] = val.data.address;
         this.formData.lat = val.data.position.lat;
         this.formData.lon = val.data.position.lng;
       }

buyer/src/components/advertising/FixedTop.vue

@@ -2,11 +2,13 @@
   <!-- 头部广告 -->
   <div class="advertising" v-if="show" :style="{'background-color': data.bgColor}">
     <img :src="data.img" class="hover-pointer" @click="linkTo(data.url)"/>
-    <Icon type="md-close-circle" size="20" @click="show = false" />
+    <el-icon :size="20" @click="show = false"><CircleClose /></el-icon>
   </div>
 </template>
 <script>
+import { CircleClose } from '@element-plus/icons-vue';
 export default {
+  components: { CircleClose },
   props: {
     data: { // 传入的广告信息
       type: Object,

buyer/src/components/card/index.vue

@@ -1,148 +1,140 @@
 <template>
-  <Card class="_Card" :bordered="false" :dis-hover="true">
-    <div slot="title" class="cardTitle">
-      <span :style="{fontSize:`${_Size}px`}">{{_Title}}</span>
-
-      <div v-if="_Tabs" class="cardTabs">
-        <div @click="tabsChange(index)" :class="{active:(isActive==index)}" class="cardTabsItem" :style="{fontSize:`${_Size-2}px`}" v-for="(item,index) in _Tabs"
-             :key="index">
-          {{item}}
+  <el-card class="_Card" shadow="never">
+    <template #header>
+      <div class="card-header">
+        <div class="cardTitle">
+          <span :style="{ fontSize: `${_Size}px` }">{{ _Title }}</span>
+          <div v-if="_Tabs" class="cardTabs">
+            <div
+              @click="tabsChange(index)"
+              :class="{ active: isActive == index }"
+              class="cardTabsItem"
+              :style="{ fontSize: `${_Size - 2}px` }"
+              v-for="(item, index) in _Tabs"
+              :key="index"
+            >
+              {{ item }}
+            </div>
+          </div>
+        </div>
+        <div class="cardExtra" v-if="_More" @click="callBack()">
+          {{ _More }}
         </div>
       </div>
-    </div>
-    <div slot="extra" class="cardExtra" v-if="_More" @click="callBack()">
-      {{_More}}
-    </div>
-    <div>
-
-    </div>
-  </Card>
+    </template>
+    <slot />
+  </el-card>
 </template>
 
 <script>
 export default {
-  name: 'index',
-  props:
-    {
-      _Tabs: { // 可点击的tab栏
-        type: null,
-        default: ''
-      },
-      // 头部
-      _Title: { // 标题
-        type: null,
-        default: '卡片头部'
-      },
-      // 右侧更多
-      _More: {
-        type: null,
-        default: false
-      },
-      _Size: { // 文字大小
-        type: Number,
-        default: 16
-      },
-      // 点击更多触发跳转
-      _Src: {
-        type: null,
-        default: function (val) {
-          if (this._More) {
-            return val;
-          } else {
-            return false;
-          }
-        }
-      }
+  name: "index",
+  props: {
+    _Tabs: {
+      type: null,
+      default: "",
     },
-  data () {
+    _Title: {
+      type: null,
+      default: "卡片头部",
+    },
+    _More: {
+      type: null,
+      default: false,
+    },
+    _Size: {
+      type: Number,
+      default: 16,
+    },
+    _Src: {
+      type: null,
+      default: null,
+    },
+  },
+  data() {
     return {
-      isActive: 0 // 已激活tab栏下标
+      isActive: 0,
     };
   },
   methods: {
-    // 点击右侧的回调
-    callBack () {
-      let _this = this;
-      if (this._Src !== '' || this._Src != null) {
-        this.$router.push({
-          path: _this._Src
-        });
+    callBack() {
+      if (this._Src) {
+        this.$router.push({ path: this._Src });
       }
     },
-    // 点击tab的回调
-    tabsChange (index) {
-    //  处理并返回index
+    tabsChange(index) {
       this.isActive = index;
-      this.$emit('_Change', index);
-    }
-  }
+      this.$emit("_Change", index);
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-  .cardTitle {
-    display: flex;
-    cursor: pointer;
-  }
-  .active{
-    color: $theme_color;
-    position: relative;
-    &::before{
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 3px;
-      bottom: 0;
-      left: 0;
-      background: $theme_color;
-    }
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cardTitle {
+  display: flex;
+  cursor: pointer;
+}
+.active {
+  color: $theme_color;
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 3px;
+    bottom: 0;
+    left: 0;
+    background: $theme_color;
   }
+}
 
-  .cardTabs {
-    display: flex;
+.cardTabs {
+  display: flex;
+  padding: 0 12px;
+
+  > .cardTabsItem {
     padding: 0 12px;
-
-    > .cardTabsItem {
-      padding: 0 12px;
-
-    }
-
-    > .cardTabsItem:hover {
-
-      color: $theme_color;
-    }
   }
 
-  ::v-deep .ivu-card, .ivu-card-head, ._Card {
-    margin-bottom: 20px;
-    @include white_background_color();
-  }
-
-  ::v-deep .ivu-card-head {
-    position: relative;
-    padding: 0 14px;
-    height: 50px;
-    line-height: 50px;
-
-    &::before {
-      content: '';
-      width: 3px;
-      height: 50%;
-      top: 25%;
-      background: $theme_color;
-      position: absolute;
-      left: 0;
-    }
-  }
-
-  .cardExtra {
+  > .cardTabsItem:hover {
     color: $theme_color;
-    cursor: pointer;
   }
+}
 
-  ::v-deep .ivu-card-body {
-    padding: 0 !important;
-    display: none;
+:deep(._Card) {
+  margin-bottom: 20px;
+  @include white_background_color();
+}
+
+:deep(._Card .el-card__header) {
+  position: relative;
+  padding: 0 14px;
+  height: 50px;
+  line-height: 50px;
+
+  &::before {
+    content: "";
+    width: 3px;
+    height: 50%;
+    top: 25%;
+    background: $theme_color;
+    position: absolute;
+    left: 0;
   }
+}
 
+.cardExtra {
+  color: $theme_color;
+  cursor: pointer;
+}
+
+:deep(._Card .el-card__body) {
+  padding: 0 !important;
+}
 </style>

buyer/src/components/drawer/Drawer.vue

@@ -8,12 +8,12 @@
           </div>
           <div>
             <p class="hover-color" @click="linkTo(`/goodsDetail?skuId=${goods.goodsSku.id}&goodsId=${goods.goodsSku.goodsId}`)">{{goods.goodsSku.goodsName}}</p>
-            <p class="price">{{goods.goodsSku.price | unitPrice('￥')}}<span>&nbsp; x{{goods.num}}</span></p>
+            <p class="price">{{ $filters.unitPrice(goods.goodsSku.price, '￥') }}<span>&nbsp; x{{goods.num}}</span></p>
           </div>
           <span class="del hover-color" @click="delGoods(goods.goodsSku.id)">删除</span>
         </li>
       </ul>
-      <Button size="large" class="mt_10" type="primary" @click="linkTo('/cart')" long>去购物车结算</Button>
+      <el-button size="large" class="mt_10" type="primary" @click="linkTo('/cart')" style="width:100%">去购物车结算</el-button>
     </div>
 
     <div v-else-if="title === '我的订单'" class="order-con">
@@ -26,10 +26,10 @@
               v-for="(img,imgIndex) in order.orderItems"
               :key="imgIndex" width="40" height="40" alt="">
           </div>
-          <div class="order-handle"><span>{{ order.flowPrice | unitPrice("￥") }}</span><span class="hover-color" @click="linkTo(`home/OrderDetail?sn=${order.sn}`)">查看订单</span></div>
+          <div class="order-handle"><span>{{ $filters.unitPrice(order.flowPrice, "￥") }}</span><span class="hover-color" @click="linkTo(`home/OrderDetail?sn=${order.sn}`)">查看订单</span></div>
         </li>
       </ul>
-      <Button type="primary" @click="linkTo('/home/MyOrder')" long>查看全部订单</Button>
+      <el-button type="primary" @click="linkTo('/home/MyOrder')" style="width:100%">查看全部订单</el-button>
     </div>
 
     <div v-else-if="title === '优惠券'" class="coupon-con">
@@ -37,7 +37,7 @@
           <li v-for="(coupon, index) in couponList" class="coupon-item" :key="index">
             <div class="c-left">
               <div>
-                <span v-if="coupon.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{coupon.price | unitPrice}}</span></span>
+                <span v-if="coupon.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{ $filters.unitPrice(coupon.price) }}</span></span>
                 <span v-if="coupon.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{coupon.couponDiscount}}</span>折</span>
                 <span class="describe">满{{coupon.consumeThreshold}}元可用</span>
               </div>
@@ -56,7 +56,7 @@
         <li v-for="(track,trackIndex) in tracksList" :key="trackIndex">
           <img :src="track.thumbnail" :alt="track.thumbnail" @click="linkTo(`/goodsDetail?skuId=${track.id}&goodsId=${track.goodsId}`)" width="100" height="100">
           <div @click="addToCart(track.id)">加入购物车</div>
-          <p class="global_color">{{track.price | unitPrice('￥')}}</p>
+          <p class="global_color">{{ $filters.unitPrice(track.price, '￥') }}</p>
         </li>
       </ul>
       <div class="hover-color" style="text-align:center;" @click="linkTo('/home/MyTracks')">查看更多>></div>
@@ -67,22 +67,24 @@
           <img :src="collect.image" :alt="collect.image" @click="linkTo(`/goodsDetail?skuId=${collect.skuId}&goodsId=${collect.goodsId}`)" width="100" height="100">
           <div @click="addToCart(collect.skuId)">加入购物车</div>
           <span class="del-icon" @click.stop="cancelCollect(collect.skuId)">
-            <Icon type="md-trash" />
+            <el-icon><Delete /></el-icon>
           </span>
-          <p class="global_color">{{collect.price | unitPrice('￥')}}</p>
+          <p class="global_color">{{ $filters.unitPrice(collect.price, '￥') }}</p>
         </li>
       </ul>
       <div class="hover-color" style="text-align:center;" @click="linkTo('/home/Favorites')">查看更多>></div>
     </div>
-    <Spin v-if="loading" fix></Spin>
+    <el-skeleton v-if="loading" fix></el-skeleton>
   </div>
 </template>
 
 <script>
+import { Delete } from '@element-plus/icons-vue';
 import {cartGoodsAll, delCartGoods, addCartGoods, cartCount} from '@/api/cart.js'
 import { getOrderList } from '@/api/order';
 import {couponList, receiveCoupon, tracksList, collectList, cancelCollect} from '@/api/member.js'
 export default {
+  components: { Delete },
   name: 'Drawer',
   props: {
     title: {

buyer/src/components/drawer/Main.vue

@@ -3,20 +3,20 @@
     <div class="wrapper" :style="{right:handleDrawer ? '300px' : '0px'}">
 
       <div class="barItem" @mouseenter="showCartNum(item)" @click="clickBar(item)" v-for="(item,index) in resetConfig.menuList" :key="index">
-        <Tooltip placement="left" :content="item.title">
-          <Icon size="20" :type="item.icon"/>
+        <el-tooltip placement="left" :content="item.title">
+          <el-icon :size="20"><component :is="resolveIcon(item.icon)" /></el-icon>
           <p class="barTitle" v-if="item.titleShow"> {{item.title}}</p>
           <div class="circle" v-if="item.title === '购物车'">
             {{cartNum < 100 ? cartNum : 99}}
           </div>
-        </Tooltip>
+        </el-tooltip>
       </div>
 
     </div>
-    <Drawer width="300" class="popup" :title="drawerData.title" :mask="resetConfig.mask" :closable="resetConfig.closable"
+    <el-drawer width="300" class="popup" :title="drawerData.title" :mask="resetConfig.mask" :closable="resetConfig.closable"
       v-model="handleDrawer">
       <drawerPage :title="drawerData.title" />
-    </Drawer>
+    </el-drawer>
   </div>
 </template>
 
@@ -25,6 +25,7 @@ import Storage from '@/plugins/storage.js';
 import Configuration from './config';
 import drawerPage from './Drawer'
 import {cartCount} from '@/api/cart.js'
+import { resolveIcon } from '@/utils/iconMap'
 export default {
   name: 'Main',
   data () {
@@ -46,6 +47,7 @@ export default {
     }
   },
   methods: {
+    resolveIcon,
     showCartNum (item) { // 获取购物车数量
       if (this.userInfo && item.title === '购物车') {
         this.getCartList()
@@ -147,11 +149,11 @@ export default {
     justify-content: center;
     flex-direction: column;
   }
-  ::v-deep.popup .ivu-drawer-body{
-    padding: 0!important;
+  :deep(.popup .el-drawer__body) {
+    padding: 0 !important;
     background-color: #eee;
   }
-  ::v-deep.popup .ivu-drawer-wrap{
+  :deep(.popup) {
     z-index: 3001;
   }
 </style>

buyer/src/components/drawer/README.md

@@ -1,42 +1,30 @@
 # 右侧侧边栏组件
-> 本组件依赖于iview的组件基础上进行封装
->项目结构
->* Main  -- 组件用于挂在右侧的横栏
->* drawer -- 右侧横栏的内容
->* config -- 用于设置大小
 
+基于 Element Plus `el-drawer` 封装的右侧悬浮栏。
 
-#### config设置
-```
+## 项目结构
+
+- `Main.vue` — 挂载右侧横栏的容器
+- `Drawer.vue` — 横栏展开后的内容面板
+- `config.js` — 尺寸与菜单配置
+
+## config 设置
+
+```js
 /**
-menuList // 组件的menu
-display //是否显示此menu
-badge //显示徽标数
-titleShow //是否显示title
-*/
-
-//实例代码
- width : 50, //bar的大小
- menuList:[
-   {
-      icon
-   }
- ]
-
-
+ * menuList  菜单项列表
+ * display   是否显示该项
+ * badge     徽标数字
+ * titleShow 是否显示标题
+ */
+width: 50,
+menuList: [{ icon: '...' }]
 ```
 
+## 功能模块
 
+账户信息、购物车、我的订单、优惠券、我的资产、我的足迹、我的收藏、邮箱订阅
 
-> 账户信息
-> 购物车
-> 我的订单
-> 优惠券
-> 我的资产
-> 我的足迹
-> 我的收藏
-> 邮箱订阅
+## 使用
 
-
-## 如何使用
-1.
+在页面中注册全局组件 `<drawer />` 即可（已在 `global.js` 中注册）。

buyer/src/components/global.js

@@ -1,54 +1,19 @@
-// 全局组件配置
+import empty from "./empty/Main.vue";
+import drawer from "./drawer/Main.vue";
+import Header from "@/components/header/Header.vue";
+import FixedTopPage from "@/components/advertising/FixedTop.vue";
+import Footer from "@/components/footer/Footer.vue";
+import Search from "@/components/Search.vue";
+import card from "@/components/card/index.vue";
+import cateNav from "@/components/nav/CateNav.vue";
 
-import empty from './empty/Main' // 空状态组件
-import drawer from './drawer/Main' // 右侧bar
-import Header from '@/components/header/Header'; // 头部组件
-import FixedTopPage from '@/components/advertising/FixedTop'; // 顶部广告
-import Footer from '@/components/footer/Footer'; // 底部栏
-import Search from '@/components/Search' // 搜索框
-import card from '@/components/card' // 个人中心 卡片
-import cateNav from '@/components/nav/CateNav' // 个人中心 卡片
-
-empty.install = function (Vue) {
-  Vue.component('empty', empty);
-};
-
-drawer.install = function (Vue) {
-  Vue.component('drawer', drawer);
-};
-
-Header.install = function (Vue) {
-  Vue.component('BaseHeader', Header);
-};
-
-FixedTopPage.install = function (Vue) {
-  Vue.component('FixedTopPage', FixedTopPage);
-};
-
-Footer.install = function (Vue) {
-  Vue.component('BaseFooter', Footer);
-};
-
-Search.install = function (Vue) {
-  Vue.component('Search', Search);
-};
-
-card.install = function (Vue) {
-  Vue.component('card', card)
-}
-
-cateNav.install = function (Vue) {
-  Vue.component('cateNav', cateNav)
-}
-
-// 引用本js中所有的组件
-export function InstallAll (Vue) {
-  Vue.use(empty)
-  Vue.use(drawer)
-  Vue.use(Header)
-  Vue.use(FixedTopPage)
-  Vue.use(Footer)
-  Vue.use(Search)
-  Vue.use(card)
-  Vue.use(cateNav)
+export function registerGlobalComponents(app) {
+  app.component("empty", empty);
+  app.component("drawer", drawer);
+  app.component("BaseHeader", Header);
+  app.component("FixedTopPage", FixedTopPage);
+  app.component("BaseFooter", Footer);
+  app.component("Search", Search);
+  app.component("card", card);
+  app.component("cateNav", cateNav);
 }

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{

buyer/src/components/header/Header.vue

@@ -23,10 +23,9 @@
         <li v-show="!!userInfo.username">
           <div class="username-p">
             <div>
-              <Avatar class="person-icon" :src="userInfo.face" icon="person" size="small"/>
-              <span class="username">{{
-                  userInfo.nickName ? userInfo.nickName : userInfo.username | secrecyMobile
-                }}</span>
+              <el-avatar class="person-icon" :src="userInfo.face" :size="24" />
+              <span class="username">{{ $filters.secrecyMobile(
+                  userInfo.nickName ? userInfo.nickName : userInfo.username ) }}</span>
             </div>
             <transition name='fade'>
               <ul class="drop-items">
@@ -42,16 +41,16 @@
         <li @click="goUserCenter('/home/MyTracks')"><span class="nav-item">我的足迹</span></li>
         <li @click="goUserCenter('/home/MsgList')"><span class="nav-item">我的消息</span></li>
         <li v-if="$route.name !== 'Cart'" style="position:relative;">
-          <Dropdown placement="bottom-start">
+          <el-dropdown placement="bottom-start" trigger="hover">
             <router-link to="/cart" target="_blank">
               <span class="nav-item" @mouseenter="getCartList">
-                <Icon size="18" type="ios-cart-outline"></Icon>
+                <el-icon :size="18"><ShoppingCart /></el-icon>
                 购物车（{{ cartNum < 100 ? cartNum : '99' }}）
               </span>
             </router-link>
-            <DropdownMenu slot="list">
+            <template #dropdown>
               <div class="shopping-cart-null" style="width:200px" v-show="shoppingCart.length <= 0">
-                <Icon type="ios-cart-outline" class="cart-null-icon"></Icon>
+                <el-icon class="cart-null-icon"><ShoppingCart /></el-icon>
                 <span>你的购物车没有宝贝哦</span>
                 <span>赶快去添加商品吧~</span>
               </div>
@@ -68,18 +67,16 @@
                       <div>
                         数量:
                         <span class="shopping-cart-text">{{ item.num }}</span>
-
                       </div>
                       <div class="shopping-price">
-                        {{ item.purchasePrice | unitPrice('￥') }}
+                        {{ $filters.unitPrice(item.purchasePrice, '￥') }}
                       </div>
                     </div>
                   </div>
                 </div>
-
               </div>
-            </DropdownMenu>
-          </Dropdown>
+            </template>
+          </el-dropdown>
         </li>
         <li>
           <span class="nav-item" @click="shopEntry">店铺入驻</span>
@@ -91,12 +88,14 @@
 </template>
 
 <script>
+import { ShoppingCart } from '@element-plus/icons-vue';
 import storage from '@/plugins/storage.js';
 import {cartGoodsAll} from '@/api/cart.js';
 import {logout} from '@/api/account.js';
 
 
 export default {
+  components: { ShoppingCart },
   name: 'M-Header',
   created() {
     if (storage.getItem('userInfo')) {

buyer/src/components/header/hoverSearch.vue

@@ -12,12 +12,9 @@
         useClass="fixed-show"
       ></Search>
       <div class="flex flex-a-c cart">
-        <Icon
-          type="ios-cart-outline"
-          @click="goCartList"
-          class="cart-icon"
-          @mouseenter.native="getCartList"
-        />
+        <span @mouseenter="getCartList">
+          <el-icon class="cart-icon" :size="20" @click="goCartList"><ShoppingCart /></el-icon>
+        </span>
         <i class="cart-badge">{{ cartNum < 100 ? cartNum : "99" }}</i>
       </div>
     </div>
@@ -27,7 +24,9 @@
 <script>
 import { cartCount } from "@/api/cart.js";
 import storage from "@/plugins/storage.js";
+import { ShoppingCart } from "@element-plus/icons-vue";
 export default {
+  components: { ShoppingCart },
   data() {
     return {
       userInfo: {}, // 用户信息

buyer/src/components/indexDecorate/ModelForm.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="model-form">
     <div class="model-content">
-      <template v-for="(element, index) in data.list">
+      <template v-for="(element, index) in data.list" :key="element.key || index">
         <model-form-item
           v-if="element && element.key"
-          :key="element.key"
           :element="element"
           :index="index"
           :data="data"

buyer/src/components/indexDecorate/ModelFormItem.vue

@@ -29,12 +29,11 @@
         />
       </div>
       <ul class="advert-list width_1200_auto">
-        <template v-for="(item, index) in element.options.list">
+        <template v-for="(item, index) in element.options.list" :key="index">
           <li
             v-if="index !== 0"
             @click="linkTo(item.url)"
             class="hover-pointer"
-            :key="index"
           >
             <img :src="item.img" width="230" height="190" alt="" />
           </li>

buyer/src/components/indexDecorate/modelList/Carousel.vue

@@ -6,17 +6,17 @@
       <div class="nav-content">
         <!-- 轮播图 -->
 <!--        autoplay autoplay-speed="10000"-->
-        <Carousel :height="333.9" autoplay :autoplay-speed="5000">
-          <CarouselItem  v-for="(item, index) in data.options.list" :key="index">
-            <div class="swiper-img" >
+        <el-carousel height="334px" :interval="5000">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
+            <div class="swiper-img">
               <img
                 :src="item.img"
                 @click="linkTo(item.url)"
                 class="hover-pointer"
               />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
       </div>
       <div class="nav-right">
         <div class="person-msg">
@@ -24,7 +24,7 @@
             <img class="user-face" :src="userInfo.face || defaultAvatar"  alt />
             <div class="welcome">
               Hi, {{
-                userInfo.nickName || `欢迎来到${config.title}` | secrecyMobile
+                $filters.secrecyMobile(userInfo.nickName || `欢迎来到${config.title}`)
               }}
             </div>
           </div>

buyer/src/components/indexDecorate/modelList/Carousel1.vue

@@ -5,13 +5,13 @@
       <div class="nav-side"></div>
       <div class="nav-content">
         <!-- 轮播图 -->
-        <Carousel autoplay @on-change="autoChange">
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index" >
+        <el-carousel height="470px" :interval="5000" @change="autoChange">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
             <div style="overflow: hidden">
               <img :src="item.img" width="1200" height="470" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
       </div>
     </div>
   </div>
@@ -34,8 +34,8 @@ export default {
   },
   methods: {
     // 自动切换时改变背景色
-    autoChange (oVal, val) {
-      this.bgColor = this.data.options.list[val].bgColor
+    autoChange (index) {
+      this.bgColor = this.data.options.list[index].bgColor
     }
   }
 };

buyer/src/components/indexDecorate/modelList/Carousel2.vue

@@ -5,18 +5,17 @@
       <div class="nav-side"></div>
       <div class="nav-content">
         <!-- 轮播图 -->
-        <Carousel autoplay>
-          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
+        <el-carousel height="470px" :interval="5000">
+          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
             <div style="overflow: hidden">
               <img :src="item.img" width="590" height="470" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
       </div>
       <div class="nav-content1">
-        <!-- 轮播图 -->
-        <Carousel autoplay :autoplay-speed="5000">
-          <CarouselItem v-for="(item, index) in data.options.listRight" :key="index">
+        <el-carousel height="470px" :interval="5000">
+          <el-carousel-item v-for="(item, index) in data.options.listRight" :key="index">
             <div class="mb_10">
               <img :src="item[0].img" width="190" height="150" />
             </div>
@@ -26,19 +25,19 @@
             <div>
               <img :src="item[2].img" width="190" height="150" />
             </div>
-          </CarouselItem>
-        </Carousel>
+          </el-carousel-item>
+        </el-carousel>
       </div>
       <div class="nav-right">
         <div class="person-msg">
           <img :src="userInfo.face" v-if="userInfo.face" alt />
-          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
-          <div>Hi，{{ userInfo.nickName || `欢迎来到${config.title}` | secrecyMobile }}</div>
+          <el-avatar v-else :size="80" class="mb_10"><el-icon><User /></el-icon></el-avatar>
+          <div>Hi，{{ $filters.secrecyMobile(userInfo.nickName || `欢迎来到${config.title}`) }}</div>
           <div v-if="userInfo.id">
-            <Button type="error" shape="circle">会员中心</Button>
+            <el-button type="danger" shape="circle">会员中心</el-button>
           </div>
           <div v-else>
-            <Button type="error" shape="circle">请登录</Button>
+            <el-button type="danger" shape="circle">请登录</el-button>
           </div>
         </div>
         <div class="shop-msg">
@@ -60,7 +59,9 @@
 
 import {articleList} from '@/api/common.js'
 import storage from '@/plugins/storage';
+import { User } from '@element-plus/icons-vue';
 export default {
+  components: { User },
   name: 'modelCarousel2',
   props: ['data'],
   data () {
@@ -163,7 +164,7 @@ export default {
       margin-top: 10px;
     }
 
-    .ivu-btn-default {
+    .el-button--default {
       color: $theme_color;
       border-color: $theme_color;
     }

buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue

@@ -4,8 +4,7 @@
       <div class="top-header" :style="{ background: options.left.bgColor }">
         <span>{{ options.left.title }}</span>
         <span @click="linkTo(options.left.url)" class="hover-pointer"
-          >{{ options.left.secondTitle }} &gt;</span
-        >
+          >{{ options.left.secondTitle }} &gt;</span>
       </div>
       <div class="content">
         <div
@@ -27,8 +26,7 @@
       <div class="top-header" :style="{ background: options.middle.bgColor }">
         <span>{{ options.middle.title }}</span>
         <span class="hover-pointer" @click="linkTo(options.middle.url)"
-          >{{ options.middle.secondTitle }} &gt;</span
-        >
+          >{{ options.middle.secondTitle }} &gt;</span>
       </div>
       <div class="content">
         <div
@@ -50,8 +48,7 @@
       <div class="top-header" :style="{ background: options.right.bgColor }">
         <span>{{ options.right.title }}</span>
         <span @click="linkTo(options.right.url)" class="hover-pointer"
-          >{{ options.right.secondTitle }} &gt;</span
-        >
+          >{{ options.right.secondTitle }} &gt;</span>
       </div>
       <div class="content">
         <div
@@ -62,7 +59,7 @@
         >
           <img :src="item.img" alt="" />
           <p>{{ item.name }}</p>
-          <p>{{ item.price | unitPrice("￥") }}</p>
+          <p>{{ $filters.unitPrice(item.price, "￥") }}</p>
           <div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
             {{ index + 1 }}
           </div>

buyer/src/components/indexDecorate/modelList/NotEnough.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="not-enough" ref="obtain" id="demo">
-    <Affix :offset-top="62" @on-change="change">
+    <el-affix :offset-top="62" @change="change">
       <ul class="nav-bar" v-show="topSearchShow">
         <li
           v-for="(item, index) in conData.options.navList"
@@ -12,7 +12,7 @@
           <p @click="gotoDemo">{{ item.desc }}</p>
         </li>
       </ul>
-    </Affix>
+    </el-affix>
     <div class="content" v-if="showContent">
       <div
         v-for="(item, index) in conData.options.list[currentIndex]"
@@ -23,7 +23,7 @@
         <img :src="item.img" width="210" height="210" :alt="item.name" />
         <p>{{ item.name }}</p>
         <p>
-          <span>{{ Number(item.price) | unitPrice("￥") }}</span>
+          <span>{{ $filters.unitPrice(Number(item.price), "￥") }}</span>
         </p>
       </div>
     </div>

buyer/src/components/indexDecorate/modelList/Recommend.vue

@@ -10,12 +10,12 @@
           <img class="hover-pointer"  @click="linkTo(msgLeft.list[0].url)" :src="msgLeft.list[0].img" width="160" height="160" alt="" />
           <div class="margin-left">{{ msgLeft.list[0].name }}</div>
           <div class="margin-left">{{ msgLeft.list[0].describe }}</div>
-          <Button
+          <el-button
             size="small"
             :style="{ background: msgLeft.bgColor }"
             @click="linkTo(msgLeft.list[0].url)"
             class="fz_12 view-btn"
-            >点击查看</Button
+            >点击查看</el-button
           >
         </div>
         <div>
@@ -36,8 +36,7 @@
       <div class="head-recommend" :style="{ background: msgRight.bgColor }">
         <span>{{ msgRight.title }}</span>
         <span @click="linkTo(msgRight.url)" class="hover-pointer"
-          >{{ msgRight.secondTitle }}&gt;</span
-        >
+          >{{ msgRight.secondTitle }}&gt;</span>
       </div>
       <div class="content-right">
         <div

buyer/src/components/indexDecorate/modelList/Seckill.vue

@@ -12,155 +12,105 @@
       </div>
       <div class="act-status" v-else>未开始</div>
     </div>
-    <swiper :options="swiperOption" ref="mySwiper">
-      <swiper-slide v-for="(item,index) in goodsList" :key="index">
-        <div class="content hover-pointer"  @click.stop="goToSeckill">
-          <img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName">
-          <div class="ellipsis">{{item.goodsName}}</div>
-          <div>
-            <span>{{ item.price | unitPrice('￥') }}</span>
-            <span>{{ item.originalPrice | unitPrice('￥') }}</span>
-          </div>
+    <div class="goods-scroll">
+      <div
+        v-for="(item, index) in goodsList"
+        :key="index"
+        class="content hover-pointer"
+        @click.stop="goToSeckill"
+      >
+        <img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName" />
+        <div class="ellipsis">{{ item.goodsName }}</div>
+        <div>
+          <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+          <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
         </div>
-      </swiper-slide>
-      <div class="swiper-button-prev" slot="button-prev">
-        <Icon type="ios-arrow-back" />
       </div>
-      <div class="swiper-button-next" slot="button-next">
-        <Icon type="ios-arrow-forward" />
-      </div>
-    </swiper>
+    </div>
   </div>
 </template>
 <script>
-// 引入插件
-import { swiper, swiperSlide } from 'vue-awesome-swiper';
-import 'swiper/dist/css/swiper.css';
 export default {
-  components: {
-    swiper,
-    swiperSlide
-  },
   props: {
-    data: Object
+    data: Object,
   },
-  data () {
+  data() {
     return {
-      list: [], // 秒杀时段列表
-      goodsList: [], // 商品列表
-      actStatus: 0, // 0 未开始  1 进行中
-      actName: '限时秒杀', // 活动名称
-      currIndex: 0, // 当前时间段的下标
-      currHour: '00', // 当前秒杀场
-      diffSeconds: 0, // 倒计时秒数
-      hours: 0, // 小时
-      minutes: 0, // 分钟
-      seconds: 0, // 秒
-      interval: null, // 定时器
-      swiperOption: { // 轮播图参数
-
-        slidesPerView: 5,
-        // 设置点击箭头
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev'
-        }
-      }
+      list: [],
+      goodsList: [],
+      actStatus: 0,
+      actName: "限时秒杀",
+      currIndex: 0,
+      currHour: "00",
+      diffSeconds: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      interval: null,
     };
   },
   watch: {
-    currIndex (val) {
-      clearInterval(this.interval)
-      this.interval = null
-      this.countDown(val)
-      this.goodsList = this.list[val].seckillGoodsList
+    currIndex(val) {
+      clearInterval(this.interval);
+      this.interval = null;
+      this.countDown(val);
+      this.goodsList = this.list[val].seckillGoodsList;
     },
-    diffSeconds (val) {
+    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.hours = filteTime(hours)
-      this.minutes = filteTime(minutes)
-      this.seconds = filteTime(seconds)
+      this.hours = filteTime(hours);
+      this.minutes = filteTime(minutes);
+      this.seconds = filteTime(seconds);
       if (val <= 0) {
-        clearInterval(this.interval)
-        this.interval = null
+        clearInterval(this.interval);
+        this.interval = null;
       }
-      function filteTime (time) {
-        if (time < 10) {
-          return '0' + time
-        } else {
-          return time
-        }
+      function filteTime(time) {
+        return time < 10 ? "0" + time : time;
       }
-    }
+    },
   },
-  computed: {
-    swiper () { // 轮播组件
-      return this.$refs.mySwiper.swiper;
-    }
-  },
-  beforeDestroy () {
-    // 销毁前清除定时器
+  beforeUnmount() {
     clearInterval(this.interval);
   },
-  mounted () {
-    this.getListByDay()
+  mounted() {
+    this.getListByDay();
   },
   methods: {
-    goToSeckill () { // 跳转秒杀页面
-      let routeUrl = this.$router.resolve({
-        path: '/seckill'
-      });
-      window.open(routeUrl.href, '_blank');
+    goToSeckill() {
+      const routeUrl = this.$router.resolve({ path: "/seckill" });
+      window.open(routeUrl.href, "_blank");
     },
-    countDown (currIndex) { // 倒计时
-      // 0点时间戳
-      let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-      let currTime = new Date().getTime()
+    countDown(currIndex) {
+      const zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+      const currTime = new Date().getTime();
       let actTime = 0;
-      let nowHour = new Date().getHours(); // 当前小时数
-      if (this.list[currIndex].timeLine > nowHour) { // 活动未开始
+      const nowHour = new Date().getHours();
+      if (this.list[currIndex].timeLine > nowHour) {
         this.actStatus = 0;
-        actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
-      } else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
+        actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000;
+      } else if (this.list[currIndex].timeLine <= nowHour) {
         this.actStatus = 1;
-        if (currIndex === this.list.length - 1) { // 如果是最后一个活动，直到24点结束
-          actTime = zeroTime + 24 * 3600 * 1000
+        if (currIndex === this.list.length - 1) {
+          actTime = zeroTime + 24 * 3600 * 1000;
         } else {
-          actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
+          actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000;
         }
       }
-      this.currHour = this.list[this.currIndex].timeLine
-      this.diffSeconds = Math.floor((actTime - currTime) / 1000)
+      this.currHour = this.list[this.currIndex].timeLine;
+      this.diffSeconds = Math.floor((actTime - currTime) / 1000);
       this.interval = setInterval(() => {
-        this.diffSeconds--
-      }, 1000)
+        this.diffSeconds--;
+      }, 1000);
     },
-    getListByDay () { // 当天秒杀活动
-      // const list = [
-      //   {
-      //     timeLine: 18,
-      //     seckillGoodsList: [
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
-      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12}
-      //     ]
-      //   }
-      // ]
-      this.list = this.data.options.list
-      this.goodsList = this.list[0].seckillGoodsList
-      console.log( this.goodsList)
-      this.countDown(this.currIndex)
-    }
-  }
+    getListByDay() {
+      this.list = this.data.options.list;
+      this.goodsList = this.list[0].seckillGoodsList;
+      this.countDown(this.currIndex);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -174,15 +124,13 @@ export default {
     width: 190px;
     height: 100%;
     color: #fff;
-    background-image: url("../../../assets/images/seckillBg.png");
-
+    background: linear-gradient(180deg, #ff5c58 0%, #e84a46 100%);
     .title {
       width: 100%;
       text-align: center;
       font-size: 28px;
       margin-top: 31px;
     }
-
     .hour {
       margin-top: 90px;
       text-align: center;
@@ -190,7 +138,6 @@ export default {
         font-size: 18px;
       }
     }
-
     .count-down {
       margin: 10px 0 0 30px;
       > span {
@@ -219,15 +166,21 @@ export default {
         content: "";
       }
     }
-
     .act-status {
       margin: 10px 0 0 65px;
       font-size: 20px;
     }
   }
-
+  .goods-scroll {
+    height: 260px;
+    flex: 1;
+    margin-left: 10px;
+    background-color: #fff;
+    display: flex;
+    overflow-x: auto;
+  }
   .content {
-    width: 200px;
+    min-width: 200px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -262,26 +215,12 @@ export default {
       line-height: 24px;
       display: flex;
       text-align: center;
-
       span:nth-child(1) {
         color: #fff;
         font-size: 16px;
         width: 92px;
         background-color: $theme_color;
-        position: relative;
-        &::before {
-          content: " ";
-          width: 0;
-          height: 0;
-          border-color: transparent white transparent transparent;
-          border-style: solid;
-          border-width: 24px 8px 0 0;
-          position: absolute;
-          top: 0;
-          left: 84px;
-        }
       }
-
       span:nth-child(2) {
         color: #999;
         width: 66px;
@@ -290,35 +229,4 @@ export default {
     }
   }
 }
-.swiper-container {
-  height: 260px;
-  width: 1000px;
-  margin-left: 10px;
-  background-color: #fff;
-}
-.swiper-button-prev, .swiper-button-next {
-  background: #ccc;
-  width: 25px;
-  height: 35px;
-  font-size: 16px;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.swiper-button-prev:hover, .swiper-button-next:hover {
-  background: #aaa;
-}
-.swiper-button-prev {
-  left: 0;
-  border-bottom-right-radius: 18px;
-  border-top-right-radius: 18px;
-  padding-right: 5px;
-}
-.swiper-button-next {
-  right: 0;
-  border-top-left-radius: 18px;
-  border-bottom-left-radius: 18px;
-  padding-left: 5px;
-}
 </style>

buyer/src/components/indexDecorate/modelList/forYour.vue

@@ -34,7 +34,7 @@
             <div class="hot-goods">
               <div class="hot-goods-title">{{ item.title }}</div>
               <div>
-                <div class="hot-price">￥{{ item.price | unitPrice }}</div>
+                <div class="hot-price">￥{{ $filters.unitPrice(item.price) }}</div>
               </div>
             </div>
           </div>
@@ -84,10 +84,10 @@ export default {
     border-top: 1.4px solid #e2e2e2;
   }
   &:hover {
-    ::v-deep .goods-name {
+    :deep .goods-name {
       color: $theme_color;
     }
-    ::v-deep .goods-desc {
+    :deep .goods-desc {
       color: $theme_color;
     }
   }

buyer/src/components/indexDecorate/modelList/goodsAndType.vue

@@ -33,7 +33,7 @@
           <div class="goods-desc">{{ item.desc }}</div>
         </div>
         <div class="goods-price">
-          {{ item.price | unitPrice("￥") }}
+          {{ $filters.unitPrice(item.price, "￥") }}
         </div>
         <!-- 查看 -->
         <div class="white-shadow">

buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue

@@ -6,7 +6,7 @@
     <div class="right-side">
       <div class="badge-box flex">
         <div class="round">
-          <Icon type="ios-arrow-forward" />
+          <el-icon><ArrowRight /></el-icon>
         </div>
 
 
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { ArrowRight } from '@element-plus/icons-vue';
 export default {
   name: "mix-goods",
   data() {
@@ -34,7 +35,7 @@ export default {
       default: {}
     }
   },
-  components: {},
+  components: { ArrowRight },
   mounted() {
 
   },

buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue

@@ -17,7 +17,7 @@
               </div>
               <div class="goods-detail">
                 <div class="goods-detail-title">{{item.title}}</div>
-                <div class="goods-detail-price">{{item.price | unitPrice('¥')}}</div>
+                <div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
               </div>
             </div>
           </div>

buyer/src/components/indexDecorate/modelList/setup-box.scss

@@ -0,0 +1,62 @@
+.setup-content{
+    position: relative;
+    &:hover{
+        .setup-box{
+            display: block;
+        }
+    }
+}
+
+.setup-box{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, .2);
+    z-index: 99;
+    width: 100%;
+    height: 100%;
+    .el-button{
+        float: right;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+}
+
+.modal-tab-bar{
+    margin-left: 20px;
+    table{
+        margin-top: 10px;
+        display:inline-block;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        max-height: 400px !important;
+        overflow: hidden auto;
+    }
+    thead{
+        background-color: #eee;
+        th{
+            padding: 5px 0;
+        }
+    }
+    td{
+       padding: 10px;
+       text-align: center;
+    }
+    tbody>tr:hover{
+        background-color: aliceblue;
+    }
+}
+
+.modal-top-advert{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    >*{
+        margin-bottom: 10px;
+    }
+    .el-input{
+        width: 200px;
+    }
+}

buyer/src/components/invoiceModal/index.vue

@@ -1,90 +1,89 @@
 <template>
   <div class="invoice-modal">
-    <Modal v-model="invoiceAvailable" width="640" footer-hide>
-      <p slot="header">
+    <el-dialog v-model="invoiceAvailable" width="640" footer-hide>
+      <template #header><p>
         <span>发票信息</span>
-      </p>
+      </p></template>
       <div class="nav-content">
-        <Form :model="invoiceForm" ref="form" label-position="left" :rules="formRules" :label-width="118">
-          <FormItem label="发票类型">
-            <RadioGroup v-model="invoice" type="button" button-style="solid" @on-change="onInvoiceKindChange">
-              <Radio :label="1">电子普通发票</Radio>
-              <Radio :label="2">增值税专用发票</Radio>
-            </RadioGroup>
-          </FormItem>
+        <el-form :model="invoiceForm" ref="form" label-position="left" :rules="formRules" label-width="118px">
+          <el-form-item label="发票类型">
+            <el-radio-group v-model="invoice" type="button" button-style="solid" @change="onInvoiceKindChange">
+              <el-radio :label="1">电子普通发票</el-radio>
+              <el-radio :label="2">增值税专用发票</el-radio>
+            </el-radio-group>
+          </el-form-item>
 
           <!-- 电子普通发票 -->
           <div v-if="invoice === 1" key="invoice-normal">
-            <FormItem label="发票抬头">
-              <RadioGroup v-model="type" type="button" button-style="solid" @on-change="onHeaderTypeChange">
-                <Radio :label="1">个人</Radio>
-                <Radio :label="2">单位</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem :label="type === 1 ? '个人名称' : '单位名称'" :prop="type === 1 ? 'personalName' : 'companyName'">
-              <i-input v-if="type === 1" v-model="invoiceForm.personalName"></i-input>
-              <i-input v-else v-model="invoiceForm.companyName"></i-input>
-            </FormItem>
+            <el-form-item label="发票抬头">
+              <el-radio-group v-model="type" type="button" button-style="solid" @change="onHeaderTypeChange">
+                <el-radio :label="1">个人</el-radio>
+                <el-radio :label="2">单位</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="type === 1 ? '个人名称' : '单位名称'" :prop="type === 1 ? 'personalName' : 'companyName'">
+              <el-input v-if="type === 1" v-model="invoiceForm.personalName"></el-input>
+              <el-input v-else v-model="invoiceForm.companyName"></el-input>
+            </el-form-item>
 
-            <FormItem label="纳税人识别号" v-if="type === 2" prop="taxpayerId">
-              <i-input v-model="invoiceForm.taxpayerId"></i-input>
-            </FormItem>
-            <FormItem label="发票内容">
-              <RadioGroup v-model="invoiceForm.receiptContent" type="button" button-style="solid">
-                <Radio label="商品明细">商品明细</Radio>
-                <Radio label="商品类别">商品类别</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem label="收票人手机" prop="receiptPhone">
-              <i-input v-model="invoiceForm.receiptPhone"></i-input>
-            </FormItem>
-            <FormItem label="收票人邮箱" prop="receiptEmail">
-              <i-input v-model="invoiceForm.receiptEmail" placeholder="可选"></i-input>
-            </FormItem>
+            <el-form-item label="纳税人识别号" v-if="type === 2" prop="taxpayerId">
+              <el-input v-model="invoiceForm.taxpayerId"></el-input>
+            </el-form-item>
+            <el-form-item label="发票内容">
+              <el-radio-group v-model="invoiceForm.receiptContent" type="button" button-style="solid">
+                <el-radio label="商品明细">商品明细</el-radio>
+                <el-radio label="商品类别">商品类别</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="收票人手机" prop="receiptPhone">
+              <el-input v-model="invoiceForm.receiptPhone"></el-input>
+            </el-form-item>
+            <el-form-item label="收票人邮箱" prop="receiptEmail">
+              <el-input v-model="invoiceForm.receiptEmail" placeholder="可选"></el-input>
+            </el-form-item>
           </div>
 
           <!-- 增值税专用发票（固定为单位） -->
           <div v-else key="invoice-vat">
-            <FormItem label="发票抬头">
+            <el-form-item label="发票抬头">
               <span class="inv-title-fixed">单位</span>
-            </FormItem>
-            <FormItem label="单位名称" prop="companyName">
-              <i-input v-model="invoiceForm.companyName" placeholder="与营业执照一致"></i-input>
-            </FormItem>
-            <FormItem label="纳税人识别号" prop="taxpayerId">
-              <i-input v-model="invoiceForm.taxpayerId"></i-input>
-            </FormItem>
-            <FormItem label="单位地址" prop="companyAddress">
-              <i-input v-model="invoiceForm.companyAddress" placeholder="注册地址"></i-input>
-            </FormItem>
-            <FormItem label="单位电话" prop="companyPhone">
-              <i-input v-model="invoiceForm.companyPhone" placeholder="固话或手机"></i-input>
-            </FormItem>
-            <FormItem label="开户银行" prop="bankName">
-              <i-input v-model="invoiceForm.bankName"></i-input>
-            </FormItem>
-            <FormItem label="银行账号" prop="bankAccount">
-              <i-input v-model="invoiceForm.bankAccount"></i-input>
-            </FormItem>
-            <FormItem label="发票内容">
-              <RadioGroup v-model="invoiceForm.receiptContent" type="button" button-style="solid">
-                <Radio label="商品明细">商品明细</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem label="收票人手机" prop="receiptPhone">
-              <i-input v-model="invoiceForm.receiptPhone"></i-input>
-            </FormItem>
-            <FormItem label="收票人邮箱" prop="receiptEmail">
-              <i-input v-model="invoiceForm.receiptEmail" placeholder="可选"></i-input>
-            </FormItem>
+            </el-form-item>
+            <el-form-item label="单位名称" prop="companyName">
+              <el-input v-model="invoiceForm.companyName" placeholder="与营业执照一致"></el-input>
+            </el-form-item>
+            <el-form-item label="纳税人识别号" prop="taxpayerId">
+              <el-input v-model="invoiceForm.taxpayerId"></el-input>
+            </el-form-item>
+            <el-form-item label="单位地址" prop="companyAddress">
+              <el-input v-model="invoiceForm.companyAddress" placeholder="注册地址"></el-input>
+            </el-form-item>
+            <el-form-item label="单位电话" prop="companyPhone">
+              <el-input v-model="invoiceForm.companyPhone" placeholder="固话或手机"></el-input>
+            </el-form-item>
+            <el-form-item label="开户银行" prop="bankName">
+              <el-input v-model="invoiceForm.bankName"></el-input>
+            </el-form-item>
+            <el-form-item label="银行账号" prop="bankAccount">
+              <el-input v-model="invoiceForm.bankAccount"></el-input>
+            </el-form-item>
+            <el-form-item label="发票内容">
+              <el-radio-group v-model="invoiceForm.receiptContent" type="button" button-style="solid">
+                <el-radio label="商品明细">商品明细</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="收票人手机" prop="receiptPhone">
+              <el-input v-model="invoiceForm.receiptPhone"></el-input>
+            </el-form-item>
+            <el-form-item label="收票人邮箱" prop="receiptEmail">
+              <el-input v-model="invoiceForm.receiptEmail" placeholder="可选"></el-input>
+            </el-form-item>
           </div>
-        </Form>
+        </el-form>
         <div style="text-align: center">
-          <Button type="primary" :loading="loading" @click="submit">保存发票信息</Button>
-          <Button type="default" @click="invoiceAvailable = false">取消</Button>
+          <el-button type="primary" :loading="loading" @click="submit">保存发票信息</el-button>
+          <el-button type="default" @click="invoiceAvailable = false">取消</el-button>
         </div>
-      </div>
-    </Modal>
+      </div></el-dialog>
   </div>
 </template>
 <script>

buyer/src/components/map/index.vue

@@ -5,7 +5,7 @@
     <div id="map-container"></div>
 
     <div class="search-con">
-      <Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
+      <el-input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
       <ul>
         <li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
           <p>{{ tip.name }}</p>
@@ -13,11 +13,9 @@
         </li>
       </ul>
     </div>
-    <div slot="footer" class="footer">
-
-      <Button type="primary" :loading="loading" @click="ok">确定</Button>
+    <div class="footer">
+      <el-button type="primary" :loading="loading" @click="ok">确定</el-button>
     </div>
-
   </div>
 </template>
 <script>

buyer/src/components/map/multiple-map.vue

@@ -1,9 +1,9 @@
 <template>
-  <Modal width="800" footer-hide v-model="enableMap">
-    <RadioGroup @on-change="changeMap" v-model="mapDefault" type="button">
-      <Radio label="select">级联选择</Radio>
-      <Radio label="map" v-if="aMapSwitch">高德地图</Radio>
-    </RadioGroup>
+  <el-dialog width="800" footer-hide v-model="enableMap">
+    <el-radio-group @change="changeMap" v-model="mapDefault" type="button">
+      <el-radio label="select">级联选择</el-radio>
+      <el-radio label="map" v-if="aMapSwitch">高德地图</el-radio>
+    </el-radio-group>
     <div>
       <div v-if="mapDefault === 'select'">
         <div class="selector">
@@ -18,15 +18,12 @@
 
         </div>
         <div class="footer">
-          <Button type="primary" @click="finished">确定</Button>
+          <el-button type="primary" @click="finished">确定</el-button>
         </div>
       </div>
       <mapping v-if="mapDefault === 'map'" ref="map" @getAddress="getAddress" />
 
-    </div>
-
-
-  </Modal>
+    </div></el-dialog>
 </template>
 
 <script>

buyer/src/components/map/region.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <Cascader
+    <el-cascader
       :data="data"
       :load-data="loadData"
       v-model="addr"
-      @on-change="change"
+      @change="change"
       style="width: 300px"
-    ></Cascader>
+    ></el-cascader>
   </div>
 </template>
 <script>

buyer/src/components/nav/CateNav.vue

@@ -49,8 +49,7 @@
                 @click="goGoodsList(second.id, second.parentId)"
                 class="nav-side-item"
                 v-if="secIndex < 2"
-                >{{ second.name }}</span
-              >
+                >{{ second.name }}</span>
             </span>
           </li>
         </ul>
@@ -69,8 +68,7 @@
               @click="goGoodsList(item.id,item.parentId)"
               v-if="index < 8"
               :key="index"
-              >{{ item.name }}<Icon type="ios-arrow-forward"
-            /></span>
+              >{{ item.name }}<el-icon><ArrowRight /></el-icon></span>
           </template>
         </div>
         <ul>
@@ -83,7 +81,7 @@
               class="detail-item-title"
               @click="goGoodsList(items.id, items.parentId)"
             >
-              {{ items.name }} <Icon type="ios-arrow-forward" />
+              {{ items.name }} <el-icon><ArrowRight /></el-icon>
               <span class="glyphicon glyphicon-menu-right"></span>
             </span>
             <div>
@@ -92,8 +90,7 @@
                 @click="goGoodsList(item.id, items.id, items.parentId)"
                 :key="subIndex"
                 class="detail-item"
-                >{{ item.name }}</span
-              >
+                >{{ item.name }}</span>
             </div>
           </li>
         </ul>
@@ -105,7 +102,9 @@
 <script>
 import { getCategory } from "@/api/goods";
 import storage from "@/plugins/storage.js";
+import { ArrowRight } from "@element-plus/icons-vue";
 export default {
+  components: { ArrowRight },
   name: "GoodsListNav",
   props: {
     showAlways: {

buyer/src/components/nav/GoodsClassNav.vue

@@ -5,32 +5,32 @@
       <template v-if="$route.query.categoryId">
         <!-- 头部展示筛选信息 -->
         <div @click="cateClick(tabBar,1)">{{ tabBar.name }}</div>
-        <Icon type="ios-arrow-forward" />
+        <el-icon><ArrowRight /></el-icon>
 
         <div class="bar" v-if="tabBar.first">
-          {{ tabBar.first.name }} <Icon type="ios-arrow-down" />
+          {{ tabBar.first.name }} <el-icon><ArrowDown /></el-icon>
           <ul>
             <li v-for="item in tabBar.children" :key="item.id"  @click="cateClick(item,2)">
               {{ item.name }}
             </li>
           </ul>
         </div>
-        <Icon type="ios-arrow-forward" v-if="tabBar.first" />
+        <el-icon :v-if="tabBar.first"><ArrowRight /></el-icon>
 
         <div class="bar" v-if="tabBar.second">
-          {{ tabBar.second.name }} <Icon type="ios-arrow-down" />
+          {{ tabBar.second.name }} <el-icon><ArrowDown /></el-icon>
           <ul>
             <li v-for="item in tabBar.first.children" :key="item.id"  @click="cateClick(item,3)">
               {{ item.name }}
             </li>
           </ul>
         </div>
-        <Icon type="ios-arrow-forward" v-if="tabBar.second" />
+        <el-icon :v-if="tabBar.second"><ArrowRight /></el-icon>
       </template>
       <!-- 无商品分类，展示搜索结果 -->
       <template v-else>
         <div style="font-size:14px">全部结果</div>
-        <Icon type="ios-arrow-forward" />
+        <el-icon><ArrowRight /></el-icon>
         <div style="font-weight:bold;" class="mr_10">“{{params.keyword}}”</div>
       </template>
       <!-- 所选分类 -->
@@ -41,7 +41,7 @@
         :key="index"
         :title="item.name"
       >
-        <span>{{ item.type }}：</span><span>{{ item.name }}</span><Icon type="md-close" />
+        <span>{{ item.type }}：</span><span>{{ item.name }}</span><el-icon><Close /></el-icon>
       </a>
     </div>
 
@@ -66,7 +66,7 @@
                 v-show="multSelected.includes(item.name)"
               >
                 <div></div>
-                <Icon type="md-checkmark" />
+                <el-icon><Check /></el-icon>
               </div>
             </li>
           </ul>
@@ -74,21 +74,19 @@
           <div class="btn" v-show="multiple !== 0">
             <span @click="moreBrand(0)"
               >{{ tagsContent[0].more ? "收起" : "更多"
-              }}<Icon
-                :type="tagsContent[0].more ? 'ios-arrow-up' : 'ios-arrow-down'"
-            /></span>
-            <span @click="multSelectBrand(0)"><Icon type="md-add" />多选</span>
+              }}<el-icon><ArrowUp v-if="tagsContent[0].more" /><ArrowDown v-else /></el-icon></span>
+            <span @click="multSelectBrand(0)"><el-icon><Plus /></el-icon>多选</span>
           </div>
 
           <div class="multBtn" v-show="multiple === 0">
-            <Button
+            <el-button
               type="primary"
               size="small"
               :disabled="!multSelected.length"
               @click="sure(0)"
-              >确定</Button
+              >确定</el-button
             >
-            <Button size="small" @click="cancel">取消</Button>
+            <el-button size="small" @click="cancel">取消</el-button>
           </div>
         </div>
       </div>
@@ -115,40 +113,38 @@
               </li>
             </ul>
 
-            <CheckboxGroup
+            <el-checkbox-group
               :class="{ 'show-more': tag.more }"
               class="list"
               v-model="multSelected"
               v-show="multiple === tagIndex"
             >
-              <Checkbox
+              <el-checkbox
                 class="item"
                 :label="item"
                 v-for="(item, index) in tag.values"
                 :key="index"
-                >{{ item }}</Checkbox
+                >{{ item }}</el-checkbox
               >
-            </CheckboxGroup>
+            </el-checkbox-group>
 
             <div class="btn" v-show="multiple !== tagIndex">
               <span @click="moreBrand(tagIndex)" v-show="tag.values.length > 9"
                 >{{ tag.more ? "收起" : "更多"
-                }}<Icon :type="tag.more ? 'ios-arrow-up' : 'ios-arrow-down'"
-              /></span>
+                }}<el-icon><ArrowUp v-if="tag.more" /><ArrowDown v-else /></el-icon></span>
               <span @click="multSelectBrand(tagIndex)"
-                ><Icon type="md-add" />多选</span
-              >
+                ><el-icon><Plus /></el-icon>多选</span>
             </div>
 
             <div class="multBtn" v-show="multiple === tagIndex">
-              <Button
+              <el-button
                 type="primary"
                 size="small"
                 :disabled="!multSelected.length"
                 @click="sure(tagIndex)"
-                >确定</Button
+                >确定</el-button
               >
-              <Button size="small" @click="cancel">取消</Button>
+              <el-button size="small" @click="cancel">取消</el-button>
             </div>
           </div>
         </div>
@@ -161,8 +157,10 @@
 </template>
 
 <script>
+import { ArrowDown, ArrowRight, ArrowUp, Check, Close, Plus } from '@element-plus/icons-vue';
 import * as APIGoods from '@/api/goods';
 export default {
+  components: { ArrowDown, ArrowRight, ArrowUp, Check, Close, Plus },
   name: 'GoodsClassNav',
   data () {
     return {
@@ -250,13 +248,13 @@ export default {
         const first = this.tabBar.children.filter(e => {
           return e.id === arr[1]
         })[0]
-        this.$set(this.tabBar, 'first', first)
+        this.tabBar['first'] = first
       }
       if (arr.length > 2) {
         const second = this.tabBar.first.children.filter(e => {
           return e.id === arr[2]
         })[0]
-        this.$set(this.tabBar, 'second', second)
+        this.tabBar['second'] = second
       }
     },
     cateClick (item, index) { // 点选分类
@@ -329,11 +327,11 @@ export default {
     moreBrand (index) {
       // 更多按钮
       const flag = !this.tagsContent[index].more
-      this.$set(this.tagsContent[index], 'more', flag)
+      this.tagsContent[index]['more'] = flag
     },
     multSelectBrand (index) {
       // 多选按钮
-      this.$set(this.tagsContent[index], 'more', true)
+      this.tagsContent[index]['more'] = true
       this.multiple = index;
     },
     sure (index) {
@@ -376,8 +374,8 @@ export default {
           this.tagsContent[0].values = data.brands;
           this.tagsContent = this.tagsContent.concat(data.paramOptions);
           this.tagsContent.forEach((item) => {
-            this.$set(item, 'show', true)
-            this.$set(item, 'more', false)
+            item['show'] = true
+            item['more'] = false
           });
         }
       });
@@ -437,7 +435,7 @@ export default {
       ul {
         display: block;
       }
-      .ivu-icon {
+      .el-icon {
         transform: rotate(180deg);
       }
     }
@@ -493,7 +491,7 @@ export default {
     &:hover {
       border-color: $theme_color;
       background-color: #fff;
-      .ivu-icon {
+      .el-icon {
         color: #fff;
         background-color: $theme_color;
       }
@@ -503,7 +501,7 @@ export default {
       color: $theme_color;
     }
 
-    .ivu-icon {
+    .el-icon {
       position: absolute;
       right: 0;
       top: 0;
@@ -589,7 +587,7 @@ export default {
             border-top: 20px solid transparent;
             border-right: 20px solid $theme_color;
           }
-          .ivu-icon {
+          .el-icon {
             font-size: 12px;
             position: absolute;
             bottom: 0;
@@ -630,10 +628,10 @@ export default {
     .multBtn {
       text-align: center;
       margin-top: 10px;
-      .ivu-btn {
+      .el-button {
         font-size: 12px !important;
       }
-      .ivu-btn:last-child {
+      .el-button:last-child {
         margin-left: 10px;
       }
     }
@@ -708,10 +706,10 @@ export default {
       text-align: center;
       margin-top: 10px;
       margin-bottom: 10px;
-      .ivu-btn {
+      .el-button {
         font-size: 12px !important;
       }
-      .ivu-btn:last-child {
+      .el-button:last-child {
         margin-left: 10px;
       }
     }

buyer/src/components/verify/index.vue

@@ -3,20 +3,22 @@
     <div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
       <img :src="data.backImage" style="width:100%;height:100%" alt="">
       <img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
-      <Icon type="md-refresh" class="refresh" @click="init" />
+      <el-icon class="refresh" @click="init"><Refresh /></el-icon>
     </div>
     <div class="handle" :style="{width:data.originalWidth+'px'}">
       <span class="bgcolor" :style="{width:distance + 'px',background:bgColor}"></span>
       <span class="swiper" :style="{left:distance + 'px'}" @mousedown="mouseDown">
-        <Icon type="md-arrow-round-forward" />
+        <el-icon><ArrowRight /></el-icon>
       </span>
       <span class="text">{{verifyText}}</span>
     </div>
   </div>
 </template>
 <script>
+import { Refresh, ArrowRight } from '@element-plus/icons-vue';
 import { getVerifyImg, postVerifyImg } from './verify.js';
 export default {
+  components: { Refresh, ArrowRight },
   props: {
     // 传入数据，判断是登录、注册、修改密码
     verifyType: {
@@ -174,7 +176,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    .ivu-icon {
+    .el-icon {
       font-size: 20px;
     }
   }