TakeOutShop/userserve/clientserve/clientserve.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="ScrollLeft"
				class="class_scroll_ul">
					<view class="class_item class_item_active">热门问题</view>
					<view class="class_item">订单问题</view>
					<view class="class_item">配送问题</view>
					<view class="class_item">发票问题</view>
					<view class="class_item">售后问题</view>
				</scroll-view>
			</view>
			<view class="content_list" @click="detail()">
				<view class="content_l">催单</view>
				<view class="content_r"></view>
			</view>
			<view class="content_list" @click="detail()">
				<view class="content_l">怎么查询骑手电话</view>
				<view class="content_r"></view>
			</view>
			<view class="content_list" @click="detail()">
				<view class="content_l">如何取消订单</view>
				<view class="content_r"></view>
			</view>
			<view class="content_list" @click="detail()">
				<view class="content_l">商品需要售后</view>
				<view class="content_r"></view>
			</view>
			
			<view class="content_list" @click="detail()">
				<view class="content_l">修改订单信息（收件人/时间/备注）</view>
				<view class="content_r"></view>
			</view>
			<view class="content_list" @click="detail()">
				<view class="content_l">订单已完成但未收到货</view>
				<view class="content_r"></view>
			</view>
			
			
		</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 { 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"
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 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=()=>{
	uni.navigateTo({
		url:`/userserve/clientservedetail/clientservedetail`
	})
};
const handleContact=()=>{
	console.log(e.detail.path)
	console.log(e.detail.query)
};
onLoad((options) => {
	//初始化时判断是否显示返回按钮
	showBack.value = getPages();
	updatePageWidth();
});
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(()=>{})
onReachBottom(()=>{})
</script>

<style lang="scss">
	@import './style.scss';
</style>