sxc-frontend/miniprogram/pages/index/feedback.vue

<template>
	<view class="feedback">
		<view v-show="initFinish" class="fb-container" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="fb-navigation">
				<uni-icons type="left" color="#101333" size="48rpx" @tap="navigatorBack"></uni-icons>
				<view class="navigation-title" @tap="navigatorBack">意见反馈</view>
			</view>
			<view class="fb-content">
				<view class="fb-title">我要反馈</view>
				<view class="fb-textarea-box">
					<textarea v-model="formData.feedbackContent" class="fb-textarea" placeholder="请输入你想说的"></textarea>
				</view>
				<view style="display: none;" class="fb-title">联系方式</view>
				<view style="display: none;" class="fb-textarea-tel">
					<input v-model="formData.phone" class="fb-tel" type="tel" maxlength="20" />
				</view>
			</view>
			<button class="fb-button" @tap="submitFeedback">提交</button>
		</view>
		<uni-popup ref="replay" type="bottom" background-color="#ffffff" :mask-click="false"
			borderRadius="32rpx 32rpx 0 0">
			<view class="replay-content">
				<view class="replay-title">感谢您的反馈</view>
				<view class="replay-content">
					<ua-markdown ref="markdown" :source="replayMessage" />
					<view v-if="showLink" class="link" @click="copyLink">https://swt.sc.gov.cn/sccom/hdtzxx/hd_tzxx.shtml</view>
				</view>
				<button size="mini" class="replay-button" style="width: 100%;" @click="closeReplay">关闭</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		RequestApi
	} from '../../api/requestApi';

	export default {
		data() {
			return {
				navBarHeight: 0,
				initFinish: false,
				loading: false,
				replayMessage: '',
				showLink: false,
				formData: {
					feedbackContent: '',
					phone: ''
				}
			};
		},
		mounted() {
			this.initPage();
		},
		methods: {
			initPage() {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.navBarHeight = menuButtonInfo.top + 1;
				this.initFinish = true;
			},
			navigatorBack() {
				uni.navigateBack({
					fail: () => {
						uni.redirectTo({
							url: '/pages/index/index'
						});
					}
				});
			},
			submitFeedback() {
				if (this.loading) {
					return;
				}
				if (this.formData.feedbackContent.trim() == '') {
					uni.showToast({
						title: '反馈内容不能为空',
						icon: 'none'
					});
					return;
				}
				// if (this.formData.phone.trim() == '') {
				// 	uni.showToast({
				// 		title: '联系方式不能为空',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				this.loading = true;
				uni.showLoading({
					title: '提交中'
				});
				RequestApi.sendFeedback(this.formData)
					.then((result) => {
						this.$refs.replay.open();
						this.formData = {
							feedbackContent: '',
							phone: ''
						};
						if (result.code == 1) { // 智能体有回答
							this.replayMessage = result.message
						} else if (result.code == 2) { // 与改进相关（写入数据库）
							this.replayMessage = '感谢您的宝贵建议！我们已收到您的反馈，感谢您的支持！';
						} else if (result.code == 3) { // 与改进相关
							this.showLink = true;
							this.replayMessage =
								'您好，感谢您的关注，关于您提到的内容，建议可到商务厅官方平台反馈以接收专业解答。反馈渠道:四川省商务厅网站首页-导航交流互动-厅长信箱栏目，或点击复制网址在浏览器中打开';
						}
					})
					.finally(() => {
						uni.hideLoading();
						this.loading = false;
					});
			},
			closeReplay() {
				this.showLink = false;
				this.$refs.replay.close();
			},
			copyLink() {
				uni.setClipboardData({
					data: 'https://swt.sc.gov.cn/sccom/hdtzxx/hd_tzxx.shtml',
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						})
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	@import '@/static/global.scss';

	.feedback {
		height: 100vh;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: -180rpx;
			right: -80rpx;
			width: 68%;
			height: 70vh;
			background-color: #93bdfb;
			filter: blur(200rpx);
			z-index: -1;
		}

		.fb-container {
			padding: 32rpx;

			.fb-navigation {
				display: flex;
				align-items: center;

				.navigation-title {
					color: #101333;
					font-size: 32rpx;
					font-weight: 600;
					margin-right: 24rpx;
				}
			}

			.fb-content {
				padding-top: 32rpx;
				background-image: url(getImageUrl('/images/opinion-pencel.png'));
				background-repeat: no-repeat;
				background-position: right 20rpx;
				background-size: 260rpx auto;

				.fb-title {
					color: #101333;
					font-size: 32rpx;
					font-weight: 500;
					margin-bottom: 32rpx;
				}

				.fb-textarea-box {
					background: rgba(255, 255, 255, 0.4);
					padding: 24rpx;
					border: 2px solid #ffffff;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(208, 215, 247, 1)) 2 2;
					margin-bottom: 46rpx;

					.fb-textarea {
						width: calc(100% - 48rpx);
					}
				}

				.fb-textarea-tel {
					border: 2px solid #d0d7f7;
					padding: 24rpx;
					background: rgba(255, 255, 255, 0.4);
					margin-bottom: 120rpx;

					.fb-tel {}
				}
			}

			.fb-button {
				padding: 12rpx;
				color: #ffffff;
				background-color: #2943d6;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.replay-content {
			padding: 32rpx;
			background-color: #ffffff;
			border-radius: 32rpx 32rpx 0 0;

			.replay-title {
				font-weight: bold;
			}

			.replay-content {
				margin: 32rpx 0;
				max-height: 60vh;
				overflow: hidden auto;
				
				.link {
					color: #2943d6;
					word-break: break-all;
					font-size: 24rpx;
				}
			}
		}
	}
</style>