140 lines
4.5 KiB
Vue
140 lines
4.5 KiB
Vue
<template>
|
||
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
||
<view class="content">
|
||
<view class="search-form">
|
||
<uni-easyinput class="searchInput" placeholder="输入货品名称/编码" v-model="searchValue" suffixIcon="search" @iconClick="search" @keyup.enter.native="search"></uni-easyinput>
|
||
</view>
|
||
<scroll-view class="chronic-science" scroll-y="true" @scrolltolower="onScrollTolower" >
|
||
<view class="scroll-view-item" v-for="(item,index) in tableList" :key="index">
|
||
<view style="width: 100%;display: flex;align-items: center;height: 160px;justify-content: space-between;">
|
||
<view style="width: 25%;height: 90%;display: flex;align-items: center;justify-content: center;">
|
||
<image class="image" :src="handleImage(item)" mode="aspectFit"></image>
|
||
</view>
|
||
<view style="width: 75%;height: 90%;display: flex;flex-direction: column;justify-content: space-between;padding: 4px;margin-left: 10rpx;">
|
||
<view style="width: 100%;font-size:35rpx;color: #FF6816;white-space: nowrap;overflow: hidden;text-overfloccw: ellipsis;height: 60px;">{{item.materialName}}</view>
|
||
<view style="width: 100%;height: 1px;background: #00000010"></view>
|
||
<view style="width: 100%;font-size:26rpx;color: #86817B;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 40px;margin-top: 15rpx;">货品编码：{{item.materialCode}}</view>
|
||
<view style="width: 100%;font-size:26rpx;color: #86817B;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 40px;margin-top: 8rpx;">货品类别：{{item.materialTypeName}}</view>
|
||
<view style="width: 100%;font-size:26rpx;color: #86817B;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 40px;margin-top: 8rpx;">计量单位：{{item.unitName}}</view>
|
||
<view style="width: 100%;font-size:26rpx;color: #86817B;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 40px;margin-top: 8rpx;">库存数量：{{item.materialNum}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Tabs from '@/pages/components/Tabs.vue'
|
||
import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
|
||
import UButton from '@/uni_modules/uview-ui/components/u-button/u-button.vue'
|
||
import { getInventoryOfGoodsApi } from '@/api/enterExit'
|
||
|
||
export default {
|
||
components: { UButton, UniEasyinput, Tabs },
|
||
data() {
|
||
return {
|
||
fontValue: uni.getStorageSync('fontSize') || 8,
|
||
searchValue: '',
|
||
tableList: [],
|
||
pageNum: 1,
|
||
pageSize: 100,
|
||
total: 0,
|
||
status: 'loadmore',
|
||
}
|
||
},
|
||
onLoad() {
|
||
},
|
||
onShow() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
search(){
|
||
console.log('Searching for:', this.searchValue);
|
||
this.pageNum = 1
|
||
this.getList()
|
||
},
|
||
// 翻页
|
||
onScrollTolower(){
|
||
console.log(this.tableList.length)
|
||
if(this.total>this.tableList.length){
|
||
this.pageNum++
|
||
this.getList()
|
||
}
|
||
},
|
||
//获取订单列表
|
||
async getList() {
|
||
console.log('获取列表',)
|
||
let params = {
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize,
|
||
searchValue: this.searchValue,
|
||
}
|
||
try {
|
||
const res = await getInventoryOfGoodsApi(params)
|
||
console.log('?? ~ getList ~ res:', res)
|
||
this.total = Number(res.total);
|
||
if(this.pageNum==1){
|
||
this.tableList = res.rows
|
||
}else{
|
||
this.tableList.push(...res.rows)
|
||
}
|
||
this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
handleImage(item) {
|
||
if (item.imgUrl) {
|
||
return item.imgUrl
|
||
} else {
|
||
return '/static/images/handheld/ic_goods_img.jpg'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
//从上到下渐变
|
||
min-height: 88vh;
|
||
background-size: 100% 100%;
|
||
overflow-y: hidden;
|
||
}
|
||
|
||
.content {
|
||
background: #f9fbff;
|
||
height: 88vh;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
|
||
.search-form{
|
||
display: flex;
|
||
width: 98%;
|
||
margin-top: 10px;
|
||
.searchInput{
|
||
width: 100%;
|
||
height: 40px;
|
||
margin-left: 10px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.chronic-science{
|
||
width: 100%;
|
||
height: 88vh;
|
||
background: #F7F7F7;
|
||
.scroll-view-item{
|
||
width: 96%;
|
||
margin: 10px auto;
|
||
background: #fff;
|
||
padding: 5px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
</style>
|