yijianbao_user_uniapp/pages_user/doFollow.vue

<template>
	<view class="content">
		<u-alert fontSize="13"  type = "info" description = "为了给您提供更好的服务，希望您能用几分钟时间，将您的感受和建议告诉我们，我们非常重视您的宝贵意见!"></u-alert>
		
		<view class="cont-box">
			<view class="cont">
				<view class="doctor">
					<view class="left">
						<view class="name"  >发布医生:{{dortor!=null?doctor.doctorName:""}}</view>
						<view class="count" v-if="follow!=null">{{follow.num}}/{{follow.totalNum}}期</view>
					</view>
					<view class="right">
						{{follow.planTime}}
					</view>
				</view>
				<view class="item-box">
					<view class="item" v-for="(item,index) in form">
						<view class="title">{{item.question}}<text v-if="item.require" class="tip">(必填)</text></view>
						<view class="option">
							<u-radio-group
								v-if="item.type==1"
							    v-model="item.answers"
							    placement="column"
							  >
							    <u-radio
							      :customStyle="{marginBottom: '8px'}"
							      v-for="(option, subIndex) in item.options"
							      :key="subIndex"
							      :label="option"
							      :name="option"
							    >
							    </u-radio>
							</u-radio-group>
							<u-checkbox-group
								v-if="item.type==2"
							    v-model="item.answers"
							    placement="column"
							  >
							    <u-checkbox
							      :customStyle="{marginBottom: '8px'}"
							      v-for="(option, subIndex) in item.options"
							      :key="subIndex"
							      :label="option"
							      :name="option"
							    >
							    </u-checkbox>
							</u-checkbox-group>
							<u--textarea count maxlength="200" v-if="item.type==3" v-model="item.answers" placeholder="请输入内容" ></u--textarea>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="doFollow()">提交随访</view>
		</view>
	</view>
</template>
 
<script  >
	import {getFollowById,doFollow} from '@/api/follow.js'
	export default {
		data() {
			return {
				followId:null,
				follow:null,
				doctor:null,
				form:null,
			}
		},
		onLoad(options) {
			this.followId=options.followId;
		},
		onShow() {
			this.getFollowById();
		},
		methods: {
			doFollow(){
				var that=this;
				uni.showModal({
					title:"提示",
					content:"确认提交吗吗?",
					showCancel:true,
					cancelText:'取消',
					confirmText:'确定',
					success:res=>{
						if(res.confirm){
							// 用户点击确定
							var data={
								followId:this.followId,
								formJson:JSON.stringify(this.form)
							}
							doFollow(data).then(
								res => {
									if(res.code==200){
										uni.showToast({
											icon:'success',
											title: "操作成功",
										});
										setTimeout(function() {
											 uni.$emit('refreshFollowList');
											 uni.navigateBack({
												 delta: 1
											 })
										}, 500);
									}else{
										uni.showToast({
											icon:'none',
											title: res.msg,
										});
									}
								},
								rej => {}
							);
														
						}else{
							// 否则点击了取消  
						}
					}
				})
			},
			getFollowById(){
				var that=this;
				var data={followId:this.followId}
				getFollowById(data).then(
					res => {
						if(res.code==200){
							this.follow=res.follow;
							this.doctor=res.doctor;
							this.form=JSON.parse( this.follow.formJson);
							this.form.forEach(function(element) {
							  if(element.type==3){
								  element.answers=""
							  }
							});
						}
					},
					err => {
					}
				);
				
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.content{
		position: relative;
		 
		.cont-box{
			padding: 20rpx 20rpx 180rpx;
			.cont{
				padding: 20rpx;
				background-color: #fff;
				border-radius: 20upx;
				.doctor{
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					justify-content: space-between;
					.left{
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						.name{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #9a9a9c;
						}
						.count{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #9a9a9c;
						}
					}
					.right{
						font-size: 28upx;
						font-family: PingFang SC;
						color: #9a9a9c;
					}
				}
				.item-box{
					margin: 15rpx 0rpx;
					.item{
						.title{
							font-size: 28rpx;
							font-weight: bold;
							color: #111;
							.tip{
								margin-left: 10rpx;
								font-size: 24rpx;
								color: #9a9a9c;
							}
						}
						.option{
							margin-left: 10rpx;
						}
					}
					
				}
			}
			
		}
		 
		
	}
	.btn-box{
		height: 140upx;
		z-index: 9999;
		width: 100%;
		padding: 0rpx 30upx;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		.sub-btn{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #2583EB;
			border-radius: 44upx;
		}
	}
</style>