zh_order_food_xcx/pages-my/appraise.vue

<template>
	<view class="flex-common-css">
		<Nav title="评价" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="content-box">
				<view class="fc-FB3D03 fs-24 mb-28 text-align-center">
					提交好评或建议，帮助骑手和商家做的更好
				</view>
				<view class="bgc-f p-24 b-rad-20 mb-18 box-sizing-border">
					<view class="flex-justify-space">
						<view class="fs-36 fw-600 fc-3">
							你对商家满意吗？
						</view>
						<view class="align-items-center mb-24" @click="clickShopCheck">
							<uni-icons v-if="formData.is_anonymous == 1" color="#41ABF5" type="checkbox-filled"
								size="20"></uni-icons>
							<uni-icons v-else color="#ccc" type="circle" size="20"></uni-icons>
							<view class="ml-2 fs-24 fc-6">
								匿名提交
							</view>
						</view>
					</view>
					<view class="shop-box align-items-center mb-48">
						<image class="shop-img mr-20" :src="shopLogo" mode=""></image>
						<view class="fs-30 fc-3">
							{{shopName}}
						</view>
					</view>
					<view class="align-items-center">
						<view class="fs-30 fw-600 fc-0 mr-10">
							评分
						</view>
						<uni-rate v-model="formData.grade" margin="10" active-color="#FF7F00" color="#F1F1F1" />
						<view class="fc-FF7F00 fs-28 ml-40">
							{{formData.grade == 1?'非常差':formData.grade == 2?'一般':formData.grade == 3?'好':formData.grade == 4?'很棒':'非常棒'}}
						</view>
					</view>
				</view>
				<view class="bgc-f p-24 b-rad-20 mb-18 box-sizing-border">
					<view class="fs-36 fw-600 fc-3 mb-8">
						请输入你的评价内容
					</view>
					<view class="textarea-box">
						<textarea class="textarea" v-model="formData.content" placeholder-style="color:#ccc" auto-height maxlength='100'
							placeholder="请输入" />
					</view>
					<view class="up-img-box align-items-center flex-wrap-wrap">
						<view class="up-img" v-for="(item, index) in formData.images" :key="index">
							<image class="img" :src="item" mode="aspectFill"></image>
							<uni-icons @click="deleteImg(index)" class="delete-icons" color="#000" type="clear"
								size="20"></uni-icons>
						</view>
						<view @click="upImg" v-if="formData.images.length<= 5"
							class="add-img-box flex-direction flex-justify-center align-items-center bgc-F6F6F6">
							<image class="add-img" src="@/static/img/my/sc.png" mode=""></image>
							<view class="fs-24 fc-9">
								上传照片
							</view>
							<view class="fs-24 fc-9">
								(最多6张)
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bot-box bgc-f">
			<view class="bot-but fc-f fs-32 text-align-center" :class="formType?'bgc-4FB3EF':'bgc-B3DDFB'"
				@click="submit">
				提交评价
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commentCreate
	} from '@/api/comment.js'
	import tools from '@/service/tools';
	import {
		upLoadingFileOss
	} from "@/service/upLoadingFile.js"
	export default {
		components: {},
		data() {
			return {
				formType: true,
				formData: {
					grade: 5, //总体
					is_anonymous: 0, //匿名
					content: '',
					images: [],
					order_id: ''
				},
				shopName: '',
				shopLogo: ''
			};
		},
		onLoad(data) {
			console.log(data);
			if (data) {
				this.formData.order_id = data.orderId
				this.shopName = data.shopName
				this.shopLogo = data.shopLogo
			}
		},
		mounted() {},
		methods: {
			submit() {
				commentCreate(this.formData).then((res) => {
					if (res.code == 1) {
						tools.success(res.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						tools.error(res.msg)
					}
				})
			},
			deleteImg(index) {
				this.formData.images.splice(index, 1)
			},
			upImg() {
				uni.chooseImage({
					count: 6,
					sizeType: ["compressed", "camera"],
					sourceType: ["album", "camera"],
					success: (res) => {
						res.tempFiles.forEach((file) => {
							this.uploadingFile(file);
						})
					}
				})
			},
			uploadingFile(file) {
				upLoadingFileOss(file.path).then((res) => {
					if (res) {
						this.formData.images.push(res)
					} else {
						tools.error('图片上传失败')
					}
				})
			},
			clickShopCheck() {
				if (this.formData.is_anonymous == 0) {
					this.formData.is_anonymous = 1
				} else {
					this.formData.is_anonymous = 0
				}
			},
			scrolltolower() {
				console.log('触底');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content-box {
		padding: 24rpx;
		box-sizing: border-box;
	}

	.bot-box {
		width: 100%;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
	}

	.bot-but {
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 200rpx;
	}

	.shop-img {
		width: 88rpx;
		height: 88rpx;
		border-radius: 8rpx;
	}

	.goods-img {
		width: 108rpx;
		height: 108rpx;
		border-radius: 8rpx;
	}

	.rider-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
	}

	.rider-rate-img {
		width: 48rpx;
		height: 48rpx;
	}

	.rider-rate-but {
		padding: 16rpx 0;
	}

	.textarea-box {
		width: 100%;
		height: 200rpx;
	}
	.textarea{
		height: 200rpx;
	}

	.up-img {
		width: 204rpx;
		height: 204rpx;
		margin: 0 8rpx 8rpx 0;
		position: relative;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 4rpx;
		}

		.delete-icons {
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.add-img-box {
		width: 204rpx;
		height: 204rpx;
		border: 1px dashed #666;

		.add-img {
			width: 56rpx;
			height: 56rpx;
		}
	}
</style>