|
@@ -2,10 +2,10 @@
|
|
<div class="feedback">
|
|
<div class="feedback">
|
|
<div class="text-card card">
|
|
<div class="text-card card">
|
|
<div class="title-bar bar">
|
|
<div class="title-bar bar">
|
|
- <div class="key">主题:</div>
|
|
|
|
|
|
+ <div class="key" maxlength="20"><span class="star">*</span> 主题:</div>
|
|
<input v-model="title" type="text">
|
|
<input v-model="title" type="text">
|
|
</div>
|
|
</div>
|
|
- <textarea name="" id="" rows="8" minlength="10" maxlength="150"
|
|
|
|
|
|
+ <textarea name="" id="" rows="8" maxlength="150"
|
|
placeholder="请填写10个字以上的描述,以便我们提供更好的帮助。"
|
|
placeholder="请填写10个字以上的描述,以便我们提供更好的帮助。"
|
|
v-model="desc"
|
|
v-model="desc"
|
|
></textarea>
|
|
></textarea>
|
|
@@ -51,8 +51,10 @@
|
|
|
|
|
|
|
|
|
|
<div class="phone-bar bar">
|
|
<div class="phone-bar bar">
|
|
- <div class="key">联系方式</div>
|
|
|
|
- <input v-model="contact" type="text" placeholder="手机号 / 邮箱">
|
|
|
|
|
|
+ <div class="key"><span class="star">*</span> </span>联系方式</div>
|
|
|
|
+ <input v-model="contact" type="text" placeholder="手机号 / 邮箱"
|
|
|
|
+ maxlength="50"
|
|
|
|
+ >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -63,6 +65,7 @@
|
|
active: canSubmit,
|
|
active: canSubmit,
|
|
}"
|
|
}"
|
|
@click="onSubmit"
|
|
@click="onSubmit"
|
|
|
|
+ :disabled="!canSubmit"
|
|
>
|
|
>
|
|
<div>提交</div>
|
|
<div>提交</div>
|
|
</button>
|
|
</button>
|
|
@@ -100,7 +103,7 @@ export default {
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
canSubmit() {
|
|
canSubmit() {
|
|
- return this.title && this.desc && this.imgList.length && this.contact
|
|
|
|
|
|
+ return this.title && this.desc && this.contact
|
|
},
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -152,17 +155,34 @@ export default {
|
|
},
|
|
},
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- onSubmit() {
|
|
|
|
- Toast.success("提交成功!");
|
|
|
|
- setTimeout(() => {
|
|
|
|
- this.$router.go(-1)
|
|
|
|
- }, 1500);
|
|
|
|
|
|
+ onSubmit: globalUtils.throttle(function() {
|
|
|
|
+ if(this.validateForm()) {
|
|
|
|
+ Toast.success("提交成功!");
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.$router.go(-1)
|
|
|
|
+ }, 1500);
|
|
|
|
+ }
|
|
|
|
+ }),
|
|
|
|
+ // 此函数不检查必填项是否为空。那个已经通过canSubmit来保证了。
|
|
|
|
+ validateForm() {
|
|
|
|
+ if (this.desc.length < 10) {
|
|
|
|
+ Toast.fail('请填写10个字以上的描述')
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ if (!globalUtils.validatePhoneNumber(this.contact) && !globalUtils.validateEmail(this.contact)) {
|
|
|
|
+ Toast.fail('请正确填写联系方式')
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ return true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
|
+.star {
|
|
|
|
+ color: red;
|
|
|
|
+}
|
|
.feedback {
|
|
.feedback {
|
|
background: #F5F5F5;
|
|
background: #F5F5F5;
|
|
height: calc(100% - 80px);
|
|
height: calc(100% - 80px);
|
|
@@ -197,7 +217,7 @@ export default {
|
|
.key {
|
|
.key {
|
|
flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
- input.text {
|
|
|
|
|
|
+ input {
|
|
flex: 1 0 1px;
|
|
flex: 1 0 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|