app-govern/pages/gateway/new.vue

<template>
    <view class='new'>
        <template v-if="type == 1">
            <view class="content">
                <uni-forms>
                    <uni-forms-item label="网关识别码">
                        <view style="display:flex">
                            <uni-easyinput type="number" v-model="code" placeholder="请输入网关识别码" />
                            <uni-icons type="camera" color="#007aff" size="26" class="ml20"
                                @click="scanCode"></uni-icons>
                        </view>
                    </uni-forms-item>
                </uni-forms>
            </view>
            <view class="btn-wrap">
                <view class="btn-wrap-item" @click="register"> 发起注册 </view>
            </view>
        </template>
        <template v-else>
            <view class="content">
                <uni-forms>
                    <uni-forms-item label="项目">
                        <uni-data-select v-model="formData.project" :localdata="projectRange"></uni-data-select>
                    </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="拓扑图">
                        <view style="display:flex;">
                            <view style="flex:1">
                                <image class="gplot" src="/static/test2.pic.png" mode="aspectFill" />
                            </view>
                            <uni-icons type="image" color="#007aff" size="26" class="ml20"
                                @click="chooseGplot"></uni-icons>
                        </view>
                    </uni-forms-item>
                </uni-forms>
            </view>
            <view class="btn-wrap">
                <view class="btn-wrap-item" @click="submit"> 提交 </view>
            </view>
        </template>
        <uni-drawer ref="gplot" mode="right" :mask-click="false">
            <scroll-view style="height: 100%;" scroll-y="true">
                <view class="content">
                    <image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
                        src="/static/test2.pic.png" @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
                    <view class="btn-wrap">
                        <view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
                        <view class="btn-wrap-item ml20" @click="closeDrawer"> 确定 </view>
                    </view>
                </view>
            </scroll-view>
        </uni-drawer>
    </view>
</template>
<script>
export default {
    data () {
        return {
            loading: false,
            code: '',
            type: 1,
            formData: {
                address: '',
                project:""
            },
            projectRange: [
                { value: 1, text: "监测", point: 1 },
                { value: 2, text: "治理", point: 2 },
                { value: 3, text: "用能", point: 1 },
            ],
            activeGplot: 1,

        }
    },
    methods: {
        chooseGplot () {
            this.$refs.gplot.open()
        },
        closeDrawer () {
            this.$refs.gplot.close()
        },
        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('提交成功')
            setTimeout(() => {
                uni.navigateBack({ delta: 1 })
            }, 1500);
        },
    }
}
</script>
<style lang='scss'>
.new {
    padding:  34rpx;

    .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;
    }

    .content {
        .content-des {
            font-size: 28rpx;
            color: #666;
            margin-bottom: 20rpx;
        }

        margin-bottom: 20rpx;
        padding:  34rpx;
        background: $uni-theme-white;
        border-radius: 12rpx;
    }

    .gplot {
        position: relative;
        width: 100%;
        height: 188rpx;
    }

    .gplot-box {
        height: 280rpx;
        margin: 0 auto;
    }

    .gplot-active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 8rpx solid $uni-theme-blue;
        // background: rgba(3, 3, 3, .5);
    }

    .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;
        }
    }
}

.map-pin-box {
    position: relative;
    width: 375px;
    margin: 0 auto;

    .map-pin-box-area {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .point {
        height: 100rpx;
        width: 100rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }
}


/deep/ .uni-drawer__content {
    width: 100vw !important;
}
</style>