family/education_uni/subpkg/complaintWrite/complaintWrite.vue

<template>
	<view>
		<!--pages/writeComplaint/writeComplaint.wxml-->
		
		<view>
		    <!-- 投诉标题 -->
		    <view class="complaintWrapper">
		        <text class="complaintTitle">投诉标题</text>
		        <textarea name="投诉标题" v-model="complaintTitle"	cols="30" rows="10" maxlength="50" placeholder="不超过50字" class="titleInput" bindinput="getComplaintTitle"></textarea>
		    </view>
		    <!-- 投诉内容 -->
		    <view class="complaintWrapper">
		        <text class="complaintTitle">投诉内容</text>
		        <textarea name="投诉内容" v-model="complaintDetail"	cols="30" rows="10" maxlength="512" placeholder="不超过512字" class="contentInput" bindinput="getComplaintContent"></textarea>
		    </view>
		</view>
		<!-- 取消和提交按钮 -->
		<view class="suggestBtn">
		    <view class="confirmBtn" @click="toCancel">取消</view>
		    <view class="confirmBtn" @click="toConfirm">提交</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				complaintTitle: "",
				complaintDetail: ""
			}
		},
		methods: {
			toCancel(){
				this.complaintTitle = "";
				this.complaintDetail = "";
				
				uni.navigateBack({
				     delta: 1,
				})
			},
			toConfirm(){
			
				var head = '^[ ]+$';
				 
				var re = new RegExp(head);
				
				if (!this.complaintTitle) {
						uni.showModal({
				           title: '投诉标题未写',
				           content: '请补充标题后再重新提交'
				    })
				 }
				 else if (re.test(this.complaintTitle)) {
				             uni.showModal({
				                 title: '标题不能全为空格',
				                 content: '投诉标题不能全部为空格，请修改投诉标题后再提交'
				             })
				} 
				else if (!this.complaintDetail) {
				             uni.showModal({
				                 title: '投诉内容未写',
				                 content: '投诉内容不能为空，请补充投诉内容后再提交'
				             })
				} 
				else if (re.test(this.complaintDetail)) {
				             uni.showModal({
				                 title: '投诉内容不能全部为空格',
				                 content: '投诉内容不能全部为空格，请修改投诉内容后再提交'
				             })
				 }
				else{
					//const { data: result } =await uni.$http.get('/education/my-suggestion/writeAdvise',this.queryObj)
				
				uni.request({
					url: 'http://localhost:8222/education/my-complaint/writeComplaint',
					data: {
							"complaintTitle": this.complaintTitle,
							"complaintDetail": this.complaintDetail,
						},
					header: {
						token: uni.getStorageSync('token')
					},
					method: 'POST',
					success: res => {
						// this.isLoading = false
						console.log(res)
						uni.$showMsg(res.data.message)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
						
						
					}
				})
					
				}
			
			}
		}
	}
</script>

<style lang="scss" scoped>
/* pages/writeComplaint/writeComplaint.wxss */

/* 设置页面背景 */
page{
    background-color: #E2F0D9;
    height: 100%;
}

.complaintWrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20rpx;
}
/* 标题 */
.complaintTitle{
    text-align: center;
    padding-bottom: 20rpx;
    font-weight: bold;
}
/* 输入的建议标题和内容公共样式 */
.titleInput,
.contentInput{
    width: 93%;
    padding: 10rpx;
    /* border: 1rpx solid gray; */
    border-radius: 20rpx;
    background-color: #fff;
}
/* 建议标题输入框的高度 */
.titleInput{
    height: 150rpx;
}

/* 建议内容输入框的高度 */
.contentInput{
    height: 800rpx;
}

/* 下方按钮 */
.suggestBtn{
    display: flex;
    margin-top: 40rpx;
    justify-content: space-around;
}

.confirmBtn{
    font-size: 42rpx;
    width: 120rpx;
    padding: 10rpx 20rpx;
    border-radius: 40rpx;
    text-align: center;
    background-color: #8FAADC;
    color: white;
}
</style>