页面切图

2023-02-07 17:59:54 +08:00
parent 6cd009f621
commit 3f50cca6db
35 changed files with 933 additions and 164 deletions
--- a/pages/gateway/newDevice.vue
+++ b/pages/gateway/newDevice.vue
@@ -0,0 +1,88 @@
+<template>
+    <Cn-page :loading='loading'>
+        <view slot='body'>
+            <view class='index'>
+                <view class="content" v-for="(item, index) in formData" :key="index">
+                    <uni-forms :label-width="80">
+                        <uni-forms-item label="类型">
+                            <uni-data-select v-model="item.type" :localdata="range"></uni-data-select>
+                        </uni-forms-item>
+                        <uni-forms-item label="MAC地址">
+                            <uni-easyinput type="number" v-model="item.address" placeholder="请输入设备MAC地址" />
+                        </uni-forms-item>
+                    </uni-forms>
+                </view>
+                <view class="btn-wrap">
+                    <view class="btn-wrap-item" @click="add"> 添加 </view>
+                    <view class="btn-wrap-item ml20" @click="submit"> 提交 </view>
+                </view>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false,
+            formData: [
+                {
+                    type: '',
+                    address: '',
+                }
+            ],
+            range: [
+                { value: 0, text: "DVR" },
+                { value: 1, text: "APF" },
+            ],
+
+        }
+    },
+    methods: {
+        add () {
+            this.formData.push({
+                type: '',
+                address: '',
+            })
+        },
+        submit () {
+            console.log(this.formData)
+            // uni.navigateBack({ delta: 1 })
+        },
+    }
+}
+</script>
+<style lang='scss'>
+.index {
+    padding: 34rpx;
+
+    .content {
+        margin-bottom: 20rpx;
+        padding: 34rpx;
+        background: $uni-theme-white;
+        border-radius: 12rpx;
+    }
+
+    .btn-wrap {
+        margin-top: 40rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .btn-wrap-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            background: $uni-theme-blue;
+            color: #fff;
+            height: 80rpx;
+            border-radius: 12rpx;
+        }
+    }
+}
+
+/deep/ .uni-forms-item:last-of-type {
+    margin-bottom: 0;
+}
+</style>