页面切图

2023-02-20 14:19:28 +08:00
parent 7d28b3476a
commit 5e69ab1da6
50 changed files with 1136 additions and 213 deletions
--- a/pages/project/new.vue
+++ b/pages/project/new.vue
@@ -0,0 +1,102 @@
+<template>
+    <Cn-page :loading='loading'>
+        <view slot='body'>
+            <view class='new'>
+                <view class="content">
+                    <uni-forms :label-width="80">
+                        <uni-forms-item label="项目名称">
+                            <uni-easyinput type="number" v-model="formData.name" placeholder="请输入项目名称" />
+                        </uni-forms-item>
+                        <uni-forms-item label="区域">
+                            <view style="display:flex;">
+                                <uni-easyinput :clearable="false" type="textarea" autoHeight v-model="formData.address"
+                                    placeholder="请输入区域信息" />
+                                <uni-icons type="location" color="#007aff" size="26" class="ml20"
+                                    @click="chooseLocation"></uni-icons>
+                            </view>
+                        </uni-forms-item>
+                        <uni-forms-item label="描述">
+                            <uni-easyinput type="textarea" v-model="formData.name" placeholder="请输入项目描述" />
+                        </uni-forms-item>
+                        <uni-file-picker title="请上传拓扑图" :sourceType="['album']"></uni-file-picker>
+                    </uni-forms>
+                </view>
+                <view class="btn-wrap">
+                    <view class="btn-wrap-item" @click="submit"> 提交 </view>
+                </view>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false,
+            formData: {
+                name: '',
+                gplot: ''
+            },
+        }
+    },
+    methods: {
+        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('项目创建成功')
+            setTimeout(() => {
+                    uni.navigateBack({ delta: 1 })
+            }, 1500);
+        }
+    }
+}
+</script>
+<style lang='scss'>
+.new {
+    padding:  34rpx;
+
+    .content {
+        .content-des {
+            font-size: 28rpx;
+            color: #666;
+            margin-bottom: 20rpx;
+        }
+
+        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-drawer__content {
+    width: 100vw !important;
+}
+</style>