<template> <web-view v-if="list.length==1" :src="src" bindload='pageLoad'></web-view> <view class="content" v-else> <view class="list-box"> <swiper-item class="swiper-item"> <scroll-view scroll-y class="scroll-box" @scrolltolower="onreachBottom"> <view class="flex align_center justify_between item-box" v-for="item in list" :key="item.id" @click="toDetail(item)"> <view class="l_box flex align_center"> <view class="l_imgs"> <u-image :src="getImg(item)" height="7em" border-radius="0.4em"></u-image> </view> <view class="flex_1" style="padding: 0 0.6em;"> <view style="line-height: 1.5em;"> <view v-if="item.blackDetectTypeName">{{item.blackDetectTypeName}}</view> <view v-if="item.redDetectTypeName">{{item.redDetectTypeName}}</view> <view v-if="item.yellowDetectTypeName">{{item.yellowDetectTypeName}}</view> </view> <view class="l_time flex align_center justify_between "> <view>{{item.store.name}}</view> <view>{{item.checkDate}}</view> </view> </view> </view> <view class="flex align_center r_box"> <view> <u-icon name="arrow-right"></u-icon> </view> </view> </view> <view style="padding: 20upx;"> <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty> <u-loadmore v-if="list.length||status=='loading'" :status="status" /> </view> </scroll-view> </swiper-item> </swiper> </view> </view> </template> <script> import { checkApiQueryList } from '@/api/bundel.js' export default { components: {}, data() { return { status: '', noDataText: '暂无数据', pageNo: 1, pageSize: 10, list: [], total: 0, merchantCustomerId: '', src: '' } }, onLoad(opts) { console.log(opts) this.merchantCustomerId = opts.merchantCustomerId this.pageInit() }, // 下拉刷新 onPullDownRefresh(){ this.pageInit() setTimeout(function () { uni.stopPullDownRefresh(); }, 1000); }, onShareAppMessage() {}, methods: { pageInit(){ // 获取扫描记录 this.getbundle(1) }, getImg(item){ let url =item.customer.sex==1?'/static/def_boy@2x.png':'/static/def_gri@2x.png' if(item.checkResult){ url = item.checkResult.imgPath+'mid/img_sun.jpg' } return url }, // scroll-view到底部加载更多 onreachBottom() { console.log(this.list.length < this.total) if(this.list.length < this.total){ this.status = 'loading'; this.pageNo += 1 this.getbundle() }else{ this.status = "nomore" } }, // 查询列表 getbundle (pageNo) { if (pageNo) { this.pageNo = pageNo } let params = { pageNo: this.pageNo, pageSize: this.pageSize, merchantCustomerId: this.merchantCustomerId } this.status = "loading" checkApiQueryList(params).then(res => { if (res.status == 200) { if(this.pageNo>1){ this.list = this.list.concat(res.data.list || []) }else{ this.list = res.data.list || [] } this.total = res.data.count || 0 } else { this.list = [] this.total = 0 this.noDataText = res.message } if(this.list.length<this.total){ this.status = "loadmore" }else{ this.status = "nomore" } if(this.list.length==1){ this.openDetail() } }) }, openDetail(){ uni.showLoading({ title: '加载中', }) const baseUrl = getApp().globalData.baseUrl.replace('beauty-customer/','') const url = baseUrl.indexOf('.test.')>=0 ? 'https://md.test.baibaibai.net/' : 'https://md.baibaibai.net/' this.src = url+"checkReport/index/mini/"+this.list[0].id setTimeout(function() { uni.hideLoading() }, 5000); }, toDetail(item){ uni.navigateTo({ url:"/pages/checkReport/detail?id="+item.id }) } } } </script> <style lang="less"> .content { margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: column; .ml10{ margin-left: 0.2em; } .list-box{ flex-grow: 1; overflow: auto; position: relative; .swiper-item{ width: 100%; height: 100%; overflow: hidden; .scroll-box{ width: 100%; height: 100%; overflow: auto; .item-box{ border-bottom: 1px solid #eee; padding: 1em; &:active{ background: #f8f8f8; } .l_box{ font-size: 1.1em; flex-grow: 1; } .l_imgs{ width: 5em; } .l_time{ color: #999; padding-top: 0.5em; } .r_box{ color: #999; > view{ padding: 0 0.1em; text-align: right; } } } .des{ text-align: center; padding: 3em 0; color: #999; font-size: 0.9em; } } } } } </style>