200 lines
5.8 KiB
Vue
200 lines
5.8 KiB
Vue
<template>
|
||
<view>
|
||
<view class="hm-header-xian"></view>
|
||
<view class="hm-p-20 hm-bg-f">
|
||
<u--form labelPosition="left" :rules="rules" :model="formData" ref="form">
|
||
<u-form-item label="收货人" prop="name" labelWidth="80" borderBottom>
|
||
<u--input v-model="formData.name" type="text" placeholder="请输入收货人姓名" color="#999"
|
||
border="none" clearable></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="性别" prop="gender" labelWidth="80" @click="genderShow = true" borderBottom>
|
||
<u--input v-model="genderText" type="number" placeholder="请选择性别" disabledColor="#fff" color="#999"
|
||
border="none" disabled></u--input>
|
||
<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="手机号码" prop="phone" labelWidth="80" borderBottom>
|
||
<u--input v-model="formData.phone" type="number" placeholder="请输入收货人联系电话" color="#999"
|
||
border="none" clearable></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="所在位置" prop="district" labelWidth="80" borderBottom @click="chooseLocation">
|
||
<u--input v-model="formData.district" type="text"
|
||
color="#999" disabled disabledColor="#fff" border="none" placeholder="请选择所在位置"></u--input>
|
||
<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="详细地址" prop="detail" labelWidth="80" ref="item1">
|
||
<u--input v-model="formData.detail" type="text" placeholder="请输入街道小区门牌号" color="#999"
|
||
border="none" clearable></u--input>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
<view class="hm-footer-fixed">
|
||
<view class="hm-w-b100 hm-p-lr-b25">
|
||
<u-button @click="subForm" type="success" :disabled="disabled" :loading="disabled" text="提交"></u-button>
|
||
</view>
|
||
</view>
|
||
<u-action-sheet :show="genderShow" :actions="gender" title="请选择性别" @close="genderShow = false"
|
||
@select="selectGender">
|
||
</u-action-sheet>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let App = getApp();
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
applet: {},
|
||
formData: {
|
||
id:0,
|
||
name: '',
|
||
gender: '',
|
||
phone: '',
|
||
location: '',
|
||
province: '',
|
||
city: '',
|
||
district: '',
|
||
detail: '',
|
||
},
|
||
rules: {
|
||
name: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入收货人姓名',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
phone: {
|
||
type: 'number',
|
||
required: true,
|
||
len: 11,
|
||
message: '请输入正确的收货人联系电话',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
district: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择所在位置',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
detail: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入街道小区门牌号',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
gender: {
|
||
type: 'number',
|
||
max: 1,
|
||
required: true,
|
||
message: '请选择性别',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
},
|
||
genderShow: false,
|
||
genderText:'',
|
||
gender: [
|
||
{
|
||
name: '先生',
|
||
value:1
|
||
},
|
||
{
|
||
name: '女士',
|
||
value:2
|
||
},
|
||
],
|
||
disabled: false
|
||
};
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function(options) {
|
||
let _this = this;
|
||
_this.formData.id = options.id;
|
||
_this.applet = uni.getStorageSync('applet');
|
||
_this.getDetail();
|
||
},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
let _this = this;
|
||
_this.$refs.form.setRules(_this.rules)
|
||
},
|
||
components: {},
|
||
props: {},
|
||
methods: {
|
||
/**
|
||
* 获取当前地址信息
|
||
*/
|
||
getDetail: function() {
|
||
let _this = this;
|
||
App._get('user.address/edit', {
|
||
id: _this.formData.id
|
||
}, function(result) {
|
||
_this.formData.name = result.data.detail.name;
|
||
_this.formData.gender = result.data.detail.gender.value;
|
||
_this.genderText = result.data.detail.gender.text;
|
||
_this.formData.phone = result.data.detail.phone;
|
||
_this.formData.location = result.data.detail.location;
|
||
_this.formData.province = result.data.detail.province;
|
||
_this.formData.city = result.data.detail.city;
|
||
_this.formData.district = result.data.detail.district;
|
||
_this.formData.detail = result.data.detail.detail;
|
||
});
|
||
},
|
||
|
||
selectGender(e) {
|
||
let _this = this;
|
||
console.log(e);
|
||
_this.formData.gender = e.value;
|
||
_this.genderText = e.name;
|
||
},
|
||
/**
|
||
* 获取所在地区
|
||
*/
|
||
chooseLocation: function() {
|
||
let _this = this,
|
||
location = '';
|
||
uni.chooseLocation({
|
||
success: function(res) {
|
||
location = res.latitude + ',' + res.longitude;
|
||
App._get('user.address/getLocation', {
|
||
location
|
||
}, function(result) {
|
||
let wz = result.data.location;
|
||
_this.formData.location = location;
|
||
_this.formData.province = wz.province;
|
||
_this.formData.city = wz.city;
|
||
_this.formData.district = wz.district;
|
||
_this.formData.detail = res.name;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 表单提交
|
||
*/
|
||
subForm: function() {
|
||
let _this = this;
|
||
_this.$refs.form.validate().then(res => {
|
||
_this.disabled = true; // 按钮禁用
|
||
// 提交到后端
|
||
App._post_form('user.address/edit', _this.formData, function(result) {
|
||
App.showSuccess(result.msg, function() {
|
||
uni.navigateBack();
|
||
});
|
||
}, false, function() {
|
||
_this.disabled = false; // 解除禁用
|
||
});
|
||
}).catch(errors => {})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
|
||
</style>
|