页面切图

pages/device/new.vue

@@ -1,25 +1,78 @@
 <template>
-    <Cn-page :loading='loading'>
-        <view slot='body'>
-            <view class='index'>
-                添加新设备
+    <view class='new'>
+        <template v-if="type == 1">
+            <view style="display:flex">
+                <uni-easyinput type="number" v-model="code" placeholder="请输入设备DID" />
+
+                <uni-icons type="camera" color="#007aff" size="30" class="ml20" @click="scanCode"></uni-icons>
             </view>
-        </view>
-    </Cn-page>
+            <view class="new-btn" @click="register"> 发起注册 </view>
+        </template>
+        <template v-else>
+            <view style="display:flex;">
+                <uni-easyinput :clearable="false" type="text" v-model="address" placeholder="请输入地址" />
+                <uni-icons type="location" color="#007aff" size="30" class="ml20" @click="chooseLocation"></uni-icons>
+            </view>
+            <view class="new-btn" @click="submit"> 提交 </view>
+        </template>
+    </view>
 </template>
 <script>
 export default {
     data () {
         return {
-            loading: false
+            loading: false,
+            code: '',
+            type: 1,
+            formData: {
+                address: '',
+            },
         }
     },
     methods: {
+        scanCode () {
+            uni.scanCode({
+                success: function (res) {
+                    console.log('条码类型：' + res.scanType);
+                    console.log('条码内容：' + res.result);
+                }
+            });
+        },
+        register () {
+            this.type = 2
+        },
+        chooseLocation () {
+            uni.chooseLocation({
+                success: function (res) {
+                    this.address = res.name
+                    console.log('位置名称：' + res.name);
+                    console.log('详细地址：' + res.address);
+                    console.log('纬度：' + res.latitude);
+                    console.log('经度：' + res.longitude);
+                }
+            });
+        },
+        submit(){
+            this.$util.toast('提交成功')
+            uni.navigateBack({ delta: 1 })
+        },
     }
 }
 </script>
 <style lang='scss'>
-.index {
-    padding: 34rpx;
+.new {
+    padding: 100rpx 100rpx 0;
+
+    .new-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 80rpx auto 0;
+        width: 320rpx;
+        background: $uni-theme-blue;
+        color: #fff;
+        height: 80rpx;
+        border-radius: 12rpx;
+    }
 }
 </style>