初始化
This commit is contained in:
yziiy
302
pages/feedback/help.vue
Normal file
302
pages/feedback/help.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<view class="view-page">
|
||||
<!-- <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,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const {
|
||||
id,h
|
||||
} = options
|
||||
uni.setStorageSync('token', id)
|
||||
if (uni.getStorageSync('token')) this.getHelpList()
|
||||
this.statusBarHeight = h
|
||||
uni.setStorageSync('BarHeight', h)
|
||||
},
|
||||
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-image: url('@/static/image/help/bg.png');
|
||||
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>
|
||||
Reference in New Issue
Block a user