bawangcan-shop/pages/my/index.vue

<template>
	<view class="container">
		<view class="header">
			<!-- <image src="../../static/img/my/user-bj.png" class="user-bj"></image> -->
			<view class="user-box">
				<view class="user-info-box">
					<view class="avatar" @tap="checkLogin()">
						<image :src="avatar"></image>
					</view>
					<view class="user-info" v-if="userId">
						<view class="nick-wrap">
							<text class="nick">{{ nickName }}
							</text>
						</view>
						<view class="phones" v-if="phone">{{phone.substr(0,4)}}****{{phone.substr(8,11)}}</view>
					</view>

					<view class="noLogin" @tap="checkLogin()" v-else>登录</view>
				</view>
			</view>

			<view class="info-jifen">
				<view class="wdjf">账户资金</view>
				<view class="shouye_item">
					<view class="shouye_item_left" @tap="myMoneyMessage">
						<view class="shouye_item_money"><span style="font-size: 28rpx;">¥</span>{{myMoney}}</view>
						<view class="shouye_item_text">账户余额</view>
					</view>
					<view class="shouye_item_center" @tap="moneyMessage">
						<view class="shouye_item_money"><span style="font-size: 28rpx;">¥</span>{{money}}</view>
						<view class="shouye_item_text">不可用金额</view>
					</view>
					<view class="shouye_item_right" @tap="cashMoneyMessage">
						<view class="shouye_item_money"><span style="font-size: 28rpx;">¥</span>{{cashMoney}}</view>
						<view class="shouye_item_text">可用金额</view>

					</view>

				</view>
				<view class="tuandui_item">
					<view class="shouye_item_left" @tap="goPageLogin('/pages/my/recharge')">
						<image class="shouye_item_img" src="../../static/img/my/zhcz.png"></image>
						<view class="shouye_item_text">账户充值</view>
					</view>
					<view class="shouye_item_center" @tap="goPageLogin('/pages/my/withdrawal')">
						<image class="shouye_item_img" src="../../static/img/my/yetx.png"></image>
						<view class="shouye_item_text">余额提现</view>
					</view>
					<view class="shouye_item_right" @tap="goPageLogin('/pages/my/balanceHistory')">
						<image class="shouye_item_img" src="../../static/img/my/yels.png"></image>
						<view class="shouye_item_text">余额历史</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="integrals-box">
				<view class="integral" @tap="goPageLoginByMerchant('/pages/my/toExamine')">
					<view class="left">
						<image src="../../static/img/my/spsh.png"></image>
						<text>我的订单</text>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
				<view class="integral" @tap="goPageLoginByMerchant('/pages/my/myshop')">
					<view class="left">
						<image src="../../static/img/my/wddp.png"></image>
						<text>我的店铺</text>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
				<view class="integral" @tap="goPageLoginByMerchant('../activity/index')">
					<view class="left">
						<image src="../../static/img/my/hdgl.png"></image>
						<text>活动管理</text>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
				<view class="integral" @tap="goPageLogin('/pages/my/cooperation')">
					<view class="left">
						<image src="../../static/img/my/dlhz.png"></image>
						<text>代理合作</text>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
				<view class="integral" @tap="goPageLogin('/pages/my/customer')">
					<view class="left">
						<image src="../../static/img/my/lxkf.png"></image>
						<text>联系客服</text>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
			</view>
			<view class="integrals-box">
				<view class="integral" @tap="goPageLogin('/pages/my/account?className=商家教程')">
					<view class="left">
						<image src="../../static/img/my/sjjc.png"></image>
						<text>商家教程</text>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
				<view class="integral" v-if="userId" @tap='loginOut()'>
					<view class="left">
						<image src="../../static/img/my/qwyhd.png"></image>
						<text>前往用户端</text>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
				<view class="integral">
					<view class="left">
						<image src="../../static/img/my/fenxiang.png"></image>
						<button open-type="share" style="background: #FFFFFF;border: none;padding-left: 34rpx;font-size: 30rpx;font-weight: 500;">分享给其他商家</button>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
				<view class="integral" @tap="goPageLogin('/pages/my/account?className=关于我们')">
					<view class="left">
						<image src="../../static/img/my/gywm.png"></image>
						<text>关于我们</text>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
				<view class="integral" @tap="goPageLogin('/pages/member/feedback')">
					<view class="left">
						<image src="../../static/img/my/fankui.png"></image>
						<text>意见反馈</text>
					</view>
					<text class="right cuIcon-right"></text>
				</view>
			</view>
		</view>
		
		<view v-if="Companyname"
			style="width: 100%;text-align: center;color: #555555;font-size: 26rpx;font-weight: 500;"
			@tap="toGoodsInfo(CompanylinkUrl)">{{Companyname}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: "/static/img/logo.jpg",
				member: 0,
				total: 0,
				tuiguang:'',
				backgroundImageUrl:'',
				CompanylinkUrl: '',
				Companyname: '',
				userId: '',
				shopcourse:'',
				nickName: "",
				isStudent: -1,
				MerchantList: 0,
				phone: '',
				invitationCode: "",
				endTime: '',
				channelSQ: false,
				sex: '',
				cashMoney: 0, //已兑换 
				money: 0, //可兑换 
				oneUserCount: 0, //邀请人数 
				stayMoney: 0, //待入账 
				myMoney: 0, //我的余额
				sumMoney: 0 //总收益

			}
		},
		onShareAppMessage(res) {
			let that = this;
			var image = '';
			var title = '';
			return {
				path: 'pages/index/shopIndex', //这是为了传参   onload(data){let id=data.id;} 
				title: that.tuiguang,
				imageUrl: that.backgroundImageUrl
			}
		},
		onShow() {
			this.CompanylinkUrl = this.$queue.getData('151Url');
			this.Companyname = this.$queue.getData('152name');
			
			let avatar = this.$queue.getData('avatar');
			if (avatar && avatar !== 'undefined') {
				this.avatar = avatar;
			} else {
				this.avatar = '/static/img/logo.jpg';
			}
			let nickName = this.$queue.getData('nickName');
			if (nickName && nickName !== 'undefined') {
				this.nickName = nickName;
			} else {
				this.nickName = '';
			}
			let invitationCode = this.$queue.getData('invitationCode');
			if (invitationCode && invitationCode !== 'undefined') {
				this.invitationCode = invitationCode;
			} else {
				this.invitationCode = '';
			}
			
			let that = this;
			that.$Request.getT('/common/type/147').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.backgroundImageUrl = res.data.value;
					}
				}
			});
			that.$Request.getT('/common/type/148').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.tuiguang = res.data.value;
					}
				}
			});
			
			this.sex = this.$queue.getData('sex');
			this.userId = this.$queue.getData('userId');
			if (this.userId) {
				this.checkMerchant(this.userId);
				this.getUserInfo(this.userId);
				this.getUserInfointegral(this.userId);
				this.getShopList(this.userId);
			}
		},
		methods: {
			// 轮播图跳转小程序
			toGoodsInfo: function(url) {
				let token = this.$queue.getData('token');
				let userId = this.$queue.getData('userId');
				if (token) {
					if(!url){
						return;
					}
					if (url.indexOf('/pages/') !== -1) {
						uni.navigateTo({
							url
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/public/webview?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif
					}
				} else {
					this.goLogin();
				}
			},
			myMoneyMessage() {
				uni.showModal({
					showCancel: false,
					confirmColor: '#FF4701',
					title: '账户余额说明',
					content: '可用金额+不可用金额！'
				});
			},
			moneyMessage() {
				uni.showModal({
					showCancel: false,
					confirmColor: '#FF4701',
					title: '不可用金额说明',
					content: '不可用金额是发布了活动之后，扣除的金额，这笔金额在活动完结之前不可操作，不可提现！'
				});
			},
			cashMoneyMessage() {
				uni.showModal({
					showCancel: false,
					confirmColor: '#FF4701',
					title: '可用金额说明',
					content: '充值的金额，可用于发布活动，可提现！'
				});
			},
			getShopList(userId) {
				this.$Request.getT('/goodsMerchant/selectGoodsMerchantPage?page=1&limit=10&userId=' + userId + '&status=2').then(res => {
					if (res.code == 0) {
						if (res.data.records.length > 0) {
							this.$queue.setData('merchantId', res.data.records[0].merchantId);
						}
					}
				});
			},
			checkMerchant(userId) {
				this.$Request.getT('/goodsMerchant/selectGoodsMerchantList?userId=' + userId + '&status=1').then(res => {
					if (res.code == 0) {
						if (res.data.length > 0) {
							this.$queue.setData('MerchantList', '1');
							this.MerchantList = 1;
						} else {
							this.$queue.setData('MerchantList', '0');
							this.MerchantList = 0;
						}
					}
				});
			},
			//获取用户积分信息
			getUserInfointegral(userId) {
				this.$Request.getT('/goodsMerchant/selectMerchantMoney?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.money = res.data.cannotMoney ? res.data.cannotMoney : 0;
						this.cashMoney = res.data.mayMoney ? res.data.mayMoney : 0;
						this.myMoney = parseFloat(this.money) + parseFloat(this.cashMoney);
					}
				});
			},
			getUserInfo(userId) {
				this.$Request.postT("/app/selectUserById?userId=" + userId).then(res => {
					if (res.code === 0) {
						this.member = res.data.member ? res.data.member : 0;
						this.endTime = res.data.endTime;
						this.sex = res.data.sex;
						this.phone = res.data.phone;
						this.$queue.setData("avatar", res.data.imageUrl ? res.data.imageUrl :
							'/static/img/logo.jpg');
						this.$queue.setData("nickName", res.data.nickName ? res.data.nickName : res.data.phone);
						this.$queue.setData("mobile", res.data.phone);
						this.$queue.setData("invitationCode", res.data.invitationCode);
						this.$queue.setData("relation_id", res.data.relationId);
						this.$queue.setData("relation", res.data.invitationCode);
						this.$queue.setData("grade", res.data.grade);
						this.$queue.setData("wxId", res.data.wxId);
						this.$queue.setData("zhifubao", res.data.zhifubao);
						this.$queue.setData("zhifubaoName", res.data.zhifubaoName);
						this.$queue.setData("isInvitation", res.data.isInvitation);
						this.$queue.setData("gender", parseInt(res.data.gender));
						this.$queue.setData("sex", res.data.sex);
						let campus = res.data.campus;
						if (campus && campus != null) {
							this.$queue.setData("campus", res.data.campus);
							this.$queue.setData("campusName", res.data.campusName);
						}
					} else {
						this.$queue.logout();
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: res.msg,
						});

					}
					uni.hideLoading();
				});
			},
			goPageLoginS(url) {
				let token = this.$queue.getData('token');
				if (token) {
					console.log('是否有token')
					uni.switchTab({
						url
					})
				} else {
					this.goLogin();
				}
			},
			goPageLoginAndChannel(url) {
				let token = this.$queue.getData('token');
				this.$queue.removeItem('EditChannel');
				if (token) {
					let userId = this.$queue.getData('userId');
					this.$Request.getT('/channel/selectChannelByUserId?userId=' + userId).then(res => {
						if (res.code === 0) {
							if (res.data) {
								if (res.data.status === 1) { //审核中
									this.$queue.showToast('渠道申请已提交，正在审核中，请勿重复提交！');
								} else if (res.data.status === 2) { //通过
									uni.navigateTo({
										url
									})
								} else if (res.data.status === 3) { //通过
									this.$queue.showToast('渠道申请未通过，请修改后重新提交渠道申请！');
								}
							} else {
								this.$queue.showToast('您还不是渠道商，请提交渠道申请后再来试试吧！');
							}
						}
					});
				} else {
					this.goLogin();
				}
			},
			goPageLoginAndNoChannel(url) {
				let token = this.$queue.getData('token');
				this.$queue.removeItem('EditChannel');
				if (token) {
					let userId = this.$queue.getData('userId');
					this.$Request.getT('/channel/selectChannelByUserId?userId=' + userId).then(res => {
						if (res.code === 0) {
							if (!res.data) {
								uni.navigateTo({
									url
								})
							} else {
								if (res.data.status === 1) { //审核中
									this.$queue.showToast('渠道申请已提交，正在审核中，请勿重复提交！');
								} else if (res.data.status === 2) { //通过
									this.$queue.showToast('您已经是渠道商了！');
								} else if (res.data.status === 3) { //通过
									this.$queue.setData('EditChannel', res.data);
									uni.navigateTo({
										url
									})
								}
							}
						}
					});
				} else {
					this.goLogin();
				}
			},
			goPageLogin(url) {
				let token = this.$queue.getData('token');
				if (token) {
					console.log('url', url)
					if (url == "../activity/index") {
						uni.switchTab({
							url: url
						})
					} else {
						uni.navigateTo({
							url: url
						})
					}
				} else {
					this.goLogin();
				}
			},
			goPageLoginByMerchant(url) {
				let token = this.$queue.getData('token');
				if (token) {
					// if (this.MerchantList == 1) {
					if (url == "../activity/index") {
						uni.switchTab({
							url: url
						})
					} else {
						uni.navigateTo({
							url: url
						})
					}
					// }else{
					// 	this.$queue.showToast('您还不是商户，请添加店铺后再来查看吧！');
					// }
				} else {
					this.goLogin();
				}
			},
			checkLogin() {
				let token = this.$queue.getData('token');
				let userId = this.$queue.getData('userId');
				if (token) {
					this.getUserInfo(userId);
				} else {
					this.goLogin();
				}
			},
			goLogin() {
				this.$queue.setData('href', '/pages/my/index');
				uni.navigateTo({
					url: '/pages/public/login'
				});
			},
			//退出登录
			loginOut() {
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确定要前往用户端么',
					success: e => {
						if (e.confirm) {
							uni.navigateToMiniProgram({
								appId: 'wx3bfd6deae277fea3',
								path: '/pages/index/index',
								fail(res) {
									console.error(res)
								}
							})
						}
					}
				});
			},
			// 余额历史
			balanceHistory() {
				uni.navigateTo({
					url: '/pages/my/balanceHistory'
				});
			},
			// 提现
			withdrawal() {
				uni.navigateTo({
					url: '/pages/my/withdrawal'
				});
			},
			// 充值
			recharge() {
				uni.navigateTo({
					url: '/pages/my/recharge'
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background: #F2F2F2;
	}

	.container {
		width: 100%;
		margin-bottom: 30rpx;

		.header {
			width: 100%;
			height: 600rpx;
			display: block;
			position: relative;
			// background: #fff;

			.user-bj {
				width: 100%;
				height: 370upx;
				position: absolute;
				z-index: 5;
			}

			.user-box {
				width: 100%;
				height: 425rpx;
				position: absolute;
				z-index: 15;
				padding: 100upx 30upx 0;
				display: flex;
				align-items: center;
				// background: #FF4701;
				background-image: url(../../static/img/my/myuser.png);
				background-size: 100%;

				.user-info-box {
					flex: 1;
					height: 100%;
					display: flex;
					// align-items: center;

					.avatar {
						width: 110upx;
						height: 110upx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
							display: block;
						}
					}

					.noLogin {
						display: flex;
						display: flex;
						flex-direction: column;
						margin-top: 25rpx;
						margin-left: 20rpx;
						font-size: 40upx;
						font-weight: 800;
						color: #FEFEFE;
					}

					.user-info {
						display: flex;
						display: flex;
						flex-direction: column;
						margin-left: 20upx;

						.nick-wrap {
							display: flex;
							align-items: center;
							height: 45upx;
							margin-top: 15rpx;

							.nick {
								font-size: 38upx;
								height: 38upx;
								line-height: 38upx;
								font-weight: 800;
								color: #fff;
							}

							.nick_image {
								width: 38upx;
								height: 38upx;
								margin-left: 20upx;
							}

							.activation {
								width: 100upx;
								height: 38upx;
								line-height: 38upx;
								text-align: center;
								background: #FFFFFF;
								border-radius: 19upx;
								margin-left: 20upx;
								font-size: 24upx;
								font-weight: bold;
								color: #FF332F;
							}
						}

						.phones {
							color: #fff;
							margin-top: 15rpx;
						}

						.code {
							display: flex;
							align-items: center;
							height: 45upx;
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999;
						}

					}


				}

				.info-icon {
					width: 46upx;
					height: 48upx;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}
				}

			}

			.info-jifen {
				width: 92%;
				height: 360rpx;
				position: absolute;
				background: #fff;
				border-radius: 15rpx;
				z-index: 15;
				margin: 235upx 30upx 0;
				padding: 20upx;
				box-sizing: border-box;
				box-shadow: 0 0 3px 1px #ccc;

				.wdjf {
					margin-top: 10rpx;
					font-size: 34rpx;
					font-weight: 400;
					color: #806C30;
				}

				.shouye_item {
					margin-top: 20rpx;
					display: flex;
					width: 100%;
					color: #333333;
					// text-align: justify;
					text-align: center;
					padding: 0rpx 20rpx;
					justify-content: space-between;

					.shouye_item_text {
						color: #806C30;
						font-size: 24rpx;
					}

					.shouye_item_money {
						margin-top: 10rpx;
						font-size: 38rpx;
						color: #FF4701;
					}

					.shouye_item_left {
						width: 20%;
						// text-align: left;
					}

					.shouye_item_center {
						width: 20%;
						// text-align: center;

					}

					.shouye_item_right {
						width: 20%;
						// text-align: right;
					}
				}



				.tuandui_item {
					margin-top: 20rpx;
					display: flex;
					width: 100%;
					padding: 30rpx 20rpx 0;
					text-align: center;
					// text-align: justify;
					justify-content: space-between;

					.shouye_item_left {
						width: 20%;
						// text-align: left;
					}

					.shouye_item_center {
						width: 20%;
						// text-align: center;
					}

					.shouye_item_right {
						width: 20%;
						// text-align: right;
					}

					.shouye_item_img {
						width: 52rpx;
						height: 52rpx;
					}

					.shouye_item_text {
						color: #999;
						font-size: 24rpx;
					}

					// .tuandui_item_left {
					// 	width: 75%;
					// 	color: #333333;
					// 	padding-top: 5rpx;
					// }
				}

				.yaoqing_btn {
					margin-left: 10rpx;
					background: #252323;
					border-radius: 50rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 50rpx;
					width: 150rpx;
					height: 50rpx;
					font-size: 30rpx;
					font-weight: 500;
				}

				.zsy_view {
					margin-top: 15rpx;
					display: flex;
					width: 100%;
				}

				.sumMoney_view {
					font-size: 50rpx;
					font-weight: 500;
					color: #333333;
					width: 75%;
				}

				.duihuan_btn {
					margin-left: 10rpx;
					background: #252323;
					border-radius: 50rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 60rpx;
					width: 150rpx;
					height: 60rpx;
					font-size: 30rpx;
					font-weight: 500;
				}
			}

		}

		.main {
			.integrals-box {
				margin-bottom: 50rpx;
				margin-top: 40upx;
				background-color: #FFF;
				padding: 10upx 34upx 10upx 40upx;
				margin: 25rpx;
				border-radius: 10rpx;

			}
		}

		.integral {
			width: 100%;
			height: 92upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left1 {
				display: flex;
				align-items: center;
				flex: 1;


				text {
					color: #333333;
					font-size: 38rpx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;

				}
			}

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				image {
					width: 52rpx;
					height: 52rpx;

				}

				text {
					margin-left: 34rpx;
					color: #333333;
					font-size: 30rpx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;

				}

				button {
					flex: 1;
					padding: 0;
					margin: 0;
					border: none;
					background: transparent;
					text-align: left;
				}

				button::after {
					border: none;
				}

				button::before {
					border: none;
				}

				.view-text {
					font-size: 28upx;
					color: #333333;
					margin-left: 20upx;
				}
			}

			.right {
				font-size: 28upx;
				color: #333333;
			}
		}

		.integral1 {
			height: 48rpx;

			.left {
				text {
					font-size: 40rpx;
				}
			}
		}
	}
</style>