首页分类

src/components/category.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="menuDiv">
-    <h3 v-if="showHeader">商品分类</h3>
+    <h3 v-if="showHeader">{{ $t("page.components.category.showHeader") }}</h3>
     <ul class="menuUl">
-      <li v-for="{ id, title, subList } in items" :key="id" class="menuli">
+      <li
+        v-for="({ id, title, subList }, index) in items"
+        :key="`menu-${index}`"
+        class="menuli"
+      >
         <div
           class="dalei"
           :class="{ curr: currPid === id }"
@@ -14,10 +18,10 @@
         </div>
         <div class="menuCon" v-if="subList.length">
           <div
-            v-for="{ id: sid, title: st } in subList"
-            :key="sid"
+            v-for="({ id: sid, title: st }, i) in subList"
+            :key="`menu-item-${i}`"
             :class="{ item: true, curr: currSid === sid }"
-            @click="() => setCurrIndex(sid, id)"
+            @click="() => setCurrIndex(sid)"
           >
             {{ st }}
           </div>
@@ -52,8 +56,8 @@ export default class extends Vue {
     return this.info.id;
   }
   @Emit("change")
-  setCurrIndex(id: number, pid = id) {
-    return { id, pid };
+  setCurrIndex(id: number) {
+    return id;
   }
 }
 </script>
@@ -124,7 +128,8 @@ export default class extends Vue {
     }
   }
   .menuCon {
-    overflow: scroll;
+    overflow: hidden;
+    // overflow: scroll;
     // width: 60rem;
     // min-height: 38rem;
     background: #fff;

src/components/loadMore.vue

@@ -18,7 +18,7 @@
         v-if="pageType === 'increase' && items.length < count"
         @click="load(params.pageNum + 1)"
       >
-        {{ loading ? `正在加载` : increaseText + "  v" }}
+        {{ loading ? `${$t(`loading`)}` : `${increaseText || $t("loadMore")}` }}
         <img v-if="loading" src="@assets/throbber.svg" />
         <!-- <img
           :src="require(`@assets/${loading ? `throbber.svg` : `throbber.svg`}`)"
@@ -30,7 +30,7 @@
       <div class="noneData">
         <img src="@assets/noneData.png" alt="" />
         <br />
-        <div>暂无数据</div>
+        <div>{{ $t("nodata") }}</div>
       </div>
     </template>
   </div>
@@ -63,7 +63,7 @@ export default class extends Vue {
   @PropSync("total") totalSync!: number;
   @Prop({ default: "pagination" })
   private readonly pageType!: "none" | "pagination" | "increase";
-  @Prop({ default: "点击加载更多" })
+  @Prop(String)
   private increaseText!: string;
   private count: number | null = null;
   private items: any[] = [];

src/components/userInfo.vue

@@ -3,20 +3,30 @@
     <div class="avatar">
       <img :src="require(`@assets/touxiang0${userName ? '2' : '1'}.png`)" />
     </div>
-    <div class="username">{{ userName || "您还未登录哦！" }}</div>
+    <div class="username">
+      {{ userName || `${$t("page.components.userInfo.username")}！` }}
+    </div>
     <div class="btns">
       <template v-if="userName">
         <router-link to="/editPassword">
-          <el-button class="left btn">修改信息</el-button>
+          <el-button class="left btn">{{
+            $t("page.components.userInfo.editPassword")
+          }}</el-button>
         </router-link>
-        <el-button class="right btn" @click="logout">退出登陆</el-button>
+        <el-button class="right btn" @click="logout">{{
+          $t("page.components.userInfo.logout")
+        }}</el-button>
       </template>
       <template v-else>
         <router-link to="/login">
-          <el-button class="left btn">登录</el-button>
+          <el-button class="left btn">{{
+            $t("page.components.userInfo.login")
+          }}</el-button>
         </router-link>
         <router-link to="/register">
-          <el-button class="right btn">注册</el-button>
+          <el-button class="right btn">{{
+            $t("page.components.userInfo.register")
+          }}</el-button>
         </router-link>
       </template>
     </div>
@@ -39,7 +49,12 @@ export default class extends Vue {
     return user.UserInfo && user.UserInfo.loginAccount;
   }
   async logout() {
-    if (!(await this.$confirm("是否退出登陆?").catch(x => false))) return;
+    if (
+      !(await this.$confirm(`${this.$i18n.t("message.confirm.logout")}`).catch(
+        x => false
+      ))
+    )
+      return;
     await this.$router.push("/login");
     user.clear();
   }

src/lang/zh.ts

@@ -1,13 +1,46 @@
 export default {
   title: "中国钢制家具产业聚集网",
   SLS: "切换语言成功",
+  inputPlaceholder: "请输入",
+  loading: "数据加载中...",
+  nodata: "暂无数据",
+  loadMore: "点击加载更多",
+  form: {
+    submit: "提交",
+    RegAccount: "密码必须为9到16位由数字字母组合",
+    loginAccount: "账号(手机号)",
+    loginPassword: "密码",
+    phone: "手机号码",
+    validatePhone: "请输入正确的手机号",
+    validateCode: "验证码",
+    getValidateCode: "获取验证码",
+    autoLogin: "自动登陆",
+    login: "登录",
+    register: "注册"
+  },
+  message: {
+    success: {
+      editPassword: "密码修改成功 请重新登陆",
+      cancelGz: "取消成功",
+      revocation: "撤销成功",
+      findPassword: "重设成功 请登陆",
+      login: "登陆成功",
+      register: "注册成功 请登陆",
+      infoAdd: "需求发布成功！"
+    },
+    confirm: {
+      cancelGz: "是否取消关注?",
+      revocation: "是否撤销该需求?",
+      logout: "是否退出登陆?"
+    }
+  },
   route: {
     home: "首页",
     mall: "在线商城",
     shops: "生产厂家",
     info: "需求供应",
     login: "登陆",
-    register: "注册",
+    register: "注册新账号",
     findPassword: "忘记密码",
     collect: "我的关注",
     issue: "我的需求",
@@ -20,7 +53,10 @@ export default {
     infoBuy: "求购信息详情",
     infoSell: "供应信息详情",
     infoAdd: "我要买",
-    news: "新闻内容"
+    news: "通知资讯",
+    newsDetail: "资讯详情",
+    user: "个人中心",
+    editPassword: "修改密码"
   },
   errCode: {
     "-100": "网络请求失败",
@@ -43,5 +79,158 @@ export default {
     "505": "接口请求失败", //暂不支持此种请求方式
     "506": "用户未登陆", //未登录（缺少Token）
     "507": "用户登陆超时" //token超时
+  },
+  page: {
+    components: {
+      category: {
+        showHeader: "商品分类"
+      },
+      userInfo: {
+        username: "您还未登录哦",
+        editPassword: "修改信息",
+        logout: "退出登陆",
+        login: "登录",
+        register: "注册"
+      }
+    },
+    layout: {
+      footer: {
+        item1: "新手指南",
+        item2: "商家服务",
+        item3: "常见问题",
+        item4: "关于我们",
+        item5: "平台客服",
+        bottom: "技术支持：神州数码通用软件(洛阳)有限公司"
+      },
+      header: {
+        hyn: "欢迎您",
+        login: "请登陆",
+        register: "免费注册",
+        shopEnter: "商家入驻",
+        productPublish: "商品发布",
+        searchProduct: "产品",
+        searchShops: "企业",
+        kw: "内容",
+        search: "搜索"
+      }
+    },
+    views: {
+      account: {
+        user: {
+          editPassword: {
+            oldPassword: "旧密码",
+            loginPassword: "新密码",
+            surePassword: "确认密码",
+            err1: "请再次输入密码",
+            err2: "两次输入密码不一致"
+          },
+          index: {
+            titles: "我的关注,我的需求",
+            tableIndex: "序号",
+            purchaseTitle: "需求标题",
+            summaryOfNeeds: "概要",
+            createTime: "发布时间",
+            status: "目前状态",
+            status1: "征集中",
+            status2: "已结束",
+            option: "操作",
+            revocation: "撤销",
+            public: "再次发布",
+            companyName: "商家名称",
+            primaryBusiness: "主营产品",
+            followDate: "关注日期",
+            inShop: "进入店铺",
+            cancelGz: "取消关注"
+          }
+        },
+        findPassword: {
+          title: "重设密码",
+          loginPassword: "新密码",
+          submit: "注册"
+        },
+        login: {
+          topTitle: "欢迎登录",
+          title: "账号登录"
+        },
+        register: {
+          title: "用户注册",
+          check: "我已阅读并同意",
+          protocol: "用户服务协议和平台免责条款",
+          validateCheck: "请同意免责条款"
+        }
+      },
+      home: {
+        noticeTitle: "通知公告",
+        fwTitle: "服务能力",
+        productTitle: "产品中心",
+        hotProducts: "热门商品",
+        newsProducts: "新品推荐",
+        ppTitle: "品牌商家",
+        primaryBusiness: "主营商品",
+        xqTitle: "需求供应",
+        gys: "供应商",
+        xq: "需求",
+        gy: "供应",
+        qg: "求购",
+        furniture: "家具保养",
+        industry: "行业资讯",
+        fwListText1: "家钢制家具生产企业入驻",
+        fwListText2: "个钢制家具产品入驻",
+        fwListText3: "位平台会员注册",
+        fwListText4: "万在线电商营业额"
+      },
+      info: {
+        buy: {
+          purchaseTitle: "求购",
+          summaryOfNeeds: "需求概要",
+          demandDetails: "需求详情",
+          contacts: "联 系 人",
+          contactNumber: "联系电话",
+          releaseTime: "发布时间"
+        },
+        sell: {
+          supplyTitle: "供应",
+          manufacturer: "生产厂家",
+          contacts: "联 系 人",
+          releaseTime: "发布时间",
+          telephone: "联系电话",
+          supplyDetails: "供应详情"
+        },
+        add: {
+          title: "服务能力",
+          purchaseTitle: "需求标题",
+          summaryOfNeeds: "需求概要",
+          demandDetails: "需求详情",
+          contacts: "联系人",
+          contactNumber: "联系电话"
+        },
+        index: {
+          titles: "求购信息,供应信息",
+          sell: "我要卖",
+          public: "发布"
+        }
+      },
+      mall: {
+        category: "分类"
+      },
+      news: {
+        details: {},
+        index: {}
+      },
+      shops: {
+        details: {
+          honor: {},
+          index: {},
+          product: {},
+          products: {},
+          profile: {}
+        },
+        enter: {
+          add: {},
+          index: {}
+        },
+        index: {}
+      }
+    }
   }
 };

src/layout/components/footer.vue

@@ -5,35 +5,40 @@
         <div class="item">
           <img src="@assets/zhinan.png" alt="" />
           <div>
-            <span class="line"></span>新手指南<span class="line2"></span>
+            <span class="line"></span>{{ $t(`page.layout.footer.item1`)
+            }}<span class="line2"></span>
           </div>
         </div>
         <div class="item">
           <img src="@assets/shangjiafuwu.png" alt="" />
           <div>
-            <span class="line"></span>商家服务<span class="line2"></span>
+            <span class="line"></span>{{ $t(`page.layout.footer.item2`)
+            }}<span class="line2"></span>
           </div>
         </div>
         <div class="item">
           <img src="@assets/wenti.png" alt="" />
           <div>
-            <span class="line"></span>常见问题<span class="line2"></span>
+            <span class="line"></span>{{ $t(`page.layout.footer.item3`)
+            }}<span class="line2"></span>
           </div>
         </div>
         <div class="item">
           <img src="@assets/women.png" alt="" />
           <div>
-            <span class="line"></span>关于我们<span class="line2"></span>
+            <span class="line"></span>{{ $t(`page.layout.footer.item4`)
+            }}<span class="line2"></span>
           </div>
         </div>
         <div class="item">
           <img src="@assets/kefu.png" alt="" />
           <div>
-            <span class="line"></span>平台客服<span class="line3"></span>
+            <span class="line"></span>{{ $t(`page.layout.footer.item5`)
+            }}<span class="line3"></span>
           </div>
         </div>
       </div>
-      <div class="bottomDiv">技术支持：神州数码通用软件(洛阳)有限公司</div>
+      <div class="bottomDiv">{{ $t(`page.layout.footer.bottom`) }}</div>
     </div>
   </div>
 </template>

src/layout/components/header.vue

@@ -5,24 +5,28 @@
         <lang-select />
         <router-link class="home" to="/home">
           <span class="font_family">&#xe605;</span>
-          <span>首页</span>
+          <span>{{ $t(`route.home`) }}</span>
         </router-link>
         <span class="userinfo" v-if="userInfo">
-          欢迎您 {{ userInfo.loginAccount }}
+          {{ $t(`page.layout.header.hyn`) }} {{ userInfo.loginAccount }}
         </span>
         <template v-else>
           <div class="login">
-            <router-link to="/login">请登录</router-link>
+            <router-link to="/login">{{
+              $t(`page.layout.header.login`)
+            }}</router-link>
           </div>
           <div class="register">
-            <router-link to="/register">免费注册</router-link>
+            <router-link to="/register">{{
+              $t(`page.layout.header.register`)
+            }}</router-link>
           </div>
         </template>
         <div class="rightDiv">
           <div class="sjrz">
             <router-link to="/shopEnter">
               <span class="font_family">&#xe604;</span>
-              <span>商家入驻</span>
+              <span>{{ $t(`page.layout.header.shopEnter`) }}</span>
             </router-link>
           </div>
           <div class="line"></div>
@@ -30,13 +34,13 @@
           <div class="spfb">
             <a target="_blank" :href="managerUrl">
               <span class="font_family">&#xe603;</span>
-              商品发布
+              {{ $t(`page.layout.header.productPublish`) }}
             </a>
           </div>
           <div class="line"></div>
           <div class="spfb">
             <router-link to="/user">
-              个人中心
+              {{ $t(`route.user`) }}
             </router-link>
           </div>
         </div>
@@ -44,26 +48,31 @@
     </div>
     <div v-show="showHeader" class="container  ">
       <div class="logoDiv  ">
-        <div class="logoTitle">中国钢制家具产业聚集网</div>
+        <div class="logoTitle">{{ $t(`title`) }}</div>
         <div class="searchDiv">
           <el-select class="searchFl" v-model="currTarget">
-            <el-option label="产品" value="/mall" />
-            <el-option label="企业" value="/shops" />
+            <el-option
+              :label="$t(`page.layout.header.searchProduct`)"
+              value="/mall"
+            />
+            <el-option
+              :label="$t(`page.layout.header.searchShops`)"
+              value="/shops"
+            />
           </el-select>
           <span class="line"></span>
           <el-input
-            placeholder="请输入内容"
+            :placeholder="
+              `${$t(`inputPlaceholder`)}${$t(`page.layout.header.kw`)}`
+            "
             v-model="searchVal"
             class="input-with-select"
           >
             <i slot="prefix" class="el-input__icon el-icon-search"></i>
           </el-input>
           <span class="searchBtn" @click="search">
-            搜索
+            {{ $t(`page.layout.header.search`) }}
           </span>
-          <!-- <router-link class="searchBtn" :to="`${currTarget}/${searchVal}`">
-            搜索
-          </router-link> -->
         </div>
       </div>
       <div class="navs">

src/router/index.ts

@@ -137,6 +137,7 @@ const router = new VueRouter({
           props: true,
           meta: { title: "news" }
         },
+
         {
           path: "/newsDetail/:noticeId",
           component: () => import("../views/news/details.vue"),

src/utils/index.ts

@@ -36,7 +36,6 @@ export const getErrMsg = (errCode: number) => {
 export const RegAccount = /^[a-zA-Z0-9]{9,16}$/;
 
 export const Dateformat = (t: string | Date, format: string) => {
-  console.log(t, format);
   let fmt = format;
   let ret;
   const date = typeof t === "string" ? new Date(t) : t;

src/views/account/findPassword.vue

@@ -2,23 +2,29 @@
   <div class="bg-F5">
     <div class="topDiv">
       <div class="container">
-        <span class="title">中国钢制家具产业聚集网</span>
+        <span class="title">{{ $t("title") }}</span>
         <span class="line"></span>
-        <span class="info">重设密码</span>
+        <span class="info">{{
+          $t("page.views.account.findPassword.title")
+        }}</span>
       </div>
     </div>
     <div class="bg">
       <div class="container  ">
         <img src="@assets/loginbg.png" />
         <div class="loginDiv">
-          <div class="x-title">重设密码</div>
+          <div class="x-title">
+            {{ $t("page.views.account.findPassword.title") }}
+          </div>
           <el-form :model="form" :rules="rules" class="form" ref="form">
             <el-form-item class="formItem" prop="loginAccount">
               <img class="icon" src="@assets/user.png" alt="" />
               <el-input
                 v-model="form.loginAccount"
                 prefix-icon="x-el-icon-user"
-                placeholder="登录账号"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(`form.loginAccount`)}`
+                "
               />
             </el-form-item>
 
@@ -27,7 +33,7 @@
               <el-input
                 v-model="form.phone"
                 prefix-icon="x-el-icon-lock"
-                placeholder="手机号码"
+                :placeholder="`${$t(`inputPlaceholder`)}${$t(`form.phone`)}`"
               />
             </el-form-item>
             <el-form-item class="formItem yzm" prop="validateCode">
@@ -35,21 +41,29 @@
               <el-input
                 v-model="form.validateCode"
                 prefix-icon="icon-yzm"
-                placeholder="验证码"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(`form.validateCode`)}`
+                "
               />
-              <div class="getyzm">获取验证码</div>
+              <div class="getyzm">{{ $t("form.getValidateCode") }}</div>
             </el-form-item>
             <el-form-item class="formItem" prop="loginPassword">
               <img class="icon" src="@assets/lock.png" alt="" />
               <el-input
                 v-model="form.loginPassword"
                 prefix-icon="x-el-icon-lock"
-                placeholder="新密码"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(
+                    `page.views.account.findPassword.loginPassword`
+                  )}`
+                "
                 show-password
               />
             </el-form-item>
 
-            <el-button class="loginBtn" @click="validate">注册</el-button>
+            <el-button class="loginBtn" @click="validate">{{
+              $t("page.views.account.findPassword.submit")
+            }}</el-button>
           </el-form>
         </div>
       </div>
@@ -61,6 +75,7 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 import user from "@/store/modules/user";
 import { RegAccount } from "@/utils";
 import { ElForm } from "element-ui/types/form";
+import i18n from "@/lang";
 @Component
 export default class extends Vue {
   private verifyImg = "";
@@ -72,42 +87,62 @@ export default class extends Vue {
   };
   private rules = {
     loginAccount: [
-      { required: true, message: "请输入用户名", trigger: "blur" },
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.loginAccount`)}`,
+        trigger: "blur"
+      },
       {
         validator: (rule: any, value: string, callback: any) =>
           callback(
             RegAccount.test(value)
               ? undefined
-              : new Error("用户名必须为9到16位由数字字母组合")
+              : new Error(`${i18n.t("form.RegAccount")}`)
           ),
         trigger: "blur"
       }
     ],
     loginPassword: [
-      { required: true, message: "请输入密码", trigger: "blur" },
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
+          `page.views.account.findPassword.loginPassword`
+        )}`,
+        trigger: "blur"
+      },
       {
         validator: (rule: any, value: string, callback: any) =>
           callback(
             RegAccount.test(value)
               ? undefined
-              : new Error("密码必须为9到16位由数字字母组合")
+              : new Error(`${i18n.t("form.RegAccount")}`)
           ),
         trigger: "blur"
       }
     ],
     phone: [
-      { required: true, message: "请输入手机号码", trigger: "blur" },
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.phone`)}`,
+        trigger: "blur"
+      },
       {
         validator: (rule: any, value: string, callback: any) =>
           callback(
             /^1[3|4|5|7|8][0-9]\d{8}$/.test(value)
               ? undefined
-              : new Error("请输入正确的手机号")
+              : new Error(`${i18n.t("form.validatePhone")}`)
           ),
         trigger: "blur"
       }
     ],
-    validateCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
+    validateCode: [
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.validateCode`)}`,
+        trigger: "blur"
+      }
+    ]
   };
 
   validate() {
@@ -117,7 +152,7 @@ export default class extends Vue {
   async submit() {
     const [err] = await this.$post("/member/info/resetPassword", this.form);
     if (err) return;
-    this.$message.success("重设成功 请登陆");
+    this.$message.success(`${this.$i18n.t("message.success.findPassword")}`);
     (this.$refs.form as ElForm).resetFields();
     this.$router.push("/login");
   }
@@ -162,6 +197,7 @@ export default class extends Vue {
       .loginDiv {
         // width: 320px;
         // height: 338px;
+        overflow: hidden;
         margin-left: 218px;
         float: left;
         background: #fff;

src/views/account/login.vue

@@ -2,23 +2,25 @@
   <div class="bg-F5">
     <div class="topDiv">
       <div class="container">
-        <span class="title">中国钢制家具产业聚集网</span>
+        <span class="title">{{ $t("title") }}</span>
         <span class="line"></span>
-        <span class="info">欢迎登录</span>
+        <span class="info">{{ $t("page.views.account.login.topTitle") }}</span>
       </div>
     </div>
     <div class="bg">
       <div class="container  ">
         <img src="@assets/loginbg.png" />
         <div class="loginDiv">
-          <div class="x-title">账号登录</div>
+          <div class="x-title">{{ $t("page.views.account.login.title") }}</div>
           <el-form :model="form" :rules="rules" class="form" ref="form">
             <el-form-item class="formItem" prop="loginAccount">
               <img class="icon" src="@assets/user.png" alt="" />
               <el-input
                 v-model="form.loginAccount"
                 prefix-icon="x-el-icon-user"
-                placeholder="请输入用户名(支持手机号)"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(`form.loginAccount`)}`
+                "
               />
             </el-form-item>
             <el-form-item class="formItem" prop="loginPassword">
@@ -26,7 +28,9 @@
               <el-input
                 v-model="form.loginPassword"
                 prefix-icon="x-el-icon-lock"
-                placeholder="请输入密码"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(`form.loginPassword`)}`
+                "
                 show-password
               />
             </el-form-item>
@@ -35,7 +39,9 @@
               <el-input
                 v-model="form.validateCode"
                 prefix-icon="icon-yzm"
-                placeholder="请输入验证码"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(`form.validateCode`)}`
+                "
                 class="yzm"
               />
               <img
@@ -46,17 +52,21 @@
               />
             </el-form-item>
             <el-form-item class="formItem autoLogin " prop="autoLogin">
-              <el-checkbox v-model="form.autoLogin">自动登陆</el-checkbox>
+              <el-checkbox v-model="form.autoLogin">{{
+                $t("form.autoLogin")
+              }}</el-checkbox>
             </el-form-item>
-            <el-button class="loginBtn" @click="validate">登录</el-button>
+            <el-button class="loginBtn" @click="validate">{{
+              $t("form.login")
+            }}</el-button>
             <div class="as">
-              <router-link class="forgetPass" to="/findPassword"
-                >忘记密码</router-link
-              >
+              <router-link class="forgetPass" to="/findPassword">{{
+                $t("route.findPassword")
+              }}</router-link>
               <span class="line"></span>
-              <router-link class="register" to="/register"
-                >注册新账号</router-link
-              >
+              <router-link class="register" to="/register">{{
+                $t("route.register")
+              }}</router-link>
             </div>
           </el-form>
         </div>
@@ -69,6 +79,7 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 import user from "@/store/modules/user";
 import { RegAccount } from "@/utils";
 import { ElForm } from "element-ui/types/form";
+import i18n from "@/lang";
 @Component
 export default class extends Vue {
   private verifyImg = "";
@@ -80,10 +91,26 @@ export default class extends Vue {
   };
   private rules = {
     loginAccount: [
-      { required: true, message: "请输入用户名", trigger: "blur" }
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.loginAccount`)}`,
+        trigger: "blur"
+      }
+    ],
+    loginPassword: [
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.loginPassword`)}`,
+        trigger: "blur"
+      }
     ],
-    loginPassword: [{ required: true, message: "请输入密码", trigger: "blur" }],
-    validateCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
+    validateCode: [
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.validateCode`)}`,
+        trigger: "blur"
+      }
+    ]
   };
   created() {
     this.setVerifyImg();
@@ -100,7 +127,7 @@ export default class extends Vue {
   async submit() {
     const token = await user.setToken(this.form);
     if (!token) return this.setVerifyImg();
-    this.$message.success("登陆成功");
+    this.$message.success(`${this.$i18n.t("message.login")}`);
     (this.$refs.form as ElForm).resetFields();
     this.$router.push("/user");
   }

src/views/account/register.vue

@@ -2,23 +2,27 @@
   <div class="bg-F5">
     <div class="topDiv">
       <div class="container">
-        <span class="title">中国钢制家具产业聚集网</span>
+        <span class="title">{{ $t("title") }}</span>
         <span class="line"></span>
-        <span class="info">用户注册</span>
+        <span class="info">{{ $t("page.views.account.register.title") }}</span>
       </div>
     </div>
     <div class="bg">
       <div class="container  ">
         <img src="@assets/loginbg.png" />
         <div class="loginDiv">
-          <div class="x-title">用户注册</div>
+          <div class="x-title">
+            {{ $t("page.views.account.register.title") }}
+          </div>
           <el-form :model="form" :rules="rules" class="form" ref="form">
             <el-form-item class="formItem" prop="loginAccount">
               <img class="icon" src="@assets/user.png" alt="" />
               <el-input
                 v-model="form.loginAccount"
                 prefix-icon="x-el-icon-user"
-                placeholder="登录账号"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(`form.loginAccount`)}`
+                "
               />
             </el-form-item>
             <el-form-item class="formItem" prop="loginPassword">
@@ -26,7 +30,9 @@
               <el-input
                 v-model="form.loginPassword"
                 prefix-icon="x-el-icon-lock"
-                placeholder="登录密码"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(`form.loginPassword`)}`
+                "
                 show-password
               />
             </el-form-item>
@@ -35,7 +41,7 @@
               <el-input
                 v-model="form.phone"
                 prefix-icon="x-el-icon-lock"
-                placeholder="手机号码"
+                :placeholder="`${$t(`inputPlaceholder`)}${$t(`form.phone`)}`"
               />
             </el-form-item>
             <el-form-item class="formItem " prop="validateCode">
@@ -43,19 +49,25 @@
               <el-input
                 v-model="form.validateCode"
                 prefix-icon="icon-yzm"
-                placeholder="验证码"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(`form.validateCode`)}`
+                "
                 class="yzm"
               />
-              <div class="getyzm">获取验证码</div>
+              <div class="getyzm">{{ $t("form.getValidateCode") }}</div>
             </el-form-item>
             <el-form-item class="formItem check " prop="check">
-              <el-checkbox v-model="form.check">我已阅读并同意</el-checkbox
+              <el-checkbox v-model="form.check">{{
+                $t("page.views.account.register.check")
+              }}</el-checkbox
               ><a class="xieyi" href="javascript:;"
-                >《用户服务协议和平台免责条款》</a
+                >《{{ $t("page.views.account.register.protocol") }}》</a
               >
             </el-form-item>
 
-            <el-button class="loginBtn" @click="validate">注册</el-button>
+            <el-button class="loginBtn" @click="validate">{{
+              $t("form.register")
+            }}</el-button>
           </el-form>
         </div>
       </div>
@@ -67,6 +79,7 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 import user from "@/store/modules/user";
 import { RegAccount } from "@/utils";
 import { ElForm } from "element-ui/types/form";
+import i18n from "@/lang";
 @Component
 export default class extends Vue {
   private verifyImg = "";
@@ -78,48 +91,66 @@ export default class extends Vue {
   };
   private rules = {
     loginAccount: [
-      { required: true, message: "请输入用户名", trigger: "blur" },
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.loginAccount`)}`,
+        trigger: "blur"
+      },
       {
         validator: (rule: any, value: string, callback: any) =>
           callback(
             RegAccount.test(value)
               ? undefined
-              : new Error("用户名必须为9到16位由数字字母组合")
+              : new Error(`${i18n.t("form.RegAccount")}`)
           ),
         trigger: "blur"
       }
     ],
     loginPassword: [
-      { required: true, message: "请输入密码", trigger: "blur" },
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.loginPassword`)}`,
+        trigger: "blur"
+      },
       {
         validator: (rule: any, value: string, callback: any) =>
           callback(
             RegAccount.test(value)
               ? undefined
-              : new Error("密码必须为9到16位由数字字母组合")
+              : new Error(`${i18n.t("form.RegAccount")}`)
           ),
         trigger: "blur"
       }
     ],
     phone: [
-      { required: true, message: "请输入手机号码", trigger: "blur" },
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.phone`)}`,
+        trigger: "blur"
+      },
       {
         validator: (rule: any, value: string, callback: any) =>
           callback(
             /^1[3|4|5|7|8][0-9]\d{8}$/.test(value)
               ? undefined
-              : new Error("请输入正确的手机号")
+              : new Error(`${i18n.t("form.validatePhone")}`)
           ),
         trigger: "blur"
       }
     ],
     validateCode: [
-      { required: true, message: "请输入验证码", trigger: "blur" }
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(`form.validateCode`)}`,
+        trigger: "blur"
+      }
     ],
     check: [
       {
         validator: (rule: any, value: boolean, callback: any) =>
-          callback(value ? undefined : new Error("请同意免责条款")),
+          callback(
+            value ? undefined : new Error(`${i18n.t("form.validateCheck")}`)
+          ),
         trigger: "blur"
       }
     ]
@@ -132,7 +163,7 @@ export default class extends Vue {
   async submit() {
     const [err] = await this.$post("/member/info/userRegister", this.form);
     if (err) return;
-    this.$message.success("注册成功 请登陆");
+    this.$message.success(`${this.$i18n.t("message.success.register")}`);
     (this.$refs.form as ElForm).resetFields();
     this.$router.push("/login");
   }

src/views/account/user/editPassword.vue

@@ -2,12 +2,16 @@
   <div class="bg-F5">
     <div class="container">
       <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
-        <el-breadcrumb-item to="/user">个人中心</el-breadcrumb-item>
-        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
+        <el-breadcrumb-item to="/">{{ $t(`route.home`) }}</el-breadcrumb-item>
+        <el-breadcrumb-item to="/user">{{
+          $t(`route.user`)
+        }}</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ $t(`route.editPassword`) }}</el-breadcrumb-item>
       </el-breadcrumb>
       <div class="editPanel">
-        <div class="partTitle"><span class="orangeLine"></span>修改密码</div>
+        <div class="partTitle">
+          <span class="orangeLine"></span>{{ $t(`route.editPassword`) }}
+        </div>
         <div class="editDiv">
           <el-form
             class="editD"
@@ -16,47 +20,49 @@
             :rules="rules"
             label-width="180px"
           >
-            <!-- <el-form-item prop="loginName">
-              <span slot="label">
-                <img src="@assets/user.png" alt="" />
-                用户名：
-              </span>
-              <el-input
-                v-model="form.loginName"
-                placeholder="请输入用户名/登录账号"
-              />
-            </el-form-item> -->
             <el-form-item prop="oldPassword">
               <span slot="label">
                 <img src="@assets/lock.png" alt="" />
-                旧密码：
+                {{ $t(`page.views.account.user.editPassword.oldPassword`) }}：
               </span>
               <el-input
                 v-model="form.oldPassword"
                 type="password"
-                placeholder="请输入旧密码"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(
+                    `page.views.account.user.editPassword.oldPassword`
+                  )}`
+                "
                 show-password
               />
             </el-form-item>
             <el-form-item prop="loginPassword">
               <span slot="label">
                 <img src="@assets/lock.png" alt="" />
-                新密码：
+                {{ $t(`page.views.account.user.editPassword.loginPassword`) }}：
               </span>
               <el-input
                 v-model="form.loginPassword"
-                placeholder="请输入新密码"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(
+                    `page.views.account.user.editPassword.loginPassword`
+                  )}`
+                "
                 show-password
               />
             </el-form-item>
             <el-form-item prop="surePassword">
               <span slot="label">
                 <img src="@assets/lock.png" alt="" />
-                确认密码：
+                {{ $t(`page.views.account.user.editPassword.surePassword`) }}：
               </span>
               <el-input
                 v-model="form.surePassword"
-                placeholder="请再次输入新密码"
+                :placeholder="
+                  `${$t(`inputPlaceholder`)}${$t(
+                    `page.views.account.user.editPassword.surePassword`
+                  )}`
+                "
                 show-password
               />
             </el-form-item>
@@ -68,7 +74,8 @@
             type="text"
             size="small"
             @click="validate"
-            >提交</el-button
+          >
+            {{ $t(`form.submit`) }}</el-button
           >
         </div>
       </div>
@@ -80,6 +87,7 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 import { RegAccount } from "@/utils";
 import { ElForm } from "element-ui/types/form";
 import user from "@/store/modules/user";
+import i18n from "@/lang";
 @Component
 export default class extends Vue {
   private form = {
@@ -89,39 +97,55 @@ export default class extends Vue {
     surePassword: ""
   };
   private rules = {
-    // loginName: [
-    //   { required: true, message: "请输入用户名", trigger: "blur" },
-    //   {
-    //     validator: (rule: any, value: string, callback: any) =>
-    //       callback(
-    //         RegAccount.test(value)
-    //           ? undefined
-    //           : new Error("用户名必须为9到16位由数字字母组合")
-    //       ),
-    //     trigger: "blur"
-    //   }
-    // ],
-    oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
+    oldPassword: [
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
+          `page.views.account.user.editPassword.oldPassword`
+        )}`,
+        trigger: "blur"
+      }
+    ],
     loginPassword: [
-      { required: true, message: "请输入新密码", trigger: "blur" },
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
+          `page.views.account.user.editPassword.loginPassword`
+        )}`,
+        trigger: "blur"
+      },
       {
         validator: (rule: any, value: string, callback: any) =>
           callback(
             RegAccount.test(value)
               ? undefined
-              : new Error("密码必须为9到16位由数字字母组合")
+              : new Error(`${i18n.t("form.RegAccount")}`)
           ),
         trigger: "blur"
       }
     ],
     surePassword: [
-      { required: true, message: "请再次输入密码", trigger: "blur" },
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
+          `page.views.account.user.editPassword.surePassword`
+        )}`,
+        trigger: "blur"
+      },
       {
         validator: (rule: any, value: string, callback: any) => {
           if (value === "") {
-            callback(new Error("请再次输入密码"));
+            callback(
+              new Error(
+                `${i18n.t(`page.views.account.user.editPassword.err1`)}`
+              )
+            );
           } else if (value !== this.form.loginPassword) {
-            callback(new Error("两次输入密码不一致!"));
+            callback(
+              new Error(
+                `${i18n.t(`page.views.account.user.editPassword.err2`)}`
+              )
+            );
           } else {
             callback();
           }
@@ -140,7 +164,7 @@ export default class extends Vue {
     const [err] = await this.$post("/member/info/editPassword", this.form);
     if (err) return;
     this.DomForm.resetFields();
-    this.$message.success("密码修改成功 请重新登陆");
+    this.$message.success(`${this.$i18n.t(`message.success.editPassword`)}`);
     await this.$router.push("/login");
     user.clear();
   }

src/views/account/user/index.vue

@@ -2,8 +2,8 @@
   <div class="bg-F5">
     <div class="container">
       <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
+        <el-breadcrumb-item to="/">{{ $t(`route.home`) }}</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ $t(`route.user`) }}</el-breadcrumb-item>
       </el-breadcrumb>
       <el-row :gutter="20">
         <el-col :span="6">
@@ -13,51 +13,81 @@
           <img class="rightImg" src="@assets/userbg.png" alt="" />
         </el-col>
       </el-row>
-      <tab class="tab" titles="我的关注,我的需求" :currIndex.sync="currIndex" />
+      <tab
+        class="tab"
+        :titles="$t(`page.views.account.user.index.titles`)"
+        :currIndex.sync="currIndex"
+      />
 
       <el-table
-        empty-text="数据加载中..."
+        :empty-text="$t('loading')"
         class="qyrzgs"
         border
         v-if="arr[currIndex].items"
         :data="arr[currIndex].items"
       >
         <template v-if="currIndex">
-          <el-table-column type="index" label="序号" width="50" />
-          <el-table-column prop="purchaseTitle" label="需求标题" />
-          <el-table-column prop="summaryOfNeeds" label="概要" />
-          <el-table-column prop="createTime" label="发布时间" />
-          <el-table-column label="目前状态">
-            <template slot-scope="scope">
-              <span v-if="scope.row.status == 0">征集中</span>
-              <span v-else>已结束</span>
-            </template>
+          <el-table-column
+            type="index"
+            :label="$t('page.views.account.user.index.tableIndex')"
+            width="50"
+          />
+          <el-table-column
+            prop="purchaseTitle"
+            :label="$t('page.views.account.user.index.purchaseTitle')"
+          />
+          <el-table-column
+            prop="summaryOfNeeds"
+            :label="$t('page.views.account.user.index.summaryOfNeeds')"
+          />
+          <el-table-column
+            prop="createTime"
+            :label="$t('page.views.account.user.index.createTime')"
+          />
+          <el-table-column :label="$t('page.views.account.user.index.status')">
+            <span slot-scope="{ row: { status } }">{{
+              $t(`page.views.account.user.index.status${status == 0 ? 1 : 2}`)
+            }}</span>
           </el-table-column>
-          <el-table-column label="操作">
+          <el-table-column :label="$t('page.views.account.user.index.option')">
             <template slot-scope="{ row: { id } }">
               <el-button
                 class="textBtn"
                 @click="revocation(id)"
                 type="text"
                 size="small"
-                >撤销</el-button
+                >{{ $t(`page.views.account.user.index.revocation`) }}</el-button
               >
               <span class="editline"></span>
               <router-link class="textBtn" to="/info/add">
-                再次发布
+                {{ $t(`page.views.account.user.index.public`) }}
               </router-link>
             </template>
           </el-table-column>
         </template>
         <template v-else>
-          <el-table-column type="index" label="序号" width="50" />
-          <el-table-column prop="companyName" label="商家名称" width="180" />
-          <el-table-column prop="primaryBusiness" label="主营产品" />
-          <el-table-column prop="followDate" label="关注日期" />
-          <el-table-column label="操作">
+          <el-table-column
+            type="index"
+            :label="$t('page.views.account.user.index.tableIndex')"
+            width="50"
+          />
+          <el-table-column
+            prop="companyName"
+            :label="$t('page.views.account.user.index.companyName')"
+            width="180"
+          />
+          <el-table-column
+            prop="primaryBusiness"
+            :label="$t('page.views.account.user.index.primaryBusiness')"
+          />
+          <el-table-column
+            prop="followDate"
+            :label="$t('page.views.account.user.index.followDate')"
+          />
+          <el-table-column :label="$t('page.views.account.user.index.option')">
             <template slot-scope="{ row: { companyId } }">
-              <router-link class="textBtn" :to="`/shop/${companyId}`"
-                >进入店铺</router-link
+              <router-link class="textBtn" :to="`/shop/${companyId}`">
+                {{ $t(`page.views.account.user.index.inShop`) }}</router-link
               >
               <span class="editline"></span>
               <el-button
@@ -65,7 +95,7 @@
                 type="text"
                 size="small"
                 @click="cancelGz(companyId)"
-                >取消关注</el-button
+                >{{ $t(`page.views.account.user.index.cancelGz`) }}</el-button
               >
             </template>
           </el-table-column>
@@ -117,21 +147,31 @@ export default class extends Vue {
     this.arr[this.currIndex].params = {};
   }
   async cancelGz(companyId: number) {
-    if (!(await this.$confirm("是否取消关注?").catch(x => false))) return;
+    if (
+      !(await this.$confirm(
+        `${this.$i18n.t("message.confirm.cancelGz")}`
+      ).catch(x => false))
+    )
+      return;
     const [err] = await this.$post("/member/follow/cancleMemberFollow", {
       companyId
     });
     if (err) return;
-    this.$message.success("取消成功");
+    this.$message.success(`${this.$i18n.t("message.success.cancelGz")}`);
     this.reload();
   }
   async revocation(id: number) {
-    if (!(await this.$confirm("是否撤销该需求?").catch(x => false))) return;
+    if (
+      !(await this.$confirm(
+        `${this.$i18n.t("message.confirm.revocation")}`
+      ).catch(x => false))
+    )
+      return;
     const [err] = await this.$post("demand/info/cancleMemberDemandInfo", {
       id
     });
     if (err) return;
-    this.$message.success("撤销成功");
+    this.$message.success(`${this.$i18n.t("message.success.revocation")}`);
     this.reload();
   }
 }

src/views/home/index.vue

@@ -3,9 +3,7 @@
     <div class="container">
       <el-row class="mt2rem" :gutter="20">
         <el-col :span="4">
-          <category
-            @change="({ id, pid }) => $router.push(`/mall/-${id}-${pid}`)"
-          />
+          <category @change="id => $router.push(`/mall/-${id}`)" />
         </el-col>
         <el-col :span="14">
           <el-carousel class="bannerD marquee">
@@ -18,7 +16,7 @@
           <user-info />
           <div class="noticeDiv">
             <div class="noticeTitle">
-              通知公告
+              {{ $t("page.views.home.noticeTitle") }}
               <router-link to="/news">
                 <span class="more"
                   >more<i class="el-icon-d-arrow-right"></i
@@ -33,7 +31,9 @@
           </div>
         </el-col>
       </el-row>
-      <div class="partTitle"><span class="orangeLine"></span>服务能力</div>
+      <div class="partTitle">
+        <span class="orangeLine"></span> {{ $t("page.views.home.fwTitle") }}
+      </div>
       <div class="fwnl">
         <div
           class="fwnlItem"
@@ -46,7 +46,7 @@
           </div>
           <div class="titleDiv">
             <span>{{ num }}</span>
-            {{ text }}
+            {{ $t(text) }}
           </div>
           <div class="line" v-if="index < fwList.length - 1"></div>
         </div>
@@ -56,60 +56,79 @@
         <img src="@assets/home_ggw1.png" alt />
       </div>
       <div class="partTitle">
-        <span class="orangeLine"></span>产品中心
+        <span class="orangeLine"></span>{{ $t("page.views.home.productTitle") }}
         <router-link to="/mall">
           <span class="more">more<i class="el-icon-d-arrow-right"></i></span>
         </router-link>
       </div>
-      <div class="categoryList bg-F5">
-        <el-carousel
-          :autoplay="false"
-          arrow="always"
-          indicator-position="none"
-          ref="carousel"
-          class=" marquee"
-        >
-          <el-carousel-item
-            v-for="(items, index) in categoryList"
-            :key="`carousel-categoryList-${index}`"
-          >
-            <div
-              v-for="({ title, remake, id }, index) in items"
-              :key="`categoryList${index}`"
-              class="item"
-              :class="{ curr: params.typeId === id }"
-              @click="params.typeId = params.typeId === id ? 0 : id"
+      <div class="categoryList">
+        <el-row class="dalei">
+          <el-col :span="2">
+            <div class="slide left">
+              <img src="@assets/slideLeft.png" @click="prev" />
+            </div>
+          </el-col>
+
+          <el-col :span="20">
+            <el-carousel
+              :autoplay="false"
+              arrow="never"
+              indicator-position="none"
+              ref="carousel"
+              class="marquee"
             >
-              <div class="img">
-                <img :src="`${$basePath}${remake}`" alt="" srcset="" />
-              </div>
-              <h3>{{ title }}</h3>
+              <el-carousel-item
+                v-for="(arr, index) in categoryList"
+                :key="`carousel-list-${index}`"
+              >
+                <el-row class="items">
+                  <el-col
+                    :span="4"
+                    class="item"
+                    :class="{ curr: cIndex === index * 6 + i }"
+                    @click.native="cIndex = index * 6 + i"
+                    v-for="({ title, remake }, i) in arr"
+                    :key="`carousel-list-item-${i}`"
+                  >
+                    <div>
+                      <img :src="`${$basePath}${remake}`" alt />
+
+                      <div>{{ title }}</div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-carousel-item>
+            </el-carousel>
+          </el-col>
+          <el-col :span="2">
+            <div class="slide right">
+              <img src="@assets/slideRight.png" @click="next" />
             </div>
-          </el-carousel-item>
-        </el-carousel>
+          </el-col>
+        </el-row>
+        <div class="xiaolei">
+          <div
+            class="item"
+            v-for="({ title, remake, id }, index) in currCategorySub"
+            :key="`categoryList-xiaolei-${index}`"
+            @click="() => $router.push(`/mall/-${id}`)"
+          >
+            <div class="img">
+              <img :src="`${$basePath}${remake}`" alt />
+            </div>
+            <div class="tit">{{ title }}</div>
+          </div>
+        </div>
+        <div
+          class="categoryMore"
+          v-if="categorySub.length > 10 && !categoryMore"
+          @click="categoryMore = true"
+        >
+          <span>更多分类</span>
+          <img src="@assets/more.png" alt />
+        </div>
       </div>
 
-      <load-more
-        class="productList"
-        url="/goods/info/page"
-        pageType="increase"
-        :params="params"
-        v-slot="{
-          item: { id, name, companyId, price, cover, companyName }
-        }"
-      >
-        <router-link :to="`/shop/${companyId}/${id}`" class="product">
-          <div class="imgDiv">
-            <img :src="`${$basePath}${cover}`" />
-          </div>
-          <a :title="name" class="name">{{ name }}</a>
-          <div class="money">
-            ¥
-            <span>{{ price }}</span>
-          </div>
-          <div class="company ">{{ companyName }}</div>
-        </router-link>
-      </load-more>
       <el-row :gutter="20">
         <el-col
           :span="12"
@@ -119,12 +138,9 @@
         >
           <div class="partTitle">
             <span class="orangeLine"></span
-            >{{ index ? "热门商品" : "新品推荐" }}
-            <router-link :to="`/mall`">
-              <span class="more"
-                >more<i class="el-icon-d-arrow-right"></i
-              ></span>
-            </router-link>
+            >{{
+              $t(`page.views.home.${index ? "hotProducts" : "newsProducts"}`)
+            }}
           </div>
 
           <router-link
@@ -147,7 +163,7 @@
         </el-col>
       </el-row>
       <div class="partTitle ppsj">
-        <span class="orangeLine"></span>品牌商家
+        <span class="orangeLine"></span>{{ $t("page.views.home.ppTitle") }}
         <router-link to="/shops" class="more"
           >more<i class="el-icon-d-arrow-right"></i
         ></router-link>
@@ -165,11 +181,15 @@
               <img :src="`${$basePath}${defaultImgUrl}`" alt />
             </div>
             <div class="name">{{ companyName }}</div>
-            <div class="company">主营商品:{{ primaryBusiness }}</div>
+            <div class="company">
+              {{ $t("page.views.home.primaryBusiness") }}:{{ primaryBusiness }}
+            </div>
           </router-link>
         </div>
       </div>
-      <div class="partTitle"><span class="orangeLine"></span>需求供应</div>
+      <div class="partTitle">
+        <span class="orangeLine"></span>{{ $t("page.views.home.xqTitle") }}
+      </div>
       <div class="xqgy">
         <template v-for="(info, index) in infos">
           <div :key="`info${index}`" class="xqDiv">
@@ -179,7 +199,7 @@
                   require(`@assets/${index ? 'gongyingshang' : 'xuqiu'}.png`)
                 "
                 alt
-              />{{ index ? "供应商" : "需求" }}
+              />{{ $t(`page.views.home.${index ? "gys" : "xq"}`) }}
               <router-link :to="`/info/${index}`">
                 <span class="more"
                   >more<i class="el-icon-d-arrow-right"></i
@@ -194,7 +214,7 @@
             >
               <div class="xq">
                 <div class="con">
-                  【{{ index ? "供应" : "求购" }}】{{
+                  【{{ $t(`page.views.home.${index ? "gy" : "qg"}`) }}】{{
                     index ? item.supplyTitle : item.purchaseTitle
                   }}
                 </div>
@@ -219,7 +239,7 @@
         >
           <div class="partTitle">
             <span class="orangeLine"></span
-            >{{ index ? "家具保养" : "行业资讯" }}
+            >{{ $t(`page.views.home.${index ? "furniture" : "industry"}`) }}
             <router-link :to="`/news/${index + 1}`">
               <span class="more"
                 >more<i class="el-icon-d-arrow-right"></i
@@ -259,41 +279,26 @@
 import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 import menu from "@/store/modules/menu";
 import { chunk } from "lodash";
+import i18n from "@/lang";
+import { ElCarousel } from "element-ui/types/carousel";
 @Component
 export default class extends Vue {
   private params = {
     typeId: 0
   };
+  private cIndex = 0;
+  private categoryMore = false;
   private products: IAny[][] = [];
   private notices: IAny[] = [];
   private infos: IAny[] = [];
   private shops: IAny[] = [];
-  private fwList: Array<{
-    img: string;
-    num: number;
-    text: string;
-  }> = [
-    {
-      img: "qiyeruzhu",
-      num: 0,
-      text: "家钢制家具生产企业入驻"
-    },
-    {
-      img: "chanpin",
-      num: 0,
-      text: "个钢制家具产品入驻"
-    },
-    {
-      img: "huiyuan",
-      num: 0,
-      text: "位平台会员注册"
-    },
-    {
-      img: "yingyee",
+  private fwList = "qiyeruzhu,chanpin,huiyuan,yingyee"
+    .split(",")
+    .map((img, index) => ({
+      img,
       num: 0,
-      text: "万在线电商营业额"
-    }
-  ];
+      text: `page.views.home.fwListText${++index}`
+    }));
   async created() {
     const arr = `/goods/info/hotlist,
       /demand/info/getDemandInfoTenList,
@@ -329,6 +334,20 @@ export default class extends Vue {
   get categoryList() {
     return chunk(menu.pList, 6);
   }
+  get categorySub() {
+    if (!menu.pList.length) return [];
+    return menu.subList(menu.pList[this.cIndex].id);
+  }
+  get currCategorySub() {
+    return this.categoryMore ? this.categorySub : this.categorySub.slice(0, 10);
+  }
+
+  prev() {
+    (this.$refs.carousel as ElCarousel).prev();
+  }
+  next() {
+    (this.$refs.carousel as ElCarousel).next();
+  }
 }
 </script>
 
@@ -371,43 +390,103 @@ export default class extends Vue {
   }
 }
 .categoryList {
-  height: 100px;
   overflow: hidden;
-  margin-bottom: 20px;
-  .item {
-    width: 180px;
-    height: 100%;
-    float: left;
-    overflow: hidden;
-    box-sizing: border-box;
-    background: #fff;
-    padding: 10px;
-    margin-left: 16px;
-    &:first-child {
-      margin-left: 0;
+  margin-bottom: 30px;
+  background: #fff;
+  .dalei {
+    height: 108px;
+    border-bottom: 1px solid #f5f5f5;
+    > div {
+      height: 100%;
     }
-    &.curr {
-      border: 1px solid red;
+    .items {
+      height: 100%;
+      .item {
+        height: 100%;
+        position: relative;
+        cursor: pointer;
+        &.curr {
+          border-bottom: 2px solid #ff3800;
+        }
+        > div {
+          text-align: center;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
     }
-    .img {
-      height: 60px;
+    .slide {
+      margin-top: 29px;
       position: relative;
-      cursor: pointer;
+      height: 50px;
+      &.left {
+        border-right: 1px solid #f5f5f5;
+      }
+      &.right {
+        border-left: 1px solid #f5f5f5;
+      }
       img {
+        text-align: center;
         position: absolute;
-        left: 50%;
         top: 50%;
+        left: 50%;
         transform: translate(-50%, -50%);
-        max-width: 80%;
-        max-height: 80%;
+        cursor: pointer;
       }
     }
-    h3 {
-      line-height: 20px;
-      text-align: center;
-      font-size: 16px;
+  }
+  .xiaolei {
+    overflow: hidden;
+    padding: 30px;
+    padding-bottom: 10px;
+    .item {
+      height: 250px;
+      width: 202px;
+      cursor: pointer;
+      float: left;
+      border: 1px solid #e5e5e5;
+      margin-right: 20px;
+      border-radius: 6px;
+      margin-bottom: 20px;
+      &:nth-child(5n + 5) {
+        margin-right: 0;
+      }
+      &:hover {
+        border: 1px solid #ff3700;
+        color: #ff3700;
+        .tit {
+          background: #ffdbd0;
+        }
+      }
+      .img {
+        height: 200px;
+        position: relative;
+        img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          max-width: 80%;
+          max-height: 80%;
+        }
+      }
+      .tit {
+        height: 50px;
+        line-height: 50px;
+        background: #f5f5f5;
+        text-align: center;
+      }
     }
   }
+  .categoryMore {
+    color: #999999;
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 12px;
+    cursor: pointer;
+  }
 }
 .partTitle {
   padding: 3rem 0 2rem 0;

src/views/info/add.vue

@@ -2,7 +2,9 @@
 <template>
   <div class="bg-F5">
     <div class="container">
-      <div class="partTitle"><span class="orangeLine"></span>服务能力</div>
+      <div class="partTitle">
+        <span class="orangeLine"></span>{{ $t("page.views.info.add.title") }}
+      </div>
       <div class="formDiv">
         <el-form
           class="form"
@@ -11,27 +13,42 @@
           :model="form"
           label-width="110px"
         >
-          <el-form-item label="需求标题：" prop="purchaseTitle">
+          <el-form-item
+            :label="`${$t('page.views.info.add.purchaseTitle')}`"
+            prop="purchaseTitle"
+          >
             <el-input v-model="form.purchaseTitle"></el-input>
           </el-form-item>
-          <el-form-item label="需求概要：" prop="summaryOfNeeds">
+          <el-form-item
+            :label="`${$t('page.views.info.add.summaryOfNeeds')}:`"
+            prop="summaryOfNeeds"
+          >
             <el-input v-model="form.summaryOfNeeds"></el-input>
           </el-form-item>
-          <el-form-item label="需求详情：" prop="demandDetails">
+          <el-form-item
+            :label="`${$t('page.views.info.add.demandDetails')}:`"
+            prop="demandDetails"
+          >
             <el-input v-model="form.demandDetails" type="textarea"></el-input>
           </el-form-item>
-          <el-form-item label="联系人：" prop="contacts">
+          <el-form-item
+            :label="`${$t('page.views.info.add.contacts')}:`"
+            prop="contacts"
+          >
             <el-input v-model="form.contacts"></el-input>
           </el-form-item>
-          <el-form-item label="联系电话：" prop="contactNumber">
+          <el-form-item
+            :label="`${$t('page.views.info.add.contactNumber')}:`"
+            prop="contactNumber"
+          >
             <el-input v-model="form.contactNumber"></el-input>
           </el-form-item>
         </el-form>
         <div class="line"></div>
         <div class="tc">
-          <el-button class="submitBtn" type="primary" @click="validate"
-            >提交</el-button
-          >
+          <el-button class="submitBtn" type="primary" @click="validate">{{
+            $t("form.submit")
+          }}</el-button>
         </div>
       </div>
     </div>
@@ -40,6 +57,7 @@
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { ElForm } from "element-ui/types/form";
+import i18n from "@/lang";
 @Component
 export default class extends Vue {
   private form = {
@@ -51,17 +69,49 @@ export default class extends Vue {
   };
   private rules = {
     purchaseTitle: [
-      { required: true, message: "请输入需求标题", trigger: "blur" }
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
+          `page.views.info.add.purchaseTitle`
+        )}`,
+        trigger: "blur"
+      }
     ],
     summaryOfNeeds: [
-      { required: true, message: "请输入需求概要", trigger: "blur" }
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
+          `page.views.info.add.summaryOfNeeds`
+        )}`,
+        trigger: "blur"
+      }
     ],
     demandDetails: [
-      { required: true, message: "请输入需求详情", trigger: "blur" }
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
+          `page.views.info.add.demandDetails`
+        )}`,
+        trigger: "blur"
+      }
+    ],
+    contacts: [
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
+          `page.views.info.add.contacts`
+        )}`,
+        trigger: "blur"
+      }
     ],
-    contacts: [{ required: true, message: "请输入联系人", trigger: "blur" }],
     contactNumber: [
-      { required: true, message: "请输入联系电话", trigger: "blur" }
+      {
+        required: true,
+        message: `${i18n.t(`inputPlaceholder`)}${i18n.t(
+          `page.views.info.add.contactNumber`
+        )}`,
+        trigger: "blur"
+      }
     ]
   };
   get elForm() {
@@ -74,7 +124,7 @@ export default class extends Vue {
     const [err] = await this.$post("/demand/info/insertDemandInfo", this.form);
     if (err) return;
     this.elForm.resetFields();
-    this.$message.success("需求发布成功！");
+    this.$message.success(`${this.$i18n.t("message.success.infoAdd")}`);
     this.$router.push("/user/1");
   }
 }

src/views/info/details/buy.vue

@@ -4,29 +4,29 @@
     <div class="container">
       <div class="leftLine"></div>
       <div class="title">
-        <span class="type">求购</span>
+        <span class="type">{{ $t("page.views.info.buy.purchaseTitle") }}</span>
         <span class="name">{{ demandInfo.purchaseTitle }}</span>
       </div>
       <div class="xqDiv mt5rem">
-        <div class="tit">需求概要：</div>
+        <div class="tit">{{ $t("page.views.info.buy.summaryOfNeeds") }}：</div>
         <div class="con">{{ demandInfo.summaryOfNeeds }}</div>
       </div>
       <div class="xqDiv">
-        <div class="tit">需求详情：</div>
+        <div class="tit">{{ $t("page.views.info.buy.demandDetails") }}：</div>
         <div class="con">
           {{ demandInfo.demandDetails }}
         </div>
       </div>
       <div class="xqDiv">
-        <div class="tit">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</div>
+        <div class="tit">{{ $t("page.views.info.buy.contacts") }}：</div>
         <div class="con">{{ demandInfo.contacts }}</div>
       </div>
       <div class="xqDiv">
-        <div class="tit">联系电话：</div>
+        <div class="tit">{{ $t("page.views.info.buy.contactNumber") }}：</div>
         <div class="con">{{ demandInfo.contactNumber }}</div>
       </div>
       <div class="xqDiv">
-        <div class="tit">发布时间：</div>
+        <div class="tit">{{ $t("page.views.info.buy.releaseTime") }}：</div>
         <div class="con">{{ demandInfo.releaseTime }}</div>
       </div>
     </div>

src/views/info/details/sell.vue

@@ -8,20 +8,36 @@
         </el-col>
         <el-col :span="14">
           <div class="title">
-            <span class="type">供应</span>
+            <span class="type">{{
+              $t("page.views.info.sell.purchaseTitle")
+            }}</span>
             <span class="name">{{ noticeSupply.supplyTitle }}</span>
           </div>
-          <div class="info">生产厂家：{{ noticeSupply.manufacturer }}</div>
           <div class="info">
-            联&nbsp;系&nbsp;人：{{ noticeSupply.contacts }}
+            {{ $t("page.views.info.sell.manufacturer") }}：{{
+              noticeSupply.manufacturer
+            }}
+          </div>
+          <div class="info">
+            {{ $t("page.views.info.sell.contacts") }}：{{
+              noticeSupply.contacts
+            }}
+          </div>
+          <div class="info">
+            {{ $t("page.views.info.sell.releaseTime") }}：{{
+              noticeSupply.releaseTime
+            }}
+          </div>
+          <div class="info">
+            {{ $t("page.views.info.sell.telephone") }}：{{
+              noticeSupply.telephone
+            }}
           </div>
-          <div class="info">发布时间：{{ noticeSupply.releaseTime }}</div>
-          <div class="info">联系电话：{{ noticeSupply.telephone }}</div>
         </el-col>
       </el-row>
       <div class="infoDiv">
         <div class="info">
-          <div class="tit">供应详情:</div>
+          <div class="tit">{{ $t("page.views.info.sell.supplyDetails") }}:</div>
           <div class="con" v-html="noticeSupply.supplyDetails"></div>
         </div>
       </div>

src/views/info/index.vue

@@ -7,12 +7,21 @@
         </el-col>
         <el-col :span="20">
           <div class="tab">
-            <tab titles="求购信息,供应信息" :currIndex.sync="currIndex" />
+            <tab
+              :titles="$t('page.views.info.index.titles')"
+              :currIndex.sync="currIndex"
+            />
             <div class="btnDiv">
               <router-link to="/info/add">
-                <el-button class="buyBtn" size="mini">我要买</el-button>
+                <el-button class="buyBtn" size="mini">{{
+                  $t("route.infoAdd")
+                }}</el-button>
               </router-link>
-              <el-button class="buyBtn" size="mini">我要卖</el-button>
+              <a :href="managerUrl" target="_blank">
+                <el-button class="buyBtn" size="mini">{{
+                  $t("page.views.info.index.sell")
+                }}</el-button>
+              </a>
             </div>
           </div>
 
@@ -29,7 +38,10 @@
               :to="`/info/${index ? 'sell' : 'buy'}/${id}`"
             >
               <div class="name">{{ purchaseTitle || supplyTitle }}</div>
-              <div class="date">{{ (releaseTime + "").split(" ")[0] }}发布</div>
+              <div class="date">
+                {{ (releaseTime + "").split(" ")[0]
+                }}{{ $t("page.views.info.index.public") }}
+              </div>
             </router-link>
           </load-more>
         </el-col>
@@ -52,6 +64,9 @@ export default class extends Vue {
     "/demand/info/getDemandInfoAllList",
     "/supply/info/getSupplyInfoAllList"
   ];
+  get managerUrl() {
+    return process.env.VUE_APP_MANAGER_URL;
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -93,6 +108,7 @@ export default class extends Vue {
       float: left;
       text-align: right;
       color: #666;
+      white-space: nowrap;
     }
   }
 }

src/views/mall/index.vue

@@ -7,7 +7,7 @@
       <div class="category">
         <div class="dalei">
           <div class="flag ">
-            分类
+            {{ $t("page.views.mall.category") }}
             <div class="t"></div>
           </div>
           <div class="items ">
@@ -126,13 +126,22 @@ export default class extends Vue {
   @Prop(String) private q!: string;
   @Watch("q", { immediate: true })
   qChange() {
-    const [kw, id = 0, pid = 0] = (this.q || "").split("-");
-    this.currPid = Number(pid) | 0;
+    const [kw, id = 0] = (this.q || "").split("-");
+    let typeId = 0,
+      pId = 0;
+    if (id) {
+      const item = menu.info(Number(id) | 0);
+      if (item) {
+        ({ pId, id: typeId } = item);
+      }
+    }
+
+    this.currPid = pId;
     this.params = {
       name: this.search.name = kw,
       orderByColumn: "",
       isAsc: "asc",
-      typeId: Number(id) | 0
+      typeId
     };
   }
 

src/views/shops/details/products.vue

@@ -9,7 +9,7 @@
           <category
             showHeader
             :currId="params.typeId"
-            @change="({ id }) => (params.typeId = id)"
+            @change="id => (params.typeId = id)"
           />
         </el-col>
         <el-col :span="20">

src/views/shops/enter/add.vue

@@ -125,7 +125,9 @@
           label="企业默认图片"
           prop="defaultImgUrl"
         >
+          {{ form.defaultImgUrl }}
           <el-upload
+            :class="{ uploadHide: form.defaultImgUrl }"
             list-type="picture-card"
             :action="`${$basePath}/common/upload`"
             :on-preview="preview"
@@ -185,7 +187,8 @@ export default class extends Vue {
   private form: IAny = {
     longitude: "",
     latitude: "",
-    detailAddress: ""
+    detailAddress: "",
+    defaultImgUrl: ""
   };
   private province = "";
   private city = "";
@@ -333,14 +336,18 @@ export default class extends Vue {
   }
   @Watch("fileList")
   fileListChange() {
-    let obj: IAny = {};
+    let obj: IAny = {
+      businessLicenseUrl: "",
+      defaultImgUrl: "",
+      propagandaImgUrl: ""
+    };
     this.fileList.forEach(({ type, url }) => {
-      obj[type] = `${obj[type] ? `${obj[type]},` : ""}${url}`;
+      obj[type] = `${
+        type !== "defaultImgUrl" && obj[type] ? `${obj[type]},` : ""
+      }${url}`;
     });
     Object.assign(this.form, obj);
-    "businessLicenseUrl,defaultImgUrl,propagandaImgUrl"
-      .split(",")
-      .forEach(x => this.DomForm.validateField(x));
+    Object.keys(obj).forEach(x => this.DomForm.validateField(x));
   }
 
   @Watch("form.longitude")
@@ -538,4 +545,9 @@ export default class extends Vue {
     width: 32%;
   }
 }
+.uploadHide {
+  .el-upload {
+    display: none;
+  }
+}
 </style>