订单详情

app.json

@@ -7,7 +7,8 @@
     "pages/receiveCoupon/receiveCoupon",
     "pages/logs/logs",
     "pages/welfareMall/personal/personal",
-    "pages/welfareMall/historical/historical"
+    "pages/welfareMall/historical/historical",
+    "pages/welfareMall/order/orderCompletion"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/welfareMall/historical/historical.js

@@ -57,6 +57,13 @@ Page({
 
   },
 
+  getCompletion(e) {
+    const url = "../order/orderCompletion?id=" + e.currentTarget.dataset.id
+    wx.redirectTo({
+        url
+    })
+  },
+
   /**
    * 用户点击右上角分享
    */

pages/welfareMall/historical/historical.wxml

@@ -21,7 +21,7 @@
         </view>
       </view>
       <view class="content-line"></view>
-      <view class="content-lower flex-row">
+      <view class="content-lower flex-row" catchtap="getCompletion">
         <view class="lower-total">共1件商品 合计￥9.9</view>
         <view class="lower-order-style flex-row">
           <view class="lower-order-text">订单详情</view>

pages/welfareMall/order/orderCompletion.js

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

pages/welfareMall/order/orderCompletion.json

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

pages/welfareMall/order/orderCompletion.wxml

@@ -0,0 +1,49 @@
+<!--pages/welfareMall/order/orderCompletion.wxml-->
+<view class="order flex-column">
+  <view class="order-style flex-column">
+    <view class="order-state flex-column">
+      <view class="order-state-title">订单已完成</view>
+      <view class="order-state-text">感谢您对沪上阿姨的喜爱与支持，欢迎再度光临</view>
+    </view>
+    <view class="order-details flex-column">
+      <view class="content-hm flex-column">
+        <view class="content-head flex-row">
+          <view class="content-head-text">订单详情</view>
+        </view>
+        <view class="content-middle flex-row">
+          <view class="middle-it flex-row">
+            <image class="middle-img" src="/images/welfareMall/middle_img.png" />
+            <view class="middle-text">圣诞优惠券包</view>
+          </view>
+          <view class="middle-num flex-column">
+            <view class="middle-num-money">￥0.0</view>
+            <view class="money-num-count">x1</view>
+          </view>
+        </view>
+      </view>
+      <view class="content-payment flex-row">
+        <view class="content-payment-mode">支付方式</view>
+        <view class="content-payment-mode">微信支付</view>
+      </view>
+      <view class="content-line"></view>
+      <view class="content-lower flex-row" catchtap="getCompletion">
+        <view class="lower-total">共1件商品 合计￥9.9</view>
+      </view>
+    </view>
+    <view class="order-information flex-column">
+      <view class="order-information-code flex-row">
+        <view class="code-text">订单编号</view>
+        <view class="code-num">123455678897978779799</view>
+      </view>
+      <view class="order-information-date flex-row">
+        <view class="date-text">交易时间</view>
+        <view class="date-time">2021-11-24 14:20:38</view>
+      </view>
+    </view>
+    <view class="order-rt flex-row">
+      <view class="order-refund flex-row">
+        <view class="lower-order-text">申请退款</view>
+      </view>
+    </view>
+  </view>
+</view>

pages/welfareMall/order/orderCompletion.wxss

@@ -0,0 +1,192 @@
+/* pages/welfareMall/order/orderCompletion.wxss */
+.order{
+  width: 750rpx;
+  height: auto;
+  padding-bottom: 119rpx; 
+  background: #F7F7F7;
+}
+
+/* 垂直方向布局，水平居中 **/
+.flex-column{
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: left;
+}
+
+/* 水平方向布局，垂直居中 **/
+.flex-row{
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.order-state{
+  width: 502rpx;
+  height: 100rpx;
+  margin-top: 50rpx;
+}
+
+.order-state-title{
+  font-size: 36rpx;
+  font-weight: 500;
+  color: #444444;
+}
+
+.order-state-text{
+  font-size: 22rpx;
+  font-weight: 500;
+  color: #444444;
+  margin-top: 14rpx;
+}
+
+/* 订单详情 **/
+.order-details{
+  width: 716rpx;
+  height: 433rpx;
+  background: #FFFFFF;
+  border-radius: 10rpx;
+  margin-top: 16rpx;
+}
+
+.content-hm{
+  width: 680rpx;
+  height: 260rpx;
+}
+.content-head{
+  width: 676rpx;
+  height: 22rpx;
+  justify-content: space-between;
+}
+
+.content-head-text{
+  width: 211rpx;
+  height: 28rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #444444;
+}
+
+.content-head{
+  width: 676rpx;
+  height: 40rpx;
+  justify-content: space-between;
+  margin-top: 30rpx;
+}
+
+.content-middle{
+  width: 676rpx;
+  height: 180rpx;
+  justify-content: space-between;
+}
+
+.middle-img{
+  width: 160rpx;
+  height: 119rpx;
+}
+
+.middle-text{
+  width: 180rpx;
+  height: 36rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #444444;
+  margin-left: 36rpx;
+  overflow: hidden;
+	white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-bottom: 34rpx;
+}
+
+.middle-num{
+  align-items: flex-end;
+}
+
+.middle-num-money{
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #444444;
+  margin-top: 10rpx;
+}
+
+.money-num-count{
+  font-size: 22rpx;
+  font-weight: 500;
+  color: #A0A0A0;
+}
+
+.content-line{
+  width: 679rpx;
+  height: 1rpx;
+  background: #A0A0A0;
+}
+
+.content-lower{
+  width: 676rpx;
+  height: 90rpx;
+  justify-content: space-between;
+}
+
+.lower-total{
+  font-size: 24rpx;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #444444;
+}
+
+.content-payment{
+  width: 676rpx;
+  height: 40rpx;
+  justify-content: space-between;
+  margin-bottom: 30rpx;
+}
+
+.content-payment-mode{
+  font-size: 24rpx;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #444444;
+}
+
+.order-information{
+  width: 716rpx;
+  height: 176rpx;
+  background: #FFFFFF;
+  border-radius: 10rpx;
+  margin-top: 20rpx;
+  justify-content: center;
+}
+
+.order-information-code,.order-information-date{
+  justify-content: space-between;
+  width: 676rpx;
+  height: 50rpx;
+}
+
+.code-text,.code-num,.date-text,.date-time{
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #444444;
+}
+
+.order-rt{
+  width: 676rpx;
+  height: 70rpx;
+  justify-content: flex-end;
+  margin-top: 30rpx;
+}
+
+.order-refund{
+  width: 150rpx;
+  height: 51rpx;
+  background: #FFFFFF;
+  border: 1rpx solid #B01717;
+  border-radius: 10rpx;
+}
+
+.lower-order-text{
+  font-size: 22rpx;
+  font-weight: 500;
+  color: #B01717;
+}