1082 lines
29 KiB
Vue
1082 lines
29 KiB
Vue
<template>
|
||
<view :data-theme="theme" class="discover_index">
|
||
<view class="page_con">
|
||
<view class="discover-header bg--w111-fff relative z-999">
|
||
<!-- #ifdef APP || MP -->
|
||
<view class="sys-head" :style="{ height: sysHeight+'px' }"></view>
|
||
<!-- #endif -->
|
||
<view class="discover-navTab acea-row row-middle" :style="[headerBoxStyle]">
|
||
<image @click="goUser" class="avatar"
|
||
:src="userInfo.avatar ? userInfo.avatar : urlDomain+'crmebimage/presets/morenT.png'">
|
||
</image>
|
||
<view class="acea-row row-center-wrapper" :style="[textBoxStyle]">
|
||
<view :class="tabActive == 0 ? 'on' : ''" class="nav-item"
|
||
@click="tabActive=0;showCateDrawer = false">关注</view>
|
||
<view :class="tabActive == 1 ? 'on' : ''" class="nav-item" @click="tabActive=1;">发现</view>
|
||
<view style="width: 32rpx;">
|
||
<navigator v-show="tabActive == 1" url="/pages/discover/discover_search_list/index"
|
||
hover-class="none" class="search">
|
||
<text class="iconfont icon-ic_search"></text>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
<!-- #ifndef MP -->
|
||
<view style="width: 32rpx;"></view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<!-- 话题分类 -->
|
||
<view class="longTab" scroll-y enhanced>
|
||
<view class="flex-y-center" :class="tabActive == 1?'h96':'h36'">
|
||
<scroll-view v-if="tabActive == 1" scroll-x="true" style="white-space: nowrap; display: flex;"
|
||
scroll-with-animation class="menu" :scroll-left="tabLeft" :show-scrollbar="false">
|
||
<view class="longItem" :data-index="index" :class="index === tabClick ? 'click' : ''"
|
||
v-for="(item, index) in categoryList" :key="index" :id="'id' + index"
|
||
@click.stop="selectMenu(item, index, true)">
|
||
<text>{{ item.name }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view v-show="tabActive == 1" class="w-76 flex-center topic-box"
|
||
@tap="showCateDrawer = !showCateDrawer">
|
||
<text class="iconfont"
|
||
:class="!showCateDrawer?'icon-ic_downarrow':'icon-ic_uparrow'"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 话题分类下拉 -->
|
||
<view class="fixed-lt w-full bg--w111-fff rd-b-24rpx z-100 pt-22" v-if="showCateDrawer"
|
||
:style="{top: listMarTop + 'px'}">
|
||
<view class="w-full pr-20 pb-30 pl-30">
|
||
<view class="flex flex-wrap">
|
||
<view class="h-58 bg--w111-f5f5f5 rd-29rpx px-24 flex-center fs-24 mr-14 mb-28"
|
||
v-for="(item,index) in categoryList" :key="index"
|
||
:class="{'active-topic': index === tabClick}" @tap="selectMenu(item, index)">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mask z-80" v-if="showCateDrawer" @tap="()=>{showCateDrawer = false}"></view>
|
||
|
||
<view class="discover-box">
|
||
<!-- 发现 -->
|
||
<scroll-view scroll-y="true" @scroll="followScroll">
|
||
<view class="tab-cont" id="main">
|
||
<!-- 发现 -->
|
||
<view class="main" v-if="tabActive === 1">
|
||
<swiper :interval="interval" indicator-color="rgba(255,255,255,0.6)"
|
||
:current="swiperCurrent" @change="swiperChange" :style="'height:'+swiperHeight+'px'">
|
||
<block v-for="(item,index) in categoryList" :key="index">
|
||
<swiper-item :item-id="`${item.id}`">
|
||
<scroll-view @scroll="scrollLeft" scroll-y="true" :show-scrollbar="false"
|
||
class="scroll-view" :style="'height:'+swiperHeight+'px'" id="goods"
|
||
refresher-enabled="true" :refresher-threshold="100"
|
||
:refresher-triggered="triggeredDiscover"
|
||
@refresherrefresh="onRefreshDiscover" @refresherpulling="onPulling"
|
||
@refresherrestore="onRestore" @refresherabort="onAbort">
|
||
<view class="goods padbottom">
|
||
<view class="goods-wrap" id="goods"
|
||
v-if="discoverList[item.id] && discoverList[item.id].goods.length">
|
||
<view>
|
||
<WaterfallsFlow v-if="discoverList[item.id].goods.length"
|
||
|
||
:wfList="discoverList[item.id].goods" :fromType="1">
|
||
</WaterfallsFlow>
|
||
</view>
|
||
</view>
|
||
<view class='loadingicon acea-row row-center-wrapper'>
|
||
<text class='loading iconfont icon-jiazai'
|
||
:hidden='loading==false'></text>{{discoverList[item.id] &&discoverList[item.id].goods.length>0?loadTitle:''}}
|
||
</view>
|
||
<view class="empty-boxs noContent"
|
||
v-if="discoverList[item.id] && discoverList[item.id].goods.length == 0 && !loading">
|
||
<emptyPage title="暂无内容~" mTop="13%"
|
||
:imgSrc="urlDomain+'crmebimage/presets/noguanzhu.png'">
|
||
</emptyPage>
|
||
</view>
|
||
<view class="footerBottoms"></view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</block>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 关注 登录后 -->
|
||
<view id="goods" v-if="isLogin&&tabActive == 0" class="discover-detail">
|
||
<scroll-view scroll-y="true" :show-scrollbar="false" class="scroll-view recommendList"
|
||
:style="'height:'+swiperHeight+'px'" id="recommendList"
|
||
@scrolltolower="onTouchmoveRecommend" :refresher-threshold="100" @scroll="followScroll"
|
||
refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
|
||
@refresherpulling="onPulling" @refresherrestore="onRestore" @refresherabort="onAbort">
|
||
<view class="goods padbottom main">
|
||
<view class="goods-wrap" id="goods" v-if="noteRecommendList.length">
|
||
<view>
|
||
<WaterfallsFlow v-if="noteRecommendList.length" :wfList="noteRecommendList"
|
||
:fromType="1">
|
||
</WaterfallsFlow>
|
||
</view>
|
||
</view>
|
||
<view :hidden='loadingfollow==false'
|
||
class='loadingicon acea-row row-center-wrapper'>
|
||
<text
|
||
class='loading iconfont icon-jiazai'></text>{{noteRecommendList.length>0?loadTitleFollow:''}}
|
||
</view>
|
||
<view
|
||
v-if="isLogin&&tabActive == 0 && noteRecommendList.length===0 &&!loadingfollow"
|
||
class="empty-boxs noContent">
|
||
<emptyPage title="暂无更多内容~" mTop="0%"
|
||
:imgSrc="urlDomain+'crmebimage/presets/noguanzhu.png'"></emptyPage>
|
||
</view>
|
||
</view>
|
||
<!-- 为你推荐 -->
|
||
<view v-if="authorList.length>0 && !loadingfollow" class="author-list mt-24">
|
||
<title-box title="为你推荐"></title-box>
|
||
<view v-for="(item, index) in authorList" :key="item.authorId" class="author-item"
|
||
@click="goAuthor(item)">
|
||
<view class="acea-row row-between row-middle mb30">
|
||
<view class="acea-row row-middle">
|
||
<view class="author-head">
|
||
<image :src="item.authorAvatar"></image>
|
||
</view>
|
||
<view class="author-info">
|
||
<view class="author-name">{{item.authorName}}</view>
|
||
<view v-show="item.authorSignature" class="author-sign line1">
|
||
{{item.authorSignature}}
|
||
</view>
|
||
<view class="author-fans">
|
||
粉丝<text
|
||
class="text-333 ml-8">{{ item.fansNum < 10000 ? item.fansNum : (item.fansNum / 10000).toFixed(2) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view @click.stop="followAuthor(item, index)" class="author-follow acea-row"
|
||
:class="item.isConcerned ? 'focusBtn' : ''">
|
||
<text v-if="!item.isConcerned"
|
||
class="iconfont icon-ic_increase"></text>
|
||
{{!item.isConcerned ? '关注' : '已关注'}}
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full"
|
||
show-scrollbar="false">
|
||
<view class="inline-block mr-20" v-for="items in item.noteList"
|
||
:key="items.id">
|
||
<view class="relative">
|
||
<easy-loadimage :image-src="items.cover" width="184rpx"
|
||
height="254rpx" radius="16rpx"></easy-loadimage>
|
||
<view class="discover_video_icon" v-show="items.type == 2">
|
||
<text class="iconfont icon-ic_right2"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class='loadingicon acea-row row-center-wrapper'>
|
||
<text class='loading iconfont icon-jiazai'
|
||
:hidden='loading==false'></text>{{authorList.length>0?loadTitle:''}}
|
||
</view>
|
||
</view>
|
||
<view class="footerBottoms"></view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 关注未登录 -->
|
||
<view class="empty-boxs" v-if="!isLogin&&tabActive == 0">
|
||
<emptyPage title="登录后可查看关注用户的内容哦~" mTop="30%"
|
||
:imgSrc="urlDomain+'crmebimage/presets/nodenglu.png'"></emptyPage>
|
||
<view class="btn" @click="openAuto">立即登录</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="publish" @click="publish" :class="bottomNavigationIsCustom?'bottom':''"><text
|
||
class="iconfont icon-ic_edit"></text></view>
|
||
|
||
</view>
|
||
<page-footer v-if="isShowFooter"></page-footer>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapGetters
|
||
} from "vuex";
|
||
import {
|
||
toLogin
|
||
} from '@/libs/login.js';
|
||
import {
|
||
BACK_URL
|
||
} from '@/config/cache';
|
||
import {
|
||
communityCategoryListApi,
|
||
recommendAuthorListApi,
|
||
discoverListApi,
|
||
followListApi
|
||
} from '@/api/discover.js';
|
||
import {
|
||
discoverFollowAuthor,
|
||
} from '@/libs/follow.js';
|
||
import {
|
||
tokenIsExistApi
|
||
} from '@/api/api.js';
|
||
import {
|
||
silenceBindingSpread,
|
||
getUserSpread
|
||
} from '@/utils/index.js';
|
||
import onShare from "@/mixins/onShare";
|
||
import animationType from '@/utils/animationType.js'
|
||
import pageFooter from "@/components/pageFooter/index.vue";
|
||
import navBar from '@/components/navBar';
|
||
import emptyPage from '@/components/emptyPage.vue';
|
||
import easyLoadimage from '@/components/base/easy-loadimage.vue';
|
||
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
|
||
import WaterfallsFlowItem from '@/components/discoverFlowItem/discoverFlowItem.vue'
|
||
import TitleBox from '@/components/titleBox/index.vue';
|
||
let app = getApp();
|
||
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
|
||
export default {
|
||
mixins: [onShare],
|
||
components: {
|
||
pageFooter,
|
||
navBar,
|
||
emptyPage,
|
||
easyLoadimage,
|
||
WaterfallsFlowItem,
|
||
WaterfallsFlow,
|
||
TitleBox
|
||
},
|
||
computed: {
|
||
...mapGetters(['globalData', 'isLogin', 'userInfo', 'bottomNavigationIsCustom']),
|
||
headerBoxStyle(){
|
||
return {
|
||
// #ifndef MP
|
||
paddingTop:'4rpx',
|
||
// #endif
|
||
// #ifdef MP
|
||
paddingTop: this.marTop + "px",
|
||
marginRight:this.statusWidth + this.searchRight+'px',
|
||
// #endif
|
||
}
|
||
},
|
||
textBoxStyle(){
|
||
return {
|
||
// #ifdef MP
|
||
height:this.searchHeight + 'px',
|
||
lineHeight:this.searchHeight + 'px',
|
||
// #endif
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
//分销码
|
||
getUserSpread(options);
|
||
|
||
this.windowWidth = uni.getSystemInfoSync().screenWidth; //获取屏幕宽度
|
||
tokenIsExistApi().then(res => {
|
||
this.tokenIsExist = res.data;
|
||
if (this.tokenIsExist && this.isLogin) {
|
||
this.getFollowList();
|
||
setTimeout(() => {
|
||
if (this.noteRecommendList.length === 0 || this.loadendfollow) this
|
||
.getRecommendAuthorList();
|
||
}, 500)
|
||
}
|
||
if (!this.tokenIsExist) {
|
||
this.$store.commit('UPDATE_LOGIN', '');
|
||
this.$store.commit('UPDATE_USERINFO', {});
|
||
}
|
||
})
|
||
this.getDiscoverList();
|
||
this.getCommunityCategoryList();
|
||
|
||
this._freshing = false;
|
||
},
|
||
data() {
|
||
return {
|
||
urlDomain: this.$Cache.get("imgHost"),
|
||
sysHeight: sysHeight,
|
||
windowWidth: 0, //获取屏幕宽度🌟💗
|
||
interval: 3000,
|
||
swiperHeight: 0,
|
||
listMarTop: 0,
|
||
tabClick: 0, //设置导航点击了哪一个
|
||
tabLeft: 0, //设置下划线位置
|
||
isLeft: 0, //导航栏下划线位置
|
||
isWidth: 0, //每个导航栏占位
|
||
tabActive: 1, // 顶部关注、发现切换
|
||
windowHeight: 0,
|
||
theme: app.globalData.theme,
|
||
marTop: 0,
|
||
categoryList: [], //分类列表
|
||
categoryId: '', //分类id
|
||
swiperCurrent: 0, //分类索引
|
||
isScroll: false, //是否是滑动
|
||
params: { //推荐作者
|
||
page: 1,
|
||
limit: 10
|
||
},
|
||
followParams: { //关注内容
|
||
page: 1,
|
||
limit: 10
|
||
},
|
||
noteRecommendList: [], //关注内容
|
||
loadendfollow: false, //关注内容
|
||
loadingfollow: false, //关注内容
|
||
where: {
|
||
categoryId: 0,
|
||
page: 1,
|
||
limit: 10
|
||
},
|
||
loadend: false,
|
||
loading: false,
|
||
loadTitle: '加载更多',
|
||
loadTitleFollow: '加载更多',
|
||
onnnn: {
|
||
good: [{
|
||
authorId: 1
|
||
}]
|
||
},
|
||
discoverList: {}, //内容信息
|
||
authorList: [], //推荐作者列表
|
||
isOpenRefresh: true, // 是否开启下拉
|
||
triggered: false,
|
||
triggeredDiscover: false,
|
||
isShow: false, //加载完成
|
||
tokenIsExist: false, //校验token是否有效,true为有效，false为无效
|
||
isRefresher: false, //下拉刷新状态
|
||
noteDetails: {}, //内容详情
|
||
showComment: false, //评论弹窗
|
||
isShowFooter: true,
|
||
loadingAuthor: false, //推荐作者
|
||
showCateDrawer: false, //分类下拉展示
|
||
searchRight:0,
|
||
statusWidth:0,
|
||
searchHeight:0,
|
||
}
|
||
},
|
||
// 滚动监听
|
||
onPageScroll(e) {
|
||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||
uni.$emit('scroll');
|
||
},
|
||
onShow() {
|
||
this.showCateDrawer = false;
|
||
this.getTokenIsExist();
|
||
//分销绑定
|
||
silenceBindingSpread(this.isLogin, this.globalData.spread);
|
||
},
|
||
mounted() {
|
||
this.$nextTick(function() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.discover-header').boundingClientRect(data => {
|
||
// #ifndef H5
|
||
this.listMarTop = data.height
|
||
// #endif
|
||
// #ifdef H5
|
||
this.listMarTop = data.height
|
||
// #endif
|
||
}).exec();
|
||
});
|
||
},
|
||
created() {
|
||
var that = this;
|
||
// 获取设备宽度
|
||
uni.getSystemInfo({
|
||
success(e) {
|
||
that.isWidth = e.windowWidth / 6;
|
||
that.windowHeight = e.windowHeight;
|
||
that.swiperHeight = that.windowHeight - 205
|
||
that.$set(that, 'swiperHeight', that.windowHeight - 55);
|
||
}
|
||
});
|
||
that.getNavH()
|
||
|
||
// #ifdef MP
|
||
const res = uni.getMenuButtonBoundingClientRect()
|
||
const jnHeight = res.height //胶囊高度
|
||
const statusHeight = res.top //胶囊距离顶部
|
||
const statusRight = res.right //胶囊右边界坐标
|
||
this.statusWidth= res.width
|
||
this.searchHeight=jnHeight
|
||
this.marTop=statusHeight-this.sysHeight
|
||
//搜索框宽度计算
|
||
uni.getSystemInfo({
|
||
success:res=>{
|
||
this.searchRight=res.windowWidth-statusRight
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
//uniapp小程序用deep重写组件样式不生效
|
||
options: {
|
||
styleIsolation: 'shared'
|
||
},
|
||
methods: {
|
||
getNavH(marTop) {
|
||
// #ifdef H5
|
||
this.marTop = 30;
|
||
// #endif
|
||
// #ifdef APP
|
||
this.marTop = marTop - 60;
|
||
// #endif
|
||
},
|
||
//校验token是否有效,true为有效，false为无效
|
||
getTokenIsExist() {
|
||
tokenIsExistApi().then(res => {
|
||
this.tokenIsExist = res.data;
|
||
if (!this.tokenIsExist) {
|
||
this.$store.commit('UPDATE_LOGIN', '');
|
||
this.$store.commit('UPDATE_USERINFO', {});
|
||
}
|
||
})
|
||
},
|
||
// 去推荐作者个人主人
|
||
goAuthor(item) {
|
||
// #ifdef MP || H5
|
||
uni.navigateTo({
|
||
url: `/pages/discover/discover_user/index?id=${item.authorId}`
|
||
})
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
uni.navigateTo({
|
||
animationType: animationType.type,
|
||
animationDuration: animationType.duration,
|
||
url: `/pages/discover/discover_user/index?id=${item.authorId}`
|
||
})
|
||
// #endif
|
||
},
|
||
// 自定义下拉刷新被中止
|
||
onAbort() {
|
||
console.error("onAbort");
|
||
},
|
||
onPulling(e) {
|
||
if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
|
||
if (this.tabActive == 1) {
|
||
this.triggeredDiscover = true;
|
||
} else {
|
||
this.triggered = true;
|
||
}
|
||
},
|
||
// 下拉刷新触发
|
||
refresherpullingFun() {
|
||
this.isRefresher = true
|
||
},
|
||
onRefreshDiscover() {
|
||
if (this._freshing) return;
|
||
this._freshing = true;
|
||
setTimeout(() => {
|
||
this._freshing = false;
|
||
this.discoverList = {}
|
||
this.getDiscoverList();
|
||
this.triggeredDiscover = false;
|
||
uni.stopPullDownRefresh();
|
||
this._freshing = false;
|
||
}, 1000)
|
||
},
|
||
onRefresh() {
|
||
if (this._freshing) return;
|
||
this._freshing = true;
|
||
setTimeout(() => {
|
||
this.loadendfollow = false;
|
||
this.loadend = false;
|
||
this.noteRecommendList = [];
|
||
this.followParams.page = 1;
|
||
this.authorList = [];
|
||
this.params.page = 1;
|
||
this.getFollowList();
|
||
setTimeout(() => {
|
||
if (this.noteRecommendList.length === 0 || this.loadendfollow) this
|
||
.getRecommendAuthorList();
|
||
}, 400)
|
||
this.triggered = false
|
||
uni.stopPullDownRefresh();
|
||
this._freshing = false;
|
||
}, 1000)
|
||
},
|
||
onRestore() {
|
||
this.triggeredDiscover = false;
|
||
},
|
||
//关注内容
|
||
getFollowList() {
|
||
if (this.loadendfollow) {
|
||
this.triggered = false;
|
||
return;
|
||
}
|
||
this.loadingfollow = true;
|
||
followListApi(this.followParams).then(res => {
|
||
this.$set(this.followParams, 'page', this.followParams.page + 1);
|
||
this.loadendfollow = this.followParams.page > res.data.totalPage;
|
||
this.loadTitleFollow = this.loadendfollow ? '' : '加载更多';
|
||
this.noteRecommendList = this.noteRecommendList.concat(res.data.list || []);
|
||
this.loadingfollow = false
|
||
this.triggered = false;
|
||
}).catch(err => {
|
||
this.loadingfollow = false;
|
||
this.triggered = false;
|
||
uni.showToast({
|
||
title: err,
|
||
icon: 'none'
|
||
})
|
||
});
|
||
},
|
||
// 关注作者
|
||
followAuthor(item) {
|
||
if (this.isLogin) {
|
||
discoverFollowAuthor(item.authorId).then(() => {
|
||
this.$set(item, 'isConcerned', !item.isConcerned);
|
||
});
|
||
} else {
|
||
toLogin();
|
||
}
|
||
},
|
||
//回退页面之后重新加载页面
|
||
reFresh() {
|
||
this.loading = true
|
||
this.discoverList = {};
|
||
this.getDiscoverList();
|
||
},
|
||
//发布内容
|
||
publish() {
|
||
if (this.isLogin) {
|
||
// #ifdef MP || H5
|
||
uni.navigateTo({
|
||
url: `/pages/discover/discover_release/index`
|
||
})
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
uni.navigateTo({
|
||
animationType: animationType.type,
|
||
animationDuration: animationType.duration,
|
||
url: `/pages/discover/discover_release/index`
|
||
})
|
||
// #endif
|
||
} else {
|
||
toLogin();
|
||
}
|
||
},
|
||
/**
|
||
* 发现列表滑动中用到的方法
|
||
*/
|
||
followScroll() {
|
||
uni.$emit('scroll');
|
||
},
|
||
onTouchmoveRecommend(e) {
|
||
if (!this.loadendfollow) this.getFollowList();
|
||
if (this.loadendfollow && !this.loadend) this.getRecommendAuthorList();
|
||
},
|
||
onTouchmove(e) {
|
||
this.getDiscoverList();
|
||
},
|
||
scrollLeft: function(e) {
|
||
uni.$emit('scroll');
|
||
if (e.detail.scrollTop > e.detail.scrollHeight - 1500) {
|
||
this.getDiscoverList();
|
||
}
|
||
this.swiperHeight = this.windowHeight - 55
|
||
},
|
||
swiperChange(e) {
|
||
let {
|
||
current,
|
||
source,
|
||
currentItemId
|
||
} = e.detail;
|
||
if (source === 'autoplay' || source === 'touch') {
|
||
this.categoryId = currentItemId;
|
||
this.swiperCur = current
|
||
this.selectMenu(this.categoryList[this.swiperCur], this.swiperCur, false)
|
||
if (this.categoryList.length > 3) {
|
||
var tempIndex = this.swiperCur - 2;
|
||
tempIndex = tempIndex <= 0 ? 0 : tempIndex;
|
||
let tabLeft = (this.swiperCur - 2) * this.isWidth; //设置下划线位置
|
||
this.$nextTick(function() {
|
||
this.$set(this, 'tabLeft', tabLeft);
|
||
});
|
||
}
|
||
}
|
||
},
|
||
/*******************发现列表滑动中用到的方法结束*********************/
|
||
|
||
// 去个人主人
|
||
goUser() {
|
||
if (!this.isLogin) {
|
||
this.openAuto();
|
||
} else {
|
||
// #ifdef MP || H5
|
||
uni.navigateTo({
|
||
url: '/pages/discover/discover_user/index'
|
||
})
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
uni.navigateTo({
|
||
animationType: animationType.type,
|
||
animationDuration: animationType.duration,
|
||
url: '/pages/discover/discover_user/index'
|
||
})
|
||
// #endif
|
||
}
|
||
},
|
||
// 打开授权
|
||
openAuto() {
|
||
this.$Cache.set(BACK_URL, '')
|
||
toLogin();
|
||
},
|
||
//发现列表
|
||
getDiscoverList() {
|
||
let that = this;
|
||
this.isShow = false;
|
||
if (!this.discoverList[this.categoryId]) {
|
||
this.$set(this.discoverList, this.categoryId, {
|
||
where: {
|
||
...this.where,
|
||
categoryId: this.categoryId
|
||
},
|
||
goods: []
|
||
})
|
||
}
|
||
const data = this.discoverList[this.categoryId];
|
||
const cateId = this.categoryId;
|
||
if (data.loading || data.loadend) {
|
||
this.triggeredDiscover = false;
|
||
return
|
||
};
|
||
data.loading = true
|
||
this.loading = true
|
||
this.loadTitle = '';
|
||
if (data.where.categoryId === 0) data.where.categoryId = ''
|
||
discoverListApi(data.where).then(res => {
|
||
data.loadend = res.data.list.length < that.where.limit;
|
||
if (data.where.page == 1) {
|
||
data.goods = [];
|
||
}
|
||
this.loadTitle = data.loadend ? '没有了' : '加载更多';
|
||
data.goods.push.apply(data.goods, res.data.list);
|
||
data.where.page = data.where.page + 1;
|
||
that.$nextTick(() => {
|
||
that.$set(that.discoverList, cateId, {
|
||
...data
|
||
});
|
||
|
||
});
|
||
data.loading = false;
|
||
this.loading = false;
|
||
this.triggeredDiscover = false;
|
||
this.$forceUpdate()
|
||
}).catch(err => {
|
||
data.loading = false;
|
||
this.loading = false;
|
||
uni.showToast({
|
||
title: err,
|
||
icon: 'none'
|
||
})
|
||
this.$set(this.discoverList, cateId, data);
|
||
});
|
||
},
|
||
//推荐作者列表
|
||
getRecommendAuthorList() {
|
||
if (this.loadend) return;
|
||
this.loading = true
|
||
recommendAuthorListApi(this.params).then(res => {
|
||
this.$set(this.params, 'page', this.params.page + 1);
|
||
this.loadend = this.params.page > res.data.totalPage;
|
||
this.authorList = this.authorList.concat(res.data.list || []);
|
||
this.loadTitle = this.loadend ? '没有了' : '加载更多';
|
||
this.loading = false
|
||
})
|
||
},
|
||
//分类列表
|
||
getCommunityCategoryList() {
|
||
let data = [{
|
||
name: "推荐",
|
||
id: ''
|
||
}];
|
||
communityCategoryListApi().then(res => {
|
||
this.categoryList = Array.from(new Set([...data, ...res.data]));
|
||
})
|
||
},
|
||
|
||
// 点击列表头部
|
||
selectMenu(item, index, isScroll) {
|
||
this.triggeredDiscover = false;
|
||
this.categoryId = item.id;
|
||
this.swiperCurrent = index;
|
||
this.isScroll = isScroll;
|
||
this.tabClick = index; //设置导航点击了哪一个
|
||
this.isLeft = index * this.isWidth; //设置下划线位置
|
||
this.where.categoryId = item.id;
|
||
this.showCateDrawer = false
|
||
this.getDiscoverList();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.icon-ic_search{
|
||
font-size: 36rpx !important;
|
||
}
|
||
.discover_video_icon {
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
right: 0 !important;
|
||
-webkit-transform: translate(-50%, -50%);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.active-topic {
|
||
@include main_color(theme);
|
||
@include main_rgba_color(theme);
|
||
@include coupons_border_color(theme);
|
||
}
|
||
|
||
.padbottom {
|
||
/* #ifndef H5 */
|
||
padding-bottom: calc(100rpx+ constant(safe-area-inset-bottom)) !important; ///兼容 IOS<11.2/
|
||
padding-bottom: calc(100rpx + env(safe-area-inset-bottom)) !important;
|
||
/* #endif */
|
||
}
|
||
|
||
.bottom {
|
||
bottom: 218rpx !important;
|
||
}
|
||
|
||
.footerBottoms {
|
||
width: 100%;
|
||
/* #ifndef H5 */
|
||
height: calc(200rpx+ constant(safe-area-inset-bottom)) !important; ///兼容 IOS<11.2/
|
||
height: calc(200rpx + env(safe-area-inset-bottom)) !important;
|
||
/* #endif */
|
||
/* #ifdef H5 */
|
||
height: calc(100rpx+ constant(safe-area-inset-bottom)) !important; ///兼容 IOS<11.2/
|
||
height: calc(100rpx + env(safe-area-inset-bottom)) !important;
|
||
/* #endif */
|
||
}
|
||
|
||
.discover_index {
|
||
/deep/.no-border {
|
||
bottom: 40rpx;
|
||
}
|
||
|
||
/deep/.author-list {
|
||
padding-left: 24rpx;
|
||
padding-right: 24rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.menu {
|
||
padding: 0 34rpx 0 34rpx;
|
||
box-sizing: border-box;
|
||
width: 676rpx;
|
||
}
|
||
|
||
.page_con {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.empty-boxs {
|
||
margin: auto;
|
||
}
|
||
|
||
.goods {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.publish {
|
||
position: fixed;
|
||
z-index: 9999;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
opacity: 1;
|
||
border-radius: 50%;
|
||
bottom: 142rpx;
|
||
right: 24rpx;
|
||
color: #fff;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
@include linear-gradient(theme);
|
||
|
||
.iconfont {
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
|
||
.main {
|
||
width: 100%;
|
||
}
|
||
|
||
.author {
|
||
&-item {
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
&-title {
|
||
height: 120rpx;
|
||
line-height: 120rpx;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
|
||
.iconfont {
|
||
font-size: 170rpx;
|
||
color: #454545;
|
||
}
|
||
|
||
.lefticon {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
|
||
.name {
|
||
margin: 0 28rpx;
|
||
}
|
||
|
||
&-head {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
&-name {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 600;
|
||
color: #282828;
|
||
}
|
||
|
||
&-sign,
|
||
&-fans {
|
||
font-size: 22rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
&-sign {
|
||
width: 370rpx;
|
||
}
|
||
|
||
&-pictrue {
|
||
width: 222rpx;
|
||
height: 222rpx;
|
||
border-radius: 10px 10px 10px 10px;
|
||
opacity: 1;
|
||
margin-right: 18rpx;
|
||
|
||
|
||
/deep/image,
|
||
/deep/.easy-loadimage,
|
||
uni-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10px 10px 10px 10px;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
&-pictrue:nth-of-type(3n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
}
|
||
|
||
.noContent {
|
||
/deep/.empty-box {
|
||
padding-top: 80rpx !important;
|
||
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 440rpx;
|
||
height: 86rpx;
|
||
line-height: 86rpx;
|
||
text-align: center;
|
||
border-radius: 43rpx 43rpx 43rpx 43rpx;
|
||
opacity: 1;
|
||
border: 1px solid #E93323;
|
||
font-size: 32rpx;
|
||
margin: auto;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
@include main_color(theme);
|
||
@include coupons_border_color(theme);
|
||
font-weight: 600;
|
||
|
||
}
|
||
|
||
.cart_nav {
|
||
/deep/.nav_title {
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.discover {
|
||
&-header {
|
||
background-size: cover;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
&-navTab {
|
||
/* #ifdef H5 */
|
||
padding: 24rpx 34rpx 0 34rpx;
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
padding: 0 34rpx 0 34rpx;
|
||
/* #endif */
|
||
justify-content: space-between;
|
||
|
||
.nav-item {
|
||
font-size: 32rpx;
|
||
color: #666666;
|
||
|
||
margin-right: 52rpx;
|
||
|
||
&.on {
|
||
font-size: 38rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.release_btn {
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
border-radius: 100%;
|
||
background-image: linear-gradient(126deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
||
color: #fff;
|
||
position: absolute;
|
||
top: 20rpx;
|
||
left: 0;
|
||
|
||
.iconfont {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.avatar {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
&-box {
|
||
flex: 1;
|
||
min-height: 83vh;
|
||
height: auto;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
left: 0;
|
||
}
|
||
}
|
||
|
||
.h96 {
|
||
height: 96rpx;
|
||
}
|
||
|
||
.h36 {
|
||
/* #ifdef H5 */
|
||
height: 28rpx;
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
height: 18rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
.longTab {
|
||
width: 100%;
|
||
|
||
background: #fff;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
|
||
.longItem {
|
||
height: 50upx;
|
||
display: inline-block;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #999999;
|
||
margin-right: 56rpx;
|
||
|
||
text {
|
||
display: block;
|
||
max-width: 326rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
/*解决ios上滑动不流畅*/
|
||
-webkit-overflow-scrolling: touch;
|
||
position: relative;
|
||
|
||
&.click {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
@include main_color(theme);
|
||
|
||
&::after {
|
||
content: "";
|
||
display: block;
|
||
width: 40rpx;
|
||
height: 5rpx;
|
||
@include main_bg_color(theme);
|
||
display: flex;
|
||
position: absolute;
|
||
left: 50%;
|
||
margin-left: -22rpx;
|
||
bottom: -8rpx;
|
||
}
|
||
|
||
.underline {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.underlineBox {
|
||
height: 3px;
|
||
width: 20%;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: center;
|
||
|
||
.underline {
|
||
opacity: 0;
|
||
width: 60rpx;
|
||
height: 4rpx;
|
||
background-color: #e93323;
|
||
}
|
||
}
|
||
}
|
||
|
||
.author-fans {
|
||
font-size: 24rpx !important;
|
||
}
|
||
</style> |