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

<template>
	<!-- 首页 -->
	<view class="card_index_bgc">
		<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>
				<view class="title_hint">{{item.title}}</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: 25%;"></view>
			<view style="width: 25%;"></view>
			<view style="width: 25%;"></view>
		</view>
		<view class="card_cylinder border_top">
			<view class="card_bottle" v-for="(item,index) in addList" :key="index" @click="scanCodes(item)">
				<view class="card_fiche" :style="{backgroundColor:item.color}">
					<span class="iconfont icon_image" :class="item.icon"></span>
				</view>
				<view class="title_hint">{{item.title}}</view>
			</view>
			<view style="width: 25%;"></view>
			<view style="width: 25%;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: []
			},
			genreTitle: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				addList: [{
					id: 'add',
					title: '扫码添加钢瓶',
					icon: 'icon-saoyisao',
					color: '#1ee94d',
				}, {
					id: 'step',
					title: '气瓶流转信息',
					icon: 'icon-saomachaxun',
					color: '#195eea',
				}, {
					id: 'allot',
					title: '钢瓶调拨',
					icon: 'icon-tiaobo',
					color: '#19baea',
				}],
			}
		},
		mounted() {},
		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 if (value.id == 'add') {
					uni.navigateTo({
						url: '/pages/order/quickMark?id=' + value.id + '&title=' + value.title
					});
				} else if (value.id == 'step') {
					this.getInformation()
				} else if (value.id == 'allot') {
					uni.navigateTo({
						url: '/pages/order/cylinderTransfer'
					});
				} else {
					uni.navigateTo({
						url: '/pages/order/delivery?id=' + value.id + '&title=' + value.title
					});
				}
			},
			// 扫码溯源
			scanning() {
				uni.navigateTo({
					url: '/pages/index/codeTracing'
				});
			},
			getInformation() {
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ['qrCode'],
					autoZoom: false,
					success: (res) => {
						console.log(res, '--------');
						if (res.result) {
							let url = res.result;
							const arrf = url.split('=')
							this.unitCoding(arrf[1])
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码1');
					}
				})
			},
			// 单位内编码获取
			unitCoding(qrid) {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: 'http://qr.uinshine.com:9000/CommonAPI/product/getDetails', //仅为示例，并非真实接口地址。
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', // 默认值
					},
					data: {
						qr_id: qrid,
					},
					success: (res) => {
						if (res.data.code == 0) {
							var arr = res.data.data
							// this.frequencyCoding = arr.inner_code
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/index/codeTracing?code=' + arr.inner_code
							});
						}
					}
				});
			},
		}
	}
</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, #ffffff);
	}

	.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-between;
		margin: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

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

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

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

	.title_hint {
		// height: 78rpx;
		margin-top: 10rpx;
		color: #606266;
		width: 90%;
		text-align: center;
		font-size: 26rpx;
	}

	.border_top {
		padding-top: 30rpx;
	}
</style>