发布朋友圈

pages/center/center.js

@@ -120,6 +120,22 @@ Page({
       url: '../myVolunteerActivity/myVolunteerActivity',
     })
   },
+  /**
+   * 跳转到我发布的朋友圈页面
+   */
+  toMyFirend: function () {
+    wx.navigateTo({
+      url: '../myFriendCircle/myFriendCircle',
+    })
+  },
+  /**
+   * 跳转到我预定的场馆页面
+   */
+  toMyOrder: function () {
+    wx.navigateTo({
+      url: '../order/order',
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    */

pages/center/center.wxml

@@ -11,6 +11,14 @@
   <view class="main">
     <view class="main-title">常用功能</view>
     <view class="main-container">
+      <view class="main-box" bindtap="toMyFirend">
+        <image src="../../images/friend.png"></image>
+        <view class="title">我的发布</view>
+      </view>
+      <view class="main-box" bindtap="toMyOrder">
+        <image src="../../images/order.png"></image>
+        <view class="title">我的订单</view>
+      </view>
       <view class="main-box">
         <image src="../../images/my-sign.png"></image>
         <view class="title">我的报名</view>

pages/center/center.wxss

@@ -55,6 +55,7 @@
   text-align: center;
   padding: 0 15rpx;
   box-sizing: border-box;
+  margin-bottom: 15rpx;
 }
 .main-box image{
   width: 65rpx;

pages/friendCircle/friendCircle.js

@@ -53,6 +53,16 @@ Page({
       wx.hideLoading();
     });
   },
+  newFriendCircle: function () {
+    wx.navigateTo({
+      url: '../newFriendCircle/newFriendCircle',
+    })
+  },
+  toMyFriendCircle: function () {
+    wx.navigateTo({
+      url: '../myFriendCircle/myFriendCircle',
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    */

pages/friendCircle/friendCircle.wxml

@@ -48,4 +48,8 @@
       <view class="date">{{item.gmtCreate}}</view>
     </view>
   </view>
+</view>
+<view class="new-friend-circle">
+  <view class="box new" bindtap="newFriendCircle">发布</view>
+  <view class="box" bindtap="toMyFriendCircle">我的</view>
 </view>

pages/friendCircle/friendCircle.wxss

@@ -49,4 +49,23 @@
 }
 .video video{
   width: 100%;
+}
+.new-friend-circle{
+  position: fixed;
+  right: 30rpx;
+  bottom: 30rpx;
+}
+.box{
+  width: 100rpx;
+  height: 100rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #9F1512;
+  color: #fff;
+  font-size: 32rpx;
+  border-radius: 50%;
+}
+.new{
+  margin-bottom: 10rpx;
 }

pages/myFriendCircle/myFriendCircle.js

@@ -0,0 +1,116 @@
+// pages/friendCircle/friendCircle.js
+var app = getApp();
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    usercenterUrl: app.usercenterUrl,
+    socialUrl: app.socialUrl,
+    momentsList: [],
+    currentPage: 1,
+    rows: 20
+  },
+  doGetMomentsList: function(page) {
+    var self = this;
+    app.dialog.loading('正在加载');
+    app.restAjax.get(app.restAjax.path('{socialUrl}/app/moments/listpagemomentsofpublicrelease', [self.data.socialUrl]), {
+      page: page,
+      rows: self.data.rows
+    }, null, function(code, data) {
+      if(data.rows.length == 0) {
+        app.dialog.msg('暂无数据');
+        return;
+      }
+      for(var i = 0, item; item = data.rows[i++];) {
+        if(item.type === 'photo') {
+          var photos = item.photos.split(',');
+          var photoArray = [];
+          for(var j = 0, jItem; jItem = photos[j++];) {
+            if(jItem.length != 0) {
+              photoArray.push(jItem);
+            }
+          }
+          item.photoArray = photoArray;
+        }
+      }
+      var momentsArray;
+      if(page <= 1) {
+        momentsArray = data.rows;
+      } else {
+        momentsArray = self.data.news.newsList;
+        momentsArray = momentsArray.concat(data.rows);
+      }
+      self.setData({
+        currentPage: page,
+        momentsList: momentsArray
+      })
+    }, function(code, data) {
+      app.dialog.msg(data.msg);
+    }, function() {
+      wx.stopPullDownRefresh();
+      wx.hideLoading();
+    });
+  },
+  newFriendCircle: function () {
+    wx.navigateTo({
+      url: '../newFriendCircle/newFriendCircle',
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.doGetMomentsList(1);
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    this.doGetMomentsList(1);
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    this.doGetMomentsList(this.data.currentPage + 1);
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/myFriendCircle/myFriendCircle.json

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

pages/myFriendCircle/myFriendCircle.wxml

@@ -0,0 +1,54 @@
+<view class="friend-circle" wx:for="{{momentsList}}" wx:for-item="item" wx:for-index="index" wx:key="momentsList">
+  <view class="friend-circle-box" wx:if="{{item.type === 'text'}}">
+    <view class="avatar">
+      <image src="{{usercenterUrl}}/app/user/downloadavatar/{{item.creator}}"></image>
+    </view>
+    <view class="content">
+      <view class="name">{{item.creatorName}}</view>
+      <view class="text">{{item.content}}</view>
+      <view class="date">{{item.gmtCreate}}</view>
+    </view>
+  </view>
+  <view class="friend-circle-box" wx:if="{{item.type === 'photo' && item.photoArray.length === 1}}">
+    <view class="avatar">
+      <image src="{{usercenterUrl}}/app/user/downloadavatar/{{item.creator}}"></image>
+    </view>
+    <view class="content">
+      <view class="name">{{item.creatorName}}</view>
+      <view class="text">{{item.content}}</view>
+      <view class="photo-one">
+        <image src="{{socialUrl}}/route/file/downloadfile/true/{{item.photoArray[0]}}"></image>
+      </view>
+      <view class="date">{{item.gmtCreate}}</view>
+    </view>
+  </view>
+  <view class="friend-circle-box" wx:if="{{item.type === 'photo' && item.photoArray.length > 1}}">
+    <view class="avatar">
+      <image src="{{usercenterUrl}}/app/user/downloadavatar/{{item.creator}}"></image>
+    </view>
+    <view class="content">
+      <view class="name">{{item.creatorName}}</view>
+      <view class="text">{{item.content}}</view>
+      <view class="photo-more">
+        <image src="{{socialUrl}}/route/file/downloadfile/true/{{photo}}" wx:for="{{item.photoArray}}" wx:for-item="photo" wx:for-index="photoIndex" wx:key="photoArray"></image>
+      </view>
+      <view class="date">{{item.gmtCreate}}</view>
+    </view>
+  </view>
+  <view class="friend-circle-box" wx:if="{{item.type === 'video'}}">
+    <view class="avatar">
+      <image src="{{usercenterUrl}}/app/user/downloadavatar/{{item.creator}}"></image>
+    </view>
+    <view class="content">
+      <view class="name">{{item.creatorName}}</view>
+      <view class="text">{{item.content}}</view>
+      <view class="video">
+        <video src="{{socialUrl}}/route/file/downloadfile/true/{{item.video}}"></video>
+      </view>
+      <view class="date">{{item.gmtCreate}}</view>
+    </view>
+  </view>
+</view>
+<view class="new-friend-circle">
+  <view class="box new" bindtap="newFriendCircle">发布</view>
+</view>

pages/myFriendCircle/myFriendCircle.wxss

@@ -0,0 +1,68 @@
+.friend-circle{
+  padding: 15rpx 30rpx;
+  border-bottom: 1px solid #DEDEDE;
+}
+.friend-circle:last-child {
+  border-bottom: none;
+}
+.friend-circle-box{
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 10rpx;
+}
+
+.avatar{
+  width: 8%;
+}
+.avatar image{
+  width: 100%;
+  height: 50rpx;
+  border-radius: 50rpx;
+}
+.content{
+  width: 90%;
+}
+.name{
+  font-size: 30rpx;
+  color: #949494;
+}
+.text{
+  font-size: 32rpx;
+  color: #000;
+  margin: 10rpx 0;
+}
+.date{
+  font-size: 28rpx;
+  color: #949494;
+}
+.photo-one image{
+  width: 100%;
+}
+.photo-more image{
+  width: 32%;
+  height: 150rpx;
+  margin-right: 2%;
+  margin-bottom: 10rpx;
+}
+.photo-more image:nth-child(3n){
+  margin-right: 0;
+}
+.video video{
+  width: 100%;
+}
+.new-friend-circle{
+  position: fixed;
+  right: 30rpx;
+  bottom: 30rpx;
+}
+.box{
+  width: 100rpx;
+  height: 100rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #9F1512;
+  color: #fff;
+  font-size: 32rpx;
+  border-radius: 50%;
+}

pages/newFriendCircle/newFriendCircle.js

@@ -0,0 +1,130 @@
+// pages/newFriendCircle/newFriendCircle.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    showAdd: true,
+    selectedType: '',
+    selectedList: [],
+    isPublic: '' //朋友圈是否公开
+  },
+  changepublic: function (e) {
+    this.setData({
+      isPublic: e.detail.value
+    })
+  },
+  selectContent: function () {
+    var self = this
+    wx.chooseMedia({
+      count: 9 - self.data.selectedList.length,
+      mediaType: ['image','video'],
+      sourceType: ['album', 'camera'],
+      success: function (res) {
+        console.log(res)
+        if (res.type == 'image') {
+          self.setData({
+            selectedType: res.type,
+            selectedList: self.data.selectedList.concat(res.tempFiles)
+          })
+        } else {
+          self.setData({
+            selectedType: res.type,
+            selectedList: self.data.selectedList.concat(res.tempFiles)
+          })
+        }
+        self.isShowAdd()
+        console.log(self.data.selectedList)
+      }
+    })
+  },
+  deletePhoto: function (e) {
+    var self = this
+    var now = e.currentTarget.dataset.idx
+    var result = self.data.selectedList
+    result.splice(now, 1)
+    this.setData({
+      selectedList: result
+    })
+    self.isShowAdd('delete')
+  },
+  isShowAdd: function (from) {
+    if (this.data.selectedType == 'image') {
+      if (this.data.selectedList.length < 9) {
+        this.setData({
+          showAdd: true
+        })
+      } else {
+        this.setData({
+          showAdd: false
+        })
+      }
+    } else {
+      if (from) {
+        this.setData({
+          showAdd: true
+        })
+      } else {
+        this.setData({
+          showAdd: false
+        })
+      }
+    }
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/newFriendCircle/newFriendCircle.json

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

pages/newFriendCircle/newFriendCircle.wxml

@@ -0,0 +1,30 @@
+<view class="new-friend-circle">
+  <view class="text">
+    <textarea placeholder="请输入内容"></textarea>
+  </view>
+  <view class="select">
+    <view class="photo" wx:for="{{selectedList}}" wx:key="index" wx:if="{{selectedList.length > 0}}">
+      <view class="type-box" wx:if="{{selectedType == 'image'}}">
+        <image src="{{item.tempFilePath}}"></image>
+        <image src="../../images/delete-photo.png" class="delete" bindtap="deletePhoto" data-idx="{{index}}"></image>
+      </view>
+      <view class="type-box" wx:else>
+        <video src="{{item.tempFilePath}}"></video>
+        <image src="../../images/delete-photo.png" class="delete" bindtap="deletePhoto" data-idx="{{index}}"></image>
+      </view>
+    </view>
+    <view class="add" bindtap="selectContent" wx:if="{{showAdd}}">
+      <image src="../../images/new.png"></image>
+    </view>
+  </view>
+  <view class="is-public">
+    是否公开：
+    <radio-group bindchange="changepublic">
+      <radio value="true" color="#9F1512">公开</radio>
+      <radio value="false" color="#9F1512">不公开</radio>
+    </radio-group>
+  </view>
+</view>
+<view class="submit">
+  发布
+</view>

pages/newFriendCircle/newFriendCircle.wxss

@@ -0,0 +1,79 @@
+.new-friend-circle{
+  padding: 30rpx;
+  margin-bottom: 100rpx;
+}
+.text{
+  width: 100%;
+  height: 250rpx;
+  margin-bottom: 30rpx;
+}
+.text textarea{
+  width: 100%;
+  height: 100%;
+  border: 1px solid #DEDEDE;
+  padding: 15rpx;
+  box-sizing: border-box;
+  font-size: 32rpx;
+}
+.add{
+  width: 32%;
+  height: 200rpx;
+  background: #DEDEDE;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: top;
+}
+.add image{
+  width: 100rpx;
+  height: 100rpx;
+}
+.is-public{
+  margin-top: 20rpx;
+  font-size: 30rpx;
+}
+.is-public radio-group{
+  display: inline-block;
+}
+.is-public radio-group radio{
+  margin-right: 20rpx;
+}
+.photo{
+  display: inline-block;
+  width: 32%;
+  height: 200rpx;
+  margin-right: 2%;
+  position: relative;
+  margin-bottom: 20rpx;
+}
+.photo:nth-child(3n){
+  margin-right: 0;
+}
+.photo image{
+  width: 100%;
+  height: 100%;
+}
+.photo image.delete{
+  width: 30rpx;
+  height: 30rpx;
+  position: absolute;
+  top: -15rpx;
+  right: -15rpx;
+}
+.type-box, .type-box video{
+  width: 100%;
+  height: 100%;
+}
+.submit{
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #9F1512;
+  height: 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 32rpx;
+}