Browse Source

feat: save

gemercheung 11 months ago
parent
commit
435d2a53c1

+ 2 - 1
app.json

@@ -29,7 +29,8 @@
     "pages/yuezhan/html_detail/index",
     "pages/course/course",
     "pages/course_detail/course_detail",
-    "pages/user/info/info"
+    "pages/user/personal/personal",
+    "pages/user/my_course/my_course"
   ],
   "requiredPrivateInfos": [
     "getLocation"

+ 21 - 1
pages/course/course.js

@@ -5,7 +5,9 @@ Page({
    * 页面的初始数据
    */
   data: {
-    testData: 20
+    testData: 20,
+    enable: false,
+    scrollTop: 0,
   },
 
   /**
@@ -102,5 +104,23 @@ Page({
     wx.navigateTo({
       url: "/pages/course_detail/course_detail",
     })
+  },
+  onRefresh() {
+    this.setData({
+      enable: true
+    });
+    setTimeout(() => {
+      this.setData({
+        enable: false
+      });
+    }, 1500);
+  },
+  onScroll(e) {
+    const {
+      scrollTop
+    } = e.detail;
+    this.setData({
+      scrollTop
+    });
   }
 })

+ 5 - 1
pages/course/course.json

@@ -1,3 +1,7 @@
 {
-  "usingComponents": {}
+  "disableScroll": true,
+  "usingComponents": {
+    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
+    "t-back-top": "tdesign-miniprogram/back-top/back-top"
+  }
 }

+ 31 - 27
pages/course/course.wxml

@@ -1,39 +1,43 @@
 <!--pages/course/course.wxml-->
-<view class="container">
+<t-pull-down-refresh value="{{enable}}" loadingTexts="{{['下拉刷新', '松手刷新', '正在刷新', '刷新完成']}}" bind:refresh="onRefresh"
+  bind:scroll="onScroll">
+  <view class="container">
 
-  <!-- <button bindtap='openHost'>leader</button>
+    <!-- <button bindtap='openHost'>leader</button>
 <button bindtap='openCustomer'>customer</button> -->
-  <view class="search_con">
-    <view class="search">
-      <view class='icon'>
-        <view class='iconfont iconsousuo'></view>
+    <view class="search_con">
+      <view class="search">
+        <view class='icon'>
+          <view class='iconfont iconsousuo'></view>
+        </view>
+        <input placeholder="搜索博物馆、展览" />
       </view>
-      <input placeholder="搜索博物馆、展览" />
     </view>
-  </view>
 
-  <view class="list">
-    <view class="item" wx:for="{{testData}}" wx:key="index" bindtap="handleVRDetail">
-      <image class="cover" mode="scaleToFill"
-        src="https://ossxiaoan.4dage.com/720yun_fd_manage/fd720_FARRQblYc/vtour/panos/fd720_FARRQblYc.tiles/thumb.jpg">
-      </image>
-      <view class="title" wx:if="{{index %2 ===0}}">灵隐飞来峰-大门票{{index}}</view>
-      <view class="title" wx:else>湖北省博物馆金牌讲师2H真人深度讲解含无线耳麦</view>
-      <div class="sub_cotnainer">
-        <text class="sub_title" wx:if="{{index %2 ===0}}">余老师带你飞-</text>
-        <text class="sub_title" wx:else> 陈老师深入挖掘故宫的陈老师深入挖掘故宫的陈老师深入挖掘故宫的</text>
+    <view class="list">
+      <view class="item" wx:for="{{testData}}" wx:key="index" bindtap="handleVRDetail">
+        <image class="cover" mode="scaleToFill"
+          src="https://ossxiaoan.4dage.com/720yun_fd_manage/fd720_FARRQblYc/vtour/panos/fd720_FARRQblYc.tiles/thumb.jpg">
+        </image>
+        <view class="title" wx:if="{{index %2 ===0}}">灵隐飞来峰-大门票{{index}}</view>
+        <view class="title" wx:else>湖北省博物馆金牌讲师2H真人深度讲解含无线耳麦</view>
+        <div class="sub_cotnainer">
+          <text class="sub_title" wx:if="{{index %2 ===0}}">余老师带你飞-</text>
+          <text class="sub_title" wx:else> 陈老师深入挖掘故宫的陈老师深入挖掘故宫的陈老师深入挖掘故宫的</text>
 
-        <view class="sub_time">
-          <image class="time" src="../../imgs/time.png"></image>
-          <text>45分钟</text>
-        </view>
+          <view class="sub_time">
+            <image class="time" src="../../imgs/time.png"></image>
+            <text>45分钟</text>
+          </view>
 
-      </div>
-      <view class="price">
-        9.05元
+        </div>
+        <view class="price">
+          9.05元
+        </view>
       </view>
-    </view>
 
+    </view>
+    <t-back-top text="顶部" scroll-top="{{scrollTop}}" visibility-height="{{200}}" />
   </view>
 
-</view>
+</t-pull-down-refresh>

+ 2 - 1
pages/course_detail/course_detail.wxss

@@ -176,6 +176,7 @@
   --td-button-default-bg-color: #D75F5D;
   font-size: 28rpx;
   width: 220rpx;
-  height: 72rpx;
+  height: 72rpx !important;
+  line-height: 72rpx !important;
   margin-right: 20rpx;
 }

+ 0 - 3
pages/user/info/info.json

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

+ 0 - 2
pages/user/info/info.wxml

@@ -1,2 +0,0 @@
-<!--pages/user/info/info.wxml-->
-<text>pages/user/info/info.wxml</text>

+ 0 - 1
pages/user/info/info.wxss

@@ -1 +0,0 @@
-/* pages/user/info/info.wxss */

+ 20 - 2
pages/user/info/info.js

@@ -1,11 +1,11 @@
-// pages/user/info/info.js
+// pages/user/my_course/my_course.js
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    testData: 10,
   },
 
   /**
@@ -62,5 +62,23 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  onRefresh() {
+    this.setData({
+      enable: true
+    });
+    setTimeout(() => {
+      this.setData({
+        enable: false
+      });
+    }, 1500);
+  },
+  onScroll(e) {
+    const {
+      scrollTop
+    } = e.detail;
+    this.setData({
+      scrollTop
+    });
   }
 })

+ 9 - 0
pages/user/my_course/my_course.json

@@ -0,0 +1,9 @@
+{
+  "navigationBarTitleText": "我的购买",
+  "usingComponents": {
+    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
+    "t-skeleton": "tdesign-miniprogram/skeleton/skeleton",
+    "t-back-top": "tdesign-miniprogram/back-top/back-top",
+    "t-image": "tdesign-miniprogram/image/image"
+  }
+}

+ 30 - 0
pages/user/my_course/my_course.wxml

@@ -0,0 +1,30 @@
+<!--pages/user/my_course/my_course.wxml-->
+<t-pull-down-refresh value="{{enable}}" loadingTexts="{{['下拉刷新', '松手刷新', '正在刷新', '刷新完成']}}" bind:refresh="onRefresh"
+  bind:scroll="onScroll">
+  <!-- 包裹页面全部内容 -->
+  <view class="container">
+    <view class="list">
+      <view class="course_item " wx:for="{{testData}}" wx:key="index">
+        <t-image class="cover" src="" mode="aspectFill" aria-label="一个放置在墙角的黄色行李箱" />
+        <view class="content">
+          <view class="title">
+            天安门广场+明清皇家宫殿紫禁城+八达岭长城赏塞外风光+半部, 天安门广场+明清皇家宫殿紫禁城+八达岭长城赏塞外风光+半部, 天安门广场+明清皇家宫殿紫禁城+八达岭长城赏塞外风光+半部
+          </view>
+          <view class="sub_info">
+            <view class="author">
+              余老师带你飞
+            </view>
+            <view class="status"  wx:if="{{index %2 ===0}}">
+              未开始
+            </view>
+            <view class="status live" wx:else>
+              直播中
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <t-back-top text="顶部" scroll-top="{{scrollTop}}" visibility-height="{{100}}" />
+  </view>
+</t-pull-down-refresh>

+ 117 - 0
pages/user/my_course/my_course.wxss

@@ -0,0 +1,117 @@
+/* pages/user/my_course/my_course.wxss */
+.container {
+  padding-bottom: 56rpx;
+  overflow: hidden;
+  width: 100%;
+  min-height: calc(100vh - 56rpx);
+  background: #F5F5F5;
+}
+
+.container-title {
+  font-size: 48rpx;
+  font-weight: 700;
+  line-height: 64rpx;
+  margin: 48rpx 32rpx 0;
+  color: var(--td-text-color-primary);
+}
+
+.container-desc {
+  font-size: 28rpx;
+  color: var(--td-text-color-secondary);
+  margin: 16rpx 32rpx 0;
+  line-height: 44rpx;
+}
+
+.pulldown-reflesh__content {
+  margin: 64rpx 32rpx 0;
+  position: relative;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 32rpx;
+}
+
+.text {
+  position: absolute;
+  top: 152rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  font-size: 32rpx;
+  color: var(--td-text-color-disabled);
+  width: 686rpx;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20rpx 0;
+}
+
+.course_item {
+  width: 670rpx;
+  height: 126rpx;
+  background: #FFFFFF;
+  border-radius: 16rpx 16rpx 16rpx 16rpx;
+  padding: 20rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.course_item .cover {
+  width: 220rpx;
+  height: 126rpx;
+}
+
+.course_item .content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.course_item.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.course_item .title {
+  max-height: 80rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 28rpx;
+  line-height: 33rpx;
+  font-weight: 400;
+  padding: 0 20rpx;
+}
+
+.sub_info {
+  color: rgba(136, 136, 136, 0.9);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  font-size: 24rpx;
+  padding: 0 20rpx;
+  line-height: 28rpx;
+}
+
+.sub_info .author {
+  max-width: 300rpx;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.status.live {
+  color: rgba(215, 95, 93, 1);
+}

+ 228 - 0
pages/user/personal/personal.js

@@ -0,0 +1,228 @@
+// pages/personal/personal.ts
+import ActionSheet, {
+  ActionSheetTheme,
+  ActionSheetShowOption
+} from 'tdesign-miniprogram/action-sheet/index';
+// import {
+//   decrptPhone,
+//   getUserInfo,
+//   updateUserInfo,
+//   updateAvatar
+// } from '../../api/user'
+
+let genderHandler = null
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    avatar: 'https://4dkk.4dage.com/miniapp-source/daikan/avatar_default.png',
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+
+  },
+  updateUserInfo(data) {
+    this.setData({
+      userInfo: data
+    })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+    // const app = getApp();
+    // app.watch('userInfo', this.updateUserInfo)
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  async onShow() {
+    // const isLogin = wx.getStorageSync('isLogin')
+    // const app = getApp();
+    // this.setData({
+    //   isLogin: isLogin
+    // })
+    // app.globalData.isLogin = isLogin
+    // await getUserInfo();
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    // const app = getApp();
+    // app.unwatch('userInfo', this.updateUserInfo)
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  handleLogout() {
+    const app = getApp();
+    this.setData({
+      isLogin: false
+    })
+    wx.setStorageSync('isLogin', false)
+    wx.setStorageSync('token', '')
+    app.setLogin(false)
+    app.resetUserInfo();
+    wx.showToast({
+      title: '登出成功!',
+
+    });
+    wx.switchTab({
+      url: "/pages/my/my"
+    })
+
+  },
+  async checkSession() {
+    let isExist = false
+    wx.checkSession({
+      success() {
+        isExist = true
+      },
+      fail() {
+        isExist = false
+      }
+    })
+    await sleep(1000)
+    return Promise.resolve(isExist)
+
+  },
+  async handleGetPhoneNumber(event) {
+    // debugger
+    console.log('event', event)
+    const isValid = await this.checkSession();
+    console.log('isValid', isValid)
+    if (isValid) {
+      const {
+        code,
+        iv,
+        encryptedData
+      } = event.detail
+      if (code && iv && encryptedData) {
+        const res = await decrptPhone({
+          iv: iv,
+          code: code,
+          encryptedData: encryptedData
+        })
+        console.log('res', res.phoneNumber)
+        if (res.phoneNumber) {
+          const wxUserId = wx.getStorageSync('wxUserId');
+          const result = await updateUserInfo({
+            wxUserId,
+            phoneNumber: res.phoneNumber
+          })
+          if (result.code === 0) {
+            await getUserInfo();
+          } else {
+            wx.showToast({
+              title: result.message
+            });
+          }
+        }
+      }
+    }
+  },
+  handleSexSelectShow() {
+    const basicListOption = {
+      theme: ActionSheetTheme.List,
+      selector: '#t-action-sheet',
+      items: [{
+          label: '男',
+        },
+        {
+          label: '女',
+        },
+
+      ],
+    };
+    genderHandler = ActionSheet.show(basicListOption);
+  },
+  async handleSelected(event) {
+    const {
+      index
+    } = event.detail
+    if (index > -1) {
+      // debugger
+      console.log('index', index)
+      const wxUserId = wx.getStorageSync('wxUserId');
+      await updateUserInfo({
+        wxUserId,
+        gender: index + 1
+      })
+      await getUserInfo();
+    }
+
+
+  },
+
+  async onChooseAvatar(e) {
+    const {
+      avatarUrl
+    } = e.detail
+
+    console.log('e', e)
+    const url = await updateAvatar(avatarUrl)
+    console.log('url', url)
+    const wxUserId = wx.getStorageSync('wxUserId');
+    await updateUserInfo({
+      wxUserId,
+      avatarUrl: url
+    })
+    await getUserInfo();
+  },
+
+  async updateNickName(e) {
+    const {
+      value
+    } = e.detail
+    console.log('value-1', value)
+    if (value) {
+      const wxUserId = wx.getStorageSync('wxUserId');
+      await updateUserInfo({
+        wxUserId,
+        nickName: value
+      })
+      await getUserInfo();
+    }
+
+  },
+  handleCancel() {
+    genderHandler && genderHandler.close();
+  }
+})

+ 11 - 0
pages/user/personal/personal.json

@@ -0,0 +1,11 @@
+{
+  "navigationBarTitleText": "个人信息",
+  "navigationBarTextStyle": "black",
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-avatar": "tdesign-miniprogram/avatar/avatar",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet"
+  }
+}

+ 38 - 0
pages/user/personal/personal.wxml

@@ -0,0 +1,38 @@
+<!--pages/personal/personal.wxml-->
+<view class="personal-view">
+  <t-cell title="头像" arrow hover>
+    <view class="avatar" slot="note">
+      <t-button wx:if="{{userInfo.avatarUrl}}" class="avatar-btn" variant="text" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+        <t-avatar image="{{userInfo.avatarUrl}}" class="avatar" size="medium" />
+      </t-button>
+
+      <t-button wx:else class="avatar-btn" variant="text" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+        <t-avatar image="{{avatar}}" class="avatar" size="medium" />
+      </t-button>
+    </view>
+  </t-cell>
+
+  <t-cell title="昵称" hover arrow>
+    <t-input  maxlength="{{32}}"  value="{{userInfo.nickName}}" bind:blur='updateNickName' type='nickname' class="nickname" placeholder="请输入昵称" slot='note'>
+    </t-input>
+  </t-cell>
+
+  <t-cell title="性别" hover arrow>
+    <view slot='note'>
+      <text wx:if="{{userInfo.gender == 1}}" bind:tap="handleSexSelectShow">男</text>
+      <text wx:if="{{userInfo.gender == 2}}" bind:tap="handleSexSelectShow">女</text>
+      <t-button wx:if="{{userInfo.gender == 0}}" class="phone" variant="text" size="small" bind:tap="handleSexSelectShow">点击选择</t-button>
+    </view>
+  </t-cell>
+
+  <t-cell title="绑定手机" hover arrow>
+    <view slot='note'>
+      <text wx:if="{{userInfo.phoneNumber}}">{{userInfo.phoneNumber}}</text>
+      <t-button wx:else class="phone" variant="text" size="small" open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">点击绑定</t-button>
+    </view>
+  </t-cell>
+  <view class="btn-container" wx:if="{{isLogin}}">
+    <t-button block size="large" class="btn" bindtap="handleLogout">退出登录</t-button>
+  </view>
+  <t-action-sheet id="t-action-sheet" bind:selected="handleSelected" bind:cancel="handleCancel" />
+</view>

+ 43 - 0
pages/user/personal/personal.wxss

@@ -0,0 +1,43 @@
+/* pages/personal/personal.wxss */
+.personal-view {
+  background-color: #f2f2f2;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.btn-container {
+  margin-top: 20rpx;
+}
+
+.btn {
+  --td-button-default-bg-color: #ffffff;
+  --td-button-default-color: #FA5555;
+}
+
+.nickname {
+  --td-input-default-text-color: rgba(0, 0, 0, 0.4)
+}
+
+.phone {
+  --td-button-default-color: #rgba(0, 0, 0, 0.4);
+  --td-button-font-weight: 300;
+
+
+}
+.phone .t-button {
+  padding: 0;
+}
+
+.nickname .t-input__control {
+  text-align: right;
+}
+
+.nickname .t-input {
+  padding: 0;
+}
+
+
+.avatar-btn .t-button {
+  padding: 0;
+  height: 96rpx;
+}

+ 7 - 0
project.private.config.json

@@ -4,6 +4,13 @@
     "miniprogram": {
       "list": [
         {
+          "name": "my_course",
+          "pathName": "pages/user/my_course/my_course",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "test",
           "pathName": "pages/yuezhan/pay_page/index",
           "query": "id=7532",