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" />
			<view class="rate_value">非常好</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 subImgList" :key="index">
					<img class="img2" mode="aspectFill" :src="ele" />
					<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" />
				<view class="box_value">非常好</view>
			</view>
			<!-- 民宿设施评价 -->
			<view class="foot_box">
				<view class="box_key">民宿设施</view>
				<uni-rate v-model="rateLocation" size="18" @change="onChange" />
				<view class="box_value">非常好</view>
			</view>
			<!-- 民宿服务评价 -->
			<view class="foot_box">
				<view class="box_key">民宿服务</view>
				<uni-rate v-model="rateLocation" size="18" @change="onChange" />
				<view class="box_value">非常好</view>
			</view>
			<!-- 民宿卫生评价 -->
			<view class="foot_box">
				<view class="box_key">民宿卫生</view>
				<uni-rate v-model="rateLocation" size="18" @change="onChange" />
				<view class="box_value">非常好</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="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
// 图片压缩方法
import getLessLimitSizeImage from '@/util/imageCompress.js'
export default {
	data() {
		return {
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0,
			// 民宿评分
			rateValue: 2,
			// 评价绑定数据
			textareaValue: '',
			// 评价文字长度
			textareaValuelength: 0,
			// 显示的图片数据
			imgList: [],
			// 上传的图片数据
			subImgList: [],
			// 图片上传框的样式
			imageStyles: {
				width: '60px',
				height: 60,
				border: {
					// 如果为 Boolean 值，可以控制边框显示与否
					color: '#eee', // 边框颜色
					width: '1px', // 边框宽度
					style: 'solid', // 边框样式
					radius: '50%' // 边框圆角，支持百分比
				}
			},
			// 民宿位置评分
			rateLocation: 3
		}
	},
	created() {
		// 获取系统信息
		uni.getSystemInfo({
			success: (e) => {
				// 获取状态栏高度
				this.statusBarH = e.statusBarHeight + 10
				// // 获取菜单按钮栏高度
				let custom = uni.getMenuButtonBoundingClientRect()
				this.customBarH = custom.height + 10
			}
		})
	},
	methods: {
		// 点击页面标题返回箭头回调
		handleBack() {
			uni.showModal({
				content: '确认退出评价吗，已编辑的内容将不保存',
				cancelText: '退出评价',
				cancelColor: '#808080',
				confirmText: '继续写评',
				confirmColor: '#000000',
				success: (res) => {
					if (res.confirm) {
					} else if (res.cancel) {
						uni.navigateBack(1)
					}
				}
			})
		},
		// 点击提交按钮回调
		handleSub() {
			uni.navigateTo({
				url: `/pages/evaluateStatus/evaluateStatus?status=2`
			})
		},
		handleUpLoad() {
			uni.chooseMedia({
				count: 9,
				maxDuration: 15,
				success: (res) => {
					console.log(res)
					console.log(res.tempFiles)
					if (this.subImgList.length + res.tempFiles.length > 9) {
						uni.showToast({
							title: '最多只能上传9个图片/视频',
							icon: 'none'
						})
						return
					}
					uni.showLoading({
						title: '上传中'
					})
					// reverse()
					res.tempFiles.forEach((ele) => {
						uni.uploadFile({
							url: `https://chtech.ncjti.edu.cn/hotelReservation/mhotel/mhotel/uploadhimage.action`,
							filePath: ele.tempFilePath,
							name: 'myFile',
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data))
								let temRes = JSON.parse(uploadFileRes.data)
								if (temRes.code === 200) {
									this.subImgList.push(temRes.data.url)
									console.log(this.subImgList)
									uni.hideLoading()
								} else {
									uni.showToast({
										title: temRes.message,
										icon: 'none'
									})
								}
							},
							fail: () => {
								uni.showToast({
									title: '上传失败',
									icon: 'error'
								})
							}
						})
					})
				}
			})
		},
		// 评分改变回调
		onChange(e) {
			console.log(e.value)
		},
		// 评价输入框输入回调
		handleInput(e) {
			this.textareaValuelength = e.detail.cursor
		},
		// 选择图片回调
		select(e) {
			// console.log(e)
			e.tempFiles.forEach((item) => {
				//这里的id和页面中写的html代码的canvas的id要一致
				let canvasId = 'zipCanvas'
				//原图的路径
				let imagePath = item.path
				//大小限制1024kb
				let limitSize = 1024
				//初始绘画区域是画布自身的宽度也就是屏幕宽度
				let drawWidth = uni.getSystemInfoSync().windowWidth

				getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, (resPath) => {
					uni.showLoading({
						title: '上传中'
					})
					uni.uploadFile({
						url: `https://chtech.ncjti.edu.cn/hotelReservation/mhotel/mhotel/uploadhimage.action`,
						filePath: resPath,
						name: 'myFile',
						success: (uploadFileRes) => {
							console.log(JSON.parse(uploadFileRes.data))
							let temRes = JSON.parse(uploadFileRes.data)
							if (temRes.code === 200) {
								this.subImgList.push(temRes.data.url)
								this.imgList.push({
									url: item.path,
									name: ''
								})
								uni.hideLoading()
							}
						},
						fail: () => {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					})
				})
			})
		},
		// 删除图片回调
		handleDelete(index) {
			// console.log(e);
			// const num = this.imgList.findIndex((v) => v.url === e.tempFilePath)
			this.subImgList.splice(index, 1)
			// this.imgList.splice(num, 1)
		}
	}
}
</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;
				}

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