<template>
	<view class="page">
		<view class="top">
			<text class="tv-title">我的</text>
			<view class="v-user-info" @click="$wskj.to('/pages/user_info')">
				<u-avatar size="80"></u-avatar>
				<view class="v-user-name">
					<view>
						<text class="tv-name">Lin</text>
					</view>
					<view>
						<text class="tv-bq">医药公司</text>
					</view>

				</view>
				<view class="v-user-image">
					<image class="iv-back" src="@/static/icon_r.png"></image>
				</view>

			</view>
		</view>
		<view style="margin:-180rpx 20rpx 20rpx;padding: 0 0 20rpx;background: white;border-radius: 20rpx;">
			<u-cell size="large" title="我的订单" value="全部订单" isLink></u-cell>
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
					<u-badge  max="99" :absolute="true" :offset="[5,20]" :value="listItem.num"></u-badge>
					<u-icon  :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="25"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view style="margin:20rpx;background: white;border-radius: 20rpx;">
			<u-cell-group>
				<u-cell size="large" title="月结算订单" isLink></u-cell>
				<u-cell size="large" title="身份认证" value="未认证" isLink ></u-cell>
				<u-cell size="large" title="联系客服" isLink></u-cell>
				<u-cell size="large" title="设置" isLink></u-cell>
				<u-cell size="large" title="收货地址" isLink></u-cell>
			</u-cell-group>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: 'photo',
						num: '0',
						title: '已提交'
					},
					{
						name: 'lock',
						num: '1',
						title: '待发货'
					},
					{
						name: 'star',
						num: '0',
						title: '待收货'
					},
					{
						name: 'hourglass',
						num: '1',
						title: '已完成'
					},
					{
						name: 'home',
						num: '0',
						title: '售后'
					},

				],
			};
		},
	};
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		background: #f5f5f5;
	}

	.top {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 280px;
		background: linear-gradient(180deg, #fdb62a, #f5f5f5);
	}

	.tv-title {
		height: 100rpx;
		width: 100%;
		font-size: 18px;
		text-align: center;
		line-height: 100rpx;
		color: #000000;
	}

	.v-user-info {
		display: flex;
		flex-direction: row;
		padding: 30rpx;

	}

	.v-user-image {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.iv-back {
		width: 16px;
		height: 16px;

	}

	.v-user-name {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		justify-content: space-between;
	}

	.tv-name {
		font-size: 28rpx;
		color: #000;
	}

	.tv-bq {
		font-size: 28rpx;
		padding: 2rpx 20rpx;
		color: #fff;
		background: #fdb62a;
		border-radius: 4px;
	}

	.radio-label {
		margin-right: 20px;
	}
</style>