404 lines
11 KiB
Plaintext
404 lines
11 KiB
Plaintext
<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,
|
||
user_id: wx.getStorageSync('user_id')
|
||
},
|
||
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)
|
||
}
|
||
},
|
||
gotoRedirect (url) {
|
||
wx.redirectTo({url: url})
|
||
},
|
||
// 下拉加载中
|
||
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()
|
||
},
|
||
async onShareAppMessage(res) {
|
||
let that = this
|
||
let openid = wx.getStorageSync('openid')
|
||
let fromUserID = wx.getStorageSync('user_id')
|
||
let imgUrl = `${that.detail.back_image}`
|
||
let url = `/pages/dynamic/hotTopic?id=${that.id}&from_openid=${openid}&share_user_id=${that.user_id}&from_user_id=${fromUserID}`
|
||
console.log(url)
|
||
return {
|
||
title: `#${that.detail.name}#`,
|
||
path: url,
|
||
// imageUrl: 'https://images.ufutx.com/202004/29/baac955e5878e0cb03c17eef0c92f473.jpeg',
|
||
imageUrl: imgUrl,
|
||
success: function (res) {
|
||
wx.showToast({
|
||
title: '转发成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
var shareTickets = res.shareTickets
|
||
if (shareTickets.length == 0) {
|
||
return false
|
||
}
|
||
},
|
||
fail: function (res) {
|
||
// 转发失败
|
||
}
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<config>
|
||
{
|
||
navigationBarTitleText: '优质单身',
|
||
navigationStyle: 'custom',
|
||
backgroundColorTop: '#ffffff',
|
||
backgroundColorBottom: '#ffffff',
|
||
usingComponents: {
|
||
dynamicOperation: '~@/components/dynamicOperation',
|
||
pageScroll: '~@/components/pageScroll',
|
||
dynamicList: '~@/components/dynamicList'
|
||
}
|
||
}
|
||
</config>
|