blindDate/pages/index/index.vue

<template>
	<view>
		<!-- 头部搜索框 -->
		<view class="head-bar">
			<view class="lf-flex search" @click="$url('/pages/userList/userList?name=搜索')">
				<text class="lf-iconfont icon-linedesign-12 lf-font-30 lf-m-l-20"></text>
				<view class="lf-m-l-10 lf-font-24">搜索</view>
			</view>
			<!-- <view class="botton" @click="$url('/pages/signIn/signIn')">签到</view> -->
		</view>
		<!-- 上墙部分 -->
		<view class="up-the-wall">
			<view class="lf-row-between">
				<view class="lf-font-32 lf-color-black">最新上墙</view>
				<!-- <view class="lf-color-999" @click="$url('/pages/wallMember/wallMember')">
					<text class="lf-font-28">查看全部</text>
					<text class="lf-iconfont icon-xiangyou"></text>
				</view> -->
			</view>
			<scroll-view class="scroll-bar" :scroll-x="true">
				<view class="lf-flex">
					<!-- <view class="user-item" @click="$url('/pages/upTheWall/upTheWall')">
						<lf-image class="add-icon" src="../../static/images/add_icon.png"></lf-image>
						<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">我要上墙</view>
					</view> -->
					<view class="user-item" v-for="(item, index) in members_wall" :key="item.id" @click="$url('/pages/my/memberDetails?id='+ item.number)">
						<image class="avatar" :src="item.user.avatar"></image>
						<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">编号{{ item.number }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<self-line />
		<!-- 推荐单身 -->
		<view>
			<view class="lf-row-between lf-p-30 lf-p-32 lf-p-b-20">
				<view class="lf-font-32 lf-color-black">推荐单身</view>
				<view class="lf-color-999" @click="$url('/pages/userList/userList?name=最新')">
					<text class="lf-font-28">最新</text>
					<text class="lf-iconfont icon-xiangyou"></text>
				</view>
			</view>
			<lf-user-list :list='members'></lf-user-list>
		</view>
		<!-- 加载 -->
		<view class="loading-more">
			<text :class="{'loading-more-text': loading_class}">{{ loading_text }}</text>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
	</view>
</template>

<script>
	import lfUserList from '@/components/lf-userList/lf-userList.vue';
	export default {
		components: { lfUserList },
		data() {
			return {
				members_wall: [],
				members: [],
				page: 1,
				page_size: 10,
				isPage: true,
				loading_text: '正在加载中',
				loading_class: true
			}
		},
		onLoad(){
			// #ifdef H5
			this.href_str = JSON.stringify(location.href);
			let options = this.strToObj();
			console.log("options", options)
			if(options.code){
				this.login(options.code)
			}else if(this.$isRight(uni.getStorageSync('user_info'))){
				this.getMembersWall();
				this.getMembers();
			}
			// #endif
		},
		methods: {
			strToObj(){
				let val = this.href_str;
				let obj = {};
				if(!val) return obj;
				if(val.indexOf('?') < 0) return obj;
				let indexA = val.indexOf('?') + 1;
				let str = val.substr(indexA);
				str = str.substr(0, str.length - 1);
				let indexB = str.indexOf('#');
				if(indexB >= 0){
					str = str.substr(0, indexB);
				}
				let arr = str.split('&');
				arr.map(item => {
				 let a = item.split('=');
				 obj[a[0]] = a[1];
				});
				return obj;
			},
			login(code){
				this.$http(this.API.API_OFFICIAL_LOGIN, {
					code: code,
					scopes: 'snsapi_userinfo'
				}).then(res => {
					console.log(res)
					uni.setStorageSync('user_info', res?.data?.user);
					this.getMembersWall();
					this.getMembers();
				}).catch(err => {
					console.log(err)
				})
			},
			getMembers(){
				this.$http(this.API.API_MEMBERS_ALL, {
					page: this.page,
					pagesize: this.page_size
				}).then(res => {
					let members = res.data.members.data || [];
					let isPage = this.$isRight(res.data.members.next_page_url);
					this.isPage = isPage;
					if(!isPage){
						this.loading_class = false;
						this.loading_text = '已加载全部数据~';
					}
					this.members = members;
				})
			},
			getMembersWall(){
				this.$http(this.API.API_MEMBERS_WALL, {
					page: 1,
					pagesize: 12
				}).then(res => {
					this.members_wall = res.data.members_wall.data || [];
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-bar{
		width: 750rpx;
		height: max-content;
		padding: 21rpx 32rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		.search{
			// width: 530rpx;
			width: 100%;
			height: 62rpx;
			background: #F7F7F7;
			border-radius: 32rpx;
			color: #999999;
		}
		.botton{
			width: 140rpx;
			height: 62rpx;
			background: #F7F7F7;
			border-radius: 32rpx;
			text-align: center;
			line-height: 62rpx;
			color: #222222;
		}
	}
	
	.up-the-wall{
		width: 750rpx;
		height: max-content;
		padding: 21rpx 32rpx 0;
		.scroll-bar{
			width: 100%;
			height: 164rpx;
			padding: 30rpx 0;
			.user-item{
				width: 136rpx;
				margin-right: 40rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				&:last-child{
					margin-right: 0rpx;
				}
			}
			.add-icon{
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}
			.avatar{
				width: 110rpx;
				height: 110rpx;
				border: 5rpx solid #E21196;
				border-radius: 50%;
				box-sizing: border-box;
			}
		}
	}
</style>