P003-WX-HomeTeacher/education_uni/subpkg/my/suggestion/my_suggestion_write.vue

<template>
	<view>
		<view>
		    <!-- 建议标题 -->
		    <view class="suggestWrapper">
		        <text class="suggestTitle">建议标题</text>
		        <textarea v-model="adviseTitle" name="建议标题" cols="30" rows="10" maxlength="50" placeholder="不超过50字" class="titleInput"></textarea>
		    </view>
		    <!-- 建议内容 -->
		    <view class="suggestWrapper">
		        <text class="suggestTitle">建议内容</text>
		        <textarea v-model="adviseDetail" name="建议内容" cols="30" rows="10" maxlength="512" placeholder="不超过512字" class="contentInput"></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 {
				adviseTitle: "",
				adviseDetail: "",
				disableButton: false
			}
		},
		methods: {
			toCancel(){
				this.adviseTitle = "";
				this.adviseDetail = "";
				
				uni.navigateBack({
				     delta: 1,
				})
			},
			toConfirm(){
				this.disableButton = true
				let suggestTitle = this.adviseTitle;
				let suggestDetail = this.adviseDetail;
				var head = '^[ ]+$';
				var re = new RegExp(head);
				if (!suggestTitle) {
						uni.showModal({
				           title: '建议标题未写',
				           content: '请补充标题后再重新提交'
				    })
				} else if (re.test(suggestTitle)) {
					 uni.showModal({
						 title: '标题不能全为空格',
						 content: '建议标题不能全部为空格，请修改建议标题后再提交'
					 })
				} else if (!suggestDetail) {
					 uni.showModal({
						 title: '建议内容未写',
						 content: '建议内容不能为空，请补充建议内容后再提交'
					 })
				} 
				else if (re.test(suggestDetail)) {
					 uni.showModal({
						 title: '建议内容不能全部为空格',
						 content: '建议内容不能全部为空格，请修改建议内容后再提交'
					 })
				} else{
					uni.request({
						url: `${uni.$http.baseUrl}/education/my-suggestion/writeAdvise`,
						data: {
								"adviseTitle": this.adviseTitle,
								"adviseDetail": this.adviseDetail,
							},
						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: #D4F5E9;
	}
</style>

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

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

.suggestWrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20rpx;
	font-size: 30rpx;
}
/* 标题 */
.suggestTitle{
    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>