195 lines
4.8 KiB
Vue
195 lines
4.8 KiB
Vue
<template>
|
||
<view id="product">
|
||
<u-navbar :is-back="true" title="产品列表" title-color="#ffffff" :background="{ background: '#1B85E9' }">
|
||
<view class="slot-wrap">
|
||
<view class="iconfont icon-shaixuan" @click="goUrl(1)"></view>
|
||
</view>
|
||
</u-navbar>
|
||
<view class="search-box">
|
||
<u-search placeholder="关键搜索" bg-color="#ffffff" search-icon-color="#DCDCDC" :action-style="{color:'#333333'}" v-model="searchValue" @search="searchClick" @custom="searchClick"></u-search>
|
||
</view>
|
||
<scroll-view class="scroll-box" scroll-y @scrolltolower="reachBottom">
|
||
<view class="product-list">
|
||
<view class="product-item" v-for="(item,index) in productList" :key="item.prodId" @click="goUrl(2,index)">
|
||
<view class="product-txt">
|
||
<view class="product-name">{{item.prodName}}</view>
|
||
<view class="product-info">{{item.prodNodeType}}</view>
|
||
</view>
|
||
<view class="">
|
||
<u-icon name="arrow-right" color="#959595" size="23"></u-icon>
|
||
</view>
|
||
</view>
|
||
<u-empty :show="emptyShow" text="没有找到数据" :font-size="40" :icon-size="300" :margin-top="100" mode="list"></u-empty>
|
||
<u-loadmore class="loadmore-box" v-if="!emptyShow" :status="loadStatus" />
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
productList:[],
|
||
// 加载状态
|
||
loadStatus:'loadmore',//加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
||
isLoadMore:false, //是否加载中
|
||
emptyShow:false, //是否显示数据为空
|
||
pageNum:1,
|
||
pageSize:15,
|
||
orderByColumn:'createTime',
|
||
isAsc:'desc',
|
||
searchValue:'',
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.getProductList();
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods:{
|
||
// 获取产品列表
|
||
getProductList(){
|
||
let opt = {
|
||
url: '/prod-api/iot/product/list',
|
||
method: "GET",
|
||
}
|
||
let params = {
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize,
|
||
orderByColumn: this.orderByColumn,
|
||
isAsc: this.isAsc,
|
||
searchValue: this.searchValue
|
||
}
|
||
this.$request.TokenRequest(opt,params).then(res => {
|
||
console.log("getProductList",res);
|
||
if(res.code==200){
|
||
if(res.rows){
|
||
this.productList.push(...res.rows);
|
||
// 判断当前是否显示空
|
||
if(!this.productList.length){
|
||
this.emptyShow = true;
|
||
}else{
|
||
this.emptyShow = false;
|
||
}
|
||
// 判断当前是否为最后一页
|
||
if(res.rows.length<this.pageSize){ //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||
this.isLoadMore=true
|
||
this.loadStatus='nomore'
|
||
}else{
|
||
this.isLoadMore=false
|
||
this.loadStatus='loadmore'
|
||
}
|
||
}else{
|
||
this.isLoadMore=true
|
||
this.loadStatus='nomore'
|
||
}
|
||
|
||
}else{
|
||
this.$u.toast(res.msg);
|
||
this.isLoadMore=false
|
||
if(this.pageNum>1){
|
||
this.pageNum=1
|
||
}
|
||
}
|
||
|
||
}, error => {
|
||
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
||
this.isLoadMore=false
|
||
if(this.pageNum>1){
|
||
this.pageNum=1
|
||
}
|
||
})
|
||
},
|
||
goUrl(type,index){
|
||
if(type == 1){
|
||
uni.navigateTo({
|
||
url:'../product/filter'
|
||
})
|
||
}else if(type == 2){
|
||
uni.navigateTo({
|
||
url:'../product/detail?prodId='+this.productList[index].prodId
|
||
})
|
||
}
|
||
|
||
},
|
||
// 上拉加载更多
|
||
reachBottom() {
|
||
console.log("这里上拉加载更多")
|
||
if(!this.isLoadMore){ //此处判断，上锁，防止重复请求
|
||
this.loadStatus = 'loading';
|
||
this.isLoadMore=true
|
||
this.pageNum+=1
|
||
this.getProductList()
|
||
}
|
||
},
|
||
// 点击搜索
|
||
searchClick(){
|
||
console.log('点击搜索')
|
||
this.productList = [];
|
||
this.pageNum = 1;
|
||
this.getProductList();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
#product{
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.scroll-box{
|
||
height: calc(100% - var(--status-bar-height) - 96rpx - 44px);
|
||
/* #ifdef APP-PLUS */
|
||
height: calc(100% - var(--status-bar-height) - 96rpx - 48px);
|
||
/* #endif */
|
||
// box-sizing: border-box;
|
||
}
|
||
// 筛选搜索图标
|
||
.slot-wrap{
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 31rpx;
|
||
.iconfont{
|
||
font-size: 49rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.search-box{
|
||
height: 96rpx;
|
||
background: #EBEEF5;
|
||
padding: 18rpx 56rpx 20rpx 72rpx;
|
||
}
|
||
.product-list{
|
||
padding: 10rpx 24rpx;
|
||
.product-item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 115rpx;
|
||
border-bottom: 1px solid #F2F2F2;
|
||
.product-txt{
|
||
font-size: 28rpx;
|
||
color: #444444;
|
||
line-height: 28rpx;
|
||
text-indent: 2rpx;
|
||
}
|
||
.product-info{
|
||
margin-top: 17rpx;
|
||
font-size: 24rpx;
|
||
color: #444444;
|
||
line-height: 24rpx;
|
||
text-indent: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
// 加载更多
|
||
.loadmore-box{
|
||
padding:10rpx 0 40rpx;
|
||
}
|
||
</style>
|