<template>
|
<view class="content">
|
<view v-if="info.auditStatus === 2" class="">
|
<view class="flex a-center color2 fs-44 font-bold">
|
<image src="/static/info/审核不通过@2x.png" mode="aspectFill" class="w-46 h-46 mr-15 ml-31"></image>
|
审核不通过
|
</view>
|
<view class="fs-27 color2 lh-38 ml-27 mt-15 mb-23">
|
{{ info.refuseReason }}
|
</view>
|
</view>
|
<view v-if="info.auditStatus === 0" class="">
|
<view class="flex a-center color2 fs-44 font-bold pb-38">
|
<image src="/static/info/审核中@2x.png" mode="aspectFill" class="w-46 h-46 mr-15 ml-31"></image>
|
审核中
|
</view>
|
</view>
|
<view class="container">
|
<view class="formItem border1">
|
<view class="label">
|
姓名
|
</view>
|
<view class="value">
|
<input type="text" v-model="form.name" :disabled="disable" placeholder="请输入姓名"
|
placeholder-class="placeholderStyle" class="fs-27" />
|
</view>
|
</view>
|
<view class="formItem border1">
|
<view class="label">
|
身份证号
|
</view>
|
<view class="value flex1">
|
<input type="text" v-model="form.idNumber" :disabled="disable" placeholder="请输入身份证号"
|
placeholder-class="placeholderStyle" class="fs-27" />
|
</view>
|
</view>
|
<view class="formItem border1">
|
<view class="label">
|
服务社区
|
</view>
|
<view @tap.stop="showSelectCommunity" class="value flex j-between a-center flex1">
|
<text v-if="address">{{ address }}</text>
|
<text v-else class="placeholderStyle">请选择服务社区</text>
|
<image src="/static/Appeal/left.png" mode="aspectFill" class="h-19 w-19 ml-10"></image>
|
</view>
|
</view>
|
<view class="formItem border1">
|
<view class="label">
|
服务对象
|
</view>
|
<view class="value">
|
<input type="text" v-model="form.serviceTarget" :disabled="disable" placeholder="请输入服务对象"
|
placeholder-class="placeholderStyle" class="fs-27" />
|
</view>
|
</view>
|
<view class="formItem border1">
|
<view class="label">
|
所在党组织
|
</view>
|
<view class="value">
|
<input type="text" v-model="form.partyOrganization" :disabled="disable" placeholder="请输入所在党组织"
|
placeholder-class="placeholderStyle" class="fs-27" />
|
</view>
|
</view>
|
<view class="color1 fs-27 mt-35 ml-31">
|
上传头像
|
</view>
|
<view class="flex wrap mt-27 pl-31">
|
<view class="relative mr-15" v-for="(item, index) in localImageUrls" :key="index">
|
<image v-if="item != 'loading'" :src="item" class="w-140 h-140 shrink0 br-8" />
|
<view v-if="item != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8">
|
<view class="absolute flex a-center j-between px-34"
|
style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: calc(100% - 68rpx);">
|
<image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" />
|
<image @tap="delImg(item)" src="@/static/Appeal/trash.png" class="w-19 h-19" />
|
</view>
|
</view>
|
</view>
|
<!-- <view v-if="imgUrls.includes('loading')" class="w-140 h-140 flex a-center j-center mr-15 border2 br-8">
|
<u-loading-icon></u-loading-icon>
|
</view> -->
|
<image v-if="localImageUrls.length == 0" @tap="uploadImg(1)" src="/static/Appeal/add.png"
|
class="w-140 h-140 shrink0" />
|
</view>
|
|
<view v-if="detail == 1" class="h-212">
|
|
</view>
|
<view v-else class="h-146">
|
|
</view>
|
</view>
|
<view v-if="detail == 1" class="footer">
|
<view class="tip">
|
可编辑后重新提交审核！
|
</view>
|
<view class="btns">
|
<view class="cancel" @click="back">
|
关闭
|
</view>
|
<view class="ok" @click="save">
|
{{ disable ? '编辑' : '保存' }}
|
</view>
|
</view>
|
</view>
|
<view v-else class="footerButton">
|
<view class="btns">
|
<view @click="save" class="ok fs-35 font-bold">
|
保存
|
</view>
|
</view>
|
</view>
|
<!-- 选择服务社区 -->
|
<u-popup :show="selectPopup" round="16rpx" @close="selectPopup = false" :safe-area-inset-bottom="false"
|
@open="openSelectPopup">
|
<view class="relative pb-40">
|
<image @tap.stop="selectPopup = false" src="@/static/closeImg.png" class="w-35 h-35 absolute"
|
style="right: 31rpx;top: 46rpx;" />
|
<view class="txt-center pt-38 pb-40 fs-35 lh-48 font-bold">请选择服务社区</view>
|
<view class="flex a-center j-between txt-center py-10 fs-27 font-bold bgColor1">
|
<view class="flex1">区县</view>
|
<view class="flex1">街道</view>
|
<view class="flex1">社区</view>
|
</view>
|
<view class="mb-20">
|
<picker-view :value="value" @change="bindChange" class="picker-view" immediate-change>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in county" :key="index">
|
{{ item.name }}
|
</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in street" :key="index">
|
{{ item.name }}
|
</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in community" :key="index">
|
{{ item.name }}
|
</view>
|
</picker-view-column>
|
</picker-view>
|
</view>
|
<view class="submitBtn" @click="chooseCommunity">确认</view>
|
</view>
|
</u-popup>
|
<CustomPopup ref="savePop" :isOneBtn="true" @comfirm="back">
|
<view class="txt-center fs-31 lh-42 pt-44 pb-35 color5">
|
<view class="">
|
提交成功，党员信息已提交平
|
</view>
|
台审核！
|
</view>
|
</CustomPopup>
|
</view>
|
</template>
|
|
<script>
|
import config from '@/config/index.js'
|
import {
|
getRegionTree,
|
apply,
|
getDetail,
|
edit
|
} from './service.js'
|
export default {
|
data() {
|
return {
|
imgUrls: [],
|
localImageUrls: [],
|
selectPopup: false,
|
value: [0, 0, 0],
|
confirmValue: [0, 0, 0],
|
county: [], //区县
|
street: [], //街道
|
community: [], //社区
|
form: {},
|
address: '',
|
detail: '',
|
disable: false,
|
info: {},
|
loading: false, // 新增加载状态
|
uploading: false // 新增上传状态
|
}
|
},
|
onLoad(e) {
|
this.getTree()
|
if (e.detail == 1) {
|
this.detail = e.detail
|
this.disable = true
|
}
|
if (e.detail == 2) {
|
this.detail = e.detail
|
}
|
},
|
methods: {
|
// 返回小程序主页
|
back() {
|
let userInfo = uni.getStorageSync('userInfo')
|
if (userInfo.isAdmin) {
|
uni.navigateBack()
|
}
|
},
|
// 提交（优化后）
|
async save() {
|
if (this.detail && this.disable) {
|
this.disable = false
|
return
|
}
|
if (this.loading) return;
|
this.loading = true;
|
|
try {
|
// 必填字段校验
|
const requiredFields = [{
|
field: this.form.name?.trim(),
|
message: '请输入姓名'
|
},
|
{
|
field: this.form.idNumber?.trim(),
|
message: '请输入身份证号'
|
},
|
{
|
field: this.form.districtsCode,
|
message: '请选择区县'
|
},
|
{
|
field: this.form.streetId,
|
message: '请选择街道'
|
},
|
{
|
field: this.form.communityId,
|
message: '请选择社区'
|
},
|
{
|
field: this.imgUrls[0],
|
message: '请上传头像'
|
}
|
];
|
|
const invalidField = requiredFields.find(({
|
field
|
}) => !field);
|
if (invalidField) {
|
uni.showToast({
|
title: invalidField.message,
|
icon: 'none'
|
});
|
return;
|
}
|
|
// 身份证格式校验
|
if (!this.validateIdNumber(this.form.idNumber)) {
|
uni.showToast({
|
title: '身份证号码格式不正确',
|
icon: 'none'
|
});
|
return;
|
}
|
|
this.form.avatar = this.imgUrls[0];
|
if (this.detail) {
|
let res = await edit(this.form);
|
console.log(res);
|
} else {
|
let res = await apply(this.form);
|
console.log(res);
|
}
|
this.$refs.savePop.showPopup();
|
this.loading = false;
|
} catch (error) {
|
|
} finally {
|
this.loading = false;
|
}
|
},
|
|
// 新增身份证验证方法
|
validateIdNumber(id) {
|
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
return reg.test(id);
|
},
|
//选择服务社区
|
chooseCommunity() {
|
this.form.districts = this.county[this.value[0]].name
|
this.form.districtsCode = this.county[this.value[0]].id
|
this.form.street = this.street[this.value[1]].name
|
this.form.streetId = this.street[this.value[1]].id
|
this.form.community = this.community[this.value[2]].name
|
this.form.communityId = this.community[this.value[2]].id
|
|
this.address = `${this.form.districts}-${this.form.street}-${this.form.community}`;
|
this.confirmValue = this.value
|
this.selectPopup = false
|
},
|
// 获取社区树结构（优化后）
|
async getTree() {
|
try {
|
let userInfo = uni.getStorageSync('userInfo');
|
const res = await getRegionTree();
|
if (this.detail) {
|
const res1 = await getDetail();
|
this.info = res1.data
|
userInfo = res1.data
|
this.form.name = userInfo.name
|
this.form.idNumber = userInfo.idNumber
|
this.form.serviceTarget = userInfo.serviceTarget
|
this.form.partyOrganization = userInfo.partyOrganization
|
this.form.avatar = userInfo.avatar
|
this.localImageUrls = [userInfo.avatar]
|
this.imgUrls = [userInfo.avatar]
|
}
|
this.county = res.data;
|
if (userInfo?.districtsCode && userInfo?.streetId && userInfo?.communityId) {
|
const index1 = this.county.findIndex(item => userInfo.districtsCode === item.id);
|
if (index1 !== -1) {
|
this.street = this.county[index1].children;
|
const index2 = this.street.findIndex(item => userInfo.streetId === item.id);
|
if (index2 !== -1) {
|
this.community = this.street[index2].children;
|
const index3 = this.community.findIndex(item => userInfo.communityId === item.id);
|
if (index3 !== -1) {
|
this.confirmValue = [index1, index2, index3];
|
this.form = {
|
...this.form,
|
districts: this.county[index1].name,
|
districtsCode: this.county[index1].id,
|
street: this.street[index2].name,
|
streetId: this.street[index2].id,
|
community: this.community[index3].name,
|
communityId: this.community[index3].id
|
};
|
this.address = `${this.form.districts}-${this.form.street}-${this.form.community}`;
|
}
|
}
|
}
|
}
|
} catch (error) {
|
uni.showToast({
|
title: '获取社区信息失败',
|
icon: 'none'
|
});
|
}
|
},
|
// 切换社区
|
bindChange(e, index) {
|
if (e.detail.value[0] != this.value[0]) {
|
e.detail.value[1] = 0
|
e.detail.value[2] = 0
|
}
|
if (e.detail.value[1] != this.value[1]) {
|
e.detail.value[2] = 0
|
}
|
this.value = e.detail.value
|
this.street = this.county[this.value[0]].children
|
this.community = this.street[this.value[1]].children
|
},
|
showSelectCommunity() {
|
if (!this.disable) {
|
this.selectPopup = true
|
}
|
},
|
delImg(item) {
|
if (!this.disable) {
|
this.localImageUrls = this.localImageUrls.filter(i => i != item)
|
this.imgUrls = this.imgUrls.filter(i => i != item)
|
}
|
},
|
viewImage(item) {
|
uni.previewImage({
|
urls: [item]
|
})
|
},
|
// 图片上传（优化后）
|
uploadImg() {
|
if (this.disable) return;
|
this.uploading = true;
|
|
uni.chooseImage({
|
count: 1,
|
success: async (chooseImageRes) => {
|
try {
|
this.imgUrls.push('loading');
|
const imgPathList = chooseImageRes.tempFilePaths;
|
if (imgPathList.length > 0) {
|
const res = await uni.uploadFile({
|
url: config.imageUrl,
|
filePath: imgPathList[0],
|
timeout: 1000 * 45,
|
name: 'file',
|
header: {
|
Authorization: uni.getStorageSync('token')
|
}
|
});
|
|
const data = JSON.parse(res.data);
|
if (data.code === 200) {
|
this.imgUrls = this.imgUrls.filter(item => item !== 'loading');
|
this.imgUrls.push(data.data);
|
this.localImageUrls.push(imgPathList[0]);
|
} else {
|
throw new Error('上传失败');
|
}
|
}
|
} catch (error) {
|
this.imgUrls = this.imgUrls.filter(item => item !== 'loading');
|
uni.showToast({
|
title: '上传失败，请重新上传',
|
icon: 'none',
|
mask: true
|
});
|
}
|
},
|
fail: () => {
|
uni.showToast({
|
title: '选择图片失败',
|
icon: 'none'
|
});
|
},
|
complete: () => {
|
this.uploading = false;
|
}
|
});
|
},
|
openSelectPopup() {
|
this.value = this.confirmValue
|
this.street = this.county[this.value[0]].children
|
this.community = this.street[this.value[1]].children
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.bgColor1 {
|
background: rgba(216, 216, 216, 0.2);
|
}
|
|
.content {
|
background-image: url('/static/home/bg@2x.png');
|
background-size: 750rpx 648rpx;
|
padding-top: 100rpx;
|
|
.container {
|
background: #FFFFFF;
|
border-radius: 35rpx 35rpx 0 0;
|
|
.formItem {
|
display: flex;
|
align-items: center;
|
height: 112rpx;
|
margin: 0 31rpx;
|
font-size: 27rpx;
|
|
.label {
|
opacity: 0.88;
|
font-weight: 400;
|
width: 219rpx;
|
}
|
|
.value {
|
font-weight: 600;
|
}
|
}
|
}
|
}
|
|
.footerButton {
|
position: fixed;
|
bottom: 50rpx;
|
left: 0;
|
right: 0;
|
margin: auto;
|
width: 688rpx;
|
text-align: center;
|
height: 96rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
line-height: 96rpx;
|
color: #fff;
|
border-radius: 48rpx;
|
}
|
|
.footer {
|
position: fixed;
|
bottom: 0;
|
box-shadow: 0rpx -4rpx 27rpx 0rpx rgba(0, 0, 0, 0.08);
|
width: 100%;
|
background-color: #fff;
|
|
.tip {
|
text-align: center;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #FC8D55;
|
padding-top: 31rpx;
|
}
|
|
.btns {
|
display: flex;
|
justify-content: center;
|
font-size: 27rpx;
|
margin-top: 33rpx;
|
margin-bottom: 33rpx;
|
|
.cancel {
|
width: 331rpx;
|
height: 77rpx;
|
border: 2rpx solid rgba(252, 141, 85, 1);
|
border-radius: 38rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #FF4948;
|
}
|
|
.ok {
|
width: 331rpx;
|
height: 77rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: 27rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
|
.border1 {
|
border-bottom: 2rpx solid #EDEEEF;
|
}
|
|
.color1 {
|
color: #4C4C4C;
|
}
|
|
.color2 {
|
color: #fff;
|
}
|
|
.color5 {
|
color: #666160;
|
}
|
|
.bgcolor5 {
|
background-color: rgba(0, 0, 0, .23);
|
}
|
|
.placeholderStyle {
|
color: #B2B2B2;
|
}
|
|
.picker-view {
|
height: 460rpx;
|
font-size: 35rpx;
|
}
|
|
/deep/.picker-view {
|
margin: 0 auto;
|
|
.item {
|
text-align: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #333333;
|
line-height: 50rpx;
|
}
|
}
|
|
.submitBtn {
|
width: calc(100% - 62rpx);
|
margin: 0 31rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
font-weight: 600;
|
font-size: 35rpx;
|
color: #fff;
|
}
|
</style>
|
