添加新设备

.gitignore

 .DS_Store
 .DS_Store
 node_modules/
 node_modules/
 /dist/
 /dist/
+dist.zip
 npm-debug.log*
 npm-debug.log*
 yarn-debug.log*
 yarn-debug.log*
 yarn-error.log*
 yarn-error.log*

src/router/index.js

@@ -7,6 +7,7 @@ import About from '@/views/user/about.vue'
 import Device from  '@/views/device/index.vue'
 import Device from  '@/views/device/index.vue'
 import Groups from  '@/views/groups/index.vue'
 import Groups from  '@/views/groups/index.vue'
 import DeviceDetail from  '@/views/device/detail.vue'
 import DeviceDetail from  '@/views/device/detail.vue'
+import DeviceAdd from  '@/views/device/add.vue'
 import Tempaltes from  '@/views/tempaltes/index.vue'
 import Tempaltes from  '@/views/tempaltes/index.vue'
 import TempalteEdit from  '@/views/tempaltes/edit.vue'
 import TempalteEdit from  '@/views/tempaltes/edit.vue'
 import TempaltePreview from  '@/views/tempaltes/preview.vue'
 import TempaltePreview from  '@/views/tempaltes/preview.vue'
@@ -21,11 +22,12 @@ const router =  new Router({
       children: [
       children: [
         { path: '/', name: 'Home', component: Tempaltes, meta: { keepAlive: true }, redirect: '/tempaltes' },
         { path: '/', name: 'Home', component: Tempaltes, meta: { keepAlive: true }, redirect: '/tempaltes' },
         { path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } },
         { path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } },
-        { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: true } },
+        { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: false } },
         { path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
         { path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
         { path: '/devices', name: 'Groups', component: Groups, meta: { keepAlive: true } },
         { path: '/devices', name: 'Groups', component: Groups, meta: { keepAlive: true } },
         { path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
         { path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
-        { path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: true } },
+        { path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: false } },
+        { path: '/device/add', name: 'DeviceAdd', component: DeviceAdd, meta: { keepAlive: false } },
         { path: '/user', name: 'Home', component: User, meta: { keepAlive: true } },
         { path: '/user', name: 'Home', component: User, meta: { keepAlive: true } },
       ]
       ]
     },
     },

src/views/device/add.vue

+<template>
+  <div class="device-detail-container">
+    <NavBar title="添加新设备" left-arrow></NavBar>
+    <div class="content-box">
+      <div class="content-top" style="background-image: url(./img/ps/devices.png);"></div>
+      <div class="setup-list">
+        <div class="setup-item">
+          <div class="setup-img">步骤示意图</div>
+          <div class="setup-tips">连接Vmatrix盒子与显示器</div>
+        </div>
+        <div class="setup-item">
+          <div class="setup-img">步骤示意图</div>
+          <div class="setup-tips">与管理端连接同一WIFI</div>
+        </div>
+        <div class="setup-item">
+          <div class="setup-img">步骤示意图</div>
+          <div class="setup-tips">打开“个人中心”-绑定管理端“</div>
+        </div>
+        <div class="setup-item">
+          <div class="setup-img">步骤示意图</div>
+          <div class="setup-tips">
+            打开管理端Vmatrix App
+            扫描二维码完成绑定
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bind-btn">
+      扫一扫，捆绑设备
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from "@/views/layout/navbar";
+import "swiper/dist/css/swiper.css";
+import { getFilmList } from "@/api/api";
+export default {
+  data() {
+    return {
+      swiperOption: {
+        slidesPerView: "auto"
+      },
+      list: [
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        }
+      ]
+    };
+  },
+  components: {
+    NavBar
+  },
+  computed: {},
+  created() {},
+  methods: {
+    callback() {},
+    getList() {
+      getFilmList().then(res => {
+        console.log(res);
+        this.list = res.data.list;
+      });
+    },
+    addTemplate() {
+      this.$router.push({
+        path: "/tempaltes"
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.device-detail-container {
+  text-align: left;
+
+  .swiper-slide {
+    width: auto;
+  }
+  .content-box {
+    padding-left: 82px;
+    padding-top: 50px;
+    .content-top {
+      // width: 80%;
+      height: 187px;
+      background-size: auto 100%;
+      background-position: 150px center;
+      background-repeat: no-repeat;
+    }
+    .setup-list {
+      padding-top: 135px;
+      display: flex;
+      justify-content: space-between;
+      padding-right: 60px;
+      box-sizing: border-box;
+      .setup-item {
+        .setup-img {
+          color: rgba(188, 188, 188, 1);
+          text-align: center;
+          line-height: 131px;
+          font-size: 24px;
+          width: 220px;
+          height: 131px;
+          background: rgba(255, 255, 255, 1);
+          border: 1px solid rgba(188, 188, 188, 1);
+          border-radius: 3px;
+        }
+        .setup-tips {
+          max-width: 220px;
+          text-align: center;
+          font-size: 19px;
+          padding-top: 33px;
+          line-height: 25px;
+          color: rgba(51, 51, 51, 0.8);
+        }
+      }
+    }
+  }
+  .bind-btn {
+    margin: 0 auto;
+    margin-top: 80px;
+    width:364px;
+    height:68px;
+    color: white;
+    text-align: center;
+    line-height: 68px;
+    border:1px solid;
+    border-image:linear-gradient(264deg, rgba(94,161,251,1), rgba(110,140,249,1)) 10 10;
+    background:linear-gradient(-90deg,rgba(128,116,247,1) 0%,rgba(95,160,251,1) 100%);
+    border-radius:3px;
+  }
+}
+</style>

src/views/device/detail.vue

@@ -59,7 +59,7 @@
               }">
               }">
               <div class="item-action">
               <div class="item-action">
                 <div class="name">
                 <div class="name">
-                  {{item.filmName ? item.filmName : '暂未填写'}}
+                  {{item.filmName ? item.filmName : '暂无名称'}}
                 </div>
                 </div>
                 <div class="right-action">
                 <div class="right-action">
                     <div class="right-item-action">
                     <div class="right-item-action">

src/views/device/index.vue

@@ -2,7 +2,7 @@
   <div class="device-container">
   <div class="device-container">
     <NavBar title="我的设备" ></NavBar>
     <NavBar title="我的设备" ></NavBar>
     <div class="device-list">
     <div class="device-list">
-        <div class="device-item">
+        <div class="device-item" @click="addDevice">
           <div class="device-item-create">
           <div class="device-item-create">
             <van-icon style="font-size: 52px;" name="plus" />
             <van-icon style="font-size: 52px;" name="plus" />
           </div>
           </div>
@@ -68,6 +68,13 @@ export default {
           clientSecret: 'maxrocky'
           clientSecret: 'maxrocky'
         }
         }
       })
       })
+    },
+    addDevice() {
+      this.$router.push({
+        path: '/device/add',
+        query: {
+        }
+      })
     }
     }
   }
   }
 }
 }