init commit

pages/logistics_details/logistics_details.js

@@ -1,3 +1,4 @@
+const { guessExpressCom, getExpressDetail } = require("../../api/express")
 // pages/logistics_details/logistics_details.js
 Page({
 
@@ -5,14 +6,36 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    records: [],
+    num: ""
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    // guessExpressCom({
+    //   num: "YT7460149632645",
+    //   key: "AjjPbmMP4727",
+    //   success(resp) {
+    //     console.log(resp);
+    //   }
+    // })
+    this.setData({
+      num: "YT7460149632645"
+    })
+    getExpressDetail({
+      num: this.data.num,
+      success: (res) => {
+        console.log(res);
+        if (res.data.status === "200") {
+          console.log(res.data.data);
+          this.setData({
+            records: res.data.data
+          })
+        }
+      }
+    })
   },
 
   /**

pages/logistics_details/logistics_details.wxml

@@ -1,2 +1,10 @@
 <!--pages/logistics_details/logistics_details.wxml-->
-<text>TODO: 物流详情</text>
+<view style="padding:48rpx 48rpx 92rpx;">
+  <view style="margin-bottom: 36rpx;">圆通快递：{{num}}</view>
+  <view wx:for="{{records}}" 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>

pages/logistics_details/logistics_details.wxss

@@ -1 +1,46 @@
-/* pages/logistics_details/logistics_details.wxss */
+/* pages/logistics_details/logistics_details.wxss */
+.record-item {
+  /* padding-bottom: 48rpx; */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-left: 48rpx;
+}
+
+.record-item:not(:last-child) {
+  padding-bottom: 48rpx;
+}
+
+.time {
+  font-size: 24rpx;
+}
+
+.dot {
+  position: absolute;
+  left: 0;
+  top: 9rpx;
+  width: 16rpx;
+  height: 16rpx;
+  background-color: gray;
+  opacity: 50%;
+  border-radius: 50%;
+  z-index: 999;
+}
+
+.record-item:nth-child(2) .dot {
+  background-color: red;
+  opacity: 1;
+  width: 24rpx;
+  height: 24rpx;
+  left: -6rpx;
+}
+
+.line {
+  position: absolute;
+  left: 8rpx;
+  top: 0;
+  height: 100%;
+  width: 2rpx;
+  background-color: gray;
+  opacity: 50%;
+}