bike/pages/my.vue

<template>
	<view class="page">
		<u-navbar title="个人中心" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='36'></u-navbar>
		<view class="topbg">
			<view class="topbox">
				<view class="info">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uZ5onboA1yozB2VFaCI2" mode=""></image>
					<view class="cont">
						<view class="name">
							微信用户
						</view>
						<view class="phone">
							138****1123
						</view>
					</view>
				</view>
			</view>
			<view class="btnbg">
				<view class="btnbox">
					<view class="btncard">
						<view class="card_li" @click="topage(1)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/u3ILM6aE0MdFo3ZKiYPH" mode=""></image>
								<view class="text">
									押金
								</view>
								<view class="tip" v-if="info.bindDeviceNum==null">
									未充值
								</view>
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view>
						<view class="card_li" @click="topage(2)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/u4Y4UAai9GLSaCBMMIsv" mode=""></image>
								<view class="text">
									我的订单
								</view>
								
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view>
						<view class="card_li" @click="topage(3)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/u245BAqGOvTbYYGXJcrC" mode=""></image>
								<view class="text">
									问题上报记录
								</view>
								
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view>
						<view class="card_li" @click="topage(4)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/ufD1uFe0pknx00weXJaU" mode=""></image>
								<view class="text">
									用车指南
								</view>
								
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view>
						<view class="card_li" style="border-bottom:2rpx solid #fff ;" @click="topage(5)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uJFhEFoioikjCQqqWW3c" mode=""></image>
								<view class="text">
									计费规则
								</view>
								
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view>
					</view>
					<view class="btncard" style="margin-top: 36rpx;"  v-if="false">
						<view class="card_li" @click="topage(5)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/utp8xohLmuvcTiYZdGCL" mode=""></image>
								<view class="text">
								用户协议
								</view>
							
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view>
						<view class="card_li" @click="topage(6)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/um7bn51NCkfnuQbP0toj" mode=""></image>
								<view class="text">
									隐私政策
								</view>
								
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view>
					
						<view class="card_li" style="border-bottom:2rpx solid #fff ;" @click="topage(7)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uJ1TRgb6xURsKZo5GUj8" mode=""></image>
								<view class="text">
								关于我们
								</view>
								
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#4C97E7",
				},
				info:{}


			}
		},
		onShow() {
			this.getuserInfo()
		},
		methods: {
			topage(num){
				if(num==0){
					// uni.navigateTo({
					// 	url:''
					// })
				}else if(num==1){
					uni.navigateTo({
						url:'/page_user/yj'
					})
				}else if(num==2){
					uni.navigateTo({
						url:'/page_user/good_list'
					})
				}else if(num==3){
					uni.navigateTo({
						url:'/page_user/qsrecord'
					})
				}else if(num==4){
					uni.navigateTo({
						url:'/page_user/yczn'
					})
				}
				else if(num==5){
					uni.navigateTo({
						url:'/page_user/jfgz'
					})
				}
				// else if(num==6){
				// 	uni.navigateTo({
				// 		url:'/pages/my'
				// 	})
				// }else if(num==7){
				// 	uni.navigateTo({
				// 		url:'/page_user/gzsb?mac='+this.mac
				// 	})
				// }
			},
			getuserInfo(){
				this.$u.get("/getAppInfo").then((res) => {
				
					if (res.code == 200) {
						this.$store.commit('SET_USERID', res.user.userId);
						this.info=res.user
						uni.setStorageSync('role', res.user.role);
						if( res.user.role==2){
							uni.navigateTo({
								url:'/page_fix/fix_index'
							})
						}
					} else {
						uni.showToast({
							title: '未登录，请登录后尝试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.page {
		width: 750rpx;

		.topbg {
			width: 750rpx;
			background: #fff;
			height: 184rpx;
			.topbox{
				width: 750rpx;
				background: #4C97E7;
				height: 184rpx;
				border-radius: 0 0 100rpx 0;
				.info{
					padding-top: 40rpx;
					margin-left: 100rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					image{
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
					.cont{
						margin-left: 40rpx;
						width: 70%;
						.name{
							font-weight: 400;
							font-size: 32rpx;
							color: #FFFFFF;
							width: 100%;
						}
						.phone{
							margin-top: 4rpx;
							width: 100%;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
		.btnbg{
			width: 750rpx;
			background: #4C97E7;
			.btnbox{
				padding-top: 36rpx;
				width: 750rpx;
				background: #fff;
				
				border-radius: 100rpx 0 0 0;
				
				.btncard{
					padding: 0 54rpx;
					margin: 0 auto;
					width: 680rpx;
					// height: 438rpx;
					padding: 0 56rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
					border-radius: 34rpx 34rpx 34rpx 34rpx;
					.card_li{
						padding-top: 18rpx;
						width: 100%;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2rpx solid #D8D8D8;
						padding-bottom: 26rpx;
						.card_left{
							// width: 100%;
							display: flex;
							flex-wrap: nowrap;
							// align-items: center;
							
							image{
								margin-right: 28rpx;
								width: 40rpx;
								height: 40rpx;
							}
							.text{
								margin-right: 24rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #3D3D3D;
							}
							.tip{
								display: flex;
								align-items: center;
								justify-content: center;
								width: 80rpx;
								height: 28rpx;
								background: #FFEFEF;
								border-radius: 17rpx 17rpx 17rpx 17rpx;
								font-weight: 400;
								font-size: 16rpx;
								color: #FA5F5F;
							}
						}
						.icon-xiangyou1{
							font-size: 42rpx;
							color: #3D3D3D;
						}
						
					}
				}
			}
		}
	}
</style>