初始化my文件
This commit is contained in:
yziiy
388
pages/feedback/feedback.vue
Normal file
388
pages/feedback/feedback.vue
Normal file
@@ -0,0 +1,388 @@
|
||||
<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 ? $config.BASR_COLOR : '#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: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.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: var(--primary-color);
|
||||
font-size: var(--font-button-size);
|
||||
color: var(--font-button-color);
|
||||
border-radius: 106rpx;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user