个人中心，首页

litian

2024-02-29 39924c310ef7c5b936a5cbd71ec96b144ef133f7

个人中心，首页

 app.json

@@ -37,13 +37,15 @@
    "pages/personalCenter/myOrder/index",
    "pages/personalCenter/myCollection/index",
    "pages/personalCenter/myMassage/index",
    "pages/personalCenter/myMassage/massageDetail/index",
    "pages/personalCenter/feedBack/index",
    "pages/personalCenter/feedBackSubmit/index",
    "pages/personalCenter/certificate/index",
    "pages/personalCenter/publishBooks/index",
    "pages/personalCenter/sampleBooks/index",
    "pages/personalCenter/downloads/index",
    "pages/personalCenter/activateProduct/index"
    "pages/personalCenter/activateProduct/index",
    "pages/testLogin/index"
  ],
  "tabBar": {
    "custom": true,
@@ -54,23 +56,33 @@
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
        "text": "首页",
        "iconPath": "/static/images/home/Home@2x.png",
        "selectedIconPatn": "/static/images/home/Home-click@2x.png"
      },
      {
        "pagePath": "pages/bookServices/index",
        "text": "图书服务"
        "text": "图书服务",
        "iconPath": "/static/images/home/service@2x.png",
        "selectedIconPatn": "/static/images/home/service-click@2x.png"
      },
      {
        "pagePath": "pages/goods/category/index",
        "text": "学习"
        "text": "学习",
        "iconPath": "/static/images/home/learn@2x.png",
        "selectedIconPatn": "/static/images/home/learn-click@2x.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车"
        "text": "购物车",
        "iconPath": "/static/images/home/cart@2x.png",
        "selectedIconPatn": "/static/images/home/cart-click@2x.png"
      },
      {
        "pagePath": "pages/personalCenter/index",
        "text": "我的"
        "text": "我的",
        "iconPath": "/static/images/home/my@2x.png",
        "selectedIconPatn": "/static/images/home/my-click@2x.png"
      }
    ]
  },

 assets/request/index.js

@@ -38,7 +38,7 @@
            }
            currentUrl = JSON.stringify(currentUrl)
            wx.reLaunch({
              url: urlargs ? '/pages/index/index?backUrl=' + encodeURIComponent(currentUrl) : '/pages/index/index'
              url: urlargs ? '/pages/home/home?backUrl=' + encodeURIComponent(currentUrl) : '/pages/home/home'
            })
          }
        } else {

 custom-tab-bar/data.js

@@ -1,28 +1,33 @@
export default [
  {
    icon: 'home',
    text: '首页',
    url: 'pages/home/home',
    icon: '/static/images/home/Home@2x.png',
    activeIcon: '/static/images/home/Home-click@2x.png'
  },
  {
    icon: 'sort',
    text: '图书服务',
    url: 'pages/bookServices/index'
    url: 'pages/bookServices/index',
    icon: '/static/images/home/service@2x.png',
    activeIcon: '/static/images/home/service-click@2x.png'
  },

  {
    icon: 'sort',
    text: '学习',
    url: 'pages/goods/category/index',
    icon: '/static/images/home/learn@2x.png',
    activeIcon: '/static/images/home/learn-click@2x.png'
  },
  {
    icon: 'cart',
    text: '购物车',
    url: 'pages/cart/index',
    icon: '/static/images/home/cart@2x.png',
    activeIcon: '/static/images/home/cart-click@2x.png'
  },
  {
    icon: 'person',
    text: '个人中心',
    url: 'pages/personalCenter/index',
    icon: '/static/images/home/my@2x.png',
    activeIcon: '/static/images/home/my-click@2x.png'
  },
];

 custom-tab-bar/index.json

@@ -3,6 +3,7 @@
  "usingComponents": {
    "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
    "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item",
    "t-icon": "tdesign-miniprogram/icon/icon"
    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-image": "tdesign-miniprogram/image/image"
  }
}

 custom-tab-bar/index.wxml

@@ -1,18 +1,11 @@
<t-tab-bar
 value="{{active}}"
 bindchange="onChange"
 split="{{false}}"
>
    <t-tab-bar-item
     wx:for="{{list}}"
     wx:for-item="item"
     wx:for-index="index"
     wx:key="index"
    >
<t-tab-bar value="{{active}}" bindchange="onChange" split="{{false}}">
  <t-tab-bar-item wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="index">
        <view class="custom-tab-bar-wrapper">
            <t-icon prefix="wr" name="{{item.icon}}" size="48rpx" />
      <!-- <t-icon prefix="wr" name="{{item.icon}}" size="48rpx" />
      <view class="text">{{ item.text }}</view> -->
      <t-image wx:if="{{active !== index}}" class="tabImg" src="{{item.icon}}" mode="heightFix" width="22" height="22" />
      <t-image wx:else class="tabImg" src="{{item.activeIcon}}" mode="heightFix" width="22" height="22" />
            <view class="text">{{ item.text }}</view>
        </view>
    </t-tab-bar-item>
</t-tab-bar>


 custom-tab-bar/index.wxss

@@ -6,4 +6,5 @@

.custom-tab-bar-wrapper .text {
  font-size: 20rpx;
  margin-top: 10rpx;
}

 pages/home/home.js

@@ -4,6 +4,7 @@
const app = getApp()
Page({
  data: {
    isWhite: false,
    backUrl: null,
    userInfo: {},
    tabList: [], //目录
@@ -274,7 +275,6 @@
      })
    })
  },
<<<<<<< HEAD
  tabChangeHandle(item) {
    let info = this.data.courseTypeList[item.detail.value]
    this.getCourseList(info)
@@ -396,8 +396,12 @@
        rankingList: res.datas
      })
    })
  }
=======
>>>>>>> master
  },

  onPageScroll(e) {
    this.setData({
      isWhite: e.scrollTop > 50 ? true : false
    })

  }
});

 pages/home/home.json

@@ -1,5 +1,5 @@
{
  "navigationBarTitleText": "首页",
  "navigationStyle": "custom",
  "onReachBottomDistance": 10,
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true,

 pages/home/home.wxml

@@ -1,7 +1,13 @@
<view style="text-align: center; color: #b9b9b9" wx:if="{{pageLoading}}">
  <t-loading theme="circular" size="40rpx" text="加载中..." inherit-color />
</view>
<view class="background {{ isWhite ? 'white':''}}">
  <text class="text">京师E课</text>
</view>
<view class="home-page-header">
  <view class="bg">
    <image src="/static/images/home/home-bg@2x.png" mode="heightFix" class="image" />
  </view>
  <view class="search">
    <t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" placeholder="请输入关键词/书名/ISBN/作者" leftIcon="">
      <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" bind:tap="navToSearchPage" />

 pages/home/home.wxss

@@ -3,6 +3,71 @@
  padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx);
}

.background {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 80rpx;
  z-index: 3;
  text-align: center;
  padding-top: 110rpx;
  color: #fff;
  font-size: 36rpx;
}

.white {
  background: #fff;
  color: #333;
}

.background .text {
  height: 100%;
}

.home-page-header,
.home-page-menu,
.home-page-container {
  position: relative;
  padding: 0 24rpx;
}

.home-page-header {
  padding-top: 230rpx;
}

.home-page-header .bg {
  height: 680rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.home-page-header .bg .image {
  height: 100%;
}

.home-page-header .search .t-search__input-container {
  height: 96rpx;
  background: #fff !important;
  font-size: 28rpx !important;
}

.home-page-header .t-search__input {
  font-size: 28rpx !important;
  color: rgb(116, 116, 116) !important;
}

.home-page-header .swiper-wrap {
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}

.home-page-menu .t-grid--card {
  margin: 0;
}

.flex {
  display: flex;
}

 pages/personalCenter/components/user-center-card/index.wxml

@@ -4,7 +4,10 @@
    <view class="user-center-card__header" bind:tap="gotoUserEditPage">
      <t-avatar image="{{userInfo.avatarUrl || defaultAvatarUrl}}" class="user-center-card__header__avatar" />
      <view class="user-center-card__header__name">{{'请登录'}}</view>
      <view>设置</view>
      <view class="setting">
        <image src="/static/images/personal/setting.png" mode="heightFix" class="img" />
        <text>设置</text>
      </view>
    </view>
  </block>
  <!-- 已登录但未授权用户信息情况 -->

 pages/personalCenter/components/user-center-card/index.wxss

@@ -1,5 +1,5 @@
.user-center-card {
  background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png');
  /* background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png'); */
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0 24rpx;
@@ -46,3 +46,15 @@
.user-center-card__icon {
  line-height: 96rpx;
}

.setting {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.setting .img {
  height: 34rpx;
  width: 34rpx;
  margin-right: 10rpx;
}

 pages/personalCenter/index.js

@@ -83,6 +83,7 @@
   * 页面的初始数据
   */
  data: {
    isWhite: false,
    show: false,
    userInfo: {
      avatarUrl:
@@ -122,9 +123,11 @@
          selected: 4 //这个数字是当前页面在tabBar中list数组的索引
        })
      }
      if (this.data.userInfo) {
        this.getTeacherInfo()
      }
    } else {
      wx.navigateTo({
        url: "/pages/testLogin/index",
      });
    }
  },
  /**
@@ -159,7 +162,8 @@
      }
    }
    app.MG.ugc.getTopicMessageList(data).then((res) => {
      const resData = res.datas.find((i) => i.appUserCreator.userId == userId.value)
      console.log(this.data.userInfo, "userInfo")
      const resData = res.datas.find((i) => i.appUserCreator.userId == this.data.userInfo.userId)
      if (resData) {
        this.setData({
          teacherState: {
@@ -193,5 +197,12 @@
   */
  onShareAppMessage() {

  },

  onPageScroll(e) {
    this.setData({
      isWhite: e.scrollTop > 50 ? true : false
    })

  }
})

 pages/personalCenter/index.wxml

@@ -1,3 +1,10 @@
<view class="background {{ isWhite ? 'white':''}}">
  <text class="text">个人中心</text>
</view>
<view class="home-page">
  <view class="bg">
    <image src="/static/images/personal/my-bg.png" mode="heightFix" class="image" />
  </view>
<image class="background" src="/static/images/personal/my-bg.png" mode="heightFix" />
<t-user-center-card userInfo="{{userInfo}}" isPhoneHide="{{true}}" name-class="custom-name-class" phone-class="custom-phone-class" avatar-class="customer-avatar-class" currAuthStep="{{currAuthStep}}" bind:gotoUserEditPage="gotoUserEditPage" />
<view class="content-wrapper">
@@ -59,5 +66,5 @@
      </view>
    </view>
  </view>

  </view>
</view>

 pages/personalCenter/index.wxss

@@ -5,11 +5,33 @@
}

.background {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 680rpx;
  height: 80rpx;
  z-index: 3;
  text-align: center;
  padding-top: 110rpx;
  font-size: 36rpx;
}

.white {
  background: #fff;
  color: #333;
}

.home-page .bg {
  height: 780rpx;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.home-page .bg .image {
  height: 100%;
}

.content-wrapper {

 pages/personalCenter/myMassage/index.js

@@ -1,3 +1,4 @@
import moment from 'moment'
const app = getApp();
Page({
  /**
@@ -38,7 +39,11 @@
      .then(res => {
        try {
          if (res.datas.length > 0) {
            res.datas.forEach((item) => {
              item.createDate = moment(item.createDate).format("YYYY-MM-DD HH:mm");
            });
            let dataList = res.datas;

            //触底加载新数据并保留老数据
            if (isReachBottom) {
              dataList = [...this.data.list, ...dataList] //将新数据加入老数据中
@@ -61,6 +66,12 @@
      })
  },

  toList(itemData) {
    let info = itemData.currentTarget.dataset.info;
    wx.navigateTo({
      url: "/pages/personalCenter/myMassage/massageDetail/index?id=" + info.id,
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */

 pages/personalCenter/myMassage/index.wxml

@@ -6,12 +6,18 @@
      </view>
    </view>
    <view class="pageInfo" wx:if="{{list.length > 0}}">
      <view class="content-item" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="index" bindtap="toList" data-info="{{item}}">
        <view>
          <text class="item-title">{{item.name}}</text>
      <view class="content-item" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="index">
        <view class="icon">
          <t-image src="/static/images/personal/notification1.png" mode="heightFix" class="img" />
        </view>
        <view class="imageBox">
          <t-image src="{{item.icon}}" mode="aspectFill" width="50" height="50" class="item-icon" />
        <view class="item-con" data-info="{{item}}" bindtap="toList">
          <view class="titleBox">
            <view class="item-title">{{item.name}}</view>
            <view class="createDate">{{item.createDate}}</view>
          </view>
          <view class="description">
            {{item.description}}
          </view>
        </view>
      </view>
    </view>

 pages/personalCenter/myMassage/index.wxss

@@ -0,0 +1,60 @@
.pageInfo {
  padding: 40rpx 20rpx;
}

.content-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #EDEDED;
  display: flex;
}

.content-item .icon {
  width: 58rpx;
  height: 58rpx;
}

.content-item .icon .img {
  width: 100%;
  height: 100%;
}

.item-con {
  flex: 1;
  margin-left: 30rpx;
}

.titleBox {
  display: flex;
  justify-content: space-between
}

.titleBox .item-title {
  font-weight: bold;
}

.createDate {
  font-size: 24rpx;
  color: #949494;
}

.description {
  font-size: 24rpx;
  height: 88rpx;
  line-height: 40rpx;
  display: -webkit-box;
  margin-top: 20rpx;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.refresh-container {
  margin: 0 auto;
}

.bottom-loading,
.loading {
  padding: 20rpx;
  text-align: center;
}

 pages/personalCenter/myMassage/massageDetail/index.js

New file
@@ -0,0 +1,79 @@
const app = getApp();
import moment from 'moment'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataInfo: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getDataInfo(options.id)
  },
  getDataInfo(id) {
    app.MG.app.getMessage({
      messageId: id
    })
      .then(res => {
        res.createDate = moment(res.createDate).format("YYYY-MM-DD HH:mm");
        this.setData({
          dataInfo: res,
        })

      })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

 pages/personalCenter/myMassage/massageDetail/index.json

New file
@@ -0,0 +1,4 @@
{
  "navigationBarTitleText": "我的消息",
  "usingComponents": {}
}

 pages/personalCenter/myMassage/massageDetail/index.wxml

New file
@@ -0,0 +1,8 @@
<view class="container">
  <view>
    <view class="name">{{dataInfo.name}}</view>
    <view class="createDate">{{dataInfo.createDate}}</view>
    <view class="description">{{dataInfo.description}}</view>
    <rich-text space="emsp" nodes="{{dataInfo.content}}" class="content" />
  </view>
</view>

 pages/personalCenter/myMassage/massageDetail/index.wxss

New file
@@ -0,0 +1,28 @@
.container {
  padding: 20rpx;
}

.name {
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}

.createDate {
  margin-top: 20rpx;
  color: #999;
  text-align: center;
  font-size: 28rpx;
}

.description {
  padding: 30rpx 0;
  color: #999;
  font-size: 28rpx;
  line-height: 40rpx;
}

.content {
  font-size: 28rpx;
  line-height: 40rpx;
}

 pages/testLogin/index.js

New file
@@ -0,0 +1,132 @@
// pages/testLogin/index.js
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    textName: "18892081234",
    textPassword: "xA123456",
    loading: false,
    userInfo: {
      name: "",
      icon: ""
    }
  },

  // 登录
  onLogin() {
    this.setData({
      loading: true
    })
    const data = {
      loginName: this.data.textName,
      password: this.data.textPassword,
      appRefCode: app.config.appRefCode,
      platform: "Mobile",
    };
    app.MG.identity.loginByPassword(data).then(res => {
      if (res && res.status == "Ok") {
        this.setData({
          loginInfo: JSON.stringify(res)
        })
        wx.setStorageSync(app.config.tokenKey, res.token);
        this.getUserInfo()
      } else {
        wx.showToast({
          title: res.message || "手机号或密码错误",
          icon: "error",
          duration: 2000
        })
      }
    });
  },

  // 获取用户信息
  // 获取登录用户身份
  getUserInfo() {
    app.MG.identity.getCurrentAppUser().then(res => {
      // 用户信息优先级：教师认证 > 微信 > 学生（注册时默认）
      if (res) {
        console.log(res, "user");
        let defaultUser = {};
        let secretData = res.secretList.find(i => i.type == 'LoginNameAndPassword')
        let WeChatInfo = res.infoList.find((item) => item.type === "WeChat");
        if (WeChatInfo) {
          defaultUser = {
            nickName: WeChatInfo.name,
            avatarUrl: WeChatInfo.icon,
            userId: res.userId
          }
        }
        if (secretData) {
          defaultUser = {
            nickName: secretData.credential,
            avatarUrl: "../../static/images/index/tab.png",
            userId: res.userId
          }
        }

        this.setData({
          userInfo: defaultUser,
          loading: false
        })
        wx.setStorageSync(app.config.userInfoKey, JSON.stringify(this.data.userInfo));
      }
      wx.switchTab({
        url: '/pages/home/home'
      })
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  }
})

 pages/testLogin/index.json

New file
@@ -0,0 +1,6 @@
{
  "usingComponents": {
    "t-input": "tdesign-miniprogram/input/input",
    "t-button": "tdesign-miniprogram/button/button"
  }
}

 pages/testLogin/index.wxml

New file
@@ -0,0 +1,8 @@
<!--pages/testLogin/index.wxml-->
<view>
  <t-input label="用户账号" placeholder="请输入用户名" model:value="{{textName}}" suffixIcon="{{ { name: 'user-avatar', ariaLabel: '通讯录' } }}"></t-input>
  <t-input label="用户密码" placeholder="请输入密码" type="password" model:value="{{textPassword}}" clearable />
</view>
<view class="button-example">
  <t-button theme="primary" loading="{{loading}}"  bindtap="onLogin" size="large" block>立即登录</t-button>
</view>

 pages/testLogin/index.wxss

New file
@@ -0,0 +1,4 @@
/* pages/testLogin/index.wxss */
.button-example {
  margin: 60rpx 32rpx;
}

 static/images/personal/notification1.png