shop-app/pages/account/index.vue

<!--
 * @Author
	components: { UiCell },: ch
 * @Date: 2019-08-22 19:41:20
 * @LastEditors: ch
 * @LastEditTime: 2022-04-25 19:40:24
 * @Description: file content
-->
<template>
	<view>
		<view class="header">
			<u-badge class="header--badge" max="99" :value="$store.state.sessionMsgCount" 
				@click="$Router.push('/messageGroup')"></u-badge>
			<image class="header--msg" @click="$Router.push('/messageGroup')" src="@/static/account/xx.png" />
		</view>
		<UiCell class="header--cell" :title="userInfo.nickname" label="第一个青春是上帝给的..."
			@click="$Router.push('/setUserInfo')">
			<image slot="icon" class="head-img" :src="userInfo.avatar || require('@/static/account/tx.png')" shape="circle" />
		</UiCell>
		<view class="order">
			<view class="order--title">
				<text>我的订单</text>
				<text class="order--title-more" @click="$Router.push('/orderList')">查看更多</text>
			</view>
			<view class="order-tabs">
				<view class="order-tabs--item" @click="$Router.push('/orderList?tab=1')">
					<u-badge class="item-badge" max="99" :value="statistic.unpaidCount"></u-badge>
					<image class="item-icon" src="@/static/account/fk.png"/>
					<view>待付款</view>
				</view>
				<view class="order-tabs--item" @click="$Router.push('/orderList?tab=3')">
					<u-badge class="item-badge" max="99" :value="statistic.waitDeliveryCount"></u-badge>
					<image class="item-icon" src="@/static/account/fh.png"/>
					<view>待发货</view>
				</view>
				<view class="order-tabs--item" @click="$Router.push('/orderList?tab=4')">
					<u-badge class="item-badge" max="99" :value="statistic.deliveredCount"></u-badge>
					<image class="item-icon" src="@/static/account/sh.png"/>
					<view>待收货</view>
				</view>
			</view>
		</view>
		<view class="cell">
			<UiCell title="退货/售后" @click="$Router.push('/saleAfterList')">
				<image slot="icon" class="cell--icon" src="@/static/account/tk.png" />
			</UiCell>
			<UiCell title="收货地址" @click="$Router.push('/addressList')">
				<image slot="icon" class="cell--icon" src="@/static/common/dz.png" />
			</UiCell>
			<UiCell title="联系客服">
				<image slot="icon" class="cell--icon" src="@/static/account/kf.png" />
			</UiCell>
			<UiCell title="设置" class="cell--last" @click="$Router.push('/setting')">
				<image slot="icon" class="cell--icon" src="@/static/account/sz.png" />
			</UiCell>
		</view>
	</view>
</template>

<script>
import UiCell from '../../components/UiCell.vue';
import { ApiGetCurrentUser } from '@/common/api/account'
import { ApiGetOrderStatistics } from '@/common/api/order'
export default {
	components : { UiCell },
	data(){
		return { 
			userInfo : {},
			statistic : {}
		}
	},
	onLoad(){
	},
	onShow(){
		this.getUserInfo();
		this.getOrderStatistics();
	},
	methods: {
		async getUserInfo(){
			const {error, result} = await ApiGetCurrentUser();
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.userInfo = result;
			this.$store.commit('SET_USER_INFO', result);
		},
		async getOrderStatistics(){
			const {error, result} = await ApiGetOrderStatistics();
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.statistic = result;
		}
	}
}

</script>

<style lang="scss" scoped>
page{
	background: url('@/static/account/bg.png') no-repeat top left $color-grey1;
	background-size: 100%;
}
.header{
	height: 88rpx;
	padding: 0 40rpx;
	position: relative;
	width: 100%;
	&--msg{
		width: 34rpx;
		height: 40rpx;
		float: right;
		margin-top: 22rpx;
	}
	&--badge{
		position: absolute;
		right: 30rpx;
		top: 10rpx;
		z-index: 99;
		border: 1px solid #fff;
	}
	&--cell{
		border: 0;
		padding: 0 60rpx 0 40rpx;
		background: none;
	}
}
.head-img{
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-right: 30rpx;
}
.order{
	width: 690rpx;
	height: 260rpx;
	background: $color-grey0;
	border-radius: 16rpx;
	margin: 40rpx auto;
	padding: 30rpx;
	// box-shadow: 0 0 13rpx 1px rgba(0, 0, 0, .05);
	&--title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: url('@/static/common/arrow.png') no-repeat center right;
		background-size: 10rpx;
		font-size: $font-size-base;
		color: $color-grey6;
		margin: 10rpx 0 46rpx;
	}
	&--title-more{
		padding-right: 20rpx;
		font-size: $font-size-sm;
		color: $color-grey4;
	}
	&-tabs{
		display: flex;
		justify-content: space-around;
		&--item{
			text-align: center;
			position: relative;
			view{
				font-size: $font-size-sm;
				color: $color-grey5;
			}
			.item-icon{
				width: 60rpx;
				height: 60rpx;
			}
			.item-badge{
				position: absolute;
				top: -10rpx;
				right: 0;
				z-index: 99;
				border: 1px solid #fff;
			}
		}
	}
}
.cell{
	margin: 30rpx;
	border-radius: 16rpx;
	background: $color-grey0;
	padding: 0 40rpx;
	&--icon{
		width: 40rpx;
		height: 40rpx;
		margin: 0 10rpx;
	}
	&--last{
		border: 0;
	}
}
/deep/{
	.header--cell .ui-cell--title{
		font-weight: bold;
		font-size: $font-size-lg;
	}
}
</style>