<template>
|
<view>
|
<page-nav title="模具保养"></page-nav>
|
|
|
<!-- <view v-if="purchorderArrAll.length>0"> -->
|
|
|
<u-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="扫描模具编码/输入模具信息"
|
clearable border="surround" @clear='inputBoxValueClear' v-model="inputBoxValue"
|
@change="changeInputBoxValue">
|
<template slot="suffix">
|
<u-icon name="scan" color="#909399" size="24" @click="topScanClick"></u-icon>
|
</template>
|
</u-input>
|
|
|
|
<u-alert :title="'模具数（共'+title+'个）'" type="primary"></u-alert>
|
|
|
|
<scroll-view class="container" scroll-y="true" @scroll="scroll">
|
<!-- 虚拟列表总高度 -->
|
<view :style="{'height': `${totalHeight}rpx`, 'position': 'relative'}">
|
<!-- 可视渲染区 -->
|
<view :style="{'top': `${top}px`}" style="width: 100%;position:absolute">
|
<!--在这里自定义你数据的展示结构和样式,itemHeight为这里的总高度-->
|
|
<view class="radioGroupClass">
|
<view v-for="(item,index) in purchorderArr" :key="item.code" class="item">
|
<view @click="highlightClick(item.code)" :style="{color:selectedCode===item.code?'#fff':'#000',
|
background:selectedCode===item.code?'#3c9cff':'#fff'
|
}">
|
|
<view style="display: flex;">
|
<view style="text-align: center;margin-right: 20rpx;">{{item.code}}
|
</view>
|
<view style="">{{item.name}}</view>
|
<view style="margin-left: 20rpx;">{{item.spec}}</view>
|
|
</view>
|
|
</view>
|
</view>
|
</view>
|
|
|
</view>
|
</view>
|
</scroll-view>
|
|
|
|
<view class="footer" style="min-height:62rpx;">
|
<u-button type="primary" size='large' :hairline="true" @click="navigateTo" text="下一步"></u-button>
|
</view>
|
<!-- </view> -->
|
|
|
<!-- <view v-if="purchorderArrAll.length===0">
|
<div class="sacnBody">
|
<div class="boxImg"></div>
|
<div class="scanText">暂无模具信息</div>
|
</div>
|
</view> -->
|
|
</view>
|
</template>
|
|
|
<script>
|
import {
|
ScanMouldQrCodeMessageData,
|
ScanMouldQrCodeMessageSubData
|
} from '../../config/api.js';
|
export default {
|
|
onPullDownRefresh() {
|
setTimeout(() => {
|
this.init(() => {
|
uni.stopPullDownRefresh();
|
})
|
}, 1000);
|
},
|
|
data() {
|
return {
|
|
inputBoxValue: '', //输入框值
|
|
title: 0,
|
|
purchorderArr: [],
|
|
purchorderArrAll: [],
|
|
allList: [], //原始数据列表
|
//虚拟列表
|
showList: [], //可视区域显示的数据
|
itemHeight: 100, //每条数据所占高度
|
showNum: 0, //可视区域显示的最大条数
|
top: 0, //偏移量
|
scrollTop: 0, //卷起的高度
|
startIndex: 0, //可视区域第一条数据的索引
|
endIndex: 0, //可视区域最后一条数据的索引+1，
|
|
selectedCode: ''
|
|
}
|
},
|
|
onShow() {
|
//第一次时调用一下,且uni.createSelectorQuery()需要在生命周期mounted之后使用
|
// this.scroll()
|
},
|
computed: {
|
totalHeight() {
|
return this.allList.length * this.itemHeight * 2 //因为rpx和px的关系
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
this.init()
|
|
this.getScanMouldQrCodeMessageData()
|
},
|
methods: {
|
|
//虚拟列表
|
getShowList() {
|
//可视区域能出现的数据条数
|
this.showNum = Math.ceil(this.contentHeight / this.itemHeight);
|
// console.log('可视数量', this.showNum)
|
|
//可视区域第一条数据的索引
|
this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
|
// console.log('初始索引',this.startIndex)
|
|
//可视区域最后一条数据的下一条数据
|
this.endIndex = this.startIndex + this.showNum;
|
|
//可视区数据，会比实际可视多渲染一条
|
this.showList = this.allList.slice(this.startIndex, this.endIndex)
|
// console.log(this.showList)
|
|
//保证滑动时第一条数据完整展示
|
let offsetY = this.scrollTop - (this.scrollTop % this.itemHeight);
|
|
this.top = offsetY;
|
},
|
scroll() {
|
// 利用uniapp提供的接口获取可视区域的高度和滚动高度
|
let query = uni.createSelectorQuery()
|
let container = query.select('.container');
|
container.fields({
|
// rect:true, //是否返回节点布局位置信息{left,top,right,bottom}
|
size: true, //是否返回节点尺寸信息{width，height}
|
scrollOffset: true //是否返回节点滚动信息{scrollLeft,scrollTop}
|
}, (res) => {
|
// console.log(res)
|
this.scrollTop = res.scrollTop
|
this.contentHeight = res.height
|
this.getShowList(); //因为所在函数是异步
|
}).exec()
|
},
|
highlightClick(code) {
|
this.selectedCode = code
|
},
|
|
|
init() {
|
uni.stopPullDownRefresh();
|
},
|
// 扫码工位 的扫码框点击
|
topScanClick() {
|
// if (this.topContent.length > 0) {
|
// return uni.$u.toast('请先提交此维修申请！')
|
// }
|
|
let that = this;
|
uni.scanCode({
|
onlyFromCamera: true,
|
// scanType: ['barCode', 'qrCode'],
|
scanType: ['qrCode'],
|
success: function(res) {
|
console.log('条码类型：' + res.scanType);
|
console.log('条码内容：' + res.result);
|
that.scanContent = res.result;
|
that.inputBoxValue = res.result;
|
|
//处理扫码事件
|
that.changeInputBoxValue(that.scanContent);
|
|
},
|
complete: function(res) {
|
|
},
|
fail: function(res) {
|
console.log('条码类型：' + res.scanType);
|
console.log('条码内容：' + res.result);
|
}
|
|
});
|
},
|
changeInputBoxValue(val) {
|
this.purchorderArr = this.purchorderArrAll.filter((p) => {
|
return p.code.indexOf(val) !== -1 || p.name.indexOf(val) !== -1 || p.spec.indexOf(val) !== -1
|
})
|
this.selectedCode = this.purchorderArr[0].code
|
this.$forceUpdate()
|
},
|
inputBoxValueClear() {
|
this.inputBoxValue = ''
|
},
|
|
navigateTo() {
|
uni.navigateTo({
|
url: './mjby2?code=' + this.selectedCode
|
});
|
},
|
async getScanMouldQrCodeMessageData() {
|
const res = await ScanMouldQrCodeMessageData()
|
|
this.purchorderArrAll = res.data
|
|
this.purchorderArr = res.data
|
|
this.title = res.data.length
|
|
this.selectedCode = res.data[0].code
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import url('@/style/global.css');
|
|
.container {
|
width: 100%;
|
height: 70vh;
|
/*原生一定得有这个overflow的hidden效果,此处用了scroll-view所以不需要*/
|
/*overflow:auto;*/
|
}
|
|
.item {
|
/* 按照实际需求写css */
|
width: 100%;
|
height: 200rpx;
|
line-height: 90rpx;
|
/* 要对应上itemHeight */
|
border: 1px solid #c8c8c8;
|
}
|
|
::v-deep .uicon-arrow-left>span {
|
display: block;
|
}
|
|
.u-input--square {
|
margin: 20rpx 10rpx;
|
border-radius: 40rpx;
|
background-color: #fff;
|
border: 1px solid #c8c8c8;
|
}
|
|
::v-deep .u-alert__text--primary--light {
|
margin-bottom: 0;
|
font-size: 32rpx !important;
|
}
|
|
.radioGroupClass {
|
display: flex;
|
flex-direction: column;
|
background-color: #fff;
|
|
overflow-y: auto;
|
max-height: 1100rpx;
|
margin-top: 20rpx;
|
}
|
|
::v-deep .u-radio-label--right {
|
height: 90rpx;
|
line-height: 90rpx;
|
width: 92%;
|
margin-left: 4%;
|
// padding: 0 50rpx;
|
}
|
</style>
|
