yql/pages/push/circle_user.vue

<template>
  <view id="moments"
        class="page">
    <view  v-if="showVedio"  class="showVedio"  :style="{height:screenHeight+'px',width:'100%'}">
      <!-- <video :src="videoPath"
             style="height: 100%;width: 100%"
             id="myVideo"
             object-fit="fill"
             airplay="allow" /> -->
      <video autoplay="true"
             page-gesture="true"
             controls="false"
             @fullscreenchange="fullscreenchange"
             :style="{height:'100%',width:'100%'}"
             id="myVideo"
             class="showVedio-video"
             :src="videoPath">
        <cover-image @tap="showVedio = false"
                     src="/static/theme/default/my/close.png"
                     class="cloneBut">
        </cover-image>

        <!-- </cover-view> -->
      </video>
    </view>

    <view class="home-pic">
      <avatar selWidth="600upx"
              selHeight="600upx"
              @upload="upload"
              :avatarSrc="circleImg"
              avatarStyle="width: 750upx; height: 500upx; border-radius: 0upx;" />
      </avatar>
      <view class="home-pic-base">
        <view class="top-pic">
          <image class="header"
                 :src="myPhoto"
                 @tap.stop="goDetails(my_data.id)"
                 :lazy-load="true" />
        </view>
        <view class="top-name"
              style="color: #FFFFFF;margin-bottom: 10px;">{{ my_data.nickname }}</view>
      </view>
    </view>

    <view class="new_msg"
          @tap="goCircleChat"
          v-if="no_reader_msg">你有新的消息</view>

    <view class="moments__post"
          v-for="(post,index) in posts"
          :key="index"
          :id="'post-'+index" >
      <view class="post-left">
        <image class="post_header"
               :src="staticPhoto + post.header_image + '?_=' + imgRan"
               @tap="goDetails(post.uid)"
               :lazy-load="true" />
      </view>

      <view class="post_right">
        <text class="post-username"
              @tap="goDetails(post.uid)">{{post.username}}</text>
        <view>
          <view id="paragraph"
                class="paragraph"
                @tap="init_input()">{{post.content.text}}</view>

          <!-- 相册 -->
          <view class="thumbnails"
                v-if="post.type == 0"
                @tap="init_input()">
            <view :class="post.content.value.length === 1 ? 'my-gallery' : 'thumbnail' "
                  v-for="(image, index_images) in post.content.value"
                  :key="index_images">
              <image class="gallery_img"
                     :lazy-load="true"
                     mode="aspectFill"
                     :src="staticPath + post.post_id +'/' + image"
                     :data-src="image"
                     @tap="previewImage(index,index_images)"/>
				<image v-if="post.content.video_path"  @tap="previewImage(index,index_images)"  class="bofang-button" style="width: 30px;height: 30px;position: absolute;top: 315rpx;left:220rpx"   mode="aspectFill" src="/static/theme/default/my/bofang.png"></image>
            </view>
          </view>
        </view>
        <view class="pay_view"
              v-if="post.can_pay == 1"> <button :disabled="post.can_pay_times == 0"
                  :style="{'background-color':post.can_pay_times == 1?'#4591ff':'#A9A9A9'}"
                  size="mini"
				   @tap="open(index)"
                  type="primary">{{post.can_pay_times == 0 ? '已售出' : '￥'+post.pay_amount + '元'}}</button></view>

        <!-- 资料条 -->
        <view class="toolbar">
          <view class="timestamp">{{ post.timestamp }}</view>
          <view class="like"
                @tap="like(index)">
            <image :src="post.islike === 0 ? '../../static/theme/default/push/circle/islike.png' : '../../static/theme/default/push/circle/like.png'"
                   :lazy-load="true" />
          </view>
          <view class="comment"
                @tap="comment(index)">
            <image src="../../static/theme/default/push/circle/comment.png"
                   :lazy-load="true"></image>
          </view>
        </view>
        <!-- 赞／评论区 -->
        <view class="post-footer">
          <view class="footer_content"
                v-if="post.like.length">
            <image class="liked"
                   src="../../static/theme/default/push/circle/liked.png"
                   :lazy-load="true"></image>
            <text class="nickname"
                  v-for="(user,index_like) in post.like"
                  :key="index_like"
                  @tap="goDetails(user.uid)">
              {{(index_like ? ',' : '' ) + user.username}}
            </text>
          </view>
          <view class="footer_content"
                v-for="(comment,comment_index) in post.comments"
                :key="comment_index"
                @tap="reply(index,comment_index)">

            <text class="comment-nickname"
                  style="word-break:break-all;">
              {{comment.username + comment.reply + ': '}}
              <text class="comment-content">
                {{comment.content}}
              </text>
            </text>

          </view>
        </view>
      </view>
      <!-- 结束 post -->
    </view>

    <view class="foot"
          v-show="showInput">
      <chat-input @send-message="send_comment"
                  @blur="blur"
                  :focus="focus"
                  :placeholder="input_placeholder"></chat-input>
      <!-- <chat-input @send-message="send_comment" @blur="blur" :placeholder="input_placeholder"></chat-input> -->
    </view>
    <view class="uni-loadmore"
          v-if="showLoadMore">{{loadMoreText}}</view>
    <view :class="['action_main animated faster',(action_menu ? 'bounceInDown' : 'bounceOutUp')]"
          v-show="showActionMenu"
          @tap="actionMain">
      <view class="action_base">

        <view class="sj"></view>

        <view class="action_item"
              @tap="goAction(0)">
          <text class="action_item_text">发送图文</text>
        </view>

        <view class="action_item"
              @tap="goAction(1)">
          <text class="action_item_text">发送视频</text>
        </view>
      </view>
    </view>
	  <uni-popup ref="popup" type="address">
		  <uni-popup-address :userAddress="userAddress" :amount="amount" :goods_name="goods_name" :small_pic="small_pic" @confirm="goBuy"></uni-popup-address>
	  </uni-popup>
      <pay-keyboard   :showCose="showCose" :set_info = "set_info" :show_key="show_key" ref="payKeyboard" :set_msg="set_msg" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
  </view>


</template>
<script>
import chatInput from './circle/chat_input.vue'; //输入消息框
import _get from '../../common/_get';
import _hook from '../../common/_hook';
import avatar from "../../components/yq-avatar/yq-avatar.vue";
import _data from '../../common/_data';
import UniPopupAddress from "../../components/uni-popup/uni-popup-address";
import UniPopup from "../../components/uni-popup/uni-popup";
import payKeyboard from "../../components/uni-keyword/uni-keyword";
export default {
  components: {
	  UniPopup,
	  UniPopupAddress,
      chatInput,
       avatar,
      payKeyboard
  },
  data () {
    return {
        showPage:true,
      my_data: {
        id: 0,
        nickname: '',
        photo: 'default_man/90.jpg',
        circle_img: 'default_circle_img.jpg',
      },
        showCose:true,
        set_info:'请输入交易密码，以确认身份',
        show_key:false,
        set_msg:'请输入交易密码',
      user_id: 0,
      action_menu: false,
      posts: [],// 模拟数据
      index: '',
      comment_index: '',
      input_placeholder: '评论', //占位内容
      focus: false, //是否自动聚焦输入框
      is_reply: false, //回复还是评论
      showInput: false, //评论输入框
      screenHeight: '', //屏幕高度(系统)
      platform: '',
      windowHeight: '',//可用窗口高度(不计入软键盘)
      loadMoreText: "加载中...",
      showLoadMore: false,
      is_more: false,
      no_reader_msg: 0,
      doubleClick: false,
	  showVedio:false,
	  videoPath:'',
        post_id:'',
        post_index_id:0,
        userAddress:{
            regionStr: '',
            username: '',
            mobile: '',
            address: '',
            regionCode:'440113'
        },
        small_pic:'',
        amount:'',
        goods_name: '',
    }
  },
  computed: {
	regionName(){
	    return this.region.map(item=>item.name).join(' ')
   },
    showActionMenu () {
      return this.action_menu;
    },
    myPhoto () {
      return _data.staticPhoto() + this.my_data.photo + '?_=' + this.imgRan;
    },
    circleImg () {
      return _data.staticPhoto() + this.my_data.circle_img;
    },
    staticPath () {
      return _data.staticCircle();
    },
    staticPhoto () {
      return _data.staticPhoto();
    },
    imgRan () {
      return Math.random();
    },
  },
  onLoad (option) {
    let _this = this;
    _this.user_id = option.user_id;
    uni.getSystemInfo({ //获取设备信息
      success: (res) => {
        _this.screenHeight = res.screenHeight;
        _this.platform = res.platform;
      }
    });
  },
  onShow () {
    _hook.routeSonHook();
    let _this = this;
      let circle_data = _data.localData('circle_data_user');
    /** 加载本地缓存数据，让页面秒速渲染出来 */
    if (circle_data) {
      _this.posts = circle_data;
      if (_data.data('no_reader_circle') || _data.data('no_reader_circle_chat_num')) {
        this.posts = [];
        _data.data('circle_data_user', []);
        this.pullDownRefresh();
      }
    } else {
      _this.pullDownRefresh();
    }
      let userAddress =_data.localData('data_user_address');
    if(userAddress)_this.userAddress = userAddress;
    this.no_reader_msg = _data.data('no_reader_circle_chat_num') ? 1 : 0;

    _data.data('no_reader_circle', 0);

    // 监听窗口尺寸变化,窗口尺寸不包括底部导航栏
    uni.onWindowResize((res) => {
      if (this.platform === 'ios') {
        this.windowHeight = res.size.windowHeight;
        this.adjust();
      } else {
        if (this.screenHeight - res.size.windowHeight > 60 && this.windowHeight <= res.size.windowHeight) {
          this.windowHeight = res.size.windowHeight;
          this.adjust();
        }
      }
    });
    uni.$off('data_circle_data_user');
    /** 监听最新数据 */
    uni.$on('data_circle_data_user', function (data) {
      console.log(1111)
      _this.posts = data;
    });
    /** 监听新的个人数据 */
    uni.$on('data_user_info', function (data) {
      _this.my_data = data;
    });

    /** 监听朋友圈动态提示 */
    uni.$on('data_circle_tips', function (data) {
      if (!isNaN(data)) {
        _this.no_reader_msg = 1;
      };
    });

    _this.my_data = _data.data('user_info');
  },
  onNavigationBarButtonTap (e) {
    this.action_menu = !this.action_menu;
  },
  onUnload () {
    uni.$off('data_circle_tips');
    uni.$off('data_user_info');
    uni.$off('data_circle_data_user');
    uni.offWindowResize(() => {
    });
    this.max = 0,
      this.data = [],
      this.loadMoreText = "加载更多",
      this.showLoadMore = false;
  },
  onReachBottom () { //监听上拉触底事件
    let _this = this;
    _this.showLoadMore = true;
    if (_this.is_more) {
      return;
    }
    let time = 0,
      is_length = _this.posts.length;
    if (is_length) {
      time = _this.posts[is_length - 1].time;
    }
    _get.getUserCircleList({
      time: time,
      type: 1,
      user_id: _this.user_id
    }, (data) => {
      _this.my_data = data.user_info;
      if (data.data.length < 10) {
        this.loadMoreText = '没有更多数据了';
        this.is_more = true;
      }
    });
  },
  onPullDownRefresh () { //监听下拉刷新动作
    if (_data.data('no_reader_circle') || _data.data('no_reader_circle_chat_num')) {
      this.posts = [];
      _data.data('circle_data', []);
    }
    this.pullDownRefresh();
  },
  onNavigationBarButtonTap (e) {//监听标题栏点击事件
     let _this = this;
    if (e.index == 0) {
      // this.navigateTo('./circle/send');
      // this.action_menu = !this.action_menu
      let list = [{
        name: "图文",
        key: "image"
      },{
        name: "短视频",
        key: "video"
      },{
        name: "取消",
        key: "cancle"
      }]
      uni.showActionSheet({
        itemList: list.map(v => v.name),
        success: res => {
          if(res.tapIndex == 2)return false;
          uni.navigateTo({
            url: './circle/send?type=' + list[res.tapIndex].key+'&user_id='+_this.user_id,
          });
        },
      });
    }
  },
  methods: {
    goAction (index) {
      if (index === 0) {
        this.navigateTo('./circle/send?user_id='+this.user_id);
      }
    },
    actionMain () {
      this.action_menu = !this.action_menu;
    },
    upload (e) {
      let _this = this;
      _this.$httpSendFile({
        local_url: e.path,
        type: 3,
        success (data) {
          _this.$httpSend({
            path: '/im/action/upCircleImg',
            success (data) {
              _get.base();
              uni.showToast({
                title: '更换成功',
                duration: 2000
              });
            }
          });
        },
      });
    },
    goCircleChat () {
      _data.data('no_reader_circle_chat_num', 0);
      this.navigateTo('./circle_chat_details');
    },
    pullDownRefresh () {
      let _this = this;
      //初始化数据
      let time = 0;
      if (this.posts.length) {
        time = this.posts[0].time;
      }
      console.log("_this.user_id",_this.user_id)
      _get.getUserCircleList({
        time: time,
        type: 0,
        user_id: _this.user_id,
      }, (data) => {
        _this.my_data = data.user_info;
      });
      uni.stopPullDownRefresh(); //停止下拉刷新
      /** 取消好友动态提示 */
      _data.data('no_reader_circle', 0);
    },
    goDetails (user_id) {
      this.navigateTo('../details/index?user_id=' + user_id);
    },
    navigateTo (url) {
      uni.navigateTo({
        url: url
      });
    },
    like (index) {
      let _this = this,
        is_like = (_this.posts[index].islike ? 0 : 1);
      console.log(is_like)
      _this.$httpSend({
        path: '/im/circle/likeAction',
        data: {
          is_like: is_like,
          id: _this.posts[index].post_id,
        },
        success (data) {
          // _this.posts[index].islike = data.action;

        }
      });
    },
    comment (index) {
      if (this.showInput) {
        this.showInput = false;
        this.focus = false;
        this.index = '';
      } else {
        this.showInput = true; //调起input框
        this.focus = true;
        this.index = index;
      }
    },
    adjust () { //当弹出软键盘发生评论动作时,调整页面位置pageScrollTo

      uni.createSelectorQuery().selectViewport().scrollOffset(res => {
        var scrollTop = res.scrollTop;
        let view = uni.createSelectorQuery().select("#post-" + this.index);
        view.boundingClientRect(data => {

          // console.log("data:" + JSON.stringify(data));
          // console.log("手机屏幕高度:" + this.screenHeight);
          // console.log("竖直滚动位置" + scrollTop);
          // console.log("节点离页面顶部的距离为" + data.top);
          // console.log("节点高度为" + data.height);
          // console.log("窗口高度为" + this.windowHeight);

          // uni.pageScrollTo({
          // 	scrollTop: scrollTop - (this.windowHeight - (data.height + data.top + 45)), //一顿乱算
          // 	// scrollTop: 50,
          // 	duration: 300
          // });
        }).exec();
      }).exec();
    },
    reply (index, comment_index) {
      this.is_reply = true; //回复中
      this.showInput = true; //调起input框
      let replyTo = this.posts[index].comments[comment_index].username;
      this.input_placeholder = '回复' + replyTo;
      this.index = index; //post索引
      this.comment_index = comment_index; //评论索引
      this.focus = true;
    },
    blur: function () {
      //this.init_input();
    },
    send_comment: function (message) {
      let _this = this,
        is_posts_obj = this.posts[this.index],
        chat_user_id = is_posts_obj.uid,
        reply = '';
      if (this.is_reply) {
        let is_reply_obj = is_posts_obj.comments[this.comment_index];
        chat_user_id = is_reply_obj.uid;
        if (is_posts_obj.uid != chat_user_id) {
          reply = '回复' + is_reply_obj.username;
        }
      }
      _this.$httpSend({
        path: '/im/circle/comment',
        data: {
          message,
          id: is_posts_obj.post_id,
          chat_user_id,
        },
        success (data) {
          is_posts_obj.comments.push({
            "uid": _this.my_data.id,
            'reply': reply,
            "username": _this.my_data.nickname,
            "content": message
          });
          _this.init_input();
        }
      });
    },
    init_input () {
      this.showInput = false;
      this.focus = false;
      this.input_placeholder = '评论';
      this.is_reply = false;
    },
	
    createVideoPlayer(video_path){
        // #ifdef APP-PLUS
        let player = null;
        player = plus.video.createVideoPlayer('videoplayer', {
            src:'rtmp://'+video_path,
            top:'50px',
            left:'0px',
            width: '100%',
            height: '100%',
            position: 'fix'
        });
        var pages = getCurrentPages();
        var page = pages[pages.length - 1];
        var currentWebview = page.$getAppWebview();
        currentWebview.append(player)
        // #endif
    },
    previewImage (index, image_index) {
      let data = this.posts[index],
			  _this = this,
        images_all = [];
			console.log(111)
		if(data.content.video_path){
			let video_path = this.staticPath + data.post_id + '/' + data.content.video_path;
			_this.videoPath = video_path;
			_this.showVedio = true;
			//设置屏幕高度
			return true;
		}
      for (let i = 0, j = data.content.value.length; i < j; i++) {
        images_all.push(this.staticPath + data.post_id + '/' + data.content.value[i].replace('_thumb', ''));
      }
      var current = images_all[image_index];
      uni.previewImage({
        current: current,
        urls: images_all
      });
    },
    goPublish () {
      uni.navigateTo({
        url: './circle/send',
        success: res => { },
        fail: () => { },
        complete: () => { }
      });
    },
      // 获取选择的地区
      goBuy(address){
          //弹出交易密码界面
          // this.show_key = true;
          this.userAddress = address;
          _data.localData('data_user_address',address);
          //去支付
          let _this = this;
          let params =this.userAddress;
          params.post_id = this.post_id;
          let circle_data =  _data.localData('circle_data');
          let data = circle_data[_this.post_index_id];
          let small_pic = this.staticPath + data.post_id + '/' + data.content.value[0].replace('_thumb', '');
          params.small_pic = small_pic;
          _get.payCicleOrder(params,function (ret) {
              //更新本地朋友圈信息
              data.can_pay_times = ret.can_pay_times;
              circle_data[_this.post_index_id] = data;
              _data.localData('circle_data',circle_data)
              uni.$emit('data_circle_data',circle_data);
              uni.showToast({
                  title:'购买成功',
                  icon:'none',
              });
              _this.$refs.popup.close();

          },function (ret) {
              uni.showToast({
                  title:ret.msg,
                  icon:'none',
              });
              _this.show_key = false;
          })
      },
      hideFun(){
        this.show_key = false;
      },
      getPassword(e){
          //去支付
          let _this = this;
          e.post_id = this.post_id;
          let params = Object.assign(e,this.userAddress);
          let circle_data =  _data.localData('circle_data');
          let data = circle_data[_this.post_index_id];
          console.log(data);
          let small_pic = this.staticPath + data.post_id + '/' + data.content.value[0].replace('_thumb', '');
          e.small_pic = small_pic;
          _get.payCicleOrder(params,function (ret) {
                //更新本地朋友圈信息
              data.can_pay_times = ret.can_pay_times;
              circle_data[_this.post_index_id] = data;
              _data.localData('circle_data',circle_data)
              uni.$emit('data_circle_data',circle_data);
              uni.showToast({
                  title:'购买成功',
                  icon:'none',
              });
              _this.show_key = false;
              _this.$refs.payKeyboard.cleanNum();
              _this.$refs.popup.close();

          },function (ret) {
              uni.showToast({
                  title:ret.msg,
                  icon:'none',
              });
              _this.show_key = false;
              _this.$refs.payKeyboard.cleanNum();
          })
      },
      open(index){
          let data = this.posts[index];
          console.log(this.my_data);
		  console.log(this.userAddress)
           this.goods_name = data.content.text;
           this.small_pic =  this.staticPath + data.post_id + '/' + data.content.value[0].replace('_thumb', '');
           this.amount = data.pay_amount;
		   this.post_id = data.post_id;
		   this.post_index_id = index;
          this.$refs.popup.open();
         
      },
      fullscreenchange(){
        console.log(1111111111111)
      }
  },
  watch: {

  },
}
</script>

<style scoped>
@import url("../../static/css/push/circle.css");
.page {
  position: relative;
}
.pay_view {
  margin: 15upx 0;
  text-align: right;
}
.new_msg {
  text-align: center;
  color: #36648b;
  font-weight: bold;
}
.action_main {
  position: fixed;
  top: 120upx;
  /* #ifndef H5 */
  top: 15px;
  /* #endif */
  width: 750upx;
  height: 1080upx;
  z-index: 10000;
}
.action_base {
  position: absolute;
  right: 15upx;
  width: 300upx;
  top: 120upx;
  background: #36363d;
  border-radius: 10upx;
}

.sj {
  position: fixed;
  top: -28upx;
  right: 26upx;

  /* #ifdef APP-PLUS */
  top: 3upx;
  right: 20upx;
  /* #endif */

  width: 0;
  height: 0;
  border-left: 20upx solid transparent;
  border-right: 20upx solid transparent;
  border-bottom: 20upx solid #36363d;
}

.action_item {
  color: #e5e5e5;
  height: 100upx;
  line-height: 100upx;
  margin-left: 45upx;
  border-bottom: 1px solid #3e3e3e;
}

.action_icon {
  width: 45upx;
  height: 45upx;
  display: inline-block;
  vertical-align: middle;
}

.action_item:last-child {
  border: none;
}

.action_item_text {
  font-size: 30upx;
}
.showVedio {
  position: fixed;
  z-index: 999;
}
.cloneBut {
  position: relative;
  font-size: 24px;
  color: red;
  margin-left: 30px;
  margin-top: 80px;
  height: 30px;
  width: 30px;
}
 .paragraph{
     word-break: break-all;
 }

</style>