1.1.40

README.md

@@ -10,6 +10,14 @@
 
 ## 更新日志
 
+### v1.1.40
+```
+新增：微信小程序直播功能
+优化：商品评价过滤无效内容
+
+注：本次更新须重新发布小程序
+```
+
 ### v1.1.39
 
 ```

app.json

@@ -57,7 +57,8 @@
     "pages/bargain/goods/index",
     "pages/points/log/index",
     "pages/sharp/index/index",
-    "pages/sharp/goods/index"
+    "pages/sharp/goods/index",
+    "pages/live/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#ffffff",

pages/live/index.js

@@ -0,0 +1,217 @@
+const App = getApp();
+
+// 工具类
+import Util from '../../utils/util.js';
+
+
+// 引用直播组件
+const livePlayer = requirePlugin('live-player-plugin');
+
+// 直播状态
+const LiveStatus = {
+  101: {
+    'name': '直播中',
+    'value': 101,
+  },
+  102: {
+    'name': '未开始',
+    'value': 102,
+  },
+  103: {
+    'name': '已结束',
+    'value': 103,
+  },
+  104: {
+    'name': '禁播',
+    'value': 104,
+  },
+  105: {
+    'name': '暂停中',
+    'value': 105,
+  },
+  106: {
+    'name': '异常',
+    'value': 106,
+  },
+  107: {
+    'name': '已过期',
+    'value': 107,
+  },
+};
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    scrollHeight: 0,
+
+    list: [], // 列表数据
+    page: 1, // 当前页码
+    isLoading: true, // 是否正在加载中
+    isLastPage: false, // 当前是最后一页
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    let _this = this;
+    // 设置列表容器高度
+    _this.setListHeight();
+    // 获取直播间列表
+    _this.getLiveRoomList();
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 获取直播间列表
+   */
+  getLiveRoomList(isPage, page) {
+    let _this = this;
+    App._get('live.room/lists', {
+      page: page || 1
+    }, result => {
+      let resList = result.data.list,
+        dataList = _this.data.list;
+      if (isPage == true) {
+        _this.setData({
+          'list.data': dataList.data.concat(resList.data),
+          isLoading: false,
+        });
+      } else {
+        _this.setData({
+          list: resList,
+          isLoading: false,
+          isLastPage: false,
+        });
+      }
+      // 刷新直播间状态 (体验不佳, 暂不使用)
+      // _this.setLiveStatusText(resList);
+    });
+  },
+
+  /**
+   * 刷新直播间状态
+   * mix: 因livePlayer.getLiveStatus接口需要间隔1分钟频率轮询, 用户二次进入时体验不佳, 暂不调用
+   */
+  setLiveStatusText(list) {
+    let _this = this;
+    let startIndex = _this.data.list.data.length - list.data.length;
+
+    list.data.forEach((itm, idx) => {
+      let index = startIndex + idx;
+      let item = _this.data.list.data[index];
+      let dataKey = 'list.data[' + index + ']';
+      // 首次获取立马返回直播状态，往后间隔1分钟或更慢的频率去轮询获取直播状态
+      livePlayer.getLiveStatus({
+          room_id: item['room_id']
+        })
+        .then(res => {
+          // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期 
+          let liveStatus = res.liveStatus,
+            liveStatusText1 = LiveStatus[liveStatus]['name'],
+            liveStatusText2 = liveStatusText1;
+          if (liveStatus == 101) {
+            liveStatusText1 = '正在直播中';
+          } else if (liveStatus == 102) {
+            liveStatusText1 = _this.semanticStartTime(item.start_time) + ' 开播';
+          }
+          _this.setData({
+            [dataKey + '.live_status']: liveStatus,
+            [dataKey + '.live_status_text_1']: liveStatusText1,
+            [dataKey + '.live_status_text_2']: liveStatusText2,
+            // test
+            // [dataKey + '.test']: `test: ${item['room_id']}`,
+          });
+          console.log(`getLiveStatus: ${item['room_id']}`);
+        })
+        .catch(err => {
+          console.log(`getLiveStatus: ${item['room_id']}`);
+        });
+    });
+    return list;
+  },
+
+  /**
+   * 语义化开播时间
+   */
+  semanticStartTime(startTime) {
+    // 转换为 YYYYMMDD 格式
+    let startTimeObj = new Date(Util.format_date(startTime));
+    let $startDate = Util.dateFormat("YYYYmmdd", startTimeObj);
+    // 获取今天的 YYYY-MM-DD 格式
+    let $todyDate = Util.dateFormat("YYYYmmdd", new Date());
+    // 获取明天的 YYYY-MM-DD 格式
+    var tomorrowTimeObj = new Date();
+    tomorrowTimeObj.setTime(tomorrowTimeObj.getTime() + 24 * 60 * 60 * 1000);
+    let $tomorrowDate = Util.dateFormat("YYYYmmdd", tomorrowTimeObj);
+    // 使用IF当作字符串判断是否相等
+    if ($startDate == $todyDate) {
+      return Util.dateFormat('今天HH:MM', startTimeObj);
+    } else if ($startDate == $tomorrowDate) {
+      return Util.dateFormat('明天HH:MM', startTimeObj);
+    }
+    // 常规日期格式
+    return Util.dateFormat('mm/dd HH:MM', startTimeObj);
+  },
+
+  /**
+   * 下拉到底加载数据
+   */
+  onPageDown() {
+    let _this = this;
+    // 已经是最后一页
+    if (_this.data.page >= _this.data.list.last_page) {
+      _this.setData({
+        isLastPage: true
+      });
+      return false;
+    }
+    // 加载下一页列表
+    _this.getLiveRoomList(true, ++_this.data.page);
+  },
+
+  /**
+   * 设置列表容器高度
+   */
+  setListHeight() {
+    let _this = this,
+      systemInfo = wx.getSystemInfoSync();
+    _this.setData({
+      scrollHeight: systemInfo.windowHeight * 0.98
+    });
+  },
+
+  /**
+   * 进入直播间
+   */
+  onTargetLiveRoomIndex(e) {
+    let roomId = e.currentTarget.dataset.id;
+    let customParams = {
+      path: 'pages/index/index'
+    };
+    wx.navigateTo({
+      url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
+    });
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+    return {
+      title: '直播列表',
+      path: "/pages/live/index?" + App.getShareUrlParams()
+    };
+  },
+
+})

pages/live/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "直播列表"
+}

pages/live/index.wxml

@@ -0,0 +1,50 @@
+<view class="container">
+  <view class="live-room-list">
+    <scroll-view bindscrolltolower="onPageDown" scroll-y="{{ true }}" style="height: {{ scrollHeight }}px">
+      <view wx:for="{{ list.data }}" wx:key="this" catchtap="onTargetLiveRoomIndex" data-id="{{ item.room_id }}" class="live-room-item live-status__{{ item.live_status }}">
+        <!-- 直播状态 -->
+        <view class="room-head dis-flex flex-y-center">
+          <!-- 直播中 -->
+          <text wx:if="{{ item.live_status == 101 }}" class="live-status_icon iconfont icon-zhibozhong"></text>
+          <!-- 未开播 -->
+          <text wx:if="{{ item.live_status == 102 }}" class="live-status_icon iconfont icon-shijian-s"></text>
+          <!-- 已结束 -->
+          <text wx:if="{{ item.live_status >= 103 }}" class="live-status_icon iconfont icon-shipin"></text>
+          <!-- 状态说明 -->
+          <text class="live-status_text">{{ item.live_status_text_1 }}</text>
+        </view>
+        <!-- 房间名称 -->
+        <view class="room-name onelist-hidden">
+          <text>{{ item.room_name }}</text>
+        </view>
+        <!-- 房间封面 -->
+        <view class="room-cover">
+          <image src="{{ item.share_img }}" mode="aspectFill"></image>
+        </view>
+        <!-- 主播信息 -->
+        <view class="room-anchor dis-flex">
+          <view class="lay-left flex-box dis-flex flex-y-center">
+            <!-- 主播头像 -->
+            <!-- mix: 微信api未提供主播头像, 此处显示封面图 -->
+            <view class="anchor-avatar">
+              <image src="{{ item.share_img }}" mode="aspectFill"></image>
+            </view>
+            <!-- 主播昵称 -->
+            <view class="anchor-name">
+              <text>{{ item.anchor_name }}</text>
+            </view>
+          </view>
+          <view class="lay-right">
+            <text class="live-status_text2">{{ item.live_status_text_2 }}</text>
+          </view>
+        </view>
+      </view>
+      <view wx:if="{{ isLastPage }}" class="no-more f-28">亲, 没有更多了</view>
+    </scroll-view>
+  </view>
+  <!-- 没有记录 -->
+  <view class="yoshop-notcont" wx:if="{{ !list.data.length && !isLoading }}">
+    <text class="iconfont icon-wushuju"></text>
+    <text class="cont">亲，暂无直播间哦</text>
+  </view>
+</view>

pages/live/index.wxss

@@ -0,0 +1,92 @@
+.live-room-item {
+  width: 710rpx;
+  margin: 0 auto 20rpx auto;
+  padding: 25rpx 24rpx;
+  background: #fff;
+  border-radius: 5rpx;
+  box-sizing: border-box;
+  box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
+}
+
+.live-room-item:first-child {
+  margin-top: 20rpx;
+}
+
+.room-head {
+  color: #b6b6b6;
+  line-height: 40rpx;
+}
+
+.room-head .live-status_icon {
+  margin-right: 15rpx;
+  font-size: 34rpx;
+}
+
+.room-head .live-status_text {
+  font-size: 26rpx;
+}
+
+/* 直播中 */
+
+.live-status__101 .room-head {
+  color: #db384b;
+}
+
+.live-status__102 .room-head {
+  color: #db384b;
+}
+
+/* 房间名称 */
+
+.room-name {
+  margin-top: 10rpx;
+  font-size: 28rpx;
+}
+
+/* 房间封面图 */
+
+.room-cover {
+  margin-top: 15rpx;
+}
+
+.room-cover image {
+  display: block;
+  width: 100%;
+  height: 371rpx;
+}
+
+/* 主播信息 */
+
+.room-anchor {
+  margin-top: 20rpx;
+}
+
+.room-anchor .anchor-avatar {
+  margin-right: 12rpx;
+}
+
+.room-anchor .anchor-avatar image {
+  display: block;
+  width: 45rpx;
+  height: 45rpx;
+  border-radius: 50%;
+}
+
+.anchor-name {
+  font-size: 26rpx;
+}
+
+.live-status_text2 {
+  color: #b6b6b6;
+  font-size: 26rpx;
+}
+
+/* 直播中 */
+
+.live-status__101 .live-status_text2 {
+  color: #db384b;
+}
+
+.live-status__102 .live-status_text2 {
+  color: #db384b;
+}

utils/util.js

@@ -73,4 +73,30 @@ module.exports = {
     return /(^[0-9]\d*$)/.test(value);
   },
 
+  /**
+   * 对Date的扩展，将 Date 转化为指定格式的String
+   * 月(Y)、月(m)、日(d)、小时(H)、分(M)、秒(S) 可以用 1-2 个占位符，
+   * 例子：
+   * dateFormat('YYYY-mm-dd HH:MM:SS', new Date()) ==> 2020-01-01 08:00:00
+   */
+  dateFormat(fmt, date) {
+    const opt = {
+      "Y+": date.getFullYear().toString(), // 年
+      "m+": (date.getMonth() + 1).toString(), // 月
+      "d+": date.getDate().toString(), // 日
+      "H+": date.getHours().toString(), // 时
+      "M+": date.getMinutes().toString(), // 分
+      "S+": date.getSeconds().toString() // 秒
+      // 有其他格式化字符需求可以继续添加，必须转化成字符串
+    };
+    let ret;
+    for (let k in opt) {
+      ret = new RegExp("(" + k + ")").exec(fmt);
+      if (ret) {
+        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+      };
+    };
+    return fmt;
+  },
+
 };

version.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.1.39"
+  "version": "1.1.40"
 }