CBB3/pages/user/index.vue

<template>
	<view class="app">
		<view class="top-bg">
			<view class="top2-bg">
				<view class="top3-bg">

				</view>
			</view>
		</view>
		<view class="top-view">
			<view class="top-inner">
				<view class="statusBar" :style="'height:'  + statusBarHeight + 'px'"></view>
				<view class="top-h45"></view>
				<view class="user fx-h fx-bc" v-if="user != null">
					<view class="avatar">
						<image :src=" user.avatar ||  '/static/img/user-avatar2.png'" mode="aspectFill"></image>
					</view>
					<view class="nickname">{{ user.nickname }}</view>
					<view class="iname fx-r fx-bc">
						<view class="id-name">ID:{{ user.number_code }}</view>
						<image src="/static/img/idcopy.png" class="copy"></image>
					</view>
					<view class="level fx-r fx-bc" v-if="isNewShow">
						<view class="name">{{ user.mentor_name }}</view>
					</view>
					<view class="newPeople" v-if="isNewShow">
						<view v-if="user.regtime == 0">到期时间:永久</view>
						<view v-if="user.regtime > 0" class="fx-r fx-bc">
							<view>到期时间</view>：<uv-count-down :time="timeValues" format="DD:HH:mm:ss"></uv-count-down>
						</view>
					</view>
				</view>
				<view class="user fx-h fx-bc fx-ac" @tap="tapLogin" v-else>
					<view class="avatar">
						<image src="/static/img/user-avatar2.png" mode="aspectFill"></image>
					</view>
					<view class="nickname">点击登录</view>
				</view>
				<!--收益情况-->
				<view class="earnings fx-r fx-bc" v-if="sysData.is_audit == 0">
					<view class="item fx-r fx-bc fx-ac">
						<view class="itemLeftBox">
							<view class="name">我的收益</view>
							<view class="count">{{ user != null ? user.total_earnings : 0 }}</view>
						</view>
						<image class="rightImageIcon" src="/static/img/userinfo1.png" mode="scaleToFill"></image>
					</view>
					<view class="line"></view>
					<view class="item fx-r fx-bc fx-ac" @tap="tapOpen" data-url="/pages/user/detail/integral">
						<view class="itemLeftBox">
							<view class="name">我的趣豆</view>
							<view class="count">{{ user != null ? user.integral : 0 }}</view>
						</view>
						<image class="rightImageIcon" src="/static/img/userinfo2.png" mode="scaleToFill"></image>
					</view>
					<view class="lineAll"></view>
					<view class="item fx-r fx-bc fx-ac" @tap="tapOpen" data-url="/pages/user/detail/anticipate">
						<view class="itemLeftBox">
							<view class="name">易趣卷</view>
							<view class="count">{{ user != null ? user.anticipate : 0 }}</view>
						</view>
						<image class="rightImageIcon" src="/static/img/userinfo3.png" mode="scaleToFill"></image>
					</view>
					<view class="line"></view>
					<view class="item fx-r fx-bc fx-ac" @tap="tapOpen" data-url="/pages/user/detail/detail">
						<view class="itemLeftBox">
							<view class="name">货款提货积分</view>
							<view class="count">{{ user != null ? user.good_integral : 0 }}</view>
						</view>
						<image class="rightImageIcon" src="/static/img/userinfo4.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!--馆长中心-->
		<view class="gz" v-if="user != null && user.isgz" @tap="tapOpen" data-url="/pages/gz/index">
			<image class="bg" src="/static/img/gz-bg.png"></image>
			<view class="inner fx-r fx-bc">
				<image class="icon" src="/static/img/gz-zuan.png"></image>
				<view class="name">部门总监职能中心</view>
				<view class="fx-g1"></view>
				<view class="sbtn">点击进入</view>
			</view>
		</view>
		<view class="body" :class="(user != null && user.isgz) ? 'to-gz' : 'no-gz' ">
			<view class="pannel" v-if="sysData.is_audit == 0">
				<view class="order-items fx-r fx-bc">
					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/qrcode/index"
						v-if="sysData.is_audit == 0">
						<image src="/static/img/user-content1.png"></image>
						<view class="name">邀请好友</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/team/vermicelli"
						v-if="sysData.is_audit == 0">
						<image src="/static/img/user-content2.png"></image>
						<view class="name">我的粉丝</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/order/index">
						<image src="/static/img/user-content3.png"></image>
						<view class="name">提货订单</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/guild/order/order"
						v-if="sysData.is_audit == 0">
						<image src="/static/img/user-content4.png"></image>
						<view class="name">购买订单</view>
					</view>
					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/guild/order/myPro">
						<image src="/static/img/user-content5.png"></image>
						<view class="name">我的商品</view>
					</view>

				</view>
			</view>
			<!--我的商户-->
			<view class="pannel mt20" v-if=" user != null && user.m_id > 0">
				<view class="fx-r fx-bc fx-ac">
					<view class="items-title">我的商户</view>
					<view class="fx-g1"></view>
					<view class="shop-name">{{ user.m_name }}</view>
				</view>
				<view class="items fx-r">

					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/detail/brokerage">
						<image mode="heightFix" src="/static/img/user_earnings.png"></image>
						<view class="name">货款记录</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/address/address">
						<image mode="heightFix" src="/static/img/user_tx.png"></image>
						<view class="name">我要提现</view>
					</view>
				</view>
			</view>
			<view class="pannel mt20">
				<view class="pannelTopImgBox">
					<image class="pannelTopImg" src="/static/img/moreGn.png" mode="scaleToFill"></image>
				</view>
				<view class="items fx-r">
					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/bank/bank"
						v-if="sysData.is_audit == 0">
						<image src="/static/img/userico1.png"  mode="heightFix"></image>
						<view class="name">收款信息</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapOpenRz" v-if="sysData.is_audit == 0">
						<image src="/static/img/userico2.png"  mode="heightFix"></image>
						<view class="name">实名认证</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/address/address">
						<image src="/static/img/userico3.png"  mode="heightFix"></image>
						<view class="name">收货地址</view>
					</view>

					<view class="item fx-h fx-bc" @tap="$refs.customer.open()">
						<image src="/static/img/userico4.png"  mode="heightFix"></image>
						<view class="name">联系客服</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/userinfo/index">
						<image src="/static/img/userico5.png"  mode="heightFix"></image>
						<view class="name">个人资料</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapPayment" v-if="sysData.is_audit == 0">
						<image src="/static/img/userico6.png"  mode="heightFix"></image>
						<view class="name">交易密码</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/userinfo/bindPhone"
						v-if="sysData.is_audit == 0">
						<image src="/static/img/userico7.png" mode="heightFix"></image>
						<view class="name">绑定手机</view>
					</view>

					<view class="item fx-h fx-bc" @tap="tapOpen" data-url="/pages/user/setting/index">
						<image src="/static/img/userico8.png"  mode="heightFix"></image>
						<view class="name">设置</view>
					</view>
				</view>
			</view>
		</view>
		<customer-wiget ref="customer"></customer-wiget>
		<view class="popwin fx-h fx-bc fx-ac" v-if="isGg">
			<view class="bg"></view>
			<view class="body fx-h">
				<image src="/static/img/user_vip_bg.png" class="bgimg"></image>
				<view class="pop-body">
					<view class="inner-top">尊敬的高级合伙人</view>
					<view class="inner-tip">您的高级合伙人有效期仅剩</view>
					<view class="inner">
						<view class="max-he fx-r fx-be fx-ac">
							<text class="c">{{ user != null ?  user.last_mentor_time  : ""}}</text>
							<text class="t">天</text>
						</view>
						<view class="fx-r fx-bc fx-ac foot">
							<view class="btn" @tap="isGg = false">我知晓></view>
						</view>
					</view>
				</view>
				<view class="m-close fx-h fx-bc">
					<image src="/static/img/btn-close.png" @tap="isGg = false" class="icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	.top2-bg {
		height: 100%;
		width: 100%;
		background: linear-gradient(to right, #FEA9C8, #FFE4F0, #FFA18E);
		position: absolute;

		.top3-bg {
			height: 100%;
			width: 100%;
			background: linear-gradient(rgba(255, 255, 255, 0), #FEF7F5);
		}
	}

	.top-bg {
		width: 100vw;
		height: 83vw;
		position: fixed;
		top: 0;
	}

	.newPeople {
		font-size: 12px;
		color: #999;
		padding-top: 15rpx;
	}

	.top-view {
		width: 100%;

		.top-inner {
			position: relative;
			z-index: 1;

			.top-h45 {
				height: 45rpx;
			}

			.user {
				position: relative;
			}

			.avatar {
				width: 130rpx;
				height: 130rpx;
				background: #efa69b;
				border-radius: 50%;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-left: 5rpx;
					margin-top: 5rpx;
				}
			}

			.nickname {
				margin-top: 20rpx;
				color: #000;
				font-size: 34rpx;
				font-weight: bold;
			}

			.iname {
				margin-top: 12rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 12rpx;
				}

				.id-name {
					font-size: 30rpx;
					color: #666666;
				}
			}

			.level {
				margin-top: 20rpx;
				background: linear-gradient(to right, #f9ecc5 0%, #d6ba63 100%);
				border-radius: 60rpx;
				padding: 0 36rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				.name {
					font-size: 30rpx;
					color: #93794B;
					margin-right: 2px;

					&:last-child {
						margin-right: 0;
					}
				}
			}

			.level-ty {
				position: absolute;
				right: 10px;
				bottom: -12px;
				font-size: 12px;
				color: #fff;
			}

			.earnings {
				margin: 25rpx 30rpx 0;
				border-radius: 20rpx;
				background-color: #FFF;

				.lineAll {
					width: 100%;
					height: 1px;
					background-color: rgba(245, 245, 247, 1);
				}

				.item {
					width: calc(50% - 1px);
					padding: 30rpx;
					box-sizing: border-box;
					line-height: 1;
					.itemLeftBox{
						flex-grow: 1;
					}
					.rightImageIcon {
						width: 66rpx;
						height: 66rpx;
					}

					.count {
						margin-top: 20rpx;
						font-size: 25rpx;
						color: rgba(255, 76, 76, 1);
					}

					.name {
						font-weight: bold;
						font-size: 28rpx;
						color: rgba(35, 35, 38, 1);

					}
				}

				.line {
					width: 1px;
					height: 70rpx;
					background-color: rgba(245, 245, 247, 1);
				}
			}

		}


	}

	.gz {
		position: relative;
		padding: 0px 20rpx;
		margin-top: 20rpx;

		.bg {
			width: calc(100vw - 40rpx);
			height: calc(13vw - 5rpx);
		}

		.inner {
			position: absolute;
			width: calc(100% - 80rpx);
			height: calc(100% - 10rpx);
			left: 40rpx;
			top: 0;

			.icon {
				width: 40rpx;
				height: 36rpx;
			}

			.name {
				margin-left: 15rpx;
				font-size: 30rpx;
				color: #6A4714;
			}

			.sbtn {
				background: linear-gradient(-90deg, #8C5F1D 0%, #8C5F1C 77%, #875916 99%);
				border-radius: 25rpx;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0px 25rpx;
				font-size: 26rpx;
				color: #F0E1C9;
			}
		}
	}

	.body {
		padding: 20rpx 30rpx;
		position: relative;
		line-height: 1;
		.pannel {
			background: #fff;
			border-radius: 20rpx;
			.pannelTopImgBox{
				padding:30rpx 25rpx 0;
				.pannelTopImg{
					width: 140rpx;
					height: 26rpx !important;
				}
			}
			.order-items {
				padding: 40rpx 10rpx;

				.item {
					width: 20%;

					image {
						width: 90rpx;
						height: 88rpx;
					}

					.name {
						font-size: 24rpx;
						color: #0C1732;
						margin-top: 10rpx;
					}
				}
			}

			&.mt20 {
				margin-top: 20rpx;
			}

			.items-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				padding-left: 40rpx;
				padding-top: 30rpx;
			}

			.shop-name {
				font-size: 24rpx;
				color: #333333;
				padding-right: 10px;
				padding-top: 17px;
			}

			.items {
				padding-bottom: 40rpx;

				.item {
					width: 25%;
					margin-top: 50rpx;
					image {
						height: 40rpx;
					}

					.name {
						font-size: 24rpx;
						color: #333;
						margin-top: 32rpx;
					}
				}
			}

		}
	}



	/**弹出框 **/
	.popwin {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 88;
	}

	.popwin .bg {
		background: rgba(0, 0, 0, 0.5);
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.popwin .body {
		position: relative;
		border-radius: 8px;
		width: 100%;
		width: 80vw;
		right: -7vw;
		padding: 0;
	}

	.popwin .body .bgimg {
		width: 80vw;
		height: 83vw;
		position: absolute;
		top: 0;
	}

	.popwin .body .pop-body {
		width: 66vw;
		position: relative;
	}

	.popwin .body .inner {
		position: relative;
		z-index: 99;
		width: calc(100% - 80rpx);
		padding: 0px 40rpx;
	}

	.popwin .body .inner-top {
		height: 9vw;
		line-height: 9vw;
		text-align: center;
		font-weight: 500;
		font-size: 34rpx;
		color: #FEF9F0;
	}

	.popwin .body .inner-tip {
		margin-top: 8vw;
		height: 7vw;
		text-align: center;
		line-height: 7vw;
		font-weight: bold;
		font-size: 26rpx;
		color: #F9FAFA;
	}

	.max-he {
		height: 31vw;
	}

	.max-he .c {
		font-size: 150rpx;
		color: #201F1F;
		font-weight: bold;
	}

	.max-he .t {
		position: relative;
		top: -40rpx;
	}

	.foot {
		height: 22vw;
		margin-top: 6vw;
	}

	.popwin .btn {
		background: linear-gradient(0deg, #FAC37B, #FFF5B0);
		box-shadow: 2px 7px 7px 0px rgba(161, 23, 36, 0.4);
		border-radius: 15rpx;
		height: 66rpx;
		width: 40vw;
		font-size: 38rpx;
		color: #97000E;
		text-align: center;
		line-height: 66rpx
	}

	.popwin .m-close {
		margin-top: 10px;
		width: calc(100% - 10vw);
	}

	.popwin .m-close image {
		width: 120rpx;
		height: 120rpx;
	}
	
</style>

<script>
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	import customerWiget from '@/components/ui-public/customer-wiget.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			maoScroll,
			customerWiget
		},
		computed: mapState(['user', 'sysData']),
		data() {
			return {
				statusBarHeight: 20,
				isGg: false,
				isNewShow: false,
				timeValues: '',
			}
		},
		onLoad() {
			this.initView();
		},
		onShow(options) {
			this.checkUserLogin({
				page: this,
				isLogion: false,
				fn: this.init
			});
		},
		methods: {
			...mapMutations(['setSys', 'checkUserLogin']),
			initView: function() {
				uni.getSystemInfo({
					success: (res) => {
						this.statusBarHeight = res.statusBarHeight;
					}
				});
			},
			/**
			 * 
			 */
			init: function() {
				// if (this.user.is_mentor) {
				// 	this.isGg = true;
				// }
				console.log(this.user.mentor_id)
				if ((this.user.mentor_id == 15 || this.user.mentor_id == 6 && this.user.regtime > 0)) {
					//获取当前时间的时间戳
					let nowTime = Math.round(new Date().getTime()).toString();
					console.log(nowTime, '现在时间')
					//注册时间 this.user.regtime 两个月后
					let date = new Date(this.user.regtime * 1000);
					console.log(date, '注册时间')
					// 获取日期的月份和年份，用于处理月末变化的情况
					let currentMonth = date.getMonth();
					let currentYear = date.getFullYear();
					date.setMonth(date.getMonth() + 2);
					if (date.getMonth() !== (currentMonth + 2) % 12 || date.getFullYear() !== currentYear + Math.floor(
							(currentMonth + 2) / 12)) {
						date.setDate(0);
					}
					let dateTimeStr = new Date(date);
					// 将Date对象转换为时间戳（以秒为单位）
					let timestamp = Math.floor(dateTimeStr.getTime());
					console.log(timestamp, '注册两个月后时间')
					if (nowTime > timestamp) {
						this.isNewShow = false
					} else {
						this.isNewShow = true
						this.timeValues = timestamp - nowTime
						console.log(this.timeValues, '到期倒计时')
					}
				}
				if ((this.user.mentor_id == 15 || this.user.mentor_id == 6) && this.user.regtime == 0) {
					this.isNewShow = true
				}
			},

			/**
			 * 授权登录
			 */
			tapLogin: function() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			/**
			 * 打开Open
			 * @param {Object} ev
			 */
			tapOpen: function(ev) {
				let url = ev.currentTarget.dataset.url;
				if (!this.utils.isDefine(this.user)) {
					uni.navigateTo({
						url: "/pages/login/index"
					});
					return;
				}
				this.utils.navigateTo(url);
			},
			/**
			 * 交易密钥
			 */
			tapPayment: function() {
				if (!this.utils.isDefine(this.user)) {
					uni.navigateTo({
						url: "/pages/login/index"
					});
					return;
				}

				if (this.user.is_payment) {
					uni.navigateTo({
						url: "/pages/user/userinfo/security/mobileFind"
					})
				} else {
					uni.navigateTo({
						url: "/pages/user/userinfo/security/newPass"
					})
				}

			},

			tapOpenRz: function() {
				if (!this.utils.isDefine(this.user)) {
					uni.navigateTo({
						url: "/pages/login/index"
					});
					return;
				}
				if (this.user.is_auth == 1) {
					this.utils.Tip("已实名认证");
					return;
				}
				uni.navigateTo({
					url: "/pages/user/approve"
				});
			},

		}
	}
</script>