forest-H5/pages/usercenter/feedback/feedback.vue

<template>
	<view class="feedback">
		<view class="uni-form-item content">
			<view class="title">反馈内容</view>
			<textarea class="uni-textarea" placeholder="请输入留言内容" v-model="params.feedbackContext"/>
		</view>
		<view class="uni-form-item tel">
			<view class="title">如有需要，留下您的联系方式，方便我们联系您</view>
			<input class="uni-input" focus placeholder="邮箱/QQ/微信/手机号（可选）"  v-model="params.tel" />
		</view>
		<view class="uni-form-item">
			<button type="primary" @click="postData">提交反馈</button>
		</view>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="messageType" :message="message" :duration="3000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		name:"feedback",		
		components:{		
		},
		onLoad() {
			let self = this;
			uni.getStorage({
				key:'userInfo',
				success: function (res) {
					self.params.userId = res.data.user.id;
				   // console.log(res.data.user.id);
				}
			});			
		},
		data(){
			return{
				content:'',
				tel:'',
				message:'',
				messageType:'',
				params:{
					"userId":'',
					"feedbackContext":'',
					"tel":''
				}
			}
		},
		methods:{
			postData(data){
				if(!this.params.feedbackContext){
					this.messageType ="error";
					this.message = "请输入留言内容";
					uni.showToast({
						icon:'none',
						title:this.message,
						duration: 2000
					});
					return false;
				}else{
					var wxReg = new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$"); //微信号正则校验
					var qqReg = new RegExp("[1-9][0-9]{4,}"); //QQ号正则校验   
					var phReg =  /^[1][3,4,5,6,7,8,9][0-9]{9}$/; //手机号正则校验 
					if(this.params.tel.length > 0){
						if(!wxReg.test(this.params.tel)&&!qqReg.test(this.params.tel)&&!phReg.test(this.params.tel)){
							this.messageType ="error";
							this.message = "邮箱/QQ/微信/手机号 输入不正确";
							uni.showToast({
								icon:'none',
								title:this.message,
								duration: 2000
							});
							return false;
						}
					};					
					this.messageType ="success";
					this.message = "留言成功"
					
					uni.showLoading({
					    title: '请稍等'
					});					
					setTimeout(function () {
					    uni.hideLoading();
					}, 1500);
					
					setTimeout(() => {
						uni.showToast({
							icon:'success',
							title:`保存成功,请等待审核!`,
							duration: 2000
						});
					}, 1500);
					
					
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/index/index'
						})
					}, 3000);
					
					// this.$api.http.post(`/articleFeedback/add`, this.params).then(res => {
					// 		uni.showToast({
					// 			icon:'none',
					// 			title:this.message,
					// 			duration: 2000
					// 		});
					// 		this.params.feedbackContext = '';
					// 		this.params.tel = '';
					// 	// console.log(res); 
					// })
				}
				
			}
		}
	}
</script>

<style scoped>
	.feedback{
		padding:0 40rpx;
	}
	.feedback .uni-form-item{
		margin-bottom:30rpx;
	}
	.feedback .content .title{
		font-size:34rpx;
		font-weight:500;
		color:rgba(102,102,102,1);
		padding:20rpx 0;
	}
	.feedback .content .uni-textarea{
		width:100%;
		height:500rpx;
		background:rgba(248,248,248,1);
		border-radius:28rpx;
		padding:20rpx;
		box-sizing: border-box;
	}
	.feedback .tel .title{
		font-size:28rpx;
		font-weight:400;
		color:rgba(153,153,153,1);
		line-height:40px;
	}
	.feedback .tel .uni-input{
		box-sizing: border-box;
		width:100%;
		height:110rpx;
		background:rgba(248,248,248,1);
		border-radius:24rpx;
		padding:3rpx 30rpx;
	}
	.feedback .tel .uni-input::-webkit-input-placeholder{color: #D4D4D4;}
	button{
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #65B74E;
		border-radius: 44rpx;
	}
</style>