<template>
|
<view>
|
<view class="block__title">基本信息</view>
|
<view class="cu-form-group">
|
<view class="title">姓名</view>
|
<input v-model="name" placeholder="必填,请输入成员名称" />
|
</view>
|
<view class="cu-form-group">
|
<view class="title">身份证</view>
|
<input v-model="idCard" placeholder="选填,请输入身份证" @blur="idCardChange" />
|
</view>
|
<view class="cu-form-group">
|
<view class="title">性别</view>
|
<picker :value="sexIndex" :range="sexArr" @change="sexChange">
|
<view class="picker">
|
{{ sexArr[sexIndex] }}
|
</view>
|
</picker>
|
</view>
|
<view class="cu-form-group">
|
<view class="title">人员角色</view>
|
<picker :value="typeCdIndex" :range="typeCds" range-key="name" @change="_changeTypeCd">
|
<view class="picker">
|
{{typeCds[typeCdIndex].name}}
|
</view>
|
</picker>
|
</view>
|
<view class="cu-form-group">
|
<view class="title">地址</view>
|
<input type="text" v-model="address" placeholder="选填,请输入地址" />
|
</view>
|
<view class="cu-form-group">
|
<view class="title">手机号</view>
|
<input v-model="link" placeholder="选填,请输入手机号" />
|
</view>
|
|
<view class="block__title">相关图片</view>
|
<uploadImageAsync ref="vcUploadRef" :communityId="communityId" :maxPhotoNum="uploadImage.maxPhotoNum"
|
:canEdit="uploadImage.canEdit" :title="uploadImage.imgTitle" @sendImagesData="sendImagesData">
|
</uploadImageAsync>
|
|
<view class="flex flex-direction margin-top margin-bottom">
|
<button class="cu-btn bg-green margin-tb-sm lg" @click="submitOwnerMember()">提交</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import context from '../../lib/java110/Java110Context.js';
|
import {
|
isIDCard,
|
idCardInfoExt
|
} from '../../lib/java110/utils/StringUtil.js';
|
import uploadImageAsync from "../../components/vc-upload-async/vc-upload-async.vue";
|
const constant = context.constant;
|
|
export default {
|
data() {
|
return {
|
sexArr: ["男", "女"],
|
sexIndex: 0,
|
name: "",
|
link: "",
|
idCard: "",
|
address: "",
|
photos: '',
|
typeCds: [{
|
value: '3',
|
name: '家庭成员'
|
},
|
{
|
value: '2',
|
name: '租客'
|
},
|
{
|
value: '4',
|
name: '公司员工'
|
},
|
{
|
value: '99',
|
name: '其他'
|
}
|
],
|
typeCdIndex: 0,
|
personRole: '3',
|
memberId: "-1",
|
communityId: "",
|
ownerId: "",
|
uploadImage: {
|
maxPhotoNum: 1,
|
imgTitle: '图片上传',
|
canEdit: true
|
}
|
};
|
},
|
|
components: {
|
uploadImageAsync
|
},
|
|
onLoad: function(options) {
|
context.onLoad(options);
|
this.memberId = options.memberId; // 获取传入的 memberId
|
this.getOwnerDetailsByIndex(this.memberId); // 调用方法获取成员详细信息
|
},
|
onShow: function() {
|
this._initData();
|
},
|
methods: {
|
sendImagesData(e) {
|
this.photos = e[0].url; // 假设返回的是数组，取第一个图片的 url
|
},
|
_initData: function() {
|
let that = this;
|
that.owners = [];
|
context.getOwner(function(_owner) {
|
that.communityId = _owner.communityId;
|
that.ownerId = _owner.ownerId;
|
that.ownerTypeCd = _owner.ownerTypeCds;
|
});
|
},
|
getOwnerDetailsByIndex(memberId) {
|
let that = this;
|
let params = {
|
"communityId": that.communityId,
|
"ownerId": that.ownerId,
|
"memberId": memberId, // 使用 memberId 获取对应的成员信息
|
};
|
|
context.request({
|
url: constant.url.queryOwnerMembers, // 这个是和 list 页面相同的接口
|
header: context.getHeaders(),
|
method: "GET",
|
data: params,
|
success: function(res) {
|
if (res.data.code === 0) {
|
const memberData = res.data.data[0]; // 根据传入的 memberId 获取对应的成员数据
|
console.log("memberData:", memberData);
|
that.name = memberData.name;
|
that.idCard = memberData.idCard;
|
that.link = memberData.link;
|
that.address = memberData.address;
|
that.sexIndex = memberData.sex === '0' ? 0 : 1; // 根据性别设置索引
|
let personRoleNumber = parseInt(memberData.personRole, 10); // 将字符串转换为数字
|
that.typeCdIndex = that.typeCds.findIndex(type => type.value == personRoleNumber); // 根据角色设置索引
|
that.photos = memberData.ownerPhotoUrl || ""; // 获取图片 URL
|
} else {
|
uni.showToast({
|
title: '加载成员信息失败',
|
icon: 'none'
|
});
|
}
|
},
|
fail: function() {
|
uni.showToast({
|
title: '服务器异常',
|
icon: 'none'
|
});
|
}
|
});
|
},
|
submitOwnerMember() {
|
let obj = {
|
sex: this.sexArr[this.sexIndex] === '男' ? 0 : 1,
|
name: this.name,
|
link: this.link,
|
ownerId: this.ownerId,
|
memberId: this.memberId,
|
communityId: this.communityId,
|
idCard: this.idCard,
|
personRole: this.personRole,
|
address: this.address,
|
ownerPhotoUrl: this.photos
|
};
|
|
let msg = "";
|
if (!obj.name) {
|
msg = "请填写姓名";
|
}else if (obj.link == "") {
|
msg = "请填写手机号";
|
}else if (!this.validatePhoneNumber(obj.link)) { // 添加手机号格式校验
|
msg = "手机号格式不正确";
|
}
|
if (msg) {
|
uni.showToast({
|
title: msg,
|
icon: 'none',
|
duration: 2000
|
});
|
} else {
|
uni.showLoading({
|
title: '提交中'
|
});
|
context.request({
|
url: constant.url.updateOwnerMembers,
|
header: context.getHeaders(),
|
method: "POST",
|
data: obj,
|
success: function(res) {
|
uni.hideLoading();
|
if (res.data.code === 0) {
|
uni.navigateBack();
|
return;
|
}
|
uni.showToast({
|
title: res.data.msg,
|
icon: 'none',
|
duration: 2000
|
});
|
},
|
fail: function() {
|
uni.hideLoading();
|
uni.showToast({
|
title: "服务器异常",
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
});
|
}
|
},
|
// 新增手机号格式校验的方法
|
validatePhoneNumber(phone) {
|
const phoneRegex = /^1[3-9]\d{9}$/; // 中国手机号的正则表达式
|
return phoneRegex.test(phone); // 检查手机号是否符合格式
|
},
|
_changeTypeCd(e) {
|
this.typeCdIndex = e.detail.value;
|
this.personRole = this.typeCds[this.typeCdIndex].value;
|
},
|
idCardChange() {
|
let idCard = this.idCard;
|
if (!isIDCard(idCard)) {
|
uni.showToast({
|
title: '身份证号有误',
|
icon: 'none',
|
});
|
return;
|
}
|
},
|
sexChange(e) {
|
this.sexIndex = e.detail.value;
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.block__title {
|
margin: 0;
|
font-weight: 400;
|
font-size: 14px;
|
color: rgba(69, 90, 100, .6);
|
padding: 40rpx 30rpx 20rpx;
|
}
|
|
.button_up_blank {
|
height: 40rpx;
|
}
|
</style>
|
