blindDate/pages/my/index.vue

<template>
	<view class="lf-w-100 lf-h-100">
		<view class="head-top">
			<view class="lf-row-between pic-top">
				<view class="lf-row-round">
					<view>
						<!-- <lf-image style="width: 160rpx;height: 160rpx;" src="../../static/logo.png"></lf-image> -->
						<lf-image :src="user.avatar" mode="widthFix" class="head-pic"></lf-image>
					</view>
					<view class="head-left">
						<view class="head-name" @click="clickEnter">
							<text>{{ user.number_nickname || '您未登录，点此登录' }}</text>
							<u-icon name="arrow-right lf-m-l-20"></u-icon>
						</view>
						<view class="head-text">{{ user.overall_state_text || '登录后以便获取更好的服务' }}</view>
					</view>
				</view>
				<!-- <view class="lf-bg-white span-btn1" @click="$url('/pages/my/bindPhone')">
					绑定手机号
				</view> -->
			</view>
			<view class="adv">
				<view class="lf-row-between">
					<view>
						<view class="logo-my">
							<!-- <text class="lf-iconfont icon-dingzhi" style="font-size: 60rpx;color: white;"></text> -->
							<image src="../../static/images/read_line.png" mode="aspectFill" style="width: 60rpx;height: 60rpx;"></image>
						</view>
					</view>
					<view class="adv-content">
						<view class="lf-color-222 lf-font-32 lf-m-b-15">
							红线数
						</view>
						<view class="lf-color-777 lf-font-26">促成您和心仪对象线下见面</view>
					</view>
				</view>
				<view class="lf-color-primary lf-font-32">
					{{ user.red_rope || 0 }}条
				</view>
			</view>
			<!-- <view class="lf-row-between" style="height: 98rpx;padding: 0 32rpx;">
				<view class="lf-row-round lf-flex-column" @click="showRedthread()">
					<view class="lf-font-32 lf-color-white">0</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">红线</view>
				</view>
				<view class="lf-row-round lf-flex-column" @click="showPeachblossom()">
					<view class="lf-font-32 lf-color-white">5</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">桃花</view>
				</view>
				<view class="lf-row-round lf-flex-column" @click="$url('/pages/my/seeMe')">
					<view class="lf-font-32 lf-color-white">0</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">谁看过我</view>
				</view>
				<view class="lf-row-round lf-flex-column" @click="$url('/pages/my/likeMe')">
					<view class="lf-font-32 lf-color-white">0</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">喜欢我的</view>
				</view>
				<view class="lf-row-round lf-flex-column">
					<view class="lf-font-32 lf-color-white">70%</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">资料完整</view>
				</view>
			</view> -->
			<!-- <view class="head-top-wrap lf-w-100 lf-h-100">
				<view class="lf-w-100 tips-wrap">
					<view class="tips">
						<view class="lf-row-round lf-w-100 lf-h-100 lf-p-b-12">
							<view class="lf-color-white lf-font-28">VIP会员｜拥有专属权益</view>
							<view class="lf-bg-white span-btn" @click="$url('/pages/my/memberVip')">
								了解详情
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		
		<view class="classify">
			<view class="card" v-for="(item,index) in list" :key="index" @click="clickTab(item)">
				<view class="lf-row-center" style="align-content: center;">
					<!-- <u-icon class="classify-icon" :name="item.icon"></u-icon> -->
					<image class="classify-icon" :src="item.pic" mode="aspectFill"></image>
				</view>
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script scoped="scoped">
	export default {
		data() {
			return {
				list: [
					{name: '我的红娘',icon:'github-circle-fill',path: '/pages/my/exclusiveMatch',pic: '../../static/my/red.png',check: true},
					{name: '实名认证',icon:'email',path: '/pages/my/authentication',pic: '../../static/my/authen.png',check: true},
					// {name: '我喜欢的',icon:'qzone',path: '/pages/my/collect',pic: '../../static/my/collect.png'},
					// {name: '我的动态',icon:'moments',path:'/pages/my/qzone',pic: '../../static/my/qzone.png'},
					// {name: '福利中心',icon:'red-packet',path:'/pages/my/welfare',pic: '../../static/my/welhare.png'},
					{name: '公众号',icon:'google-circle-fill',path:'/pages/my/officialAccount',pic: '../../static/my/public.png'},
					{name: '联系客服',icon:'kefu-ermai',path: '/pages/my/service',pic: '../../static/my/service.png'},
					// {name: '设置',icon:'setting',path: '/pages/my/setting',pic: '../../static/my/setting.png'}
				],
				user: {}
			}
		},
		onLoad(){
			// #ifdef H5
			this.href_str = JSON.stringify(location.href);
			let options = this.strToObj();
			if(options.code){
				this.login(options.code)
			}else{
				let user_info = uni.getStorageSync('user_info');
				if(this.$isRight(user_info) && this.$isRight(user_info?.member?.weixin)){
					this.getData();
				}
			}
			// #endif
		},
		methods: {
			clickEnter(){
				if(this.$isRight(this.user)){
					this.$url('/pages/my/editInfo');
				}else{
					this.$url('/pages/login/index');
				}
			},
			clickTab(item){
				if(item.check && !this.$isRight(this.user)){
					this.$url('/pages/login/index');
				}else{
					this.$url(item.path);
				}
			},
			showRedthread() {
				uni.showModal({
				    title: '红线说明',
				    content: '红线可以用来联系其他会员，对方不接受则24小时后退还红线',
					showCancel: false,
					cancelText: '我知道了',
					confirmColor: '#E21196',
				    success: res => {
				        if (res.confirm) {
				            console.log('用户点击确定');
							this.$url('/pages/my/getRedLine');
				        }
				    }
				});
			},
			showPeachblossom() {
				uni.showModal({
				    title: '桃花说明',
				    content: '桃花可以用来发布动态、评论等，签到可以获得桃花',
					showCancel: false,
					cancelText: '我知道了',
					confirmColor: '#E21196',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        }
				    }
				});
			},
			getData(){
				this.$http(this.API.API_UCENTER).then(res => {
					this.user = res.data.user;
				})
			},
			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 => {
					let user_info = res?.data?.user;
					uni.setStorageSync('user_info', user_info);
					var url = window.location.href; //获取当前页面的url
					if(url.indexOf("?")!=-1){ //判断是否存在参数
						url = url.replace(/(\?|#)[^'"]*/, ''); //去除参数
						window.history.pushState({}, 0, url);
					}
					if(user_info && this.$isRight(user_info?.member?.weixin)){
						this.getData();
					}else{
						this.$url('/pages/my/addWechatNumber'); // 如果微信号为空，就跳转让用户添加
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style lang="scss">
	.logo-my {
		width: 135rpx;
		height: 135rpx;
		background: linear-gradient(180deg, #FE3EA5 0%, #FE7251 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
	}

	.head-top {
		width: 100%;
		//隐藏部分
		// height: 480rpx;
		height: 320rpx;
		position: relative;
		z-index: 9;
		/* background-color: red; */
	}
	
	.head-top-wrap {
		width: 100%;
		height: 180rpx;
		/* z-index: -1; */
		overflow: hidden;
		position: relative;
	}

	.head-top::after {
		content: '';
		width: 184%; 
		// height: 440rpx;
		height: 350rpx;
		position: absolute;
		left: -312rpx;
		top: 0;
		z-index: -1;
		// border-radius: 0 586px 586px/0 0 200rpx 200rpx;
		border-radius: 0 0 50% 50%;
		background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
	}
	
	.tips-wrap {
		overflow: hidden;
		height: 660rpx;
		border-radius: 0 586px 586px/0 0 200rpx 200rpx;
		position: absolute;
		top: -494rpx;
	}
	
	.tips {
		width: 686rpx;
		height: 125rpx;
		background-color: #314177;
		border-radius: 20rpx;
		position: relative;
		bottom: -536rpx;
		left: 0;
		margin: 0 auto;
	}
	
	.span-btn {
		border-radius: 25rpx;
		width: 149rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #314177;
	}
	
	.head-pic {
		width: 160rpx;
		height: 160rpx;
		border: 5rpx solid #FFFFFF;
		border-radius: 50%;
	}
	
	.adv-pic {
		width: 135rpx;
		height: 135rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}
	
	.head-text {
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 400;
		line-height: 40rpx;
	}
	
	.pic-top {
		padding: 48rpx 32rpx 40rpx 48rpx;
	}
	
	.span-btn1 {
		border-radius: 25rpx;
		width: 149rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #E21196;
		font-weight: 400;
		line-height: 33rpx;
	}
	
	.head-name {
		font-weight: 500;
		color: #FFFFFF;
		line-height: 45rpx;
		letter-spacing: 1rpx;
		font-size: 32rpx;
	}
	
	.head-left {
		padding: 20rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.adv {
		width: 686rpx;
		height: 195rpx;
		background-color: white;
		border-radius: 20rpx;
		margin: -10rpx auto;
		display: flex;
		// padding: 0 0 0 30rpx;
		justify-content: space-around;
		align-items: center;
	}
	
	.adv-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.classify {
		width: 686rpx;
		display: flex;
		background-color: white;
		border-radius: 20rpx;
		margin: 0 auto;
		flex-wrap: wrap;
		padding: 38rpx 30rpx;
		margin-top: 170rpx;
	}
	.card {
		width: 116rpx;
		height: 116rpx;
		text-align: center;
		position: relative;
		overflow: hidden;
		margin-right: 54rpx;
		// margin-bottom: 68rpx;
		&:nth-child(4n) {
			margin-right: 0;
		}
		&:nth-child(n + 5) {
			margin-top: 68rpx;
		}
	}
	.classify-icon {
		height: 48rpx;
		width: 45rpx;
		font-size: 48rpx;
		margin-bottom: 22rpx;
	}
</style>