<template>
|
<view class="page_bg">
|
<u-form :model="form" ref="uForm" :label-style="labelS" :error-type="['toast']">
|
<u-form-item label="姓名:" prop="name">
|
<u-input v-model="form.name" placeholder="请输入姓名" />
|
</u-form-item>
|
<u-form-item label="电话:" prop="phoneNumber">
|
<u-input v-model="form.phoneNumber" placeholder="请输入电话" />
|
</u-form-item>
|
<u-form-item label="地区:" prop="labelShow">
|
<u-input type="select" :select-open="show" v-model="labelShow" placeholder="请选择地区" @click="show = true">
|
</u-input>
|
</u-form-item>
|
<u-form-item prop="detail">
|
<u-input v-model="form.detail" type="textarea" placeholder="详细地址：如小区、楼栋、门牌号" />
|
</u-form-item>
|
<u-form-item label="设为默认地址" label-width="50%" class="default_address">
|
<u-switch slot="right" size="40" v-model="switchVal" active-color="#FDD303"></u-switch>
|
</u-form-item>
|
</u-form>
|
|
<u-toast ref="uToast" />
|
<u-picker mode="region" :default-region="[form.province, form.city, form.area]" v-model="show"
|
@confirm="selectAddress"></u-picker>
|
|
<u-button class="save_btn" shape="circle" :ripple="true" ripple-bg-color="#444" @tap="send">
|
确认
|
</u-button>
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
return {
|
labelS: {
|
fontWeight: 'bold'
|
},
|
// 获得的信息
|
fun: 'add',
|
addressId: '',
|
|
// 表单
|
form: {
|
name: '',
|
phoneNumber: '',
|
province: '北京市',
|
city: '市辖区',
|
area: '东城区',
|
detail: ''
|
},
|
rules: {
|
name: [{
|
required: true,
|
message: '请输入姓名',
|
trigger: ['blur']
|
}],
|
phoneNumber: [{
|
required: true,
|
message: '请输入手机号',
|
trigger: ['blur']
|
}, {
|
validator: (rule, value, callback) => {
|
return this.$u.test.mobile(value);
|
},
|
message: '请输入正确的手机号',
|
trigger: ['blur'],
|
}],
|
detail: [{
|
required: true,
|
message: '请输入详细地址',
|
trigger: ['blur']
|
}],
|
},
|
// 仅显示文本
|
labelShow: '',
|
// 是否设为默认地址
|
switchVal: false,
|
|
show: false
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
methods: {
|
// 页面数据初始化函数
|
init(options) {
|
this.fun = options.type
|
uni.setNavigationBarTitle({
|
title: options.type == 'edit' ? '编辑地址' : '新增地址'
|
});
|
if (options.type == 'edit') {
|
this.getAddressInfo(options.id)
|
this.addressId = options.id
|
}
|
},
|
// 获取地址信息
|
getAddressInfo(id) {
|
vk.callFunction({
|
url: 'client/address/kh/getDetail',
|
title: '请求中...',
|
data: { id },
|
success: function(res) {
|
that.form.name = res.data.name
|
that.form.phoneNumber = res.data.phone_number
|
that.form.province = res.data.province
|
that.form.city = res.data.city
|
that.form.area = res.data.area
|
that.form.detail = res.data.detail
|
that.switchVal = res.data.is_default == 0 ? false : true
|
that.labelShow = res.data.province + '-' + res.data.city + '-' + res.data.area
|
}
|
});
|
},
|
// 完成地区选择
|
selectAddress(e) {
|
this.form.province = e.province.label
|
this.form.city = e.city.label
|
this.form.area = e.area.label
|
this.labelShow = e.province.label + '-' + e.city.label + '-' + e.area.label
|
},
|
// 提交
|
send() {
|
this.$refs.uForm.validate(valid => {
|
if (!valid) return
|
if (that.labelShow == '') {
|
that.$refs.uToast.show({
|
title: '请选择地址',
|
type: 'default'
|
})
|
return
|
}
|
that.addInfo()
|
})
|
},
|
// 添加
|
addInfo() {
|
vk.callFunction({
|
url: that.fun == 'add' ? 'client/address/kh/add' : 'client/address/kh/update',
|
title: '请求中...',
|
data: {
|
name: that.form.name,
|
phone_number: that.form.phoneNumber,
|
province: that.form.province,
|
city: that.form.city,
|
area: that.form.area,
|
detail: that.form.detail,
|
is_default: that.switchVal ? 1 : 0,
|
address_id: that.addressId,
|
need_user_info: true
|
},
|
success: function(res) {
|
if (res.code == 0) {
|
that.$refs.uToast.show({
|
title: '修改地址成功',
|
type: 'success'
|
})
|
setTimeout(() => {
|
uni.$emit('addressUpdate', { msg: '页面更新' })
|
uni.navigateBack({
|
delta: 1
|
})
|
}, 1000)
|
}
|
}
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page_bg {
|
min-height: 100vh;
|
background: #F4F6F9;
|
padding-top: 2rpx;
|
|
.u-form-item {
|
padding: 21rpx 20rpx;
|
background-color: #FFFFFF;
|
}
|
|
.default_address {
|
margin-top: 21rpx;
|
}
|
}
|
|
/deep/ .u-column-item {
|
font-size: 28rpx;
|
}
|
|
.save_btn {
|
background-color: #333333;
|
color: #FFFFFF;
|
height: 70rpx;
|
width: 88%;
|
margin-top: 400rpx;
|
}
|
</style>
|
