xiangqin/pages/index/index.vue

<template>
	<view class="index">
		<!-- <image src="../../static/bg.png" mode="" class="bg"></image> -->
		<view class="top">
			<image src="../../static/index/15@2x.png" mode=""></image>
		</view>
		<view class="home">
			<view class="swiperDom">
				<swiper :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in banner" :key="index">
						<view class="swiper-item">
							<image :src="item.show_image" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class=""
				style="border-radius: 20rpx;box-shadow: 0px 2px 12px 4px rgba(0,0,0,0.04);overflow: hidden;margin: 0 0 20rpx 0;width: 690rpx;">
				<u-notice-bar :text="notice.title" color="#777777" bgColor="#fff" url="/pages/auth/auth"></u-notice-bar>
			</view>
			<view class="list u-flex u-row-between u-warp">
				<view class="u-flex-col u-col-center" style="flex: 25%;" v-for="(item,index) in list"
					@click="toitem(item)" :key="index">
					<image :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="recommend">
				<view class="recommendImg">
					<image src="../../static/index/14@2x.png" mode=""></image>
				</view>
				<view class="recommendContent u-flex">
					<view class="recommendItem u-flex-col" v-for="(item,index) in member" :key="index"
						@click="torecommendinfo(item)">
						<image :src="item.headimg" mode=""></image>
						<view class="name">
							<text>{{item.nickname}}</text>
							<image src="../../static/index/1@2x.png" mode="" v-show="item.sex==2"></image>
							<image src="../../static/index/2@2x.png" mode="" v-show="item.sex==1"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="videoModule">
				<view class="videoTitle u-flex u-row-between">
					<image src="../../static/index/12@2x.png" mode=""></image>
					<view class="lookMore u-flex" @click="tolist">
						<text>查看更多</text>
						<u-icon name="arrow-right" color="#666666"></u-icon>
					</view>
				</view>
				<view class="videoContent u-flex u-row-between">
					<view class="videoItem u-flex-col" v-for="(item,index) in video" :key="index"
						@click="toVideoInfo(item)">
						<view class="time">{{item.video_time}}</view>
						<image :src="item.show_image" mode=""></image>
						<view class="name">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="videoModule">
				<view class="videoTitle u-flex u-row-between">
					<image src="../../static/index/13@2x.png" mode=""></image>
					<view class="lookMore u-flex" @click="tomore">
						<text>查看更多</text>
						<u-icon name="arrow-right" color="#666666"></u-icon>
					</view>
				</view>
				<view class="talkList">
					<view class="talkItem u-flex u-row-between" v-for="(item,index) in article" :key="index"
						@click="toinfo(item)">
						<image :src="item.show_image" mode=""></image>
						<view class="talkRight">
							<view class="talkTitle">
								{{item.title}}
							</view>
							<view class="talkInfo">
								{{item.subtitle}}

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				banner: [],
				notice: {},
				video: [],
				member: [],
				article: [],
				list: [{
						img: '/static/index/4@2x.png',
						name: '注册会员',
						path: '/pages/index/registerVip',
						isWhite: true
					},
					{
						img: '/static/index/5@2x.png',
						name: '认证会员',
						path: '/pages/index/renzhengVip',
						isWhite: true
					},
					{
						img: '/static/index/6@2x.png',
						name: '智能匹配',
						path: '/pages/index/pipei',
						isWhite: false
					},
					{
						img: '/static/index/7@2x.png',
						name: '推荐分享',
						path: '/pages/index/recommend',
						isWhite: true
					},
					{
						img: '/static/index/9@2x.png',
						name: '消息中心',
						path: '/pages/index/message',
						isWhite: false
					},
					{
						img: '/static/index/8@2x.png',
						name: '我要举报',
						path: '/pages/index/indexjubao',
						isWhite: false
					},
					{
						img: '/static/index/10@2x.png',
						name: '入会攻略',
						path: '/pages/index/gonglue',
						isWhite: true
					},
					{
						img: '/static/index/11@2x.png',
						name: '情感咨询',
						path: '/pages/index/zixun',
						isWhite: true
					}
				]
			}
		},
		onPullDownRefresh() {
			this.getInfo()
			this.getNotice()
			this.getBanner()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			this.getNotice()
			this.getBanner()
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				uni.reLaunch({
					url: '../profile/login'
				})
			} else {
				this.getInfo()
			}
		},
		methods: {
			getBanner() {
				uni.$u.http.post('/api/index/banner').then(res => {
					if (res.code == 1) {
						this.banner = res.data
					}
				})
			},
			getInfo() {
				uni.$u.http.post('/api/user/userinfo').then(res => {
					if (res.code == 1) {
						this.info = res.data
						uni.setStorageSync('userId', res.data.id)
						uni.setStorageSync('userInfo', JSON.stringify(res.data))
					}
				})
			},
			torecommendinfo(item) {
				uni.navigateTo({
					url: '../profile/otherPage?id=' + item.id
				})
			},
			toVideoInfo(item) {
				uni.navigateTo({
					url: './videoInfo?item=' + JSON.stringify(item)
				})
			},
			getNotice() {
				uni.$u.http.post('/api/Index/notice').then(res => {
					this.notice = res.data.notice
					this.video = res.data.video
					this.member = res.data.member
					this.article = res.data.article
				})
			},
			toinfo(item) {
				uni.navigateTo({
					url: './talkInfo?id=' + item.id
				})
			},
			tomore() {
				uni.navigateTo({
					url: './talkLove'
				})
			},
			tolist() {
				uni.navigateTo({
					url: './videoList'
				})
			},
			toitem(item) {

				if (item.isWhite) {
					uni.navigateTo({
						url: item.path
					})
				} else {
					if (this.info.vip_level == 0) {
						this.$u.toast('您暂未认证')
						return
					}
					if (this.info.vip_level == 2) {
						this.$u.toast('经用户反馈，您账户存在违规行为，暂不支持使用该功能')
						return
					}
					if (this.info.vip_level == 3) {
						this.$u.toast('您的账户已注销，暂不支持使用该功能')
						return
					}
					uni.navigateTo({
						url: item.path
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.home {
		padding: 0 30rpx 20rpx;
	}

	.videoModule {
		width: 690rpx;
		margin: 28rpx 0;

		.talkList {
			box-sizing: border-box;
			margin: 18rpx auto 0;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			padding: 0 20rpx;

			.talkItem {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #F3F3F3;

				image {
					width: 220rpx;
					height: 148rpx;
					border-radius: 16rpx;
				}

				.talkRight {
					width: 402rpx;
					margin-left: 20rpx;

					.talkTitle {
						color: #222222;
						font-size: 32rpx;
					}

					.talkInfo {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-top: 10rpx;
						color: #666666;
						font-size: 24rpx;
					}
				}

			}
		}

		.videoTitle {
			width: 690rpx;

			image {
				width: 134rpx;
				height: 50rpx;
			}

			.lookMore {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.videoContent {
			margin-top: 22rpx;

			.videoItem {
				position: relative;
				width: 220rpx;
				// height: 280rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				image {
					border-radius: 16rpx;
					width: 220rpx;
					height: 180rpx;
				}

				.name {
					height: 92rpx;
					box-sizing: border-box;
					width: 220rpx;
					padding: 10rpx 14rpx 18rpx 14rpx;
					text-align: left;
					font-size: 24rpx;
					color: #222222;
					font-weight: 400;

				}

				.time {
					position: absolute;
					top: 140rpx;
					right: 12rpx;
					color: #fff;
					width: 64rpx;
					height: 28rpx;
					line-height: 28rpx;
					text-align: center;
					font-size: 20rpx;
					background: rgba(0, 0, 0, 0.4000);
					border-radius: 16rpx;
					z-index: 1;
				}
			}
		}
	}

	.recommend {
		width: 690rpx;
		margin: 28rpx 0;

		.recommendImg {
			margin-bottom: 22rpx;

			image {
				width: 134rpx;
				height: 50rpx;
			}
		}

		.recommendContent {
			flex-wrap: wrap;

			.recommendItem {
				margin-right: 15rpx;
				width: 220rpx;
				height: 304rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				image {
					border-radius: 16rpx;
					width: 220rpx;
					height: 240rpx;
				}

				.name {
					width: 100%;
					padding-left: 50rpx;
					text-align: left;
					line-height: 64rpx;
					font-size: 26rpx;
					color: #222222;
					font-weight: 600;
					margin-right: 8rpx;

					image {
						margin-bottom: 7rpx;
						margin-left: 8rpx;
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
					}
				}

			}

			.recommendItem:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.list {
		margin: 0 0 28rpx;
		width: 690rpx;
		height: 372rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #000000;

		image {
			margin-bottom: 16rpx;
			width: 80rpx;
			height: 80rpx;
		}
	}

	.swiper-item {
		border-radius: 28rpx;
		overflow: hidden;
		width: 690rpx;
		height: 280rpx;

		image {
			width: 690rpx;
			height: 280rpx;
		}
	}

	.swiperDom {
		margin: 40rpx 0 20rpx;
	}

	page {
		// background-color: #F6F2FD;
	}

	.top {
		padding-top: 44rpx;
		padding-left: 30rpx;

		image {
			width: 102rpx;
			height: 60rpx;
		}
	}
</style>