teaching-uniapp/pages/feedback/feedback.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>
		<view class="area">
			<textarea v-model.trim="cont" class="txt" maxlength='-1' placeholder="请输入您的反馈信息" />
		</view>

		<!-- 弹窗 -->
		<view>
			<view class="mask" v-show="showPopup" @click="closePopup"></view>
			<view class="popup-container" v-show="showPopup">
				<view class="popup">
					<view class="header">
						<text>确认提交</text>
					</view>
					<view class="footer">
						<view class="cancel-btn" @click="showPopup=false">取消</view>
						<view class="confirm-btn" @click="conf">确认</view>
					</view>
				</view>
			</view>
		</view>

		<button class="btn" @click="popShow">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: "反馈与帮助", //导航栏标题
					btn: 1, //是否显示返回按钮 0不显示  1 显示
				},
				cont: '',
				showPopup: false
			};
		},
		methods: {
			popShow() {
				if (!this.cont) {
					uni.showToast({
						title: '请先填写反馈信息',
						icon: 'none'
					});
				} else {
					this.showPopup = true
				}
			},
			conf() {
				let data = {
					oid: this.$store.state.user.openid,
					cont: encodeURIComponent(this.cont)
				}
				this.$request('/insertFeedback', 'POST', data).then(res => {
					uni.showToast({
						title: '提交成功，感谢您的反馈',
						icon: 'none'
					});
					this.cont = ''
					this.showPopup = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		background-color: #0056a8;
		color: #ffffff;
		border-radius: 30px;
		margin: 30rpx 55rpx;
		// padding: 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		// padding: 0rpx 10rpx;
		font-size: 16px;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
		overflow: hidden;
		// display: none;
	}

	.popup {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;

		.header {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-top: 24px;
			font-size: 34rpx;
			font-weight: 600;

			.imgShade {
				width: 170rpx;
				height: 170rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 10rpx #0056A8 solid;
				border-radius: 50%;
				box-shadow: 0 0 10rpx #0056A8;
				margin-bottom: 10rpx;
			}

			image {
				width: 150rpx;
				height: 150rpx;
				margin-top: 15px;
				margin-bottom: 15px;
			}
		}

		.footer {
			width: 100%;
			display: flex;
			overflow: hidden;

			.cancel-btn {
				width: 50%;
				height: 100rpx;
				background-color: #F7F7F7;
				color: #000;
				font-size: 34rpx;
				text-align: center;
				border-bottom-left-radius: 16rpx;
				line-height: 50px;
			}

			.confirm-btn {
				width: 50%;
				height: 100rpx;
				background-color: #0081FE;
				color: #fff;
				font-size: 34rpx;
				text-align: center;
				line-height: 50px;
			}
		}
	}

	.area {
		margin-top: 10px;
		box-sizing: border-box;
		padding: 15rpx;
		background-color: #ffffff;
	}

	.txt {
		width: 100%;
		height: 60vh;
	}
</style>