hire-wx-houxuanren/pages/mine/mine.vue

<template>
	<view class="mine-page">
		<image src="../../static/images/mine-bg.png" class="mine-bg" mode=""></image>
		<u-navbar :fixed="false" bgColor='rgba(0,0,0,0)' placeholder :safeAreaInsetTop="true">
			<view class="u-nav-slot" slot="left">
				<view class="mine-navbar u-flex-col">
					<text>我的</text>
					<text style="margin-top:-6rpx;"></text>
				</view>
			</view>
		</u-navbar>
		<view class="mine-user u-flex u-row-between">
			<image :src="userinfo.group_info.avatar" class="user-head" mode=""></image>
			<view class="user-center u-flex-col">
				<view class="u-flex " style="margin-bottom: 20rpx;">
					<text style="margin-right: 18rpx;">{{userinfo.group_info.name || ''}}</text>
					<u-icon name="edit-pen-fill" color="#2979ff" size="22"></u-icon>
				</view>
				<view class="introduce">
					<text>{{resume_Detail.birthday_text}}岁</text>
					<text style="margin: 0 11rpx;">|</text>
					<text>{{resume_Detail.education_name}}</text>
					<text style="margin: 0 11rpx;">|</text>
					<text>{{resume_Detail.experience }}年</text>
				</view>
			</view>
			<!-- <image class="mine-user-img" src="../../static/images/mine-qiehuan.png" mode=""></image> -->
			<image class="mine-user-img" src="../../static/images/qiehuan.png" mode="">
			</image>
		</view>
		<view class="count-tabs u-flex u-row-between">
			<view class="tabs-item u-flex-col u-col-center" @click="toshoucang">
				<text>{{userinfo.group_info.collect_count || 0}}</text>
				<text>我的收藏</text>
			</view>
			<view class="tabs-item u-flex-col u-col-center" @click="totoudi">
				<text>{{userinfo.group_info.order_count || 0}}</text>
				<text>我的投递</text>
			</view>
			<view class="tabs-item u-flex-col u-col-center">
				<text>{{userinfo.group_info.interview_count || 0}}</text>
				<text>我的面试</text>
			</view>
			<view class="tabs-item u-flex-col u-col-center" @click="tolook">
				<text>{{userinfo.group_info.view_count || 0}}</text>
				<text>谁看过我</text>
			</view>
		</view>
		<view class="other-list">
			<view class="other-header">
				常用功能
			</view>
			<view class="u-flex u-flex-wrap">
				<view class="other-item u-flex-col u-col-center">
					<image src="../../static/images/jianli2.png" style="width: 72rpx;height: 72rpx;" mode=""
						@click="tojianli"></image>
					<text>在线简历</text>
				</view>
				<view class="other-item u-flex-col u-col-center">
					<image src="../../static/images/jianli.png" style="width: 72rpx;height: 72rpx;" mode=""></image>
					<text>简历附件</text>
				</view>
				<view class="other-item u-flex-col u-col-center" @click="toapply">
					<image src="../../static/images/qiuzhi.png" style="width: 72rpx;height: 72rpx;" mode=""></image>
					<text>求职意向</text>
				</view>
				<view class="other-item u-flex-col u-col-center" @click="yinsi">
					<image src="../../static/images/yinsi.png" style="width: 72rpx;height: 72rpx;" mode=""></image>
					<text>求职隐私</text>
				</view>
			</view>
		</view>
		<view class="yongjin-box">
			<view class="yongjin-top u-flex u-row-between" @click="toyongjin">
				<text class="text">我的佣金</text>
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
			<view class="yongjin-down u-flex u-row-between">
				<view class="down-item u-flex-col u-col-center u-row-center">
					<text>{{userinfo.group_info.commission_sum || 0}}</text>
					<text>当前余额</text>
				</view>
				<view class="down-item u-flex-col u-col-center u-row-center" @click="tomingxi('order')">
					<text>{{userinfo.group_info.commission_order || 0}}</text>
					<text>订单佣金</text>
				</view>
				<view class="down-item u-flex-col u-col-center u-row-center" @click="tomingxi('invite')">
					<text>{{userinfo.group_info.commission_invite || 0}}</text>
					<text>邀请佣金</text>
				</view>
				<view class="down-item u-flex-col u-col-center u-row-center" @click="tobank">
					<text>{{userinfo.group_info.bank_count || 0}}</text>
					<text>银行卡</text>
				</view>
			</view>
		</view>
		<view class="other-list">
			<view class="other-header">
				其他功能
			</view>
			<view class="u-flex u-flex-wrap">
				<view class="other-item u-flex-col u-col-center" style="position: relative;" @click="">
					<image src="../../static/images/mine-other3.png" mode=""></image>
					<image style="position: absolute;width: 72rpx;height: 28rpx;left: 120rpx;"
						src="../../static/images/yaoqing.png" mode=""></image>
					<text>邀请好友</text>
				</view>
				<view class="other-item u-flex-col u-col-center" @click="toshezhi">
					<image src="../../static/images/shezhi.png" mode=""></image>
					<text>账号设置</text>
				</view>
				<view class="other-item u-flex-col u-col-center" style="position: relative;" @click="torenzheng">
					<image src="../../static/images/renzheng.png" mode=""></image>
					<image style="position: absolute;width: 72rpx;height: 28rpx;left: 120rpx;"
						src="../../static/images/weirenzheng.png" mode=""></image>
					<text>学生认证</text>
				</view>
				<view class="other-item u-flex-col u-col-center" @click="touserinfo">
					<image src="../../static/images/mine-other4.png" mode=""></image>
					<text>我的主页</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		index,
		collect_get_list,
		resumeDetail
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				page: 1,
				id: "",
				resume_Detail:{},
				userinfo: {
					group_info: {},
					statistic_data: {}
				},
			}
		},
		onLoad() {
			this.collect_get_list()
			this.resumeDetail()
		},
		onShow() {
			this.getuser()
		},
		methods: {
			resumeDetail() {
				resumeDetail().then(res => {
					if(res.code==1){
						this.resume_Detail = res.data
					}
				})
			},
			tobank() {
				uni.navigateTo({
					url: "/pagesD/bank-card"
				})
			},
			tomingxi(type) {
				uni.navigateTo({
					url: "/pagesD/mingxi?source_type=" + type
				})
			},
			toyongjin() {
				uni.navigateTo({
					url: "/pagesD/yongjin"
				})
			},
			yinsi() {
				uni.navigateTo({
					url: "/pagesD/yinsi"
				})
			},
			//收藏列表
			collect_get_list() {
				collect_get_list({
					page: this.page
				}).then(res => {
					this.total = res.data.total
				})
			},
			getuser() {
				index().then(res => {
					this.userinfo = res.data
					this.id = res.data.id
				})
			},
			touserinfo() {
				uni.navigateTo({
					url: "/pagesD/userinfo"
				})
			},
			toapply() {
				uni.navigateTo({
					url: "/pagesD/apply1"
				})
			},
			toshoucang() {
				uni.navigateTo({
					url: "/pagesD/my-shoucang?id=" + this.id
				})
			},
			tojianli() {
				uni.navigateTo({
					url: "/pagesD/resume"
				})
			},
			tofapiao() {
				uni.navigateTo({
					url: "/pagesD/my-fapiao"
				})
			},
			tozixunlist() {
				uni.navigateTo({
					url: "/pagesD/my-zixun"
				})
			},
			toad() {
				uni.navigateTo({
					url: "/pagesD/ad-list"
				})
			},
			tozhaopin() {
				uni.navigateTo({
					url: "/pagesD/xiaoqi"
				})
			},
			tojieshou() {
				uni.navigateTo({
					url: "/pagesD/list-jieshou"
				})
			},
			tovip() {
				uni.navigateTo({
					url: "/pagesD/vip"
				})
			},
			todikou() {
				uni.navigateTo({
					url: "/pagesD/dikou"
				})
			},
			tojubao() {
				uni.navigateTo({
					url: "/pagesD/jubao-list"
				})
			},

			tozixun() {
				uni.navigateTo({
					url: "/pagesD/zixun-list"
				})
			},
			tolook() {
				uni.navigateTo({
					url: '/pagesD/look'
				})
			},
			toshezhi() {
				uni.navigateTo({
					url: "/pagesD/shezhi"
				})
			},
			totoudi() {
				uni.navigateTo({
					url: "/pagesD/my-order"
				})
			},
			torenzheng() {
				uni.navigateTo({
					url: "/pagesD/renzheng"
				})
			}

		}
	}
</script>

<style lang="scss">
	.mine-page {
		position: relative;


		.introduce {
			text {
				height: 36rpx;
				font-size: 26rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #555555;
				line-height: 30rpx;
			}
		}

		.yongjin-box {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;

			.yongjin-down {
				height: 142rpx;

				.down-item {
					flex: 1;

					text:first-child {
						font-size: 32rpx;
						font-family: JDZhengHT-Regular, JDZhengHT;
						font-weight: 400;
						color: #333333;
						margin-bottom: 16rpx;
					}

					text:last-child {
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}

			.yongjin-top {
				margin: 0 20rpx;
				height: 80rpx;
				border-bottom: 2rpx solid #F3F3F3;

				.text {
					font-size: 26rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
			}
		}

		.other-list {
			margin: 20rpx auto;
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding-bottom: 1rpx;

			.other-item {
				width: 25%;
				margin-bottom: 32rpx;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.other-header {
				padding: 24rpx 20rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				margin-bottom: 16rpx;
			}
		}

		.mine-menu {
			margin: 20rpx auto;
			width: 702rpx;
			height: 156rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.xian {
				height: 68rpx;
				border: 2rpx solid #F3F3F3;
			}

			.menu-item {
				padding: 0 40rpx;
				flex: 1;

				.text1 {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					margin-bottom: 12rpx;
				}

				.text2 {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
					margin-right: 8rpx;
				}

				.menu-img {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.mine-tabs {
			margin: 20rpx auto;
			width: 702rpx;
			height: 160rpx;
			position: relative;
			z-index: 1;

			.tab-item {
				flex: 1;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 12rpx;
				}

				text {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}

			.tab-right {
				width: 150rpx;
				height: 160rpx;

				// box-shadow: -16rpx 0rpx 24rpx -14rpx rgba(0,0,0,0.1);
				image {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 12rpx;
				}

				text {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}

			.tabs-bg {
				width: 702rpx;
				height: 160rpx;
				position: absolute;
				z-index: -1;
				top: 0;
				left: 0;
			}
		}

		.mine-huiyuan {
			height: 124rpx;
			width: 702rpx;
			position: relative;
			z-index: 1;
			padding: 0 28rpx;
			margin: 8rpx auto;

			text {
				width: 148rpx;
				line-height: 56rpx;
				background: #FFF4DD;
				border-radius: 28rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #3F3F59;
			}

			.huiyuan-bg {
				position: absolute;
				top: 0;
				left: 0;
				height: 124rpx;
				width: 702rpx;
				z-index: -1;
			}
		}

		.count-tabs {
			padding: 20rpx 0;

			.tabs-item {
				flex: 1;

				text:first-child {
					font-size: 44rpx;
					font-family: JDZhengHT-Regular, JDZhengHT;
					font-weight: 400;
					color: #222222;
					margin-bottom: 18rpx;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #555555;
				}
			}
		}

		.mine-user {
			padding: 20rpx 32rpx;

			.mine-user-img {
				width: 52rpx;
				height: 52rpx;
				margin-left: 28rpx;
			}

			.user-head {
				width: 104rpx;
				height: 104rpx;
				border-radius: 100rpx;
			}

			.user-center {
				flex: 1;
				margin: 0 0 0 20rpx;
			}
		}

		.mine-navbar {
			flex: 1;
			padding: 0 32rpx;

			text:first-child {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}

			text:last-child {
				width: 76rpx;
				height: 12rpx;
				background: linear-gradient(270deg, #208EFF 0%, rgba(28, 159, 227, 0) 100%);
				margin-top: -20rpx;
				border-radius: 100rpx;
			}
		}

		.mine-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 430rpx;
			z-index: -1;
		}
	}

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