P003-WX-HomeTeacher/education_uni/subpkg/my/complaint/my_complaint_write.vue

<template>
	<view>
		<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">
		    <button class="cancelBtn" @click="toCancel">取消</button> 
		    <button class="confirmBtn" :disabled="disableButton" @click="toConfirm">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				complaintTitle: "",
				complaintDetail: "",
				disableButton: false
			}
		},
		methods: {
			toCancel(){
				this.complaintTitle = "";
				this.complaintDetail = "";
				uni.navigateBack({
				     delta: 1,
				})
			},
			toConfirm(){
				this.disableButton = true
				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 {
					uni.request({
						url: `${uni.$http.baseUrl}/education/my-complaint/writeComplaint`,
						data: {
								"complaintTitle": this.complaintTitle,
								"complaintDetail": this.complaintDetail,
							},
						header: {
							token: uni.getStorageSync('token')
						},
						method: 'POST',
						success: res => {
							uni.$showMsg('投诉成功')
							setTimeout(() => {
								uni.navigateBack()
								this.disableButton = false
							}, 1000)
						}
					})
				}
				this.disableButton = false
			}
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		//background-color: #FFF;
		// background-color: #D4F5E9;
	}
</style>
<style lang="scss" scoped>
/* 设置页面背景 */
// page{
//     background-color: #E2F0D9;
//     height: 100%;
// }

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

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

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

.confirmBtn,
.cancelBtn{
    font-size: 30rpx;
    height: 85rpx;
    width: 200rpx;
    line-height: 85rpx;
    border-radius: 50rpx;
    text-align: center;
    color: white;
	margin-top: 5rpx;
}

.confirmBtn{
	background-color: #35b882;
}
.cancelBtn{
	background-color: #3ed598;
}

</style>