front-end/mobile-code/src/pages/home/user.vue

<template>
	<div class="app-main app-content">
		<div class="user-wrap">
			<!-- 未登录 -->
			<template v-if="$util.isEmpty(shopUser)">
				<div class="no-login-attr login-attr-wrap">
					<img :src="`${constant.imgUrl}/retail/user/attr-default.png`" alt mode="widthFix" />
				</div>
				<div class="button-wrap">
					<!-- #ifdef H5 -->
					<button class="button-com" @click="showPopup">申请会员</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button class="button-com mini-btn" open-type="getUserInfo" @getuserinfo="getWxAvatar">申请会员</button>
					<!-- #endif -->
				</div>
			</template>
			<!-- 已登录 -->
			<template v-else>
				<div class="is-login-attr">
					<div class="user-wrap-top">
						<div class="user-blo-left">
							<div class="user-name-warp">
								<div class="user-name">{{ shopUser.userName }}</div>
								<div class="user-level-img">
									<block v-if="!$util.isEmpty(shopUser)">
										<appVipModule v-if="shopUser.member > 0" class="level-img" :text="`VIP${shopUser.member}`" />
										<appVipModule v-else-if="shopUser.member == 0" class="level-img" :text="`VIP`" />
										<div class="nomal-text" v-else>普通客户</div>
									</block>
								</div>
							</div>
							<div class="user-level">
								<!-- <div class="user-level-icon">
									<img src="" alt />
								</div>-->
								<div>成长值 {{ shopUser.userAsset.growth }}/{{ shopUser.userAsset.nextLevelGrowth }}</div>
							</div>
						</div>
						<div class="user-blo-right login-attr-wrap">
							<img :src="smallAvatarUrl | default_avatar" alt="头像" mode="widthFix" />
						</div>
					</div>
					<div class="user-wrap-bottom">
						<!-- <div class="level-lint"></div> -->
						<div class="level-lint">
							<progress :percent="percentNum" stroke-width="2" activeColor="#ffe4bd" backgroundColor="#FF2842" />
						</div>
						<div>ID {{ shopUser.id }}</div>
					</div>
				</div>
			</template>
		</div>
		<template v-if="!$util.isEmpty(shopUser)">
			<div class="surplus-wrap">
				<div class="surplus-left">
					<div>我的余额(¥)</div>
					<div class="my-surplus">{{ shopUser.userAsset.balance || 0.00 }}</div>
				</div>
				<div class="surplus-right">
					<button class="button-com" v-if="shopUser.subscribe != 1 || !shopUser.mobile" @click="showPopup">申请会员</button>
					<!-- <button class="button-com" v-if="shopUser.isFull != 1" @click="showPopup">申请会员</button> -->
					<!-- <button class="button-com mini-btn" open-type="getUserInfo" v-if="loginInfo.isFull != 1" @getuserinfo="getWxAvatar">申请会员</button> -->
					<button class="button-com" @click="pageToFn({
					url: '/pages/pay/index',
					query: {
						pageStatus: 'recharge'
					}
				})">充值</button>
					<button class="button-com red" @click="pageToFn({
					url: '/pages/pay/index',
					query: {
						pageStatus: 'payment'
					}
				})">付款</button>
				</div>
			</div>
		</template>
		<div class="list-content">
			<tui-list-view class="tui-list-view">
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/order/list')">
					<div class="list-wrap">
						<div class="list-label">我的订单</div>
						<!-- <div class="list-text">{{ shopUser.userAsset.totalBuyNum }}</div> -->
					</div>
				</tui-list-cell>
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/interest/invite')">
					<div class="list-wrap">
						<div class="list-label">我的邀请</div>
						<div class="list-text">领取奖励</div>
					</div>
				</tui-list-cell>
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/coupon/list')">
					<div class="list-wrap">
						<div class="list-label">我的优惠券</div>
					</div>
				</tui-list-cell>
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/interest/level')">
					<div class="list-wrap">
						<div class="list-label">会员权益</div>
					</div>
				</tui-list-cell>
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/user/password')">
					<div class="list-wrap">
						<div class="list-label">支付密码设置</div>
					</div>
				</tui-list-cell>
			</tui-list-view>
		</div>
		<div class="list-content">
			<tui-list-view class="tui-list-view">
				<tui-list-cell class="tui-list" :last="true" @click="logoutFn()">
					<div class="list-wrap">
						<div class="list-label">退出登录</div>
					</div>
				</tui-list-cell>
			</tui-list-view>
		</div>
		<!-- 登录弹窗 -->
		<login-popup :show="popupShow" :info="wxInfo" :merchantInfo="merchantInfo" :isPublic="isPublic" @hide="hidePopup" />
		<!-- 登录弹窗 -->
		<app-trademark />
		<!-- <app-footer :activeIndex="3" /> -->
		<!-- login -->
		<go-login :show.sync="loginShow" />
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	// import AppFooter from '@/components/app-footer'
	import TuiListView from '@/components/plugin/list-view'
	import TuiListCell from '@/components/plugin/list-cell'
	import LoginPopup from '@/pages/home/components/login-popup'
	import AppTrademark from '@/components/module/app-trademark'
	import GoLogin from '@/pages/home/components/go-login.vue'
	import AppVipModule from '@/components/module/app-vip'
	import { getMiniAppUrl, isWxBrowser } from '@/utils/common'
	// api
	import { getMerchantInfo } from '@/api/common'
	import { getShopUser } from '@/utils/auth'
	// import { getWxInfo, getWxPhone } from '@/api/mini'
	export default {
		name: 'user',
		components: {
			// AppFooter
			TuiListView,
			TuiListCell,
			LoginPopup,
			AppTrademark,
			GoLogin,
			AppVipModule
		},
		data() {
			return {
				constant: this.$constant,
				popupShow: false,
				isPublic: false,
				stepIndex: 0,
				wxInfo: {},
				loginShow: false,
				merchantInfo: {}
			}
		},
		computed: {
			...mapGetters({ shopUser: 'getShopUser' }),
			// #ifdef MP-WEIXIN
			...mapGetters({ loginInfo: 'getLoginInfo' }),
			// #endif
			smallAvatarUrl() {
				return this.shopUser.smallAvatarUrl || ''
			},
			percentNum() {
				if (this.$util.isEmpty(this.shopUser)) return 0
				return Math.round((this.shopUser.userAsset.growth / this.shopUser.userAsset.nextLevelGrowth) * 100)
			}
		},
		onLoad(option) {
			// this.init()
		},
		methods: {
			init() {
				getShopUser().then(res => {
					if (this.option.scan == 1 && res.isFull != 1) {
						this.isPublic = true
						this.popupShow = true
					}
				})
				getMerchantInfo().then(res => {
					this.merchantInfo = res.data
				})
			},
			// pageTo
			pageToFn(item) {
				if (this.$util.isLogin()) {
					this.$util.pageTo(item)
				} else {
					this.loginShow = true
				}
			},
			showPopup() {
				// this.popupShow = true
				// #ifdef H5
				this.pageTo('/pages/user/register')
				// if (isWxBrowser()) {
				// 	location.href = `${this.$constant.hostUrl}/auth/prepare?url=${encodeURIComponent(getMiniAppUrl(this.option, true))}`
				// }
				// this.$util.getCheckLogin()
				// #endif
				// #ifdef MP-WEIXIN
				this.popupShow = true
				// #endif
			},
			hidePopup() {
				this.popupShow = false
			},
			logoutFn() {
				uni.clearStorageSync()
				// #ifdef H5
				// location.reload()
				this.$util.pageTo({
					url: '/pages/home/index',
					type: 4
				})
				// #endif
				// #ifndef H5
				this.$util.pageTo({
					url: '/pages/home/index',
					type: 4
				})
				// #endif
			}
			// 获取微信信息
			// getWxAvatar() {
			// 	uni.getUserInfo({
			// 		provider: 'weixin',
			// 		success: res => {
			// 			console.log('res', res)
			// 			// this.popupShow = true
			// 			getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(subRes => {
			// 				console.log('用户信息', subRes)
			// 				this.wxInfo = subRes.data
			// 				this.popupShow = true
			// 			})
			// 		},
			// 		fail: () => {
			// 			// this.loading = false
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.user-wrap {
		height: 220px;
		background-image: url('../../static/images/user/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: 42px;
		color: #f5e5e5;
		.login-attr-wrap {
			width: 90px;
			height: 90px;
			border-radius: 50%;
			img {
				border-radius: 50%;
			}
		}
		.no-login-attr {
			margin: 0 auto;
			margin-bottom: 12px;
		}
		.is-login-attr {
			padding: 0 20px 0 48px;
			.user-wrap-top {
				@include disFlex(center, space-between);
				.user-name-warp {
					@include disFlex(center, flex-start);
					margin-bottom: 16px;
					.user-name {
						font-size: 36px;
						font-weight: 600;
						color: #fff;
						margin-right: 20px;
					}
					.level-img {
						/deep/.vip-text {
							top: 4px;
							left: 42px;
							transform: scale(0.8);
						}
					}
					.nomal-text {
						font-size: 24px;
						padding: 2px 16px;
						color: #f7f7f7;
						border: 1px solid #f7f7f7;
						display: inline-block;
						border-radius: 50px;
					}
				}
				.user-level {
					@include disFlex(center, flex-start);
				}
				.user-blo-right {
					margin-right: 30px;
				}
			}
			.user-wrap-bottom {
				.level-lint {
					border-bottom: 4px solid $mainColor;
					border-radius: 4px;
					margin-top: 20px;
					margin-bottom: 10px;
					position: relative;
					// &::before {
					// 	position: absolute;
					// 	top: 0;
					// 	left: 0;
					// 	display: inline-block;
					// 	content: '';
					// 	background-color: #ffe4bd;
					// 	width: 200px;
					// 	height: 4px;
					// 	border-radius: 4px;
					// }
				}
			}
		}
		.button-wrap {
			@include disFlex(center, center);

			.mini-btn {
				border: none !important;
			}
		}
	}
	.surplus-wrap {
		@include disFlex(flex-end, space-between);
		padding: 10px 40px 34px;
		background-color: #fff;
		.surplus-left {
			color: $fontColor3;
			.my-surplus {
				font-size: 46px;
				margin-top: 14px;
				color: #333;
				font-weight: bold;
			}
		}
		.surplus-right {
			margin-bottom: 10px;
			.button-com {
				margin-left: 20px;
			}
		}
	}
	.list-content {
		margin-bottom: 20px;
		// padding: 0 20px;
		background-color: #fff;
		.tui-list-cell {
			padding-left: 50px;
			padding-right: 50px;
		}
		.list-wrap {
			@include disFlex(center, space-between);
			width: calc(100% - 30px);
			padding-right: 30px;
			.list-text {
				color: $fontColor3;
			}
		}
	}
</style>