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="shopCheck" 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="../static/img/my/bg.png" mode=""></image>
						<view class="fs-30 fc-3">
							2024-05-21 01:05 下单
						</view>
					</view>
					<view class="align-items-center mb-26">
						<view class="fs-30 fw-600 fc-0 mr-40">
							总体
						</view>
						<uni-rate v-model="formData.rateValueOne" margin="10" active-color="#FF7F00" color="#F1F1F1" />
						<view class="fc-FF7F00 fs-28 ml-40">
							{{formData.rateValueOne == 1?'非常差':formData.rateValueOne == 2?'一般':formData.rateValueOne == 3?'好':formData.rateValueOne == 4?'很棒':'非常棒'}}
						</view>
					</view>
					<view class="align-items-center mb-60">
						<view class="fs-30 fw-600 fc-0 mr-40">
							包装
						</view>
						<uni-rate v-model="formData.rateValueTwo" margin="10" active-color="#FF7F00" color="#F1F1F1" />
						<view class="fc-FF7F00 fs-28 ml-40">
							{{formData.rateValueTwo == 1?'非常差':formData.rateValueTwo == 2?'一般':formData.rateValueTwo == 3?'好':formData.rateValueTwo == 4?'很棒':'非常棒'}}
						</view>
					</view>
					<view class="fs-36 fw-600 fc-3 mb-24">
						你对商品满意吗？
					</view>
					<view class="goods-box align-items-center">
						<image class="goods-img mr-20" src="../static/img/my/bg.png" mode=""></image>
						<view class="">
							<view class="mb-16 fs-30 fc-3">
								小炒肉
							</view>
							<view class="align-items-center">
								<uni-rate v-model="formData.rateValueThree" margin="10" active-color="#FF7F00"
									color="#F1F1F1" />
								<view class="fc-FF7F00 fs-28 ml-40">
									{{formData.rateValueThree == 1?'非常差':formData.rateValueThree == 2?'一般':formData.rateValueThree == 3?'好':formData.rateValueThree == 4?'很棒':'非常棒'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bgc-f p-24 b-rad-20 mb-18 box-sizing-border">
					<view class="flex-justify-space mb-24">
						<view class="fs-36 fw-600 fc-3">
							你对骑手满意吗？
						</view>
						<view class="fs-24 fc-6">
							已对骑手匿名
						</view>
					</view>
					<view class="rider-box align-items-center mb-50">
						<image class="rider-img mr-18" src="../static/img/my/bg.png" mode=""></image>
						<view class="">
							<view class="mb-4 fs-30 fc-0">
								王欢
							</view>
							<view class="fc-6 fs-24">
								5月21日01:15左右送达
							</view>
						</view>
					</view>
					<view class="rider-rate align-items-center">
						<view
							class="rider-rate-but mr-18 scroll-view-css align-items-center flex-justify-center b-rad-200"
							:class="formData.riderRate?'bgc-F6F6F6':'bgc-ECF7FE'" @click="formData.riderRate = false">
							<image v-if="formData.riderRate" class="rider-rate-img mr-8"
								src="@/static/img/my/bmy-no.png" mode=""></image>
							<image v-else class="rider-rate-img mr-8" src="@/static/img/my/bmy-ok.png" mode=""></image>
							<view class="fs-30" :class="formData.riderRate?'fc-0':'fc-41ABF5'">
								不满意
							</view>
						</view>
						<view class="rider-rate-but scroll-view-css align-items-center flex-justify-center b-rad-200"
							:class="formData.riderRate?'bgc-ECF7FE':'bgc-F6F6F6'" @click="formData.riderRate = true">
							<image v-if="formData.riderRate" class="rider-rate-img mr-8" src="@/static/img/my/my-ok.png"
								mode=""></image>
							<image v-else class="rider-rate-img mr-8" src="@/static/img/my/my-no.png" mode=""></image>
							<view class="fs-30" :class="formData.riderRate?'fc-41ABF5':'fc-0'">
								满意
							</view>
						</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 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="(itme, index) in imgList" :key="index">
							<image class="img" src="../static/img/my/bg.png" mode=""></image>
							<uni-icons @click="deleteImg(index)" class="delete-icons" color="#000" type="clear" size="20"></uni-icons>
						</view>
						<view 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'">
				提交评价
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				formType: false,
				shopCheck: false,
				formData: {
					rateValueOne: 1, //总体
					rateValueTwo: 1, //包装
					rateValueThree: 1, //商品
					riderRate: false, //骑手评价
					rate: '',
					imgList: []
				},
			};
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			deleteImg(index) {
				this.formData.imgList.splice(index, 1)
			},
			clickShopCheck() {
				this.shopCheck = !this.shopCheck
			},
			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;
	}

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