commission--yt-commit

pages/course/createCourseOrder/createCourseOrder.js

@@ -0,0 +1,77 @@
+// pages/course/createCourseOrder/createCourseOrder.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    courseId: 0, // 课程id
+  },
+
+  // 创建订单方法
+  createOrder(e) {
+    const courseId = e.currentTarget.dataset.id;
+    wx.navigateTo({
+      url: `/pages/course/waitPayOrder/waitPayOrder?id=${courseId}`,
+    })
+  },
+  
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    console.log('课程id--->',options.id);
+    this.setData({
+      courseId: options.id,
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/course/createCourseOrder/createCourseOrder.json

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

pages/course/createCourseOrder/createCourseOrder.wxml

@@ -0,0 +1,46 @@
+<!-- pages/course/createCourseOrder/createCourseOrder.wxml -->
+<view class="flex-col page">
+  <view class="flex-col content">
+    <view class="flex-row items-center section">
+      <image
+        class="shrink-0 image"
+        src="https://ide.code.fun/api/image?token=6859f7a14ae84d0012334fa9&name=9c2a22f14e2bd768cbd40d939693e4a8.png"
+      />
+      <view class="flex-col flex-1 ml-11">
+        <text class="self-start text">区块链和加密数字货币(随报随学认证班)(随报随学认证班)</text>
+        <view class="flex-row items-center self-stretch group mt-15">
+          <text class="text_2">￥999</text>
+          <view class="flex-col justify-start relative ml-1">
+            <text class="text_3">￥999</text>
+            <view class="divider pos"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="flex-row justify-between items-center section_2 mt-14">
+      <text class="font">商品价格</text>
+      <text class="font text_4">￥999</text>
+    </view>
+    <view class="flex-row justify-between items-center section_3 mt-14">
+      <view class="flex-row items-center">
+        <image
+          class="shrink-0 image_2"
+          src="./image/wxpay.png"
+        />
+        <text class="font ml-12">微信支付</text>
+      </view>
+      <radio-group class="image_3">
+        <radio checked="true"></radio>
+      </radio-group>
+    </view>
+  </view>
+  <!-- 固定在底部的区域 -->
+  <view class="footer">
+    <view class="flex-row justify-between items-center section_4">
+      <text class="font text_5">应付￥999</text>
+      <view class="flex-col justify-center items-center text-wrapper" bind:tap="createOrder" data-id="{{ '1' }}">
+        <text class="font text_6">立即支付</text>
+      </view>
+    </view>
+  </view>
+</view>

pages/course/createCourseOrder/createCourseOrder.wxss

@@ -0,0 +1,118 @@
+.ml-11 {
+  margin-left: 20.63rpx;
+}
+.mt-15 {
+  margin-top: 28.13rpx;
+}
+.ml-1 {
+  margin-left: 1.88rpx;
+}
+.page {
+  background-color: #f7f7f7;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.content {
+  flex: 1;
+  overflow-y: auto;
+}
+.section {
+  padding: 20.63rpx 22.5rpx 27.58rpx;
+  background-color: #ffffff;
+  border-radius: 3.94rpx;
+}
+.image {
+  border-radius: 9.38rpx;
+  width: 208.13rpx;
+  height: 133.13rpx;
+}
+.text {
+  color: #000000;
+  font-size: 30rpx;
+  font-family: SourceHanSansCN;
+  line-height: 35.63rpx;
+  width: 429.38rpx;
+}
+.group {
+  padding: 0 4.29rpx;
+}
+.text_2 {
+  color: #f84947;
+  font-size: 30rpx;
+  font-family: SourceHanSansCN;
+  line-height: 22.76rpx;
+}
+.text_3 {
+  color: #8c8c8c;
+  font-size: 26.25rpx;
+  font-family: SourceHanSansCN;
+  line-height: 19.93rpx;
+}
+.divider {
+  background-color: #8c8c8c;
+  width: 69.56rpx;
+  height: 1.88rpx;
+}
+.pos {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.section_2 {
+  padding: 48.69rpx 29.21rpx 43.35rpx 44.96rpx;
+  background-color: #ffffff;
+}
+.font {
+  font-size: 30rpx;
+  font-family: SourceHanSansCN;
+  line-height: 27.96rpx;
+  color: #323232;
+}
+.text_4 {
+  line-height: 22.91rpx;
+}
+.section_3 {
+  padding: 39.38rpx 46.88rpx 897.38rpx 48.75rpx;
+  background-color: #ffffff;
+}
+.image_2 {
+  width: 52.5rpx;
+  height: 52.5rpx;
+}
+.image_3 {
+  width: 41.25rpx;
+  height: 41.25rpx;
+}
+.section_4 {
+  padding: 16.88rpx 24.38rpx 16.88rpx 31.09rpx;
+  background-color: #ffffff;
+}
+.text_5 {
+  color: #000000;
+  line-height: 28.05rpx;
+}
+.text-wrapper {
+  padding: 14.07rpx 0 19.07rpx;
+  background-color: #ff8d1a;
+  border-radius: 75rpx;
+  width: 268.13rpx;
+  height: 71.25rpx;
+  display: flex;
+  justify-content: center;  /* 水平居中 */
+  align-items: center;      /* 垂直居中 */
+}
+
+.text_6 {
+  color: #ffffff;
+  line-height: 28.11rpx;
+}
+.footer {
+  margin-top: auto;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}