uav-uniapp-demo-24-8-18/components/review/review.vue

<template>
	<view v-if="show" class="review">
		<view class="review-main">
			<!-- 标题 -->
			<view class="review-title">{{ $t('page.review.title') }}</view>

			<!-- 选项列表 -->
			<view class="options">
				<u-radio-group v-model="checkedOption" placement="column">
					<view v-for="(item,index) in evaluateList" class="option">
						<view class="option-top">
							<view class="option-top-left">
								<u-radio :customStyle="{marginBottom: '8px'}" 
								activeColor="#000" :label="item.optionValue"
									:name="item.optionValue" />
							</view>
							<view class="option-top-right">
								<u-rate :count="5"
								active-color="#EEBF72" 
								v-model="item.num"></u-rate>
							</view>
						</view>

						<view class="option-content"> {{ item[type[$i18n.locale]] }}</view>
					</view>
				</u-radio-group>
			</view>

		</view>
	</view>
</template>

<script>
	import { play } from '@/utils/clickSound.js'
	
	export default {
		data() {
			return {
				checkedOption: '',
				type : {
					en : 'answerEnglish',
					es : "answerSpanish"
				},
				evaluateList : []
			}
		},
		props : {
			show : {
				type : Boolean,
				default : true
			},
			oid : {
			}
		},
		created(){
			this.getEvaluateList()
		},
		methods: {
			//关闭选择评论弹框
			closeReviewProp(){
				
				let data = {}
				
				this.evaluateList.forEach(n => {
					if(n.optionValue == this.checkedOption){
						data = n
					}
				})
				
				this.request('evaluate', {}, {
					evaluateId : data.id,
					id : this.oid,
					num : data.num
				}).then(res => {
					if(res.code == 200){
						this.$emit('close', this.checkedOption)
						this.checkedOption = ''
					}
				})
			},
			getEvaluateList(){
				this.request('getEvaluateList').then(res => {
					if(res.code == 200){
						this.evaluateList = res.result
					}
				})
			},
			async asyncLoading() { //加载效果
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: this.$t('page.review.loading')
					});
					setTimeout(() => {
						uni.hideLoading();
						resolve()
					}, 500)
				})
			},
		},
		watch : {
			checkedOption : function(newVal){
				if(this.checkedOption){
					play()
					this.asyncLoading().then(res => {
						this.closeReviewProp()
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.review {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
		margin: 0rpx auto;
		z-index: 99999;
		background-color: #00000099;
		
		.review-main {
			background: $uni-bg-color;
			width: 600rpx;
			color: $uni-bg-color-app;
			border-radius: 10rpx;
			padding: 15rpx;
			border: 1px solid #ccc;

			.review-title {
				font-size: 34rpx;
				padding: 15rpx 0rpx;
				text-align: center;
			}

			.options {
				margin-top: 20rpx;

				.option {
					margin-bottom: 15rpx;

					.option-top {
						display: flex;
						justify-content: space-between;
					}
					
					.option-content{
						color: #747474;
					}
				}
			}
		}
	}
</style>