<template> <view class="sales-list-component"> <scroll-view class="sales-list-con" :style="{height: scrollH+'upx'}" scroll-y @scrolltolower="onreachBottom"> <view class="sales-list-main"> <view class="sales-list-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)"> <view class="list-item-tit flex align_center justify_between"> <view class="u-line" :style="{background: $config('primaryColor')}"></view> <view class="buyer">{{item.shelfName||'--'}}</view> <view>{{item.billStateDictValue}} <u-icon name="arrow-right" color="#969da3" size="28"></u-icon></view> </view> <view class="detail-list"> <view class="flex align_center justify_between" v-for="de in item.orderBillDetailApiEntityList"> <view class="limgs"> <u-image :src="de.images?de.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image> </view> <view class="pinfo"> <view class="pname">{{de.productCode}}</view> <view>{{de.productName}}</view> </view> <view class="prices"> <view>¥{{de.settlePrice}}</view> <view><text>X</text>{{de.totalQty}}{{de.unit}}</view> </view> </view> </view> <view class="list-item-con"> <view class="list-item-line flex align_center justify_between"> <view class="color_6 font_13">{{item.createDate || '--'}}</view> <view> 合计:¥{{item.settleAmount}} </view> </view> </view> </view> <view v-if="listData && listData.length == 0 && status!='loading'"> <u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="30"></u-empty> </view> <view style="padding-bottom: 20upx;"> <u-loadmore v-if="totalNum>listData.length || status=='loading'" :status="status" /> </view> </view> </scroll-view> </view> </template> <script> import { toThousands } from '@/libs/tools' import { orderBillQueryPage } from '@/api/shelf' export default{ components: {}, props: { height: { // 非滚动区域高度 upx type: [String ,Number], default: 300 }, params: { // 列表查询条件 type: Object, default: () => { return {} } } }, data(){ return{ listData: [], pageNo: 1, pageSize: 10, totalNum: 0, status: 'loadmore', noDataText: '暂无数据', toThousands, dataInfo: null, scrollH: 300, } }, watch:{ height(a,b){ const sys = uni.getSystemInfoSync() if(sys.platform == 'android'){ this.scrollH = (sys.windowHeight - sys.statusBarHeight - a) * 2 }else{ if(sys.safeArea.top){ this.scrollH = (sys.windowHeight - a) * 2 + sys.statusBarHeight - 34 }else{ this.scrollH = (sys.windowHeight - a) * 2 - 14 } } }, }, mounted() { this.getList() }, methods:{ refash(){ this.listData = [] this.totalNum = 0 this.getList(1) }, // 列表 getList(pageNo){ const _this = this if (pageNo) { this.pageNo = pageNo } let params = { pageNo: this.pageNo, pageSize: this.pageSize } this.status = "loading" console.log(Object.assign(params, this.params)) orderBillQueryPage(Object.assign(params, this.params)).then(res => { if (res.status == 200) { if(this.pageNo>1){ this.listData = this.listData.concat(res.data.list || []) }else{ this.listData = res.data.list || [] } this.totalNum = res.data.count || 0 } else { this.listData = [] this.totalNum = 0 this.noDataText = res.message } this.status = "loadmore" }) }, // scroll-view到底部加载更多 onreachBottom() { if(this.listData.length < this.totalNum){ this.pageNo += 1 this.getList() } }, // 查看详情 getDetail(data){ uni.navigateTo({ url: '/pages/shelfOrder/orderDetail?pageType=detail&orderBillSn='+data.orderBillSn }) }, } } </script> <style lang="less"> .sales-list-component{ .color_6{ color: #666; } .font_13{ font-size: 26upx; } .sales-list-con{ .sales-list-main{ .sales-list-item{ background: #ffffff; padding: 20upx; margin: 25upx 0; border-radius: 25upx; box-shadow: 1px 1px 3px #EEEEEE; .list-item-tit{ padding-bottom: 18upx; padding-top: 10upx; border-bottom: 1px solid #e4e7ed; .u-line{ display: inline-block; width: 6upx; height: 28upx; vertical-align: bottom; margin: 0 10upx; border-radius: 5upx; } .buyer{ flex-grow: 1; font-size: 28upx; font-weight: bold; } >view{ &:last-child{ width: 150upx; text-align: right; color: #666; font-size: 26upx; } } } .detail-list{ > view{ padding: 20upx 0; border-bottom: 1rpx solid #f8f8f8; } .pinfo{ padding: 0 15rpx; .pname{ font-weight: bold; margin-bottom: 6rpx; } } .prices{ width: 20%; text{ font-size: 20rpx; color: #999; margin-right: 20rpx; } text-align: right; > view{ &:first-child{ margin-bottom: 10rpx; } &:last-child{ font-size: 24rpx; } } } } .list-item-con{ padding: 10upx 0; .list-item-line{ padding: 8upx 0; } text{ color: #666; } } } } } } </style>