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==1?'is-active':''"
								@click="onClickComprehensive(1)">
								<text class="iconfont">&#xe687;</text>差评
							</view>
							<view class="cf-appraise-top-comprehensive-item" :class="info.comprehensiveVal==2?'is-active':''"
								@click="onClickComprehensive(2)">
								<text class="iconfont">&#xe698;</text>中评
							</view>
							<view class="cf-appraise-top-comprehensive-item" :class="info.comprehensiveVal==3?'is-active':''"
								@click="onClickComprehensive(3)">
								<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">
							<uni-file-picker readonly :value="info.imgList" file-mediatype="image">
							</uni-file-picker>
						</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="展开说说您对“中医用药一件事”的想法吧..." /> -->
							<uni-easyinput class="pub-input" :inputBorder="false" autoHeight trim="all" :adjust-position="false"
								type="textarea" maxlength="-1" v-model="info.text" placeholder="展开说说您对“中医用药一件事”的想法吧..."></uni-easyinput>
						</view>
						<!-- 最多三张 -->
						<view class="picture-item">
							<uni-file-picker class="file-picker" limit="3" :auto-upload="false" :del-icon="true"
								file-extname='png,git,jpeg,pdf,jpg' 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>
					<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, watch } from 'vue'
	import dlg from '@/lib/dlg.ts'
	import rest from '@/stores/rest'


	import CfAppraiseStar from './CfAppraiseStar.vue'

	const emits = defineEmits(['update'])
	const props = defineProps({
		ptwybh: {
			type: String,
			default: ""
		},
		dataList: {
			type: Object as PropType<any>,
			default: () => ({})
		},
		isEdit: {
			type: Boolean,
			default: false
		}
	})


	const loaded = ref(false)
	const starText = [
		['', '无效健康', '较差健康', '一般健康', '基本健康', '完全康复'],
		['', '非常差', '差', '一般', '好', '非常好'],
		['', '非常差', '差', '一般', '好', '非常好'],
		['', '非常差', '差', '一般', '好', '非常好'],
	]
	const info = ref({
		starVal: [0, 0, 0, 0],
		comprehensiveVal: 3,
		text: '',
		imgList: [],
		anonymous: true
	})
	const fileList = ref([])//用于显示图片列表
	const files = ref([]) //上传post

	// 上传图片
	const onSelectFile = async (res) => {
		if (!res.tempFilePaths.length) return;
		uni.showLoading({
			title: '正在上传...',
			mask: true
		});
		for (var i = 0; i < res.tempFilePaths.length; i++) {
			let uploadedFile = await rest.upload(res.tempFilePaths[i]);

			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 = () => {
		if (props.isEdit) return
		info.value.anonymous = !info.value.anonymous
	}

	const onClickComprehensive = (val : number) => {
		if (props.isEdit) return
		info.value.comprehensiveVal = val
	}


	const onApply = async () => {
		const formData = {
			orderId: props.ptwybh,
			zhpj: info.value.comprehensiveVal,
			jyxg: info.value.starVal[0],
			kfys: info.value.starVal[1],
			jyzl: info.value.starVal[2],
			wlfw: info.value.starVal[3],
			content: info.value.text,
			image: JSON.stringify(files.value),
			anonymity: info.value.anonymous ? 1 : 0
		}
		info.value.imgList = files.value
		let fields = {
			'orderId': '订单ID不能为空',
			'zhpj': '综合评价不能为空',
			'jyxg': '就医效果不能为空',
			'kfys': '开方医生不能为空',
			'jyzl': '煎药质量不能为空',
			'wlfw': '物流服务不能为空'
		};
		for (let key in fields) {
			if (!formData[key]) {
				dlg.error(fields[key]);
				return;
			}
		}
		console.log("processedData", formData, files.value)
		await rest.post('/app-api/zyyp/prescription-evaluate/create', formData)
		dlg.success('操作成功')
		emits('update');
	}

	const getInfo = async () => {
		info.value.comprehensiveVal = props.dataList.zhpj
		info.value.starVal = [props.dataList.jyxg, props.dataList.kfys, props.dataList.jyzl, props.dataList.wlfw]
		info.value.text = props.dataList.content
		info.value.imgList = props.dataList.imgList.map((item : string) => {
			return { url: item }
		})
		info.value.anonymous = props.dataList.anonymity == 1 ? true : false
	}

	watch(() => props.isEdit, (newValue) => {
		if (newValue) {
			getInfo();
		}
	}, { immediate: true });

	watch(() => props.dataList, (newValue) => {
		if (props.isEdit) {
			getInfo();
		}
	}, { immediate: true });
</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;
				min-height: 300rpx;

				.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 !important;
							height: 200rpx !important;
							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;
							}
						}

						:deep(.uni-easyinput__content-textarea) {
							margin: 8rpx 0 4rpx;
							height: 120rpx;
							min-height: 120rpx;

							.uni-easyinput__placeholder-class {
								font-size: $uni-font-size-lg;
								line-height: $uni-line-height-lg;
								color: $uni-text-color-light;
							}

							.uni-textarea-textarea {
								font-size: $uni-font-size-lg;
								line-height: $uni-line-height-lg;
								color: $uni-text-color;
							}
						}
					}

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