135 lines
2.4 KiB
Vue
135 lines
2.4 KiB
Vue
<template>
|
|
<view>
|
|
<view class='record-box fill-base radius-24'>
|
|
<view class='record-item' :class="[{'b-1px-l': index != list.length -1}]" v-for="(item,index) in list"
|
|
:key="index">
|
|
<view class='c-caption rel'>
|
|
<text class="item-tag abs" :class="[{'cur':info.pay_type > item.pay_type -1}]"
|
|
:style="{border:`5rpx solid ${primaryColor}`,background: info.pay_type > item.pay_type -1 ? activeColor : ''}"></text>
|
|
<view class="item-text f-paragraph c-title flex-y-baseline">
|
|
{{item[type]}}
|
|
</view>
|
|
</view>
|
|
<view class="f-caption c-caption">{{item.time_text}}</view>
|
|
<image @tap.stop="toPreviewImage(index)" mode="aspectFill" class="item-img mt-sm radius-10"
|
|
:src="item.cover">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'timeline',
|
|
props: {
|
|
list: {
|
|
type: Object,
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
info: {
|
|
type: Object,
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
type: {
|
|
type: String,
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
activeColor: {
|
|
type: String,
|
|
default () {
|
|
return '#39b54a'
|
|
}
|
|
},
|
|
primaryColor: {
|
|
type: String,
|
|
default () {
|
|
return '#39b54a'
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
toPreviewImage(index) {
|
|
let {
|
|
cover: current
|
|
} = this.list[index]
|
|
let urls = this.list.map(item => {
|
|
return item.cover
|
|
})
|
|
this.$util.previewImage({
|
|
current,
|
|
urls
|
|
})
|
|
},
|
|
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: 0rpx 0rpx 30rpx 40rpx;
|
|
margin-left: 13rpx;
|
|
|
|
.item-tag {
|
|
width: 19rpx;
|
|
height: 19rpx;
|
|
background: #EEF5F2;
|
|
border: 5rpx solid #39b54a;
|
|
transform: rotateZ(360deg);
|
|
border-radius: 50%;
|
|
top: 0rpx;
|
|
left: -52rpx;
|
|
}
|
|
|
|
.item-text {
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.item-img {
|
|
width: 158rpx;
|
|
height: 120rpx;
|
|
background: #f4f6f8;
|
|
}
|
|
}
|
|
|
|
.record-item.b-1px-l::before {
|
|
border: 1rpx solid #DBDBDB;
|
|
transform: rotateZ(360deg);
|
|
}
|
|
|
|
.record-item:nth-child(5) {
|
|
padding-bottom: 0;
|
|
}
|
|
</style>
|