baozhida-deliver-medicine-app/components/x-statistics.vue

<template>
	<!-- 首页统计 -->
	<view class="home_card">
		<view class="card_item_home" v-for="(item,index) in list" :key="index" @click="goOrder(index)">
			<view class="home_head">
				<view class="home_line" :style="{backgroundColor:item.color,}"></view>
				<view class="home_item_title">{{item.value || 0}}</view>
			</view>
			<view class="item_subheading">{{item.title}}</view>
			<view class="home_bottom_item">
				<view class="home_right_icon center_in">
					<u-icon name="arrow-right" size="15" color="#fff"></u-icon>
				</view>
				<span :style="{color: item.color}" class="iconfont home_icon_image" :class="item.icon"></span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'XStatistics',
		props: {
			userType: {
				type: Number,
				default: 1,
			},
			orderStatistics: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {
				list: [],
				list1: [{
					sign: 'waitDeliveryNum',
					id: 'detailsil',
					title: '待配送',
					icon: 'icon-cancel',
					color: '#9ddd54',
					value: null,
				}, {
					sign: 'inDeliveryNum',
					id: 'truck',
					title: '配送中',
					icon: 'icon-delivery',
					color: '#4bc7fc',
					value: null,
				}, {
					sign: 'receiptNum',
					id: 'signfor',
					title: '已送达',
					icon: 'icon-yisongda',
					color: '#1cc723',
					value: null,
				}, {
					sign: 'rejectionNum',
					id: 'add',
					title: '已拒收',
					icon: 'icon-yiquxiao',
					color: '#fe880e',
					value: null,
				}],
				token: '',
			}
		},
		created() {
			this.list = this.list1
			var token = this.$cache.getToken()
			for (let key in this.orderStatistics) {
				this.list.forEach((item, index) => {
					if (key == item.sign) {
						if (token) {
							item.value = this.orderStatistics[key]
						} else {
							item.value = 0
						}
					}
				})
			}
		},
		mounted() {
			var token = this.$cache.getToken()
			this.token = token
		},
		methods: {
			// 运单页面
			goOrder(index) {
				let num = index
				num = num + 1
				if (this.token) {
					uni.navigateTo({
						url: '/pages/order/index?current=' + num
					});
				} else {
					uni.$u.toast('请先登录')
				}
			},
		}
	}
</script>

<style lang="scss">
	.home_card {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.home_head {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.home_line {
		width: 8rpx;
		height: 40rpx;
		border-top-right-radius: 4rpx;
		border-bottom-right-radius: 4rpx;
	}

	.home_item_title {
		margin-left: 20rpx;
		font-size: 50rpx;
		font-weight: 600;
	}

	.item_subheading {
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #909399;
	}

	.card_item_home {
		margin-top: 20rpx;
		width: calc(50% - 40rpx);
		background-color: #fff;
		border-radius: 20rpx;
	}

	.home_bottom_item {
		margin: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.home_right_icon {
		width: 44rpx;
		height: 44rpx;
		background-color: #e7e6e4;
		border-radius: 50%;
	}

	.home_icon_image {
		font-size: 70rpx;
	}
</style>