CBB3/pages/user/index.nvue

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

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

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

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

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

					</view>
				</view>
				<!--我的商户-->
				<view class="pannel mt20" v-if=" user != null && user.m_id > 0">
					<view class="mySh">
						<text class="items-title">我的商户</text>
						<text class="shop-name">{{ user.m_name }}</text>
					</view>
					<view class="items">
						<view class="item" @tap="tapOpen" data-url="/pages/user/detail/brokerage">
							<image mode="heightFix" class="itemsImage" src="/static/img/user_earnings.png"></image>
							<text class="name">货款记录</text>
						</view>
						<view class="item" @tap="tapOpen" data-url="/pages/user/address/address">
							<image mode="heightFix" class="itemsImage" src="/static/img/user_tx.png"></image>
							<text class="name">我要提现</text>
						</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">
						<view class="item" @tap="tapOpen" data-url="/pages/user/bank/bank" v-if="sysData.is_audit == 0">
							<image class="itemsImage" src="/static/img/userico1.png" mode="heightFix"></image>
							<text class="name">收款信息</text>
						</view>

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

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

						<view class="item" @tap="openKf">
							<image class="itemsImage" src="/static/img/userico4.png" mode="heightFix"></image>
							<text class="name">联系客服</text>
						</view>

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

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

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

						<view class="item" @tap="tapOpen" data-url="/pages/user/setting/index">
							<image class="itemsImage" src="/static/img/userico8.png" mode="heightFix"></image>
							<text class="name">设置</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<customer-wiget ref="customer"></customer-wiget>
		<view class="popwin" 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">
					<text class="inner-top">尊敬的高级合伙人</text>
					<text class="inner-tip">您的高级合伙人有效期仅剩</text>
					<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">
							<text class="btn" @tap="isGg = false">我知晓></text>
						</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">
	.contentBox {
		margin-top: -622rpx;
	}

	.userPage {
		width: 750rpx;
		// border: 1px solid #000;
		background-color: #FEF7F5;
	}


	.top-bg {
		width: 750rpx;
		height: 622rpx;

		.top2-bg {
			width: 750rpx;
			height: 622rpx;
			background-image: linear-gradient(to right, #FEA9C8, #FFA18E);

			.top3-bg {
				width: 750rpx;
				height: 622rpx;
				background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FEF7F5);
			}
		}
	}

	.newPeople {
		padding-top: 15rpx;

		.newPeopletext {
			font-size: 12px;
			color: #999;
		}
	}

	.top-view {
		width: 750rpx;

		.top-inner {
			z-index: 1;

			.top-h45 {
				height: 45rpx;
			}

			.user {
				justify-content: center;
				align-items: center;
			}

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

				.avatarImage {
					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;

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

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

				.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;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;

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

				.item {
					width: 342rpx;
					padding: 30rpx;
					line-height: 1;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.itemLeftBox {
						flex: 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 {
		padding: 0px 30rpx;
		margin-top: 20rpx;

		.bg {
			width: 690rpx;
			height: 77rpx;
		}

		.inner {
			position: absolute;
			width: 670rpx;
			height: 74rpx;
			left: 40rpx;
			top: 0;
			flex-direction: row;
			align-items: center;

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

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

			.sbtn {
				border-radius: 25rpx;
				padding: 10rpx 25rpx;
				background-color: #6A4714;

				.sbtnText {
					font-size: 26rpx;
					color: #F0E1C9;
				}
			}
		}
	}

	.body {
		padding: 20rpx 30rpx;
		position: relative;
		line-height: 1;

		.pannel {

			background: #fff;
			border-radius: 20rpx;

			.mySh {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.pannelTopImgBox {
				padding: 30rpx 25rpx 0;

				.pannelTopImg {
					width: 140rpx;
					height: 26rpx !important;
				}
			}

			.order-items {
				padding: 40rpx 10rpx;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 134rpx;
					align-items: center;

					.shareImage {
						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;
				flex-direction: row;
				flex-wrap: wrap;

				.item {
					width: 170rpx;
					margin-top: 50rpx;
					align-items: center;

					.itemsImage {
						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: 670rpx;
		padding: 0px 40rpx;
	}

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

	.popwin .body .inner-tip {
		margin-top: 60rpx;
		height: 53rpx;
		text-align: center;
		line-height: 53rpx;
		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-image: 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: 675rpx;
	}

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

<script>
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	import customerWiget from '@/components/ui-public/customer-wiget.nvue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from '@/library/utils/Comm.js'
	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']),
			openKf() {
				this.$refs.customer.open()
			},
			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 (!utils.isDefine(this.user)) {
					uni.navigateTo({
						url: "/pages/login/index"
					});
					return;
				}
				utils.navigateTo(url);
			},
			/**
			 * 交易密钥
			 */
			tapPayment: function() {
				if (!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 (!utils.isDefine(this.user)) {
					uni.navigateTo({
						url: "/pages/login/index"
					});
					return;
				}
				if (this.user.is_auth == 1) {
					utils.Tip("已实名认证");
					return;
				}
				uni.navigateTo({
					url: "/pages/user/approve"
				});
			},

		}
	}
</script>