chelvc-custom/src/pages/tabbar/mine.vue

<template>
	<view class="container">
		<view :style="{ height: systemBar + 'px', backgroundColor: '#337bad' }" />
		<view>
			<view class="head-info">
				<view class="head-flex">
					<view class="flex">
						<view style="margin-right: 20rpx">
							<!-- <u-avatar :src="avatar" size="80" @tap="$Router.push('/pages/client/clientUser/personal')" /> -->
							<u-avatar :src="avatar" size="80" @click='handlerReviewImg' />
						</view>
						<view>
							<view class="nickname">{{ nickname }}</view>
							<view class="flex">
								<text class="setAuth" @tap="$Router.push('/PageMine/setting/index')">
									设置
								</text>
								<!-- <text class="setAuth">认证</text> -->
							</view>
						</view>
					</view>

					<view @tap="$Router.push('/PageMine/setting/index')">
						<u-icon name="setting" color="#ffffff" size="26"></u-icon>
					</view>
				</view>
				<!-- 列表 -->
				<!-- <view class="Collect">
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(listItem, listIndex) in collectList" :key="listIndex"
							@tap="$Router.push(listItem.url)">
							<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="28"
								color="#fff" />
							<text class="grid-text">{{ listItem.title }}</text>
						</u-grid-item>
					</u-grid>
				</view> -->
				<!-- 订单 -->
				<!-- <view class="order-out-box">
					<view class="order-inner-box">
						<u-grid :border="false" col="4" style="background-color: #fff">
							<u-grid-item v-for="(listItem, listIndex) in oderList" :key="listIndex"
								@tap="gotoOrder(listItem)">
								<u-icon :name="listItem.name" :size="34" />
								<text class="grid-text">{{ listItem.title }}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</view> -->
			</view>

			<!-- 我的收益 -->
			<!-- <view class="income" @click="handlerSkipMyProfit"> -->
			<view class="income">
				<!-- <view class="income-head">
					<text class="my-income">我的钱包</text>
					<u-icon name="arrow-right" />
				</view>
				<view class="income-content">
					<u-grid :border="false" col="4" bgColor="#fff">
						<u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
							<view class="num-box">{{ listItem.num }}元</view>
							<view class="num-title">{{ listItem.title }}</view>
						</u-grid-item>
					</u-grid>
				</view> -->

			</view>
			<!-- 列表 -->
			<TapList></TapList>

		</view>
		<tabbar currentTab="clientMine" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import TapList from './components/TapList.vue';
	export default {
		components: {
			TapList
		},
		data() {
			return {
				system: {},
				systemBar: 0,
				collectList: [{
						name: 'photo',
						title: '收藏',
						url: '/PageMine/favourite',
					},
					// {
					//   name: 'lock',
					//   title: '积分',
					//   url: '/pages/client/clientUser/myScore/index',
					// },
					{
						name: 'star',
						title: '购物车',
						url: '/PageMine/shopCar',
					},
					{
						name: 'hourglass',
						title: '优惠券',
						url: '/PageMine/coupon',
					},
				],
				oderList: [{
						name: 'order',
						title: '全部订单',
						type: 0,
					},
					{
						name: 'bag-fill',
						title: '已发货',
						type: 1,
					},
					{
						name: 'car-fill',
						title: '已完成',
						type: 2,
					}
					// {
					//   name: 'heart',
					//   title: '待评价',
					//   type: 3,
					// },
				],
				incomeList: [{
						num: '0.00',
						title: '总收益',
					},
					{
						num: '0.00',
						title: '本月收益',
					},
					{
						num: '0.00',
						title: '本周收益',
					},
					{
						num: '0.00',
						title: '可提现',
					},
				]
			};
		},
		computed: {
			...mapGetters(['userId', 'gender', 'avatar', 'nickname'])
		},
		methods: {
			getHeight() {
				wx.getSystemInfo({
					success: res => {
						this.system = res;
					},
				});
				this.systemBar = this.system.statusBarHeight;
			},
			// 点击跳转到全部订单
			gotoOrder(item) {
				this.$store.commit('order/GET_ORDER_TYPE', item)
				uni.navigateTo({
					url: `/PageMine/orderModules/index`,
				});
			},
			// 点击跳转到我的收益
			// handlerSkipMyProfit() {
			// 	uni.navigateTo({
			// 		url: '/pages/client/clientUser/myProfit',
			// 	});
			// },
			// 点击预览图片
			handlerReviewImg() {
				uni.previewImage({
					urls: [this.avatar],
				});
			}
		},
		onLoad() {
			this.getHeight();
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #efefef;
		box-sizing: border-box;

		.flex {
			display: flex;
		}

		.head-info {
			background-color: #337bad;
			height: 360rpx;
			padding: 20rpx;
			position: relative;

			.head-flex {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.nickname {
					font-size: 36rpx;
					color: #ffffff;
					margin-bottom: 8rpx;
					margin-top: 20rpx;
				}

				.setAuth {
					width: 90rpx;
					height: 40rpx;
					font-size: 24rpx;
					display: block;
					cursor: pointer;
					margin-right: 10rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 20rpx;
					background-color: rgba(255, 255, 255, 0.4);
				}
			}

			.Collect {
				.grid-text {
					font-size: 30rpx;
					color: #fff;
				}
			}

			.order-out-box {
				width: 94%;
				position: absolute;
				bottom: -80rpx;

				.order-inner-box {
					padding: 20rpx;
					font-size: 30rpx;
					border-radius: 10rpx;
					background-color: $uni-bg-color;
				}
			}
		}

		.income {
			padding: 20rpx;
			border-radius: 10rpx;
			// margin: 100rpx 20rpx 20rpx 20rpx;
			margin: 40rpx 20rpx 20rpx 20rpx;
			// background-color: $uni-bg-color;

			.income-head {
				display: flex;
				justify-content: space-between;

				.my-income {
					color: $uni-color-primary;
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			.income-content {
				margin: 15rpx 0;

				.num-box {
					padding: 20rpx 0;
					font-size: 36rpx;
					font-weight: 600;
					color: $uni-text-color;
				}

				.num-title {
					font-size: 28rpx;
					color: $uni-text-color-grey;
				}
			}
		}
	}

	.flex {
		display: flex;
	}
</style>