1782 lines
40 KiB
Vue
1782 lines
40 KiB
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" @update:activeTab="activeTab = $event"></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, // 新增：当前选中的选项卡索引
|
||
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',
|
||
// path: '/pages/rescue/historylist',
|
||
path: '/pages/rescue/businessManage',
|
||
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>
|