gas-cylinder-app/pages/home/index.vue

<template>
	<!-- 首页 -->
	<view>
		<view class="card_gas_cylinder">气瓶安全追溯管理系统</view>
		<view class="card_port center_in">{{genreTitle}}</view>
		<view class="card_cylinder">
			<view class="card_bottle" v-for="(item,index) in dataList" :key="index" @click="scanCodes(item)">
				<view class="card_fiche" :style="{backgroundColor:item.color}">
					<span class="iconfont icon_image" :class="item.icon"></span>
					<view class="title_hint">{{item.title}}</view>
				</view>
			</view>
			<!-- <view class="card_bottle" @click="scanning">
				<view class="card_fiche" :style="{backgroundColor:'#67C23A'}">
					<span class="iconfont icon_image icon-saomachaxun"></span>
					<view class="title_hint">扫码查询气瓶流转信息</view>
				</view>
			</view> -->
			<view style="width: 40%;margin: 30rpx 0rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				aspirated: [{
					id: '25',
					title: '领重瓶出库',
					icon: 'icon-chukudan',
					color: '#22b9f9',
				}, {
					id: '27',
					title: '扫空瓶入库',
					icon: 'icon-fankudengji',
					color: '#6db1ff',
				}],
				shopList: [{
					id: '37',
					title: '门店重瓶出库',
					icon: 'icon-peizaizhuangche',
					color: '#f4b237',
				}, {
					id: '10',
					title: '门店空瓶出库',
					icon: 'icon-peizaizhuangche-xianxing',
					color: '#f4b237',
				}, {
					id: '21',
					title: '门店回收空瓶',
					icon: 'icon-recycling',
					color: '#8ac247',
				}, {
					id: '35',
					title: '门店确定未配送重瓶返库',
					icon: 'icon-fankudengji',
					color: '#22b9f9',
				}, {
					id: '33',
					title: '门店将重瓶退回司机',
					icon: 'icon-tuihuo',
					color: '#6db1ff',
				}],
				driverList: [{
					id: '11',
					title: '司机确定空瓶装车',
					icon: 'icon-owNote',
					color: '#22b9f9',
				}, {
					id: '12',
					title: '司机运输空瓶到达气站',
					icon: 'icon-yidaoda',
					color: '#8ac247',
				}, {
					id: '17',
					title: '司机确定重瓶从气站出库',
					icon: 'icon-chukudan',
					color: '#6db1ff',
				}, {
					id: '19',
					title: '司机交付门店',
					icon: 'icon-yunsonghejiaofu',
					color: '#f4b237',
				}],
				stationList: [{
					id: 'inspect',
					title: '充气前后检查',
					icon: 'icon-jianchaxiang',
					color: '#f4b237',
				}],
				genreTitle: '',
			}
		},
		mounted() {
			var userInfo = this.$cache.getCache('userInfo')
			if (userInfo.provUser) {
				if (userInfo.provUser.isorders == 0 && userInfo.provUser.userType == 3) {
					this.dataList = this.aspirated
					this.genreTitle = '送气员端'
				} else if (userInfo.provUser.userType == 3) {
					this.dataList = this.shopList
					this.genreTitle = '门店端'
				} else if (userInfo.provUser.userType == 4) {
					this.dataList = this.driverList
					this.genreTitle = '司机端'
				} else if (userInfo.provUser.userType == 5) {
					this.dataList = this.stationList
					this.genreTitle = '气站端'
				}
			} else {
				this.dataList = this.aspirated
				this.genreTitle = '送气员端'
			}
		},
		methods: {
			scanCodes(value) {
				if (['25', '27', '11', '12', '17', '19'].includes(value.id)) {
					uni.navigateTo({
						url: '/pages/home/selectStore?id=' + value.id + '&title=' + value.title
					});
				} else {
					uni.navigateTo({
						url: '/pages/order/delivery?id=' + value.id + '&title=' + value.title
					});
				}
			},
			// 扫码溯源
			scanning() {
				uni.navigateTo({
					url: '/pages/index/codeTracing'
				});
			}
		}
	}
</script>

<style lang="scss">
	.card_gas_cylinder {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 46rpx;
		font-weight: bold;
		color: #027DB4;
		padding: 50rpx 20rpx 0rpx 20rpx;
	}

	.card_port {
		font-size: 40rpx;
		font-weight: bold;
		color: #027DB4;
		padding-bottom: 20rpx;
	}

	.card_cylinder {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.card_bottle {
		margin: 30rpx 0rpx;
		width: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.card_fiche {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 240rpx;
		background-color: #027DB4;
		border-radius: 26rpx;
	}

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

	.title_hint {
		margin-top: 20rpx;
		color: #fff;
		width: 80%;
		text-align: center;
		font-size: 32rpx;
	}
</style>