yixiang/pages/index/index.vue

<template>
	<view class="content" @click="show_add = false">
		<u-navbar title=" " bgColor="#00B0B0" :autoBack="false" :placeholder="true" :fixed="true" height="44">
			<view class="search" slot="left">
				<u-search placeholder=""  v-model="search" :disabled="true" :showAction="false" @click="tosearch"></u-search>
			</view>
			<view class="search-right hflex acenter" slot="right">
				<view class="img" @click="tomessage">
					<image src="@/static/images/message.png" mode="aspectFill"></image>
					<u-badge type="error" :offset="[0,0]" :absolute="true" :value="news_number"></u-badge>
				</view>
				<image src="@/static/images/add.png" mode="aspectFill" @click.stop="show_add = !show_add"></image>
				<view class="add-show" v-if="show_add">
					<view class="hflex acenter show-item" @click="toadd('zixun')">
						<image src="@/static/images/add-zixun.png" mode="aspectFill"></image>
						<text>发布资讯</text>
					</view>
					<view class="hflex acenter show-item" @click="toadd('wenzhang')">
						<image src="@/static/images/add-wenzhang.png" mode="aspectFill"></image>
						<text>发布文章</text>
					</view>
					<view class="hflex acenter show-item" @click="toadd('video')">
						<image src="@/static/images/add-shipin.png" mode="aspectFill"></image>
						<text>发布视频</text>
					</view>
					<view class="hflex acenter show-item" @click="toadd('luntan')">
						<image src="@/static/images/add-luntan.png" mode="aspectFill"></image>
						<text>发布论坛</text>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="tabs hflex acenter">
			<u-sticky bgColor="#fff" offset-top="88" customNavHeight="44" zIndex="99">
			    <u-tabs :list="tabs" lineWidth="0" @click="tochangetabs" :scrollable="true" :current="current"
			     :inactiveStyle="{color: '#666666',fontSize: '30rpx',}"
			     :activeStyle="{color: '#00B0B0',fontWeight: 'bold',fontSize: '32rpx',}"></u-tabs>
			</u-sticky>
			
		</view>
		<swiper class="index-swiper" :circular="false" :autoplay="false" :current="current" @change="swipertotabs">
			<!-- 福利 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="vip">
						<yxVip :user="user"></yxVip>
					</view>
					<view class="fuli" v-if="user.is_vip">
						<view class="title hflex acenter jbetween">
							<text>会员领福利</text>
							<view class="hflex acenter title-right">
								<text>全部</text>
								<image src="/static/images/arrow-right.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="fuli-box">
							<view class="box-title">当前等级<span style="font-size: 40rpx;color: #57C3C2;">{{user.level}}</span>级</view>
							<view class="box-list hflex acenter">
								<view class="list-item vflex acenter jcenter"  v-for="(item,index) in vip_list" :key="index">
									<image :src="item.prize_image" mode="aspectFill"></image>
									<text :style="item.is_receive == 1 ? 'color: #CCCCCC;' : ''">达到{{item.days}}级</text>
								</view>
							</view>
						</view>
					</view>
					<view class="fuli">
						<view class="title hflex acenter jbetween">
							<text>签到领福利</text>
							<view class="hflex acenter title-right">
								<text>全部</text>
								<image src="/static/images/arrow-right.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="fuli-box">
							<view class="box-title">已连续签到<span style="font-size: 40rpx;color: #57C3C2;">20</span>天</view>
							<view class="box-list hflex acenter">
								<view class="list-item vflex acenter jcenter"  v-for="(item,index) in qiandao_list" :key="index">
									<image :src="item.prize_image" mode="aspectFill"></image>
									<text :style="item.is_receive == 1 ? 'color: #CCCCCC;' : ''">连签{{item.days}}天</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<!-- 关注 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="list vflex acenter jcenter" v-if="list.length == 0">
						<view class="empty">没有任何内容</view>
						<view class="empty-text">需关注后才可显示内容</view>
						<u-button class="login-btn" @click="tologin" text="登录忆象" v-if="!login"></u-button>
					</view>
					<view class="list1" v-else>
						<list-info type="post" :data="item" v-for="(item,index) in list" :key="index" @toinfo="toinfo(item)"></list-info>
					</view>
				</view>
			</swiper-item>
			<!-- 最新 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="top">
						<swiper-list type="index"></swiper-list>
						<view class="vflex" v-if="zixun_list.length>0">
							<view class="title">精选资讯</view>
							<view class="vflex">
								<wenzhang-info type="info" :data="item" v-for="(item,index) in zixun_list.slice(0,3)" :key="index" @toinfo="toinfo(item)"></wenzhang-info>
								<view class="more-btn" @click="tomore('info')">查看更多资讯</view>
							</view>
						</view>
						<view class="vflex" v-if="circle_list.length>0">
							<view class="hflex acenter jbetween">
								<view class="title">大家在聊</view>
								<view class="more-text" @click="tomore('topic')">查看更多</view>
							</view>
							<view class="vflex">
								<view class="circle-item hflex acenter" v-for="(item,index) in circle_list" :key="index">
									<!-- <image :src="item.img" mode="aspectFill" class="circle-img"></image> -->
									<text class="circle-text" @click="tohuati(item)">{{item.title}}</text>
								</view>
							</view>
						</view>
						<view class="vflex" v-if="wenzhang_list.length>0">
							<view class="hflex acenter jbetween">
								<view class="title">精选文章</view>
								<view class="more-text" @click="tomore('article')">查看更多</view>
							</view>
							<wenzhang-info type="article" :data="item" v-for="(item,index) in wenzhang_list.slice(0,3)" :key="index" @toinfo="toinfo(item)"></wenzhang-info>
						</view>
						<view class="vflex" v-if="video_list.length>0">
							<view class="hflex acenter jbetween">
								<view class="title">精选视频</view>
								<view class="more-text" @click="tomore('video')">查看更多</view>
							</view>
							<view class="videos hflex acenter" >
								<video-list :item="item" v-for="(item,index) in video_list" :key="index" @toinfo="toinfo(item)"></video-list>
							</view>
						</view>
					</view>
					<view class="list1">
						<list-info type="post" :data="item" v-for="(item,index) in list" :key="index" @toinfo="toinfo(item)"></list-info>
					</view>
				</view>
			</swiper-item>
			<!-- 资讯 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="top">
						<swiper-list type="info"></swiper-list>
					</view>
					<view class="list" style="box-sizing: border-box;padding: 28rpx;">
						<view class="vflex" v-for="(item,index) in zixun_list" :key="index">
							<view class="title">{{item.date}}</view>
							<view class="vflex">
								<wenzhang-info type="info" :data="a" v-for="(a,b) in item.list" :key="index" @toinfo="toinfo(a)"></wenzhang-info>
							</view>
						</view>
					</view>
					
				</view>
			</swiper-item>
			<!-- 文章 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="top" style="margin: 0;padding-bottom: 0;">
						<swiper-list type="article"></swiper-list>
						<view class="vflex" v-if="wenzhang_list.length>0">
							<view class="hflex acenter jbetween">
								<view class="title">精选文章</view>
								<view class="more-text" @click="tomore('article')">查看更多</view>
							</view>
						</view>
						
					</view>
					<list-info type="article" :data="item" v-for="(item,index) in wenzhang_list" :key="index" @toinfo="toinfo(item)"></list-info>
					<view class="vflex" v-if="list.length>0">
						<view class="list-title2">最新文章</view>
					</view>
					<list-info type="article" :data="item" v-for="(item,index) in list" :key="index" @toinfo="toinfo(item)"></list-info>
				</view>
			</swiper-item>
			<!-- 视频 -->
			<swiper-item>
				<view class="swiper-item">
					<view class="top">
						<swiper-list type="video"></swiper-list>
						<view class="vflex" v-if="video_list.length>0">
							<view class="hflex acenter jbetween">
								<view class="title">精选视频</view>
								<view class="more-text" @click="tomore('video')">查看更多</view>
							</view>
							<view class="videos hflex acenter" >
								<video-list :item="item" v-for="(item,index) in video_list" :key="index" @toinfo="toinfo(item)"></video-list>
							</view>
						</view>
					</view>
					<view class="list1">
						<view class="list-title">最新视频</view>
						<list-info type="video" :data="item" v-for="(item,index) in list" :key="index" @toinfo="toinfo(item)"></list-info>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import swiperList from '@/components/swiper-list/index.vue'
	import yxVip from '@/components/yx-vip/index.vue'
	import listInfo from '@/components/list-info/index.vue'
	import wenzhangInfo from '@/components/wenzhang-info/index.vue'
	import videoList from '@/components/video-list/index.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			swiperList,
			yxVip,
			listInfo,
			wenzhangInfo,
			videoList
		},
		data() {
			return {
				search: '',
				tabs: [
					{
						id: 0,
						name: '福利'
					},
					{
						id: 1,
						name: '关注',
						badge: {
							isDot: false
						}
					},
					{
						id: 2,
						name: '最新'
					},
					{
						id: 3,
						name: '资讯'
					},
					{
						id: 4,
						name: '文章'
					},
					{
						id: 5,
						name: '视频'
					},
				],
				news_number: 1,//消息数量
				guanzhu_num: 1,//关注的数量
				current: 2,
				scrollable: false,
				list: [],
				login: false,
				show_add: false,
				zixun_list: [],
				circle_list: [],
				wenzhang_list: [],
				video_list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				user: {},
				qiandao_list: [],
				vip_list: []
			}
		},
		onLoad() {
		},
		onShow() {
			this.login = uni.getStorageSync('token') ? true : false
			this.getuser()
			this.list = []
			this.zixun_list = []
			this.wenzhang_list = []
			this.circle_list = []
			this.video_list = []
			this.getlist()
		},
		onReachBottom() {
			if(this.last_page > this.page) {
				this.page++
				this.getlist()
			} else {
				uni.$u.toast('已经到底了');
			}
		},
		methods: {
			tohuati(item) {
				uni.navigateTo({
					url: '/pageA/topic-detail?id=' + item.id
				})
			},
			getuser() {
				var _this = this
				$api.req({
					url: 'user/info',
					methos: 'GET'
				}, function(res) {
					if(res.code == 10000) {
						_this.user = res.data
					}
				})
			},
			tomore(type) {
				if(type == 'topic') {
					uni.navigateTo({
						url: '/pageA/huati'
					})
				} else {
					uni.navigateTo({
						url: '/pageA/jingxuan-list?type=' + type
					})
				}
			},
			tomessage() {
				uni.navigateTo({
					url: '/pageA/message'
				})
			},
			/* 发布 */
			toadd(val) {
				if(val == 'luntan') {
					uni.navigateTo({
						url: '/pageA/add-luntan'
					})
				} else {
					uni.navigateTo({
						url: '/pageA/add-wenzhang?type=' + val
					})
				}
				this.show_add = false
			},
			/* 详情 */
			toinfo(item) {
				uni.navigateTo({
					url: '/pageA/info-detail?id=' + item.id
				})
			},
			/* 点击切换tabs */
			tochangetabs(item) {
				this.current = item.id
				
			},
			/* 滑动切换tabs */
			swipertotabs(e) {
				this.current = e.detail.current
				this.swipe_list = []
				this.getswiperlist()
				this.page = 1
				this.last_page = 1
				this.list = []
				this.zixun_list = []
				this.wenzhang_list = []
				this.circle_list = []
				this.video_list = []
				this.getlist()
			},
			/* 轮播图点击事件 */
			swiperclick(e) {
				var data = this.swiper_list[e]
				if(data.is_jump == 1) {
					if(data.jump_type == 'external') {
						window.location.href = data.jump_url
					} else {
						uni.navigateTo({
							url: data.jump_url
						})
					}
				}
			},
			getswiperlist() {
				if(this.current == 0 || this.current == 1) {
					return 
				}
				var _this = this
				var type = ''
				if(_this.current == 2) {
					type = 'index'
				} else if(_this.current == 3) {
					type = 'info'
				}
				else if(_this.current == 4) {
					type = 'article'
				}
				else if(_this.current == 5) {
					type = 'video'
				}
				$api.req({
					url: 'banner',
					data: {
						type: type,
						limit: 5
					}
				}, function(res) {
					if(res.code == 10000) {
						_this.swiper_list = res.data
					}
				})
			},
			/* 获取列表 */
			getlist() {
				var _this = this
				if(_this.current == 0) {
					$api.req({
						url: "sign/prize",
						data: {
							page: 1,
							limit: 5
						},
					}, function(res) {
						_this.qiandao_list = res.data.list
					})
					/* $api.req({
						url: '',
						
					}) */
				} 
				if(_this.current == 1) {
					$api.req({
						url: 'summary',
						method: 'GET',
						data: {
							page: _this.page,
							limit: _this.limit,
							is_page: 1,
							type: 'follow',
							order: 'published_at',
							order_type: 'desc'
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.list = _this.list.concat(res.data.list)
							_this.last_page = res.data.last_page
						}
					})
				} 
				if(_this.current == 2) {
					/* $api.req({
						url: 'info',
						method: 'GET',
						data: {
							page: 1,
							limit: 3,
							status: 'normal',
							is_boutique: 1
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.zixun_list = res.data.list
						}
					})
					$api.req({
						url: 'article',
						method: 'GET',
						data: {
							page: 1,
							limit: 3,
							status: 'normal',
							is_boutique: 1,
							format_type: 'normal'
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.wenzhang_list = res.data.list
						}
					})
					$api.req({
						url: 'video',
						method: 'GET',
						data: {
							page: 1,
							limit: 5,
							status: 'normal',
							is_boutique: 1
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.video_list = res.data.list
						}
					})
					$api.req({
						url: 'topic',
						method: 'GET',
						data: {
							page: 1,
							limit: 3,
							is_recommend: 1
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.circle_list = res.data.list
						}
					}) */
					$api.req({
						url: 'topic',
						method: 'GET',
						data: {
							page: 1,
							limit: 3,
							is_recommend: 1
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.circle_list = res.data.list
						}
					})
					$api.req({
						url: 'summary',
						method: 'GET',
						data: {
							page: 1,
							limit: 3,
							type: 'group',
							is_boutique: 1
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.zixun_list = res.data.info
							_this.wenzhang_list = res.data.article
							_this.video_list = res.data.video
							// _this.zixun_list = res.data.info
						}
					})
					$api.req({
						url: 'post',
						method: 'GET',
						data: {
							page: _this.page,
							limit: _this.limit,
							status: 'normal'
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.list = _this.list.concat(res.data.list)
							_this.last_page = res.data.last_page
						}
					})
				}
				if(_this.current == 3) {
					$api.req({
						url: 'info',
						method: 'GET',
						data: {
							is_page: '1',
							page: _this.page,
							limit: _this.limit,
							status: 'normal',
							format_type: 'date',
							is_boutique: 0
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.zixun_list = _this.zixun_list.concat(res.data)
							/* for(var i=0;i<_this.zixun_list.length;i++) {
								if(_this.zixun_list[i].date == _this.zixun_list[i+1].date) {
									for(var j=0;j<_this.zixun_list[i+1].list.length;j++) {
										_this.zixun_list[i].list.push(_this.zixun_list[i+1].list[j])
									}
								}
							} */
						}
					})
				}
				if(_this.current == 4) {
					$api.req({
						url: 'article',
						method: 'GET',
						data: {
							is_page: '1',
							page: 1,
							limit: 3,
							status: 'normal',
							is_boutique: 1
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.wenzhang_list = _this.wenzhang_list.concat(res.data.list)
						}
					})
					$api.req({
						url: 'article',
						method: 'GET',
						data: {
							is_page: '1',
							page: _this.page,
							limit: _this.limit,
							status: 'normal'
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.list = _this.list.concat(res.data.list)
							_this.last_page = res.data.last_page
						}
					})
				}
				if(_this.current == 5) {
					$api.req({
						url: 'video',
						method: 'GET',
						data: {
							page: 1,
							limit: 5,
							status: 'normal',
							is_boutique: 1
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.video_list = _this.video_list.concat(res.data.list)
						}
					})
					$api.req({
						url: 'video',
						method: 'GET',
						data: {
							page: _this.page,
							limit: _this.limit,
							status: 'normal'
						}
					}, function(res) {
						if(res.code == 10000) {
							_this.list = _this.list.concat(res.data.list)
							_this.last_page = res.data.last_page
						}
					})
				}
				
			},
			/* 去登录 */
			tologin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			
			/* 点击左侧区域 */
			leftClick() {
				return
			},
			/* 首页搜索 */
			tosearch() {
				uni.navigateTo({
					url: '/pageA/search'
				})
			},
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		.list-title2 {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			padding: 28rpx;
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
		}
		.index-swiper {
			padding: 144rpx 0 0;
			min-height: calc(100vh - 88rpx);
			height: 1rpx;
			.swiper-item {
				height: 100%;
				overflow: auto;
				.vip {
					background: #FFFFFF;
					padding: 28rpx 24rpx 44rpx;
				}
				.fuli {
					padding: 24rpx 28rpx ;
					.fuli-box {
						margin: 24rpx 0 32rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						padding: 16rpx 28rpx;
						.box-list {
							padding: 20rpx  0 0;
							.list-item {
								margin: 0 32rpx 0 0;
								image {
									width: 100rpx;
									height: 100rpx;
								}
								text {
									padding: 22rpx 0 0;
									font-size: 24rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									color: #444444;
								}
							}
							.list-item:last-child {
								margin: 0;
							}
							
						}
						.box-title {
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							color: #333333;
						}
					}
					.title {
						text {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							color: #222222;
						}
						.title-right {
							text {
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
							}
							image {
								width: 28rpx;
								height: 28rpx;
							}
						}
						
					}
				}
			}
		}
		.top {
			padding: 20rpx 28rpx 24rpx;
			margin-bottom: 20rpx;
			background: #fff;
			.videos {
				width: 100%;
				overflow: auto;
				// white-space: nowrap;
			}
			.title {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 24rpx 0;
			}
			.more-btn {
				width: 100%;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
				background: #F5F5F5;
				border-radius: 12rpx;
				padding: 22rpx 0;
				text-align: center;
			}
			.more-text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.circle-item {
				// width: 100%;
				background: #F1F4F4;
				border-radius: 12rpx;
				padding: 26rpx 0 26rpx 36rpx;
				margin: 0 0 20rpx;
				.circle-img {
					width: 40rpx;
					height: 40rpx;
				}
				.circle-text {
					font-size: 28rpx;
					font-family: AppleColorEmoji;
					color: #666666;
				}
			}
		}
		.search {
			width: 572rpx;
			background: rgba(255,255,255,.3);
			border-radius: 32rpx;
			.u-search__content {
				background: rgba(255,255,255,.3)!important;
			}
			.u-search__content__input {
				background-color: unset !important;
			}
			.u-search__content__icon {
				background-color: unset !important;
				.u-icon__icon {
					color: #fff !important;
				}
			}
			input {
				background: rgba(255,255,255,.3)
			}
			
		}
		.search-right {
			// padding: 0 32rpx 0 0;
			.img {
				position: relative;
			}
			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}
			.add-show {
				position: absolute;
				right: 30rpx;
				top: 88rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
				padding: 42rpx 32rpx 0;
				.show-item {
					margin-bottom: 40rpx;
					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0;
					}
					text {
						white-space: nowrap;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						padding: 0 0 0 24rpx;
					}
				}
			}
		}
		.tabs {
			position: fixed;
			top: 144rpx;
			width: 100%;
			padding: 28rpx;
			background: #fff;
			z-index: 9;
			border-bottom: 1px solid #eee;
			.u-tabs__wrapper__nav__item {
				padding: 0 66rpx 0 0 !important;
			}
		}
		.list {
			background: #fff;
			min-height: 90vh;
			.title {
				font-size: 32rpx;
				font-family: SFPro, SFPro;
				font-weight: 500;
				color: #333333;
				padding-bottom: 20rpx;
			}
			.empty {
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #999999;
			}
			.empty-text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
				padding: 24rpx 0 40rpx;
			}
			.login-btn {
				width: 198rpx;
				height: 76rpx;
				background: #00B0B0;
				border-radius: 38rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.list1 {
			.list-title {
				width: 100%;
				background: #fff;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 32rpx 0 20rpx 28rpx;
			}
		}
	}

</style>