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="$url('/pages/my/editInfo')">
							<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" @click="$url('/pages/my/getRedLine')">
				<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 }}条
				</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="$url(item.path)">
				<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'},
					{name: '实名认证',icon:'email',path: '/pages/my/authentication',pic: '../../static/my/authen.png'},
					// {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(){
			this.getData();
		},
		methods: {
			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;
				})
			}
		}
	}
</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>