水滴兑换模块开发完成

pages/water/logistic/logistic.js

@@ -0,0 +1,40 @@
+ /*
+ * 手太欠
+ * 愿这世界都如故事里一样 美好而动人~
+ */
+
+Page({
+    data: {
+        title       : '',  //物流快递
+        logisticArr : '',
+        expressData : '',
+        exchangeId  : ''
+    },
+
+    onLoad(options) {
+        console.log(options)
+        // const {
+        //     newData = {}
+        // } = options;
+        // const data = JSON.parse(decodeURIComponent(newData));
+        this.setData({
+            exchangeId : options.exchange_id,
+            title      : options.title
+        })
+    },
+
+    onShow() {
+        // 查看物流
+        this.h5url();
+    },
+
+    // 查看物流
+    h5url() {
+        wx.$api.recruit.orderDi(this.data.exchangeId).then(res => {
+            this.setData({
+                expressData: res.data,
+                logisticArr: res.data.express_track.list
+            })
+        }).catch(err => {})
+    }
+})

pages/water/logistic/logistic.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "物流信息"
+}

pages/water/logistic/logistic.wxml

@@ -0,0 +1,44 @@
+<block wx:if="{{logisticArr.length > 0}}">
+    <view class="top">
+        <view class="top-logo">
+            <image src="{{expressData.express_track.logo ? expressData.express_track.logo : 'https://cdn.shuiganying.com/images/2023/07/27/eca556ea6028f859e53c13103bb312f1.png'}}" mode="aspectFill"></image>
+        </view>
+        <view class="top-cont">
+            <view class="top-name">
+                {{expressData.express_track.express_name}}
+                <view class="top-no">
+                    {{expressData.express_track.no}}
+                </view>
+            </view>
+            <view class="top-type">
+                {{expressData.name}}<text>{{expressData.mobile}}</text>
+            </view>
+        </view>
+    </view>
+    <view class="white">
+        <view class="address">
+            <view class="address-tips">
+                收
+            </view>
+            <view class="address-text">
+                {{expressData.full_address}}
+            </view>
+        </view>
+        <view class="list">
+            <view class="item" wx:for="{{logisticArr}}" wx:key="logisticArr">
+                <view class="item-name">
+                    <view class="item-time">
+                        {{item.time}}
+                    </view>
+                </view>
+                <view class="item-text">
+                    {{item.context}}
+                </view>
+            </view>
+        </view>
+    </view>
+</block>
+<view class="pack-center pages-hint" wx:else>
+    <image src="/static/imgs/cont_null.png"></image>
+    <view>暂无物流信息</view>
+</view>

pages/water/logistic/logistic.wxss

@@ -0,0 +1,141 @@
+.top {
+    background-color: #3b7cff;
+    padding: 30rpx 30rpx 60rpx;
+    box-sizing: border-box;
+    display: flex;
+}
+
+.top-logo {
+    background-color: #ffffff;
+    border-radius: 10rpx;
+    width: 100rpx;
+    height: 100rpx;
+    padding: 10rpx;
+    box-sizing: border-box;
+}
+
+.top-logo image {
+    width: 100%;
+    height: 100%;
+}
+
+.top-cont {
+    color: #ffffff;
+    width: calc(100% - 130rpx);
+    margin-left: 30rpx;
+}
+
+.top-name {
+    display: flex;
+    line-height: 44rpx;
+    padding: 10rpx 0;
+}
+
+.top-no {
+    font-size: 26rpx;
+    padding-left: 30rpx;
+    opacity: .9;
+}
+
+.top-type {
+    font-size: 24rpx;
+}
+
+.top-type text {
+    padding-left: 20rpx;
+}
+
+.address {
+    color: #333333;
+    font-size: 24rpx;
+    display: flex;
+    padding: 30rpx 30rpx 0;
+}
+
+.address-tips {
+    width: 54rpx;
+    text-align: center;
+    height: 54rpx;
+    line-height: 54rpx;
+    border-radius: 50%;
+    background-color: #EEEEEE;
+    margin-left: -15rpx;
+    font-size: 24rpx
+}
+
+.address-text {
+    width: calc(100% - 74rpx);
+    margin-left: 20rpx;
+    padding-top: 10rpx;
+}
+
+.white {
+    margin-top: -30rpx;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+}
+
+.list {
+    padding: 0 30rpx;
+    box-sizing: border-box;
+}
+
+.item {
+    padding-bottom: 40rpx;
+    padding-left: 40rpx;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.item:first-child {
+    padding-top: 30rpx;
+}
+
+.item::after {
+    position: absolute;
+    content: '';
+    background-color: #DDDDDD;
+    width: 14rpx;
+    height: 14rpx;
+    border-radius: 50%;
+    left: 0;
+    top: calc(50% - 6rpx);
+    z-index: 3;
+    border: 2rpx solid #ffffff;
+}
+
+.item::before {
+    position: absolute;
+    content: '';
+    background-color: #F0F0F0;
+    width: 2rpx;
+    height: 100%;
+    border-radius: 50%;
+    left: 8rpx;
+    top: 0;
+}
+
+.item-name {
+    display: flex;
+}
+
+.item-status {
+    font-weight: 600;
+    padding-right: 20rpx;
+}
+
+.item-time {
+    color: #868686;
+}
+
+.item-text {
+    color: #868686;
+    font-size: 24rpx;
+    line-height: 40rpx;
+    margin-top: 20rpx;
+}
+
+.item:first-child .item-time,
+.item:first-child .item-text {
+    color: #ff8100 !important;
+}