rtdeviceApp/pages/user/question.vue

<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="blur-bg-2"></view>
		<view class="top-btn">
			<view class="back x-c" @click="$navBack()">
				<image src='/static/image/new/icon_back.svg'></image>
				返回
			</view>
			<view class="title x-c">
				<image src='/static/image/new/img_title1.svg'></image>
				<text>问诊</text>
				<image src='/static/image/new/img_title2.svg'></image>
			</view>
			<view class="index x-c" @click="isShow=true">
				<image src='/static/image/new/icon_home.svg'></image>
				首页
			</view>
		</view>
		<view class="userBox y-c" v-if="currentIndex === index" v-for="(item,index) in qw" :key="index">
			<view class="toptitle">
				<view class="tips">
					<view class="num x-c">{{index+1}}/{{qw.length}}</view>
					<view class="select x-c" v-if="index!=4">多选</view>
				</view>
				<view class="topic">{{item.name}}</view>
			</view>
			<view class="userInfo y-bc">
			    <view class="item" v-for="(it,idx) in  item.option" :key="idx" :class="{ 'active': item.selected.includes(idx) }" @click="selectOption(index, idx)">
					<view class="option-text">{{it.name}}</view>
					<image src='/static/image/new/icon_selected.svg' v-if="item.selected.includes(idx)"></image>
				</view>
				<view class="btn-box x-ac">
					<view class="last-btn" v-if="currentIndex>0" @click="lastItem(index)">上一题</view>
					<view class="next-btn" @click="nextItem(index)">{{index === qw.length - 1 ? '提交' : '下一题'}}</view>
				</view>
			</view>
		</view>
		<view v-if="isShow" class="mask">
			<view class="popup-container">
				<image class="bg" src='/static/image/new/bg_popup.svg'></image>
				<view class="title-t x-c">
					<image src='/static/image/new/img_title1.svg'></image>
					<text>提示</text>
					<image src='/static/image/new/img_title2.svg'></image>
					</view>
				<view class="title-r">确定要中断当前操作，返回首页吗～</view>
				<!-- <image style="width: 200px;height: 200px;margin-bottom: 20px;" :src="qUrl"></image> -->
				<view class="x-c">
					<view class="btn-l" @click="close">取消</view>
					<view class="btn-r" @click="goIndex">确认</view>
				</view>
			</view>
		</view>
		<CustomToast ref="toast"></CustomToast>
	</view>
</template>

<script>
	import {
		getUserInfoByUserId,
		getUserInfo,
	   consultationCollect
	} from '@/api/user.js';
	import CustomToast from '@/components/CustomToast.vue';
	export default {
		components: { CustomToast },
		data() {
			return {
				isShow:false,
				currentIndex: 0, // 当前显示的题目索引
				qw:[
					{
						qid:1,
						name:"您平时是否有以下状况？",
						option:[
							{id:1,name:"高血压"},
							{id:2,name:"高血脂"},
							{id:3,name:"高血糖"},
							{id:4,name:"高尿酸"},
							{id:5,name:"无"},
						],
						selected: [] // 存储选中的选项索引
					},
					{
						qid:2,
						name:"您是否有以下情况？",
						option:[
							{id:1,name:"手术史"},
							{id:2,name:"长期用药"},
							{id:3,name:"过敏史"},
							{id:4,name:"遗传疾病"},
							{id:5,name:"无"},
						],
						selected: [] // 存储选中的选项索引
					},
					{
						qid:3,
						name:"您是否有以下不良生活习惯？",
						option:[
							{id:1,name:"吸烟"},
							{id:2,name:"喝酒"},
							{id:3,name:"熬夜"},
							{id:4,name:"精神压力过大"},
							{id:5,name:"无"},
						],
						selected: [] // 存储选中的选项索引
					},
					{
						qid:4,
						name:"您是否有以下不良饮食习惯？",
						option:[
							{id:1,name:"偏咸饮食"},
							{id:2,name:"喜欢吃辣"},
							{id:3,name:"重甜食油腻"},
							{id:4,name:"贪食寒凉"},
							{id:5,name:"无"},
						],
						selected: [] // 存储选中的选项索引
					},
					{
						qid:5,
						name:"您平时的运动情况是？",
						option:[
							{id:1,name:"每天规律运动，每次半小时以上"},
							{id:2,name:"每周运动5次以上，每次半小时以上"},
							{id:3,name:"每周运动3次以上，每次半小时以上"},
							{id:4,name:"每周运动1-2次，每次半小时以上"},
							{id:5,name:"基本不运动"},
						],
						selected: [] // 存储选中的选项索引
					}
				]
			}
		},
		onLoad(option) {
			
		},
		onShow() {
		},
		methods: {
			//首页
			goIndex(){
				this.isShow=false
				uni.reLaunch({
					url: '/pages/index/index',
					animationType: 'none',
					animationDuration: 2000
				})
			},
			close(){
				this.isShow=false
			},
			 // 选中/取消选中选项
			    selectOption(quesIndex, optIndex) {
			      const question = this.qw[quesIndex];
			      // 判断是否已选中：选中则取消，未选中则添加
				  if (quesIndex === 4) {
				          question.selected = [optIndex]; // 单选直接替换数组
				        } else {
			      if (question.selected.includes(optIndex)) {
			        question.selected = question.selected.filter(idx => idx !== optIndex);
			      } else {
			        question.selected.push(optIndex);
			      }
				  }
			    },
				// 上一题
				    lastItem(index) {
				      // 第一题禁用上一题
				      if (index === 0) return;
				      // 切换到上一题并滚动到顶部
				      this.currentIndex = index - 1;
				    },
				  // 下一题/提交答案
				    nextItem(index) {
				      // 验证：未选中任何选项时提示
				      if (!this.qw[index].selected.length) {
						this.$refs.toast.showToast({ title: '还没选择选项呢，选好再继续呀~'})
				        return;
				      }
				       // 最后一题：提交答案
				            if (index === this.qw.length - 1) {
				              this.submitAnswers();
				              return;
				            }
				      
				            // 非最后一题：切换到下一题
				            this.currentIndex = index + 1;
				    },
			// 提交所有答案
			    submitAnswers() {
			      // 整理答案数据（示例格式）
				  // questionIndex: idx + 1,
				  // question: item.name,
				  // selectedOptions: item.selected.map(i => item.option[i].name),
				  // selectedIndexes: item.selected,
				  const getSelectedStr = (item) => {
				    // 边界处理：防止item/selected/option不存在导致报错
				    if (!item || !Array.isArray(item.selected) || !item.option) return '';
				    // 映射并过滤空值，避免无效逗号
				    return item.selected.map(i => item.option[i]?.name || '').filter(Boolean).join(',');
				  };
const answers = {
  conditions: getSelectedStr(this.qw[0]) || '',
  situations: getSelectedStr(this.qw[1]) || '',
  liftHabits: getSelectedStr(this.qw[2]) || '',
  eatHabits: getSelectedStr(this.qw[3]) || '',
  exercise: getSelectedStr(this.qw[4]) || ''
};
			     var token = uni.getStorageSync('AppToken');
				 console.log('token',token)
			      console.log('提交的答案：', answers);
			      // 模拟接口提交
			      uni.showLoading({ title: '提交中...' });
				  consultationCollect(answers).then(res => {
					  if(res.code==200){
						  setTimeout(() => {
						    uni.hideLoading();
							uni.showToast({ title: '提交成功', icon: 'success' });
						    // 提交成功后跳转（示例）
						    uni.navigateTo({ url: '/pages/device/pulse/transition' });
						  }, 1000);
					  }else{
						  this.$refs.toast.showToast({title: res.msg});
					  }
				  },rej => {});
			      
			    }
		}
	}
</script>


<style scoped lang="scss">
	page {
		background: #fff;
		font-size: 16px
	}
/* 遮罩层样式 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		animation: fadeIn 0.3s ease;
	}

	/* 弹窗容器样式 */
	.popup-container {
		//width: 50%;
		width: 620px;
		height: 352px;
		background: #FFFFFF;
		border-radius: 39px 39px 39px 39px;
		animation: scaleIn 0.3s ease;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding:43px;
		position: relative;
		.bg{
			width: 100%;
			height: 244px;
			position: absolute;
			top:0
		}
		.title-t {
			image{
				width: 153px;
				height: 25px;
			}
			text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32px;
				color: #333333;
				margin: 0 10px;
			}
		}

		.title-r {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28px;
			color: #333333;
		}
       .btn-l{
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   font-family: PingFang SC, PingFang SC;
		   font-weight: 600;
		   font-size: 28px;
		   color: #37C3A0;
		   width: 220px;
		   height: 64px;
		   border-radius: 121px 121px 121px 121px;
		   border: 2px solid #37C3A0;
		   margin-right: 40px;
	   }
		.btn-r {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 220px;
			height: 64px;
			background: #37C3A0;
			border-radius: 121px 121px 121px 121px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28px;
			color: #FFFFFF;
		}
	}
	.content {
		width: 100%;
		height: 100%;
		background: #D8F6EF;
		padding: 28px;
		display: flex;
		flex-direction: column;
		.blur-bg-2 {
		   width: 350px;
		   height: 350px;
		   background: #FFFDCC;
		   // opacity: 0.47;
		   filter: blur(200px);
		   position: absolute;
		   z-index: 1;
		   top: 60px;
		   right: calc(0px - 107px); 
		   pointer-events: none
		}
	}

	.top-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
z-index:2;
		.back {
			width: 140px;
			height: 48px;
			background: rgba(255, 255, 255, 0.64);
			border-radius: 45px 45px 45px 45px;
			border: 2px solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22px;
			color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36px;
			color: #327E6F;
			line-height: 54px;

			text {
				margin: 0 14px;
			}

			image {

				width: 153px;
				height: 25px;
			}
		}

		.index {
			width: 140px;
			height: 48px;
			background: rgba(255, 255, 255, 0.64);
			border-radius: 55px 55px 55px 55px;
			border: 2px solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22px;
			color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}
	}

	.userBox {
		flex: 1;
		margin-top: 28px;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 24px 24px 24px 24px;
		padding: 27px 40px;
        z-index: 9;
		display: flex;
		flex-direction: column;
		align-items: center;
		.toptitle {
			width: 720px;
			display: flex;
			flex-direction: column;
            align-items: start;
			margin-top: 12px;
			.tips {
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 24px;
				margin-bottom: 20px;
				.num{
					width: 80px;
					height: 36px;
					background: #37C3A0;
					border-radius: 55px 55px 55px 55px;
					color: #fff;
					margin-right:16px ;
				}
				.select{
					width: 80px;
					height: 36px;
					background: #FFFFFF;
					border-radius: 55px 55px 55px 55px;
					border: 2px solid #E3B419;
				    color: #E9A615;
				}
			}
			.topic{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28px;
				color: #333333;
			}
		}
		.userInfo{
			.item{
				width: 720px;
				height: 80px;
				background: rgba(55,195,160,0.08);
				border-radius: 24px 24px 24px 24px;
				text-align: center;
				position: relative;
				margin-top: 32px;
				.option-text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28px;
					line-height: 80px;
					color: #333333;
					
				}
				&.active{
					background: rgba(55,195,160,0.2);
					border: 2px solid #37C3A0;
					image{
						position: absolute;
						top:18px;
						right: 32px;
						width: 44px;
						height: 44px;
					}
				}
			}
		}
		.btn-box {
			margin-top: 50px;
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			.last-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 280px;
				height: 68px;
				border-radius: 121px 121px 121px 121px;
				border: 2px solid #37C3A0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28px;
				color: #37C3A0;
				margin-right: 40px;
			}
			.next-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 280px;
				height: 68px;
				background: #37C3A0;
				border-radius: 121px 121px 121px 121px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28px;
				color: #fff;
			}
			
		}
	}
</style>