zheng_xie_ui/work/pages/news/info.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 :src="dphoimg" class="adimg"></image>
					</view>
				</view>
			</view>
			<view class="items">
				<view class="label">委员姓名</view>
				<view class="itetit">何潇潇</view>
			</view>
			<view class="items">
				<view class="label">身份证号</view>
				<view class="itetit">32000019810205003X</view>
			</view>
			<view class="items">
				<view class="label">界别</view>
				<view class="itetit">中国共产党</view>
			</view>
			<view class="items">
				<view class="label">党派</view>
				<view class="itetit">中国共产党</view>
			</view>
			<view class="items">
				<view class="label">工作单位及职务</view>
				<view class="itetit">潜山市政协委员</view>
			</view>
			<view class="items">
				<view class="label">乡镇(经开区)委员工作室</view>
				<view class="itetit">黄铺镇工作室</view>
			</view>
			<view class="items">
				<view class="label">联系方式</view>
				<view class="itetit">19105672384</view>
			</view>
			<view class="brbtns" @click="updflag=true">修改信息</view>
		</view>
		<!-- 修改 -->
		<uni-forms :modelValue="datainfo" 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">
						<image :src="dphoimg" class="adimg"></image>
					</view>
				</view>
				
			</view>
			<uni-forms-item label="委员姓名" name="s" required>
				<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.name" placeholder="请输入委员姓名" />
			</uni-forms-item>
			<uni-forms-item label="身份证号" name="s" required>
				<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.name" 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>
			<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="s" required>
				<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.name" 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="s" required>
				<uni-easyinput :inputBorder="false" type="text" v-model="datainfo.name" placeholder="请输入联系方式" />
			</uni-forms-item>
			<view class="brbtns" @click="updflag=false">确认</view>
		</uni-forms>
		
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { getToken } from '@/utils/auth'
	export default{
		data(){
			return{
				dphoimg:require("@/work/static/images/dpho.png"),
				rimg:require("@/work/static/images/rimg.png"),
				readOnly:false,
				datainfo:{
					tatype:1,
					name:'',
				},
				tzlbList:[{label: '新闻',value: 0},{label: '开会',value: 1}],
				tzlbidx:'',
				updflag:false
			}
		},
		onLoad(e) {
			
		},
		methods:{
			bindDateChangea(e){
				console.log(e,2)
			},
		}
	}
</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;}



.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;}
	}
	.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: 0 0 auto;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>