yijianbao_user_uniapp/pages_shopping/prescribe.vue

<template>
	<view class="content">
		<view class="fixed-top-box">
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="back-box" @click="back">
				<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/back_white.png" mode=""></image>
				<text class="title">填写处方信息</text>
				<text></text>
			</view>
		</view>
		<view class="inner">
			<view :style="{height: statusBarHeight}"></view>
			<!-- 步骤 -->
			<view class="steps-box">
				<view class="item active">填写信息</view>
				<image class="arrow" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/arrow4.png" mode=""></image>
				<view class="item">医生开方</view>
				<image class="arrow" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/arrow4.png" mode=""></image>
				<view class="item">支付订单</view>
				<image class="arrow" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/arrow4.png" mode=""></image>
				<view class="item">厂家发货</view>
			</view>
			<!-- 提示 -->
			<view class="tip-box">
				<view class="top">
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/safe2.png" mode=""></image>
					<text class="text">依据国家规定、处方药需凭处方购买</text>
				</view>
				<view class="time-tip">填写问诊人信息、处方信息</view>
			</view>
			<view class="info-box">
				<!-- 选择问诊人 -->
				<view class="chose-people">
					<view class="title-box">
						<text class="title">选择问诊人</text>
						<view class="add-box" @click="addPeople()">
							<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/add26.png" mode=""></image>
							<text >添加</text>
						</view>
					</view>
					<view class="peop-list" v-if="patient.length>0">
						<view v-for="(item,index) in patient" :key="index" :class="patientId == item.patientId?'item active':'item'" @click="chosePatient(item)">
							<view class="name">{{ item.patientName }}</view>
							<view class="info">
								<text class="sex" v-if="item.gender==1">男</text>
								<text class="sex" v-if="item.gender==2">女</text>
								<text class="ege">{{$getAge(item.birthday)}}岁</text>
							</view>
							<!-- 选中的对号角标 -->
							<image v-if="patientId == item.patientId" class="active-img" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/sel_right50.png" mode=""></image>
						</view>
					</view>
				</view>
				<!-- <view class="text-content">
					<view class="title">
						<text class="black">主诉</text>
						<text class="gray">(选填)</text>
					</view>
					<textarea class="textArea" maxlength="200" @input="chiefComplaintInput" placeholder="请填写主诉内容"></textarea>
					  
				</view>
				<view class="text-content">
					<view class="title">
						<text class="black">既往病史</text>
						<text class="gray">(选填)</text>
					</view>
					<textarea class="textArea" maxlength="200" @input="historyIllnessInput" placeholder="请填写既往病史内容"></textarea>
					 
				</view> -->
				<view class="img-content">
					<view class="title">
						<text class="black">复诊凭证</text>
						<text class="gray">(选填) {{imgList.length}}/4</text>
					</view>
					<view class="upload-img">
						<view class="img" v-for="(item,index) in imgList" :key="index"  >
							<image :src="item" mode="aspectFill"  @click="previewImage(index)"></image>
							<view class="del" @click="delImg(index)" >
								<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/del2.png"></image>
							</view>
						</view>
						<view class="chose-img" @tap="chooseImage(1)" v-if="imgList.length<4">
							<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/adds.png"></image>
						</view>
					</view>
					
					 
				</view>
				<!-- 疾病选择 -->
				<view class="disease-select">
					<view class="x-bc" @click="show=true">
						<view class="title">
							<text class="black">本次用药的确诊疾病</text>
							<text class="gray">(可多选)</text>
						</view>
						<u-icon name="arrow-right" color="#222" size="18" ></u-icon>
					</view>
					<view class="dise-list">
						<view 
							v-for="(item,index) in activeDise" 
							:key="index" 
							class="item active x-bc"
						>
							{{ item }}
							<u-icon name="close" color="#fff" size="16" @click="choseDise(item,1)" style="margin-left: 10rpx;"></u-icon>
						</view>
					</view>
				</view>
				<!-- 是否使用过此药 -->
				<view class="check-box" v-for="(que,index) in quesList" :key="index">
					<view class="left">
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/yao.png" mode=""></image>
						<text class="text">{{que.title}}</text>
					</view>
					<radio-group style="display: flex;align-items: center;" @change="changeRadio($event,index,1)">
						<label class="label" v-for="(option,index) in que.options" :key="index">
							<radio :value="option" :checked="option==que.answer" style="margin-right: 16upx;" />
							<text class="my-radio-text">{{option}}</text>
						</label>
					</radio-group>
				</view>
				<view class="check-box">
					<view class="left">
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/yao.png" mode=""></image>
						<text class="text">是否是备孕/怀孕</text>
					</view>
					<radio-group style="display: flex;align-items: center;" @change="changeRadio($event,'isLactation',0)">
						<label style="margin-right: 50upx;">
							<radio value="1" :checked="isLactation==1" style="margin-right: 16upx;" />
							<text class="my-radio-text">是</text>
						</label>
						<label>
							<radio value="0" :checked="isLactation==0" style="margin-right: 16upx;" />
							<text class="my-radio-text">否</text>
						</label>
					</radio-group>
				</view>
				<view class="check-box">
					<view class="left">
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/yao.png" mode=""></image>
						<text class="text">是否是哺乳期</text>
					</view>
					<radio-group style="display: flex;align-items: center;" @change="changeRadio($event,'isPregnantWoman',0)">
						<label style="margin-right: 50upx;">
							<radio value="1" :checked="isPregnantWoman==1" style="margin-right: 16upx;" />
							<text class="my-radio-text">是</text>
						</label>
						<label>
							<radio value="0" :checked="isPregnantWoman==0" style="margin-right: 16upx;" />
							<text class="my-radio-text">否</text>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="agreement">
			<label @click="handleAgreement()">
				<checkbox :checked="isAgreement" color="#2583EB" style="transform:scale(0.7)" />我确认已确诊此疾病并使用过该药，且无过敏史、无相关禁忌症和不良反应
			</label>
		</view>
		<view class="btn-box">
			<view class="btn" @click="submit()">去开处方</view>
		</view>
		<u-popup :show="show" :round="10" mode="bottom" closeable :closeOnClickOverlay="false" @close="close">
			<view class="popbox-title">
				<view>选择本次用药的确诊疾病</view>
			</view>
			<view class="search-cont">
				<view class="inner" style="margin-top:0">
					<image class="icon-search" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/icon_search.png" mode=""></image>
					<input type="text" v-model="diagnosisName" placeholder="输入疾病搜索" confirm-type="search" @confirm="doSearchUser" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
				</view>
			</view>
			<scroll-view :scroll-y="true" class="popbox" style="height: 60vh;" @scrolltolower="scrolltolower">
				<view v-for="(item, i) in diseaseList" :key="i" @click="choseDise(item.diagnosisName)">
					<view class="popbox-item x-bc">
						<view class="name">{{item.diagnosisName}}</view>
						<view v-show="activeDise.includes(item.diagnosisName)">
							<u-icon name="checkmark" color="#2979ff" size="22"></u-icon>
						</view>
					</view>
				</view>
				<view class="empty" v-if="diseaseList&&diseaseList.length==0">
					<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/global_search_empty.png" mode="widthFix"></image>
					<view>{{msg}}</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import {getStoreOrderById} from '@/api/myStoreOrder.js'
	import {getWeixinPrescribeTemps} from '@/api/common'
	import {doPrescribe,diseaseQueryList} from './api/prescribe'
	import {getPatientList,delPatient} from '@/api/patient'
	export default {
		data() {
			return {
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				order:null,
				temps:[],
				imgList: [],  
				orderId:null,
				patient:[],
				patientId:null,
				patientInfo: {},
				// 疾病列表
				diseaseList: [],
				// 选中的疾病
				activeDise: [],
				isLactation: 0,
				isPregnantWoman: 0,
				chiefComplaint:null,
				historyIllness:null,
				diagnosisName: '',
				pageNum: 1,
				pageSize: 10,
				quesList:[
					// {
					// 	answer: "是",
					// 	subjectId: 3,
					// 	title: "是否使用过此类药物",
					// 	options: ['是','否']
					// },
					{
						answer: "否",
						subjectId: 4,
						title: "是否有药物过敏史",
						options: ['是','否']
					},
					{
						answer: "否",
						subjectId: 5,
						title: "肝肾功能是否有异常",
						options: ['是','否']
					}
				],
				show: false,
				msg: '暂无数据',
				isAgreement: false,
				hasMore: true
			}
		},
		onLoad(option) {
			this.orderId=option.orderId
			this.getPatientList();
			uni.$on('refreshPatient', () => {
				this.getPatientList()
			})
			this.getWeixinPrescribeTemps();
			this.getStoreOrderById();
			this.diseaseQueryList()
		},
		onShow() {
			this.getPatientList();
		},
		
		methods: {
			handleAgreement() {
				this.isAgreement = !this.isAgreement;
			},
			back(){
			  // uni.showToast({
			  // 	icon:'none',
			  // 	title: "请填写资料提交处方，否则将无法发货"
			  // });
			  uni.showModal({
			  	title: '提示',
			  	content: '请填写资料提交处方，否则将无法发货,确定要返回吗？',
				cancelColor: '#2583EB',
				confirmColor: '#000000',
			  	success: function (res) {
			  		if (res.confirm) {
			  			uni.navigateBack()
			  		} else if (res.cancel) {
			  			console.log('用户点击取消');
			  		}
			  	}
			  });
			},
			close() {
				this.show = false
			},
			diseaseQueryList(){
				var that = this;
				const param = {
					orderId: this.orderId,
					diagnosisName: this.diagnosisName,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				diseaseQueryList(param).then(
					res => {
						if(res.code==200){
							if (that.pageNum == 1) {
								that.diseaseList = res.datas; 
								
							} else {
								that.diseaseList = that.diseaseList.concat(res.datas);
								 
							}
							if(that.diseaseList.length>=res.total) {
								that.hasMore = false
							} else {
								that.hasMore = true
							}
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
							that.diseaseList = [];
						}
					},
					rej => {}
				);
			},
			scrolltolower() {
				if(!this.hasMore) return
				this.pageNum++;
				this.diseaseQueryList()
			},
			doSearchUser() {
				this.hasMore = true
				this.pageNum = 1;
				this.diseaseQueryList()
			},
			changeRadio(e,name,type) {
				if(type==1) {
					this.quesList[name].answer = e.detail.value
				} else {
					this[name] = e.detail.value
				}
			},
			getStoreOrderById(){
				var data={orderId:this.orderId}
				getStoreOrderById(data).then(
					res => {
						if(res.code==200){
							this.order=res.order
						}else{
							 
						}
					},
					rej => {}
				);
			},
			getWeixinPrescribeTemps(){
				getWeixinPrescribeTemps().then(
					res => {
						if(res.code==200){
							this.temps=res.temp
							console.log(this.temps)
						}else{
							 
						}
					},
					rej => {}
				);
			},
			chiefComplaintInput(e) {
				this.chiefComplaint = e.detail.value
			},
			historyIllnessInput(e) {
				this.historyIllness = e.detail.value
			},
			// 选择图片
			chooseImage(type) {
				var that=this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.uploadFile({
							url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								that.imgList.push(JSON.parse( res.data).url)
							}
						});
					}
				});
			},
			//图片预览
			previewImage(index){
				//预览图片
				uni.previewImage({
					urls: this.imgList,
					current: this.imgList[index]
				});
			},
			delImg(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(index, 1);
						}
					}
				})
			},
			submit(){
				// let url = 'https://ehospital-m-test.sq580.com/#/preDemand?id=5459&thirdPlatform=0'
				// uni.navigateTo({
				// 	url: '/pages/index/webview?url='+encodeURIComponent(url)
				// })
				// return
				console.log('this.isAgreement==',this.isAgreement)
				if (!this.isAgreement) {
					uni.showToast({
						icon: 'none',
						title: '请先勾选确认'
					});
					return false;
				}
				var that=this;
				if(this.patientId==null){
					uni.showToast({
						icon:'none',
						title: "请选择患者"
					});
					return;
				}
				 
				uni.showLoading({
					title:"正在处理中"
				})
				// var data={
				// 	patientId:this.patientId,
				// 	orderId:this.orderId,
				// 	isAllergic:this.isAllergic,
				// 	isLiver:this.isLiver,
				// 	isRenal:this.isRenal,
				// 	isLactation:this.isLactation,
				// 	chiefComplaint:this.chiefComplaint,
				// 	historyIllness:this.historyIllness,
				// 	recordPic:this.imgList.toString()
				// }
				if(this.activeDise.length==0) {
					uni.showToast({
						icon:'none',
						title: "请选择本次用药的确诊疾病"
					});
					return
				}
				const beforeAiDataList = [
				  { answer: this.activeDise.join(','), subjectId: 1, title: '症状' },
				  {
				    answerMedicine: JSON.stringify([{ medicineId: '92', number: 1 }]),
				    subjectId: 2,
				    title: '居民用药信息选择'
				  },
				  {
				  	answer: "是",
				  	subjectId: 3,
				  	title: "是否使用过此类药物"
				  },
				  ...this.quesList.map(({ answer, subjectId, title }) => ({ answer, subjectId, title }))
				];
				const relationMap = { '本人': 1, '父母': 2,'配偶': 3, '子女': 4 };
				const relationship = relationMap[this.patientInfo.relation] ?? 5;
				const data={
					souceFrom: 0,//0-微信小程序，1-APP，2-H5，3-支付宝小程序
					storeOrderId: this.orderId,
					imgList:this.imgList.toString(),
					isLactation: this.isLactation,
					isPregnantWoman: this.isPregnantWoman,
					patientId:this.patientId,
					userId: uni.getStorageSync('userId'),
					relationship, // 1-本人，2-父母，3-配偶，4-子女，5-其他
					beforeAiDataList
				}
				 doPrescribe(data).then(
				 	res => {
						uni.hideLoading()
				 		if(res.code==200){
							uni.redirectTo({
								url: '/pages/index/webview?url='+encodeURIComponent(res.data)
							})
				 			//  uni.showToast({
				 			//  	icon:'success',
				 			//  	title:res.msg,
				 			//  });
							 // var order =res.order;
							 // uni.requestSubscribeMessage({
							 // 	tmplIds: this.temps,
							 // 	success(res) {
								// 	setTimeout(function(){
								// 		if(order.paid!=1){
								// 			uni.redirectTo({
								// 				url: './paymentOrder?orderId='+that.order.id
								// 			})
								// 		}
								// 		else{
								// 			uni.navigateBack({  
								// 				delta: 1
								// 			});
											
								// 		}
										
								// 	},500);
							 // 	},
							 // 	fail(res) {
							 // 		setTimeout(function(){
								// 		if(order.paid!=1){
								// 			uni.redirectTo({
								// 				url: './paymentOrder?orderId='+that.order.id
								// 			})
								// 		}
								// 		else{
								// 			uni.navigateBack({  
								// 				delta: 1
								// 			});
											
								// 		}
							 			 
							 // 		},500);
							 // 	}
							 // })
							 
				 			
				 		}else{
				 			uni.showToast({
								icon:'none',
				 				title: res.msg,
				 			});
				 		}
				 	},
				 	rej => {}
				 );
				
			},
			getPatientList(){
			 	uni.showLoading({
			 		title:"正在加载中"
			 	})
			 	getPatientList().then(
			 		res => {
			 			uni.hideLoading()
			 			if(res.code==200){
			 				this.patient=res.data;
			 			}else{
			 				uni.showToast({
			 					icon:'none',
			 					title: "请求失败",
			 				});
			 			}
			 		},
			 		rej => {}
			 	);
			},
			// 选中问诊人
			chosePatient(item) {
				this.patientInfo = item
				this.patientId = item.patientId
			},
			// 添加问诊人
			addPeople() {
				uni.navigateTo({
					url:"/pages_user/patient"
				})
			},
			// 疾病选择
			choseDise(item) {
				this.activeDise.includes(item) ? this.activeDise.splice(this.activeDise.indexOf(item), 1) : this.activeDise.push(item);         // 不在就加上
			}
		}
	}
</script>

<style lang="scss" scoped>
	.label {
		margin-right: 50upx;
		&:last-child {
			margin-right: 0;
		}
	}
	.popbox-item {
		padding: 24rpx;
		border-bottom: 1rpx solid #eee;
	}
	.agreement {
		padding: 40rpx 30rpx 0 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	.popbox {
		background-color: #fff;
		&-title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 24rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #EDEEEF;
			box-sizing: border-box;
		}
	}
	.search-cont{
		padding: 16upx 30upx;
		background-color: #FFFFFF;
		.inner{
			box-sizing: border-box;
			width: 100%;
			height: 72upx;
			background: #F7F7F7;
			border-radius: 36upx;
			display: flex;
			align-items: center;
			padding: 0 30upx;
			.icon-search{
				width: 28upx;
				height: 28upx;
				margin-right: 20upx;
			}
			input{
				height: 60upx;
				line-height: 60upx;
				flex: 1;
			}
		}
	}
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.fixed-top-box{
			width: 100%;
			background: linear-gradient(135deg, #2583EB 0%, #60CDC3 100%);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			.back-box{
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;
				image{
					width: 40upx;
					height: 40upx;
				}
				.title{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.inner{
			margin-top: 88rpx;
			.steps-box{
				height: 88upx;
				background: #FFFFFF;
				padding: 0 48upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					&.active{
						font-weight: bold;
						color: #2583EB;
					}
				}
				.arrow{
					width: 12upx;
					height: 22upx;
				}
			}
			.tip-box{
				box-sizing: border-box;
				height: 130upx;
				background: #FFF4E6;
				padding: 26upx 0 30upx 50upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.top{
					display: flex;
					align-items: center;
					image{
						width: 26upx;
						height: 31upx;
						margin-right: 10upx;
					}
					.text{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #EF8A07;
						line-height: 1;
					}
				}
				.time-tip{
					padding-left: 40upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 1;
				}
			}
			.info-box{
				padding: 20upx;
				.chose-people{
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx 30upx;
					.title-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.title{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
						}
						.add-box{
							display: flex;
							align-items: center;
							image{
								width: 26upx;
								height: 26upx;
								margin-right: 11upx;
							}
							text{
								font-size: 28upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
							}
						}
					}
					.peop-list{
						display: flex;
						flex-wrap: wrap;
						margin-top: 30upx;
						.item{
							box-sizing: border-box;
							padding: 18upx 30upx;
							width: 31.28%;
							height: 110upx;
							background: #F7F7F7;
							border-radius: 16upx;
							margin: 0 20upx 10upx 0;
							border: 2upx solid #F7F7F7;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							&:nth-child(3n){
								margin-right: 0;
							}
							&.active{
								background: rgba(230, 250, 247, 0);
								border: 2upx solid #2583EB;
								position: relative;
							}
							.active-img{
								width: 50upx;
								height: 50upx;
								position: absolute;
								right: -2upx;
								bottom: -2upx;
							}
							.name{
								font-size: 30upx;
								line-height: 1;
								font-family: PingFang SC;
								font-weight: bold;
								color: #111111;
							}
							.info{
								display: flex;
								align-items: center;
								.sex,
								.ege{
									font-size: 26upx;
									font-family: PingFang SC;
									line-height: 1;
									font-weight: 500;
									color: #666666;
								}
								.ege{
									margin-left: 19upx;
								}
							}
						}
					}
				}
				.disease-select{
					box-sizing: border-box;
					min-height: 286upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx 22upx;
					margin-top: 20upx;
					margin-bottom: 20upx;
					.title{
						display: flex;
						align-items: center;
						align-items: flex-end;
						.black{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 1;
							margin-left: 10upx;
						}
						.gray{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #999999;
							line-height: 1;
							margin-left: 10upx;
						}
					}
					.dise-list{
						display: flex;
						flex-wrap: wrap;
						margin-top: 26upx;
						.item{
							box-sizing: border-box;
							height: 64upx;
							line-height: 64upx;
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #2583EB;
							background: #eef5fd;
							border: 1px solid #2583EB;
							padding: 0 20upx;
							border-radius: 32upx;
							margin: 0 20upx 20upx 0;
							&.active{
								background: #2583EB;
								border: 1px solid #2583EB;
								color: #FFFFFF;
							}
						}
					}
				}
				.text-content{
					box-sizing: border-box;
					min-height: 286upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx 22upx;
					margin-top: 20upx;
					.title{
						display: flex;
						align-items: center;
						align-items: flex-end;
						.black{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 1;
							margin-left: 10upx;
						}
						.gray{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #999999;
							line-height: 1;
							margin-left: 10upx;
						}
					}
					.textArea{
						margin: 30rpx 0rpx 0rpx 0rpx;
						width: 100%;
					}
					 
					
					 
				}
				.img-content{
					box-sizing: border-box;
					min-height: 286upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx 22upx;
					margin-top: 20upx;
					margin-bottom: 20upx;
					.title{
						display: flex;
						align-items: center;
						align-items: flex-end;
						.black{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 1;
							margin-left: 10upx;
						}
						.gray{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #999999;
							line-height: 1;
							margin-left: 10upx;
						}
					}
					.textArea{
						margin: 30rpx 0rpx 0rpx 0rpx;
						width: 100%;
					}
					.upload-img{
						margin: 30rpx 0rpx 0rpx 0rpx;
						width: 100%;
						display: flex;
						align-items: flex-start;
						.img{
							margin-right: 10rpx;
							width: 100rpx;
							height: 100rpx;
							position: relative;
							image{
								width: 100%;
								height: 100%;
							}
							.del{
								right:0rpx;
								top:0rpx;
								position: absolute;
								image{
									width: 30rpx;
									height:30rpx;
								}
							}
						}
						.chose-img{
							border-radius: 5rpx;
							border: 1px solid #eee;
							padding: 5rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100rpx;
							height: 100rpx;
							image{
								width: 50rpx;
								height: 50rpx;
							}
							
						}
					}
					
					 
				}

				.check-box{
					height: 88upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 0 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						image{
							width: 21upx;
							height: 27upx;
							margin-right: 20upx;
						}
						.text{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}
					}
					.my-radio-text{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 30upx;
					}
				}
			}
		}
		.btn-box{
			height: 120upx;
			padding: 30upx;
			// background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				background: #2583EB;
				border-radius: 44upx;
			}
		}
	}
	
</style>