0819

src/App.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="app" :style="{transform:scale!==1 && gre150? `scale(${scale})`:'none'}">
-    <div class="big-nav">
+  <div id="app" :style="{transform:scale!==1 && gre150? `scale(${scale})`:'none','paddingTop':deviceLogin?'0px':'68px'}">
+    <div class="big-nav" :class="{'hidden-nav':deviceLogin}">
       <iheader>
         <inavs slot-scope="{cp}" :cp="cp" />
       </iheader>
@@ -25,6 +25,7 @@ import aside from '@/page/layout/aside'
 import navs from '@/page/navs'
 import chat from '@/page/chat'
 import browser from '@/util/browser'
+import {mapState} from 'vuex'
 
 // import { detectZoom } from '@/util'
 
@@ -55,6 +56,10 @@ export default {
     },
     '$route.path': {
       handler: function (val, oldVal) {
+        if (this.deviceLogin && val !== '/scene') {
+          this.$store.dispatch('logout')
+          this.$router.push({name: 'home'})
+        }
         if (devicePixelRatio !== 1) {
           if (this.isNotChorme || this.isIE) {
             setTimeout(() => {
@@ -87,6 +92,9 @@ export default {
     ileft: left
   },
   computed: {
+    ...mapState({
+      deviceLogin: state => state.user.deviceLogin
+    }),
     isManage: function () {
       if (this.$route.matched.length > 0) {
         return this.$route.matched[0]['name'] === 'manage'
@@ -183,6 +191,12 @@ export default {
   top: 0;
   width: 100%;
   z-index: 999;
+
+}
+
+.hidden-nav{
+  height: 0;
+  overflow: hidden;
 }
 
 .mask {

src/components/toast/index.vue

@@ -4,7 +4,7 @@
     <capacityRecharge :capacityid='capacityid' :capacityitem='capacityitem' :capacitychildName='capacitychildName' :visible='capacityvisible' @closePoint="()=>{capacityvisible = false}"/>
     <editInvoice :edititem=editItem :visible='editVisible' @closePoint="()=>{editVisible = false}"/>
     <showInvoice :showitem=showItem :visible='showVisible' @closePoint="()=>{showVisible = false}"/>
-    <binding :btype="bindingType" :visible='bindingVisible' @closePoint="()=>{bindingVisible = false}"/>
+    <binding :btype="bindingType" :visible='bindingVisible' @closePoint="()=>{bindingVisible = false,emitCallback()}"/>
     <div
       class="toast-layout"
       :style="{background:isLoaing?'none':'rgba(0, 0, 0, 0.3)'}"

src/components/toast/toast.js

@@ -52,9 +52,11 @@ Toast.install = function (Vue) {
       instance.pointchildName = childName
       instance.pointid = id
     },
-    showBinding: val => {
+    showBinding: (val, callback) => {
       instance.bindingVisible = true
       instance.bindingType = val
+      instance.callback = callback || function () {
+      }
     },
     showInvoice: item => {
       instance.editVisible = true

src/main.js

@@ -21,9 +21,9 @@ let router = require('./router').default
 
 Vue.prototype.$http = axios
 // Vue.prototype.$serverName = 'http://192.168.0.10:8080/'
-// Vue.prototype.$serverName = 'http://pro.4dkankan.com/'
+Vue.prototype.$serverName = 'http://pro.4dkankan.com/'
 
-Vue.prototype.$serverName = ''
+// Vue.prototype.$serverName = ''
 
 Vue.config.productionTip = false
 

src/page/introduce/index.vue

@@ -35,6 +35,7 @@
         <div class="intro-title">
           <img src="@/assets/images/introduce-line.png" alt="">
           <p>扩充容量保留珍贵空间</p>
+          <img src="@/assets/images/introduce-line1.png" alt="">
         </div>
         <p class="intro-sub">购买立即生效，拍摄安心存放</p>
         <ul class="intro-type">

src/page/introduce/style.scss

@@ -106,15 +106,13 @@
       }
     }
     .intro-title{
-      margin: 40px auto 20px;
+      margin: 30px auto 12px;
       text-align: center;
       position: relative;
       p{
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
+        display: inline-block;
         font-size: 28px;
+        margin: 0 20px;
         color: $font-color;
       }
     }

src/page/introtow/index.vue

@@ -19,7 +19,6 @@
           <img src="@/assets/images/introduce-line.png" alt="">
           <p>点数充值，记录您的美好空间</p>
           <img src="@/assets/images/introduce-line1.png" alt="">
-
         </div>
         <p class="intro-sub">购买立即生效，拍摄安心存放</p>
         <ul class="intro-type">

src/page/layout/aside/temp/ltemp/login.vue

@@ -115,8 +115,9 @@ export default {
         if (response.code === 0) {
           this.$store.commit('saveToken', response.data.token)
           if (response.data.token) {
-            this.$store.commit('DEVICELOGIN', 'active')
+            this.$store.commit('DEVICELOGIN', response.data.childName || '')
             this.$bus.$emit('hideAside')
+            this.$router.replace({name: 'scene'})
           }
           return false
         }

src/page/manage/index.vue

@@ -2,14 +2,35 @@
   <div class="manage-layout">
     <div class="manage-bg">
       <div class="manage-con" :style="{marginLeft:(split + 37)+'px'}">
-        <div class="info">
-        <img class="avatar" :src="info.head" alt>
-        <div class="member">
-          <p>{{content.content||'尚未开通任何会员'}}</p>
-          <p>{{info.userName}}</p>
-        </div>
-      </div>
-      <div class="open-btn" @click="$router.push(btnItem.to)">{{btnItem.name}}</div>
+        <template v-if="!deviceLogin">
+          <div class="info">
+            <img class="avatar" :src="info.head.replace('http://','https://')" alt>
+            <div class="member">
+              <p>{{content.content||'尚未开通任何会员'}}</p>
+              <p>{{addstar(info.userName)}}</p>
+            </div>
+          </div>
+          <div class="open-btn" @click="$router.push(btnItem.to)">{{btnItem.name}}</div>
+        </template>
+        <template v-else>
+          <div class="info deviceLogin">
+            <div class="member">
+              <p>{{detail.type===0?'Lite设备用户':'Pro设备用户'}}</p>
+              <p>设备ID：{{detail.childName}}</p>
+            </div>
+            <div class="capacity">
+            <div class="c-dec">
+              <span>已使用：{{detail.usedSpaceStr}} / {{detail.totalSpaceStr}} ({{getPercent(detail.usedSpace,detail.totalSpace)}}%)</span>
+            </div>
+            <div class="c-line">
+              <div class="active" :style="{width:getBar(detail.usedSpace,detail.totalSpace)}"></div>
+            </div>
+            <div class="c-detail">
+              <span>容量构成：{{detail.totalSpaceStr}} （{{detail.spaceContent}}）</span>
+            </div>
+          </div>
+          </div>
+        </template>
       </div>
     </div>
     <div class="manage-body">
@@ -78,7 +99,6 @@ let deviceSettings = [
   }
 ]
 export default {
-
   data () {
     let nameArr = {
       information: '账号信息',
@@ -102,13 +122,19 @@ export default {
     return {
       nameArr,
       content: '',
-      btnItem: btnType['buy']
+      btnItem: btnType['buy'],
+      detail: ''
     }
   },
   mounted () {
-    // this.getInfo()
+    this.deviceLogin && this.getDetail()
   },
   methods: {
+    addstar (item) {
+      let back = item.substring(7, 12)
+      let font = item.substring(0, 3)
+      return font + '*****' + back
+    },
     tabHandle (sub) {
       switch (sub.to) {
         case 'logout':
@@ -122,6 +148,40 @@ export default {
           break
       }
     },
+    getPercent (a, b) {
+      let temp = a / b
+      if (temp < 1) {
+        return '<1'
+      }
+      return Math.round(temp)
+    },
+
+    getBar (a, b) {
+      let temp = a / b
+      if (temp < 1) {
+        return '1%'
+      }
+      return Math.round(temp) + '%'
+    },
+    async getDetail () {
+      let params = {
+        childName: this.deviceLogin
+      }
+      let result = await this.$http({
+        method: 'post',
+        data: params,
+        headers: {
+          token: this.token
+        },
+        url: '/user/camera/detail'
+      })
+      let data = result.data
+      if (data.code !== 0) {
+        return this.$toast.show('error', '获取设备详情失败')
+      }
+      this.detail = data.data
+      this.$bus.$emit('mycid', this.detail)
+    },
     async getInfo () {
       let res = await this.$http
         .post('/user/camera/deadline', {}, {
@@ -141,8 +201,8 @@ export default {
       split: state => state.ui.navDivision,
       token: state => state.user.token,
       info: state => state.user.info,
+      deviceLogin: state => state.user.deviceLogin,
       settings: state => {
-        console.log(state.user.deviceLogin)
         return state.user.deviceLogin ? deviceSettings : settings
       }
     }),

src/page/manage/style.scss

@@ -1,4 +1,6 @@
 .manage-layout{
+  $font-color:#2d2d2d;
+  $theme-color:#1fe4dc;
   .manage-bg{
     background: url('~@/assets/images/person-bg.png') no-repeat top center;
     background-size: cover;
@@ -14,13 +16,14 @@
           width: 64px;
           height: 64px;
           flex-shrink: 0;
+          margin-right: 14px;
         }
         .member{
           display:flex;
           flex-direction: column;
           justify-content: space-between;
           height: 64px;
-          padding: 2px 14px;
+          padding: 2px 0;
           p{
             line-height: 1;
             color: #cfcfcf;
@@ -44,6 +47,36 @@
         background-color: #1fe4dc;
         cursor: pointer;
       }
+      .deviceLogin{
+        display: block;
+      }
+      .capacity{
+        margin-top: 30px;
+        width: 680px;
+        .c-line{
+          width: 100%;
+          margin: 15px 0;
+          height: 8px;
+          background-color: #ccc;
+          .active{
+            background-color: $theme-color;
+            height: 100%;
+          }
+        }
+        .c-dec{
+          font-size: 16px;
+          color: #fff;
+        }
+        .c-detail{
+          color: #fff;
+          display: flex;
+          justify-content: space-between;
+          span{
+            font-size: 14px;
+            color: #cfcfcf;
+          }
+        }
+      }
     }
   }
   .manage-body{

src/page/manage/temp/device.vue

@@ -44,7 +44,7 @@
           <template v-else>
             <p class="d-id">ID:{{item.childName}}</p>
             <p class="p-sub">剩余点数：{{item.balance}}</p>
-            <div class="d-edit">
+            <div class="d-edit" :class="{'dtow-edit':tabActive!==4}">
               <span @click="$router.push({name:'introtow',params:{id:item.childName}})">充值</span>
               <span @click="unbind(item)">解绑</span>
             </div>
@@ -153,7 +153,9 @@ export default {
     },
     addDevice () {
       let val = this.tabActive === 4 ? 1 : 0
-      this.$toast.showBinding(val)
+      this.$toast.showBinding(val, () => {
+        this.getList()
+      })
     },
     async getList (searchKey = '') {
       window.scrollTo(0, 0)
@@ -268,6 +270,7 @@ $font-color: #2d2d2d;
         }
         p{
           margin-top: 28px;
+          font-weight: bold;
         }
       }
     }
@@ -304,11 +307,16 @@ $font-color: #2d2d2d;
           margin-top: 10px;
           font-size: 14px;
           position: absolute;
-          bottom: 30px;
+          bottom: 26px;
           span{
             cursor: pointer;
+            margin-right: 7px;
+            font-weight: bold;
           }
         }
+        .dtow-edit{
+          bottom: 40px;
+        }
       }
       .i-right{
         vertical-align: top;

src/page/manage/temp/scene.vue

@@ -51,6 +51,15 @@ export default {
   computed: {
     ...mapState({
       token: state => state.user.token,
+      deviceLogin: state => state.user.deviceLogin,
+      cameradetail: state => {
+        let type = Object.prototype.toString.call(state.user.cameradetail)
+        if (type === '[object Object]') {
+          return state.user.cameradetail
+        }
+        let condition = state.user.cameradetail && state.user.cameradetail !== 'null' && type !== '[object Array]'
+        return (condition ? JSON.parse(state.user.cameradetail) : '')
+      },
       myscene: state => {
         let type = Object.prototype.toString.call(state.user.myscene)
         if (type === '[object Object]') {
@@ -62,7 +71,11 @@ export default {
     })
   },
   mounted () {
-    this.getList()
+    this.$bus.$on('mycid', item => {
+      this.$store.commit('CAMERADERTAIL', item)
+      this.getList()
+    })
+    !this.deviceLogin && this.getList()
   },
   methods: {
     goto (url) {
@@ -112,12 +125,16 @@ export default {
       this.currentPage = data
     },
     async getList () {
+      console.log(this.cameradetail)
+      let {id: camreaId = null, type: camreaType = null} = this.cameradetail
       window.scrollTo(0, 0)
       let params = {
         pageNum: this.currentPage,
-        pageSize: this.pageSize
+        pageSize: this.pageSize,
+        camreaId,
+        camreaType
       }
-      await this.$store.dispatch('getUserScene', params)
+      camreaId ? await this.$store.dispatch('getScanScene', params) : await this.$store.dispatch('getUserScene', params)
       this.pageSize = this.myscene.pageSize
       this.total = this.myscene.total || 0
     }

src/page/pay/index.vue

@@ -38,7 +38,6 @@
         <div class="attr">应付金额:</div>
         <div class="price-detail">
           <div class="price">￥{{response.price}}</div>
-          <div class="sao">扫码支付</div>
           <img v-if="response.src" :src="`${$serverName}${response.src}`" alt="">
           <div class="dec">使用<span style="color:#ff0000">{{payZH}}</span>app扫码完成支付</div>
         </div>

src/page/payrecharge/index.vue

@@ -72,7 +72,6 @@
           <div class="attr">应付金额:</div>
           <div class="price-detail">
             <div class="price">￥{{response.price}}</div>
-            <div class="sao">扫码支付</div>
             <img v-if="response.src" :src="`${$serverName}${response.src}`" alt />
             <div class="dec">
               使用
@@ -345,7 +344,7 @@ $theme-color: #1fe4dc;
             margin-right: 50px;
             display: flex;
             align-items: center;
-            border: 1px solid #f4f4f4;
+            border: 1px solid #e7e7e7;
             cursor: pointer;
             position: relative;
             .year {
@@ -510,7 +509,7 @@ $theme-color: #1fe4dc;
       }
       .pay-detail{
         height: 28px;
-        margin: 20px 0;
+        margin: 90px 0 20px;
         cursor: pointer;
         line-height: 28px;
         font-size: 14px;

src/page/privilege/index.vue

@@ -129,12 +129,12 @@ export default {
         name: {
           title: '专业会员',
           price: {
-            name: `买设备就<span style='font-size:20px;margin-left:4px;'>送</span>`,
+            name: `买设备就<br/><span style='font-size:20px;margin-left:4px;'>送</span>`,
             class: 'give'
           },
           authority: {
-            class: 'btns default',
-            name: '再次购买'
+            class: '',
+            name: ''
           }
         },
         identity: {
@@ -240,12 +240,12 @@ export default {
         name: {
           title: '企业套餐',
           price: {
-            name: `量身定制的贴合服务`,
+            name: `量身定制<br/>贴合服务`,
             class: 'price'
           },
           authority: {
-            class: 'btns default',
-            name: '提供咨询'
+            class: '',
+            name: ''
           }
         },
         identity: {

src/store/user.js

@@ -34,6 +34,7 @@ export default {
     fdkankantoken,
     name: null,
     cart: cart,
+    cameradetail: '',
     myscene: '',
     mydevice: '',
     myexpansion: '',
@@ -50,7 +51,6 @@ export default {
   mutations: {
     saveToken (state, token) {
       state.token = token
-
       try {
         Cookies.set('fdkankantoken', token)
         localStorage.setItem('token', token)
@@ -89,6 +89,11 @@ export default {
       localStorage.setItem('mydevice', JSON.stringify(data))
     },
 
+    CAMERADERTAIL (state, data) {
+      state.cameradetail = data
+      localStorage.setItem('cameradetail', JSON.stringify(data))
+    },
+
     MYEXPANSION (state, data) {
       state.myexpansion = data
       localStorage.setItem('myexpansion', JSON.stringify(data))
@@ -337,6 +342,22 @@ export default {
       if (data.code !== 0) return
       context.commit('myScene', data.data)
     },
+
+    async getScanScene (context, params) {
+      let res = await http({
+        method: 'post',
+        data: params,
+        headers: {
+          token: context.state.token
+        },
+        url: '/device/scene/list'
+      })
+
+      let data = res.data
+      if (data.code !== 0) return
+      context.commit('myScene', data.data)
+    },
+
     async getUserOrder (context, params) {
       let res = await http({
         method: 'post',