219 lines
6.8 KiB
Vue
219 lines
6.8 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="head" :class="headShow?'head_show':''" :style="{'opacity':headShow?opacity:'1','padding-top':statusBartop+'px'}">
|
||
<view class="head_cont" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||
<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||
<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="head_title" :style="{'width':pageWidth+'px','height':statusHeight+'px'}">客户服务</view>
|
||
</view>
|
||
</view>
|
||
<view class="content" :style="{'padding-top':statusBartop+statusHeight+10+'px'}">
|
||
<view class="content_head">
|
||
<image class="content_img" src="../../static/userserve/u_bl.png" mode="widthFix"></image>
|
||
<view class="content_text">很高兴为您提供帮助～</view>
|
||
</view>
|
||
<view class="content_menu">
|
||
<view class="content_menu_item">
|
||
<image class="content_menu_item_img" src="../../static/userserve/Invoice.png" mode="widthFix"></image>
|
||
<view class="content_menu_item_title">退款/售后</view>
|
||
</view>
|
||
<view class="content_menu_item">
|
||
<image class="content_menu_item_img" src="../../static/userserve/reminder.png" mode="widthFix"></image>
|
||
<view class="content_menu_item_title">催单</view>
|
||
</view>
|
||
<view class="content_menu_item">
|
||
<image class="content_menu_item_img" src="../../static/userserve/reviseorder.png" mode="widthFix"></image>
|
||
<view class="content_menu_item_title">修改订单</view>
|
||
</view>
|
||
<view class="content_menu_item">
|
||
<image class="content_menu_item_img" src="../../static/userserve/ass.png" mode="widthFix"></image>
|
||
<view class="content_menu_item_title">开发票</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content_help">
|
||
<view class="content_search">
|
||
<image class="content_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||
<input class="content_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
|
||
</view>
|
||
<view class="content_x">帮助中心</view>
|
||
|
||
<view class="class_scroll">
|
||
<scroll-view
|
||
:enhanced="true"
|
||
:show-scrollbar="false"
|
||
scroll-x="true"
|
||
:scroll-with-animation="true"
|
||
:scroll-left="scrollLefter"
|
||
class="class_scroll_ul">
|
||
<view
|
||
v-for="(item,index) in navList"
|
||
:key="index"
|
||
class="class_item"
|
||
:class="currentTab == index ? 'class_item_active' : '' "
|
||
@click="swichNav(item,index)"
|
||
>{{item.name}}</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
<template v-for="(item,index) in list" :key="index">
|
||
<view class="content_list" @click="detail(item)">
|
||
<view class="content_l">{{item.title}}</view>
|
||
<view class="content_r"></view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200px;"></view>
|
||
<view class="footer">
|
||
<view class="footer_tel">
|
||
<image class="footer_telimg" src="../../static/userserve/tel.png"></image>
|
||
<view class="footer_tel_text">热线电话</view>
|
||
</view>
|
||
<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom" class="footer_btn">在线客服<text class="footer_btn_text">（07:00-23:00)</text></button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { loads } from '@/utils/index.js'
|
||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { helpcategory,helplist } from '@/server/api';
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const { proxy } = getCurrentInstance();
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
|
||
const headShow = ref(false);
|
||
const showBack = ref(false);
|
||
const pageWidth = ref(0);
|
||
const opacity = ref(1);
|
||
const navList = ref([]);
|
||
const currentItem = ref({});
|
||
const currentTab = ref(0);
|
||
const list = ref([]);
|
||
const pages = ref(0);
|
||
const decs = ref("");
|
||
const scrollLefter = ref(0);
|
||
const windowWidth = ref(0);
|
||
|
||
|
||
const swichNav = (item,index) => {
|
||
const cur = index;
|
||
const scrollLefters = pageWidth.value / 5;
|
||
currentItem.value = item;
|
||
if (currentTab.value == cur) return false
|
||
currentTab.value = cur;
|
||
scrollLefter.value = (cur - 1) * scrollLefters;
|
||
api_helplist(true);
|
||
}
|
||
const api_helpcategory = () => {
|
||
return helpcategory().then(({data})=>{
|
||
navList.value = data.list;
|
||
currentItem.value = data.list[0];
|
||
if(data.list.length){
|
||
api_helplist(false,1)
|
||
}
|
||
})
|
||
}
|
||
const api_helplist = (e,i) => {
|
||
if(e){
|
||
list.value = [];
|
||
decs.value = '';
|
||
pages.value = 0;
|
||
}
|
||
decs.value = "—— 加载中... ——";
|
||
pages.value = pages.value + 1;
|
||
const params = {
|
||
page:pages.value,
|
||
limit:10
|
||
}
|
||
if(i == 1){loads('', true)}
|
||
return helplist(currentItem.value.id,params).then(({data})=>{
|
||
if(i == 1){uni.hideLoading()}
|
||
decs.value = '—— 上拉加载更多 ——'
|
||
if(data.list.length < 10){
|
||
decs.value = '—— 嗷呜，已经到底啦 ——';
|
||
}
|
||
list.value = list.value.concat(data.list);
|
||
})
|
||
.catch(({message}) => {
|
||
if(i == 1){uni.hideLoading()}
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
|
||
// 获取页面宽度
|
||
const updatePageWidth = () => {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
pageWidth.value = systemInfo.windowWidth;
|
||
};
|
||
const searchWidth = computed(() => {
|
||
return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
|
||
});
|
||
// 判断是否有上一页
|
||
const getPages = () => {
|
||
const pages = getCurrentPages();
|
||
return pages.length > 1;
|
||
};
|
||
const handleBack = () => {
|
||
if (getPages()) {
|
||
// 如果有上一页，返回上一页
|
||
uni.navigateBack();
|
||
} else {
|
||
// 如果没有上一页，返回首页
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
});
|
||
}
|
||
};
|
||
const detail=(item)=>{
|
||
console.log('详情',item);
|
||
uni.navigateTo({
|
||
url:`/userserve/clientservedetail/clientservedetail?id=${item.id}`
|
||
})
|
||
};
|
||
const handleContact=()=>{
|
||
console.log(e.detail.path)
|
||
console.log(e.detail.query)
|
||
};
|
||
onLoad((options) => {
|
||
//初始化时判断是否显示返回按钮
|
||
showBack.value = getPages();
|
||
updatePageWidth();
|
||
api_helpcategory();
|
||
});
|
||
onShow(() => {});
|
||
onPageScroll((e)=>{
|
||
const top = e.scrollTop;
|
||
// 导航条颜色透明渐变
|
||
if (top <= 50) {
|
||
headShow.value = false
|
||
} else {
|
||
if( 50 < top && top <= 200 ){
|
||
opacity.value = top / 200
|
||
}else{
|
||
opacity.value = 1
|
||
}
|
||
headShow.value = true
|
||
}
|
||
}),
|
||
onReady(()=>{})
|
||
onPullDownRefresh(()=>{
|
||
api_helpcategory(true);
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{
|
||
api_helpcategory(false)
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |