Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
真食物配套的电商小程序.
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.
446 Commits
4 Branches
0 Tags
43 MiB
 
 
 
Tree: 6c2e4c53e9
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6c2e4c53e9'
${ noResults }
zsw-farm-bxg/pages/order/Logistics/index.vue

737 lines
19 KiB
Raw Blame History

<template>
<view class="logistics">
<view class="header">
<cu-custom :isBack="true" :isCenter="true">
<block slot="backText">
<view class="backImg">
<image src="@/static/images/back-btn.png" mode=""></image>
</view>
</block>
<block slot="content">
<view class="tab-title">物流详情</view>
</block>
</cu-custom>
</view>
<view class="info-box acea-row row-between">
<view class="image-box">
<image :src="cartInfo[0].productInfo.image" mode="aspectFill"></image>
<view class="image-num" v-if="cartInfo.length > 1">等{{cartInfo.length}}件商品</view>
</view>
<view class="info-text">
<view class="item">配送快递：{{ orderInfo.deliveryName }}</view>
<view class="item">快递单号：{{ orderInfo.deliveryId }}</view>
<view class="item" @click="cellPhone">联系电话：{{95338}}</view>
</view>
</view>
<view class="state-box">
<view class="state-progress acea-row row-between">
<view class="acea-row row-column row-middle" v-for="(item,index) in stateList" :key="index">
<view class="state-tip">
<view v-if="index != stateActive" class="tip">{{item.tip}}</view>
<view v-else class="active-tip acea-row row-column row-middle">
<view class="box">{{item.tip}}</view>
<view class="jiantou"></view>
</view>
</view>
<view :class="'state-item ' + (index == stateActive?'active':'')">
<view class=""></view>
</view>
</view>
<view class="state-line"></view>
</view>
<!-- <view class="acea-row row-between">
<view class="place">上海市</view>
<view class="place line1">武汉市</view>
</view> -->
</view>
<!-- <view class="header acea-row row-between row-top" v-for="cart in cartInfo" :key="cart.id">
<view class="pictrue">
<image :src="cart.productInfo.image" />
</view>
<view class="text acea-row row-between">
<view class="name line2">{{ cart.productInfo.store_name }}</view>
<view class="money">
<view>￥{{ cart.truePrice }}</view>
<view>x{{ cart.cart_num }}</view>
</view>
</view>
</view> -->
<!-- <view class="logisticsCon" style="margin-bottom: 5px">
<view class="company acea-row row-between-wrapper">
<view class="picTxt acea-row row-between-wrapper">
<view class="iconfont icon-wuliu"></view>
<view class="text">
<view>
<text class="name line1">物流公司：</text>
{{ orderInfo.deliveryName }}
</view>
<view class="express line1">
<text class="name">快递单号：</text>
{{ orderInfo.deliveryId }}
</view>
</view>
</view>
#ifndef H5
<view class="copy acea-row row-center-wrapper copy-data" @click="copyClipboard(orderInfo.deliveryId)">复制单号</view>
#endif
</view>
<view class="item" v-for="(express, expressListIndex) in expressList" :key="expressListIndex">
<view class="circular" :class="expressListIndex === 0 ? 'on' : ''"></view>
<view class="text">
<view :class="expressListIndex === 0 ? 'font-color-red' : ''">{{ express.status }}</view>
<view class="data">{{ express.time }}</view>
</view>
</view>
</view> -->
<view class="logistics-progress">
<view class="title">物流详情</view>
<view>
<view class="track-rcol">
<view class="track-list">
<view>
<view class="track-list-item" v-for="(item, logisticsListindex) in logisticsList" :key="logisticsListindex">
<view class="active acea-row" v-if="logisticsListindex === 0">
<view class="node-icon-box"><i class="node-icon"></i></view>
<view class="">
<view class="txt">{{ item.acceptStation }}</view>
<view class="time">{{ item.acceptTime }}</view>
</view>
</view>
<view class="acea-row" v-if="logisticsListindex > 0 && logisticsListindex !== logisticsList.length - 1">
<i class="node-icon"></i>
<view class="">
<view class="txt">{{ item.acceptStation }}</view>
<view class="time">{{ item.acceptTime }}</view>
</view>
</view>
<view v-if="logisticsList.length != 1 && logisticsListindex === logisticsList.length - 1" class="finall acea-row">
<!-- <i class="div-spilander"></i> -->
<i class="node-icon"></i>
<view class="">
<view class="txt">{{ item.acceptStation }}</view>
<view class="time">{{ item.acceptTime }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 物流进度条 物流跟踪 -->
<!-- <view class="div-bg bg-white" style="font-size:12px; background:#fff;">
<view style="margin-bottom:5px;">
<view class="bg-white" style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;padding-top: 10px">
<view style="font-size: 26rpx;color: #111111; margin: 5px 0">
物流跟踪
</view>
<view>
<view class="track-rcol">
<view class="track-list">
<view>
<view class="track-list-item" v-for="(item, logisticsListindex) in logisticsList" :key="logisticsListindex">
<view class="active" v-if="logisticsListindex === 0">
<view></view>
<i class="node-icon"></i>
<text class="txt">{{ item.acceptStation }}</text>
<text class="time">{{ item.acceptTime }}</text>
</view>
<view v-if="logisticsListindex > 0 && logisticsListindex !== logisticsList.length - 1">
<i class="node-icon"></i>
<text class="txt">{{ item.acceptStation }}</text>
<text class="time">{{ item.acceptTime }}</text>
</view>
<view v-if="logisticsListindex === logisticsList.length - 1" class="finall">
<i class="div-spilander"></i>
<i class="node-icon"></i>
<text class="txt">{{ item.acceptStation }}</text>
<text class="time">{{ item.acceptTime }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view> -->
<view class="no-express" v-if="loaded && !expressList.length">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/noExpress.png`" />
</view>
<!-- <Recommend></Recommend> -->
</view>
</template>
<script>
// import Recommend from '@/components/Recommend'
import { express, orderDetail } from '@/api/order'
import { copyClipboard } from '@/utils'
const NAME = 'Logistics'
export default {
name: NAME,
components: {
// Recommend,
},
data: function() {
return {
id: '',
cartInfo: [],
orderInfo: {},
stateList: [
{
state: '',
tip: '已发货'
},
{
state: '',
tip: '运输中'
},
{
state: '',
tip: '派件中'
},
{
state: '',
tip: '已签收'
},
],
stateActive: 0,
expressList: [],
loaded: false,
logisticsList: [
{
acceptStation: '暂无数据',
acceptTime: '',
},
],
}
},
watch: {
$yroute(n) {
if (n.name === NAME && this.$yroute.query.id !== this.id) {
this.id = this.$yroute.query.id
this.getExpress()
}
},
},
mounted: function() {
this.id = this.$yroute.query.id
this.getExpress()
},
methods: {
copyClipboard,
getExpressInfo() {
let params = {
shipperCode: this.orderInfo.deliverySn,
logisticCode: this.orderInfo.deliveryId,
}
express(params)
.then(res => {
if(res.data.Traces) {
this.logisticsList = res.data.Traces;
// this.logisticsList = res.data.Traces.reverse();
if(this.logisticsList.length > 0) {
let acceptStation = this.logisticsList[0].acceptStation;
let isDelivery = false,
delivery = ['投递员','派件员','正在派件','配送员','正为您派送','正在第1次派件','派件中','派件人'];
let isignFor = false,
signFor = ['已取走', '已签收','代签收'];
isDelivery = delivery.some(val => {
return acceptStation.includes(val);
})
isignFor = signFor.some(val => {
return acceptStation.includes(val);
})
this.stateActive = 1;
if(isDelivery) {
this.stateActive = 2;
}
if (isignFor) {
this.stateActive = 3;
if(acceptStation.includes('准备分配派送员')) {
this.stateActive = 2;
}
}
} else {
this.stateActive = 0;
this.logisticsList = [{
acceptStation: '包裹正在等待揽收',
acceptTime: ''
}]
}
}
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: 'none',
duration: 2000,
})
})
},
getExpress() {
if (!this.id) {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: 'none',
duration: 2000,
})
return
}
this.loaded = false
orderDetail(this.id)
.then(res => {
this.orderInfo = {
deliveryId: res.data.deliveryId,
deliveryName: res.data.deliveryName,
deliverySn: res.data.deliverySn,
}
this.getExpressInfo()
// const result = res.data.express.result || {};
this.cartInfo = res.data.cartInfo;
// this.expressList = result.list || [];
// this.loaded = true;
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: 'none',
duration: 2000,
})
})
},
cellPhone() {
uni.makePhoneCall({
phoneNumber: '18062552948',
fail: function () {
console.log('取消');
}
});
}
},
}
</script>
<style scoped lang="less">
.header {
.tab-title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 600;
color: #2DB5AE;
line-height: 42rpx;
}
.backImg {
width: 88rpx;
height: 62rpx;
padding-left: 26rpx;
image {
width: 100%;
height: 100%;
}
}
}
.info-box {
margin: 20rpx 32rpx;
width: 686rpx;
padding: 20rpx;
background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
border-radius: 16rpx;
.image-box {
width: 164rpx;
height: 164rpx;
border-radius: 16rpx;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
.image-num {
width: 144rpx;
height: 40rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 12rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 40rpx;
text-align: center;
position: absolute;
left: 10rpx;
bottom: 10rpx;
}
}
.info-text {
width: 442rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 32rpx;
.item {
padding-top: 16rpx;
}
}
}
.state-box {
margin: 0rpx 32rpx 20rpx;
width: 686rpx;
height: 208rpx;
background: #F5F6F8;
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
border-radius: 16rpx;
.state-progress {
padding: 26rpx 23rpx 16rpx;
position: relative;
.state-tip {
width: 100rpx;
height: 60rpx;
margin-bottom: 16rpx;
font-family: PingFang SC;
font-weight: 600;
text-align: center;
.tip {
padding-top: 34rpx;
font-size: 18rpx;
color: #2DB5AE;
line-height: 26rpx;
}
.box {
width: 100rpx;
height: 44rpx;
background-color: #2DB5AE;
border-radius: 16rpx;
font-size: 24rpx;
color: #FFFFFF;
line-height: 46rpx;
text-align: center;
}
.jiantou {
width: 0;
height: 0;
border-top: 16rpx solid #2DB5AE;
border-bottom: 0rpx;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
}
}
.state-item {
width: 32rpx;
height: 32rpx;
padding: 4rpx;
border-radius: 50%;
position: relative;
z-index: 1;
view {
width: 24rpx;
height: 24rpx;
background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
border-radius: 50%;
}
}
.active {
background: linear-gradient(rgba(27, 141, 204, 1), rgba(45, 183, 173, 1), rgba(57, 211, 150, 1));
}
.state-line {
width: 538rpx;
height: 4rpx;
background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
position: absolute;
left: 74rpx;
top: 118rpx;
z-index: 0;
}
}
.place {
margin: 0rpx 6rpx;
width: 134rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 600;
color: #3A3A3C;
line-height: 32rpx;
text-align: center;
}
}
.logistics-progress {
margin: 0rpx 32rpx 40rpx;
padding: 20rpx;
width: 686rpx;
background: #F5F6F8;
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
border-radius: 16rpx;
.title {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 600;
color: #3A3A3C;
line-height: 42rpx;
padding-bottom: 34rpx;
}
}
.no-express {
margin: 1.5 * 100rpx 0;
}
.no-express image {
width: 6 * 100rpx;
margin: 0 auto;
display: block;
}
.message-text {
font-family: MicrosoftYaHei;
font-size: 1 * 100rpx;
font-weight: normal;
font-stretch: normal;
line-height: 3 * 100rpx;
letter-spacing: 0 * 100rpx;
color: #333333;
width: 50%;
}
.fontblack {
color: #999999;
}
.img2 {
width: 0.81 * 100rpx;
height: 0.8 * 100rpx;
float: right;
}
.addressshow2 {
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
width: 75%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
font-size: 1 * 100rpx;
}
.addressshow1 {
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
width: 75%;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
font-size: 1 * 100rpx;
}
.orderTitle {
font-size: 1 * 100rpx;
color: #333333;
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
height: 2.5 * 100rpx;
}
.orderDetail {
font-size: 0.26 * 100rpx;
color: #666666;
text-align: left;
}
.border-ceter {
width: 92%;
padding-left: 15px;
padding-right: 15px;
}
.pay-button {
width: 88%;
height: 2.6 * 100rpx;
position: relative;
background-color: red;
color: white;
margin-left: 6%;
}
ul view {
list-style: none;
font-size: 0.24 * 100rpx;
}
ul {
}
.track-rcol {
}
.track-list {
position: relative;
}
.track-list > view {
position: relative;
padding-left: 52rpx;
padding-right: 40rpx;
// padding: 0 0 0.5 * 100rpx 20rpx;
// padding: 0 0 0.5 * 100rpx 20rpx;
}
.track-list .track-list-item {
position: relative;
padding: 0 0 46rpx 40rpx;
// padding: 0 0 0.5 * 100rpx 20rpx;
line-height: 0.3 * 100rpx;
border-left: 4rpx solid #2DB7AD;
// border-left: 1px solid #d9d9d9;
color: #999;
}
.track-list .track-list-item:last-child {
border-left: 4rpx solid #F5F6F8;
}
// .track-list view.first {
// color: red;
// padding-top: 0;
// width: 100%;
// text-align: left;
// border-left: 1px solid #d9d9d9;
// }
.track-list .active .node-icon-box {
position: absolute;
top: 0;
left: -17rpx;
width: 30rpx;
height: 30rpx;
padding: 4rpx;
background: radial-gradient(circle, rgba(27, 141, 204, 1), rgba(45, 183, 173, 1), rgba(57, 211, 150, 1));
border-radius: 50%;
.node-icon {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
position: relative;
top: 0rpx;
left: 0rpx;
border-radius: 50%;
}
}
.track-list view.node-icon {
position: absolute;
left: -14rpx;
top: 0rpx;
border-radius: 50%;
width: 24rpx;
height: 24rpx;
background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
// width: 0.2 * 100rpx;
// height: 0.2 * 100rpx;
// background-color: #b2b2b2;
padding: 0 !important;
}
// .track-list view.active .node-icon {
// background-position: 0 -72px;
// background-color: #ea7c0a;
// width: 0.3 * 100rpx;
// z-index: 2;
// height: 0.3 * 100rpx;
// position: absolute;
// left: -0.19 * 100rpx;
// top: 0;
// border-radius: 50%;
// }
.track-list view.time {
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
line-height: 24rpx;
padding-top: 10rpx;
// margin-right: 20px;
// position: relative;
// top: 4px;
// display: inline-block;
// vertical-align: middle;
// color: #999;
// width: 100%;
// text-align: left;
}
.track-list view.txt {
position: relative;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #3A3A3C;
line-height: 26rpx;
// display: inline-block;
// vertical-align: top;
// color: #999;
// left: 0.2 * 100rpx;
// top: 0.04 * 100rpx;
}
// .track-list view.first .time {
// text-align: left;
// width: 94%;
// color: red;
// }
// .track-list view.first .txt {
// color: red;
// text-align: left;
// width: 94%;
// }
// .track-list view.finall {
// padding: 0px 0 0.5 * 100rpx 5px;
// line-height: 18px;
// border-color: white;
// border-left: 1px solid #ffffff;
// color: #999;
// }
.track-list view.finall .div-spilander {
width: 4rpx;
position: absolute;
left: -2rpx;
height: 0.5 * 100rpx;
background-color: #2DB7AD;
}
</style>