tab3

app.json

@@ -13,7 +13,10 @@
     "pages/help/address/index/index",
     "pages/help/address/edit/index",
     "pages/shop/detail/index",
-    "pages/shop/success/index"
+    "pages/shop/success/index",
+    "pages/order/detail/index",
+    "pages/order/detail-group/index",
+    "pages/order/success/index"
   ],
   "window": {
     "navigationBarTextStyle": "black",

app.wxss

@@ -138,6 +138,9 @@ page-container .content{
 .spliter{
   border-bottom: 1px solid rgba(153, 153, 153, 0.2);
 }
+.spliter.dashed{
+  border-bottom: 1px dashed rgba(153, 153, 153, 0.2);
+}
 .money,.money-promation,.money-normal,.money-disable{
   font-size: 36rpx;
   font-weight: 500;
@@ -163,4 +166,13 @@ page-container .content{
   text-decoration: line-through;
   font-size: 28rpx;
   font-weight:normal;
+}
+
+.bottom-bar{
+  border-radius: 24rpx 24rpx 0 0;
+  padding:24rpx 24rpx 84rpx;
+  position:fixed;
+  bottom:0;
+  left:0;right:0;
+  background-color: #fff;
 }

pages/order/detail-group/index.js

@@ -0,0 +1,72 @@
+// pages/order/detail-group/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  goToSuccess(){
+    wx.navigateTo({
+      url: '/pages/order/success/index',
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/order/detail-group/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/order/detail-group/index.wxml

@@ -0,0 +1,65 @@
+<view class="page-container prd-info">
+  <view class="head">
+    <image class="image" src="/assets/imgs/for_test/woman.png"/>
+    <view class="center">
+      <view class="name">【洗吹】精致造型</view>
+      <view class="tags">
+        <view class="tag">周一至周五可用</view>
+        <view class="tag">免预约</view>
+      </view>
+    </view>
+    <view class="money money-normal">9.9</view>
+  </view>
+  <view class="spliter dashed"></view>
+  <view class="qrcode" bind:tap="goToSuccess">
+    二维码区域，小程序存储总量限制
+  </view>
+</view>
+
+<view class="page-container address">
+  <view class="left">
+    <view class="text1">椰岛造型</view>
+    <view class="text2">距离 2.1km</view>
+  </view>
+  <view class="right location">
+    <view class="icon-con">
+      <image class="icon" src="/assets/icon/shop/location@2x.png"/>
+    </view>
+    <view class="text">导航</view>
+  </view>
+  <view class="right phone">
+    <view class="icon-con">
+      <image class="icon" src="/assets/icon/shop/phone@2x.png"/>
+    </view>
+    <view class="text">电话</view>
+  </view>
+</view>
+
+<view class="page-container order-info">
+  <view class="title">订单信息</view>
+  <view class="spliter"></view>
+  <view class="kv">
+    <view class="key">交易订单</view>
+    <view class="value">4972003158292222817</view>
+    <view class="copy">复制</view>
+  </view>
+  <view class="kv">
+    <view class="key">交易方式</view>
+    <view class="value">微信支付</view>
+  </view>
+  <view class="kv">
+    <view class="key">手机号码</view>
+    <view class="value">157****0627</view>
+  </view>
+  <view class="kv">
+    <view class="key">下单时间</view>
+    <view class="value">2024/10/10 12:03:21</view>
+  </view>
+</view>
+
+
+<view class="bottom-bar">
+  <button class="button button1" plain size="mini">取消订单</button>
+  <button class="button button2" plain size="mini">联系客服</button>
+</view>
+<view class="patch"></view>

pages/order/detail-group/index.wxss

@@ -0,0 +1,131 @@
+.page-container .title{
+  font-weight: 600;
+  font-size:32rpx;
+  display: flex;
+  align-items: center;
+}
+
+.prd-info .head{
+  display: flex;
+}
+.prd-info .head .image{
+  width:120rpx;height:120rpx;
+}
+.prd-info .head .center{
+  flex: 1;
+  margin-left:20rpx;
+  margin-top:10rpx;
+}
+.prd-info .head .money{
+  margin-top:10rpx;
+}
+.prd-info .head .tags{
+  margin-top:22rpx;
+}
+.prd-info .spliter{
+  margin:20rpx 0 30rpx 0;
+}
+.prd-info .qrcode{
+  width:400rpx;height:400rpx;
+  margin: 0 auto;
+  background-color: #999;
+}
+
+.address{
+  display: flex;
+}
+.address .left{
+  flex:1;
+}
+.address .left .text1{
+  font-size: 36rpx;
+  font-weight: 500;
+}
+.address .left .text2{
+  font-size: 26rpx;
+  margin-top:40rpx;
+}
+.address .icon-con{
+  background-color: rgba(153, 153, 153, 0.1);
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  padding:8rpx;
+}
+.address .icon{
+  width:30rpx;height:30rpx;
+}
+.address .right{
+  font-size: 26rpx;
+  color: #888888;
+  margin-left:48rpx;
+  text-align: center;
+}
+.address .right .text{
+  margin-top:32rpx;
+}
+
+
+.order-info .kv{
+  display: flex;
+  align-items: center;
+  height:58rpx;
+}
+.order-info .spliter{
+  margin:28rpx 0 18rpx 0;
+}
+.order-info .kv .key{
+  font-size: 26rpx;
+  color: #888888;
+}
+.order-info .kv .value{
+  font-size: 28rpx;
+  margin-left:30rpx;
+  flex:1;
+  display:flex;
+  align-items: center;
+}
+.order-info .kv .copy{
+  font-size: 20rpx;
+  border-radius: 60rpx;
+  border: 0.5px solid rgba(153, 153, 153, 0.5);
+  color: #888888;
+  line-height: 32rpx;
+  padding:0 14rpx;
+}
+.order-info .kv .tag{
+  border: 1rpx solid #EB0000;
+  color: #EB0000;
+  font-size: 24rpx;
+  border-radius: 8rpx;
+  line-height: 40rpx;
+  padding:0 10rpx;
+  margin-left: 32rpx;
+}
+
+
+
+.bottom-bar{
+  padding:34rpx 34rpx 94rpx;
+  text-align: right;
+}
+.bottom-bar .button{
+  line-height: 72rpx;
+  padding:0 36rpx;
+  font-weight: normal;
+  border-radius: 18rpx;
+}
+.bottom-bar .button1{
+  color: #555555;
+  border: 1rpx solid rgba(153, 153, 153, 0.5);
+  font-size: 32rpx;
+}
+.bottom-bar .button2{
+  color: #1A4DEB;
+  border: 1rpx solid #1A4DEB;
+  font-size: 32rpx;
+  margin-left:30rpx;
+}
+.patch{
+  padding-bottom:200rpx;
+}

pages/order/detail/index.js

@@ -0,0 +1,66 @@
+// pages/order/detail/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/order/detail/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "订单详情"
+}

pages/order/detail/index.wxml

@@ -0,0 +1,87 @@
+<view class="order-status waiting">待接单</view>
+<view class="page-container sender">
+  <view class="title">跑腿员</view>
+  <view class="spliter"></view>
+  <view class="info">
+    <image class="avatar" src="/assets/imgs/for_test/avatar.png"/>
+    <view class="center">
+      <view class="name">张三</view>
+      <view class="desc">已安全送达0件</view>
+    </view>
+    <button class="button" plain size="mini">
+      <image class="icon" src="/assets/icon/shop/phone@2x.png"/>
+      <label>联系他</label>
+    </button>
+  </view>
+</view>
+<view class="page-container address">
+  <view class="title">送货地址</view>
+  <view class="spliter"></view>
+  <view class="text">朝阳时代西锦12栋1单元2072</view>
+  <view class="user">何灵先生 158****3822</view>
+</view>
+<view class="page-container package-info">
+  <view class="title">
+    <view class="left">取件信息</view>
+    <view class="right">
+      <label>送达时间</label>
+      <label class="time">18:00～21:00</label>
+    </view>
+  </view>
+  <view class="spliter"></view>
+  <view class="package">
+    <view class="p-title">妈妈驿站 (朝阳时代西锦)  共5件包裹</view>
+    <view class="code-list">
+      <view class="item">1-1-1111</view>
+      <view class="item">2-2-2222</view>
+      <view class="item">3-3-3333</view>
+      <view class="item">4-4-4444</view>
+    </view>
+  </view>
+  <view class="spliter"></view>
+  <view class="package">
+    <view class="p-title">菜鸟驿站 (朝阳时代西锦)  共1件包裹</view>
+    <view class="code-list">
+      <view class="item">1-1-1111</view>
+      <view class="item">2-2-2222</view>
+      <view class="item">3-3-3333</view>
+      <view class="item">4-4-4444</view>
+    </view>
+  </view>
+</view>
+<view class="page-container send-way">
+  <view class="title">
+    <view class="left">送达方式</view>
+    <view class="right">敲门递件</view>
+  </view>
+
+</view>
+<view class="page-container order-info">
+  <view class="title">订单信息</view>
+  <view class="spliter"></view>
+  <view class="kv">
+    <view class="key">订单编号</view>
+    <view class="value">2024071166325555</view>
+    <view class="copy">复制</view>
+  </view>
+  <view class="kv">
+    <view class="key">提交时间</view>
+    <view class="value">2024-07-11 16:46:32</view>
+  </view>
+  <view class="kv">
+    <view class="key">取件数量</view>
+    <view class="value">5</view>
+  </view>
+  <view class="kv">
+    <view class="key">跑腿费用</view>
+    <view class="value">
+      <view class="money">3.5</view>
+      <view class="tag">先享后付</view>
+    </view>
+  </view>
+</view>
+<view class="bottom-bar">
+  <button class="button button1" plain size="mini">取消订单</button>
+  <button class="button button2" plain size="mini">联系客服</button>
+</view>
+<view class="patch"></view>

pages/order/detail/index.wxss

@@ -0,0 +1,165 @@
+.page-container .title{
+  font-weight: 600;
+  font-size:32rpx;
+  display: flex;
+  align-items: center;
+}
+.page-container .title .left{
+  flex:1;
+}
+.page-container .title .right{
+  font-weight: normal;
+  font-size: 30rpx;
+}
+.page-container .title .right .time{
+  color:#EB0000;
+  font-weight: 500;
+  font-size: 32rpx;
+  margin-left: 10rpx;
+}
+.order-status{
+  margin:50rpx 20rpx;
+  display: flex;
+  align-items: center;
+  font-size: 40rpx;
+  font-weight: 600;
+}
+.order-status.waiting{
+  color:#1A4DEB;
+}
+.order-status::before{
+  content: "";
+  display: block;
+  width:10rpx;height:44rpx;
+  margin-right:24rpx;
+  border-radius: 6rpx;
+  background-color:#000;
+}
+.order-status.waiting::before{
+  background-color: #1A4DEB;
+}
+.page-container .spliter{
+  margin:24rpx 0 40rpx 0;
+}
+.sender .info{
+  display: flex;
+  align-items: center;
+}
+.sender .info .avatar{
+  width:100rpx;height:100rpx;
+}
+.sender .info .center{
+  margin-left:24rpx;
+  flex:1;
+}
+.sender .info .name{
+  font-size: 30rpx;
+  font-weight: 600;
+}
+.sender .info .desc{
+  font-size: 26rpx;
+  color: #888888;
+  margin-top:24rpx;
+}
+.sender .info .button{
+  font-size: 24rpx;
+  font-weight: normal;
+  border: 0.6px solid #1A4DEB;
+  color:#1A4DEB;
+  border-radius: 12rpx;
+}
+.sender .info .icon{
+  width:24rpx;height:24rpx;
+}
+.address .text{
+  font-size: 34rpx;
+  font-weight: 500;
+}
+.address .user{
+  font-size: 32rpx;
+  color: #888888;
+  margin-top:26rpx;
+}
+.package-info{
+
+}
+
+.package-info .package{
+}
+.package-info .package .p-title{
+  font-size: 30rpx;
+  color: #888888;
+}
+.package-info .package .code-list{
+  font-size: 34rpx;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: 30rpx;
+  column-gap: 84rpx;
+  margin-top: 30rpx;
+}
+.package-info .package .item{
+
+}
+.order-info .kv{
+  display: flex;
+  align-items: center;
+  height:64rpx;
+}
+.order-info .kv .key{
+  font-size: 30rpx;
+  color: #888888;
+}
+.order-info .kv .value{
+  font-size: 32rpx;
+  margin-left:30rpx;
+  flex:1;
+  display:flex;
+  align-items: center;
+}
+.order-info .kv .copy{
+  font-size: 22rpx;
+  border-radius: 60rpx;
+  background-color: #EBF0FF;
+  color:#1A4DEB;
+  line-height: 32rpx;
+  padding:0 14rpx;
+}
+.order-info .kv .tag{
+  border: 1rpx solid #EB0000;
+  color: #EB0000;
+  font-size: 24rpx;
+  border-radius: 8rpx;
+  line-height: 40rpx;
+  padding:0 10rpx;
+  margin-left: 32rpx;
+}
+.bottom-bar{
+  padding:34rpx 34rpx 94rpx;
+  text-align: right;
+}
+.bottom-bar .button{
+  line-height: 72rpx;
+  padding:0 36rpx;
+  font-weight: normal;
+  border-radius: 18rpx;
+}
+.bottom-bar .button1{
+  color: #555555;
+  border: 1rpx solid rgba(153, 153, 153, 0.5);
+  font-size: 32rpx;
+}
+.bottom-bar .button2{
+  color: #1A4DEB;
+  border: 1rpx solid #1A4DEB;
+  font-size: 32rpx;
+  margin-left:30rpx;
+}
+.patch{
+  padding-bottom:200rpx;
+}
+
+.send-way .left{
+  padding:10rpx 0;
+}

pages/order/index/index.js

@@ -11,6 +11,16 @@ Page({
     const tabIndex = event.currentTarget.dataset.index;
     this.setData({tabIndex})
   },
+  goToDetail(){
+    wx.navigateTo({
+      url: '/pages/order/detail/index',
+    })
+  },
+  goToGroupDetail(){
+    wx.navigateTo({
+      url: '/pages/order/detail-group/index',
+    })
+  },
 
   /**
    * 生命周期函数--监听页面加载

pages/order/index/index.wxml

@@ -8,7 +8,58 @@
   </view>
 </view>
 
-<view class="list-empty">
+<view class="order-list" wx:if="{{tabIndex==0}}">
+  <view class="item" wx:for="{{3}}" wx:key="index" bind:tap="goToDetail">
+    <view class="head">
+      <view class="icon-con">
+        <image class="icon" src="/assets/icon/order/package@2x.png"/>
+      </view>
+      <view class="center">代取快递</view>
+      <view class="status {{index==0?'waiting':(index==1?'receiving':'')}}">
+        {{index==0?'待接单':(index==1?'已接单':'')}}
+      </view>
+    </view>
+    <view class="content">
+      <view class="spliter"></view>
+      <view class="address">朝阳时代西锦12栋1单元2072</view>
+      <view class="time">下单时间：2024-12-07 10:58:31</view>
+      <view class="pay" wx:if="{{index==2}}">
+        <view class="left">
+          <label>跑腿费用</label>
+          <label class="money">3.4</label>
+        </view>
+        <button class="button" type="primary" size="mini">立即支付</button>
+      </view>
+    </view>
+  </view>
+</view>
+<view class="group-list" wx:if="{{tabIndex==1}}">
+  <view class="item status-waiting" wx:for="{{3}}" wx:key="index" bind:tap="goToGroupDetail">
+    <view class="head">
+      <view class="name">
+        <label>椰岛造型</label>
+        <image class="icon" src="/assets/icon/order/right-arrow@2x.png"/>
+      </view>
+      <view class="status">待使用</view>
+    </view>
+    <view class="content">
+      <image class="image" src="/assets/imgs/for_test/woman.png"/>
+      <view class="center">
+        <view>【洗吹】精致造型</view>
+        <view class="tags">
+          <view class="tag">周一至周五可用</view>
+          <view class="tag">免预约</view>
+        </view>
+      </view>
+      <view class="money money-normal">9.9</view>
+    </view>
+    <view class="btns">
+      <button class="button button1" plain size="mini">再来一单</button>
+      <button class="button button2" plain size="mini">查看券码</button>
+    </view>
+  </view>
+</view>
+<view class="list-empty" wx:if="{{false}}">
   <image class="icon" src="/assets/icon/order/empty@2x.png"/>
   <view class="text">暂无相关订单</view>
 </view>

pages/order/index/index.wxss

@@ -34,6 +34,84 @@
   opacity: 1;
 }
 
+.order-list{}
+.order-list .item{
+  background-color: #fff;
+  border-radius: 18rpx;
+  margin:24rpx 0;
+  padding:30rpx;
+}
+.order-list .head{
+  display: flex;
+  align-items: center;
+}
+.order-list .head .center{
+  margin-left:24rpx;
+  flex:1;
+  font-size:34rpx;
+  font-weight: 500;
+}
+.order-list .head .status{
+  font-size: 32rpx;
+}
+.order-list .head .status.waiting{
+  color: #1A4DEB;
+}
+.order-list .head .status.receiving{
+  color:#FF8400;
+}
+.order-list .head .icon-con{
+  padding: 10rpx;
+  background-color: #1A4DEB;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+}
+.order-list .head .icon-con .icon{
+  width:36rpx;height:36rpx;
+  display: inline-block;
+}
+.order-list .head{
+  display: flex;
+}
+.order-list .content{
+  margin-top:24rpx;
+  margin-left:80rpx;
+}
+.order-list .content .address{
+  margin-top:30rpx;
+  font-size: 34rpx;
+  font-weight: 500;
+}
+.order-list .content .time{
+  font-size: 26rpx;
+  color:#888888;
+  margin-top:24rpx;
+  padding-bottom:48rpx;
+}
+.order-list .content .pay{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top:12rpx;
+  font-size: 26rpx;
+  color: #888888;
+}
+.order-list .content .pay .money{
+  margin-left:12rpx;
+}
+.order-list .content .pay .left{
+  border-bottom: 0.5px solid rgba(136, 136, 136, 0.2);
+  padding:20rpx 0;
+}
+.order-list .content .pay .button{
+  margin:0;
+  border-radius: 18rpx;
+  font-size:28rpx;
+  line-height: 1;
+  padding:20rpx 24rpx;
+}
+
 .list-empty{
   text-align: center;
   margin-top:380rpx;
@@ -44,4 +122,57 @@
 .list-empty .text{
   font-size:30rpx;
   color:#7C8695
+}
+
+.group-list .item{
+  background-color: #fff;
+  border-radius: 18rpx;
+  padding: 30rpx 40rpx;
+  margin:24rpx 0;
+}
+.group-list .item.status-waiting .status{
+  color: #1A4DEB;
+}
+.group-list .head{
+  display: flex;
+}
+.group-list .head .name{
+  font-size: 32rpx;
+  font-weight: 600;
+  flex:1;
+  display: flex;
+  align-items: center;
+}
+.group-list .head .name .icon{
+  width:28rpx;height:28rpx;
+  margin-left:4rpx;
+}
+
+.group-list .content{
+  display: flex;
+  margin-top:30rpx;
+}
+.group-list .content .image{
+  width:160rpx;height:160rpx;
+}
+.group-list .content .center{
+  flex:1;
+  margin-left:40rpx;
+}
+.group-list .content .tags{
+  margin-top:22rpx;
+}
+.group-list .btns{
+  text-align: right;
+}
+.group-list .btns .button{
+  font-size: 27rpx;
+  font-weight: normal;
+  line-height: 1;
+  padding:16rpx 26rpx;
+  border-radius: 12rpx;
+}
+.group-list .btns .button2{
+  color: #1A4DEB;
+  margin-left: 20rpx;
 }

pages/order/success/index.js

@@ -0,0 +1,66 @@
+// pages/order/success/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/order/success/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/order/success/index.wxml

@@ -0,0 +1,9 @@
+<view class="success">
+  <icon class="icon" type="success" size="120rpx" color="#1A4DEB"/>
+  <view class="msg">扫码核销成功</view>
+  <view class="prd-indo">
+    <label class="name">【洗吹】精致造型</label>
+    <label class="money">9.9</label>
+  </view>
+  <button class="button" size="mini">完成</button>
+</view>

pages/order/success/index.wxss

@@ -0,0 +1,35 @@
+.success{
+  background-color: #fff;
+  text-align: center;
+  height: 100%;
+  width:100%;
+  position: absolute;
+  padding-top:150rpx;
+  box-sizing: border-box;
+}
+.success .msg{
+  font-size: 36rpx;
+  font-weight: 500;
+  margin-top:38rpx;
+}
+.success .prd-indo{
+  border-top:1rpx dashed rgba(153, 153, 153, 0.5);
+  border-bottom:1rpx dashed rgba(153, 153, 153, 0.5);
+  padding:48rpx 0;
+  display: flex;
+  text-align: left;
+  margin:100rpx 50rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+.success .prd-indo .name{
+  flex:1;
+}
+.success .button{
+  position: absolute;
+  line-height: 90rpx;
+  width:320rpx;
+  background-color: #F1F1F1;
+  left:calc(50% - 160rpx);
+  bottom:180rpx;
+}