parts_shop_ui_LT/pages/tabBar/center.vue

<template>
	<view>
		<view class="topBackground" style="overflow:hidden">
			<view class="personal" style="background-color: rgba(0, 0, 0, 0);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);">
				<view style="height: 150rpx;">
					<view style="float: left;">
						<u-avatar :src="src" shape="circle" size="70"
							style="box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.4);"></u-avatar>
					</view>
					<view style="float: left;margin-left: 50rpx;margin-top: 10rpx;">
						<u--text color="#fff" :text="userName?userName:''" size="28"></u--text>
						<u--text color="#fff" v-if="role" :text="'角色:'+role"></u--text>
					</view>
				</view>
			</view>
		</view>
		<view class="tips">
			<view style="text-align: center;font-size: 32rpx;color: #525454;">
				<view>今日收入</view>
				<u-count-to :startVal="0" :endVal="0" color="#fd5003" fontSize="44"></u-count-to>
				<text style="color: #fd5003;">元</text>
				<u-grid :border="false">
					<u-grid-item>
						<text style="color: #525454;">推广海报</text>
					</u-grid-item>
					<u-grid-item>
						<text style="color: #525454;">轮毂升级</text>
					</u-grid-item>
					<u-grid-item>
						<text style="color: #525454;">我的足迹</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- <view class="head">
			<view style="display: flex;justify-content: space-between;width:96%;height:60rpx;line-height: 60rpx;margin: auto auto 30rpx auto;border-bottom: 1rpx solid #EDEDED;">
				<view>业务中心</view>
				<view><u--text suffixIcon="arrow-right" iconStyle="font-size: 18px" text="查看更多"></u--text></view>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item>
					<u--image :showLoading="true" src="../../static/images/user/PT.png" width="64rpx" height="64rpx" @click="click"></u--image>
					<text class="grid-text">采购跟踪</text>
				</u-grid-item>
				<u-grid-item>
					<u--image :showLoading="true" src="../../static/images/user/SO.png" width="64rpx" height="64rpx" @click="click"></u--image>
					<text class="grid-text">销售订单</text>
				</u-grid-item>
				<u-grid-item>
					<u--image :showLoading="true" src="../../static/images/user/CC.png" width="64rpx" height="64rpx" @click="click"></u--image>
					<text class="grid-text">渠道客户</text>
				</u-grid-item>
				<u-grid-item>
					<u--image :showLoading="true" src="../../static/images/user/VR.png" width="64rpx" height="64rpx" @click="click"></u--image>
					<text class="grid-text">拜访记录</text>
				</u-grid-item>
			</u-grid>
		</view> -->
		<!-- <view class="head">
			<view style="display: flex;justify-content: space-between;width:96%;height:60rpx;line-height: 60rpx;margin: auto auto 30rpx auto;border-bottom: 1rpx solid #EDEDED;">
				办公中心
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item>
					<u--image :showLoading="true" src="../../static/images/user/QX.png" width="64rpx" height="64rpx" @click="click"></u--image>
					<text class="grid-text">权限设置</text>
				</u-grid-item>
				<u-grid-item>
					<u--image :showLoading="true" src="../../static/images/user/GG.png" width="64rpx" height="64rpx" @click="click"></u--image>
					<text class="grid-text">公告管理</text>
				</u-grid-item>
				<u-grid-item>
					<u--image :showLoading="true" src="../../static/images/user/GC.png" width="64rpx" height="64rpx" @click="click"></u--image>
					<text class="grid-text">工厂政策</text>
				</u-grid-item>
				<u-grid-item>
					<u--image :showLoading="true" src="../../static/images/user/YG.png" width="64rpx" height="64rpx" @click="click"></u--image>
					<text class="grid-text">员工管理</text>
				</u-grid-item>
			</u-grid>
		</view> -->
		<view class="head">
			<u-cell-group title-bg-color="rgb(243, 244, 246)" :border="false">
				<u-cell title="供应商" icon="account" :isLink="true" center @click="pageJump('supplier')"></u-cell>
				<u-cell title="设置" icon="setting" :isLink="true" :border="false" center @click="setUp"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: uni.getStorageSync('userInfo').avatar,
				revenueTop: 0,
				userName: uni.getStorageSync('userInfo').account,
				role: uni.getStorageSync('userInfo').role_name
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (e) => {
					this.revenueTop = e.statusBarHeight
				}
			})
		},
		onShow() {
			this.src = uni.getStorageSync('userInfo').avatar
			this.userName = uni.getStorageSync('userInfo').account
			this.role = uni.getStorageSync('userInfo').role_name
		},
		methods: {
			click() {
				uni.showToast({
					title: '暂无功能',
					icon: 'none'
				});
			},
			setUp() {
				this.$u.route('/pages/user/setUp');
			},
			pageJump(value) {
				switch (value) {
					case "supplier":
						uni.$u.route('/pages/views/supplier/index');
						break;
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.topBackground {
		width: 100%;
		height: 300rpx;
		background: url("../../static/images/view/home/head_bg.png") no-repeat;
		background-size: 100% 100%;
		padding-top: var(--status-bar-height);
	}

	.tips {
		width: 96%;
		margin: 0 auto;
		padding: 20rpx 0;
		background-color: #FFFFFF;
		margin-top: -100rpx;
		border-radius: 30rpx;
		box-shadow: 0px 1px 14px 4px rgba(0, 0, 0, 0.04);
		z-index: 999;
	}

	.personal {
		margin: 0 auto;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 40rpx;
		padding: 20rpx;
		box-shadow: 0px 1px 14px 4px rgba(0, 0, 0, 0.04);
	}

	.head {
		margin: 0 auto;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 40rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
		box-shadow: 0px 1px 14px 4px rgba(0, 0, 0, 0.04);
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>