305 lines
7.0 KiB
Vue
305 lines
7.0 KiB
Vue
<template>
|
||
<view class="view-page" :style="{backgroundImage : `url('${ThemeData?.app_bg ?? $config.PRIMARY_BGURL}')`}">
|
||
<!-- <headerHeight /> -->
|
||
<navBar :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}" :navTitle="'帮助与反馈'" :emitBack="true" @backEvent="back">
|
||
</navBar>
|
||
<view class="content">
|
||
<view class="top-tip flex-line flex-spaceB">
|
||
<view class="">
|
||
<view class="tip">
|
||
Hi，有什么可以帮你
|
||
</view>
|
||
<view class="color-6 font-24 font-w400">
|
||
尽全力，帮助你
|
||
</view>
|
||
</view>
|
||
<view class="kefu-icon">
|
||
<img src="@/static/image/help/kefu.png" alt="" />
|
||
</view>
|
||
</view>
|
||
<view class="problem-view">
|
||
<view class="problem-box" v-for="(item,index) in problemList" :key="index">
|
||
<view class="box-title color-0 font-w500 font-32">
|
||
{{!item.id ? item.title : `${typeData?.type_name}相关问题`}}
|
||
</view>
|
||
<view class="box-content" v-if="item.list && item.list.length !== 0">
|
||
<template v-if="item.id">
|
||
<view class="flex-line box-line box-lines" v-for="(ele,eleIndex) in item.list"
|
||
@click="jumpPage(ele)">
|
||
<view class="title">
|
||
<template v-if="item.id">
|
||
{{ele.title}}
|
||
</template>
|
||
</view>
|
||
<view class="">
|
||
<uni-icons v-if="item.id" type="right" size="14"
|
||
color="rgb(153, 153, 153)"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<uni-data-select class="box-line" v-else v-model="typeId" :clear="false" :localdata="item.list"
|
||
@change="changeType"></uni-data-select>
|
||
</view>
|
||
<view v-else class="">
|
||
<uni-load-more status="noMore"></uni-load-more>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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">
|
||
<img :src="item.icon" alt="" />
|
||
</view>
|
||
<view class="title ml-6 color-3 font-28 font-w400">
|
||
{{item.title}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headerHeight from '@/component/headerHeight.vue';
|
||
import navBar from '@/component/nav.vue';
|
||
import http from '@/until/http.js';
|
||
import keFuImg from '@/static/image/help/Headphone.png';
|
||
import fkImg from '@/static/image/help/fankui.png';
|
||
export default {
|
||
components: {
|
||
headerHeight,
|
||
navBar
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight:0,
|
||
problemList: [{
|
||
title: '问题分类',
|
||
id: 0,
|
||
list: [{
|
||
title: '全部问题'
|
||
}]
|
||
},
|
||
{
|
||
title: '常见问题',
|
||
id: 1,
|
||
list: []
|
||
}
|
||
],
|
||
footerList: [{
|
||
title: '在线客服',
|
||
icon: keFuImg
|
||
},
|
||
{
|
||
title: '意见反馈',
|
||
icon: fkImg
|
||
}
|
||
],
|
||
page: 1,
|
||
limit: 10,
|
||
typeData: null,
|
||
typeId: null,
|
||
ThemeData:null
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
const {
|
||
id,h
|
||
} = options
|
||
uni.setStorageSync('token', id)
|
||
if (uni.getStorageSync('token')) this.getHelpList()
|
||
this.statusBarHeight = h
|
||
uni.setStorageSync('BarHeight', h)
|
||
if(uni.getStorageSync('Theme_Data')) {
|
||
this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
|
||
}
|
||
},
|
||
methods: {
|
||
async getHelpList() {
|
||
http.get('/api/Help/help_type', {
|
||
token: uni.getStorageSync('token') ?? ''
|
||
}).then(response => {
|
||
const {
|
||
data,
|
||
code
|
||
} = response
|
||
if (code) {
|
||
this.problemList[0].list = data.map(ele => {
|
||
return {
|
||
...ele,
|
||
text: `${ele.type_name}的相关问题`,
|
||
value: ele.id
|
||
}
|
||
})
|
||
this.typeId = data.length ? data[0].id : null
|
||
this.typeData = data.length ? data[0] : null
|
||
}
|
||
this.$nextTick(() => {
|
||
this.getProblemList(this.typeId)
|
||
})
|
||
this.errorPage = false
|
||
}).catch(error => {
|
||
this.errorPage = true
|
||
});
|
||
},
|
||
async getProblemList(id) {
|
||
http.get('/api/Help/help_list', {
|
||
token: uni.getStorageSync('token') ?? '',
|
||
type: id,
|
||
page: this.page,
|
||
page_limit: this.limit
|
||
}).then(response => {
|
||
const {
|
||
data,
|
||
code
|
||
} = response
|
||
if (code) {
|
||
this.problemList[1].list = data
|
||
}
|
||
})
|
||
},
|
||
changeType(ele) {
|
||
// console.log(ele)
|
||
this.typeId = ele
|
||
this.typeData = this.problemList[0].list.filter(ele => {return this.typeId === ele.id})[0]
|
||
this.getProblemList(this.typeId)
|
||
this.problemList[1].list = []
|
||
},
|
||
jumpPage(data) {
|
||
uni.navigateTo({
|
||
url: `/pages/feedback/problemDetail?id=${data.id}`
|
||
});
|
||
},
|
||
operate(index) {
|
||
if (index) {
|
||
// 意见反馈
|
||
uni.navigateTo({
|
||
url: `/pages/feedback/feedback?id=${uni.getStorageSync('token')}`
|
||
});
|
||
} else {
|
||
// 在线客服
|
||
const platform = uni.getSystemInfoSync().platform;
|
||
// console.log(platform, '打印设备参数')
|
||
if (platform === 'ios') {
|
||
console.log('调用iOS原生方法')
|
||
// 通过 messageHandlers 调用 iOS 原生方法
|
||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||
'action': 'customerService'
|
||
});
|
||
} else if (platform === 'android') {
|
||
console.log('调用Android原生方法')
|
||
// 调用 Android 原生方法
|
||
window.Android.customerService();
|
||
|
||
}
|
||
}
|
||
},
|
||
back() {
|
||
this.closeWeb()
|
||
},
|
||
closeWeb() {
|
||
// 关闭页面
|
||
const platform = uni.getSystemInfoSync().platform;
|
||
if (platform === 'ios') {
|
||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||
'action': 'closeWeb'
|
||
});
|
||
} else if (platform === 'android') {
|
||
window.Android.closeWeb();
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .uni-select {
|
||
border: 0 !important;
|
||
padding: 0;
|
||
}
|
||
|
||
.view-page {
|
||
// padding: 32rpx;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
|
||
.top-tip {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
margin: 36rpx 0;
|
||
padding: 32rpx;
|
||
width: calc(100% - 64rpx);
|
||
|
||
.tip {
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
|
||
}
|
||
|
||
.kefu-icon {
|
||
width: 218rpx;
|
||
height: 218rpx;
|
||
}
|
||
}
|
||
|
||
.problem-view {
|
||
padding: 0 24rpx;
|
||
|
||
.problem-box {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
|
||
.box-title {
|
||
padding: 24rpx 0;
|
||
}
|
||
|
||
.box-content {
|
||
|
||
.box-line,
|
||
.box-lines {
|
||
// width: calc(100% - 48rpx);
|
||
width: 100%;
|
||
padding: 18rpx 24rpx;
|
||
background-color: #fff;
|
||
border-radius: 14rpx;
|
||
margin-bottom: 24rpx;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
color: #3a3a3a;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.box-lines {
|
||
width: calc(100% - 48rpx);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |