jiuyiUniapp/jiuyi2/pages/shop/order/evaluate.vue

<script setup>
	// 
	import {
		ref,
		watch,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onReachBottom,
		onPullDownRefresh,
		onPageScroll
	} from '@dcloudio/uni-app';
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js';
	// 
	import payPwd from '@/components/mine/payPwd.vue';

	// 商品评价
	const rateValue = reactive(['', '非常差', '差', '一般', '好', '非常好'])
	// 表单
	const form = reactive({
		orderId: '',
		productId: '',
		imageUrls: [],
		rating: 0,
		// rate2: 0,
		// rate3: 0,
	})
	// 榴莲果评论规则列表
	const ruleList = reactive([])
	// 代理
	const {
		proxy
	} = getCurrentInstance()

	onLoad((option) => {
		if (option.orderId) form.orderId = option.orderId
		// 获取评论规则
		getCommentRules()
	})

	// 获取评论规则
	function getCommentRules() {
		api.shop.getCommentRules({}).then(res => {
			if (res.code == 200) {
				ruleList.length = 0
				ruleList.push(...res.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 上传图片
	function uploadImg() {
		util.upload_image({
			type: 2,
			success: rs => {
				form.imageUrls.push(rs.value)
			},
		})
	}

	// 移除文件
	function removeMedia(index, key) {
		util.alert({
			content: '确认删除？',
		}).then(rs => {
			if (rs.confirm) form.imageUrls.splice(index, 1)
		})
	}

	// 调用二级密码支付
	function showPayPwd() {
		console.log('handleSubmit data', form)

		// 验证必填项
		if (!form.content) {
			util.alert('商品评论不能为空')
			return
		}
		proxy.$refs.payPwdRef.open()
	}

	/**
	 * 二级密码点击确认
	 * @param {Object} secondPassword 二级密码
	 */
	function handleSubmit(secondPassword) {
		const data = {
			...form
		}
		// 处理图片
		data.imageUrls = data.imageUrls.join(',')
		// 二级密码
		data.secondPassword = secondPassword

		// 
		api.shop.addProComment({
			data,
		}).then(rs => {
			if (rs.code == 200) {
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="app">
		<view class="container oh ptb30 imgList df fww">
			<view class="imgs wh140" v-for="(item,index) in form.imageUrls" :key="index">
				<image class="wh140" :src="item" mode="aspectFill" />
				<view class="close" @click="removeMedia(index)">
					<uni-icons type="clear" size="50rpx" color="#f00" />
				</view>
			</view>

			<view class="imgs upload wh140" @click="uploadImg">
				<image class="wh140" src="/static/shop-upload-image.png" mode="aspectFill" />
			</view>
		</view>

		<view class="message container">
			<textarea class="txtplus mtb20 plr20" v-model="form.content" placeholder="展开说说对商品的想法吧"
				placeholder-class="placeholderStyle" />
		</view>

		<view class="stars container">
			<view class="item df aic mtb20">
				<view class="key w200">商品评价</view>
				<view class="value mlr20">
					<uni-rate v-model="form.rating" :max="5" color="#d8d8d8" activeColor="#FF9B27" />
				</view>
				<view class="c999 f28">{{rateValue[form.rating]}}</view>
			</view>
			<template v-if="0">
				<view class="item df aic mtb20">
					<view class="key w200">物流服务</view>
					<view class="value mlr20">
						<uni-rate v-model="form.rate2" color="#d8d8d8" activeColor="#FF9B27" />
					</view>
					<view class="c999 f28">{{rateValue[form.rate2]}}</view>
				</view>
				<view class="item df aic mtb20">
					<view class="key w200">服务态度</view>
					<view class="value mlr20">
						<uni-rate v-model="form.rate3" color="#d8d8d8" activeColor="#FF9B27" />
					</view>
					<view class="c999 f28">{{rateValue[form.rate3]}}</view>
				</view>
			</template>
		</view>

		<!-- 评论消耗榴莲果规则 -->
		<view class="rule mtb30 mlr30">
			<view class="header df aic f28">
				<image class="wh30 mr10" src="/static/fruit.png" mode="aspectFit" />
				<view>评论商品消耗榴莲果规则</view>
			</view>

			<view class="list mt20 c666 f24">
				<view class="item mtb10" v-for="(item,index) in ruleList" :key="index">{{item.description}}</view>
			</view>
		</view>

		<payPwd ref="payPwdRef" :check="true" @confirm='handleSubmit' />

		<view class="fill" style="height: 120rpx;"></view>

		<view class="footer plr30 bfff shadow">
			<view class="btn lg primary" @click="showPayPwd">发布评论</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 
	.container {
		overflow: hidden;
		margin: 20rpx 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #333;
		font-size: 32rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	// 
	.txtplus {
		width: 100%;
	}
</style>