You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
8.7 KiB
328 lines
8.7 KiB
<template>
|
|
<view class="container" v-show="isShow">
|
|
<u-popup v-model="isShow" mode="bottom" safe-area-inset-bottom :border-radius="0" height="100%">
|
|
<view style="padding:34rpx 44rpx">
|
|
<u-form :model="form" :rules="rules" ref="uForm1" label-width="140"
|
|
:error-type="['toast']">
|
|
<u-form-item label="姓名" prop="name" required>
|
|
<u-input v-model="form.name" placeholder="请输入姓名"/>
|
|
</u-form-item>
|
|
<u-form-item label="身份证号" prop="idcard">
|
|
<u-input v-model="form.idcard" placeholder="请输入身份证号" type="idcard" />
|
|
</u-form-item>
|
|
<u-form-item label="手机号" prop="mobile" required>
|
|
<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" />
|
|
</u-form-item>
|
|
<u-form-item label="有无行动能力" prop="is_move">
|
|
<u-radio-group v-model="form.is_move" slot="right" active-color="#c20d12">
|
|
<u-radio :name="1">有</u-radio>
|
|
<u-radio :name="0">无</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item label="地址" prop="address" required>
|
|
<view style="display:flex;align-items:center;width:100%;gap:12rpx;">
|
|
<picker :range="provinceList.map(item => item.name)" @change="onProvinceChange">
|
|
<view class="picker-input">
|
|
{{ form.province || '请选择省' }}
|
|
<u-icon name="arrow-down" size="18" color="#999" style="margin-left:8rpx;" />
|
|
</view>
|
|
</picker>
|
|
<picker :range="cityList.map(item => item.name)" @change="onCityChange">
|
|
<view class="picker-input">
|
|
{{ form.city || '请选择市' }}
|
|
<u-icon name="arrow-down" size="18" color="#999" style="margin-left:8rpx;" />
|
|
</view>
|
|
</picker>
|
|
<picker :range="districtList.map(item => item.name)" @change="onDistrictChange">
|
|
<view class="picker-input">
|
|
{{ form.district || '请选择区' }}
|
|
<u-icon name="arrow-down" size="18" color="#999" style="margin-left:8rpx;" />
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view style="margin-top:16rpx;">
|
|
<u-input v-model="form.address" placeholder="请输入详细地址" type="textarea"/>
|
|
<view style="color:blue" @click="openMap">地图选点</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="备注" prop="remark">
|
|
<u-input v-model="form.remark" placeholder="请输入备注" />
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<view class="archive-btn">
|
|
<u-button shape="circle" ripple :custom-style="btnStyle1" @click="cancel">取消</u-button>
|
|
|
|
<u-button shape="circle" ripple :custom-style="btnStyle" @click="save">确认</u-button>
|
|
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
btnStyle: {
|
|
'background-image': 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
|
|
'font-weight': '500',
|
|
'font-size': '28rpx',
|
|
'color': '#fff',
|
|
'width': '436rpx',
|
|
'margin': '0 auto',
|
|
'letter-spacing': '2rpx',
|
|
'width':'80%'
|
|
},
|
|
btnStyle1: {
|
|
'background-image': 'linear-gradient(-90deg, #ddd 0%, #ccc 94%, #eee 100%)',
|
|
'font-weight': '500',
|
|
'font-size': '28rpx',
|
|
'color': '#fff',
|
|
'width': '436rpx',
|
|
'margin': '0 auto',
|
|
'letter-spacing': '2rpx',
|
|
'width':'80%'
|
|
},
|
|
isShow: false,
|
|
form: {
|
|
name: '',
|
|
idcard:'',
|
|
mobile:'',
|
|
is_move:1,
|
|
address:'',
|
|
remark:'',
|
|
province: '',
|
|
province_id: '',
|
|
city: '',
|
|
city_id: '',
|
|
district: '',
|
|
district_id: ''
|
|
},
|
|
rules: {
|
|
name: [{
|
|
required: true,
|
|
message: '请输入姓名',
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
// idcard: [{
|
|
// required: true,
|
|
// message: '请输入身份证号',
|
|
// trigger: ['blur', 'change']
|
|
// }, {
|
|
// validator: (rule, value, callback) => {
|
|
// return this.$u.test.idCard(value);
|
|
// },
|
|
// message: '身份证号不正确',
|
|
// trigger: ['change', 'blur'],
|
|
// }],
|
|
mobile: [{
|
|
required: true,
|
|
message: '请输入手机号',
|
|
trigger: ['blur', 'change']
|
|
}, {
|
|
validator: (rule, value, callback) => {
|
|
return this.$u.test.mobile(value);
|
|
},
|
|
message: '手机号码不正确',
|
|
trigger: ['change', 'blur'],
|
|
}],
|
|
address: [{
|
|
validator: (rule, value, callback) => {
|
|
if (
|
|
this.form.province &&
|
|
this.form.city &&
|
|
this.form.district &&
|
|
this.form.address
|
|
) {
|
|
callback(); // 校验通过
|
|
} else {
|
|
callback(new Error('请完善地址信息')); // 校验不通过
|
|
}
|
|
},
|
|
trigger: ['blur', 'change']
|
|
}]
|
|
},
|
|
isShowArea: false,
|
|
areaColumns: [],
|
|
areaData: [],
|
|
provinceList: [],
|
|
cityList: [],
|
|
districtList: [],
|
|
isShowProvince: false,
|
|
isShowCity: false,
|
|
isShowDistrict: false,
|
|
selectedProvinceIndex: 0,
|
|
selectedCityIndex: 0
|
|
};
|
|
},
|
|
watch: {
|
|
mobile: {
|
|
handler(newVal) {
|
|
console.log('mobile prop changed:', newVal);
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs.uForm1.setRules(this.rules);
|
|
this.loadProvinceList();
|
|
},
|
|
methods: {
|
|
async loadProvinceList() {
|
|
const res = await this.$u.api.userArchiveArea({ level: 1 });
|
|
this.provinceList = res.data;
|
|
},
|
|
// 打开地图选点
|
|
openMap(){
|
|
console.log("chooseLocation")
|
|
let that = this
|
|
uni.chooseLocation({
|
|
success(res){
|
|
console.log("chooseLocationres",res)
|
|
if (res.errMsg === 'chooseLocation:ok') {
|
|
that.form.address = res.address
|
|
console.log('位置名称：' + res.name);
|
|
console.log('详细地址：' + res.address);
|
|
console.log('纬度：' + res.latitude);
|
|
console.log('经度：' + res.longitude);
|
|
}
|
|
},
|
|
fail(err){
|
|
uni.showToast({
|
|
title:'打开地图失败',
|
|
icon:'none'
|
|
})
|
|
console.log("err",err)
|
|
}
|
|
});
|
|
},
|
|
save() {
|
|
|
|
this.$refs.uForm1.validate(valid => {
|
|
let that = this
|
|
if (valid) {
|
|
console.log('验证通过');
|
|
console.log("form",this.form)
|
|
console.log("that.$u.api.userArchiveSave",that.$u.api.userArchiveSave)
|
|
console.log("this.$u.api.userArchiveSave",this.$u.api.userArchiveSave)
|
|
this.$u.api.userArchiveSave({
|
|
...that.form,
|
|
user_mobile: this.mobile
|
|
}).then(res=>{
|
|
uni.showToast({
|
|
title:"更新成功",
|
|
icon:'none',
|
|
success() {
|
|
that.isShow = false
|
|
that.$emit("addSuccess",true)
|
|
}
|
|
})
|
|
}).then(err=>{
|
|
console.log("err",err)
|
|
})
|
|
|
|
} else {
|
|
console.log('验证失败');
|
|
}
|
|
});
|
|
|
|
},
|
|
cancel(){
|
|
this.$refs.uForm1.resetFields()
|
|
this.form = {
|
|
name: '',
|
|
idcard:'',
|
|
mobile:'',
|
|
is_move:1,
|
|
address:'',
|
|
remark:'',
|
|
province: '',
|
|
province_id: '',
|
|
city: '',
|
|
city_id: '',
|
|
district: '',
|
|
district_id: ''
|
|
}
|
|
this.isShow = false
|
|
},
|
|
openAreaPicker() {
|
|
this.isShowArea = true
|
|
},
|
|
onAreaColumnChange(columnIndex, value) {
|
|
this.areaData[columnIndex] = value
|
|
},
|
|
onAreaConfirm() {
|
|
this.isShowArea = false
|
|
this.form.address = this.areaData.join('')
|
|
},
|
|
async onProvinceChange(e) {
|
|
const index = e.detail.value;
|
|
const province = this.provinceList[index];
|
|
this.form.province = province.name;
|
|
this.form.province_id = province.code;
|
|
const res = await this.$u.api.userArchiveArea({ level: 2, pcode: province.code });
|
|
this.cityList = res.data;
|
|
this.form.city = '';
|
|
this.form.city_id = '';
|
|
this.form.district = '';
|
|
this.form.district_id = '';
|
|
this.districtList = [];
|
|
},
|
|
async onCityChange(e) {
|
|
const index = e.detail.value;
|
|
const city = this.cityList[index];
|
|
this.form.city = city.name;
|
|
this.form.city_id = city.code;
|
|
const res = await this.$u.api.userArchiveArea({ level: 3, pcode: city.code });
|
|
this.districtList = res.data;
|
|
this.form.district = '';
|
|
this.form.district_id = '';
|
|
},
|
|
onDistrictChange(e) {
|
|
const index = e.detail.value;
|
|
const district = this.districtList[index];
|
|
this.form.district = district.name;
|
|
this.form.district_id = district.code;
|
|
}
|
|
},
|
|
props: {
|
|
mobile: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #fff;
|
|
}
|
|
.container {
|
|
filter: drop-shadow(0 0 10rpx rgba(211, 211, 214, 0.3));
|
|
background-color: #ffffff;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99999;
|
|
|
|
::v-deep .u-input__input {
|
|
text-align: right;
|
|
}
|
|
.archive-btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
u-button{
|
|
width:50%;
|
|
}
|
|
}
|
|
}
|
|
</style> |