mobile-frame-h5-example/pages/template/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>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		name:"feedback",		
		components:{
			
		},
		data(){
			return{
				content:'',
				tel:'',
				message:'',
				messageType:'',
				params:{
					"fkCustomerId":'',
					"feedbackContext":'',
					"tel":''
				}
			}
		},
		mounted() {
			let u = uni.getStorageSync('userInfo');
			this.params.fkCustomerId = u.guid;			
		},
		methods:{
			showToast() {
				this.$refs.uToast.show({
					title: this.message,
					type: this.messageType,
					icon:false,
					// url: '/pages/user/index'
				})
			},
			postData(data){
				if(!this.params.feedbackContext){
					this.messageType ="error";
					this.message = "请输入留言内容";
					this.showToast();
					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/微信/手机号 输入不正确";
							this.$refs.uToast.show({
								title: this.message,
								type: 'error',
								// url: '/pages/user/index'
							});
							return false;
						}
					};					
					
					this.$u.api.feedbackAdd(this.params).then(res => {
							console.log(res);
							if(res.retHead.errCode=='0'){
								this.messageType ="success";
								this.message = "留言成功";
								this.params.feedbackContext = '';
								this.params.tel = '';
								this.showToast();
							}else{
								this.$api.msg(res.retHead.errMsg)
							};
							
						// console.log(res); 
					}).catch(err =>{
						console.log('articleFeedback err', err);
					})
				}
				
			}
		}
	}
</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>