cxc/sphc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
quantulr
2024-05-17 17:14:40 +08:00
parent 8e5986a8ef
commit e679915b6c
11 changed files with 272 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
pages/logistics_details/logistics_details.js
View File

@ -6,7 +6,10 @@ Page({
* 页面的初始数据
*/
data: {
logistics: [],
activePackage: 0,
records: [],
logisticsName: null,
expressComName: [
"圆通速递",
"申通快递",
@ -67,7 +70,15 @@ Page({
})
this.getExpressData()
},
pickPackage(e) {
const { index } = e.currentTarget.dataset
const { logistics } = this.data
this.setData({
activePackage: index,
num: logistics[index].logisticsNumber
})
this.getExpressData()
},
// 获取物流信息
getExpressData() {
getExpressDetail({
@ -91,15 +102,25 @@ Page({
}
})
},
copyLogisticsNumber(e) {
const { logisticsNumber } = e.currentTarget.dataset
wx.setClipboardData({
data: logisticsNumber,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const { logisticsNum, logisticsName } = options
const { logistics, logisticsName, orderNumber } = options
this.setData({
logistics: logistics ? JSON.parse(logistics) : null,
orderNumber,
logisticsName
})
const index = this.data.expressComs.findIndex(el => el.name === logisticsName)
this.setData({
num: logisticsNum,
num: this.data.logistics[0].logisticsNumber,
currentExpressComIndex: index < 0 ? 0 : index
})
this.getExpressData()

66
pages/logistics_details/logistics_details.wxml
View File

@ -1,20 +1,54 @@
<!--pages/logistics_details/logistics_details.wxml-->
<view style="padding:48rpx 48rpx 92rpx;">
<view style="margin-bottom: 36rpx;display: flex;align-items: center;">
<picker range="{{expressComName}}" value="{{currentExpressComIndex}}" bindchange="pickExpressCom">
<view style="display: flex;align-items: center;">
<image src="../../icon/arrows-exchange-alt-v.svg" style="width: 40rpx; height: 40rpx;" />
{{expressComs[currentExpressComIndex].name}}
<view style="background-color: #fff;display: flex;justify-content: space-between; align-items: center;padding: 20rpx 12rpx;color: #4c4c4c;">
<text>订单编号: {{orderNumber}}</text><text>{{logistics.length}}个包裹</text>
</view>
<view style="margin: 24rpx 24rpx 0;">
<!-- 选择包裹 -->
<scroll-view scroll-x enable-flex class="packages-scroll">
<view wx:for="{{logistics}}" class="package" bind:tap="pickPackage" data-index="{{index}}">
<image class="icon" src="/icon/package.svg" />
<text>包裹{{index+1}}</text>
<view wx:if="{{activePackage===index}}" class="active-indicator"></view>
</view>
</scroll-view>
<!-- 包裹内容, 物流公司 -->
<view style="height: 400rpx; width: 100%;background-color: #fff;border-radius: 24rpx;overflow: hidden;">
<view style="background-color: #fef8ec;color: #f85900;font-size: 24rpx;padding: 12rpx 12rpx;">快递走件，催派等物流信息，请联系物流公司，如需平台接入请联系客服</view>
<view style="margin: 36rpx 0 0 24rpx;display: flex;align-items: center;">
<picker range="{{expressComName}}" value="{{currentExpressComIndex}}" bindchange="pickExpressCom">
<view style="display: flex;align-items: center;">
<image src="../../icon/arrows-exchange-alt-v.svg" style="width: 40rpx; height: 40rpx;" />
<text style="font-size: 38rpx;font-weight: bold;">{{expressComs[currentExpressComIndex].name}}</text>
</view>
</picker>
</view>
<view style="margin: 24rpx 0 0 24rpx;display: flex;align-items: center;">
<text>运单号: {{logistics[activePackage].logisticsNumber}}</text>
<button data-logistics-number="{{logistics[activePackage].logisticsNumber}}" style="border-radius: 999rpx;margin: 0 0 0 12rpx;" plain size="mini" bind:tap="copyLogisticsNumber">复制</button>
</view>
<view style="margin: 24rpx 48rpx 0">
<view style="justify-content: space-between;align-items: center;display: flex;height: 48rpx;" wx:for="{{logistics[activePackage].goods}}" wx:key="id">
<view class="goods-name" style="flex:7;">{{item.name}}</view>
<view class="goods-name" style="flex:3;text-align: center;">{{item.spec}}</view>
<view style="flex:1;text-align: right;">{{item.num}}</view>
<!-- {{item.unit}} -->
</view>
</picker>：{{num}}
</view>
<view wx:if="{{records.length}}">
<view wx:for="{{records}}" wx:key="context" class="record-item">
<view class="dot" />
<view class="line" />
<text class="time">{{item.time}}</text>
<text style="margin-top: 20rpx;">{{item.context}}</text>
</view>
</view>
<view wx:else style="text-align: center; margin: 256rpx 96rpx 0;">暂无物流信息，请检查快递单号或者快递公司是否正确，可以点击左上方快递公司名称选择正确的快递公司。</view>
</view>
<!-- 物流详情 -->
<view style="background-color: #fff;padding: 24rpx;margin-top: 24rpx;border-radius: 24rpx;">
<text style="font-size:36rpx;font-weight: bold;">物流详情</text>
<view style="height: 2rpx;background-color: rgb(209 213 219);margin-top: 24rpx;"></view>
<view style="margin-top: 24rpx;" wx:if="{{records.length}}">
<view wx:for="{{records}}" wx:key="context" class="record-item">
<view class="dot" />
<view class="line" />
<text class="time">{{item.time}}</text>
<text style="margin-top: 20rpx;">{{item.context}}</text>
</view>
</view>
<view wx:else style="text-align: center;margin-top: 24rpx;">暂无物流信息，请检查快递单号或者快递公司是否正确，可以点击左上方快递公司名称选择正确的快递公司。</view>
</view>
</view>
<view style="height: 48rpx;"></view>

48
pages/logistics_details/logistics_details.wxss
View File

@ -1,4 +1,45 @@
/* pages/logistics_details/logistics_details.wxss */
page {
background-color: #f2f2f2;
}
.packages-scroll {
display: flex;
flex-direction: row;
height: 128rpx;
}
.packages-scroll .package {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 200rpx;
height: 96rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
}
.packages-scroll .package .icon {
width: 48rpx;
height: 48rpx;
margin-right: 4rpx;
}
.packages-scroll .package .active-indicator {
position: absolute;
height: 12rpx;
width: 100%;
bottom: 0;
left: 0;
background-color: #f85900;
}
.packages-scroll .package:not(:first-of-type) {
margin-left: 20rpx;
}
.record-item {
/* padding-bottom: 48rpx; */
display: flex;
@ -6,6 +47,11 @@
position: relative;
padding-left: 48rpx;
}
.goods-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.record-item:not(:last-child) {
padding-bottom: 48rpx;
@ -43,4 +89,4 @@
width: 2rpx;
background-color: gray;
opacity: 50%;
}
}