150 lines
3.2 KiB
Vue
150 lines
3.2 KiB
Vue
<template>
|
||
<div class="feedback">
|
||
<div class="suggest">
|
||
<div flex class="title"><em v-text="'*'"/>请输入您的宝贵意见</div>
|
||
<AiTextarea v-model="content" placeholder="请输入（200字以内）" :maxlength="200"/>
|
||
</div>
|
||
<div class="name">
|
||
<div flex><em v-text="'*'"/>联系人</div>
|
||
<input type="text" placeholder="请输入您的姓名" style="text-align: right;" v-model="name" class="inp">
|
||
</div>
|
||
<div class="phone">
|
||
<div flex><em v-text="'*'"/>联系方式</div>
|
||
<input type="number" placeholder="请输入您的联系方式" style="text-align: right;" v-model="phone" class="inp" maxlength="11">
|
||
</div>
|
||
<div class="photo">
|
||
<div class="photo-title">图片 <span>（最多9张）</span></div>
|
||
<div class="pad-120">
|
||
<AiUploader :limit="9" multiple :def.sync="picture" placeholder="上传图片" action="/admin/file/add2"/>
|
||
</div>
|
||
</div>
|
||
<div style="height: 56px;"></div>
|
||
<div class="btn" @click="submit">保存</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'feedback',
|
||
|
||
data() {
|
||
return {
|
||
content: '',
|
||
picture: [],
|
||
name: '',
|
||
phone: ''
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
submit() {
|
||
let {phone, content, picture, name} = this
|
||
if (!content) {
|
||
return this.$u.toast("请输入您的宝贵意见")
|
||
}
|
||
if (!name) {
|
||
return this.$u.toast("请输入您的姓名")
|
||
}
|
||
if (!phone) {
|
||
return this.$u.toast("请输入联系方式")
|
||
}
|
||
if (!/^\d{11}$/g.test(phone)) {
|
||
return this.$u.toast("联系方式格式有误!")
|
||
}
|
||
this.$http.post("/oms/api/appfeedback/addOrUpdate", {
|
||
phone,
|
||
opinion: content,
|
||
pictureUrl: picture?.map(e=>e.url).toString(),
|
||
contacts: name,
|
||
sourceHost: location.host
|
||
}, {
|
||
withoutToken: true
|
||
}).then(res => {
|
||
if (res?.code == 0) {
|
||
this.$u.toast("保存成功!")
|
||
setTimeout(() => {
|
||
uni.navigateBack({})
|
||
}, 1500)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
onShow() {
|
||
document.title = '意见反馈'
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.feedback {
|
||
padding-bottom: 100px;
|
||
|
||
em {
|
||
display: block;
|
||
color: red;
|
||
font-style: normal;
|
||
height: initial;
|
||
}
|
||
|
||
.suggest {
|
||
padding: 15px 30px;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
margin-bottom: 8px;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 100px;
|
||
line-height: 100px;
|
||
font-size: 32px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.name,
|
||
.phone {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
margin-bottom: 8px;
|
||
padding: 0 30px;
|
||
width: 100%;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
font-size: 32px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.photo {
|
||
background-color: #FFFFFF;
|
||
padding: 20px 30px;
|
||
|
||
.photo-title {
|
||
width: 100%;
|
||
height: 100px;
|
||
line-height: 80px;
|
||
color: #333333;
|
||
|
||
& > span {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
text-align: center;
|
||
background-color: #1365DD;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
</style>
|