开发

custom-tab-bar/index.js

@@ -44,8 +44,8 @@ Component({
     }, {
       "pagePath": "/pages/message/index",
       "text": "消息",
-      "iconPath": "/static/zp.png",
-      "selectedIconPath": "/static/zp2.png"
+      "iconPath": "/static/message.png",
+      "selectedIconPath": "/static/message2.png"
     }, {
       "pagePath": "/pages/my/index",
       "text": "我的",

pages/message/index.js

@@ -1,14 +1,9 @@
-// pages/message/index.js
-Page({
+const app = getApp()
 
-  /**
-   * 页面的初始数据
-   */
+Page({
   data: {
-
   },
   onLoad(options) {
-
   },
   onShow() {
     if (typeof this.getTabBar === 'function') {
@@ -17,39 +12,4 @@ Page({
       })
     }
   },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
-  }
 })

pages/message/index.less

@@ -1 +1,110 @@
-/* pages/message/index.wxss */
+.messagePage {
+  overflow: hidden;
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
+  background-color: white;
+
+  .searchBox {
+    position: relative;
+    padding: 20rpx 40rpx;
+
+    .input {
+      background-color: #F2F6FC;
+      font-size: 28rpx;
+      padding: 14rpx 20rpx;
+      border-radius: 26rpx;
+    }
+
+    .magnifier {
+      position: absolute;
+      right: 70rpx;
+      top: 0rpx;
+      bottom: 0rpx;
+      margin: auto;
+      padding: 10rpx 38rpx;
+      width: 28rpx;
+      height: 28rpx;
+      border-radius: 50rpx;
+      background-color: #30C866;
+    }
+  }
+
+  .messageList {
+    padding: 0rpx 36rpx 250rpx;
+    box-sizing: border-box;
+
+    .base {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20rpx 0rpx 20rpx 20rpx;
+      border-bottom: 1rpx solid #D8D8D8;
+
+      .avatar {
+        width: 80rpx;
+        height: 80rpx;
+      }
+
+      .body {
+        flex: 1;
+        padding: 0rpx 30rpx 0rpx 20rpx;
+
+        .name {
+          max-width: 320rpx;
+          font-size: 30rpx;
+          font-weight: bolder;
+        }
+      }
+
+      .right {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        .date {
+          font-size: 24rpx;
+        }
+
+        .unread {
+          margin-top: 6rpx;
+          width: 32rpx;
+          height: 32rpx;
+          line-height: 32rpx;
+          border-radius: 550rpx;
+          color: white;
+          font-size: 20rpx;
+          text-align: center;
+          background-color: #FF0000;
+        }
+      }
+    }
+
+    .authority {
+      .body {
+        display: flex;
+        justify-content: space-between;
+        padding-right: 50rpx;
+
+
+        .avatars {
+          display: flex;
+
+          .miniAvatar {
+            width: 38rpx;
+            height: 38rpx;
+            margin-left: 4rpx;
+          }
+        }
+      }
+    }
+
+    .user {
+      .info {
+        margin-top: 4rpx;
+        width: 400rpx;
+        color: #969696;
+        font-size: 24rpx;
+      }
+    }
+  }
+}

pages/message/index.wxml

@@ -1 +1,48 @@
-<navigationBar></navigationBar>
+<navigationBar></navigationBar>
+<view class="messagePage" >
+  <view class="searchBox">
+    <input class="input" maxlength="20" placeholder="查找昵称/学号/手机号" />
+    <image src="/static/search-2.png" class="magnifier" />
+  </view>
+  <scroll-view scroll-y="true" class="messageList">
+    <view class="base authority">
+      <image src="/static/message3.png" class="avatar" />
+      <view class="body">
+        <view class="name">评论</view>
+        <view class="avatars">
+          <image src="/static/tj2.png" class="miniAvatar" wx:for="{{6}}" wx:key="index" />
+        </view>
+      </view>
+      <view class="right">
+        <view class="date">2023-3-14</view>
+        <view class="unread">10</view>
+      </view>
+    </view>
+    <view class="base authority">
+      <image src="/static/message3.png" class="avatar" />
+      <view class="body">
+        <view class="name">评论</view>
+        <view class="avatars">
+          <image src="/static/tj2.png" class="miniAvatar" wx:for="{{6}}" wx:key="index" />
+        </view>
+      </view>
+      <view class="right">
+        <view class="date">2023-3-14</view>
+        <view class="unread">10</view>
+      </view>
+    </view>
+    <view class="base user" wx:for="{{16}}" wx:key="index">
+      <image src="/static/message3.png" class="avatar" />
+      <view class="body">
+        <view class="name textOver">帅气小男孩</view>
+        <view class="info textOver">
+          朗读的太棒了！向你学习向你学习俄文企鹅企鹅企鹅企鹅
+        </view>
+      </view>
+      <view class="right">
+        <view class="date">2023-3-14</view>
+        <view class="unread">10</view>
+      </view>
+    </view>
+  </scroll-view>
+</view>

pages/message/index.wxss

@@ -1 +1,90 @@
-/* pages/message/index.wxss */
+.messagePage {
+  overflow: hidden;
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
+  background-color: white;
+}
+.messagePage .searchBox {
+  position: relative;
+  padding: 20rpx 40rpx;
+}
+.messagePage .searchBox .input {
+  background-color: #F2F6FC;
+  font-size: 28rpx;
+  padding: 14rpx 20rpx;
+  border-radius: 26rpx;
+}
+.messagePage .searchBox .magnifier {
+  position: absolute;
+  right: 70rpx;
+  top: 0rpx;
+  bottom: 0rpx;
+  margin: auto;
+  padding: 10rpx 38rpx;
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50rpx;
+  background-color: #30C866;
+}
+.messagePage .messageList {
+  padding: 0rpx 36rpx 250rpx;
+  box-sizing: border-box;
+}
+.messagePage .messageList .base {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 0rpx 20rpx 20rpx;
+  border-bottom: 1rpx solid #D8D8D8;
+}
+.messagePage .messageList .base .avatar {
+  width: 80rpx;
+  height: 80rpx;
+}
+.messagePage .messageList .base .body {
+  flex: 1;
+  padding: 0rpx 30rpx 0rpx 20rpx;
+}
+.messagePage .messageList .base .body .name {
+  max-width: 320rpx;
+  font-size: 30rpx;
+  font-weight: bolder;
+}
+.messagePage .messageList .base .right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.messagePage .messageList .base .right .date {
+  font-size: 24rpx;
+}
+.messagePage .messageList .base .right .unread {
+  margin-top: 6rpx;
+  width: 32rpx;
+  height: 32rpx;
+  line-height: 32rpx;
+  border-radius: 550rpx;
+  color: white;
+  font-size: 20rpx;
+  text-align: center;
+  background-color: #FF0000;
+}
+.messagePage .messageList .authority .body {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 50rpx;
+}
+.messagePage .messageList .authority .body .avatars {
+  display: flex;
+}
+.messagePage .messageList .authority .body .avatars .miniAvatar {
+  width: 38rpx;
+  height: 38rpx;
+  margin-left: 4rpx;
+}
+.messagePage .messageList .user .info {
+  margin-top: 4rpx;
+  width: 400rpx;
+  color: #969696;
+  font-size: 24rpx;
+}

pages/my/index.wxml

@@ -32,7 +32,7 @@
       </view>
       <view class="sBox" bindtap='jump' data-url="/pages/notice/index">
         <view class="noticeTips" wx:if="{{userInfo.user.messageCount>0}}">{{userInfo.user.messageCount}}</view>
-        <image class="img" src="/static/message.png" mode="" />
+        <image class="img" src="/static/message3.png" mode="" />
         <text class="title">消息通知</text>
       </view>
       <button class="resetBtn contactBtn" open-type="contact" plain="true">

pages/reading/index.wxml

@@ -1,7 +1,7 @@
 <view class="readingBox">
-  <!-- 查看他人配音 -->
+  <!-- 查看全部配音作品 -->
   <view class="moreWork" wx:if="{{readingType=='public'||readingType=='readMatch'}}">
-    <view class="left">查看他人配音</view>
+    <view class="left">查看全部配音作品</view>
     <view class="right" bindtap="otherWork" style="width: {{(videoInfo.avatarList.length+1)*42+64}}rpx;">
       <block wx:for="{{videoInfo.avatarList}}" wx:key="index">
         <image class="moreImg" style="left: {{(index+1)*40}}rpx;" src="{{item}}"></image>