dev/dcp-app-gate/pages/profile/personIntegrate/speakShopInfo.vue

<template>
	<view>
		<view>
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('speakShopInfo')"></u-navbar>
		</view>
		<view class="user-speak">
			<view class="speak-title">
				<view class="speak-num">{{$i18n.locale=='zh'?'礼品评分':'Commodity grade'}}</view>
				<view class="speak-stars">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="speak-text">
				<textarea v-if="$i18n.locale=='zh'" class="speak-thing" maxlength="500"
					placeholder="宝贝满足你的期待吗？说说你的使用体验,分享给想买的人吧!" @input="sumfontnum"></textarea>
				<textarea v-else class="speak-thing" maxlength="500"
					placeholder="Baby meet your expectations? Talk about your experience and share it with anyone who wants to buy it!"
					@input="sumfontnum"></textarea>
				<view class="speak-much"><text>{{fontNum}}</text>/500</view>
				<view class="speak-name">
					<view class="name-none">{{$i18n.locale=='zh'?'匿名评价':'Anonymous evaluation'}}</view>
					<view class="speak-switch">
						<!-- <switch @change="switch1Change" style="transform:scale(0.8)" :value='true'></switch> -->
						<u-switch v-model="checked" class="ui-checked"></u-switch>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="user-pic">
			<view class="pic-title">{{$i18n.locale=='zh'?'上传图片(最多9张)':'Upload images (maximum 9)'}}</view>
			<u-upload class="pic-num" :action="action" ref="uUpload" max-count="9" :auto-upload="false"></u-upload>
		</view> -->
		<view class="speak-update">
			<button class="speak-btn" @tap="toSubmit">{{$i18n.locale=='zh'?'提交评价':'Submit'}}</button>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		getToken
	} from '@/api/token'
	import {
		orderReview
	} from '@/api/address'
	export default {
		components: {
			uniPopupDialog,
			uniPopupMessage,
			uniPopup
		},
		data() {
			return {

				checked: true,
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				fontNum: 0,
				count: 5,
				value: 0,
				// action: '',
				orderId: null,
				shopId: null,
				evaluate: null,
				msgType: 'success',
				messageText: '请稍后...',

			}
		},
		onLoad(option) {
			console.log(option, '====');
			this.orderId = option.orderId;
			this.shopId = option.shopId
		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			sumfontnum(e) {
				this.evaluate = e
				this.fontNum = this.evaluate.detail.value.length
			},
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
			},
			// 提交
			async toSubmit() {
				if (this.fontNum > 0) {
					let params = {
						commodityId: this.orderId,
						orderId: this.shopId,
						comment: this.evaluate.detail.value,
						commodityMark: this.value,
					}
					const tokendata = await this.$myRequest({
						url: '/sys/token',
						method: 'get'
					});
					let demo = params
					console.log(demo);
					orderReview(demo, tokendata.data).then((res) => {
						console.log(res.msg);
						if (this.$i18n.locale == 'zh') {
							this.msgType = 'success'
							this.messageText = '评论成功'
							this.$refs.message.open()
						} else {
							this.msgType = 'success'
							this.messageText = 'Comment on success'
							this.$refs.message.open()
						}
						setTimeout(() => {
							uni.navigateTo({
								url: './myPayList'
							})
						}, 1500)
					}).catch(error => {
						if (this.$i18n.locale == 'zh') {
							this.msgType = 'error'
							this.messageText = '提交失败'
							this.$refs.message.open()
						} else {
							this.msgType = 'error'
							this.messageText = 'Submit failure'
							this.$refs.message.open()
						}

					})
				} else {
					if (this.$i18n.locale == 'zh') {
						this.msgType = 'error'
						this.messageText = '请留下您对礼品的评价'
					} else {
						this.msgType = 'error'
						this.messageText = 'Please leave a comment on the gift'
					}
					this.$refs.message.open()
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.user-speak {
		.speak-title {
			margin-top: 20rpx;
			display: flex;
			width: 100%;
			background-color: #fff;
			height: 100rpx;

			.speak-num {
				margin-left: 5%;
				height: 100rpx;
				line-height: 100rpx;
			}

			.speak-stars {
				height: 100rpx;
				line-height: 100rpx;
			}
		}

		.speak-text {
			width: 100%;
			background-color: #fff;

			.speak-thing {
				border: 1rpx solid #878787;
				width: 94%;
				height: 400rpx;
				margin-left: 3%;
				border-radius: 20rpx;
				padding: 10rpx;
				text-indent: 64rpx;
			}

			.speak-much {
				margin-left: 80%;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 16px;
				color: #9999a6;
			}

			.speak-name {
				width: 88%;
				margin-left: 6%;
				height: 80rpx;
				display: flex;

				.name-none {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
				}

				.speak-switch {
					height: 80rpx;
					line-height: 50rpx;
					margin-left: 20rpx;
					margin-top: 12rpx;
				}
			}
		}
	}

	.user-pic {
		width: 100%;
		margin-top: 20rpx;
		background-color: #fff;

		.pic-title {
			width: 88%;
			margin-left: 6%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			font-weight: 700;
		}

		.pic-num {
			width: 90%;
			margin-left: 5%;
		}
	}

	.speak-update {
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		margin-top: 10rpx;
		padding: 45rpx 0;

		.speak-btn {
			height: 60rpx;
			line-height: 60rpx;
			width: 200rpx;
			border-radius: 50rpx;
			background-color: #1777FEFF;
			color: #fff;
			margin-left: 70%;
		}
	}
</style>