guosen-ldt-client/pages/mine/mine.vue

<template>
	<view >
		<!-- 扫一扫错误回调 -->
		<u-modal title="扫描异常"  confirm-color="#dc9b21"  v-model="scanNotify.scan" :content="scanNotify.scanMessage"></u-modal>
		<view style="position: relative;">
			<image src="@/static/icon/bg.png" class="bg-img"></image>
			<image src="@/static/icon/bg-yin.png" class="shuiyin" mode=""></image>
			<view class="card">
				<view class="info" v-if="vuex_userId">
					<view class="flex">
						<image class="avatar" :src="userInfo.avatar"></image>
						<view class="nickname">
							<block style="display: flex;">
								<text >{{userInfo.nickName}}</text>
								<view v-if="vuex_agenter_type!=0" class="cu-tag bg-tag sm round margin-left-20">
									<text v-if="vuex_agenter_type==1">独家代理</text>
									<text v-if="vuex_agenter_type==2">渠道合伙人</text>
								</view>
							</block>
						</view>
					</view>
					<!-- <view class="center padding-right-20">
						<image style="width: 50rpx;height: 50rpx;" src="../../static/icon/setting.png"></image>
					</view> -->
				</view>
				
				<view class="info" v-else>
					<view class="flex">
						<image class="avatar" src="/static/icon/avatar.png"></image>
						<view class="nickname">
							<block style="display: flex;">
								<text >用户未登录</text>
								<view @click="showLogin" class="cu-tag bg-tag sm round margin-left-20">
									点击登录
								</view>
							</block>
						</view>
					</view>
					<view class="center padding-right-20" @click="jump()">
						<image style="width: 50rpx;height: 50rpx;" src="../../static/icon/setting.png"></image>
					</view>
				</view>
				
				<view class="cu-list grid col-3 no-border" style="border-radius:20rpx ;">
					<view class="cu-item" @click="item.name=='扫一扫'? scanCode() :jump(item.path)" v-for="(item,index) in menuList" :key="index">
						<view class="grid-icon" >
							<image  style="width: 66rpx;height: 66rpx;" :src="item.icon"/>
						</view>
						<text  style="color: #242424;font-size: 26rpx;" >{{item.name}}</text>
						<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="navbar-top" :style="{ 'background': 'rgba(255, 139, 47,'+toumindu+')'}">
			<view class="text-center text-white title ">联兑通</view>
		</view>
		
		<view class="account">
			<text class="title">我的账户</text>
			
			<view class="menu">
				<view class="item" @click="jump('/pages/mine/my-points/my-points?point='+userInfo.point)">
					<text>{{userInfo.point || 0}}</text>
					我的积分
				</view>
				
				<view class="item" @click="jump('/pages/mine/my-balance/my-balance?pointValue='+userInfo.pointValue)">
					<text>{{userInfo.pointValue || 0}}</text>
					余额
				</view>
			</view>
		</view>
		
		<view class="exchange">
			<view class="top" style="padding: 20rpx 30rpx 10rpx;">
				<text>积分通兑</text>
				<text @click="jump('/pages/mine/my-points/exchange')">更多 ></text>
			</view>
			
			<view class="menu-list">
				<view class="item item1">
					<image src="@/static/icon/jiayou.png" mode=""></image>
					<text class="title" style="color: #F6532A;">积分加油站</text>
					<view class="cu-btn round sm" >
						去充值
					</view>
				</view>
				<view class="item item2">
					<image src="@/static/icon/yidong.png" mode=""></image>
					<text class="title" style="color: #4AB0FF;">中国移动</text>
					<view class="cu-btn round sm" >
						120:100兑入
					</view>
				</view>
				<view class="item item3">
					<image src="../../static/bank/BOC.png" mode=""></image>
					<text class="title" style="color: #CF4948;">中国银行</text>
					<view class="cu-btn round sm">
						530:100兑入
					</view>
				</view>
			</view>
		</view>
		
		<view class="consume" v-if="false">
			<view class="top" style="padding: 20rpx 30rpx 10rpx;">
				<text>赚积分</text>
				<text>更多 ></text>
			</view>
			<view class="cu-list grid col-3 no-border" style="border-radius:20rpx ;">
				<view class="cu-item" @click="jump(item.path)" v-for="(item,index) in gainList" :key="index">
					<view class="grid-icon" >
						<image  style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" :src="item.icon"/>
					</view>
					<text  style="color: #222222;font-size: 26rpx;" >{{item.name}}</text>
					<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
				</view>
			</view>
		</view>
		
		<view class="consume" @click="jump('/pages/gain/gain',1)">
			<view class="top" style="padding: 20rpx 30rpx 10rpx;">
				<text>去花积分</text>
				<text>更多 ></text>
			</view>
			
			<view class="cu-list grid col-4 no-border" style="border-radius:20rpx ;">
				<view class="cu-item" @click.stop="jumpMiniProgram(item.path)" v-for="(item,index) in pointsList" :key="index">
					<view class="grid-icon" >
						<image  style="width: 88rpx;height: 88rpx;" :src="item.icon"/>
					</view>
					<text  style="color: #222222;font-size: 26rpx;" >{{item.name}}</text>
					<view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
				</view>
			</view>
		</view>
		
		<login ref="login"  @signIn="signIn"></login>
	</view>
</template>

<script>
	import login from "@/components/login.vue"
	export default {
		components:{
			login
		},
		data() {
			return {
				scanNotify:{scan: false,scanMessage:'扫描错误，请稍后重试！' },
				toumindu: 0.00,
				//功能列表
				menuList:[],
				gainList:[],
				pointsList:[],
				//用户信息
				userInfo:{},
				
				//跳回收银台的逻辑
				query:''
			}
		},
		onPageScroll(obj){
			this.toumindu = obj.scrollTop*0.006;
		},
		onLoad(options) {
			//获取从收银台传过来的参数，处理新用户扫码进入收银台再进入首页的情况
			if (!this.$isEmpty(options.query)) {
				this.query=options.query
			}
		},
		onShow() {
			this.fetchStatic()
			this.login()
		},
		methods: {
			async init(){
				await this.fetchUserInfo()
				await this.judgeAgenterType()
			},
			async judgeAgenterType(){
				let params={
					userId:this.vuex_userId,
					enabled:1
				}
				let res=await this.$api.agenter.list(params)
				if (!this.$isEmpty(res.data.records)) {
					let item=res.data.records[0]
					let type=this.$isEmpty(item.agenterTypeId)?1:2
					this.$u.vuex('vuex_agenter_type',type)
				}
			},
			async fetchUserInfo(){
				let params={
					id:this.vuex_userId
				}
				let res=await this.$api.loginUser.detail(params)
				if (this.$isEmpty(res.data)) {
					//清除userId和手机号
					this.$u.vuex('vuex_userId',null)
					this.$u.vuex('vuex_phone',null)
					this.$cache.remove('lifeData')
					this.$cache.remove('userInfo')
					//刷新当前页
					this.login()
				}else{
					this.userInfo=res.data
				}
			},
			// 登录 begin
			showLogin(){
				this.$refs.login.show()
			},
			showPhoneModal(){
				this.$refs.login.showPhoneModal()
			},
			signIn(resp){
				//获取手机号
				if (this.$isEmpty(this.vuex_phone)) {
					this.showPhoneModal()
				}else{
					this.$u.toast('登录成功')
				}
				//获取数据
				this.init()
				
				//处理跳回收银台的情况
				if (!this.$isEmpty(this.query)) {
					uni.redirectTo({
						url:"/pages/checkstand/index?query="+this.query
					})
				}
				
			},
			async login(e){
				if (this.$isEmpty(this.vuex_userId)) {
					this.showLogin()
					return
				}
				//获取数据
				this.init()
				//获取手机号
				if (this.$isEmpty(this.vuex_phone)) {
					this.showPhoneModal()
				}
			},
			// 登录 end
			scanCode(){
				const _this = this;
				uni.scanCode({
				    success: function (res) {
						let result=res.result
						let url=result.split("#")[1]
						_this.jump(url)
				    },
					fail: (res) => {
						if(res.errMsg!='scanCode:fail cancel'){
							this.scanNotify = {scan: true,scanMessage: res.errMsg};
						}
					}
				});
			},
			jump(url,type){
				if (type==1) {
					uni.switchTab({
						url
					})
					return
				}
				if (this.$isEmpty(this.vuex_userId)) {
					this.login()
					return
				}
				uni.navigateTo({
					url
				})
			},
			jumpMiniProgram(appid,path){
				this.$mpi.navigateToMiniProgram(appid)
			},
			fetchStatic(){
				this.menuList=[
					{
						icon:'/static/icon/scan.png',
						name:'扫一扫',
						path:'/pages/checkstand/index'
					},
					{
						icon:'/static/icon/pay.png',
						name:'付款码',
						path:'/pages/checkstand/pay-qrcode'
					},
					{
						icon:'/static/icon/setting1.png',
						name:'设置',
						path:'/pages/mine/setting/setting'
					}
				]
				this.gainList=[
					{
						icon:'/static/icon/daili.png',
						name:'成为代理',
						path:'/pages/mine/card/card'
					},
					{
						icon:'/static/icon/xianfeng.png',
						name:'音乐先锋榜',
						path:'/pages/mine/card/card'
					},
					{
						icon:'/static/icon/xianfeng.png',
						name:'音乐先锋榜',
						path:'/pages/mine/card/card'
					},
				]
				this.pointsList=[
					{
						icon:'/static/icon/life.png',
						name:'生活服务',
						path:''
					},
					{
						icon:'/static/icon/jiaotong.png',
						name:'交通出行',
						path:this.$global.APPID.didi
					},
					{
						icon:'/static/icon/shop.png',
						name:'购物',
						path:''
					},
					{
						icon:'/static/icon/yiyao.png',
						name:'医疗',
						path:this.$global.APPID.nanyue
					},
					
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-tag{
		color: #FFFFFF;
		background-color: #EA3723;
	}
	.shuiyin{
		overflow: hidden;
		width: 260rpx;
		height: 280rpx;
		position: absolute;
		right: 10rpx;
		top: 30rpx;
	}
	
	.bg-img{
		width: 100vw;
		height: 420rpx;
	}
	
	.navbar-top{
		position: fixed;
		width: 100%;
		top: 0;
		z-index:99999;
		padding-top:var(--status-bar-height);
		transition: top .25s;
		.title{
			padding: 18.18rpx 0;
		}
	}
	.card{
		position: relative;
		margin: -240rpx 20rpx 0;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
		.info{
			padding: 20rpx 20rpx 0;
			display: flex;
			justify-content: space-between;
			
			.avatar{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			
			.nickname{
				font-weight: 800;
				color: #222222;
				font-size: 30rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.account{
		padding: 20rpx;
		color: #222222;
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
		.title{
			padding-left: 20rpx;
			font-weight: 800;
			font-size: 34rpx;
			color: #26272F;
		}
		
		
		.menu{
			display: flex;
			justify-content: space-around;
			
			view{
				padding-top: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				
				text:first-child{
					font-weight: 800;
					padding-bottom: 10rpx;
					font-size: 32rpx;
					color: #FF9447;
				}
				
				text:last-child{
				}
			}
		}
	}
	
	.exchange{
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 10rpx 10rpx 30rpx;
		margin: 20rpx;
		
		.top{
			text:first-child{
				font-size: 34rpx;
				font-weight: 800;
				color: #26272F;
			}
			
			text:last-child{
				padding-top: 10rpx;
				font-size: 26rpx;
				color: #999999;
			}
		}
		
		.menu-list{
			display: flex;
			justify-content: space-around;
			
			.item{
				margin-top: 20rpx;
				width: 31%;
				padding: 15rpx 0;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				
				.title{
					font-weight: 800;
					margin-bottom: 10rpx;
				}
				
				image{
					margin-bottom: 10rpx;
					border-radius: 50%;
					padding: 15rpx;
					background-color: #FFFFFF;
					width: 70rpx;
					height: 70rpx;
				}
			}
			
			.item1{
				background-image: linear-gradient(to right,#F7F0E7,#E9CEB9);
				
				view{
					font-size: 26rpx;
					padding: 10rpx 50rpx;
					background-color: #FF9447;
					color: #FFFFFF;
				}
			}
			.item2{
				background-image: linear-gradient(to right,#E8F2FC,#C3D5ED);
				
				view{
					font-size: 26rpx;
					padding: 10rpx 20rpx;
					background-color: #4AB0FF;
					color: #FFFFFF;
				}
			}
			
			.item3{
				background-image: linear-gradient(to right,#F7E9E9,#EAC4C3);
				view{
					font-size: 26rpx;
					padding: 10rpx 20rpx;
					background-color: #CF4948;
					color: #FFFFFF;
				}
			}
			
		}
		
		
		
	}
	
	
	.consume{
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 10rpx 10rpx 30rpx;
		margin: 20rpx;
		
		.top{
			text:first-child{
				font-size: 34rpx;
				font-weight: 800;
				color: #26272F;
			}
			
			text:last-child{
				padding-top: 10rpx;
				font-size: 26rpx;
				color: #999999;
			}
		}
	}
	
	.top{
		display: flex;
		justify-content: space-between;
	}
</style>