Signed-off-by: yukangzhe <382985154@qq.com>

app.json

@@ -1,6 +1,7 @@
 {
   "plugins": {},
   "pages": [
+    "pages/orderClassDetail/orderClassDetail",
     "pages/index/index",
     "pages/leaveRecord/leaveRecord",
     "pages/leave/leave",
@@ -19,7 +20,8 @@
     "pages/theClasses/theClasses",
     "pages/growUp/growUp",
     "pages/evaluation/evaluation",
-    "pages/evaluationDetail/evaluationDetail"
+    "pages/evaluationDetail/evaluationDetail",
+    "pages/classOrder/classOrder"
   ],
   "window": {
     "backgroundTextStyle": "dark",

pages/classOrder/classOrder.js

@@ -0,0 +1,102 @@
+// pages/classOrder/classOrder.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    loading: '上拉加载',
+    flag: 0,
+    list:[
+      {},
+      {},
+      {},
+      {},
+      {},
+    ]
+  },
+
+  getDetail:function(){
+    wx.navigateTo({
+      url: '/pages/orderClassDetail/orderClassDetail',
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    if (this.data.flag == 0) {
+      this.setData({
+        loading: '加载中',
+        flag: 1
+      })
+      setTimeout(() => {
+        this.setData({
+          list: [{},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+          ],
+          loading: '没有更多数据',
+          flag: 2
+        })
+      }, 2000);
+    }
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/classOrder/classOrder.json

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

pages/classOrder/classOrder.wxml

@@ -0,0 +1,19 @@
+<view class="container">
+  <view class="order-view">
+    <view class="order-list">
+      <view class="order-box" wx:for="{{list}}" wx:key="index" bindtap="getDetail">
+        <view class="order-type">1v1</view>
+        <view class="order-name">小象钢琴</view>
+        <view class="order-nums">x 48次（48课时）</view>
+        <view class="order-addr">智慧汉阳校区</view>
+        <view class="order-price">原价：￥ 6000.00</view>
+        <view class="order-teacher">老师：小象老师</view>
+        <view class="order-payMoney">实付：<text>￥ 5500.00</text></view>
+        <view class="order-title">订单号</view>
+        <view class="order-orderNum">162390234A33C</view>
+        <view class="order-payTime">付款时间：2021-01-22 15:33</view>
+      </view>
+    </view>
+  </view>
+  <view class="loading">{{loading}}</view>
+</view>

pages/classOrder/classOrder.wxss

@@ -0,0 +1,88 @@
+/* pages/classOrder/classOrder.wxss */
+.container{
+  padding: 0;
+  margin: 0;
+}
+page{
+  background:#f1f1f1;
+}
+.order-box{
+  width: 660rpx;
+    margin: 20rpx auto 40rpx;
+    display: flex;
+    flex-wrap: wrap;
+    background: #FFF;
+    padding: 20rpx;
+    box-shadow: 0 0 15rpx #ccc;
+}
+.order-type{
+  background: #cc6031;
+    color: #FFF;
+    font-size: 24rpx;
+    height: 30rpx;
+    line-height: 30rpx;
+    margin-top: 15rpx;
+    margin-right: 10rpx;
+    padding: 0 10rpx;
+    border-radius: 5rpx;
+}
+.order-name{
+  font-size: 32rpx;
+  line-height: 40rpx;
+  padding-top: 9rpx;
+  width: 300rpx;
+}
+.order-nums{
+  margin-left: auto;
+    height: 60rpx;
+    line-height: 60rpx;
+}
+.order-addr{
+  width: 50%;
+    font-size: 32rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+}
+.order-price{
+  color: #999999;
+  height: 60rpx;
+  line-height:60rpx;
+  margin-left: auto;
+  text-decoration: line-through;
+}
+.order-teacher{
+  height: 60rpx;
+  line-height: 60rpx;
+  color:#999;
+  width: 50%;
+}
+.order-payMoney{
+  margin-left: auto;
+  width: 50%;
+  text-align: right;
+  color: #999;
+}
+.order-payMoney text{
+  color: #cc6031;
+    font-size: 36rpx;
+}
+.order-title{
+  color: #999;
+    height: 60rpx;
+    line-height: 60rpx;
+}
+.order-orderNum,.order-payTime{
+  margin-left: auto;
+    height: 60rpx;
+    line-height: 60rpx;
+    color: #999;
+}
+/* loading */
+.loading {
+  height: 200rpx;
+  line-height: 100rpx;
+  background: #f1f1f1;
+  color: #999;
+  text-align: center;
+}
+/* end */

pages/myself/myself.js

@@ -10,6 +10,12 @@ Page({
     childTitle:"我的",
   },
 
+  goNavigateTo(e) {
+    wx.navigateTo({
+      url: e.currentTarget.dataset.url
+    })
+  },
+
   /**
    * 生命周期函数--监听页面加载
    */

pages/myself/myself.json

@@ -1,3 +1,4 @@
 {
+  "navigationBarTitleText": "我的",
   "usingComponents": {}
 }

pages/myself/myself.wxml

@@ -22,7 +22,7 @@
 				</view>
 				<image lazy-load mode="aspectFill" class="li-arrow" src="{{imageUrl? imageUrl+'arrow0603.png' : ''}}"></image>
 			</view>
-			<view class="list-item" catchtap="goNavigateTo" data-url="/pages/orderList/orderList">
+			<view class="list-item" catchtap="goNavigateTo" data-url="/pages/classOrder/classOrder">
 				<view class="li-left">
 					<image lazy-load mode="aspectFill" class="li-icon" src="/images/my-classOrder.png"></image>
 					<text>课程订单</text>

pages/orderClassDetail/orderClassDetail.js

@@ -0,0 +1,74 @@
+// pages/orderClassDetail/orderClassDetail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  showImg:function(){
+    const list = ['https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',]
+    wx.previewImage({
+      current: list[0],
+      urls: list,
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/orderClassDetail/orderClassDetail.json

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

pages/orderClassDetail/orderClassDetail.wxml

@@ -0,0 +1,36 @@
+<view class="container">
+  <view class="detail-title">
+    <view class="order-name">小象钢琴</view>
+    <view class="order-money">￥ 5500.00</view>
+  </view>
+  <view class="class-detail">
+    <view class="class-title">校区名称：</view>
+    <view class="class-name detail">智慧汉阳校区</view>
+    <view class="class-title">课程类型：</view>
+    <view class="class-type detail">一对一</view>
+    <view class="class-title">课程次数：</view>
+    <view class="class-nums detail">48次（48课时）</view>
+    <view class="class-title">课程有效期：</view>
+    <view class="class-valid detail">2021-02-10 至 2021-03-01</view>
+  </view>
+  <view class="order-detail">
+    <view class="order-title">订单号：</view>
+    <view class="order-num detail">1512323523ADXZ123</view>
+    <view class="order-title">下单时间：</view>
+    <view class="order-payTime detail">2021-02-21 19:21</view>
+    <view class="order-title">支付方式：</view>
+    <view class="order-payType detail">现金</view>
+    <view class="order-title">我的合同：</view>
+    <view class="order-contract detail" bindtap="showImg">查看合同</view>
+  </view>
+  <view class="money-detail">
+    <view class="money-title">课程总价：</view>
+    <view class="money-price detail">￥ 6000.00</view>
+    <view class="money-title">物品总价：</view>
+    <view class="money-price detail">￥ 0.00</view>
+    <view class="money-title">活动折扣：</view>
+    <view class="money-price detail">-￥ 0.00</view>
+    <view class="money-title-other">实付金额：</view>
+    <view class="money-price-other">￥ 6000.00</view>
+  </view>
+</view>

pages/orderClassDetail/orderClassDetail.wxss

@@ -0,0 +1,65 @@
+/* pages/orderClassDetail/orderClassDetail.wxss */
+.container{
+  padding: 0;
+  margin: 0;
+  font-size: 28rpx;
+}
+.detail-title{
+  display: flex;
+    height: 100rpx;
+    line-height: 100rpx;
+    justify-content: space-between;
+    font-size: 32rpx;
+    border-top: 1px solid #CCC;
+    border-bottom: 1px solid #CCC;
+    width: 700rpx;
+    padding: 0 25rpx;
+}
+.class-detail,.money-detail,.order-detail{
+  width: 700rpx;
+  padding: 25rpx 25rpx 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.class-title,.order-title,.money-title{
+  max-width: 200rpx;
+  font-size: 28rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  color: #999;
+}
+.detail{
+  margin-right: auto;
+  width: 500rpx;
+  font-size: 28rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+.order-contract{
+  color: #cc6031;
+}
+.money-detail .detail{
+  margin-right: 0;
+  margin-left: auto;
+  text-align: right;
+}
+.money-title-other{
+  color: #999;
+  margin-left: auto;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+.money-price-other{
+  font-size: 36rpx;
+  color: #cc6031;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+
+.order-num,.order-payTime,.class-valid,.class-nums{
+  font-weight: 600;
+}
+.class-detail,.order-detail{
+  border-bottom: 20rpx solid #eee;
+}