|
|
@@ -0,0 +1,1250 @@
|
|
|
+<template>
|
|
|
+ <view :data-theme="theme" class="discover_index">
|
|
|
+ <view class="page_con" :style="{height: windowHeight + 'px'}">
|
|
|
+ <view class="discover-header relative z-999">
|
|
|
+ <!-- #ifdef MP -->
|
|
|
+ <view class="cart_nav">
|
|
|
+ <nav-bar iconColor='#fff' ref="navBarRef" :navTitle="'二手交易'" backgroundColor="#FF6702" :isBackgroundColor="false">
|
|
|
+ </nav-bar>
|
|
|
+ </view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <view class="discover-navTab acea-row row-middle bg--w111-fff mt-4">
|
|
|
+ <view class="acea-row row-center-wrapper" :style="[textBoxStyle]">
|
|
|
+ <view style="margin-right: 52rpx;" :class="tabActive == 0 ? 'on' : ''" class="nav-item" @click="tabActive=0;showCateDrawer = false">本校</view>
|
|
|
+ <view style="margin-right: 52rpx;" :class="tabActive == 1 ? 'on' : ''" class="nav-item pb-10" @click="tabActive=1;">同城</view>
|
|
|
+ <view :class="tabActive == 2 ? 'on' : ''" class="nav-item pb-10" @click="tabActive=2;">全国</view>
|
|
|
+ </view>
|
|
|
+ <!-- #ifndef MP -->
|
|
|
+ <view style="width: 32rpx;"></view>
|
|
|
+ <!-- #endif -->
|
|
|
+ </view>
|
|
|
+ <view class='search acea-row '>
|
|
|
+ <view class='input acea-row row-middle'>
|
|
|
+ <text class='iconfont icon-sousuo2'></text>
|
|
|
+ <input class="placeholder" type='text' :value='searchValue' :focus="focus" placeholder='请输入标题' placeholder-class='placeholder' @input="setValue" confirm-type="search" @confirm="searchBut()"></input>
|
|
|
+ </view>
|
|
|
+ <view class='bnt' @tap='searchBut'>搜索</view>
|
|
|
+ </view>
|
|
|
+ <!-- banner轮播图 -->
|
|
|
+ <view class="mb-10" v-if="bannerList.length">
|
|
|
+ <swiper :indicator-dots="true" :autoplay="true" :interval="2500" :duration="500" circular="true">
|
|
|
+ <block v-for="(item,index) in bannerList" :key='item.id'>
|
|
|
+ <swiper-item>
|
|
|
+ <view class="swiper-item">
|
|
|
+ <image class="banner-img" :src="item.imageUrl" mode="scaleToFill" />
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </block>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <!-- 话题分类 -->
|
|
|
+ <view class="longTab mb-10" scroll-y enhanced>
|
|
|
+ <view class="flex h-116">
|
|
|
+ <view class="flex-1 h-full flex-center longTab-item" :style="{background: index === tabClick ? '#EEF4FF' : ''}"
|
|
|
+ v-for="(item, index) in categoryList" :key="index" :id="'id' + index" @click.stop="selectMenu(item, index, true)">
|
|
|
+ <view class="flex-col flex-center">
|
|
|
+ <image class="w-44 h-44 mb-10" :src="item.icon" mode=""></image>
|
|
|
+ <view class="wall-font f-s-24 f-w-500">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-1 h-full flex-center longTab-item">
|
|
|
+ <navigator hover-class='none' url='/pages/merchant/user_sgin/index' class="item">
|
|
|
+ <view class="flex-col flex-center">
|
|
|
+ <image class="w-44 h-44 mb-10" :src="'/static/img/ic-wall-type-4.png'" mode=""></image>
|
|
|
+ <view class="wall-font f-s-24 f-w-500">签到</view>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="discover-boxsss">
|
|
|
+ <!-- 发现 -->
|
|
|
+ <scroll-view scroll-y="true" @scroll="followScroll" class="main h-full">
|
|
|
+ <view class="tab-cont h-full" id="main">
|
|
|
+ <!-- 发现 -->
|
|
|
+ <view class="h-full">
|
|
|
+ <swiper class="h-full" :interval="interval" indicator-color="rgba(255,255,255,0.6)" :current="swiperCurrent" @change="swiperChange">
|
|
|
+ <block v-for="(item,index) in categoryList" :key="index">
|
|
|
+ <swiper-item class="h-full" :item-id="`${item.id}`">
|
|
|
+ <scroll-view @scroll="scrollLeft" scroll-y="true" :show-scrollbar="false" class="scroll-view h-full"
|
|
|
+ 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 flex-1" 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" :type="1">
|
|
|
+ <template slot-scope="{items}">
|
|
|
+ <WaterfallsFlowItem :item="items" :type="1" :isStore="1" />
|
|
|
+ </template>
|
|
|
+ </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>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="publish" @click="publish" :class="bottomNavigationIsCustom?'bottom':''">
|
|
|
+ <image class="w-116 h-116" src="/static/img/ic-fatie.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- <pageFooter v-if="isShowFooter"></pageFooter> -->
|
|
|
+
|
|
|
+ <!-- 评论 -->
|
|
|
+ <uni-popup type="bottom" ref="comment">
|
|
|
+ <view :style="'width: '+ windowWidth +'px; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
|
|
|
+ <discoverComment v-if="showComment" @getReplyNum="getReplyNum" :noteId="noteDetails.id" :noteDetails="noteDetails"
|
|
|
+ @close="close">
|
|
|
+ </discoverComment>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <uni-popup type="bottom" ref="goods">
|
|
|
+ <mentioned v-if="popupShow" :list="proList" @close="popup" class=""></mentioned>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from "vuex";
|
|
|
+ import {
|
|
|
+ toLogin
|
|
|
+ } from '@/libs/login.js';
|
|
|
+ import {
|
|
|
+ BACK_URL
|
|
|
+ } from '@/config/cache';
|
|
|
+ import {
|
|
|
+ communityCategoryListApi,
|
|
|
+ recommendAuthorListApi,
|
|
|
+ discoverListApi,
|
|
|
+ followListApi,
|
|
|
+ getReplyInfo
|
|
|
+ } 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 discoverComment from '@/components/discoverComment/index.vue';
|
|
|
+ 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 discoverDetails from '@/components/discoverDetails/index.vue'
|
|
|
+ import mentioned from '@/components/mentioned.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,
|
|
|
+ discoverDetails,
|
|
|
+ discoverComment,
|
|
|
+ mentioned,
|
|
|
+ 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
|
|
|
+ width: '100%',
|
|
|
+ height: this.searchHeight + 'rpx',
|
|
|
+ // lineHeight: this.searchHeight + 'rpx',
|
|
|
+ // #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', {});
|
|
|
+ }
|
|
|
+ })
|
|
|
+ getReplyInfo().then(res => {
|
|
|
+ this.bannerList = res.data.banner
|
|
|
+ this.wallHeadline = res.data.headline
|
|
|
+ console.log(res.data, 111111111111111)
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ this.getDiscoverList();
|
|
|
+ this.getCommunityCategoryList();
|
|
|
+
|
|
|
+ this._freshing = false;
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ returnShow: false,
|
|
|
+ urlDomain: this.$Cache.get("imgHost"),
|
|
|
+ sysHeight: sysHeight,
|
|
|
+ navH: '',
|
|
|
+ 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: '-1', //分类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: {}, //内容详情
|
|
|
+ popupShow: false, //商品弹窗
|
|
|
+ showComment: false, //评论弹窗
|
|
|
+ proList: [], //提到的商品
|
|
|
+ isShowFooter: true,
|
|
|
+ loadingAuthor: false, //推荐作者
|
|
|
+ showCateDrawer: false, //分类下拉展示
|
|
|
+ searchRight: 0,
|
|
|
+ statusWidth: 0,
|
|
|
+ searchHeight: 0,
|
|
|
+ bannerList: [],
|
|
|
+ wallHeadline: [],
|
|
|
+ navList: [{
|
|
|
+ id: 0,
|
|
|
+ name: '默认'
|
|
|
+ }, {
|
|
|
+ id: 1,
|
|
|
+ name: '评论'
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ name: '点赞'
|
|
|
+ }, {
|
|
|
+ id: 3,
|
|
|
+ name: '有图'
|
|
|
+ }],
|
|
|
+ active: 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 pages = getCurrentPages();
|
|
|
+ this.returnShow = pages.length === 1 ? false : true;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #ifdef MP || APP-PLUS
|
|
|
+ // 获取导航高度；
|
|
|
+ this.navH = this.globalData.navHeight;
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ this.navH = 80;
|
|
|
+ // #endif
|
|
|
+ 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 = 96
|
|
|
+ console.log('999', statusHeight, this.sysHeight);
|
|
|
+ this.marTop = statusHeight - this.sysHeight
|
|
|
+ //搜索框宽度计算
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ this.searchRight = res.windowWidth - statusRight
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ //uniapp小程序用deep重写组件样式不生效
|
|
|
+ options: {
|
|
|
+ styleIsolation: 'shared'
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ returns: function() {
|
|
|
+ if (this.returnShow) {
|
|
|
+ uni.navigateBack(-1);
|
|
|
+ } else {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getNavH(marTop) {
|
|
|
+ // #ifdef H5
|
|
|
+ this.marTop = 30;
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP
|
|
|
+ this.marTop = marTop - 60;
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ getPro(item) {
|
|
|
+ this.noteDetails = item;
|
|
|
+ this.proList = item.productList;
|
|
|
+ this.$refs.goods.open('bottom');
|
|
|
+ this.popupShow = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ if (!this.bottomNavigationIsCustom) {
|
|
|
+ uni.hideTabBar();
|
|
|
+ } else {
|
|
|
+ this.isShowFooter = false;
|
|
|
+ }
|
|
|
+ }, 50)
|
|
|
+ },
|
|
|
+ popup() {
|
|
|
+ if (!this.bottomNavigationIsCustom) {
|
|
|
+ uni.showTabBar();
|
|
|
+ } else {
|
|
|
+ this.isShowFooter = true;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.goods.close();
|
|
|
+ this.popupShow = false;
|
|
|
+ }, 100)
|
|
|
+
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ if (!this.bottomNavigationIsCustom) {
|
|
|
+ uni.showTabBar();
|
|
|
+ } else {
|
|
|
+ this.isShowFooter = true;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.comment.close();
|
|
|
+ this.showComment = false;
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+ getReplyNum(n) {
|
|
|
+ this.noteDetails.replyNum = n;
|
|
|
+ },
|
|
|
+ getComment(item) {
|
|
|
+ this.noteDetails = item;
|
|
|
+ this.$refs.comment.open('bottom');
|
|
|
+ this.showComment = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ if (!this.bottomNavigationIsCustom) {
|
|
|
+ uni.hideTabBar();
|
|
|
+ } else {
|
|
|
+ this.isShowFooter = false;
|
|
|
+ }
|
|
|
+ }, 50)
|
|
|
+ },
|
|
|
+ //校验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,
|
|
|
+ secondType: this.active
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ console.log(that.discoverList)
|
|
|
+ }).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: '-1',
|
|
|
+ icon: '/static/img/ic-wall-type--1.png'
|
|
|
+ }];
|
|
|
+ communityCategoryListApi().then(res => {
|
|
|
+ this.categoryList = Array.from(new Set([...data, ...res.data]));
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击列表头部
|
|
|
+ selectMenu(item, index, isScroll) {
|
|
|
+ if (this.tabClick == index) return
|
|
|
+ this.active = 0
|
|
|
+ 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>
|
|
|
+ /deep/.wf-page {
|
|
|
+ background-color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .discover_video_icon {
|
|
|
+ top: 50% !important;
|
|
|
+ left: 50% !important;
|
|
|
+ right: 0 !important;
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .mp-header {
|
|
|
+ background-color: $bg-color-primary;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select_nav {
|
|
|
+ width: 170rpx !important;
|
|
|
+ height: 60rpx !important;
|
|
|
+ border-radius: 33rpx;
|
|
|
+ // background: rgba(255, 255, 255, 0.6);
|
|
|
+ // border: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
|
+ color: #000;
|
|
|
+ position: fixed;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 58rpx;
|
|
|
+ z-index: 1000;
|
|
|
+ left: 14rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav_title {
|
|
|
+ // width: 200rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 36rpx;
|
|
|
+ position: fixed;
|
|
|
+ text-align: center;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .newsTitle {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 21rpx;
|
|
|
+ color: #646464;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active-topic {
|
|
|
+ @include main_color(theme);
|
|
|
+ @include coupons_light_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: 20rpx 34rpx 0 34rpx;
|
|
|
+ // box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24rpx 24rpx 0 24rpx;
|
|
|
+ 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 {
|
|
|
+ padding: 0 34rpx 0 34rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .icon-xiazai5 {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item {
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 31rpx;
|
|
|
+ color: #B2B2B2;
|
|
|
+
|
|
|
+ &.on {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 35rpx;
|
|
|
+ color: #141414;
|
|
|
+ border-bottom: 5rpx solid;
|
|
|
+ border-image: linear-gradient(90deg, #FFCA5F 0%, #FF1B95 100%);
|
|
|
+ border-image-slice: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-box {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 83vh;
|
|
|
+ height: auto;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .longTab-item {
|
|
|
+ /*解决ios上滑动不流畅*/
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 {
|
|
|
+ background: #EEF4FF;
|
|
|
+ // 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ overflow: hidden;
|
|
|
+ /* 隐藏超出部分 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ display: flex;
|
|
|
+ /* 使用flex布局 */
|
|
|
+ animation: scrollRight 10s linear infinite;
|
|
|
+ /* 应用动画 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ flex-shrink: 0;
|
|
|
+ /* 不允许缩小 */
|
|
|
+ width: 100%;
|
|
|
+ /* 每个item占满一行 */
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes scrollRight {
|
|
|
+ from {
|
|
|
+ transform: translateX(100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 从右向左移动 */
|
|
|
+ to {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 移出视图 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .wall-nav {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 23rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wall-nav~.wall-nav {
|
|
|
+ margin-left: 38rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wall-nav-on {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 27rpx;
|
|
|
+ color: #141414;
|
|
|
+ }
|
|
|
+
|
|
|
+ .discover-boxsss {
|
|
|
+ background-color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0rpx 10rpx 10rpx 38rpx;
|
|
|
+ }
|
|
|
+ .search .input {
|
|
|
+ width: 590rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ border-radius: 33rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 66rpx;
|
|
|
+ }
|
|
|
+ .search .input input {
|
|
|
+ width: 460rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .search .input .iconfont {
|
|
|
+ color: #000;
|
|
|
+ font-size: 35rpx;
|
|
|
+ }
|
|
|
+ .search .bnt {
|
|
|
+ text-align: center;
|
|
|
+ height: 66rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #282828;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+</style>
|
