升级Vue3，iView替换ElementPlus

- 删除babel配置、更新依赖与入口初始化 - 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本
2026-06-21 09:30:24 +08:00 · 2026-06-05 17:49:43 +08:00
parent 615ee91511
commit 832fda813b
322 changed files with 25693 additions and 24453 deletions
--- a/buyer/.babelrc
+++ b/buyer/.babelrc
@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
-}
--- a/buyer/MIGRATION-VUE3.md
+++ b/buyer/MIGRATION-VUE3.md
@@ -0,0 +1,39 @@
+# Buyer 买家端 Vue 3 迁移说明
+
+## 技术栈
+
+- Vue 3 + Vue Router 4 + Vuex 4
+- Element Plus（替代 view-design / iView）
+- 保留 `$Message` / `$Modal` / `$Notice` 兼容层（`src/utils/message.js`）
+
+## 启动
+
+```bash
+cd buyer
+yarn install
+yarn dev    # 默认端口 10000
+yarn build
+```
+
+## 迁移要点
+
+1. **入口** `src/main.js` 使用 `createApp`，全局过滤器改为 `$filters`
+2. **路由** `src/router/index.js` 使用 `createRouter` + 动态 `import()`
+3. **请求** `src/plugins/request.js` 使用 Element Plus `ElLoading`
+4. **iView 组件已全部替换**：轮播 `el-carousel`、下拉 `el-dropdown`、侧栏 `el-menu`、头像 `el-avatar` 等
+5. **图标映射** `src/utils/iconMap.js` — 动态图标（如侧边栏菜单）通过 `resolveIcon()` 使用
+6. **自定义字体图标** `icomoon` 保留为 `<i class="icomoon icon-*">`（购物车步骤条、钱包等）
+7. **首页装修** `indexDecorate/modelList` 保留买家端展示逻辑（非 manager 编辑版）
+8. **特殊替换**
+   - `vue-piczoom` → `el-image` 预览
+   - `mv-count-down` → 内置倒计时
+   - 秒杀轮播 → 横向滚动列表
+
+## 批量脚本
+
+- `scripts/migrate-iview-to-element.js` — iView → Element 模板替换
+- `scripts/fix-filters.js` — Vue 2 过滤器语法修复
+- `scripts/replace-page.js` — `<Page>` → `el-pagination`
+- `scripts/replace-icon.js` — 静态 `<Icon type>` → `el-icon`
+- `scripts/fix-el-icon-click.js` — 修复 `@click` 绑定
+- `scripts/fix-broken-tags.js` — 闭合标签修复
--- a/buyer/package.json
+++ b/buyer/package.json
@@ -8,35 +8,37 @@
    "dev": "vue-cli-service serve"
  },
  "engines": {
-    "node": ">=14"
+    "node": ">=16"
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "0.0.7",
-    "axios": "^0.19.2",
+    "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^0.21.1",
+    "core-js": "^3.36.0",
    "dplayer": "^1.27.1",
+    "element-plus": "^2.6.3",
    "js-cookie": "^2.2.1",
-    "less": "^2.7.0",
-    "less-loader": "^5.0.0",
-    "mv-count-down": "^0.1.15",
-    "sass": "^1.63.6",
-    "postcss-loader": "^4.3.0",
+    "nprogress": "^0.2.0",
    "psl": "^1.8.0",
    "qs": "^6.9.4",
+    "sass": "^1.63.6",
+    "sass-loader": "^10.4.1",
+    "swiper": "^5.4.5",
    "uuid": "^8.3.2",
-    "view-design": "^4.3.2",
-    "vue": "^2.6.11",
-    "vue-awesome-swiper": "^3.1.3",
-    "vue-piczoom": "^1.0.6",
-    "vue-qr": "^2.3.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vue": "^3.4.21",
+    "vue-awesome-swiper": "^4.1.1",
+    "vue-qr": "^5.0.3",
+    "vue-router": "^4.3.0",
+    "vuex": "^4.1.0"
  },
  "devDependencies": {
-    "@vue/cli-service": "~4.5.0",
-    "compression-webpack-plugin": "^5.0.0",
-    "sass-loader": "^10.4.1",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "vue-template-compiler": "^2.6.11"
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.21",
+    "compression-webpack-plugin": "^10.0.0",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.4",
+    "webpack": "^5.95.0"
  },
  "browserslist": [
    "> 1%",
@@ -45,7 +47,6 @@
  ],
  "resolutions": {
    "minimatch": "^3.1.2",
-    "node-sass": "npm:sass@^1.63.6",
    "@achrinza/node-ipc": "9.2.2"
  }
 }
--- a/buyer/public/index.html
+++ b/buyer/public/index.html
@@ -7,20 +7,12 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>logo.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
-    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
-      <link rel="stylesheet" href="<%=css%>" />
-      <% } %>
  </head>
  <body>
-    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
-      <script src="<%=js%>"></script>
-      <% } %>
    <script src="/config.js"></script>
    <noscript>
-
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
-    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/buyer/scripts/fix-broken-tags.js
+++ b/buyer/scripts/fix-broken-tags.js
@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+  c = c.replace(/<\/Button>/g, "</el-button>");
+  c = c.replace(/<\/Button\b/g, "</el-button");
+  c = c.replace(/<\/Input>/g, "</el-input>");
+  c = c.replace(/<\/Input\b/g, "</el-input");
+  c = c.replace(/<\/Option>/g, "</el-option>");
+  c = c.replace(/<\/Option\b/g, "</el-option");
+  c = c.replace(/<\/Checkbox>/g, "</el-checkbox>");
+  c = c.replace(/<\/Checkbox\b/g, "</el-checkbox");
+  c = c.replace(/<\/Select>/g, "</el-select>");
+  c = c.replace(/<\/Select\b/g, "</el-select");
+  c = c.replace(/<\/Form>/g, "</el-form>");
+  c = c.replace(/<\/Modal>/g, "</el-dialog>");
+  c = c.replace(/@click\.native/g, "@click");
+  c = c.replace(/@on-search/g, "@keyup.enter");
+  c = c.replace(/\bsearch\b(?=\s+enter-button)/g, "");
+  c = c.replace(/\benter-button\b/g, "");
+  c = c.replace(/<BreadcrumbItem/g, "<el-breadcrumb-item");
+  c = c.replace(/<\/BreadcrumbItem>/g, "</el-breadcrumb-item>");
+  c = c.replace(/<Breadcrumb/g, "<el-breadcrumb");
+  c = c.replace(/<\/Breadcrumb>/g, "</el-breadcrumb>");
+  c = c.replace(/type="error"/g, 'type="danger"');
+  c = c.replace(/<i-col/g, "<div");
+  c = c.replace(/<\/i-col>/g, "</div>");
+  c = c.replace(/\{\{([^}|]+)\s*\|\s*secrecyMobile\s*\}\}/g, "{{ $filters.secrecyMobile($1) }}");
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed tags in ${count} files`);
--- a/buyer/scripts/fix-dialog-slots.js
+++ b/buyer/scripts/fix-dialog-slots.js
@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+
+  c = c.replace(/<p #header>/g, "<template #header><p>");
+  c = c.replace(
+    /(<template #header><p>[\s\S]*?<\/p>)(\s*<div)/g,
+    "$1</template>$2"
+  );
+
+  c = c.replace(
+    /<template #footer><div([^>]*)>([\s\S]*?)<\/div><\/template><\/el-dialog>/g,
+    "<template #footer><div$1>$2</div></template>\n    </el-dialog>"
+  );
+
+  c = c.replace(
+    /<template #default\s*>([\s\S]*?)<\/template\s*>/g,
+    (match, inner) => {
+      if (match.includes("el-alert")) {
+        return `<template #title>${inner}</template>`;
+      }
+      return match;
+    }
+  );
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed dialog slots in ${count} files`);
--- a/buyer/scripts/fix-duplicate-size.js
+++ b/buyer/scripts/fix-duplicate-size.js
@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..", "src");
+
+function walk(dir, files = []) {
+  for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+    const f = path.join(dir, e.name);
+    if (e.isDirectory()) walk(f, files);
+    else if (e.name.endsWith(".vue")) files.push(f);
+  }
+  return files;
+}
+
+let n = 0;
+for (const file of walk(ROOT)) {
+  let c = fs.readFileSync(file, "utf8");
+  const next = c.replace(/:size="(\d+)"\s+:size="\1"/g, ':size="$1"');
+  if (next !== c) {
+    fs.writeFileSync(file, next);
+    n++;
+    console.log(path.relative(ROOT, file));
+  }
+}
+console.log(`Fixed duplicate :size in ${n} files`);
--- a/buyer/scripts/fix-el-icon-click.js
+++ b/buyer/scripts/fix-el-icon-click.js
@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..", "src");
+
+function walk(dir, files = []) {
+  for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+    const f = path.join(dir, e.name);
+    if (e.isDirectory()) walk(f, files);
+    else if (e.name.endsWith(".vue")) files.push(f);
+  }
+  return files;
+}
+
+let n = 0;
+for (const file of walk(ROOT)) {
+  let c = fs.readFileSync(file, "utf8");
+  const next = c
+    .replace(/<el-icon([^>]*?):click=/g, "<el-icon$1@click=")
+    .replace(/:class="refresh"/g, 'class="refresh"')
+    .replace(/:size="20" @click="show = false" :size="20"/g, ':size="20" @click="show = false"');
+  if (next !== c) {
+    fs.writeFileSync(file, next);
+    n++;
+  }
+}
+console.log(`Fixed el-icon click in ${n} files`);
--- a/buyer/scripts/fix-filters.js
+++ b/buyer/scripts/fix-filters.js
@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fixFilters(content) {
+  let c = content;
+
+  // Fix broken: {{ expr {{ $filters.unitPrice(args) }}
+  c = c.replace(
+    /\{\{\s*([^}{]+?)\s*\{\{\s*\$filters\.unitPrice\(([^)]*)\)\s*\}\}/g,
+    "{{ $filters.unitPrice($1, $2) }}"
+  );
+
+  // Fix: {{ expr | unitPrice }} or {{ expr | unitPrice('￥') }}
+  c = c.replace(
+    /\{\{\s*([^}|]+?)\s*\|\s*unitPrice(?:\(([^)]*)\))?\s*\}\}/g,
+    (_, expr, args) => {
+      const e = expr.trim();
+      return args !== undefined
+        ? `{{ $filters.unitPrice(${e}, ${args}) }}`
+        : `{{ $filters.unitPrice(${e}) }}`;
+    }
+  );
+
+  // Fix inline without braces: expr | unitPrice("￥")
+  c = c.replace(
+    /(?<!\{\{)\s*([a-zA-Z0-9_.?()[\]'"\s]+?)\s*\|\s*unitPrice\(([^)]*)\)/g,
+    (match, expr, args) => {
+      if (match.includes("{{")) return match;
+      return `{{ $filters.unitPrice(${expr.trim()}, ${args}) }}`;
+    }
+  );
+
+  // Fix inline without args: expr | unitPrice
+  c = c.replace(
+    /(?<!\{\{)\s*([a-zA-Z0-9_.?()[\]'"\s]+?)\s*\|\s*unitPrice(?!\()/g,
+    (match, expr) => {
+      if (match.includes("{{") || match.includes("$filters")) return match;
+      return `{{ $filters.unitPrice(${expr.trim()}) }}`;
+    }
+  );
+
+  // Fix unixToDate filter
+  c = c.replace(
+    /\{\{\s*([^}|]+?)\s*\|\s*unixToDate(?:\(([^)]*)\))?\s*\}\}/g,
+    (_, expr, args) => {
+      const e = expr.trim();
+      return args !== undefined
+        ? `{{ $filters.unixToDate(${e}, ${args}) }}`
+        : `{{ $filters.unixToDate(${e}) }}`;
+    }
+  );
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fixFilters(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed filters in ${count} files`);
--- a/buyer/scripts/fix-runtime-compat.js
+++ b/buyer/scripts/fix-runtime-compat.js
@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+
+  c = c.replace(/<el-pagination\b/g, "<Page");
+  c = c.replace(/<\/el-pagination>/g, "</Page>");
+
+  c = c.replace(
+    /<Icon([^>]*)\s+#prepend\s*>\s*<\/Icon>/g,
+    "<template #prepend><Icon$1></Icon></template>"
+  );
+  c = c.replace(
+    /<Icon([^>]*)\s+#prepend\s*>\s*<\/Icon>/g,
+    "<template #prepend><Icon$1></Icon></template>"
+  );
+  c = c.replace(
+    /<template #prepend><Icon([^>]*)\s*\/>/g,
+    "<template #prepend><Icon$1></Icon></template>"
+  );
+
+  c = c.replace(/@keyup\.enter\.native/g, "@keyup.enter");
+  c = c.replace(/slot="append"/g, "#append");
+  c = c.replace(/(<div[^>]*)\s+#append/g, "<template #append>$1");
+
+  c = c.replace(/(<el-button[^>]*)\slong/g, '$1 style="width:100%"');
+  c = c.replace(/@on-select/g, "@select");
+  c = c.replace(/@on-click/g, "@click");
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Runtime compat fixes in ${count} files`);
--- a/buyer/scripts/fix-slots.js
+++ b/buyer/scripts/fix-slots.js
@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+
+  c = c.replace(
+    /<template #default="(\{[^"]+\})" #([a-zA-Z0-9_-]+)>/g,
+    '<template #$2="$1">'
+  );
+
+  c = c.replace(
+    /<div([^>]*) #footer([^>]*)>/g,
+    '<template #footer><div$1$2>'
+  );
+  c = c.replace(/<\/div>\s*(?=<\/el-dialog>)/g, "</div></template>");
+
+  c = c.replace(/<span #append>/g, "<template #append><span>");
+  c = c.replace(/<\/span><\/el-input/g, "</span></template></el-input");
+  c = c.replace(/><span #append>/g, "><template #append><span>");
+
+  c = c.replace(/<el-button #append/g, "<template #append><el-button");
+  c = c.replace(
+    /<\/el-button>(\s*<\/el-input>)/g,
+    "</el-button></template>$1"
+  );
+
+  c = c.replace(/<template #desc\b/g, "<template #default");
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed slots in ${count} files`);
--- a/buyer/scripts/fix-span-tags.js
+++ b/buyer/scripts/fix-span-tags.js
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+  c = c.replace(/<\/span\s*\n\s*>/g, "</span>");
+  c = c.replace(/<\/span\s+>/g, "</span>");
+  c = c.replace(/<i-input/g, "<el-input");
+  c = c.replace(/<\/i-input>/g, "</el-input>");
+  c = c.replace(
+    /<Icon([^>]*)\s+#prepend\s*\/>/g,
+    "<template #prepend><Icon$1 /></template>"
+  );
+  c = c.replace(
+    /<template #append><el-button([^>]*)>([\s\S]*?)<\/el-button>\s*<\/i-input>/g,
+    "<template #append><el-button$1>$2</el-button></template></el-input>"
+  );
+  c = c.replace(
+    /<template #append><el-button([^>]*)>([\s\S]*?)<\/el-button>\s*<\/el-input>/g,
+    "<template #append><el-button$1>$2</el-button></template></el-input>"
+  );
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed span/input tags in ${count} files`);
--- a/buyer/scripts/fix-stray-templates.js
+++ b/buyer/scripts/fix-stray-templates.js
@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function fix(content) {
+  let c = content;
+
+  c = c.replace(
+    /(<div[^>]*)\s+#content>/g,
+    "<template #content><div$1>"
+  );
+  c = c.replace(
+    /(<\/el-tooltip>)/g,
+    (match, _m, offset, str) => {
+      return match;
+    }
+  );
+
+  c = c.replace(
+    /(<div style="white-space:[^"]*"[^>]*>[\s\S]*?<\/div>)(\s*<\/el-tooltip>)/g,
+    "$1</template>$2"
+  );
+
+  c = c.replace(/<\/div><\/template><\/el-dialog>/g, (m, offset, str) => {
+    const before = str.slice(Math.max(0, offset - 200), offset);
+    if (before.includes("#footer")) return m;
+    return "</div></el-dialog>";
+  });
+
+  c = c.replace(/<i(\s[^>]*)\/>/g, "<i$1></i>");
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(path.join(ROOT, "src"))) {
+  const original = fs.readFileSync(file, "utf8");
+  const fixed = fix(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+  }
+}
+console.log(`Fixed stray templates in ${count} files`);
--- a/buyer/scripts/migrate-iview-to-element.js
+++ b/buyer/scripts/migrate-iview-to-element.js
@@ -0,0 +1,227 @@
+#!/usr/bin/env node
+/**
+ * Migrate buyer Vue files from iView to Element Plus.
+ * Usage: node scripts/migrate-iview-to-element.js
+ */
+const fs = require("fs");
+const path = require("path");
+
+const BUYER_ROOT = path.join(__dirname, "..");
+const MANAGER_ROOT = path.join(__dirname, "../../manager");
+
+const MODEL_LIST = [
+  ["Carousel.vue", "carousel.vue"],
+  ["Carousel1.vue", "carousel1.vue"],
+  ["Carousel2.vue", "carousel2.vue"],
+  ["FirstPageAdvert.vue", "firstPageAdvert.vue"],
+  ["NewGoodsSort.vue", "newGoodsSort.vue"],
+  ["NotEnough.vue", "notEnough.vue"],
+  ["Recommend.vue", "recommend.vue"],
+  ["Seckill.vue", "seckill.vue"],
+  ["forYour.vue", "forYour.vue"],
+  ["goodsAndType.vue", "goodsAndType.vue"],
+  ["mixModel.vue", "mixModel.vue"],
+  ["oneRowThreeColumns.vue", "oneRowThreeColumns.vue"],
+  ["onlyGoodsModel.vue", "onlyGoodsModel.vue"],
+  ["mixs/mix-brand.vue", "mixs/mix-brand.vue"],
+  ["mixs/mix-goods.vue", "mixs/mix-goods.vue"],
+];
+
+const DECORATE_COPY_MAP = [
+  [
+    "src/components/indexDecorate/ModelForm.vue",
+    "src/views/page-decoration/modelForm.vue",
+  ],
+  [
+    "src/components/indexDecorate/ModelFormItem.vue",
+    "src/views/page-decoration/modelFormItem.vue",
+  ],
+];
+
+MODEL_LIST.forEach(([buyerName, managerName]) => {
+  DECORATE_COPY_MAP.push([
+    `src/components/indexDecorate/modelList/${buyerName}`,
+    `src/views/page-decoration/modelList/${managerName}`,
+  ]);
+});
+
+const TARGET_DIRS = ["src/pages", "src/components"];
+
+function adaptBuyerContent(content) {
+  return content
+    .replace(/@\/views\/page-decoration\//g, "@/components/indexDecorate/")
+    .replace(/admin-setting/g, "buyer-setting")
+    .replace(/adminPCPageCache/g, "buyerPCPageCache")
+    .replace(/getStore\('adminPCPageCache'\)/g, "getStore('buyerPCPageCache')")
+    .replace(/setStore\('adminPCPageCache'/g, "setStore('buyerPCPageCache'");
+}
+
+function applyScriptTransforms(content) {
+  let c = content;
+  c = c.replace(/\$options\.filters\./g, "$filters.");
+  c = c.replace(/\|\s*unitPrice\(/g, "{{ $filters.unitPrice(");
+  c = c.replace(/\|\s*unixToDate\(/g, "{{ $filters.unixToDate(");
+  c = c.replace(/\bbeforeDestroy\b/g, "beforeUnmount");
+  c = c.replace(/this\.\$set\(([^,]+),\s*([^,]+),\s*([^)]+)\)/g, "$1[$2] = $3");
+  c = c.replace(/::v-deep/g, ":deep");
+  c = c.replace(/\/deep\//g, ":deep");
+  c = c.replace(/@on-change/g, "@change");
+  c = c.replace(/@on-click/g, "@click");
+  c = c.replace(/@on-ok/g, "@ok");
+  c = c.replace(/@on-cancel/g, "@cancel");
+  c = c.replace(/@on-clear/g, "@clear");
+  c = c.replace(/@on-open-change/g, "@visible-change");
+  c = c.replace(/@on-page-size-change/g, "@size-change");
+  c = c.replace(/@on-select/g, "@select");
+  c = c.replace(/@keydown\.enter\.native/g, "@keyup.enter");
+  c = c.replace(/slot-scope="([^"]+)"/g, '#default="$1"');
+  c = c.replace(/slot="([^"]+)"/g, '#$1');
+  c = c.replace(/from ['"]view-design['"]/g, 'from "@/utils/message"');
+  c = c.replace(/import\s*\{([^}]*)\}\s*from\s*['"]view-design['"]/g, 'import {$1} from "@/utils/message"');
+  return c;
+}
+
+function applyTemplateTransforms(content) {
+  let c = content;
+  const replacements = [
+    [/<\/?Card>/g, (m) => m.replace("Card", "el-card")],
+    [/<Form-item/g, "<el-form-item"],
+    [/<\/Form-item>/g, "</el-form-item>"],
+    [/<FormItem/g, "<el-form-item"],
+    [/<\/FormItem>/g, "</el-form-item>"],
+    [/<Form(\s|>)/g, "<el-form$1"],
+    [/<\/Form>/g, "</el-form>"],
+    [/<InputNumber/g, "<el-input-number"],
+    [/<\/InputNumber>/g, "</el-input-number>"],
+    [/<Input(\s|>)/g, "<el-input$1"],
+    [/<\/Input>/g, "</el-input>"],
+    [/<Button(\s|>)/g, "<el-button$1"],
+    [/<\/Button>/g, "</el-button>"],
+    [/<Select(\s|>)/g, "<el-select$1"],
+    [/<\/Select>/g, "</el-select>"],
+    [/<Option(\s)/g, "<el-option "],
+    [/<\/Option>/g, "</el-option>"],
+    [/<DatePicker/g, "<el-date-picker"],
+    [/<\/DatePicker>/g, "</el-date-picker>"],
+    [/<TimePicker/g, "<el-time-picker"],
+    [/<\/TimePicker>/g, "</el-time-picker>"],
+    [/<Modal/g, "<el-dialog"],
+    [/<\/Modal>/g, "</el-dialog>"],
+    [/<Page(\s)/g, "<el-pagination "],
+    [/<\/Page>/g, "</el-pagination>"],
+    [/<Tabs(\s|>)/g, "<el-tabs$1"],
+    [/<\/Tabs>/g, "</el-tabs>"],
+    [/<TabPane/g, "<el-tab-pane"],
+    [/<\/TabPane>/g, "</el-tab-pane>"],
+    [/<Row(\s|>)/g, "<div$1"],
+    [/<\/Row>/g, "</div>"],
+    [/<Col(\s|>)/g, "<div$1"],
+    [/<\/Col>/g, "</div>"],
+    [/<Tag(\s|>)/g, "<el-tag$1"],
+    [/<\/Tag>/g, "</el-tag>"],
+    [/<Switch(\s|>)/g, "<el-switch$1"],
+    [/<\/Switch>/g, "</el-switch>"],
+    [/<RadioGroup/g, "<el-radio-group"],
+    [/<\/RadioGroup>/g, "</el-radio-group>"],
+    [/<Radio(\s)/g, "<el-radio "],
+    [/<\/Radio>/g, "</el-radio>"],
+    [/<CheckboxGroup/g, "<el-checkbox-group"],
+    [/<\/CheckboxGroup>/g, "</el-checkbox-group>"],
+    [/<Checkbox/g, "<el-checkbox"],
+    [/<\/Checkbox>/g, "</el-checkbox>"],
+    [/<Poptip/g, "<el-popover"],
+    [/<\/Poptip>/g, "</el-popover>"],
+    [/<Tooltip/g, "<el-tooltip"],
+    [/<\/Tooltip>/g, "</el-tooltip>"],
+    [/<Drawer/g, "<el-drawer"],
+    [/<\/Drawer>/g, "</el-drawer>"],
+    [/<Alert/g, "<el-alert"],
+    [/<\/Alert>/g, "</el-alert>"],
+    [/<Badge/g, "<el-badge"],
+    [/<\/Badge>/g, "</el-badge>"],
+    [/<Divider/g, "<el-divider"],
+    [/<\/Divider>/g, "</el-divider>"],
+    [/<Rate/g, "<el-rate"],
+    [/<\/Rate>/g, "</el-rate>"],
+    [/<Steps/g, "<el-steps"],
+    [/<\/Steps>/g, "</el-steps>"],
+    [/<Step(\s)/g, "<el-step "],
+    [/<\/Step>/g, "</el-step>"],
+    [/<Upload/g, "<el-upload"],
+    [/<\/Upload>/g, "</el-upload>"],
+    [/<Cascader/g, "<el-cascader"],
+    [/<\/Cascader>/g, "</el-cascader>"],
+    [/<Affix/g, "<el-affix"],
+    [/<\/Affix>/g, "</el-affix>"],
+    [/<Spin/g, "<el-skeleton"],
+    [/<\/Spin>/g, "</el-skeleton>"],
+    [/:label-width="(\d+)"/g, 'label-width="$1px"'],
+    [/:mask-closable="false"/g, ':close-on-click-modal="false"'],
+    [/:width="(\d+)"/g, 'width="$1"'],
+    [/type="primary"/g, 'type="primary"'],
+  ];
+  for (const [pattern, replacement] of replacements) {
+    c = c.replace(pattern, replacement);
+  }
+  return c;
+}
+
+function walkDir(dir, files = []) {
+  if (!fs.existsSync(dir)) return files;
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walkDir(full, files);
+    } else if (entry.name.endsWith(".vue")) {
+      files.push(full);
+    }
+  }
+  return files;
+}
+
+const copied = [];
+const transformed = [];
+const skipped = [];
+
+for (const [buyerRel, managerRel] of DECORATE_COPY_MAP) {
+  const managerPath = path.join(MANAGER_ROOT, managerRel);
+  const buyerPath = path.join(BUYER_ROOT, buyerRel);
+  if (!fs.existsSync(managerPath)) {
+    skipped.push({ file: buyerRel, reason: "manager counterpart missing" });
+    continue;
+  }
+  let content = fs.readFileSync(managerPath, "utf8");
+  content = adaptBuyerContent(content);
+  fs.mkdirSync(path.dirname(buyerPath), { recursive: true });
+  fs.writeFileSync(buyerPath, content);
+  copied.push(buyerRel);
+}
+
+const copiedSet = new Set(copied);
+for (const dir of TARGET_DIRS) {
+  const absDir = path.join(BUYER_ROOT, dir);
+  for (const filePath of walkDir(absDir)) {
+    const rel = path.relative(BUYER_ROOT, filePath).replace(/\\/g, "/");
+    if (copiedSet.has(rel)) continue;
+
+    let content = fs.readFileSync(filePath, "utf8");
+    const hasIView =
+      /<(Card|Form|Form-item|FormItem|Table|Button|Modal|Page|Tabs|TabPane|Input|Select|Option|DatePicker|Row|Poptip|Drawer|Upload|Checkbox|Radio|Switch|Tag|Alert|Rate|Steps|Step|Spin|Affix|TimePicker|Cascader|Divider|Badge|InputNumber)\b/.test(
+        content
+      );
+    if (!hasIView) {
+      skipped.push({ file: rel, reason: "no iView components" });
+      continue;
+    }
+
+    content = applyTemplateTransforms(content);
+    content = applyScriptTransforms(content);
+    fs.writeFileSync(filePath, content);
+    transformed.push(rel);
+  }
+}
+
+console.log("=== Buyer Migration Summary ===");
+console.log(`Copied from manager: ${copied.length}`);
+console.log(`Script-transformed: ${transformed.length}`);
+console.log(`Skipped: ${skipped.length}`);
--- a/buyer/scripts/replace-icon.js
+++ b/buyer/scripts/replace-icon.js
@@ -0,0 +1,149 @@
+#!/usr/bin/env node
+/**
+ * 将静态 <Icon type="..." /> 替换为 <el-icon><Xxx /></el-icon>
+ * 动态 :type / custom 属性保留，由人工或 resolveIcon 处理。
+ */
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..", "src");
+
+const TYPE_TO_COMPONENT = {
+  "md-checkmark": "Check",
+  "md-close": "Close",
+  "md-trash": "Delete",
+  "md-add": "Plus",
+  "md-arrow-dropdown": "ArrowDown",
+  "md-arrow-dropup": "ArrowUp",
+  "md-person": "User",
+  "md-lock": "Lock",
+  "md-phone-portrait": "Iphone",
+  "md-key": "Key",
+  "md-link": "Link",
+  "md-refresh": "Refresh",
+  "md-qr-scanner": "Iphone",
+  "ios-arrow-down": "ArrowDown",
+  "ios-arrow-up": "ArrowUp",
+  "ios-arrow-forward": "ArrowRight",
+  "ios-arrow-back": "ArrowLeft",
+  "ios-arrow-round-down": "ArrowDown",
+  "ios-arrow-round-forward": "ArrowRight",
+  "ios-cart-outline": "ShoppingCart",
+  "ios-camera": "Camera",
+  "ios-eye-outline": "View",
+  "ios-trash-outline": "Delete",
+  "ios-alert-outline": "Warning",
+  "ios-help-circle-outline": "Help",
+  "ios-add-circle-outline": "Plus",
+  "ios-information-circle": "InfoFilled",
+  "ios-search": "Search",
+  "ios-text-outline": "Document",
+  "ios-alarm-outline": "AlarmClock",
+  "ios-heart": "StarFilled",
+  "md-close-circle": "CircleClose",
+  edit: "Edit",
+  "trash-a": "Delete",
+  location: "Location",
+};
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory() && entry.name !== "compat") walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function parseAttrs(attrStr) {
+  const attrs = {};
+  const re = /(?::([\w-]+)|@([\w-]+)|([\w-]+))=(?:"([^"]*)"|'([^']*)')|(?::([\w-]+)|@([\w-]+)|([\w-]+))(?=\s|\/|>)/g;
+  let m;
+  while ((m = re.exec(attrStr)) !== null) {
+    const name = m[1] || m[2] || m[3] || m[6] || m[7] || m[8];
+    const value = m[4] ?? m[5] ?? true;
+    attrs[name] = value;
+  }
+  return attrs;
+}
+
+function attrsToString(attrs, exclude = []) {
+  return Object.entries(attrs)
+    .filter(([k]) => !exclude.includes(k))
+    .map(([k, v]) => {
+      if (v === true) return k;
+      if (k.startsWith("@")) return `${k}="${v}"`;
+      return `:${k}="${v}"`;
+    })
+    .join(" ");
+}
+
+function transform(content, filePath) {
+  if (filePath.includes("/compat/")) return content;
+  let c = content;
+  const used = new Set();
+
+  c = c.replace(/<Icon\b([^>]*?)\/>/g, (match, attrStr) => {
+    if (/\bcustom=/.test(attrStr) || /:type=/.test(attrStr)) return match;
+    const attrs = parseAttrs(attrStr);
+    const type = attrs.type;
+    if (!type || !TYPE_TO_COMPONENT[type]) return match;
+    const comp = TYPE_TO_COMPONENT[type];
+    used.add(comp);
+    const rest = attrsToString(attrs, ["type"]);
+    const size = attrs.size ? ` :size="${attrs.size}"` : "";
+    const open = rest ? `<el-icon ${rest}${size}>` : `<el-icon${size}>`;
+    return `${open}<${comp} /></el-icon>`;
+  });
+
+  c = c.replace(/<Icon\b([^>]*?)><\/Icon>/g, (match, attrStr) => {
+    if (/\bcustom=/.test(attrStr) || /:type=/.test(attrStr)) return match;
+    const attrs = parseAttrs(attrStr);
+    const type = attrs.type;
+    if (!type || !TYPE_TO_COMPONENT[type]) return match;
+    const comp = TYPE_TO_COMPONENT[type];
+    used.add(comp);
+    const rest = attrsToString(attrs, ["type"]);
+    const size = attrs.size ? ` :size="${attrs.size}"` : "";
+    const open = rest ? `<el-icon ${rest}${size}>` : `<el-icon${size}>`;
+    return `${open}<${comp} /></el-icon>`;
+  });
+
+  if (used.size && !c.includes("@element-plus/icons-vue")) {
+    const imports = [...used].sort().join(", ");
+    c = c.replace(
+      /(<script[^>]*>\s*\n)/,
+      `$1import { ${imports} } from '@element-plus/icons-vue';\n`
+    );
+    c = c.replace(/export default \{/, (m) => {
+      if (/components:\s*\{/.test(c)) {
+        return m;
+      }
+      return `${m}\n  components: { ${imports} },`;
+    });
+    if (/components:\s*\{/.test(c) && !c.includes(`${[...used][0]},`)) {
+      c = c.replace(/components:\s*\{([^}]*)\}/, (m, inner) => {
+        const existing = inner.trim();
+        const add = [...used].filter((n) => !inner.includes(n)).join(", ");
+        if (!add) return m;
+        const merged = existing ? `${existing}, ${add}` : add;
+        return `components: { ${merged} }`;
+      });
+    }
+  }
+
+  return c;
+}
+
+let count = 0;
+for (const file of walkDir(ROOT)) {
+  const original = fs.readFileSync(file, "utf8");
+  if (!/<Icon\b/.test(original)) continue;
+  const fixed = transform(original, file);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+    console.log(path.relative(ROOT, file));
+  }
+}
+console.log(`Icon replacements in ${count} files`);
--- a/buyer/scripts/replace-page.js
+++ b/buyer/scripts/replace-page.js
@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+/**
+ * 将全局 <Page> 封装替换为原生 el-pagination
+ */
+const fs = require("fs");
+const path = require("path");
+
+const ROOT = path.join(__dirname, "..", "src");
+
+function walkDir(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(full, files);
+    else if (entry.name.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+function transformPage(content) {
+  return content.replace(
+    /<Page\b([^>]*?)(\/>|>(\s*)<\/Page>)/gs,
+    (match, attrs, close) => {
+      let a = attrs;
+      const hasTotal = /\bshow-total\b/.test(a);
+      const hasSizer = /\bshow-sizer\b/.test(a);
+      const hasElevator = /\bshow-elevator\b/.test(a);
+
+      a = a.replace(/\s+show-total\b/g, "");
+      a = a.replace(/\s+show-sizer\b/g, "");
+      a = a.replace(/\s+show-elevator\b/g, "");
+      a = a.replace(/:current=/g, ":current-page=");
+      a = a.replace(/:page-size-opts=/g, ":page-sizes=");
+      a = a.replace(/@change=/g, "@current-change=");
+      a = a.replace(/\ssize="small"/g, " small");
+
+      const layoutParts = [];
+      if (hasTotal) layoutParts.push("total");
+      if (hasSizer) layoutParts.push("sizes");
+      layoutParts.push("prev", "pager", "next");
+      if (hasElevator) layoutParts.push("jumper");
+
+      const layoutAttr = ` layout="${layoutParts.join(", ")}"`;
+
+      if (close.startsWith("/>")) {
+        return `<el-pagination${a}${layoutAttr} />`;
+      }
+      return `<el-pagination${a}${layoutAttr}></el-pagination>`;
+    }
+  );
+}
+
+let count = 0;
+for (const file of walkDir(ROOT)) {
+  const original = fs.readFileSync(file, "utf8");
+  if (!/<Page\b/.test(original)) continue;
+  const fixed = transformPage(original);
+  if (fixed !== original) {
+    fs.writeFileSync(file, fixed);
+    count++;
+    console.log(path.relative(ROOT, file));
+  }
+}
+console.log(`Page → el-pagination in ${count} files`);
--- a/buyer/src/assets/styles/element.scss
+++ b/buyer/src/assets/styles/element.scss
@@ -0,0 +1,35 @@
+:root {
+  --el-color-primary: #ff5c58;
+  --el-color-success: #68cabe;
+  --el-color-warning: #fa6419;
+  --el-color-danger: #ff3c2a;
+  --el-font-size-base: 14px;
+}
+
+.el-button--primary {
+  --el-button-bg-color: #ff5c58;
+  --el-button-border-color: #ff5c58;
+  --el-button-hover-bg-color: #ff7875;
+  --el-button-hover-border-color: #ff7875;
+}
+
+.el-table--border {
+  .el-table__cell {
+    border-right: none !important;
+  }
+}
+
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.op-split {
+  margin: 0 8px;
+  color: #dcdfe6;
+}
--- a/buyer/src/assets/styles/theme.less
+++ b/buyer/src/assets/styles/theme.less
@@ -1,6 +1,4 @@
-@import "~view-design/src/styles/index.less";
-// iview 自定义样式
-
+// Element Plus 主题变量（原 view-design less 已移除）
@primary-color: #ff5c58;
@info-color: #fa6419;
@success-color: #68cabe;
@@ -11,9 +9,7 @@
@table-td-highlight-bg: #ededed;
@font-size-base: 12px;

-.ivu-drawer,
-.drawer,
-.ivu-drawer-wrap {
+.el-drawer,
+.drawer {
  z-index: 2600 !important;
 }
-
--- a/buyer/src/components/Search.vue
+++ b/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"/>
+          <template #append>
+            <div class="search-icon" @click="search">
+              <el-icon :size="21"><SearchIcon /></el-icon>
            </div>
-        </i-input>
+          </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;
  }
-  }

-  ::v-deep .ivu-input-group-append {
+  :deep(.el-input-group__append) {
    border-radius: 19.6px !important;
    cursor: pointer;
    box-sizing: border-box;
--- a/buyer/src/components/addressManage/index.vue
+++ b/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;
      }
--- a/buyer/src/components/advertising/FixedTop.vue
+++ b/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,
--- a/buyer/src/components/card/index.vue
+++ b/buyer/src/components/card/index.vue
@@ -1,85 +1,81 @@
 <template>
-  <Card class="_Card" :bordered="false" :dis-hover="true">
-    <div slot="title" class="cardTitle">
+  <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">
+            <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 slot="extra" class="cardExtra" v-if="_More" @click="callBack()">
+        <div 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栏
+  name: "index",
+  props: {
+    _Tabs: {
      type: null,
-        default: ''
+      default: "",
    },
-      // 头部
-      _Title: { // 标题
+    _Title: {
      type: null,
-        default: '卡片头部'
+      default: "卡片头部",
    },
-      // 右侧更多
    _More: {
      type: null,
-        default: false
+      default: false,
    },
-      _Size: { // 文字大小
+    _Size: {
      type: Number,
-        default: 16
+      default: 16,
    },
-      // 点击更多触发跳转
    _Src: {
      type: null,
-        default: function (val) {
-          if (this._More) {
-            return val;
-          } else {
-            return false;
-          }
-        }
-      }
+      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
-        });
+      if (this._Src) {
+        this.$router.push({ path: this._Src });
      }
    },
-    // 点击tab的回调
    tabsChange(index) {
-    //  处理并返回index
      this.isActive = index;
-      this.$emit('_Change', index);
-    }
-  }
+      this.$emit("_Change", index);
+    },
+  },
 };
 </script>

 <style scoped lang="scss">
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .cardTitle {
  display: flex;
  cursor: pointer;
@@ -88,7 +84,7 @@ export default {
  color: $theme_color;
  position: relative;
  &::before {
-      content: '';
+    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
@@ -104,28 +100,26 @@ export default {

  > .cardTabsItem {
    padding: 0 12px;
-
  }

  > .cardTabsItem:hover {
-
    color: $theme_color;
  }
 }

-  ::v-deep .ivu-card, .ivu-card-head, ._Card {
+:deep(._Card) {
  margin-bottom: 20px;
  @include white_background_color();
 }

-  ::v-deep .ivu-card-head {
+:deep(._Card .el-card__header) {
  position: relative;
  padding: 0 14px;
  height: 50px;
  line-height: 50px;

  &::before {
-      content: '';
+    content: "";
    width: 3px;
    height: 50%;
    top: 25%;
@@ -140,9 +134,7 @@ export default {
  cursor: pointer;
 }

-  ::v-deep .ivu-card-body {
+:deep(._Card .el-card__body) {
  padding: 0 !important;
-    display: none;
 }
-
 </style>
--- a/buyer/src/components/drawer/Drawer.vue
+++ b/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: {
--- a/buyer/src/components/drawer/Main.vue
+++ b/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{
+  :deep(.popup .el-drawer__body) {
    padding: 0 !important;
    background-color: #eee;
  }
-  ::v-deep.popup .ivu-drawer-wrap{
+  :deep(.popup) {
    z-index: 3001;
  }
 </style>
--- a/buyer/src/components/drawer/README.md
+++ b/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
+ * menuList  菜单项列表
+ * display   是否显示该项
+ * badge     徽标数字
+ * titleShow 是否显示标题
 */
-
-//实例代码
- width : 50, //bar的大小
- menuList:[
-   {
-      icon
-   }
- ]
-
-
+width: 50,
+menuList: [{ icon: '...' }]
 ```

+## 功能模块

+账户信息、购物车、我的订单、优惠券、我的资产、我的足迹、我的收藏、邮箱订阅

-> 账户信息
-> 购物车
-> 我的订单
-> 优惠券
-> 我的资产
-> 我的足迹
-> 我的收藏
-> 邮箱订阅
+## 使用

-
-## 如何使用
-1.
+在页面中注册全局组件 `<drawer />` 即可（已在 `global.js` 中注册）。
--- a/buyer/src/components/global.js
+++ b/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);
 }
--- a/buyer/src/components/goodsDetail/Promotion.vue
+++ b/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
--- a/buyer/src/components/goodsDetail/ShowGoods.vue
+++ b/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">
+      <el-dialog title="浏览视频" v-model="showGoodsVideo">
          <div id="dplayer"></div>
-      </Modal>
+        </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");
--- a/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
+++ b/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">
+                    <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>
-                    </i-circle>
+                      </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{
--- a/buyer/src/components/header/Header.vue
+++ b/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')) {
--- a/buyer/src/components/header/hoverSearch.vue
+++ b/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: {}, // 用户信息
--- a/buyer/src/components/indexDecorate/ModelForm.vue
+++ b/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"
--- a/buyer/src/components/indexDecorate/ModelFormItem.vue
+++ b/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>
--- a/buyer/src/components/indexDecorate/modelList/Carousel.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel.vue
@@ -6,8 +6,8 @@
      <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">
+        <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"
@@ -15,8 +15,8 @@
                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>
--- a/buyer/src/components/indexDecorate/modelList/Carousel1.vue
+++ b/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
    }
  }
 };
--- a/buyer/src/components/indexDecorate/modelList/Carousel2.vue
+++ b/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;
    }
--- a/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
+++ b/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>
--- a/buyer/src/components/indexDecorate/modelList/NotEnough.vue
+++ b/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>
--- a/buyer/src/components/indexDecorate/modelList/Recommend.vue
+++ b/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
--- a/buyer/src/components/indexDecorate/modelList/Seckill.vue
+++ b/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="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>{{ item.price | unitPrice('￥') }}</span>
-            <span>{{ item.originalPrice | unitPrice('￥') }}</span>
+          <span>{{ $filters.unitPrice(item.price, "￥") }}</span>
+          <span>{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
        </div>
      </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>
 </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() {
    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
+      clearInterval(this.interval);
+      this.interval = null;
+      this.countDown(val);
+      this.goodsList = this.list[val].seckillGoodsList;
    },
    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
-        }
-      }
+        return time < 10 ? "0" + time : time;
      }
    },
-  computed: {
-    swiper () { // 轮播组件
-      return this.$refs.mySwiper.swiper;
-    }
  },
-  beforeDestroy () {
-    // 销毁前清除定时器
+  beforeUnmount() {
    clearInterval(this.interval);
  },
  mounted() {
-    this.getListByDay()
+    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() {
+      this.list = this.data.options.list;
+      this.goodsList = this.list[0].seckillGoodsList;
+      this.countDown(this.currIndex);
+    },
  },
-    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)
-    }
-  }
 };
 </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>
--- a/buyer/src/components/indexDecorate/modelList/forYour.vue
+++ b/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;
    }
  }
--- a/buyer/src/components/indexDecorate/modelList/goodsAndType.vue
+++ b/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">
--- a/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
+++ b/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() {

  },
--- a/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
+++ b/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>
--- a/buyer/src/components/indexDecorate/modelList/setup-box.scss
+++ b/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;
+    }
+}
--- a/buyer/src/components/invoiceModal/index.vue
+++ b/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>
--- a/buyer/src/components/map/index.vue
+++ b/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>
--- a/buyer/src/components/map/multiple-map.vue
+++ b/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>
--- a/buyer/src/components/map/region.vue
+++ b/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>
--- a/buyer/src/components/nav/CateNav.vue
+++ b/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: {
--- a/buyer/src/components/nav/GoodsClassNav.vue
+++ b/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;
      }
    }
--- a/buyer/src/components/verify/index.vue
+++ b/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;
    }
  }
--- a/buyer/src/main.js
+++ b/buyer/src/main.js
@@ -1,70 +1,52 @@
-import Vue from "vue";
-import App from "./App";
-import router from "./router";
-import ViewUI from "view-design";
+import { createApp } from "vue";
+import "core-js/stable";
 import "./assets/styles/theme.less";
-// import './assets/iconfont/iconfont.css';
-import * as filters from "./plugins/filters";
+import App from "./App.vue";
+import { router } from "./router/index";
 import store from "@/vuex/store";
+import { setupElementPlus } from "@/plugins/element";
+import { setupLegacyMessage } from "@/utils/message";
+import { registerGlobalComponents } from "@/components/global.js";
+import * as filters from "./plugins/filters";
 import storage from "@/plugins/storage";
-// 全局引入封装组件
-import {InstallAll} from "@/components/global.js";

-const {aMapSecurityJsCode, title, inputMaxLength} = require("@/config");
+const { aMapSecurityJsCode, inputMaxLength } = require("@/config");

-const copyViewUi = {...ViewUI}
-copyViewUi.Input.props.maxlength.default = inputMaxLength // 挂载最大输入值
-Vue.use(copyViewUi);
-
-
-Vue.use(InstallAll);
-Vue.config.productionTip = false;
-
-Object.keys(filters).forEach((key) => {
-  Vue.filter(key, filters[key]);
-});
-
-// 高德安全密钥
 if (aMapSecurityJsCode) {
  window._AMapSecurityConfig = {
    securityJsCode: aMapSecurityJsCode,
  };
 }

-router.beforeEach((to, from, next) => {
-  ViewUI.LoadingBar.start();
-  window.document.title = to.meta.title === undefined ? title : to.meta.title;
-  next();
-});
+const app = createApp(App);

-router.afterEach((route) => {
-  ViewUI.LoadingBar.finish();
-});
+setupElementPlus(app);
+setupLegacyMessage(app);
+registerGlobalComponents(app);

-Vue.prototype.linkTo = function (url) {
+app.use(router);
+app.use(store);
+
+app.config.globalProperties.$filters = filters;
+app.config.globalProperties.Cookies = storage;
+app.config.globalProperties.$inputMaxLength = inputMaxLength;
+
+app.config.globalProperties.linkTo = function (url) {
  if (url.substr(0, 1) === "/") {
-    // 非外部链接，没有origin，只有路由地址
-    if (router.mode === "hash") {
-      window.open(location.origin + "/#" + url, "_blank");
-    } else {
    window.open(location.origin + url, "_blank");
-    }
  } else {
-    // 外部链接，完整的url地址
    window.open(url, "_blank");
  }
 };
-// 联系客服
-Vue.prototype.connectCs = function (
+
+app.config.globalProperties.connectCs = function (
  sign = "37ef9b97807d03c6741298ed4eb5b536d2d238e08a3c00fb01fe48f03a569974c99ad767e72c04b3165ef29aca2c488b505fe4ca"
 ) {
-  const url = "https://yzf.qq.com/xv/web/static/chat/index.html?sign=" + sign;
+  const url =
+    "https://yzf.qq.com/xv/web/static/chat/index.html?sign=" + sign;
  window.open(url, "_blank");
 };
-Vue.prototype.Cookies = storage;
-/* eslint-disable no-new */
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount("#app");
+
+router.isReady().then(() => {
+  app.mount("#app");
+});
--- a/buyer/src/pages/Cart.vue
+++ b/buyer/src/pages/Cart.vue
@@ -6,27 +6,20 @@
      <div>
        <router-link to="/"><img :src="$store.state.logoImg" /></router-link>
        <div>
-          购物车(<span>{{ goodsTotal }}</span
-          >)
+          购物车(<span>{{ goodsTotal }}</span>)
        </div>
      </div>

    </div>
-    <Divider />
+    <el-divider />
    <!-- 购物车主体 -->
    <div class="cart-content width_1200 center">
      <div class="available-area">
        <div class="cart-steps">
          <span :class="stepIndex == 0 ? 'active' : ''">1.我的购物车</span>
-          <Icon
-            :class="stepIndex == 0 ? 'active-arrow' : ''"
-            custom="icomoon icon-next"
-          ></Icon>
+          <i class="icomoon icon-next" :class="stepIndex == 0 ? 'active-arrow' : ''"></i>
          <span :class="stepIndex == 1 ? 'active' : ''">2.填写订单信息</span>
-          <Icon
-            :class="stepIndex == 1 ? 'active-arrow' : ''"
-            custom="icomoon icon-next"
-          ></Icon>
+          <i class="icomoon icon-next" :class="stepIndex == 1 ? 'active-arrow' : ''"></i>
          <span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
        </div>
      </div>
@@ -34,10 +27,10 @@
      <div class="cart-goods">
        <div class="cart-goods-title">
          <div class="width_60">
-            <Checkbox
+            <el-checkbox
              v-model="allChecked"
-              @on-change="changeChecked(allChecked, 'all')"
-              >全选</Checkbox
+              @change="changeChecked(allChecked, 'all')"
+              >全选</el-checkbox
            >
          </div>
          <div class="goods-title">商品</div>
@@ -58,10 +51,10 @@
        >
          <div class="shop-name">
            <div>
-              <Checkbox
+              <el-checkbox
                v-model="shop.checked"
-                @on-change="changeChecked(shop.checked, 'shop', shop.storeId)"
-              ></Checkbox>
+                @change="changeChecked(shop.checked, 'shop', shop.storeId)"
+              ></el-checkbox>
              <span class="go-shop-page" @click="goShopPage(shop.storeId)">{{
                shop.storeName
              }}</span>
@@ -80,34 +73,32 @@
                  :key="index"
                >
                  <span v-if="item.couponType === 'PRICE'"
-                    >￥{{ item.price }}</span
-                  >
+                    >￥{{ item.price }}</span>
                  <span v-if="item.couponType === 'DISCOUNT'"
-                    >{{ item.couponDiscount }}折</span
-                  >
+                    >{{ item.couponDiscount }}折</span>
                  <span>满{{ item.consumeThreshold }}元可用</span>
-                  <Button
+                  <el-button
                    class="coupon-btn"
                    size="small"
                    type="primary"
                    @click="receiveShopCoupon(item)"
                    :disabled="item.disabled"
-                    >{{ item.disabled ? "已领取" : "领取" }}</Button
+                    >{{ item.disabled ? "已领取" : "领取" }}</el-button
                  >
                </div>
              </div>
            </span>
            <div class="promotion-notice">{{ shop.promotionNotice }}</div>
          </div>
-          <template v-for="(goods, goodsIndex) in shop.skuList">
-            <div class="goods-item" :key="goodsIndex">
+          <template v-for="(goods, goodsIndex) in shop.skuList" :key="goods.goodsSku?.id || goodsIndex">
+            <div class="goods-item">
              <div class="width_60">
-                <Checkbox
+                <el-checkbox
                  v-model="goods.checked"
-                  @on-change="
+                  @change="
                    changeChecked(goods.checked, 'goods', goods.goodsSku.id)
                  "
-                ></Checkbox>
+                ></el-checkbox>
              </div>
              <div
                class="goods-title"
@@ -125,13 +116,13 @@
                  <p>
                    {{ goods.goodsSku.goodsName }}
                  </p>
-                  <p><Tag
+                  <p><el-tag
                    v-if="goods.goodsSku.salesModel === 'WHOLESALE'"
                    class="goods-show-tag"
                    color="purple"
                  >
                    批发商品
-                  </Tag></p>
+                  </el-tag></p>
                  <template
                    v-for="(promotion, promotionIndex) in goods.promotions"
                  >
@@ -165,43 +156,43 @@
                </div>
              </div>
              <div class="width_150">
-                {{ goods.purchasePrice | unitPrice("￥") }}
+                {{ $filters.unitPrice(goods.purchasePrice, "￥") }}
              </div>
              <div class="width_100">
-                <InputNumber
+                <el-input-number
                  :min="1"
                  size="small"
                  v-model="goods.num"
-                  @on-change="changeNum(goods.num, goods.goodsSku.id)"
-                ></InputNumber>
+                  @change="changeNum(goods.num, goods.goodsSku.id)"
+                ></el-input-number>
                <div class="fontsize_12">
                  {{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}
                </div>
              </div>
              <div class="width_150">
-                {{ goods.subTotal | unitPrice("￥") }}
+                {{ $filters.unitPrice(goods.subTotal, "￥") }}
              </div>
              <div class="width_100">
-                <Button
+                <el-button
                  v-if="!goods.errorMessage"
                  size="small"
                  type="primary"
                  @click="delGoods(goods.goodsSku.id)"
-                  >删除</Button
+                  >删除</el-button
                >
-                <Button
+                <el-button
                  v-if="!goods.errorMessage"
                  size="small"
                  type="info"
                  @click="collectGoods(goods.goodsSku.id)"
                  style="margin-left: 10px"
-                  >收藏</Button
+                  >收藏</el-button
                >
              </div>
              <div class="error-goods" v-if="goods.errorMessage">
                <div style="margin-top: 20px">{{ goods.errorMessage }}</div>
-                <Button type="primary" @click="delGoods(goods.goodsSku.id)"
-                  >删除</Button
+                <el-button type="primary" @click="delGoods(goods.goodsSku.id)"
+                  >删除</el-button
                >
              </div>
            </div>
@@ -211,10 +202,10 @@
        <div class="cart-goods-footer">
          <div>
            <div class="width_60">
-              <Checkbox
+              <el-checkbox
                v-model="allChecked"
-                @on-change="changeChecked(allChecked, 'all')"
-                >全选</Checkbox
+                @change="changeChecked(allChecked, 'all')"
+                >全选</el-checkbox
              >
            </div>
            <div class="width_100 handle-btn" @click="delGoods()">
@@ -227,23 +218,20 @@
          </div>
          <div>
            <div class="selected-count">
-              已选择<span>{{ checkedNum }}</span
-              >件商品
+              已选择<span>{{ checkedNum }}</span>件商品
            </div>
            <div class="ml_20 save-price">
-              已节省<span>{{
-                priceDetailDTO.discountPrice | unitPrice("￥")
-              }}</span>
+              已节省<span>{{ $filters.unitPrice(priceDetailDTO.discountPrice, "￥") }}</span>
            </div>
            <div class="ml_20 total-price">
              总价（不含运费）:
-              <div>{{ priceDetailDTO.flowPrice | unitPrice("￥") }}</div>
+              <div>{{ $filters.unitPrice(priceDetailDTO.flowPrice, "￥") }}</div>
            </div>
            <div class="pay ml_20" @click="pay">去结算</div>
          </div>
        </div>
      </div>
-      <Spin size="large" fix v-if="loading"></Spin>
+      <el-skeleton size="large" fix v-if="loading"></el-skeleton>
    </div>
    <BaseFooter class="footer"></BaseFooter>
  </div>
@@ -400,7 +388,7 @@ export default {
    async receiveShopCoupon(item) {
      let res = await APIMember.receiveCoupon(item.id);
      if (res.success) {
-        this.$set(item, "disabled", true);
+        item["disabled"] = true;
        this.$Message.success("领取成功");
      } else {
        this.$Message.error(res.message);
@@ -500,7 +488,7 @@ export default {
    padding: 0 15px;
  }

-  .ivu-icon {
+  .el-icon {
    @include content_color($light_content_color);
    font-size: 20px;
    margin: 0 15px;
@@ -743,7 +731,7 @@ export default {
  width: 1200px;
  margin: 0 auto;
 }
-.ivu-divider {
+.el-divider {
  background: $theme_color;
  height: 2px;
 }
@@ -781,7 +769,7 @@ export default {
 }
 </style>
 <style>
-.ivu-input-number-input {
+.el-input-number .el-input__inner {
  text-align: center;
 }

--- a/buyer/src/pages/CouponCenter.vue
+++ b/buyer/src/pages/CouponCenter.vue
@@ -8,11 +8,9 @@
            <img src="../assets/images/logo.png" width="120" alt="" />
          </router-link>
          <p>领券中心</p>
-          <Input
-            search
+          <el-input
            style="width: 400px"
-            @on-search="search"
-            enter-button="搜索"
+            @keyup.enter="search"
            placeholder="搜索优惠券"
          />
        </div>
@@ -27,19 +25,13 @@
                <span
                  v-if="item.couponType === 'PRICE'"
                  class="fontsize_12 global_color"
-                  >￥<span class="price">{{
-                    item.price | unitPrice
-                  }}</span></span
-                >
+                  >￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
                <span
                  v-if="item.couponType === 'DISCOUNT'"
                  class="fontsize_12 global_color"
-                  ><span class="price">{{ item.couponDiscount }}</span
-                  >折</span
-                >
+                  ><span class="price">{{ item.couponDiscount }}</span>折</span>
                <span class="describe"
-                  >满{{ item.consumeThreshold }}元可用</span
-                >
+                  >满{{ item.consumeThreshold }}元可用</span>
              </div>
              <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
              <p>有效期：{{ item.endTime }}</p>
@@ -50,16 +42,12 @@
            <i class="circle-bottom"></i>
          </li>
        </ul>
-        <Page
-          :total="total"
-          @on-change="changePageNum"
+        <el-pagination           :total="total"
+          @current-change="changePageNum"
          class="pageration"
-          @on-page-size-change="changePageSize"
+          @size-change="changePageSize"
          :page-size="params.pageSize"
-          show-total
-          show-sizer
-        >
-        </Page>
+         layout="total, sizes, prev, pager, next"></el-pagination>
      </div>
    </div>
    <BaseFooter></BaseFooter>
--- a/buyer/src/pages/ForgetPassword.vue
+++ b/buyer/src/pages/ForgetPassword.vue
@@ -11,76 +11,72 @@
    </div>
    <div class="login-container">
        <!-- 验证手机号 -->
-        <Form
+        <el-form
          ref="formFirst"
          :model="formFirst"
          :rules="ruleInline"
          style="width:300px;"
          v-show="step === 0"
        >
-          <FormItem prop="mobile">
-            <i-input
+          <el-form-item prop="mobile">
+            <el-input
              type="text"
              v-model="formFirst.mobile"
              clearable
              placeholder="手机号"
            >
-              <Icon type="md-phone-portrait" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="code">
-            <i-input
+              <template #prepend><el-icon><Iphone /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="code">
+            <el-input
              type="text"
              v-model="formFirst.code"
              clearable
              placeholder="手机验证码"
            >
-              <Icon
-                type="ios-text-outline"
-                style="font-weight: bold"
-                slot="prepend"
-              />
-              <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
-            </i-input>
-          </FormItem>
-          <FormItem>
-            <Button @click="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
-          </FormItem>
-          <FormItem>
-            <Button type="error" @click="next" :loading="loading" long>下一步</Button>
-          </FormItem>
-        </Form>
-        <Form
+              <template #prepend><el-icon style="font-weight: bold"><Document /></el-icon></template>
+              <template #append><el-button @click="sendCode">{{ codeMsg }}</el-button></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="verifyBtnClick" style="width:100%" :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" @click="next" :loading="loading" style="width:100%">下一步</el-button>
+          </el-form-item>
+        </el-form>
+        <el-form
          ref="form"
          :model="form"
          :rules="ruleInline"
          style="width:300px;"
          v-show="step === 1"
        >
-          <FormItem prop="password">
-            <i-input
+          <el-form-item prop="password">
+            <el-input
              type="password"
              v-model="form.password"
              clearable
              placeholder="请输入至少六位密码"
            >
-              <Icon type="md-lock" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="password">
-            <i-input
+              <template #prepend><el-icon><Lock /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
              type="password"
              v-model="form.oncePasd"
              clearable
              placeholder="请再次输入密码"
            >
-              <Icon type="md-lock" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem>
-            <Button type="error" size="large" @click="handleSubmit" :loading="loading1" long>提交</Button>
-          </FormItem>
-        </Form>
+              <template #prepend><el-icon><Lock /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" size="large" @click="handleSubmit" :loading="loading1" style="width:100%">提交</el-button>
+          </el-form-item>
+        </el-form>
        <!-- 拼图验证码 -->
        <Verify
          ref="verify"
@@ -91,18 +87,18 @@
        <div class="login-btn"><a @click="$router.push('login')">前往登录</a></div>
    </div>
    <div class="foot">
-      <Row type="flex" justify="space-around" class="help">
+      <div type="flex" justify="space-around" class="help">
        <a class="item" href="https://pickmall.cn/" target="_blank">帮助</a>
        <a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
        <a class="item" href="https://pickmall.cn/" target="_blank">条款</a>
-      </Row>
-      <Row type="flex" justify="center" class="copyright">
+      </div>
+      <div type="flex" justify="center" class="copyright">
        Copyright © {{year}} - Present
        <a href="https://pickmall.cn/" target="_blank" style="margin: 0 5px"
          >{{config.title}}</a
        >
        版权所有
-      </Row>
+      </div>
    </div>
  </div>
 </template>
@@ -114,9 +110,10 @@ import { md5 } from '@/plugins/md5.js';
 import * as apiLogin from '@/api/login.js';
 import { sendSms } from '@/api/common.js';
 import Verify from '@/components/verify';
+import { Lock, Iphone, Document } from '@element-plus/icons-vue';
 export default {
  name: 'ForgetPassword',
-  components: { Verify },
+  components: { Verify, Lock, Iphone, Document },
  data () {
    return {
      config:require('@/config'),
@@ -294,7 +291,7 @@ export default {

 .other-login {
  margin: 0 auto;
-  .ivu-icon {
+  .el-icon {
    font-size: 24px;
  }
 }
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -4,12 +4,12 @@
    <Search></Search>
    <div class="shop-item-path">
      <div class="shop-nav-container">
-        <Breadcrumb>
-          <BreadcrumbItem to="/">首页</BreadcrumbItem>
-          <BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">
+        <el-breadcrumb>
+          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
+          <el-breadcrumb-item v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">
            {{ item.name }}
-          </BreadcrumbItem>
-        </Breadcrumb>
+          </el-breadcrumb-item>
+        </el-breadcrumb>
        <div class="store-collect" v-if="!takeDownSale">
          <span class="mr_10" v-if="goodsMsg.data">
            <router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
@@ -17,7 +17,7 @@
            }}</router-link>
          </span>
          <span @click="collect">
-            <Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />
+            <el-icon :color="storeCollected ? '#ed3f14' : '#666'"><StarFilled /></el-icon>
            {{ storeCollected? "已收藏店铺": "收藏店铺" }}
          </span>
          <span class="ml_10" @click="IMService(goodsMsg.data.storeId,goodsMsg.data.goodsId,goodsMsg.data.id)">联系客服</span>
@@ -32,16 +32,17 @@

    <empty _Title='当前商品已下架' v-if="takeDownSale">
      <div class="sale-btn">
-        <Button size="small" class="mr_10" @click="target('/')">返回首页</Button>
-        <Button size="small" @click="target('goodsList')">返回商品列表</Button>
+        <el-button size="small" class="mr_10" @click="target('/')">返回首页</el-button>
+        <el-button size="small" @click="target('goodsList')">返回商品列表</el-button>
      </div>
    </empty>
-    <Spin size="large" fix v-if="isLoading"></Spin>
+    <el-skeleton size="large" fix v-if="isLoading"></el-skeleton>
    <BaseFooter></BaseFooter>
  </div>
 </template>

 <script>
+import { StarFilled } from '@element-plus/icons-vue';
 import Search from "@/components/Search";

 import ShowGoods from "@/components/goodsDetail/ShowGoods";
@@ -129,7 +130,7 @@ export default {
              });
            });
            this.categoryBar = cateArr;
-            this.$set(this, "goodsMsg", res.result);
+            this["goodsMsg"] = res.result;
            if (!this.goodsMsg.data.intro) {
              this.goodsMsg.data.intro = ''
            }
@@ -191,12 +192,10 @@ export default {
    },
  },
  watch: {},
-  components: {
-    Search,
+  components: { Search,
    ShowGoods,
    ShowGoodsDetail,
-    empty
-  },
+    empty, StarFilled },
 };
 </script>
 <style scoped lang="scss">
--- a/buyer/src/pages/GoodsList.vue
+++ b/buyer/src/pages/GoodsList.vue
@@ -20,21 +20,14 @@
                @click="orderBy(item.en, index)"
              >
                <span :class="{ 'goods-list-tool-active': index === sortIndex }"
-                  >{{ item.title }}<Icon type="ios-arrow-round-down"
-                /></span>
+                  >{{ item.title }}<el-icon><ArrowDown /></el-icon></span>
              </li>
              <li @click="orderBy('price', 5, 'up')" class="price-sort">
                <span :class="{ 'goods-list-tool-active': 5 === sortIndex }">
                  价格
                  <div>
-                    <Icon
-                      type="md-arrow-dropup"
-                      :class="{ 'price-color': sortPriceIndex == 'desc' }"
-                    />
-                    <Icon
-                      type="md-arrow-dropdown"
-                      :class="{ 'price-color': sortPriceIndex == 'asc' }"
-                    />
+                    <el-icon :class="{ 'price-color': sortPriceIndex == 'desc' }"><ArrowUp /></el-icon>
+                    <el-icon :class="{ 'price-color': sortPriceIndex == 'asc' }"><ArrowDown /></el-icon>
                  </div>
                </span>
              </li>
@@ -55,24 +48,21 @@
              </div>
              <div class="goods-show-price">
                <span>
-                  <span class="seckill-price text-danger">{{
-                    item.price | unitPrice("￥")
-                  }}</span>
+                  <span class="seckill-price text-danger">{{ $filters.unitPrice(item.price, "￥") }}</span>
                </span>
              </div>
              <div class="goods-show-detail">
-                <Tag
+                <el-tag
                  v-if="item.salesModel === 'WHOLESALE'"
                  class="goods-show-tag"
                  color="purple"
                >
                  批发
-                </Tag>
+                </el-tag>
                <span>{{ item.goodsName }}</span>
              </div>
              <div class="goods-show-num">
-                已有<span>{{ item.commentNum || 0 }}</span
-                >人评价
+                已有<span>{{ item.commentNum || 0 }}</span>人评价
              </div>
              <div class="goods-show-seller">
                <span class="text-bottom" style="color: #e4393c">{{
@@ -81,49 +71,48 @@
              </div>

              <div class="goods-show-right">
-                <Tag
+                <el-tag
                  class="goods-show-tag"
                  color="red"
                  v-if="item.selfOperated"
                >
                  自营
-                </Tag>
-                <Tag
+                </el-tag>
+                <el-tag
                  class="goods-show-tag"
                  color="blue"
                  v-if="item.goodsType === 'VIRTUAL_GOODS'"
                >
                  虚拟
-                </Tag>
-                <Tag
+                </el-tag>
+                <el-tag
                  class="goods-show-tag"
                  color="blue"
                  v-else-if="item.goodsType === 'PHYSICAL_GOODS'"
                >
                  实物
-                </Tag>
+                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-page">
-        <Page
-          show-total
-          show-sizer
-          @on-change="changePageNum"
-          @on-page-size-change="changePageSize"
+        <el-pagination
+          @current-change="changePageNum"
+          @size-change="changePageSize"
          :total="total"
          :page-size="params.pageSize"
-        ></Page>
+         layout="total, sizes, prev, pager, next"></el-pagination>
      </div>
    </div>
-    <Spin size="large" fix v-if="loading"></Spin>
+    <el-skeleton size="large" fix v-if="loading"></el-skeleton>
    <BaseFooter></BaseFooter>
  </div>
 </template>

 <script>
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import GoodsClassNav from "@/components/nav/GoodsClassNav";
 import * as apiGoods from "@/api/goods";
 export default {
@@ -347,7 +336,7 @@ export default {
    }
    span > div {
      display: inline-block;
-      .ivu-icon {
+      .el-icon {
        font-size: 12px;
        position: absolute;
        &:nth-child(1) {
@@ -379,7 +368,7 @@ export default {
  text-decoration: none;
  z-index: 1;
 }
-.goods-list-tool .ivu-icon {
+.goods-list-tool .el-icon {
  font-weight: bold;
  font-size: 16px;
 }
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -1,27 +1,25 @@
 <template>
  <div class="container">
-    <Modal v-model="showCpmodel" width="350">
+    <el-dialog v-model="showCpmodel" width="350">
            <template #header>
                <p style="color:black;text-align:left">
-                    <!-- <Icon type="ios-information-circle"></Icon> -->
+                    <!-- <el-icon><InfoFilled /></el-icon> -->
                    <span>活动优惠券</span>
                </p>
            </template>
-              <template>
-                  <Scroll :on-reach-bottom="handleReachBottom">
-                      <Card dis-hover v-for="(item, index) in autoCoupList" :key="index" style="margin: 10px 15px">
-                            <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color" style="font-size: 15px;">￥<span class="price">{{item.price | unitPrice}}</span></span>
+              <div class="coupon-scroll" @scroll="handleReachBottom">
+                      <el-card shadow="never" v-for="(item, index) in autoCoupList" :key="index" style="margin: 10px 15px">
+                            <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color" style="font-size: 15px;">￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
                            <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color" style="font-size: 15px;"><span class="price">{{item.discount}}</span>折</span>
                            <span class="describe" style="font-size: 15px;margin-left: 5px;">满{{item.consumeThreshold}}元可用</span>
                            <p style="font-size: 10px;">使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
                            <p style="font-size: 10px;">有效期：{{item.endTime}}</p>
-                      </Card>
-                  </Scroll>
-              </template>
+                      </el-card>
+              </div>
            <template #footer>
-                <Button type="error" @click="showCpmodel=false">确定</Button>
+                <el-button type="danger" @click="showCpmodel=false">确定</el-button>
            </template>
-        </Modal>
+        </el-dialog>

    <!-- 固定头部 -->
    <hover-search class="hover-search" :class="{show: topSearchShow}"></hover-search>
@@ -43,6 +41,7 @@
 </template>

 <script>
+import { InfoFilled } from '@element-plus/icons-vue';
 import Search from '@/components/Search';
 import ModelForm from '@/components/indexDecorate/ModelForm';
 import HoverSearch from '@/components/header/hoverSearch';
@@ -196,12 +195,10 @@ export default {
      }
    }
  },
-  components: {
-    Search,
+  components: { Search,
    ModelForm,
    HoverSearch,
-    fixedBar
-  }
+    fixedBar, InfoFilled }
 };
 </script>

--- a/buyer/src/pages/Login.vue
+++ b/buyer/src/pages/Login.vue
@@ -10,13 +10,13 @@
    <!-- 登录主体 包含轮播图 登录模块 -->
    <div class="login-container">
      <!-- 轮播 -->
-      <Carousel loop :autoplay-speed="5000" class="login-carousel" arrow="never">
-        <CarouselItem>
+      <el-carousel :interval="5000" arrow="never" class="login-carousel" height="550px">
+        <el-carousel-item>
          <div class="demo-carousel" @click='$refs.verify.show = false'>
            <img src="https://lili-system.oss-cn-beijing.aliyuncs.com/background.jpg" />
          </div>
-        </CarouselItem>
-      </Carousel>
+        </el-carousel-item>
+      </el-carousel>
      <!-- 登录模块 -->
      <div class="form-box" @click='$refs.verify.show = false'>
        <div class="account-number">
@@ -34,7 +34,7 @@
              <span>
                二维码已失效
              </span>
-              <Button size='small' @click="createPCLoginSession">刷新二维码</Button>
+              <el-button size='small' @click="createPCLoginSession">刷新二维码</el-button>
            </div>
            <vue-qr
              :text="qrCode"
@@ -69,45 +69,45 @@
        <div>
          <div v-show="!scannerCodeLoginFLag">
          <!-- 账号密码登录 -->
-          <Form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
+          <el-form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
                @click.self='$refs.verify.show = false'>
-            <FormItem prop="username">
-              <i-input type="text" v-model="formData.username" clearable placeholder="用户名">
-                <Icon type="md-person" slot="prepend"></Icon>
-              </i-input>
-            </FormItem>
-            <FormItem prop="password">
-              <i-input type="password" v-model="formData.password" clearable placeholder="密码">
-                <Icon type="md-lock" slot="prepend"></Icon>
-              </i-input>
-            </FormItem>
-            <FormItem>
-              <Button type="error" @click.stop="handleSubmit('formInline')" long>登录</Button>
-            </FormItem>
-          </Form>
+            <el-form-item prop="username">
+              <el-input type="text" v-model="formData.username" clearable placeholder="用户名">
+                <template #prepend><el-icon><User /></el-icon></template>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input type="password" v-model="formData.password" clearable placeholder="密码">
+                <template #prepend><el-icon><Lock /></el-icon></template>
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="danger" @click.stop="handleSubmit('formInline')" style="width:100%">登录</el-button>
+            </el-form-item>
+          </el-form>
          <!-- 验证码登录 -->
-          <Form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
+          <el-form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
                @click.self='$refs.verify.show = false'>
-            <FormItem prop="mobile">
-              <i-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
-                <Icon type="md-lock" slot="prepend"></Icon>
-              </i-input>
-            </FormItem>
-            <FormItem prop="code">
-              <i-input type="text" v-model="formSms.code" placeholder="手机验证码">
-                <Icon type="ios-text-outline" style="font-weight: bold" slot="prepend"/>
-                <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
-              </i-input>
-            </FormItem>
-            <FormItem>
-              <Button @click.stop="verifyBtnClick" long
+            <el-form-item prop="mobile">
+              <el-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
+                <template #prepend><el-icon><Lock /></el-icon></template>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="code">
+              <el-input type="text" v-model="formSms.code" placeholder="手机验证码">
+                <template #prepend><el-icon style="font-weight: bold"><Document /></el-icon></template>
+                <template #append><el-button @click="sendCode">{{ codeMsg }}</el-button></template>
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click.stop="verifyBtnClick" style="width:100%"
                      :type="verifyStatus?'success':'default'">{{ verifyStatus ? '验证通过' : '点击完成安全验证' }}
-              </Button>
-            </FormItem>
-            <FormItem>
-              <Button type="error" @click="handleSubmit('formSms')" long>登录</Button>
-            </FormItem>
-          </Form>
+              </el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="danger" @click="handleSubmit('formSms')" style="width:100%">登录</el-button>
+            </el-form-item>
+          </el-form>
        </div>
          <div class="other">
            <div class="other-login">
@@ -138,16 +138,16 @@
      <verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
    </div>
    <div class="foot">
-      <Row type="flex" justify="space-around" class="help">
+      <div type="flex" justify="space-around" class="help">
        <router-link to="/article" class="item" target="_blank">帮助</router-link>
        <router-link to="/article?id=1371779927900160000" class="item" target="_blank">隐私</router-link>
        <router-link to="/article?id=1371992704333905920" class="item" target="_blank">条款</router-link>
-      </Row>
-      <Row type="flex" justify="center" class="copyright">
+      </div>
+      <div type="flex" justify="center" class="copyright">
        Copyright © {{year}} - Present
        <a href="https://pickmall.cn" target="_blank" style="margin: 0 5px">{{config.title}}</a>
        版权所有
-      </Row>
+      </div>
    </div>
  </div>
 </template>
@@ -162,12 +162,16 @@ import { webLogin, loginCallback,sCLogin,getSCLoginCode} from "@/api/login.js";
 import storage from "@/plugins/storage.js";
 import verify from "@/components/verify";
 import vueQr from "vue-qr";
+import { User, Lock, Document } from "@element-plus/icons-vue";

 export default {
  name: "Login",
  components: {
    verify,
-    vueQr
+    vueQr,
+    User,
+    Lock,
+    Document,
  },
  data() {
    return {
@@ -413,7 +417,7 @@ export default {
      });
    },
  },
-  destroyed() {
+  beforeUnmount() {
    this.clearQRLoginInfo();
  },
  mounted() {
--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -10,12 +10,10 @@
        <p :alt="storeMsg.storeDesc" class="ellipsis" v-html="storeMsg.storeDesc"></p>
      </div>
      <div>
-        <span class="hover-pointer" @click="collect"><Icon :color="storeCollected ? '#ed3f14' : '#fff'"
-                                                           type="ios-heart"/>{{
+        <span class="hover-pointer" @click="collect"><el-icon :color="storeCollected ? '#ed3f14' : '#fff'"><StarFilled /></el-icon>{{
            storeCollected ? '已收藏店铺' : '收藏店铺'
          }}</span>
-        <span class="hover-pointer ml_10" style="width:80px" @click="IMService(storeMsg.storeId,null,null)"><Icon
-          custom="icomoon icon-customer-service"/>联系客服</span>
+        <span class="hover-pointer ml_10" style="width:80px" @click="IMService(storeMsg.storeId,null,null)"><i class="icomoon icon-customer-service"></i>联系客服</span>
      </div>
    </div>
    <div class="store-category">
@@ -27,22 +25,21 @@
          首页
        </li>
        <li v-for="(cate, index) in cateList" :key="index" class="cate-item">
-          <Dropdown v-if="cate.children.length">
+          <el-dropdown v-if="cate.children.length" trigger="hover">
            <div @click.self="searchByCate(cate)">
              {{ cate.labelName }}
-              <Icon type="ios-arrow-down"></Icon>
+              <el-icon><ArrowDown /></el-icon>
            </div>
-            <DropdownMenu slot="list">
-              <DropdownItem
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
                  v-for="sec in cate.children"
                  :key="sec.id"
-                :name="sec.id"
-                @click.native="searchByCate(sec)"
-              >{{ sec.labelName }}
-              </DropdownItem
-              >
-            </DropdownMenu>
-          </Dropdown>
+                  @click="searchByCate(sec)"
+                >{{ sec.labelName }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
          <span v-else @click.self="searchByCate(cate)">{{
              cate.labelName
            }}</span>
@@ -74,28 +71,23 @@
          </div>
          <div class="goods-show-price">
            <span>
-              <span class="seckill-price text-danger">{{
-                  item.price | unitPrice("￥")
-                }}</span>
+              <span class="seckill-price text-danger">{{ $filters.unitPrice(item.price, "￥") }}</span>
            </span>
          </div>
          <div class="goods-show-detail">
            <span>{{ item.goodsName }}</span>
          </div>
          <div class="goods-show-num">
-            已有<span>{{ item.commentNum || 0 }}</span
-          >人评价
+            已有<span>{{ item.commentNum || 0 }}</span>人评价
          </div>
        </div>
      </div>
      <div class="goods-page">
-        <Page
-          :page-size="params.pageSize"
+        <el-pagination           :page-size="params.pageSize"
          :total="total"
-          show-sizer
-          @on-change="changePageNum"
-          @on-page-size-change="changePageSize"
-        ></Page>
+          @current-change="changePageNum"
+          @size-change="changePageSize"
+         layout="sizes, prev, pager, next"></el-pagination>
      </div>

    </div>
@@ -107,6 +99,7 @@

 <script>

+import { ArrowDown, StarFilled } from '@element-plus/icons-vue';
 import {getCateById, getDetailById} from "@/api/shopentry";
 import {cancelStoreCollect, collectStore} from "@/api/member";
 import {goodsList} from "@/api/goods";
@@ -119,11 +112,7 @@ import imTalk from '@/components/mixes/talkIm'

 export default {
  name: "Merchant",
-  components: {
-    Search,
-    ModelForm,
-    HoverSearch,
-  },
+  components: { Search, ModelForm, HoverSearch, StarFilled, ArrowDown },
  mixins: [imTalk],
  data() {
    return {
--- a/buyer/src/pages/SignUp.vue
+++ b/buyer/src/pages/SignUp.vue
@@ -11,67 +11,63 @@
    </div>
    <div class="login-container">
        <!-- 注册 -->
-        <Form
+        <el-form
          ref="formRegist"
          :model="formRegist"
          :rules="ruleInline"
          style="width:300px;"
        >
-          <FormItem prop="username">
-            <i-input
+          <el-form-item prop="username">
+            <el-input
              type="text"
              v-model="formRegist.username"
              clearable
              placeholder="用户名"
            >
-              <Icon type="md-person" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="password">
-            <i-input
+              <template #prepend><el-icon><User /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
              type="password"
              v-model="formRegist.password"
              clearable
              placeholder="请输入大于6位密码"
            >
-              <Icon type="md-lock" slot="prepend"> </Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="mobilePhone">
-            <i-input
+              <template #prepend><el-icon><Lock /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="mobilePhone">
+            <el-input
              type="text"
              v-model="formRegist.mobilePhone"
              clearable
              placeholder="手机号"
            >
-              <Icon type="md-phone-portrait" slot="prepend"></Icon>
-            </i-input>
-          </FormItem>
-          <FormItem prop="code">
-            <i-input
+              <template #prepend><el-icon><Iphone /></el-icon></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="code">
+            <el-input
              type="text"
              v-model="formRegist.code"
              clearable
              placeholder="手机验证码"
            >
-              <Icon
-                type="ios-text-outline"
-                style="font-weight: bold"
-                slot="prepend"
-              />
-              <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
-            </i-input>
-          </FormItem>
-          <FormItem>
-            <Button @click="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
-          </FormItem>
-          <FormItem>
-            <Button type="error" size="large" @click="handleRegist" long
-              >注册</Button
+              <template #prepend><el-icon style="font-weight: bold"><Document /></el-icon></template>
+              <template #append><el-button @click="sendCode">{{ codeMsg }}</el-button></template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="verifyBtnClick" style="width:100%" :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="danger" size="large" @click="handleRegist" style="width:100%"
+              >注册</el-button
            >
-          </FormItem>
-          <FormItem><span class="color999 ml_20">点击注册，表示您同意《<router-link to="/article?id=1371992704333905920" target="_blank">商城用户协议</router-link>》</span></FormItem>
-        </Form>
+          </el-form-item>
+          <el-form-item><span class="color999 ml_20">点击注册，表示您同意《<router-link to="/article?id=1371992704333905920" target="_blank">商城用户协议</router-link>》</span></el-form-item>
+        </el-form>
        <!-- 拼图验证码 -->
        <Verify
          ref="verify"
@@ -82,16 +78,16 @@
        <div class="login-btn">已有账号？<a @click="$router.push('login')">立即登录</a></div>
    </div>
    <div class="foot">
-      <Row type="flex" justify="space-around" class="help">
+      <div type="flex" justify="space-around" class="help">
        <router-link to="/article" class="item" target="_blank">帮助</router-link>
        <router-link to="/article?id=1371779927900160000" class="item" target="_blank">隐私</router-link>
        <router-link to="/article?id=1371992704333905920" class="item" target="_blank">条款</router-link>
-      </Row>
-      <Row type="flex" justify="center" class="copyright">
+      </div>
+      <div type="flex" justify="center" class="copyright">
        Copyright © {{year}} - Present
        <a href="https://pickmall.cn" target="_blank" style="margin: 0 5px">{{config.title}}</a>
        版权所有
-      </Row>
+      </div>
    </div>
  </div>
 </template>
@@ -103,9 +99,10 @@ import { md5 } from '@/plugins/md5.js';
 import * as apiLogin from '@/api/login.js';
 import { sendSms } from '@/api/common.js';
 import Verify from '@/components/verify';
+import { User, Lock, Iphone, Document } from '@element-plus/icons-vue';
 export default {
  name: 'SignUp',
-  components: { Verify },
+  components: { Verify, User, Lock, Iphone, Document },
  data () {
    return {
      config:require('@/config'),
@@ -254,7 +251,7 @@ export default {

 .other-login {
  margin: 0 auto;
-  .ivu-icon {
+  .el-icon {
    font-size: 24px;
  }
 }
--- a/buyer/src/pages/article/index.vue
+++ b/buyer/src/pages/article/index.vue
@@ -5,39 +5,34 @@

    <div class="title-bg"><p>文章帮助中心</p></div>
    <div class="container width_1200">
-      <Layout class="layoutAll">
-        <Sider class="side-bar" ref="side" :collapsed-width="78">
+      <div class="layoutAll">
+        <el-aside class="side-bar" width="200px">
          <div class="article-cate">文章分类列表</div>
-          <Menu
+          <el-menu
            class="side-menu"
-            theme="light"
-            width="auto"
-            ref='menu'
-            :active-name="activeName"
-            :open-names="openName"
-            @on-select="onSelect"
+            :key="menuKey"
+            :default-active="String(activeName)"
+            :default-openeds="openName"
+            @select="onSelect"
          >
-            <!-- 循环导航栏  -->
-            <Submenu
-              v-show="menu.children"
+            <el-sub-menu
              v-for="(menu, index) in list"
+              v-show="menu.children"
              :key="index"
-              :name="menu.articleCategoryName"
+              :index="menu.articleCategoryName"
            >
-              <template slot="title">
+              <template #title>
                <span>{{ menu.articleCategoryName }}</span>
              </template>
-              <MenuItem
+              <el-menu-item
                v-for="(chlidren, i) in menu.children"
                :key="i"
-                :name="chlidren.id"
-                >{{ chlidren.articleCategoryName }}</MenuItem
-              >
-            </Submenu>
-          </Menu>
-        </Sider>
-        <Layout class="layout ml_10">
-          <Content class="content">
+                :index="String(chlidren.id)"
+              >{{ chlidren.articleCategoryName }}</el-menu-item>
+            </el-sub-menu>
+          </el-menu>
+        </el-aside>
+        <el-main class="content ml_10">
          <ul class="article-list" v-show="showList">
            <li v-for="(article, index) in articleList" :key="index" @click="getDetail(article.id)">
              {{ article.title }}
@@ -50,41 +45,41 @@
              <div class="mt_10 mb_10" v-html="detail.content"></div>
            </div>
          </transition>
-          </Content>
-        </Layout>
-      </Layout>
+        </el-main>
+      </div>
    </div>
  </div>
 </template>

 <script>
 import { articleCateList, articleDetail, articleList } from '@/api/common.js'
+
 export default {
-  name: 'Home',
+  name: 'ArticleIndex',
  data () {
    return {
-      list: [], // 分类列表
-      detail: '', // 文章详情
-      articleList: [], // 分类下的文章列表
-      activeName: '1347456734864367616', // 左侧激活项
-      openName: [], // 展开的名称
-      params: { // 请求参数
+      list: [],
+      detail: '',
+      articleList: [],
+      activeName: '1347456734864367616',
+      openName: [],
+      menuKey: 0,
+      params: {
        pageNumber: 1,
        pageSize: 100,
        categoryId: '',
        sort: 'sort'
      },
-      showList: true // 展示文章列表
+      showList: true
    };
  },
  methods: {
-    // 每次点击左侧bar的callback
    onSelect (id) {
      this.getList(id)
      this.detail = ''
      this.showList = true
    },
-    getCateList () { // 文章分类列表
+    getCateList () {
      articleCateList().then(res => {
        if (res.success) {
          this.list = res.result
@@ -105,15 +100,12 @@ export default {
            this.activeName = this.list[0].children[0].id
            this.openName.push(this.list[0].articleCategoryName)
          }
-          this.$nextTick(() => {
-            this.$refs.menu.updateOpened()
-            this.$refs.menu.updateActiveName()
-          })
+          this.menuKey++
          this.getList(this.activeName)
        }
      })
    },
-    getList (id) { // 文章列表
+    getList (id) {
      this.params.categoryId = id
      articleList(this.params).then(res => {
        if (res.success) {
@@ -121,7 +113,7 @@ export default {
        }
      })
    },
-    async getDetail (id) { // 文章详情
+    async getDetail (id) {
      await articleDetail(id).then(res => {
        if (res.success) {
          this.detail = res.result
@@ -162,6 +154,7 @@ export default {
 }

 .layoutAll {
+  display: flex;
  min-height: 1200px;
  @include background_color($light_background_color);
 }
@@ -177,7 +170,6 @@ export default {

 .layout-footer-center {
  padding: 0px 15px;
-
  padding-bottom: 15px;
  text-align: center;
 }
@@ -191,7 +183,6 @@ export default {
    height: 100px;
    line-height: 100px;
    color: #fff;
-    line-height: 100px;
    margin: 0 auto;
    padding-left: 10px;
  }
--- a/buyer/src/pages/home/memberCenter/AccountSafe.vue
+++ b/buyer/src/pages/home/memberCenter/AccountSafe.vue
@@ -3,87 +3,89 @@
    <card _Title="账户安全"/>
    <div class="safeList">
      <!-- 密码 -->
-      <Row class="safeItem">
-        <Col :span="2">
-          <Icon size="40" type="md-key"/>
-        </Col>
-        <Col :span="16">
+      <div class="safeItem">
+        <div :span="2">
+          <el-icon :size="40"><Key /></el-icon>
+        </div>
+        <div :span="16">
          <div class="setDivItem">登录密码</div>
          <div class="setDivItem theme">互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。</div>
-        </Col>
-        <Col :span="4">
-          <Button @click="modifyPwd">修改密码</Button>
-        </Col>
-      </Row>
+        </div>
+        <div :span="4">
+          <el-button @click="modifyPwd">修改密码</el-button>
+        </div>
+      </div>

-      <Row class="safeItem">
-        <Col :span="2">
-          <Icon size="40" type="md-link" />
-        </Col>
-        <Col :span="16">
+      <div class="safeItem">
+        <div :span="2">
+          <el-icon :size="40"><Link /></el-icon>
+        </div>
+        <div :span="16">
          <div class="setDivItem">第三方账户绑定</div>
          <div class="setDivItem theme">绑定后可使用第三方账号快捷登录。</div>
          <div class="connectList">
            <div class="connectRow">
              <div class="connectRowLeft">
                <span class="connectName">{{ wechatConnect.label }}</span>
-                <Tag v-if="isBound(wechatConnect.type)" color="success">已绑定</Tag>
-                <Tag v-else>未绑定</Tag>
+                <el-tag v-if="isBound(wechatConnect.type)" color="success">已绑定</el-tag>
+                <el-tag v-else>未绑定</el-tag>
              </div>
            </div>
-            <Spin size="large" fix v-if="connectLoading"></Spin>
+            <el-skeleton size="large" fix v-if="connectLoading"></el-skeleton>
+          </div>
+        </div>
+        <div :span="4">
+          <el-button v-if="!isBound(wechatConnect.type)" type="primary" @click="openBindModal(wechatConnect)">绑定</el-button>
+          <el-button v-else @click="confirmUnbind(wechatConnect)">解绑</el-button>
+        </div>
      </div>
-        </Col>
-        <Col :span="4">
-          <Button v-if="!isBound(wechatConnect.type)" type="primary" @click="openBindModal(wechatConnect)">绑定</Button>
-          <Button v-else @click="confirmUnbind(wechatConnect)">解绑</Button>
-        </Col>
-      </Row>
    </div>

-    <Modal
+    <el-dialog
      v-model="bindModalVisible"
      title="绑定第三方账户"
-      :mask-closable="false"
+      :close-on-click-modal="false"
      :footer-hide="bindForm.type === 'WECHAT'"
      :ok-text="bindModalOkText"
      :loading="bindSubmitLoading"
-      @on-ok="submitBind"
-      @on-cancel="resetBindForm"
+      @ok="submitBind"
+      @cancel="resetBindForm"
    >
-      <Form :label-width="110">
-        <FormItem label="类型">
-          <Input v-model="bindForm.typeLabel" disabled />
-        </FormItem>
+      <el-form label-width="110px">
+        <el-form-item label="类型">
+          <el-input v-model="bindForm.typeLabel" disabled />
+        </el-form-item>

-        <FormItem v-if="bindForm.type === 'WECHAT'" label="公众号二维码">
+        <el-form-item v-if="bindForm.type === 'WECHAT'" label="公众号二维码">
          <div class="wechatQrBox">
            <div class="wechatQrImgBox">
-              <Spin fix v-if="qrCodeLoading"></Spin>
+              <el-skeleton fix v-if="qrCodeLoading"></el-skeleton>
              <img v-if="qrCodeSrc" class="wechatQrImg" :src="qrCodeSrc" alt="微信公众号二维码" />
              <div v-else class="wechatQrEmpty">二维码获取失败，请刷新重试</div>
            </div>
            <div class="wechatQrActions">
-              <Button @click="fetchWechatQrCode">刷新二维码</Button>
-              <Button type="primary" @click="submitBind">我已完成绑定</Button>
+              <el-button @click="fetchWechatQrCode">刷新二维码</el-button>
+              <el-button type="primary" @click="submitBind">我已完成绑定</el-button>
            </div>
            <div class="wechatQrTip">请使用微信扫码关注/授权，完成后点击“我已完成绑定”检测绑定状态</div>
          </div>
-        </FormItem>
+        </el-form-item>

-        <FormItem v-if="bindForm.type !== 'WECHAT'" label="OpenID/UnionID">
-          <Input v-model="bindForm.unionID" placeholder="请输入 OpenID/UnionID" />
-        </FormItem>
-      </Form>
-    </Modal>
+        <el-form-item v-if="bindForm.type !== 'WECHAT'" label="OpenID/UnionID">
+          <el-input v-model="bindForm.unionID" placeholder="请输入 OpenID/UnionID" />
+        </el-form-item>
+      </el-form>
+    </el-dialog>
  </div>
 </template>

 <script>
+import { Key, Link } from '@element-plus/icons-vue';
 // import { getPwdStatus } from '@/api/account';
 import storage from '@/plugins/storage'
 import { bindThirdAccount, getThirdAccountBindList, getWechatH5QrCode, unbindThirdAccount } from '@/api/login.js'
 export default {
+  components: { Key, Link },
  name: 'AccountSafe',
  data () {
    return {
@@ -264,7 +266,8 @@ export default {
 </script>

 <style scoped lang="scss">
-  ::v-deep .ivu-col-span-2, .ivu-col-span-4 {
+  .safeItem > div:first-child,
+  .safeItem > div:last-child {
    text-align: center;
    color: $theme_color;
  }
@@ -281,9 +284,8 @@ export default {
    border-bottom: 1px solid $border_color;
    padding: 16px 0;

-    ::v-deep .ivu-col {
+    > div {
      padding: 8px 0;
-
    }
  }

--- a/buyer/src/pages/home/memberCenter/CommentList.vue
+++ b/buyer/src/pages/home/memberCenter/CommentList.vue
@@ -4,12 +4,12 @@

    <div class="order">
      <div class="order-title">
-        <Row class="order-row title">
-          <i-col span="12">订单详情</i-col>
-          <i-col span="4">收货人</i-col>
-          <i-col span="4">评价</i-col>
-          <i-col span="6"></i-col>
-        </Row>
+        <div class="order-row title">
+          <div span="12">订单详情</div>
+          <div span="4">收货人</div>
+          <div span="4">评价</div>
+          <div span="6"></div>
+        </div>
      </div>
      <empty v-if="list.length === 0" />

@@ -20,40 +20,39 @@
            <span class="color999 ml_10">{{item.createTime}}</span>
            <span class="hover-pointer fontsize_12 eval-detail" @click="evaluateDetail(item.id)">评价详情</span>
          </div>
-          <Row class="order-item-view">
-            <i-col span="12" class="item-view-name">
+          <div class="order-item-view">
+            <div span="12" class="item-view-name">
              <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                <img :src="item.goodsImage" alt="" />
              </div>
              <div class="order-name hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                {{item.goodsName}}
              </div>
-            </i-col>
-            <i-col span="4">{{item.createBy | secrecyMobile}}</i-col>
-            <i-col span="4">
+            </div>
+            <div span="4">{{ $filters.secrecyMobile(item.createBy ) }}</div>
+            <div span="4">
              {{item.grade==='GOOD'?'好评' : item.grade === 'WORSE'?'差评' : '中评'}}
-            </i-col>
-            <i-col span="4">
-              <Tooltip transfer>
+            </div>
+            <div span="4">
+              <el-tooltip>
                  <div class="content">{{item.content}}</div>
-                  <div style="white-space: normal;word-break:break-all" slot="content">
+                  <template #content>
+                    <div style="white-space: normal;word-break:break-all">
                      {{item.content}}
                    </div>
-              </Tooltip>
-            </i-col>
-          </Row>
+                  </template>
+              </el-tooltip>
            </div>
          </div>
-      <Spin v-if="loading"></Spin>
+        </div>
+      </div>
+      <el-skeleton v-if="loading"></el-skeleton>
    </div>
    <!-- 分页 -->
    <div class="page-size">
-      <Page :total="total" @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="params.pageSize"
-        show-total
-        show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+        @size-change="changePageSize"
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
    </div>
  </div>
 </template>
--- a/buyer/src/pages/home/memberCenter/ComplainDetail.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainDetail.vue
@@ -9,7 +9,7 @@
      </p>
    </div>

-    <Alert class="l_title" show-icon type="warning">我的申诉信息</Alert>
+    <el-alert class="l_title" show-icon type="warning">我的申诉信息</el-alert>
    <table cellspacing="0" cellpadding='0' border="1">
      <tr>
        <td>投诉商品</td>
@@ -31,7 +31,7 @@
              <div class="demo-upload-list" v-for="(img, index) in detail.images.split(',')" :key="index">
                <img :src="img">
                <div class="demo-upload-list-cover">
-                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
+                  <el-icon @click="handleView(img)"><View /></el-icon>
                </div>
              </div>
            </template>
@@ -41,7 +41,7 @@
      </tr>
    </table>

-    <Alert class="l_title" show-icon type="warning">商家申诉信息</Alert>
+    <el-alert class="l_title" show-icon type="warning">商家申诉信息</el-alert>
    <table cellspacing="0" cellpadding='0' border="1">
      <tr>
        <td>申诉时间</td>
@@ -60,7 +60,7 @@
              <div class="demo-upload-list" v-for="(img, index) in detail.appealImages.split(',')" :key="index">
                <img :src="img">
                <div class="demo-upload-list-cover">
-                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
+                  <el-icon @click="handleView(img)"><View /></el-icon>
                </div>
              </div>
            </template>
@@ -70,7 +70,7 @@
      </tr>
    </table>

-    <Alert class="l_title" show-icon type="warning">平台仲裁</Alert>
+    <el-alert class="l_title" show-icon type="warning">平台仲裁</el-alert>
    <table cellspacing="0" cellpadding='0' border="1">
      <tr>
        <td>仲裁意见</td>
@@ -78,7 +78,7 @@
      </tr>
    </table>

-    <Alert class="l_title" show-icon type="warning">对话详情</Alert>
+    <el-alert class="l_title" show-icon type="warning">对话详情</el-alert>
    <div class="speak-way" v-if="detail.orderComplaintCommunications && detail.orderComplaintCommunications.length">
      <div
        class="speak-msg seller"
@@ -108,22 +108,24 @@
      <tr>
        <td></td>
        <td>
-          <Button type="primary"  :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
+          <el-button type="primary"  :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
            回复
-          </Button>
+          </el-button>
        </td>
      </tr>
    </table>

-    <Modal title="View Image" v-model="visible">
+    <el-dialog title="View Image" v-model="visible">
      <img :src="previewImage" v-if="visible" style="width: 100%">
-    </Modal>
+    </el-dialog>
  </div>
 </template>
 <script>
+import { View } from '@element-plus/icons-vue';
 import {getComplainDetail} from '@/api/member.js';
 import {communication} from '@/api/order';
 export default {
+  components: { View },
  data () {
    return {
      detail: {}, // 评价详情
--- a/buyer/src/pages/home/memberCenter/ComplainList.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainList.vue
@@ -4,12 +4,12 @@

    <div class="order">
      <div class="order-title">
-        <Row class="order-row title">
-          <i-col span="12">商品信息</i-col>
-          <i-col span="4">投诉状态</i-col>
-          <i-col span="4">投诉主题</i-col>
-          <i-col span="6"></i-col>
-        </Row>
+        <div class="order-row title">
+          <div span="12">商品信息</div>
+          <div span="4">投诉状态</div>
+          <div span="4">投诉主题</div>
+          <div span="6"></div>
+        </div>
      </div>
      <empty v-if="list.length === 0" />

@@ -21,40 +21,39 @@
            <span class="hover-pointer fontsize_12 eval-detail" @click="goDetail(item.id)">投诉详情</span>
            <span class="hover-pointer fontsize_12 eval-detail" style="right: 90px" v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'" @click="cancel(item.id)">取消投诉</span>
          </div>
-          <Row class="order-item-view">
-            <i-col span="12" class="item-view-name">
+          <div class="order-item-view">
+            <div span="12" class="item-view-name">
              <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                <img :src="item.goodsImage" alt="" />
              </div>
              <div class="order-name hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
                {{item.goodsName}}
              </div>
-            </i-col>
-            <i-col span="4">{{statusLabel[item.complainStatus]}}</i-col>
-            <i-col span="4">
+            </div>
+            <div span="4">{{statusLabel[item.complainStatus]}}</div>
+            <div span="4">
              <div class="content">{{item.complainTopic}}</div>
-            </i-col>
-            <i-col span="4">
-              <Tooltip >
+            </div>
+            <div span="4">
+              <el-tooltip>
                <div class="content">{{item.content}}</div>
-                <div style="white-space: normal;" slot="content">
+                <template #content>
+                  <div style="white-space: normal;">
                    {{item.content}}
                  </div>
-              </Tooltip>
-            </i-col>
-          </Row>
+                </template>
+              </el-tooltip>
            </div>
          </div>
-      <Spin v-if="loading"></Spin>
+        </div>
+      </div>
+      <el-skeleton v-if="loading"></el-skeleton>
    </div>
    <!-- 分页 -->
    <div class="page-size">
-      <Page :total="total" @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="params.pageSize"
-        show-total
-        show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+        @size-change="changePageSize"
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
    </div>
  </div>
 </template>
--- a/buyer/src/pages/home/memberCenter/Distribution.vue
+++ b/buyer/src/pages/home/memberCenter/Distribution.vue
@@ -4,39 +4,38 @@
    <!-- 分销申请 -->

    <div v-if="status === 0">
-      <Alert type="warning">分销商申请</Alert>
-      <Form ref="form" :model="applyForm" :rules="rules">
-        <FormItem label="姓名" prop="name">
-          <Input v-model="applyForm.name"></Input>
-        </FormItem>
-        <FormItem label="身份证号" prop="idNumber">
-          <Input v-model="applyForm.idNumber"></Input>
-        </FormItem>
-        <FormItem label="银行开户行" prop="settlementBankBranchName">
-          <Input v-model="applyForm.settlementBankBranchName"></Input>
-        </FormItem>
-        <FormItem label="银行开户名" prop="settlementBankAccountName">
-          <Input v-model="applyForm.settlementBankAccountName"></Input>
-        </FormItem>
-        <FormItem label="银行账号" prop="settlementBankAccountNum">
-          <Input v-model="applyForm.settlementBankAccountNum"></Input>
-        </FormItem>
+      <el-alert type="warning">分销商申请</el-alert>
+      <el-form ref="form" :model="applyForm" :rules="rules">
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="applyForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="身份证号" prop="idNumber">
+          <el-input v-model="applyForm.idNumber"></el-input>
+        </el-form-item>
+        <el-form-item label="银行开户行" prop="settlementBankBranchName">
+          <el-input v-model="applyForm.settlementBankBranchName"></el-input>
+        </el-form-item>
+        <el-form-item label="银行开户名" prop="settlementBankAccountName">
+          <el-input v-model="applyForm.settlementBankAccountName"></el-input>
+        </el-form-item>
+        <el-form-item label="银行账号" prop="settlementBankAccountNum">
+          <el-input v-model="applyForm.settlementBankAccountNum"></el-input>
+        </el-form-item>

-        <FormItem>
-          <Button type="primary" :loading="applyLoading" @click="apply"
-          >提交申请</Button
+        <el-form-item>
+          <el-button type="primary" :loading="applyLoading" @click="apply"
+          >提交申请</el-button
          >
-        </FormItem>
-      </Form>
+        </el-form-item>
+      </el-form>
    </div>
    <!-- 分销审核 -->
    <div v-if="status === 1">
-      <Alert type="success">
-        您提交的信息正在审核
-        <template slot="desc"
-        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
-        >
-      </Alert>
+      <el-alert
+        type="success"
+        title="您提交的信息正在审核"
+        description="提交认证申请后，工作人员将在三个工作日进行核对完成审核"
+      />
    </div>
    <!-- 分销提现、商品、订单 -->
    <div v-if="status === 2">
@@ -54,144 +53,114 @@
        <div class="mb_20 account-price">
          <span class="subTips">可提现金额：</span>
          <span class="fontsize_48 global_color"
-          >￥{{ result.canRebate | unitPrice }}</span
-          >
+          >￥{{ $filters.unitPrice(result.canRebate) }}</span>
          <span class="subTips">冻结金额：</span>
-          <span class="">￥{{ result.commissionFrozen | unitPrice }}</span>
+          <span class="">￥{{ $filters.unitPrice(result.commissionFrozen) }}</span>
          <span class="subTips">返利总金额：</span>
-          <span class="">￥{{ result.rebateTotal | unitPrice }}</span>
-          <Button
+          <span class="">￥{{ $filters.unitPrice(result.rebateTotal) }}</span>
+          <el-button
            type="primary"
            size="small"
            class="ml_20"
            @click="withdrawApplyModal = true"
-          >申请提现</Button
+          >申请提现</el-button
          >
        </div>
      </div>
-      <Tabs :value="tabName" @on-click="tabPaneChange">
-        <TabPane label="已选商品" name="goodsChecked">
-          <Table stripe :columns="goodsColumns" :data="goodsData.records">
-            <template slot-scope="{ row }" slot="name">
+      <el-tabs v-model="tabName" @tab-click="(tab) => tabPaneChange(tab.paneName)">
+        <el-tab-pane label="已选商品" name="goodsChecked">
+          <el-table stripe :data="goodsData.records || []">
+            <el-table-column label="商品名称" width="400">
+              <template #default="{ row }">
                <div
                  class="goods-msg"
-                @click="
-                  linkTo(
-                    `/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`
-                  )
-                "
+                  @click="linkTo(`/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`)"
                >
-                <img
-                  style="vertical-align: top"
-                  :src="row.thumbnail"
-                  width="60"
-                  height="60"
-                  alt=""
-                />&nbsp; {{ row.goodsName }}
+                  <img style="vertical-align: top" :src="row.thumbnail" width="60" height="60" alt="" />
+                  &nbsp; {{ row.goodsName }}
                </div>
              </template>
-            <template slot-scope="{ row }" slot="price">
-              <span> ￥{{ row.price | unitPrice }}</span>
+            </el-table-column>
+            <el-table-column label="商品价格">
+              <template #default="{ row }">
+                <span> ￥{{ $filters.unitPrice(row.price) }}</span>
              </template>
-            <template slot-scope="{ row }" slot="commission">
-              <span> ￥{{ row.commission | unitPrice }}</span>
+            </el-table-column>
+            <el-table-column label="佣金">
+              <template #default="{ row }">
+                <span> ￥{{ $filters.unitPrice(row.commission) }}</span>
              </template>
-            <template slot-scope="{ row }" slot="action">
-              <Button
-                type="success"
-                size="small"
-                style="margin-right: 5px"
-                @click="fenxiao(row)"
-              >分销商品</Button
-              >
-              <Button
-                type="error"
-                size="small"
-                @click="selectGoods(row.id, false)"
-              >取消选择</Button
-              >
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="{ row }">
+                <el-button type="success" size="small" style="margin-right: 5px" @click="fenxiao(row)">分销商品</el-button>
+                <el-button type="danger" size="small" @click="selectGoods(row.id, false)">取消选择</el-button>
              </template>
-          </Table>
+            </el-table-column>
+          </el-table>
          <div class="page-size">
-            <Page
-              :current="params.pageNumber"
+            <el-pagination               :current-page="params.pageNumber"
              :total="goodsData.total"
              :page-size="params.pageSize"
-              @on-change="changePage"
-              size="small"
-              show-total
-              show-elevator
-            ></Page>
+              @current-change="changePage"
+              small
+             layout="total, prev, pager, next, jumper"></el-pagination>
          </div>
-        </TabPane>
-        <TabPane label="未选商品" name="goodsUncheck">
-          <Table stripe :columns="goodsColumns" :data="goodsData.records">
-            <template slot-scope="{ row }" slot="name">
+        </el-tab-pane>
+        <el-tab-pane label="未选商品" name="goodsUncheck">
+          <el-table stripe :data="goodsData.records || []">
+            <el-table-column label="商品名称" width="400">
+              <template #default="{ row }">
                <div
                  class="goods-msg"
-                @click="
-                  linkTo(
-                    `/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`
-                  )
-                "
+                  @click="linkTo(`/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`)"
                >
-                <img
-                  style="vertical-align: top"
-                  :src="row.thumbnail"
-                  width="60"
-                  height="60"
-                  alt=""
-                />&nbsp; {{ row.goodsName }}
+                  <img style="vertical-align: top" :src="row.thumbnail" width="60" height="60" alt="" />
+                  &nbsp; {{ row.goodsName }}
                </div>
              </template>
-            <template slot-scope="{ row }" slot="price">
-              <span> ￥{{ row.price | unitPrice }}</span>
+            </el-table-column>
+            <el-table-column label="商品价格">
+              <template #default="{ row }">
+                <span> ￥{{ $filters.unitPrice(row.price) }}</span>
              </template>
-            <template slot-scope="{ row }" slot="commission">
-              <span> ￥{{ row.commission | unitPrice }}</span>
+            </el-table-column>
+            <el-table-column label="佣金">
+              <template #default="{ row }">
+                <span> ￥{{ $filters.unitPrice(row.commission) }}</span>
              </template>
-            <template slot-scope="{ row }" slot="action">
-              <Button
-                type="primary"
-                size="small"
-                style="margin-right: 5px"
-                @click="selectGoods(row.id, true)"
-              >选择商品</Button
-              >
+            </el-table-column>
+            <el-table-column label="操作" min-width="120">
+              <template #default="{ row }">
+                <el-button type="primary" size="small" style="margin-right: 5px" @click="selectGoods(row.id, true)">选择商品</el-button>
              </template>
-          </Table>
+            </el-table-column>
+          </el-table>
          <div class="page-size">
-            <Page
-              :current="params.pageNumber"
+            <el-pagination               :current-page="params.pageNumber"
              :total="goodsData.total"
              :page-size="params.pageSize"
-              @on-change="changePage"
-              size="small"
-              show-total
-              show-elevator
-            ></Page>
+              @current-change="changePage"
+              small
+             layout="total, prev, pager, next, jumper"></el-pagination>
          </div>
-        </TabPane>
-        <TabPane label="提现记录" name="log">
-          <Table stripe :columns="logColumns" :data="logData.records">
-            <template slot-scope="{ row }" slot="sn">
-              <span>{{ row.sn }}</span>
-            </template>
-            <template slot-scope="{ row }" slot="time">
-              <span>{{ row.createTime }}</span>
-            </template>
-            <template slot-scope="{ row }" slot="price">
-              <span
-                v-if="row.distributionCashStatus == 'VIA_AUDITING'"
-                style="color: green"
-              >
-                +￥{{ row.price | unitPrice }}</span
-              >
+        </el-tab-pane>
+        <el-tab-pane label="提现记录" name="log">
+          <el-table stripe :data="logData.records || []">
+            <el-table-column prop="sn" label="编号" />
+            <el-table-column prop="createTime" label="申请时间" />
+            <el-table-column label="提现金额">
+              <template #default="{ row }">
+                <span v-if="row.distributionCashStatus == 'VIA_AUDITING'" style="color: green">
+                  +￥{{ $filters.unitPrice(row.price) }}
+                </span>
                <span v-else style="color: red">
-                -￥{{ row.price | unitPrice }}</span
-              >
+                  -￥{{ $filters.unitPrice(row.price) }}
+                </span>
              </template>
-            <template slot-scope="{ row }" slot="status">
+            </el-table-column>
+            <el-table-column label="提现状态">
+              <template #default="{ row }">
                <span>
                  {{
                    row.distributionCashStatus == "APPLY"
@@ -199,66 +168,58 @@
                      : row.distributionCashStatus == "VIA_AUDITING"
                        ? "通过"
                        : "拒绝"
-                }}</span
-              >
+                  }}
+                </span>
              </template>
-          </Table>
+            </el-table-column>
+          </el-table>
          <div class="page-size">
-            <Page
-              :current="logParams.pageNumber"
+            <el-pagination               :current-page="logParams.pageNumber"
              :total="logData.total"
              :page-size="logParams.pageSize"
-              @on-change="changePageLog"
-              size="small"
-              show-total
-              show-elevator
-            ></Page>
+              @current-change="changePageLog"
+              small
+             layout="total, prev, pager, next, jumper"></el-pagination>
          </div>
-        </TabPane>
-      </Tabs>
+        </el-tab-pane>
+      </el-tabs>
    </div>
    <!-- 未开放 -->
    <div v-if="status === 3">
-      <Alert type="error">
-        分销功能暂未开启
-        <template slot="desc"
-        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
-        >
-      </Alert>
+      <el-alert type="danger" title="分销功能暂未开启" />
    </div>
    <!-- 分销资格被清退 -->
    <div v-if="status === 4">
-      <Alert type="error">
+      <el-alert type="danger">
        您的分销资格已被清退。请联系管理员或进行申诉

-        <Button style="margin-left: 50px;" type="warning" @click="repaying">申诉</Button>
-      </Alert>
+        <el-button style="margin-left: 50px;" type="warning" @click="repaying">申诉</el-button>
+      </el-alert>
    </div>
    <!-- 分销申诉审核 -->
    <div v-if="status === 5">
-      <Alert type="success">
-        您提交的申诉正在审核
-        <template slot="desc"
-        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
-        >
-      </Alert>
+      <el-alert
+        type="success"
+        title="您提交的申诉正在审核"
+        description="提交认证申请后，工作人员将在三个工作日进行核对完成审核"
+      />
    </div>
-    <Modal v-model="withdrawApplyModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
+    <el-dialog v-model="withdrawApplyModal" width="530">
+      <template #header><p>
+        <el-icon><Edit /></el-icon>
        <span>提现金额</span>
-      </p>
+      </p></template>
      <div>
-        <Input v-model="withdrawPrice" size="large" number maxlength="9"
-        ><span slot="append">元</span></Input
+        <el-input v-model="withdrawPrice" size="large" number maxlength="9"
+        ><template #append><span>元</span></template></el-input
        >
      </div>
-      <div slot="footer" style="text-align: center">
-        <Button type="primary" size="large" @click="withdraw">提现</Button>
-      </div>
-    </Modal>
-    <Modal v-model="qrcodeShow" title="分销商品" width="800">
-      <Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
+      <template #footer><div style="text-align: center">
+        <el-button type="primary" size="large" @click="withdraw">提现</el-button>
+      </div></template>
+    </el-dialog>
+    <el-dialog v-model="qrcodeShow" title="分销商品" width="800">
+      <el-alert type="warning"> 下载二维码或者复制链接分享商品 </el-alert>
      <div class="qrcode">
        <div style="width: 150px; height: 150px; border: 1px solid #eee">
          <vue-qr
@@ -270,8 +231,8 @@
            :size="150"
          ></vue-qr>
          <div class="qrcode-platform">PC端</div>
-          <Button class="download-btn" type="success" @click="downloadQrcode"
-          >下载二维码</Button
+          <el-button class="download-btn" type="success" @click="downloadQrcode"
+          >下载二维码</el-button
          >
        </div>
        <div style="width: 150px; height: 150px; border: 1px solid #eee">
@@ -284,20 +245,20 @@
            :size="150"
          ></vue-qr>
          <div class="qrcode-platform">移动应用端</div>
-          <Button class="download-btn" type="success" @click="downloadQrcodeH5"
-          >下载二维码</Button
+          <el-button class="download-btn" type="success" @click="downloadQrcodeH5"
+          >下载二维码</el-button
          >
        </div>
      </div>

      <div class="mt_10" style="margin-top: 100px;">
-        商品链接：<Input style="width: 600px" v-model="qrcode"></Input>
-      </div>
-    </Modal>
+        商品链接：<el-input style="width: 600px" v-model="qrcode"></el-input>
+      </div></el-dialog>
  </div>
 </template>

 <script>
+import { Edit } from '@element-plus/icons-vue';
 import {
  distribution,
  applyDistribution,
@@ -311,7 +272,7 @@ import { checkBankno } from "@/plugins/Foundation";
 import vueQr from "vue-qr";
 export default {
  name: "Distribution",
-  components: { vueQr },
+  components: { vueQr, Edit },
  data() {
    return {
      config:require('@/config'),
@@ -358,20 +319,6 @@ export default {
      withdrawPrice: 0, // 提现金额
      goodsData: {}, // 商品数据
      logData: {}, // 日志数据
-      goodsColumns: [
-        // 商品表头
-        { title: "商品名称", slot: "name", width: 400 },
-        { title: "商品价格", slot: "price" },
-        { title: "佣金", slot: "commission" },
-        { title: "操作", slot: "action", minWidth: 120 },
-      ],
-      logColumns: [
-        // 日志表头
-        { title: "编号", slot: "sn" },
-        { title: "申请时间", slot: "time" },
-        { title: "提现金额", slot: "price" },
-        { title: "提现状态", slot: "status" },
-      ],
      params: {
        // 商品请求参数
        pageNumber: 1,
@@ -584,7 +531,7 @@ export default {
  margin-left: 25px;
  margin-top: 5px
 }
-::v-deep .ivu-alert-message {
+:deep(.el-alert__content) {
  p {
    margin: 4px 0;
  }
--- a/buyer/src/pages/home/memberCenter/Favorites.vue
+++ b/buyer/src/pages/home/memberCenter/Favorites.vue
@@ -17,22 +17,22 @@
          </div>
          <div v-else class="goodsTitle  hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
            {{ item.storeName }}
-            <Tag color="error" class="operated" v-if="item.selfOperated">商家自营</Tag>
+            <el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
          </div>
          <div class="goodsPrice">
-            <span v-if="params.type === 'GOODS'">{{ item.price | unitPrice('￥') }}</span>
+            <span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>

          </div>
          <div class="goodsBuy">
-            <Button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
-              v-if="params.type === 'GOODS'">立即购买</Button>
-            <Button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</Button>
-            <Button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</Button>
-            <Button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</Button>
+            <el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
+              v-if="params.type === 'GOODS'">立即购买</el-button>
+            <el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
+            <el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
+            <el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
          </div>
        </div>
      </div>
-      <Spin size="large" fix v-if="spinShow"></Spin>
+      <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
    </div>
    <empty v-else />
  </div>
--- a/buyer/src/pages/home/memberCenter/MemberGrade.vue
+++ b/buyer/src/pages/home/memberCenter/MemberGrade.vue
@@ -9,7 +9,7 @@
            <div class="gradeNameRow">
              <span class="gradeNameText">{{ currentGrade.gradeName || '暂无等级' }}</span>
              <span v-if="currentGradeBenefits.length" class="benefitTagsInline">
-                <Tag v-for="b in currentGradeBenefits" :key="b.id" class="benefitTag" color="blue">{{ b.benefitName || '-' }}</Tag>
+                <el-tag v-for="b in currentGradeBenefits" :key="b.id" class="benefitTag" color="blue">{{ b.benefitName || '-' }}</el-tag>
              </span>
            </div>
            <div class="gradeExp">
@@ -24,17 +24,18 @@
      </div>
    </div>

-    <Tabs value="rules">
-      <TabPane label="获取经验值方式" name="rules">
-        <Table :columns="ruleColumns" :data="ruleList" :loading="rulesLoading">
-          <template slot-scope="{ row }" slot="ruleItem">
+    <el-tabs value="rules">
+      <el-tab-pane label="获取经验值方式" name="rules">
+        <el-table v-loading="rulesLoading" :data="ruleList">
+          <el-table-column label="获取方式" min-width="720">
+            <template #default="{ row }">
              <div class="ruleItem">
                <div class="ruleTop">
                  <div class="ruleName">
                    <span>{{ row.ruleName || row.ruleKey || '-' }}</span>
                  </div>
-                <Tag v-if="row.completed === true" color="success">已完成</Tag>
-                <Tag v-else color="default">未完成</Tag>
+                  <el-tag v-if="row.completed === true" color="success">已完成</el-tag>
+                  <el-tag v-else color="default">未完成</el-tag>
                </div>
                <div class="ruleDesc">{{ getRuleDesc(row.ruleKey) }}</div>
                <div class="ruleMeta">
@@ -44,34 +45,37 @@
                </div>
              </div>
            </template>
-        </Table>
+          </el-table-column>
+        </el-table>
        <div class="rulesDesc" v-if="rulesDescription">{{ rulesDescription }}</div>
-      </TabPane>
-      <TabPane label="经验值记录" name="logs">
-        <Table :columns="logColumns" :data="experienceLogs.records || []" :loading="logLoading">
-          <template slot-scope="{ row }" slot="rule">
+      </el-tab-pane>
+      <el-tab-pane label="经验值记录" name="logs">
+        <el-table v-loading="logLoading" :data="experienceLogs.records || []">
+          <el-table-column prop="createTime" label="时间" align="center" min-width="160" />
+          <el-table-column label="规则" align="center" min-width="160">
+            <template #default="{ row }">
              <span>{{ getRuleName(row.ruleKey) }}</span>
            </template>
-          <template slot-scope="{ row }" slot="delta">
+          </el-table-column>
+          <el-table-column label="变动值" align="center" min-width="120">
+            <template #default="{ row }">
              <div :style="{ color: getLogDeltaColor(row) }">
                <span v-if="getLogDeltaSign(row) === '+'">+</span>{{ getLogDeltaAbsValue(row) }}
              </div>
            </template>
-        </Table>
-        <Page
-          style="float:right;margin-top:10px"
-          :current="params.pageNumber"
+          </el-table-column>
+        </el-table>
+        <el-pagination           style="float:right;margin-top:10px"
+          :current-page="params.pageNumber"
          :total="experienceLogs.total || 0"
          :page-size="params.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10, 20, 50]"
-          size="small"
-          show-total
-          show-elevator
-        ></Page>
-      </TabPane>
-    </Tabs>
+          @current-change="changePage"
+          @size-change="changePageSize"
+          :page-sizes="[10, 20, 50]"
+          small
+         layout="total, prev, pager, next, jumper"></el-pagination>
+      </el-tab-pane>
+    </el-tabs>

  </div>

@@ -100,34 +104,7 @@ export default {
        pageNumber: 1,
        pageSize: 10
      },
-      experienceLogs: {},
-      ruleColumns: [
-        {
-          title: '获取方式',
-          slot: 'ruleItem',
-          minWidth: 720
-        }
-      ],
-      logColumns: [
-        {
-          title: '时间',
-          key: 'createTime',
-          align: 'center',
-          minWidth: 160
-        },
-        {
-          title: '规则',
-          slot: 'rule',
-          align: 'center',
-          minWidth: 160
-        },
-        {
-          title: '变动值',
-          slot: 'delta',
-          align: 'center',
-          minWidth: 120
-        }
-      ]
+      experienceLogs: {}
    }
  },
  computed: {
--- a/buyer/src/pages/home/memberCenter/ModifyPwd.vue
+++ b/buyer/src/pages/home/memberCenter/ModifyPwd.vue
@@ -2,77 +2,78 @@
  <div class="wrapper">
    <card _Title="账户安全"/>
    <!--  手机号验证  -->
-    <Form ref="formData" :model="formData" label-position="left" :label-width="100" :rules="ruleInLines"
+    <el-form ref="formData" :model="formData" label-position="left" label-width="100px" :rules="ruleInLines"
          v-if="(status == 2 || status == 3) && !showPwd">
-      <FormItem label="手机号">
+      <el-form-item label="手机号">
        <div class="phone">1234567890</div>
-      </FormItem>
-      <FormItem label="图片验证码" prop="picture" style="width: 350px">
-        <i-input v-model="formData.picture" size="large" maxlength="4"></i-input>
-      </FormItem>
-      <FormItem label="短信验证码" prop="msg">
-        <i-input v-model="formData.msg" size="large" maxlength="6" style="width: 250px">
-          <span slot="append">输入验证码</span>
-        </i-input>
-      </FormItem>
-    </Form>
-    <div slot="footer" v-if="(status == 2 || status == 3) && !showPwd" style="text-align: center;width: 50%">
-      <Button type="primary" class="ml_10" @click="submitRegister">下一步</Button>
+      </el-form-item>
+      <el-form-item label="图片验证码" prop="picture" style="width: 350px">
+        <el-input v-model="formData.picture" size="large" maxlength="4"></el-input>
+      </el-form-item>
+      <el-form-item label="短信验证码" prop="msg">
+        <el-input v-model="formData.msg" size="large" maxlength="6" style="width: 250px">
+          <template #append><span>输入验证码</span></template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <div v-if="(status == 2 || status == 3) && !showPwd" style="text-align: center;width: 50%">
+      <el-button type="primary" class="ml_10" @click="submitRegister">下一步</el-button>
    </div>

    <!--  修改  -->
-    <Form ref="formRegister" :model="formRegister" :rules="ruleInline" :label-width="80" v-if="status == 1 && !showPwd">
-      <FormItem label="旧密码" prop="password">
-        <i-input type="password" v-model="formRegister.password" clearable size="large" placeholder="请输入旧密码"
+    <el-form ref="formRegister" :model="formRegister" :rules="ruleInline" label-width="80px" v-if="status == 1 && !showPwd">
+      <el-form-item label="旧密码" prop="password">
+        <el-input type="password" v-model="formRegister.password" clearable size="large" placeholder="请输入旧密码"
                 style="width: 300px"
                 maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
-      <FormItem label="新密码" prop="newPassword">
-        <i-input type="password" v-model="formRegister.newPassword" clearable size="large" placeholder="请输入新密码"
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input type="password" v-model="formRegister.newPassword" clearable size="large" placeholder="请输入新密码"
                 style="width: 300px"
                 maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
-      <FormItem label="确认密码" prop="againPassword">
-        <i-input type="password" v-model="formRegister.againPassword" clearable size="large" placeholder="请输入确认密码"
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="againPassword">
+        <el-input type="password" v-model="formRegister.againPassword" clearable size="large" placeholder="请输入确认密码"
                 style="width: 300px"
                 maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>

-    </Form>
-    <div slot="footer" v-if="status == 1 && !showPwd" style="width: 50%;text-align: center">
-      <Button type="primary" class="ml_10" @click="handleRegist">修改</Button>
+    </el-form>
+    <div v-if="status == 1 && !showPwd" style="width: 50%;text-align: center">
+      <el-button type="primary" class="ml_10" @click="handleRegist">修改</el-button>
    </div>
    <!-- 设置&修改的第二种情况   -->
-    <Form ref="formDataUpdate" :model="formDataUpdate" label-position="left" :label-width="100" :rules="ruleIn"
+    <el-form ref="formDataUpdate" :model="formDataUpdate" label-position="left" label-width="100px" :rules="ruleIn"
          v-if="showPwd">
-      <FormItem label="新密码" prop="newPassword">
-        <i-input type="password" v-model="formDataUpdate.newPassword" clearable size="large" placeholder="请输入新密码"
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input type="password" v-model="formDataUpdate.newPassword" clearable size="large" placeholder="请输入新密码"
                 style="width: 300px"
                 maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
-      <FormItem label="确认密码" prop="againPassword">
-        <i-input type="password" v-model="formDataUpdate.againPassword" clearable size="large" placeholder="请输入确认密码"
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="againPassword">
+        <el-input type="password" v-model="formDataUpdate.againPassword" clearable size="large" placeholder="请输入确认密码"
                 style="width: 300px"
                 maxlength="12">
-          <Icon type="md-lock" slot="prepend"></Icon>
-        </i-input>
-      </FormItem>
-    </Form>
-    <div slot="footer" v-if="showPwd" style="text-align: center;width: 50%">
-      <Button type="primary" class="ml_10" @click="setPassword">设置</Button>
+          <template #prepend><el-icon><Lock /></el-icon></template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <div v-if="showPwd" style="text-align: center;width: 50%">
+      <el-button type="primary" class="ml_10" @click="setPassword">设置</el-button>
    </div>
  </div>
 </template>

 <script>
+import { Lock } from '@element-plus/icons-vue';
 import {
  setPwd,
  editPwd
@@ -80,6 +81,7 @@ import {
 import {md5} from '@/plugins/md5.js'

 export default {
+  components: { Lock },
  name: 'modifyPwd',
  data () {
    return {
--- a/buyer/src/pages/home/memberCenter/Point.vue
+++ b/buyer/src/pages/home/memberCenter/Point.vue
@@ -6,26 +6,27 @@
      <span>累计获得：<span>{{ pointObj.totalPoint || 0 }}</span></span>
    </div>
    <h3>积分日志</h3>
-    <Table :columns="logColumns" :data="logData.records">
-      <template slot-scope="{ row }" slot="point">
+    <el-table :data="logData.records || []">
+      <el-table-column prop="content" label="日志内容" align="center" />
+      <el-table-column prop="createTime" label="时间" align="center" />
+      <el-table-column label="积分明细" align="center">
+        <template #default="{ row }">
          <div :style="{ color: row.pointType === 'INCREASE' ? 'green' : 'red' }">
            <span v-if="row.pointType === 'INCREASE'">+</span>{{ row.variablePoint }}
          </div>
        </template>
-    </Table>
+      </el-table-column>
+    </el-table>
    <!-- 分页 -->
-    <Page
-      style="float:right;margin-top:10px"
-      :current="params.pageNumber"
+    <el-pagination       style="float:right;margin-top:10px"
+      :current-page="params.pageNumber"
      :total="logData.total"
      :page-size="params.pageSize"
-      @on-change="changePage"
-      @on-page-size-change="changePageSize"
-      :page-size-opts="[10, 20, 50]"
-      size="small"
-      show-total
-      show-elevator
-    ></Page>
+      @current-change="changePage"
+      @size-change="changePageSize"
+      :page-sizes="[10, 20, 50]"
+      small
+     layout="total, prev, pager, next, jumper"></el-pagination>
  </div>
 </template>
 <script>
@@ -42,23 +43,6 @@ export default {
        pageNumber: 1,
        pageSize: 10
      },
-      logColumns: [ // table展示数据
-        {
-          title: '日志内容',
-          key: 'content',
-          align: 'center'
-        },
-        {
-          title: '时间',
-          key: 'createTime',
-          align: 'center'
-        },
-        {
-          title: '积分明细',
-          slot: 'point',
-          align: 'center'
-        }
-      ]
    }
  },
  mounted () {
--- a/buyer/src/pages/home/memberCenter/Profile.vue
+++ b/buyer/src/pages/home/memberCenter/Profile.vue
@@ -1,38 +1,38 @@
 <template>
  <div class="wrapper">
    <card _Title="用户信息" />
-    <Form :model="formItem" :rules="rules" ref="form" :label-width="80">
-      <FormItem label="头像">
-        <Avatar v-if="formItem.face" :src="formItem.face" size="80"/>
-        <Avatar v-else icon="ios-person" size="80"/>
-        <Upload
+    <el-form :model="formItem" :rules="rules" ref="form" label-width="80px">
+      <el-form-item label="头像">
+        <el-avatar v-if="formItem.face" :src="formItem.face" :size="80" />
+        <el-avatar v-else :size="80"><el-icon><User /></el-icon></el-avatar>
+        <el-upload
          :show-upload-list="false"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png']"
          :action="action"
          :headers="accessToken"
          >
-          <Button class="mt_10">上传头像</Button>
-        </Upload>
-      </FormItem>
-      <FormItem label="昵称" prop="nickName">
-        <Input class="wrapper-user-name" style="width:187px" v-model="formItem.nickName" placeholder="" />
-      </FormItem>
+          <el-button class="mt_10">上传头像</el-button>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickName">
+        <el-input class="wrapper-user-name" style="width:187px" v-model="formItem.nickName" placeholder="" />
+      </el-form-item>

-      <FormItem label="生日">
-        <DatePicker type="date" placeholder="选择您的生日" v-model="formItem.birthday"></DatePicker>
-      </FormItem>
-      <FormItem label="性别">
-        <RadioGroup v-model="formItem.sex" type="button" button-style="solid">
-          <Radio :label="1">男</Radio>
-          <Radio :label="0">女</Radio>
-        </RadioGroup>
-      </FormItem>
-      <FormItem>
-        <Button type="primary" @click="save">确认修改</Button>
+      <el-form-item label="生日">
+        <el-date-picker type="date" placeholder="选择您的生日" v-model="formItem.birthday"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-radio-group v-model="formItem.sex" type="button" button-style="solid">
+          <el-radio :label="1">男</el-radio>
+          <el-radio :label="0">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">确认修改</el-button>

-      </FormItem>
-    </Form>
+      </el-form-item>
+    </el-form>
  </div>
 </template>

@@ -40,7 +40,9 @@
 import { editMemberInfo } from '@/api/account.js';
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage.js';
+import { User } from '@element-plus/icons-vue';
 export default {
+  components: { User },
  name: 'Profile',
  data () {
    return {
@@ -103,7 +105,7 @@ export default {
      })
    },
    handleSuccess (res, file) { // 上传成功
-      this.$set(this.formItem, 'face', res.result)
+      this.formItem['face'] = res.result
    },
  }

--- a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
@@ -11,9 +11,9 @@
    <div class="delivery-rate">
      <div class="fontsize_16">物流服务评价：</div>
      <div class="color999">
-        <span>物流评价：<Rate v-model="form.deliveryScore" /></span>
-        <span>服务评价：<Rate v-model="form.serviceScore" /></span>
-        <span>描述评价：<Rate v-model="form.descriptionScore" /></span>
+        <span>物流评价：<el-rate v-model="form.deliveryScore" /></span>
+        <span>服务评价：<el-rate v-model="form.serviceScore" /></span>
+        <span>描述评价：<el-rate v-model="form.descriptionScore" /></span>
      </div>
    </div>
    <!-- 添加订单评价  左侧商品详情  右侧评价框 -->
@@ -22,28 +22,28 @@
        <div class="goods-con">
          <img :src="orderGoods.image" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
          <p class="hover-pointer color999" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">{{orderGoods.goodsName}}</p>
-          <p>{{orderGoods.goodsPrice | unitPrice('￥')}}</p>
+          <p>{{ $filters.unitPrice(orderGoods.goodsPrice, '￥') }}</p>
        </div>

        <div class="eval-con">
          <div>
            <span class="color999">商品评价：</span>
-            <RadioGroup style="margin-bottom:5px;color:#999" v-model="orderGoods.grade" type="button" button-style="solid">
-              <Radio label="GOOD">好评</Radio>
-              <Radio label="MODERATE">中评</Radio>
-              <Radio label="WORSE">差评</Radio>
-            </RadioGroup>
-            <Input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
+            <el-radio-group style="margin-bottom:5px;color:#999" v-model="orderGoods.grade" type="button" button-style="solid">
+              <el-radio label="GOOD">好评</el-radio>
+              <el-radio label="MODERATE">中评</el-radio>
+              <el-radio label="WORSE">差评</el-radio>
+            </el-radio-group>
+            <el-input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
          </div>
          <div style="display:flex;align-items:center;">
            <div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
              <img :src="img">
              <div class="demo-upload-list-cover">
-                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
-                  <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
+                  <el-icon @click="handleView(img)"><View /></el-icon>
+                  <el-icon @click="handleRemove(index)"><Delete /></el-icon>
              </div>
            </div>
-            <Upload
+            <el-upload
                :show-upload-list="false"
                :on-success="handleSuccess"
                :before-upload="handleBeforeUpload"
@@ -52,25 +52,27 @@
                :headers="accessToken"
                style="display: inline-block;width:58px;">
                <div class="hover-pointer icon-upload" style="">
-                  <Icon type="ios-camera" size="20"></Icon>
+                  <el-icon :size="20"><Camera /></el-icon>
                </div>
-            </Upload>
+            </el-upload>
          </div>
        </div>
      </li>
    </ul>
-    <Button type="primary" class="mt_10" :loading="loading" @click="save">发表</Button>
-    <Modal title="View Image" v-model="visible">
+    <el-button type="primary" class="mt_10" :loading="loading" @click="save">发表</el-button>
+    <el-dialog title="View Image" v-model="visible">
        <img :src="previewImage" v-if="visible" style="width: 100%">
-    </Modal>
+    </el-dialog>
  </div>
 </template>
 <script>
+import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { orderDetail } from '@/api/order.js';
 import { addEvaluation } from '@/api/member.js';
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
 export default {
+  components: { Camera, Delete, View },
  data () {
    return {
      order: {}, // 订单详情
@@ -92,7 +94,7 @@ export default {
      orderDetail(this.$route.query.sn).then(res => {
        this.order = res.result
        this.orderGoods = res.result.orderItems[this.$route.query.index]
-        this.$set(this.orderGoods, 'grade', 'GOOD')
+        this.orderGoods['grade'] = 'GOOD'
        this.orderGoods.uploadList = []
      })
    },
--- a/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
@@ -3,8 +3,7 @@
    <div class="title">
      <card _Title="评价详情" :_Size="16"></card>
      <p>
-        <span class="color999">创建人：</span
-        ><span>{{ orderGoods.createBy | secrecyMobile }}</span>
+        <span class="color999">创建人：</span><span>{{ $filters.secrecyMobile( orderGoods.createBy ) }}</span>
        <span class="color999 ml_20">{{ orderGoods.createTime }}</span>
      </p>
    </div>
@@ -12,10 +11,10 @@
    <div class="delivery-rate">
      <div class="fontsize_16">物流服务评价：</div>
      <div class="color999">
-        <span>物流评价：<Rate disabled :value="Number(orderGoods.deliveryScore)" /></span>
-        <span>服务评价：<Rate disabled :value="Number(orderGoods.serviceScore)" /></span>
+        <span>物流评价：<el-rate disabled :value="Number(orderGoods.deliveryScore)" /></span>
+        <span>服务评价：<el-rate disabled :value="Number(orderGoods.serviceScore)" /></span>
        <span
-          >服务评价：<Rate disabled :value="Number(orderGoods.descriptionScore)"
+          >服务评价：<el-rate disabled :value="Number(orderGoods.descriptionScore)"
        /></span>
      </div>
    </div>
@@ -41,17 +40,17 @@
        <div class="eval-con">
          <div>
            <span class="color999">商品评价：</span>
-            <RadioGroup
+            <el-radio-group
              style="margin-bottom: 5px; color: #999"
              v-model="orderGoods.grade"
              type="button"
              button-style="solid"
            >
-              <Radio label="GOOD" disabled>好评</Radio>
-              <Radio label="MODERATE" disabled>中评</Radio>
-              <Radio label="WORSE" disabled>差评</Radio>
-            </RadioGroup>
-            <Input
+              <el-radio label="GOOD" disabled>好评</el-radio>
+              <el-radio label="MODERATE" disabled>中评</el-radio>
+              <el-radio label="WORSE" disabled>差评</el-radio>
+            </el-radio-group>
+            <el-input
              type="textarea"
              maxlength="500"
              readonly
@@ -64,7 +63,7 @@
            <template v-if="orderGoods.images">
              <div class="demo-upload-list" v-for="(img, index) in orderGoods.images.split(',')" :key="index">
                <img :src="img" />
-                <div class="demo-upload-list-cover"><Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon></div>
+                <div class="demo-upload-list-cover"><el-icon @click="handleView(img)"><View /></el-icon></div>
              </div>
            </template>
          </div>
@@ -75,7 +74,7 @@
              <template v-if="orderGoods.replyImage">
                <div class="demo-upload-list" v-for="(img, index) in orderGoods.replyImage.split(',')" :key="index">
                  <img :src="img" />
-                  <div class="demo-upload-list-cover"><Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon></div>
+                  <div class="demo-upload-list-cover"><el-icon @click="handleView(img)"><View /></el-icon></div>
                </div>
              </template>
            </div>
@@ -84,14 +83,16 @@
        </div>
      </li>
    </ul>
-    <Modal title="View Image" v-model="visible">
+    <el-dialog title="View Image" v-model="visible">
      <img :src="previewImage" v-if="visible" style="width: 100%" />
-    </Modal>
+    </el-dialog>
  </div>
 </template>
 <script>
+import { View } from '@element-plus/icons-vue';
 import { evaluationDetail } from "@/api/member.js";
 export default {
+  components: { View },
  data() {
    return {
      order: {}, // 订单详情
--- a/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
+++ b/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
@@ -2,21 +2,39 @@
  <div class="msg-list">
    <card _Title="我的消息" :_Tabs="status" :_Size="16"  @_Change="statusChange"/>

-    <Table v-if="params.status != 'ALREADY_REMOVE' " :columns="messageColumns" :data="messageData.records"></Table>
-    <Table v-if="params.status == 'ALREADY_REMOVE' " :columns="messageDelColumns" :data="messageData.records"></Table>
-    <!-- 分页 -->
-    <Page
+    <el-table v-if="params.status != 'ALREADY_REMOVE'" :data="messageData.records || []">
+      <el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
+      <el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
+      <el-table-column prop="createTime" label="发送时间" align="left" width="240" />
+      <el-table-column label="操作" align="center" fixed="right" width="150">
+        <template #default="{ row }">
+          <el-button
+            v-if="row.status === 'UN_READY'"
+            type="primary"
+            size="small"
+            style="margin-right: 5px"
+            @click="setRead(row.id)"
+          >已读</el-button>
+          <el-button type="danger" size="small" @click="removeMessage(row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-table v-else :data="messageData.records || []">
+      <el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
+      <el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
+      <el-table-column prop="createTime" label="发送时间" align="left" width="240" />
+    </el-table>
+    <el-pagination
      style="float:right;margin-top:10px"
-      :current="params.pageNumber"
+      :current-page="params.pageNumber"
      :total="messageData.total"
      :page-size="params.pageSize"
-      @on-change="changePage"
-      @on-page-size-change="changePageSize"
-      :page-size-opts="[10, 20, 50]"
-      size="small"
-      show-total
-      show-elevator
-    ></Page>
+      @current-change="changePage"
+      @size-change="changePageSize"
+      :page-sizes="[10, 20, 50]"
+      small
+      layout="total, prev, pager, next, jumper"
+    />
  </div>
 </template>
 <script>
@@ -24,146 +42,37 @@ import {memberMsgList, readMemberMsg, delMemberMsg} from '@/api/member.js'
 export default {
  data() {
    return {
-      messageData: {}, // 消息数据
+      messageData: {},
      status: ['未读', '已读', '回收站'],
-      params: { // 请求参数
+      params: {
        pageNumber: 1,
        pageSize: 10,
        status: 'UN_READY'
      },
-      messageDelColumns: [ // table展示数据
-        {
-          title: '消息标题',
-          key: 'title',
-          align: 'left',
-          tooltip: true,
-        },
-        {
-          title: '消息内容',
-          key: 'content',
-          align: 'left',
-          tooltip: true
-        },
-        {
-          title: '发送时间',
-          key: 'createTime',
-          align: 'left',
-          width: 240
-        },
-      ],
-      messageColumns: [ // table展示数据
-        {
-          title: '消息标题',
-          key: 'title',
-          align: 'left',
-          tooltip: true,
-        },
-        {
-          title: '消息内容',
-          key: 'content',
-          align: 'left',
-          tooltip: true
-        },
-        {
-          title: '发送时间',
-          key: 'createTime',
-          align: 'left',
-          width: 240
-        },
-        {
-          title: '操作',
-          key: 'action',
-          align: 'center',
-          fixed: 'right',
-          width: 150,
-          render: (h, params) => {
-            if (params.row.status === 'UN_READY') {
-              return h('div', [
-                h(
-                  'Button',
-                  {
-                    props: {
-                      type: 'info',
-                      size: 'small'
-                    },
-                    style: {
-                      marginRight: '5px'
-                    },
-                    on: {
-                      click: () => {
-                        this.setRead(params.row.id);
-                      }
-                    }
-                  },
-                  '已读'
-                ), h(
-                  'Button',
-                  {
-                    props: {
-                      size: 'small',
-                      type: 'error'
-                    },
-                    on: {
-                      click: () => {
-                        this.removeMessage(params.row.id);
-                      }
-                    }
-                  },
-                  '删除'
-                )
-              ]);
-            } else if (params.row.status === 'ALREADY_READY') {
-              return h('div', [
-                h(
-                  'Button',
-                  {
-                    props: {
-                      size: 'small',
-                      type: 'error'
-                    },
-                    on: {
-                      click: () => {
-                        this.removeMessage(params.row.id);
-                      }
-                    }
-                  },
-                  '删除'
-                )
-              ]);
-            } else {
-
-            }
-          }
-        }
-      ]
    }
  },
  methods: {
-    // 消息状态发生变化
    statusChange (index) {
      if (index === 0) { this.params.status = 'UN_READY' }
      if (index === 1) { this.params.status = 'ALREADY_READY' }
      if (index === 2) { this.params.status = 'ALREADY_REMOVE' }
      this.getList()
    },
-    // 修改页码
    changePage (v) {
      this.params.pageNumber = v;
      this.getList();
    },
-    // 修改页数
    changePageSize (v) {
      this.params.pageSize = v;
      this.getList();
    },
-    getList () { // 获取消息列表
+    getList () {
      memberMsgList(this.params).then(res => {
        if (res.success) {
          this.messageData = res.result;
        }
      })
    },
-    // 设置消息已读
    setRead (id) {
      readMemberMsg(id).then(res => {
        if (res.success) {
@@ -171,15 +80,12 @@ export default {
        }
      })
    },
-    // 消息放入回收站
    removeMessage (id) {
      this.$Modal.confirm({
        title: '确认删除',
-        // 记得确认修改此处
        content: '确认要删除此消息?',
        loading: true,
        onOk: () => {
-          // 删除
          delMemberMsg(id).then((res) => {
            this.$Modal.remove();
            if (res.success) {
--- a/buyer/src/pages/home/orderCenter/AddAddress.vue
+++ b/buyer/src/pages/home/orderCenter/AddAddress.vue
@@ -2,33 +2,33 @@
  <div>
    <card _Title="收货地址" />
    <div class="add-box">
-      <Form :model="formData" ref="form" label-position="left" :label-width="100" :rules="ruleInline">
-        <FormItem label="收件人" prop="name">
-          <i-input v-model="formData.name" placeholder="请输入收件人姓名" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="收件地区" prop="address">
+      <el-form :model="formData" ref="form" label-position="left" label-width="100px" :rules="ruleInline">
+        <el-form-item label="收件人" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入收件人姓名" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="收件地区" prop="address">
          <span>{{ formData.address || '暂无地址' }}</span>

-          <Button type="default" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</Button>
-        </FormItem>
-        <FormItem label="详细地址" prop="detail">
-          <i-input v-model="formData.detail" placeholder="请输入详细地址" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="手机号码" prop="mobile">
-          <i-input v-model="formData.mobile" placeholder="请输入收件人手机号" style="width: 600px"></i-input>
-        </FormItem>
-        <FormItem label="地址别名">
-          <i-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>
+          <el-button type="default" 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" placeholder="请输入详细地址" style="width: 600px"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号码" prop="mobile">
+          <el-input v-model="formData.mobile" placeholder="请输入收件人手机号" 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">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="默认地址">
+          <el-switch v-model="formData.isDefault" />
+        </el-form-item>
+      </el-form>
    </div>
    <div class="mt_20">
-      <Button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</Button>
-      <Button @click="$router.back()">返回</Button>
+      <el-button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</el-button>
+      <el-button @click="$router.back()">返回</el-button>
    </div>

    <multipleMap  ref="map" @callback="getAddress" />
@@ -124,15 +124,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;
      }
--- a/buyer/src/pages/home/orderCenter/AfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSale.vue
@@ -5,12 +5,12 @@
    <!-- 搜索 筛选 -->
    <div class="mb_20 box">
      <div class="global_float_right">
-        <Input
+        <el-input
          class="width_300"
-          search
-          enter-button
+          
+          
          v-model="params.keywords"
-          @on-search="getList"
+          @keyup.enter="getList"
          placeholder="请输入订单号搜索"
        />
      </div>
@@ -18,18 +18,18 @@
    <!-- 列表 -->
    <empty v-if="orderList.length === 0"/>
    <div class="order-content" v-else>
-      <template v-for="(order, onderIndex) in orderList">
-        <div class="order-list" :key="onderIndex">
+      <template v-for="(order, onderIndex) in orderList" :key="order.sn || onderIndex">
+        <div class="order-list">
          <div class="order-header">
            <div>
              <div v-if="order.serviceStatus">{{ filterOrderStatus(order.serviceStatus) }}</div>
              <div>
                售后单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{ order.createTime }}
-                &nbsp; &nbsp;{{ order.memberName | secrecyMobile }}
+                &nbsp; &nbsp;{{ $filters.secrecyMobile( order.memberName ) }}
              </div>
            </div>
            <div>
-              <span>申请退款金额：<span class="global_color">{{ order.applyRefundPrice | unitPrice("￥") }}</span></span>
+              <span>申请退款金额：<span class="global_color">{{ $filters.unitPrice(order.applyRefundPrice, "￥") }}</span></span>
            </div>
          </div>
          <div class="order-body">
@@ -47,33 +47,31 @@
            </div>
            <div>
              <!-- 订单基础操作 -->
-              <Button @click="goDetail(order.sn)" type="info" size="small">售后详情</Button>
-              <Button @click="openModal(order)"
+              <el-button @click="goDetail(order.sn)" type="info" size="small">售后详情</el-button>
+              <el-button @click="openModal(order)"
                      v-if="order.serviceStatus == 'PASS' &&
                order.serviceType != 'RETURN_MONEY'"
                      type="warning" size="small">提交物流
-              </Button>
-              <Button @click="cancel(order.sn)" type="error" v-if="order.afterSaleAllowOperationVO.cancel" size="small">
+              </el-button>
+              <el-button @click="cancel(order.sn)" type="danger" v-if="order.afterSaleAllowOperationVO.cancel" size="small">
                取消售后
-              </Button>
+              </el-button>
            </div>
          </div>
        </div>
      </template>
-      <Spin size="large" fix v-if="spinShow"></Spin>
+      <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
    </div>
    <!-- 分页 -->
    <div class="page-size">
-      <Page :total="total" @on-change="changePageNum"
-            @on-page-size-change="changePageSize"
-            :page-size="params.pageSize"
-            show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+            @size-change="changePageSize"
+            :page-size="params.pageSize" layout="sizes, prev, pager, next"></el-pagination>
    </div>
-    <Modal v-model="logisticsShow" width="530">
-      <p slot="header">
+    <el-dialog v-model="logisticsShow" width="530">
+      <template #header><p>
        <span>提交物流信息</span>
-      </p>
+      </p></template>
      <div>
        <div class="goods-list modal-goods">
          <img @click="goodsDetail(singleOrder.skuId, singleOrder.goodsId)" class="hover-color"
@@ -84,31 +82,30 @@
            </div>
            <div class="mt_10">
              <span class="global_color"
-              >{{ singleOrder.flowPrice | unitPrice("￥") }} </span
-              >x {{ singleOrder.num }}
+              >{{ $filters.unitPrice(singleOrder.flowPrice, "￥") }} </span>x {{ singleOrder.num }}
            </div>
          </div>
        </div>
-        <Form ref="form" :model="form" label-position="left" :label-width="100" :rules="rules">
-          <FormItem label="物流公司" prop="logisticsId">
-            <Select v-model="form.logisticsId" placeholder="请选择物流公司">
-              <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
-            </Select>
-          </FormItem>
-          <FormItem label="物流单号" prop="logisticsNo">
-            <Input v-model="form.logisticsNo" placeholder="请填写物流单号"></Input>
-          </FormItem>
-          <FormItem label="发货时间" prop="mDeliverTime">
-            <DatePicker type="date" style="width:100%" v-model="form.mDeliverTime" @on-change="changeTime"
-                        format="yyyy-MM-dd" placeholder="选择发货时间"></DatePicker>
-          </FormItem>
-        </Form>
+        <el-form ref="form" :model="form" label-position="left" label-width="100px" :rules="rules">
+          <el-form-item label="物流公司" prop="logisticsId">
+            <el-select v-model="form.logisticsId" placeholder="请选择物流公司">
+              <el-option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="物流单号" prop="logisticsNo">
+            <el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
+          </el-form-item>
+          <el-form-item label="发货时间" prop="mDeliverTime">
+            <el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime"
+                        format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
+          </el-form-item>
+        </el-form>
      </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="logisticsShow = false">关闭</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitDelivery">提交</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: right">
+        <el-button @click="logisticsShow = false">关闭</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitDelivery">提交</el-button>
+      </div></template>
+    </el-dialog>
  </div>
 </template>

@@ -324,7 +321,7 @@ export default {
        }
      }

-      .ivu-icon {
+      .el-icon {
        color: #ff8f23;
        cursor: pointer;

@@ -337,7 +334,7 @@ export default {
    > div:nth-child(3) {
      width: 100px;

-      .ivu-btn {
+      .el-button {
        margin-bottom: 10px;
      }
    }
--- a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
@@ -2,12 +2,12 @@
  <div class="order-detail">
    <card _Title="售后详情" :_Size="16"></card>
    <!-- 操作按钮 -->
-    <Card class="mb_10" v-if="(afterSale.serviceStatus == 'PASS' &&
+    <el-card class="mb_10" shadow="never" v-if="(afterSale.serviceStatus == 'PASS' &&
          afterSale.serviceType != 'RETURN_MONEY') || (afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel)">
-      <Button type="success" @click="openModal" v-if="afterSale.serviceStatus == 'PASS' &&
-          afterSale.serviceType != 'RETURN_MONEY'" size="small">提交物流</Button>&nbsp;
-      <Button type="error" @click="cancel(afterSale.sn)" v-if="afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel" size="small">取消售后</Button>
-    </Card>
+      <el-button type="success" @click="openModal" v-if="afterSale.serviceStatus == 'PASS' &&
+          afterSale.serviceType != 'RETURN_MONEY'" size="small">提交物流</el-button>&nbsp;
+      <el-button type="danger" @click="cancel(afterSale.sn)" v-if="afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel" size="small">取消售后</el-button>
+    </el-card>
    <div class="order-card">
      <h3>{{afterSale.serviceName}}</h3>
      <p class="global_color fontsize_18">{{ afterSale.orderStatusValue }}</p>
@@ -25,14 +25,13 @@
    </div>
    <div class="order-card">
      <h3>售后进程</h3>
-      <Steps class="progress" :current="logList.length" direction="vertical">
-        <Step
-          :content="'操作人：'+ log.operatorName + '   ' + log.createTime"
+      <el-steps class="progress" :current="logList.length" direction="vertical">
+        <el-step           :content="'操作人：'+ log.operatorName + '   ' + log.createTime"
          :title="log.message"
          v-for="(log, index) in logList"
          :key="index"
-        ></Step>
-      </Steps>
+        ></el-step>
+      </el-steps>
    </div>
    <div class="order-card">
      <h3 class="mb_10">服务单信息</h3>
@@ -41,10 +40,10 @@
          <td>退款方式</td><td>{{afterSale.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}</td>
        </tr>
        <tr>
-          <td>申请退款金额</td><td>{{afterSale.applyRefundPrice | unitPrice('￥')}}</td>
+          <td>申请退款金额</td><td>{{ $filters.unitPrice(afterSale.applyRefundPrice, '￥') }}</td>
        </tr>
        <tr v-if="afterSale.actualRefundPrice">
-          <td>实际退款金额</td><td>{{afterSale.actualRefundPrice | unitPrice('￥')}}</td>
+          <td>实际退款金额</td><td>{{ $filters.unitPrice(afterSale.actualRefundPrice, '￥') }}</td>
        </tr>
        <template v-if="afterSale.refundWay === 'OFFLINE'">
          <tr>
@@ -74,30 +73,30 @@
        <img :src="img" width="200" height="200" @click="perviewImg(img)" class="hover-pointer" alt="">
      </div>
    </div>
-    <Modal v-model="logisticsShow" width="530">
-      <p slot="header">
+    <el-dialog v-model="logisticsShow" width="530">
+      <template #header><p>
        <span>提交物流信息</span>
-      </p>
+      </p></template>
      <div>
-        <Form ref="form" :model="form" label-position="left" :label-width="100" :rules="rules">
-          <FormItem label="物流公司" prop="logisticsId">
-            <Select v-model="form.logisticsId" placeholder="请选择物流公司">
-              <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
-            </Select>
-          </FormItem>
-          <FormItem label="物流单号" prop="logisticsNo">
-            <Input v-model="form.logisticsNo" placeholder="请填写物流单号"></Input>
-          </FormItem>
-          <FormItem label="发货时间" prop="mDeliverTime">
-            <DatePicker type="date" style="width:100%" v-model="form.mDeliverTime" @on-change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></DatePicker>
-          </FormItem>
-        </Form>
+        <el-form ref="form" :model="form" label-position="left" label-width="100px" :rules="rules">
+          <el-form-item label="物流公司" prop="logisticsId">
+            <el-select v-model="form.logisticsId" placeholder="请选择物流公司">
+              <el-option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="物流单号" prop="logisticsNo">
+            <el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
+          </el-form-item>
+          <el-form-item label="发货时间" prop="mDeliverTime">
+            <el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
+          </el-form-item>
+        </el-form>
      </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="logisticsShow = false">关闭</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitDelivery">提交</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: right">
+        <el-button @click="logisticsShow = false">关闭</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitDelivery">提交</el-button>
+      </div></template>
+    </el-dialog>
  </div>
 </template>
 <script>
@@ -139,7 +138,7 @@ export default {
          if (pattern3.test(this.afterSale.reason)) {
            this.getReason(this.afterSale.serviceType)
          } else {
-            this.$set(this.afterSale, 'reasonName', this.afterSale.reason)
+            this.afterSale['reasonName'] = this.afterSale.reason
          }
        }
      })
@@ -150,7 +149,7 @@ export default {
          this.reasonList = res.result
          this.reasonList.forEach(e => {
            if (e.id === this.afterSale.reason) {
-              this.$set(this.afterSale, 'reasonName', e.reason)
+              this.afterSale['reasonName'] = e.reason
            }
          })
        }
--- a/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
@@ -1,49 +1,51 @@
 <template>
  <div class="apply-after-sale">
    <card _Title="申请售后"></card>
-    <Table
-      border
-      :columns="columns"
-      :data="goodsData"
-    >
-    <template slot-scope="{ row }" slot="goodsName">
+    <el-table :data="goodsData" border>
+      <el-table-column label="商品名称">
+        <template #default="{ row }">
          <div style="padding:5px;display:flex;">
-        <img :src="row.image" style="vertical-align: top;" width="60" height="60" alt=""> <span class="ml_10">{{row.goodsName}}</span>
+            <img :src="row.image" style="vertical-align: top;" width="60" height="60" alt="">
+            <span class="ml_10">{{ row.goodsName }}</span>
          </div>
        </template>
-    <template slot-scope="{ row }" slot="goodsPrice">
-      <div>{{row.applyRefundPrice | unitPrice('￥')}}</div>
+      </el-table-column>
+      <el-table-column label="价格">
+        <template #default="{ row }">
+          <div>{{ $filters.unitPrice(row.applyRefundPrice, '￥') }}</div>
        </template>
-    </Table>
+      </el-table-column>
+      <el-table-column prop="num" label="购买数量" />
+    </el-table>
    <div>
-      <Form :model="form" ref="form" class="mt_10" :rules="rules" :label-width="80">
-        <FormItem label="售后类别">
-          <RadioGroup v-model="form.serviceType" @on-change="changeReason" type="button" button-style="solid">
-            <Radio v-if="info.returnGoods" label="RETURN_GOODS">退货</Radio>
-            <Radio v-if="info.returnMoney" label="RETURN_MONEY">退款</Radio>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label="提交数量" prop="num">
-          <Input type="number" v-model="form.num" style="width:260px" />
-        </FormItem>
-        <FormItem label="提交原因" prop="reason">
-          <Select v-model="form.reason" style="width:260px">
-            <Option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</Option>
-          </Select>
-        </FormItem>
-        <FormItem label="问题描述" prop="problemDesc">
-          <Input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
-        </FormItem>
-        <FormItem label="图片信息">
+      <el-form :model="form" ref="form" class="mt_10" :rules="rules" label-width="80px">
+        <el-form-item label="售后类别">
+          <el-radio-group v-model="form.serviceType" @change="changeReason" type="button" button-style="solid">
+            <el-radio v-if="info.returnGoods" label="RETURN_GOODS">退货</el-radio>
+            <el-radio v-if="info.returnMoney" label="RETURN_MONEY">退款</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="提交数量" prop="num">
+          <el-input type="number" v-model="form.num" style="width:260px" />
+        </el-form-item>
+        <el-form-item label="提交原因" prop="reason">
+          <el-select v-model="form.reason" style="width:260px">
+            <el-option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="问题描述" prop="problemDesc">
+          <el-input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
+        </el-form-item>
+        <el-form-item label="图片信息">
          <div style="display:flex;align-items:center;">
            <div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
              <img :src="img">
              <div class="demo-upload-list-cover">
-                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
-                  <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
+                  <el-icon @click="handleView(img)"><View /></el-icon>
+                  <el-icon @click="handleRemove(index)"><Delete /></el-icon>
              </div>
            </div>
-            <Upload
+            <el-upload
                :show-upload-list="false"
                :on-success="handleSuccess"
                :before-upload="handleBeforeUpload"
@@ -52,44 +54,46 @@
                :headers="accessToken"
                style="display: inline-block;width:58px;">
                <div class="hover-pointer icon-upload" style="">
-                  <Icon type="md-add" size="20"></Icon>
+                  <el-icon :size="20"><Plus /></el-icon>
                </div>
-            </Upload>
+            </el-upload>
          </div>
-        </FormItem>
-        <FormItem label="退款方式">
+        </el-form-item>
+        <el-form-item label="退款方式">
          <div>{{info.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}</div>
-        </FormItem>
+        </el-form-item>
        <template v-if="info.accountType === 'BANK_TRANSFER' && info.applyRefundPrice != 0">
-          <FormItem label="开户行" prop="bankDepositName">
-            <Input v-model="form.bankDepositName" type="text" placeholder="请输入银行开户行" style="width:260px" />
-          </FormItem>
-          <FormItem label="开户名" prop="bankAccountName">
-            <Input v-model="form.bankAccountName" type="text" placeholder="请输入银行开户名" style="width:260px" />
-          </FormItem>
-          <FormItem label="银行账号" prop="bankAccountNumber">
-            <Input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px" />
-          </FormItem>
+          <el-form-item label="开户行" prop="bankDepositName">
+            <el-input v-model="form.bankDepositName" type="text" placeholder="请输入银行开户行" style="width:260px" />
+          </el-form-item>
+          <el-form-item label="开户名" prop="bankAccountName">
+            <el-input v-model="form.bankAccountName" type="text" placeholder="请输入银行开户名" style="width:260px" />
+          </el-form-item>
+          <el-form-item label="银行账号" prop="bankAccountNumber">
+            <el-input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px" />
+          </el-form-item>
        </template>
-        <FormItem label="返回方式" v-if="form.serviceType === 'RETURN_GOODS'">
+        <el-form-item label="返回方式" v-if="form.serviceType === 'RETURN_GOODS'">
          <div>快递至第三方卖家</div>
-        </FormItem>
-        <FormItem>
-          <Button type="primary" @click="apply">提交申请</Button>
-        </FormItem>
-      </Form>
-      <Modal title="View Image" v-model="visible">
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="apply">提交申请</el-button>
+        </el-form-item>
+      </el-form>
+      <el-dialog title="View Image" v-model="visible">
        <img :src="previewImage" v-if="visible" style="width: 100%">
-      </Modal>
+      </el-dialog>
    </div>
  </div>
 </template>
 <script>
+import { Delete, Plus, View } from '@element-plus/icons-vue';
 import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
 import * as RegExp from '@/plugins/RegExp'
 export default {
+  components: { Delete, Plus, View },
  data () {
    const checkNum = (rule, value, callback) => {
      if (value === '') {
@@ -104,11 +108,6 @@ export default {
      }
    };
    return {
-      columns: [ // 表格表头
-        {title: '商品名称', slot: 'goodsName'},
-        {title: '价格', slot: 'goodsPrice'},
-        {title: '购买数量', key: 'num'}
-      ],
      goodsData: [], // 商品数据
      reasonList: [], // 售后原因列表
      info: {}, // 售后信息
--- a/buyer/src/pages/home/orderCenter/Complain.vue
+++ b/buyer/src/pages/home/orderCenter/Complain.vue
@@ -12,26 +12,26 @@
      <div class="goods-con">
        <img :src="orderGoods.image" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
        <p class="hover-pointer color999" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">{{orderGoods.goodsName}}</p>
-        <p>{{orderGoods.goodsPrice | unitPrice('￥')}}</p>
+        <p>{{ $filters.unitPrice(orderGoods.goodsPrice, '￥') }}</p>
      </div>

      <div class="eval-con">
        <div>
          <span class="color999">投诉主题：</span>
-          <Select v-model="form.complainTopic" style="width:260px;margin-bottom:10px">
-            <Option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</Option>
-          </Select>
-          <Input type="textarea" maxlength="500" show-word-limit :rows="4" placeholder="请输入投诉内容" v-model="form.content" />
+          <el-select v-model="form.complainTopic" style="width:260px;margin-bottom:10px">
+            <el-option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</el-option>
+          </el-select>
+          <el-input type="textarea" maxlength="500" show-word-limit :rows="4" placeholder="请输入投诉内容" v-model="form.content" />
        </div>
        <div style="display:flex;align-items:center;">
          <div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
            <img :src="img">
            <div class="demo-upload-list-cover">
-                <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
-                <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
+                <el-icon @click="handleView(img)"><View /></el-icon>
+                <el-icon @click="handleRemove(index)"><Delete /></el-icon>
            </div>
          </div>
-          <Upload
+          <el-upload
              :show-upload-list="false"
              :on-success="handleSuccess"
              :before-upload="handleBeforeUpload"
@@ -40,25 +40,27 @@
              :headers="accessToken"
              style="display: inline-block;width:58px;">
              <div class="hover-pointer icon-upload" style="">
-                <Icon type="ios-camera" size="20"></Icon>
+                <el-icon :size="20"><Camera /></el-icon>
              </div>
-          </Upload>
+          </el-upload>
          <div class="describe">上传投诉凭证，最多5张</div>
        </div>
      </div>
    </div>
-    <Button type="primary" class="mt_10" :loading="loading" @click="save">提交</Button>
-    <Modal title="View Image" v-model="visible">
+    <el-button type="primary" class="mt_10" :loading="loading" @click="save">提交</el-button>
+    <el-dialog title="View Image" v-model="visible">
        <img :src="previewImage" v-if="visible" style="width: 100%">
-    </Modal>
+    </el-dialog>
  </div>
 </template>
 <script>
+import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { orderDetail } from '@/api/order.js';
 import { afterSaleReason, handleComplain } from '@/api/member.js';
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
 export default {
+  components: { Camera, Delete, View },
  data () {
    return {
      order: {}, // 订单详情
@@ -85,7 +87,7 @@ export default {
      afterSaleReason('COMPLAIN').then(res => {
        if (res.success) {
          this.reasonList = res.result
-          this.$set(this.form, 'complainTopic', res.result[0].reason)
+          this.form['complainTopic'] = res.result[0].reason
          this.$forceUpdate()
        }
      })
--- a/buyer/src/pages/home/orderCenter/MyAddress.vue
+++ b/buyer/src/pages/home/orderCenter/MyAddress.vue
@@ -5,12 +5,12 @@
      <div class="address-header">
        <span>
          {{ item.name }}
-          <Tag class="ml_10" v-if="item.isDefault" color="red">默认地址</Tag>
-          <Tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</Tag>
+          <el-tag class="ml_10" v-if="item.isDefault" color="red">默认地址</el-tag>
+          <el-tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</el-tag>
        </span>
        <div class="address-action">
-          <span @click="edit(item.id)"><Icon type="edit"></Icon>修改</span>
-          <span @click="del(item.id)"><Icon type="trash-a"></Icon>删除</span>
+          <span @click="edit(item.id)"><el-icon><Edit /></el-icon>修改</span>
+          <span @click="del(item.id)"><el-icon><Delete /></el-icon>删除</span>
        </div>
      </div>
      <div class="address-content">
@@ -18,8 +18,7 @@
          <span class="address-content-title"> 收 货 人 :</span> {{ item.name }}
        </p>
        <p>
-          <span class="address-content-title">收货地区:</span
-          >{{ item.consigneeAddressPath | unitAddress }}
+          <span class="address-content-title">收货地区:</span>{{ $filters.unitAddress(item.consigneeAddressPath) }}
        </p>
        <p>
          <span class="address-content-title">详细地址:</span> {{ item.detail }}
@@ -33,10 +32,12 @@
 </template>

 <script>
+import { Delete, Edit } from '@element-plus/icons-vue';
 import card from '@/components/card';
 import { memberAddress, delMemberAddress } from '@/api/address.js';

 export default {
+  components: { Delete, Edit },
  name: 'MyAddress',

  data () {
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@@ -6,12 +6,12 @@
    <!-- 搜索 筛选 -->
    <div class="mb_24 box" v-if="!homePage">
      <div class="global_float_right" >
-        <Input
+        <el-input
          class="width_300"
-          search
-          enter-button
+          
+          
          v-model="params.keywords"
-          @on-search="getList"
+          @keyup.enter="getList"
          placeholder="请输入订单号搜索"
        />
      </div>
@@ -32,8 +32,8 @@
            </div>
          </div>
          <div>
-            <Button v-if="order.orderStatus === 'COMPLETED'" @click="delOrder(order.sn)" class="del-btn mr_10 fontsize_16" style="margin-top:-5px;" type="text" icon="ios-trash-outline" size="small"></Button>
-            <span>{{ order.flowPrice | unitPrice("￥") }}</span>
+            <el-button v-if="order.orderStatus === 'COMPLETED'" @click="delOrder(order.sn)" class="del-btn mr_10 fontsize_16" style="margin-top:-5px;" type="text" icon="ios-trash-outline" size="small"></el-button>
+            <span>{{ $filters.unitPrice(order.flowPrice, "￥") }}</span>
          </div>
        </div>
        <div class="order-body">
@@ -51,11 +51,11 @@
              <div>
                <div class="hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
                <div class="mt_10">
-                  <span class="global_color">{{ goods.goodsPrice | unitPrice("￥") }} </span>x {{ goods.num }}
+                  <span class="global_color">{{ $filters.unitPrice(goods.goodsPrice, "￥") }} </span>x {{ goods.num }}
                  <span style="margin-left: 10px;color: #ff9900;">{{refundPriceList(goods.isRefund)}}</span>
                </div>
-                <Button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success" class="fontsize_12" style="position:relative;top:-22px;left:190px;margin-right:10px">评价</Button>
-                <Button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="warning" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</Button>
+                <el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success" class="fontsize_12" style="position:relative;top:-22px;left:190px;margin-right:10px">评价</el-button>
+                <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="warning" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</el-button>
              </div>
            </div>
          </div>
@@ -64,47 +64,41 @@
          </div>
          <div>
            <!-- 订单基础操作 -->
-            <Button @click="orderDetail(order.sn)" type="info" size="small">订单详情</Button>
-            <Button @click="handleCancelOrder(order.sn)" type="error" v-if="order.allowOperationVO.cancel" size="small">取消订单</Button>
-            <Button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</Button>
-            <Button @click="received(order.sn)" size="small" type="warning" v-if="order.allowOperationVO.rog">确认收货</Button>
+            <el-button @click="orderDetail(order.sn)" type="info" size="small">订单详情</el-button>
+            <el-button @click="handleCancelOrder(order.sn)" type="danger" v-if="order.allowOperationVO.cancel" size="small">取消订单</el-button>
+            <el-button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</el-button>
+            <el-button @click="received(order.sn)" size="small" type="warning" v-if="order.allowOperationVO.rog">确认收货</el-button>
            <!-- 售后 -->
-            <Button v-if="order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
-                    @click="applyAfterSale(order.orderItems)" size="small">申请售后</Button>
+            <el-button v-if="order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
+                    @click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
          </div>
        </div>
      </div>
-      <Spin size="large" fix v-if="spinShow"></Spin>
+      <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
    </div>
    <!-- 分页 -->
    <div class="page-size" v-if="!homePage">
-      <Page :total="total" @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="params.pageSize"
-        show-total
-        show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+        @size-change="changePageSize"
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
    </div>
    <!-- 选择售后商品 -->
-    <Modal v-model="afterSaleModal" title="请选择申请售后的商品">
+    <el-dialog v-model="afterSaleModal" title="请选择申请售后的商品">
      <div>
-        <Table
-          border
-          :columns="afterSaleColumns"
-          :data="afterSaleArr"
-          @on-row-click="afterSaleSelect"
-        >
-        </Table>
+        <el-table :data="afterSaleArr" border @row-click="afterSaleSelect">
+          <el-table-column prop="name" label="商品名称" />
+          <el-table-column prop="goodsPrice" label="价格" />
+        </el-table>
      </div>
-      <div slot="footer"></div>
-    </Modal>
-    <Modal v-model="cancelAvail" title="请选择取消订单原因" @on-ok="sureCancel" @on-cancel="cancelAvail = false">
-      <RadioGroup v-model="cancelParams.reason" vertical type="button" button-style="solid">
-        <Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
+      <template #footer><div></div></template>
+    </el-dialog>
+    <el-dialog v-model="cancelAvail" title="请选择取消订单原因" @ok="sureCancel" @cancel="cancelAvail = false">
+      <el-radio-group v-model="cancelParams.reason" vertical type="button" button-style="solid">
+        <el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
           {{item.reason}}
-        </Radio>
-      </RadioGroup>
-    </Modal>
+        </el-radio>
+      </el-radio-group>
+    </el-dialog>
  </div>
 </template>

@@ -140,10 +134,6 @@ export default {
      total: 0, // 数据总数
      spinShow: false, // 加载状态
      afterSaleModal: false, // 选择售后商品模态框
-      afterSaleColumns: [ // 售后商品表头
-        {title: '商品名称', key: 'name'},
-        {title: '价格', key: 'goodsPrice'}
-      ],
      afterSaleArr: [], // 售后商品列表
      cancelAvail: false, // 取消订单modal控制
      cancelReason: [] // 取消订单原因
@@ -374,7 +364,7 @@ export default {
          color: $theme_color;
        }
      }
-      .ivu-icon {
+      .el-icon {
        color: #ff8f23;
        cursor: pointer;
        &:hover {
@@ -385,7 +375,7 @@ export default {

    > div:nth-child(3) {
      width: 100px;
-      .ivu-btn {
+      .el-button {
        margin-bottom: 10px;
      }
    }
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -1,37 +1,35 @@
 <template>
  <div class="order-detail" v-if="order.order">
    <card _Title="订单详情" :_Size="16"></card>
-    <Card
+    <el-card
      class="mb_10"
+      shadow="never"
      v-if="
        order.allowOperationVO.pay ||
        order.allowOperationVO.rog ||
        order.allowOperationVO.cancel
      "
    >
-      <Button
+      <el-button
        type="success"
        @click="goPay(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.pay"
-        >去支付</Button
-      >
-      <Button
+        >去支付</el-button>
+      <el-button
        type="info"
        @click="received(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.rog"
-        >确认收货</Button
-      >
-      <Button
-        type="error"
+        >确认收货</el-button>
+      <el-button
+        type="danger"
        @click="handleCancelOrder(order.order.sn)"
        v-if="order.allowOperationVO.cancel"
        size="small"
-        >取消订单</Button
-      >
-      <Button v-if="order.allowOperationVO.showLogistics || orderPackage.length > 0 || logistics" type="info" @click="logisticsList()" size="small">查看物流</Button>
-    </Card>
+        >取消订单</el-button>
+      <el-button v-if="order.allowOperationVO.showLogistics || orderPackage.length > 0 || logistics" type="info" @click="logisticsList()" size="small">查看物流</el-button>
+    </el-card>
    <p class="verificationCode" v-if="order.order.verificationCode">
      核验码：<span>{{ order.order.verificationCode }}</span>
    </p>
@@ -41,25 +39,24 @@
      <div style="color: #999" class="operation-time">
        操作时间：{{ order.order.updateTime || order.order.createTime }}
      </div>
-      <Steps
+      <el-steps
        class="progress"
        :current="progressList.length"
        direction="vertical"
      >
-        <Step
-          :title="progress.message"
+        <el-step           :title="progress.message"
          :content="progress.createTime"
          v-for="(progress, index) in progressList"
          :key="index"
-        ></Step>
-      </Steps>
+        ></el-step>
+      </el-steps>
    </div>
    <div class="order-card" v-if="order.order.deliveryMethod === 'LOGISTICS' && order.order.orderType !== 'VIRTUAL'">
      <h3>收货人信息</h3>
      <p>收货人：{{ order.order.consigneeName }}</p>
-      <p>手机号码：{{ order.order.consigneeMobile | secrecyMobile }}</p>
+      <p>手机号码：{{ $filters.secrecyMobile( order.order.consigneeMobile ) }}</p>
      <p>
-        收货地址：{{ order.order.consigneeAddressPath | unitAddress }}
+        收货地址：{{ $filters.unitAddress(order.order.consigneeAddressPath) }}
        {{ order.order.consigneeDetail }}
      </p>
    </div>
@@ -128,9 +125,9 @@
          收票人邮箱：{{ order.receipt.receiptEmail }}
        </p>
        <div v-if="Number(order.receipt.receiptStatus) === 1" class="receipt-action">
-          <Button size="small" type="primary" ghost @click="viewReceiptInvoice(order.receipt)">
+          <el-button size="small" type="primary" ghost @click="viewReceiptInvoice(order.receipt)">
            查看发票
-          </Button>
+          </el-button>
        </div>
      </template>
      <div v-else style="color: #999; margin-left: 5px">未开发票</div>
@@ -171,13 +168,13 @@
              </div>
            </td>
            <td>{{ goods.id }}</td>
-            <td>{{ goods.goodsPrice | unitPrice("￥") }}</td>
+            <td>{{ $filters.unitPrice(goods.goodsPrice, "￥") }}</td>
            <td>{{ goods.num }}</td>
            <td>{{refundPriceList(goods.isRefund)}}</td>
-            <td>{{ goods.refundPrice | unitPrice("￥") }}</td>
-            <td>{{ (goods.goodsPrice * goods.num) | unitPrice("￥") }}</td>
+            <td>{{ $filters.unitPrice(goods.refundPrice, "￥") }}</td>
+            <td>{{ $filters.unitPrice((goods.goodsPrice * goods.num), "￥") }}</td>
            <td>
-              <Button
+              <el-button
                v-if="
                  goods.afterSaleStatus.includes('NOT_APPLIED') ||
                  goods.afterSaleStatus.includes('PART_AFTER_SALE')
@@ -186,23 +183,23 @@
                type="info"
                size="small"
                class="mb_5"
-                >申请售后</Button
+                >申请售后</el-button
              >
-              <Button
+              <el-button
                v-if="goods.commentStatus == 'UNFINISHED'"
                @click="comment(order.order.sn, goodsIndex)"
                size="small"
                type="success"
                class="fontsize_12 mb_5"
-                >评价</Button
+                >评价</el-button
              >
-              <Button
+              <el-button
                v-if="goods.complainStatus == 'NO_APPLY'"
                @click="complain(order.order.sn, goodsIndex)"
                type="warning"
                class="fontsize_12"
                size="small"
-                >投诉</Button
+                >投诉</el-button
              >
            </td>
          </tr>
@@ -214,68 +211,52 @@
          <span>商品件数：</span><span>{{ order.order.goodsNum }}件</span>
        </div>
        <div>
-          <span>商品总价：</span
-          ><span>{{ order.order.goodsPrice | unitPrice("￥") }}</span
-          ><br />
+          <span>商品总价：</span><span>{{ $filters.unitPrice(order.order.goodsPrice, "￥") }}</span><br />
        </div>
        <div v-if="order.order.orderType !== 'VIRTUAL'">
-          <span>运费：</span
-          ><span>+{{ order.order.freightPrice | unitPrice("￥") }}</span
-          ><br />
+          <span>运费：</span><span>+{{ $filters.unitPrice(order.order.freightPrice, "￥") }}</span><br />
        </div>
        <div v-if="order.order.priceDetailDTO.couponPrice">
-          <span>优惠券：</span
-          ><span
-            >-{{
-              order.order.priceDetailDTO.couponPrice || 0 | unitPrice("￥")
-            }}</span
-          >
+          <span>优惠券：</span><span
+            >-{{ $filters.unitPrice(order.order.priceDetailDTO.couponPrice || 0, "￥") }}</span>
        </div>
        <div v-if="order.order.priceDetailDTO.giftCardPrice">
-          <span>礼品卡抵扣：</span
-          ><span
-            >-{{
-              order.order.priceDetailDTO.giftCardPrice || 0 | unitPrice("￥")
-            }}</span
-          >
+          <span>礼品卡抵扣：</span><span
+            >-{{ $filters.unitPrice(order.order.priceDetailDTO.giftCardPrice || 0, "￥") }}</span>
        </div>
        <div v-if="order.order.discountPrice">
-          <span>活动优惠：</span
-          ><span>-{{ order.order.discountPrice | unitPrice("￥") }}</span>
+          <span>活动优惠：</span><span>-{{ $filters.unitPrice(order.order.discountPrice, "￥") }}</span>
        </div>
        <div v-if="order.order.priceDetailDTO.updatePrice">
-          <span>修改价格：</span
-          ><span>{{ order.order.priceDetailDTO.updatePrice | unitPrice("￥") }}</span>
+          <span>修改价格：</span><span>{{ $filters.unitPrice(order.order.priceDetailDTO.updatePrice, "￥") }}</span>
        </div>
        <div>
          <span>应付金额：</span>
-          <span class="actrual-price">{{
-            order.order.flowPrice | unitPrice("￥")
-          }}</span>
+          <span class="actrual-price">{{ $filters.unitPrice(order.order.flowPrice, "￥") }}</span>
        </div>
      </div>
    </div>
-    <Modal
+    <el-dialog
      v-model="cancelAvail"
      title="请选择取消订单原因"
-      @on-ok="sureCancel"
-      @on-cancel="cancelAvail = false"
+      @ok="sureCancel"
+      @cancel="cancelAvail = false"
    >
-      <RadioGroup
+      <el-radio-group
        v-model="cancelParams.reason"
        vertical
        type="button"
        button-style="solid"
      >
-        <Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
+        <el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
          {{ item.reason }}
-        </Radio>
-      </RadioGroup>
-    </Modal>
+        </el-radio>
+      </el-radio-group>
+    </el-dialog>

    <!--查询物流-->
-    <Modal v-model="logisticsModal" width="40">
-      <p slot="header"><span>查询物流</span></p>
+    <el-dialog v-model="logisticsModal" width="40">
+      <template #header><p><span>查询物流</span></p></template>
      <div class="layui-layer-wrap">
        <dl>
          <dt>订单号：</dt>
@@ -331,10 +312,10 @@
          </div>
        </div>
      </div>
-      <div slot="footer" style="text-align: right">
-        <Button @click="logisticsModal = false">取消</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: right">
+        <el-button @click="logisticsModal = false">取消</el-button>
+      </div></template>
+    </el-dialog>

  </div>
 </template>
@@ -455,7 +436,7 @@ export default {
          if (receiptId) {
            const receiptRes = await receiptDetail(receiptId);
            if (receiptRes && receiptRes.success && receiptRes.result) {
-              this.$set(this.order, "receipt", receiptRes.result);
+              this.order["receipt"] = receiptRes.result;
            }
          }
          this.progressList = res.result.orderLogs;
@@ -592,7 +573,7 @@ export default {
      color: $theme_color;
    }
  }
-  .ivu-icon {
+  .el-icon {
    color: #ff8f23;
    cursor: pointer;
    &:hover {
@@ -698,15 +679,15 @@ table {
 .layui-layer-wrap > .div-express-log {
  max-height: 300px;
 }
-::v-deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar{
+:deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar{
  width: 1px;
  height: 5px;
 }
-::v-deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar-thumb{
+:deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar-thumb{
  border-radius: 1em;
  background-color: rgba(50,50,50,.3);
 }
-::v-deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar-track{
+:deep .layui-layer-wrap > .div-express-log::-webkit-scrollbar-track{
  border-radius: 1em;
  background-color: rgba(50,50,50,.1);
 }
--- a/buyer/src/pages/home/userCenter/Coupons.vue
+++ b/buyer/src/pages/home/userCenter/Coupons.vue
@@ -9,14 +9,11 @@
            <span
              v-if="item.couponType === 'PRICE'"
              class="fontsize_12 global_color"
-              >￥<span class="price">{{ item.price | unitPrice }}</span></span
-            >
+              >￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
            <span
              v-if="item.couponType === 'DISCOUNT'"
              class="fontsize_12 global_color"
-              ><span class="price">{{ item.discount }}</span
-              >折</span
-            >
+              ><span class="price">{{ item.discount }}</span>折</span>
            <span class="describe">满{{ item.consumeThreshold }}元可用</span>
          </div>
          <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
@@ -33,17 +30,13 @@
        <i class="circle-bottom"></i>
      </li>
    </ul>
-    <Page
-      :total="total"
-      @on-change="changePageNum"
+    <el-pagination       :total="total"
+      @current-change="changePageNum"
      class="pageration"
-      @on-page-size-change="changePageSize"
+      @size-change="changePageSize"
      :page-size="params.pageSize"
-      show-total
-      show-sizer
-    >
-    </Page>
-    <Spin v-if="loading" fix></Spin>
+     layout="total, sizes, prev, pager, next"></el-pagination>
+    <el-skeleton v-if="loading" fix></el-skeleton>
  </div>
 </template>

--- a/buyer/src/pages/home/userCenter/MoneyManagement.vue
+++ b/buyer/src/pages/home/userCenter/MoneyManagement.vue
@@ -5,164 +5,202 @@
    <div class="box">
      <div class="mb_20 account-price">
        <span class="subTips">账户余额：</span>
-        <span class="global_color mr_10" style="font-size:26px">￥{{ memberDeposit | unitPrice }}</span>
+        <span class="global_color mr_10" style="font-size:26px">￥{{ $filters.unitPrice(memberDeposit) }}</span>
        <span class="subTips">冻结金额：</span>
-        <span class="">￥{{ frozenDeposit | unitPrice }}</span>
+        <span class="">￥{{ $filters.unitPrice(frozenDeposit) }}</span>
      </div>
      <div class="account-btns">
-        <Button type="primary" @click="recharge">在线充值</Button>
-        <Button @click="withdrawalApply">申请提现</Button>
+        <el-button type="primary" @click="recharge">在线充值</el-button>
+        <el-button @click="withdrawalApply">申请提现</el-button>
      </div>
    </div>
-    <Modal v-model="modal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
+    <el-dialog v-model="modal" width="530">
+      <template #header><p>
+        <el-icon><Edit /></el-icon>
        <span>充值金额</span>
-      </p>
+      </p></template>
      <div>
-        <Form
+        <el-form
          ref="formData"
-          :label-width="100"
+          label-width="100px"
          :model="formData"
          :rules="formValidate"
          label-position="left"
        >
-          <FormItem label="充值金额" prop="price">
-            <Input v-model="formData.price" maxlength="9" number size="large"
-            ><span slot="append">元</span></Input>
-          </FormItem>
-        </Form>
+          <el-form-item label="充值金额" prop="price">
+            <el-input v-model="formData.price" maxlength="9" number size="large"
+            ><template #append><span>元</span></template></el-input>
+          </el-form-item>
+        </el-form>
      </div>
-      <div slot="footer" style="text-align: center">
-        <Button size="large" type="success" @click="rechargePrice">充值</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: center">
+        <el-button size="large" type="success" @click="rechargePrice">充值</el-button>
+      </div></template>
+    </el-dialog>
    <!-- 提现申请 -->
-    <Modal v-model="withdrawApplyModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
+    <el-dialog v-model="withdrawApplyModal" width="530">
+      <template #header><p>
+        <el-icon><Edit /></el-icon>
        <span>提现金额</span>
-      </p>
+      </p></template>
      <div>
-        <Form
+        <el-form
          ref="withdrawApplyFormData"
-          :label-width="120"
+          label-width="120px"
          :model="withdrawApplyFormData"
          :rules="withdrawApplyFormValidate"
        >
-          <FormItem label="提现类型" prop="type">
-            <Select v-model="withdrawApplyFormData.type" disabled>
-              <Option value="ALI">支付宝</Option>
-              <Option value="WECHAT">微信</Option>
-            </Select>
-          </FormItem>
-          <FormItem label="提现金额" prop="price">
-            <Input
+          <el-form-item label="提现类型" prop="type">
+            <el-select v-model="withdrawApplyFormData.type" disabled>
+              <el-option value="ALI">支付宝</el-option>
+              <el-option value="WECHAT">微信</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="提现金额" prop="price">
+            <el-input
              v-model="withdrawApplyFormData.price"
              maxlength="9"
              number
              size="large"
-            ><span slot="append">元</span></Input>
+            ><template #append><span>元</span></template></el-input>
            <span style="color: red">最低提现金额 {{ withdrawApplyFormData.minPrice }}元</span>
-          </FormItem>
-          <FormItem v-if="withdrawApplyFormData.type === 'ALI'" label="真实姓名" prop="realName">
-            <Input
+          </el-form-item>
+          <el-form-item v-if="withdrawApplyFormData.type === 'ALI'" label="真实姓名" prop="realName">
+            <el-input
              v-model="withdrawApplyFormData.realName"
              maxlength="9"
              number
              size="large"
-            ></Input>
-          </FormItem>
-          <FormItem v-if="withdrawApplyFormData.type === 'ALI'" label="第三方登录账号" prop="connectNumber">
-            <Input
+            ></el-input>
+          </el-form-item>
+          <el-form-item v-if="withdrawApplyFormData.type === 'ALI'" label="第三方登录账号" prop="connectNumber">
+            <el-input
              v-model="withdrawApplyFormData.connectNumber"
              maxlength="9"
              number
              size="large"
-            ></Input>
-          </FormItem>
-        </Form>
+            ></el-input>
+          </el-form-item>
+        </el-form>
      </div>
-      <div slot="footer" style="text-align: center">
-        <Button size="large" type="success" @click="withdrawal">提现</Button>
-      </div>
-    </Modal>
+      <template #footer><div style="text-align: center">
+        <el-button size="large" type="success" @click="withdrawal">提现</el-button>
+      </div></template>
+    </el-dialog>
    <!-- 余额日志 -->
-    <Tabs value="log" @on-click="tabPaneChange">
-      <TabPane label="余额日志" name="log">
-        <Table :columns="logColumns" :data="logColumnsData.records"></Table>
+    <el-tabs v-model="activeWalletTab" @tab-click="(tab) => tabPaneChange(tab.paneName)">
+      <el-tab-pane label="余额日志" name="log">
+        <el-table :data="logColumnsData.records || []">
+          <el-table-column prop="createTime" label="时间" width="190" />
+          <el-table-column label="金额" width="180">
+            <template #default="{ row }">
+              <span v-if="row.money > 0" style="color: green">{{ $filters.unitPrice(row.money, '+ ¥') }}</span>
+              <span v-else-if="row.money < 0" style="color: red">{{ $filters.unitPrice(0 - row.money, '- ¥') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="detail" label="变动日志" />
+        </el-table>
        <!-- 分页 -->
        <div class="page-size">
-          <Page
-            :current="walletForm.pageNumber"
+          <el-pagination             :current-page="walletForm.pageNumber"
            :page-size="walletForm.pageSize"
-            :page-size-opts="[10, 20, 50]"
+            :page-sizes="[10, 20, 50]"
            :total="logColumnsData.total"
-            show-sizer
-            show-total
-            size="small"
-            transfer
-            @on-change="changePage"
-            @on-page-size-change="changePageSize"
-          ></Page>
+            small
+            @current-change="changePage"
+            @size-change="changePageSize"
+           layout="total, sizes, prev, pager, next"></el-pagination>
        </div>
-      </TabPane>
+      </el-tab-pane>
      <!-- 充值记录 -->
-      <TabPane label="充值记录" name="recharge">
-        <Table
-          :columns="rechargeListColumns"
-          :data="rechargeListData.records"
-        ></Table>
+      <el-tab-pane label="充值记录" name="recharge">
+        <el-table :data="rechargeListData.records || []">
+          <el-table-column prop="createTime" label="充值时间" width="168" />
+          <el-table-column prop="rechargeSn" label="支付单号" width="200" />
+          <el-table-column label="充值金额">
+            <template #default="{ row }">
+              <span v-if="row.payStatus === 'PAID'" style="color: green">{{ $filters.unitPrice(row.rechargeMoney, '+ ¥') }}</span>
+              <span v-else>{{ $filters.unitPrice(row.rechargeMoney, '¥') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付状态">
+            <template #default="{ row }">
+              <span v-if="row.payStatus === 'PAID'">已付款</span>
+              <span v-else-if="row.payStatus === 'UNPAID'">未付款</span>
+              <span v-else-if="row.payStatus === 'CANCEL'">已取消</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="支付方式">
+            <template #default="{ row }">
+              <span v-if="row.rechargeWay === 'ALIPAY'">支付宝</span>
+              <span v-else-if="row.rechargeWay === 'WECHAT'">微信</span>
+              <span v-else-if="row.rechargeWay === 'BANK_TRANSFER'">线下转账</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="payTime" label="支付时间" width="180" />
+        </el-table>
        <!-- 分页 -->
        <div class="page-size">
-          <Page
-            :current="rechargeForm.pageNumber"
+          <el-pagination             :current-page="rechargeForm.pageNumber"
            :page-size="rechargeForm.pageSize"
-            :page-size-opts="[10, 20, 50]"
+            :page-sizes="[10, 20, 50]"
            :total="rechargeListData.total"
-            show-sizer
-            show-total
-            size="small"
-            transfer
-            @on-change="rechargeChangePage"
-            @on-page-size-change="rechargeChangePageSize"
-          ></Page>
+            small
+            @current-change="rechargeChangePage"
+            @size-change="rechargeChangePageSize"
+           layout="total, sizes, prev, pager, next"></el-pagination>
        </div>
-      </TabPane>
+      </el-tab-pane>

-      <TabPane label="提现记录" name="withdrawApply">
-        <Table
-          :columns="withdrawApplyColumns"
-          :data="withdrawApplyColumnsListData.records"
-        ></Table>
+      <el-tab-pane label="提现记录" name="withdrawApply">
+        <el-table :data="withdrawApplyColumnsListData.records || []">
+          <el-table-column prop="createTime" label="申请时间" width="168" />
+          <el-table-column prop="sn" label="提现单号" width="200" />
+          <el-table-column label="提现金额" width="110">
+            <template #default="{ row }">
+              <span v-if="row.applyStatus === 'VIA_AUDITING'" style="color: green">{{ $filters.unitPrice(row.applyMoney, '+ ¥') }}</span>
+              <span v-else>{{ $filters.unitPrice(row.applyMoney, '¥') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="提现状态" width="95">
+            <template #default="{ row }">
+              <span v-if="row.applyStatus === 'APPLY'">申请中</span>
+              <span v-else-if="row.applyStatus === 'VIA_AUDITING'">审核通过</span>
+              <span v-else-if="row.applyStatus === 'SUCCESS'">提现成功</span>
+              <span v-else-if="row.applyStatus === 'ERROR'">提现失败</span>
+              <span v-else>审核拒绝</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="inspectTime" label="审核时间" width="168" />
+          <el-table-column prop="inspectRemark" label="审核备注" show-overflow-tooltip />
+        </el-table>
        <!-- 分页 -->
        <div class="page-size">
-          <Page
-            :current="withdrawApplyForm.pageNumber"
+          <el-pagination             :current-page="withdrawApplyForm.pageNumber"
            :page-size="withdrawApplyForm.pageSize"
-            :page-size-opts="[10, 20, 50]"
+            :page-sizes="[10, 20, 50]"
            :total="withdrawApplyColumnsListData.total"
-            show-sizer
-            show-total
-            size="small"
-            transfer
-            @on-change="withdrawChangePage"
-            @on-page-size-change="withdrawChangePageSize"
-          ></Page>
+            small
+            @current-change="withdrawChangePage"
+            @size-change="withdrawChangePageSize"
+           layout="total, sizes, prev, pager, next"></el-pagination>
        </div>
-      </TabPane>
-    </Tabs>
+      </el-tab-pane>
+    </el-tabs>
  </div>
 </template>

 <script>
 import {getDepositLog, getMembersWallet, getRecharge, getWithdrawApply, recharge, withdrawalApply} from '@/api/member';
 import {withdrawalSettingVO} from "@/api/pay";
+import { Edit } from '@element-plus/icons-vue';

 export default {
  name: 'MoneyManagement',
+  components: { Edit },
  data() {
    return {
+      activeWalletTab: "log",
      frozenDeposit: 0, // 冻结余额
      memberDeposit: 0, // 余额

@@ -225,172 +263,9 @@ export default {
          }
        ]
      },
-      // 余额日志
-      logColumns: [
-        {
-          title: '时间',
-          width: 190,
-          key: 'createTime'
-        },
-        {
-          title: '金额',
-          key: 'money',
-          width: 180,
-          render: (h, params) => {
-            if (params.row.money > 0) {
-              return h('div', [
-                h(
-                  'span',
-                  {
-                    style: {
-                      color: 'green'
-                    }
-                  },
-                  this.$options.filters.unitPrice(params.row.money, '+ ¥')
-                )
-              ]);
-            } else if (params.row.money < 0) {
-              return h('div', [
-                h(
-                  'span',
-                  {
-                    style: {
-                      color: 'red'
-                    }
-                  },
-                  this.$options.filters.unitPrice(0 - params.row.money, '- ¥')
-                )
-              ]);
-            }
-          }
-        },
-        {
-          title: '变动日志',
-          key: 'detail'
-        }
-      ],
-      logColumnsData: {}, // 余额日志
-      // 充值记录
-      rechargeListColumns: [
-        {
-          title: '充值时间',
-          key: 'createTime',
-          width: 168
-        },
-        {
-          title: '支付单号',
-          key: 'rechargeSn',
-          width: 200
-        },
-        {
-          title: '充值金额',
-          key: 'rechargeMoney',
-          render: (h, params) => {
-            if (params.row.payStatus === 'PAID') {
-              return h('div', [h('span', {
-                style: {
-                  color: 'green'
-                }
-              }, this.$options.filters.unitPrice(params.row.rechargeMoney, '+ ¥'))]);
-            } else {
-              return h('div', [h('span', this.$options.filters.unitPrice(params.row.rechargeMoney, '¥'))]);
-            }
-          }
-        },
-        {
-          title: '支付状态',
-          key: 'payStatus',
-          render: (h, params) => {
-            if (params.row.payStatus === 'PAID') {
-              return h('div', [h('span', {}, '已付款')]);
-            } else if (params.row.payStatus === 'UNPAID') {
-              return h('div', [h('span', {}, '未付款')]);
-            } else if (params.row.payStatus === 'CANCEL') {
-              return h('div', [h('span', {}, '已取消')]);
-            }
-          }
-        },
-        {
-          title: '支付方式',
-          key: 'rechargeWay',
-          render: (h, params) => {
-            if (params.row.rechargeWay === 'ALIPAY') {
-              return h('div', [h('span', {}, '支付宝')]);
-            } else if (params.row.rechargeWay === 'WECHAT') {
-              return h('div', [h('span', {}, '微信')]);
-            } else if (params.row.rechargeWay === 'BANK_TRANSFER') {
-              return h('div', [h('span', {}, '线下转账')]);
-            } else {
-              return h('div', [h('span', {}, '')]);
-            }
-          }
-        },
-        {
-          title: '支付时间',
-          key: 'payTime',
-          width: 180
-        }
-      ],
-      rechargeListData: {}, // 充值记录数据
-      // 提现记录
-      withdrawApplyColumns: [
-        {
-          title: '申请时间',
-          key: 'createTime',
-          width: 168
-        },
-        {
-          title: '提现单号',
-          key: 'sn',
-          width: 200
-        },
-        {
-          title: '提现金额',
-          key: 'applyMoney',
-          width: 110,
-          render: (h, params) => {
-            if (params.row.applyStatus === 'VIA_AUDITING') {
-              return h('div', [h('span', {
-                style: {
-                  color: 'green'
-                }
-              }, this.$options.filters.unitPrice(params.row.applyMoney, '+ ¥'))]);
-            } else {
-              return h('div', [h('span', this.$options.filters.unitPrice(params.row.applyMoney, '¥'))]);
-            }
-          }
-        },
-        {
-          title: '提现状态',
-          key: 'applyStatus',
-          width: 95,
-          render: (h, params) => {
-            if (params.row.applyStatus === 'APPLY') {
-              return h('div', [h('span', {}, '申请中')]);
-            } else if (params.row.applyStatus === 'VIA_AUDITING') {
-              return h('div', [h('span', {}, '审核通过')]);
-            } else if (params.row.applyStatus === 'SUCCESS') {
-              return h('div', [h('span', {}, '提现成功')]);
-            } else if (params.row.applyStatus === 'ERROR') {
-              return h('div', [h('span', {}, '提现失败')]);
-            } else {
-              return h('div', [h('span', {}, '审核拒绝')]);
-            }
-          }
-        },
-        {
-          title: '审核时间',
-          key: 'inspectTime',
-          width: 168
-        },
-        {
-          title: '审核备注',
-          key: 'inspectRemark',
-          tooltip: true
-
-        }
-      ],
-      withdrawApplyColumnsListData: {} // 提现记录
+      logColumnsData: {},
+      rechargeListData: {},
+      withdrawApplyColumnsListData: {}
    };
  },
  mounted() {
@@ -548,7 +423,7 @@ export default {
  margin: 10px 0;
 }

-.ivu-btn {
+.el-button {
  margin: 0 4px;
 }

--- a/buyer/src/pages/home/userCenter/MyGiftCards.vue
+++ b/buyer/src/pages/home/userCenter/MyGiftCards.vue
@@ -4,33 +4,33 @@

    <div class="bind-section mb_20">
      <div class="section-title">兑换礼品卡</div>
-      <Form ref="bindForm" :model="bindForm" :rules="bindRules" inline class="bind-form">
-        <FormItem label="卡号" prop="cardNo" :label-width="60">
-          <Input v-model="bindForm.cardNo" placeholder="请输入卡号" maxlength="64" style="width: 220px" />
-        </FormItem>
-        <FormItem label="兑换码" prop="cardSecret" :label-width="70">
-          <Input
+      <el-form ref="bindForm" :model="bindForm" :rules="bindRules" inline class="bind-form">
+        <el-form-item label="卡号" prop="cardNo" label-width="60px">
+          <el-input v-model="bindForm.cardNo" placeholder="请输入卡号" maxlength="64" style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="兑换码" prop="cardSecret" label-width="70px">
+          <el-input
            v-model="bindForm.cardSecret"
            type="password"
            placeholder="请输入兑换码（卡密）"
            maxlength="128"
            style="width: 220px"
          />
-        </FormItem>
-        <FormItem :label-width="0">
-          <Button type="primary" :loading="bindSubmitting" @click="submitBind">兑换</Button>
-        </FormItem>
-      </Form>
+        </el-form-item>
+        <el-form-item label-width="0px">
+          <el-button type="primary" :loading="bindSubmitting" @click="submitBind">兑换</el-button>
+        </el-form-item>
+      </el-form>
    </div>

-    <Tabs v-model="statusTab" class="status-tabs mb_16" @on-click="onStatusTab">
-      <TabPane label="可用" name="AVAILABLE" />
-      <TabPane label="不可用" name="UNAVAILABLE" />
-      <TabPane label="待激活" name="PENDING_ACTIVATION" />
-    </Tabs>
+    <el-tabs v-model="statusTab" class="status-tabs mb_16" @tab-click="(tab) => onStatusTab(tab.paneName)">
+      <el-tab-pane label="可用" name="AVAILABLE" />
+      <el-tab-pane label="不可用" name="UNAVAILABLE" />
+      <el-tab-pane label="待激活" name="PENDING_ACTIVATION" />
+    </el-tabs>

    <div class="card-list-wrap">
-      <Spin v-if="loading" fix />
+      <el-skeleton v-if="loading" fix />
      <template v-if="!loading">
        <empty v-if="list.length === 0" />
        <div v-else class="gift-card-grid">
@@ -51,7 +51,7 @@
            </div>
            <div class="gcc-card-body">
              <div class="gcc-row">
-                当前余额：<span class="gcc-strong" v-if="item.balance != null">￥{{ item.balance | unitPrice }}</span><span class="gcc-strong" v-else>—</span>
+                当前余额：<span class="gcc-strong" v-if="item.balance != null">￥{{ $filters.unitPrice(item.balance) }}</span><span class="gcc-strong" v-else>—</span>
              </div>
              
              <button
@@ -73,28 +73,23 @@
    </div>

    <div class="page-size">
-      <Page
-        :current="params.pageNumber"
+      <el-pagination         :current-page="params.pageNumber"
        :page-size="params.pageSize"
-        :page-size-opts="[10, 20, 50]"
+        :page-sizes="[10, 20, 50]"
        :total="total"
-        show-sizer
-        show-total
-        size="small"
-        transfer
-        @on-change="changePage"
-        @on-page-size-change="changePageSize"
-      />
+        small
+        @current-change="changePage"
+        @size-change="changePageSize"
+       layout="total, sizes, prev, pager, next" />
    </div>

-    <Modal v-model="noticeModal" title="使用须知" footer-hide width="520">
+    <el-dialog v-model="noticeModal" title="使用须知" footer-hide width="520">
      <p class="gcc-notice-text">
        请在有效期内使用本礼品卡；消费时将优先使用卡内余额。具体使用范围以活动规则为准。如有疑问请联系客服。
      </p>
      <div class="gcc-notice-footer">
-        <Button type="primary" @click="noticeModal = false">我知道了</Button>
-      </div>
-    </Modal>
+        <el-button type="primary" @click="noticeModal = false">我知道了</el-button>
+      </div></el-dialog>
  </div>
 </template>

@@ -314,7 +309,7 @@ export default {
    gap: 4px 8px;
  }
  .status-tabs {
-    ::v-deep .ivu-tabs-bar {
+    :deep(.el-tabs__header) {
      margin-bottom: 0;
    }
  }
--- a/buyer/src/pages/home/userCenter/MyTracks.vue
+++ b/buyer/src/pages/home/userCenter/MyTracks.vue
@@ -2,7 +2,7 @@
  <div class="wrapper">
    <!-- 卡片组件 -->
    <card _Title="我的足迹" :_Size="16"></card>
-    <Button class="del-btn" @click="clearAll" type="primary">删除全部</Button>
+    <el-button class="del-btn" @click="clearAll" type="primary">删除全部</el-button>
    <!-- 订单列表 -->
    <empty v-if="list.length === 0" />
    <ul class="track-list" v-else>
@@ -13,29 +13,28 @@
      >
        <img :src="item.thumbnail" :alt="item.thumbnail" width="200" height="200" />
        <p class="ellipsis">{{ item.goodsName }}</p>
-        <p>{{ item.price | unitPrice("￥") }}</p>
+        <p>{{ $filters.unitPrice(item.price, "￥") }}</p>
        <span class="del-icon" @click.stop="clearById(item.goodsId)">
-          <Icon type="md-trash" />
+          <el-icon><Delete /></el-icon>
        </span>
      </li>
    </ul>
    <!-- 分页 -->
    <div class="page-size">
-      <Page
-        :total="total"
-        @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
+      <el-pagination         :total="total"
+        @current-change="changePageNum"
+        @size-change="changePageSize"
        :page-size="params.pageSize"
-        show-sizer
-      >
-      </Page>
+       layout="sizes, prev, pager, next"></el-pagination>
    </div>
  </div>
 </template>

 <script>
+import { Delete } from '@element-plus/icons-vue';
 import { tracksList, clearTracks, clearTracksById } from "@/api/member";
 export default {
+  components: { Delete },
  name: "MyTrack",
  data() {
    return {
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -9,13 +9,13 @@
      </div>
      <div class="cart-steps">
        <span :class="stepIndex == 1 ? 'active' : ''">1.我的购物车</span>
-        <Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
+        <i class="icomoon icon-next" :class="stepIndex == 1 ? 'active-arrow' : ''"></i>
        <span :class="stepIndex == 1 ? 'active' : ''">2.填写订单信息</span>
-        <Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
+        <i class="icomoon icon-next" :class="stepIndex == 1 ? 'active-arrow' : ''"></i>
        <span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
      </div>
    </div>
-    <Divider />
+    <el-divider />
    <div class="content width_1200">
      <!-- 收货地址 -->
      <div class="address" v-if="selectedDeliverMethod === 'LOGISTICS' && goodsType !== 'VIRTUAL_GOODS'">
@@ -30,13 +30,13 @@
            :key="index">
            <div>
              <span>{{ item.name }}</span>
-              <Tag class="ml_10" v-if="item.isDefault" color="red">默认</Tag>
-              <Tag class="ml_10" v-if="item.alias" color="warning">{{ item.alias }}
-              </Tag>
+              <el-tag class="ml_10" v-if="item.isDefault" color="red">默认</el-tag>
+              <el-tag class="ml_10" v-if="item.alias" color="warning">{{ item.alias }}
+              </el-tag>
            </div>
            <div>{{ item.mobile }}</div>
            <div>
-              {{ item.consigneeAddressPath | unitAddress }} {{ item.detail }}
+              {{ $filters.unitAddress(item.consigneeAddressPath) }} {{ item.detail }}
            </div>
            <div class="edit-btn" v-show="showEditBtn === index">
              <span @click.stop="editAddress(item.id)">修改</span>
@@ -44,18 +44,18 @@
            </div>
            <div class="corner-icon" v-show="selectedAddress.id === item.id">
              <div></div>
-              <Icon type="md-checkmark" />
+              <el-icon><Check /></el-icon>
            </div>
          </div>
          <div class="add-address" @click="editAddress('')">
-            <Icon type="ios-add-circle-outline" />
+            <el-icon><Plus /></el-icon>
            <div>添加新地址</div>
          </div>
        </div>
        <div class="more-addr" @click="moreAddr = !moreAddr" v-if="addressList.length > 3">
          {{ moreAddr ? "收起地址" : "更多地址" }}
-          <Icon v-show="!moreAddr" type="md-arrow-dropdown" />
-          <Icon v-show="moreAddr" type="md-arrow-dropup" />
+          <el-icon :v-show="!moreAddr"><ArrowDown /></el-icon>
+          <el-icon :v-show="moreAddr"><ArrowUp /></el-icon>
        </div>
      </div>

@@ -73,18 +73,18 @@
            </div>
            <div>{{ item.mobile }}</div>
            <div>
-              {{ item.address | unitAddress }} {{ item.detail }}
+              {{ $filters.unitAddress(item.address) }} {{ item.detail }}
            </div>
            <div class="corner-icon" v-show="selectedStoreAddress.id === item.id">
              <div></div>
-              <Icon type="md-checkmark" />
+              <el-icon><Check /></el-icon>
            </div>
          </div>
        </div>
        <div class="more-addr" @click="storeMoreAddr = !storeMoreAddr" v-if="addressList.length > 3">
          {{ storeMoreAddr ? "收起地址" : "更多地址" }}
-          <Icon v-show="!storeMoreAddr" type="md-arrow-dropdown" />
-          <Icon v-show="storeMoreAddr" type="md-arrow-dropup" />
+          <el-icon :v-show="!storeMoreAddr"><ArrowDown /></el-icon>
+          <el-icon :v-show="storeMoreAddr"><ArrowUp /></el-icon>
        </div>
      </div>
      <div>
@@ -102,7 +102,7 @@
            <div>{{ item.label }}</div>
            <div class="corner-icon" v-show="selectedDeliverMethod === item.value">
              <div></div>
-              <Icon type="md-checkmark" />
+              <el-icon><Check /></el-icon>
            </div>
          </div>
        </div>
@@ -132,18 +132,14 @@
                      goods.goodsSku.goodsName
                  }}</span>
                </span>
-                <span class="goods-price">{{
-                    goods.purchasePrice | unitPrice("￥")
-                }}</span>
+                <span class="goods-price">{{ $filters.unitPrice(goods.purchasePrice, "￥") }}</span>
                <span>x{{ goods.num }}</span>
                <span>{{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}</span>
-                <span class="goods-price">{{
-                    goods.subTotal | unitPrice("￥")
-                }}</span>
+                <span class="goods-price">{{ $filters.unitPrice(goods.subTotal, "￥") }}</span>
              </div>
            </div>
            <div class="order-mark">
-              <Input type="textarea" maxlength="60" v-model="shop.remark" show-word-limit placeholder="订单备注" />
+              <el-input type="textarea" maxlength="60" v-model="shop.remark" show-word-limit placeholder="订单备注" />
              <span style="font-size: 12px; color: #999">提示：请勿填写有关支付、收货、发票方面的信息</span>
            </div>
          </div>
@@ -153,7 +149,7 @@
      <div class="invoice">
        <div class="card-head mt_20 mb_20">
          <span class="relative">发票信息<span class="inv-tips">
-              <Icon type="ios-alert-outline" />开企业抬头发票须填写纳税人识别号，以免影响报销
+              <el-icon><Warning /></el-icon>开企业抬头发票须填写纳税人识别号，以免影响报销
            </span></span>
        </div>
        <div class="inovice-content">
@@ -175,9 +171,7 @@
          <li v-for="(item, index) in couponList" class="coupon-item" :key="index">
            <div class="c-left">
              <div>
-                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{
-                    item.price | unitPrice
-                }}</span></span>
+                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
                <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{
                    item.discount
                }}</span>折</span>
@@ -201,12 +195,11 @@
          <div class="pay-gcc-title">
            使用礼品卡
            <span class="pay-gcc-deduct">
-              (已抵扣 <span class="pay-gcc-deduct-num">{{ giftCardDeductAmount | unitPrice("¥") }}</span
-              >)
+              (已抵扣 <span class="pay-gcc-deduct-num">{{ $filters.unitPrice(giftCardDeductAmount, "¥") }}</span>)
            </span>
          </div>
          <a href="javascript:void(0)" class="pay-gcc-help" @click.prevent="giftCardNoticeModal = true">
-            使用说明 <Icon type="ios-help-circle-outline" />
+            使用说明 <el-icon><Help /></el-icon>
          </a>
        </div>
        <div class="pay-gcc-body">
@@ -234,14 +227,14 @@
                        </div>
                      </div>
                      <div class="pay-gcc-balance-row">
-                        <span class="pay-gcc-amt">¥{{ item.balance != null ? (item.balance | unitPrice) : "0.00" }}</span>
+                        <span class="pay-gcc-amt">¥{{ item.balance != null ? $filters.unitPrice(item.balance) : "0.00" }}</span>
                        <span class="pay-gcc-bal-label">余额</span>
                      </div>
                      <div class="pay-gcc-no">{{ item.cardNo }}</div>
                    </div>
                  </div>
                  <div v-if="isGiftCardSelected(item)" class="pay-gcc-corner">
-                    <Icon type="md-checkmark" />
+                    <el-icon><Check /></el-icon>
                  </div>
                </div>
              </div>
@@ -252,28 +245,26 @@
      <!-- 订单价格 -->
      <div class="order-price">
        <div>
-          <span>{{ totalNum }}件商品，总商品金额：</span><span>{{ priceDetailDTO.goodsPrice | unitPrice("￥") }}</span>
+          <span>{{ totalNum }}件商品，总商品金额：</span><span>{{ $filters.unitPrice(priceDetailDTO.goodsPrice, "￥") }}</span>
        </div>
        <div v-if="priceDetailDTO.freightPrice > 0">
-          <span>运费：</span><span>{{ priceDetailDTO.freightPrice | unitPrice("￥") }}</span>
+          <span>运费：</span><span>{{ $filters.unitPrice(priceDetailDTO.freightPrice, "￥") }}</span>
        </div>
        <div v-if="priceDetailDTO.discountPrice > 0">
-          <span>优惠金额：</span><span>-{{ priceDetailDTO.discountPrice | unitPrice("￥") }}</span>
+          <span>优惠金额：</span><span>-{{ $filters.unitPrice(priceDetailDTO.discountPrice, "￥") }}</span>
        </div>
        <div v-if="priceDetailDTO.couponPrice > 0">
-          <span>优惠券金额：</span><span>-{{ priceDetailDTO.couponPrice | unitPrice("￥") }}</span>
+          <span>优惠券金额：</span><span>-{{ $filters.unitPrice(priceDetailDTO.couponPrice, "￥") }}</span>
        </div>
        <div v-if="giftCardDeductAmount > 0">
-          <span>礼品卡抵扣：</span><span>-{{ giftCardDeductAmount | unitPrice("￥") }}</span>
+          <span>礼品卡抵扣：</span><span>-{{ $filters.unitPrice(giftCardDeductAmount, "￥") }}</span>
        </div>

        <div v-if="$route.query.way === 'POINTS'">
          <span>应付积分：</span><span class="actrual-price">{{ priceDetailDTO.payPoint }}</span>
        </div>
        <div v-else>
-          <span>应付金额：</span><span class="actrual-price">{{
-              priceDetailDTO.flowPrice | unitPrice("￥")
-          }}</span>
+          <span>应付金额：</span><span class="actrual-price">{{ $filters.unitPrice(priceDetailDTO.flowPrice, "￥") }}</span>
        </div>
      </div>
    </div>
@@ -281,7 +272,7 @@
    <div class="order-footer width_1200">
      <div class="pay ml_20" @click="pay">提交订单</div>
      <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'LOGISTICS'">
-        配送至：{{ selectedAddress.consigneeAddressPath | unitAddress }}
+        配送至：{{ $filters.unitAddress(selectedAddress.consigneeAddressPath) }}
        {{ selectedAddress.detail }}&nbsp;&nbsp;收货人：{{
            selectedAddress.name
        }}&nbsp;&nbsp;{{ selectedAddress.mobile }}
@@ -295,18 +286,18 @@
    <invoice-modal ref="invModal" :invoiceData="invoiceData" @change="getInvMsg" />
    <!-- 选择地址模态框 -->
    <address-manage ref="address" :id="addrId" @change="addrChange"></address-manage>
-    <Modal v-model="giftCardNoticeModal" title="礼品卡使用说明" footer-hide width="520">
+    <el-dialog v-model="giftCardNoticeModal" title="礼品卡使用说明" footer-hide width="520">
      <p class="pay-gcc-notice-p">
        请在礼品卡有效期内使用；结算时勾选礼品卡即可按规则抵扣订单金额，可与优惠券等活动叠加规则以平台说明为准。放弃勾选或取消抵扣将恢复对应余额。
      </p>
      <div class="pay-gcc-notice-foot">
-        <Button type="primary" @click="giftCardNoticeModal = false">我知道了</Button>
-      </div>
-    </Modal>
+        <el-button type="primary" @click="giftCardNoticeModal = false">我知道了</el-button>
+      </div></el-dialog>
  </div>
 </template>

 <script>
+import { ArrowDown, ArrowUp, Check, Help, Plus, Warning } from '@element-plus/icons-vue';
 import invoiceModal from "@/components/invoiceModal";
 import addressManage from "@/components/addressManage";
 import { memberAddress, delMemberAddress } from "@/api/address";
@@ -928,7 +919,7 @@ export default {
    padding: 0 15px;
  }

-  .ivu-icon {
+  .el-icon {
    @include content_color($light_content_color);
    font-size: 20px;
    margin: 0 15px;
@@ -1008,7 +999,7 @@ export default {
        border-right: 20px solid $theme_color;
      }

-      .ivu-icon {
+      .el-icon {
        font-size: 12px;
        position: absolute;
        bottom: 0;
@@ -1045,7 +1036,7 @@ export default {
    justify-content: center;
    flex-direction: column;

-    .ivu-icon {
+    .el-icon {
      font-size: 24px;
    }

@@ -1091,7 +1082,7 @@ export default {
        border-right: 20px solid $theme_color;
      }

-      .ivu-icon {
+      .el-icon {
        font-size: 12px;
        position: absolute;
        bottom: 0;
@@ -1115,7 +1106,7 @@ export default {
  >span:nth-child(1) {
    font-weight: bold;

-    .ivu-icon {
+    .el-icon {
      color: #ff8f23;

      &:hover {
@@ -1232,7 +1223,7 @@ export default {
      left: -9px;
    }

-    .ivu-icon {
+    .el-icon {
      color: #ff8f23;
      margin-right: 3px;
      font-size: 16px;
@@ -1333,7 +1324,7 @@ export default {
  }
 }

-.ivu-divider {
+.el-divider {
  background: $theme_color;
  height: 2px;
 }
@@ -1551,7 +1542,7 @@ export default {
  background: #e54d42;
  transform: rotate(45deg);
 }
-.pay-gcc-corner .ivu-icon {
+.pay-gcc-corner .el-icon {
  position: absolute;
  right: 3px;
  bottom: 3px;
--- a/buyer/src/pages/payment/PayDone.vue
+++ b/buyer/src/pages/payment/PayDone.vue
@@ -5,9 +5,9 @@
      <img src="../../assets/images/pay-success.png">
    </div>
    <div class="pay-btn">
-      <Button type="primary" @click="$router.push('/')">继续逛逛</Button>
-      <Button type="info" v-if="$route.query.orderType ==='RECHARGE'" @click="$router.push('/home/MoneyManagement')">查看余额</Button>
-      <Button type="info" v-else @click="$router.push('/home/myOrder')">查看订单</Button>
+      <el-button type="primary" @click="$router.push('/')">继续逛逛</el-button>
+      <el-button type="info" v-if="$route.query.orderType ==='RECHARGE'" @click="$router.push('/home/MoneyManagement')">查看余额</el-button>
+      <el-button type="info" v-else @click="$router.push('/home/myOrder')">查看订单</el-button>
    </div>
  </div>
 </template>
--- a/buyer/src/pages/payment/PayMent.vue
+++ b/buyer/src/pages/payment/PayMent.vue
@@ -6,19 +6,11 @@
        <div class="left-tips">订单提交成功，请尽快付款！</div>
        <div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
        <div class="left-tips-count-down">
-          <mv-count-down :startTime="startTime" class="count-down"
-            :endTime="endTime"
-            :endText="endText"
-            :dayTxt="'天'"
-            :hourTxt="'小时'"
-            :minutesTxt="'分钟'"
-            :secondsTxt="'秒'"
-            :isStart="isStart"></mv-count-down>
-
+          <span class="count-down">{{ countdownText }}</span>
        </div>
      </div>
      <div class="head-right">
-        <div>应付金额 <span class="price">{{ payDetail.price | unitPrice }}</span>元</div>
+        <div>应付金额 <span class="price">{{ $filters.unitPrice(payDetail.price) }}</span>元</div>
      </div>
    </div>
    <div class="wrapper-box">
@@ -35,9 +27,9 @@
        <span>微信</span>
      </div>
      <div v-if="support.includes('WALLET') && $route.query.orderType !== 'RECHARGE'" class="-box-item" @click="handlePay('WALLET')">
-        <Icon custom="icomoon icon-wallet" size="60"/>
+        <i class="icomoon icon-wallet" style="font-size: 60px"></i>
        <span>余额支付</span>
-        <span>当前剩余({{ walletValue | unitPrice('￥') }})</span>
+        <span>当前剩余({{ $filters.unitPrice(walletValue, '￥') }})</span>
      </div>
    </div>
    <BaseFooter></BaseFooter>
@@ -46,25 +38,34 @@
 <script>

 import {tradeDetail, pay} from '@/api/pay.js';
-import MvCountDown from 'mv-count-down'
-import {Message} from 'view-design';
+import { Message } from '@/utils/message';

 export default {
-  components: {
-    MvCountDown
-  },
  data () {
    return {
-      payDetail: {}, // 支付详情
-      support: [], // 支持配送方式
-      walletValue: 0, // 当前余额
-      qrcode: '', // 支付二维码
-      startTime: new Date().getTime(), // 开始时间（时间戳）
-      endTime: 0, // 完成的时间（时间戳）
-      endText: '订单已超时取消', // 倒计时完成的提示文本
-      isStart: false // 控制倒计时开始的时机（异步请求完成开启）
+      payDetail: {},
+      support: [],
+      walletValue: 0,
+      qrcode: '',
+      endTime: 0,
+      endText: '订单已超时取消',
+      isStart: false,
+      now: Date.now(),
+      countdownTimer: null,
    };
  },
+  computed: {
+    countdownText () {
+      if (!this.isStart || !this.endTime) return '';
+      const diff = this.endTime - this.now;
+      if (diff <= 0) return this.endText;
+      const days = Math.floor(diff / 86400000);
+      const hours = Math.floor((diff % 86400000) / 3600000);
+      const minutes = Math.floor((diff % 3600000) / 60000);
+      const seconds = Math.floor((diff % 60000) / 1000);
+      return `${days}天${hours}小时${minutes}分钟${seconds}秒`;
+    },
+  },
  methods: {
    // 获取订单详情
    getTradeDetail () {
@@ -118,7 +119,13 @@ export default {
  },
  mounted () {
    this.getTradeDetail();
-  }
+    this.countdownTimer = setInterval(() => {
+      this.now = Date.now();
+    }, 1000);
+  },
+  beforeUnmount () {
+    if (this.countdownTimer) clearInterval(this.countdownTimer);
+  },
 };
 </script>
 <style scoped lang="scss">
--- a/buyer/src/pages/payment/ThirdPay.vue
+++ b/buyer/src/pages/payment/ThirdPay.vue
@@ -7,7 +7,7 @@
        <div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
      </div>
      <div class="head-right">
-        <div>应付金额 <span class="price">{{$route.query.price | unitPrice}}</span>元</div>
+        <div>应付金额 <span class="price">{{ $filters.unitPrice($route.query.price) }}</span>元</div>
      </div>
    </div>
    <div class="content">
@@ -17,14 +17,14 @@
          <vue-qr :text="qrcode" :margin="0" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
        </div>
        <div class="intro">
-          <Icon type="md-qr-scanner" /> 请使用{{params.paymentMethod === 'ALIPAY' ? '支付宝' : '微信'}}扫码付款
+          <el-icon><Iphone /></el-icon> 请使用{{params.paymentMethod === 'ALIPAY' ? '支付宝' : '微信'}}扫码付款
        </div>
      </div>
      <div class="btn-div">
        <p class="mb_10">支付成功后自动跳转，如未跳转请点击按钮手动跳转。。。</p>
        <div>
-          <Button @click="handlePay">重新支付</Button>
-          <Button type="success" @click="$router.push('/payDone')">支付成功</Button>
+          <el-button @click="handlePay">重新支付</el-button>
+          <el-button type="success" @click="$router.push('/payDone')">支付成功</el-button>
        </div>
      </div>
      <a @click="$router.back()">选择其他支付方式></a>
@@ -33,10 +33,11 @@
  </div>
 </template>
 <script>
+import { Iphone } from '@element-plus/icons-vue';
 import vueQr from 'vue-qr';
 import { payCallback, pay } from '@/api/pay.js';
 export default {
-  components: { vueQr },
+  components: { vueQr, Iphone },
  data () {
    return {
      qrcode: '', // 二维码
--- a/buyer/src/pages/promotion/PointGoodsDetail.vue
+++ b/buyer/src/pages/promotion/PointGoodsDetail.vue
@@ -4,10 +4,10 @@
    <Search style="border-bottom:2px solid red;"></Search>
    <!-- <drawer></drawer> -->
    <div class="base-width cate-container">
-      <Breadcrumb>
-        <BreadcrumbItem to="/">首页</BreadcrumbItem>
-        <BreadcrumbItem>{{goodsMsg.pointsGoodsCategoryName}}</BreadcrumbItem>
-      </Breadcrumb>
+      <el-breadcrumb>
+        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{goodsMsg.pointsGoodsCategoryName}}</el-breadcrumb-item>
+      </el-breadcrumb>
    </div>
    <!-- 商品信息展示 -->
    <div class="item-detail-show">
@@ -15,7 +15,13 @@
      <div class="item-detail-left">
        <!-- 大图、放大镜 -->
        <div class="item-detail-big-img">
-          <pic-zoom v-if="goodsSku.thumbnail" :url="goodsSku.thumbnail" :scale="2"></pic-zoom>
+          <el-image
+            v-if="goodsSku.thumbnail"
+            :src="goodsSku.thumbnail"
+            :preview-src-list="[goodsSku.thumbnail]"
+            fit="contain"
+            style="width: 100%; height: 400px"
+          />
        </div>
        <div class="item-detail-img-row">
          <div class="item-detail-img-small">
@@ -49,7 +55,7 @@
              <p>数量</p>
            </div>
            <div class="item-select-row">
-              <InputNumber :min="1" :disabled="goodsSku.quantity === 0" v-model="count"></InputNumber>
+              <el-input-number :min="1" :disabled="goodsSku.quantity === 0" v-model="count"></el-input-number>
              <span class="inventory"> 库存{{goodsSku.quantity}}</span>
            </div>
          </div>
@@ -62,7 +68,7 @@
            </div>
          </div>
          <div class="add-buy-car">
-            <Button type="error" :loading="loading" :disabled="goodsSku.quantity === 0" @click="pointBuy">积分购买</Button>
+            <el-button type="danger" :loading="loading" :disabled="goodsSku.quantity === 0" @click="pointBuy">积分购买</el-button>
          </div>
        </div>
      </div>
@@ -73,14 +79,13 @@
      <div v-html="goodsSku.intro" class="mt_10 ml_10" v-if="goodsSku.intro"></div>
      <div v-else style="margin:20px;">暂无商品介绍</div>
    </div>
-    <Spin size="large" fix v-if="isLoading"></Spin>
+    <el-skeleton size="large" fix v-if="isLoading"></el-skeleton>
    <BaseFooter></BaseFooter>
  </div>
 </template>

 <script>
 import Search from '@/components/Search';
-import PicZoom from 'vue-piczoom';
 import { addCartGoods } from '@/api/cart.js';
 import { pointGoodsDetail } from '@/api/promotion';
 export default {
@@ -157,7 +162,7 @@ export default {
    }
  },
  components: {
-    Search, PicZoom
+    Search,
  }
 };
 </script>
--- a/buyer/src/pages/promotion/PointMall.vue
+++ b/buyer/src/pages/promotion/PointMall.vue
@@ -4,9 +4,9 @@
    <Search></Search>
    <cateNav></cateNav>
    <h3 class="promotion-decorate">积分商品</h3>
-    <Select @on-select="selectCate" size="small" class="cate-select-con" v-model="cateId">
-      <Option v-for="(cate, index) in cateList" :value="cate.id" :key="index">{{cate.name}}</Option>
-    </Select>
+    <el-select @select="selectCate" size="small" class="cate-select-con" v-model="cateId">
+      <el-option v-for="(cate, index) in cateList" :value="cate.id" :key="index">{{cate.name}}</el-option>
+    </el-select>
    <!-- 列表 -->
    <div class="goods-list">
      <empty v-if="goodsList.length === 0" />
@@ -29,8 +29,7 @@
          <span>{{ item.goodsSku.goodsName }}</span>
        </div>
        <div class="goods-show-num">
-          已有<span>{{ item.commentNum || 0 }}</span
-          >人评价
+          已有<span>{{ item.commentNum || 0 }}</span>人评价
        </div>
        <div class="goods-show-seller">
          <span>{{ item.storeName }}</span>
@@ -38,12 +37,9 @@
      </div>
    </div>
    <div class="page-size">
-      <Page :total="total" @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :page-size="params.pageSize"
-        show-total
-        show-sizer>
-      </Page>
+      <el-pagination :total="total" @current-change="changePageNum"
+        @size-change="changePageSize"
+        :page-size="params.pageSize" layout="total, sizes, prev, pager, next"></el-pagination>
    </div>
    <BaseFooter></BaseFooter>
  </div>
--- a/buyer/src/pages/promotion/seckill.vue
+++ b/buyer/src/pages/promotion/seckill.vue
@@ -32,12 +32,8 @@
        </div>
        <div class="goods-show-price">
          <span>
-            <span class="seckill-price text-danger">{{
-              item.price | unitPrice("￥")
-            }}</span>
-            <span style="color: #999; text-decoration: line-through">{{
-              item.originalPrice | unitPrice("￥")
-            }}</span>
+            <span class="seckill-price text-danger">{{ $filters.unitPrice(item.price, "￥") }}</span>
+            <span style="color: #999; text-decoration: line-through">{{ $filters.unitPrice(item.originalPrice, "￥") }}</span>
          </span>
        </div>
        <div class="goods-show-detail" style="margin-bottom: 20px">
@@ -59,12 +55,15 @@
                (item.salesNum / (item.quantity)) * 100
              )
              : 100) + "%"
-          }}</span><Progress hide-info stroke-color="#df0021" style="width: 110px" class="ml_10" :percent="item.quantity && item.quantity > 0
-      ? Math.ceil(
-        (item.salesNum / (item.quantity)) * 100
-      )
-      : 100
-    " />
+          }}</span><el-progress
+            :show-text="false"
+            color="#df0021"
+            style="width: 110px"
+            class="ml_10"
+            :percentage="item.quantity && item.quantity > 0
+              ? Math.ceil((item.salesNum / item.quantity) * 100)
+              : 100"
+          />
        </div>
        <div class="goods-show-seller">
          <span>{{ item.storeName }}</span>
@@ -88,8 +87,7 @@ export default {
      nowHour: new Date().getHours(), // 当前小时数
    };
  },
-  beforeDestroy () {
-    // 销毁前清除定时器
+  beforeUnmount () {
    clearInterval(this.interval);
  },
  watch: {
@@ -265,7 +263,7 @@ export default {
  justify-content: center;
 }

-.ivu-progress-success .ivu-progress-bg {
-  background-color: #111fff;
+.el-progress-bar__inner {
+  background-color: #df0021;
 }
 </style>
--- a/buyer/src/pages/shopEntry/FirstApply.vue
+++ b/buyer/src/pages/shopEntry/FirstApply.vue
@@ -1,79 +1,78 @@
 <template>
  <div class="company-msg">
-    <Form ref="firstForm" :model="form" :rules="rules" :label-width="140">
+    <el-form ref="firstForm" :model="form" :rules="rules" label-width="140px">
      <h4>基础信息</h4>
-      <FormItem prop="companyName" label="公司名称">
-        <Input
+      <el-form-item prop="companyName" label="公司名称">
+        <el-input
          type="text"
          v-model="form.companyName"
          placeholder="请填写公司信息"
        />
-      </FormItem>
-      <FormItem prop="companyAddressIdPath" label="公司所在地">
+      </el-form-item>
+      <el-form-item prop="companyAddressIdPath" label="公司所在地">
        <span>{{ form.companyAddressPath || '暂无地址' }}</span>
-        <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
-      </FormItem>
-      <FormItem prop="companyAddress" label="公司详细地址">
-        <Input
+        <el-button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</el-button>
+      </el-form-item>
+      <el-form-item prop="companyAddress" label="公司详细地址">
+        <el-input
          type="text"
          v-model="form.companyAddress"
          placeholder="请填写公司详细信息"
        />
-      </FormItem>
-      <FormItem prop="employeeNum" label="员工总数">
-        <Input
+      </el-form-item>
+      <el-form-item prop="employeeNum" label="员工总数">
+        <el-input
          type="text"
          v-model="form.employeeNum"
          placeholder="请填写公司员工总数"
-          ><span slot="append">人</span>
-          </Input>
-      </FormItem>
-      <FormItem prop="companyPhone" label="公司电话">
-        <Input
+          ><template #append><span>人</span></template></el-input>
+      </el-form-item>
+      <el-form-item prop="companyPhone" label="公司电话">
+        <el-input
          type="text"
          v-model="form.companyPhone"
          placeholder="请填写公司电话"
-          ></Input>
-      </FormItem>
-      <FormItem prop="registeredCapital" label="注册资金">
-        <Input
+          ></el-input>
+      </el-form-item>
+      <el-form-item prop="registeredCapital" label="注册资金">
+        <el-input
          type="text"
          v-model="form.registeredCapital"
          placeholder="请填写注册资金"
-          ><span slot="append">万元</span></Input>
-      </FormItem>
-      <FormItem prop="linkName" label="联系人姓名">
-        <Input
+          ><template #append><span>万元</span></template></el-input>
+      </el-form-item>
+      <el-form-item prop="linkName" label="联系人姓名">
+        <el-input
          type="text"
          v-model="form.linkName"
          placeholder="请填写联系人姓名"
        />
-      </FormItem>
-      <FormItem prop="linkPhone" label="联系人电话">
-        <Input
+      </el-form-item>
+      <el-form-item prop="linkPhone" label="联系人电话">
+        <el-input
          type="text"
          v-model="form.linkPhone"
          placeholder="请填写联系人电话"
        />
-      </FormItem>
-      <FormItem prop="companyEmail" label="电子邮箱">
-        <Input
+      </el-form-item>
+      <el-form-item prop="companyEmail" label="电子邮箱">
+        <el-input
          type="text"
          v-model="form.companyEmail"
          placeholder="请填写电子邮箱"
        />
-      </FormItem>
+      </el-form-item>

      <h4>营业执照信息</h4>
-      <FormItem prop="licenseNum" label="营业执照号">
-        <Input
+      <el-form-item prop="licenseNum" label="营业执照号">
+        <el-input
          type="text"
          v-model="form.licenseNum"
          placeholder="请填写营业执照号"
        />
-      </FormItem>
-      <FormItem prop="scope" label="法定经营范围">
-        <Input
+      </el-form-item>
+      <el-form-item prop="scope" label="法定经营范围">
+        <el-input
          type="textarea"
          v-model="form.scope"
          maxlength="200"
@@ -81,9 +80,9 @@
          :rows="4"
          placeholder="请输入营业执照所示经营范围"
        />
-      </FormItem>
-      <FormItem prop="licencePhoto" label="营业执照电子版">
-        <Upload
+      </el-form-item>
+      <el-form-item prop="licencePhoto" label="营业执照电子版">
+        <el-upload
          ref="uploadLicence"
          :show-upload-list="false"
          :on-success="handleSuccess"
@@ -97,8 +96,8 @@
          :action="action"
          :headers="accessToken"
        >
-          <Button type="info" :loading="uploadLoading">证照上传</Button>
-        </Upload>
+          <el-button type="info" :loading="uploadLoading">证照上传</el-button>
+        </el-upload>
        <div class="describe">
          请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败
        </div>
@@ -109,36 +108,30 @@
        >
          <img :src="item" width="100" alt="" />
          <div class="cover">
-            <Icon
-              type="ios-eye-outline"
-              @click.native="handleView(item)"
-            ></Icon>
-            <Icon
-              type="ios-trash-outline"
-              @click.native="handleRemove(index, 'licencePhoto')"
-            ></Icon>
+            <el-icon @click="handleView(item)"><View /></el-icon>
+            <el-icon @click="handleRemove(index, 'licencePhoto')"><Delete /></el-icon>
          </div>
        </div>
-      </FormItem>
+      </el-form-item>

      <h4>法人信息</h4>
-      <FormItem prop="legalName" label="法人姓名">
-        <Input
+      <el-form-item prop="legalName" label="法人姓名">
+        <el-input
          type="text"
          v-model="form.legalName"
          maxlength="20"
          placeholder="请输入法人姓名"
        />
-      </FormItem>
-      <FormItem prop="legalId" label="法人证件号">
-        <Input
+      </el-form-item>
+      <el-form-item prop="legalId" label="法人证件号">
+        <el-input
          type="text"
          v-model="form.legalId"
          placeholder="请输入法人证件号"
        />
-      </FormItem>
-      <FormItem prop="legalPhoto" label="法人证件电子版">
-        <Upload
+      </el-form-item>
+      <el-form-item prop="legalPhoto" label="法人证件电子版">
+        <el-upload
          ref="uploadLegal"
          :show-upload-list="false"
          :on-success="handleSuccess1"
@@ -152,8 +145,8 @@
          :action="action"
          :headers="accessToken"
        >
-          <Button type="info" :loading="uploadLoading1">证照上传</Button>
-        </Upload>
+          <el-button type="info" :loading="uploadLoading1">证照上传</el-button>
+        </el-upload>
        <div class="describe">
          请压缩图片在2M以内，身份证正反面两张照片，确保图片清晰无缺角
        </div>
@@ -164,38 +157,33 @@
        >
          <img :src="item" width="100" alt="" />
          <div class="cover">
-            <Icon
-              type="ios-eye-outline"
-              @click.native="handleView(item)"
-            ></Icon>
-            <Icon
-              type="ios-trash-outline"
-              @click.native="handleRemove(index, 'legalPhoto')"
-            ></Icon>
+            <el-icon @click="handleView(item)"><View /></el-icon>
+            <el-icon @click="handleRemove(index, 'legalPhoto')"><Delete /></el-icon>
          </div>
        </div>
-      </FormItem>
-      <FormItem>
-        <Button type="primary" :loading="loading" @click="next"
-          >填写财务资质信息</Button
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :loading="loading" @click="next"
+          >填写财务资质信息</el-button
        >
-      </FormItem>
-    </Form>
-    <Modal title="View Image" v-model="visible">
+      </el-form-item>
+    </el-form>
+    <el-dialog title="View Image" v-model="visible">
      <img :src="previewPicture" v-if="visible" style="width: 100%" />
-    </Modal>
+    </el-dialog>

    <multipleMap ref="map" @callback="getAddress" />
  </div>
 </template>
 <script>
+import { Delete, View } from '@element-plus/icons-vue';
 import { applyFirst } from '@/api/shopentry';
 import * as RegExp from '@/plugins/RegExp.js';
 import multipleMap from "@/components/map/multiple-map";
 import storage from '@/plugins/storage';
 import { commonUrl } from '@/plugins/request.js';
 export default {
-  components: { multipleMap },
+  components: { multipleMap, View, Delete },
  props: {
    content: {
      default: {},
@@ -262,11 +250,11 @@ 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.form, 'companyAddressIdPath', ids)
-        this.$set(this.form, 'companyAddressPath', paths)
+        this.form['companyAddressIdPath'] = ids
+        this.form['companyAddressPath'] = paths
      }else{
-        this.$set(this.form, 'companyAddressIdPath', val.data.addrId)
-        this.$set(this.form, 'companyAddressPath', val.data.addr)
+        this.form['companyAddressIdPath'] = val.data.addrId
+        this.form['companyAddressPath'] = val.data.addr
      }
    },

@@ -376,7 +364,7 @@ h4 {
  line-height: 40px;
  text-align: left;
 }
-.ivu-input-wrapper {
+.el-input {
  width: 300px;
 }
 .img-list {
--- a/buyer/src/pages/shopEntry/SecondApply.vue
+++ b/buyer/src/pages/shopEntry/SecondApply.vue
@@ -1,43 +1,43 @@
 <template>
  <div class="photo-msg">
-    <Form ref="secondForm" :model="form" :rules="rules" :label-width="140">
+    <el-form ref="secondForm" :model="form" :rules="rules" label-width="140px">
      <h4>基础信息</h4>
-      <FormItem prop="settlementBankAccountName" label="银行开户名">
-        <Input
+      <el-form-item prop="settlementBankAccountName" label="银行开户名">
+        <el-input
          type="text"
          v-model="form.settlementBankAccountName"
          placeholder="请填写银行开户名称"
        />
-      </FormItem>
-      <FormItem prop="settlementBankAccountNum" label="银行账号">
-        <Input
+      </el-form-item>
+      <el-form-item prop="settlementBankAccountNum" label="银行账号">
+        <el-input
          type="text"
          v-model="form.settlementBankAccountNum"
          placeholder="请填写银行账号"
        />
-      </FormItem>
-      <FormItem prop="settlementBankBranchName" label="开户银行支行名称">
-        <Input
+      </el-form-item>
+      <el-form-item prop="settlementBankBranchName" label="开户银行支行名称">
+        <el-input
          type="text"
          v-model="form.settlementBankBranchName"
          placeholder="请填写开户银行支行名称"
        />
-      </FormItem>
-      <FormItem prop="settlementBankJointName" label="支行联行号">
-        <Input
+      </el-form-item>
+      <el-form-item prop="settlementBankJointName" label="支行联行号">
+        <el-input
          type="text"
          v-model="form.settlementBankJointName"
          placeholder="请填写支行联行号"
        />
-      </FormItem>
+      </el-form-item>

-      <FormItem>
-        <Button @click="$emit('change', 0)">返回</Button>
-        <Button type="primary" :loading="loading" @click="next"
-          >填写其他信息</Button
+      <el-form-item>
+        <el-button @click="$emit('change', 0)">返回</el-button>
+        <el-button type="primary" :loading="loading" @click="next"
+          >填写其他信息</el-button
        >
-      </FormItem>
-    </Form>
+      </el-form-item>
+    </el-form>
  </div>
 </template>
 <script>
@@ -110,7 +110,7 @@ h4 {
  line-height: 40px;
  text-align: left;
 }
-.ivu-input-wrapper {
+.el-input {
  width: 300px;
 }
 </style>
--- a/buyer/src/pages/shopEntry/ShopEntry.vue
+++ b/buyer/src/pages/shopEntry/ShopEntry.vue
@@ -3,12 +3,12 @@
    <div style="height: 20px"></div>
    <div class="content">
      <h1>店铺入驻</h1>
-      <Steps :current="currentIndex" class="margin">
-        <Step title="企业资质信息"></Step>
-        <Step title="财务资质信息"></Step>
-        <Step title="其他信息"></Step>
-        <Step title="提交审核"></Step>
-      </Steps>
+      <el-steps :current="currentIndex" class="margin">
+        <el-step title="企业资质信息"></el-step>
+        <el-step title="财务资质信息"></el-step>
+        <el-step title="其他信息"></el-step>
+        <el-step title="提交审核"></el-step>
+      </el-steps>
      <first-apply v-if="currentIndex == 0 && dataReview" :content="firstData" @change="nextPage"></first-apply>

      <second-apply v-if="currentIndex == 1 && dataReview" :content="secondData" @change="nextPage"></second-apply>
@@ -21,24 +21,24 @@
        <span v-if="storeDisable == 'CLOSED'">店铺已关闭，重申请联系管理员</span>
        <span v-if="storeDisable == 'REFUSED'">审核未通过,请修改资质信息，如有疑问请联系管理员</span>
      </div>
-      <Button v-if="currentIndex === 3" @click="$router.push('/')">返回</Button>
+      <el-button v-if="currentIndex === 3" @click="$router.push('/')">返回</el-button>
      &nbsp;
-      <Button type="primary" @click='currentIndex = 0'
-        v-if="storeDisable === 'REFUSED' && currentIndex === 3">重新申请</Button>
+      <el-button type="primary" @click='currentIndex = 0'
+        v-if="storeDisable === 'REFUSED' && currentIndex === 3">重新申请</el-button>
    </div>

-    <Modal title="店铺入驻协议" v-model="showAgreement" width="1200" :closable="false" :mask-closable="false">
+    <el-dialog title="店铺入驻协议" v-model="showAgreement" width="1200" :closable="false" :close-on-click-modal="false">
      <Scroll :on-reach-bottom="handleReachBottom">
        <div class="agreeent-con" v-html="agreementCon"></div>
      </Scroll>

-      <div slot="footer" style="text-align: center">
+      <template #footer><div style="text-align: center">
        <p>
-          <Checkbox v-model="checked">我已同意以上协议</Checkbox>
+          <el-checkbox v-model="checked">我已同意以上协议</el-checkbox>
        </p>
-        <Button type="primary" :disabled="!checked" class="margin" @click="showAgreement = false">同意协议填写资质信息</Button>
-      </div>
-    </Modal>
+        <el-button type="primary" :disabled="!checked" class="margin" @click="showAgreement = false">同意协议填写资质信息</el-button>
+      </div></template>
+    </el-dialog>
  </div>
 </template>
 <script>
@@ -182,7 +182,7 @@ export default {
 }
 .agreeent-con {
  max-height: 500px;
-  ::v-deep img{
+  :deep img{
    max-width: 100%;

  }
--- a/buyer/src/pages/shopEntry/ThirdApply.vue
+++ b/buyer/src/pages/shopEntry/ThirdApply.vue
@@ -1,17 +1,17 @@
 <template>
  <div class="person-msg">
-    <Form ref="thirdForm" :model="form" :rules="rules" :label-width="140">
+    <el-form ref="thirdForm" :model="form" :rules="rules" label-width="140px">
      <h4>基础信息</h4>
-      <FormItem prop="storeName" label="店铺名称">
-        <Input
+      <el-form-item prop="storeName" label="店铺名称">
+        <el-input
          type="text"
          v-model="form.storeName"
          placeholder="请填写店铺名称"
        />
-      </FormItem>
+      </el-form-item>

-      <FormItem prop="storeLogo" label="店铺logo">
-        <Upload
+      <el-form-item prop="storeLogo" label="店铺logo">
+        <el-upload
          ref="uploadLogo"
          :show-upload-list="false"
          :on-success="handleSuccess"
@@ -25,8 +25,8 @@
          :action="action"
          :headers="accessToken"
        >
-          <Button type="info" :loading="uploadLoading">上传logo</Button>
-        </Upload>
+          <el-button type="info" :loading="uploadLoading">上传logo</el-button>
+        </el-upload>
        <div class="describe">请压缩图片在2M以内，格式为gif，jpg，png</div>
        <div
          class="img-list"
@@ -35,45 +35,38 @@
        >
          <img :src="item" width="100" height="" alt="" />
          <div class="cover">
-            <Icon
-              type="ios-eye-outline"
-              @click.native="handleView(item)"
-            ></Icon>
-            <Icon
-              type="ios-trash-outline"
-              @click.native="handleRemove(index, 'storeLogo')"
-            ></Icon>
+            <el-icon @click="handleView(item)"><View /></el-icon>
+            <el-icon @click="handleRemove(index, 'storeLogo')"><Delete /></el-icon>
          </div>
        </div>
-      </FormItem>
-      <FormItem prop="goodsManagementCategory" label="店铺经营类目">
-        <Select
+      </el-form-item>
+      <el-form-item prop="goodsManagementCategory" label="店铺经营类目">
+        <el-select
          v-model="form.goodsManagementCategory"
          multiple
          style="width: 300px"
        >
-          <Option
-            v-for="item in categoryList"
+          <el-option             v-for="item in categoryList"
            :value="item.id"
            :key="item.id"
-            >{{ item.name }}</Option
+            >{{ item.name }}</el-option
          >
-        </Select>
-      </FormItem>
+        </el-select>
+      </el-form-item>

-      <FormItem prop="storeAddressIdPath" label="店铺所在地">
+      <el-form-item prop="storeAddressIdPath" label="店铺所在地">
        <span>{{ form.storeAddressPath || '暂无地址' }}</span>
-        <Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
-      </FormItem>
-      <FormItem prop="storeAddressDetail" label="店铺详细地址">
-        <Input
+        <el-button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</el-button>
+      </el-form-item>
+      <el-form-item prop="storeAddressDetail" label="店铺详细地址">
+        <el-input
          type="text"
          v-model="form.storeAddressDetail"
          placeholder="请填写店铺详细地址"
        />
-      </FormItem>
-      <FormItem prop="storeDesc" label="店铺简介">
-        <Input
+      </el-form-item>
+      <el-form-item prop="storeDesc" label="店铺简介">
+        <el-input
          type="textarea"
          v-model="form.storeDesc"
          maxlength="200"
@@ -81,22 +74,23 @@
          :rows="4"
          placeholder="请输入店铺简介"
        />
-      </FormItem>
+      </el-form-item>

-      <FormItem>
-        <Button @click="$emit('change', 1)">返回</Button>
-        <Button type="primary" :loading="loading" @click="next"
-          >提交平台审核</Button
+      <el-form-item>
+        <el-button @click="$emit('change', 1)">返回</el-button>
+        <el-button type="primary" :loading="loading" @click="next"
+          >提交平台审核</el-button
        >
-      </FormItem>
-    </Form>
-    <Modal title="View Image" v-model="visible">
+      </el-form-item>
+    </el-form>
+    <el-dialog title="View Image" v-model="visible">
      <img :src="previewPicture" v-if="visible" style="width: 100%" />
-    </Modal>
+    </el-dialog>
    <multipleMap ref="map" @callback="getAddress" />
  </div>
 </template>
 <script>
+import { Delete, View } from '@element-plus/icons-vue';
 import { applyThird } from '@/api/shopentry';
 import { getCategory } from '@/api/goods';

@@ -114,7 +108,7 @@ export default {
      type: Object
    }
  },
-  components: { multipleMap },
+  components: { multipleMap, View, Delete },
  data () {
    return {
      loading: false, // 加载状态
@@ -211,17 +205,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.form, "storeAddressPath", paths);
-        this.$set(this.form, "storeAddressIdPath", ids);
+        this.form["storeAddressPath"] = paths;
+        this.form["storeAddressIdPath"] = ids;
        this.form.storeCenter = val.data[val.data.length - 1].center
      }else{
-        this.$set(this.form, "storeAddressPath", val.data.addr);
-        this.$set(this.form, "storeAddressIdPath", val.data.addrId);
-        this.$set(
-          this.form,
-          'storeCenter',
-          val.data.position.lng + ',' + val.data.position.lat
-        );
+        this.form["storeAddressPath"] = val.data.addr;
+        this.form["storeAddressIdPath"] = val.data.addrId;
+        
+          this.form['storeCenter'] = val.data.position.lng + ',' + val.data.position.lat
+        ;
      }
    },
    // 获取商品分类
@@ -264,7 +256,7 @@ h4 {
  line-height: 40px;
  text-align: left;
 }
-.ivu-input-wrapper {
+.el-input {
  width: 300px;
 }
 .img-list {
--- a/buyer/src/pages/user/Home.vue
+++ b/buyer/src/pages/user/Home.vue
@@ -3,15 +3,13 @@
    <BaseHeader></BaseHeader>

    <div class="container width_1200">
-      <Layout class="layoutAll">
-        <Sider class="side-bar" ref="side" :collapsed-width="78">
-          <Menu
+      <div class="layoutAll">
+        <el-aside class="side-bar" width="200px">
+          <el-menu
            class="side-menu"
-            theme="light"
-            width="auto"
-            :active-name="$route.name"
-            :open-names="['订单中心', '会员中心']"
-            @on-select="onSelect"
+            :default-active="$route.name"
+            :default-openeds="['订单中心', '会员中心']"
+            @select="onSelect"
          >
            <div class="user-icon">
              <div class="user-img">
@@ -21,68 +19,60 @@
                  v-if="userInfo.face"
                  alt
                />
-                <Avatar icon="ios-person" class="mb_10" v-else size="96" />
+                <el-avatar v-else :size="96" class="mb_10"><el-icon><User /></el-icon></el-avatar>
              </div>
              <p>{{ userInfo.nickName }}</p>
            </div>

-            <!--   循环导航栏       -->
-            <Submenu
-              v-for="(menu, index) in menuList"
-              :key="index"
-              :name="menu.title"
-            >
-              <template slot="title" v-if="menu.display">
-                <Icon type="location"></Icon>
+            <template v-for="(menu, index) in menuList" :key="index">
+              <el-sub-menu v-if="menu.display" :index="menu.title">
+                <template #title>
+                  <el-icon><Location /></el-icon>
                  <span>{{ menu.title }}</span>
                </template>
-              <MenuItem
+                <el-menu-item
                  v-for="(chlidren, i) in menu.menus"
                  :key="i"
-                :name="chlidren.path"
-                >{{ chlidren.title }}</MenuItem
-              >
-            </Submenu>
-          </Menu>
-        </Sider>
-        <Layout class="layout ml_10">
-          <Content class="content">
+                  :index="chlidren.path"
+                >{{ chlidren.title }}</el-menu-item>
+              </el-sub-menu>
+            </template>
+          </el-menu>
+        </el-aside>
+        <el-main class="content ml_10">
          <transition mode="out-in">
            <router-view></router-view>
          </transition>
-          </Content>
-        </Layout>
-      </Layout>
+        </el-main>
+      </div>
    </div>
  </div>
 </template>

 <script>
+import { Location, User } from '@element-plus/icons-vue';
 import menuList from "./menu";
 import Storage from "@/plugins/storage.js";

 export default {
+  components: { Location, User },
  name: "Home",
  data() {
    return {
-      menuList, // 会员中心左侧列表
+      menuList,
    };
  },
  computed: {
    userInfo() {
-      // 用户信息
      if (Storage.getItem("userInfo")) {
        return JSON.parse(Storage.getItem("userInfo"));
-      } else {
-        return {};
      }
+      return {};
    },
  },
-
  methods: {
-    // 每次点击左侧bar的callback
    onSelect(name) {
-      this.$router.push({ name: name });
+      this.$router.push({ name });
    },
  },
 };
@@ -110,6 +100,7 @@ export default {
 }

 .layoutAll {
+  display: flex;
  min-height: 1200px;
  @include background_color($light_background_color);
 }
@@ -141,7 +132,6 @@ export default {

 .layout-footer-center {
  padding: 0px 15px;
-
  padding-bottom: 15px;
  text-align: center;
 }
--- a/Show More
+++ b/Show More