wei

src/components/diss-address.vue

@@ -0,0 +1,1288 @@
+<template>
+  <div>
+    <div class="box">
+     <div class="bottom_check" v-if="tapoption == 1">
+       <div class="check_box" v-if="list.length == 0">
+         <p class="bottom_text">{{$t('checkout.Welcome')}}</p>
+         <button class="bottom_button" @click="tapshow=!tapshow">{{$t('checkout.address')}}</button>
+       </div>
+       <div class="check_bigbox" v-if="list.length > 0">
+       <!-- 邮寄地址 -->
+         <div class="check_boxf">
+         <div class="check_center">
+           <p class="check_p">{{$t('checkout.Choose')}}</p>
+           <div class="check_centerbox">
+             <button class="check_centerboxl" @click="tapAddress(1)">{{$t('checkout.Select')}}</button>
+             <button class="check_centerboxr" @click="tapEdit(1)">{{$t('checkout.New')}}</button>
+           </div>
+         </div>
+         <div class="check_bottom">
+           <div class="check_bottombox">
+             <div>
+               <p class="check_bottomtextf">{{defaultList.name}}</p>
+               <p class="check_bottomtextf">{{defaultList.tel}}</p>
+               <p class="check_bottomtextf">{{defaultList.email}}</p>
+             </div>
+              <div>
+                <p class="check_bottomtextb">{{defaultList.address}}</p>
+                <p class="check_bottomtextb" v-if="!$util.localeStorage() && defaultList.country == 'China'">中国</p>
+                <p class="check_bottomtextb" v-else>{{defaultList.country}}</p>
+              </div>
+           </div>
+           <!-- <button class="check_bottombutton" @click="tapEdit(1)">edit</button> -->
+           <div class="check_pmd">
+             <button class="pmd_centerbox" @click="tapAddress(1)">{{$t('checkout.Select')}}</button>
+             <button class="pmd_centerbox" @click="tapEdit(1)">{{$t('checkout.New')}}</button>
+           </div>
+         </div>
+       </div>
+       <!-- 账单地址 -->
+       <div class="check_boxf">
+         <div class="check_center">
+           <p class="check_p">{{$t('checkout.Shipping')}}</p>
+           <div class="check_centerbox">
+             <button class="check_centerboxl" @click="tapAddress(2)">{{$t('checkout.Select')}}</button>
+             <button class="check_centerboxr" @click="tapEdit(2)">{{$t('checkout.New')}}</button>
+           </div>
+         </div>
+         <div class="check_bottom">
+           <div class="check_bottombox">
+             <div>
+               <p class="check_bottomtextf">{{bill.name}}</p>
+               <p class="check_bottomtextf">{{bill.tel}}</p>
+               <p class="check_bottomtextf">{{bill.email}}</p>
+             </div>
+              <div>
+                <p class="check_bottomtextb">{{bill.address}}</p>
+                <p class="check_bottomtextb" v-if="!$util.localeStorage() && bill.country == 'China'">中国</p>
+                <p class="check_bottomtextb" v-else>{{bill.country}}</p>
+              </div>
+           </div>
+           <!-- <button class="check_bottombutton" @click="tapEdit(2)">edit</button> -->
+           <div class="check_pmd">
+             <button class="pmd_centerbox" @click="tapAddress(2)">{{$t('checkout.Select')}}</button>
+             <button class="pmd_centerbox" @click="tapEdit(2)">{{$t('checkout.New')}}</button>
+           </div>
+         </div>
+       </div>
+       </div>
+     </div>
+  <!-- 添加修改数据 -->
+    <div class="taps" v-show="tapshow">
+        <div class="tap_box" ref="tapBox">
+          <div class="taps_s">
+            <div class="taps_a">
+              <p class="taps_p">{{$t('checkout.address')}}</p>
+              <div class="footerbox">
+                <div class="taps_footerbox">
+                  <div class="add_text">{{$t('checkout.Name')}}</div>
+                  <el-input class="inputbox" v-model="from.name" :placeholder="$t('checkout.Name')"></el-input>
+                  <div class="red-t">*</div>
+                </div>
+                <div class="taps_footerbox">
+                  <div class="add_text">{{$t('checkout.Phone')}}</div>
+                  <el-input class="inputbox" v-model="from.tel" :placeholder="$t('checkout.Phone')"></el-input>
+                  <div class="red-t">*</div>
+                </div>
+                <div class="taps_footerbox">
+                  <div class="add_text">{{$t('checkout.Institute')}}</div>
+                  <el-input class="inputbox" v-model="from.company" :placeholder="$t('checkout.Institute')"></el-input>
+                  <div class="red-t">*</div>
+                </div>
+                <div class="taps_footerbox" v-if="locale">
+                  <div class="add_text">{{$t('order.country')}}</div>
+                  <el-select v-model="from.country" :placeholder="$t('order.country')">
+                    <el-option
+                      v-for="item in country"
+                      :key="item.en"
+                      :label="item.en"
+                      :value="item.en">
+                    </el-option>
+                  </el-select>
+                  <div class="red-t">*</div>
+                </div>
+                <div class="taps_footerbox" v-if="!locale">
+                  <div class="add_text">省</div>
+                  <el-select v-model="from.province" @change="changeProvince" placeholder="省">
+                    <el-option
+                      v-for="item in province"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.label">
+                    </el-option>
+                  </el-select>
+                  <div class="red-t">*</div>
+                </div>
+                <div class="taps_footerbox" v-if="!locale">
+                  <div class="add_text">市</div>
+                  <el-select v-model="from.city" placeholder="市">
+                    <el-option
+                      v-for="item in city"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.label">
+                    </el-option>
+                  </el-select>
+                  <div class="red-t">*</div>
+                </div>
+                <div class="taps_footerbox">
+                  <div class="add_text">{{$t('checkout.Addre')}}</div>
+                  <el-input class="inputbox" v-model="from.address" :placeholder="$t('checkout.Addre')"></el-input>
+                  <div class="red-t">*</div>
+                </div>
+                <div class="taps_footerbox">
+                  <div class="add_text">{{$t('checkout.postal')}}</div>
+                  <el-input class="inputbox" v-model="from.postalCode" :placeholder="$t('checkout.postal')"></el-input>
+                  <div class="red-t">*</div>
+                </div>
+                <div class="taps_footerbox">
+                  <div class="add_text">{{$t('checkout.default')}}</div>
+                  <!-- <el-select v-model="from.isDefault" :placeholder="$t('checkout.default')">
+                    <el-option
+                      v-for="item in address"
+                      :key="item.name"
+                      :label="item.name"
+                      :value="item.name">
+                    </el-option>
+                  </el-select> -->
+                  <el-radio-group v-model="from.isDefault">
+                    <el-radio label="YES" >YES</el-radio>
+                    <el-radio label="NO">NO</el-radio>
+                  </el-radio-group>
+                  <div class="red-t">*</div>
+                </div>
+                <el-button class="buttonbox_taps" v-if="type" type="primary" @click="updateList">{{$t('checkout.Save')}}</el-button>
+                <el-button class="buttonbox_taps" v-else type="primary" @click="postList">{{$t('checkout.Save')}}</el-button>
+              </div>
+              <div class="cancel" @click="tapcancel">
+                <img src="@/assets/img/cancel_active.png" alt="" class="cancel_images">
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+  <!-- 数据1 -->
+    <div class="tapsp" v-if="tapshowp">
+        <div class="taps_s">
+          <div class="taps_a">
+            <p class="taps_p">{{$t('checkout.Select')}}</p>
+            <div class="list_box">
+              <div class="check_bottom" v-for="one in list" :key="one.id">
+                <div class="check_flex">
+                  <!-- <img src="@/assets/img/xuanzhong.png" alt="" class="check_img"> -->
+                  <el-radio v-model="defaultId" :label="one.id" @change="changeBillId(one, 1)"></el-radio>
+                  <div class="check_bottombox">
+                    <div>
+                      <p class="check_bottomtextf">{{one.name}}</p>
+                      <p class="check_bottomtextf">{{one.tel}}</p>
+                      <p class="check_bottomtextf">{{one.createBy}}</p>
+                    </div>
+                    <div>
+                      <p class="check_bottomtextb">{{one.address}}</p>
+                      <p class="check_bottomtextb" v-if="!$util.localeStorage() && one.country == 'China'">中国</p>
+                      <p class="check_bottomtextb" v-else>{{one.country}}</p>
+                    </div>
+                  </div>
+                </div>
+                <button class="check_bottombutton" @click="modifyList(one)">{{$t('checkout.edit')}}</button>
+              </div>
+            </div>
+            <div class="cancel" @click="tapshowp = false">
+              <img src="@/assets/img/cancel_active.png" alt="" class="cancel_images">
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 数据2 -->
+      <div class="tapsp" v-if="billShow">
+        <div class="taps_s">
+          <div class="taps_a">
+            <p class="taps_p">{{$t('checkout.Select')}}</p>
+            <div class="list_box">
+              <div class="check_bottom" v-for="one in list" :key="one.id">
+                <div class="check_flex">
+                  <!-- <img src="@/assets/img/xuanzhong.png" alt="" class="check_img"> -->
+                  <el-radio v-model="billId" :label="one.id" @change="changeBillId(one, 2)"></el-radio>
+                  <div class="check_bottombox">
+                    <div>
+                      <p class="check_bottomtextf">{{one.name}}</p>
+                      <p class="check_bottomtextf">{{one.tel}}</p>
+                      <p class="check_bottomtextf">{{one.createBy}}</p>
+                    </div>
+                    <div>
+                      <p class="check_bottomtextb">{{one.address}}</p>
+                      <p class="check_bottomtextb" v-if="!$util.localeStorage() && one.country == 'China'">中国</p>
+                      <p class="check_bottomtextb" v-else>{{one.country}}</p>
+                    </div>
+                  </div>
+                </div>
+                <button class="check_bottombutton" @click="modifyList(one)">{{$t('checkout.edit')}}</button>
+              </div>
+            </div>
+            <div class="cancel" @click="billShow = false">
+              <img src="@/assets/img/cancel_active.png" alt="" class="cancel_images">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  </template>
+  <script>
+  import region from '@/js/region'
+  import provinces from '@/js/provinces'
+  export default {
+    components: {
+    },
+    name: 'dissAddress',
+    data () {
+      return {
+        locale: this.$util.localeStorage(),
+        list: [],
+        defaultList: {},
+        defaultId: '',
+        bill: {},
+        billShow: false,
+        billId: '',
+        type: '',
+        delFlag: 0, // 选中
+        tapoption: 1,
+        tapshow: false,
+        tapshowp: false,
+        country: [], // 国家
+        province: [], // 省
+        city: [], // 市
+        address: [{
+          name: 'YES',
+        },{
+          name: 'NO',
+        }],
+        from: {
+          address: '', // 详细收货地址
+          city: '', // 中文版–市
+          company: '', // 企业
+          country: '', // 国家 中文默认传China
+          id: 0,
+          isDefault: '', // 是否默认地址
+          name: '', // 收货人名称
+          postalCode: '', // 邮政编码
+          province: '', // 中文版–省
+          tel: '' // 手机号码
+        },
+        orderList: [], // 列表
+        cartTotal: '' // 列表价钱
+      }
+    },
+    methods: {
+      changeProvince (e) {
+        let that = this
+        that.from.city = ''
+        that.province.forEach((item) => {
+          if (item.label == e) {
+            that.city = item.children
+          }
+        })
+      },
+      tapsubmit () { // 提交订单
+        this.$api.post('order/submit', {
+          cartId: 0,
+          fpAddressId: this.bill.id,
+          message: '',
+          shAddressId: this.defaultList.id
+        }).then((res) => {
+          if (res.code == 0) {
+            this.$message({
+              message: this.$t('message.checkoutSuccess'),
+              type: 'success'
+            })
+            this.$router.push({name: 'ordersuccess'})
+          } else {
+            this.$message(res.msg)
+          }
+        })
+      },
+      getAddressDetails (num) { // 下一步
+        var obj = {
+          defaultList: this.defaultList,
+          bill: this.bill
+        }
+        sessionStorage.setItem('checkoutData', JSON.stringify(obj))
+        this.$util.goRoute({
+          name: 'payment'
+        })
+        
+      },
+      updateList () { // 修改
+        if (this.verification()) {
+          this.$api.post('address/update', {
+            address: this.from.address,
+            city: this.locale ? '' : this.from.city,
+            company: this.from.company,
+            country: this.locale ? this.from.country : 'China',
+            isDefault: this.from.isDefault == 'YES' ? true : false,
+            id: this.from.id,
+            name: this.from.name,
+            postalCode: this.from.postalCode,
+            province: this.locale ? '' : this.from.province,
+            tel: this.from.tel
+          }).then((res) => {
+            if (res.code == 0) {
+              this.$message({
+                message: this.$t('message.modify') + this.$t('message.success'),
+                type: 'success'
+              })
+              this.tapshow = false
+              this.getList(1)
+            }
+          })
+        }
+      },
+      postList () { // 新增提交
+        if (this.verification()) {
+          this.$api.post('address/add', {
+            address: this.from.address,
+            city: this.locale ? '' : this.from.city,
+            company: this.from.company,
+            country: this.locale ? this.from.country : 'China',
+            isDefault: this.from.isDefault == 'YES' ? true : false,
+            name: this.from.name,
+            postalCode: this.from.postalCode,
+            province: this.locale ? '' : this.from.province,
+            tel: this.from.tel
+          }).then((res) => {
+            if (res.code == 0) {
+              this.$message({
+                message: this.$t('message.addTo') + this.$t('message.success'),
+                type: 'success'
+              })
+              this.tapshow = false
+              this.getList(1)
+            }
+          })
+        }
+      },
+      changeRadio (one) { // 选中
+        this.defaultList = one
+        this.delFlag = one.id
+        let obj = {'delFlag': this.delFlag, 'billId': this.billId}
+        this.$emit('onaddress', obj)
+      },
+      changeBillId (one, num) {
+        if (num == 1) {
+          this.defaultList = one
+          this.delFlag = one.id
+        } else {
+          this.bill = one
+          this.billId = one.id
+        }
+        let obj = {'delFlag': this.delFlag, 'billId': this.billId}
+        this.$emit('onaddress', obj)
+      },
+      tapAddress (num) { // 选择地址
+        if (num == 1) {
+          this.tapshowp = true
+          this.defaultId = this.defaultList.id
+        } else {
+          this.billShow = true
+          this.billId = this.bill.id
+        }
+        this.type = num
+        let obj = {'delFlag': this.delFlag, 'billId': this.billId}
+        this.$emit('onaddress', obj)
+      },
+      handleChange (value) {
+        console.log(value)
+      },
+      tapcancel () {
+        this.tapshow = false
+      },
+      getList (num) {
+        let that = this
+        this.$api.post('address/list').then((res) => {
+          if (res.code == 0) {
+            this.list = res.data || []
+            if (num == 1) {
+              res.data.forEach((item) => {
+                if (item.isDefault) {
+                  that.defaultList = item
+                  that.bill = item
+                  that.delFlag = item.id
+                  that.billId = item.id
+                  let obj = {'delFlag': that.delFlag, 'billId': that.billId}
+                  this.$emit('onaddress', obj)
+                }
+              })
+            }
+          }
+        })
+      },
+      tapEdit (num) { // 编辑
+        this.addAssignment()
+        this.type = ''
+        this.tapshow = true
+      },
+      modifyList (one) { // 修改数据
+        this.assignment(one)
+        this.tapshow = true
+      },
+      assignment (one) {
+        this.from = {
+          address: one.address, // 详细收货地址
+          city: one.city, // 中文版–市
+          company: one.company, // 企业
+          country: one.country, // 国家 中文默认传China
+          id: one.id,
+          isDefault: one.isDefault ? 'YES' : 'NO',
+          name: one.name, // 收货人名称
+          postalCode: one.postalCode, // 邮政编码
+          province: one.province, // 中文版–省
+          tel: one.tel // 手机号码
+        }
+      },
+      addAssignment () {
+        this.from = {
+          address: '', // 详细收货地址
+          city: '', // 中文版–市
+          company: '', // 企业
+          country: '', // 国家 中文默认传China
+          id: '',
+          isDefault: '',
+          name: '', // 收货人名称
+          postalCode: '', // 邮政编码
+          province: '', // 中文版–省
+          tel: '' // 手机号码
+        }
+      },
+      verification () { // 验证
+        if (!this.locale) {
+          if (!this.from.name) {
+            this.$message.error(this.$t('checkout.Name') + this.$t('message.notEmpty'))
+            return false
+          } else if (!this.from.tel) {
+            this.$message.error(this.$t('checkout.Phone') + this.$t('message.notEmpty'))
+            return false
+          } else if (!this.$util.isMobile(this.from.tel)) {
+            this.$message.error(this.$t('checkout.Phone') + this.$t('message.IncorrectFormat'))
+            return false
+          } else if (!this.from.company) {
+            this.$message.error(this.$t('checkout.Institute') + this.$t('message.notEmpty'))
+            return false
+          } else if (!this.from.province) {
+            this.$message.error('请选择省份')
+            return false
+          } else if (!this.from.city) {
+            this.$message.error('请选择市')
+            return false
+          } else if (!this.from.address) {
+            this.$message.error(this.$t('checkout.Addre') + this.$t('message.notEmpty'))
+            return false
+          } else if (!this.from.isDefault) {
+            this.$message.error(this.$t('message.PleaseSelects') + this.$t('checkout.default'))
+            return false
+          } else if (!this.from.postalCode) {
+            this.$message.error(this.$t('checkout.postal') + this.$t('message.notEmpty'))
+            return false
+          } else {
+            return true
+          }
+        } else {
+          if (!this.from.name) {
+            this.$message.error(this.$t('checkout.Name') + this.$t('message.notEmpty'))
+            return false
+          } else if (!this.from.tel) {
+            this.$message.error(this.$t('checkout.Phone') + this.$t('message.notEmpty'))
+            return false
+          } else if (!this.$util.isMobile(this.from.tel)) {
+            this.$message.error(this.$t('checkout.Phone') + this.$t('message.IncorrectFormat'))
+            return false
+          } else if (!this.from.company) {
+            this.$message.error(this.$t('checkout.Institute') + this.$t('message.notEmpty'))
+            return false
+          } else if (!this.from.country) {
+            this.$message.error(this.$t('message.PleaseSelects') + this.$t('order.country'))
+            return false
+          } else if (!this.from.address) {
+            this.$message.error(this.$t('checkout.Addre') + this.$t('message.notEmpty'))
+            return false
+          } else if (!this.from.isDefault) {
+            this.$message.error(this.$t('message.PleaseSelects') + this.$t('checkout.default'))
+            return false
+          } else if (!this.from.postalCode) {
+            this.$message.error(this.$t('checkout.postal') + this.$t('message.notEmpty'))
+            return false
+          } else {
+            return true
+          }
+        }
+      }
+    },
+    mounted () {
+      var h = window.innerHeight
+      this.$refs.tapBox.style.height = h + 'px'
+    },
+    created () {
+      this.country = region
+      this.province = provinces
+      this.getList(1)
+    }
+  }
+  </script>
+  <style lang="scss" scoped>
+  @media screen and (min-width: 751px) and (max-width: 9999px) {
+  .box{
+    overflow: hidden;
+    margin-bottom: 1rem;
+  }
+  .topbox{
+    display: block !important;
+    // margin-bottom: 1.5rem;
+    font-size:  1.4rem;
+    color: #313131;
+    // font-weight: 600;
+  }
+  .topboxp{
+    display: none;
+  }
+  .contentbox{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1.8rem;
+    margin-bottom: 2.6rem;
+    .contentbutton{
+      width: 33%;
+      background: #F3F3F3;
+      height: 48px;
+      border: none;
+      position: relative;
+      text-align: center;
+      line-height: 48px;
+      color: #313131;
+      font-size: 16px;
+      cursor: pointer;
+      .buttonbox_b{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        left: -24px;
+        border-left-color: transparent;
+        border-top-color: #F3F3F3;
+        border-bottom-color: #F3F3F3;
+      }
+      .buttonbox_t{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        right: -24px;
+        border-right-color: white;
+        border-top-color: white;
+        border-bottom-color: white;
+      }
+    }
+    .buttonbox{
+      width: 33%;
+      background: #005BAB;
+      height: 48px;
+      border: none;
+      position: relative;
+      text-align: center;
+      line-height: 48px;
+      color: #ffffff;
+      font-size: 16px;
+      cursor: pointer;
+      .buttonbox_b{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        left: -24px;
+        border-left-color: transparent;
+        border-top-color: #005BAB;
+        border-bottom-color: #005BAB;
+      }
+      .buttonbox_t{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        right: -24px;
+        border-right-color: white;
+        border-top-color: white;
+        border-bottom-color: white;
+      }
+    }
+  }
+  .check_box{
+    width: 100%;
+    background: rgba(0, 91, 171, 0.04);
+    overflow: hidden;
+    .bottom_text{
+      text-align: center;
+      color: #005BAB;
+      font-size: 1.4rem;
+      font-weight: 600;
+      margin: 6.6rem 0 3.4rem 0;
+    }
+    .bottom_button{
+      font-size: 16px;
+      width: 190px;
+      height: 42px;
+      display: block;
+      margin: 0 auto 6.6rem;
+      border: none;
+      border-radius: 2px;
+      background: #005BAB;
+      color: #FFFFFF;
+      cursor: pointer;
+    }
+  }
+  .check_boxf{
+    overflow: hidden;
+    border: 1px solid #DBDBDB;
+    margin-bottom: 1.6rem;
+    .check_center{
+      background: #CFE0EF;
+      padding: 1.4rem 2rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .check_p{
+        font-size: 1.4rem;
+        color:#005BAB ;
+        font-weight: 600;
+      }
+      .check_centerbox{
+        .check_centerboxl{
+          border: 1px solid #005BAB;
+          height: 2rem;
+          padding: 0 1.2rem;
+          background: #CFE0EF;
+          color: #005BAB;
+          margin-right: 1.4rem;
+        }
+        .check_centerboxr{
+          border: none;
+          height: 2rem;
+          padding: 0 1.2rem;
+          background: #005BAB;
+          color: #ffffff;
+        }
+      }
+    }
+    .check_bottom{
+      padding: 3rem 2rem;
+      display: flex;
+      align-items: center;
+      .check_bottombox{
+        display: inline-block;
+        margin-right: 13.6rem;
+        .check_bottomtextf{
+          display: inline-block;
+          color: #313131;
+          font-size: 1.2rem;
+          margin-right: 2rem;
+        }
+        .check_bottomtextb{
+          display: inline-block;
+          margin-top: 1.2rem;
+          color: #313131;
+          font-size: 1.3rem;
+          margin-right: 2rem;
+        }
+      }
+      .check_bottombutton{
+        height: 2rem;
+        padding: 0 1.2rem;
+        background: #005BAB;
+        color: #ffffff;
+        border: none;
+      }
+      .check_pmd{
+        display: none;
+      }
+    }
+  }
+  .check_button{
+    font-size: 16px;
+    width: 190px;
+    height: 42px;
+    display: block;
+    border: none;
+    background: #005BAB;
+    color: #FFFFFF;
+    cursor: pointer;
+    margin-top: 1rem;
+    float: right;
+  }
+  
+  .taps{
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      // top: 0;
+      // left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: rgba(0,0,0,.3);
+      z-index: 999;
+      .taps_s{
+        display: inline-block;
+        padding: 2.4rem 4.8rem 3.4rem;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: #F9FBFD;
+        border-radius: 0.4rem;
+        .taps_a{
+          width: 25rem;
+          position: relative;
+          display: inline-block;
+          background-color: #F9FBFD;
+          .taps_p{
+            color: #005BAB;
+            font-size: 1.4rem;
+            font-weight: 600;
+            text-align: center;
+            margin-bottom: 1.8rem;
+          }
+          .footerbox{
+            // overflow: hidden;
+            .taps_footerbox /deep/{
+              display: flex;
+              align-items: center;
+              position: relative;
+              margin-bottom: 0.8rem;
+              height: 40px;
+              .add_text{
+                width: 35%;
+                font-size: 14px;
+              }
+              .el-select{
+                width: 65%;
+              }
+              .inputbox{
+                width: 65%;
+              }
+              .red-t{
+                font-size: 1.5rem;
+                color: #E52323;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                left: -1rem;
+              }
+            }
+            .buttonbox_taps{
+              width: 100%;
+              background: #0166b4;
+              height: 3rem;
+              padding: 0;
+              margin-top: 1rem;
+            }
+          }
+          .cancel{
+            position: absolute;
+            top: -1.8rem;
+            right: -3.5rem;
+            cursor: pointer;
+            .cancel_images{
+              width: 1.5rem;
+            }
+          }
+        }
+      }
+    }
+  
+  
+  .tapsp{
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      // top: 0;
+      // left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: rgba(0,0,0,.3);
+      z-index: 99;
+      .taps_s{
+        display: inline-block;
+        padding: 2.4rem 4.8rem 3.4rem;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        background-color: #F9FBFD;
+        border-radius: 0.4rem;
+        .list_box{
+          max-height: 600px;
+          overflow-y: auto;
+        }
+        .taps_a{
+          position: relative;
+          display: inline-block;
+          background-color: #F9FBFD;
+          .taps_p{
+            color: #005BAB;
+            font-size: 1.4rem;
+            font-weight: 600;
+            text-align: center;
+            margin-bottom: 1rem;
+          }
+          .check_bottom{
+            padding: 1.4rem 2rem 1.4rem 0.6rem;
+            border-bottom: 1px solid #DBDBDB;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .check_flex /deep/{
+              display: flex;
+              align-items: center;
+              margin-right: 11.6rem;
+              .el-radio{
+                .el-radio__label{
+                  display: none;
+                }
+              }
+              .check_img{
+                width: 16px;
+                height: 16px;
+                margin-right: 2rem;
+              }
+              .check_bottombox{
+                display: inline-block;
+              .check_bottomtextf{
+                display: inline-block;
+                color: #313131;
+                font-size: 1.2rem;
+                margin-right: 2rem;
+              }
+              .check_bottomtextb{
+                display: inline-block;
+                margin-top: 1.2rem;
+                color: #313131;
+                font-size: 1.3rem;
+                margin-right: 2rem;
+              }
+              }
+            }
+  
+          .check_bottombutton{
+            height: 2rem;
+            padding: 0 1.2rem;
+            background: #005BAB;
+            color: #ffffff;
+            border: none;
+            white-space: nowrap;
+            cursor: pointer;
+          }
+        }
+          .cancel{
+            position: absolute;
+            top: -1.8rem;
+            right: -3.5rem;
+            cursor: pointer;
+            .cancel_images{
+              width: 1.5rem;
+            }
+          }
+        }
+      }
+    }
+    .el-table /deep/{
+      .el-table__header{
+        .cell{
+        color: #005BAB;
+        font-size: 16px;
+      }
+      }
+    }
+  }
+  
+  @media screen and (min-width: 0px) and (max-width: 750px) {
+  .box{
+    overflow: hidden;
+    // margin-bottom: 3rem;
+  }
+  .topbox{
+    display: block !important;
+    // margin-bottom: 1.5rem;
+    font-size:  0.18rem;
+    color: #313131;
+    // font-weight: 600;
+  }
+  .topboxp{
+    display: none;
+  }
+  .contentbox{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+    .contentbutton{
+      width: 33%;
+      background: #F3F3F3;
+      height: 48px;
+      border: none;
+      position: relative;
+      text-align: center;
+      line-height: 48px;
+      color: #313131;
+      font-size: 16px;
+      cursor: pointer;
+      .buttonbox_b{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        left: -24px;
+        border-left-color: transparent;
+        border-top-color: #F3F3F3;
+        border-bottom-color: #F3F3F3;
+      }
+      .buttonbox_t{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        right: -24px;
+        border-right-color: white;
+        border-top-color: white;
+        border-bottom-color: white;
+      }
+    }
+    .buttonbox{
+      width: 33%;
+      background: #005BAB;
+      height: 48px;
+      border: none;
+      position: relative;
+      text-align: center;
+      line-height: 48px;
+      color: #ffffff;
+      font-size: 16px;
+      cursor: pointer;
+      .buttonbox_b{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        left: -24px;
+        border-left-color: transparent;
+        border-top-color: #005BAB;
+        border-bottom-color: #005BAB;
+      }
+      .buttonbox_t{
+        width: 0;
+        height: 0;
+        border: 25px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: -1px;
+        right: -24px;
+        border-right-color: white;
+        border-top-color: white;
+        border-bottom-color: white;
+      }
+    }
+  }
+  .check_box{
+    width: 100%;
+    background: rgba(0, 91, 171, 0.04);
+    overflow: hidden;
+    .bottom_text{
+      text-align: center;
+      color: #005BAB;
+      font-size: 0.2rem;
+      font-weight: 600;
+      margin: 0.8rem 0 0.4rem 0;
+    }
+    .bottom_button{
+      font-size: 0.16rem;
+      width: 1.9rem;
+      height: 0.42rem;
+      display: block;
+      margin: 0 auto 0.8rem;
+      border: none;
+      border-radius: 2px;
+      background: #005BAB;
+      color: #FFFFFF;
+      cursor: pointer;
+    }
+  }
+  .check_boxf{
+    overflow: hidden;
+    border: 1px solid #DBDBDB;
+    margin-bottom: 0.2rem;
+    .check_center{
+      background: #CFE0EF;
+      padding: 0.2rem 0.14rem;
+      .check_p{
+        font-size: 0.16rem;
+        color:#005BAB ;
+        font-weight: 700;
+      }
+      .check_centerbox{
+        display: none;
+      }
+    }
+    .check_bottom{
+      padding: 0.2rem;
+      .check_bottombox{
+        overflow: hidden;
+        .check_bottomtextf{
+          color: #313131;
+          font-size: 0.16rem;
+          margin-bottom: 0.16rem;
+          font-weight: 600;
+        }
+        .check_bottomtextb{
+          margin-bottom: 0.16rem;
+          color: #313131;
+          font-size: 0.18rem;
+          font-weight: 600;
+        }
+      }
+      .check_bottombutton{
+        margin-top: 0.14rem;
+        height: 0.4rem;
+        width: 100%;
+        background: #005BAB;
+        color: #ffffff;
+        border: none;
+        font-size: 0.16rem;
+        border-radius: 4px;
+      }
+      .check_pmd{
+        margin-top: 0.16rem;
+        margin-bottom: 0.1rem;
+        width: 100%;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
+        .pmd_centerbox{
+          width: 48%;
+          height: 0.4rem;
+          border: 1px solid #005BAB;
+          background: #fff;
+          color: #005BAB;
+          font-size: 0.16rem;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+  .check_button{
+    font-size: 0.18rem;
+    width: 100%;
+    height: 0.48rem;
+    display: block;
+    border: none;
+    background: #005BAB;
+    color: #FFFFFF;
+    cursor: pointer;
+    margin-top: 0.3rem;
+  }
+  
+  .taps{
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      // min-height: 700px;
+      // top: 0;
+      // left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: rgba(0,0,0,.3);
+      z-index: 99;
+      .tap_box{
+        height: 100%;
+        position: relative;
+      }
+      .taps_s{
+        width: 100%;
+        display: inline-block;
+        padding: 0.3rem 0.2rem 0.3rem 0.1rem;
+        position: absolute;
+        bottom: 0 !important;
+        left: 0;
+        background-color: #F9FBFD;
+        border-radius: 1px;
+        .taps_a{
+          width: 100%;
+          position: relative;
+          display: inline-block;
+          background-color: #F9FBFD;
+          .taps_p{
+            color: #005BAB;
+            font-size: 0.2rem;
+            font-weight: 600;
+            text-align: center;
+            margin-bottom: 0.2rem;
+          }
+          .footerbox{
+            // overflow: hidden;
+            margin-left: 0.1rem;
+            .taps_footerbox{
+              display: flex;
+              align-items: center;
+              position: relative;
+              height: 40px;
+              margin-bottom: 0.16rem;
+              .add_text{
+                width: 35%;
+                font-size: 14px;
+              }
+              .inputbox{
+                width: 65%;
+              }
+              .el-select{
+                width: 65%;
+              }
+              .red-t{
+                font-size: 0.2rem;
+                color: #E52323;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                left: -0.1rem;
+              }
+            }
+            .buttonbox_taps{
+              width: 100%;
+              background: #005BAB;
+              height: 0.42rem;
+              padding: 0;
+              margin-top: 0.04rem;
+            }
+          }
+          .cancel{
+            position: absolute;
+            top: -0.24rem;
+            right: -0.12rem;
+            cursor: pointer;
+            .cancel_images{
+              width: 0.24rem;
+              height: 0.24rem;
+            }
+          }
+        }
+      }
+    }
+  
+  
+  .tapsp{
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      bottom: 0;
+      right: 0;
+      background-color: rgba(0,0,0,.3);
+      z-index: 8;
+      .taps_s{
+        overflow: scroll;
+        height: 70%;
+        width: 100%;
+        display: inline-block;
+        padding: 0.3rem 0.12rem 0.1rem 0.12rem;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: #F9FBFD;
+        border-radius: 1px;
+        .taps_a{
+          width: 100%;
+          position: relative;
+          display: inline-block;
+          background-color: #F9FBFD;
+          .taps_p{
+            color: #005BAB;
+            font-size: 0.2rem;
+            font-weight: 600;
+            text-align: center;
+            margin-bottom: 0.2rem;
+          }
+          .check_bottom{
+            padding: 0.3rem 0.14rem;
+            border: 1px solid #DBDBDB;
+            margin-bottom: 0.16rem;
+            .check_flex /deep/{
+              display: flex;
+              align-items: center;
+              .el-radio__label{
+                display: none;
+              }
+              .check_img{
+              margin-left: 0.06rem;
+              width: 0.16rem;
+              height: 0.16rem;
+              margin-right: 0.2rem;
+            }
+              .check_bottombox{
+            display: inline-block;
+            .check_bottomtextf{
+              color: #313131;
+              font-size: 0.16rem;
+              margin-bottom: 0.16rem;
+            }
+            .check_bottomtextb{
+              margin-bottom: 0.16rem;
+              color: #313131;
+              font-size: 0.18rem;
+            }
+          }
+            }
+  
+  
+          .check_bottombutton{
+            width: 100%;
+            height: 0.4rem;
+            background: #005BAB;
+            color: #ffffff;
+            border: none;
+            font-size: 0.16rem;
+            margin-top: 0.14rem;
+          }
+        }
+          .cancel{
+            position: absolute;
+            top: -0.24rem;
+            right: 0;
+            cursor: pointer;
+            .cancel_images{
+              width: 0.24rem;
+              height: 0.24rem;
+            }
+          }
+        }
+      }
+    }
+    .el-table /deep/{
+      .el-table__header{
+        .cell{
+        color: #005BAB;
+        font-size: 16px;
+      }
+      }
+    }
+  }
+  </style>
+  

src/components/diss-mycart.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="diss-mycart">
+    <div class="table">
+      <div class="table_th">
+        <div class="th" style="width: 200px;">
+          {{ $t("table.productName") }}
+        </div>
+        <div class="th" style="width: 60px;">{{ $t("table.size") }}</div>
+        <div class="th" style="width: 60px;">{{ $t("bottomBar.Price") }}</div>
+        <div class="th" style="width: 70px;">{{ $t("table.quantity") }}</div>
+      </div>
+      <div class="table_tr_box">
+        <div class="table_tr" v-for="(one, i) in list" :key="i">
+          <div class="tr" style="width: 200px;">{{ one.productName }}</div>
+          <div class="tr" style="width: 60px;">{{ one.size }}</div>
+          <div class="tr" style="width: 60px;" v-if="!$util.localeStorage()">
+            {{ one.cnPrice }}
+          </div>
+          <div class="tr" style="width: 60px;" v-if="$util.localeStorage()">
+            {{ one.price }}
+          </div>
+          <div class="tr" style="width: 70px;">{{ one.number }}</div>
+        </div>
+      </div>
+      <div class="buttom_box">
+        <div class="left">
+          <span class="total">{{ $t("card.Subtotal") }}:</span>
+          <span class="num"> {{ $t("bottomBar.money") }}{{ count }}</span>
+        </div>
+        <div class="right" @click="clickCheckoutHandler">
+          {{ $t("card.check") }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "diss-mycart",
+  props: {
+    list: {
+      type: Array,
+      required: true
+    },
+    count: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    clickCheckoutHandler() {
+      window.gtag && window.gtag("event", "checkout_cart");
+      this.$router.push({ name: "mycart" });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.diss-mycart {
+  .table {
+    background-color: #fff;
+    border: 1px solid #0166b4;
+    padding: 10px;
+    border-radius: 6px;
+    position: relative;
+    &::before {
+      position: absolute;
+      display: block;
+      width: 16px;
+      height: 16px;
+      border-top: 1px solid #0166b4;
+      border-left: 1px solid #0166b4;
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      transform: rotate(45deg);
+      content: "";
+      background-color: #fff;
+      top: -9px;
+      // left: 50%;
+      right: 10%;
+      // z-index: -1;
+    }
+    &::after {
+      position: absolute;
+      display: block;
+      width: 100px;
+      height: 40px;
+      content: "";
+      background-color: rgba(0, 0, 0, 0);
+      top: -34px;
+      // left: 50%;
+      // transform: translateX(-50%);
+      right: 0;
+      z-index: -99;
+    }
+    .table_th {
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #0166b4;
+      padding: 4px 0;
+      .th {
+        font-size: 14px;
+        padding: 2px 6px;
+        white-space: nowrap;
+        line-height: 24px;
+        color: #005bab;
+        font-weight: 600;
+      }
+    }
+    .table_tr_box {
+      max-height: 400px;
+      overflow-y: auto;
+    }
+    .table_tr {
+      padding: 4px 0;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #dbdbdb;
+      .tr {
+        font-size: 14px;
+        padding: 4px 8px;
+        color: #606266;
+      }
+    }
+    .buttom_box {
+      margin-top: 4px;
+      padding: 10px 0 6px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .left {
+        width: 200px;
+        font-weight: bold;
+        line-height: 18px;
+        text-align: left;
+        vertical-align: middle;
+        font-size: 18px;
+        .total {
+          font-size: 20px;
+        }
+        .num {
+          color: #f60;
+        }
+      }
+      .right {
+        display: block;
+        padding: 6px 10px;
+        background: #005bab;
+        color: #fff;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+// @media screen and (min-width: 751px) and (max-width: 1600px) {
+//   .table{
+//     &::after {
+//       position: absolute;
+//       display: block;
+//       width: 100px;
+//       height: 40px;
+//       content: "";
+//       background-color: rgba(0,0,0,0);
+//       top: -34px;
+//       left: 70% !important;
+//       // transform: translateX(-50%);
+//       z-index: -99;
+//     }
+//   }
+// }
+</style>

src/components/diss-payment.vue

@@ -0,0 +1,357 @@
+<template>
+  <div>
+     <div class="bottom_payment">
+       <div class="payment_box">
+         <!-- <p class="payment_boxw">{{$t('checkout.Payout')}}</p> -->
+         <p class="payment_boxe"><span class="top_pay">{{$t('checkout.Beneficiary')}}</span><span class="top_pa">{{$t('checkout.Biopharmaceuticals')}}</span></p>
+         <p class="payment_boxe"><span class="top_pay">{{$t('checkout.Industrial')}}</span><span class="top_pa">{{$t('checkout.Account')}}</span></p>
+         <p class="payment_boxe"><span class="top_pay">{{$t('checkout.open')}}</span><span class="top_pa">{{$t('checkout.opening')}}</span></p>
+         <p class="payment_boxe" v-if="!$util.localeStorage()"><span class="top_pay">{{$t('checkout.telphone')}}</span><span class="top_pa">{{$t('checkout.telphones')}}</span></p>
+         <p class="payment_boxe" v-if="$util.localeStorage()"><span class="top_pay">{{$t('checkout.Swift')}}</span><span class="top_pa">{{$t('checkout.Swifts')}}</span></p>
+         <p class="payment_boxe"><span class="top_pay">{{$t('checkout.bank')}}</span><span class="top_pa">{{$t('checkout.banks')}}</span></p>
+         <p class="payment_boxe" v-if="!$util.localeStorage()"><span class="top_pay">邮编:</span><span class="top_pa">201114</span></p>
+       </div>
+     </div>
+    </div>
+  </div>
+  
+</template>
+<script>
+export default {
+  components: {
+  },
+  name: 'dissPayment',
+  data () {
+    return {
+      cartTotal: '' // 列表价钱
+    }
+  },
+  methods: {
+    getOrder () { // 订单列表
+      let that = this
+      this.$api.post('cart/index', {
+        cartList: []
+      }).then((res) => {
+        if (res.code == 0) {
+          that.cartTotal = res.data.cartTotal
+        }
+      })
+    },
+    getAddressDetails () { // 下一步
+      this.$util.goRoute({
+        name: 'order'
+      })
+    }
+  },
+  mounted () {
+  },
+  created () {
+    if (JSON.parse(localStorage.getItem('token'))) {
+      this.getOrder()
+    }
+  }
+}
+</script>
+  <style lang="scss" scoped>
+  @media screen and (min-width: 751px) and (max-width: 9999px) {
+  .box{
+    overflow: hidden;
+    margin-bottom: 3rem;
+  }
+  .topbox{
+    display: block !important;
+    font-size:  1.4rem;
+    color: #313131;
+  }
+  .topboxp{
+    display: none;
+  }
+  .contentbox{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1.8rem;
+    margin-bottom: 2.6rem;
+    .contentbutton{
+      width: 33%;
+      background: #F3F3F3;
+      height: 48px;
+      border: none;
+      position: relative;
+      text-align: center;
+      line-height: 48px;
+      color: #313131;
+      font-size: 16px;
+      cursor: pointer;
+      .buttonbox_b{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        left: -24px;
+        border-left-color: transparent;
+        border-top-color: #F3F3F3;
+        border-bottom-color: #F3F3F3;
+      }
+      .buttonbox_t{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        right: -24px;
+        border-right-color: white;
+        border-top-color: white;
+        border-bottom-color: white;
+      }
+    }
+    .buttonbox{
+      width: 33%;
+      background: #005BAB;
+      height: 48px;
+      border: none;
+      position: relative;
+      text-align: center;
+      line-height: 48px;
+      color: #ffffff;
+      font-size: 16px;
+      cursor: pointer;
+      .buttonbox_b{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        left: -24px;
+        border-left-color: transparent;
+        border-top-color: #005BAB;
+        border-bottom-color: #005BAB;
+      }
+      .buttonbox_t{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        right: -24px;
+        border-right-color: white;
+        border-top-color: white;
+        border-bottom-color: white;
+      }
+    }
+  }
+  // -----
+  .bottom_payment{
+    overflow: hidden;
+    .payment_text{
+      font-size: 1.6rem;
+      color: #313131;
+      .payment_textp{
+        color: #005BAB;
+      }
+    }
+    .payment_box{
+      margin-top: 1.6rem;
+      width: 100%;
+      background: rgba(0, 91, 171, 0.04);
+      overflow: hidden;
+      padding: 2rem;
+      .payment_boxq{
+        color: #6F6F6F;
+        font-size: 1.2rem;
+        line-height: 1.5;
+        word-wrap: break-word;
+        word-break: normal;
+      }
+      .payment_boxw{
+        color: #313131;
+        font-size: 1.4rem;
+        margin: 0 0 0.8rem 0;
+      }
+      .payment_boxe{
+        display: block;
+        color: #313131;
+        font-size: 1.2rem;
+        line-height: 1.5;
+        display: flex;
+        flex-wrap: wrap;
+        .top_pay{
+          // font-weight: 600;
+          display: inline-block;
+          width: 170px;
+        }
+        .top_pa{
+          word-wrap: break-word;
+          word-break: normal;
+          flex: 1;
+        }
+      }
+    }
+    .payment_button{
+      font-size: 16px;
+      width: 190px;
+      height: 42px;
+      display: block;
+      margin-top: 2.6rem;
+      border: none;
+      background: #005BAB;
+      color: #FFFFFF;
+      cursor: pointer;
+      float: right;
+    }
+  }
+  
+  }
+  
+  @media screen and (min-width: 0px) and (max-width: 750px) {
+  .box{
+    overflow: hidden;
+  }
+  .topbox{
+    display: block !important;
+    font-size:  0.18rem;
+    color: #313131;
+  }
+  .topboxp{
+    display: none;
+  }
+  .contentbox{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+    .contentbutton{
+      width: 33%;
+      background: #F3F3F3;
+      height: 48px;
+      border: none;
+      position: relative;
+      text-align: center;
+      line-height: 48px;
+      color: #313131;
+      font-size: 16px;
+      cursor: pointer;
+      .buttonbox_b{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        left: -24px;
+        border-left-color: transparent;
+        border-top-color: #F3F3F3;
+        border-bottom-color: #F3F3F3;
+      }
+      .buttonbox_t{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        right: -24px;
+        border-right-color: white;
+        border-top-color: white;
+        border-bottom-color: white;
+      }
+    }
+    .buttonbox{
+      width: 33%;
+      background: #005BAB;
+      height: 48px;
+      border: none;
+      position: relative;
+      text-align: center;
+      line-height: 48px;
+      color: #ffffff;
+      font-size: 16px;
+      cursor: pointer;
+      .buttonbox_b{
+        width: 0;
+        height: 0;
+        border: 24px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: 0;
+        left: -24px;
+        border-left-color: transparent;
+        border-top-color: #005BAB;
+        border-bottom-color: #005BAB;
+      }
+      .buttonbox_t{
+        width: 0;
+        height: 0;
+        border: 25px solid transparent;
+        // background: white;
+        position: absolute;
+        bottom: -1px;
+        right: -24px;
+        border-right-color: white;
+        border-top-color: white;
+        border-bottom-color: white;
+      }
+    }
+  }
+  .bottom_payment{
+    overflow: hidden;
+    .payment_text{
+      font-size: 0.22rem;
+      color: #313131;
+      .payment_textp{
+        color: #005BAB;
+      }
+    }
+    .payment_box{
+      margin-top: 0.2rem;
+      width: 100%;
+      background: rgba(0, 91, 171, 0.04);
+      overflow: hidden;
+      padding: 0.24rem;
+      .payment_boxq{
+        color: #6F6F6F;
+        font-size: 0.16rem;
+        line-height: 1.5;
+        word-wrap: break-word;
+        word-break: normal;
+      }
+      .payment_boxw{
+        color: #313131;
+        font-size: 0.2rem;
+        margin: 0 0 0.1rem 0;
+      }
+      .payment_boxe{
+        color: #313131;
+        font-size: 0.16rem;
+        line-height: 1.5;
+        .top_pay{
+          font-weight: 600;
+        }
+        .top_pa{
+          display: block;
+          word-wrap: break-word;
+          word-break: normal;
+        }
+      }
+    }
+    .payment_button{
+      width: 100%;
+      font-size: 0.18rem;
+      height: 0.48rem;
+      border-radius: 4px;
+      margin-top: 0.3rem;
+      border: none;
+      background: #005BAB;
+      color: #FFFFFF;
+      cursor: pointer;
+    }
+  }
+  }
+  </style>
+  

src/components/header.vue

@@ -3,27 +3,77 @@
     <div class="go_landing">
       <div class="center_landing">
         <div class="center_landingl">
-          <!-- <p class="center_text">
-            <router-link to="/contact">{{ $t("button.contactUs") }}</router-link>
+          <el-row class="block-col-2">
+            <el-col>
+              <el-select v-model="locale" placeholder="" @change="changeLocale">
+                <el-option
+                  v-for="item in list"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+          <p class="center_text">
+            {{ $t("homePage.Contact") }} {{ $t("taps.Telnum")
+            }}<router-link to="/contact">{{ $t("homePage.us") }}</router-link>
           </p>
           <p class="center_pmd">
-            <router-link to="/contact"> {{ $t("button.contactUs") }}</router-link>
-          </p> -->
+            {{ $t("homePage.Contact") }} {{ $t("taps.Telnum")
+            }}<router-link to="/contact"> {{ $t("homePage.us") }}</router-link>
+          </p>
         </div>
         <div class="center_landingr">
+          <div
+            class="goshopping_box"
+            @click="$router.push({ name: 'mycart' })"
+            @mouseenter="mouseenterMycar"
+          >
+            <p class="center_text mycart_t">
+              <img src="@/assets/icon/cart.png" alt="" class="icon" />{{
+                $t("homePage.basket")
+              }}
+            </p>
+            <div class="goshopping_text" v-if="num > 0">{{ num }}</div>
+            <div
+              class="taps_cart"
+              :class="mycartShow ? 'mycart_aps' : ''"
+              @mouseleave="mouseleaveMycar"
+            >
+              <dissMycart
+                v-show="mycartShow"
+                :list="listCart"
+                :count="cartTotal"
+                ref="dissMycart"
+              ></dissMycart>
+            </div>
+          </div>
+          <div class="cardpmd" @click="$router.push({ name: 'mycart' })">
+            <img
+              class="landingpmd_card"
+              src="@/assets/img/shoppingcard.png"
+              alt=""
+            />
+            <div class="cardpmd_text" v-if="num > 0">{{ num }}</div>
+          </div>
           <el-row class="block-col-2" v-if="tokenShow">
             <el-col>
               <el-dropdown trigger="click">
                 <span class="el-dropdown-link">
-                  {{ subStr(info)  || $t("homePage.User")
+                  {{ info.name || info.nickname
                   }}<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item
-                    @click.native="$router.push({ name: 'MyAntibody' })"
-                    >{{ $t("pageTitle.antibody") }}</el-dropdown-item
+                    @click.native="$router.push({ name: 'address' })"
+                    >{{ $t("checkout.Addre") }}</el-dropdown-item
+                  >
+                  <el-dropdown-item
+                    @click.native="$router.push({ name: 'orderList' })"
+                    >{{ $t("checkout.Order") }}</el-dropdown-item
                   >
-                  <el-dropdown-item @click.native="$router.push({ name: 'antigen' })">Antigen</el-dropdown-item>
                   <el-dropdown-item @click.native="signOut">{{
                     $t("checkout.Sign")
                   }}</el-dropdown-item>
@@ -52,10 +102,11 @@
   </div>
 </template>
 <script>
-import Bus from "@/js/bus";
+import dissMycart from "./diss-mycart";
 export default {
   name: "Header",
   components: {
+    dissMycart
   },
   data() {
     return {
@@ -65,7 +116,7 @@ export default {
       info: "",
       // locale: this.$util.localeStorage() ? 'English': 'Chinese',
       locale: this.$util.localeStorage() ? "英文" : "中文",
-      tokenShow: false,
+      tokenShow: !!localStorage.getItem("token"),
       list: [
         {
           id: 1,
@@ -90,40 +141,24 @@ export default {
   },
   created() {
     this.info = JSON.parse(localStorage.getItem("info"));
-    // this.getList();
+    this.getList();
   },
   mounted() {
     let _this = this;
-    Bus.$on("onmycar", val => {
-      this.mouseleaveMycar()
-    });
     window.addEventListener("setItemEvent", function(e) {
       if (e.key === "shoppingNum") {
         _this.num = e.newValue;
       }
-      // if (e.key === "cartTap") {
-      //   if (e.newValue === "1") {
-      //     _this.mouseenterMycar();
-      //   } else {
-      //     _this.mouseleaveMycar();
-      //   }
-      // }
-    });
-  },
-  methods: {
-    // 字符串截取
-    subStr(info) {
-      let name = ""
-      let nickname = info.name || info.nickname
-      if (nickname) {
-        if (nickname.length > 5) {
-          name = nickname.substring(0, 5) + "...";
+      if (e.key === "cartTap") {
+        if (e.newValue === "1") {
+          _this.mouseenterMycar();
         } else {
-          name = nickname;
+          _this.mouseleaveMycar();
         }
       }
-      return name
-    },
+    });
+  },
+  methods: {
     changeLocale(e) {
       sessionStorage.removeItem("tdk");
       localStorage.removeItem("token");
@@ -147,9 +182,12 @@ export default {
         name: "login"
       });
     },
+    mouseenterMycar() {
+      this.mycartShow = true;
+      this.getList();
+    },
     mouseleaveMycar() {
-      this.tokenShow = localStorage.getItem("token") ? true : false;
-      this.info = JSON.parse(localStorage.getItem("info"));
+      this.mycartShow = false;
     },
     getList() {
       let that = this;
@@ -177,6 +215,11 @@ export default {
           .then(res => {
             if (res.code === 0) {
               this.listCart = res.data.cartList;
+              // var count = 0
+              // res.data.cartList.forEach((item) => {
+              //   count += Number(item.number) * Number(item.cnPrice)
+              // })
+              // that.cartTotal = count
               that.cartTotal = res.data.cartTotal.checkedGoodsDiscount;
             } else {
               this.$message(res.msg);
@@ -368,7 +411,6 @@ export default {
     .go_landing {
       width: 100%;
       background-color: #273949;
-      overflow: hidden;
       .center_landing {
         width: 100%;
         height: 0.32rem;
@@ -379,12 +421,11 @@ export default {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding-left: 20px;
           .block-col-2 /deep/ {
             cursor: pointer;
-            margin-right: 0.08rem;
-            width: 0.68rem;
-            margin-left: 0.08rem;
+            margin-right: 0.1rem;
+            width: 0.88rem;
+            margin-left: 0.1rem;
             .el-col {
               .el-select {
                 // width: 0.88rem;
@@ -434,26 +475,21 @@ export default {
             // margin-left: 80px;
             .el-dropdown {
               height: 0.32rem;
-              line-height: 32px;
+              line-height: 0.32rem;
               // width: 100px;
               display: block;
             }
             .el-dropdown-link {
-              display: block;
-              width: 100%;
               color: #fff;
               margin-left: 0.1rem;
-              display: flex;
-              align-items: center;
-              // text-align: center !important;
             }
             .el-icon-arrow-down {
-              margin-left: 0.05rem;
-              margin-right: 0.08rem;
+              margin-left: 0.1rem;
+              margin-right: 0.1rem;
+            }
+            .el-dropdown:hover {
+              background: #005bab;
             }
-            // .el-dropdown:hover {
-            //   background: #005bab;
-            // }
           }
           .goshopping_box {
             display: none;
@@ -473,7 +509,7 @@ export default {
             .landingpmd_imgf {
               width: 0.24rem;
               height: 0.24rem;
-              margin-right: 0.1rem;
+              margin-right: 0.2rem;
             }
           }
         }

src/components/homeHeader.vue

@@ -13,7 +13,7 @@
             <el-menu-item index="article">相关文章</el-menu-item>
             <el-menu-item index="product">产品详情</el-menu-item>
             <el-menu-item index="antibody">抗体数据库</el-menu-item>
-            <el-menu-item index="product">资料下载</el-menu-item>
+            <el-menu-item index="profile">资料下载</el-menu-item>
           </el-menu>
 
         </div>
@@ -23,9 +23,24 @@
             <userInfo class="user_info"></userInfo>
           </div>
         </div>
+         <!-- 移动端 -->
         <div style="display:none" class="menu" @click="tapcanceltpmd">
           <img class="menu_img" src="@/assets/img/menu.png" alt="" />
         </div>
+        <div class="menubox" v-if="tapshowpmd">
+          <div class="cancel" @click="tapcanceltpmdn">
+            <img src="@/assets/img/dele.png" alt="" class="cancel_images" />
+          </div>
+          <!-- 移动端菜单 -->
+          <el-menu class="el-menu-demo" default-active="1" background-color="#005bab" text-color="#ffffff" active-text-color="#ffffff" @select="handleSelect">
+            <el-menu-item index="contact">全览图</el-menu-item>
+            <el-menu-item index="contact">相关文章</el-menu-item>
+            <el-menu-item index="product">产品详情</el-menu-item>
+            <el-menu-item index="contact">抗体数据库</el-menu-item>
+            <el-menu-item index="profile">资料下载</el-menu-item>
+            <!-- <el-menu-item index="contact">{{ $t("button.contactUs") }}</el-menu-item> -->
+          </el-menu>
+        </div>
       </div>
     </div>
     <!-- <indexTaps></indexTaps> -->

src/components/userInfo.vue

@@ -2,25 +2,46 @@
   <div class="userInfo_top-box">
     <div class="go_landing">
       <div class="center_landing">
-        <!-- <div class="center_landingl">
+        <div class="center_landingl">
           <p class="center_text">
-            <router-link class="contact" to="/contact">{{ $t("button.contactUs") }}</router-link>
+            <span class="telnum">{{ $t("homePage.CallName") }}</span
+            >{{ $t("taps.Telnum") }} <br /><router-link
+              class="contact"
+              to="/contact"
+              >{{ $t("homePage.us") }}</router-link
+            >
           </p>
-        </div> -->
+          <el-row class="block-col-2">
+            <el-col>
+              <el-select v-model="locale" placeholder="" @change="changeLocale">
+                <el-option
+                  v-for="item in list"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+        </div>
         <div class="center_landingr">
           <el-row class="block-col-2" v-if="tokenShow">
             <el-col>
               <el-dropdown trigger="click">
                 <span class="el-dropdown-link">
-                  {{ info.name || info.nickname || $t("homePage.User")
+                  {{ info.name || info.nickname
                   }}<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item
-                    @click.native="$router.push({ name: 'MyAntibody' })"
-                    >{{ $t("pageTitle.antibody") }}</el-dropdown-item
+                    @click.native="$router.push({ name: 'address' })"
+                    >{{ $t("checkout.Addre") }}</el-dropdown-item
+                  >
+                  <el-dropdown-item
+                    @click.native="$router.push({ name: 'orderList' })"
+                    >{{ $t("checkout.Order") }}</el-dropdown-item
                   >
-                  <el-dropdown-item @click.native="$router.push({ name: 'antigen' })">Antigen</el-dropdown-item>
                   <el-dropdown-item @click.native="signOut">{{
                     $t("checkout.Sign")
                   }}</el-dropdown-item>
@@ -38,6 +59,33 @@
               >{{ $t("landing.registration") }}</el-button
             >
           </div>
+          <div
+            class="goshopping_box"
+            @click="$router.push({ name: 'mycart' })"
+            @mouseenter="mouseenterMycar"
+          >
+            <p class="center_text mycart_t">
+              <!-- <i class="el-icon-shopping-cart-2"></i> -->
+              <img
+                src="@/assets/img/gouwugouwuchedinggou.png"
+                class="images-mycar"
+              />
+              {{ $t("homePage.basket") }}
+              <span class="goshopping_text" v-if="num > 0">({{ num }})</span>
+            </p>
+            <div
+              class="taps_cart"
+              :class="mycartShow ? 'mycart_aps' : ''"
+              @mouseleave="mouseleaveMycar"
+            >
+              <dissMycart
+                v-show="mycartShow"
+                :list="listCart"
+                :count="cartTotal"
+                ref="dissMycart"
+              ></dissMycart>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -45,9 +93,12 @@
 </template>
 <script>
 import Bus from "@/js/bus";
+import dissMycart from "./diss-mycart";
+var that = this;
 export default {
   name: "userInfo",
   components: {
+    dissMycart
   },
   data() {
     return {
@@ -59,7 +110,7 @@ export default {
       locale: this.$util.localeStorage()
         ? this.$t("homePage.English")
         : this.$t("homePage.Chinese"),
-      tokenShow: false,
+      tokenShow: !!localStorage.getItem("token"),
       list: [
         {
           id: 1,
@@ -77,12 +128,54 @@ export default {
       num: JSON.parse(localStorage.getItem("shoppingNum")) // 购物车数量
     };
   },
+  // watch: {
+  //   '$store.state.tapscart' (newVal, oldVal) {
+  //     // console.log(newVal, '==========', oldVal)
+  //     if (oldVal > 0) {
+  //       console.log(newVal, '==========', oldVal)
+  //       // that.mycartShow = true
+  //       // this.getList()
+  //       this.mouseenterMycar()
+  //     } else {
+  //       that.mycartShow = false
+  //     }
+  //   }
+  // },
+  created() {
+    this.info = JSON.parse(localStorage.getItem("info"));
+    this.getList();
+  },
+  mounted() {
+    let _this = this;
+    Bus.$on("onmycar", val => {
+      // this.mouseenterMycar()
+      // console.log(val, '3333333333')
+      if (val == 1) {
+        // console.log(val, '88888')
+        this.showList = false;
+        this.mouseenterMycar();
+        // console.log(val, '444444')
+      } else {
+        _this.mouseleaveMycar();
+      }
+    });
+    window.addEventListener("setItemEvent", function(e) {
+      // let key = e.key
+      // console.log(key, '======')
+      if (e.key === "shoppingNum") {
+        _this.num = e.newValue;
+      }
+      // if (e.key === 'cartTap') {
+      //   let cartTap = localStorage.getItem('cartTap')
+      //   if (cartTap) {
+      //     _this.mouseenterMycar()
+      //   } else {
+      //     _this.mouseleaveMycar()
+      //   }
+      // }
+    });
+  },
   methods: {
-    // 切换语言
-    changeLanguage(val) {
-      this.locale = val.name;
-      this.$i18n.locale = val.value;
-    },
     changeLocale(e) {
       sessionStorage.removeItem("tdk");
       localStorage.removeItem("token");
@@ -99,8 +192,6 @@ export default {
       } else {
         localStorage.setItem("shoppingNum", JSON.stringify(0));
       }
-      this.$store.commit("setToken", "")
-      this.$store.commit("setUserInfo", null)
       localStorage.removeItem("user");
       localStorage.removeItem("token");
       localStorage.removeItem("info");
@@ -108,27 +199,60 @@ export default {
         name: "login"
       });
     },
+    mouseenterMycar() {
+      this.mycartShow = true;
+      this.getList();
+    },
     mouseleaveMycar() {
-      this.tokenShow = localStorage.getItem("token") ? true : false;
-      this.info = JSON.parse(localStorage.getItem("info"));
-      console.log(this.tokenShow, '=========this.tokenShow=============')
-    }
-  },
-  created() {
-    this.info = JSON.parse(localStorage.getItem("info"));
-  },
-  mounted() {
-    let _this = this;
-    Bus.$on("onmycar", val => {
-      console.log(val, '=========val=============')
-      this.mouseleaveMycar()
-    });
-    window.addEventListener("setItemEvent", function(e) {
-      if (e.key === "shoppingNum") {
-        _this.num = e.newValue;
+      this.mycartShow = false;
+    },
+    getList() {
+      let that = this;
+      let data = JSON.parse(localStorage.getItem("shoppingCart"));
+      let arry = [];
+      if (JSON.parse(localStorage.getItem("token"))) {
+        if (data && data.length > 0) {
+          data.forEach(item => {
+            var obj = {
+              checked: true,
+              id: item.id,
+              number: item.number,
+              productCatalog: item.productCatalog,
+              skuId: item.skuId
+            };
+            arry.push(obj);
+          });
+        } else {
+          arry = null;
+        }
+        this.$api
+          .post("cart/index", {
+            cartList: arry
+          })
+          .then(res => {
+            if (res.code == 0) {
+              this.listCart = res.data.cartList;
+              that.cartTotal = res.data.cartTotal.checkedGoodsDiscount;
+            } else {
+              // this.$message(res.msg)
+            }
+          });
+      } else {
+        if (data && data.length > 0) {
+          that.listCart = [];
+          that.cartTotal = 0;
+          data.forEach(item => {
+            that.listCart.push(item);
+            if (this.$util.localeStorage()) {
+              that.cartTotal += item.number * item.discountPrice;
+            } else {
+              that.cartTotal += item.number * item.cnDiscountPrice;
+            }
+          });
+        }
       }
-    });
-  },
+    }
+  }
 };
 </script>
 
@@ -141,8 +265,8 @@ export default {
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
-        align-items: center;
-        // align-content: center;
+        // align-items: center;
+        align-content: center;
         .center_landingl {
           text-align: center;
           font-weight: 500;
@@ -218,7 +342,7 @@ export default {
             .el-dropdown-link {
               color: #000;
               margin-left: 20px;
-              font-size: 14px;
+              font-size: 12px;
             }
             .el-icon-arrow-down {
               margin-left: 6px;
@@ -232,7 +356,6 @@ export default {
             cursor: pointer;
           }
           .login_b {
-            // margin-top: 0.5rem;
             display: block;
             color: #000;
             .buttom /deep/ {

src/langs/cn/DownloadList.js

@@ -0,0 +1,101 @@
+export default {
+  list: [
+      {
+        title: "公司介绍",
+        url: '../static/img/profile/z_1.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_1.pdf'
+    }, {
+        title: "真核蛋白制备全能包",
+        url: '/static/img/profile/z_4.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_2.pdf'
+    }, {
+        title: "一站式结构解析平台服务",
+        url: '/static/img/profile/z_23.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_3.pdf'
+    }, {
+        title: "靶点至PCC药物研发",
+        url: '/static/img/profile/z_3.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_4.pdf'
+    }, {
+        title: "PCC至IND药物研发",
+        url: '/static/img/profile/z_5.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_5.pdf'
+    }, {
+        title: "ADC偶联药抗体研发",
+        url: '/static/img/profile/z_6.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_6.pdf'
+    }, {
+        title: "CAR-T 治疗抗体研发",
+        url: '/static/img/profile/z_7.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_7.pdf'
+    }, {
+        title: "三优超万亿抗体库平台",
+        url: '/static/img/profile/z_8.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_8.pdf'
+    }, {
+        title: "超万亿全人抗体库子库筛选",
+        url: '/static/img/profile/z_24.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_9.pdf'
+    }, {
+        title: "超万亿单域抗体库子库筛选",
+        url: '/static/img/profile/z_10.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_10.pdf'
+    }, {
+        title: "超万亿共轻抗体库子库筛选",
+        url: '/static/img/profile/z_2.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_11.pdf'
+    }, {
+        title: "MIT小鼠重组单抗定制",
+        url: '/static/img/profile/z_11.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_12.pdf'
+    }, {
+        title: "MIT羊驼单克隆抗体定制",
+        url: '/static/img/profile/z_25.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_13.pdf'
+    }, {
+        title: "高品质克级抗体样品制备",
+        url: '/static/img/profile/z_13.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_14.pdf'
+    }, {
+        title: "蛋白快速制备服务",
+        url: '/static/img/profile/z_9.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_15.pdf'
+    }, {
+        title: "抗体深度人源化改造服务（鼠源）",
+        url: '/static/img/profile/z_14.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_16.pdf'
+    }, {
+        title: "抗体深度人源化改造服务（驼源）",
+        url: '/static/img/profile/z_18.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_17.pdf'
+    }, {
+        title: "全长抗体亲和力成熟",
+        url: '/static/img/profile/z_15.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_18.pdf'
+    }, {
+        title: "单域抗体亲和力成熟",
+        url: '/static/img/profile/z_16.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_19.pdf'
+    }, {
+        title: "体外药效评价服务",
+        url: '/static/img/profile/z_19.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_20.pdf'
+    }, {
+        title: "创新药动物药效筛选",
+        url: '/static/img/profile/z_20.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_21.pdf'
+    }, {
+        title: "多维度抗体表征分析服务",
+        url: '/static/img/profile/z_17.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_22.pdf'
+    }, {
+        title: "工业生产用细胞株构建服务",
+        url: '/static/img/profile/z_21.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_23.pdf'
+    }, {
+        title: "发酵工艺研发",
+        url: '/static/img/profile/z_22.png',
+        link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/uploads/file/z_24.pdf'
+    }
+    ]
+  }

src/langs/cn/index.js

@@ -1,10 +1,20 @@
 import tdk from "./tdk"
 import advertisement from "./advertisement"
 import antigen from "./antigen"
+import downloadList from "./DownloadList"
 export default {
   antigen,
   advertisement,
   tdk,
+  downloadList,
+  // 资料下载
+  Download: {
+    LatestInformation: 'Latest information',
+    View: 'View',
+    Download: 'Download',
+    Eukaryotic: 'Eukaryotic Protein Preparation All-inclusive Package',
+    loading: 'Loading',
+  },
   immuneCheckpoint: {
     title: "Immune Checkpoint Protein",
     background: ["Immune checkpoint proteins are proteins expressed in immune cells and can maintain immune homeostasis. Their abnormal expression and functional imbalance lead to various diseases, such as tumors and autoimmunity. In recent years, the successive marketing of antibody drugs developed for immune checkpoints, such as PD-1/PD-L1 and CTL-4, has opened the door to immunotherapy. Clinical trials on popular targets such as CD24, B7-H3, and 4-1BB are also in full swing, and new immune checkpoints such as CD161 and TREAM2 have also provided new ideas for immunotherapy."],

src/langs/en/DownloadList.js

@@ -0,0 +1,101 @@
+export default {
+  list: [
+    {
+      title: "Innovative Biological Drug Integrated R&D Service Platform",
+      url: '/static/img/profile/z_1.png',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_1.pdf'
+  }, {
+      title: "Eukaryotic Protein Preparation All-inclusive Package",
+      url: '/static/img/profile/e_4.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_2.pdf'
+  }, {
+      title: "One-stop Structure Determination Platform Services",
+      url: '/static/img/profile/e_3.png',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_3.pdf'
+  }, {
+      title: "Integrated Service for  Innovative Therapeutic Antibody  Discovery from Target to PCC",
+      url: '/static/img/profile/e_3.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_4.pdf'
+  }, {
+      title: "Antibody Drug Development from  Preclinical Candidate to IND",
+      url: '/static/img/profile/e_5.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_5.pdf'
+  }, {
+      title: "Antibody-drug Conjugates  R&D Services",
+      url: '/static/img/profile/e_6.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_6.pdf'
+  }, {
+      title: "CAR-T Cell Therapy Research and Development",
+      url: '/static/img/profile/e_7.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_7.pdf'
+  }, {
+      title: "Super-Trillion Innovative Antibody Drug Discovery Platform",
+      url: '/static/img/profile/e_8.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_8.pdf'
+  }, {
+      title: "Screening With the Sub-library of Super-trillion Fully Human Ab Library",
+      url: '/static/img/profile/e_24.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_9.pdf'
+  }, {
+      title: "Screening With the Sub-library of Super-trillion Single Domain Ab Library",
+      url: '/static/img/profile/e_10.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_10.pdf'
+  }, {
+      title: "Screening With the Sub-library of Super-trillion Common Light Chain Ab Library",
+      url: '/static/img/profile/e_2.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_11.pdf'
+  }, {
+      title: "Sanyou Bio MIT Mouse Recombinant mAb Customization",
+      url: '/static/img/profile/e_11.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_12.pdf'
+  }, {
+      title: "Sanyou MIT Alpaca Antibody Library Construction and Screening Service",
+      url: '/static/img/profile/e_25.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_13.pdf'
+  }, {
+      title: "High-quality Bulk Antibody  Production Service",
+      url: '/static/img/profile/e_13.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_14.pdf'
+  }, {
+      title: "Rapid Protein Expression and Purification Service",
+      url: '/static/img/profile/e_9.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_15.pdf'
+  }, {
+      title: "In-depth Antibody Humanization Service",
+      url: '/static/img/profile/e_14.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_16.pdf'
+  }, {
+      title: "Humanization Service of Alpaca-Derived Nanobodies",
+      url: '/static/img/profile/e_18.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_17.pdf'
+  }, {
+      title: "Full-length Antibody  Affinity Maturation Service",
+      url: '/static/img/profile/e_15.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_18.pdf'
+  }, {
+      title: "Nanobody Affinity Maturation Services",
+      url: '/static/img/profile/e_16.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_19.pdf'
+  }, {
+      title: "Sanyou Bio In Vitro Efficacy Evaluation",
+      url: '/static/img/profile/e_19.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_20.pdf'
+  }, {
+      title: "In Vivo  Efficacy Evaluation  in Animal Models for Innovative  Antibody Drug",
+      url: '/static/img/profile/e_20.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_21.pdf'
+  }, {
+      title: "Multidimensional Antibody  Characterization Service",
+      url: '/static/img/profile/e_17.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_22.pdf'
+  }, {
+      title: " Industrial Production Cell  Line Development Service",
+      url: '/static/img/profile/e_21.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_23.pdf'
+  }, {
+      title: "Fermentation Process  Development Service",
+      url: '/static/img/profile/e_22.jpg',
+      link: 'https://sanyou-offical-website.oss-cn-shanghai.aliyuncs.com/old/en/uploads/article/e_24.pdf'
+  }
+  ]
+}

src/langs/en/index.js

@@ -1,10 +1,20 @@
 import tdk from "./tdk"
 import advertisement from "./advertisement"
 import antigen from "./antigen"
+import downloadList from "./DownloadList"
 export default {
   antigen,
   advertisement,
   tdk,
+  downloadList,
+  // 资料下载
+  Download: {
+    LatestInformation: 'Latest information',
+    View: 'View',
+    Download: 'Download',
+    Eukaryotic: 'Eukaryotic Protein Preparation All-inclusive Package',
+    loading: 'Loading',
+  },
   immuneCheckpoint: {
     title: "Immune Checkpoint Protein",
     background: ["Immune checkpoint proteins are proteins expressed in immune cells and can maintain immune homeostasis. Their abnormal expression and functional imbalance lead to various diseases, such as tumors and autoimmunity. In recent years, the successive marketing of antibody drugs developed for immune checkpoints, such as PD-1/PD-L1 and CTL-4, has opened the door to immunotherapy. Clinical trials on popular targets such as CD24, B7-H3, and 4-1BB are also in full swing, and new immune checkpoints such as CD161 and TREAM2 have also provided new ideas for immunotherapy."],

src/langs/en/tak_en.js

@@ -1,215 +0,0 @@
-export default {
-  list: [
-    {
-      delFlag: false,
-      description: "oneClick+ is a one-stop solution for bi-specific antibody (bsAb) from antibody design to expression services, aiming to help professionals and beginners simplify the antibody design process. The oneClick+ platform has an established  antibody format library, including IgG-like antibodies, nanobodies, and single-chain varibale fragment antibodies (ScFv). Sanyou Bio has solid experience in antibody expression services, which empowers the oneClick+ platform to provide customer personalized bispecific antibody design and expression services.",
-      id: 1,
-      keyswords: "Antibody, antibody design, bi-specific antibidy (bsAb), bi-speific antibody design antibody expresison, protein, protein expression",
-      name: "home",
-      page: "home",
-      parentId: 0,
-      path: "/",
-      title: "oneClick+ | Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 2,
-      keyswords: "",
-      name: "login",
-      page: "login",
-      parentId: 0,
-      path: "/login",
-      title: "Login | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 3,
-      keyswords: "",
-      name: "PasswordReset",
-      page: "PasswordReset",
-      parentId: 0,
-      path: "/PasswordReset",
-      title: "Password Reset | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 4,
-      keyswords: "",
-      name: "register",
-      page: "register",
-      parentId: 0,
-      path: "/register",
-      title: "Register | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 5,
-      keyswords: "",
-      name: "application",
-      page: "application",
-      parentId: 0,
-      path: "/application",
-      title: "Password Reset Application| oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 6,
-      keyswords: "",
-      name: "RegisterConfirmation",
-      page: "RegisterConfirmation",
-      parentId: 0,
-      path: "/RegisterConfirmation",
-      title: "Register Confirmation | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "Sanyou Bio oneClick+, homepage, one-stop solution for bi-specific antibody, What is oneClick+ antibody platform, oneClick+ antibody platform instructional video",
-      id: 7,
-      keyswords: "Sanyou Bio oneClick+, homepage, one-stop solution for bi-specific antibody, What is oneClick+ antibody platform, oneClick+ antibody platform instructional video",
-      name: "homePage",
-      page: "homePage",
-      parentId: 0,
-      path: "/homePage",
-      title: "oneClick+ | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "Sanyou Bio oneClick+, home Antibody,one-stop solution for bi-specific antibody, antibody design, oneclick+ antibody, oneclick+ antigen",
-      id: 8,
-      keyswords: "Sanyou Bio oneClick+, home Antibody,one-stop solution for bi-specific antibody, antibody design, oneclick+ antibody, oneclick+ antigen",
-      name: "homeAntibody",
-      page: "homeAntibody",
-      parentId: 0,
-      path: "/homeAntibody",
-      title: "One-Stop Solution for Antibody | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "Sanyou Bio oneClick+, oneClickPlus, webtool",
-      id: 9,
-      keyswords: "Sanyou Bio oneClick+, oneClickPlus, webtool",
-      name: "oneClickPlus",
-      page: "oneClickPlus",
-      parentId: 0,
-      path: "/oneClickPlus",
-      title: "Designing Antibodies | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "Sanyou Bio oneClick+, antibody-sequences",
-      id: 10,
-      keyswords: "Sanyou Bio oneClick+, antibody-sequences",
-      name: "AntibodySequences",
-      page: "antibody-sequences",
-      parentId: 0,
-      path: "/antibody-sequences",
-      title: "Antibody Sequences | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 11,
-      keyswords: "",
-      name: "privacy-policy",
-      page: "privacy-policy",
-      parentId: 0,
-      path: "/privacy-policy",
-      title: "Privacy Policy | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 12,
-      keyswords: "",
-      name: "about",
-      page: "about",
-      parentId: 0,
-      path: "/about",
-      title: "About | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 13,
-      keyswords: "",
-      name: "message",
-      page: "message",
-      parentId: 0,
-      path: "/message",
-      title: "Message | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 14,
-      keyswords: "",
-      name: "AntigenPreparation",
-      page: "AntigenPreparation",
-      parentId: 0,
-      path: "/AntigenPreparation",
-      title: "Antigen Preparation | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 15,
-      keyswords: "",
-      name: "AntigenInformation",
-      page: "AntigenInformation",
-      parentId: 0,
-      path: "/AntigenInformation",
-      title: "Antigen Information | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "Sanyou Bio oneClick+, antibody production, antibody expression service",
-      id: 16,
-      keyswords: "Sanyou Bio oneClick+, antibody production, antibody expression service",
-      name: "production",
-      page: "production",
-      parentId: 0,
-      path: "/antibody-production",
-      title: "Antibody Production | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "Sanyou Bio oneClick+, my antibody",
-      id: 17,
-      keyswords: "Sanyou Bio oneClick+, my antibody",
-      name: "MyAntibody",
-      page: "my-antibody",
-      parentId: 0,
-      path: "/my-antibody",
-      title: "My Antibody | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "Sanyou Bio oneClick+, antibody information",
-      id: 18,
-      keyswords: "Sanyou Bio oneClick+, antibody information",
-      name: "AntibodyInformation",
-      page: "antibody-information",
-      parentId: 0,
-      path: "/antibody-information",
-      title: "Antibody Information | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 19,
-      keyswords: "",
-      name: "contact",
-      page: "contact",
-      parentId: 0,
-      path: "/contact",
-      title: "Contact | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "Sanyou Bio oneClick+, antibody information",
-      id: 20,
-      keyswords: "Sanyou Bio oneClick+, antibody information",
-      name: "AntibodyInformations",
-      page: "antibody-informations",
-      parentId: 0,
-      path: "/antibody-informations",
-      title: "Antibody Informations | oneClick+，Sanyou Bio"
-    }, {
-      delFlag: false,
-      description: "oneClick+ is a one-stop solution for antigen analysis and expression. The oneClick+ antigen platform has an established antigen database. Analysis of antigen including antigen sequence, isoelectric point, subcellular localization, transmembrane domains, modification sites and antigen expression difficulty evaluation etc., The oneClick+ antigen platform aiming to help scientists to simplify antigen analysis processes and access the difficulty of antigen expression. Sanyou Bio has solid experience in antigen expression services, which empowers the oneClick+ antigen platform to provide customer personalized antigen expression services. ",
-      id: 20,
-      keyswords: "Antigen, antigen analysis, antigen expresison, protein, protein expression",
-      name: "antigenIntroduce",
-      page: "antigenIntroduce",
-      parentId: 0,
-      path: "/antigenIntroduce",
-      title: "oneClick+ antigen| Sanyou Bio"
-    }
-  ]
-}

src/langs/en/tdk_cn.js

@@ -1,215 +0,0 @@
-export default {
-  list: [
-    {
-      delFlag: false,
-      description: "oneClick+是三优生物一站式解决双抗设计和表达服务平台，帮助客户简化抗体设计流程，实现零基础设计抗体。oneClick+平台拥有健全的抗体模型库构型，涵盖IgG like抗体，纳米抗体和单链抗体(ScFv)。基于三优生物丰富的抗体表达经验，oneClick+平台将为提供客户专属定制化双抗设计表达服务。",
-      id: 1,
-      keyswords: "抗体，抗体表达，双抗(bsAb)，双抗表达，蛋白，蛋白表达",
-      name: "home",
-      page: "home",
-      parentId: 0,
-      path: "/",
-      title: "oneClick+ | 三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 2,
-      keyswords: "",
-      name: "login",
-      page: "login",
-      parentId: 0,
-      path: "/login",
-      title: "Login | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 3,
-      keyswords: "",
-      name: "PasswordReset",
-      page: "PasswordReset",
-      parentId: 0,
-      path: "/PasswordReset",
-      title: "Password Reset | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 4,
-      keyswords: "",
-      name: "register",
-      page: "register",
-      parentId: 0,
-      path: "/register",
-      title: "Register | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 5,
-      keyswords: "",
-      name: "application",
-      page: "application",
-      parentId: 0,
-      path: "/application",
-      title: "Password Reset Application| oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 6,
-      keyswords: "",
-      name: "RegisterConfirmation",
-      page: "RegisterConfirmation",
-      parentId: 0,
-      path: "/RegisterConfirmation",
-      title: "Register Confirmation | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "三优生物oneClick+，首页，双特异性抗体一站式解决方案，oneClick+抗体平台介绍，oneClick+抗体平台教学视频",
-      id: 7,
-      keyswords: "三优生物oneClick+，首页，双特异性抗体一站式解决方案，oneClick+抗体平台介绍，oneClick+抗体平台教学视频",
-      name: "homePage",
-      page: "homePage",
-      parentId: 0,
-      path: "/homePage",
-      title: "oneClick+ | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "三优生物oneClick+，双特异性抗体一站式解决方案，抗体设计，oneclick+抗体，oneclick+抗原",
-      id: 8,
-      keyswords: "三优生物oneClick+，双特异性抗体一站式解决方案，抗体设计，oneclick+抗体，oneclick+抗原",
-      name: "homeAntibody",
-      page: "homeAntibody",
-      parentId: 0,
-      path: "/homeAntibody",
-      title: "双特异性抗体一站式解决方案 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "三优生物 oneClick+，oneClickPlus，抗体设计工具",
-      id: 9,
-      keyswords: "三优生物 oneClick+，oneClickPlus，抗体设计工具",
-      name: "oneClickPlus",
-      page: "oneClickPlus",
-      parentId: 0,
-      path: "/oneClickPlus",
-      title: "设计抗体 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "Sanyou Bio oneClick+，抗体序列",
-      id: 10,
-      keyswords: "Sanyou Bio oneClick+，抗体序列",
-      name: "AntibodySequences",
-      page: "antibody-sequences",
-      parentId: 0,
-      path: "/antibody-sequences",
-      title: "抗体序列 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 11,
-      keyswords: "",
-      name: "privacy-policy",
-      page: "privacy-policy",
-      parentId: 0,
-      path: "/privacy-policy",
-      title: "Privacy Policy | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 12,
-      keyswords: "",
-      name: "about",
-      page: "about",
-      parentId: 0,
-      path: "/about",
-      title: "关于 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 13,
-      keyswords: "",
-      name: "message",
-      page: "message",
-      parentId: 0,
-      path: "/message",
-      title: "消息 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 14,
-      keyswords: "",
-      name: "AntigenPreparation",
-      page: "AntigenPreparation",
-      parentId: 0,
-      path: "/AntigenPreparation",
-      title: "抗原制备 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 15,
-      keyswords: "",
-      name: "AntigenInformation",
-      page: "AntigenInformation",
-      parentId: 0,
-      path: "/AntigenInformation",
-      title: "抗原信息 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "三优生物oneClick+，抗体生产，抗体表达服务",
-      id: 16,
-      keyswords: "三优生物oneClick+，抗体生产，抗体表达服务",
-      name: "production",
-      page: "production",
-      parentId: 0,
-      path: "/antibody-production",
-      title: "抗体制备 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "三优生物oneClick+，我的抗体",
-      id: 17,
-      keyswords: "三优生物oneClick+，我的抗体",
-      name: "MyAntibody",
-      page: "my-antibody",
-      parentId: 0,
-      path: "/my-antibody",
-      title: "我的抗体 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "三优生物oneClick+，抗体信息",
-      id: 18,
-      keyswords: "三优生物oneClick+，抗体信息",
-      name: "AntibodyInformation",
-      page: "antibody-information",
-      parentId: 0,
-      path: "/antibody-information",
-      title: "抗体信息 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "",
-      id: 19,
-      keyswords: "",
-      name: "contact",
-      page: "contact",
-      parentId: 0,
-      path: "/contact",
-      title: "联系方式 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "三优生物oneClick+，抗体信息",
-      id: 20,
-      keyswords: "三优生物oneClick+，抗体信息",
-      name: "AntibodyInformations",
-      page: "antibody-informations",
-      parentId: 0,
-      path: "/antibody-informations",
-      title: "抗体信息 | oneClick+，三优生物"
-    }, {
-      delFlag: false,
-      description: "oneClick+抗原平台为抗原分析和制备提供一站式解决方案。oneClick+抗原平台拥有健全的抗原分析数据库。抗原分析内容包括但不限于抗原序列、等电点、亚细胞定位、跨膜结构域、修饰位点、抗原表达难度评估。oneClick+抗原平台旨在帮助科学家简化抗原分析过程和评估抗原表达难易程度。三优生物在抗原表达服务方面拥有丰富的经验，基于此oneClick+抗原平台将为客户提供个性化抗原表达服务。",
-      id: 20,
-      keyswords: "抗原， 抗原分析， 抗原表达， 蛋白质， 蛋白表达",
-      name: "antigenIntroduce",
-      page: "antigenIntroduce",
-      parentId: 0,
-      path: "/antigenIntroduce",
-      title: "oneClick+ antigen| 三优生物"
-    }
-  ]
-}

src/router/routerList.js

@@ -61,6 +61,16 @@ export default [
       navActive: "Privacy Policy", // 匹配路由名字 隐私政策
       fullScreen: false
     }
+  }, {
+    path: '/mycart',
+    name: 'mycart',
+    component: () => import('@/view/mycart/index'),
+    hidden: true,
+    meta: {
+      pageTitle: 'My Cart',
+      chineseTitle: '购物车',
+      navActive: 'Mycart' // 购物车页
+    }
   }, {
     path: "/overView",
     name: "overView",
@@ -83,6 +93,17 @@ export default [
       navActive: "article",
       fullScreen: false
     }
+  }, {
+    path: "/profile",
+    name: "profile",
+    component: () => import("@/view/profile/index"),
+    hidden: true,
+    meta: {
+      pageTitle: "profile",
+      chineseTitle: "资料下载",
+      navActive: "profile",
+      fullScreen: false
+    }
   }, {
     path: "/antibody",
     name: "antibody",

src/view/landing/index.vue

@@ -72,7 +72,7 @@
             localStorage.setItem("token", JSON.stringify(res.data.token))
             localStorage.setItem('user', JSON.stringify(res.data.user))
             this.getinfo()
-            // this.getIndex()
+             this.getIndex() 
           } else if (res.code == 5000) {
             this.fullscreenLoading = false;
             this.$message(this.$t('message.passwordError'))

src/view/mycart/index.vue

@@ -0,0 +1,1846 @@
+<template>
+  <div class="box" ref="appBox">
+    <!-- <div class="topbox_text">Cart Information</div> -->
+    <div class="contentbox">
+      <p class="cart_f">{{ $t("card.Cart") }}</p>
+      <div class="bottomcontentbox_b">
+        <div class="bottomcontentbox">
+          <!-- <div class="cart_p">
+            <p>Cart Information</p>
+          </div> -->
+          <!-- <div class="input_box">
+          <span>
+            {{$t('inquiry.QuickAdd')}}:
+          </span>
+          <el-input class="catalogInput" placeholder=""></el-input>
+          <span>{{$t('button.addQuoteForm')}}</span>
+        </div> -->
+
+          <el-table
+            class="table_boxf"
+            :empty-text="$t('table.notable')"
+            ref="dataTable"
+            :row-key="getRowKeys"
+            :data="list"
+            border
+            style="width: 100%"
+            @select-all="checkSelectAll"
+            @select="checkSelect"
+            header-row-class-name="table_header"
+          >
+            <el-table-column
+              type="selection"
+              :reserve-selection="true"
+              width="40"
+            >
+            </el-table-column>
+            <el-table-column
+              width="120"
+              prop="productCatalog"
+              :label="$t('table.catalog')"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="productName"
+              :label="$t('table.productName')"
+            ></el-table-column>
+            <el-table-column
+              width="120"
+              prop="size"
+              :label="$t('table.size')"
+            ></el-table-column>
+            <el-table-column width="100" :label="$t('table.quantity')">
+              <template slot-scope="scope">
+                <el-input-number
+                  v-model="scope.row.number"
+                  @change="handleChange($event, scope.row)"
+                  :min="1"
+                  label="描述文字"
+                ></el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column width="100" :label="$t('bottomBar.Price')">
+              <template slot-scope="scope">
+                <span class="price">{{ $t("bottomBar.money") }}</span>
+                <span class="line_total" v-if="$util.localeStorage()">{{
+                  scope.row.price
+                }}</span>
+                <span class="line_total" v-if="!$util.localeStorage()">{{
+                  scope.row.cnPrice
+                }}</span>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column width="120" prop="discountPrice" :label="$t('card.Discount')"> -->
+            <el-table-column width="120" :label="$t('card.Discount')">
+              <template slot-scope="scope">
+                <span class="price">{{ $t("bottomBar.money") }}</span>
+                <span class="line_total" v-if="$util.localeStorage()">{{
+                  scope.row.discountPrice
+                }}</span>
+                <span class="line_total" v-if="!$util.localeStorage()">{{
+                  scope.row.cnDiscountPrice
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column width="100" :label="$t('card.Total')">
+              <template slot-scope="scope">
+                <span class="price">{{ $t("bottomBar.money") }}</span>
+                <span class="line_total" v-if="$util.localeStorage()">{{
+                  scope.row.number * scope.row.discountPrice
+                }}</span>
+                <span class="line_total" v-if="!$util.localeStorage()">{{
+                  scope.row.number * scope.row.cnDiscountPrice
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column width="100" :label="$t('card.Operate')">
+              <template slot-scope="scope">
+                <i @click="tapDelete(scope.row)" class="el-icon-delete"></i>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 移动 -->
+          <el-table
+            class="table_pmd"
+            :empty-text="$t('table.notable')"
+            ref="dataTablewx"
+            :row-key="getRowKeys"
+            :data="list"
+            border
+            style="width: 100%"
+            @select-all="checkSelectAll"
+            @select="checkSelect"
+            header-row-class-name="table_header"
+          >
+            <el-table-column
+              type="selection"
+              :reserve-selection="true"
+              width="40"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="productCatalog"
+              :label="$t('table.catalog')"
+              style="width:20%;"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="productName"
+              :label="$t('table.productName')"
+              style="width:20%"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="size"
+              :label="$t('table.size')"
+              style="width:20%"
+            >
+            </el-table-column>
+            <el-table-column :label="$t('table.quantity')" style="width:20%">
+              <template slot-scope="scope">
+                <el-input-number
+                  v-model="scope.row.number"
+                  @change="handleChange($event, scope.row)"
+                  :min="1"
+                  label="描述文字"
+                ></el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="$t('checkout.More')"
+              style="width:20%"
+              type="expand"
+            >
+              <template slot-scope="scope">
+                <el-form label-position="left" inline class="demo-table-expand">
+                  <el-form-item :label="$t('bottomBar.Price')">
+                    <span class="price">{{ $t("bottomBar.money") }}</span>
+                    <span v-if="$util.localeStorage()">{{
+                      scope.row.price
+                    }}</span>
+                    <span v-if="!$util.localeStorage()">{{
+                      scope.row.cnPrice
+                    }}</span>
+                  </el-form-item>
+                  <el-form-item :label="$t('card.Discount')">
+                    <!-- <div>{{ scope.row.discountPrice }}</div> -->
+                    <span class="price">{{ $t("bottomBar.money") }}</span>
+                    <span v-if="$util.localeStorage()">{{
+                      scope.row.discountPrice
+                    }}</span>
+                    <span v-if="!$util.localeStorage()">{{
+                      scope.row.cnDiscountPrice
+                    }}</span>
+                  </el-form-item>
+                  <el-form-item :label="$t('card.Total')">
+                    <span class="price">{{ $t("bottomBar.money") }}</span>
+                    <!-- <div>{{scope.row.number*scope.row.discountPrice}}</div> -->
+                    <span v-if="$util.localeStorage()">{{
+                      scope.row.number * scope.row.discountPrice
+                    }}</span>
+                    <span v-if="!$util.localeStorage()">{{
+                      scope.row.number * scope.row.cnDiscountPrice
+                    }}</span>
+                  </el-form-item>
+                  <el-form-item :label="$t('card.Operate')">
+                    <i @click="tapDelete(scope.row)" class="el-icon-delete"></i>
+                  </el-form-item>
+                </el-form>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div class="cart_button">
+            <button @click="tapDeleteAll">{{ $t("card.items") }}</button>
+          </div>
+
+          <div class="cart_button_f">
+            <div class="cart_text" v-if="$util.localeStorage()">
+              {{ $t("card.Subtotal") }} :<span
+                >{{ $t("bottomBar.money")
+                }}{{ cartTotal.checkedGoodsDiscount }}</span
+              >
+            </div>
+            <div class="cart_text" v-if="!$util.localeStorage()">
+              {{ $t("card.Subtotal") }} :<span
+                >{{ $t("bottomBar.money")
+                }}{{ cartTotal.checkedGoodsDiscount }}</span
+              >
+            </div>
+            <!-- <button @click="tapCheck">{{$t('card.check')}}</button> -->
+          </div>
+        </div>
+        <!-- 客户联系信息 -->
+        <div class="customer_box">
+          <div class="customer" v-if="!tokenShow">
+            <div class="title">
+              {{ $t("taps.tips") }}<span class="required">*</span
+              >{{ $t("taps.tipsRequired") }}：
+            </div>
+            <el-form
+              :model="form"
+              class="demo-form-inline"
+              label-position="left"
+              :label-width="langShow ? '160px' : '120px'"
+              :inline="true"
+            >
+              <el-form-item :label="$t('input.email') + '：'" :required="true">
+                <el-input
+                  v-model="form.email"
+                  :placeholder="$t('input.email')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('register.Fullname') + '：'">
+                <el-input
+                  v-model="form.name"
+                  :placeholder="$t('register.Fullname')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('register.Company') + '：'">
+                <el-input
+                  v-model="form.company"
+                  :placeholder="$t('register.Company')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('register.Country') + '：'">
+                <el-select
+                  v-if="langShow"
+                  v-model="form.country"
+                  :placeholder="$t('register.Country')"
+                >
+                  <el-option
+                    v-for="item in regionList"
+                    :key="item.en"
+                    :label="item.en"
+                    :value="item.en"
+                  >
+                  </el-option>
+                </el-select>
+                <el-select
+                  v-else
+                  v-model="form.country"
+                  :placeholder="$t('register.Country')"
+                >
+                  <el-option
+                    v-for="item in regionList"
+                    :key="item.cn"
+                    :label="item.cn"
+                    :value="item.cn"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item :label="$t('register.Account') + '：'">
+                <el-select
+                  v-model="form.accountType"
+                  :placeholder="$t('register.Account')"
+                >
+                  <el-option
+                    v-for="item in accountTypeList"
+                    :key="$util.localeStorage() ? item.name : item.nameCn"
+                    :label="$util.localeStorage() ? item.name : item.nameCn"
+                    :value="item.name"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+          <!-- 收货地址 -->
+          <div class="information customer">
+            <div class="title title_s">
+              {{ $t("checkout.Shipping") }}
+              <div class="horizontal"></div>
+            </div>
+            <disdAddress @onaddress="onaddress" v-if="tokenShow"></disdAddress>
+            <el-form
+              v-else
+              :model="receipt"
+              ref="receipt"
+              class="demo-form-inline"
+              label-position="left"
+              :label-width="langShow ? '160px' : '120px'"
+              :inline="true"
+            >
+              <el-form-item
+                :label="$t('checkout.Name') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="receipt.name"
+                  :placeholder="$t('checkout.Name')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item
+                :label="$t('checkout.Phone') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="receipt.tel"
+                  :placeholder="$t('checkout.Phone')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item
+                :label="$t('checkout.Institute') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="receipt.company"
+                  :placeholder="$t('checkout.Institute')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item
+                :label="$t('order.country') + '：'"
+                :required="true"
+                v-if="langShow"
+              >
+                <el-select
+                  v-model="receipt.country"
+                  :placeholder="$t('register.Country')"
+                >
+                  <el-option
+                    v-for="item in regionList"
+                    :key="item.en"
+                    :label="item.en"
+                    :value="item.en"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="省:" :required="true" v-if="!langShow">
+                <el-select
+                  v-model="receipt.province"
+                  placeholder="省"
+                  @change="changeProvince"
+                >
+                  <el-option
+                    v-for="item in province"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.label"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="市:" :required="true" v-if="!langShow">
+                <el-select v-model="receipt.city" placeholder="市">
+                  <el-option
+                    v-for="item in city"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.label"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                :label="$t('checkout.Addre') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="receipt.address"
+                  :placeholder="$t('checkout.Addre')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item
+                :label="$t('checkout.postal') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="receipt.postalCode"
+                  :placeholder="$t('checkout.postal')"
+                ></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+          <!-- 账单地址 -->
+          <div class="information customer" v-if="!tokenShow">
+            <div class="title title_s">
+              {{ $t("checkout.Choose") }}
+              <div class="horizontal"></div>
+            </div>
+            <div class="checked_b">
+              <el-checkbox v-model="identical" @change="identicalChange">{{
+                $t("taps.sameAs")
+              }}</el-checkbox>
+            </div>
+            <el-form
+              :model="bill"
+              ref="bill"
+              class="demo-form-inline"
+              label-position="left"
+              :label-width="langShow ? '160px' : '120px'"
+              :inline="true"
+            >
+              <el-form-item
+                :label="$t('checkout.Name') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="bill.name"
+                  :placeholder="$t('checkout.Name')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item
+                :label="$t('checkout.Phone') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="bill.tel"
+                  :placeholder="$t('checkout.Phone')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item
+                :label="$t('checkout.Institute') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="bill.company"
+                  :placeholder="$t('checkout.Institute')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item
+                :label="$t('order.country') + '：'"
+                :required="true"
+                v-if="langShow"
+              >
+                <el-select
+                  v-model="bill.country"
+                  :placeholder="$t('register.Country')"
+                >
+                  <el-option
+                    v-for="item in regionList"
+                    :key="item.en"
+                    :label="item.en"
+                    :value="item.en"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="省:" :required="true" v-if="!langShow">
+                <el-select
+                  v-model="bill.province"
+                  placeholder="省"
+                  @change="billProvince"
+                >
+                  <el-option
+                    v-for="item in province"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.label"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="市:" :required="true" v-if="!langShow">
+                <el-select v-model="bill.city" placeholder="市">
+                  <el-option
+                    v-for="item in billCity"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.label"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                :label="$t('checkout.Addre') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="bill.address"
+                  :placeholder="$t('checkout.Addre')"
+                ></el-input>
+              </el-form-item>
+              <el-form-item
+                :label="$t('checkout.postal') + '：'"
+                :required="true"
+              >
+                <el-input
+                  v-model="bill.postalCode"
+                  :placeholder="$t('checkout.postal')"
+                ></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="information customer">
+            <div class="title title_s">
+              {{ $t("checkout.Payout") }}
+              <div class="horizontal"></div>
+            </div>
+            <dissPayment></dissPayment>
+          </div>
+        </div>
+        <div class="checkButtom">
+          <button class="buttom" @click="submit">
+            {{ $t("application.Submit") }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import region from "@/js/region";
+import provinces from "@/js/provinces";
+import disdAddress from "@/components/diss-address";
+import dissPayment from "@/components/diss-payment";
+export default {
+  components: {
+    disdAddress,
+    dissPayment
+  },
+  name: "mycart",
+  data() {
+    return {
+      identical: false,
+      rules: [],
+      langShow: this.$util.localeStorage(),
+      regionList: [], // 国家
+      province: [], // 市
+      city: [],
+      billCity: [], // 账单省
+      tokenShow: !!localStorage.getItem("token"),
+      list: [],
+      cartTotal: {
+        checkedGoodsDiscount: 0
+      },
+      checkList: [],
+      selectList: [], // 选中
+      form: {
+        email: "",
+        name: "",
+        accountType: "",
+        country: "",
+        company: "",
+        position: ""
+      },
+      receipt: {
+        // 收货
+        address: "", // 详细收货地址
+        city: "", // 中文版–市
+        company: "", // 企业
+        country: "", // 国家 中文默认传China
+        id: 0,
+        isDefault: false, // 是否默认地址
+        name: "", // 收货人名称
+        postalCode: "", // 邮政编码
+        province: "", // 中文版–省
+        tel: "" // 手机号码
+      },
+      bill: {
+        // 账单
+        address: "", // 详细账单地址
+        city: "", // 中文版–市
+        company: "", // 企业
+        country: "", // 国家 中文默认传China
+        id: 0,
+        isDefault: false, // 是否默认地址
+        name: "", // 账单人名称
+        postalCode: "", // 邮政编码
+        province: "", // 中文版–省
+        tel: "" // 手机号码
+      },
+      accountTypeList: [
+        {
+          name: "Industry",
+          nameCn: "工业客户"
+        },
+        {
+          name: "Academic",
+          nameCn: "科研客户"
+        },
+        {
+          name: "Distributor",
+          nameCn: "经销商"
+        }
+      ],
+      delFlagId: "",
+      billId: ""
+    };
+  },
+  methods: {
+    onaddress(e) {
+      this.delFlagId = e.delFlag;
+      this.billId = e.billId;
+    },
+    identicalChange(e) {
+      // 是否与帐单地址相同
+      if (e) {
+        this.bill = { ...this.receipt };
+        // this.$set(this.bill, this.receipt)
+      } else {
+        this.bill.address = "";
+        this.bill.city = "";
+        this.bill.company = "";
+        this.bill.country = "";
+        this.bill.id = 0;
+        this.bill.isDefault = false;
+        this.bill.name = "";
+        this.bill.postalCode = "";
+        this.bill.province = "";
+        this.bill.tel = "";
+      }
+    },
+    submit() {
+      // 提交
+      if (this.tokenShow) {
+        this.tapsubmit();
+      } else {
+        // console.log(this.checkList, '-------')
+        this.noToken();
+      }
+    },
+    noToken() {
+      if (
+        this.userVerification() &&
+        this.verification() &&
+        this.billVerification()
+      ) {
+        if (this.checkList.length > 0) {
+          this.$api
+            .post("order/submitNoLogin", {
+              cartId: 0,
+              cartList: this.checkList,
+              fpAddress: this.receipt,
+              message: "",
+              shAddress: this.bill,
+              user: this.form
+            })
+            .then(res => {
+              if (res.code === 0) {
+                this.$message({
+                  message: this.$t("message.checkoutSuccess"),
+                  type: "success"
+                });
+                for (let i = 0; i < this.list.length; i++) {
+                  for (let j = 0; j < this.checkList.length; j++) {
+                    if (this.list[i].skuId === this.checkList[j].skuId) {
+                      this.list.splice(i, 1);
+                    }
+                  }
+                }
+                window.gtag && window.gtag("event", "submit_cart");
+                localStorage.setItem("shoppingCart", JSON.stringify(this.list));
+                localStorage.setItem(
+                  "shoppingNum",
+                  JSON.stringify(this.list.length)
+                );
+                this.$router.push({ name: "ordersuccess" });
+              } else {
+                this.$message(res.msg);
+              }
+            });
+        } else {
+          this.$message(this.$t("button.Itsover"));
+        }
+      }
+    },
+    tapsubmit() {
+      // 登录提交订单
+      this.$api
+        .post("order/submit", {
+          cartId: 0,
+          fpAddress: { id: this.billId },
+          message: "",
+          shAddress: { id: this.delFlagId }
+        })
+        .then(res => {
+          if (res.code == 0) {
+            this.$message({
+              message: this.$t("message.checkoutSuccess"),
+              type: "success"
+            });
+            gtag("event", "submit_cart");
+            this.$router.push({ name: "ordersuccess" });
+          } else {
+            this.$message(res.msg);
+          }
+        });
+    },
+    // 发货地址获取市
+    changeProvince(e) {
+      let that = this;
+      that.receipt.city = "";
+      that.province.forEach(item => {
+        if (item.label == e) {
+          that.city = item.children;
+        }
+      });
+    },
+    // 账单地址获取市
+    billProvince(e) {
+      let that = this;
+      that.bill.city = "";
+      that.province.forEach(item => {
+        if (item.label == e) {
+          that.billCity = item.children;
+        }
+      });
+    },
+    // tapCheck () {
+    //   if (JSON.parse(localStorage.getItem('token'))) {
+    //     if (this.cartTotal.checkedGoodsDiscount > 0) {
+    //       this.$router.push({name: 'checkout'})
+    //     } else {
+    //       this.$message.error(this.$t('message.PleaseSelect'))
+    //     }
+    //   } else {
+    //     this.$router.push({name: 'login'})
+    //   }
+    // },
+    getRowKeys(row, index) {
+      if (JSON.parse(localStorage.getItem("token"))) {
+        return row.id;
+      } else {
+        return row.skuId;
+      }
+    },
+    checkSelectAll(e) {
+      // 全选
+      let that = this;
+      var obj = [];
+      that.selectList = [];
+      if (JSON.parse(localStorage.getItem("token"))) {
+        if (e.length > 0) {
+          e.forEach(item => {
+            that.selectList.push(item.id);
+          });
+          that.checked(true, that.selectList);
+        } else {
+          that.list.forEach(item => {
+            obj.push(item.id);
+          });
+          that.checked(false, obj);
+        }
+      } else {
+        if (e.length > 0) {
+          var objList = [];
+          e.forEach(item => {
+            let data = {
+              checked: true,
+              id: item.id,
+              number: item.number,
+              productCatalog: item.productCatalog,
+              skuId: item.skuId
+            };
+            objList.push(data);
+          });
+          this.checkList = objList;
+        } else {
+          this.checkList = [];
+        }
+        console.log(e, "============", this.checkList);
+        // this.$router.push({name: 'login'})
+      }
+    },
+    checkSelect(selection, row) {
+      // 单选
+      let that = this;
+      let data = [row.id];
+      if (selection.length > that.selectList.length) {
+        selection.forEach(item => {
+          that.selectList.push(item.id);
+        });
+        this.checked(true, data, row);
+      } else {
+        that.selectList.forEach((item, index) => {
+          if (item == row.id) {
+            that.selectList.splice(index, 1);
+          }
+        });
+        this.checked(false, data, row);
+      }
+    },
+    checked(checked, obj, row) {
+      // checked
+      let that = this;
+      if (JSON.parse(localStorage.getItem("token"))) {
+        that.$api
+          .post("cart/checked", {
+            checked: checked,
+            ids: obj
+          })
+          .then(res => {
+            if (res.code == 0) {
+              // console.log(res)
+              that.getList();
+            } else {
+              this.$message(res.msg);
+            }
+          });
+      } else {
+        if (checked) {
+          let data = {
+            checked: true,
+            id: row.id,
+            number: row.number,
+            productCatalog: row.productCatalog,
+            skuId: row.skuId
+          };
+          this.checkList.push(data);
+        } else {
+          for (let i = 0; i < this.checkList.length; i++) {
+            if (this.checkList[i].skuId === row.skuId) {
+              this.checkList.splice(i, 1);
+            }
+          }
+        }
+      }
+    },
+    tapDeleteAll() {
+      // 删除所有
+      let that = this;
+      var obj = [];
+      if (JSON.parse(localStorage.getItem("token"))) {
+        that.list.forEach(item => {
+          obj.push(item.id);
+        });
+        that.$api
+          .post("cart/delete", {
+            checked: true,
+            ids: this.selectList
+          })
+          .then(res => {
+            if (res.code == 0) {
+              that.getList();
+            } else {
+              this.$message(res.msg);
+            }
+          });
+      } else {
+        this.list = [];
+        this.checkList = [];
+        localStorage.removeItem("shoppingCart");
+        localStorage.setItem("shoppingNum", JSON.stringify(this.list.length));
+      }
+    },
+    tapDelete(e) {
+      // 删除
+      let that = this;
+      if (JSON.parse(localStorage.getItem("token"))) {
+        this.$api
+          .post("cart/delete", {
+            checked: true,
+            ids: [e.id]
+          })
+          .then(res => {
+            if (res.code == 0) {
+              this.getList();
+            } else {
+              this.$message(res.msg);
+            }
+          });
+      } else {
+        this.list.forEach((item, index) => {
+          if (item.skuId == e.skuId) {
+            if (this.$util.localeStorage()) {
+              that.cartTotal.checkedGoodsDiscount =
+                that.cartTotal.checkedGoodsDiscount -
+                e.number * e.discountPrice;
+            } else {
+              that.cartTotal.checkedGoodsDiscount =
+                that.cartTotal.checkedGoodsDiscount -
+                e.number * e.cnDiscountPrice;
+            }
+            that.list.splice(index, 1);
+          }
+        });
+        for (let i = 0; i < this.checkList.length; i++) {
+          if (this.checkList[i].skuId === e.skuId) {
+            this.checkList.splice(i, 1);
+          }
+        }
+        localStorage.setItem("shoppingCart", JSON.stringify(this.list));
+        localStorage.setItem("shoppingNum", JSON.stringify(this.list.length));
+      }
+    },
+    getList() {
+      let that = this;
+      let data = JSON.parse(localStorage.getItem("shoppingCart"));
+      let arry = [];
+      if (JSON.parse(localStorage.getItem("token"))) {
+        if (data && data.length > 0) {
+          data.forEach(item => {
+            var obj = {
+              checked: true,
+              id: item.id,
+              number: item.number,
+              productCatalog: item.productCatalog,
+              skuId: item.skuId
+            };
+            arry.push(obj);
+          });
+        } else {
+          arry = null;
+        }
+        this.$api
+          .post("cart/index", {
+            cartList: arry
+          })
+          .then(res => {
+            if (res.code == 0) {
+              this.list = res.data.cartList;
+              this.cartTotal = res.data.cartTotal;
+              localStorage.removeItem("shoppingCart");
+              localStorage.setItem(
+                "shoppingNum",
+                JSON.stringify(res.data.cartList.length)
+              );
+            } else {
+              this.$message(res.msg);
+            }
+          });
+      } else {
+        if (data && data.length > 0) {
+          data.forEach(item => {
+            that.list.push(item);
+            let data = {
+              checked: true,
+              id: item.id,
+              number: item.number,
+              productCatalog: item.productCatalog,
+              skuId: item.skuId
+            };
+            that.checkList.push(data);
+            if (this.$util.localeStorage()) {
+              that.cartTotal.checkedGoodsDiscount +=
+                item.number * item.discountPrice;
+            } else {
+              that.cartTotal.checkedGoodsDiscount +=
+                item.number * item.cnDiscountPrice;
+            }
+          });
+        }
+      }
+    },
+    handleChange(e, obj) {
+      // 更新
+      let that = this;
+      if (JSON.parse(localStorage.getItem("token"))) {
+        this.$api
+          .post("cart/update", {
+            checked: obj.checked,
+            id: obj.id,
+            number: obj.number,
+            productCatalog: obj.productCatalog,
+            skuId: obj.skuId
+          })
+          .then(res => {
+            if (res.code == 0) {
+              this.getList();
+            } else {
+              this.getList();
+              this.$message(res.msg);
+            }
+          });
+      } else {
+        that.cartTotal.checkedGoodsDiscount = 0;
+        this.list.forEach(item => {
+          if (this.$util.localeStorage()) {
+            that.cartTotal.checkedGoodsDiscount +=
+              item.number * item.discountPrice;
+          } else {
+            that.cartTotal.checkedGoodsDiscount +=
+              item.number * item.cnDiscountPrice;
+          }
+        });
+        localStorage.setItem("shoppingCart", JSON.stringify(this.list));
+      }
+    },
+    verification() {
+      // 收货地址验证
+      if (!this.langShow) {
+        if (!this.receipt.name) {
+          this.$message.error(
+            this.$t("checkout.Name") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.receipt.tel) {
+          this.$message.error(
+            this.$t("checkout.Phone") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.$util.isMobile(this.receipt.tel)) {
+          this.$message.error(
+            this.$t("checkout.Phone") + this.$t("message.IncorrectFormat")
+          );
+          return false;
+        } else if (!this.receipt.company) {
+          this.$message.error(
+            this.$t("checkout.Institute") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.receipt.province) {
+          this.$message.error("请选择省份");
+          return false;
+        } else if (!this.receipt.city) {
+          this.$message.error("请选择市");
+          return false;
+        } else if (!this.receipt.address) {
+          this.$message.error(
+            this.$t("checkout.Addre") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.receipt.postalCode) {
+          this.$message.error(
+            this.$t("checkout.postal") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else {
+          return true;
+        }
+      } else {
+        if (!this.receipt.name) {
+          this.$message.error(
+            this.$t("checkout.Name") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.receipt.tel) {
+          this.$message.error(
+            this.$t("checkout.Phone") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.$util.isMobile(this.receipt.tel)) {
+          this.$message.error(
+            this.$t("checkout.Phone") + this.$t("message.IncorrectFormat")
+          );
+          return false;
+        } else if (!this.receipt.company) {
+          this.$message.error(
+            this.$t("checkout.Institute") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.receipt.country) {
+          this.$message.error(
+            this.$t("message.PleaseSelects") + this.$t("order.country")
+          );
+          return false;
+        } else if (!this.receipt.address) {
+          this.$message.error(
+            this.$t("checkout.Addre") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.receipt.postalCode) {
+          this.$message.error(
+            this.$t("checkout.postal") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else {
+          return true;
+        }
+      }
+    },
+    billVerification() {
+      // 账单地址验证
+      if (!this.langShow) {
+        if (!this.bill.name) {
+          this.$message.error(
+            this.$t("checkout.Name") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.bill.tel) {
+          this.$message.error(
+            this.$t("checkout.Phone") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.$util.isMobile(this.bill.tel)) {
+          this.$message.error(
+            this.$t("checkout.Phone") + this.$t("message.IncorrectFormat")
+          );
+          return false;
+        } else if (!this.bill.company) {
+          this.$message.error(
+            this.$t("checkout.Institute") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.bill.province) {
+          this.$message.error("请选择省份");
+          return false;
+        } else if (!this.bill.city) {
+          this.$message.error("请选择市");
+          return false;
+        } else if (!this.bill.address) {
+          this.$message.error(
+            this.$t("checkout.Addre") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.bill.postalCode) {
+          this.$message.error(
+            this.$t("checkout.postal") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else {
+          return true;
+        }
+      } else {
+        if (!this.bill.name) {
+          this.$message.error(
+            this.$t("checkout.Name") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.bill.tel) {
+          this.$message.error(
+            this.$t("checkout.Phone") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.$util.isMobile(this.bill.tel)) {
+          this.$message.error(
+            this.$t("checkout.Phone") + this.$t("message.IncorrectFormat")
+          );
+          return false;
+        } else if (!this.bill.company) {
+          this.$message.error(
+            this.$t("checkout.Institute") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.bill.country) {
+          this.$message.error(
+            this.$t("message.PleaseSelects") + this.$t("order.country")
+          );
+          return false;
+        } else if (!this.bill.address) {
+          this.$message.error(
+            this.$t("checkout.Addre") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else if (!this.bill.postalCode) {
+          this.$message.error(
+            this.$t("checkout.postal") + this.$t("message.notEmpty")
+          );
+          return false;
+        } else {
+          return true;
+        }
+      }
+    },
+    initialization() {
+      // 获取个人信息
+      if (JSON.parse(localStorage.getItem("token"))) {
+        var userInfo = JSON.parse(localStorage.getItem("user"));
+        this.form.user = userInfo.name;
+        this.form.accountType = userInfo.accountType;
+        this.form.country = userInfo.country;
+        this.form.company = userInfo.company;
+      }
+    },
+    userVerification() {
+      // 个人信息验证
+      if (!this.form.email) {
+        this.$message.error(
+          this.$t("register.Address") + this.$t("register.Cannot")
+        );
+        return false;
+      } else if (!this.$util.isEmail(this.form.email)) {
+        this.$message.error(this.$t("input.email") + this.$t("message.email"));
+        return false;
+      } else {
+        return true;
+      }
+    }
+  },
+  watch: {
+    list(n, o) {
+      let that = this;
+      this.$nextTick(() => {
+        that.selectList = [];
+        that.list.forEach(item => {
+          if (item.checked) {
+            if (that.$refs.appBox.clientWidth > 750) {
+              this.$refs.dataTable.toggleRowSelection(item, true);
+              that.selectList.push(item.id);
+            } else {
+              this.$refs.dataTablewx.toggleRowSelection(item, true);
+              that.selectList.push(item.id);
+            }
+          }
+        });
+      });
+    }
+  },
+  mounted() {},
+  created() {
+    this.getList();
+    this.regionList = region;
+    this.province = provinces;
+    this.initialization();
+  }
+};
+</script>
+<style lang="scss" scoped>
+@media screen and (min-width: 751px) and (max-width: 9999px) {
+  .box {
+    width: 100%;
+    overflow: hidden;
+  }
+  .topbox_text {
+    font-size: 20px;
+    margin-bottom: 2.4rem;
+  }
+  .contentbox {
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .contentbox > .cart_f {
+    font-size: 16px;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    font-family: Arial;
+    color: #005bab;
+    background: #cfe0ef;
+  }
+
+  .bottomcontentbox_b {
+    width: 100%;
+    overflow: hidden;
+    padding: 2rem;
+    border: 1px solid #dbdbdb;
+    background: #ffffff;
+  }
+
+  .bottomcontentbox /deep/ {
+    border: 1px solid #dbdbdb;
+    background: white;
+    padding: 1rem;
+    margin-bottom: 1.6rem;
+    .cart_p {
+      // border-bottom:1px solid #DBDBDB;
+      p {
+        margin-bottom: 1rem;
+        font-size: 14px;
+        font-weight: 600;
+      }
+    }
+    .el-table {
+      .table_header {
+        color: #005bab;
+      }
+      .el-table__body-wrapper {
+        .el-table__row {
+          .cell {
+            .el-icon-delete {
+              font-size: 18px;
+              color: #005bab;
+              font-weight: 600;
+              cursor: pointer;
+            }
+            .el-input-number {
+              width: 100% !important;
+              line-height: 30px;
+              .el-input-number__decrease {
+                width: 20px;
+                height: 28px;
+                top: 50%;
+                transform: translateY(-50%);
+                .el-icon-minus {
+                  line-height: 30px;
+                }
+              }
+              .el-input-number__increase {
+                width: 20px;
+                height: 28px;
+                top: 50%;
+                transform: translateY(-50%);
+                .el-icon-plus {
+                  margin-top: -10px;
+                }
+              }
+              .el-input {
+                .el-input__inner {
+                  padding: 0 20px;
+                  height: 30px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .input_box /deep/ {
+    display: none;
+    align-items: center;
+    margin: 1rem 0;
+    & > span:nth-of-type(1) {
+      font-size: 14px;
+      float: left;
+      // color: #005BAB;
+      margin-top: 0.3rem;
+      margin-right: 0.5rem;
+    }
+    & > span:nth-of-type(2) {
+      padding: 0 1rem;
+      line-height: 2rem;
+      height: 2rem;
+      border: 1px solid #d3d3d3;
+      display: inline-block;
+      background: #005bab;
+      color: white;
+      border-radius: 0.2rem;
+      cursor: pointer;
+    }
+    .catalogInput {
+      width: 170px;
+      margin-right: 0.5rem;
+      .el-input__inner {
+        height: 2rem;
+        border: 1px solid #d3d3d3;
+        float: left;
+        border-radius: 0.2rem;
+        text-indent: 0.5rem;
+        padding: 0 10px;
+      }
+    }
+  }
+
+  .cart_button {
+    border-bottom: 1px solid #dbdbdb;
+    overflow: hidden;
+    button {
+      margin: 1rem 0;
+      padding: 0.5rem;
+      background: #005bab;
+      color: white;
+      border: none;
+      border-radius: 0.2rem;
+      float: right;
+      cursor: pointer;
+    }
+  }
+  .cart_button_f {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    .cart_text {
+      font-size: 14px;
+      font-weight: 600;
+      // float: right;
+      color: #005bab;
+      margin-top: 1rem;
+      span {
+        font-weight: 600;
+        font-size: 18px;
+      }
+    }
+    button {
+      padding: 0.5rem;
+      background: #005bab;
+      color: white;
+      border: none;
+      border-radius: 0.2rem;
+      margin-top: 0.5rem;
+      cursor: pointer;
+      // float: right;
+    }
+  }
+
+  .footer_card {
+    line-height: 1.8;
+  }
+  .table_pmd {
+    display: none;
+  }
+  .footerbox_text {
+    display: none;
+  }
+  .customer_box {
+    border: 1px solid #dbdbdb;
+    padding: 1rem 2rem;
+    .customer {
+      .title {
+        font-size: 1.2rem;
+        color: #331515;
+        margin-bottom: 20px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        .required {
+          color: red;
+        }
+        .horizontal {
+          width: 60px;
+          height: 1px;
+          background-color: #bdbdbd;
+          margin-left: 10px;
+        }
+      }
+      .checked_b {
+        margin: 1rem 0;
+      }
+      .demo-form-inline /deep/ {
+        .el-form-item {
+          width: 48%;
+          .el-form-item__content {
+            width: 60%;
+            .el-select {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+  .checkButtom {
+    margin-top: 10px;
+    .buttom {
+      margin: 1rem 0 0;
+      padding: 0.5rem 2rem;
+      background: #005bab;
+      color: #fff;
+      border: none;
+      border-radius: 0.2rem;
+      float: right;
+      cursor: pointer;
+    }
+  }
+}
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+  .box {
+    width: 100%;
+    overflow: hidden;
+  }
+  .topbox_text {
+    font-size: 0.18rem;
+    margin-bottom: 0.2rem;
+  }
+  .contentbox {
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .contentbox > .cart_f {
+    font-size: 0.16rem;
+    padding: 0.2rem 0.14rem;
+    font-weight: 700;
+    font-family: Arial;
+    color: #005bab;
+    background: #cfe0ef;
+  }
+
+  .bottomcontentbox_b {
+    margin-top: 0.2rem;
+    width: 100%;
+    overflow: hidden;
+    padding: 0.08rem 0.14rem;
+    border: 1px solid #dbdbdb;
+    background: #ffffff;
+  }
+
+  .bottomcontentbox /deep/ {
+    // margin-top: 0.12rem;
+    // padding: 0rem 0.14rem;
+    overflow: hidden;
+    .table_boxf {
+      display: none;
+    }
+
+    // 将el-table的展开图标替换为其他图标
+    .el-table__expand-icon {
+      width: 0.2rem;
+      height: 0.2rem;
+      margin: 0 auto;
+      border-radius: 4px;
+      -webkit-transform: rotate(90deg);
+      transform: rotate(90deg);
+      background: #005bab;
+      color: #ffffff;
+    }
+    .el-table__expand-icon .el-icon-arrow-right:before {
+      content: "\";
+      border: 1px solid #ccc;
+      // padding: 2px;
+      border: none;
+    }
+    .el-table__expand-icon--expanded .el-icon-arrow-right:before {
+      content: "\";
+    }
+    .el-table__cell {
+      padding: 0;
+      .el-form-item {
+        margin: 0;
+        width: 100%;
+        border-bottom: 1px solid #dbdbdb;
+        display: flex;
+        .el-form-item__label {
+          width: 40%;
+          padding-left: 0.2rem;
+          border-right: 1px solid #dbdbdb;
+        }
+        .el-form-item__content {
+          width: 60%;
+          padding-left: 0.2rem;
+          background: #f0f5fa;
+          .el-icon-delete {
+            color: #005bab;
+          }
+        }
+      }
+    }
+
+    .el-table {
+      border: 1px solid #dfdfdf;
+      margin-top: 0.12rem !important ;
+      // margin-bottom:0.14rem !important ;
+      .el-table__header-wrapper {
+        width: 100%;
+        .el-table__header {
+          width: 100% !important;
+          colgroup {
+            // col{
+            //   width: 20% !important;
+            // }
+            col:nth-of-type(1) {
+              width: 10% !important;
+            }
+            col:nth-of-type(2) {
+              width: 15% !important;
+            }
+            col:nth-of-type(3) {
+              width: 20% !important;
+            }
+            col:nth-of-type(4) {
+              width: 15% !important;
+            }
+            col:nth-of-type(5) {
+              width: 25% !important;
+            }
+            col:nth-of-type(6) {
+              width: 15% !important;
+            }
+          }
+          thead {
+            tr {
+              width: 60px !important;
+              th {
+                width: 60px !important;
+                .cell {
+                  font-size: 12px;
+                  padding: 0 4px;
+                  font-family: Arial;
+                  font-weight: bold;
+                  color: #005bab;
+                }
+              }
+            }
+          }
+        }
+      }
+      .el-table__body-wrapper {
+        .el-table__body {
+          width: 100% !important;
+          colgroup {
+            width: 100% !important;
+            col:nth-of-type(1) {
+              width: 10% !important;
+            }
+            col:nth-of-type(2) {
+              width: 15% !important;
+            }
+            col:nth-of-type(3) {
+              width: 20% !important;
+            }
+            col:nth-of-type(4) {
+              width: 15% !important;
+            }
+            col:nth-of-type(5) {
+              width: 25% !important;
+            }
+            col:nth-of-type(6) {
+              width: 15% !important;
+            }
+          }
+          tbody {
+            .el-table__row {
+              .el-table__cell {
+                &:nth-of-type(2) {
+                  .cell {
+                    font-family: Arial;
+                    color: #005bab;
+                  }
+                }
+                .cell {
+                  font-size: 12px;
+                  padding: 0 4px;
+                  line-height: 0.24rem;
+                  .size_data {
+                    .size_q {
+                      width: 40% !important;
+                      max-width: 100px;
+                      .el-input__inner {
+                        width: 100% !important;
+                      }
+                    }
+                    .el-select {
+                      max-width: 100px;
+                      width: 60% !important;
+                      .el-input__inner {
+                        padding-right: 16px;
+                      }
+                      .el-input__suffix {
+                        .el-select__caret {
+                          width: 16px;
+                        }
+                      }
+                    }
+                  }
+                  .el-input-number {
+                    .el-input-number__decrease {
+                      width: 0.16rem;
+                    }
+                    .el-input-number__increase {
+                      width: 0.16rem;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .el-table__empty-block {
+        width: 100% !important;
+      }
+    }
+
+    .size_data {
+      display: flex;
+      align-items: center;
+      .size_q {
+        width: 0.4rem;
+        .el-input__inner {
+          height: 0.24rem;
+          border: 1px solid #dfdfdf;
+          line-height: 0.24rem;
+          padding: 0 0.03rem;
+          width: 0.4rem;
+          // border-radius: 0.2rem;
+        }
+      }
+      .el-select {
+        width: 0.6rem;
+        .el-input__inner {
+          height: 0.24rem;
+          line-height: 0.24rem;
+          padding-left: 0.05rem;
+        }
+        .el-input__icon {
+          line-height: 0.24rem;
+        }
+      }
+    }
+    .el-input-number {
+      width: 100%;
+      .el-input-number__decrease {
+        width: 0.24rem;
+        height: 0.22rem;
+        line-height: 0.22rem;
+        top: 7px;
+      }
+      .el-input-number__increase {
+        width: 0.24rem;
+        height: 0.22rem;
+        line-height: 0.22rem;
+        top: 7px;
+      }
+      .el-input {
+        .el-input__inner {
+          height: 0.26rem;
+          line-height: 0.26rem;
+          padding: 0 0.24rem;
+          border: 1px solid #dfdfdf;
+          &:focus {
+            border: 1px solid #dfdfdf;
+          }
+        }
+      }
+    }
+  }
+
+  .input_box /deep/ {
+    display: flex;
+    align-items: center;
+    & > span:nth-of-type(1) {
+      font-size: 0.12rem;
+      float: left;
+      color: #005bab;
+      margin-right: 0.1rem;
+    }
+    & > span:nth-of-type(2) {
+      // padding: 0 1rem;
+      line-height: 0.28rem;
+      height: 0.28rem;
+      border: 1px solid #d3d3d3;
+      // float: left;
+      display: inline-block;
+      background: #005bab;
+      color: white;
+      cursor: pointer;
+      padding: 0 0.1rem;
+    }
+    .catalogInput {
+      width: 1rem;
+      .el-input__inner {
+        height: 0.28rem;
+        line-height: 0.28rem;
+        // border: none;
+        float: left;
+        padding: 0 0.1rem;
+      }
+    }
+  }
+
+  .cart_button {
+    border-bottom: 1px solid #dbdbdb;
+    overflow: hidden;
+    margin-bottom: 0.2rem;
+    button {
+      width: 100%;
+      margin: 0.2rem 0;
+      height: 0.4rem;
+      background: #005bab;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 0.18rem;
+    }
+  }
+  .cart_button_f {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    // align-items: flex-end;
+    .cart_text {
+      font-size: 0.16rem;
+      font-weight: 600;
+      margin-bottom: 0.08rem;
+      color: #005bab;
+      span {
+        font-weight: 600;
+        font-size: 0.22rem;
+      }
+    }
+    button {
+      width: 100%;
+      height: 0.4rem;
+      background: #005bab;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      margin-top: 0.16rem;
+      font-size: 0.18rem;
+      margin-bottom: 0.22rem;
+    }
+  }
+
+  .footer_card {
+    display: none;
+  }
+  .footerbox_text {
+    margin-top: 0.2rem;
+    .footer_text {
+      font-size: 0.14rem;
+      line-height: 1.8;
+      word-wrap: break-word;
+      word-break: normal;
+    }
+  }
+  .customer_box {
+    border: 1px solid #dbdbdb;
+    padding: 0.1rem 0.1rem;
+    .customer {
+      .title {
+        font-size: 0.12rem;
+        color: #331515;
+        margin-bottom: 20px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        // white-space: nowrap;
+        .required {
+          color: red;
+        }
+        .horizontal {
+          width: 60px;
+          height: 1px;
+          background-color: #bdbdbd;
+          margin-left: 10px;
+        }
+      }
+      .checked_b {
+        margin: 0.1rem 0;
+      }
+      .demo-form-inline /deep/ {
+        .el-form-item {
+          width: 100%;
+          display: flex;
+          .el-form-item__content {
+            flex: 1;
+            .el-select {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+  .checkButtom {
+    margin-top: 10px;
+    .buttom {
+      width: 100%;
+      padding: 0.12rem;
+      background: #005bab;
+      color: #fff;
+      border: none;
+      border-radius: 0.1rem;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/view/profile/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="box">
+    <div class="content-box">
+    <div class="v-content">
+      <el-row :gutter="20">
+        <el-col :span="6" :xl="6" :lg="6" :md="8" :sm="8" :xs="12" v-for="(nav, i) in list" :key="i" class="list">
+          <div>
+            <div class="profile-box">
+              <img class="profile-img" :src="nav.url" />
+              <div class="between" style="opacity:0.9;">
+                <a @click="downloadPdf(nav.link, nav.title)" class="center" style="cursor: pointer;">
+                  <img class="x_z" src="@/assets/img/download.png" />
+                  <span class="xz_text" style="margin-left:10px;">{{$t('Download.Download')}}</span>
+                </a>
+              </div>
+            </div>
+            <p class="v-text-size">{{nav.title}}</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "profile",
+  data() {
+    return {
+      list: this.$t("downloadList.list")
+    };
+  },
+  methods: {
+    downloadPdf(pdfUrl, title) {
+      const loading = this.$loading({
+        lock: true,
+        text: this.$t('Download.loading') + '...',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', pdfUrl, true);
+      xhr.responseType = 'blob';
+      xhr.onload = () => {
+        if (xhr.status === 200) {
+          const blob = new Blob([xhr.response], { type: 'application/pdf' });
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          link.href = url;
+          link.download = title +'.pdf';
+          link.click();
+
+          URL.revokeObjectURL(url);
+          setTimeout(() => {
+            // 关闭Loading
+            loading.close();
+          }, 1000);
+        }
+      };
+      xhr.send()
+    }
+  },
+  mounted() {},
+  created() {
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.content-box{
+  background: #F4FAFF;
+  .v-content{
+    margin: auto;
+    .list{
+      margin-bottom: 40px;
+      height: 478px;
+    }
+    .profile-box{
+      position: relative;
+      border-bottom-right-radius: 40px;
+      overflow: hidden;
+      .profile-img{
+        max-width: 100%;
+        transform: scale(1);
+        transition: transform .6s linear;
+        cursor: pointer;
+        &:hover{
+          transform: scale(1.1);
+          transition: transform .6s linear;
+          border: 1px solid #006ad7;
+        }
+      }
+      .between{
+        width: 100%;
+        height: 56px;
+        // opacity: 0.9;
+        padding: 0 20px;
+        background-color: rgba(65,145,226,1);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        z-index: 10;
+        .center{
+          display: flex;
+          align-items: center;
+          .x_z{
+            width: 24px;
+            height: 24px;
+          }
+          .xz_text{
+            color: #fff;
+            font-size: 16px;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+    .v-text-size{
+      height: 80px;
+      font-size: 18px;
+      text-align: center;
+      padding-top: 20px;
+    }
+  }
+}
+</style>