添加页面

miniprogram/pages/index/index.less

@@ -227,4 +227,105 @@ page {
 }
 
 
-// 'demo-text-1', 'demo-text-2', 'demo-text-3'
+// 'demo-text-1', 'demo-text-2', 'demo-text-3'
+.popup-section {
+  &.hidden {
+    display: none;
+  }
+
+  .popup-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.6);
+    z-index: 9;
+  }
+  .popup-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    width: 100%;
+    background: #FFFFFF;
+    border-radius: 32rpx 32rpx 0rpx 0rpx;
+    padding: 40rpx 32rpx 58rpx;
+    box-sizing: border-box;
+  }
+
+  .iconClose {
+    position: absolute;
+    right: 40rpx;
+    top: 40rpx;
+    width: 38rpx;
+    height: 38rpx;
+  }
+
+  .product-section {
+    display: flex;
+    padding-bottom: 60rpx;
+    .product-img {
+      width: 160rpx;
+      height: 160rpx;
+      flex-shrink: 0;
+      margin-right: 32rpx;
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .product-left {
+      display: flex;
+      align-items: flex-start;
+      .currentPrice {
+        font-weight: bold;
+        color: #FE2451;
+        font-family: DINAlternate, DINAlternate;
+        .stuff {
+          font-size: 36rpx;
+        }
+        .priceZ {
+          font-size: 60rpx;
+        }
+        .priceF {
+          font-size: 36rpx;
+        }
+      }
+      .originPrice {
+        padding-left: 16rpx;
+        font-size: 32rpx;
+        color: #AAAAAA;
+        line-height: 44rpx;
+        text-decoration: line-through;
+        padding-top: 28rpx;
+      }
+    }
+  }
+
+  .goodsInfo {
+    flex-direction: column;
+    align-items: flex-start;
+    padding-bottom: 90rpx;
+
+    .desc {
+      font-size: 28rpx;
+      color: #131415;
+      line-height: 40rpx;
+      padding-bottom: 30rpx;
+    }
+  }
+
+  button {
+    width: 100%;
+    line-height: 88rpx;
+    background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
+    border-radius: 44rpx;
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #FFFFFF;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

miniprogram/pages/index/index.ts

@@ -3,12 +3,11 @@
 const app = getApp<IAppOption>()
 Component({
   data: {
-    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
     current: 0,
-    vertical: false,
     autoplay: false,
     interval: 5000,
-    duration: 500
+    duration: 500,
+    popupShow: false
   },
   methods: {
     // 事件处理函数
@@ -20,9 +19,23 @@ Component({
         })
       }
     },
-    onBuyShop() {
+    /** 我的订单 */
+    onOrder() {
       wx.navigateTo({
-        url: '../login/login',
+        url: '../orders/orders',
+      })
+    },
+    onBuyShop() {
+      // wx.navigateTo({
+      //   url: '../login/login',
+      // })
+      this.setData({
+        popupShow: true
+      })
+    },
+    onClose() {
+      this.setData({
+        popupShow: false
       })
     }
     // getUserProfile() {

miniprogram/pages/index/index.wxml

@@ -30,11 +30,6 @@
         </view>
       </swiper-item>
     </swiper>
-    <!-- https://oss.dayaedu.com/ktyq/1731664204915.png
-    https://oss.dayaedu.com/ktyq/1731664238525.png
-    https://oss.dayaedu.com/ktyq/1731664250837.png
-    https://oss.dayaedu.com/ktyq/1731664259087.png
-    https://oss.dayaedu.com/ktyq/1731664269098.png -->
 
     <view class="shop-section">
       <view class="showPrice">
@@ -78,7 +73,7 @@
     </view>
 
     <view class="bottom-section">
-      <view class="orders">
+      <view class="orders" bind:tap="onOrder">
         <image src="./images/icon-order.png" />
         <text>订单</text>
       </view>
@@ -86,5 +81,37 @@
         <button bind:tap="onBuyShop" type="primary">立即购买</button>
       </view>
     </view>
+
+    <view class="popup-section" wx:if="{{popupShow}}">
+      <view class="popup-mask"></view>
+      <view class="popup-container">
+        <image bind:tap="onClose" src="./images/icon-close.png" class="iconClose"></image>
+
+        <view class="product-section">
+          <view class="product-img">
+            <image src="https://oss.dayaedu.com/ktyq/1731664204915.png"></image>
+          </view>
+          <view class="product-left">
+            <view class="currentPrice">
+              <text class="stuff">¥</text>
+              <text class="priceZ">356</text>
+              <text class="priceF">.00</text>
+            </view>
+            <view class="originPrice">¥400.00</view>
+          </view>
+        </view>
+
+        <view class="goodsInfo">
+          <view class="desc">规格</view>
+          <view class="goodsList">
+            <view class="goodsItem">1年卡</view>
+            <view class="goodsItem selected">3年卡</view>
+            <view class="goodsItem nosale">无限卡<image src="./images/nosale.png"></image></view>
+          </view>
+        </view>
+
+        <button type="primary">立即购买</button>
+      </view>
+    </view>
   </view>
 </scroll-view>

miniprogram/pages/login/login.ts

@@ -16,7 +16,6 @@ Page({
     // 登录
     wx.login({
       success: res => {
-        console.log(res.code)
         // 发送 res.code 到后台换取 openId, sessionKey, unionId
         this.setData({
           code: res.code
@@ -25,7 +24,6 @@ Page({
     })
   },
   onLogin() {
-    console.log(this.data.isAgree, 'this.data.isAgree')
     if(!this.data.isAgree) {
       wx.showToast({
         title: '请先阅读并勾选协议',
@@ -38,6 +36,7 @@ Page({
       desc: '获取用户信息',
       success: (res) => {
         console.log(res, 'res')
+        
       },
       fail: (res) => {
         console.log(res, 'res')

miniprogram/pages/login/login.wxml

@@ -7,7 +7,7 @@
   </view>
   <view class="login-section">
     <view class="btnSection">
-      <button type="primary" bind:tap="onLogin">微信一键登录</button>
+      <button type="primary" open-type="getPhoneNumber" bindgetphonenumber="getLogin">微信一键登录</button>
     </view>
     <view class="protocol-section">
       <image wx:if="{{isAgree}}" bind:tap="onAgree" src="./images/radio-active.png" class="radio"></image>

miniprogram/pages/orders/orders.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar"
+  }
 }

miniprogram/pages/orders/orders.less

@@ -1 +1,217 @@
-/* pages/orders/orders.wxss */
+/* pages/orders/orders.wxss */
+page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #F5F6F7;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.record-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.record-tab {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28rpx 50rpx 16rpx;
+
+  >view {
+      font-size: 32rpx;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.4);
+
+      &.active {
+          font-size: 32rpx;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #131415;
+          position: relative;
+          z-index: 2;
+
+          &::before {
+              content: "";
+              position: absolute;
+              left: 0;
+              bottom: -8rpx;
+              z-index: -1;
+              width: 100%;
+              height: 8rpx;
+              background: linear-gradient( 90deg, #FF3C3C 0%, rgba(255,118,155,0.5) 100%);
+              border-radius: 72rpx 72rpx 0rpx 0rpx;
+          }
+      }
+  }
+}
+
+.record-list {
+  flex: 1;
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+
+.list-item-group {
+  padding-bottom: 88rpx;
+}
+
+.list-item {
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  margin: 24rpx 26rpx 0;
+  padding: 28rpx 24rpx 32rpx;
+
+  .item-top {
+    display: flex;
+    justify-content: space-between;
+    font-size: 28rpx;
+    line-height: 48rpx;
+    padding-bottom: 12rpx;
+    
+    .item-mid {
+      color: #131415;
+    }
+
+    > text {
+      color: #777777;
+    }
+
+    .red {
+      color: #FE2451;
+    }
+  }
+
+  .item-content {
+    display: flex;
+
+    .goods-icon {
+      width: 160rpx;
+      height: 160rpx;
+      margin-right: 24rpx;
+      flex-shrink: 0;
+    }
+
+    .goods-desc {
+      flex: 1 auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .goodsInfo {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 4rpx;
+      .goods-name {
+        flex: 1 auto;
+        white-space: nowrap;
+        overflow: hidden;
+        font-weight: 600;
+        font-size: 28rpx;
+        text-overflow: ellipsis;
+        max-width: 310rpx;
+      }
+      .goods-price {
+        flex-shrink: 0;
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 28rpx;
+        color: #131415;
+        line-height: 48rpx;
+      }
+    }
+
+    .goods-type {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 12rpx;
+      .goods-card {
+        height: 40rpx;
+        background: #FEEDF0;
+        border-radius: 6rpx;
+        font-size: 26rpx;
+        color: #FE2451;
+        line-height: 36rpx;
+        padding: 0 12rpx;
+      }
+      .goods-num {
+        font-size: 28rpx;
+        color: #777777;
+        line-height: 36rpx;
+      }
+    }
+
+  }
+
+  .item-footer {
+    padding-top: 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .order-price {
+      font-weight: 600;
+      font-size: 28rpx;
+      color: #131415;
+      line-height: 48rpx;
+
+      .price {
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 28rpx;
+        color: #FE2451;
+        line-height: 48rpx;
+      }
+    }
+
+    button {
+      margin: 0;
+      border-radius: 36rpx;
+      background-color: #FFFFFF;
+      border: 2rpx solid #DCDCDC;
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #333333;
+      width: auto;
+      padding: 14rpx 32rpx;
+      line-height: 40rpx;
+    }
+    .sure {
+      background: #FE2451;
+      border-color: #FE2451;
+      color: #FFFFFF;
+    }
+  }
+}
+
+.empty-box {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -80%);
+  font-size: 32rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+
+  image {
+    width: 436rpx;
+    height: 364rpx;
+  }
+
+  .empty-text {
+    font-size: 28rpx;
+    color: #777777;
+    line-height: 40rpx;
+    text-align: center;
+    padding-top: 24rpx;
+  }
+}

miniprogram/pages/orders/orders.ts

@@ -5,7 +5,33 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    tabList: [
+      {
+        id: 0,
+        label: "全部",
+      },
+      {
+        id: 1,
+        label: "待付款",
+      },
+      {
+        id: 2,
+        label: "已使用",
+      },
+      {
+        id: 3,
+        label: "已完成",
+      },
+      {
+        id: 4,
+        label: "已取消",
+      }
+    ],
+    tabIdx: 0, // 当前选中的tab索引
+    page: 1,
+    rows: 10,
+    recordList: [],
+    maxPage: 1, // 总分页数
   },
 
   /**
@@ -14,7 +40,35 @@ Page({
   onLoad() {
 
   },
-
+  /** 切换分类 */
+  switchTab(e: { currentTarget: { dataset: { idx: any } } }) {
+    const idx = e.currentTarget.dataset.idx;
+    if (idx != this.data.tabIdx) {
+      this.setData(
+        {
+          tabIdx: idx,
+          page: 1,
+          maxPage: 1,
+          recordList: [],
+        }
+      );
+    }
+    // ,
+    //     () => {
+    //       this.queryRecords();
+    //     }
+  },
+  /** 加载更多 */
+  loadMore() {
+    wx.showLoading({
+      mask: true,
+      title: "加载中...",
+    });
+
+    setTimeout(() => {
+      wx.hideLoading()
+    }, 3000);
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

miniprogram/pages/orders/orders.wxml

@@ -1,2 +1,49 @@
 <!--pages/orders/orders.wxml-->
-<text>pages/orders/orders.wxml</text>
+<view class="container">
+  <navigation-bar title="我的订单"></navigation-bar>
+
+  <view class="record-content">
+    <view class="record-tab">
+      <view wx:for="{{tabList}}" wx:key="item.id" class="{{item.id == tabIdx ? 'active' : ''}}" catch:tap="switchTab" data-idx="{{item.id}}">
+        {{item.label}}
+      </view>
+    </view>
+    <scroll-view class="record-list" type="list" scroll-y bindscrolltolower="loadMore">
+      <block wx:if="{{ tabList.length }}">
+        <view class="list-item-group">
+          <view class="list-item" wx:for="{{tabList}}" wx:key="{{index}}">
+            <view class="item-top">
+              <view class="item-mid">订单号：1209289883774834</view>
+              <text class="red">等待付款</text>
+            </view>
+          <view class="item-content">
+            <image class='goods-icon' src="https://oss.dayaedu.com/ktyq/1731664204915.png" mode="" />
+            <view class="goods-desc">
+              <view class="goodsInfo">
+                <view class="goods-name">音乐数字课堂AI学练工堂AI学练工音乐数字课堂AI学练工堂AI学练工</view>
+                <view class="goods-price">¥ 600.00</view>
+              </view>
+              <view class="goods-type">
+                <view class="goods-card">一年卡</view>
+                <view class="goods-num">x1</view>
+              </view>
+            </view>
+          </view>
+          <view class="item-footer">
+            <view class="order-price">
+              订单金额:<text class="price">¥ 600.00</text>
+            </view>
+            <button class="sure" type="primary">继续支付</button>
+          </view>
+          </view>
+        </view>
+      </block>
+      <block wx:else>
+        <view class="empty-box">
+          <image src="https://oss.dayaedu.com/ktyq/1731839238916.png"></image>
+          <view class="empty-text">暂无订单</view>
+        </view>
+      </block>
+    </scroll-view>
+  </view>
+</view>