141 lines
3.2 KiB
Vue
141 lines
3.2 KiB
Vue
<style lang="scss">
|
|
.express_box {
|
|
.express_name {
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
border-bottom: 2rpx solid #efeff4;
|
|
}
|
|
.express_item {
|
|
padding-bottom: 30rpx;
|
|
position: relative;
|
|
}
|
|
.time {
|
|
width: 240rpx;
|
|
flex-direction: column;
|
|
}
|
|
.dot {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
margin-top: 16rpx;
|
|
border-radius: 50%;
|
|
background: #888;
|
|
box-shadow: 0 0 0 4rpx rgba(136, 136, 136, 0.3);
|
|
z-index: 2;
|
|
// margin-left: -2rpx;
|
|
-webkit-transform: translate(2rpx);
|
|
transform: translate(2rpx);
|
|
position: relative;
|
|
}
|
|
.text {
|
|
flex: 1;
|
|
padding: 0 20rpx;
|
|
position: relative;
|
|
font-size: 30rpx;
|
|
}
|
|
.text:before {
|
|
position: absolute;
|
|
left: -5rpx;
|
|
top: 12rpx;
|
|
margin-top: 12rpx;
|
|
bottom: -50rpx;
|
|
border-left: 2rpx solid rgba(136,136,136,0.3);
|
|
content: '';
|
|
}
|
|
.express_info .express_item:first-child {
|
|
color: #ff7f02;
|
|
.dot {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
left: -9rpx;
|
|
-webkit-transform: translate(6rpx);
|
|
transform: translate(6rpx);
|
|
background: #ff7f02;
|
|
box-shadow: 0 0 0 4rpx rgba(255, 127, 2, 0.2);
|
|
}
|
|
}
|
|
.express_info .express_item:first-child .text:before {
|
|
left: -12rpx;
|
|
}
|
|
.express_info .express_item:last-child .text:before {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="express_box bg-w">
|
|
|
|
<!--页面加载动画-->
|
|
<!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
|
|
<view class="" v-if="expressList.length">
|
|
<view class="express_name">
|
|
{{ query.name }}: {{query.num}}
|
|
</view>
|
|
<view class="express_info">
|
|
<view class="express_item flex" v-for="(item,index) in expressList" :key="index">
|
|
<view class="time flex flex-align-center">
|
|
{{ item.ftime.split(' ')[0] }}
|
|
<view>
|
|
{{ item.ftime.split(' ')[1] }}
|
|
</view>
|
|
</view>
|
|
<view class="dot"></view>
|
|
<view class="line"></view>
|
|
<view class="text" v-html="item.context"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 100vh;" v-else class="flex flex-center">
|
|
<u-empty text="'暂无物流信息'"></u-empty>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import url from "@/common/http/url.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
expressList: [],
|
|
query: {}
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
this.query = e;
|
|
this.getExpressInfo(e)
|
|
},
|
|
methods: {
|
|
async getExpressInfo (params) {
|
|
let res = await this.$httpJson("POST", url.order.getExpressInfo, {
|
|
com: params.com,
|
|
num: params.num,
|
|
phone: params.phone
|
|
});
|
|
let { code, data: { data } } = res;
|
|
console.log('res', res)
|
|
if (code == 200) {
|
|
data.forEach((item) => {
|
|
item.context = this.selectPhoneNumber(item.context);
|
|
});
|
|
this.expressList = data;
|
|
}
|
|
|
|
},
|
|
selectPhoneNumber(str) {
|
|
let regx = /(1[2|3|4|5|6|7|8|9][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g;
|
|
let phoneNums = str.match(regx);
|
|
if (phoneNums) {
|
|
for (let i = 0; i < phoneNums.length; i++) {
|
|
let temp = phoneNums[i]
|
|
str = str.replace(phoneNums[i], '<a href="tel:' + temp + '" class="copy phone-num" style=" text-decoration: underline;color: #317ee7;">' + temp + '</a>');
|
|
}
|
|
}
|
|
return str;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|