ufutx_love_mp/src/pages/dynamic/hotTopic.wpy

<style lang="less" scoped>
@import url(../../styles/theme.less);
page {
  background-color: #ffffff;
}

.returnIcon{
  width: 60rpx;
  height: 60rpx;
  margin-left: 30rpx;
  margin-right: 22rpx;
  vertical-align: middle;
  margin-top: -6rpx;
}

.ui-hotTopic{
  height: 100vh;
  background: #ffffff;
  .title {
    position: fixed;
    z-index:99;
    width: 100%;
    font-size: 36rpx;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 30rpx;
    .navbar-title {
      width: 100%;
      box-sizing: border-box;
      height: 64rpx;
      line-height: 64rpx;
      position: relative;
      left: 0;
      z-index: 10;
      overflow: hidden;
      white-space: nowrap;
      .img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50rpx;
        margin: auto;
        padding: 10rpx;
        width: 36rpx;
        height: 50rpx;
      }
    }
    .handleText{
      font-size: 32rpx;
      color: #333333;
    }
  }
}

.topic {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  .opcitys {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    background: #000000
  }
  .titleMain {
    margin: 0 50rpx;
    height: auto;
    font-size: 28rpx;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 40rpx;
    z-index: 1;
    white-space: normal;
  }
}

.ui-hot-dynamic-box{
  background: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  margin-top: -46rpx;
  position: relative;
  z-index: 22;
}

.ui-suspend-box{
  position: fixed;
  right: 44rpx;
  bottom: 360rpx;
  text-align: center;
  z-index: 1000;

  .ui-suspend-icon {
    height: 124rpx;
    width: 124rpx;
    display: block;
  }

  .ui-bookDetail-icon{
    height: 120rpx;
    width: 120rpx;
    display: block;
    margin-bottom: 12rpx;
  }
}
</style>
<template>
  <view class="cu-custom">
    <view class="cu-bar fixed {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
      <image v-if="routerNum > 1" class="returnIcon" src="https://images.ufutx.com/202105/18/b3c18587d136dd6fdaa00c0d5909511b.png" mode="widthFix" @tap="handleBack"></image>
      <image v-else class="returnIcon" src="https://images.ufutx.com/202105/18/dabd128e4d73be3061855233904e743c.png" mode="widthFix" @tap="gotoRedirect('/pages/tabBar/welcome')"></image>
    </view>
  </view>
  <view class="ui-hotTopic">
    <view class="title" style="height:{{navHeight}}px;background:rgba(255, 255, 255, {{opacity}});">
      <view class="navbar-title font_36 white text-center {{opacity < 0.8 ? '': 'handleText'}}" style="margin-top:{{navTop}}px;transition: opacity 1s">
        #{{detail.name}}
      </view>
    </view>
    <scroll-view scroll-top="{{scrollTopHandle}}" scroll-with-animation="true" scroll-anchoring="{{true}}" refresher-enabled="{{true}}" refresher-triggered="{{triggered}}" bindrefresherpulling="onPulling" bindrefresherrefresh="onRefresh" style="height:100%;-webkit-overflow-scrolling: touch" lower-threshold="300" bindscrolltolower="handleScroll" bindscroll="scrollToUpper" scroll-y>
      <view class="cu-avatars" style="{{'background-image:url(' + detail.back_image + ');'}}">
        <view class="topic" style="height: calc(350rpx + {{titleHeight}}rpx)">
          <view class="opcitys"></view>
          <view class="title" style="height:{{navHeight}}px;position: sticky;"></view>
          <view class="titleMain ellipsis_3 text-center">{{detail.info}}</view>
        </view>
      </view>
      <view class="ui-hot-dynamic-box">
        <dynamicList :dynamicList="dynamicList" @changeSelect="changeSelect" :from="'hotTopic'"></dynamicList>
      </view>
    </scroll-view>
  </view>
  <view class="ui-suspend-box">
    <image v-if="rulesPic" class="ui-bookDetail-icon" :src="rulesPic" mode="widthFix" @tap="jumpPath(rulesUrl, 'bookDetail')"></image>
    <image class="ui-suspend-icon" src="https://images.ufutx.com/202101/26/7d9fbf93eedee6a87bc810a02add5bd2.png" mode="widthFix" @tap="jumpPath(`/pages/dynamic/issue?id=${detail.id}&title=${detail.name}&from=hotTopic`, 'issue')"></image>
  </view>
  <!--动态操作功能，selectData选择的动态数据、selectIndex选中的动态下标、admin是否管理员、from来自哪个父组件-->
  <dynamicOperation :selectData="selectData" :chooseShow.sync="chooseShow" :selectIndex="selectIndex" :admin="admin" :from="'hotTopic'"  @hideModal="hideModal" @changeOperation="changeOperation"></dynamicOperation>
  <pageScroll ref="pageScroll" @BackTop="BackTop"></pageScroll>
</template>

<script>
import wepy from '@wepy/core'
import https from '../../mixins/https'
import base from '../../mixins/base'
import {service} from '../../config'
import {commentTimeHandle} from '../../mixins/plugins'

wepy.page({
  config: {},
  mixins: [https, base],

  data: {
    chooseShow: false,
    id: '',
    admin: '1',
    routerNum: 0, // 是否存在上一个页面路由
    detail: {}, // 话题详情数据
    rulesUrl: '',
    rulesPic: '',

    dynamicList: [], // 动态列表数据
    selectData: {},
    selectIndex: null,
    scrollTopHandle: 0,
    showBackTopBtn: false,
    triggered: false,
    no_more: false,
    loading: false,
    page: 1,

    titleHeight: 0, // 话题标题高度
    opacity: 0, // 页面标题滑动至指定距离后的透明度
    navTop: 0,
    StatusBar: 0,
    CustomBar: 0,
    navHeight: 0
  },
  methods: {
    getDetail() {
      let vm = this
      vm.$get({url: `${service.host}/moment/topic/${vm.id}`}).then(({code, data}) => {
        if (code === 0) {
          vm.detail = data
          if (data.moment_topics_activities) {
            vm.rulesUrl = data.moment_topics_activities.goto_url
            vm.rulesPic = data.moment_topics_activities.entrance_picture
          }
          vm.$nextTick(() => {
            if (vm.detail.info) {
              const query = wx.createSelectorQuery()
              query.select('.titleMain').boundingClientRect()
              query.exec((data) => {
                if (data[0].height >= 45 && data[0].height < 55) {
                  vm.titleHeight = data[0].height / 2.5
                } else if (data[0].height >= 55) {
                  vm.titleHeight = 40
                }
              })
            }
          })
        }
        wx.hideLoading()
      }).catch(err => {
        wx.hideLoading()
        console.log(err)
      })
    },
    getList() {
      let vm = this
      let data = {
        topic_id: vm.id,
        page: vm.page
      }
      vm.$showLoading('加载中...')
      vm.$get({url: `${service.host}/moment/list`, data}).then(({code, data}) => {
        if (code === 0) {
          if (data.data && data.data.length > 0) {
            data.data.forEach((item, index) => {
              item.create_time = commentTimeHandle(item.create_time)
              let sty = typeof (item.photos)
              if (sty == 'string') {
                item.photos = JSON.parse(item.photos)
              }
              if ((item.is_audited == 0 || item.is_audited == -1) && item.is_self == 0) {
                data.data.splice(index--, 1)
              }
            })
          }
          if (vm.dynamicList.length === 0 || vm.page === 1) {
            vm.dynamicList = data.data
          } else {
            data.data.map(function (item) {
              vm.dynamicList.push(item)
            })
          }
          if (vm.dynamicList.length < 15 || data.data.length < 15) {
            vm.no_more = true
          }
          setTimeout(() => {
            vm.loading = true
          }, 500)
          vm.triggered = false
        }
        wx.hideLoading()
      }).catch(err => {
        wx.hideLoading()
        console.log(err)
      })
    },
    // 选择某条动态操作弹框
    changeSelect(e, index) {
      let vm = this
      vm.selectData = e
      vm.selectIndex = index
      vm.chooseShow = true
    },
    // 取消动态操作弹框
    hideModal() {
      let vm = this
      vm.chooseShow = false
      vm.selectData = {}
      vm.selectIndex = null
    },
    // 操作后对原动态列表数据改动
    changeOperation(state) {
      let vm = this
      if (state == 'isTop') {
        // 设置动态为置顶
        vm.dynamicList[vm.selectIndex].is_top = 1
        vm.dynamicList.unshift(vm.dynamicList[vm.selectIndex])
        vm.dynamicList.splice(vm.selectIndex + 1, 1)
      } else {
        // 删除动态 || 隐藏动态 || 设置动态为推荐动态 || 不感兴趣 || 取消置顶
        vm.dynamicList.splice(vm.selectIndex, 1)
      }
    },
    // 下拉加载中
    onPulling() {
      let vm = this
      vm.triggered = true
    },
    // 初始化数据
    onRefresh() {
      let vm = this
      vm.page = 1
      vm.getList()
    },
    // 动态列表上拉加载更多数据
    handleScroll() {
      let vm = this
      vm.page += 1
      vm.getList()
    },
    // 动态滚动距离超出380，展示回到顶部按钮
    scrollToUpper(e) {
      let vm = this
      let top = e.$wx.detail.scrollTop
      vm.opacity = top / 120 > 0.9 ? 1 : top / 120 < 0.1 ? 0 : top / 120
      vm.$refs.pageScroll.showBackTopBtn = top > 380
    },
    // 动态回到顶部
    BackTop() {
      let vm = this
      vm.scrollTopHandle = Math.random()
    },
    handleBack() {
      wx.navigateBack({delta: 1})
    },
    jumpPath(url, type) {
      if (type == 'issue') {
        wx.navigateTo({url: url})
      } else {
        wx.navigateTo({url: '/pages/books/bookDetail?url=' + encodeURIComponent(url)})
      }
    }
  },
  // 上拉获取更多数据
  onReachBottom() {
    let vm = this
    if (!vm.no_more) {
      vm.getList()
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    let vm = this
    vm.page = 1
    vm.no_more = false
    vm.getList()
  },
  onShow() {
    let vm = this
    let app = vm.$app.$options
    let pages = getCurrentPages()
    vm.routerNum = pages.length

    vm.navHeight = app.globalData.navBarHeight
    vm.navTop = app.globalData.navTop
    vm.StatusBar = app.globalData.StatusBar
    vm.CustomBar = app.globalData.CustomBar
  },
  onLoad(e) {
    let vm = this
    if (e.scene) {
      vm.id = decodeURIComponent(e.scene).split('=')[1]
    } else {
      vm.id = e.id
    }
    vm.getDetail()
    vm.getList()
  }
})
</script>
<config>
{
navigationBarTitleText: '优质单身',
navigationStyle: 'custom',
backgroundColorTop: '#ffffff',
backgroundColorBottom: '#ffffff',
usingComponents: {
dynamicOperation: '~@/components/dynamicOperation',
pageScroll: '~@/components/pageScroll',
dynamicList: '~@/components/dynamicList'
}
}
</config>