Homestay_manage_app/pages/evaluate/evaluate.vue

<template>
	<view class="container">
		<!-- 页面标题区域 -->
		<view class="header" :style="{ height: customBarH * 2 + 'rpx', paddingTop: statusBarH * 2 + 'rpx' }">
			<img src="../../static/index/left2.png" :style="{ paddingTop: statusBarH * 2 + 'rpx' }" @click="handleBack" />
			<view class="header_text">评价</view>
		</view>

		<!-- 评分区域 -->
		<view class="rate">
			<view class="rate_key">民宿评分</view>
			<uni-rate v-model="rateValue" size="18" @change="onChange($event, 1)" />
			<view class="rate_value">{{ msg }}</view>
		</view>

		<!-- 评价上传图片视频区域 -->
		<view class="operation">
			<!-- 输入框区域 -->
			<view class="operation_input">
				<textarea
					maxlength="1000"
					class="textarea"
					placeholder-style="color:#B3B3B3;font-size:24rpx"
					placeholder="写出你的感受，可以帮助其他小伙伴哦~"
					v-model="textareaValue"
					@input="handleInput"
				/>
				<view class="operation_count">（{{ textareaValuelength }}/1000）</view>
			</view>

			<!-- 上传区域 -->
			<view class="operation_uploading">
				<view class="uploading_box" @click="handleUpLoad">
					<img class="img" src="../../static/index/photo.png" />
					<view class="msg">照片/视频</view>
				</view>

				<view class="uploading_box" v-for="(ele, index) in viewImgList" :key="index">
					<img class="img2" mode="aspectFill" v-if="ele.fileType === 'image'" :src="ele.url" @click="handleLook(ele.url, index)" />
					<video
						id="myVideo"
						class="video"
						:show-fullscreen-btn="false"
						:show-play-btn="false"
						v-if="ele.fileType === 'video'"
						:src="ele.url"
						@fullscreenchange="fullscreenchange"
						@click="handleClickVideo('myVideo')"
					></video>
					<view class="icon" @click="handleDelete(index)">
						<img src="../../static/index/close2.png" />
					</view>
				</view>
			</view>
		</view>

		<!-- 总体评价区域 -->
		<view class="foot">
			<!-- 民宿位置评价 -->
			<view class="foot_box">
				<view class="box_key">民宿位置</view>
				<uni-rate v-model="rateLocation" size="18" @change="onChange($event, 2)" />
				<view class="box_value">{{ msgLocation }}</view>
			</view>
			<!-- 民宿设施评价 -->
			<view class="foot_box">
				<view class="box_key">民宿设施</view>
				<uni-rate v-model="rateFacility" size="18" @change="onChange($event, 3)" />
				<view class="box_value">{{ msgFacility }}</view>
			</view>
			<!-- 民宿服务评价 -->
			<view class="foot_box">
				<view class="box_key">民宿服务</view>
				<uni-rate v-model="rateServe" size="18" @change="onChange($event, 4)" />
				<view class="box_value">{{ msgServe }}</view>
			</view>
			<!-- 民宿卫生评价 -->
			<view class="foot_box">
				<view class="box_key">民宿卫生</view>
				<uni-rate v-model="rateHygiene" size="18" @change="onChange($event, 5)" />
				<view class="box_value">{{ msgHygiene }}</view>
			</view>
		</view>

		<!-- 提交按钮区域 -->
		<view class="foot_btn" @click="handleSub">提交</view>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas2"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
// 图片压缩方法
import getLessLimitSizeImage from '@/util/imageCompress.js'
var dayjs = require('dayjs')
export default {
	data() {
		return {
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0,
			// 民宿评分
			rateValue: 0,
			msg: '',
			// 评价绑定数据
			textareaValue: '',
			// 评价文字长度
			textareaValuelength: 0,
			// 上传的图片数据
			subImgList: [],
			// 显示的图片数据
			viewImgList: [],
			// 民宿位置评分
			rateLocation: 0,
			msgLocation: '',
			// 民宿设施评分
			rateFacility: 0,
			msgFacility: '',
			// 民宿服务评分
			rateServe: 0,
			msgServe: '',
			// 民宿卫生评分
			rateHygiene: 0,
			msgHygiene: '',
			// 订单id
			bookingId: '',
			// 民宿id
			hotelId: '',
			// 房间id
			houseId: '',
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth,
			// video 上下文 videoContext 对象
			videoContext: null,
			// 是否是全屏状态
			isFullScreen: false
		}
	},
	created() {
		// 获取系统信息
		uni.getSystemInfo({
			success: (e) => {
				// 获取状态栏高度
				this.statusBarH = e.statusBarHeight + 10
				// // 获取菜单按钮栏高度
				let custom = uni.getMenuButtonBoundingClientRect()
				this.customBarH = custom.height + 10
			}
		})
	},
	onLoad(options) {
		// console.log(options)
		this.bookingId = options.bookingId
		this.hotelId = options.hotelId
		this.houseId = options.houseId
	},
	methods: {
		// 进入全屏和退出全屏时触发的回调
		fullscreenchange(e) {
			this.isFullScreen = e.detail.fullScreen
		},
		// 点击视频控件时触发的回调
		handleClickVideo(id) {
			this.videoContext = uni.createVideoContext(id)
			if (this.isFullScreen) {
				this.videoContext.stop()
				this.videoContext.exitFullScreen()
			} else {
				this.videoContext.requestFullScreen()
				this.videoContext.play()
			}
		},
		// 点击页面标题返回箭头回调
		handleBack() {
			uni.showModal({
				content: '确认退出评价吗，已编辑的内容将不保存',
				cancelText: '退出评价',
				cancelColor: '#808080',
				confirmText: '继续写评',
				confirmColor: '#000000',
				success: (res) => {
					if (res.confirm) {
					} else if (res.cancel) {
						uni.navigateBack(1)
					}
				}
			})
		},
		// 点击提交按钮回调
		async handleSub() {
			if (!this.rateValue || !this.rateLocation || !this.rateFacility || !this.rateHygiene || !this.rateServe) {
				uni.showToast({
					title: '请评分后再提交',
					icon: 'none',
					mask: true
				})
				return
			}

			let userInfo = uni.getStorageSync('userInfo')
			let time = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')

			const res = await this.$myRequest({
				url: '/mhotel/abcaorderRate.action',
				method: 'post',
				data: {
					bookingId: this.bookingId,
					hotelId: this.hotelId,
					houseId: this.houseId,
					content: this.textareaValue,
					commentStatus: 1,
					score: this.rateValue,
					scoreWs: this.rateHygiene,
					scoreFw: this.rateServe,
					scoreSs: this.rateFacility,
					scoreWz: this.rateLocation,
					createId: userInfo.id,
					createUsername: userInfo.user_name,
					createDate: time,
					modifyDate: time,
					pictureList: this.subImgList
				}
			})
			// console.log(res)
			if (res.code === 200) {
				uni.showToast({
					title: '评价成功',
					icon: 'success',
					mask: true
				})
				setTimeout(() => {
					uni.reLaunch({
						url: `/pages/evaluateStatus/evaluateStatus?status=1&hotelId=${this.hotelId}`
					})
				}, 1500)
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none',
					mask: true
				})
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/evaluateStatus/evaluateStatus?status=2&hotelId=${this.hotelId}`
					})
				}, 1500)
			}
		},
		// 上传图片回调
		handleUpLoad() {
			uni.chooseMedia({
				count: 6 - this.subImgList.length,
				mediaType: ['mix'],
				maxDuration: 10,
				success: (res) => {
					// 判断视频文件不能超过1个
					let temList = [...this.viewImgList, ...res.tempFiles]
					let temList2 = temList.filter((ele) => ele.fileType === 'video')
					if (temList2.length > 1) {
						uni.showToast({
							title: '最多只能上传1个视频',
							icon: 'none'
						})
						return
					}

					res.tempFiles.forEach((ele) => {
						if (ele.fileType === 'image' && ele.size > 1024 * 1024 * 3) {
							//这里的id和页面中写的html代码的canvas的id要一致
							let canvasId = 'zipCanvas2'
							//原图的路径
							let imagePath = ele.tempFilePath
							//大小限制1024kb
							let limitSize = 1024 * 3
							//初始绘画区域是画布自身的宽度也就是屏幕宽度
							let drawWidth = uni.getSystemInfoSync().windowWidth
							// 图片过大压缩
							getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, (resPath) => {
								this.handleUploadMini({ tempFilePath: resPath, fileType: ele.fileType })
							})
						} else if (ele.fileType === 'video' && ele.size > 1024 * 1024 * 5) {
							uni.compressVideo({
								src: ele.tempFilePath,
								quality: 'low',
								// bitrate: 60000,
								// fps: 30,
								// resolution: 1,
								success: (res) => {
									// console.log('压缩后', res)
									this.handleUploadMini({ tempFilePath: res.tempFilePath, fileType: ele.fileType })
								},
								fail: (err) => {
									// console.log(err)
									uni.showToast(
										{
											title: '视频压缩失败',
											icon: 'none'
										},
										2000
									)
								}
							})
						} else {
							this.handleUploadMini(ele)
						}
					})
				},
				fail: (err) => {
					console.log(err)
					uni.showToast({
						title: '选择文件失败',
						icon: 'none',
						mask: true
					})
				}
			})
		},
		handleUploadMini(ele) {
			// console.log(ele)
			// 开始上传
			uni.showLoading({
				title: '上传中'
			})
			uni.uploadFile({
				url: `https://www.jinganrenjiams.com/hotelReservation/file/cos/upload`,
				filePath: ele.tempFilePath,
				// name: 'myFile',
				name: 'files',
				success: (uploadFileRes) => {
					// console.log(JSON.parse(uploadFileRes.data))
					let temRes = JSON.parse(uploadFileRes.data)
					if (temRes.code === 200 || temRes.code === 1) {
						this.subImgList.push(temRes.data)
						// console.log(this.subImgList)
						this.viewImgList.push({
							url: temRes.data,
							fileType: ele.fileType === 'image' ? 'image' : 'video'
						})
						// console.log(this.viewImgList)
					} else {
						uni.showToast({
							title: temRes.message || '上传失败',
							icon: 'none'
						})
					}
				},
				fail: () => {
					uni.showToast({
						title: '上传失败',
						icon: 'error'
					})
				},
				complete: (res) => {
					// console.log(res);
					uni.hideLoading({
						complete: (hide) => {
							// console.log(hide);
						}
					})
				}
			})
		},
		// 评分改变回调
		onChange(e, index) {
			// console.log(e)
			if (index === 1) {
				if (e.value === 1) {
					this.msg = '非常差'
				} else if (e.value === 2) {
					this.msg = '差'
				} else if (e.value === 3) {
					this.msg = '一般'
				} else if (e.value === 4) {
					this.msg = '好'
				} else if (e.value === 5) {
					this.msg = '非常好'
				}
			} else if (index === 2) {
				if (e.value === 1) {
					this.msgLocation = '非常差'
				} else if (e.value === 2) {
					this.msgLocation = '差'
				} else if (e.value === 3) {
					this.msgLocation = '一般'
				} else if (e.value === 4) {
					this.msgLocation = '好'
				} else if (e.value === 5) {
					this.msgLocation = '非常好'
				}
			} else if (index === 3) {
				if (e.value === 1) {
					this.msgFacility = '非常差'
				} else if (e.value === 2) {
					this.msgFacility = '差'
				} else if (e.value === 3) {
					this.msgFacility = '一般'
				} else if (e.value === 4) {
					this.msgFacility = '好'
				} else if (e.value === 5) {
					this.msgFacility = '非常好'
				}
			} else if (index === 4) {
				if (e.value === 1) {
					this.msgServe = '非常差'
				} else if (e.value === 2) {
					this.msgServe = '差'
				} else if (e.value === 3) {
					this.msgServe = '一般'
				} else if (e.value === 4) {
					this.msgServe = '好'
				} else if (e.value === 5) {
					this.msgServe = '非常好'
				}
			} else if (index === 5) {
				if (e.value === 1) {
					this.msgHygiene = '非常差'
				} else if (e.value === 2) {
					this.msgHygiene = '差'
				} else if (e.value === 3) {
					this.msgHygiene = '一般'
				} else if (e.value === 4) {
					this.msgHygiene = '好'
				} else if (e.value === 5) {
					this.msgHygiene = '非常好'
				}
			}
		},
		// 评价输入框输入回调
		handleInput(e) {
			this.textareaValuelength = e.detail.cursor
		},
		// 删除图片回调
		handleDelete(index) {
			this.subImgList.splice(index, 1)
			this.viewImgList.splice(index, 1)
		},
		handleLook(url, current) {
			if (this.videoContext) {
				this.videoContext.stop()
			}
			uni.previewImage({
				urls: [url],
				current
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f2f3f5;

	.header {
		display: flex;
		justify-content: center;
		position: relative;
		background-color: #fff;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 47rpx;
			height: 47rpx;
		}

		.header_text {
			font-size: 34rpx;
		}
	}

	.rate {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		height: 107rpx;
		background-color: #fff;

		.rate_key {
			margin: 0 18rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.rate_value {
			margin-left: 100rpx;
			color: #808080;
			font-size: 24rpx;
		}
	}

	.operation {
		padding: 20rpx 20rpx 33rpx;
		margin-bottom: 20rpx;
		background-color: #fff;

		.operation_input {
			box-sizing: border-box;
			padding: 20rpx;
			width: 710rpx;
			height: 282rpx;
			border-radius: 9rpx;
			background-color: #f2f2f2;

			.textarea {
				width: 100%;
				height: 203rpx;
			}

			.operation_count {
				height: 39rpx;
				text-align: end;
				color: #b3b3b3;
				font-size: 24rpx;
			}
		}

		.operation_uploading {
			display: grid;
			gap: 21rpx;
			grid-template-columns: repeat(auto-fill, 124rpx);
			margin-top: 20rpx;

			::v-deep .uni-file-picker__item {
				background-color: red;
			}

			.uploading_box {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 124rpx;
				height: 124rpx;
				border-radius: 7rpx;
				background-color: #f2f2f2;

				.img {
					width: 40rpx;
					height: 40rpx;
				}

				.msg {
					margin-top: 5rpx;
					color: #a6a6a6;
					font-size: 20rpx;
				}

				.img2 {
					width: 124rpx;
					height: 124rpx;
					border-radius: 7rpx;
				}

				.video {
					width: 124rpx;
					height: 124rpx;
					border-radius: 7rpx;
				}

				.icon {
					position: absolute;
					top: 0;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 30rpx;
					height: 30rpx;
					border-radius: 7rpx;
					background-color: rgba(000, 000, 000, 0.5);

					img {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}

	.foot {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx 20rpx 50rpx;
		height: 320rpx;
		background-color: #fff;

		.foot_box {
			display: flex;
			align-items: center;

			.box_key {
				margin-right: 18rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.box_value {
				margin-left: 100rpx;
				color: #808080;
				font-size: 24rpx;
			}
		}
	}

	.foot_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 65rpx auto 78rpx;
		width: 710rpx;
		height: 96rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 64rpx;
		background-color: #096562;
	}
}
</style>