demingshangjia/pages/user/feedback.vue

<template>
	<view class="write-complaints">
		<view class="main-container">
      <view class="text-box">
        <u-input class="textarea" placeholder="发表您的意见吧，我们会做得更好。 (必填)" v-model="text" type="textarea" :clearable="false" :maxlength="200" />
        <span class="text-length">{{ text.length }}/200</span>
      </view>
      <u-input class="phone" placeholder="请输入手机号方便联系 (非必填)" v-model="phone" type="number" />
		</view>
		<view class="write-btn" @click="submit">发表意见</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
export default {
	data() {
		return {
      phone: '',
			text: '',
		}
	},
	methods: {
		submit() {
      if(!this.verifyContent()) return false;
      // console.log(this.phone);
			// console.log(this.text);
			this.$u.toast('提交成功');
			this.phone = "";
			this.text = "";
		},
		verifyContent() {
			if(this.$u.test.isEmpty(this.text)) {
				this.$u.toast('内容不可为空');
				return false;
			}
      if(!this.$u.test.isEmpty(this.phone)) {
				if(!this.$u.test.mobile(this.phone)) {
          this.$u.toast('手机格式错误');
          return false;
        }
      }
			return true;
		},
		writeFeedback() {
			if(!this.verifyContent()) return false;
			this.$u.api.writeFeedback({ 
				fb_content: this.text,
				fb_images: this.imageList,
			}).then(res => {
				if(res.errCode == 0) {
					this.$refs.uToast.show({
						title: res.message,
						duration: 2000,
						callback:() => {
							this.$u.route({
								type: "navigateBack",
								url: '/pageE/more/Complaints',
							})
						}
					})
				} else {
					this.$u.toast(res.message);
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.write-complaints {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	.main-container {
		background-color: #ffffff;
    .text-box {
      padding-bottom: 60rpx;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3rpx;
        width: 750rpx;
        background-color: #ECECEC;
      }
      .text-length {
        height: 60rpx;
        position: absolute;
        right: 40rpx;
        bottom: 0;
        color: #999;
      }
    }
		/deep/ .textarea {
		  padding: 0 30rpx !important;
			width: 100% !important;
			margin-bottom: 10rpx;
		}
    /deep/ .phone {
		  padding: 20rpx 30rpx !important;

    }
	}
	.write-btn {
		margin: 120rpx auto 0;
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 46rpx;
		font-size: 36rpx;
		color: rgba(255,255,255,1);
		text-align: center;
		line-height: 98rpx;
	}
}
</style>