dev/dcp-app-gate/pages/conference/meetingIndexEn/meetingFeedbackEn.vue

<template>
	<view class="bigbox">
		<!-- 顶部导航栏 -->
		<uni-nav-bar status-bar=true fixed=true left-icon="arrowleft" background-color="#3387ff" color="#ffffff"
		 @clickLeft="navigateBack">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">Feedback</text>
		</uni-nav-bar>
		
		<!-- 表单 -->
		<uni-list 
		:border="false"
		style="width: 686rpx;margin: 32rpx;overflow: hidden;">
			<uni-list-item clickable>
				<text slot="header" class="text_style">Name</text>
				<input placeholder="Please enter your Name" slot="body" class="uni-input-info" v-model="form.umsUsername"/>
			</uni-list-item>
			
			<uni-list-item clickable>
				<text slot="header" class="text_style">Tel.</text>
				<input placeholder="Please enter your Tel" slot="body" class="uni-input-info" v-model="form.userMobile"/>
			</uni-list-item>
			
			<uni-list-item clickable>
				<text slot="header" class="text_style">Affiliation</text>
				<input placeholder="Please enter your Affiliation" slot="body" class="uni-input-info" v-model="form.unit"/>
			</uni-list-item>
			
			<uni-list-item clickable>
				<text slot="header" class="text_style">Possition</text>
				<input placeholder="Please enter your Possition" slot="body" class="uni-input-info" v-model="form.job"/>
			</uni-list-item>
			
			<uni-list-item clickable style="border: none;">
				<text slot="header" class="text_style label">Opinion</text>
				<textarea slot="body" value="" placeholder="" v-model="form.ideaPointOpinion"/>
				<!-- <input placeholder="请填写您的反馈意见" slot="body" class="" /> -->
			</uni-list-item>
		</uni-list>
		
		<button type="default" @click="submitForm">Submit</button>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
	export default{
		data(){
			return{
				form: {
				    meetingId: '',
				    umsUsername: '',
				    userMobile: '',
				    unit: '',
				    job: '',
				    ideaPointOpinion: ''
				},
			}
		},
		methods:{
			async submitForm(){
				if (this.checkContent(this.form.userMobile)&&!this.checkMobile(this.form.userMobile)) {
					uni.showToast({
						title: 'Please fill in the correct mobile phone number',
						icon: 'none'
					});
					return;
				}else if (!this.checkContent(this.form.ideaPointOpinion)) {
					uni.showToast({
						title: 'Please fill in your feedback',
						icon: 'none'
					});
					return;
				}
				
				const token = await this.$myRequest({
					url: '/sys/token',
					data: {}
				});
				const res = await this.$myRequest({
					url: '/meeting/meetingIdeaPoints',
					method: (this.form.id ? 'PUT' : 'POST'),
					data: {
					   meetingIdeaPoint:JSON.stringify(this.form),
					   token:token.data
					}
				});
				if(res.msg == '保存成功'){
					uni.showToast({
						title: 'Feedback success',
						icon: 'none'
					});
					setTimeout(()=>{
						uni.navigateBack()
					}, 1500)
				}
			},
			// 验证手机号格式
			checkMobile(mobile) {
				return RegExp(/^1[34578]\d{9}$/).test(mobile);
			},
			//验证是否为空
			checkContent(content) {
				return RegExp(/^[\s\S]*.*[^\s][\s\S]*$/).test(content);
			},
			navigateBack() {
				uni.navigateBack()
			},
		},
		
		onLoad(option) {
			this.form.meetingId = option.id
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.bigbox {
		height: calc(100vh);
		background-color: #FFFFFF;
		padding-bottom: 20px;
	}
	.uni-list-item{
		// height: 144rpx;
		line-height: 104rpx;
		border-bottom: 1px solid #979797;
	}
	// uni-input{
	// 	border: 1px solid black;
	// 	width: 100%;
	// 	height: 60%;
	// }
	textarea{
		border: 1px solid #979797;
		width: 100%;
	}
	/deep/.uni-list--border::after{
		background-color: #FFFFFF;
	}
	/deep/.uni-list-item__container{
		flex-wrap: wrap;
	}
	.uni-list:after, .uni-list:before{
		height: 0px;
	}
	.text_style{
		width: 100%;
		font-weight: bold;
		font-size: 14px;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.uni-input-info {
		height: 54rpx;
		width: 650rpx;
		font-size: 30rpx;
	}
	uni-button{
		width: 315px;
		height: 44px;
		font-size: 21px;
		color: #FFFFFF;
		line-height: 44px;
		border-radius: 25px;
		background-image: linear-gradient(to right, #33afff , #1777fe);
	}
	.label:before {
		content: '* ';
		color: red;
	}
</style>