lanan-old/rescue-user/pages/details/details.vue

618 lines
13 KiB
Vue
Raw Normal View History

2024-07-17 14:16:22 +08:00
<template>
<view class="container" v-if="detailsinfo">
<view class="c-top">
<view class="" @click="getback()">
<uni-icons type="left" size="18"></uni-icons>
</view>
<view class="c-title">救援详情</view>
<view class=""></view>
</view>
<view class="" v-if="!detailsinfo.driverInfo">
<map style="width: 100%;height: 250px;" :layer-style='5' :latitude="detailsinfo.rescueInfo.rescueLatitude"
:longitude="detailsinfo.rescueInfo.rescueLongitude" :markers="marker" :scale="scale"
@markertap="markertap" @callouttap='callouttap' @tap="tap">
</map>
</view>
<view class="" v-if="detailsinfo.driverInfo">
<map style="width: 100%;height: 250px;" :layer-style='5' :latitude="detailsinfo.driverInfo.driverLatitude"
:longitude="detailsinfo.driverInfo.driverLongitude" :markers="marker" :scale="scale"
@markertap="markertap" @callouttap='callouttap' @tap="tap">
</map>
</view>
<view class="mubu">
<view class="zzhui">
<view class="c-box">
<view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 1">您的订单还未开始请耐心等待</view>
<view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 2">您的订单处于待开始请耐心等待</view>
<view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 3">救援人员仍在赶来的路上请耐心等待</view>
<view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 5">您的订单已经完成</view>
<view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 6">待取车</view>
<view class="box-title" v-if="detailsinfo.rescueInfo.rescueStatus == 7">您的订单已取消</view>
<view class="box-bs" v-if="detailsinfo.driverInfo != '' ">
<view class="bs-lsft">
<view class="box-dtitle">{{detailsinfo.rescueInfo.licenseNum || ''}} </view>
<view class="dix" style="margin-top: 15px; font-size: 12px;">
<text style="margin-right: 10px;">{{detailsinfo.driverInfo.realName || '司机'}}</text>
<view style="margin-right: 10px;">
<uni-icons type="star-filled" color="#FFA632" size="12"></uni-icons>
<text>{{detailsinfo.driverInfo.avgScore || 0}}</text>
</view>
<text>{{detailsinfo.driverInfo.rescueNum || 0}}次救援</text>
</view>
</view>
<view class="touxiang">
<image :src=" baseUrl + avatar " mode=""></image>
</view>
</view>
<view class="lanniu" v-if="detailsinfo.driverInfo != '' "
@click="gettel(detailsinfo.driverInfo.phonenumber)">
<uni-icons type="phone-filled" color="#ffffff" size="16"></uni-icons>
<text>拨打电话</text>
</view>
</view>
<view class="cont-bs" v-if="detailsinfo.setMoney != '' ">
<view class="dix">
<text>订单金额: </text>
<text style="color: #FF522A;">{{detailsinfo.setMoney / 100}}</text>
</view>
<view class="dix">
<uni-icons type="right" size="16"></uni-icons>
</view>
</view>
<view class="c-box" style="margin-bottom: 15px;"
v-if="detailsinfo.rescueInfo.orderStatus == 3 ||detailsinfo.rescueInfo.orderStatus == 2 ">
<view class="">评价</view>
<view style="margin-top: 10px ; margin-left: 5px; ">
<u-rate :count="count" v-model="value" active-color="#ffff00" inactive-color="#b2b2b2"></u-rate>
</view>
<u--textarea v-model="value5" v-if="detailsinfo.rescueInfo.orderStatus == 2 " placeholder="请输入内容"
border="bottom"></u--textarea>
<u--textarea v-model="value5" disabled v-if="detailsinfo.rescueInfo.orderStatus == 3 "
placeholder="请输入内容" border="bottom"></u--textarea>
<view class="anniua" @click="pinglun()" v-if="detailsinfo.rescueInfo.orderStatus == 2 ">
<text>提交</text>
</view>
</view>
<view class="cont-bs" v-if="detailsinfo.setMoney == '' ">
<view class="dix">
<!-- <text>订单金额: </text> -->
<text style="color: #FF522A;">等待核算中......</text>
</view>
</view>
<view class="c-box">
<view class="lan-ga" v-for="(item,index) in detailsinfo.detail" :key="index">
<view class="ga-top">
<view class="gain">{{index + 1}}</view>
<view class="">{{item.title}}</view>
</view>
<view class="xhui" style="margin-left: 20px;">
{{item.createTime}}
</view>
<view class="beizh" style="margin-left: 20px;">
{{item.remark}}
</view>
<view class="wrap-box" style="margin-left: 20px;" v-if="item.images">
<view class="img-box" v-for="(items,index) in item.images.split(',') " :key="index"
@click="previewImage(items)">
<image :src="baseUrl + items " mode=""></image>
</view>
</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: [],
baseUrl: this.$baseUrl,
detailsinfo: null,
timerId: null,
currentIndicator: 'none',
isLoop: true
}
},
onLoad(option) {
this.id = option.id
this.getmapdetails()
},
mounted() {
this.timerId = setInterval(() => {
this.getmapdetails()
console.log('123');
}, 10000);
},
onHide() {
this.destroyTimer();
},
components: {
},
onShareAppMessage(res) {
// if (res.from === 'button') {// 来自页面内分享按钮
// console.log(res.target)
// }
return utils.sendFriend()
},
onShareTimeline(res) {
return utils.sendCircle()
},
methods: {
previewImage(url) {
let newsurl = this.baseUrl + url
this.urlList.push(newsurl)
console.log();
uni.previewImage({
urls: this.urlList,
indicator: this.currentIndicator,
loop: this.isLoop
})
},
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()
},
getmapdetails() {
request({
url: '/app/rescueInfo/rescueInfoDetail?rescueId=' + this.id,
method: 'get',
}).then((res) => {
console.log('返回信息', res);
this.detailsinfo = res.data
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;
console.log(this.marker, "marker")
})
},
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;
}
.c-top {
width: 100%;
box-sizing: border-box;
padding: 15px;
height: 88px;
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
}
.c-title {
font-size: 18px;
font-weight: bold
}
.c-box {
width: 95%;
margin: 0 auto;
box-sizing: border-box;
border-radius: 10px;
padding: 15px;
background: white;
}
.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-dtitle {
font-size: 18px;
font-weight: bold;
}
.mubu {
width: 100%;
background: #f6f6f6;
box-sizing: border-box;
padding-top: 15px;
height: calc(60vh);
}
.zzhui {
width: 100%;
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%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5px 10px;
color: white;
background: #2D81FF;
border-radius: 10px;
margin-top: 10px;
}
.dix {
display: flex;
align-items: center;
}
.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%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px auto;
}
.touxiang {
width: 50px;
height: 50px;
background: #B9B9B9;
border: 3px solid #FF924A;
border-radius: 50%;
overflow: hidden;
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: 10px auto;
box-sizing: border-box;
padding-bottom: 15px;
border-bottom: 1px solid #EEEEEE;
}
.ga-top {
display: flex;
align-items: center;
color: #0D2E8D;
font-weight: bold;
}
.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;
}
.xhui {
font-size: 12px;
font-weight: 400;
color: #999999;
}
.gain {
font-style: 18px;
font-weight: bold;
margin-right: 10px;
color: #0D2E8D;
}
</style>