version/0412
fanfan
1 year ago
parent
0c68ce0aa0
commit
2dae228a00
@ -1,269 +1,279 @@ |
|||||||
<template> |
<template> |
||||||
<view v-if="!isLoading && express.length" class="container"> |
<view v-if="!isLoading && express.length" class="container"> |
||||||
|
|
||||||
<!-- 标签栏 --> |
<!-- 标签栏 --> |
||||||
<u-tabs v-if="tabs.length > 1" :list="tabs" :isScroll="true" :current="curTab" :active-color="appTheme.mainBg" :duration="0.2" bar-width="60" |
<u-tabs v-if="tabs.length > 1" :list="tabs" :isScroll="true" :current="curTab" :active-color="appTheme.mainBg" |
||||||
@change="onChangeTab"></u-tabs> |
:duration="0.2" bar-width="60" @change="onChangeTab"></u-tabs> |
||||||
|
|
||||||
<!-- 商品列表 --> |
<!-- 商品列表 --> |
||||||
<view v-show="tabs.length > 1" class="deliver-goods-list i-card clearfix"> |
<view v-show="tabs.length > 1" class="deliver-goods-list i-card clearfix"> |
||||||
<view class="goods-item" v-for="(goods, idx) in express[curTab].goods" :key="idx"> |
<view class="goods-item" v-for="(goods, idx) in express[curTab].goods" :key="idx"> |
||||||
<image class="goods-img" :src="goods.goods.goods_image" alt="商品图片" /> |
<image class="goods-img" :src="goods.goods.goods_image" alt="商品图片" /> |
||||||
<view class="title">共{{ goods.delivery_num }}件</view> |
<view class="title">共{{ goods.delivery_num }}件</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
|
|
||||||
<!-- 物流信息 --> |
<!-- 物流信息 --> |
||||||
<view class="express i-card"> |
<view class="express i-card"> |
||||||
<view class="info-item"> |
<view class="info-item"> |
||||||
<view class="item-lable">物流公司：</view> |
<view class="item-lable">物流公司：</view> |
||||||
<view class="item-content"> |
<view class="item-content"> |
||||||
<text v-if="express[curTab].delivery_method == 20">无需物流</text> |
<text v-if="express[curTab].delivery_method == 20">无需物流</text> |
||||||
<text v-else>{{ express[curTab].express ? express[curTab].express.express_name : '--' }}</text> |
<text v-else>{{ express[curTab].express ? express[curTab].express.express_name : '--' }}</text> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="info-item"> |
<view class="info-item"> |
||||||
<view class="item-lable">物流单号：</view> |
<view class="item-lable">物流单号：</view> |
||||||
<view class="item-content"> |
<view class="item-content"> |
||||||
<text>{{ express[curTab].express_no ? express[curTab].express_no : '--' }}</text> |
<text>{{ express[curTab].express_no ? express[curTab].express_no : '--' }}</text> |
||||||
<view v-show="express[curTab].express_no" class="act-copy" @click.stop="handleCopy(express[curTab].express_no)"> |
<view v-show="express[curTab].express_no" class="act-copy" |
||||||
<text>复制</text> |
@click.stop="handleCopy(express[curTab].express_no)"> |
||||||
</view> |
<text>复制</text> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
|
</view> |
||||||
<!-- 物流轨迹 --> |
|
||||||
<view class="logis-detail" v-if="express[curTab].traces && express[curTab].traces.length"> |
<!-- 物流轨迹 --> |
||||||
<view class="logis-item" :class="{ first: index === 0 }" v-for="(item, index) in express[curTab].traces" :key="index"> |
<view class="logis-detail" v-if="express[curTab].traces && express[curTab].traces.length"> |
||||||
<view class="logis-item-content"> |
<view class="logis-item" :class="{ first: index === 0 }" v-for="(item, index) in express[curTab].traces" |
||||||
<view class="logis-item-content__describe"> |
:key="index"> |
||||||
<text class="f-26">{{ item.context }}</text> |
<view class="logis-item-content"> |
||||||
</view> |
<view class="logis-item-content__describe"> |
||||||
<view class="logis-item-content__time"> |
<text class="f-26">{{ item.context }}</text> |
||||||
<text class="f-22">{{ item.time }}</text> |
</view> |
||||||
</view> |
<view class="logis-item-content__time"> |
||||||
</view> |
<text class="f-22">{{ item.time }}</text> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
|
</view> |
||||||
|
<u-empty text="暂无数据显示哦～" v-else mode="list"></u-empty> |
||||||
|
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import * as OrderApi from '@/api/order' |
import * as OrderApi from '@/api/order' |
||||||
|
|
||||||
export default { |
export default { |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
// 正在加载 |
// 正在加载 |
||||||
isLoading: true, |
isLoading: true, |
||||||
// 当前标签索引 |
// 当前标签索引 |
||||||
curTab: 0, |
curTab: 0, |
||||||
// 当前订单ID |
// 当前订单ID |
||||||
orderId: null, |
orderId: null, |
||||||
// 物流信息 |
// 物流信息 |
||||||
express: {} |
express: {} |
||||||
} |
} |
||||||
}, |
}, |
||||||
computed: { |
computed: { |
||||||
tabs() { |
tabs() { |
||||||
if (this.express && this.express.length) { |
if (this.express && this.express.length) { |
||||||
|
|
||||||
const test = this.express.map((item, index) => { |
const test = this.express.map((item, index) => { |
||||||
return { name: `包裹${index + 1}` } |
return { |
||||||
}) |
name: `包裹${index + 1}` |
||||||
|
} |
||||||
console.log('test', test) |
}) |
||||||
|
|
||||||
return this.express.map((item, index) => { |
console.log('test', test) |
||||||
return { name: `包裹${index + 1}` } |
|
||||||
}) |
return this.express.map((item, index) => { |
||||||
} |
return { |
||||||
return [] |
name: `包裹${index + 1}` |
||||||
} |
} |
||||||
}, |
}) |
||||||
|
} |
||||||
/** |
return [] |
||||||
* 生命周期函数--监听页面加载 |
} |
||||||
*/ |
}, |
||||||
onLoad({ orderId }) { |
|
||||||
this.orderId = orderId |
/** |
||||||
// 获取当前订单的物流信息 |
* 生命周期函数--监听页面加载 |
||||||
this.getExpress() |
*/ |
||||||
}, |
onLoad({ |
||||||
|
orderId |
||||||
methods: { |
}) { |
||||||
|
this.orderId = orderId |
||||||
// 获取当前订单的物流信息 |
// 获取当前订单的物流信息 |
||||||
getExpress() { |
this.getExpress() |
||||||
const app = this |
}, |
||||||
app.isLoading = true |
|
||||||
OrderApi.express(app.orderId) |
methods: { |
||||||
.then(result => { |
|
||||||
app.express = result.data.express |
// 获取当前订单的物流信息 |
||||||
app.isLoading = false |
getExpress() { |
||||||
}) |
const app = this |
||||||
}, |
app.isLoading = true |
||||||
|
OrderApi.express(app.orderId) |
||||||
// 复制指定内容 |
.then(result => { |
||||||
handleCopy(value) { |
app.express = result.data.express |
||||||
const app = this |
app.isLoading = false |
||||||
uni.setClipboardData({ |
}) |
||||||
data: value, |
}, |
||||||
success: () => app.$toast('复制成功'), |
|
||||||
fail: ({ errMsg }) => app.$toast('复制失败 ' + errMsg) |
// 复制指定内容 |
||||||
}) |
handleCopy(value) { |
||||||
}, |
const app = this |
||||||
|
uni.setClipboardData({ |
||||||
// 切换标签项 |
data: value, |
||||||
onChangeTab(index) { |
success: () => app.$toast('复制成功'), |
||||||
this.curTab = index |
fail: ({ |
||||||
}, |
errMsg |
||||||
|
}) => app.$toast('复制失败 ' + errMsg) |
||||||
} |
}) |
||||||
} |
}, |
||||||
|
|
||||||
|
// 切换标签项 |
||||||
|
onChangeTab(index) { |
||||||
|
this.curTab = index |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
|
// 通栏卡片 |
||||||
// 通栏卡片 |
.i-card { |
||||||
.i-card { |
background: #fff; |
||||||
background: #fff; |
padding: 24rpx 24rpx; |
||||||
padding: 24rpx 24rpx; |
} |
||||||
} |
|
||||||
|
// 物流公司 |
||||||
// 物流公司 |
.express { |
||||||
.express { |
margin-bottom: 20rpx; |
||||||
margin-bottom: 20rpx; |
|
||||||
|
.info-item { |
||||||
.info-item { |
display: flex; |
||||||
display: flex; |
margin-bottom: 24rpx; |
||||||
margin-bottom: 24rpx; |
|
||||||
|
&:last-child { |
||||||
&:last-child { |
margin-bottom: 0; |
||||||
margin-bottom: 0; |
} |
||||||
} |
|
||||||
|
.item-lable { |
||||||
.item-lable { |
display: flex; |
||||||
display: flex; |
align-items: center; |
||||||
align-items: center; |
font-size: 24rpx; |
||||||
font-size: 24rpx; |
color: #999; |
||||||
color: #999; |
margin-right: 6rpx; |
||||||
margin-right: 6rpx; |
} |
||||||
} |
|
||||||
|
.item-content { |
||||||
.item-content { |
flex: 1; |
||||||
flex: 1; |
display: flex; |
||||||
display: flex; |
align-items: center; |
||||||
align-items: center; |
font-size: 26rpx; |
||||||
font-size: 26rpx; |
color: #333; |
||||||
color: #333; |
|
||||||
|
.act-copy { |
||||||
.act-copy { |
margin-left: 20rpx; |
||||||
margin-left: 20rpx; |
padding: 2rpx 20rpx; |
||||||
padding: 2rpx 20rpx; |
font-size: 22rpx; |
||||||
font-size: 22rpx; |
color: #666; |
||||||
color: #666; |
border: 1rpx solid #c1c1c1; |
||||||
border: 1rpx solid #c1c1c1; |
border-radius: 16rpx; |
||||||
border-radius: 16rpx; |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
|
||||||
|
} |
||||||
} |
|
||||||
|
// 商品列表 |
||||||
// 商品列表 |
.deliver-goods-list { |
||||||
.deliver-goods-list { |
margin-top: 20rpx; |
||||||
margin-top: 20rpx; |
margin-bottom: -30rpx; |
||||||
margin-bottom: -30rpx; |
|
||||||
|
.goods-item { |
||||||
.goods-item { |
position: relative; |
||||||
position: relative; |
border-radius: 8rpx; |
||||||
border-radius: 8rpx; |
overflow: hidden; |
||||||
overflow: hidden; |
width: 130rpx; |
||||||
width: 130rpx; |
height: 130rpx; |
||||||
height: 130rpx; |
float: left; |
||||||
float: left; |
margin-right: 30rpx; |
||||||
margin-right: 30rpx; |
margin-bottom: 30rpx; |
||||||
margin-bottom: 30rpx; |
} |
||||||
} |
|
||||||
|
.goods-img { |
||||||
.goods-img { |
display: block; |
||||||
display: block; |
width: 100%; |
||||||
width: 100%; |
height: 100%; |
||||||
height: 100%; |
} |
||||||
} |
|
||||||
|
.title { |
||||||
.title { |
position: absolute; |
||||||
position: absolute; |
bottom: 0; |
||||||
bottom: 0; |
width: 100%; |
||||||
width: 100%; |
text-align: center; |
||||||
text-align: center; |
background: rgba(0, 0, 0, 0.6); |
||||||
background: rgba(0, 0, 0, 0.6); |
color: #fff; |
||||||
color: #fff; |
padding: 4rpx 0; |
||||||
padding: 4rpx 0; |
font-size: 24rpx; |
||||||
font-size: 24rpx; |
} |
||||||
} |
} |
||||||
} |
|
||||||
|
// 物流轨迹 |
||||||
// 物流轨迹 |
.logis-detail { |
||||||
.logis-detail { |
padding: 30rpx; |
||||||
padding: 30rpx; |
background-color: #fff; |
||||||
background-color: #fff; |
|
||||||
|
.logis-item { |
||||||
.logis-item { |
position: relative; |
||||||
position: relative; |
padding: 10px 0 10px 25px; |
||||||
padding: 10px 0 10px 25px; |
box-sizing: border-box; |
||||||
box-sizing: border-box; |
border-left: 2px solid #ccc; |
||||||
border-left: 2px solid #ccc; |
|
||||||
|
&.first { |
||||||
&.first { |
border-left: 2px solid #f40; |
||||||
border-left: 2px solid #f40; |
|
||||||
|
&:after { |
||||||
&:after { |
background: #f40; |
||||||
background: #f40; |
} |
||||||
} |
|
||||||
|
.logis-item-content { |
||||||
.logis-item-content { |
background: #ff6e39; |
||||||
background: #ff6e39; |
color: #fff; |
||||||
color: #fff; |
|
||||||
|
&:after { |
||||||
&:after { |
border-bottom-color: #ff6e39; |
||||||
border-bottom-color: #ff6e39; |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
|
||||||
|
&:after { |
||||||
&:after { |
content: ' '; |
||||||
content: ' '; |
display: inline-block; |
||||||
display: inline-block; |
position: absolute; |
||||||
position: absolute; |
left: -6px; |
||||||
left: -6px; |
top: 30px; |
||||||
top: 30px; |
width: 6px; |
||||||
width: 6px; |
height: 6px; |
||||||
height: 6px; |
border-radius: 10px; |
||||||
border-radius: 10px; |
background: #bdbdbd; |
||||||
background: #bdbdbd; |
border: 2px solid #fff; |
||||||
border: 2px solid #fff; |
} |
||||||
} |
|
||||||
|
.logis-item-content { |
||||||
.logis-item-content { |
position: relative; |
||||||
position: relative; |
background: #f9f9f9; |
||||||
background: #f9f9f9; |
padding: 10rpx 20rpx; |
||||||
padding: 10rpx 20rpx; |
box-sizing: border-box; |
||||||
box-sizing: border-box; |
color: #666; |
||||||
color: #666; |
|
||||||
|
&:after { |
||||||
&:after { |
content: ''; |
||||||
content: ''; |
display: inline-block; |
||||||
display: inline-block; |
position: absolute; |
||||||
position: absolute; |
left: -10px; |
||||||
left: -10px; |
top: 18px; |
||||||
top: 18px; |
border-left: 10px solid #fff; |
||||||
border-left: 10px solid #fff; |
border-bottom: 10px solid #f3f3f3; |
||||||
border-bottom: 10px solid #f3f3f3; |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
|
||||||
</style> |
</style> |
||||||
Loading…
Reference in new issue