baozhida-deliver-medicine-app/pages/home/index.vue

<template>
	<!-- 首页 -->
	<view class="card_index_bgc">
		<view class="company_name" v-if="userInfo.dept">{{userInfo.dept.name || ''}}</view>
		<x-statistics :userType="homeUserType" :orderStatistics="orderStatistics"></x-statistics>
		<view class="card_operate">
			<view class="btn_item_tab" v-for="(item,index) in tableList" :key="index" @click="getOperate(item)">
				<view class="card_image center_in" :style="{backgroundColor:item.color}">
					<span class="iconfont icon_image" :class="item.icon"></span>
				</view>
				<view class="item_title_tab">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			token: {
				type: String,
				default: () => '',
			},
			userInfo: {
				type: Object,
				default: () => {},
			},
			orderStatistics: {
				type: Object,
				default: () => {},
			}
		},
		data() {
			return {
				homeUserType: 1,
				tableList: [],
				userList: [{
					id: 'add',
					title: '添加运单',
					icon: 'icon-tianjiadingdan',
					color: '#1cc723',
				}],
			}
		},
		created() {
			this.homeUserType = 3
			this.tableList = this.userList
		},
		methods: {
			getOperate(value) {
				if (this.token) {
					if (['truck', 'unload', 'signfor', 'put', 'out'].includes(value.id)) {
						uni.navigateTo({
							url: '/pages/order/delivery?id=' + value.id + '&title=' + value.title
						});
					} else if (value.id == 'add') {
						uni.navigateTo({
							url: '/pages/order/addWaybill?title=添加订单&type=1'
						});
					} else if (value.id == 'details') {
						uni.navigateTo({
							url: '/pages/home/particulars?title=true'
						});
					} else if (value.id == 'detailsil') {
						uni.navigateTo({
							url: '/pages/home/particulars?title=false'
						});
					}
				} else {
					uni.$u.toast('请先登录')
				}
			}
		}
	}
</script>

<style lang="scss">
	.card_index_bgc {
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
		background-image: linear-gradient(#a9e3f1, #f3f4f6);
	}

	.company_name {
		font-size: 36rpx;
		padding: 50rpx 30rpx 20rpx 30rpx;
		font-weight: 600;
	}

	.card_swiper {
		padding: 20rpx 20rpx 0rpx 20rpx;
	}

	.card_operate {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: #fff;
		padding: 20rpx 0rpx;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.btn_item_tab {
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin: 10rpx 0rpx;
	}

	.card_image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 30rpx;
		margin-bottom: 10rpx;
	}

	.icon_image {
		font-size: 50rpx;
		color: #fff;
	}

	.item_title_tab {
		font-size: 26rpx;
		color: #606266;
	}
</style>