zheng_xie_ui/work/pages/report/mineinfo.vue

<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">{{datainfo.studio}}</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>
						<!-- <view :class="kaType(datainfo.partyAffiliation,dplist)?'':'coa'">{{kaType(datainfo.partyAffiliation,dplist) || "请选择党派"}}</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="studio" required>
				<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.studio" placeholder="请输入委员工作室" />
			</uni-forms-item>
			<!-- <picker  range-key='label'  :value="tzlbidx" :range="tzlbList"  @change='bindDateChangea'>
				<uni-forms-item label="乡镇(经开区)委员工作室" name="s" required>
					<view class="lbtabp">
						<view :class="datainfo.tzlb?'':'coa'">{{datainfo.tzlb || "请选择委员工作室"}}</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" @click="getSubmit">确认</view>
		</uni-forms>
		
	</view>
</template>

<script>
	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":"",//乡镇（经开区）委员工作室
				},
				tzlbList:[{label: '新闻',value: 0},{label: '开会',value: 1}],
				tzlbidx:'',
				updflag:false,
				jblist:[],
				dplist:[],
				baseUrl:'',
				jbidx:[],
				dpidx:[],
				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: '请选择级别'} ]},
				  unit: {rules: [{required: true,errorMessage: '请输入工作单位及职务'} ]},
				  studio: {rules: [{required: true,errorMessage: '请输入乡镇(经开区)委员工作室'} ]},
				  phonenumber: {rules: [{required: true,errorMessage: '请输入联系方式'} ]},
				},
				boundary:'',
				partyAffiliation:'',
				tpidx:'',
				dpidx:'',
				grade:'',
			}
		},
		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:{
			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.partyAffiliation=this.dplist[val].label
				this.datainfo.partyAffiliation=this.dplist[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
				}
				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('political_parties').then(res=>{
					if(res.code==200&&res.data.length){
						this.dplist = 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;
								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;
								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>