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-textarea">
							<textarea v-model="info.text" class="textarea" :disabled="false" placeholder-style="color:#B3B5B9"
								maxlength="-1" placeholder="展开说说您对“中医用药一件事”的想法吧..." />
						</view>
						<!-- 最多三张 -->
						<view class="picture-item" v-if="true">
							<uni-file-picker class="file-picker" limit="3" :auto-upload="false" del-icon="true"
								file-extname='png,git,jpeg,pdf,jpg' :imageStyles="imageStyles" file-mediatype="image" v-model="fileList"
								@select="onSelectFile" @delete="onDelFile">
								<view class="cf-appraise-edit-add">
									<text class="iconfont">&#xe69f;</text>
								</view>
							</uni-file-picker>
						</view>
						<view class="echoPicture" v-else>
							<view v-for="item in fileList" :key="item" class="loop-item">
								<image class="image-sty" :src="item"></image>
							</view>
						</view>

					</view>
					<view class="cf-appraise-anonymous">
						<view class="anonymous-text" @click="updateAnonymity">
							<text class="iconfont" :class="info.anonymous?'is-active':''">&#xe63b;</text>匿名评价
						</view>
					</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 rest from '@/stores/rest'

	import CfAppraiseStar from './CfAppraiseStar.vue'

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

	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 fileList = ref([])//用于显示图片列表
	const files = ref([]) //上传post
	const imageStyles = ref({
		width: '210rpx',
		height: '210rpx',
	})


	// 上传图片
	const onSelectFile = async (res) => {
		console.log("上传")
		if (!res.tempFilePaths.length) return;
		uni.showLoading({
			title: '',
			mask: true
		});
		for (var i = 0; i < res.tempFilePaths.length; i++) {
			// 将 Blob 转换为 Base64 
			let blob = res.tempFilePaths[i];
			let uploadedFile = await rest.upload(blob);
			if (!uploadedFile) {
				dlg.error("上传失败，请重试！");
				uni.hideLoading();
				return;
			}
			files.value.push(uploadedFile);
		}
		uni.hideLoading();
	}

	// 删除图片
	const onDelFile = (val) => {
		if (val.index != -1) {
			files.value.splice(val.index, 1);
		}
	}
	// 修改
	const updateAnonymity = () => {
		info.value.anonymous = !info.value.anonymous
	}

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

	const getInfo = async () => {
		loaded.value = true;
		try {
			let res = await rest.get('/app-api/zyyp/prescription-evaluate/getByOrderId', { orderId: '2024_1857595040975118338' })
			if (res) {
				console.log("内容存在", res)
			}
			console.log("内容不存在", res)
		} catch (e) {
			console.log(e);
		}
		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 {
						text-align: center;
						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;

					.cf-appraise-edit-textarea {
						.textarea {
							width: 100%;
							height: 256rpx;
							font-size: $uni-font-size-lg;
							line-height: $uni-line-height-lg;

							:deep(.uni-textarea-placeholder) {
								color: $uni-text-color-light !important;
							}
						}
					}

					.picture-item {
						margin-top: 32rpx;

						.file-picker {
							.cf-appraise-edit-add {
								@include flex-center;
								width: 200rpx;
								height: 200rpx;
								background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), #1E92F0;

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

					.echoPicture {
						margin-top: 16rpx;
						display: flex;
						flex-wrap: wrap;
						padding-left: 2px;

						.loop-item {
							.image-sty {
								height: 200rpx;
								width: 200rpx;
								margin: 5px 2px 0 0px;
							}
						}
					}
				}

				.cf-appraise-anonymous {
					display: flex;
					margin: $uni-spacing-col-s4 0 $uni-spacing-col-s4 $uni-spacing-row-s4;

					// font-size: $uni-font-size-sm;
					// line-height: $uni-line-height-lg;
					.anonymous-text {
						@include flex;
						flex-wrap: 0;
					}

					.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>