hainan_2024/h5/pages/main/question/list/list.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()

	const getUserInfo = async () => {
		const response = await $api('UserInfo')
		$response(response, () => {
			$store.setUser(response.data.info);
			getQuestionLogList()
		})
	}

	const mountedAction = () => {
		getUserInfo()
	}

	const question_list = ref([])
	const getQuestionLogList = async () => {
		const response = await $api('QuestionLogList', {
			person: $store.user.person_id
		})
		$response(response, () => {
			question_list.value = response.data.list
		})
	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			mountedAction()
		}
	}
	
	const QuestionLogDelete = async (id) => {
		const response = await $api('QuestionLogDelete', {
			id: id,
			person: $store.user.person_id,
		})
		$response(response, () => {
			getQuestionLogList()
		})
	}

	const toDone = (id) => {
		uni.navigateTo({
			url: `/pages/main/question/done/done?id=${id}`
		})
	}

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view>
			<view @click="toDone(i.id)" v-for="(i,k) in question_list" :key="k" class="log_item_wrapper">
				<view class="log_count_wrapper">
					<view @click.stop="QuestionLogDelete(i.id)" class="log_del_wrapper" v-if="i.count === 0">
						<image src="@/static/assets/question/del.png"></image>
					</view>
					<view v-else class="log_count_show_wrapper">
						<view class="log_count_value_wrapper">{{ i.count }}</view>
						<view class="log_count_text_wrapper">健康风险</view>
					</view>
				</view>
				<view class="log_info_wrapper">
					<view class="log_cover_wrapper">
						<image src="@/static/assets/question/log_cover.png"></image>
					</view>
					<view class="log_content_wrapper">
						<view class="log_title_wrapper">{{ i.title }}</view>
						<view class="log_text_wrapper">
							<view class="log_text_item_wrapper">
								<view class="log_text_title_wrapper">姓名：</view>
								<view class="log_text_text_wrapper">{{ i.name }}</view>
							</view>
							<view class="log_text_item_wrapper">
								<view class="log_text_title_wrapper">年龄：</view>
								<view class="log_text_text_wrapper">{{ i.age }}</view>
							</view>
							<view class="log_text_item_wrapper">
								<view class="log_text_title_wrapper">评估时间：</view>
								<view class="log_text_text_wrapper">{{ i.created_at }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="log_line_wrapper"></view>
				<view class="log_bottom_wrapper">
					<view class="log_status_wrapper">已完成</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.log_del_wrapper {
		width: 30rpx;
		height: 32rpx;
		margin: 0 auto;
	}

	.log_del_wrapper image {
		width: 30rpx;
		height: 32rpx;
		display: block;
		object-fit: contain;
	}

	.log_count_text_wrapper {
		font-size: 24rpx;
		color: #727272;
		line-height: 60rpx;
	}

	.log_count_wrapper {
		text-align: center;
		position: absolute;
		width: 110rpx;
		height: 100rpx;
		font-weight: 500;
		font-size: 48rpx;
		color: #DD2E28;
		line-height: 60rpx;
		top: 38rpx;
		right: 6rpx;
	}

	.log_status_wrapper {
		width: 140rpx;
		height: 52rpx;
		background: #EDFCFD;
		border-radius: 10rpx;
		border: 1px solid #81CDD0;
		font-weight: 400;
		font-size: 26rpx;
		color: #239EA3;
		line-height: 52rpx;
		text-align: center;
		margin-top: 15rpx;
		margin-right: 20rpx;
	}

	.log_bottom_wrapper {
		display: flex;
		align-items: center;
		justify-content: end;
	}

	.log_text_wrapper {
		margin-left: 29rpx;
	}

	.log_line_wrapper {
		width: 653rpx;
		height: 1rpx;
		background: #E3E3E4;
		margin: 27rpx auto 0;
	}

	.log_text_item_wrapper {
		display: flex;
		align-items: center;
	}

	.log_text_text_wrapper {
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		line-height: 70rpx;
	}

	.log_text_title_wrapper {
		width: 140rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #4A5060;
		line-height: 53rpx;
	}

	.log_cover_wrapper {
		width: 160rpx;
		height: 202rpx;
		margin-left: 20rpx;
	}

	.log_cover_wrapper image {
		width: 160rpx;
		height: 202rpx;
		display: block;
		object-fit: contain;
	}

	.log_info_wrapper {
		display: flex;
		margin: 40rpx auto 0;
	}

	.log_item_wrapper {
		width: 710rpx;
		padding-bottom: 15rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		margin: 15rpx auto 0;
		overflow: hidden;
		position: relative;
	}
</style>