client: 消息系统完善

view/xcx/app.json

@@ -64,7 +64,8 @@
     "components/price-change/index",
     "components/general-window/index",
     "pages/message/index",
-    "pages/mine_rule/index"
+    "pages/mine_rule/index",
+    "pages/message_details/index"
   ],
   "subPackages": [
     {

view/xcx/pages/message/index.js

@@ -3,6 +3,7 @@
 import { getProductHot } from '../../api/store.js';
 import { getMessages } from "../../api/message"
 import { SplitArray } from "../../utils/util"
+var base64 = require("../../utils/base64")
 
 const app = getApp();
 
@@ -21,7 +22,27 @@ Page({
     host_product:[],
     iShidden: false,
     page: 0,
-    messages: []
+    messages: [{
+      "id": 1,
+      "icon": "/images/one.png",
+      "from": "系统消息",
+      "subject": "优惠活动",
+      "body": "<p>here is html code</p><p style='color:red;'>some code</p>",
+      "ts": "2021/3/12 12:43:12",  
+      "expiresAt": 1234354545,
+      "type": 0,
+      "read": 0
+    },{
+      "id": 1,
+      "icon": "/images/two.png",
+      "from": "美天旺客服",
+      "subject": "退货通知",
+      "body": "<p>here is html code</p><p style='color:red;'>some code</p>",
+      "ts": "2021/3/12 12:43:12",  
+      "expiresAt": 1234354545,
+      "type": 0,
+      "read": 0
+    }]
   },
 
   /**
@@ -43,6 +64,7 @@ Page({
   },
 
   onLoadFun: function() {
+    this.pullMessageList();
     this.get_host_product();
     this.refreshNotifications();
   },
@@ -100,13 +122,16 @@ Page({
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh: function () {
-    setTimeout(function() {
-      wx.stopPullDownRefresh({
-        success: (res) => {
+    var that = this;
+    wx.stopPullDownRefresh({
+      success: (res) => {
+        setTimeout(function() {
           console.log("success stop")
-        },
-      });
-    }, 300);
+          that.data.page = 1;
+          that.pullMessageList();
+        }, 300);
+      },
+    });
   },
 
   /**
@@ -134,5 +159,11 @@ Page({
     }, err=> {
 
     });
+  },
+
+  tabClick(e) {
+    wx.navigateTo({
+      url: '/pages/message_details/index?data=' + base64.encode(JSON.stringify(e.currentTarget.dataset.items)),
+    });
   }
 })

view/xcx/pages/message/index.wxml

@@ -7,8 +7,17 @@
     <recommend host_product="{{host_product}}"></recommend>
   </view>
   <view class="list" wx:else>
-    <view class="item" wx:for="{{messages}}" wx:key="index">
-      {{ item }}
+    <view class="item" wx:for="{{messages}}" wx:key="index" bindtap="tabClick" data-items='{{item}}'>
+      <view class="icon">
+        <image src="{{item.icon}}"></image>
+      </view>
+      <view class="content">
+        <view class="header">
+          <view class="from">{{item.from}}</view>
+          <view class="time">{{item.ts}}</view>
+        </view>
+        <view class="title">{{item.subject}}</view>
+      </view>
     </view>
   </view>
 </view>

view/xcx/pages/message/index.wxss

@@ -3,4 +3,11 @@
 .message .noMessage .picture {width:414rpx; height:336rpx; margin:20rpx auto; }
 .message .noMessage .picture image{width:100%;height:100%; }
 .message .list { margin: auto; }
-.message .list .item { background-color: red; height: 168rpx; margin-bottom: 12rpx; }
+.message .list .item { background-color: #fff; height: 148rpx; margin-bottom: 12rpx; display: flex; padding-top: 22rpx; width: 100%; padding-left: 20rpx; }
+.message .list .item .icon { width: 104rpx; height: 104rpx; }
+.message .list .item .icon image { width: 100%; height: 100%; }
+.message .list .item .content { margin-left: 20rpx; width: 82%; }
+.message .list .item .content .header {display: flex; }
+.message .list .item .content .header .from { font-size: 32rpx; width: 50%; text-align: left; }
+.message .list .item .content .header .time { font-size: 28rpx; color: #a1a1a1; width: 50%; text-align: right; margin-right: 20rpx; }
+.message .list .item .content .title { font-size: 28rpx; color: #a1a1a1; text-align: left; line-height: 60rpx; }

view/xcx/pages/message_details/index.js

@@ -0,0 +1,96 @@
+// pages/message_details/index.js
+var base64 = require("../../utils/base64")
+
+const app = getApp();
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    parameter: {
+      title: "消息详情",
+      'navbar': '1',
+      'return': '1',
+      'color': false,
+    },
+    id: 0,
+    title: "",
+    from: "",
+    date: "",
+    content: "",
+    fixed: false,
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var data = JSON.parse(base64.decode(options.data));
+    var params = this.data.parameter;
+    params.title = data.subject;
+    this.setData({
+      id: data.id,
+      title: data.subject,
+      from: data.from,
+      date: data.ts,
+      content: data.body,
+      parameter: params,
+      fixed: app.globalData.isFixed,
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  delClick: function() {
+
+  }
+})

view/xcx/pages/message_details/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "navbar": "/components/navbar/index"
+  }
+}

view/xcx/pages/message_details/index.wxml

@@ -0,0 +1,14 @@
+<navbar parameter='{{parameter}}'></navbar>
+<view class="message_details">
+  <!-- <view class="title">{{title}}</view> -->
+  <view class="header">
+    <view class="from">{{from}}</view>
+    <view class="date">{{date}}</view>
+  </view>
+  <view class="content">
+    <rich-text nodes="{{content}}"></rich-text>
+  </view>
+  <view class="bottom {{ fixed ? 'fixed' : ''}}">
+    <button bindtap="delClick">删除消息</button>
+  </view>
+</view>

view/xcx/pages/message_details/index.wxss

@@ -0,0 +1,11 @@
+
+.message_details { margin: auto; }
+.message_details .title { width: 100%; text-align: center; font-size: 36rpx; font-weight: bold; padding: 20rpx; background-color: #fff; }
+.message_details .header{ display: flex; width: 100%; background-color: #fff; padding: 30rpx; margin-bottom: 20rpx; }
+.message_details .header .from { color: gray; width: 50%; text-align: left; }
+.message_details .header .date { color: gray; width: 50%; text-align: right; }
+.message_details .content { background-color: #fff; padding: 30rpx; }
+.message_details .bottom { position: fixed; bottom: 30rpx; text-align: center; width: 100%; }
+.message_details .bottom button { width: 90%; background-color: red; border-radius: 20rpx; color: #fff; height: 80rpx; line-height: 80rpx; margin: auto; }
+
+.fixed { bottom: 70rpx !important; }

view/xcx/utils/base64.js

@@ -0,0 +1,129 @@
+var Base64 = {
+  // private property
+  _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+  // public method for encoding
+  encode: function(input) {
+    var output = "";
+    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+    var i = 0;
+    input = Base64._utf8_encode(input);
+
+    while (i < input.length) {
+
+      chr1 = input.charCodeAt(i++);
+      chr2 = input.charCodeAt(i++);
+      chr3 = input.charCodeAt(i++);
+
+      enc1 = chr1 >> 2;
+      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+      enc4 = chr3 & 63;
+
+      if (isNaN(chr2)) {
+        enc3 = enc4 = 64;
+      } else if (isNaN(chr3)) {
+        enc4 = 64;
+      }
+
+      output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
+
+    }
+
+    return output;
+  },
+
+  // public method for decoding
+  decode: function(input) {
+    var output = "";
+    var chr1, chr2, chr3;
+    var enc1, enc2, enc3, enc4;
+    var i = 0;
+
+    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+
+    while (i < input.length) {
+
+      enc1 = this._keyStr.indexOf(input.charAt(i++));
+      enc2 = this._keyStr.indexOf(input.charAt(i++));
+      enc3 = this._keyStr.indexOf(input.charAt(i++));
+      enc4 = this._keyStr.indexOf(input.charAt(i++));
+
+      chr1 = (enc1 << 2) | (enc2 >> 4);
+      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+      chr3 = ((enc3 & 3) << 6) | enc4;
+
+      output = output + String.fromCharCode(chr1);
+
+      if (enc3 != 64) {
+        output = output + String.fromCharCode(chr2);
+      }
+      if (enc4 != 64) {
+        output = output + String.fromCharCode(chr3);
+      }
+
+    }
+
+    output = Base64._utf8_decode(output);
+
+    return output;
+  },
+
+  // private method for UTF-8 encoding
+  _utf8_encode: function(string) {
+    string = string.replace(/\r\n/g, "\n");
+    var utftext = "";
+
+    for (var n = 0; n < string.length; n++) {
+
+      var c = string.charCodeAt(n);
+
+      if (c < 128) {
+        utftext += String.fromCharCode(c);
+      } else if ((c > 127) && (c < 2048)) {
+        utftext += String.fromCharCode((c >> 6) | 192);
+        utftext += String.fromCharCode((c & 63) | 128);
+      } else {
+        utftext += String.fromCharCode((c >> 12) | 224);
+        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+        utftext += String.fromCharCode((c & 63) | 128);
+      }
+
+    }
+
+    return utftext;
+  },
+
+  // private method for UTF-8 decoding
+  _utf8_decode: function(utftext) {
+    var string = "";
+    var i = 0;
+    var c = 0;
+    var c1 = 0;
+    var c2 = 0;
+    var c3 = 0;
+
+    while (i < utftext.length) {
+
+      c = utftext.charCodeAt(i);
+
+      if (c < 128) {
+        string += String.fromCharCode(c);
+        i++;
+      } else if ((c > 191) && (c < 224)) {
+        c2 = utftext.charCodeAt(i + 1);
+        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+        i += 2;
+      } else {
+        c2 = utftext.charCodeAt(i + 1);
+        c3 = utftext.charCodeAt(i + 2);
+        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+        i += 3;
+      }
+
+    }
+
+    return string;
+  }
+}
+
+module.exports = Base64