jje_uniapp/pages/my/index.vue

<template>
	<view class="page" >
		<view class="backImage">
			<image class="backImage" src="/static/me/u655.png"></image>
		</view>

		<view class="content">

				<view class="userInfo flex-row justify-between  ">
					<view class="flex-row">
						<view class="userPhoto" @click="navigateToPage('/myPages/userInfo/index')">
							<image class="userPhoto" :src="userInfo.selfPhotoUrl || '/static/me/u4.png'"></image>
						</view>
						<view class="userTitle flex-col justify-center" @click="navigateToPage('/myPages/userInfo/index')">
							<text class="nickName">HI,亲爱的{{ userInfo.ncikName }}</text>
							<view class="flex-row">
								<text class="xinxTitle">点击完善个人信息</text>
								<u-icon name="arrow-right" color="#333333" size="16"></u-icon>
							</view>
						</view>
					</view>

					<view class="qrcodeView flex-col justify-center" @click="navigateToPage('/pages/qrCode/index')">
						<image class="qrcode" src="/static/me/u5.png"></image>
						<text class="qrcodeTitle">会员码</text>
					</view>

				</view>

				<view class="sudoku flex-col">
					<view class="balance-name">
						<text>我的资产</text>
					</view>
					<view class="balance flex-row justify-around">
						<view @click="navigateToPage('/myPages/recharge/index')">
							<view class="icon flex-row justify-center">
								<u-icon name="/static/me/u701.png" color="red" size="30"></u-icon>
							</view>
							<view class="name">
								余额
							</view>
							<view class="num">
								<text>￥{{userInfo.balance || 0}}</text>
							</view>
						</view>
						<view>
							<view class="icon flex-row justify-center">
								<u-icon name="/static/me/u680.png" color="red" size="30"></u-icon>
							</view>
							<view class="name">
								积分
							</view>
							<view class="num">
								<text>{{userInfo.integral|| 0}}</text>
							</view>
						</view>
						<view @click="navigateToPage('/orderPages/myCoupon/index')">
							<view class="icon flex-row justify-center">
								<u-icon name="/static/me/u687.png" color="red" size="30"></u-icon>
							</view>
							<view class="name">
								优惠券
							</view>
							<view class="num">
								<text>{{userInfo.coupon || 0}}</text>
							</view>
						</view>
						<view>
							<view class="icon flex-row justify-center">
								<u-icon name="/static/me/u694.png" color="red" size="30"></u-icon>
							</view>
							<view class="name">
								电子币
							</view>
							<view class="num">
								<text>{{userInfo.electronicCurrency || 0}}</text>
							</view>
						</view>
					</view>

				</view>

				<view class="group">
					<uni-list>
						<uni-list-item :to="item.to" :title="item.title" showArrow :thumb="item.thumb" thumb-size="sm" :rightText="item.rightText"  v-for="(item,index) in group1" :key="index" />
					</uni-list>
				</view>

				<view class="group">
					<uni-list>
						<uni-list-item :to="item.to" :title="item.title" showArrow :thumb="item.thumb" thumb-size="sm"  v-for="(item,index) in group2" :key="index" />
					</uni-list>
				</view>

				<view class="tabBarLineHeight"></view>

		</view>
		<view class="tabBarView">
			<tab-bar :tabIndex="tabIndex"></tab-bar>
		</view>
	</view>
</template>

<script >
import tabBar from "../../components/tabBar/tabBar";
export default {
	components: {
		tabBar
	},
	data() {
		return {
			group1:[
				// {thumb:'/static/me/u1796.png',title:'贡献奖励记录',rightText:'',to:''},
				{thumb:'/static/me/u1803.png',title:'实名认证',rightText:'',to:'/myPages/realNameAuth/index'},
				// {thumb:'/static/me/u1812.png',title:'服务对象管理',rightText:'',to:'/myPages/ServiceObjectManagement/index'},
        		{thumb:'/static/me/u3.png',title:'推广中心',rightText:'',to:'/myPages/promotionCenter/index'},
				// {thumb:'/static/me/u1833.png',title:'新老系统切换',rightText:'',to:'/myPages/systemSwitch/index'},
				{thumb:'/static/me/u826.png',title:'储值服务',rightText:'',to:'/myPages/recharge/index'}
			],
			group2:[
				{thumb:'/static/me/u1829.png',title:'关于我们',rightText:'',to:'/myPages/aboutOur/index'},
				{thumb:'/static/me/u10.png',title:'个人信息',rightText:'',to:'/myPages/userInfo/index'},
				{thumb:'/static/me/u101.png',title:'设置',rightText:'',to:'/myPages/setting/index'}
			],
			height:'',
			title: 'Hello',
			tabIndex: 4,
			userInfo: {}
		}
	},

	// 分享到朋友圈
	onShareTimeline() { },
	// 分享到用户
	onShareAppMessage(OBJECT) { },
	onLoad() {
		uni.hideTabBar({
			animation:false
		})
		let sysInfo = uni.getSystemInfoSync()
		this.height = sysInfo.screenHeight +'px'
	},

	onShow(){
		this.userInfo = uni.getStorageSync('userInfo')
		if (this.userInfo.isAttestation){
			this.group1[0].rightText = '已认证'
		}else {
			this.group1[0].rightText = '未实名认证，去认证'
		}

		if (this.userInfo.selfPhoto){
			this.getImgUrlByOssId(this.userInfo.selfPhoto)
		}

	},

	methods: {

		getImgUrlByOssId(Id){
			this.$api.getImgUrlByOssId(Id).then(res=>{
				this.userInfo.selfPhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
			});
		},
		navigateToPage(url){
			uni.navigateTo({
				url:url
			})
		},


	}
}
</script>

<style>
	@import '/common/css/common.css';
	@import './index.rpx.css';
</style>