1.10更新

mobile/src/assets/font/iconfont.css

@@ -1,14 +1,13 @@
 @font-face {
   font-family: 'iconfont';  /* project id 941679 */
-  src: url('//at.alicdn.com/t/font_941679_b0onprhnhpc.eot');
-  src: url('//at.alicdn.com/t/font_941679_b0onprhnhpc.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_941679_b0onprhnhpc.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_941679_b0onprhnhpc.woff') format('woff'),
-  url('//at.alicdn.com/t/font_941679_b0onprhnhpc.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_941679_b0onprhnhpc.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_941679_nydb6f32r2j.eot');
+  src: url('//at.alicdn.com/t/font_941679_nydb6f32r2j.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_941679_nydb6f32r2j.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_941679_nydb6f32r2j.woff') format('woff'),
+  url('//at.alicdn.com/t/font_941679_nydb6f32r2j.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_941679_nydb6f32r2j.svg#iconfont') format('svg');
 }
 
-
 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
@@ -335,4 +334,20 @@
 
 .icon-choice:before {
   content: "\e6a5";
+}
+
+.icon-mouth:before {
+  content: "\e6a9";
+}
+
+.icon-year:before {
+  content: "\e6ab";
+}
+
+.icon-3mouth:before {
+  content: "\e6ac";
+}
+
+.icon-halfyear:before {
+  content: "\e6ad";
 }

mobile/src/components/Paging/index.vue

@@ -133,6 +133,10 @@ export default {
       border-color: transparent transparent transparent #011111;
     }
 
+    .icon-youjiantou{
+      color: #2d2d2d;
+    }
+
 /* .layout {
   text-align: center;
 }

mobile/src/components/priceTable/index.vue

@@ -26,18 +26,21 @@
           <div class="thin centerthin"><span>{{langPurchase.pricelist[12]}}</span></div>
         </div>
         <div class="box big-box long big-list">
-          <div class="thin"><span>{{langPurchase.pricelist[13]}}</span></div>
-          <div class="thin"><span>{{langPurchase.pricelist[14]}}</span></div>
-          <div class="thin"><span>{{langPurchase.pricelist[15]}}</span></div>
-          <div class="thin"><span>{{langPurchase.pricelist[16]}}</span></div>
+          <div class="thin"><span>{{langPurchase.pricelist[13+type]}}</span></div>
+          <div class="thin"><span>{{langPurchase.pricelist[14+type]}}</span></div>
+          <div class="thin"><span>{{langPurchase.pricelist[15+type]}}</span></div>
+          <div class="thin"><span>{{langPurchase.pricelist[16+type]}}</span></div>
         </div>
         <div class="box big-box long big-list">
-          <div class="thin"><span>{{langPurchase.pricelist[17]}}</span></div>
-          <div class="thin"><span>{{langPurchase.pricelist[18]}}</span></div>
-          <div class="thin"><span>{{langPurchase.pricelist[19]}}</span></div>
-          <div class="thin"><span>{{langPurchase.pricelist[20]}}</span></div>
+          <div class="thin"><span>{{langPurchase.pricelist[17+type]}}</span></div>
+          <div class="thin"><span>{{langPurchase.pricelist[18+type]}}</span></div>
+          <div class="thin"><span>{{langPurchase.pricelist[19+type]}}</span></div>
+          <div class="thin"><span>{{langPurchase.pricelist[20+type]}}</span></div>
         </div>
       </li>
+       <li class="t-sub">
+        <div class="box thin" :style="{lineHeight:language==='en'?'30px':'60px'}"><span>{{langPurchase.pricelist[21]}}</span></div>
+      </li>
     </ul>
   </div>
 </template>
@@ -46,9 +49,17 @@
 import { mapState } from 'vuex'
 
 export default {
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
   computed: {
     ...mapState({
-      langPurchase: state => state.language.home.purchase
+      langPurchase: state => state.language.home.purchase,
+      language: state => state.language.current
+
     })
   }
 }
@@ -137,10 +148,23 @@ export default {
 
   .top,
   .t-middle,
-  .t-bottom {
+  .t-bottom,
+  .t-sub {
     width: 100%;
     font-size: 0;
   }
+  .t-sub{
+    .box{
+      width: 100%;
+    }
+    .thin{
+      height: 60px;
+      span{
+        text-align: center;
+        transform: translateX(0)
+      }
+    }
+  }
   .t-middle {
     > div {
       background-color: #f4f4f4;

mobile/src/components/toast/style.scss

@@ -80,6 +80,7 @@ $anima-delay:0.15s;
       text-align: center;
       min-height: 100px;
       position: relative;
+      box-sizing: content-box;
       &>div{
         position: absolute;
         top: 50%;

mobile/src/pages/account/manage/consumpdetail/consumption.js

@@ -15,9 +15,9 @@ let capacity = [
       en: 'Access channel',
       name: '获得渠道'
     }, {
-      key: 'unitSize',
-      en: 'Capacity',
-      name: '容量大小'
+      key: 'unitSize1',
+      en: 'Package capacity',
+      name: '容量套餐'
     }, {
       key: 'payTypeStr',
       en: 'Method of Payment',
@@ -26,15 +26,17 @@ let capacity = [
       key: 'amount',
       en: 'Paid amount',
       name: '实付金额'
-    }, {
-      key: 'validDateStr',
-      en: 'Expiry date',
-      name: '有效期'
-    }, {
-      key: 'statusStr',
-      en: 'Status',
-      name: '状态'
-    }, {
+    },
+    // {
+    //   key: 'validDateStr',
+    //   en: 'Expiry date',
+    //   name: '有效期'
+    // }, {
+    //   key: 'statusStr',
+    //   en: 'Status',
+    //   name: '状态'
+    // },
+    {
       key: 'tradeTime',
       en: 'Time spent',
       name: '消费时间'

mobile/src/pages/account/manage/consumption/index.vue

@@ -82,6 +82,32 @@ let rechargeType = {
   2: '系统退充值'
 }
 
+let shixian = {
+  1: '月',
+  3: '3个月',
+  6: '6个月',
+  12: '年'
+}
+
+let shixianEn = {
+  1: '1 mon.',
+  3: '3 mon.',
+  6: '6 mon.',
+  12: '1 year'
+}
+
+let channelType = {
+  0: '系统赠送',
+  1: '充值',
+  2: '升级套餐'
+}
+
+let channelEnType = {
+  0: 'Free',
+  1: 'Expansion',
+  2: 'Upgrade package'
+}
+
 export default {
   props: ['tabactive'],
   components: { Paging },
@@ -103,6 +129,12 @@ export default {
       useStatus: state => {
         return state.language.current === 'en' ? statusEn : status
       },
+      channelType: state => {
+        return state.language.current === 'en' ? channelEnType : channelType
+      },
+      shixian: state => {
+        return state.language.current === 'en' ? shixianEn : shixian
+      },
       myexpansion: state => {
         let type = Object.prototype.toString.call(state.user.myexpansion)
         if (type === '[object Object]') {
@@ -211,8 +243,8 @@ export default {
         let condition = item['validDate'] === '终身有效' ? (this.language === 'en' ? 'N/A' : '终身有效') : item['validDate']
         item['validDateStr'] = condition
         item['statusStr'] = this.useStatus[item['status']]
-        item['unitSize'] = item['unitSize'] + item['unit']
-        item['channel'] = this.language === 'en' ? 'Expansion' : '扩充容量'
+        item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.shixian[item['month']]
+        item['channel'] = this.channelType[item['status']]
         item['payTypeStr'] = this.language === 'en' ? PAYSSTREN[item['payType']] : PAYSSTR[item['payType']]
       })
     }
@@ -237,8 +269,8 @@ export default {
           let condition = item['validDate'] === '终身有效' ? (newVal === 'en' ? 'N/A' : '终身有效') : item['validDate']
           item['validDateStr'] = condition
           item['statusStr'] = this.useStatus[item['status']]
-          item['unitSize'] = item['unitSize'] + item['unit']
-          item['channel'] = newVal === 'en' ? 'Expansion' : '扩充容量'
+          item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.shixian[item['month']]
+          item['channel'] = this.channelType[item['status']]
           item['payTypeStr'] = newVal === 'en' ? PAYSSTREN[item['payType']] : PAYSSTR[item['payType']]
           data.push(item)
         })

mobile/src/pages/account/manage/device/index.vue

@@ -107,6 +107,9 @@ export default {
       return Math.round(temp)
     },
     getBar (a, b) {
+      if (a === 0) {
+        return 0
+      }
       let temp = (a / b) * 100
       if (temp < 1) {
         return '1%'
@@ -201,7 +204,7 @@ $theme-color: #1fe4dc;
   border: solid 1px #777777;
   text-align: center;
   border-radius: 2px;
-  width: 52px;
+  min-width: 52px;
   height: 26px;
   font-size: 12px;
   margin-right: 4px;
@@ -212,6 +215,7 @@ $theme-color: #1fe4dc;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
+    white-space: nowrap;
   }
 }
 .primary{

mobile/src/pages/account/manage/index.vue

@@ -2,7 +2,7 @@
   <div class="manage-layout">
     <div class="m-nav" v-if="!noNavs">
       <span>{{title}}</span>
-      <span v-if="title==='我的设备'||title==='My Devices'" @click="addDevice" class="btns">
+      <span v-if="title==='我的相机'||title==='My Cameras'" @click="addDevice" class="btns">
         {{langDevices.add}}
       </span>
       <span v-if="Number(consumpselected.id)===2&&(title==='消费记录'||title==='Billing Records')" @click="openInvoice" class="btns">
@@ -11,7 +11,7 @@
       <div v-if="title==='我的场景'||title==='My Scene'">
         <i class="iconfont icon-sousuo" @click="$router.push({name:'scenesearch'})"></i>
       </div>
-      <div v-if="title==='我的设备'||title==='My Devices'" style="min-width:12%;" class="select" ref="mbMenu1" @click="selectedActive=!selectedActive">
+      <div v-if="title==='我的相机'||title==='My Cameras'" style="min-width:12%;" class="select" ref="mbMenu1" @click="selectedActive=!selectedActive">
         {{selected.name}}
         <div class="s-sub" :class="{'s-active':selectedActive}">
           <div v-for="(item,i) in selectType" :key="i" :class="{'item-active':selected.name===item.name}" @click="emithandle(item)" class="s-item">{{item.name}}</div>
@@ -35,7 +35,7 @@ let titleName = {
   'information': '个人中心',
   'order': '我的订单',
   'myscene': '我的场景',
-  'device': '我的设备',
+  'device': '我的相机',
   'consumption': '消费记录',
   'consumpdetail': '记录详细',
   'change': '修改密码',
@@ -52,7 +52,7 @@ let titleNameEn = {
   'information': 'Account Information',
   'order': 'My Order',
   'myscene': 'My Scene',
-  'device': 'My Devices',
+  'device': 'My Cameras',
   'consumption': 'Billing Records',
   'consumpdetail': 'Detail',
   'change': 'Change Password',

mobile/src/pages/account/manage/information/index.vue

@@ -35,9 +35,8 @@
           </p>
           <div class="capacity">
           <div class="c-dec">
-            <span
-              >{{ langAccount.used
-              }}{{
+            <span>{{langAccount.used}}
+              {{
                 isSelect
                   ? activeCamera.usedSpaceStr +
                     " / " +
@@ -69,7 +68,7 @@
         </div>
         </div>
 
-        <div class="btn" :style="{backgroundColor:isSelect?'#1fe4dc':'#e2e2e2'}" @click="isSelect&&$router.push({name:'introduce',params:{id:activeCamera.childName}})">{{ langAccount.btntype }}</div>
+        <div class="btn" v-if="isSelect" @click="$router.push({name:'introduce',params:{id:activeCamera.childName}})">{{ langAccount.btntype }}</div>
       </div>
     </div>
     <div class="address-con">

mobile/src/pages/account/manage/information/style.scss

@@ -68,6 +68,11 @@ input {
       align-items: center;
       transform: translate(-50%,-50%);
       color: 12px;
+      >div{
+        &:first-of-type{
+          min-width: 70%;
+        }
+      }
       p{
         font-size: 12px;
         word-break: break-all;

mobile/src/pages/account/manage/order/index.vue

@@ -90,7 +90,7 @@ let typeName = {
 
 let typeNameEn = {
   'no': 'No invoice required',
-  2: 'VAT invoice (electronic invoice)',
+  2: 'VAT invoice (E-mail)',
   3: 'VAT special invoice'
 }
 let cameraName = {

mobile/src/pages/account/manage/payselect/index.vue

@@ -40,8 +40,8 @@ export default {
     })
   },
   data () {
-    let country = this.$route.query.country || 0
-    let data = country ? [{
+    let country = this.$route.query.country || ''
+    let data = Number(country) ? [{
       id: 2,
       name: 'PayPal',
       img: this.$cdn + `images/ic_paypal_mb@2x.png`
@@ -72,14 +72,16 @@ export default {
   methods: {
     async goPay (item) {
       let {orderId, orderType} = this.$route.params
+      let {spaceId} = this.$route.query
       let params = {
         orderId: orderId,
-        orderType: Number(orderType)
+        orderType: Number(orderType),
+        spaceId: spaceId || null
       }
 
       if (PAYS[item.id] !== 'paypal') {
         if (this.isWeixin) {
-          return location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=http%3a%2f%2fpro.4dkankan.com%2fapi%2forder%2fpay%2fwechatPreJsPay%3forderId=${orderId}%26orderType=${Number(orderType)}&appid=wx779dbafb46bab697&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect`)
+          return location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=http%3a%2f%2fpro.4dkankan.com%2fapi%2forder%2fpay%2fwechatPreJsPay%3forderId=${orderId}%26spaceId=${spaceId}%26orderType=${Number(orderType)}&appid=wx779dbafb46bab697&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect`)
         }
         let response = await this.$http
           .post(`/order/pay/${PAYS[item.id]}`, params, {

mobile/src/pages/introduce/index.vue

@@ -1,39 +1,61 @@
 <template>
  <div class="introtow-layout">
-   <div class="it-header it-txt">
-     <p>ID：{{detail.snCode||detail.childName}}</p>
-     <div class="capacity">
-        <div class="c-line">
-          <div class="active" :style="{width:getBar(detail.usedSpace,detail.totalSpace),background:getColor(detail.usedSpace,detail.totalSpace)}"></div>
-        </div>
+   <div class="it-header it-txt tc">
+    <div>
+      <p>{{ langAccount.sn}}{{detail.snCode||(detail.childName&&detail.childName.replace('4DKKPRO_',''))||'--'}}</p>
+      <div class="capacity">
         <div class="c-dec">
-          <span>{{detail.usedSpaceStr}} / {{detail.totalSpaceStr}} </span>
+            <span>{{langAccount.used}}{{detail.totalSpaceStr?(detail.usedSpaceStr+' / '+detail.totalSpaceStr):'--'}} </span>
+          </div>
+          <div class="c-line">
+            <div class="active" :style="{width:getBar(detail.usedSpace,detail.totalSpace),background:getColor(detail.usedSpace,detail.totalSpace)}"></div>
+          </div>
+          <div class="c-detail">
+              <span
+                >{{ langAccount.space
+                }}{{ detail.spaceStr || "--" }} &nbsp;&nbsp;&nbsp;{{
+                  langAccount.expire
+                }}{{ detail.spaceEndStr || "--" }}</span
+              >
+            </div>
         </div>
       </div>
+      <div class="btn" v-if="detail.spaceId" @click="toPay">{{langAccount.btntype }}</div>
    </div>
    <div class="point-list it-txt">
      <div class="tab-list">
-       <div :class="{'tabactive':cType==='mouth'}" @click="cType='mouth'">
+       <div :class="{'tabactive':cType==='month'}" @click="cType='month'">
          <p>{{langPurchase.introduce.mounthly}}</p>
          <span>{{langPurchase.introduce.youhui}}</span>
        </div>
        <span class="v-line"></span>
+
+       <div :class="{'tabactive':cType==='_3mon'}" @click="cType='_3mon'">
+         <p>{{langPurchase.introduce._3month}}</p>
+         <span>{{langPurchase.introduce.youhui}}</span>
+       </div>
+       <span class="v-line"></span>
+       <div :class="{'tabactive':cType==='half'}" @click="cType='half'">
+         <p>{{langPurchase.introduce.half}}</p>
+         <span>{{langPurchase.introduce.youhui}}</span>
+       </div>
+       <span class="v-line"></span>
        <div :class="{'tabactive':cType==='year'}" @click="cType='year'">
          <p>{{langPurchase.introduce.year}}</p>
          <span>{{langPurchase.introduce.zhe}}</span>
        </div>
      </div>
      <div class="card-scroll">
-       <div @click="toPay(item)" class="card-item" v-for="(item,i) in type" :key="i">
+       <div @click="fixBtn(item)" class="card-item" v-for="(item,i) in type" :key="i">
          <div class="top-card">
            <img :src="language==='en'?`${$cdn}images/card-bg1-en.png`:`${$cdn}images/card-bg1.png`" alt="">
            <div>
-            <p>{{item.unit}}</p>
+            <p>{{item.unit}}{{langPurchase.introduce.taocan}}</p>
             <p>{{langPurchase.introduce.buy}}</p>
            </div>
          </div>
          <p>{{langPurchase.introduce.ctype[item.unit]}}</p>
-         <p>{{country[detail.country]}}<span>{{item.price}}/</span>{{cType==='year'?langPurchase.introduce.nyear:langPurchase.introduce.nmounth}}
+         <p>{{country[detail.country]}}<span>{{detail.country===1?item.dollarPrice:item.price}}/</span>{{langPurchase.introduce.fixpre[cType]}}
          <!-- <i>￥{{item.dollarPrice}}</i> -->
          </p>
        </div>
@@ -47,11 +69,10 @@
    </div>
    <div class="hover-mask" @touchmove.prevent @click="payactive=!payactive" :class="{'hover-active':payactive}">
      <div class="h-con" @click.stop>
-       <p class="h-title">{{langPurchase.introduce.ipackage}}</p>
-       <div class="point-card">
+       <p class="h-title">{{langPurchase.introduce['ipackage'+chargetype]}}</p>
+      <div class="point-card">
         <div class="p-left">
           <p>{{langPurchase.introduce.ctype[item.unit]}}</p>
-          <span class="p-tag">{{langPurchase.introduce.expiry}}: {{deadLine}}</span>
           <p>{{langPurchase.introduce.keep}}</p>
         </div>
         <div class="p-right">
@@ -64,11 +85,34 @@
          </div>
         </div>
       </div>
+      <template  v-if="chargetype==='renew'">
+        <div class="line"></div>
+        <ul class="renew">
+          <li :class="{'tag-active':tctype===item.typeid}"  @click="tcClick(item)" v-for="(item,i) in tcdata" :key="i">
+            <i class="iconfont" :class="item.icon"></i>
+            <span>{{language==='en'?item.en : item.name}}</span>
+            <span class="s-right"> {{detail.country===1?`USD: ${item.dollarPrice}`:`￥:${item.price}`}}</span>
+            <img :src="`${$cdn}images/tag-icon.png`" />
+          </li>
+        </ul>
+      </template>
+      <div class="line"></div>
+      <div class="dec-con">
+        <p>
+          <span class="p-tag">{{langPurchase.introduce.expiry}}: {{deadlineTime}}
+            <span v-if="chargetype!=='renew'&&delay>0">{{language==='en'?` (Package expiration: ${delay} days)`:`（延期：${delay}天）`}}</span>
+          </span>
+          <span v-if="chargetype!=='renew'&&delay>0" class="p-tag">
+            {{language==='en'?`Current package has not expired yet. After detailed calculations, the days left from the current package are added as ${delay} days to the upgraded package.`
+              :`因原套餐未到期，经综合计算，新套餐延期${delay}天`}}
+          </span>
+        </p>
+      </div>
       <div class="point-pay">
         <div class="pp-left">
           <span>{{langPurchase.introduce.amount}}</span><i>{{country[detail.country]}}</i>{{detail.country?item.dollarPrice:item.price}}
         </div>
-        <div class="btn" @click="pay">{{langPurchase.introduce.toPay}}</div>
+        <div class="btn" @click="goPay">{{langPurchase.introduce.toPay}}</div>
       </div>
      </div>
    </div>
@@ -77,7 +121,14 @@
 
 <script>
 import {mapState} from 'vuex'
-
+import { formatDate } from '@/util'
+const ONEDAY = 86400000
+let qixianType = {
+  month: 1,
+  year: 2,
+  _3mon: 3,
+  half: 4
+}
 export default {
 
   computed: {
@@ -85,8 +136,12 @@ export default {
       token: state => state.user.token,
       language: state => state.language.current,
       langToast: state => state.language.home.toast,
+      langAccount: state => state.language.home.manage.account,
       langPurchase: state => state.language.home.purchase
-    })
+    }),
+    deadlineTime () {
+      return formatDate(this.delay * ONEDAY + this.deadLine)
+    }
   },
   data () {
     let country = {
@@ -108,24 +163,52 @@ export default {
       }
     ]
 
-    let ctype = {
-      '10GB': '可存放约10个场景',
-      '50GB': '可存放约50个场景',
-      '50G': '可存放约50个场景',
-      '200GB': '可存放约200个场景',
-      '1TB': '可存放约1000个场景'
-    }
+    let tcdata = [
+      {
+        name: '1个月',
+        en: '1 mon.',
+        icon: 'icon-mouth',
+        price: '2600',
+        typeid: 'month'
+      },
+      {
+        name: '3个月',
+        en: '3 mon.',
+        icon: 'icon-3mouth',
+        price: '26000',
+        typeid: '_3mon'
+      },
+      {
+        name: '6个月',
+        en: '6 mon.',
+        icon: 'icon-halfyear',
+        price: '26000',
+        typeid: 'half'
+      },
+      {
+        name: '1年',
+        en: '1 year',
+        icon: 'icon-year',
+        price: '26000',
+        typeid: 'year'
+      }
+    ]
+
     return {
       country,
-      ctype,
+      tctype: 'month',
       payactive: false,
+      chargetype: 'renew',
       detail: '',
+      tcdata,
       type,
+      delay: 0,
       currentId: '',
       orderSn: '',
       item: '',
-      cType: 'mouth',
-      deadLine: ''
+      cType: 'month',
+      deadLine: '',
+      paramsNext: {}
     }
   },
   mounted () {
@@ -146,21 +229,87 @@ export default {
     }
   },
   methods: {
-    toPay (item) {
+    fixBtn (item) {
+      let totalSpace = this.detail.totalSpace
+      if (item.unitSize > totalSpace) {
+        this.itemHandle(item)
+      } else if (item.unitSize === totalSpace) {
+        this.toPay()
+      } else {
+        this.$toast.show('warn', this.langToast[48], '', this.langToast[49])
+      }
+    },
+    itemHandle (item) {
+      this.chargetype = 'recharge'
       this.payactive = !this.payactive
       this.item = item
+      this.pay()
+    },
+    tcClick (item) {
+      this.item = item
+      this.tctype = item.typeid
+      this.deadLine = item.deadLine
+    },
+    async toPay () {
+      let sub = ''
+      this.type.forEach(item => {
+        if (this.detail.totalSpace === item.unitSize) {
+          sub = item
+        }
+      })
+      this.chargetype = 'renew'
+      this.tctype = this.cType
+      this.payactive = !this.payactive
+      this.item = sub
+
+      let m = await this.getPrice(1)
+      let y = await this.getPrice(2)
+      let _3m = await this.getPrice(3)
+      let half = await this.getPrice(4)
+
+      this.tcdata[0] = Object.assign(this.tcdata[0], m['ret'])
+      this.tcdata[1] = Object.assign(this.tcdata[1], _3m['ret'])
+      this.tcdata[2] = Object.assign(this.tcdata[2], half['ret'])
+      this.tcdata[3] = Object.assign(this.tcdata[3], y['ret'])
+
+      this.tcdata[0]['deadLine'] = m['deadLine']
+      this.tcdata[1]['deadLine'] = _3m['deadLine']
+      this.tcdata[2]['deadLine'] = half['deadLine']
+      this.tcdata[3]['deadLine'] = y['deadLine']
+
+      let ret = 'month'
+
+      switch (this.cType) {
+        case 'month':
+          ret = m['deadLine']
+          break
+        case 'year':
+          ret = y['deadLine']
+          break
+        case '_3mon':
+          ret = _3m['deadLine']
+          break
+        case 'half':
+          ret = half['deadLine']
+          break
+        default:
+          ret = m['deadLine']
+          break
+      }
+      this.deadLine = ret
+      this.pay()
     },
     async pay () {
       let {unit, skuSn} = this.item
 
       let params = {
         cameraId: this.detail.id,
-        payType: 0,
+        payType: this.detail.country ? 2 : 1,
         unit: unit.substr(1),
         unitSize: 1,
         years: 1,
         skuSn,
-        abroad: this.language === 'en' ? 1 : 0
+        abroad: this.detail.country
       }
 
       let res = await this.$http
@@ -174,31 +323,50 @@ export default {
       if (data.code !== 0) {
         return this.$toast.show('error', this.langToast['1'])
       }
-      let {id, orderSn, amount} = data.data
+      let {id, orderSn, amount, delay} = data.data
+
+      this.delay = delay
 
       this.currentId = id
       this.orderSn = orderSn
-      this.goPay({id, orderSn, amount})
+      this.paramsNext = {
+        id,
+        orderSn,
+        amount,
+        spaceId: this.chargetype === 'recharge' ? null : this.detail.spaceId
+      }
+      console.log(this.chargetype === 'recharge' ? null : this.detail.spaceId)
+      // if (this.chargetype === 'recharge') {
+      //   this.goPay({id, orderSn, amount})
+      // }
     },
 
-    goPay (item) {
+    goPay () {
+      let item = this.paramsNext
       this.$store.commit('ORDERINFO', {
         orderSn: item.orderSn,
         price: item.amount || 0,
-        orderType: 2
+        orderType: 2,
+        spaceId: item.spaceId || null,
+        country: this.detail.country
       })
+      let query = {
+        country: this.detail.country
+      }
+      item.spaceId && (query['spaceId'] = item.spaceId || null)
       this.$router.push({
         name: 'payselect',
         params: {
           orderId: item.id || 1,
           orderType: 2
         },
-        query: {
-          country: this.detail.country
-        }
+        query
       })
     },
     getBar (a, b) {
+      if (a === 0) {
+        return 0
+      }
       let temp = (a / b) * 100
       if (temp < 1) {
         return '1%'
@@ -220,11 +388,11 @@ export default {
       }
       return color
     },
-    async getPrice () {
+    async getPrice (cType = '') {
       let {id} = this.$route.params
       let params = {
         childName: id || '',
-        dateType: this.cType === 'year' ? 2 : 1
+        dateType: cType || qixianType[this.cType]
       }
 
       let res = await this.$http
@@ -237,8 +405,19 @@ export default {
       if (data.code !== 0) {
         return false
       }
-      this.type = data.data.skuList
+      if (!cType) {
+        this.type = data.data.skuList || []
+      }
+      let tempList = data.data.skuList || []
+
       this.deadLine = data.data.deadLine
+      let ret = ''
+      tempList.forEach(item => {
+        if (item.unit === this.item.unit) {
+          ret = item
+        }
+      })
+      return {ret, deadLine: data.data.deadLine}
     },
     async getDetail () {
       let {id} = this.$route.params

mobile/src/pages/introduce/style.scss

@@ -2,7 +2,6 @@
   $font-color:#2d2d2d;
   $theme-color:#1fe4dc;
   .p-tag{
-    background-color: #ffe8e8;
     display: inline-block;
     color: #f04c42;
     font-size: 10px;
@@ -10,16 +9,36 @@
     border-radius: 4px;
     margin-bottom: 0;
   }
+  .line{
+    width: 100%;
+    height: 1px;
+    background: #e7e7e7;
+  }
   
   .it-header{
-    padding: 18px 0 23px;
+    padding: 18px 0;
+  }
+  .tc{
+    display: flex;
+    padding: 18px 12px;
+    justify-content: space-between;
+    align-items: center;
+    >div{
+      &:first-of-type{
+        min-width: 70%;
+      }
+      >p{
+        font-weight: bold;
+      }
+    }
     .capacity{
-      padding: 0 12px;
+      padding-top: 5px;
       .c-line{
-        width: 40%;
+        width: 100%;
         height: 6px;
         border-radius: 5px;
         background-color: #ccc;
+        margin: 5px 0;
         overflow: hidden;
         .active{
           background-color: $theme-color;
@@ -27,11 +46,27 @@
         }
       }
       .c-dec{
-        padding-top: 4px;
         color: #969696;
         font-size: 12px;
       }
-      
+      .c-detail{
+        font-size: 10px;
+        color: #969696;
+      }
+    }
+    .btn{
+      background: $theme-color;
+      color: #000000;
+      display: inline-block;
+      min-width: 85px;
+      text-align: center;
+      height: 25px;
+      line-height: 25px;
+      border-radius: 6px;
+      font-weight: bold;
+      flex-shrink: 0;
+      margin-left: 10px;
+      padding: 0 5px;
     }
   }
   .it-txt{
@@ -53,6 +88,12 @@
     .tab-list{
       margin-left: 12px;
       margin-bottom: 12px;
+      overflow-y: hidden;
+      overflow-x: auto;
+      white-space: nowrap;
+      &::-webkit-scrollbar{
+        display: none;
+      }
       .v-line{
         display: inline-block;
         width: 1px;
@@ -137,7 +178,7 @@
             left: 50%;
             transform: translate(-50%,-50%);
             p{
-              font-size: 28px;
+              font-size: 24px;
               margin: 0;
               font-weight: normal;
               &:last-of-type{
@@ -210,7 +251,7 @@
         align-items: center;
         background-color: #fff;
         padding: 12px;
-        margin: 36px 16px 80px;
+        margin: 25px 16px;
         width: calc(100% - 32px);
         box-shadow: 0 0 16px rgba($color: #000000, $alpha: 0.2);
         .p-left{
@@ -265,6 +306,56 @@
           }
         }
       }
+      .renew{
+        width: 100%;
+        margin: 0 auto 20px;
+        width: calc(100% - 32px);
+        padding-top: 20px;
+        li{
+          width: 100%;
+          font-size: 16px;
+          display: flex;
+          height: 40px;
+          line-height: 40px;
+          box-sizing: border-box;
+          border: 1px solid #f4f4f9;
+          align-items: center;
+          background: #f4f4f9;
+          line-height: 1;
+          font-size: 16px;
+          font-weight: bold;
+          margin-bottom: 8px;
+          position: relative;
+          .iconfont{
+            color: #777;
+            font-size: 32px;
+            font-weight: normal;
+            margin: 0 20px; 
+          }
+          .s-right{
+            position: absolute;
+            right: 20px;
+            transform: translateY(-50%);
+            top: 50%;
+          }
+          img{
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            display: none;
+          }
+        }
+        .tag-active{
+          border: 1px solid #1fe4dc;
+          img{
+            display: inline-block;
+          }
+        }
+      }
+      .dec-con{
+        width: calc(100% - 32px);
+        margin: 10px auto 60px;
+      }
       .poinit-detail{
         border-top:1px solid #e7e7e7;
         .pd-title{

mobile/src/pages/payresult/index.vue

@@ -15,10 +15,10 @@
       </div>
       <div class="pay-info">
         <span>商品总价：</span>
-        <span>￥{{orderinfo.price||'*****'}}</span>
+        <span>{{orderinfo.country===1?'USD ':'￥'}}{{orderinfo.price||'*****'}}</span>
       </div>
     </div>
-    <div class="btn-submit" @click="backto">{{orderinfo.orderType===0?'我的订单':'我的设备'}}</div>
+    <div class="btn-submit" @click="backto">{{orderinfo.orderType===0?'我的订单':'我的相机'}}</div>
   </div>
 </template>
 

mobile/src/pages/pricedetail/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="pricedetail-layout">
     <div class="plate">
-      <p class="b-title">{{langPurchase.pricename}}</p>
-      <priceTable />
+      <template v-if="language!=='en'">
+        <p class="b-title">{{langPurchase.pricename}}</p>
+        <priceTable  style="margin-bottom:20px;"  />
+      </template>
+      <div class="b-title">{{langPurchase.pricename1}}</div>
+      <priceTable :type="'hw'" />
       <ul class="qa-con">
         <li>
           <p>{{langPurchase.directions}}</p>
@@ -26,7 +30,9 @@ export default {
   },
   computed: {
     ...mapState({
-      langPurchase: state => state.language.home.purchase
+      langPurchase: state => state.language.home.purchase,
+      language: state => state.language.current
+
     })
   },
   data () {
@@ -49,6 +55,7 @@ export default {
       color: rgba(0, 0, 0, 0.7);
       line-height: 44px;
       margin: 0 auto 20px;
+      width: 98%;
     }
     .price-txt {
       text-align: left;

mobile/src/pages/purchase/index.vue

@@ -79,7 +79,7 @@
     </div> -->
     <div class="hover-btns">
       <div class="h-price">
-       {{language!=='en'? `RMB ${selectParts?count*(9800 + 899):count*9800}`:'USD 1499'}}
+       {{language!=='en'? `RMB ${selectParts?count*(9800 + 899):count*9800}`:'USD 1799'}}
       </div>
       <div class="h-btns">
         <span v-if="language!=='en'" @click="addcart">加入购物车</span>

mobile/src/pages/service/temp/app.vue

@@ -14,7 +14,7 @@
               <p>{{sub}}</p>
             </div>
             <a class="app-btn"
-              href="https://www.4dkankan.com/app-download.html"
+              :href="language==='en'?'https://www.4dkankan.com/app-downloaden.html':'https://www.4dkankan.com/app-download.html'"
             >{{language==='en'?'Download':'点击下载'}}</a>
           </div>
         </div>
@@ -26,8 +26,8 @@
 <script>
 import select from '../plugin/select'
 import { mapState } from 'vuex'
-let sub = '使用四维看看Pro的过程中，需要下载相机控制APP。请在手机软件商店搜索“四维看看Pro”或使用手机扫码二维码安装。'
-let subEn = 'To use the 4DKanKan Pro Camera you need to download the 4DKanKan Pro App. Please search for“4DKanKan Pro” in the App Store or scan the QR code to install the App.'
+let sub = '使用四维看看Pro的过程中，需要下载相机控制APP。请在手机软件商店搜索“四维看看Pro”或点击下方“点击下载”。'
+let subEn = 'To use the 4DKanKan Pro Camera you need to download the 4DKanKan Pro App. Please search for“4DKanKan Pro” in the App Store or press “Download”.'
 
 export default {
   computed: {

mobile/src/pages/service/temp/clause.vue

@@ -4,7 +4,7 @@
     <!--  @click="$router.push({name:'useimg',params:{id:i}})" -->
      <list :data="useList">
       <div slot="item" slot-scope="{data,i}" @click="clickItem(data,i)" >
-        <div class="title">{{`${data.title}`}}
+        <div class="title">{{`${language==='en'?data.titleEn:data.title}`}}
           <img
             v-if="data.sub"
             :src="`${$cdn}images/right-arrow.png`"
@@ -13,7 +13,7 @@
           />
           <div class="sub" :class="{'open':activeIdx===i}" >
           <div v-for="(item,i) in data.sub" :key="i" @click="$router.push({name:'useimg',params:{id:item.img,type,name: 'clause'}})">
-            <p v-html="item.name"></p>
+            <p v-html="language==='en'?item.nameEn:item.name"></p>
           </div>
         </div>
         </div>
@@ -25,6 +25,7 @@
 <script>
 import select from '../plugin/select'
 import list from '../plugin/list'
+import {mapState} from 'vuex'
 
 export default {
   props: ['data'],
@@ -32,6 +33,11 @@ export default {
     iselect: select,
     list
   },
+  computed: {
+    ...mapState({
+      language: state => state.language.current
+    })
+  },
   data () {
     return {
       activeIdx: '',

mobile/src/pages/service/temp/config.js

@@ -5,7 +5,7 @@
 const use = {
   cp: 'iuse',
   title: '四维看看 使用手册',
-  titleEn: '四维看看 使用手册',
+  titleEn: 'User Tutorial',
   data: {
     lite: [
       {
@@ -128,117 +128,145 @@ const use = {
     pro: [
       {
         title: '阅读提示',
+        titleEn: 'Instructions',
         img: 1
       },
       {
         title: '产品概述',
+        titleEn: 'Product Description',
         img: 2
       },
       {
         title: '使用四维看看Pro',
+        titleEn: 'Use 4DKanKan Pro',
         sub: [
           {
             name: '安装和连接',
+            nameEn: 'Install and Connect',
             img: 3
           },
           {
             name: '拍摄方式',
+            nameEn: 'Shooting mode',
             img: 4
           },
           {
             name: '拍摄规划',
+            nameEn: 'Shooting Plan',
             img: 5
           },
           {
             name: '保存并生成3D空间',
+            nameEn: 'Save and Generate 3D Space',
             img: 6
           }
         ]
       },
       {
         title: 'App端编辑模型',
+        titleEn: 'Edit a Model on App',
         sub: [
           {
             name: '进入编辑页面',
+            nameEn: 'Enter the Edit page and fill in the basic information',
             img: 7
           },
           {
             name: '设置模型的初始化面',
+            nameEn: 'Set the first perspective to enter the model',
             img: 8
           },
           {
             name: '设置背景音乐',
+            nameEn: 'Set background music',
             img: 9
           },
           {
             name: '设置地面LOGO',
+            nameEn: 'Grand Logo',
             img: 10
           },
           {
             name: '添加热点',
+            nameEn: 'Add a hotspot',
             img: 11
           },
           {
             name: '制作自动导览',
+            nameEn: 'Make a tour guide',
             img: 12
           },
           {
             name: '修整模型',
+            nameEn: 'Trim a model',
             img: 13
           }
         ]
       },
       {
         title: 'PC端编辑模型',
+        titleEn: 'Edit a Model on PC',
         sub: [
           {
             name: '登陆账号',
+            nameEn: 'Log in your account',
             img: 14
           },
           {
             name: '查阅模型的基础信息',
+            nameEn: 'Check the basic information of the model',
             img: 15
           },
           {
             name: '更改场景信息',
+            nameEn: 'Change scene information',
             img: 16
           },
           {
             name: '设置模型的初始化面',
+            nameEn: 'Set the screen cover to enter the model',
             img: 17
           },
           {
             name: '添加热点',
+            nameEn: 'Add a hotspot to the model',
             img: 18
           },
           {
             name: '制作自动导览',
+            nameEn: 'Make an auto guidance for viewing',
             img: 19
           },
           {
             name: '自定义地面LOGO',
+            nameEn: 'Customize spot logo',
             img: 20
           },
           {
             name: '设置漫游可行',
+            nameEn: 'Set roaming possibility',
             img: 21
           },
           {
             name: '修整模型',
+            nameEn: 'Trim a model',
             img: 22
           }
         ]
       },
       {
         title: '浏览分享',
+        titleEn: 'Browse and Share',
         sub: [
           {
             name: '兼容多平台、多终端',
+            nameEn: 'Compatible with multiple platforms and terminals',
             img: 23
           },
           {
             name: '浏览模式',
-            img: 24
+            nameEn: 'Browse Mode',
+            img: 23
           }
         ]
       }
@@ -282,7 +310,7 @@ const agreement = {
 
 const qa = {
   cp: 'iqa',
-  titleEn: '四维看看 常见问题',
+  titleEn: 'FAQ',
   title: '四维看看 常见问题',
   data: {
     lite: [
@@ -326,46 +354,65 @@ const qa = {
     pro: [
       {
         title: '与全景相机的区别',
+        titleEn: '4DKanKan vs panoramic camera',
         img: 1
       },
       {
         title: '与建模设备的区别',
+        titleEn: '4DKanKan vs 3D modeling camera',
         img: 2
       },
       {
         title: '精确度',
+        titleEn: 'Accuracy of the 4DKanKan Pro',
         img: 3
       },
       {
         title: 'VR眼镜使用',
+        titleEn: 'Using VR glasses',
         img: 4
       },
       {
         title: '关于账号',
+        titleEn: 'About account',
         img: 5
       },
       {
-        title: '热点漂移',
+        title: '兼容性',
+        titleEn: 'Compatibility',
         img: 6
       },
       {
-        title: '兼容性',
+        title: '分岔口拍摄',
+        titleEn: 'Split shooting paths',
         img: 7
       },
       {
-        title: '分岔口拍摄',
+        title: '场景补拍',
+        titleEn: 'Reshooting',
         img: 8
       },
       {
-        title: '场景补拍',
+        title: '关于曝光',
+        titleEn: 'About exposure',
         img: 9
+      },
+      {
+        title: '关于充电逻辑',
+        titleEn: 'Charging logic',
+        img: 10
+      },
+      {
+        title: '其它',
+        titleEn: 'Others',
+        img: 11
       }
     ]
   }
 }
 const clause = {
   cp: 'iclause',
-  titleEn: '四维看看 售后服务',
+  titleEn: 'Warranty Information',
   title: '四维看看 售后服务',
   data: {
     lite: [
@@ -393,22 +440,27 @@ const clause = {
     pro: [
       {
         title: '售后服务',
+        titleEn: 'After-sales Servic',
         img: 1
       },
       {
         title: '主机保修',
+        titleEn: 'Warranty for main unit',
         img: 2
       },
       {
         title: '付费维修',
+        titleEn: 'Paid repair service',
         img: 3
       },
       {
         title: '免责声明',
+        titleEn: 'Disclaimer',
         img: 4
       },
       {
         title: '联系方式',
+        titleEn: 'Contact info',
         img: 5
       }
     ]

mobile/src/pages/service/temp/qa.vue

@@ -4,7 +4,7 @@
     <!--  @click="$router.push({name:'useimg',params:{id:i}})" -->
      <list :data="useList">
       <div slot="item" slot-scope="{data,i}" @click="clickItem(data,i)" >
-        <div class="title">{{`${data.title}`}}
+        <div class="title">{{`${language==='en'?data.titleEn:data.title}`}}
           <img
             v-if="data.sub"
             :src="`${$cdn}images/right-arrow.png`"
@@ -13,7 +13,7 @@
           />
           <div class="sub" :class="{'open':activeIdx===i}" >
           <div v-for="(item,i) in data.sub" :key="i" @click="$router.push({name:'useimg',params:{id:item.img,type,name:'qa'}})">
-            <p v-html="item.name"></p>
+            <p v-html="language==='en'?item.nameEn:item.name"></p>
           </div>
         </div>
         </div>
@@ -25,6 +25,7 @@
 <script>
 import select from '../plugin/select'
 import list from '../plugin/list'
+import {mapState} from 'vuex'
 
 export default {
   props: ['data'],
@@ -32,6 +33,11 @@ export default {
     iselect: select,
     list
   },
+  computed: {
+    ...mapState({
+      language: state => state.language.current
+    })
+  },
   data () {
     return {
       activeIdx: '',

mobile/src/pages/service/temp/use.vue

@@ -4,7 +4,7 @@
     <!--  @click="$router.push({name:'useimg',params:{id:i}})" -->
      <list :data="useList">
       <div slot="item" slot-scope="{data,i}" @click="clickItem(data,i)" >
-        <div class="title">{{`${data.title}`}}
+        <div class="title">{{`${language==='en'?data.titleEn:data.title}`}}
           <img
             v-if="data.sub"
             :src="`${$cdn}images/right-arrow.png`"
@@ -12,11 +12,11 @@
             :class="{'active':activeIdx===i}"
           />
           <div class="sub" :class="{'open':activeIdx===i}" >
-          <div v-for="(item,i) in data.sub" :key="i" @click="$router.push({name:'useimg',params:{id:item.img,type,name: 'use'}})">
-            <p v-html="item.name"></p>
+            <div v-for="(item,i) in data.sub" :key="i" @touchstart.stop="$router.push({name:'useimg',params:{id:item.img,type,name: 'use'}})">
+              <p v-html="language==='en'?item.nameEn:item.name"></p>
+            </div>
           </div>
         </div>
-        </div>
       </div>
     </list>
   </div>
@@ -25,6 +25,7 @@
 <script>
 import select from '../plugin/select'
 import list from '../plugin/list'
+import {mapState} from 'vuex'
 
 export default {
   props: ['data'],
@@ -32,6 +33,11 @@ export default {
     iselect: select,
     list
   },
+  computed: {
+    ...mapState({
+      language: state => state.language.current
+    })
+  },
   data () {
     return {
       activeIdx: '',
@@ -41,8 +47,10 @@ export default {
   },
   methods: {
     clickItem (data, i) {
-      this.activeIdx = this.activeIdx === i ? '' : i
-      !data.sub && this.$router.push({name: 'useimg', params: {id: data.img, type: this.type, name: 'use'}})
+      this.activeIdx = (this.activeIdx === i ? '' : i)
+      if (!data.sub) {
+        this.$router.push({name: 'useimg', params: {id: data.img, type: this.type, name: 'use'}})
+      }
     },
     handleCurrent (data) {
       this.type = data

mobile/src/pages/service/useimg.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="img-layout">
+  <div class="img-layout" :class="{agreement:$route.params.name==='agreement'}">
     <img :src="images" alt="">
+    <img v-if="$route.params.name==='agreement'" :src="`${$cdn}images/agreement/eight/${language === 'en' ? 'en' : 'zh'}/2-more.jpg`" alt="">
   </div>
 </template>
 
 <script>
 import data from './temp/config'
+import {mapState} from 'vuex'
 let current = {
   0: 'eight',
   1: 'binocular'
@@ -15,7 +17,11 @@ export default {
     return {
     }
   },
+
   computed: {
+    ...mapState({
+      language: state => state.language.current
+    }),
     images () {
       let use = parseInt(this.$route.params.type) === 0 ? data.use.data.pro : data.use.data.lite
       let name = this.$route.params.name
@@ -25,7 +31,7 @@ export default {
         let item = use[i]
         if (!item.sub) {
           if (parseInt(item.img) === parseInt(this.$route.params.id)) {
-            img = this.$cdn + `images/${name}/${current[this.$route.params.type]}/zh/${item.img}.jpg`
+            img = this.$cdn + `images/${name}/${current[this.$route.params.type]}/${this.language === 'en' ? 'en' : 'zh'}/${item.img}.jpg`
             return img
           }
         }
@@ -33,7 +39,7 @@ export default {
           for (let j = 0; j < item.sub.length; j++) {
             let sub = item.sub[j]
             if (parseInt(sub.img) === parseInt(this.$route.params.id)) {
-              img = this.$cdn + `images/${name}/${current[this.$route.params.type]}/zh/${sub.img}.jpg`
+              img = this.$cdn + `images/${name}/${current[this.$route.params.type]}/${this.language === 'en' ? 'en' : 'zh'}/${sub.img}.jpg`
               return img
             }
           }
@@ -56,4 +62,10 @@ export default {
     width:100%;
   }
 }
+
+.agreement{
+  img{
+    margin: 0;
+  }
+}
 </style>

mobile/src/store/language/cn/home.js

@@ -105,7 +105,7 @@ export default{
     }
   },
   items: [
-    {url: 'https://www.4dkankan.com/test4/showProPC.html?m=t-0Q99SHE',
+    {url: 'https://www.4dkankan.com/showProMobile.html?m=t-0Q99SHE',
       image: baseUrl + 'images/phone_11.png',
       icon: baseUrl + 'images/phone_icon_11.png',
       text: '黑白咖啡' },
@@ -187,8 +187,8 @@ export default{
     ]
   },
   loginAside: {
-    agree: '同意',
-    cluse: '四维看看平台用户条款',
+    agree: '我已阅读并同意',
+    cluse: '四维看看用户协议',
     plogin: '请登录',
     pregister: '立即注册吧',
     pforget: '帮您找回密码',

mobile/src/store/language/cn/manage.js

@@ -6,12 +6,12 @@ export default{
   main: {
     btnType: {
       buy: {
-        name: '立即扩容'
+        name: '立即续费'
       }
     },
     sn: 'S/N：',
     used: '已使用：',
-    space: '扩容容量：',
+    space: '容量套餐：',
     expire: '到期时间：'
   },
   information: {
@@ -19,7 +19,7 @@ export default{
       information: '账号信息',
       scene: '我的场景',
       order: '我的订单',
-      device: '我的设备',
+      device: '我的相机',
       consumption: '消费记录',
       change: '修改密码',
       logout: '退出登录'
@@ -34,7 +34,7 @@ export default{
           name: '我的场景',
           to: {name: 'scene'}
         }, {
-          name: '我的设备',
+          name: '我的相机',
           to: {name: 'device'}
         }, {
           name: '我的订单',
@@ -80,13 +80,13 @@ export default{
     },
     sn: 'S/N：',
     used: '已使用：',
-    space: '扩容容量：',
+    space: '容量套餐：',
     expire: '到期时间：',
     info: '账号信息',
     address: '我的收货地址',
     invoice: '我的发票抬头',
     normal: '增值税普票（电子发票）',
-    btntype: '立即扩容',
+    btntype: '立即续费',
     zengzhi: '增值税专用发票',
     edit: '编辑',
     show: '收起',
@@ -170,7 +170,7 @@ export default{
     partShipped: '部分发货',
     hasCancal: '已取消',
     edit: '修改',
-    editInfo: '发货后7天内能修改',
+    editInfo: '发货后7天内可修改',
     dontneed: '发票类型：不需要发票',
     type1: '不需要发票',
     type2: '增值税普票（电子发票）',
@@ -206,7 +206,7 @@ export default{
     unbind: '解绑',
     recharge: '充值',
     expire: '到期：',
-    expand: '扩容：',
+    expand: '套餐：',
     jijiang: '即将到期',
     rongliang: '容量已满',
     norecord: '暂无任何记录'

mobile/src/store/language/cn/toast.js

@@ -36,6 +36,7 @@ export default{
   '34': '失败',
   '35': '昵称不能为空',
   '36': '上传的图片类型不正确，请重新上传',
+
   '37': '删除成功',
   '38': '删除失败',
   '39': '商品加入购物车成功',
@@ -47,6 +48,8 @@ export default{
   '45': '请在使用第三方浏览器内打开',
   '46': '请在微信内打开',
   '47': '修改成功',
+  '48': '暂不支持降级套餐',
+  '49': '您可进行续费或升级套餐',
 
   '4007': '用户名不存在',
   '4010': '绑定的相机不存在',

mobile/src/store/language/en/home.js

@@ -4,7 +4,7 @@ let baseUrl = vue.$cdn
 
 export default{
   watch: 'Watch Introduction',
-  buy: 'Early Bird Price：USD 1499',
+  buy: 'Item Price：USD 1799',
   tech: {
     title: 'Core Technologies',
     dec: [
@@ -105,7 +105,7 @@ export default{
     }
   },
   items: [
-    {url: 'https://www.4dkankan.com/test4/showProPC.html?m=t-0Q99SHE',
+    {url: 'https://www.4dkankan.com/showProMobile.html?m=t-0Q99SHE',
       image: baseUrl + 'images/phone_11.png',
       icon: baseUrl + 'images/phone_icon_11.png',
       text: '黑白咖啡' },
@@ -185,8 +185,8 @@ export default{
     ]
   },
   loginAside: {
-    agree: 'Agree to ',
-    cluse: '4DKankan User Agreement',
+    agree: 'I have read  ',
+    cluse: '4DKanKan User Agreement.',
     plogin: 'Please log in.',
     pregister: 'Sign up now.',
     pforget: 'I\'ll get your password back.',

mobile/src/store/language/en/manage.js

@@ -19,7 +19,7 @@ export default{
       information: 'Account Information',
       scene: 'My Scene',
       order: 'My Order',
-      device: 'My Devices',
+      device: 'My Cameras',
       consumption: 'Billing Records',
       change: 'Change Password',
       logout: 'Log Out'
@@ -34,7 +34,7 @@ export default{
           name: 'My Scene',
           to: {name: 'scene'}
         }, {
-          name: 'My Devices',
+          name: 'My Cameras',
           to: {name: 'device'}
         }, {
           name: 'My Order',
@@ -80,13 +80,13 @@ export default{
     },
     sn: 'S/N: ',
     used: 'Used: ',
-    space: 'Storage expanded: ',
+    space: 'Package capacity: ',
     expire: 'Expires on: ',
     info: 'Account Information',
     address: 'Receiving Address',
     invoice: 'Invoice Title',
     normal: 'Regular invoice for value-added tax',
-    btntype: 'Expand Now',
+    btntype: 'Renew now',
     zengzhi: 'Special invoice for value-added tax',
     edit: 'Edit',
     show: 'Hide',
@@ -175,7 +175,7 @@ export default{
     editInfo: 'Only within 7 days after delivery',
     dontneed: 'Invoice type: No invoice required',
     type1: 'No invoice required',
-    type2: 'VAT invoice (electronic invoice)',
+    type2: 'VAT invoice (E-mail)',
     type3: 'VAT special invoice',
     title: 'Invoice Title',
     code: 'Invoice tax No.',
@@ -209,7 +209,7 @@ export default{
     unbind: 'Unbind',
     recharge: 'Top up',
     expire: 'Expiry Date: ',
-    expand: 'Expanded: ',
+    expand: 'Package: ',
     jijiang: 'About to Expire',
     rongliang: 'Storage Full',
     norecord: 'No Records'

mobile/src/store/language/en/toast.js

@@ -47,6 +47,8 @@ export default{
   '45': 'Please open it in a third party browser',
   '46': 'Please open it in WeChat',
   '47': 'Modify successfully',
+  '48': 'Downgrading process is currently not supported',
+  '49': 'You can renew or upgrade the package.',
 
   '4007': 'User name doesn\'t exist.',
   '4010': 'The bound camera doesn\'t exist.',

mobile/src/store/language/home_cn.js

@@ -29,6 +29,11 @@ export default {
             to: {name: 'purchase'}
           },
           {
+            name: '云容量',
+            icon: 'icon-icon_cam_zengzhi',
+            to: {name: 'pricedetail'}
+          },
+          {
             icon: 'icon-icon_cam_fitting',
             name: '三脚架套装',
             to: {name: 'purchasezhijia'}
@@ -38,12 +43,7 @@ export default {
             icon: 'icon-jingxiaoshang',
             fix: true,
             to: {name: 'agent'}
-          },
-          {
-            name: '增值服务',
-            icon: 'icon-icon_cam_zengzhi',
-            to: {name: 'pricedetail'}
-          } ]
+          }]
       },
       {
         title: '行业应用',
@@ -137,7 +137,7 @@ export default {
         to: {name: 'myscene', params: {id: 4}}
       },
       {
-        name: '我的设备',
+        name: '我的相机',
         to: {name: 'device', params: {id: 4}}
       },
       {

mobile/src/store/language/home_en.js

@@ -13,7 +13,7 @@ import toast from './en/toast'
 export default {
   title: '英文',
   headers: {
-    placeholder: 'Please enter keywords to search',
+    placeholder: 'Search',
     create: 'Created by: ',
     buy: 'Shop Now',
     navs: [
@@ -29,6 +29,11 @@ export default {
             to: {name: 'purchase'}
           },
           {
+            name: 'Cloud Capacity',
+            icon: 'icon-icon_cam_zengzhi',
+            to: {name: 'pricedetail'}
+          },
+          {
             icon: 'icon-icon_cam_fitting',
             name: '4DKanKan Pro Tripot Set',
             to: {name: 'purchasezhijia'}
@@ -38,11 +43,6 @@ export default {
             icon: 'icon-jingxiaoshang',
             fix: true,
             to: {name: 'agent'}
-          },
-          {
-            name: 'Value-added service',
-            icon: 'icon-icon_cam_zengzhi',
-            to: {name: 'pricedetail'}
           }
         ]
       },
@@ -102,9 +102,9 @@ export default {
           to: {name: 'service', params: {id: 'qa'}}
         },
         {
-          icon: 'icon-sysc',
+          icon: 'icon-baoxiutiaokuan',
           name: 'Warranty Information',
-          to: {name: 'service', params: {id: 'product'}}
+          to: {name: 'service', params: {id: 'clause'}}
         }]
       },
       {
@@ -136,7 +136,7 @@ export default {
         to: {name: 'myscene', params: {id: 4}}
       },
       {
-        name: 'My Devices',
+        name: 'My Cameras',
         to: {name: 'device', params: {id: 4}}
       },
       {

mobile/src/util/http.js

@@ -8,7 +8,7 @@ let vue = new Vue()
 const exceptUrls = ['/sso/user/logout', '/sso/user/sendUserInfo', '/user/checkToken']
 
 // axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://120.79.15.136:8086/api' : '/api'
-axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'https://test.4dkankan.com/api' : '/api'
+axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'https://www.4dkankan.com/api' : '/api'
 
 // 请求超时时限
 axios.defaults.timeout = 15000

mobile/src/util/index.js

@@ -23,5 +23,19 @@ module.exports = {
       return false
     };
     return true
+  },
+  formatDate: function (time) {
+    var date = new Date(time)
+    var year = date.getFullYear()
+    var month = date.getMonth() + 1
+    var day = date.getDate()
+    // var hour = date.getHours()
+    // var minute = date.getMinutes()
+    // var second = date.getSeconds()
+    //  return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
+    return year + '-' + (String(month).length > 1 ? month : '0' + month) + '-' +
+      (String(day).length > 1 ? day : '0' + day)
+      // + ' ' + (String(hour).length > 1 ? hour : '0' + hour) + ':' + (String(minute).length > 1 ? minute : '0' + minute) +
+      //  ':' + (String(second).length > 1 ? second : '0' + second)
   }
 }

pc/src/assets/font/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'iconfont';  /* project id 941679 */
-  src: url('//at.alicdn.com/t/font_941679_b0onprhnhpc.eot');
-  src: url('//at.alicdn.com/t/font_941679_b0onprhnhpc.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_941679_b0onprhnhpc.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_941679_b0onprhnhpc.woff') format('woff'),
-  url('//at.alicdn.com/t/font_941679_b0onprhnhpc.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_941679_b0onprhnhpc.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_941679_nydb6f32r2j.eot');
+  src: url('//at.alicdn.com/t/font_941679_nydb6f32r2j.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_941679_nydb6f32r2j.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_941679_nydb6f32r2j.woff') format('woff'),
+  url('//at.alicdn.com/t/font_941679_nydb6f32r2j.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_941679_nydb6f32r2j.svg#iconfont') format('svg');
 }
 
 .iconfont {
@@ -322,4 +322,20 @@
 
 .icon-choice:before {
   content: "\e6a5";
+}
+
+.icon-mouth:before {
+  content: "\e6a9";
+}
+
+.icon-year:before {
+  content: "\e6ab";
+}
+
+.icon-3mouth:before {
+  content: "\e6ac";
+}
+
+.icon-halfyear:before {
+  content: "\e6ad";
 }

pc/src/components/editInvoice/edit.vue

@@ -112,6 +112,12 @@ export default {
                 this.$bus.$emit('isOrderInvoice', true)
               }
             })
+        } else {
+          this.$bus.$emit('editItem', {
+            id: '',
+            type: null
+          })
+          this.$bus.$emit('isOrderInvoice', true)
         }
         return
       }

pc/src/components/lselect/index.vue

@@ -1,13 +1,16 @@
 <template>
-  <tabs class="lselect-layout" :options="options" :selected="selected" @change="changeHandle">
-    <p slot="option" :style="{fontWeight:data.hard?'bold':'normal'}" slot-scope="{data, selected}" :class="{active: selected}">
-       {{data.text}}
-    </p>
-  </tabs>
+  <div class="lselect-con" ref="lselect" id="lselect">
+    <tabs class="lselect-layout" :options="options" :selected="selected" @change="changeHandle">
+      <p slot="option" :style="{fontWeight:data.hard?'bold':'normal'}" slot-scope="{data, selected}" :class="{active: selected}">
+        {{language==='en'?data.txtEn:data.text}}
+      </p>
+    </tabs>
+  </div>
 </template>
 
 <script>
 import tabs from '@/components/tabs'
+import {mapState} from 'vuex'
 
 export default {
   props: {
@@ -19,22 +22,35 @@ export default {
       default: null
     }
   },
+  computed: {
+    ...mapState({
+      language: state => state.language.current
+    })
+  },
   data () {
     return {
       checked: null
     }
   },
   methods: {
-    changeHandle (item) {
+    changeHandle (item, noemit = '') {
       this.checked = item
-      this.$emit('change', item)
+      let items = Array.from(this.$refs.lselect.querySelectorAll('.item'))
+      let offTop = ''
+      items.forEach(sub => {
+        if (String(sub.dataset.alt) === String(item.cover)) {
+          offTop = sub.offsetTop
+        }
+      })
+      document.querySelector('#lselect').scrollTop = offTop - 45
+      !noemit && this.$emit('change', item)
     }
   },
   watch: {
     checked (newVal) {
     },
     selected (newVal) {
-      this.checked = newVal
+      this.changeHandle(newVal, 'noemit')
     }
   },
   mounted () {
@@ -47,15 +63,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.lselect-layout {
+.lselect-con{
   $borderColor: #dcdcdc;
   border: 1px solid $borderColor;
-
+.lselect-layout {
   p {
-    $rwidth: 20px;
+    $rwidth: 10px;
     height: 42px;
     line-height: 42px;
-    padding: 0 15px 0 $rwidth;
+    padding: 0 20px 0 $rwidth+10px;
     color: #2d2d2d;
     font-size: 14px;
     cursor: pointer;
@@ -74,4 +90,6 @@ export default {
     }
   }
 }
+}
+
 </style>

pc/src/components/priceTable/index.vue

@@ -26,18 +26,21 @@
           <div class="thin"><span>{{langPurchase.pricelist[12]}}</span></div>
         </div>
         <div class="box big-box long big-list">
-          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[13]}}</span></div>
-          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[14]}}</span></div>
-          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[15]}}</span></div>
-          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[16]}}</span></div>
+          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[13+type]}}</span></div>
+          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[14+type]}}</span></div>
+          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[15+type]}}</span></div>
+          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[16+type]}}</span></div>
         </div>
         <div class="box big-box long big-list">
-          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[17]}}</span></div>
-          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[18]}}</span></div>
-          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[19]}}</span></div>
-          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[20]}}</span></div>
+          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[17+type]}}</span></div>
+          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[18+type]}}</span></div>
+          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[19+type]}}</span></div>
+          <div class="thin"><span :style="{minWidth:language==='en'?'68%':'60%'}">{{langPurchase.pricelist[20+type]}}</span></div>
         </div>
       </li>
+      <li class="t-sub">
+        <div class="box thin"><span>{{langPurchase.pricelist[21]}}</span></div>
+      </li>
     </ul>
   </div>
 </template>
@@ -46,6 +49,12 @@
 import { mapState } from 'vuex'
 
 export default {
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
   computed: {
     ...mapState({
       langPurchase: state => state.language.home.purchase,
@@ -149,10 +158,15 @@ export default {
     }
   }
 
-  .top,.t-middle,.t-bottom{
+  .top,.t-middle,.t-bottom,.t-sub{
     width: 100%;
     font-size: 0;
   }
+  .t-sub{
+    .box{
+      width: 100%;
+    }
+  }
   .t-middle{
     >div{
       background-color: #f4f4f4;

pc/src/components/tabs/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="lselect">
-    <div v-for="(item, i) in options" @click="clickHandle(item)" :key="i" class="item">
+    <div v-for="(item, i) in options" :data-alt="i+1" @click="clickHandle(item)" :key="i" class="item">
       <slot name="option" :selected="item === checked" :index="i" :data="item"/>
     </div>
   </div>

pc/src/components/toast/capacityRecharge.vue

@@ -6,16 +6,33 @@
   >
     <div class="toast-con recharge-con" :style="{minWidth:'868px'}">
       <div class="t-header">
-        <span>{{langauge==='en'?'Storage Plan':'容量套餐'}}</span>
+        <span>{{typeName}}</span>
         <i class="iconfont icon-cuowu" @click="handleClick"></i>
       </div>
       <div class="pay-con">
         <div class="device">
-          <div class="attr">{{langauge==='en'?'Device: ':'开通设备：'}}</div>
+          <div class="attr" :class="`attr${langauge}`">{{langauge==='en'?'Device: ':'开通设备：'}}</div>
           <div class="val">{{capacitychildName}}</div>
         </div>
-        <div class="capacity">
-          <div class="attr">{{langauge==='en'?'Choose a plan: ':'选择容量：'}}</div>
+        <template v-if="type==='renew'" >
+          <div class="capacity">
+            <div class="attr" :class="`attr${langauge}`">{{langauge==='en'?'Renew package: ':'续费套餐：'}}</div>
+            <div class="val">{{activeItem.unit}}{{langauge==='en'?' plan':'套餐'}}</div>
+          </div>
+          <div class="capacity">
+            <div class="attr" :class="`attr${langauge}`">{{langauge==='en'?'Select package period: ':'选择时限：'}}</div>
+            <div class="val">
+              <div class="tag tag-renew" v-for="(item,i) in qixianArr" :key="i" :class="{'tag-active':qixian===item.id}" @click="$emit('qixian',item.id)">
+                <span class="tag-item">
+                  <i :class="`icon-${item.icon}`" class="iconfont"></i>{{langauge==='en'?item.dateEn:item.date}}</span>
+                <img :src="`${$cdn}images/tag-icon.png`" />
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <div v-else class="capacity">
+          <div class="attr" :class="`attr${langauge}`">{{langauge==='en'?'Choose a plan: ':'选择容量：'}}</div>
           <div class="val">
             <div class="tag tag-active">
               <span class="year">{{activeItem.unit}}{{langauge==='en'?' plan':'套餐'}}</span>
@@ -28,7 +45,7 @@
           </div>
         </div>
         <div class="mid">
-          <div class="attr">{{langauge==='en'?'Payment method: ':'支付方式：'}}</div>
+          <div class="attr" :class="`attr${langauge}`">{{langauge==='en'?'Payment method: ':'支付方式：'}}</div>
           <div class="body">
             <div
               class="pay-tag"
@@ -72,13 +89,16 @@
           </div>
         </div>
         <div class="validity">
-          <div class="attr">{{langauge==='en'?'Storage Expiry: ':'容量期限：'}}</div>
-          <div class="val">
-            <p class="time">{{deadline}}</p>
+          <div class="attr" :class="`attr${langauge}`">{{langauge==='en'?'Storage Expiry: ':'容量期限：'}}</div>
+          <div class="val" style="display:block">
+            <p class="time">{{deadlineTime}}<span v-if="type!=='renew'&&delay>0">{{langauge==='en'?` (Package expiration: ${delay} days)`:`（延期：${delay}天）`}}</span></p>
+            <p class="time" v-if="type!=='renew'&&delay>0">
+              {{langauge==='en'?`Current package has not expired yet. After detailed calculations, the days left from the current package are added as ${delay} days to the upgraded package.`
+              :`因原套餐未到期，经综合计算，新套餐延期${delay}天`}}</p>
           </div>
         </div>
         <div class="amount"  v-if="paytype !== 'paypal'">
-          <div class="attr">{{langauge==='en'?'Payables: ':'应付金额：'}}</div>
+          <div class="attr" :class="`attr${langauge}`">{{langauge==='en'?'Payables: ':'应付金额：'}}</div>
           <div class="val">
             <p class="a-price"><span>{{country[capacitycountry]}}</span> {{capacitycountry===1?activeItem.dollarPrice:activeItem.price}}</p>
             <template v-if="capacitycountry!==1">
@@ -96,6 +116,9 @@
 <script>
 import toastZH from '@/store/language/cn/toast'
 import toastEN from '@/store/language/en/toast'
+import { formatDate } from '@/util'
+
+const ONEDAY = 86400000
 
 let payTypes = {
   wechatPay: '微信',
@@ -122,23 +145,78 @@ let PAYSSTR = {
 }
 
 let ani = {
-  '月': 'mouth',
-  '年': 'year'
+  '月': 'month',
+  '年': 'year',
+  '3个月': '3 mon.',
+  '6个月': '6 mon.'
 }
 let country = {
   0: '￥',
   1: 'USD'
 }
 
+let typeName = {
+  'renew': '立即续费',
+  'recharge': '容量套餐'
+}
+
+let typeEnName = {
+  'renew': 'Renew now',
+  'recharge': 'Storage Plan'
+}
+
+let qixianType = {
+  1: 1,
+  12: 2,
+  3: 3,
+  6: 4
+}
+
+let qixianArr = [
+  {
+    id: 1,
+    date: '1个月',
+    dateEn: '1 mon.',
+    icon: 'mouth'
+  },
+  {
+    id: 3,
+    date: '3个月',
+    dateEn: '3 mon.',
+    icon: '3mouth'
+  },
+  {
+    id: 6,
+    date: '6个月',
+    dateEn: '6 mon.',
+    icon: 'halfyear'
+  },
+  {
+    id: 12,
+    date: '1年',
+    dateEn: '1 year',
+    icon: 'year'
+  }
+]
 export default {
-  props: ['visible', 'capacityitem', 'deadline', 'capacityid', 'capacitycountry', 'capacitychildName'],
+  props: ['visible', 'type', 'capacityitem', 'deadline', 'capacitydetail', 'capacitycountry', 'capacitychildName'],
   computed: {
+    deadlineTime () {
+      return formatDate(this.delay * ONEDAY + this.deadline)
+    },
     payZH () {
       return this.langauge === 'en' ? payTypesEn[this.paytype] : payTypes[this.paytype]
     },
+    typeName () {
+      return this.langauge === 'en' ? typeEnName[this.type] : typeName[this.type]
+    },
     activeItem () {
       return this.capacityitem
+    },
+    qixian () {
+      return this.capacityitem.month
     }
+
   },
   watch: {
     visible (newVal) {
@@ -150,10 +228,17 @@ export default {
       }
     },
     activeItem (newVal) {
-      this.pay()
+      if (newVal) {
+        this.pay()
+      }
     },
     paytype () {
       this.pay()
+    },
+    qixian (newVal) {
+      if (newVal) {
+        this.getPrice()
+      }
     }
   },
   data () {
@@ -161,17 +246,18 @@ export default {
       privilege: 'year',
       response: '',
       capacityType: [],
+      delay: 0,
       t1: null,
       paytype: 'wechatPay',
       total: 0,
-      deadLine: '',
       currentId: '',
       currentType: 2,
       orderSn: '',
       country,
       langauge: localStorage.getItem('language'),
       toastCode: localStorage.getItem('language') === 'en' ? toastEN : toastZH,
-      ani
+      ani,
+      qixianArr
     }
   },
   methods: {
@@ -206,17 +292,43 @@ export default {
         }
       }
     },
+    async getPrice () {
+      let params = {
+        childName: this.capacitychildName || '',
+        dateType: qixianType[this.qixian] || 1
+      }
+      let token = localStorage.getItem('token')
+
+      let res = await this.$http
+        .post('/user/order/getExpansionPrice', params, {
+          headers: {
+            token
+          }
+        })
+      let data = res.data
+      if (data.code !== 0) {
+        return false
+      }
+      let list = data.data.skuList || []
+      let deadLine = data.data.deadLine
+
+      list.forEach(item => {
+        if (item.unit === this.activeItem.unit) {
+          this.$emit('renewItem', {item, deadLine})
+        }
+      })
+    },
     async pay () {
       let {unit, skuSn} = this.activeItem
-
+      let payTypeTemp = this.capacitycountry ? PAYSID['paypal'] : PAYSID[this.paytype]
       let params = {
-        cameraId: this.capacityid,
-        payType: PAYSID[this.paytype],
-        unit: unit.substr(1),
+        cameraId: this.capacitydetail.id,
+        payType: payTypeTemp,
+        unit: unit,
         unitSize: 1,
         years: 1,
         skuSn,
-        abroad: localStorage.getItem('language') === 'en' ? 1 : 0
+        abroad: this.capacitycountry
       }
 
       let res = await this.$http
@@ -230,16 +342,19 @@ export default {
       if (data.code !== 0) {
         return this.$toast.show('error', this.toastCode['1'])
       }
-      let {id, payType, orderSn} = data.data
+      let {id, payType, orderSn, delay} = data.data
+      this.delay = delay
       this.currentId = id
       this.orderSn = orderSn
       this.getCode(id, payType)
     },
     async getCode (id, payType) {
+      let spaceId = this.type === 'renew' ? this.capacitydetail.spaceId : null
       if (payType !== 2) {
         let params = {
           orderId: id,
-          orderType: 2
+          orderType: 2,
+          spaceId
         }
         let res = await this.$http
           .post(`/order/pay/${PAYSSTR[payType]}`, params, {
@@ -259,7 +374,9 @@ export default {
       } else {
         this.t1 = null
         this.t1 && clearInterval(this.t1)
-        this.$toast.show('warn', this.toastCode['3'])
+        if (this.paytype === 'paypal') {
+          this.$toast.show('warn', this.toastCode['3'])
+        }
       }
     }
   },

pc/src/components/toast/capacityRenew.vue

@@ -0,0 +1,278 @@
+<template>
+  <div
+    class="toast-layout"
+    :style="{background:false?'none':'rgba(0, 0, 0, 0.3)'}"
+    :class="{'toast-active':visible}"
+  >
+    <div class="toast-con recharge-con" :style="{minWidth:'868px'}">
+      <div class="t-header">
+        <span>{{langauge==='en'?'Storage Plan':'容量套餐'}}</span>
+        <i class="iconfont icon-cuowu" @click="handleClick"></i>
+      </div>
+      <div class="pay-con">
+        <div class="device">
+          <div class="attr">{{langauge==='en'?'Device: ':'开通设备：'}}</div>
+          <div class="val">{{capacitychildName}}</div>
+        </div>
+        <div class="capacity">
+          <div class="attr">{{langauge==='en'?'Choose a plan: ':'选择容量：'}}</div>
+          <div class="val">
+            <div class="tag tag-active">
+              <span class="year">{{activeItem.unit}}{{langauge==='en'?' plan':'套餐'}}</span>
+              <span class="price">
+                <i style="font-size:12px">{{country[capacitycountry]}} </i>{{capacitycountry===1?activeItem.dollarPrice:activeItem.price}}
+                <span class="per"> / {{activeItem.description&&(langauge==='en'?ani[JSON.parse(activeItem.description)['期限单位']]:JSON.parse(activeItem.description)['期限单位'])}}</span>
+              </span>
+              <img :src="`${$cdn}images/tag-icon.png`" />
+            </div>
+          </div>
+        </div>
+        <div class="mid">
+          <div class="attr">{{langauge==='en'?'Payment method: ':'支付方式：'}}</div>
+          <div class="body">
+            <div
+              class="pay-tag"
+              :class="{'tag-active':paytype==='alipay'}"
+              @click="paytype='alipay'"
+              v-if="!capacitycountry"
+            >
+              <img :src="`${$cdn}images/ali-pay.png`" class="t-icon" alt />
+              <span>{{langauge==='en'?'Alipay':'支付宝'}}</span>
+              <img :src="`${$cdn}images/tag-icon.png`" class="t-click" alt />
+            </div>
+            <div
+              class="pay-tag"
+              :class="{'tag-active':paytype==='wechatPay'}"
+              @click="paytype='wechatPay'"
+              v-if="!capacitycountry"
+            >
+              <img :src="`${$cdn}images/wechat-pay.png`" class="t-icon" alt />
+              <span>{{langauge==='en'?'Wechat':'微信支付'}}</span>
+              <img :src="`${$cdn}images/tag-icon.png`" class="t-click" alt />
+            </div>
+          <div
+              class="pay-tag paypal-con"
+              :class="{'tag-active':paytype==='paypal'}"
+              @click="paytype='paypal'"
+              v-if="capacitycountry"
+            >
+              <img :src="`${$cdn}images/paypal.png`" class="t-icon" alt />
+              <span>paypal</span>
+              <img :src="`${$cdn}images/tag-icon.png`" class="t-click" alt />
+              <form
+                class="form-con"
+                method="post"
+                :action="`api/order/pay/paypal`"
+              >
+                <input v-model="currentId" type="text" name="orderId" />
+                <input v-model="currentType" type="text" name="orderType" />
+                <input type="submit" value="提交" />
+              </form>
+            </div>
+          </div>
+        </div>
+        <div class="validity">
+          <div class="attr">{{langauge==='en'?'Storage Expiry: ':'容量期限：'}}</div>
+          <div class="val">
+            <p class="time">{{deadline}}</p>
+          </div>
+        </div>
+        <div class="amount"  v-if="paytype !== 'paypal'">
+          <div class="attr">{{langauge==='en'?'Payables: ':'应付金额：'}}</div>
+          <div class="val">
+            <p class="a-price"><span>{{country[capacitycountry]}}</span> {{capacitycountry===1?activeItem.dollarPrice:activeItem.price}}</p>
+            <template v-if="capacitycountry!==1">
+              <img class="scanicon" :src="langauge==='en'?`${$cdn}images/scanicon-en.png`:`${$cdn}images/scanicon.png`" alt="">
+              <img class="price-img" :src="response.src" alt="">
+              <div class="dec">{{langauge==='en'?'Scan the ':'使用'}}<span style="color:#ff0000">{{payZH}}</span>{{langauge==='en'?' code and pay':'app扫码支付'}}</div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import toastZH from '@/store/language/cn/toast'
+import toastEN from '@/store/language/en/toast'
+
+let payTypes = {
+  wechatPay: '微信',
+  alipay: '支付宝',
+  paypal: 'paypal'
+}
+
+let payTypesEn = {
+  wechatPay: 'Wechat',
+  alipay: 'Alipay',
+  paypal: 'paypal'
+}
+
+let PAYSID = {
+  'wechatPay': 0,
+  'alipay': 1,
+  'paypal': 2
+}
+
+let PAYSSTR = {
+  0: 'wechatPay',
+  1: 'alipay',
+  2: 'paypal'
+}
+
+let ani = {
+  '月': 'month',
+  '年': 'year'
+}
+let country = {
+  0: '￥',
+  1: 'USD'
+}
+
+export default {
+  props: ['visible', 'capacityitem', 'deadline', 'capacityid', 'capacitycountry', 'capacitychildName'],
+  computed: {
+    payZH () {
+      return this.langauge === 'en' ? payTypesEn[this.paytype] : payTypes[this.paytype]
+    },
+    activeItem () {
+      return this.capacityitem
+    }
+  },
+  watch: {
+    visible (newVal) {
+      this.langauge = localStorage.getItem('language')
+      this.toastCode = this.langauge === 'en' ? toastEN : toastZH
+      if (!newVal) {
+        clearInterval(this.t1)
+        this.t1 = null
+      }
+    },
+    activeItem (newVal) {
+      this.pay()
+    },
+    paytype () {
+      this.pay()
+    }
+  },
+  data () {
+    return {
+      privilege: 'year',
+      response: '',
+      capacityType: [],
+      t1: null,
+      paytype: 'wechatPay',
+      total: 0,
+      deadLine: '',
+      currentId: '',
+      currentType: 2,
+      orderSn: '',
+      country,
+      langauge: localStorage.getItem('language'),
+      toastCode: localStorage.getItem('language') === 'en' ? toastEN : toastZH,
+      ani
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('closePoint')
+    },
+    inverRequest () {
+      clearInterval(this.t1)
+      this.t1 = null
+      this.t1 = setInterval(() => {
+        this.queryOrderStatus()
+      }, 5000)
+    },
+    async queryOrderStatus () {
+      if (this.t1) {
+        let params = {
+          orderSn: this.orderSn,
+          orderType: 2,
+          payType: PAYSID[this.paytype]
+        }
+        let res = await this.$http
+          .post('/user/order/queryOrderStatus', params, {
+            headers: {
+              token: localStorage.getItem('token')
+            }
+          })
+        let response = res.data
+        if (response.code === 0 && response.data) {
+          this.t1 = null
+          this.t1 && clearInterval(this.t1)
+          this.$emit('closePoint', true)
+        }
+      }
+    },
+    async pay () {
+      let {unit, skuSn} = this.activeItem
+
+      let params = {
+        cameraId: this.capacityid,
+        payType: PAYSID[this.paytype],
+        unit: unit.substr(1),
+        unitSize: 1,
+        years: 1,
+        skuSn,
+        abroad: localStorage.getItem('language') === 'en' ? 1 : 0
+      }
+
+      let res = await this.$http
+        .post('/user/order/expansionOrder', params, {
+          headers: {
+            token: localStorage.getItem('token')
+          }
+        })
+
+      let data = res.data
+      if (data.code !== 0) {
+        return this.$toast.show('error', this.toastCode['1'])
+      }
+      let {id, payType, orderSn} = data.data
+      this.currentId = id
+      this.orderSn = orderSn
+      this.getCode(id, payType)
+    },
+    async getCode (id, payType) {
+      if (payType !== 2) {
+        let params = {
+          orderId: id,
+          orderType: 2
+        }
+        let res = await this.$http
+          .post(`/order/pay/${PAYSSTR[payType]}`, params, {
+            headers: {
+              token: localStorage.getItem('token')
+            }
+          })
+        let response = res.data
+        if (response.code !== 0) {
+          return this.$toast.show('error', this.toastCode['2'], () => {
+            this.t1 = null
+            this.t1 && clearInterval(this.t1)
+          })
+        }
+        this.response = response.data
+        this.inverRequest()
+      } else {
+        this.t1 = null
+        this.t1 && clearInterval(this.t1)
+        this.$toast.show('warn', this.toastCode['3'])
+      }
+    }
+  },
+  beforeDestroy () {
+    clearInterval(this.t1)
+    this.t1 = null
+  },
+  mounted () {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./style.scss";
+</style>

pc/src/components/toast/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <pointRecharge :pointid='pointid' :pointitem='pointitem' :pointchildName='pointchildName' :visible='ponintVisible' @closePoint="pointshandle"/>
-    <capacityRecharge :capacityid='capacityid' :capacityitem='capacityitem' :capacitycountry='capacitycountry' :capacitychildName='capacitychildName' :deadline='capacitydeadline' :visible='capacityvisible' @closePoint="capacityhandle"/>
+    <capacityRecharge @qixian='qixianHandle' @renewItem='renewhandle' :capacitydetail='capacitydetail' :capacityitem='capacityitem' :capacitycountry='capacitycountry' :capacitychildName='capacitychildName' :deadline='capacitydeadline' :type='capacitytype' :visible='capacityvisible' @closePoint="capacityhandle"/>
     <editInvoice :edititem=editItem :visible='editVisible' @closePoint="invoicehandle"/>
     <showInvoice :showitem=showItem :visible='showVisible' @closePoint="()=>{showVisible = false}"/>
     <binding :btype="bindingType" :visible='bindingVisible' @closePoint="()=>{bindingVisible = false,emitCallback()}"/>
@@ -74,6 +74,7 @@ export default {
     return {
       visible: false,
       bindingType: 1,
+      capacitytype: '',
       capacityvisible: false,
       ponintVisible: false,
       editVisible: false,
@@ -81,7 +82,7 @@ export default {
       bindingVisible: false,
       editItem: '',
       showItem: '',
-      capacityid: '',
+      capacitydetail: '',
       capacitycountry: 0,
       capacityitem: '',
       capacitychildName: '',
@@ -119,12 +120,22 @@ export default {
       console.log(newVal)
     }
   },
-  mounted () {},
+  mounted () {
+
+  },
   methods: {
+    qixianHandle (data) {
+      this.capacityitem.month = data
+    },
+    renewhandle (data) {
+      this.capacityitem = data.item
+      this.capacitydeadline = data.deadLine
+    },
     capacityhandle (data) {
       if (data) {
         this.callback()
       }
+      this.capacityitem = ''
       this.capacityvisible = false
     },
 

pc/src/components/toast/style.scss

@@ -80,7 +80,7 @@ $border-color: #e7e7e7;
     .pay-con {
       background: #fff;
       padding: 24px 30px;
-      
+      max-width: 95%;
       .capacity,
       .device,
       .mid,
@@ -92,6 +92,9 @@ $border-color: #e7e7e7;
           font-size: 14px;
           color: $font-color;
         }
+        .attren {
+          min-width: 140px;
+        }
         .val {
           display: flex;
           align-items: center;
@@ -155,9 +158,40 @@ $border-color: #e7e7e7;
               width: 14px;
             }
           }
+          .tag-renew{
+            width: 140px;
+            box-sizing: border-box;
+            height: 40px;
+            .tag-item{
+              width: 100%;
+              background: #f4f4f9;
+              color: #2d2d2d;
+              font-size: 16px;
+              text-align: center;
+              font-weight: bold;
+              box-sizing: border-box;
+              height: 38px;
+              line-height: 38px;
+              display: inline-block;
+              vertical-align: middle;
+            }
+            img{
+              display: none;
+            }
+            .iconfont{
+              color: #777;
+              vertical-align: middle;
+              font-size: 30px;
+              font-weight: normal;
+              margin-right: 13px;
+            }
+          }
           .tag-active {
             border: 1px solid $theme-color;
             box-sizing: border-box;
+            img{
+              display: inline-block;
+            }
           }
         }
         .body {

pc/src/components/toast/toast.js

@@ -46,11 +46,13 @@ Toast.install = function (Vue) {
       instance.callback = callback || function () {
       }
     },
-    showCapacityRecharge: (item, detail, deadline, callback) => {
+    showCapacityRecharge: (item, detail, deadline, type, callback) => {
+      instance.capacitytype = type || 'recharge'
       instance.capacityvisible = true
       instance.capacityitem = item
       instance.capacitychildName = detail.snCode || (detail.childName && detail.childName.replace('4DKKPRO_', '')) || '--'
-      instance.capacityid = detail.id
+      instance.capacitydetail = detail
+
       instance.capacitycountry = detail.country
       instance.capacitydeadline = deadline
       instance.callback = callback || function () {}

pc/src/page/about/style.scss

@@ -40,8 +40,6 @@ $txt_delay: 0.2s;
       .intro-r {
         text-align: justify;
         margin-left: 70px;
-        height: 460px;
-        overflow: auto;
         padding-right: 10px;
         .item {
           &:not(:first-of-type) {

pc/src/page/home2/index.vue

@@ -132,6 +132,13 @@ export default {
       token: state => state.user.token
     })
   },
+  watch: {
+    language () {
+      this.sequenceArr.forEach(item => {
+        item['runAnimation'] = false
+      })
+    }
+  },
   mounted () {
     let open = this.$route.query.open
     setTimeout(() => {

pc/src/page/introduce/index.vue

@@ -24,7 +24,8 @@
               </div>
             </div>
           </div>
-          <div class="open-btn" @click="buy(type[1])">{{langMain.btnType.buy.name}}</div>
+          <!--  v-if="detail.spaceId" -->
+          <div class="open-btn" v-if="detail.spaceId" @click="buy('','renew')">{{langMain.btnType.buy.xufei}}</div>
       </div>
     </div>
     <div class="plate02">
@@ -35,17 +36,20 @@
           <img :src="`${$cdn}images/introduce-line1.png`" alt="">
         </div>
         <div class="intro-sub">
-          <span class="btn default" :class="{primary:cType==='mouth'}" @click="cType='mouth'">{{langPurchase.introduce.mounthly}}</span>
+          <span class="btn default" :class="{primary:cType==='month'}" @click="cType='month'">{{langPurchase.introduce.mounthly}}</span>
+          <span class="btn default" :class="{primary:cType==='_3mon'}" @click="cType='_3mon'">{{langPurchase.introduce._3month}}</span>
+          <span class="btn default" :class="{primary:cType==='half'}" @click="cType='half'">{{langPurchase.introduce.half}}</span>
           <div class="btn default" :class="{primary:cType==='year'}" @click="cType='year'">
             <img :class="{'_15off':language==='en','_85zhe':language!=='en'}" :src="language==='en'?`${$cdn}images/85zheen.png`:`${$cdn}images/85zhe.png`" alt="">
-            <span>{{langPurchase.introduce.year}}</span></div>
+            <span>{{langPurchase.introduce.year}}</span>
+          </div>
         </div>
         <ul class="intro-type">
           <li v-for="(item,i) in type" :key="i">
-            <p>{{item.unit==='50G'?'50GB':item.unit}}</p>
+            <p>{{item.unit==='50G'?'50GB':item.unit}}<span>{{langPurchase.introduce.taocan}}</span></p>
             <p class="dec">{{langPurchase.introduce.ctype[item.unit]}}</p>
-            <p class="price"><i v-if="item.costDollarPrice">{{item.costPrice}}</i><span><span class="fuhao">{{country[detail.country]}}</span>{{detail.country===1?item.dollarPrice:item.price}}</span> / {{cType==='year'?langPurchase.introduce.nyear:langPurchase.introduce.nmounth}}</p>
-            <div class="btn" @click="buy(item)"><span>{{langPurchase.introduce.buy}}</span></div>
+            <p class="price"><i v-if="item.costDollarPrice">{{item.costPrice}}</i><span><span class="fuhao">{{country[detail.country]}}</span>{{detail.country===1?item.dollarPrice:item.price}}</span> / {{langPurchase.introduce.fixpre[cType]}}</p>
+            <div class="btn" @click="fixBtn(item)"><span>{{langPurchase.introduce.buy}}</span></div>
           </li>
         </ul>
         <ul class="qa-con">
@@ -61,6 +65,12 @@
 
 <script>
 import {mapState} from 'vuex'
+let qixianType = {
+  month: 1,
+  year: 2,
+  _3mon: 3,
+  half: 4
+}
 
 export default {
   data () {
@@ -90,17 +100,9 @@ export default {
       1: 'USD'
     }
 
-    let ctype = {
-      '10GB': '可存放约10个场景',
-      '50GB': '可存放约50个场景',
-      '50G': '可存放约50个场景',
-      '200GB': '可存放约200个场景',
-      '1TB': '可存放约1000个场景'
-    }
     return {
       type,
-      ctype,
-      cType: 'mouth',
+      cType: 'month',
       deadline: '',
       country,
       detail: '',
@@ -128,13 +130,33 @@ export default {
     })
   },
   watch: {
-    cType () {
-      this.getPrice()
+    cType (newVal) {
+      if (newVal) {
+        this.getPrice()
+      }
     }
   },
   methods: {
-    buy (item) {
-      this.$toast.showCapacityRecharge(item, this.detail, this.deadline, () => {
+    fixBtn (item) {
+      let totalSpace = this.detail.totalSpace
+
+      if (item.unitSize > totalSpace) {
+        this.buy(item)
+      } else if (item.unitSize === totalSpace) {
+        this.buy('', 'renew')
+      } else {
+        this.$toast.show('warn', this.langToast['42'])
+      }
+    },
+    buy (item, type = '') {
+      if (type === 'renew') {
+        this.type.forEach(i => {
+          if (this.detail.totalSpace === i.unitSize) {
+            item = i
+          }
+        })
+      }
+      this.$toast.showCapacityRecharge(item, this.detail, this.deadline, type, () => {
         this.$router.replace({
           name: 'payresult',
           params: {
@@ -235,7 +257,7 @@ export default {
       let {id} = this.$route.params
       let params = {
         childName: id || '',
-        dateType: this.cType === 'year' ? 2 : 1
+        dateType: qixianType[this.cType]
       }
       let token = localStorage.getItem('token')
 

pc/src/page/introduce/style.scss

@@ -19,15 +19,17 @@
     }
     ._85zhe{
       position: absolute;
-      right: -25px;
+      right: -20px;
       width: 40px;
       top: -10px;
+      z-index: 99;
     }
     ._15off{
       position: absolute;
-      right: -40px;
+      right: -20px;
       height: 22px;
-      top: -14px;
+      top: -10px;
+      z-index: 999;
     }
   }
   .default{

pc/src/page/layout/aside/index.vue

@@ -4,12 +4,16 @@
     <div v-show="openClause" class="user-clause" :class="{'cart-clause':cluseType==='cart'}">
       <div>
         <div class="clause-img" ref="clause">
-          <img ref="clauseImg" :src="cluseType==='cart'?`${$cdn}images/cluse-long1.jpg`:`${$cdn}images/cluse-long.jpg`" alt>
+          <div ref="clauseImg">
+            <img :src="cluseType==='cart'?`${$cdn}images/cluse-long1.jpg`:`${$cdn}images/${language==='en'?'cluse-long-en':'cluse-long'}.jpg`" alt>
+            <img v-if="cluseType!=='cart'&&language==='en'" :src="`${$cdn}images/cluse-long-en1.jpg`" alt>
+            <img v-if="cluseType!=='cart'&&language==='en'" :src="`${$cdn}images/cluse-long-en2.jpg`" alt>
+          </div>
         </div>
-        <p>阅读至最底部，“确定”方可生效</p>
+        <p>{{languagelAside.xieyi}}</p>
         <div class="cls-btn">
-          <span @click="cancel">取消</span>
-          <span :class="{primary:allreadyRead}" @click="agree">确定</span>
+          <span @click="cancel">{{languagelAside.cancel}}</span>
+          <span :class="{primary:allreadyRead}" @click="agree">{{languagelAside.comfirm}}</span>
         </div>
       </div>
     </div>
@@ -26,7 +30,9 @@ import cart from './temp/cart'
 export default {
   computed: {
     ...mapState({
-      login: state => state.user.token
+      login: state => state.user.token,
+      language: state => state.language.current,
+      languagelAside: state => state.language.home.home.loginAside
     })
   },
   props: ['active', 'cp'],

pc/src/page/layout/aside/temp/ltemp/deviceLogin.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="qrcode">
       <img v-if="codeImg" :src="codeImg?`${$serverName}${codeImg}`:''" alt="">
-      <!-- <img v-if="codeImg" :src="codeImg?`${'https://www.4dkankan.com/'}${codeImg}`:''" alt=""> -->
+      <!-- <img v-if="codeImg" :src="codeImg?`${'https://test.4dkankan.com/'}${codeImg}`:''" alt=""> -->
       <div class="qrcode-con">
         <div class="qrcode-dec">{{languagelAside.scansub}}</div>
       </div>

pc/src/page/manage/index.vue

@@ -28,7 +28,7 @@
               </div>
             </div>
           </div>
-          <div class="open-btn" :style="{backgroundColor:isSelect?'#1fe4dc':'#e2e2e2'}" @click="isSelect&&$router.push({name:'introduce',params:{id:activeCamera.childName}})">{{langMain.btnType.buy.name}}</div>
+          <div class="open-btn" v-if="isSelect" @click="$router.push({name:'introduce',params:{id:activeCamera.childName}})">{{langMain.btnType.buy.xufei}}</div>
         </template>
         <template v-else>
           <div class="info deviceLogin">
@@ -52,7 +52,7 @@
               </div>
             </div>
           </div>
-          <div class="open-btn" :style="{backgroundColor:'#1fe4dc'}" @click="toastKR">{{langMain.btnType.buy.name}}</div>
+          <div class="open-btn" :style="{backgroundColor:'#1fe4dc'}" @click="toastKR(detail.userId)">{{langMain.btnType.buy[detail.spaceId?'xufei':'name']}}</div>
         </template>
       </div>
     </div>
@@ -118,8 +118,9 @@ export default {
       }
       return item
     },
-    toastKR () {
-      this.$toast.showConfirm('warn', this.langToast['40'], async () => {
+    toastKR (userId) {
+      let key = userId ? 40 : 43
+      this.$toast.showConfirm('warn', this.langToast[key], async () => {
         await this.$store.dispatch('logout')
         this.$router.push({name: 'home', query: {open: true}})
       }, '', this.langToast['41'])

pc/src/page/manage/temp/consumption.vue

@@ -94,6 +94,18 @@ let invoiceType = {
   3: '增值税专用发票'
 }
 
+let channelType = {
+  0: '系统赠送',
+  1: '充值',
+  2: '升级套餐'
+}
+
+let channelEnType = {
+  0: 'Free',
+  1: 'Expansion',
+  2: 'Upgrade package'
+}
+
 let status = {
   '已过期': '已过期',
   '使用中': '使用中'
@@ -104,6 +116,20 @@ let statusEn = {
   '使用中': 'In Use'
 }
 
+let shixian = {
+  1: '月',
+  3: '3个月',
+  6: '6个月',
+  12: '年'
+}
+
+let shixianEn = {
+  1: '1 mon.',
+  3: '3 mon.',
+  6: '6 mon.',
+  12: '1 year'
+}
+
 let tabList = [
   {
     name: '扩容记录',
@@ -175,6 +201,13 @@ export default {
       useStatus: state => {
         return state.language.current === 'en' ? statusEn : status
       },
+      channelType: state => {
+        return state.language.current === 'en' ? channelEnType : channelType
+      },
+      shixian: state => {
+        return state.language.current === 'en' ? shixianEn : shixian
+      },
+
       langSpending: state => state.language.home.manage.Spending,
       deviceLogin: state => state.user.deviceLogin,
       langToast: state => state.language.home.toast,
@@ -218,15 +251,12 @@ export default {
     },
     language (newVal) {
       this.active = 0
-      setTimeout(() => {
-        this.data.forEach(item => {
-          let condition = item['validDate'] === '终身有效' ? (newVal === 'en' ? 'N/A' : '终身有效') : item['validDate']
-          item['validDateStr'] = condition
-          item['statusStr'] = this.useStatus[item['status']]
-          item['unitSize'] = item['unitSize'] + item['unit']
-          item['channel'] = newVal === 'en' ? 'Expansion' : '扩充容量'
-          item['payTypeStr'] = newVal === 'en' ? PAYSSTREN[item['payType']] : PAYSSTR[item['payType']]
-        })
+      this.data.forEach(item => {
+        let condition = item['validDate'] === '终身有效' ? (newVal === 'en' ? 'N/A' : '终身有效') : item['validDate']
+        item['validDateStr'] = condition
+        item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.shixian[item['month']]
+        item['channel'] = this.channelType[item['status']]
+        item['payTypeStr'] = newVal === 'en' ? PAYSSTREN[item['payType']] : PAYSSTR[item['payType']]
       })
     },
     activeId (newVal) {
@@ -318,8 +348,9 @@ export default {
         let condition = item['validDate'] === '终身有效' ? (this.language === 'en' ? 'N/A' : '终身有效') : item['validDate']
         item['validDateStr'] = condition
         item['statusStr'] = this.useStatus[item['status']]
-        item['unitSize'] = item['unitSize'] + item['unit']
-        item['channel'] = this.language === 'en' ? 'Expansion' : '扩充容量'
+        item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.shixian[item['month']]
+
+        item['channel'] = this.channelType[item['status']]
         item['payTypeStr'] = this.language === 'en' ? PAYSSTREN[item['payType']] : PAYSSTR[item['payType']]
       })
     },

pc/src/page/manage/temp/device.vue

@@ -32,7 +32,7 @@
             <template v-if="tabActive===4">
               <p class="d-id">S/N: {{item.snCode||(item.childName&&item.childName.replace('4DKKPRO_',''))||'--'}} </p>
               <!-- item.spaceEndTime|| -->
-              <p class="p-sub" style="padding-left: 26px;">
+              <p class="p-sub" style="padding-left: 26px;" :title="`${item.usedSpaceStr} / ${item.totalSpaceStr}`">
                 <img :src="`${$cdn}images/icon-cloud.png`" alt="">
                 {{item.usedSpaceStr}} / {{item.totalSpaceStr}}
               </p>
@@ -140,11 +140,13 @@ export default {
       })
     },
     getBar (a, b) {
+      if (a === 0) {
+        return 0
+      }
       let temp = (a / b) * 100
       if (temp < 1) {
         return '1%'
       }
-
       return temp > 100 ? 100 : Math.round(temp) + '%'
     },
     getColor (a, b) {

pc/src/page/manage/temp/iconsumption.js

@@ -14,9 +14,9 @@ let capacity = [
     en: 'Access channel',
     name: '获得渠道'
   }, {
-    key: 'unitSize',
-    en: 'Capacity',
-    name: '容量大小'
+    key: 'unitSize1',
+    en: 'Package capacity',
+    name: '容量套餐'
   }, {
     key: 'payTypeStr',
     en: 'Method of Payment',
@@ -25,15 +25,17 @@ let capacity = [
     key: 'amount',
     en: 'Paid amount',
     name: '实付金额'
-  }, {
-    key: 'validDateStr',
-    en: 'Expiry date',
-    name: '有效期'
-  }, {
-    key: 'statusStr',
-    en: 'Status',
-    name: '状态'
-  }, {
+  },
+  // {
+  //   key: 'validDateStr',
+  //   en: 'Expiry date',
+  //   name: '有效期'
+  // }, {
+  //   key: 'statusStr',
+  //   en: 'Status',
+  //   name: '状态'
+  // },
+  {
     key: 'tradeTime',
     en: 'Time spent',
     name: '消费时间'

pc/src/page/manage/temp/order.vue

@@ -87,7 +87,7 @@ let typeName = {
 
 let typeNameEn = {
   'no': 'No invoice required',
-  2: 'VAT invoice (electronic invoice)',
+  2: 'VAT invoice (E-mail)',
   3: 'VAT special invoice'
 }
 let cameraName = {
@@ -555,4 +555,17 @@ $border-color: #e7e7e7;
   }
 }
 
+@media screen and (max-width: 1500px){
+  .order-layout {
+    .order-item{
+     .o-title,.o-invoiceTitle,.o-detail {
+       padding: 0 45px;
+      }
+      .o-invoice{
+       padding: 10px 45px;
+      }
+    }
+  }
+}
+
 </style>

pc/src/page/manage/temp/scene.vue

@@ -252,7 +252,7 @@ export default {
           let to = this.language === 'en' ? this.$cdn + 'images/scene_error-en.png' : this.$cdn + 'images/scene_error.png'
           return to
         default:
-          return item.thumb + '?v=' + item.version
+          return item.thumb + '?v=' + item.version + '?rnd=' + this.rnd
       }
     },
     gotoEdit (item) {

pc/src/page/pay/index.vue

@@ -367,7 +367,7 @@ $theme-color: #1fe4dc;
           margin-left: 6px;
           text-align: center;
           position: relative;
-          width: 160px;
+          width: 165px;
           top: -15px;
           .price{
             font-size: 30px;

pc/src/page/payrecharge/index.vue

@@ -137,7 +137,7 @@ export default {
         duration: '1个月',
         price: 199,
         each: '',
-        privilege: 'mouth'
+        privilege: 'month'
       }
     ]
     let {cameraId, childName} = this.$route.params

pc/src/page/payresult/index.vue

@@ -4,17 +4,19 @@
       <div class="h-left">
         <img :src="`${$cdn}images/logo-black.png`" alt>
         <span class="h-line"></span>
-        <span>支付中心</span>
+        <span>{{language==='en'?'Payment Center':'支付中心'}}</span>
       </div>
-      <div class="h-right">当前账号：{{info.userName}}</div>
+      <div class="h-right">{{language==='en'?'Current account: ':'当前账号：'}}{{info.userName}}</div>
     </div>
     <div class="pay-con">
       <div class="pay-result">
         <img :src="result==='success'?`${$cdn}images/paysuccess.png`:`${$cdn}images/payfail.png`" alt>
         <div class="pay-txt">
-          <div class="main-title" :style="{color:result==='success'?'#13d533':'#ea0b0b'}">{{result==='success'?'恭喜您，支付成功!':'支付失败！请重新支付'}}</div>
-          <div class="sub-title">{{result==='success'?type==='recharge'?'':'我们将尽快安排为您发货!':'请检查网络情况后重试'}}</div>
-          <div class="jump-dec">……{{count}}秒后跳转至{{type==='recharge'?'我的设备':'我的订单'}}页面</div>
+          <div class="main-title" :style="{color:result==='success'?'#13d533':'#ea0b0b'}">
+            {{result==='success'?(language==='en'?'Congratulations! The payment was successful.':'恭喜您，支付成功!'):(language==='en'?'Your payment failed, please try again.':'支付失败！请重新支付')}}
+          </div>
+          <div class="sub-title">{{result==='success'?type==='recharge'?'':language==='en'?'We will dispatch your order soonest.':'我们将尽快安排为您发货!':''}}</div>
+          <div class="jump-dec">{{language==='en'?`Going to "${type==='recharge'?'My Cameras':'My Order'}" page in ${count} seconds.`:`……${count}秒后跳转至${type==='recharge'?'我的相机':'我的订单'}页面`}}</div>
         </div>
       </div>
     </div>
@@ -39,6 +41,7 @@ export default {
   computed: {
     ...mapState({
       token: state => state.user.token,
+      language: state => state.language.current,
       info: state => state.user.info
     })
   },

pc/src/page/pricedetail/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="pricedetail-layout">
     <div class="plate">
-      <div class="b-title">{{langPurchase.pricename}}</div>
-      <priceTable />
+      <template v-if="language!=='en'">
+        <p class="b-title">{{langPurchase.pricename}}</p>
+        <priceTable  style="margin-bottom:40px;"  />
+      </template>
+      <div class="b-title">{{langPurchase.pricename1}}</div>
+      <priceTable :type="'hw'" />
       <ul class="qa-con">
         <li>
           <p>{{langPurchase.directions}}</p>

pc/src/page/purchase/style.scss

@@ -55,6 +55,7 @@
     vertical-align: top;
     .pro-logo{
       margin-bottom: 8px;
+      max-width: 100%;
     }
     .price{
       margin-top: 20px;

pc/src/page/purchasezhijia/style.scss

@@ -389,6 +389,9 @@
     .layout{
       margin-left:3%;
     }
+    .pro-logo{
+      max-width: 100%;
+    }
   }
 
   .plate02{

pc/src/page/service/temp/clause.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="use-layout">
+  <div class="use-layout" :class="language">
     <lselect :options="navs" :selected="navActive" class="select" :class="{oy: navs.length > 15}" @change="handleChange" />
     <div class="use-con" ref="dcon" id="dcon">
-      <img class="img" v-for="(item,i) in current.size" :src="`${$cdn}images/clause/${current.id}/zh/${i+1}.jpg`" :key="i" :alt="i+1">
+      <img class="img" v-for="(item,i) in current.size" :src="`${$cdn}images/clause/${current.id}/${language==='en'?'en':'zh'}/${i+1}.jpg`" :key="i" :alt="i+1">
     </div>
   </div>
 </template>
@@ -90,9 +90,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$lw: 220px;
+$cw: 430px;
+$encw: 430px;
+
 .use-layout {
   position: relative;
-  $lw: 220px;
   max-width: 800px;
   margin: 50px auto 72px;
   overflow: hidden;
@@ -109,12 +112,13 @@ export default {
   }
   .img{
     margin-bottom: 20px;
-    width: 90%;
+    width: 100%;
     text-align: center;
   }
   .use-con{
     max-height: 100%;
     height: calc(100vh - 380px);
+    width: $cw;
     overflow-y: auto;
     text-align: center;
     .img{
@@ -142,4 +146,10 @@ export default {
     }
   }
 }
+.en{
+  max-width: 800px;
+  .use-con{
+    width: $encw;
+  }
+}
 </style>

pc/src/page/service/temp/config.js

@@ -108,127 +108,155 @@ const use = {
   pro: {
     detail: {
       id: 'eight',
-      size: 24
+      size: 23
     },
     cp: 'iuse',
     isbefore: false,
     data: [
       {
         cover: 1,
+        txtEn: 'Instructions',
         text: '阅读提示',
         hard: true
       },
       {
         cover: 2,
         text: '产品概述',
+        txtEn: 'Product Description',
         hard: true
       },
       {
         cover: 3,
         text: '使用四维看看 Pro',
+        txtEn: 'Use 4DKanKan Pro',
         hard: true
       },
       {
         cover: 3,
+        txtEn: 'Install and Connect',
         text: '安装和连接'
       },
       {
         cover: 4,
+        txtEn: 'Shooting mode',
         text: '拍摄方式'
       },
       {
         cover: 5,
+        txtEn: 'Shooting Plan',
         text: '拍摄规划'
       },
       {
         cover: 6,
+        txtEn: 'Save and Generate 3D Space',
         text: '保存并生成3D空间'
       },
       {
         cover: 7,
         text: 'App端编辑模型',
+        txtEn: 'Edit a Model on App',
         hard: true
       },
       {
         cover: 7,
+        txtEn: 'Enter the Edit page and fill in the basic information',
         text: '进入编辑页面'
       },
       {
         cover: 8,
+        txtEn: 'Set the first perspective to enter the model',
         text: '设置模型的初始化面'
       },
       {
         cover: 9,
+        txtEn: 'Set background music',
         text: '设置背景音乐'
       },
       {
         cover: 10,
+        txtEn: 'Grand Logo',
         text: '设置地面LOGO'
       },
       {
         cover: 11,
+        txtEn: 'Add a hotspot',
         text: '添加热点'
       },
       {
         cover: 12,
+        txtEn: 'Make a tour guide',
         text: '制作自动导览'
       },
       {
         cover: 13,
+        txtEn: 'Trim a model',
         text: '修整模型'
       },
       {
         cover: 14,
+        txtEn: 'Edit a Model on PC',
         text: 'PC端编辑模型',
         hard: true
       },
       {
         cover: 14,
+        txtEn: 'Log in your account',
         text: '登陆账号'
       },
       {
         cover: 15,
+        txtEn: 'Check the basic information of the model',
         text: '查阅模型的基础信息'
       },
       {
         cover: 16,
+        txtEn: 'Change scene information',
         text: '更改场景信息'
       },
       {
         cover: 17,
+        txtEn: 'Set the screen cover to enter the model',
         text: '设置模型的初始化面'
       },
       {
         cover: 18,
+        txtEn: 'Add a hotspot to the model',
         text: '添加热点'
       },
       {
         cover: 19,
+        txtEn: 'Make an auto guidance for viewing',
         text: '制作自动导览'
       },
       {
         cover: 20,
+        txtEn: 'Customize spot logo',
         text: '自定义地面LOGO'
       },
       {
         cover: 21,
+        txtEn: 'Set roaming possibility',
         text: '设置漫游可行'
       },
       {
         cover: 22,
+        txtEn: 'Trim a model',
         text: '修整模型'
       },
       {
         cover: 23,
         text: '浏览分享',
+        txtEn: 'Browse and Share',
         hard: true
       },
       {
         cover: 23,
+        txtEn: 'Compatible with multiple platforms and terminals',
         text: '兼容多平台、多终端'
       },
       {
-        cover: 24,
+        cover: 23,
+        txtEn: 'Browse Mode',
         text: '浏览模式'
       }
     ]
@@ -340,7 +368,7 @@ const qa = {
   pro: {
     detail: {
       id: 'eight',
-      size: 9
+      size: 11
     },
     cp: 'iqa',
     isbefore: false,
@@ -348,46 +376,67 @@ const qa = {
       {
         cover: 1,
         text: '与全景相机的区别',
+        txtEn: '4DKanKan vs panoramic camera',
         hard: true
       },
       {
         cover: 2,
         text: '与建模设备的区别',
+        txtEn: '4DKanKan vs 3D modeling camera',
         hard: true
       },
       {
         cover: 3,
         text: '精确度',
+        txtEn: 'Accuracy of the 4DKanKan Pro',
         hard: true
       },
       {
         cover: 4,
         text: 'VR眼镜使用',
+        txtEn: 'Using VR glasses',
         hard: true
       },
       {
         cover: 5,
         text: '关于账号',
+        txtEn: 'About account',
         hard: true
       },
       {
         cover: 6,
-        text: '热点漂移',
+        text: '兼容性',
+        txtEn: 'Compatibility',
         hard: true
       },
       {
         cover: 7,
-        text: '兼容性',
+        text: '分岔口拍摄',
+        txtEn: 'Split shooting paths',
         hard: true
       },
       {
         cover: 8,
-        text: '分岔口拍摄',
+        text: '场景补拍',
+        txtEn: 'Reshooting',
         hard: true
       },
       {
         cover: 9,
-        text: '场景补拍',
+        text: '关于曝光',
+        txtEn: 'About exposure',
+        hard: true
+      },
+      {
+        cover: 10,
+        text: '关于充电逻辑',
+        txtEn: 'Charging logic',
+        hard: true
+      },
+      {
+        cover: 11,
+        text: '其它',
+        txtEn: 'Others',
         hard: true
       }
     ]
@@ -492,26 +541,31 @@ const clause = {
       {
         cover: 1,
         text: '售后服务',
+        txtEn: 'After-sales Servic',
         hard: true
       },
       {
         cover: 2,
         text: '主机保修',
+        txtEn: 'Warranty for main unit',
         hard: true
       },
       {
         cover: 3,
         text: '付费维修',
+        txtEn: 'Paid repair service',
         hard: true
       },
       {
         cover: 4,
         text: '免责声明',
+        txtEn: 'Disclaimer',
         hard: true
       },
       {
         cover: 5,
         text: '联系方式',
+        txtEn: 'Contact info',
         hard: true
       }
     ]

pc/src/page/service/temp/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="temp-layout">
     <div class="oper-btn" v-if="$route.params.id === 'use'">
-      <a :href="`${$cdn}pdf/四维看看Pro说明书.pdf`" target="_blank">
+      <a :href="`${$cdn}pdf/${language==='en'?'4DKanKan Pro Product Manual':'四维看看说明书_1.0'}.pdf`" target="_blank">
         <img :src="`${$cdn}images/use-download.png`" alt="">
       </a>
     </div>
-    <component class="fix-layout" :style="{marginLeft:active.cp!=='iapp'?((split-218)+'px'):((split-145)+'px')}" :is="active.cp" :data='active'/>
+    <component class="fix-layout" :style="{marginLeft:getSplit()}" :is="active.cp" :data='active'/>
   </div>
 </template>
 
@@ -23,12 +23,36 @@ import data from './config'
 export default {
   computed: {
     ...mapState({
-      split: state => state.ui.navDivision
+      split: state => state.ui.navDivision,
+      language: state => state.language.current
     })
   },
   data () {
     return {active: ''}
   },
+  methods: {
+    getSplit () {
+      let ret = ''
+      switch (this.active.cp) {
+        case 'iapp':
+          ret = 145
+          break
+        case 'iclause':
+          ret = this.language === 'en' ? 219 : 219
+          break
+        case 'iuse':
+          ret = this.language === 'en' ? 359 : 219
+          break
+        case 'iqa':
+          ret = this.language === 'en' ? 268 : 219
+          break
+        default:
+          break
+      }
+
+      return this.split - ret + 'px'
+    }
+  },
   watch: {
     '$route.params': {
       immediate: true,
@@ -60,7 +84,7 @@ export default {
    @media screen and (max-width: 1600px) {
     .fix-layout{
       margin-right: auto!important;
-      max-width: 700px!important;
+      max-width: 900px!important;
     }
   }
 </style>

pc/src/page/service/temp/qa.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="use-layout">
+  <div class="use-layout" :class="language">
     <lselect :options="navs" :selected="navActive" class="select" :class="{oy: navs.length > 15}" @change="handleChange" />
     <div class="use-con" ref="dcon" id="dcon">
-      <img class="img" v-for="(item,i) in current.size" :src="`${$cdn}images/qa/${current.id}/zh/${i+1}.jpg`" :key="i" :alt="i+1">
+      <img class="img" v-for="(item,i) in current.size" :src="`${$cdn}images/qa/${current.id}/${language==='en'?'en':'zh'}/${i+1}.jpg`" :key="i" :alt="i+1">
     </div>
   </div>
 </template>
@@ -90,17 +90,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  $lw: 220px;
+  $cw: 430px;
+  $encw: 430px;
+
 .use-layout {
   position: relative;
-  $lw: 220px;
   max-width: 800px;
   margin: 50px auto 72px;
   overflow: hidden;
-  padding-left: $lw + 10px;
+  padding-left: $lw + 18px;
   padding-right: 10px;
   box-sizing: border-box;
+
   .select {
-    width: $lw;
+    min-width: $lw;
     position: absolute;
     top: 0;
     left: 0;
@@ -109,13 +113,14 @@ export default {
   }
   .img{
     margin-bottom: 20px;
-    width: 90%;
+    width: 100%;
     text-align: center;
   }
   .use-con{
     max-height: 100%;
     height: calc(100vh - 380px);
     overflow-y: auto;
+    width: $cw;
     text-align: center;
     .img{
       &:last-of-type{
@@ -142,4 +147,11 @@ export default {
     }
   }
 }
+.en{
+  max-width: 800px;
+  padding-left: $lw + 58px;
+  .use-con{
+    width: $encw;
+  }
+}
 </style>

pc/src/page/service/temp/use.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="use-layout">
+  <div class="use-layout" :class="language">
     <lselect :options="navs" :selected="navActive" class="select" :class="{oy: navs.length > 15}" @change="handleChange" />
     <div class="use-con" ref="dcon" id="dcon">
-      <img class="img" v-for="(item,i) in current.size" :src="`${$cdn}images/use/${current.id}/zh/${i+1}.jpg`" :key="i" :alt="i+1">
+      <img class="img" v-for="(item,i) in current.size" :src="`${$cdn}images/use/${current.id}/${language==='en'?'en':'zh'}/${i+1}.jpg`" :key="i" :alt="i+1">
     </div>
   </div>
 </template>
@@ -48,6 +48,7 @@ export default {
           active = item.alt
         }
       })
+
       this.navs.forEach(sub => {
         if (String(active) === String(sub.cover)) {
           nav = sub
@@ -90,9 +91,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  $lw: 220px;
+  $cw: 430px;
+  $encw: 430px;
 .use-layout {
   position: relative;
-  $lw: 220px;
   max-width: 800px;
   margin: 50px auto 72px;
   overflow: hidden;
@@ -100,7 +103,7 @@ export default {
   padding-right: 10px;
   box-sizing: border-box;
   .select {
-    width: $lw;
+    min-width: $lw;
     position: absolute;
     top: 0;
     left: 0;
@@ -110,13 +113,14 @@ export default {
   }
   .img{
     margin-bottom: 20px;
-    width: 90%;
+    width: 100%;
     text-align: center;
   }
   .use-con{
     max-height: 100%;
     height: calc(100vh - 380px);
     overflow-y: auto;
+    width: $cw;
     text-align: center;
     .img{
       &:last-of-type{
@@ -143,4 +147,11 @@ export default {
     }
   }
 }
+.en{
+  max-width: 900px;
+  padding-left: $lw + 158px;
+  .use-con{
+    width: $encw;
+  }
+}
 </style>

pc/src/store/language/cn/home.js

@@ -70,7 +70,7 @@ export default{
     }
   },
   items: [
-    {url: 'https://www.4dkankan.com/test4/showProPC.html?m=t-0Q99SHE',
+    {url: 'https://www.4dkankan.com/showProPC.html?m=t-0Q99SHE',
       image: baseUrl + 'images/phone_11.png',
       icon: baseUrl + 'images/phone_icon_11.png',
       text: '黑白咖啡' },
@@ -179,11 +179,14 @@ export default{
   services: {
     down: {
       txt: '3D相机控制APP',
-      sub: '使用四维看看Pro的过程中，需要下载相机控制APP。请在手机软件商店搜索“四维看看Pro”或使用手机扫码二维码安装。'
+      sub: '使用四维看看Pro的过程中，需要下载APP控制相机。请在手机软件商店搜索“四维看看Pro”或使用手机扫描二维码安装。'
     }
   },
   loginAside: {
-    cluse: '同意四维看看平台用户条款',
+    xieyi: '阅读至最底部，“确定”方可生效',
+    cancel: '取消',
+    comfirm: '确定',
+    cluse: '我已阅读并同意四维看看用户协议',
     login: '登录',
     submit: '提交',
     scansub: '打开四维看看app扫一扫登录',

pc/src/store/language/cn/manage.js

@@ -6,12 +6,13 @@ export default{
   main: {
     btnType: {
       buy: {
-        name: '立即扩容'
+        name: '升级套餐',
+        xufei: '立即续费'
       }
     },
     sn: 'S/N：',
     used: '已使用：',
-    space: '扩容容量：',
+    space: '容量套餐：',
     expire: '到期时间：'
 
   },
@@ -20,7 +21,7 @@ export default{
       information: '账号信息',
       scene: '我的场景',
       order: '我的订单',
-      device: '我的设备',
+      device: '我的相机',
       consumption: '消费记录',
       change: '修改密码',
       logout: '退出登录'
@@ -35,7 +36,7 @@ export default{
           name: '我的场景',
           to: {name: 'scene'}
         }, {
-          name: '我的设备',
+          name: '我的相机',
           to: {name: 'device'}
         }, {
           name: '我的订单',
@@ -152,7 +153,7 @@ export default{
     finish: '已完成',
     partShipped: '部分发货',
     hasCancal: '已取消',
-    edit: '修改（发货后7天内能修改）',
+    edit: '修改（发货后7天内可修改）',
     dontneed: '发票类型：不需要发票',
     type1: '不需要发票',
     type2: '增值税普票（电子发票）',
@@ -189,7 +190,7 @@ export default{
     unbind: '解绑',
     recharge: '充值',
     expire: '到期：',
-    expand: '扩容：',
+    expand: '套餐：',
     jijiang: '即将到期',
     rongliang: '容量已满',
     norecord: '暂无任何记录'

pc/src/store/language/cn/toast.js

@@ -38,8 +38,10 @@ export default{
   '37': '删除成功',
   '38': '删除失败',
   '39': '商品加入购物车成功',
-  '40': '请绑定用户账号后，进行充值扩容。',
+  '40': '请登录您的用户账号，再进行充值续费。',
   '41': '去登录',
+  '42': '暂不支持降级套餐，您可进行续费或升级套餐。',
+  '43': '请绑定用户账号后，进行充值扩容。',
 
   '4007': '用户名不存在',
   '4010': '绑定的相机不存在',

pc/src/store/language/en/eight.js

@@ -5,7 +5,7 @@ let baseUrl = vue.$cdn
 export default{
   introduce: {
     title: 'Professional, accurate, and efficient 3D reconstruction',
-    price: 'USD 1499',
+    price: 'USD 1799',
     dec: 'High-accuracy 3D space camera, with 12K HD resolution, supports 4× zoom and virtual strolling across 720° in the space.',
     btn: 'Buy it on Alibaba',
     subTitle: 'Bring Space to Life in Digital 3D',

pc/src/store/language/en/home.js

@@ -64,7 +64,7 @@ export default{
     sub: 'Exclusive 10 GB cloud capacity for 5 years for the early birds.'
   },
   items: [
-    {url: 'https://www.4dkankan.com/test4/showProPC.html?m=t-0Q99SHE',
+    {url: 'https://www.4dkankan.com/showProPC.html?m=t-0Q99SHE',
       image: baseUrl + 'images/phone_11.png',
       icon: baseUrl + 'images/phone_icon_11.png',
       text: 'Coffee Canteen' },
@@ -179,7 +179,10 @@ export default{
     }
   },
   loginAside: {
-    cluse: 'Agree to 4DKankan User Agreement',
+    xieyi: 'Read to the bottom and click "Confirm" to take effect. ',
+    cancel: 'Cancel',
+    comfirm: 'Confirm',
+    cluse: 'I have read 4DKanKan User Agreement.',
     login: 'Log in',
     submit: 'Submit',
     scansub: 'Scan the QR-Code to log in with the 4DKanKan App',

pc/src/store/language/en/manage.js

@@ -6,12 +6,13 @@ export default{
   main: {
     btnType: {
       buy: {
-        name: 'Expand Now'
+        name: 'Upgrade package',
+        xufei: 'Renew now'
       }
     },
     sn: 'S/N: ',
     used: 'Used: ',
-    space: 'Storage expanded: ',
+    space: 'Package capacity: ',
     expire: 'Expires on: '
   },
   information: {
@@ -19,7 +20,7 @@ export default{
       information: 'Account Information',
       scene: 'My Scene',
       order: 'My Order',
-      device: 'My Devices',
+      device: 'My Cameras',
       consumption: 'Billing Records',
       change: 'Change Password',
       logout: 'Log out'
@@ -34,7 +35,7 @@ export default{
           name: 'My Scene',
           to: {name: 'scene'}
         }, {
-          name: 'My Devices',
+          name: 'My Cameras',
           to: {name: 'device'}
         }, {
           name: 'My Order',
@@ -157,7 +158,7 @@ export default{
     edit: 'Edit (Only within 7 days after delivery)',
     dontneed: 'Invoice type: No invoice required',
     type1: 'No invoice required',
-    type2: 'VAT invoice (electronic invoice)',
+    type2: 'VAT invoice (E-mail)',
     type3: 'VAT special invoice',
     title: 'Invoice Title',
     code: 'Invoice tax No.',
@@ -191,7 +192,7 @@ export default{
     unbind: 'Unbind',
     recharge: 'Top up',
     expire: 'Expiry on: ',
-    expand: 'Expanded: ',
+    expand: 'Package: ',
     jijiang: 'About to Expire',
     rongliang: 'Storage Full',
     norecord: 'No Records'

pc/src/store/language/en/toast.js

@@ -38,8 +38,10 @@ export default{
   '37': 'Deleted successfully',
   '38': 'Delete failed',
   '39': 'The item was added to the shopping cart successfully',
-  '40': 'Please bind this camera to a user account before expanding the storage.',
+  '40': 'Please login to your user account and renew the package.',
   '41': 'Log in',
+  '42': 'Downgrading process is currently not supported. You can renew or upgrade the package.',
+  '43': 'Please bind this camera to a user account before expanding the storage.',
 
   '4007': 'User name doesn\'t exist.',
   '4010': 'The bound camera doesn\'t exist.',

pc/src/store/language/home_cn.js

@@ -30,6 +30,11 @@ export default {
           new: true,
           to: {name: 'purchase'}
         },
+        {
+          icon: 'icon-icon_cam_zengzhi',
+          name: '云容量<br/>&nbsp;',
+          to: {name: 'pricedetail'}
+        },
         // {
         //   icon: 'icon-icon_cam_lite',
         //   name: '四维看看 Lite<br/>&nbsp;',
@@ -44,11 +49,6 @@ export default {
           icon: 'icon-jingxiaoshang',
           name: '成为经销商<br/>&nbsp;',
           to: {name: 'agent'}
-        },
-        {
-          icon: 'icon-icon_cam_zengzhi',
-          name: '增值服务<br/>&nbsp;',
-          to: {name: 'pricedetail'}
         }
       ],
       'service_overview': [

pc/src/store/language/home_en.js

@@ -36,6 +36,11 @@ export default {
         //   to: {name: 'binocular'}
         // },
         {
+          icon: 'icon-icon_cam_zengzhi',
+          name: 'Cloud<br/>Capacity',
+          to: {name: 'pricedetail'}
+        },
+        {
           icon: 'icon-icon_cam_fitting',
           name: '4DKanKan Pro Tripot Set',
           to: {name: 'purchasezhijia'}
@@ -44,12 +49,8 @@ export default {
           icon: 'icon-jingxiaoshang',
           name: 'Be Our Distributor',
           to: {name: 'agent'}
-        },
-        {
-          icon: 'icon-icon_cam_zengzhi',
-          name: 'Value-added service',
-          to: {name: 'pricedetail'}
         }
+
       ],
       'service_overview': [
         {

pc/src/util/http.js

@@ -8,7 +8,7 @@ let vue = new Vue()
 const exceptUrls = ['/sso/user/logout', '/sso/user/sendUserInfo', '/user/order/queryOrderStatus', '/user/checkToken']
 axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'https://test.4dkankan.com/api' : '/api'
 
-// axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://192.168.0.207:8066/api' : '/api'
+// axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://192.168.0.207:8087/api' : '/api'
 // 请求超时时限
 axios.defaults.timeout = 1500000
 // 请求次数

pc/src/util/index.js

@@ -43,5 +43,19 @@ module.exports = {
       }
     }
     return false
+  },
+  formatDate: function (time) {
+    var date = new Date(time)
+    var year = date.getFullYear()
+    var month = date.getMonth() + 1
+    var day = date.getDate()
+    // var hour = date.getHours()
+    // var minute = date.getMinutes()
+    // var second = date.getSeconds()
+    //  return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
+    return year + '-' + (String(month).length > 1 ? month : '0' + month) + '-' +
+      (String(day).length > 1 ? day : '0' + day)
+      // + ' ' + (String(hour).length > 1 ? hour : '0' + hour) + ':' + (String(minute).length > 1 ? minute : '0' + minute) +
+      //  ':' + (String(second).length > 1 ? second : '0' + second)
   }
 }