rider1

app.json

@@ -1,5 +1,9 @@
 {
-  "pages": ["pages/index/index", "pages/logs/logs"],
+  "pages": [
+    "pages/index/index",
+    "pages/logs/logs",
+    "pages/details/details"
+  ],
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
@@ -39,4 +43,4 @@
     "van-calendar": "@vant/weapp/calendar/index",
     "van-uploader": "@vant/weapp/uploader/index"
   }
-}
+}

pages/details/details.js

@@ -0,0 +1,66 @@
+
+
+// pages/details/details.js
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    date: "",
+    show: "ture",
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {},
+  serverd: function () {
+    const year = new Date().getFullYear();
+    const month = new Date().getMonth() + 1;
+    const day = new Date().getDate();
+    const hour = new Date().getHours();
+    const minute = new Date().getMinutes();
+    const second = new Date().getSeconds();
+    // const show1 = true
+    // console.log(year);
+    // console.log(this.show)
+    this.setData({
+      date: `${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`,
+      show:!true
+    });
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {},
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {},
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {},
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {},
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {},
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {},
+});

pages/details/details.json

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

pages/details/details.wxml

@@ -0,0 +1,91 @@
+<view style="margin: 5%; " class="all">
+  <view class="order_box" style="padding: 30rpx;box-sizing: border-box;">
+    <view class="order_title">
+      哈尔滨师范大学第一公寓2门321</view>
+    <view style="display: flex; justify-content: left; margin-left: 10rpx; color: #8b8b8b;">
+      <view class="order_smalltitle">
+        姓名：吴迪（先生）
+      </view>
+      <!-- <view class="order_phone">
+        15639670876
+      </view> -->
+    </view>
+  </view>
+
+  <view class="content-box">
+    <view class="content-title">
+      <image class="img-1" src="../../images/tupian2.png" alt="" />
+    </view>
+    <view style="width: 300rpx; float: left;">
+      <view class="content-detail" style="font-size: 29rpx;">
+        老式麻辣烫（微辣）
+      </view>
+      <view style="color:#8b8b8b;font-size: 26rpx;">
+        *2
+      </view>
+    </view>
+    <view class="order-money">
+      ￥9.9+20积分
+    </view>
+
+    <view class="divLine">
+    </view>
+    <view style="margin:3%">
+      <view class="card1" style=" margin-bottom: 8rpx;">
+        <text style="font-size:29rpx;color: #8b8b8b;line-height: 28px;">包装费</text>
+        <text style="font-size:29rpx;color: red;padding-right: 20rpx;">￥0</text>
+      </view>
+      <view class="card1">
+        <text style="font-size:29rpx;color: #8b8b8b;">配送费</text>
+        <text style="font-size:29rpx; color: red;font-weight: 500;  padding-right: 20rpx;">￥3</text>
+      </view>
+    </view>
+  </view>
+
+  <view class="remark" style="font-size: 28rpx;">
+    备注
+    <view class="remark-underline">
+    </view>
+    不要香菜，不要蒜
+  </view>
+
+
+  <view class="logistics-box">
+    <view class="card1" style="padding-top: 20rpx;">
+      <text style="font-size:29rpx;color: #8b8b8b;">订单编号：</text>
+      <text style="font-size:26rpx; font-weight: 500; padding-right: 20rpx;">989898854952336</text>
+    </view>
+    <view style=" margin: 20rpx 0rpx; background: #E0E3DA;width: 95%;height: 1rpx">
+    </view>
+    <view class="card1" style="padding-top: 15rpx;">
+      <text style="font-size:29rpx;color: #8b8b8b;">交易时间：</text>
+      <text style="font-size:26rpx; font-weight: 500; padding-right: 20rpx;">2023-04-25 15:56:18</text>
+    </view>
+    <view style=" margin: 20rpx 0rpx; background: #E0E3DA;width: 95%;height: 1rpx;">
+    </view>
+    <view class="card1" style="padding-top: 15rpx;">
+      <text style="font-size:29rpx;color: #8b8b8b;">积分抵扣：</text>
+      <text style="font-size:26rpx; font-weight: 500; padding-right: 20rpx;">30积分</text>
+    </view>
+    <view style=" margin: 20rpx 0rpx; background: #E0E3DA;width: 95%;height: 1rpx;">
+    </view>
+    <view class="card1" style="padding-top: 15rpx;">
+      <text style="font-size:29rpx;color: #8b8b8b;padding-bottom: 20rpx;">实付金额：</text>
+      <text style="font-size:26rpx; font-weight: 500; padding-right: 20rpx; color: #FF4500;">￥21.98</text>
+    </view>
+    <!-- 点击  是否显示  送达日期  通过wx:if = {{yipeisong}}   if yipeisong == true  显示  -->
+    <view wx:if="{{!show}}">
+      <view style=" margin: 20rpx 0rpx; background: #E0E3DA;width: 95%;height: 1rpx;">
+      </view>
+      <view style="font-size:29rpx;color: #8b8b8b;padding-bottom: 20rpx;">
+        送达时间：{{date}}
+      </view>
+    </view>
+  </view>
+
+
+
+  <view wx:if="{{show}}">
+    <button class="btns" bindtap="serverd">确认送达</button>
+  </view>
+</view>

pages/details/details.wxss

@@ -0,0 +1,137 @@
+page {
+  height: 100vh;
+  background: #eff0f5;
+}
+body{
+position: relative;
+}
+
+.order_box {
+  width: 690rpx;
+  background: #ffffff;
+  border-radius: 7px;
+}
+
+.order_title {
+  width: 100%;
+  display: block;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  font-size: 40rpx;
+  font-family: Source Han Sans CN, Source Han Sans CN-Medium;
+  font-weight: 500;
+  color: #3c3c3c;
+  margin-bottom: 20rpx;
+}
+
+.order_smalltitle {
+  font-size: 27rpx;
+}
+
+.order_phone {
+  font-size: 28rpx;
+}
+
+.content-box {
+  width: 690rpx;
+  background: #ffffff;
+  border-radius: 7px;
+  margin-top: 16rpx;
+  padding-bottom: 15rpx;
+}
+
+.content-title {
+  padding: 16rpx 0rpx 0rpx 0rpx;
+}
+
+.img-1 {
+  margin-left: 15rpx;
+  width: 115rpx;
+  height: 115rpx;
+  float: left;
+  margin-right: 48rpx;
+  border-radius: 7px;
+}
+
+.order-money {
+  float: right;
+  font-size: 26rpx;
+  color: red;
+  font-weight: 800;
+  margin-right: 38rpx;
+}
+
+.content-detail {
+  width: 400rpx;
+}
+
+.divLine {
+  background: #E0E3DA;
+  width: 90%;
+  height: 1rpx;
+  margin: 125rpx auto 1rpx;
+}
+
+.card1 {
+  display: flex;
+  justify-content: space-between;
+  color: #696969;
+}
+
+.remark {
+  width: 690rpx;
+  background: #ffffff;
+  border-radius: 7px;
+  margin-top: 20rpx;
+  box-sizing: border-box;
+  padding-left: 20rpx;
+  padding-top: 20rpx;
+  padding-bottom: 10rpx;
+  color: #8b8b8b;
+}
+
+.remark-underline {
+  background: #E0E3DA;
+  width: 95%;
+  height: 1rpx;
+  margin: 15rpx 0rpx;
+}
+
+.logistics-box {
+  margin-top: 20rpx;
+  padding-top: 10rpx;
+  width: 690rpx;
+  font-size: 29rpx;
+  background: #ffffff;
+  border-radius: 7px;
+  padding-left: 20rpx;
+  box-sizing: border-box;
+}
+
+.logistic-information-left {
+  float: left;
+  color: #8b8b8b;
+}
+
+.logistic-information-right {
+  float: right;
+  margin-right: 20rpx;
+  color: #8b8b8b;
+}
+
+.tabbar {
+  margin-top: 15rpx;
+  padding-bottom: 10rpx;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+}
+.btns{
+  /* position: absolute; */
+  margin-top: 30rpx;
+  width: 700rpx;
+  /* bottom: 20rpx; */
+  color: #eff0f5;
+  border-radius:70rpx;
+  background-color: #FF7F50;
+}

pages/index/index.js

@@ -44,5 +44,10 @@ Page({
       userInfo: e.detail.userInfo,
       hasUserInfo: true
     })
+  },
+  go:function(){
+    wx.navigateTo({
+      url: '/pages/details/details',
+    })
   }
 })

pages/index/index.wxml

@@ -38,7 +38,7 @@
   <view class="card" bindtap="detail">
     <view class="card2">
       <text style="font-size:12px;">订单编号：98989898989</text>
-      <text style="font-size:12px;">详情></text>
+      <text style="font-size:12px;" bindtap="go">详情></text>
     </view>
     <van-divider />
     <view class="card1">
@@ -58,7 +58,7 @@
   </view>
 </template>
 <template name="card1">
-  <view class="card">
+  <view class="card" style="height: 273rpx;">
     <view class="card2">
       <text style="font-size:12px;">订单编号：98989898989</text>
       <text style="font-size:12px;">详情></text>

pages/index/index.wxss

@@ -30,7 +30,7 @@
 .card{
   width: 90%;
   margin: auto;
-  height: 270rpx;
+  height: 250rpx;
   background: #fff;
   border-radius: 10rpx;
   margin-top: 18rpx;