1011 lines
23 KiB
Vue
1011 lines
23 KiB
Vue
<template>
|
|
<view>
|
|
<view class="loading-container" v-if="loading && !detailsinfo">
|
|
<view class="loading-spinner">
|
|
<image class="loading-icon" src="@/static/detailsLoading2.png" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="loading-text">加载中，请稍候...</text>
|
|
</view>
|
|
|
|
<!-- 固定头部 -->
|
|
<view class="c-top" v-if="detailsinfo">
|
|
<view class="" @click="getback()">
|
|
<uni-icons type="left" size="18" style="color: #fff;"></uni-icons>
|
|
</view>
|
|
<view class="c-title">调度流程</view>
|
|
<view class=""></view>
|
|
</view>
|
|
|
|
<!-- 内容滚动区域 -->
|
|
<view class="container" v-if="detailsinfo">
|
|
<view class="content-scroll">
|
|
<view class="mubu">
|
|
<view class="zzhui">
|
|
<view class="c-box" style="margin-bottom: 20rpx;"
|
|
v-if="detailsinfo.rescueInfo.rescueStatus == 1">
|
|
<view class="box-title">调度现场查勘，救援未开始</view>
|
|
</view>
|
|
<view class="c-box" style="margin-bottom: 20rpx;"
|
|
v-if="detailsinfo.rescueInfo.rescueStatus == 2">
|
|
<view class="box-title">订单处于待开始，请耐心等待</view>
|
|
</view>
|
|
<view class="c-box" style="margin-bottom: 20rpx;">
|
|
<!-- <view class="box-title_driver">
|
|
<text style="margin-bottom: 14rpx;">调度姓名:
|
|
<text
|
|
style="margin-left: 20rpx;">{{detailsinfo.rescueInfo.secondDispatchName || '暂无数据'}}</text></text>
|
|
<text style="margin-bottom: 14rpx;">调度手机号: <text
|
|
style="margin-left: 20rpx;">{{detailsinfo.rescueInfo.secondDispatchPhone}}</text></text>
|
|
<text>是否出发现场: <text
|
|
style="margin-left: 20rpx;">{{detailsinfo.rescueInfo.isDispatchedToScene != null ? (detailsinfo.rescueInfo.isDispatchedToScene == 1 ? '是' : '否') : '暂无数据'}}</text></text>
|
|
</view> -->
|
|
|
|
<view class="box-title_driver">
|
|
<view class="infoRow">
|
|
<text class="infoLabel">开始时间:</text>
|
|
<text class="infoValue">{{ formatTimestamp(detailsinfo.rescueInfo.rescueStartTime) || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">完成时间:</text>
|
|
<text class="infoValue">{{ formatTimestamp(detailsinfo.rescueInfo.rescueEndTime) || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">调度：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.secondDispatchName || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">司机：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.driverName || '暂无数据' }}</text>
|
|
</view>
|
|
|
|
<view class="infoRow">
|
|
<text class="infoLabel">救援车辆：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.driverCarNum || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">渠道：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.channel || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">来源：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.source || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">救援类型：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.rescueTypeStr || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">客户姓名：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.connectionName || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">客户电话：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.connectionPhone || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">客户车牌号：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.licenseNum || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">救援状态：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.rescueStatusStr || '暂无数据' }}</text>
|
|
</view>
|
|
<view class="infoRow">
|
|
<text class="infoLabel">财务状态：</text>
|
|
<text class="infoValue">{{ detailsinfo.rescueInfo.orderStatusStr || '暂无数据' }}</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="cont-bs"
|
|
v-if="detailsinfo.setMoney == '' && detailsinfo.rescueInfo.rescueType != '8'">
|
|
<view class="dix">
|
|
<!-- <text>订单金额: </text> -->
|
|
<text style="color: #FF522A;">订单金额等待核算中......</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<view v-if="detailsinfo.detail && detailsinfo.detail.length > 0" class="c-box">
|
|
<view class="lan-ga" v-for="(item,index) in detailsinfo.detail" :key="index">
|
|
<view class="ga-top-box">
|
|
<view class="gain">
|
|
<image class="gainIcon" src="@/static/icons/currentDetails.png"
|
|
mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
<view class="ga-content">
|
|
<view class="ga-content-top">
|
|
<view class="ga-content-title">{{item.title}}</view>
|
|
<view class="xhui">
|
|
{{item.createTime}}
|
|
</view>
|
|
</view>
|
|
<view class=" beizh"
|
|
v-if="(item.type == 1 || !item.title.includes('现场查勘')) && item.remark && item.remark != null && item.remark != '' ">
|
|
备注：{{item.remark}}
|
|
</view>
|
|
<view class="beizh-auto">
|
|
{{item.autoRemark && item.autoRemark.replace(/, /g, '\n')}}
|
|
</view>
|
|
<view class="wrap-box_bc" v-if="item.images">
|
|
<text style="font-size: 28rpx; font-weight: bold;">照片:</text>
|
|
<view style="display: flex; flex-direction: row;">
|
|
<view class="img-box" v-for="(items,index) in item.images.split(',') "
|
|
:key="index" @click="previewImage(items, 'images')">
|
|
<image :src="baseImageUrl + items " mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="wrap-box_bc" v-if="item.supplementImages">
|
|
<text style="font-size: 28rpx; font-weight: bold;">补充照片</text>
|
|
<view style="display: flex; flex-direction: row;">
|
|
<view class="img-box"
|
|
v-for="(items,index) in item.supplementImages.split(',') "
|
|
:key="index" @click="previewImage(items, 'supplement')">
|
|
<image :src="baseImageUrl + items " mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="index < detailsinfo.detail.length - 1" class="lan-ga-line"></view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="ques">
|
|
<image src="../../static/quesheng.png" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
count: 5,
|
|
value: 2,
|
|
ggindex: '',
|
|
value5: '',
|
|
id: 0,
|
|
page: 1,
|
|
num: 8,
|
|
arrlist: [],
|
|
arr: [],
|
|
latitude: 36.858810, //纬度
|
|
longitude: 117.749930, //经度
|
|
scale: 13, //缩放级别
|
|
compass: true,
|
|
marker: [],
|
|
urlList: [],
|
|
baseImageUrl: this.$baseImageUrlNew,
|
|
detailsinfo: null,
|
|
timerId: null,
|
|
currentIndicator: 'none',
|
|
isLoop: true,
|
|
detailTestList: [{
|
|
title: '发起救援',
|
|
createTime: '2024-12-12 00:00:00',
|
|
remark: '救援发起'
|
|
},
|
|
{
|
|
title: '正在救援',
|
|
createTime: '2024-12-12 00:00:00',
|
|
remark: '司机正在赶来的路上'
|
|
},
|
|
{
|
|
title: '费用核算',
|
|
createTime: '2024-12-12 00:00:00',
|
|
remark: '司机核算救援费用为1500元'
|
|
},
|
|
],
|
|
loading: true, // 加载状态控制
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
console.log('option', option)
|
|
this.id = option.id
|
|
this.getmapdetails()
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.timerId = setInterval(() => {
|
|
this.getmapdetails()
|
|
console.log('123');
|
|
}, 10000);
|
|
},
|
|
beforeDestroy() {
|
|
if (this.timerId) {
|
|
clearInterval(this.timerId)
|
|
this.timerId = null
|
|
}
|
|
},
|
|
onHide() {
|
|
this.destroyTimer();
|
|
},
|
|
components: {
|
|
|
|
},
|
|
onShareAppMessage(res) {
|
|
return utils.sendFriend()
|
|
},
|
|
onShareTimeline(res) {
|
|
return utils.sendCircle()
|
|
},
|
|
methods: {
|
|
/* previewImage(url) {
|
|
this.urlList = this.detailsinfo.detail
|
|
.filter(item => item.images)
|
|
.flatMap(item =>
|
|
item.images.split(',').map(img => this.baseImageUrl + img)
|
|
);
|
|
const currentUrl = this.baseImageUrl + url;
|
|
const currentIndex = this.urlList.indexOf(currentUrl);
|
|
|
|
uni.previewImage({
|
|
urls: this.urlList,
|
|
current: currentIndex >= 0 ? currentIndex : 0,
|
|
indicator: this.currentIndicator,
|
|
loop: this.isLoop
|
|
})
|
|
}, */
|
|
// 格式化时间戳
|
|
formatTimestamp(timestamp) {
|
|
if (!timestamp) return null;
|
|
|
|
const date = new Date(timestamp);
|
|
const year = date.getFullYear();
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
const day = date.getDate().toString().padStart(2, '0');
|
|
const hours = date.getHours().toString().padStart(2, '0');
|
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
|
},
|
|
previewImage(url, type = 'images') {
|
|
// 预先生成完整的图片列表（包含现场照片和补充照片）
|
|
this.generateImageList();
|
|
|
|
const currentUrl = this.baseImageUrl + url;
|
|
const currentIndex = this.urlList.indexOf(currentUrl);
|
|
|
|
uni.previewImage({
|
|
urls: this.urlList,
|
|
current: currentIndex >= 0 ? currentIndex : 0,
|
|
indicator: this.currentIndicator,
|
|
loop: this.isLoop
|
|
})
|
|
},
|
|
// 生成完整的图片列表
|
|
generateImageList() {
|
|
if (!this.detailsinfo?.detail) return;
|
|
|
|
this.urlList = this.detailsinfo.detail.reduce((acc, item) => {
|
|
// 处理现场照片
|
|
if (item.images) {
|
|
const images = item.images.split(',')
|
|
.filter(img => img && img.trim() !== '')
|
|
.map(img => this.baseImageUrl + img.trim());
|
|
acc.push(...images);
|
|
}
|
|
|
|
// 处理补充照片
|
|
if (item.supplementImages) {
|
|
const supplementImages = item.supplementImages.split(',')
|
|
.filter(img => img && img.trim() !== '')
|
|
.map(img => this.baseImageUrl + img.trim());
|
|
acc.push(...supplementImages);
|
|
}
|
|
|
|
return acc;
|
|
}, []);
|
|
|
|
// 去重（可选，根据实际需求）
|
|
// this.urlList = [...new Set(this.urlList)];
|
|
|
|
// console.log('生成的图片列表:', this.urlList);
|
|
},
|
|
destroyTimer() {
|
|
clearInterval(this.timerId);
|
|
this.timerId = null;
|
|
},
|
|
gettel(num) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: num //仅为示例
|
|
});
|
|
},
|
|
getback() {
|
|
|
|
clearInterval(this.timerId);
|
|
this.timerId = null;
|
|
uni.navigateBack()
|
|
|
|
},
|
|
zhankai() {
|
|
this.num = 999
|
|
this.getmap()
|
|
},
|
|
async getmapdetails() {
|
|
try {
|
|
this.loading = true;
|
|
const res = await request({
|
|
url: '/app/rescueInfo/rescueInfoDetailByDispatch?rescueId=' + this.id,
|
|
method: 'get',
|
|
});
|
|
console.log('返回信息', res);
|
|
this.detailsinfo = res.data
|
|
// 数据加载完成后生成图片列表
|
|
this.generateImageList();
|
|
this.value5 = res.data.rescueInfo.commentDesc
|
|
this.value = res.data.rescueInfo.commentStar
|
|
let arrcopy = [];
|
|
let obj = {}
|
|
obj.id = res.data.rescueInfo.id
|
|
obj.latitude = res.data.rescueInfo.rescueLatitude
|
|
obj.longitude = res.data.rescueInfo.rescueLongitude
|
|
obj.iconPath = 'http://www.nuoyunr.com/lananRsc/rescue/recueIcon.png'
|
|
obj.rotate = 0
|
|
obj.width = 25
|
|
obj.height = 40
|
|
obj.alpha = 1
|
|
let callout = {}
|
|
callout.content = ''
|
|
callout.color = '#ffffff'
|
|
callout.fontSize = 0
|
|
callout.borderRadius = 0
|
|
callout.borderWidth = '0'
|
|
callout.bgColor = 'transparent'
|
|
callout.display = 'ALWAYS'
|
|
// console.log(obj);
|
|
obj.callout = callout
|
|
arrcopy.push(obj)
|
|
if (this.detailsinfo.driverInfo) {
|
|
let driverPosition = {}
|
|
driverPosition.id = res.data.driverInfo.id
|
|
driverPosition.latitude = res.data.driverInfo.driverLatitude
|
|
driverPosition.longitude = res.data.driverInfo.driverLongitude
|
|
driverPosition.iconPath = 'http://www.nuoyunr.com/lananRsc/rescue/car3.png'
|
|
driverPosition.rotate = 0
|
|
driverPosition.width = 25
|
|
driverPosition.height = 40
|
|
driverPosition.alpha = 1
|
|
driverPosition.callout = callout
|
|
arrcopy.push(driverPosition)
|
|
}
|
|
this.marker = arrcopy;
|
|
if (this.detailsinfo.detail && this.detailsinfo.detail.length > 0) {
|
|
function timestampToDateString(timestamp) {
|
|
const date = new Date(timestamp); // 将时间戳转换为Date对象
|
|
const year = date.getFullYear(); // 获取年份
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并补零
|
|
const day = date.getDate().toString().padStart(2, '0'); // 获取日期并补零
|
|
const hours = date.getHours().toString().padStart(2, '0');
|
|
const mm = date.getMinutes().toString().padStart(2, '0');
|
|
const ss = date.getSeconds().toString().padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${mm}:${ss}`; // 拼接字符串日期
|
|
}
|
|
this.detailsinfo.detail.forEach(item => {
|
|
item.createTime = timestampToDateString(item.createTime)
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('获取数据失败', error);
|
|
uni.showToast({
|
|
title: '数据加载失败',
|
|
icon: 'none'
|
|
});
|
|
} finally {
|
|
this.loading = false; // 无论成功失败都关闭加载动画
|
|
}
|
|
},
|
|
|
|
async pinglun() {
|
|
let data = {
|
|
rescueId: this.detailsinfo.rescueInfo.id,
|
|
starLevel: this.value,
|
|
reviewStr: this.value5
|
|
}
|
|
const res = await request({
|
|
url: '/rescuePayApi/reviewOrder',
|
|
method: 'post',
|
|
params: data
|
|
})
|
|
console.log(res);
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '提交成功'
|
|
})
|
|
}
|
|
|
|
},
|
|
shou() {
|
|
this.num = 8
|
|
this.getmap()
|
|
},
|
|
async getlist(id) {
|
|
this.ggindex = id
|
|
const res = await request({
|
|
url: 'GetMapList',
|
|
data: {
|
|
id: id,
|
|
page: 1,
|
|
num: 9999
|
|
}
|
|
})
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
})
|
|
let arrlist = res.data
|
|
this.arrlist = arrlist
|
|
},
|
|
|
|
godetails(id) {
|
|
uni.navigateTo({
|
|
url: "/pages/map/mapDetails?id=" + id
|
|
})
|
|
},
|
|
// 点击标记点时触发
|
|
markertap(e) {
|
|
console.log('点击标记点时触发', e)
|
|
},
|
|
// 点击标记点对应的气泡时触发，
|
|
callouttap(e) {
|
|
console.log('点击标记点对应的气泡时触发', e)
|
|
},
|
|
// 点击地图时触发
|
|
tap(e) {
|
|
console.log('点击地图时触发', e)
|
|
}
|
|
},
|
|
|
|
onUnload() {
|
|
clearInterval(this.timerId);
|
|
this.timerId = null;
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
box-sizing: border-box;
|
|
padding-bottom: 40rpx;
|
|
background: #f6f6f6;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content-scroll {
|
|
height: calc(100vh - 88px);
|
|
overflow-y: auto;
|
|
padding-top: 88px;
|
|
/* 头部高度 */
|
|
}
|
|
|
|
.c-top {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
height: 88px;
|
|
padding-top: 28px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #317DFA;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.c-title {
|
|
font-size: 18px;
|
|
// font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.c-box {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
background: white;
|
|
position: relative;
|
|
}
|
|
|
|
.cont-bs {
|
|
width: 95%;
|
|
margin: 10px auto;
|
|
box-sizing: border-box;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
background: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.box-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.box-title_driver {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.box-dtitle {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mubu {
|
|
width: 100%;
|
|
background: #f6f6f6;
|
|
box-sizing: border-box;
|
|
padding-top: 15px;
|
|
min-height: calc(100% - 88px);
|
|
}
|
|
|
|
.zzhui {
|
|
width: 100%;
|
|
padding-bottom: 20rpx;
|
|
background: #f6f6f6;
|
|
}
|
|
|
|
.lanniu {
|
|
width: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
padding: 5px 10px;
|
|
color: white;
|
|
background: #2D81FF;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.anniua {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #327DFB;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
color: white;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.dix {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 6px;
|
|
}
|
|
|
|
.hezi-ga {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.box-top {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.bt-box {
|
|
width: 25%;
|
|
margin-top: 30rpx;
|
|
|
|
.bt-img {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.zi {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
}
|
|
|
|
// 蓝杠
|
|
|
|
}
|
|
|
|
.zi {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.box-bs {
|
|
width: 100%;
|
|
}
|
|
|
|
.orderCardStatusData {
|
|
margin: 32rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
column-gap: 4rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.orderCardDistanceIcon,
|
|
.orderCardPredictIcon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
.orderCardDistanceValue {
|
|
color: #919191;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.orderCardPredictDate {
|
|
color: #317DFA;
|
|
}
|
|
|
|
.bs-lsft {
|
|
margin: 32rpx 0;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
line-height: 1;
|
|
}
|
|
|
|
.box-bs-footer {
|
|
margin: 32rpx 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
column-gap: 24rpx;
|
|
|
|
.box-bs-footer-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
&>.cancelOrderBtn {
|
|
width: 160rpx;
|
|
height: 52rpx;
|
|
border-radius: 24rpx;
|
|
border: 2rpx solid #327DFB;
|
|
color: #327DFB;
|
|
}
|
|
|
|
&>.callDriverBtn {
|
|
width: 160rpx;
|
|
height: 52rpx;
|
|
background: #327DFB;
|
|
border-radius: 24rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.touxiang {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 40%;
|
|
transform: translateY(-50%);
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
background: #B9B9B9;
|
|
border: 2px solid #fff;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
box-shadow: 0rpx 0rpx 8rpx 4rpx rgba(0, 0, 0, 0.2);
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.bot-di {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 24rpx;
|
|
color: #5BA8FF;
|
|
margin: 0rpx auto;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.dz-box {
|
|
margin: 0 auto;
|
|
width: 95%;
|
|
height: 220rpx;
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
box-sizing: border-box;
|
|
padding: 30rpx 0px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.dz-left {
|
|
width: 256rpx;
|
|
height: 160rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
margin-right: 20rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.dz-right {
|
|
width: 55%;
|
|
}
|
|
|
|
.dz-title {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.dz-hui {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
display: flex;
|
|
margin-top: 20rpx;
|
|
// display: -webkit-box;
|
|
// overflow: hidden;
|
|
// text-overflow: ellipsis;
|
|
// -webkit-line-clamp: 1;
|
|
// -webkit-box-orient: vertical;
|
|
}
|
|
|
|
.slue {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.sy {
|
|
color: #5BA8FF !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.lan-ga {
|
|
width: 100%;
|
|
margin: 20rpx auto;
|
|
box-sizing: border-box;
|
|
padding-bottom: 40rpx;
|
|
position: relative;
|
|
|
|
.lan-ga-line {
|
|
position: absolute;
|
|
width: 2rpx;
|
|
height: calc(100% - 56rpx);
|
|
background-color: #979797;
|
|
left: calc(56rpx / 2 - 2rpx);
|
|
transform: translate(-50%, 0);
|
|
top: calc(56rpx + 10rpx);
|
|
}
|
|
}
|
|
|
|
.ga-top-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ga-content {
|
|
flex: 1;
|
|
width: 0;
|
|
|
|
.ga-content-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
column-gap: 8rpx;
|
|
padding-bottom: 14rpx;
|
|
}
|
|
|
|
.ga-content-title {
|
|
font-weight: bold;
|
|
flex: 1;
|
|
width: 0;
|
|
word-break: break-all
|
|
}
|
|
|
|
.xhui {
|
|
font-size: 22rpx;
|
|
color: #929292;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.beizh {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
/* .beizh-auto {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
} */
|
|
.beizh-auto {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
white-space: pre-line;
|
|
line-height: 1.5;
|
|
/* 增加行高提高可读性 */
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
.ga-top {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.img-box {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.wrap-box {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.wrap-box_bc {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.gain {
|
|
box-sizing: border-box;
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
font-size: 34rpx;
|
|
color: #327DFB;
|
|
margin-right: 20rpx;
|
|
border: 2rpx solid #327DFB;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
|
|
.gainIcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/* 新增加载动画样式 */
|
|
.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;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.loading-spinner::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #327DFB;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.loading-icon {
|
|
position: absolute;
|
|
top: 55%;
|
|
left: 55%;
|
|
transform: translate(-50%, -50%);
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 16px;
|
|
color: #666;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.ques {
|
|
width: 100%;
|
|
margin: 200rpx auto;
|
|
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style> |