<template>
<view class="info">
<!-- 详情 -->
<view class="forms detail" v-if="!updflag">
<view class="items">
<view class="label flex1">照片</view>
<view class="flexr">
<view class="addbox">
<image v-if="datainfo.avatar" :src="baseUrl+datainfo.avatar" class="phoimg"></image>
<image v-else :src="dphoimg" class="adimg"></image>
</view>
</view>
</view>
<view class="items">
<view class="label">姓名</view>
<view class="itetit">{{datainfo.name}}</view>
</view>
<view class="items">
<view class="label">身份证号</view>
<view class="itetit">{{datainfo.card}}</view>
</view>
<view class="items">
<view class="label">界别</view>
<view class="itetit">{{kaType(datainfo.boundary,jblist)}}</view>
</view>
<!-- <view class="items">
<view class="label">党派</view>
<view class="itetit">{{kaType(datainfo.partyAffiliation,dplist)}}</view>
</view> -->
<view class="items">
<view class="label">级别</view>
<view class="itetit">{{kaType(datainfo.grade,jeblist)}}</view>
</view>
<view class="items">
<view class="label">工作单位及职务</view>
<view class="itetit">{{datainfo.unit}}</view>
</view>
<view class="items">
<view class="label">乡镇(经开区)委员工作室</view>
<view class="itetit">{{kaType(datainfo.studio,wybgslist)}}</view>
</view>
<view class="items">
<view class="label">联系方式</view>
<view class="itetit">{{datainfo.phonenumber}}</view>
</view>
<view class="brbtns" @click="updflag=true">修改信息</view>
</view>
<!-- 修改 -->
<uni-forms :modelValue="datainfo" ref="form" :rules="rules" class="forms" v-else>
<view class="items">
<view class="flex1">
<view class="label"><text class="cir">*</text>照片</view>
<view class="addtip">请上传一寸免冠照片，大小不超过300k</view>
</view>
<view class="flexr">
<view class="addbox" @click.stop="getphotoFn">
<image v-if="datainfo.avatar" :src="baseUrl+datainfo.avatar" class="phoimg"></image>
<image v-else :src="dphoimg" class="adimg"></image>
</view>
</view>
</view>
<uni-forms-item label="姓名" name="name" required>
<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="身份证号" name="card" required>
<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.card" placeholder="请输入身份证号" />
</uni-forms-item>
<picker range-key='label' :value="jbidx" :range="jblist" @change='bindDateChangea'>
<uni-forms-item label="界别" name="boundary" required>
<view class="lbtabp">
<view v-if="datainfo.boundary&&!boundary">{{statusFormat(datainfo.boundary,jblist,'jb')}}</view>
<view v-else :class="boundary?'':'coa'">{{boundary||"请选择界别"}}</view>
<!-- <view :class="kaType(datainfo.boundary,jblist)?'':'coa'">{{kaType(datainfo.boundary,jblist) || "请选择界别"}}</view> -->
<image :src="rimg" class="rimg"></image>
</view>
</uni-forms-item>
</picker>
<!-- <picker range-key='label' :value="tpidx" :range="dplist" @change='bindDateChangeb'>
<uni-forms-item label="党派" name="partyAffiliation" required>
<view class="lbtabp">
<view v-if="datainfo.partyAffiliation&&!partyAffiliation">{{statusFormat(datainfo.partyAffiliation,dplist,'dp')}}</view>
<view v-else :class="partyAffiliation?'':'coa'">{{partyAffiliation||"请选择党派"}}</view>
<image :src="rimg" class="rimg"></image>
</view>
</uni-forms-item>
</picker> -->
<picker range-key='label' :value="jebidx" :range="jeblist" @change='bindDateChangec'>
<uni-forms-item label="级别" name="grade" required>
<view class="lbtabp">
<view v-if="datainfo.grade&&!grade">{{statusFormat(datainfo.grade,jeblist,'jeb')}}</view>
<view v-else :class="grade?'':'coa'">{{grade||"请选择级别"}}</view>
<image :src="rimg" class="rimg"></image>
</view>
</uni-forms-item>
</picker>
<uni-forms-item label="工作单位及职务" name="unit" required>
<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.unit" placeholder="请输入工作单位及职务" />
</uni-forms-item>
<uni-forms-item label="联系地址" name="address" required>
<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.address" placeholder="请输入联系地址" />
</uni-forms-item>
<picker range-key='label' :value="wybgsidx" :range="wybgslist" @change='bindDateChangeb'>
<uni-forms-item label="乡镇(经开区)委员工作室" name="studio" required>
<view class="lbtabp">
<view v-if="datainfo.studio&&!studio">{{statusFormat(datainfo.studio,wybgslist,'wybgs')}}</view>
<view v-else :class="studio?'':'coa'">{{studio||"请选择委员工作室"}}</view>
<image :src="rimg" class="rimg"></image>
</view>
</uni-forms-item>
</picker>
<uni-forms-item label="联系方式" name="phonenumber" required>
<uni-easyinput :inputBorder="false" type="number" v-model="datainfo.phonenumber" placeholder="请输入联系方式" />
</uni-forms-item>
<view class="brbtns" v-if="checkPermi(['member:info:add'])&&ptype=='add'||checkPermi(['member:info:edit'])&&ptype=='edit'" @click="getSubmit">确认</view>
</uni-forms>
</view>
</template>
<script>
import store from "@/store"
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import config from '@/config'
const baseUrl = config.baseUrl
import { getToken } from '@/utils/auth'
import { selectValue,uploadmore,selectValueKey } from '@/utils/common.js';
import {getInfoDetailFn,getInfoEditFn,getinfoAddFn} from "@/api/mine/report.js"
import {getDictionaryFn} from "@/api/mine/register.js"
export default{
data(){
return{
dphoimg:require("@/work/static/images/dpho.png"),
rimg:require("@/work/static/images/rimg.png"),
readOnly:false,
datainfo:{
"name":"",//委员姓名
"card":"",//委员身份证号
"boundary":"",//界别
// "partyAffiliation":"",//党派
"grade":'',
"phonenumber":"",//手机号码
"avatar":"",//委员照片地址
"unit":"",//工作单位及职务
"studio":"",//乡镇（经开区）委员工作室
"address":'',//地址
},
tzlbList:[{label: '新闻',value: 0},{label: '开会',value: 1}],
tzlbidx:'',
updflag:false,
jblist:[],
wybgslist:[],
baseUrl:'',
jbidx:[],
wybgsidx:[],
jeblist:[],
ptype:'',
rules: {
// avatar: {rules: [{required: true,errorMessage: '请上传委员照片'}]},
name: {rules: [{required: true,errorMessage: '请输入姓名',}]},
card: {rules: [{required: true,errorMessage: '请输入身份证号' } ]},
boundary: {rules: [{required: true,errorMessage: '请选择界别'} ]},
// partyAffiliation: {rules: [{required: true,errorMessage: '请选择党派'} ]},
grade: {rules: [{required: true,errorMessage: '请选择级别'} ]},
address: {rules: [{required: true,errorMessage: '请输入联系地址'} ]},
unit: {rules: [{required: true,errorMessage: '请输入工作单位及职务'} ]},
studio: {rules: [{required: true,errorMessage: '请选择乡镇(经开区)委员工作室'} ]},
phonenumber: {rules: [{required: true,errorMessage: '请输入联系方式'} ]},
},
boundary:'',
partyAffiliation:'',
tpidx:'',
dpidx:'',
grade:'',
jebidx:'',
studio:"",
isMember:this.$store.state.user.isMember
}
},
onLoad(e) {
this.baseUrl=baseUrl;
this.id=e.id;
this.ptype=e.type;
if(this.ptype=='edit'||this.ptype=='add'){
this.updflag=true
}
if(e.type&&e.type=='add'){
}else{
this.getDetail()
}
this.init();
},
methods:{
checkPermi, checkRole ,
bindDateChangea(e){
var val=e.detail.value;
this.boundary=this.jblist[val].label
this.datainfo.boundary=this.jblist[val].value
},
bindDateChangeb(e){
var val=e.detail.value;
this.studio=this.wybgslist[val].label
this.datainfo.studio=this.wybgslist[val].value
},
bindDateChangec(e){
var val=e.detail.value;
this.grade=this.jeblist[val].label
this.datainfo.grade=this.jeblist[val].value
},
statusFormat(ite,list,type) {
var aite=selectValueKey(list, ite);
if(type=='jc'){
this.jcidx=aite.key
}else if(type=='khlx'){
this.khlxidx=aite.key
}else if(type=='jflx'){
this.jflxbidx=aite.key
}else if(type=='jeb'){
this.jebidx=aite.key
}else if(type=='wybgs'){
this.wybgsidx=aite.key
}else if(type=='jb'){
this.jbidx=aite.key
}
return aite.actions;
},
kaType(ite,list){
return selectValue(list, ite);
},
init(){
// 界别
getDictionaryFn('circles').then(res=>{
if(res.code==200&&res.data.length){
this.jblist = res.data.map(v => {
return {
label: v.dictLabel,
value:v.dictValue
}
})
}
})
// 委员办公室
getDictionaryFn('member_studio').then(res=>{
if(res.code==200&&res.data.length){
this.wybgslist = res.data.map(v => {
return {
label: v.dictLabel,
value: v.dictValue
}
})
}
})
//级别
getDictionaryFn('grade').then(res=>{
if(res.code==200&&res.data.length){
this.jeblist = res.data.map(v => {
return {
label: v.dictLabel,
value: v.dictValue
}
})
}
})
},
getDetail(){
getInfoDetailFn(this.id).then(res=>{
if(res.code==200){
this.datainfo=res.data;
}
})
},
getphotoFn(){
let that = this;
uni.chooseImage({
count: 1,
success:function(res){
let img= res.tempFilePaths;
let imglen = res.tempFilePaths.length;
var fuwufile = [];
uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
var file = rs;
that.datainfo.avatar=file.join(',')
})
}
});
},
getSubmit(){
var that=this;
this.$refs.form.validate().then(res => {
var params=that.datainfo;
// if(!params.avatar){
// this.$toast('请上传委员照片')
// return
// }
if(params.card){
let _IDRe18 =
/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
let _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
// 校验身份证：
if (_IDRe18.test(params.card) || _IDre15.test(params.card)) {
}else{
this.$toast('请输入正确身份证号')
return
}
}
if(params.phonenumber){
let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
if (params.phonenumber && !regphone.test(params.phonenumber)) {
that.$toast("请输入正确的手机号")
return
}
}
if(this.ptype&&this.ptype=='add'){
getinfoAddFn(params).then(res=>{
if(res.code==200){
that.$toast('新增成功')
that.updflag=false;
if(that.isMember=='1'){
that.$store.dispatch('GetInfo').then(res => {
})
}
setTimeout(function(){
uni.$emit('lzrefreshlist')
uni.$emit('refreshdetail')
uni.navigateBack({
delta:1
})
},1200)
}
})
}else{
getInfoEditFn(params).then(res=>{
if(res.code==200){
that.$toast('修改成功')
that.updflag=true;
that.$store.dispatch('GetInfo').then(res => {
})
setTimeout(function(){
uni.$emit('lzrefreshlist')
uni.$emit('refreshdetail')
uni.navigateBack({
delta:1
})
},1200)
}
})
}
})
}
}
}
</script>
<style scoped lang="scss">
.info{padding: 24rpx 0 54rpx;}
.flexr{display: flex;justify-content: flex-end;}
.info /deep/ .uni-forms-item__label{width: 190rpx !important;font-weight: bold;font-size: 30rpx;color: #343434;min-height: 72rpx;padding: 14rpx 0;align-items: flex-start;height: auto;}
.info /deep/ .is-required{margin-right: 8rpx;color: #FF0000;margin-top: 4rpx;}
.info /deep/ .uni-forms-item{background: #FFFFFF;padding: 14rpx 24rpx;margin-bottom: 24rpx;}
.info /deep/ .uni-easyinput__content-input{font-weight: 500;font-size: 30rpx;text-align: right;color: #222327;}
.info /deep/ .uni-input-placeholder{color: #aaaaaa;font-weight: 500;font-size: 30rpx;}
.info /deep/ .uni-forms-item__error{right: 0;left: auto;margin-top: -18rpx;}
.info /deep/ .uni-forms-item__content{display:flex;align-items: center;}
.forms{padding: 0 24rpx 10rpx;
.addbox{width: 110rpx;height: 110rpx;display: flex;align-items: center;justify-content: center;background: #EDEDED;border-radius: 10rpx;margin:12rpx;margin-right: 0;
.adimg{width: 32rpx;height: 32rpx;}
.phoimg{width: 100%;height: 100%;}
}
.items{background: #FFFFFF;padding: 14rpx 24rpx;border-radius: 10rpx;margin-bottom: 24rpx;min-height: 100rpx;position: relative;display: flex;box-sizing: border-box;align-items: center;
.addtip{font-weight: 500;font-size: 24rpx;color: #9D9D9D;margin: 6rpx 0 0 20rpx;}
.label{font-weight: bold;font-size: 30rpx;color: #343434;flex: 0 0 auto;
.cir{color: #FF0000;margin-right: 8rpx;}
}
.itetit{flex: 1;text-align: right;font-weight: 500;font-size: 30rpx;color: #222327;}
}
}
.detail {
.items{
.label{width: 170rpx;margin-right: 20rpx;padding: 14rpx 0;}
}
}
.lbtabp{display: flex;align-items: center;flex: 1;height: 100%;justify-content: flex-end;
view{font-size: 30rpx;color: #222327;}
.rimg{width: 14rpx;height: 26rpx;margin-left: 20rpx;flex: 0 0 auto;}
}
</style>