ydd_front/mer_uniapp/pages/trade_fair/home/index.vue

<template>
	<view :data-theme="theme" class="discover_index">
		<view class="page_con" :style="{height: windowHeight + 'px'}">
			<view class="discover-header relative z-999">
				<!-- #ifdef APP || MP -->
				<view class="mp-header" :style="{ height: navH + 'rpx'}">
					<view class="sys-head mp-header" :style="{ height: sysHeight+'px' }"></view>
					<view class="select_nav flex justify-center align-center" id="home" :style="{top: sysHeight+'px'}">
						<text class="iconfont icon-fanhui2 px-20" @tap="returns"></text>
						<image @click="goUser" class="avatar" :src="userInfo.avatar ? userInfo.avatar : urlDomain+'crmebimage/presets/morenT.png'">
						</image>
						<!-- <text class="iconfont icon-gengduo5 px-20" @tap.stop="showNav"></text> -->
						<text class="nav_line"></text>
					</view>
					<view class="nav_title mp-header" :style="{ height:  '80rpx',lineHeight:  '80rpx', color: '#fff', top: sysHeight+'px' }">
						二手交易
					</view>
				</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="mb-10 longTab" v-if="categoryList.length">
					<swiper :indicator-dots="true" :interval="interval" indicator-active-color="rgba(255, 103, 2, 1)" :current="swperId"
					 @change="swiperIdChange">
						<block v-for="item in swperIndex" :key="item">
							<swiper-item :item-id="`${item}`">
								<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
									<block>
										<view class="flex-wrap flex-y-center pt-30">
											<view class="flex-col flex-center longTab-item mb-20" style="width: 20%;" v-for="(val, valIndex) in categoryList"
											 :key="valIndex" v-if="val.swperIndex == item" @tap="onCategoryClick(val)">
												<image class="w-44 h-44 mb-10" :src="val.imageUrl" mode=""></image>
												<view class="wall-font f-s-24 f-w-500">{{val.name}}</view>
											</view>
										</view>
									</block>
								</scroll-view>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			<view class="discover-boxsss">
				<view class='noCommodity h-full'>
					<!-- <scroll-view scroll-y="true" :show-scrollbar="false" class="scroll-view h-full" refresher-enabled="true"
					 :refresher-threshold="100" @scrolltolower="onScrollBottom"> -->
					 <view v-if="recommendIndexL == 0">
						 <view class='pictrue'>
							<image :src="urlDomain+'crmebimage/presets/noSearch.png'"></image>
						 </view>
						 <text class="text-ccc">{{'暂无商品~'}}</text>
					 </view>
					<recommend v-show="recommendIndexL" ref="recommendIndex" :tabActive="tabActive" :dynamics="true" class="mt-40" @getRecommendLength="getRecommendLength"></recommend>
					<!-- </scroll-view> -->
				</view>
			</view>
			<view class="publish" @click="publish" :class="bottomNavigationIsCustom?'bottom':''">
				<view><text class='iconfont icon-paizhao w-116 h-116'></text></view>
				<!-- <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>
		<!-- 学校 -->
		<uni-popup ref="schoolRef" :is-mask-click="false">
			<view class="w-full flex-center" :style="{height: windowHeight + 'px'}">
				<navigator hover-class='none' url='/pages/trade_fair/trade_fair_user/index'>
					<image src="/static/img/ic-school.png" mode="heightFix" style="height: 694rpx;width: 616rpx;"></image>
				</navigator>
			</view>
		</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,
		getSecondHandInfo
	} from '@/api/discover.js';
	import {
		discoverFollowAuthor,
	} from '@/libs/follow.js';
	import {
		tokenIsExistApi
	} from '@/api/api.js';
	import {
		silenceBindingSpread,
		getUserSpread
	} from '@/utils/index.js';
	import recommend from "@/components/base/recommend.vue";
	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,
			recommend
		},
		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', {});
				}
			})
			// 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: [], //分类列表
				swperIndex: [],
				swperId: 0,
				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,
				recommendIndexL: 0
			}
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		onShow() {
			this.getHandInfo()
			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'
					})
				}
			},
			getHandInfo() {
				getSecondHandInfo().then(res => {
					this.bannerList = res.data.banner
					this.wallHeadline = res.data.headline
					let arr = res.data.navigatList
					let arrs = []
					let swperIndex = 1;
					let swperArr = [0];
					arr.forEach((item, index) => {
						if ((index + 1) > (swperIndex * 10)) {
							swperIndex++
							swperArr.push(swperIndex - 1)
							item.swperIndex = (swperIndex - 1)
						} else {
							item.swperIndex = (swperIndex - 1)
						}
						arrs.push({...item})
					})
					this.swperIndex = swperArr
					this.categoryList = arrs

					console.log(res.data, 111111111111111)
					if (!res.data.school) {
						this.$refs.schoolRef.open('top')
					} else {
						this.$refs.schoolRef.close()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			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?fair=${true}`
					})
					// #endif  
					// #ifdef APP-PLUS
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: `/pages/discover/discover_release/index?fair=${true}`
					})
					// #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);
						});
					}
				}
			},
			swiperIdChange(e) {
				let {
					current,
					source,
					currentItemId
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					console.log(current, source, currentItemId)
				}
			},
			/*******************发现列表滑动中用到的方法结束*********************/

			// 去个人主人
			goUser() {
				if (!this.isLogin) {
					this.openAuto();
				} else {
					// #ifdef MP || H5
					uni.navigateTo({
						url: `/pages/trade_fair/trade_fair_user/index`
					})
					// #endif  
					// #ifdef APP-PLUS
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: `/pages/trade_fair/trade_fair_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() {
				communityCategoryListApi().then(res => {
					let arr = []
					let arrs = []
					arr.push(...res.data)
					arr.push(...res.data)
					arr.push(...res.data)
					arr.push(...res.data)
					arr.push(...res.data)
					arr.push(...res.data)
					arr.push(...res.data)
					let swperIndex = 1;
					let swperArr = [0];
					arr.forEach((item, index) => {
						item.id = index
						if ((index + 1) > (swperIndex * 10)) {
							swperIndex++
							swperArr.push(swperIndex - 1)
							item.swperIndex = (swperIndex - 1)
						} else {
							item.swperIndex = (swperIndex - 1)
						}
						arrs.push({ ...item
						})
					})
					this.swperIndex = swperArr
					this.categoryList = arrs
				})
			},

			// 点击列表头部
			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();
			},
			onReachBottom() {
				this.$refs.recommendIndex.get_host_product();
			},
			getRecommendLength(val) {
				this.recommendIndexL = val
			},
			onCategoryClick(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/goods/goods_list/index?fairCateId=${item.id}&title=${item.name}`
				})
			}
		}
	}
</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: 99999;
		left: 14rpx;
	}

	.nav_title {
		// width: 200rpx;
		color: #fff;
		font-size: 36rpx;
		position: fixed;
		z-index: 9999;
		text-align: center;
		left: 0;
		right: 0;
		margin-top: -1px;
	}

	.sys-head {
		width: 100%;
		position: fixed;
		z-index: 9999;
	}

	.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: 999;
		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>