baozhida-logistics-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: 0,
					id: 'detailsil',
					title: '全部',
					icon: 'icon-cheliangxinxi',
					color: '#4bc7fc',
					value: null,
				}, {
					sign: 3,
					id: 'truck',
					title: '未入库',
					icon: 'icon-chukudan',
					color: '#fece56',
					value: null,
				}, {
					sign: 5,
					id: 'signfor',
					title: '已入库',
					icon: 'icon-fankudengji',
					color: '#9ddd54',
					value: null,
				}, {
					sign: 7,
					id: 'add',
					title: '已出库',
					icon: 'icon-yidaoda',
					color: '#1cc723',
					value: null,
				}],
				list2: [{
					sign: 0,
					id: 'detailsil',
					title: '全部',
					icon: 'icon-cheliangxinxi',
					color: '#4bc7fc',
					value: null,
				}, {
					sign: 2,
					id: 'truck',
					title: '未装车',
					icon: 'icon-fankudengji',
					color: '#fece56',
					value: null,
				}, {
					sign: 4,
					id: 'signfor',
					title: '已装车',
					icon: 'icon-yidaoda',
					color: '#9ddd54',
					value: null,
				}, {
					sign: 8,
					id: 'add',
					title: '已签收',
					icon: 'icon-qianshou_fill',
					color: '#1cc723',
					value: null,
				}],
				list3: [{
					sign: 0,
					id: 'detailsil',
					title: '全部',
					icon: 'icon-cheliangxinxi',
					color: '#4bc7fc',
					value: null,
				}, {
					sign: 1,
					id: 'truck',
					title: '未发货',
					icon: 'icon-weifahuo',
					color: '#fece56',
					value: null,
				}, {
					sign: 2,
					id: 'signfor',
					title: '已发货',
					icon: 'icon-yifahuo',
					color: '#9ddd54',
					value: null,
				}, {
					sign: 3,
					id: 'add',
					title: '已签收',
					icon: 'icon-qianshou_fill',
					color: '#1cc723',
					value: null,
				}],
				token: '',
			}
		},
		created() {
			if (this.userType == 1) {
				this.list = this.list1
			} else if (this.userType == 2) {
				this.list = this.list2
			} else if (this.userType == 3) {
				this.list = this.list3
			}
			for (let key in this.orderStatistics) {
				this.list.forEach((item, index) => {
					if (key == item.sign) {
						item.value = this.orderStatistics[key]
					}
				})
			}
		},
		mounted() {
			var token = this.$cache.getToken()
			this.token = token
		},
		methods: {
			// 订单页面
			goOrder(index) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/order/index?current=' + index
					});
				} 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>