exam_mp/pages/user/index.vue

<template>
	<Container
		title="我的"
		:scrollStyle="{
			padding: 0
		}"
		:showBack="false"
		bgColor="#f8f8f8"
	>
		<template #bg>
			<image src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/bHbLzGDSB07Gc0tqCVCI3NLUx4sbUU4KHKSolvBq.png" mode="scaleToFill" class="bg" />
		</template>
		<view>
			<view class="user_box">
				<view class="box_left">
					<navigator url="/pages/user/settings">
						<image class="user_image" :src="userInfo.userpic"></image>
					</navigator>
				</view>
				<view class="box_center">
					<view class="user_name" v-if="is_login">{{ userInfo.username }}</view>
					<navigator class="user_name" url="/pages/login/index" v-if="!is_login">请登录</navigator>
					<view class="user_info_vip" v-if="userInfo.vip_info != null">
						<image
							class="user_info_vip_icon"
							src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/g9ot7hsUGLWA87qyEe1wWRf7agCv911K2bqOHRiX.png"
						></image>
						<navigator class="navigator_item_banner" url="/pages/recharge/index">
							<view class="user_info_vip_type" v-if="userInfo.vip_info != null && userInfo.vip_info.vip_type == 1">月卡VIP</view>
							<view class="user_info_vip_type" v-if="userInfo.vip_info != null && userInfo.vip_info.vip_type == 2">年卡VIP</view>
							<view class="user_info_vip_type" v-if="userInfo.vip_info != null && userInfo.vip_info.vip_type == 3">季卡VIP</view>
							<view class="user_info_vip_type" v-if="userInfo.vip_info != null && userInfo.vip_info.vip_type == 4">SVIP</view>
						</navigator>
					</view>
					<navigator class="navigator_item_banner" url="/pages/recharge/index">
						<view class="user_info" v-if="userInfo.vip_info != null">有效期至：{{ userInfo.vip_info.vip_end_time }}</view>
					</navigator>
				</view>
				<view class="box_right">
					<navigator url="/pages/user/settings" class="setting_page" v-if="is_login">
						<uni-icons type="gear" size="30"></uni-icons>
					</navigator>
				</view>
			</view>
			<view class="page_content">
				<view class="navigator_list">
					<view class="navigator_list_vip" v-if="vip_info == null || (vip_info != null && vip_info.status == '2')">
						<navigator class="navigator_item_banner" url="/pages/recharge/index">
							<view class="navigator_title_vip_banner">
								<image
									class="vip-banner-image"
									src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/vWGL312rGs2zmtaUqQOmzG8YVgdLSmxV8NaUvcQR.png"
									mode="aspectFill"
								></image>
							</view>
						</navigator>
					</view>
					<view class="navigator_list_other">
						<navigator class="navigator_item_one" url="/pages/order/index">
							<view class="navigator_title">订单记录</view>
							<view class="navigator_title_ico"><uni-icons type="right" size="20"></uni-icons></view>
						</navigator>
						<navigator class="navigator_item_two" url="/pages/user/share">
							<view class="navigator_title">分享有礼</view>
							<view class="navigator_title_ico"><uni-icons type="right" size="20"></uni-icons></view>
						</navigator>
						<navigator class="navigator_item_three" url="/pages/user/invited">
							<view class="navigator_title_three">邀请有礼</view>
							<view class="navigator_title_ico"><uni-icons type="right" size="20"></uni-icons></view>
						</navigator>
					</view>
				</view>
				<view class="packet_content" v-if="show_packet">
					<view class="close_btn" @click="closePacket">X</view>
					<image src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/red_packet.gif" class="red_packet" @click="_getredpacket" />
				</view>
			</view>
		</view>
		<view class="service">
			<CustomerService>联系客服</CustomerService>
		</view>
	</Container>
</template>

<script>
import Container from '../../components/Container/Container.vue';
import CustomerService from '@/components/CustomerService/CustomerService.vue';

export default {
	data() {
		return {
			userInfo: {
				username: '请登录',
				userpic: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png',
				phone: 'kailin',
				status: 0,
				city_id: 0
			},
			is_login: 0,
			packetList: [],
			show_packet: false,
			windowHeight: 0,
			vip_info: null
		};
	},
	onLoad(param) {
		// 存储分享标识
		if (param.share_uid) {
			uni.setStorageSync('share_uid', param.share_uid);
			console.log('share_uid', param.share_uid);
		}
		// #ifdef MP-WEIXIN
		//分享按钮
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	mounted() {
		this.updateWindowHeight();
		// 监听窗口变化（H5、小程序生效，App需用 onWindowResize）
		uni.onWindowResize((res) => {
			this.windowHeight = res.size.windowHeight;
		});
		console.log(this.windowHeight);
	},
	onShareAppMessage(obj) {
		// 店铺ID
		let shopId = uni.getStorageSync('shopId');
		//获取当前用户信息
		let userInfo = uni.getStorageSync('userInfo');
		let param = '?shop_id' + shopId;
		if (userInfo.uid) {
			param = '&share_uid=' + userInfo.uid;
		}
		// 获取分享信息
		let shareList = getApp().globalData.shareList;
		// 获取分享信息
		let shareObj = {
			title: '999智控终端平台\n药优惠 得积分 兑豪礼',
			//path: '/pages/score/lottery',
			path: '/pages/user/index',
			imageUrl: ''
		};
		// 循环列表
		for (let i in shareList) {
			if (shareList[i].pages == 'pages/user/index') {
				shareObj.path = shareList[i].path ? shareList[i].path : shareObj.path;
				shareObj.title = shareList[i].title ? `999智控终端平台\n${shareList[i].title}` : shareObj.title;
				shareObj.imageUrl = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl;
			}
		}
		if (param) {
			shareObj.path += param;
		}
		// 返回分享信息
		return shareObj;
	},
	onShow() {
		// 登录提示
		this.is_login = this.$checkAccess.checkLogin();
		// 未登录不请求
		if (!this.is_login) {
			this.userInfo = {
				username: '请登录',
				userpic: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png',
				phone: 'kailin',
				status: 0,
				city_id: 0,
				is_video_vip: 0,
				amount: 0.0,
				transfer_amount: 0.0
			};
			return;
		}
		// 判断数据
		this.$http.request('api/question_bank/question_reception/custom/get_info').then((callback) => {
			if (callback.code == 'success') {
				if (!callback.data.userpic) callback.data.userpic = 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png';
				// 赋值
				this.userInfo = callback.data;
				// 存储登录标识
				this.vip_info = callback.data.vip_info;
				uni.setStorageSync('userInfo', callback.data);
			}
		});
	},
	methods: {
		updateWindowHeight() {
			const systemInfo = uni.getSystemInfoSync();
			this.windowHeight = systemInfo.windowHeight;
			console.log(this.windowHeight);
		},
		_getredpacket() {
			let url = '/pages/redpacket/list';
			if (this.packetList.length == 1) {
				url = `/pages/redpacket/index?packet_id=${this.packetList[0].custom_redpacket_id}`;
			}
			uni.navigateTo({
				url: url
			});
		},
		_goWithdraw() {
			uni.navigateTo({
				url: '/pages/user/withdraw'
			});
		},
		_goBalance() {
			uni.navigateTo({
				url: '/pages/balance/index'
			});
		},
		closePacket() {
			this.show_packet = false;
		},
		onChange(e) {
			console.log(e);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/uni.scss'; // 引入全局scss变量
.page_content {
	background: #f8f8f8;
}

.bg {
	width: 750rpx;
	height: 456rpx;
}
.user_box {
	width: 680rpx;
	height: 180rpx;
	overflow: hidden;
	padding: 10rpx 35rpx;
	.box_left {
		float: left;
		display: block;
		width: 140rpx;
		height: 140rpx;
		.user_image {
			display: block;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin: 10rpx auto;
		}
	}
	.box_center {
		float: left;
		width: 350rpx;
		height: 140rpx;
		margin-left: 35rpx;
		.user_name {
			font-size: 30rpx;
			line-height: 80rpx;
			padding-bottom: 20rpx;
		}
		.user_info {
			color: #999999;
			font-size: 24rpx;
			line-height: 60rpx;
			margin-left: 50rpx;
		}
		.user_info_vip {
			color: #999999;
			font-size: 24rpx;
			line-height: 40rpx;
			display: flex;
		}
		.user_info_vip_icon {
			width: 35rpx;
			height: 35rpx;
			margin-top: 5rpx;
			padding-right: 15rpx;
		}
		.user_info_vip_type {
			color: #3f75ff;
		}
	}
	.box_right {
		float: right;
		width: 70rpx;
		height: 80rpx;
		font-size: 20rpx;
		line-height: 80rpx;
		.setting_page {
			width: 80rpx;
			height: 80rpx;
			display: block;
			overflow: hidden;
			.setting_icon {
				width: 60rpx;
				height: 60rpx;
				display: block;
				margin: 40rpx auto;
			}
		}
		.company_text {
			color: #e03519;
			width: 140rpx;
			height: 140rpx;
			font-size: 20rpx;
			text-align: center;
			line-height: 140rpx;
		}
	}
}
.navigator_list_vip {
	height: 108rpx;
	border-radius: 30rpx;
	background: #ffffff;
	margin-bottom: 50rpx;
}
.navigator_list_other {
	background: #ffffff;
	margin-bottom: 50rpx;
	height: 296rpx;
	border-radius: 30rpx;
}
.navigator_title_vip_banner {
	width: 100%;
	display: block;
	height: 108rpx;
	font-size: 30rpx;
	.vip-banner-image {
		width: 100%;
		height: 108rpx;
		display: block;
	}
}
.navigator_list {
	border-top: 1rpx solid #eeeeee;
	height: 505rpx;
	margin: 30rpx 30rpx 0rpx 30rpx;
	border-radius: 30rpx;
	.navigator_item_one {
		position: relative;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}
	.navigator_item_two {
		position: relative;
	}
	.navigator_item_three {
		position: relative;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
	}
	.navigator_title_ico {
		position: absolute;
		right: 30rpx;
		top: 25rpx;
	}
	.navigator_title {
		display: block;
		font-size: 30rpx;
		line-height: 40rpx;
		border-bottom: 1rpx solid #eeeeee;
		padding: 30rpx 30rpx;
	}
	.navigator_title_three {
		display: block;
		font-size: 30rpx;
		line-height: 40rpx;
		padding: 30rpx 30rpx;
	}
}

.alter_info {
	display: block;
	color: #e03519;
	font-size: 20rpx;
	overflow: hidden;
	margin: 20rpx auto;
	background: #ffffff;
	line-height: 40rpx;
	padding: 35rpx 35rpx;
}
.balance_content {
	margin: 20rpx;
	padding: 35rpx;
	background-color: #fff;
	box-sizing: border-box;
	.balance_content_main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 36rpx;
		.price_content {
			display: flex;
			flex-direction: column;
			> .title {
				font-size: 24rpx;
				margin-bottom: 15rpx;
			}
		}
		.withdraw_btn {
			color: #ffffff;
			background-color: #169bd5;
			border-radius: 60rpx;
			padding: 10rpx 20rpx;
			width: 90rpx;
			text-align: center;
			line-height: 40rpx;
		}
	}
	.balance_content_detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2rpx solid #f3f3f3;
		font-size: 24rpx;
		padding-top: 18rpx;
	}
}
.packet_content {
	position: absolute;
	right: 0;
	bottom: 15%;
	width: 160rpx;
	height: 160rpx;
	.red_packet {
		width: 100%;
		height: 100%;
	}
	.close_btn {
		width: 40rpx;
		height: 40rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		border-radius: 50%;
		border: 1rpx solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 5rpx;
		left: 0;
	}
}

.service {
	position: absolute;
	bottom: 20%;
	right: 5%;
	color: $uni-primary;
	font-size: 28rpx;
	margin-bottom: 40rpx;
	text-align: right;
}
</style>