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 in 6" :key="item">
						<image class="avatar" src="https://picsum.photos/200"></image>
						<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">编号 73949</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></lf-user-list>
		</view>
		<!-- 加载 -->
		<view class="loading-more">
			<text class="loading-more-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 {
				
			}
		},
		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)
			}
			// #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);
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</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>