<template>
|
<div class="feedBack">
|
<div class="feedBack-box">
|
<h4>猜你想问</h4>
|
<div class="feedBack-item" :class="{'active':feedBack.type == item.value }" @click="handleClick(index)" v-for="(item,index) in list" :key="index">
|
{{item.text}}
|
</div>
|
</div>
|
|
<div class="feedBack-box">
|
<h4>问题反馈 <span style="margin-left:10rpx;" v-if="feedBack.type">@{{ list.find(item=>{return item.value == feedBack.type }).text }}</span></h4>
|
<u-input class="field-input" height="500" :border-bottom="false" v-model="feedBack.context" type="textarea" placeholder="请输入反馈信息">
|
</u-input>
|
</div>
|
|
<!-- 上传凭证 -->
|
<div class="feedBack-box">
|
<view class="opt-view">
|
<view class="img-title">上传凭证（最多2张）</view>
|
<view class="images-view">
|
<u-upload :header=" { accessToken: storage.getAccessToken() }" :action="action" width="150" @on-uploaded="onUploaded" :max-count="2" :show-progress="false"></u-upload>
|
</view>
|
</view>
|
</div>
|
|
<div class="feedBack-box">
|
<h4>手机号</h4>
|
<u-input :border-bottom="false" v-model="feedBack.mobile" placeholder="请输入您的手机号">
|
</u-input>
|
</div>
|
|
<div class="submit" @click="submit()">提交</div>
|
</div>
|
|
</template>
|
|
<script>
|
import '@/components/uview-components/uview-ui';
|
|
import storage from "@/utils/storage.js";
|
import config from "@/config/config";
|
import { feedBack } from "@/api/members.js";
|
import { upload } from "@/api/common.js";
|
export default {
|
data() {
|
return {
|
storage,
|
config,
|
feedBack: {
|
type: "FUNCTION", //默认反馈问题为 '功能相关'
|
},
|
action: upload, //图片上传地址
|
list: [
|
{ text: "功能相关", value: "FUNCTION" },
|
{ text: "优化反馈", value: "OPTIMIZE" },
|
{ text: "其他", value: "OTHER" },
|
],
|
};
|
},
|
methods: {
|
// 点击反馈内容
|
handleClick(index) {
|
this.$set(this.feedBack, "type", this.list[index].value);
|
},
|
|
//图片上传
|
onUploaded(lists) {
|
let images = [];
|
lists.forEach((item) => {
|
images.push(item.response.result);
|
});
|
this.feedBack.images = images.join(",");
|
},
|
|
/**
|
* 提交意见反馈
|
*/
|
submit() {
|
if (!this.feedBack.type) {
|
uni.showToast({
|
title: "请填写反馈类型",
|
duration: 2000,
|
icon: "none",
|
});
|
return false;
|
}
|
if (!this.feedBack.context) {
|
uni.showToast({
|
title: "请填写反馈信息",
|
duration: 2000,
|
icon: "none",
|
});
|
return false;
|
}
|
if (this.feedBack.mobile && !this.$u.test.mobile(this.feedBack.mobile)) {
|
uni.showToast({
|
title: "请填写您的正确手机号",
|
duration: 2000,
|
icon: "none",
|
});
|
return false;
|
}
|
/** 提交 */
|
feedBack(this.feedBack).then((res) => {
|
if (res.data.success) {
|
uni.showToast({
|
title: "提交成功!",
|
duration: 2000,
|
icon: "none",
|
});
|
setTimeout(() => {
|
uni.navigateBack({
|
delta: 1,
|
});
|
}, 500);
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.submit {
|
text-align: center;
|
background: $light-color;
|
height: 70rpx;
|
line-height: 70rpx;
|
color: #fff;
|
width: 92%;
|
margin-bottom: 100rpx;
|
margin: 0 auto;
|
border-radius: 100px;
|
}
|
.active{
|
color: $light-color !important;
|
font-weight: bold;
|
}
|
.feedBack {
|
padding-bottom: 100rpx;
|
}
|
.feedBack-box {
|
background: #fff;
|
border-radius: 20rpx;
|
padding: 32rpx;
|
margin-bottom: 40rpx;
|
}
|
/deep/ .u-input__textarea {
|
padding: 12px;
|
}
|
.feedBack-box:nth-of-type(1) {
|
border-top-left-radius: 0;
|
border-top-right-radius: 0;
|
}
|
.feedBack-item {
|
margin: 20rpx 0;
|
font-size: 24rpx;
|
color: #666;
|
}
|
h4 {
|
font-size: 30rpx;
|
}
|
.field-input {
|
margin: 20rpx 0;
|
padding: 20rpx 0;
|
background: #fafafa;
|
border-radius: 0.6em;
|
}
|
</style>
|
