lanan-app/pages/rescue/rescue.vue

<!-- 道路救援 首页-->
<template>
	<view class="content">
		<!-- 顶部 -->
		<view class="content-top" :style="{ paddingTop: homeHeaderPaddingTop + 'px' }">
			<view style="display: flex; justify-content: start;">
				<image class="logo-icon" src="@/static/leftLogo.png" mode="scaleToFill">


				</image>
				<view class="top-two">
					<view class="user-info">
						<view class="user-name">{{ userinfo.nickname || '用户昵称'}}</view>
						<view class="user-position" v-if="highestWeightRoleName">{{ highestWeightRoleName }}</view>
					</view>
					<!-- #ifdef APP-PLUS || H5 -->

					<view class="real-time">
						<text class="date-part">{{currentDate}}</text>
						<text class="time-part">{{currentTime}}</text>
					</view>
					<!-- #endif -->

				</view>
			</view>
			<view class="top-menu">
				<view class="top-menu-item" :key="index" v-for="(item, index) in topMenuList"
					@click="goToMenuPage(item)" v-if="checkPermi(['rescue_home_page'])">
					<image class="top-menu-item-icon" :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>

		<view class="dil" v-if="checkPermi(['rescue_home_page'])">
			<!-- 四个选项 -->
			<!-- #ifdef APP-PLUS || H5 -->
			<!-- <view style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;"> -->
			<view class="four-box-header">
				<view class="blue-line"></view>
				<text class="four-box-header-title">业务管理</text>

				<!-- <view class="four-box-header-extra">
					<text style="color: #929292;">待评价</text>
					<uni-icons type="right" color="#929292"></uni-icons>
				</view> -->

			</view>
			<!-- <view class="four-box-header-extra" @click="gohistory()">
					<text style="color: #929292;">历史订单</text>
					<uni-icons type="right" color="#929292"></uni-icons>
				</view>
			</view> -->
			<view class="tab-choose-class">

				<view class="tab-content" @click="tabChoose(item, index)"
					v-for='(item, index) in ["当日", "当月", "全部", "自定义"]' :key='index'>

					<!-- tab 名称信息 -->
					<view class='tab-name-class'
						:style='{ color: index + 1 == tabValue ? "#101A3E" : "#8D90A6", fontWeight: index + 1 == tabValue ? "bold" : "normal" }'>
						{{ item }}

						<view class="icon-tab" v-if='index == 3'>
							<image src="@/static/icons/homeOrderCard/xialajiantou.svg" mode="scaleToFill"></image>
						</view>
					</view>

					<!-- 名称下 icon -->
					<view class="tab-icon"
						:style='{ background: index + 1 == tabValue ? "linear-gradient( 180deg, #054DF3 0%, #55A3FF 100%)" : "" }'>
					</view>
				</view>
			</view>
			<view class="example-body" v-show="tabValue==4" style="margin-bottom: 16rpx;">
				<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
			</view>
			<view class="four-box">
				<view class="boxf" @click="goToOrder('null')">
					<view class="zi1">
						<image class="zi1-icon" src="@/static/icons/homeOrderCard/receivedOrder_new.png"
							mode="aspectFit">
						</image>
						<text>已接单</text>
					</view>
					<view class="zi2" style="margin-top: 10rpx;">{{yjdNum ? yjdNum : '0'}}</view>
				</view>
				<view class="boxf" @click="goToOrder(1)">
					<view class="zi1">
						<image class="zi1-icon" src="@/static/icons/homeOrderCard/jyz_new.png" mode="aspectFit"></image>
						<text>救援中</text>
					</view>
					<view class="zi2" style="margin-top: 10rpx;">{{jyzNum}}</view>
				</view>
				<view class="boxf" @click="goToOrder(5)">
					<view class="zi1">
						<image class="zi1-icon" src="@/static/icons/homeOrderCard/ywc_new.png" mode="aspectFit"></image>
						<text>已完成</text>
					</view>
					<view class="zi2" style="margin-top: 10rpx;">{{ywcNum}}</view>
				</view>
			</view>

			<view class="two-box-container">
				<view class="two-box">
					<view class="boxf2" style="background: linear-gradient(135deg, #E0F0FF 40%, #BBD9FF 100%);">
						<view style="display: flex; justify-content: space-between; align-items: center;">
							<view class="zi1_1">
								<image class="zi1_1-icon" src="@/static/icons/homeOrderCard/ysk_solid.png"
									mode="aspectFit">
								</image>
								<text style="color: #3d6ba0; font-weight: bold; font-size: 30rpx;">应收款</text>
							</view>
							<uni-icons class="eye-icon" :type="yskShowAmount ? 'eye' : 'eye-slash'"
								@click.native.stop.prevent="yskShowAmount = !yskShowAmount"></uni-icons>
						</view>
						<view class="zi2_2" style="margin-top: 10rpx;">{{ yskShowAmount ? yingskNum : '*****' }}</view>
					</view>
					<view class="boxf2" style="background: linear-gradient(135deg, #FFF7E0 40%, #FFE7B8 100%);"
						@click="goToOrder(3)">
						<view style="display: flex; justify-content: space-between; align-items: center;">
							<view class="zi1_1">
								<image class="zi1_1-icon" src="@/static/icons/homeOrderCard/qucar.png" mode="aspectFit">
								</image>
								<text style="color: #a97747; font-size: 30rpx; font-weight: bold;">待取车</text>
							</view>
							<uni-icons class="eye-icon" :type="dqcShowAmount ? 'eye' : 'eye-slash'"
								@click.native.stop="dqcShowAmount = !dqcShowAmount"></uni-icons>
						</view>
						<view class="zi2_2" style="margin-top: 10rpx;">{{ dqcShowAmount ? dqcNum : '*****' }}</view>
					</view>
				</view>

				<view class="two-box">
					<view class="boxf2" style="background: linear-gradient(135deg, #E6F8ED 40%, #C8F0D8 100%);">
						<view style="display: flex; justify-content: space-between; align-items: center;">
							<view class="zi1_1">
								<image class="zi1_1-icon" src="@/static/icons/homeOrderCard/yisk_solid.png"
									mode="aspectFit">
								</image>
								<text style="color: #169948; font-size: 30rpx; font-weight: bold;">已收款</text>
							</view>
							<uni-icons class="eye-icon" :type="yiskShowAmount ? 'eye' : 'eye-slash'"
								@click.native.stop="yiskShowAmount = !yiskShowAmount"></uni-icons>
						</view>
						<view class="zi2_2" style="margin-top: 10rpx;">{{ yiskShowAmount ? yiskNum : '*****' }}</view>
					</view>
					<view class="boxf2" style="background: linear-gradient(135deg, #F0E9FF 40%, #D9CEFF 100%);">
						<view style="display: flex; justify-content: space-between; align-items: center;">
							<view class="zi1_1">
								<image class="zi1_1-icon" src="@/static/icons/homeOrderCard/dsk_solid.png"
									mode="aspectFit">
								</image>
								<text style="color: #6657da; font-weight: bold; font-size: 30rpx;">待收款</text>
							</view>
							<uni-icons class="eye-icon" :type="dskShowAmount ? 'eye' : 'eye-slash'"
								@click.native.stop="dskShowAmount = !dskShowAmount"></uni-icons>
						</view>
						<view class="zi2_2" style="margin-top: 10rpx;">{{ dskShowAmount ? dskNum : '*****' }}</view>
					</view>
				</view>
			</view>
			<view class="yijian">
				<view class="y-left" @click="getyi()">
					<view class="">立即救援</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="box">

				<template v-for="(item, index) in busiTypeList">
					<view :key="index" class="xz-box" :class="{ checked: busiType === index + 1 }"
						@click="getsxwhat(index + 1)">
						<image class="xz-box-icon" :src="item.icon" mode="aspectFit"></image>
						<view class="box-wenzi">{{item.label}}</view>
						<view class="checkedFlag">
						</view>
						<uni-icons class="checkedFlagIcon" type="checkmarkempty" size="22" color="#fff"></uni-icons>
					</view>
				</template>

			</view>
			<!-- #endif -->
			<view class="four-box-header_2">
				<view class="four-box-header">
					<view class="blue-line"></view>
					<text class="four-box-header-title">救援列表</text>

					<!-- <view class="four-box-header-extra" @click="gohistory()">
					<text style="color: #929292;">历史订单</text>
					<uni-icons type="right" color="#929292"></uni-icons>
				</view> -->
				</view>
				<view class="four-box-header_2_right">
					<text :class="['tab-item', { active: activeTab === 0 }]" @click="switchTab(0)">司机端</text>
					<text :class="['tab-item', { active: activeTab === 1 }]" @click="switchTab(1)">业务端</text>
					<text :class="['tab-item', { active: activeTab === 2 }]" @click="switchTab(2)">客户端</text>
				</view>
			</view>

			<view class="tap-box">
				<view class="ques" v-if="loading && orderList.length == 0">
					<!-- <image src="../../static/quesheng.png" mode="aspectFit"></image> -->
					<view class="loading-container">
						<view class="loading-spinner"></view>
						<text class="loading-text">加载中，请稍候...</text>
					</view>
				</view>
				<view class="ques" v-else-if="!loading && orderList.length == 0">
					<image src="../../static/quesheng.png" mode="aspectFit"></image>

				</view>

				<view style="display: flex;flex-direction: column;row-gap: 10px;" v-else>
					<order-card-new :status="1" @deleteOk="deleteOrderHandle" @revokeOk="revokeOrderHandle"
						@refresh="getlist" v-for="(item, index) in orderList" :key="index" :orderData="item"
						:activeTab="activeTab"></order-card-new>
				</view>

			</view>
			<!-- 一键救援 -->
			<view style="width: 100%; height: 80px; "></view>
			<!-- dibu -->
		</view>
		<u-modal :show="showDelete" :title="title" :showCancelButton="true"></u-modal>
		<u-popup :show="showp" mode="center" :round="10">
			<scroll-view scroll-y style="height: 200px;">
				<view class="box_">
					<view class="title_">车辆提醒</view>
					<view class="size_" v-for="(item,index) in warnList" :key="index">{{item}}</view>
				</view>
			</scroll-view>
			<view class="annaiu" @click="showp=false">
				<view class="">确定</view>
			</view>
		</u-popup>
		<!-- 悬浮刷新按钮 -->
		<view v-if="checkPermi(['rescue_home_page'])" class="floating-refresh-btn" :class="{ rotating: isRefreshing }"
			@click="handleRefresh">
			<uni-icons type="refreshempty" size="40" color="#fff"></uni-icons>
		</view>
		<tabBar :msg="msg"></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from '@/components/tabBar/tabBar.vue'
	import {
		getToken
	} from '@/utils/auth'
	// #ifdef APP
	const keepAlivePlugin = uni.requireNativePlugin('Ba-KeepAlive')
	const jyJPush = uni.requireNativePlugin('JY-JPush');
	// #endif
	import OrderCardNew from '@/components/orderCard/OrderCardNew.vue'
	import {
		getWXStatusHeight
	} from '@/utils/utils.js';
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission"; // 权限判断函数
	// import { getWeather } from'../../utils/Weather'
	export default {
		data() {
			return {
				// #ifdef MP
				homeHeaderPaddingTop: 0,
				homeHeaderMenuHeight: 0,
				homeHeaderMenuLeft: 0,
				// #endif
				// #ifdef APP || H5
				homeHeaderPaddingTop: uni.upx2px(90),
				homeHeaderMenuHeight: 50,
				homeHeaderMenuLeft: 0,
				// #endif
				activeTab: 1, // 新增：当前选中的选项卡索引
				busiTypeList: [{
						label: '拖车',
						icon: require('@/static/icons/order/tuoche.png')
					},
					{
						label: '送油',
						icon: require('@/static/icons/order/songyou.png')
					},
					{
						label: '搭电',
						icon: require('@/static/icons/order/dadian.png')
					},
					{
						label: '换胎',
						icon: require('@/static/icons/order/huantai.png')
					},
					// {
					// 	label: '扣车',
					// 	icon: require('@/static/icons/order/tuoche.png')
					// },
				],
				topMenuList: [{
						title: '业务管理',
						/* path: '/pages/rescue/historylist?id=1', */
						icon: require('@/static/icons/homeTopMenu/icon_business.png')
					},
					{
						title: '车辆管理',
						path: '/pages/my/carManage',
						icon: require('@/static/icons/homeTopMenu/icon_clean.png')
					},
					{
						title: '数据统计',
						path: '/pages/my/StatisticsInfo',
						icon: require('@/static/icons/homeTopMenu/icon_maintain.png')
					},
					{
						title: '消息通知',
						path: '/pages/message/message',
						icon: require('@/static/icons/homeTopMenu/icon_fitment.png')
					}
				],
				msgSocket: this.$msgSocket,
				showp: false,
				title: '是否确认删除',
				content: '是否确认删除',
				dqcNum: 0,
				dzfNum: 0,
				jyzNum: 0,
				ywcNum: 0,
				zwxNum: 0,
				// 已接单
				yjdNum: 0,
				// 应收款
				yingskNum: 0,
				// 已收款
				yiskNum: 0,
				// 待收款
				dskNum: 0,
				currentTime: '',
				cityName: '济南',
				positionInfo: '泸州',
				msg: '1',
				total: 0,
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				orderList: [
					// {
					// 	rescueTypeStr: '扣车',
					// 	rescuePosition: '四川省泸州市江阳区酒谷大道四段18号泸州',
					// 	rescueStatus: 2,
					// 	rescueStatusStr: '待救援',
					// 	driverName: '先伟',
					// 	driverCarNum: '川E69752',
					// 	distance: 12800,
					// 	needTime: 26,
					// 	rescueTime: '2024-08-12 08:42'
					// }
				],
				sjlist: [],
				showDelete: false,
				arrbox: [
					// {text:'待支付',id:1},
					// {text:'待评价',id:2},
				],
				keepLive: {
					channelId: 'Ba-KeepAlive',
					channelName: "Ba-KeepAlive",
					title: "蓝安救援正在运行",
					content: "蓝安救援正在运行",
					dataResult: "",
					type: undefined
				},
				one: true,
				warnList: [],
				userinfo: {},
				currentDateTime: '', // 实时时间变量
				timer: null, // 定时器
				tabValue: 1,
				timeType: "day",
				range: [],
				yskShowAmount: false,
				yiskShowAmount: false,
				dskShowAmount: false,
				dqcShowAmount: false,
				startTimeStr: null,
				endTimeStr: null,

				currentDate: '',
				// currentTime: '',
				roleList: [],
				positionName: '', // 岗位名称
				highestWeightRoleName: '',
				isRefreshing: false, // 新增：刷新状态
				loading: true, // 加载状态控制

			}
		},
		onLoad() {
			// #ifdef MP
			const {
				barHeight,
				barTop,
				menuButtonLeft
			} = getWXStatusHeight()
			console.log('barHeight, barTop, menuButtonLeft: ', barHeight, barTop, menuButtonLeft);
			this.homeHeaderPaddingTop = barTop || 0
			this.homeHeaderMenuHeight = barHeight
			this.homeHeaderMenuLeft = menuButtonLeft - 6
			// #endif
			this.$startMsgSocket(uni.getStorageSync('userId'))
			this.updateDateTime();
			this.timer = setInterval(this.updateDateTime, 1000);
			// #ifdef APP || H5
			// this.register()
			this.jyPushStart()
			this.updateDateTime();
			this.timer = setInterval(this.updateDateTime, 1000);
			// #endif
			/* // 监听编辑完成事件
			uni.$on('refreshHomePage', this.handleRefreshHomePage); */
		},
		onUnload() {
			// 清除定时器
			if (this.timer) clearInterval(this.timer);
			/* // 移除事件监听，避免内存泄漏
			uni.$off('refreshHomePage', this.handleRefreshHomePage); */
		},
		onShow() {
			this.timeWeekFormat()
			//this.getWarnList()
			if (getToken()) {
				this.Fourhammers()
				this.getlist()
				this.userinfo = uni.getStorageSync('userInfo')
				this.roleList = uni.getStorageSync('role')
				this.highestWeightRoleName = uni.getStorageSync('highestWeightRoleName')
				console.log('highestWeightRoleName', this.highestWeightRoleName)
			} else {
				return
			}
		},
		onReachBottom() {
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			} else {
				this.pageNum++
				this.getlist()
			}
		},
		watch: {
			range(newval) {
				if (newval && newval.length === 2) {
					this.startTimeStr = newval[0];
					this.endTimeStr = newval[1];
					this.Fourhammers();
				}
			},
			roleList: {
				handler(newVal) {
					if (newVal && newVal.length > 0) {
						this.filterPosition();
					} else {
						this.positionName = ''; // 设置为空，不显示
					}
				},
				immediate: true // 立即执行一次
			}
		},
		components: {
			tabBar,
			OrderCardNew
		},
		methods: {
			checkPermi,
			checkRole,
			// 切换选项卡
			switchTab(index) {
				this.activeTab = index;
				console.log('切换到选项卡:', index);
			},
			/* // 处理首页刷新
			handleRefreshHomePage() {
				console.log('收到编辑完成事件，刷新首页数据');
				this.pageNum = 1;
				this.orderList = [];
				this.getlist();
				this.Fourhammers();
			}, */

			// 处理刷新
			handleRefresh() {
				if (this.isRefreshing) return;

				this.isRefreshing = true;

				// 刷新数据
				this.pageNum = 1;
				this.orderList = [];

				// 同时调用多个接口刷新数据
				Promise.all([
					this.getlist(),
					this.Fourhammers()
				]).then(() => {
					this.isRefreshing = false;
					uni.showToast({
						title: '刷新成功',
						icon: 'success',
						duration: 1000
					});
				}).catch(() => {
					this.isRefreshing = false;
					uni.showToast({
						title: '刷新失败',
						icon: 'none',
						duration: 1000
					});
				});
			},

			jyPushStart() {
				console.log("jyPushStart", jyJPush);
				//  暂时只有安卓支持
				jyJPush.registerSDKCallBack(sdkCallBack => {
					//  这里会返回regid，
					console.log("sdk Callback 结果 " + JSON.stringify(sdkCallBack));
				})

				// 此处只是演示 授权，实际应该弹出自己的隐私授权页面，或者用uniapp提供的隐私协议
				setTimeout(function() {
					jyJPush.setAuth({
						auth: "1"
					}, res => {
						console.log("auth 结果 " + JSON.stringify(res));
						if (res.errorCode == 0) {
							//  安卓需要单独调用
							if (uni.getSystemInfoSync().platform == 'android') {
								jyJPush.android_init(initRes => {
									console.log("init 结果 " + JSON.stringify(initRes));
									jyJPush.deleteJYJPushAlias({
										//  可以不用传值进去，但是需要配置这项数据
									}, result => {

										jyJPush.setJYJPushAlias({
											userAlias: uni.getStorageSync('userId')
										}, result => {
											//  设置成功或者失败，都会通过这个result回调返回数据；数据格式保持极光返回的安卓/iOS数据一致
											//  注：若没有返回任何数据，考虑是否初始化完成
											console.log('setJYJPushAlias', result);
											jyJPush.getJYJPushAlias({
												//  可以不用传值进去，但是需要配置这项数据
											}, result => {
												console.log(
													'getJYJPushAlias',
													result);
											});


										});
									});
								})
							}
						}
					})
				}, 5000);
			},
			msgInfo() {
				if (this.msgSocket) {

					this.msgSocket.onMessage(res => {
						console.log('触发首页的消息回调');
						this.singleList = []
						this.getthreelist()
						this.driverRescuePage()

					})
				}
			},
			/**
			 * 导航菜单跳转
			 */
			goToMenuPage(item) {
				if (!item.path) {
					return; // 如果没有path，则不进行跳转
				}
				uni.navigateTo({
					url: item.path
				})
			},
			isRunning() { //是否正在运行
				keepAlive.isRunning((res) => {
					console.log('保活服务验证', res);

				});
			},
			restart() { //重启
				keepAlive.restart((res) => {
					console.log('重启保活服务', res);

				})
			},
			register() { //注册
				// #ifdef APP
				console.log('keepAlive', keepAlivePlugin);
				keepAlivePlugin.register({
						channelId: this.keepLive.channelId,
						channelName: this.keepLive.channelName,
						title: this.keepLive.title,
						content: this.keepLive.content,
					},
					(res) => {
						console.log('保活注册', res);
					});
				// #endif
			},
			deleteOrderHandle() {
				this.pageNum = 1
				this.orderList = []
				this.getlist()
			},
			revokeOrderHandle() {
				this.pageNum = 1
				this.orderList = []
				this.getlist()
			},
			getWarnList() {
				this.warnList = []
				request({
					url: "/system/rescueCar/warnList",
					method: 'get',
				}).then(res => {
					this.warnList = res.data
					if (this.warnList.length > 0) {
						this.showp = true
					}
				})
			},
			goToOrder(type) {
				uni.navigateTo({
					url: '/pages/rescue/historylist?id=' + type
				})
			},
			gettel(num) {
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			},
			getsxwhat(id) {
				uni.navigateTo({
					url: '/pages/rescue/initiate?id=' + id + '&isAppointment=' + this.isAppointment
				})
			},
			Fourhammers() {
				request({
					url: '/app/rescueInfo/getRescueStatistics',
					method: 'get',
					params: {
						timeType: this.timeType,
						startTimeStr: this.startTimeStr,
						endTimeStr: this.endTimeStr,
					}
				}).then((res) => {
					console.log('四个', res);
					this.dqcNum = res.data.dqcNum
					this.dzfNum = res.data.dzfNum
					this.jyzNum = res.data.jyzNum
					this.ywcNum = res.data.ywcNum
					this.yjdNum = res.data.yjdNum
					this.yingskNum = res.data.yingskNum ? res.data.yingskNum / 100 : 0
					this.yiskNum = res.data.yiskNum ? res.data.yiskNum / 100 : 0
					this.dskNum = res.data.dskNum ? res.data.dskNum / 100 : 0


				})
			},
			timeWeekFormat() {
				//定义一个日期对象;
				var dateTime = new Date();
				//获得系统年份;
				var year = dateTime.getFullYear();
				//获得系统月份;
				var month = dateTime.getMonth() + 1;
				//获得系统当月分天数;
				var day = dateTime.getDate();
				//获得系统小时;
				var hours = dateTime.getHours();
				//获得系统分钟;
				var minutes = dateTime.getMinutes();
				//获得系统秒数;
				var second = dateTime.getSeconds();
				//获得系统星期几;
				var dayCycle = dateTime.getDay();
				//使用数组更改日期样式;
				var dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
				for (var i = 0; i < 7; i++) {
					if (dayCycle == i) {
						//将dayCycleArray的数赋值到系统星期几里面中去;
						dayCycle = dayCycleArray[i];
					}
				}
				month < 10 ? month = '0' + month : month;
				day < 10 ? day = '0' + day : day;
				hours < 10 ? hours = '0' + hours : hours;
				minutes < 10 ? minutes = '0' + minutes : minutes;
				second < 10 ? second = '0' + second : second;
				//打印完整的系统日期;
				// this.dateStr = year + '-' + month + '-' + day + ' ';
				this.currentTime = '星期' + dayCycle
				// this.time = hours + ':' + minutes + ':' + second

			},
			/* getlist() {
				let data = {
					rescueStatus: 1,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				request({
					url: '/app/rescueInfo/getRescueList',
					method: 'get',
					params: data
				}).then((res) => {
					console.log('首页', res);
					if (res.code == 200) {
						if (this.pageNum != 1) {
							this.orderList = this.orderList.concat(res.rows)
						} else {
							this.orderList = res.rows
						}
						let total = res.total
						this.totalPages = Math.ceil(total / this.pageSize);
					}

				})
			}, */
			getlist() {
				return new Promise((resolve, reject) => {
					this.loading = true;
					let data = {
						rescueStatus: 1,
						pageSize: this.pageSize,
						pageNum: this.pageNum,
					}
					request({
						url: '/app/rescueInfo/getRescueList',
						method: 'get',
						params: data
					}).then((res) => {
						console.log('首页', res);
						if (res.code == 200) {
							if (this.pageNum != 1) {
								this.orderList = this.orderList.concat(res.rows)
							} else {
								this.orderList = res.rows
							}
							let total = res.total
							this.totalPages = Math.ceil(total / this.pageSize);
						}
						resolve(); // 请求完成
					}).catch(error => {
						console.error('获取列表失败', error);
						reject(error);
					}).finally(() => {
						this.loading = false;
					})
				});
			},

			// 更新时间
			/* updateDateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				this.currentDateTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
			}, */
			updateDateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				this.currentDate = `${year}年${month}月${day}日`;
				this.currentTime = `${hours}:${minutes}:${seconds}`;
				this.currentDateTime = `${this.currentDate} ${this.currentTime}`;
			},

			maskClick(e) {
				console.log('maskClick事件:', e);
			},

			tabChoose(item, index) {
				this.tabValue = index + 1
				if (1 == this.tabValue) {
					this.timeType = "day"
				} else if (2 == this.tabValue) {
					this.timeType = "month"
				} else if (3 == this.tabValue) {
					this.timeType = "all"
				} else if (4 == this.tabValue) {
					this.timeType = "more"
					this.range = []
				}
				if (4 == this.tabValue) {
					if (this.range.length > 0) {
						this.startTimeStr = this.range[0]
						this.endTimeStr = this.range[1]
						this.Fourhammers()
					}
				} else {
					this.Fourhammers()
				}
			},

			filterPosition() {
				if (this.roleList && this.roleList.length > 0) {
					console.log('roleList', this.roleList)
					// 筛选servicePackageId为"jiuyuan"的角色
					const filteredRoles = this.roleList.filter(role =>
						role.servicePackageId === 'jiuyuan'
					);

					// 按id正序排序
					filteredRoles.sort((a, b) => a.id - b.id);

					// 取第一个
					if (filteredRoles.length > 0) {
						this.positionName = filteredRoles[0].name;
					} else {
						this.positionName = ''; // 设置为空，不显示
					}
				} else {
					this.positionName = ''; // 设置为空，不显示
				}
			},

			getone() {
				this.one = !this.one
			},
			//一键救援
			getyi() {
				uni.navigateTo({
					url: '/pages/rescue/order'
				})
			},
			goisAppointment() {
				uni.navigateTo({
					url: '/pages/rescue/order?isAppointment=1'
				})
			},
			getsx() {
				uni.navigateTo({
					url: '/pages/Detain/Detain'
				})
			},
			//预约
			getyue() {
				uni.navigateTo({
					url: '/pages/rescue/order'
				})
			},
			godetail(id) {
				uni.navigateTo({
					url: '/pages/details/details?id=' + id
				})
			},
			gohistory() {
				uni.navigateTo({
					url: '/pages/rescue/historylist?id=1'
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F7F8FC;

	}

	.dil {
		// background-color: #F7F8FC;
		background-color: #f3f5fc;
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.content-top {
		padding: 90rpx 40rpx 0;
		// background-color: #327DFB;
		background: linear-gradient(to bottom, #2a3eff 40%, #1863fd 100%);
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
	}

	.top-two {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.top-left {
		height: 58rpx;
		box-sizing: border-box;
		// border-radius: 50px;
		// background-color: #D1EDFF;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
	}

	.left1 {
		width: 112rpx;
		height: 58rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 200rpx 0rpx 0rpx 200rpx;
		font-size: 26rpx;
		color: white;
		font-weight: 400;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left2 {
		width: 146rpx;
		height: 58rpx;
		background: #FFFFFF;
		border-radius: 0rpx 29rpx 29rpx 0rpx;
		font-size: 26rpx;
		color: #207EFE;
		font-weight: 400;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-right {
		display: flex;
		align-items: center;
		font-size: 34rpx;
		font-weight: 400;
		color: #fff;
		line-height: 1;

		.top-right-icon {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.top-menu {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0rpx 36rpx;
	}

	.top-menu-item {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: 12rpx;
		font-size: 28rpx;
	}

	.top-menu-item-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.four-box-header {
		display: flex;
		justify-content: start;
		align-items: center;
		padding: 20rpx 0 10rpx 0;
	}

	.four-box-header_2 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.four-box-header_2_right {
		width: 60%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 0;

		.tab-item {
			font-size: 28rpx;
			font-weight: normal;
			color: #a1a6aa;
			position: relative;
			padding: 0rpx 20rpx;
			cursor: pointer;
			transition: all 0.3s ease;

			&.active {
				font-weight: bold;
				color: #000000;

				&::after {
					content: '';
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 33.33%;
					height: 6rpx;
					background: linear-gradient(90deg, #054DF3 0%, #55A3FF 100%);
					border-radius: 3rpx 3rpx 0 0;
				}
			}
		}
	}

	.four-box-header-title {
		font-weight: bold;
	}

	.four-box-header-extra {
		font-size: 24rpx;
	}

	.four-box {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 24rpx;
		// margin-top: 15px;
		width: 100%;
		margin-bottom: 20rpx;
	}

	/* .two-box {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24rpx;
		// margin-top: 15px;
		width: 100%;
	} */
	.two-box-container {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		width: 100%;
	}

	.two-box {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 18rpx;
		width: 100%;
	}



	.ques {
		width: 100%;
		margin: 60rpx auto;

		image {
			width: 100%;
		}
	}

	.boxf {
		height: 130rpx;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		// background-image: url('~@/static/images/homeOrderCard/dzf.png');
		// background: rgba(218, 218, 218, 0.2);
		background-color: #fdfeff;
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		// 边框
		border: 1px solid #badeff;
		// 阴影
		box-shadow: inset 0 2px 8px rgba(186, 222, 255, 0.3);


		/* border: 1px solid rgba(186, 222, 255, 0.6);
		box-shadow:
			// 内阴影（顶部微亮）
			inset 0 2px 4px rgba(255, 255, 255, 0.4),
			// 内阴影（底部微暗）
			inset 0 -2px 4px rgba(186, 222, 255, 0.4),
			// 外阴影：更轻，更小
			0 2px 6px rgba(186, 222, 255, 0.3);

		backdrop-filter: blur(10px); */
	}

	.boxf1 {
		height: 140rpx;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		// background-image: url('~@/static/images/homeOrderCard/dqc.png');
		background: rgba(218, 218, 218, 0.2);
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.boxf2 {
		height: 120rpx;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 2px 12px 2px 12px;
		// padding: 8px;
		// background-image: url('~@/static/images/homeOrderCard/jyz.png');
		background: rgba(218, 218, 218, 0.2);
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.boxf3 {
		height: 140rpx;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		// background-image: url('~@/static/images/homeOrderCard/ywc.png');
		background: rgba(218, 218, 218, 0.2);
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.zi1 {
		font-size: 24rpx;
		color: #333;
		display: flex;
		align-items: center;
		column-gap: 10rpx;

		.zi1-icon {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.zi1_1 {
		font-size: 24rpx;
		color: #333;
		display: flex;
		align-items: center;
		column-gap: 10rpx;

		.zi1_1-icon {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.zi2 {
		width: 100%;
		font-size: 40rpx;
		font-weight: bold;
		color: #000;
	}

	.zi2_2 {
		width: 100%;
		font-size: 30rpx;
		font-weight: bold;
		color: #000;
	}

	.box-tap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 25px;
	}

	.tap-left {
		display: flex;

	}

	.tap-right {
		display: flex;
		align-items: center;
	}

	.zi3 {
		font-size: 14px;
		font-weight: 400;
		color: #666666;
	}

	.left-img1 {
		width: 65px;
		height: 15px;
		margin-right: 20px;

		// smargin-bottom: 10px;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.gang {
		width: 60px;
		height: 5px;
		border-radius: 50px;
		margin-top: 6px;
		background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
	}

	.tap-box {}

	.boxt {
		// height: 110px;
		width: 100%;
		background-color: white;
		border-radius: 6px;
		margin-top: 14px;
		overflow: hidden;
		display: flex;
		box-sizing: border-box;
		padding-bottom: 15px;
	}

	.boxt-left {
		width: 100%;
		height: 100%;
	}

	.left-lan {
		width: 50px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #207EFE;
		font-size: 14px;
		color: white;
		border-radius: 0px 0px 6px 0px;
	}

	.text1 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.lanzi {
		font-weight: bold;
		color: #4C98FF;
	}

	.text2 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.boxt-right {
		width: 50%;
		height: 100%;
		position: relative;
	}

	.zhtai {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #FFD7D7;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FF4C4C;
		font-size: 14px;

	}

	.zhtait {
		position: absolute;
		top: 50px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #d5e8ff;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #53b5ff;
		font-size: 14px;

	}

	.dianhua {
		position: absolute;
		bottom: -120px;
		right: 10px;
		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #3289FF;

	}

	.dianhuad {

		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #ff1d3b;


	}

	.ticon {


		width: 12px;
		height: 13px;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yijian {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10px;
		height: 40px;
		font-size: 16px;
		background: #327DFB;
		color: #fff;
		margin-top: 30rpx;
	}

	.y-left {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		background: #327DFB;
	}

	.y-right {
		width: 30%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.kou {
		position: fixed;
		right: 5px;
		bottom: 80px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		z-index: 99;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	// .xz-box {
	// 	height: 80px;
	// 	width: 48%;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	font-size: 16px;
	// 	font-weight: 400;
	// 	color: #FFFFFF;
	// 	background-size: cover;
	// 	background-position: center;
	// 	margin-top: 20px;

	// }
	.xz-box {
		width: 330rpx;
		height: 396rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 36rpx;
		transition: all ease 400ms;
		overflow: hidden;

		.checkedFlagIcon {
			display: none;
		}

		&.checked {
			box-sizing: border-box;
			position: relative;
			border: 2rpx solid #478AFA;

			.checkedFlag {
				background-color: #478AFA;
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				right: -60rpx;
				bottom: -60rpx;
				transform: rotate(45deg);
				z-index: 1;
			}

			.checkedFlagIcon {
				display: inline-block;
				position: absolute;
				z-index: 2;
				bottom: 0;
				right: 0;
			}
		}

		.xz-box-icon {
			width: 130rpx;
			height: 130rpx;
			margin-bottom: 26rpx;
		}

		.box-wenzi {
			font-size: 28rpx;
			color: #000000;
		}
	}

	#y1 {
		background-image: url('../../static/tc.png');
	}

	#y2 {
		background-image: url('../../static/sy.png');
	}

	#y3 {
		background-image: url('../../static/dd.png');
	}

	#y4 {
		background-image: url('../../static/ht.png');
	}

	#y5 {
		background-image: url('../../static/kc.png');
	}

	.box_ {
		width: 320px;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		background: white;
	}

	.title_ {
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
		font-size: 17px;
		font-weight: bold;
	}

	.size_ {
		font-size: 16px;
		color: #666;
		margin: 5px 0px;
		text-align: center;
	}

	.annaiu {
		width: 100%;
		height: 60px;
		border-top: 1px solid #f3f3f3;
		box-sizing: border-box;
		padding-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #244ec6;
	}

	.user-info {
		display: flex;
		flex-direction: column;

		.user-name {
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
			line-height: 1.2;
		}

		.user-position {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.2;
		}
	}

	/* .real-time {
		font-size: 28rpx;
		color: #fff;
		background: rgba(255, 255, 255, 0.2);
		padding: 8rpx 16rpx;
		border-radius: 40rpx;
	} */
	.real-time {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #fff;
		background: rgba(255, 255, 255, 0.2);
		// background-color: #7d91ff;
		// padding: 8rpx 0;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.date-part {
		padding: 14rpx 16rpx;
	}

	.time-part {
		padding: 14rpx 20rpx 14rpx 12rpx;
		background: #fff;
		color: #327DFB;
		border-radius: 0 40rpx 40rpx 0;
	}


	.tab-choose-class {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 4rpx 20rpx 16rpx 20rpx;
		border-top: 1rpx solid #F5F5F5;

		.tab-content {
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.tab-name-class {
				display: flex;
				align-items: center;

				.icon-tab {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 32rpx;
					height: 32rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.tab-icon {
			width: 66rpx;
			height: 8rpx;
			margin-top: 8rpx;
		}
	}

	.eye-icon {
		transform: scale(1.5);
		padding: 10rpx;
		color: #929292;
	}

	.blue-line {
		width: 8rpx;
		height: 32rpx;
		background: #054DF3;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.bqing_ {
		border-radius: 16rpx;
		border: 3rpx solid #FFFFFF;
		box-sizing: border-box;
		color: #FFFFFF;
		font-size: 24rpx;

		padding: 3px 5px;
		margin-top: 5px;
	}

	// 添加logo样式
	.user-name-container {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.logo-icon {
		width: 120rpx;
		height: 100rpx;
		border-radius: 20%;
		margin-right: 20rpx;
	}

	// 悬浮刷新按钮
	.floating-refresh-btn {
		position: fixed;
		right: 30rpx;
		bottom: 180rpx; // 位于底部导航栏上方
		width: 100rpx;
		height: 100rpx;
		background-color: rgba(50, 125, 251, 0.7); // 半透明蓝色
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		// box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
		z-index: 999;
		transition: transform 0.3s, background-color 0.3s;

		// 点击效果
		&:active {
			background-color: rgba(50, 125, 251, 0.9);
			transform: scale(0.95);
		}

		// 旋转动画
		&.rotating {
			animation: rotate 1s linear infinite;
		}
	}

	// 旋转动画关键帧
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}


	.loading-container {
		/* position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.9); */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.loading-spinner {
		position: relative;
		width: 60px;
		height: 60px;
		border: 4px solid #f3f3f3;
		border-top: 4px solid #327DFB;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loading-text {
		font-size: 16px;
		color: #666;
	}

	.loading-icon {
		width: 35px;
		height: 35px;
		position: absolute;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>