<template> <view class="content"> <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']"> <u-form-item label="姓名" required prop="receiverName"> <u-input placeholder="请输入姓名" :maxlength="30" v-model="form.receiverName" /> </u-form-item> <u-form-item label="电话" required prop="receiverPhone"> <u-input placeholder="请输入电话" :maxlength="11" type="number" v-model="form.receiverPhone" /> </u-form-item> <u-form-item label="省市区" required prop="receiveAreasName"> <u-input v-model="areaInfo.label" placeholder="请选择省市区" @click="openAddress" type="select" /> <Address ref="applyAddress" @onConfirm="areaConfirm"></Address> </u-form-item> <u-form-item label="详细地址" required prop="receiveAddress"> <textarea :auto-height="true" placeholder="请输入收货详细地址(最多100个字符)" :maxlength="100" v-model="form.receiveAddress" class="receiveAddress"/> </u-form-item> </u-form> <view class="buttons"> <u-button type="primary" @click="submit">提交</u-button> </view> </view> </template> <script> import { saveAddress } from '@/api/receiveAddress.js' import Address from '@/components/address.vue' export default { components: { Address }, data() { return { show: false, form: { receiverName: '', receiverPhone: '', receiveAddress: '' // 详细地址 }, receiveAreas: '', //地址编码 areaName: '', //地址 areaInfo: {}, // 省市区 areaIdArr: [], // 省市区id数组 rules: { } }; }, onLoad(option) { this.form = this.$store.state.vuex_OrderAddress if (this.form.receiveAreasName) { this.areaIdArr = this.form.receiveAreas.split(',') this.areaInfo.label = this.form.receiveAreasName.replace(/\,/g,'-') uni.setNavigationBarTitle({ title: '修改地址' }) } else { uni.setNavigationBarTitle({ title: '新增地址' }) } }, onUnload() { this.$u.vuex("vuex_OrderAddress",{}) }, methods: { submit() { this.$refs.uForm.validate(valid => { if (valid) { console.log('验证通过'); if (this.form.receiverName ==='') { uni.showToast({ title: '请输入姓名', icon: 'none' }) return false } if (this.form.receiverPhone ==='') { uni.showToast({ title: '请输入电话', icon: 'none' }) return false } // 省市区 if(this.areaIdArr.length == 0){ uni.showToast({icon: 'none',title: '请选择省市区'}) return } if (this.form.receiveAddress ==='') { uni.showToast({ title: '请输入详细地址', icon: 'none' }) return false } let params = { receiverName: this.form.receiverName, receiverPhone: this.form.receiverPhone, receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称 receiveAreas: this.areaIdArr.join(','), receiveAddress: this.form.receiveAddress // 详细地址 } if(this.form.id) { params.id = this.form.id } saveAddress(params).then(res=>{ if(res.status == 200) { uni.showToast({ title: res.message, icon: 'none' }) setTimeout(()=>{ uni.navigateBack() },300) } }) } else { console.log('验证失败'); } }); }, // 选择省区市 areaConfirm(e) { console.log('已选择的省市区', e) this.areaInfo = e this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ] }, openAddress(){ // 省市区 回显 参数为省市区id数组 // console.log(this.areaIdArr,'this.areaIdArr') this.$refs.applyAddress.open(this.areaIdArr) }, }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); } }; </script> <style lang="scss"> .content{ padding: 0 50upx; background: #FFFFFF; width: 100%; .buttons{ padding: 80upx 100upx; } .receiveAddress{ width: 100%; line-height: 1.5em; box-sizing: border-box; font-style: normal; } } </style>