374 lines
8.2 KiB
Vue
374 lines
8.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="view-page">
|
|||
|
|
<headerHeight bgColor="#fff" />
|
|||
|
|
<navBar :navTitle="footerIndex ? '反馈列表' : '反馈问题'" bgColor="#fff">
|
|||
|
|
</navBar>
|
|||
|
|
<view class="container" v-if="!errorPage">
|
|||
|
|
<view v-if="footerIndex === 0">
|
|||
|
|
<view class="">
|
|||
|
|
<view class="title font-32 color-3 font-w500">
|
|||
|
|
问题描述
|
|||
|
|
</view>
|
|||
|
|
<view class="textarea-view">
|
|||
|
|
<textarea v-model="description" placeholder-style="color:#666" placeholder="请输入问题描述" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="margin-top: 24rpx;">
|
|||
|
|
<view class="title font-32 color-3 font-w500">
|
|||
|
|
问题截图（选填）
|
|||
|
|
</view>
|
|||
|
|
<view class="textarea-view">
|
|||
|
|
<uploadImage @changeImageList="successUpload" ref="uploadImage"></uploadImage>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="margin-top: 24rpx;">
|
|||
|
|
<view class="title font-32 color-3 font-w500">
|
|||
|
|
联系电话（选填）
|
|||
|
|
</view>
|
|||
|
|
<view class="textarea-view">
|
|||
|
|
<input v-model="phone" class="uni-input" type="number" placeholder="请输入联系电话" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-line confirm-view">
|
|||
|
|
<view class="confirm-button color-3 font-28" @click="submit">
|
|||
|
|
提交
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="footerIndex === 1">
|
|||
|
|
<view v-if="dataList && dataList.length">
|
|||
|
|
<view class="feed-box" v-for="item in dataList" :key="item.id">
|
|||
|
|
<view class="box-top-line">
|
|||
|
|
<view v-if="item.image" class="new-box-image">
|
|||
|
|
<img :src="item.image" alt="" />
|
|||
|
|
</view>
|
|||
|
|
<view :class="item.image ? 'ml-20 text-content-image' : 'text-content'">
|
|||
|
|
<view class="color-6 font-28 multi-line w-fill">
|
|||
|
|
{{item.content}}
|
|||
|
|
</view>
|
|||
|
|
<view class="font-24 color-9 mt-24">
|
|||
|
|
{{item.updatetime}}
|
|||
|
|
</view>
|
|||
|
|
<!-- -->
|
|||
|
|
<img v-if="item.is_deal === 2" style="width: 100rpx;height: 100rpx;position: absolute; right: 5%;bottom: 2%;" :src="icon" alt="" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="">
|
|||
|
|
暂无身份信息
|
|||
|
|
</view>
|
|||
|
|
<view class="footer flex-line">
|
|||
|
|
<view class="footer-button flex-line" @click="operate(index)" v-for="(item,index) in footerList"
|
|||
|
|
:key="index">
|
|||
|
|
<view class="icon">
|
|||
|
|
<uni-icons :type="item.icon" :color="footerIndex === index ? '#0DFFB9' : '#333'"
|
|||
|
|
size="20"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<view :class="footerIndex === index ? 'active' : ''" class="title ml-6 color-3 font-28 font-w400">
|
|||
|
|
{{item.title}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import uploadImage from '@/component/uploadImage.vue'
|
|||
|
|
import headerHeight from '@/component/headerHeight.vue';
|
|||
|
|
import navBar from '@/component/nav.vue';
|
|||
|
|
import http from '@/until/http.js';
|
|||
|
|
import logo from '@/static/image/logo.png';
|
|||
|
|
import Icon from '@/static/image/help/yichuli.png'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
headerHeight,
|
|||
|
|
navBar,
|
|||
|
|
uploadImage
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
logo,
|
|||
|
|
icon:Icon,
|
|||
|
|
footerList: [{
|
|||
|
|
title: '意见反馈',
|
|||
|
|
icon: 'mail-open'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '我的反馈',
|
|||
|
|
icon: 'person'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
pageConfig: {
|
|||
|
|
pageSize: 5,
|
|||
|
|
currentPage: 1,
|
|||
|
|
total: 0
|
|||
|
|
},
|
|||
|
|
footerIndex: 0,
|
|||
|
|
loading: false,
|
|||
|
|
errorPage: false,
|
|||
|
|
total: 0,
|
|||
|
|
last_page: 0,
|
|||
|
|
page: 1,
|
|||
|
|
limit: 10,
|
|||
|
|
dataList: [],
|
|||
|
|
phone: '',
|
|||
|
|
description: '',
|
|||
|
|
uploadResult: "", // 上传结果
|
|||
|
|
noMore: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
const {
|
|||
|
|
id
|
|||
|
|
} = options
|
|||
|
|
uni.setStorageSync('token', id)
|
|||
|
|
this.errorPage = id ? false : true
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (!this.loading && !this.noMore) {
|
|||
|
|
this.getUserFeedList()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
back() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
successUpload(list) {
|
|||
|
|
const imageList = list.map(ele => {
|
|||
|
|
return ele.tempFilePath
|
|||
|
|
})
|
|||
|
|
if (imageList && imageList.length) {
|
|||
|
|
this.uploadResult = imageList.join(',')
|
|||
|
|
} else {
|
|||
|
|
this.uploadResult = ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
operate(index) {
|
|||
|
|
if (index) {
|
|||
|
|
this.pageConfig.currentPage = 1
|
|||
|
|
this.dataList = []
|
|||
|
|
this.getUserFeedList()
|
|||
|
|
}
|
|||
|
|
setTimeout(()=> {
|
|||
|
|
this.footerIndex = index
|
|||
|
|
},500)
|
|||
|
|
},
|
|||
|
|
async getUserFeedList() {
|
|||
|
|
await http.get('/api/Suggest/my_suggest', {
|
|||
|
|
token: uni.getStorageSync('token'),
|
|||
|
|
page: this.pageConfig.currentPage,
|
|||
|
|
page_limit: this.pageConfig.pageSize
|
|||
|
|
}).then(response => {
|
|||
|
|
const {
|
|||
|
|
data,
|
|||
|
|
code
|
|||
|
|
} = response
|
|||
|
|
if (code) {
|
|||
|
|
this.pageConfig.total = data.count
|
|||
|
|
this.loading = false
|
|||
|
|
const newData = data.list || []
|
|||
|
|
if (newData.length === 0) {
|
|||
|
|
this.noMore = true
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.dataList = [...this.dataList, ...newData]
|
|||
|
|
this.pageConfig.currentPage++
|
|||
|
|
if (this.dataList.length === this.pageConfig.total) {
|
|||
|
|
this.noMore = true
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
if (!uni.getStorageSync('token')) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "暂无用户身份信息",
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.description === '') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "请输入问题描述",
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const parameter = {
|
|||
|
|
token: uni.getStorageSync('token'),
|
|||
|
|
image: this.uploadResult,
|
|||
|
|
content: this.description,
|
|||
|
|
tell: this.phone
|
|||
|
|
}
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '提交中',
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
http.post('/api/Suggest/create_suggest', parameter).then(response => {
|
|||
|
|
const {
|
|||
|
|
data,
|
|||
|
|
code
|
|||
|
|
} = response
|
|||
|
|
if (code) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "提交成功",
|
|||
|
|
icon: 'none',
|
|||
|
|
mask: true
|
|||
|
|
});
|
|||
|
|
this.description = ''
|
|||
|
|
this.phone = ''
|
|||
|
|
this.uploadResult = ""
|
|||
|
|
this.$refs.uploadImage.clearImage()
|
|||
|
|
this.operate(1)
|
|||
|
|
}, 1000)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "提交失败",
|
|||
|
|
icon: 'error'
|
|||
|
|
});
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}).catch(error => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "提交失败",
|
|||
|
|
icon: 'error'
|
|||
|
|
});
|
|||
|
|
uni.hideLoading()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.view-page {
|
|||
|
|
// padding: 32rpx;
|
|||
|
|
width: 100vw;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #F8F8F8;
|
|||
|
|
.text-content-image{
|
|||
|
|
width: calc(100% - 260rpx);
|
|||
|
|
position: relative;
|
|||
|
|
display: inline-flex;flex-wrap: wrap;align-content: space-between;
|
|||
|
|
}
|
|||
|
|
.text-content{
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
display: inline-flex;flex-wrap: wrap;align-content: space-between;
|
|||
|
|
}
|
|||
|
|
.footer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 98rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(222, 222, 222, 0.25);
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
|
|||
|
|
.footer-button {
|
|||
|
|
.icon {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
color: #0DFFB9
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-bar {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav {
|
|||
|
|
padding: 32rpx;
|
|||
|
|
width: calc(100% - 64rpx);
|
|||
|
|
justify-content: start;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
.icon-image {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
width: calc(100% - 48rpx);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
|
|||
|
|
.feed-box {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 22rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
width: calc(100% - 48rpx);
|
|||
|
|
.box-top-line{
|
|||
|
|
width: 100%;
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.new-box-image {
|
|||
|
|
width: 240rpx;
|
|||
|
|
height: 184rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
img {
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textarea-view {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 22rpx;
|
|||
|
|
|
|||
|
|
.image-upload {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.confirm-view {
|
|||
|
|
justify-content: center;
|
|||
|
|
margin: 48rpx 0;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.confirm-button {
|
|||
|
|
width: 600rpx;
|
|||
|
|
height: 84rpx;
|
|||
|
|
background: #0DFFB9;
|
|||
|
|
border-radius: 106rpx;
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|