uniapp关于路径跳转的问题,扫码,布局

<template>
	<view class="work-container">
		<!-- 顶部导航-->
		<view class="box-bg">
			<view class="box-bg">
				<uni-nav-bar :fixed="true" :border="false" height="50px" shadow left-icon="person-filled">
					<block slot="left">
						<!-- 左边icon图标 -->
						<uni-icons type="person-filled" color="#666" size="18" />
					</block>
					<!-- 搜索内容 -->
					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
							@confirm="confirm" />
					</view>
					<!-- 右边扫一扫 -->
					<block slot="right">
						<view class="scan-container" @click="scanQRCode">
							<text>{{scanResult}}</text>
							<uni-icons type="scan" size="20"></uni-icons>
							<text class="scan-title">扫一扫</text>
						</view>
					</block>
				</uni-nav-bar>
			</view>
		</view>
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 宫格组件 -->
		<uni-section class="mb-10" title="固资管理" type="line"></uni-section>
		<view>
			<view class="container">
				<view class="row">
					<view class="item" data-url="/pages/inventory/company/addcompany" @click="openPage">
						<image src="/static/log.png"></image>
						<text>盘点</text>
					</view>
					<view class="item" data-url="/pages/Blurb/fixedAssets/receive/receive" @click="openPage">
						
						<image src="/static/log.png"></image>
						<text>领用</text>
					</view>
					<view class="item" @click="open()">
						<image src="/static/log.png"></image>
							<text>领用</text>
					</view>
					<view class="item" @click="open()">
						<image src="/static/log.png"></image>
							<text>领用</text>
					</view>
					<view class="item" @click="open()">
					<image src="/static/log.png"></image>
						<text>领用</text>
					</view>
				</view>
				<view class="row">
					<view class="item" @click="open()">
						<image src="/static/log.png"></image>
						<text>入库</text>
					</view>
					<view class="item" @click="open()">
						<image src="/static/log.png"></image>
						<text>领用</text>
					</view>
					<view class="item" @click="open()">
						<image src="/static/log.png"></image>
						<text>入库</text>
					</view>
					<view class="item" @click="open()">
						<image src="/static/log.png"></image>
						<text>领用</text>
					</view>
					<view class="item" @click="open()">
						<image src="/static/log.png"></image>
						<text>入库</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 待办任务 -->
		<uni-section class="mb-10" title="待办任务" type="line"></uni-section>
		<u-cell-group>
			<u-cell title="帮助中心" isLink url="/pages/Blurb/fixedAssets/storage/storage" value="更多"
				:border="false"></u-cell>
			<u-cell title="帮助中心" isLink url="/pages/Blurb/fixedAssets/receive/receive" :border="false"></u-cell>
			<u-cell title="帮助中心" isLink url="/pages/Blurb/company/index" :border="false"></u-cell>
			<u-cell title="帮助中心" isLink url="/pages/Blurb/company/index" :border="false"></u-cell>
		</u-cell-group>
	</view>

</template>

<script>
	import {
		login
	} from '../../api/login';
	export default {
		data() {
			return {
				scanResult: '',
				current: 0,
				swiperDotIndex: 0,
				data: [{
						image: '/static/images/banner/banner01.jpg'
					},
					{
						image: '/static/images/banner/banner02.jpg'
					},
					{
						image: '/static/images/banner/banner03.jpg'
					}
				],
			}
		},
		methods: {
				 openPage(event) {
				    const url = event.currentTarget.dataset.url;
				    uni.navigateTo({
				      url: url
				    });
				  },
			// 扫一扫
			scanQRCode() {
				uni.scanCode({
					scanType: [
						"barCode", "qrCode", "datamatrix", "pdf417"
					],
					autoDecodeCharset: true, //是否启用自动识别字符编码功能,默认为否
					autoZoom: true, //是否启用自动放大,默认启用
					barCodeInput: true, //是否支持手动输入条形码
					hideAlbum: false, //是否隐藏相册(不允许从相册选择图片),只能从相机扫码。默认值为 false。
					success: function(result) {
						console.log('扫码成功: ', result);
						this.scanResult = res.result; // 将扫码结果保存到scanResult变量中
						// 在这里处理扫描成功后的逻辑
					},
					fail: function(error) {
						console.log('扫码失败');
						// 在这里处理扫描失败后的逻辑
					},
					//complete 接口调用结束的回调函数(调用成功、失败都会执行)
					complete: function(flag) {
						console.log('扫码失败12323');
					}
				});
			},
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e) {
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 15px;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {

		height: 300rpx;
	}

	// 轮播图高度
	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.content {
		padding: 2px;
		margin-top: 10px;
		margin-left: 10px;
		width: 350px;
		border-radius: 20px;
		background-color: greenyellow;
	}

	.example-body {
		display: flex;
		background-color: #1f1;
	}

	.uni-icons {
		width: 30px;
		margin-left: 7px;
		color: #000;
		cursor: pointer;
	}

	.scan-container {
		display: flex;
		flex-direction: column;
		margin-left: 7px;
	}

	.uni-icons {
		color: #000;
		cursor: pointer;
		margin-right: 5px;
	}

	.scan-title {
		font-size: 14px;
	}


	// 顶部导航
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding-bottom: 5px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 10px;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}

	// 宫格
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.row {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 20px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18%;
  padding: 8px 7px 0 7px;
  margin-left: 27px;
  // margin-top: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  cursor: pointer;
  background-color: transparent;
  // background-color: #1f1;
}

.item:hover {
  background-color: #e0e0e0;
}

.item image {
  width: 30px;
  height: 30px;
}

.item text {
  // margin-top: 10px;
  font-size: 14px;
  color: #333;
  text-align: center;
}

	// 背景
	page {
		background-color: #f8f8f8;
	}

	// 固资
	.mb-10 {
		margin-top: 10px;
	}
</style>

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值