<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>
uniapp关于路径跳转的问题,扫码,布局
于 2023-08-18 19:58:55 首次发布