baozhida-logistics-app/components/x-statistics.vue

<template>
	<!-- 首页统计 -->
	<view class="home_card_statist">
		<u-scroll-list :indicator="list.length > 5 ? true : false" style="width: 100%;">
			<view :class="list.length > 5 ? 'card_two_lines' : 'card_left_lines'">
				<view class="card_item_home"
					:style="{width:(list.length > 5? '300rpx' : 'calc(50% - 40rpx)'),margin:(list.length > 5? '0rpx 0rpx 20rpx 20rpx' : '20rpx 20rpx 0rpx 20rpx')}"
					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 style="width: 20rpx;height: 100%;" v-if="list.length > 5"></view>
			</view>
		</u-scroll-list>
	</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: 9,
					id: 'truck',
					title: '待装箱',
					icon: 'icon-bepacked',
					color: '#fece56',
					value: null,
				}, {
					sign: 10,
					id: 'signfor',
					title: '已装箱',
					icon: 'icon-boxed',
					color: '#9ddd54',
					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: 9,
					id: 'truck',
					title: '待装箱',
					icon: 'icon-bepacked',
					color: '#fece56',
					value: null,
				}, {
					sign: 10,
					id: 'signfor',
					title: '已装箱',
					icon: 'icon-boxed',
					color: '#9ddd54',
					value: null,
				}, {
					sign: 2,
					id: 'truck',
					title: '未装车',
					icon: 'icon-xiehuofei',
					color: '#fece56',
					value: null,
				}, {
					sign: 4,
					id: 'signfor',
					title: '已装车',
					icon: 'icon-yizhuangche',
					color: '#9ddd54',
					value: null,
				}, {
					sign: 6,
					id: 'detailsil',
					title: '已下车',
					icon: 'icon-xiehuo',
					color: '#4bc7fc',
					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, 2, 3],
					id: 'truck',
					title: '未发货',
					icon: 'icon-weifahuo',
					color: '#fece56',
					value: null,
				}, {
					sign: [4, 5, 6, 7],
					id: 'signfor',
					title: '已发货',
					icon: 'icon-yifahuo',
					color: '#9ddd54',
					value: null,
				}, {
					sign: [8],
					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 (this.userType == 3) {
						if (item.sign.indexOf(Number(key)) == -1) {
							// console.log(key, 13)
						} else {
							item.value += this.orderStatistics[key]
						}
					} else {
						if (key == item.sign) {
							item.value = this.orderStatistics[key]
						}
					}
				})
			}
		},
		mounted() {
			var token = this.$cache.getToken()
			this.token = token
		},
		methods: {
			// 订单页面
			goOrder(index) {
				let num = index
				// console.log(this.userType,123)
				if (this.userType == 2) {
					num = num + 1
				}
				if (this.token) {
					uni.navigateTo({
						url: '/pages/order/index?current=' + num
					});
				} else {
					uni.$u.toast('请先登录')
				}
			},
		}
	}
</script>

<style lang="scss">
	.home_card_statist {
		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_two_lines {
		display: flex;
		flex-flow: column wrap;
		height: 580rpx;
		list-style-type: none;
		margin-top: 20rpx;
	}

	.card_left_lines {
		display: flex;
		height: 580rpx;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.card_item_home {
		flex: none;
		// margin: 0rpx 20rpx 20rpx 20rpx;
		// width: calc(50% - 40rpx);
		// width: 300rpx;
		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>