tijian_BJRR/北京仁仁体检平台H5/pages/main/question2/question2.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年6月8日 20:08:53
	 */
	import {
		ref
	} from 'vue'
	import {
		LabelAddOrderEvaluateAction,
		LabelGetOrderEvaluateAction,
		LabelGetLabelListAction,
		$response
	} from '@/api'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const $props = defineProps({
		hospital: {
			type: String,
			default: '0'
		}
	});
	let orderid = ref('')
	let orderInfo = ref('')
	let subbutton_show = ref(false)
	let showdata=ref(false)
	const face_list = ref([])
	const comment_list = ref([])
	const GetLabelGetLabelList = async () => {
		const response = await LabelGetLabelListAction()
		$response(response, () => {
			face_list.value = response.data.label1
			comment_list.value = response.data.label2
		})
	}
	//获取订单是评价详情
	let pingjia_time = ref('')
	const GetLabelGetOrderEvaluate = async (id) => {
		uni.showLoading({
			title: '加载中'
		});
		const response = await LabelGetOrderEvaluateAction({
			orderid: id
		})
		showdata.value=true
		uni.hideLoading();
		$response(response, () => {

			orderInfo.value = response.data.orderInfo[0]
			var obj = JSON.parse(orderInfo.value.buy_info);
			orderInfo.value.buy_info = obj
			
			if(response.data.info){
				faceId.value=response.data.info[0].face_id
				var aa=  response.data.info[0].comment_ids.split(',');
				for (var i = 0; i < aa.length; i++) {
				  aa[i] = parseInt(aa[i]); 
				}
				pingjiaList.value=aa
				pingjia_time.value=response.data.info[0].created_at
				console.log(pingjiaList.value)
			}
		
			if (response.data.status) {
				
			} else {
				//未评价
				subbutton_show.value = true
			}
		})
	}
	const submit = async () => {
		if(faceId.value=='' || pingjiaList.value.length==0){
			uni.showToast({
				title: '请勾选评价信息',
				icon: 'none'
			});
			return false
		}
		uni.showLoading({
			title: '加载中'
		});
		let data={
			faceId:faceId.value,
			pingjiaList:pingjiaList.value,
			orderid:orderid.value
		}
		const response = await LabelAddOrderEvaluateAction(data)
		uni.hideLoading();
		$response(response, () => {
			console.log(response)
			if(response.data.status==true){
				subbutton_show.value=false
				uni.showToast({
					title: '感谢您的评价，您的满意是我们前进的动力',
					icon: 'none'
				});
				GetLabelGetOrderEvaluate(orderid.value)
			}else{
				
			}
		})
	}
	let faceId = ref('')
	const clickFace = (id) => { //点击笑脸
	if(!subbutton_show.value){
		return false
	}
		faceId.value = id
		console.log(faceId.value)
	}
	let pingjiaList = ref([])
	const clickComment = (id) => { //点击评价标签
	if(!subbutton_show.value){
		return false
	}
		if (pingjiaList.value.indexOf(id) != -1) {
			pingjiaList.value.splice(pingjiaList.value.indexOf(id), 1)
		} else {
			pingjiaList.value.push(id)
		}



		console.log(pingjiaList.value)

	}
	onShow(() => {
		GetLabelGetLabelList()
	})
	onLoad((options) => {
		console.log(options.orderid); // 输出
		orderid.value = options.orderid
		GetLabelGetOrderEvaluate(orderid.value)
	})
</script>
<template>
	<view class="question2" v-show="showdata">
		<view class="main">
			<view class="row">
				<view class="row_title">体 检 人</view>
				<view class="row_cc">{{orderInfo.name}}</view>
			</view>
			<view class="row">
				<view class="row_title">体 检 号</view>
				<view class="row_cc">{{orderInfo.exam_number}}</view>
			</view>
			<view class="row" v-if="orderInfo.buy_info">
				<view class="row_title">体检套餐</view>
				<view class="row_cc">{{orderInfo.buy_info.combo.name}}</view>
			</view>
			<view class="row">
				<view class="row_title">体检分院</view>
				<view class="row_cc">{{orderInfo.hname}}</view>
			</view>
			<view class="row">
				<view class="row_title">体检时间</view>
				<view class="row_cc">{{orderInfo.check_time}}</view>
			</view>
		</view>
		<view class="main2">
			<view class="face">
				<view class="face_l" v-for="(item,k) in face_list " :class="faceId==item.id?'active':''"
					@click="clickFace(item.id)">{{item.value}}</view>
			</view>
			<view class="pingjia" v-show="!subbutton_show">感谢您的评价，您的满意是我们前进的动力</view>
			<view class="common">
				<view class="common_l"  v-for="(item2,k) in comment_list " :class="pingjiaList.indexOf(item2.id) != -1?'active':''" @click="clickComment(item2.id)">
					{{item2.value}}
				</view>
			</view>
			<button size="default" type="default" v-show="subbutton_show" @click="submit"
				style="color:#ffffff;backgroundColor:#27ada9;borderColor:#1AAD19; margin-top: 40rpx;"
				hover-class="is-hover">提交评价</button>
			<view style="color: #9b9b9b; font-size: 20rpx;margin-top: 20rpx;" v-show="!subbutton_show">评价时间：{{pingjia_time}}</view>
		</view>

		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.pingjia{
		width: 100%;
		text-align: center;
		margin: 30rpx auto;
		color:#fa8527;
		font-size: 25rpx;
		font-weight: 700;
	}
	.question2 {
		background-color: #f3f3f3;
		padding-top: 20rpx;
		height: 100vh;
	}

	.main {
		padding: 40rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.main2 {
		padding: 20rpx;
		padding-top: 40rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding-bottom: 60rpx;
	}

	.main3 {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.row {
		display: flex;
		margin-top: 20rpx;
	}

	.row_title {
		margin-right: 30rpx;
		color: #a4a4a4;
		text-align: right;
		width: 150rpx;
	}

	.row_cc {
		color: #373737;
	}

	.face {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.face_l {
		border: 1px solid #ccc;
		padding: 16rpx;
		font-size: 20rpx;
		border-radius: 8rpx;
	}

	.common {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.common_l {
		display: inline-block;
		white-space: nowrap;
		width: 25%;
		text-align: center;
		border: 1px solid #ccc;
		padding: 14rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		margin: 10rpx;
	}

	.button {}

	.active {
		border: 1px solid #fa8527;
		color: #fa8527 !important;
	}
</style>