index.vue
2.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<template>
<div class="feedback_container">
<NafmHeader navClass="nafmii-head-bg3" :title="$t('title.feedBack')" />
<div class="feedback_content">
<h3>{{$t('feedback.question')}}</h3>
<van-field v-model="content" rows="4" autosize label="" clearable type="textarea" maxlength="200" placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助" show-word-limit />
<h3>{{$t('feedback.images')}}</h3>
<div class="upload_content">
<van-uploader v-model="fileList" multiple :max-count="4" accept="image/*" :max-size="1024 * 1024" @oversize="onOversize" />
<div class="tip">{{$t('feedback.tip')}}</div>
</div>
<h3>单位全称</h3>
<van-field v-model="unit" placeholder="请输入单位全称" />
<h3>联系人</h3>
<van-field v-model="unit" placeholder="请输入联系人名称" />
<h3>联系方式</h3>
<van-field v-model="unit" type="tel" placeholder="请输入联系方式" />
<div class="tip">注：请您务必准确填写单位全称、联系人及联系方式，以便协会工作人员与您核实相关信息。</div>
<div class="login_btn" :class="{loginActive:isBothValue}" @click="handleSubmit">提交</div>
</div>
</div>
</template>
<script>
export default {
name: 'FeedBack',
data() {
return {
content: '',
fileList: [
{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
],
unit: ''
}
},
computed: {
isBothValue() {
if (this.content) {
return true
} else {
return false
}
},
},
methods: {
// 超出1M提示
onOversize(file) {
console.log(file);
Toast('文件大小不能超过 1M');
},
// 提交
handleSubmit() {
}
}
}
</script>
<style lang="less" scoped>
.feedback_content {
display: flex;
flex-direction: column;
margin: 0px auto;
width: 384px;
h3 {
display: flex;
height: 50px;
align-items: center;
font-size: 16px;
color: #333;
}
/deep/ .van-field {
box-shadow: 0px 0px 5px #ddd;
border-radius: 10px;
}
.upload_content {
box-shadow: 0px 0px 5px #ddd;
border-radius: 10px;
padding: 10px 10px 5px;
}
.tip {
color: #999;
font-size: 11px;
margin-top: 10px;
}
/deep/ .van-uploader__preview-image {
width: 82px;
height: 82px;
}
/deep/ .van-uploader__upload {
width: 82px;
height: 82px;
}
.login_btn {
width: 340px;
margin: 80px auto 0;
border-radius: 5px;
text-align: center;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 16px;
background-image: linear-gradient(to right, #25a3df, #106abc);
opacity: 0.3;
}
.loginActive {
opacity: 1;
}
}
</style>