375 lines
8.2 KiB
Vue
375 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.statusBarHeight = h
|
||
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> |