438 lines
12 KiB
Vue
438 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar :bgColor="showElement?'rgba(0,0,0,0)':'#fff'">
|
|
<view class="u-nav-slot flex align-center" slot="left">
|
|
<image @click="navBackFb" style="width: 56rpx;height: 56rpx;"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/activity/nav_back.png`" mode="">
|
|
</image>
|
|
<view class="header-left flex align-center ">
|
|
<u-icon name="home" size="20" @click="navBackFn('tabbar')"></u-icon>
|
|
</view>
|
|
<view v-if="!showElement" class="tab-list">
|
|
<u-tabs :list="tabList" @click.stop="tabClick" @change="tabChange" lineColor="#13AFA8"
|
|
:current="currentIndex"
|
|
:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"
|
|
:inactiveStyle="{color: '#606266',transform: 'scale(1)'}"
|
|
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
<image class="back-image-bj" :src="topicInfo.backImage" mode=""></image>
|
|
<view class="back-image">
|
|
<view class="white f-30">#{{topicInfo.name}}#</view>
|
|
<view class="back-image-cont flex align-center justify-between">
|
|
<view style="width: 397rpx;">
|
|
<view class="back-image-cont-num f-28 flex align-center">
|
|
<image :src="`${config.aliyunOssUrl}/static/images/app/home/people_icon.png`" mode=""></image>
|
|
<text>{{topicInfo.countUse}}人参与</text>
|
|
<text class="f-52" style="margin-left: 24rpx;margin-right: 24rpx;">·</text>
|
|
<image :src="`${config.aliyunOssUrl}/static/images/app/home/eye_icon.png`" mode=""></image>
|
|
<text>{{topicInfo.countView}}人围观</text>
|
|
</view>
|
|
<view class="f-26 back-image-cont-text">
|
|
<text class="" style="margin-left: 12rpx;">简介: {{topicInfo.intro}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="back-image-add">
|
|
<u-button @click="postFn"
|
|
:customStyle="{width: '160rpx', height: '64rpx',color:'#ffffff',borderRadius:'32rpx'}" color="#00A473">
|
|
<view class="flex align-center">
|
|
<view class="f-42 fw-4"> + </view>
|
|
<view class="f-28 " style="height: 33rpx;line-height: 33rpx;"> 发布</view>
|
|
</view>
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-black-white" />
|
|
<u-sticky customNavHeight="108" v-if="showElement">
|
|
<view class="tab-list">
|
|
<u-tabs :list="tabList" @click="tabClick" @change="tabChange" lineColor="#13AFA8"
|
|
:current="currentIndex" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.2)'}"
|
|
:inactiveStyle="{color: '#606266',transform: 'scale(1)'}" itemStyle="height: 34px;"></u-tabs>
|
|
</view>
|
|
</u-sticky>
|
|
<!-- 福利活动 -->
|
|
<z-paging use-page-scroll ref="paging" v-model="dataList" @query="queryList">
|
|
<view>
|
|
<view class="list-cont-dynamic" v-for="(item,index) in dataList" :key="index">
|
|
<view class="dynamic-condition" @click.stop="toDetailPages(item.id,2)">
|
|
<view class="dynamic-condition-header f-jcsb f-a-i">
|
|
<view class="f-a-i">
|
|
<image :src="item.authorAvatar" mode="aspectFill"></image>
|
|
<view class="dynamic-condition-header-l">
|
|
<view>{{item.authorName}}</view>
|
|
<view>{{item.city||'未知'}} 一天前</view>
|
|
</view>
|
|
</view>
|
|
<view class="dynamic-condition-header-r">
|
|
<u-icon name="more-dot-fill" color="#999" size="18"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="questions-and-answers-text rel">
|
|
<image class="ads mr-2" style="width: 44rpx;height: 44rpx;top: 12rpx;left: 0;"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/mine/ask.png`" mode="">
|
|
</image>
|
|
<text class="questions-and-answers-text-color">
|
|
#{{topicInfo.topicName}}#
|
|
</text>
|
|
{{item.content}}
|
|
</view>
|
|
<view v-if="item.image" class="image-one">
|
|
<!-- style="width: 100%;height: 386rpx;" -->
|
|
<image :src="item.image" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="flex justify-end dynamic-condition-operate">
|
|
<view class="f-a-i">
|
|
<image class="dynamic-condition-operate-image"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/mine/share.png`" mode="">
|
|
</image>
|
|
<view class="dynamic-condition-operate-num">{{item.shareNum}}</view>
|
|
</view>
|
|
<view class="f-a-i" style="margin-left: 48rpx;">
|
|
<image class="dynamic-condition-operate-image"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/mine/information.png`" mode="">
|
|
</image>
|
|
<view class="dynamic-condition-operate-num">{{item.replyNum}}</view>
|
|
</view>
|
|
<view class="f-a-i" style="margin-left: 48rpx;" @click="Like(item)">
|
|
<image v-if="!item.userIsLike" class="dynamic-condition-operate-image"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/mine/like.png`" mode="">
|
|
</image>
|
|
<image v-else class="dynamic-condition-operate-image"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/mine/like_act.png`" mode=""></image>
|
|
<view class="dynamic-condition-operate-num">{{item.likeNum}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP -->
|
|
<view class="flex justify-end dynamic-condition-operate">
|
|
<view class="f-a-i">
|
|
<image class="dynamic-condition-operate-image" src="@/static/images/app/mine/share.png"
|
|
mode="">
|
|
</image>
|
|
<view class="dynamic-condition-operate-num">{{item.shareNum}}</view>
|
|
</view>
|
|
<view class="f-a-i">
|
|
<image class="dynamic-condition-operate-image"
|
|
src="@/static/images/app/mine/information.png" mode=""></image>
|
|
<view class="dynamic-condition-operate-num">{{item.replyNum}}</view>
|
|
</view>
|
|
<view class="f-a-i" @click="Like(item)">
|
|
<image v-if="!item.userIsLike" class="dynamic-condition-operate-image"
|
|
src="@/static/images/app/mine/like.png" mode="">
|
|
</image>
|
|
<image v-else class="dynamic-condition-operate-image"
|
|
src="@/static/images/app/mine/like_act.png" mode=""></image>
|
|
<view class="dynamic-condition-operate-num">{{item.likeNum}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
formatNumber
|
|
} from "@/utils/index.js"
|
|
import {
|
|
like
|
|
} from "@/api/discover/discover.js"
|
|
import {
|
|
getTopicInfo,
|
|
getActiveTopicList
|
|
} from "@/api/welfare/welfare.js"
|
|
import config from '@/config';
|
|
export default {
|
|
data() {
|
|
return {
|
|
config: getApp().globalData.config,
|
|
showElement: true, // 初始化为显示状态
|
|
prevScrollTop: 0, // 记录上一次滚动的位置
|
|
config,
|
|
dataList: [],
|
|
topicId: '',
|
|
topicInfo: {},
|
|
tabList: [{
|
|
name: "精华",
|
|
value: 'hot'
|
|
}, {
|
|
name: "最新",
|
|
value: 'new'
|
|
}, {
|
|
name: "问答",
|
|
value: 5
|
|
}],
|
|
categoryId: 4,
|
|
type: 'hot',
|
|
currentIndex: 0
|
|
};
|
|
},
|
|
methods: {
|
|
//返回
|
|
navBackFn(type) {
|
|
if (type == 'tabbar') {
|
|
uni.switchTab({
|
|
url: '/pages/home/home'
|
|
})
|
|
} else {
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
// 点赞
|
|
Like(item) {
|
|
like(item.id).then(res => {
|
|
if (item.userIsLike) item.likeNum -= 1
|
|
else item.likeNum += 1
|
|
item.userIsLike = !item.userIsLike
|
|
})
|
|
},
|
|
//获取话题列表
|
|
queryList(page, limit) {
|
|
getActiveTopicList({
|
|
page,
|
|
limit,
|
|
categoryId: this.categoryId,
|
|
type: this.type,
|
|
activeTopicId: this.topicId
|
|
}).then(res => {
|
|
res.data.list.forEach(item => {
|
|
item.shareNum = formatNumber(item.shareNum)
|
|
item.replyNum = formatNumber(item.replyNum)
|
|
item.likeNum = formatNumber(item.likeNum)
|
|
})
|
|
this.$refs.paging.complete(res.data.list);
|
|
}).catch(err => {
|
|
this.$refs.paging.complete(false);
|
|
})
|
|
},
|
|
//tab tabChange
|
|
tabChange(e) {
|
|
this.currentIndex = e.index
|
|
},
|
|
//tab、
|
|
tabClick(e) {
|
|
if (e.value == 5) {
|
|
this.categoryId = 5
|
|
this.type = 'new'
|
|
} else {
|
|
this.categoryId = 4
|
|
this.type = e.value
|
|
}
|
|
this.$refs.paging.refresh();
|
|
},
|
|
//详情
|
|
toDetailPages(id, type) {
|
|
uni.navigateTo({
|
|
url: `/pages/index/detail?id=${id}&type=${type}`
|
|
})
|
|
},
|
|
//详情
|
|
getTopicInfoFn() {
|
|
getTopicInfo(this.topicId).then(res => {
|
|
// console.log(res);
|
|
this.topicInfo = res.data
|
|
})
|
|
},
|
|
//发布
|
|
postFn() {
|
|
uni.showActionSheet({
|
|
itemList: ['动态', '问答'],
|
|
success: (res) => {
|
|
let postType = res.tapIndex == 0 ? 4 : 5
|
|
uni.navigateTo({
|
|
url: `/pages/welfare/activity_x/post?type=${postType}&activeTopicId=${this.topicInfo.id}&topicId=${this.topicInfo.topicId}`
|
|
})
|
|
},
|
|
fail: function(res) {}
|
|
});
|
|
},
|
|
//返回
|
|
navBackFb() {
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.topicId = options.id
|
|
this.getTopicInfoFn()
|
|
},
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') {
|
|
|
|
}
|
|
return {
|
|
title: this.topicInfo.name || '分享话题', //分享的名称
|
|
path: `/pages/welfare/activity_x/activity_x?id=${this.topicId}`,
|
|
imageUrl: this.topicInfo.backImage,
|
|
};
|
|
},
|
|
onPageScroll(e) {
|
|
console.log(e);
|
|
// 获取当前滚动的位置
|
|
const scrollTop = e.scrollTop;
|
|
this.$nextTick(() => {
|
|
// 判断滚动方向
|
|
if (scrollTop != 0) {
|
|
// 向下滚动，隐藏元素
|
|
this.showElement = false;
|
|
} else if (scrollTop == 0) {
|
|
// 向上滚动，到顶显示元素
|
|
this.showElement = true;
|
|
}
|
|
// 更新上一次滚动的位置
|
|
this.prevScrollTop = scrollTop;
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.image-one {
|
|
width: 454rpx;
|
|
max-height: 666rpx;
|
|
overflow: hidden;
|
|
// height: 686rpx;
|
|
border-radius: 8rpx;
|
|
|
|
image {
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.tab-list {
|
|
width: 750rpx;
|
|
background: #fff;
|
|
padding-bottom: 8rpx;
|
|
}
|
|
|
|
.questions-and-answers-text {
|
|
display: inline-block;
|
|
line-height: 44rpx;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
line-height: 50rpx;
|
|
margin: 16rpx 0;
|
|
|
|
.questions-and-answers-text-color {
|
|
color: #13AFA8;
|
|
}
|
|
}
|
|
|
|
.list-cont-dynamic {
|
|
background: #fff;
|
|
width: 100%;
|
|
padding: 32rpx;
|
|
border-bottom: 1rpx solid #EDEDED;
|
|
|
|
.dynamic-condition-operate {
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.dynamic-condition-operate-image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.dynamic-condition-operate-num {
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.dynamic-condition-header {
|
|
|
|
.dynamic-condition-header-r {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.dynamic-condition-header-l {
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.back-image-bj {
|
|
width: 750rpx;
|
|
height: 516rpx;
|
|
}
|
|
.back-image {
|
|
width: 690rpx;
|
|
height: 200rpx;
|
|
margin-top: 20rpx;
|
|
margin-left: 30rpx;
|
|
// background: #13AFA8;
|
|
background-image: url('https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/home/huati.png');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
|
|
.back-image-add {
|
|
|
|
}
|
|
.white {
|
|
width: 690rpx;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
text-align: center;
|
|
color: #000;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.back-image-cont {
|
|
width: 638rpx;
|
|
height: 112rpx;
|
|
margin-left: 26rpx;
|
|
color: #00A473;
|
|
background: rgb(247, 255, 246);
|
|
border-radius: 20rpx;
|
|
padding: 0 27rpx;
|
|
.back-image-cont-text {
|
|
color: #000;
|
|
|
|
text {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
|
|
.back-image-cont-num {
|
|
color: #00A473;
|
|
|
|
image {
|
|
margin-right: 8rpx;
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.line-black-white {
|
|
height: 20rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
</style> |