移动云中心页面

assets/scss/mobileCommon.scss

@@ -305,7 +305,7 @@
 
 //地址选择弹出框
 .mint-popup-bottom {
-  top: 50%;
+  //top: 50%;
 }
 
 
@@ -342,3 +342,14 @@
   -moz-appearance:none; /* Firefox */
   -webkit-appearance:none; /* Safari 和 Chrome */
 }
+
+//查看大图
+#image-box .x-floating img, .image-box .x-floating img {
+  margin: auto auto;
+  max-width: 7.5rem !important;
+  max-height: 6rem !important;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

assets/scss/reset.scss

@@ -106,7 +106,7 @@ a {
   cursor: pointer;
   text-decoration: none;
   color: $text;
-  &:hover,&:active {
+  &:hover,&.active {
     text-decoration: none;
     outline: 0;
     color: $red;

components/mobile/cloudcenter/cloudCenter.vue

@@ -0,0 +1,561 @@
+<template>
+  <div class="info">
+    <div class="box-header"><img src="/images/all/uas-m.png" alt="">账号中心</div>
+    <div class="w-over-box">
+      <div class="basic-nav">
+        <span @click="activeTab = 0" :class="{active: activeTab === 0}">个人账号信息<em></em></span>
+        <span @click="activeTab = 1" :class="{active: activeTab === 1}" v-show="user.userspace">绑定企业信息<em></em></span>
+      </div>
+      <div class="basic-info" v-show="activeTab === 0">
+        <div class="basic-top">
+          <div class="line">
+            <div class="people"><i class="man"></i> <em v-text="user.user.vipName ? user.user.vipName : '用户名'"></em></div>
+            <div class="time"><span>上次登录时间： {{user.user.lastLoginTime | time}}</span></div>
+          </div>
+        </div>
+        <div class="basic-bottom">
+          <div class="item">
+            <div class="item-list">
+              <div class="pwd-level">账号安全等级</div>
+              <div class="pwd sm" v-show="accountLevel === 0"><em></em><em></em><em></em><span>弱</span></div>
+              <div class="pwd md" v-show="accountLevel === 1"><em></em><em></em><em></em><span>中</span></div>
+              <div class="pwd lar" v-show="accountLevel === 2"><em></em><em></em><em></em><span>强</span></div>
+            </div>
+          </div>
+          <div class="item items">
+            <div class="item-list">
+              <div class="bind-name">
+                <span>绑定手机</span>
+                <img v-show="user.user.mobileValidCode != 2" src="/images/all/question-m.png" alt="">
+              </div>
+              <div class="bind-tip">
+                <span>您绑定的手机：{{secretMobile}}。若已丢失或停用，请立即更换，避免账户被盗。</span>
+                <a href="/validation/phoneValidation" class="bind-btn" v-show="user.user.mobileValidCode === 2">修改</a>
+                <a href="/validation/phoneValidation" class="go-btn" v-show="user.user.mobileValidCode != 2">设置</a>
+              </div>
+            </div>
+          </div>
+          <div class="item items">
+            <div class="item-list">
+              <div class="bind-name">
+                <span>绑定邮箱</span>
+                <img v-show="user.user.emailValidCode != 2" src="/images/all/question-m.png" alt="">
+              </div>
+              <div class="bind-tip">
+                <span>{{secretEmail ? '您绑定的邮箱：' + secretEmail : '您还没有绑定邮箱哦!'}}</span>
+                <a href="/validation/emailValidation" class="bind-btn" v-show="user.user.emailValidCode === 2">修改</a>
+                <a href="/validation/emailValidation" class="go-btn" v-show="user.user.emailValidCode != 2">认证</a>
+              </div>
+            </div>
+          </div>
+          <div class="item items">
+            <div class="item-list">
+              <div class="bind-name">
+                <span>登录密码</span>
+                <img v-show="user.user.passwordLevel === 1" src="/images/all/question-m.png" alt="">
+              </div>
+              <div class="bind-tip">
+                <span class="tip-text">安全性高的密码可以使账号更安全，建议您定期更换密码，并且设置一个包含数字和字母，长度超过8位以上的密码。</span>
+                <a href="/reset/changePasswordChooseStyle" class="bind-btn" v-show="user.user.passwordLevel === 2 || user.user.passwordLevel === 3">修改</a>
+                <a href="/reset/changePasswordChooseStyle" class="go-btn" v-show="user.user.passwordLevel === 1">设置</a>
+              </div>
+            </div>
+          </div>
+          <div class="item items">
+            <div class="item-list">
+              <div class="bind-name">
+                <span>密保问题</span>
+                <img v-show="!user.user.hasQuestion" src="/images/all/question-m.png" alt="">
+              </div>
+              <div class="bind-tip">
+                <span class="tip-txt">是您找回登录密码的方法之一。建议您设置一个容易记住，且最不容易被他人获取的问题及答案。</span>
+                <a href="/encrypted-setting/EncryptedSetting" class="bind-btn" v-show="user.user.hasQuestion">修改</a>
+                <a href="/encrypted-setting/EncryptedSetting" class="go-btn" v-show="!user.user.hasQuestion">设置</a>
+              </div>
+            </div>
+          </div>
+          <div class="item items">
+            <div class="item-list">
+              <div class="bind-name">
+                <span>实名认证</span>
+                <img v-show="user.user.identityValidCode != 2" src="/images/all/question-m.png" alt="">
+              </div>
+              <div class="bind-tip">
+                <span>实名认证后，可通过实名信息找回支付密码、修改手机号等，提高账户安全性。</span>
+                <a href="/certification/realNameCertification" class="bind-btn" v-show="user.user.identityValidCode === 2">修改</a>
+                <a href="/certification/realNameCertification" class="go-btn" v-show="user.user.identityValidCode === 0 || user.user.identityValidCode === 3">设置</a>
+                <a class="wait-btn" v-show="user.user.identityValidCode === 1">认证中</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="basic-info" v-show="activeTab === 1" v-if="user.userspace">
+        <div class="basic-top">
+          <div class="line">
+            <div class="people">
+              <i class="enterprise-img" style="margin-right: .1rem;"></i>
+              <em v-text="user.userspace.spaceName ? user.userspace.spaceName : '企业名称'"></em>
+              <b v-if='user.userspace.validCode === 1 && user.newUserSpace' class="angle">——></b>
+              <em class="new" v-if='user.userspace.validCode === 1 && user.newUserSpace' v-text="user.newUserSpace.spaceName ?  user.newUserSpace.spaceName : '企业名称'"></em>
+            </div>
+          </div>
+        </div>
+        <div class="enterprise-bottom">
+          <div class="enterprise">
+            <div class="bind-info">
+              <span>管理员</span>
+              <div>{{user.userspace.admin.vipName || '-'}}</div>
+            </div>
+            <div class="bind-detail"><a href="/change/changeManager">修改</a></div>
+          </div>
+          <div class="enterprise">
+            <div class="bind-info">
+              <span>企业认证</span>
+              <div v-text="user.userspace.validCode === 0 ? '未认证' : user.userspace.validCode === 1 ? '待认证' : user.userspace.validCode === 2 ? '已认证' : user.userspace.validCode === 3 ? '未通过' : ''"></div>
+            </div>
+            <div class="bind-detail">
+              <a v-show="user.userspace.validCode === 0" href="/certification/enterpriseCertification">申请认证</a>
+              <a v-show="user.userspace.validCode === 3" href="/certification/enterpriseCertification">重新认证</a>
+            </div>
+          </div>
+          <div class="enterprise">
+            <div class="bind-info">
+              <span>营业执照号</span>
+              <div>{{user.userspace.businessCode || '-'}}</div>
+              <div class="new" v-if='user.userspace.validCode === 1 && user.newUserSpace'><b class="angle">——></b>{{user.newUserSpace.businessCode || '-'}}</div>
+            </div>
+          </div>
+          <div class="enterprise">
+            <div class="bind-info">
+              <span>营业执照扫描件</span>
+              <div v-show="user.userspace.businessCodeImage">附件: 营业执照扫描.jpg</div>
+              <div v-show="!user.userspace.businessCodeImage">未上传</div>
+              <!--<b v-if='user.userspace.validCode === 1 && user.newUserSpace' class="angle" style="float: left;">——></b>-->
+              <!--<div class="new" v-if='user.userspace.validCode === 1 && user.newUserSpace'-->
+                   <!--v-show="user.newUserSpace.businessCodeImage">-->
+                <!--附件: 营业执照扫描.jpg-->
+              <!--</div>-->
+            </div>
+            <div class="bind-detail"
+                 v-show="user.userspace.businessCodeImage">
+              <i @click="showImg(user.userspace.businessCodeImage)">查看</i>
+            </div>
+          </div>
+          <div class="enterprise">
+            <div class="bind-info">
+              <span>法定代表人</span>
+              <div>{{user.userspace.corporation || '-'}}</div>
+              <!--<div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="new"><b class="angle">——></b>{{user.newUserSpace.corporation || '-'}}</div>-->
+            </div>
+          </div>
+          <div class="enterprise">
+            <div class="bind-info">
+              <span>注册地址</span>
+              <div>{{user.userspace.regAddress || '-'}}</div>
+              <!--<div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="new"><b class="angle">——></b>{{user.newUserSpace.regAddress || '-'}}</div>-->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--查看大图-->
+    <div id="image-box" v-if="isShow">
+      <div class="x-floating-wrap"></div>
+      <div class="x-floating">
+        <div id="item-content">
+          <div class="x-close-wrap" @click="isShow = false"><a href="javascript:void(0);">&times;</a></div>
+          <div class="img"><img :src="imgUrl"/></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    layout: 'cloud',
+    middleware: 'authenticated',
+    data () {
+      return {
+        activeTab: 0,
+        secretMobile: '',
+        secretEmail: '',
+        isShow: false,
+        imgUrl: '',
+        accountLevel: ''
+      }
+    },
+    computed: {
+      user () {
+        let mobile = this.$store.state.option.userInfo.data.content.user.mobile
+        if (mobile) {
+          var reg = /^(\d{3})\d{6}(\d{2})$/
+          this.secretMobile = mobile.replace(reg, '$1******$2')
+        }
+        let email = this.$store.state.option.userInfo.data.content.user.email
+        if (email) {
+          let getEmailIndex = email.indexOf('@')
+          if (getEmailIndex > 3) {
+            let len = email.substring(3, getEmailIndex)
+            this.secretEmail = email.replace(len, '*')
+          } else {
+            this.getEmailArr = email.split('')
+            this.getEmailSplit = this.getEmailArr.splice(getEmailIndex, 0, '*')
+            this.secretEmail = this.getEmailArr.join('')
+          }
+        }
+        return this.$store.state.option.userInfo.data.content
+      }
+    },
+    filters: {
+      time: function (time) {
+        if (typeof time === 'number') {
+          if (!time) {
+            return '无'
+          } else {
+            let d = new Date(time)
+            let year = d.getFullYear()
+            let month = d.getMonth() + 1
+            let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+            let hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours()
+            let minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes()
+            let seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds()
+            return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
+          }
+        }
+      }
+    },
+    mounted () {
+//      获取账号等级
+      this.$nextTick(() => {
+        this.showLevel()
+      })
+      // 省略显示
+      let ele = document.getElementsByClassName('tip-text')[0]
+      let txt = ele.innerHTML
+      if (txt.length > 30) {
+        ele.innerText = txt.slice(0, 35) + ' ...'
+      } else {
+        ele.innerText = txt
+      }
+      let ele1 = document.getElementsByClassName('tip-txt')[0]
+      let txt1 = ele.innerHTML
+      if (txt1.length > 30) {
+        ele1.innerText = txt1.slice(0, 35) + ' ...'
+      } else {
+        ele1.innerText = txt1
+      }
+    },
+    methods: {
+      showImg (imgUrl) {
+        this.imgUrl = imgUrl
+        this.isShow = true
+      },
+      showLevel () {
+        var totle = !!(this.user.user.identityValidCode === 2) + !!(this.user.user.hasQuestion) + !!(this.user.user.mobileValidCode === 2) + !!(this.user.user.passwordLevel >= 2) + !!(this.user.user.emailValidCode === 2)
+        if (totle === 0 || totle === 1 || totle === 2) {
+          this.accountLevel = 0
+        } else if (totle === 3 || totle === 4) {
+          this.accountLevel = 1
+        } else {
+          this.accountLevel = 2
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+  .info {
+    margin: 0 auto;
+    padding: 0;
+    padding-bottom: 1rem;
+    width: 100%;
+    text-align: center;
+    background: #eaeaea;
+    .box-header {
+      width: 100%;
+      height: 1.2rem;
+      line-height: 1.2rem;
+      font-size: .4rem;
+      font-weight: bold;
+      color: #3c3c3c;
+      text-align: center;
+      img{
+        margin-right: .2rem;
+        margin-top: -.08rem;
+        width: 1.2rem;
+        height: .4rem;
+      }
+    }
+    .w-over-box {
+      width: 100%;
+      background: #fff;
+      .basic-nav{
+        width: 100%;
+        height: 1.3rem;
+        line-height: 1.3rem;
+        span{
+          display: inline-block;
+          font-size: .34rem;
+          color: #a0a0a0;
+          width: 50%;
+          text-align: center;
+          &.active,&:hover{
+            color: #000;
+            background: #f5f5f5;
+          }
+        }
+      }
+    }
+    .w-over-box .basic-info i.man{
+      display:inline-block;
+      position:relative;
+      top: 0.06rem;
+      width: .4rem;
+      height: .4rem;
+      background: url('/img/over_account/man.png') no-repeat;
+    }
+    .w-over-box .basic-info i.enterprise-img{
+      display:inline-block;
+      position:relative;
+      top: 0.05rem;
+      width: .4rem;
+      height: .4rem;
+      background: url('/img/over_account/enter.png') no-repeat;
+    }
+    .w-over-box .basic-info{
+      width: 100%;
+      background: #fff;
+      b.angle{
+        margin: 0 .1rem;
+        font-weight: normal;
+        color: #000;
+      }
+      .new {
+        color: #2ab300 !important ;
+      }
+      .basic-top{
+        padding: 0 .3rem;
+        width: 100%;
+        height: 1.25rem;
+        line-height: 1.25rem;
+        div.line{
+          overflow: hidden;
+          border-bottom: 2px solid #e5e5e5;
+          div.people{
+            float: left;
+            margin-right: 30px;
+            em{
+              font-style: normal;
+              font-size: .32rem;
+              color: #000;
+            }
+          }
+          div.time{
+            float: right;
+            span{
+              font-size: .24rem;
+              color: #a0a0a0;
+            }
+          }
+        }
+        em.new{
+          color: #2ab300;
+        }
+      }
+      .basic-bottom{
+        width: 100%;
+        padding: .38rem 0;
+        .item{
+          height: 2.3rem;
+          overflow: hidden;
+          &:nth-child(1){
+            margin-bottom: .85rem;
+            height: auto;
+            line-height: inherit;
+          }
+          .item-list{
+            padding: 0 .3rem;
+            width: 100%;
+            overflow: hidden;
+            .pwd-level{
+              float: left;
+              width: 2rem;
+              height: .44rem;
+              line-height: .44rem;
+              text-align: center;
+              font-size: .26rem;
+              color: #797979;
+              background: #eee;
+            }
+            .pwd{
+              float: left;
+              em{
+                display: inline-block;
+                margin: 0 0.08rem 0.02rem 0;
+                width: .48rem;
+                height: .1rem;
+                &:first-child{
+                  margin-left: .3rem;
+                }
+              }
+              span{
+                margin-left: .2rem;
+                font-weight: bold;
+                font-size: .26rem;
+              }
+            }
+            .pwd.sm{
+              color: #8c8c8c;
+              em {
+                background: #bfbfbf;
+                &:first-child{
+                  background: #ff4e00;
+                }
+              }
+              span{
+                color: #ff4e00;
+              }
+            }
+            .pwd.md{
+              color: #8c8c8c;
+              em {
+                background: #22ac38;
+                &:nth-child(3){
+                  background: #bfbfbf;
+                }
+              }
+              span{
+                color: #22ac38;
+              }
+            }
+            .pwd.lar{
+              color: #8c8c8c;
+              em {
+                background: #00a0e9;
+              }
+              span{
+                color: #00a0e9;
+              }
+            }
+          }
+        }
+        .items{
+          &:hover{
+            background: #eaf4f9;
+          }
+          .bind-tip {
+            padding-bottom: .4rem;
+            border-bottom: 1px solid #ddd;
+          }
+          .bind-name{
+            margin: 0 0 .45rem;
+            text-align: left;
+            span{
+              font-size: .3rem;
+              color: #000;
+            }
+            img{
+              margin-left: .3rem;
+              margin-top: -0.06rem;
+              width: .35rem;
+              height: .3rem;
+            }
+          }
+          .bind-tip{
+            overflow: hidden;
+            span {
+              word-break: break-all;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              float: left;
+              display: inline-block;
+              width: 5.5rem;
+              line-height: .46rem;
+              text-align: left;
+              font-size: .26rem;
+              color: #b4b4b4;
+            }
+            span.tip-text {
+              overflow : hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+            }
+            a{
+              float: right;
+              font-size: .26rem;
+              color: #a0a0a0;
+            }
+            a.go-btn{
+              color: #0076ad;
+            }
+            a.wait-btn{
+              color: #9f9f9f;
+            }
+          }
+          &:nth-child(6) {
+            .bind-tip {
+              border-bottom: none;
+            }
+          }
+          &:nth-child(3) {
+            .bind-tip {
+              padding-bottom: .8rem;
+            }
+          }
+        }
+      }
+      /* 管理员*/
+      .enterprise-bottom{
+        padding: 0 .3rem;
+        width: 100%;
+        .enterprise{
+          padding: .35rem 0 .3rem 0;
+          height: 1.75rem;
+          overflow: hidden;
+          border-bottom: 1px solid #ddd;
+          &:nth-child(6){
+            border-bottom: none;
+          }
+          .bind-info{
+            float: left;
+            text-align: left;
+            span{
+              font-size: .26rem;
+              color: #000;
+            }
+            div{
+              margin-top: .3rem;
+              width: 5rem;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              text-align: left;
+              font-size: .26rem;
+              color: #b4b4b4;
+            }
+          }
+          .bind-detail{
+            float: right;
+            margin-top: .3rem;
+            a{
+              font-size: .26rem;
+              color: #0076ad;
+            }
+            i{
+              font-size: .26rem;
+              font-style: normal;
+              color: #0076ad;
+            }
+          }
+        }
+        }
+      }
+    }
+</style>

components/mobile/enterpriseCertification/addressChoose.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="address">
+    <div class="header">
+      <i class="fa fa-angle-left"></i>
+      <span>填写企业注册地址</span>
+      <a href="">完成</a>
+    </div>
+    <template>
+      <mt-picker :slots="addressSlots" class="picker" :visible-item-count="5" ></mt-picker >
+      <mt-picker :slots="streetSlots" ref="picker" class="picker" :visible-item-count="5" ></mt-picker >
+      上门服务地址:{{ addressProvince }} {{ addressCity }}{{allCityData}}
+    </template>
+  </div>
+</template>
+<script>
+  // import s from '/data/city.json'
+  export default {
+    name: 'choose-address',
+    data () {
+      return {
+        addressSlots: [
+          {
+            flex: 1,
+            defaultIndex: 1,
+            // values: Object.keys(this.allCityData),
+            className: 'slot1',
+            textAlign: 'center'
+          }, {
+            divider: true,
+            content: '-',
+            className: 'slot2'
+          }, {
+            flex: 1,
+            values: [],
+            className: 'slot3',
+            textAlign: 'center'
+          }, {
+            divider: true,
+            content: '-',
+            className: 'slot4'
+          }, {
+            flex: 1,
+            values: [],
+            className: 'slot5',
+            textAlign: 'center'
+          }
+        ],
+        streetSlots: [
+          {
+            flex: 1,
+            values: [],
+            className: 'slot1',
+            textAlign: 'center'
+          }
+        ],
+        allCityData: {},
+        addressProvince: '省',
+        addressCity: '市',
+        addressXian: '区',
+        addressStreet: '街道'
+      }
+    },
+    mounted () {
+      // 获取城市地址
+      this.$http.get('/data/city.json').then(response => {
+        this.allCityData = response.data
+      })
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.addressSlots[0].defaultIndex = 0
+        }, 100)
+      })
+    },
+    methods: {
+      // onAddressChange (picker, values) {
+      //   // let sheng = Object.keys(s)
+      //   let shi = Object.keys(this.allCityData[values[0]])
+      //   let index = shi.indexOf(values[1])
+      //   let xian = this.allCityData[values[0]][shi[index]]
+      //   this.xianObj = xian
+      //   picker.setSlotValues(1, shi)
+      //   this.addressProvince = values[0]
+      //   this.addressCity = values[1]
+      //   this.addressXian = values[2]
+      //   picker.setSlotValues(2, Object.keys(xian))
+      // },
+      // onStreetChange (picker, values) {
+      //   this.addressStreet = values[0]
+      // }
+    },
+    watch: {
+      // 'addressXian': {
+      //   handler (val, oval) {
+      //     let street = this.xianObj[this.addressXian]
+      //     this.streetSlots[0].values = street
+      //   }
+      // }
+    }
+  }
+</script>
+<style lang="scss">
+  .address{
+    width: 100%;
+    background: #eaeaea;
+    .header{
+      margin: 0 auto;
+      padding: 0 .2rem;
+      width: 100%;
+      height: .9rem;
+      line-height: .9rem;
+      text-align: center;
+      background: #fff;
+      overflow: hidden;
+      i{
+        padding-top: .25rem;
+        float: left;
+        color: #000;
+        font-size: .38rem;
+      }
+      span{
+        font-size: .28rem;
+        color: #787878;
+      }
+      a{
+        float: right;
+        font-size: .3rem;
+        color: #c7c7c7;
+      }
+    }
+  }
+</style>

components/mobile/enterpriseCertification/index.js

@@ -1,4 +1,5 @@
 import stepOne from './stepOne.vue'
 import stepLast from './stepLast.vue'
+import addressChoose from './addressChoose.vue'
 
-export {stepOne, stepLast}
+export {stepOne, stepLast, addressChoose}

components/mobile/enterpriseCertification/stepOne.vue

@@ -56,15 +56,21 @@
     </div>
     <div>
       <mt-popup v-model="popupVisible" position="bottom" class="mint-popup">
-        <mt-picker :slots="dateSlots" @change="onDateChange" :visible-item-count="5" :show-toolbar="false"></mt-picker>
+        <template>
+          <address-choose/>
+        </template>
       </mt-popup>
     </div>
   </div>
 </template>
 
 <script>
+  import addressChoose from '~components/mobile/enterpriseCertification/addressChoose.vue'
   export default {
     name: 'step-one',
+    components: {
+      addressChoose
+    },
     data () {
       return {
         uploadFileChecked: false,
@@ -82,56 +88,27 @@
           businessCodeImage: '',
           corporation: '',
           regAddress: ''
-        },
-        allCityData: {},
-        cityData: {
-          province: [],
-          city: [],
-          district: []
-        },
-        address: {
-          regProvince: '',
-          regCity: '',
-          regDistrict: '',
-          regStreet: ''
-        },
-        dateSlots: [
-          {
-            flex: 1,
-            values: ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06'],
-            className: 'slot1',
-            textAlign: 'right'
-          }, {
-            divider: true,
-            content: '-',
-            className: 'slot2'
-          }, {
-            flex: 1,
-            values: ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06'],
-            className: 'slot3',
-            textAlign: 'left'
-          }
-        ]
-      }
-    },
-    mounted () {
-      // 获取城市地址
-      this.$http.get('/data/city.json').then(response => {
-        this.allCityData = response.data
-        for (let province in response.data) {
-          this.cityData.province = response.data[province]
-          console.log('省', this.cityData.province)
-          for (let city in this.cityData.province) {
-            this.cityData.city = this.cityData.province[city]
-            console.log('市', this.cityData.city)
-            for (let street in this.cityData.city) {
-              this.cityData.district = this.cityData.city[street]
-              console.log('区', this.cityData.district)
-            }
-          }
         }
-      })
+      }
     },
+    // mounted () {
+    //   // 获取城市地址
+    //   this.$http.get('/data/city.json').then(response => {
+    //     this.allCityData = response.data
+    //     for (let province in response.data) {
+    //       this.cityData.province = response.data[province]
+    //       console.log('省', this.cityData.province)
+    //       for (let city in this.cityData.province) {
+    //         this.cityData.city = this.cityData.province[city]
+    //         console.log('市', this.cityData.city)
+    //         for (let street in this.cityData.city) {
+    //           this.cityData.district = this.cityData.city[street]
+    //           console.log('区', this.cityData.district)
+    //         }
+    //       }
+    //     }
+    //   })
+    // },
     methods: {
       onDateChange (picker, values) {
         if (values[0] > values[1]) {

layouts/mobileCloud.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="mobile">
+    <nuxt/>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'mobile',
+    head () {
+      return {
+        meta: [
+          { name: 'apple-mobile-web-app-capable', content: 'yes' },
+          { name: 'MobileOptimized', content: '320' },
+          { name: 'HandheldFriendly', content: 'true' },
+          { name: 'viewport', content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' },
+          { 'http-equiv': 'Cache-Control', content: 'no-siteapp' },
+          { name: 'format-detection', content: 'telephone=no, email=no' }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" type="text/scss">
+  @import "~assets/scss/mobileCommon";
+  .mobile{
+    padding: 0;
+  }
+</style>

pages/cloudcenter/index.vue

@@ -1,163 +1,180 @@
 <template>
-  <div class="info">
-    <div class="w-over-box">
-      <div class="container">
-        <div class="basic-nav">
-          <span @click="activeTab = 0" :class="{active: activeTab === 0}">个人账号信息<em></em></span>
-          <span @click="activeTab = 1" :class="{active: activeTab === 1}" v-show="user.userspace">绑定企业信息<em></em></span></div>
-        <div class="basic-info" v-show="activeTab === 0">
-          <div class="basic-top">
-            <div class="line">
-              <div class="people"><i class="man"></i><em v-text="user.user.vipName ? user.user.vipName : '用户名'"></em></div>
-              <div class="time"><span>上次登录时间： {{user.user.lastLoginTime | time}}</span></div>
-            </div>
-          </div>
-          <div class="basic-bottom">
-            <div class="item">
-              <div class="item-list">
-                <div class="pwd-level">账号安全等级</div>
-                <div class="pwd sm" v-show="accountLevel === 0"><em></em><em></em><em></em><span>弱</span></div>
-                <div class="pwd md" v-show="accountLevel === 1"><em></em><em></em><em></em><span>中</span></div>
-                <div class="pwd lar" v-show="accountLevel === 2"><em></em><em></em><em></em><span>强</span></div>
+  <div>
+    <template v-if="isMobile">
+      <cloud-center/>
+    </template>
+    <template v-else>
+    <div class="info">
+      <div class="w-over-box">
+        <div class="container">
+          <div class="basic-nav">
+            <span @click="activeTab = 0" :class="{active: activeTab === 0}">个人账号信息<em></em></span>
+            <span @click="activeTab = 1" :class="{active: activeTab === 1}" v-show="user.userspace">绑定企业信息<em></em></span></div>
+          <div class="basic-info" v-show="activeTab === 0">
+            <div class="basic-top">
+              <div class="line">
+                <div class="people"><i class="man"></i><em v-text="user.user.vipName ? user.user.vipName : '用户名'"></em></div>
+                <div class="time"><span>上次登录时间： {{user.user.lastLoginTime | time}}</span></div>
               </div>
             </div>
-            <div class="item items">
-              <div class="item-list">
-                <div class="bind-name">
-                  <img v-show="user.user.mobileValidCode === 2" src="/images/all/right.png" alt="">
-                  <img v-show="user.user.mobileValidCode != 2" src="/images/all/questions.png" alt="">
-                  <span>绑定手机</span>
+            <div class="basic-bottom">
+              <div class="item">
+                <div class="item-list">
+                  <div class="pwd-level">账号安全等级</div>
+                  <div class="pwd sm" v-show="accountLevel === 0"><em></em><em></em><em></em><span>弱</span></div>
+                  <div class="pwd md" v-show="accountLevel === 1"><em></em><em></em><em></em><span>中</span></div>
+                  <div class="pwd lar" v-show="accountLevel === 2"><em></em><em></em><em></em><span>强</span></div>
                 </div>
-                <div class="bind-tip">您绑定的手机：{{secretMobile}}。若已丢失或停用，请立即更换，避免账户被盗。</div>
-                <a href="/validation/phoneValidation" class="bind-btn" v-show="user.user.mobileValidCode === 2">修改</a>
-                <a href="/validation/phoneValidation" class="go-btn" v-show="user.user.mobileValidCode != 2">设置</a>
               </div>
-            </div>
-            <div class="item items">
-              <div class="item-list">
-                <div class="bind-name">
-                  <img v-show="user.user.emailValidCode === 2" src="/images/all/right.png" alt="">
-                  <img v-show="user.user.emailValidCode != 2" src="/images/all/questions.png" alt="">
-                  <span>绑定邮箱</span>
+              <div class="item items">
+                <div class="item-list">
+                  <div class="bind-name">
+                    <img v-show="user.user.mobileValidCode === 2" src="/images/all/right.png" alt="">
+                    <img v-show="user.user.mobileValidCode != 2" src="/images/all/questions.png" alt="">
+                    <span>绑定手机</span>
+                  </div>
+                  <div class="bind-tip">您绑定的手机：{{secretMobile}}。若已丢失或停用，请立即更换，避免账户被盗。</div>
+                  <a href="/validation/phoneValidation" class="bind-btn" v-show="user.user.mobileValidCode === 2">修改</a>
+                  <a href="/validation/phoneValidation" class="go-btn" v-show="user.user.mobileValidCode != 2">设置</a>
                 </div>
-                <div class="bind-tip">{{secretEmail ? secretEmail : '您还没有绑定邮箱哦!'}}</div>
-                <a href="/validation/emailValidation" class="bind-btn" v-show="user.user.emailValidCode === 2">修改</a>
-                <a href="/validation/emailValidation" class="go-btn" v-show="user.user.emailValidCode != 2">认证</a>
               </div>
-            </div>
-            <div class="item items">
-              <div class="item-list">
-                <div class="bind-name">
-                  <img v-show="user.user.passwordLevel >= 2" src="/images/all/right.png" alt="">
-                  <img v-show="user.user.passwordLevel === 1" src="/images/all/questions.png" alt="">
-                  <span>登录密码</span>
+              <div class="item items">
+                <div class="item-list">
+                  <div class="bind-name">
+                    <img v-show="user.user.emailValidCode === 2" src="/images/all/right.png" alt="">
+                    <img v-show="user.user.emailValidCode != 2" src="/images/all/questions.png" alt="">
+                    <span>绑定邮箱</span>
+                  </div>
+                  <div class="bind-tip">{{secretEmail ? secretEmail : '您还没有绑定邮箱哦!'}}</div>
+                  <a href="/validation/emailValidation" class="bind-btn" v-show="user.user.emailValidCode === 2">修改</a>
+                  <a href="/validation/emailValidation" class="go-btn" v-show="user.user.emailValidCode != 2">认证</a>
                 </div>
-                <div class="bind-tip">安全性高的密码可以使账号更安全，建议您定期更换密码，并且设置一个包含数字和字母，长度超过8位以上的密码。</div>
-                <a href="/reset/changePasswordChooseStyle" class="bind-btn" v-show="user.user.passwordLevel === 2 || user.user.passwordLevel === 3">修改</a>
-                <a href="/reset/changePasswordChooseStyle" class="go-btn" v-show="user.user.passwordLevel === 1">设置</a>
               </div>
-            </div>
-            <div class="item items">
-              <div class="item-list">
-                <div class="bind-name">
-                  <img v-show="user.user.hasQuestion" src="/images/all/right.png" alt="">
-                  <img v-show="!user.user.hasQuestion" src="/images/all/questions.png" alt="">
-                  <span>密保问题</span>
+              <div class="item items">
+                <div class="item-list">
+                  <div class="bind-name">
+                    <img v-show="user.user.passwordLevel >= 2" src="/images/all/right.png" alt="">
+                    <img v-show="user.user.passwordLevel === 1" src="/images/all/questions.png" alt="">
+                    <span>登录密码</span>
+                  </div>
+                  <div class="bind-tip">安全性高的密码可以使账号更安全，建议您定期更换密码，并且设置一个包含数字和字母，长度超过8位以上的密码。</div>
+                  <a href="/reset/changePasswordChooseStyle" class="bind-btn" v-show="user.user.passwordLevel === 2 || user.user.passwordLevel === 3">修改</a>
+                  <a href="/reset/changePasswordChooseStyle" class="go-btn" v-show="user.user.passwordLevel === 1">设置</a>
                 </div>
-                <div class="bind-tip">是您找回登录密码的方法之一。建议您设置一个容易记住，且最不容易被他人获取的问题及答案。</div>
-                <a href="/encrypted-setting/EncryptedSetting" class="bind-btn" v-show="user.user.hasQuestion">修改</a>
-                <a href="/encrypted-setting/EncryptedSetting" class="go-btn" v-show="!user.user.hasQuestion">设置</a>
               </div>
-            </div>
-            <div class="item items">
-              <div class="item-list">
-                <div class="bind-name">
-                  <img v-show="user.user.identityValidCode === 2" src="/images/all/right.png" alt="">
-                  <img v-show="user.user.identityValidCode != 2" src="/images/all/questions.png" alt="">
-                  <span>实名认证</span>
+              <div class="item items">
+                <div class="item-list">
+                  <div class="bind-name">
+                    <img v-show="user.user.hasQuestion" src="/images/all/right.png" alt="">
+                    <img v-show="!user.user.hasQuestion" src="/images/all/questions.png" alt="">
+                    <span>密保问题</span>
+                  </div>
+                  <div class="bind-tip">是您找回登录密码的方法之一。建议您设置一个容易记住，且最不容易被他人获取的问题及答案。</div>
+                  <a href="/encrypted-setting/EncryptedSetting" class="bind-btn" v-show="user.user.hasQuestion">修改</a>
+                  <a href="/encrypted-setting/EncryptedSetting" class="go-btn" v-show="!user.user.hasQuestion">设置</a>
                 </div>
-                <div class="bind-tip">实名认证后，可通过实名信息找回支付密码、修改手机号等，提高账户安全性。</div>
-                <a href="/certification/realNameCertification" class="bind-btn" v-show="user.user.identityValidCode === 2">修改</a>
-                <a href="/certification/realNameCertification" class="go-btn" v-show="user.user.identityValidCode === 0 || user.user.identityValidCode === 3">设置</a>
-                <span class="wait-btn" v-show="user.user.identityValidCode === 1">认证中</span>
               </div>
-            </div>
-          </div>
-        </div>
-        <div class="basic-info" v-show="activeTab === 1" v-if="user.userspace">
-          <div class="basic-top">
-            <div class="line">
-              <div class="people"><i class="enterprise-img"></i>
-                <em v-text="user.userspace.spaceName ? user.userspace.spaceName : '企业名称'"></em>
-                <b v-if='user.userspace.validCode === 1 && user.newUserSpace' class="angle">——></b>
-                <em class="new" v-if='user.userspace.validCode === 1 && user.newUserSpace' v-text="user.newUserSpace.spaceName ?  user.newUserSpace.spaceName : '企业名称'"></em>
+              <div class="item items">
+                <div class="item-list">
+                  <div class="bind-name">
+                    <img v-show="user.user.identityValidCode === 2" src="/images/all/right.png" alt="">
+                    <img v-show="user.user.identityValidCode != 2" src="/images/all/questions.png" alt="">
+                    <span>实名认证</span>
+                  </div>
+                  <div class="bind-tip">实名认证后，可通过实名信息找回支付密码、修改手机号等，提高账户安全性。</div>
+                  <a href="/certification/realNameCertification" class="bind-btn" v-show="user.user.identityValidCode === 2">修改</a>
+                  <a href="/certification/realNameCertification" class="go-btn" v-show="user.user.identityValidCode === 0 || user.user.identityValidCode === 3">设置</a>
+                  <span class="wait-btn" v-show="user.user.identityValidCode === 1">认证中</span>
+                </div>
               </div>
             </div>
           </div>
-          <div class="enterprise-bottom">
-            <div class="enterprise">
-              <div class="bind-info">管理员</div>
-              <div class="bind-detail">{{user.userspace.admin.vipName || '-'}}<a href="/change/changeManager">修改</a></div>
-            </div>
-            <div class="enterprise">
-              <div class="bind-info">企业认证</div>
-              <div class="bind-detail">
-                <em v-text="user.userspace.validCode === 0 ? '未认证' : user.userspace.validCode === 1 ? '待认证' : user.userspace.validCode === 2 ? '已认证' : user.userspace.validCode === 3 ? '未通过' : ''"></em>
-                <a v-show="user.userspace.validCode === 0" href="/certification/enterpriseCertification">申请认证</a>
-                <a v-show="user.userspace.validCode === 3" href="/certification/enterpriseCertification">重新认证</a>
+          <div class="basic-info" v-show="activeTab === 1" v-if="user.userspace">
+            <div class="basic-top">
+              <div class="line">
+                <div class="people"><i class="enterprise-img"></i>
+                  <em v-text="user.userspace.spaceName ? user.userspace.spaceName : '企业名称'"></em>
+                  <b v-if='user.userspace.validCode === 1 && user.newUserSpace' class="angle">——></b>
+                  <em class="new" v-if='user.userspace.validCode === 1 && user.newUserSpace' v-text="user.newUserSpace.spaceName ?  user.newUserSpace.spaceName : '企业名称'"></em>
+                </div>
               </div>
             </div>
-            <div class="enterprise">
-              <div class="bind-info">营业执照号</div>
-              <div class="bind-detail">{{user.userspace.businessCode || '-'}}</div>
-              <div class="bind-detail new" v-if='user.userspace.validCode === 1 && user.newUserSpace'><b class="angle">——></b>{{user.newUserSpace.businessCode || '-'}}</div>
-            </div>
-            <div class="enterprise">
-              <div class="bind-info">营业执照扫描件</div>
-              <div class="bind-detail"
-                   v-show="user.userspace.businessCodeImage">
-                附件: <span>营业执照.jpg</span><i class="fa fa-eye" @click="showImg(user.userspace.businessCodeImage)"></i>
+            <div class="enterprise-bottom">
+              <div class="enterprise">
+                <div class="bind-info">管理员</div>
+                <div class="bind-detail">{{user.userspace.admin.vipName || '-'}}<a href="/change/changeManager">修改</a></div>
+              </div>
+              <div class="enterprise">
+                <div class="bind-info">企业认证</div>
+                <div class="bind-detail">
+                  <em v-text="user.userspace.validCode === 0 ? '未认证' : user.userspace.validCode === 1 ? '待认证' : user.userspace.validCode === 2 ? '已认证' : user.userspace.validCode === 3 ? '未通过' : ''"></em>
+                  <a v-show="user.userspace.validCode === 0" href="/certification/enterpriseCertification">申请认证</a>
+                  <a v-show="user.userspace.validCode === 3" href="/certification/enterpriseCertification">重新认证</a>
+                </div>
               </div>
-              <div class="bind-detail"
-                   v-show="!user.userspace.businessCodeImage">未上传</div>
-              <b v-if='user.userspace.validCode === 1 && user.newUserSpace' class="angle" style="float: left;">——></b>
-              <div class="bind-detail new"
-                   v-if='user.userspace.validCode === 1 && user.newUserSpace'
-                   v-show="user.newUserSpace.businessCodeImage">
-                附件: <span class="new">营业执照.jpg</span><i class="fa fa-eye" @click="showImg(user.newUserSpace.businessCodeImage)"></i>
+              <div class="enterprise">
+                <div class="bind-info">营业执照号</div>
+                <div class="bind-detail">{{user.userspace.businessCode || '-'}}</div>
+                <div class="bind-detail new" v-if='user.userspace.validCode === 1 && user.newUserSpace'><b class="angle">——></b>{{user.newUserSpace.businessCode || '-'}}</div>
+              </div>
+              <div class="enterprise">
+                <div class="bind-info">营业执照扫描件</div>
+                <div class="bind-detail"
+                     v-show="user.userspace.businessCodeImage">
+                  附件: <span>营业执照.jpg</span><i class="fa fa-eye" @click="showImg(user.userspace.businessCodeImage)"></i>
+                </div>
+                <div class="bind-detail"
+                     v-show="!user.userspace.businessCodeImage">未上传</div>
+                <b v-if='user.userspace.validCode === 1 && user.newUserSpace' class="angle" style="float: left;">——></b>
+                <div class="bind-detail new"
+                     v-if='user.userspace.validCode === 1 && user.newUserSpace'
+                     v-show="user.newUserSpace.businessCodeImage">
+                  附件: <span class="new">营业执照.jpg</span><i class="fa fa-eye" @click="showImg(user.newUserSpace.businessCodeImage)"></i>
+                </div>
+              </div>
+              <div class="enterprise">
+                <div class="bind-info">法定代表人</div>
+                <div class="bind-detail">{{user.userspace.corporation || '-'}}</div>
+                <div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="bind-detail new"><b class="angle">——></b>{{user.newUserSpace.corporation || '-'}}</div>
+              </div>
+              <div class="enterprise">
+                <div class="bind-info">注册地址</div>
+                <div class="bind-detail">{{user.userspace.regAddress || '-'}}</div>
+                <div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="bind-detail new"><b class="angle">——></b>{{user.newUserSpace.regAddress || '-'}}</div>
               </div>
-            </div>
-            <div class="enterprise">
-              <div class="bind-info">法定代表人</div>
-              <div class="bind-detail">{{user.userspace.corporation || '-'}}</div>
-              <div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="bind-detail new"><b class="angle">——></b>{{user.newUserSpace.corporation || '-'}}</div>
-            </div>
-            <div class="enterprise">
-              <div class="bind-info">注册地址</div>
-              <div class="bind-detail">{{user.userspace.regAddress || '-'}}</div>
-              <div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="bind-detail new"><b class="angle">——></b>{{user.newUserSpace.regAddress || '-'}}</div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <!--查看大图-->
-    <div id="image-box" v-if="isShow">
-      <div class="x-floating-wrap"></div>
-      <div class="x-floating">
-        <div id="item-content">
-          <div class="x-close-wrap" @click="isShow = false"><a href="javascript:void(0);">&times;</a></div>
-          <div class="img"><img :src="imgUrl"/></div>
+      <!--查看大图-->
+      <div id="image-box" v-if="isShow">
+        <div class="x-floating-wrap"></div>
+        <div class="x-floating">
+          <div id="item-content">
+            <div class="x-close-wrap" @click="isShow = false"><a href="javascript:void(0);">&times;</a></div>
+            <div class="img"><img :src="imgUrl"/></div>
+          </div>
         </div>
       </div>
     </div>
+  </template>
   </div>
 </template>
 
 <script>
+    import cloudCenter from '~components/mobile/cloudcenter/cloudCenter.vue'
     export default {
-      layout: 'cloud',
+      layout (content) {
+        return content.store.state.option.isMobile ? 'mobileCloud' : 'cloud'
+      },
       middleware: 'authenticated',
+      transition: {
+        name: 'fade',
+        mode: 'out-in'
+      },
+      components: {
+        cloudCenter
+      },
       data () {
         return {
           activeTab: 0,
@@ -169,6 +186,9 @@
         }
       },
       computed: {
+        isMobile () {
+          return this.$store.state.option.isMobile
+        },
         user () {
           let mobile = this.$store.state.option.userInfo.data.content.user.mobile
           if (mobile) {