'完成订单页'

app.json

@@ -1,6 +1,9 @@
 
 {
     "pages": [
+        "pages/teacherList/teacherList",
+        "pages/orderDetail/orderDetail",
+        "pages/myOrder/myOrder",
         "pages/index/index",
         "pages/myInfo/myInfo",
         "pages/receivedInvitation/receivedInvitation",
@@ -9,7 +12,6 @@
         "pages/teachAuthentication/teachAuthentication",
         "pages/stuCollectionTeach/stuCollectionTeach",
         "pages/coursePublish/coursePublish",
-        "pages/teacherList/teacherList",
         "pages/stuNeed/stuNeed",
         "pages/stuDetail/stuDetail",
         "pages/teachDetail/teachDetail",

pages/myOrder/myOrder.js

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

pages/myOrder/myOrder.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "我的订单"
+}

pages/myOrder/myOrder.wxml

@@ -0,0 +1,60 @@
+<!--pages/myOrder/myOrder.wxml-->
+
+<view class="orderWrapper">
+    <view class="myOrder" bindtap="toOrderDetatil">
+        <!-- 订单左侧部分 -->
+        <view class="orderContent">
+            <view>
+                <text>订单号</text>
+                <text class="orderDetail">xxx</text>
+            </view>
+            <view>
+                <text>订单内容</text>
+                <text class="orderDetail">xxx</text>
+            </view>
+            <view>
+                <text>订单日期</text>
+                <text class="orderDetail">2022-12-20</text>
+            </view>
+        </view>
+        <!-- 订单右侧部分 -->
+        <view class="orderStatus">
+            <view>
+                <text>对方</text>
+                <text class="orderDetail">教员</text>
+            </view>
+            <view>
+                <text>订单状态</text>
+                <text class="orderDetailStatus">待支付</text>
+            </view>
+        </view>
+    </view>
+    <view class="myOrder" bindtap="toOrderDetatil">
+        <!-- 订单左侧部分 -->
+        <view class="orderContent">
+            <view>
+                <text>订单号</text>
+                <text class="orderDetail">xxx</text>
+            </view>
+            <view>
+                <text>订单内容</text>
+                <text class="orderDetail">xxx</text>
+            </view>
+            <view>
+                <text>订单日期</text>
+                <text class="orderDetail">2022-12-20</text>
+            </view>
+        </view>
+        <!-- 订单右侧部分 -->
+        <view class="orderStatus">
+            <view>
+                <text>对方</text>
+                <text class="orderDetail">教员</text>
+            </view>
+            <view>
+                <text>订单状态</text>
+                <text class="orderDetailStatus">待支付</text>
+            </view>
+        </view>
+    </view>
+</view>

pages/myOrder/myOrder.wxss

@@ -0,0 +1,43 @@
+/* pages/myOrder/myOrder.wxss */
+
+/* 设置页面背景 */
+.orderWrapper{
+    height: 100%;
+    background-color: #E2F0D9;
+}
+.myOrder{
+    position: relative;
+    display: flex;
+    height: 160rpx;
+    background-color: #FFF2CC;
+    padding-left: 20rpx;
+    font-size: 28rpx;
+    margin: 20rpx;
+    border-radius: 20rpx;
+}
+
+.orderContent,
+.orderStatus{
+    height: 140rpx;
+    padding: 10rpx 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+/* 右侧部分的定位 */
+.orderStatus{
+    position: absolute;
+    right: 100rpx;
+}
+
+/* 设置活动内容左边距并加粗 */
+.orderDetail,
+.orderDetailStatus{
+    margin-left: 20rpx;
+    font-weight: bold;
+}
+/* 设置订单状态的字体颜色 */
+.orderDetailStatus{
+    color: red;
+}

pages/orderDetail/orderDetail.js

@@ -0,0 +1,81 @@
+// pages/orderDetail/orderDetail.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        pay: false
+
+    },
+
+    // 跳转到需求详情
+    toNeedDetail() {
+        wx.navigateTo({
+            url: '/pages/stuNeed/stuNeed',
+        })
+    },
+
+    // 跳转到课程详情
+    toCourseDetail() {
+        wx.navigateTo({
+            url: '/pages/stuNeed/stuNeed',
+        })
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/orderDetail/orderDetail.json

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

pages/orderDetail/orderDetail.wxml

@@ -0,0 +1,64 @@
+<!--pages/orderDetail/orderDetail.wxml-->
+
+<view class="orderWrapper">
+    <!-- 头部区域：订单号、头像 -->
+    <view class="orderHead">
+        <view class="orderHeadTitle">
+            <view>
+                <text>订单号</text>
+                <text class="orderDetail">xxx</text>
+            </view>
+            <view>
+                <text>对方</text>
+                <text class="orderDetail">X学员</text>
+            </view>
+        </view>
+        <image class="headImg" src="../../images/zly.jpeg"></image>
+    </view>
+    <!-- 中部区域：订单详情 -->
+    <view class="orderMid">
+        <view>
+            <text>对方ID</text>
+            <text class="orderDetail">xxx</text>
+        </view>
+        <view>
+            <text>需求号</text>
+            <text class="courseNum" bindtap="toNeedDetail">xxx</text>
+        </view>
+        <view>
+            <text>课程号</text>
+            <text class="courseNum" bindtap="toCourseDetail">xxx</text>
+        </view>
+        <view>
+            <text>需求金额</text>
+            <text class="orderDetail">xxx</text>
+        </view>
+    </view>
+    <view class="orderBottom">
+        <view>
+            <text>订单内容</text>
+            <text class="orderDetail">xxx</text>
+        </view>
+        <view>
+            <text>下单日期</text>
+            <text class="orderDetail">xxx</text>
+        </view>
+        <view>
+            <text>订单状态</text>
+            <text class="orderPayStatus">待支付</text>
+        </view>
+    </view>
+    <view class="orderPay">
+        <text>支付倒计时</text>
+        <text class="orderPayTime">00:32:02</text>
+    </view>
+    <view class="payWrapper">
+        <view wx:if="{{pay}}" class="payStatus">
+            <view>查看联系信息</view>
+        </view>
+        <view wx:else class="payStatus">
+            <view>教员支付</view>
+        </view>
+    </view>
+
+</view>

pages/orderDetail/orderDetail.wxss

@@ -0,0 +1,98 @@
+/* pages/orderDetail/orderDetail.wxss */
+
+/* 设置全局边距 */
+.orderWrapper{
+    padding-left: 20rpx;
+    /* background-color: yellowgreen; */
+}
+
+/* 头部区域 */
+.orderHead{
+    display: flex;
+    position: relative;
+    height: 200rpx;
+    padding-top: 20rpx;
+}
+
+/* 头像 */
+.headImg{
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 30rpx;
+    position: absolute;
+    right: 30rpx;
+}
+
+.orderHeadTitle{
+    display: flex;
+    flex-direction: column;
+    height: 80px;
+    justify-content: space-around;
+}
+
+/* 设置内容样式 */
+.orderDetail,
+.courseNum,
+.orderPayStatus{
+    margin-left: 20rpx;
+    font-weight: bold;
+}
+
+.courseNum{
+    color: #00B0F0;
+    text-decoration: underline;
+}
+
+/* 支付状态字体样式 */
+.orderPayStatus{
+    color: red;
+}
+
+/* 中部区域 */
+.orderMid{
+    height: 220rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+/* 底部区域 */
+.orderBottom{
+    margin-top: 40rpx;
+    height: 260rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+/* 支付倒计时 */
+.orderPay{
+    margin-top: 160rpx;
+    display: flex;
+    align-items: baseline;
+}
+/* 倒计时时间格式 */
+.orderPayTime{
+    padding-left: 20rpx;
+    font-weight: bold;
+    font-size: 40rpx;
+    color: red;    
+}
+
+/* 支付及查看信息按钮居中排列 */
+.payWrapper{
+    display: flex;
+    justify-content: center;
+}
+/* 支付及查看信息按钮 */
+.payStatus{
+    display: flex;
+    margin-top: 100rpx;
+    border-radius: 30rpx;
+    background-color: #8FAADC;
+    color: white;
+    text-align: center;
+    width: 30%;
+    justify-content: center;
+    padding: 10rpx;
+}