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/img/bg.png" class="bg-img"></image>
			<image src="../../static/img/bg-yin.png" class="shuiyin" mode=""></image>
			<view class="card">
				<view class="info">
					<image class="avatar" src="https://thirdwx.qlogo.cn/mmopen/vi_32/q6EwR5U6zFp8bYbUWb9HmFc5Q3R88x13Q0ZtOcVK5lO8AmtibQDRcuMA2Y7CmyuMCr6icceM3QibIKN2icAAxSvjpA/132"></image>
					<view class="nickname">
						<block style="display: flex;">
							<text >赖德福|德芙值得信赖</text>
							<view class="cu-tag bg-tag sm round margin-left-20">
								代理商
							</view>
						</block>
					</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')">
					<text>2000</text>
					我的积分
				</view>
				
				<view class="item" @click="$jump('/pages/mine/my-balance/my-balance')">
					<text>2000</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/zhongguo.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">
			<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">
			<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="$jump(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>
		
		
	</view>
</template>

<script>
	export default {
	
		data() {
			return {
				scanNotify:{scan: false,scanMessage:'扫描错误，请稍后重试！' },
				toumindu: 0.00,
				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/card.png',
						name:'卡包',
						path:'/pages/mine/card/card'
					}
				],
				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'
					},
				],
				pointsList:[
					{
						icon:'/static/icon/life.png',
						name:'生活服务',
						path:''
					},
					{
						icon:'/static/icon/jiaotong.png',
						name:'交通出行',
						path:''
					},
					{
						icon:'/static/icon/shop.png',
						name:'购物',
						path:''
					},
					{
						icon:'/static/icon/yiyao.png',
						name:'医疗',
						path:''
					},
					
				]
			}
		},
		onPageScroll(obj){
			this.toumindu = obj.scrollTop*0.006;
		},

		methods: {
			scanCode(){
				const _this = this;
				this.$jump('/pages/checkstand/index')
				// uni.scanCode({
				//     success: function (res) {
				// 		_this.$jump('/pages/checkstand/index')
				//     },
				// 	fail: (res) => {
				// 		if(res.errMsg!='scanCode:fail cancel'){
				// 			this.scanNotify = {scan: true,scanMessage: res.errMsg};
				// 		}
				// 	}
				// });
			},
		}
	}
</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;
			
			.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: 30rpx;
			font-weight: 800;
		}
		
		.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>