dingdong-master/pages/index/my-home.vue

<template>
	<view>
		<view class="bg-gradual-color padding text-center"
			:style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
			<view class="cu-avatar round"
				:style="'width: 150rpx; height: 150rpx; background-image:url(' + curUserInfo.workerLogoUrl + ');'">
			</view>
			<view class="text-xl margin-sm">{{curUserInfo.name}}</view>
			<view class="cu-list grid no-border col-2" style="background-color: inherit;">
				<view class="cu-item" @click="clickMenuItem({pageUrl: '/pages/my/my-money-bag'})">
					<view class="margin-bottom-xs text-xxl">{{myInfo.balance}}</view>
					<view>我的钱包</view>
				</view>
				<view class="cu-item solid-left">
					<view class="margin-bottom-xs text-xxl">{{myInfo.rate}}</view>
					<view>服务评分</view>
				</view>
			</view>
		</view>
		<view class="paper-drawer-bar margin-bottom-with-bar">
			<view class="margin-lr-sm cu-list grid no-border col-4 shadow-warp">
				<view class="cu-item">
					<view class="cuIcon-remind margin-bottom-xs middle-icon"
						:class="myInfo.door24h ? 'text-main-color' : 'text-gray'"></view>
					<view :class="myInfo.door24h ? '' : 'text-gray'">24小时上门</view>
				</view>
				<view class="cu-item solid-left">
					<view class="cuIcon-safe margin-bottom-xs middle-icon"
						:class="myInfo.warranty72h ? 'text-main-color' : 'text-gray'"></view>
					<view :class="myInfo.warranty72h ? '' : 'text-gray'">72小时质保</view>
				</view>
				<view class="cu-item solid-left">
					<view class="cuIcon-profile margin-bottom-xs middle-icon"
						:class="myInfo.certification ? 'text-main-color' : 'text-gray'"></view>
					<view :class="myInfo.certification ? '' : 'text-gray'">实名认证</view>
				</view>
				<view class="cu-item solid-left">
					<view class="cuIcon-moneybag margin-bottom-xs middle-icon"
						:class="myInfo.deposit ? 'text-main-color' : 'text-gray'"></view>
					<view :class="myInfo.deposit ? '' : 'text-gray'">保证金</view>
				</view>
			</view>
			<view class="bg-white">
				<view class="margin-top">
					<view class="flex justify-between align-center solid-bottom padding padding-lr-lg text-lg" v-for="(item, index) in menuList" @click="clickMenuItem(item)">
						<view class="flex justify-start align-center">
							<view class="margin-right-sm text-main-color text-xl"><view :class="'cuIcon-' + item.icon"></view></view>
							<view>{{item.name}}</view>
						</view>
						<view class="cuIcon-right"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'my-home',
		data() {
			return {
				pageContentTop: this.CustomBar,
				curUserInfo: {},
				myInfo: {},
				menuList: [{
					name: '提现',
					icon: 'moneybag',
					pageUrl: '/pages/my/withdraw'
				}, {
					name: '交易明细',
					icon: 'form',
					pageUrl: '/pages/my/my-money-bag'
				}, {
					name: '服务明细',
					icon: 'calendar'
				}, {
					name: '师傅入驻',
					icon: 'profile',
					pageUrl: '/pages/my/master-occupancy'
				}, {
					name: '个人信息',
					icon: 'lock',
					pageUrl: '/pages/my/personal-info'
				}, {
					name: '法律声明',
					icon: 'read'
				}, {
					name: '店铺认证',
					icon: 'taoxiaopu'
				}, {
					name: '签约协议',
					icon: 'punch'
				}, {
					name: '反馈到平台',
					icon: 'comment'
				}, {
					name: '开放平台',
					icon: 'community'
				}, {
					name: '师傅缴费',
					icon: 'sponsor',
					pageUrl: '/pages/my/pay-deposit'
				}]
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.myInfo = await this.$api.data('myInfo');
			},
			clickMenuItem(menu) {
				uni.navigateTo({
					url: menu.pageUrl
				})
			}
		},
	}
</script>

<style scoped>
	.cu-list.grid.no-border>.solid-left.cu-item:after {
		border-left: 1upx solid rgba(255, 255, 255, 0.5);
	}

	.paper-drawer-bar {
		position: relative;
		top: -100rpx;
	}

	.paper-drawer-bar-back {
		z-index: -1;
		padding-top: 100rpx;
	}
</style>