CBB3/pages/user/index.vue

<template>
	<view class="app">
		<image class="top-bg" src="/static/img/user-bg.png"></image>
		<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>

					<template v-if="sysData.is_audit == 0">
						<view class="level fx-r fx-bc" v-if="user.levelid == 1 && user.mentor_id > 0">
							<view class="name">{{ user.mentor_name }}</view>
						</view>

						<view class="level fx-r fx-bc" v-if="user.levelid > 1 && user.mentor_id > 0">
							<image src="/static/img/level-1.png"></image>
							<view class="name">{{ user.mentor_name }}</view>
						</view>
						<view v-if="isNewShow" class="newPeople">新人（{{user.fresh_time_text}}）</view>
						<view class="level-ty" v-if="user.mentor_time != '' && user.mentor_time != null">
							到期:{{ user.mentor_time }}</view>
					</template>
				</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-h fx-bc fx-ac">
						<view class="count">{{ user != null ? user.total_earnings : 0 }}</view>
						<view class="name">我的收益</view>
					</view>

					<view class="line"></view>

					<view class="item fx-h fx-bc fx-ac" @tap="tapOpen" data-url="/pages/user/detail/integral">
						<view class="count">{{ user != null ? user.integral : 0 }}</view>
						<view class="name">我的趣豆</view>
					</view>

					<view class="line"></view>

					<view class="item fx-h fx-bc fx-ac" @tap="tapOpen" data-url="/pages/user/detail/anticipate">
						<view class="count">{{ user != null ? user.anticipate : 0 }}</view>
						<view class="name">易趣卷</view>
					</view>

					<view class="line"></view>

					<view class="item fx-h fx-bc fx-ac" @tap="tapOpen" data-url="/pages/user/detail/detail">
						<view class="count">{{ user != null ? user.good_integral : 0 }}</view>
						<view class="name">货款提货积分</view>
					</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-invite.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-vermicelli.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-order.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-rush.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-goods.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 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 src="/static/img/user_tx.png"></image>
						<view class="name">我要提现</view>
					</view>
				</view>
			</view>
			<view class="pannel mt20">
				<view class="items-title">更多功能</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/user-bank.png"></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/user-auth.png"></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/user-address.png"></image>
						<view class="name">收货地址</view>
					</view>

					<view class="item fx-h fx-bc" @tap="$refs.customer.open()">
						<image src="/static/img/user-kfu.png"></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/user-msg.png"></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/user-password.png"></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/user-bind.png"></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/user-seting.png"></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">
	.top-bg {
		width: 100vw;
		height: 83vw;
		position: fixed;
		top: 0;
	}

	.top-view {
		width: 100%;

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

			.top-h45 {
				height: 45rpx;
			}

			.user {
				height: 280rpx;
				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: #FFFFFF;
				font-size: 34rpx;
				font-weight: bold;
			}

			.iname {
				margin-top: 12rpx;

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

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

			.level {
				margin-top: 20rpx;
				background: linear-gradient(to right, #f9ecc5 0%, #d6ba63 100%);
				border-radius: 60rpx;
				height: 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;
			}
			.newPeople{
				position: absolute;
				right:10px;
				top: 0px;
				font-size: 12px;
				color: #fff;
			}

			.earnings {
				margin-top: 50rpx;

				.item {
					width: calc(25% - 1px);

					.count {
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
					}

					.name {
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-top: 20rpx;

					}
				}

				.line {
					width: 1px;
					height: 70rpx;
					background: #FFFFFF;
				}
			}

		}


	}

	.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;
		position: relative;

		.pannel {
			background: #fff;
			border-radius: 20rpx;

			.order-items {
				padding: 40rpx 0;

				.item {
					width: 20%;

					image {
						width: 56rpx;
						height: 56rpx;
					}

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

			&.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 {
						width: 60rpx;
						height: 60rpx;
					}

					.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 uParse from '@/components/gaoyia-parse/parse.vue';
	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: {
			uParse,
			maoScroll,
			customerWiget
		},
		computed: mapState(['user', 'sysData']),
		data() {
			return {
				statusBarHeight: 20,
				isGg: false,
				isNewShow:false
			}
		},
		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;
				}
				//获取当前时间的时间戳
				let time = Math.round(new Date().getTime()/1000).toString();
				if(this.user.fresh_time > time){
					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>