You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.1 KiB
134 lines
3.1 KiB
2 years ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class='record-box fill-base'>
|
||
|
|
<view class='record-item rel ml-sm b-1px-l' v-for="(item,index) in list" :key="index">
|
||
|
|
|
||
|
|
<text class="item-tag abs" :class="[{'cur':info.pay_type > item.pay_type -1}]"
|
||
|
|
:style="{border:`2rpx solid ${primaryColor}`,background: info.pay_type > item.pay_type -1 ? primaryColor : ''}"></text>
|
||
|
|
|
||
|
|
<view class='c-title'>
|
||
|
|
<view class="item-text f-paragraph flex-y-baseline">
|
||
|
|
{{item.title}}
|
||
|
|
<view class="ml-md f-caption c-caption"
|
||
|
|
:style="{color:info.pay_type > item.pay_type -1 ? primaryColor : ''}">
|
||
|
|
{{info.pay_type > item.pay_type -1 ? '' : '状态未开始' }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="c-caption" v-if="info[item.time]">{{info[item.time]}}</view>
|
||
|
|
</view>
|
||
|
|
<block v-if="index== 2 && info.pay_type > 4">
|
||
|
|
<image @tap.stop="toPreviewImage(1)" mode="widthFix" class="item-img mt-md radius-5"
|
||
|
|
:src="info.arrive_img">
|
||
|
|
</image>
|
||
|
|
<view @tap.stop="toMap('arr')" class="flex-y-center mt-sm f-caption c-title"
|
||
|
|
v-if="info.arr_address">
|
||
|
|
<i class="iconfont iconjuli mr-sm" :style="{color:primaryColor}"></i>{{info.arr_address}}
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<block v-if="index== 4 && info.pay_type == 7">
|
||
|
|
<image @tap.stop="toPreviewImage(2)" mode="widthFix" class="item-img mt-md radius-5"
|
||
|
|
:src="info.end_img" v-if="info.end_img">
|
||
|
|
</image>
|
||
|
|
<view @tap.stop="toMap('end')" class="flex-y-center mt-sm f-caption c-title"
|
||
|
|
v-if="info.end_address">
|
||
|
|
<i class="iconfont iconjuli mr-sm" :style="{color:primaryColor}"></i>{{info.end_address}}
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
mapState
|
||
|
|
} from "vuex"
|
||
|
|
export default {
|
||
|
|
name: 'timeline',
|
||
|
|
props: {
|
||
|
|
list: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
info: {
|
||
|
|
type: Object,
|
||
|
|
default () {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: mapState({
|
||
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
||
|
|
subColor: state => state.config.configInfo.subColor,
|
||
|
|
}),
|
||
|
|
methods: {
|
||
|
|
toPreviewImage(key) {
|
||
|
|
let curent = key == 1 ? this.info.arrive_img : this.info.end_img
|
||
|
|
this.$util.previewImage({
|
||
|
|
curent,
|
||
|
|
urls: [curent]
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 查看定位
|
||
|
|
async toMap(key) {
|
||
|
|
let {
|
||
|
|
info
|
||
|
|
} = this
|
||
|
|
await this.$util.checkAuth({
|
||
|
|
type: 'userLocation'
|
||
|
|
})
|
||
|
|
await uni.getLocation({
|
||
|
|
type: 'gcj02',
|
||
|
|
})
|
||
|
|
await uni.openLocation({
|
||
|
|
latitude: info[`${key}_lat`] * 1,
|
||
|
|
longitude: info[`${key}_lng`] * 1,
|
||
|
|
name: info[`${key}_address`],
|
||
|
|
scale: 28
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.record-item {
|
||
|
|
padding: 0 0 30rpx 30rpx;
|
||
|
|
|
||
|
|
.item-tag {
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
display: block;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 50%;
|
||
|
|
top: 0;
|
||
|
|
left: -7px;
|
||
|
|
transform: rotateZ(360deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-text {
|
||
|
|
line-height: 34rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-img {
|
||
|
|
width: 180rpx;
|
||
|
|
min-height: 118rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.record-item.b-1px-l::before {
|
||
|
|
border-left: 2px solid #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.record-item:nth-child(5) {
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
</style>
|