app-govern/pages/engineering/new.vue

<template>
    <Cn-page :loading="loading">
        <view slot="body">
            <view class="new">
                <view class="content">
                    <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
                    <uni-forms :label-width="80">
                        <uni-forms-item label="工程名称">
                            <uni-easyinput type="text" 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.area"
                                    placeholder="请输入位置信息" />
                                <uni-icons type="location" color="#007aff" size="26" class="ml20"
                                    @click="chooseLocation"></uni-icons>
                            </view> -->
                            <uni-data-picker :localdata="localdata" @change="areaChange" v-model="value"
                                             @popupopened="show=true" @popupclosed="show=false">
                            </uni-data-picker>
                        </uni-forms-item>
                        <uni-forms-item label="描述">
                            <uni-easyinput
                                type="textarea"
                                autoHeight
                                v-model="formData.description"
                                placeholder="请输入工程描述"
                            />
                        </uni-forms-item>
                    </uni-forms>
                </view>
                <view class="btn-wrap">
                    <view class="btn-wrap-item" @click="submit"> 提交</view>
                </view>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import {addEngineering, auditEngineering} from '../../common/api/engineering'
import area from '../../common/js/area.json'

export default {
    data() {
        return {
            localdata: area,
            loading: false,
            value: '',
            formData: {
                city: '',
                description: '',
                name: '',
                province: '',
            },
            engineering: {},
            show: false,
            options: {}
        }
    },
    onLoad(options) {
        this.options = options
        if (options.engineering) {
            this.engineering = JSON.parse(decodeURIComponent(options.engineering))
            console.log(this.engineering)
            for (let key in this.formData) {
                if (this.engineering[key]) {
                    this.formData[key] = this.engineering[key]
                }
            }
            this.value = this.engineering.city
            this.formData.id = this.engineering.id
            uni.setNavigationBarTitle({title: '工程编辑'})
        }
        uni.getLocation({
            type: 'wgs84',
            success: function (res) {
                console.log(res)
                console.log('当前位置的经度：' + res.longitude)
                console.log('当前位置的纬度：' + res.latitude)
            },
        })
        // console.log(area);
        console.log(this.$util.prePage())
    },
    methods: {
        toJSON() {
        },
        areaChange(e) {
            if (e.detail.value.length) {
                this.formData.province = e.detail.value[0].value
                this.formData.city = e.detail.value[1].value
            } else {
                this.formData.province = ''
                this.formData.city = ''
            }
        },
        select(e) {
            console.log(e)
        },
        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)
                },
            })
        },
        async submit() {
            console.log(this.formData)
            if (!this.formData.name) {
                this.$util.toast('请输入工程名称')
                return
            }

            if (!this.formData.province) {
                this.$util.toast('请选择区域信息')
                return
            }
            if (!this.formData.description) {
                this.$util.toast('请输入工程描述')
                return
            }
            if (this.formData.id) {
                await auditEngineering(this.formData)
                this.$util.toast('工程修改成功')
                this.$util.refreshPrePage(2)
            } else {
                let res = await addEngineering(this.formData)
                this.$util.toast('工程创建成功')
                if (this.options.from === 'index') {
                    uni.setStorageSync('engineering', res.data)
                    uni.redirectTo({
                        url: '/pages/device/new',
                    })
                    return
                } else {
                    this.$util.refreshPrePage()
                }
            }
        },
    },
}
</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-color;
            color: #fff;
            height: 80rpx;
            border-radius: 12rpx;
        }
    }
}

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