medicine-xcx/pagesB/epidemicPrevention/index.vue

<template>
	<view class="drug-user-authentication position-relative">
			<u-form :model="form" ref="uForm">
			<view class="drug-user-authentication-item m-b-40">
				<view class="drug-user-authentication-title font-30 text-black m-b-20 font-weight-bold">用药人信息</view>
					<u-form-item label-width="20%" label="姓名" prop="name"><u-input v-model="form.name" input-align="right" placeholder="请输入姓名" /></u-form-item>
					<u-form-item label-width="20%" label="出生日期" prop="birthday">
						<view @click="assignModalShow('timeShow')">
							<u-input v-model="form.birthday" disabled placeholder="请选择出生日期" input-align="right" @click="assignModalShow('timeShow')"/>
						</view>
					</u-form-item>
					<u-form-item label-width="20%" label="身份证" prop="cardId"><u-input v-model="form.cardId" input-align="right" placeholder="请输入身份证号码"  :clearable="false"/></u-form-item>
					<u-form-item label-width="20%" label="手机号码" prop="phone"><u-input v-model="form.phone" type="number" input-align="right" placeholder="请输入手机号码" :clearable="false" /></u-form-item>
			</view>
			<view class="drug-user-authentication-item m-b-40">
					<u-form-item label-width="20%" label="今日体温" prop="temperature"><u-input v-model="form.temperature" type="number" input-align="right" placeholder="请输入今日体温" /></u-form-item>
					<u-form-item label-width="20%" label="症状" prop="symptom">
						<u-tag
							v-for="(item, index) in tagList" 
							:key="index" 
							:text="item.name" 
							mode="dark" 
							class="m-r-10"
							:mode="item.select ? 'dark' : 'plain'"
							:type="item.select ? 'primary' : 'info'"
							@click="tagClick(item, index)"
						></u-tag>
					</u-form-item>
					<u-input v-if="showSymptom" placeholder="请输入症状" v-model="symptomVal" type="textarea" :height="100" auto-height />
				</view>
			<view class="drug-user-authentication-item m-b-40">
					<u-form-item prop="isGo">
						<view class="">14天内有境外、中高风险地区旅居史</view>
						<u-radio-group v-model="form.isGo" active-color="#01AEEA">
							<u-radio 
								v-for="(item, index) in travel" :key="index" 
								:name="item.name"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label-width="20%" label="所在地区" prop="addr">
						<view @click="assignModalShow('regionShow')">
							<u-input v-model="form.addr" disabled placeholder="请选择所在地区" input-align="right" @click="assignModalShow('regionShow')"/>
						</view>
					</u-form-item>
					<u-form-item label-width="20%" label="详细地址" prop="address"><u-input placeholder="请输入详细地址" v-model="form.address" type="textarea" :height="100" auto-height /></u-form-item>
					
				</view>
			</u-form>
		<view class="drug-user-authentication-footer position-fixed flex flex-column align-start justify-between zIndex-1">
			<view>
				<u-checkbox-group  active-color="#01AEEA">
					<u-checkbox v-model="isAgreement" shape="circle">
						<view class="drug-user-authentication-agreement" >
							同意 <text class="drug-user-authentication-agreement--text" @click.stop="toDetali">《防疫登记协议》</text>
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="flex justify-center w-100">
				<u-button type="primary" shape="circle" @click="preserve">保存并使用</u-button>
			</view>
		</view>

		<u-picker mode="time" v-model="timeShow" @confirm="timeConfirm" confirm-color="#01AEEA" zIndex="999999999"></u-picker>
		<u-picker v-model="regionShow" @confirm="regionConfirm" mode="region"></u-picker>
		<u-select v-model="sexShow" :list="sexList" @confirm="sexConfirm" confirm-color="#01AEEA"></u-select>
	</view>
</template>

<script>
const sexList = [
	{
		value: '1',
		label: '男'
	},
	{
		value: '2',
		label: '女'
	}
];

const tagList = [
	{
		name : '发热',
		select: false,
	},
	 {
	 	name : '咳嗽',
	 	select: false,
	 }, 
	 {
	 	name : '胸闷',
	 	select: false,
	 }, 
	 {
	 	name : '无',
	 	select: false,
	 }, 
	 {
	 	name : '其他',
	 	select: false,
	 }
	]
export default {
	data() {
		return {
			travel: [
				{ name: '有' },
				{ name: '无' }
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			sexList,
			tagList,
			tagCurrent: null,
			showSymptom: false,
			isAgreement: false,
			symptomVal: '',
			symptomList: [],
			form: {
				name: '',
				phone: '',
				cardId: '',
				birthday: '',
				temperature: '',
				symptom: '',
				isGo: '',
				addr: '',
				address: ''
			},
			timeShow: false,
			sexShow: false,
			regionShow: false,
			options: {},
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名'
					},
					{
						validator: (rule, value, callback) => {
							let username = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,99}$/;
							return username.test(value);
						},
						message: '请输入正确格式的姓名',
						trigger: ['blur']
					}
				],
				cardId: [
					{
						required: true,
						message: '请输入身份证号码'
					},
					{
						message: '请输入正确格式的身份证号码',
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						}
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: ['change', 'blur']
					},
					{
						message: '请输入正确格式的手机号码',
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						}
					}
				],
				birthday: [
					{
						required: true,
						message: '请选择出生日期',
						trigger: ['change', 'blur']
					}
				],
				temperature: [
					{
						required: true,
						message: '请输入今日体温',
						trigger: ['change', 'blur']
					}
				],
				symptom: [
					{
						required: true,
						message: '请选择症状',
						trigger: ['change', 'blur']
					}
				],
				isGo: [
					{
						required: true,
						message: '请选择14天内有境外、中高风险地区旅居史',
						trigger: ['change', 'blur']
					}
				],
				addr: [
					{
						required: true,
						message: '请输入所在地区',
						trigger: ['change', 'blur']
					}
				],
				address: [
					{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}
				],
			},
			
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(options) {
			// form: {
			// 	name: '',
			// 	phone: '',
			// 	cardId: '',
			// 	birthday: '',
			// 	temperature: '',
			// 	symptom: '',
			// 	isGo: '',
			// 	addr: '',
			// 	address: ''
			// },
		this.options = options
		if (options.medicineMan) {
			let medicineMan = JSON.parse(options.medicineMan)
			let { name, phone, cardId, birthday } = medicineMan
			this.form = { ...this.form, name, phone, cardId, birthday }
			console.log(medicineMan)
			
		}
		
	},
	methods: {
		// 清除身份证内容
		clearText() {
			console.log("进来的")
			setTimeout(() => {
				this.form.cardId = ''
			},0)
		},
		// 清除电话号码
		clearText2() {
			console.log("进来的")
			setTimeout(() => {
				this.form.phone = ''
			},0)
		},
		assignModalShow (key) {
			this[key] = true
		},
		timeConfirm(time) {
			let { year, month, day } = time;
			this.form.birthday = `${year}/${month}/${day}`;
		},
		regionConfirm (obj) {
			console.log(obj)
			let {province, city, area} = obj
			this.form.addr = `${province.label},${city.label},${area.label}`
		},
		// 修改信息查询
		sexConfirm(arr) {
			this.form.sex = arr[0].label
		},
		
		preserve() {
			const options = this.options
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (this.showSymptom && !this.symptomVal) return this.$Toast('请输入症状')
					if (!this.isAgreement) return this.$Toast('请同意协议')
					let params = this.showSymptom && this.symptomVal ? { ...this.form, symptom: this.symptomVal }: this.form
					this.$api('setPrevention', params)
					.then(res => {
						console.log(res)
						if (res.code === 200) {
							if(this.options.createOrderType === 'shoppingCart'){
								this.addShoppingCart(res.result.id)
							}else if(this.options.createOrderType === 'confirm') {
								this.setOrder(res.result.id)
							}else {
								this.addShoppingCart(res.result.id);
							}
						} else {
							this.$Toast(res.message)
						}
					})
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		},
		// 创建订单
		setOrder(id){
			const options = this.options
			this.$api('teamCreateOrder', {type:2, id: options.goodsId, goodsPrice: options.price, goodsNum: options.num,  goodsSku: options.goodSkuParam, orderType: options.orderType, preventionId:id,prescriptionId: this.options.prescriptionId,offlineInfoId: this.options.offlineInfoId,})
			.then(res => {
				uni.hideLoading()
				let { code, message, result } = res
				if (code === 200) {
					uni.redirectTo({
						url: `/pagesC/confirmOrder/confirmOrder?ids=${result.order.id}&orderType=${options.orderType}&payType=${0}` 
					})
				}else if (res.code === 903) {
					uni.redirectTo({
						url: `/pagesC/subscribe/confirmSubscribe?addressId=${this.options.addressId}&orderType=${this.options.orderType}&goodsId=${this.options.goodsId}&num=${this.options.num}&price=${this.options.price}&goodSkuParam=${this.options.goodSkuParam}&prescriptionId=${this.options.prescriptionId}&preventionId=${id}&medicineMan=${this.options.medicineMan}`
					})
				}else {
					this.$Toast(res.message)
				}
			}).catch(err => {
				this.$Toast(err.message)
			})
			
		},
		
		// 加入购物车
		addShoppingCart (preventionId) {
			this.$api('addShoppingCart', {id: this.options.goodsId, num: this.options.num, price: this.options.price, goodSkuParam: this.options.goodSkuParam, offlineInfoId: this.options.offlineInfoId, prescriptionId: this.options.prescriptionId, preventionId })
			.then(res => {
				if (res.code === 200) {
					uni.$emit('isUpdataShowToast')
					this.$Toast(res.message)
					// 返回页面  
					let pages_url = getCurrentPages(); 
					const index = pages_url.findIndex(item => {
						return item.route == 'pagesC/goodsInfo/goodsInfo'
					});
					const length = pages_url.length 
					// 需要返回的层数
					const backIndex = length - (index+1);
					uni.navigateBack({
						delta: backIndex
					})
					// setTimeout(() => {
					// 	this.$tools.switchTab({
					// 		url: '/pages/shoppingCart/shoppingCart'
					// 	})
					// }, 800)
				}else if (res.code === 903) {
					this.$tools.redirectTo({
						url: `/pagesC/subscribe/confirmSubscribe?addressId=${this.options.addressId}&orderType=${this.options.orderType}&goodsId=${this.options.goodsId}&num=${this.options.num}&price=${this.options.price}&goodSkuParam=${this.options.goodSkuParam}&prescriptionId=${this.options.prescriptionId}&preventionId=${preventionId}&medicineMan=${this.options.medicineMan}`
					})
				} else {
					this.$Toast(res.message)
				}
			})
		},
		tagClick(item, index) {
			this.tagList[index].select = !this.tagList[index].select
			this.showSymptom = false
			console.log(item.name == '无')
			if(item.name == '无'&& item.select){
				this.tagList.forEach((item,selectrIndex) => {
					if(selectrIndex !== index) {
						item.select = false
					}
				})
				this.symptomList = []
				this.symptomList.push(item.name)
				this.form.symptom = item.name
				return
			}else {
				this.tagList.forEach(item => {
					if(item.name == '无') {
						item.select = false
					}
				})
			}
			if (item.name == '其他' && item.select) {
				this.tagList.forEach((item,selectrIndex) => {
					if(selectrIndex !== index) {
						item.select = false
					}
				})
				this.symptomList = []
				this.symptomList.push(item.name)
				this.showSymptom = true
				this.form.symptom = item.name
				return
			}else {
				this.tagList.forEach(item => {
					if(item.name == '其他') {
						item.select = false
					}
				})
			}
			
			if(item.select) {
				if(this.symptomList[0] == '无' || this.symptomList[0] == '其他' ){
					 this.symptomList.splice(0,1)
				}
				this.symptomList.push(item.name)
				this.form.symptom = this.symptomList.join(",")
			}else {
				const index2 = this.symptomList.filter(item=> item).indexOf(item.name)
				this.symptomList.splice(index2,1)
				this.form.symptom = this.symptomList.join(",")
			}
		},
		// 协议
		toDetali(){
			this.$tools.navigateTo({
				url: `/pages/agreement/index?title=&type=2`
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.drug-user-authentication {
	padding: 20rpx 20rpx 220rpx;
	&-footer {
		z-index: 10;
		height: 160rpx;
		padding: 20rpx;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		/deep/.u-btn {
			width: 660rpx;
			height: 70rpx;
			margin: 0 auto;
		}
	}
	
	&-item {
		background: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0px 3rpx 6rpx 0px rgba(0,0,0,0.16);
		 padding: 20rpx 40rpx;
	}
	
	::v-deep .u-input__textarea {
		background: #e2e2e2;
		padding: 10px;
	}
	
	::v-deep .u-checkbox__icon-wrap {
		width: 40rpx !important;
		height: 40rpx !important;
	}
	&-agreement {
		font-size: 28rpx;
		&--text {
			color: #01AEEA;
		}
	}
}
// 设置清空图标大小

</style>