ykz-wx/pages/index/CfAppraise.vue

<template>
	<view class="cf-appraise">
		<pub-loading-view :loaded="loaded" height="100%">
			<view class="cf-appraise-section" v-if="info">
				<view class="cf-appraise-top-section">
					<view class="cf-appraise-top">
						<view class="cf-appraise-top-title">“中医用药一件事”满意度调查</view>
						<view class="cf-appraise-top-comprehensive">
							<view class="appraise-star-title">综合评价</view>
							<view class="cf-appraise-top-comprehensive-item" :class="info.comprehensiveVal==0?'is-active':''"
								@click="onClickComprehensive(0)">
								<text class="iconfont">&#xe687;</text>差评
							</view>
							<view class="cf-appraise-top-comprehensive-item" :class="info.comprehensiveVal==1?'is-active':''"
								@click="onClickComprehensive(1)">
								<text class="iconfont">&#xe698;</text>中评
							</view>
							<view class="cf-appraise-top-comprehensive-item" :class="info.comprehensiveVal==2?'is-active':''"
								@click="onClickComprehensive(2)">
								<text class="iconfont">&#xe696;</text>好评
							</view>
						</view>
						<CfAppraiseStar :isEdit="isEdit" title="就医效果" :starText="starText[0]" v-model:starval="info.starVal[0]" />
						<CfAppraiseStar :isEdit="isEdit" title="开方医生" :starText="starText[1]" v-model:starval="info.starVal[1]" />
						<CfAppraiseStar :isEdit="isEdit" title="煎药质量" :starText="starText[2]" v-model:starval="info.starVal[2]" />
						<CfAppraiseStar :isEdit="isEdit" title="物流服务" :starText="starText[3]" v-model:starval="info.starVal[3]" />
					</view>
					<view class="cf-appraise-view" v-if="isEdit">
						<view class="cf-appraise-view-text">{{info.text}}</view>
						<view class="cf-appraise-view-imgs">
							<image mode="heightFix" :src="item" v-for="(item,index) in info.imgList" :item="index" />
						</view>
					</view>
					<view class="cf-appraise-edit" v-else>
						<view class="cf-appraise-edit-tips">
							展开说说您对“中医用药一件事”的想法吧...
						</view>
						<!-- 最多三张 -->
						<view class="cf-appraise-edit-add">
							<text class="iconfont">&#xe69f;</text>
						</view>
					</view>
					<view class="cf-appraise-anonymous">
						<text class="iconfont" :class="info.anonymous?'is-active':''">&#xe699;</text>匿名评价
					</view>
				</view>
				<view class="cf-appraise-btn pub-button is-bg large" v-if="!isEdit" @click="onApply">提交评价</view>
			</view>
		</pub-loading-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, PropType, onMounted } from 'vue'
	import dlg from '@/lib/dlg.ts'
	import CfAppraiseStar from './CfAppraiseStar.vue'

	import testBgUrl from '/static/image/no-data.png'//to del

	const loaded = ref(false)
	const isEdit = ref(false)
	const starText = [['', '非常差', '差', '一般', '好', '完全康复'],
	['', '非常差', '差', '一般', '好', '非常好'],
	['', '非常差', '差', '一般', '好', '非常好'],
	['', '非常差', '差', '一般', '好', '非常好']]
	const info = ref()
	const infoNew = ref({
		starVal: [0, 0, 0, 0],
		comprehensiveVal: 0,
		text: '',
		imgList: [

		],
		anonymous: true
	})
	const info2 = ref({
		starVal: [5, 4, 3, 2],
		comprehensiveVal: 2,
		text: '中药材资源是中医药的物质基础,其质量事关临床用药的安全性与有效性,其科学评价是中药产业现代化、标准化以及国际化的前提条件。 中药材的性状特征、药效成分以及分子标记为迄今三类质量评价方法的主要依据  ',
		imgList: [
			testBgUrl, testBgUrl, testBgUrl
		],
		anonymous: true
	})

	const onClickComprehensive = (val : number) => {
		info.value.comprehensiveVal = val
	}

	const getInfo = async () => {
		loaded.value = true;
		// todo 有值取值，没值初始化 
		info.value = infoNew.value
		// isEdit.value = true
		// info.value = info2.value
		loaded.value = false;
	}

	const onApply = () => {
		console.log("info.value", info.value)
		dlg.success('操作成功')
	}

	onMounted(() => {
		getInfo()
	})
</script>

<style lang="scss" scoped>
	.cf-appraise {
		padding: 0 $page-row-spacing;
		height: 100%;

		.cf-appraise-section {
			height: 100%;
			position: relative;
			display: flex;
			flex-direction: column;

			.cf-appraise-top-section {
				flex: 1;
				box-sizing: border-box;
				overflow-y: auto;

				.cf-appraise-top {
					background: #fff;
					padding: $uni-spacing-col-s3 $page-row-spacing;
					border-radius: 8rpx;

					.cf-appraise-top-title {
						font-size: $uni-font-size-xl;
						line-height: $uni-line-height-xl;
						font-weight: 600;
					}

					.cf-appraise-top-comprehensive {
						@include flex;
						margin-top: 40rpx;

						.cf-appraise-top-comprehensive-item {
							margin-left: 48rpx;
							@include flex;
							color: $uni-text-color-light;

							.iconfont {
								font-size: 48rpx;
								margin-right: 8rpx;
								background: linear-gradient(180deg, #B3B5B9 0%, #899AB9 100%);
								background-clip: text;
								text-fill-color: transparent;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;


							}

							&:nth-child(2) {
								margin-left: 32rpx;
							}

							&.is-active {
								color: $uni-text-color;

								.iconfont {
									background: linear-gradient(180deg, #FFBD48 0%, $uni-color-orange 100%);
									background-clip: text;
									text-fill-color: transparent;
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
								}
							}
						}
					}
				}

				.cf-appraise-view {
					background: #fff;
					padding: $uni-spacing-col-s2 $uni-spacing-row-s3 $uni-spacing-col-s4;
					border-radius: 8rpx;
					margin-top: 24rpx;

					.cf-appraise-view-imgs {
						margin-top: 16rpx;

						image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 8rpx;

							&+image {
								margin-left: 16rpx;
							}
						}
					}
				}

				.cf-appraise-edit {
					background: #fff;
					padding: $uni-spacing-col-s4 $uni-spacing-row-s4;
					border-radius: 8rpx;
					margin-top: 24rpx;
					color: $uni-text-color-grey;

					.cf-appraise-edit-add {
						margin-top: 16rpx;
						width: 200rpx;
						height: 200rpx;
						border-radius: 8rpx;
						background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), #1E92F0;
						@include flex-center;

						.iconfont {
							font-size: 76rpx;
							color: $uni-color-primary;
						}
					}
				}

				.cf-appraise-anonymous {
					margin: $uni-spacing-col-s4 0 $uni-spacing-col-s4 $uni-spacing-row-s4;
					@include flex;
					// font-size: $uni-font-size-sm;
					// line-height: $uni-line-height-lg;

					.iconfont {
						margin-right: 16rpx;
						font-size: 40rpx;
						background: linear-gradient(180deg, #B3B5B9 0%, #899AB9 100%);
						background-clip: text;
						text-fill-color: transparent;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

						&.is-active {
							background: linear-gradient(180deg, #46ACFF 0%, $uni-color-primary 100%);
							background-clip: text;
							text-fill-color: transparent;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;

						}
					}
				}
			}
		}
	}
</style>