listComponent.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <view class="sales-list-component">
  3. <scroll-view class="sales-list-con" :style="{height: scrollH+'px'}" scroll-y @scrolltolower="onreachBottom">
  4. <view class="sales-list-main">
  5. <view class="sales-list-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
  6. <view class="list-item-tit align_center flex justify_between">
  7. <view class="buyer flex">
  8. {{item.shelfName||'--'}}
  9. </view>
  10. <view>
  11. <text :style="{color:item.billState=='CLOSE'?'#ff5500':'#999'}">{{item.billStateDictValue}}</text>
  12. <u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
  13. </view>
  14. </view>
  15. <view class="detail-list">
  16. <view class="flex align_center justify_between" v-for="de in item.orderBillDetailApiEntityList">
  17. <view class="limgs">
  18. <u-image :src="de.images?de.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  19. </view>
  20. <view class="pinfo">
  21. <view class="pname">{{de.productCode}}</view>
  22. <view>{{de.productName}}</view>
  23. </view>
  24. <view class="prices">
  25. <view>¥{{de.settlePrice}}</view>
  26. <view><text>X</text>{{de.totalQty}}{{de.unit}}</view>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="list-item-con">
  31. <view class="list-item-line flex align_center justify_between">
  32. <view class="color_6 font_13">{{item.createDate || '--'}}</view>
  33. <view>
  34. 合计:<text class="amount">¥{{item.settleAmount}}</text>
  35. </view>
  36. </view>
  37. </view>
  38. </view>
  39. <view v-if="listData && listData.length == 0 && status!='loading'">
  40. <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" :text="noDataText" mode="list" :margin-top="50"></u-empty>
  41. </view>
  42. <view style="padding-bottom: 20upx;" v-if="listData.length">
  43. <u-loadmore :status="status" />
  44. </view>
  45. </view>
  46. </scroll-view>
  47. </view>
  48. </template>
  49. <script>
  50. import { toThousands } from '@/libs/tools'
  51. import { orderBillQueryPage } from '@/api/shelf'
  52. export default{
  53. components: {},
  54. props: {
  55. height: { // 非滚动区域高度 upx
  56. type: [String ,Number],
  57. default: 300
  58. },
  59. params: { // 列表查询条件
  60. type: Object,
  61. default: () => {
  62. return {}
  63. }
  64. }
  65. },
  66. data(){
  67. return{
  68. listData: [],
  69. pageNo: 1,
  70. pageSize: 10,
  71. totalNum: 0,
  72. status: 'loadmore',
  73. noDataText: '暂无货架订单',
  74. toThousands,
  75. dataInfo: null,
  76. scrollH: 300,
  77. }
  78. },
  79. watch:{
  80. height(a,b){
  81. console.log(a,b)
  82. const sys = uni.getSystemInfoSync()
  83. console.log(sys.windowHeight)
  84. if(sys.platform == 'android'){
  85. this.scrollH = sys.windowHeight - sys.statusBarHeight - a
  86. }else{
  87. if(sys.safeArea.top){
  88. this.scrollH = sys.windowHeight - a + sys.statusBarHeight - 34
  89. }else{
  90. this.scrollH = sys.windowHeight - a - 14
  91. }
  92. }
  93. },
  94. },
  95. mounted() {
  96. // this.getList()
  97. },
  98. methods:{
  99. refash(){
  100. this.listData = []
  101. this.totalNum = 0
  102. this.getList(1)
  103. },
  104. // 列表
  105. getList(pageNo){
  106. const _this = this
  107. if (pageNo) {
  108. this.pageNo = pageNo
  109. }
  110. let params = {
  111. pageNo: this.pageNo,
  112. pageSize: this.pageSize
  113. }
  114. this.status = "loading"
  115. console.log(Object.assign(params, this.params))
  116. orderBillQueryPage(Object.assign(params, this.params)).then(res => {
  117. if (res.status == 200) {
  118. if(this.pageNo>1){
  119. this.listData = this.listData.concat(res.data.list || [])
  120. }else{
  121. this.listData = res.data.list || []
  122. }
  123. this.totalNum = res.data.count || 0
  124. if (this.listData.length == this.totalNum ) {
  125. this.status = 'nomore'
  126. } else {
  127. this.status = 'loadmore'
  128. }
  129. } else {
  130. this.listData = []
  131. this.totalNum = 0
  132. this.noDataText = res.message
  133. this.status = 'nomore'
  134. }
  135. })
  136. },
  137. // scroll-view到底部加载更多
  138. onreachBottom() {
  139. if(this.listData.length < this.totalNum){
  140. this.pageNo += 1
  141. this.getList()
  142. }
  143. },
  144. // 查看详情
  145. getDetail(data){
  146. uni.navigateTo({ url: '/pages/shelfOrder/orderDetail?pageType=detail&orderBillSn='+data.orderBillSn })
  147. },
  148. }
  149. }
  150. </script>
  151. <style lang="less">
  152. .sales-list-component{
  153. .color_6{
  154. color: #666;
  155. }
  156. .font_13{
  157. font-size: 26upx;
  158. }
  159. .amount{
  160. font-weight: bold;
  161. }
  162. .sales-list-con{
  163. .sales-list-main{
  164. .sales-list-item{
  165. background: #ffffff;
  166. padding: 10upx 20upx;
  167. margin: 25upx 0;
  168. border-radius: 20upx;
  169. box-shadow: 1px 1px 3px #EEEEEE;
  170. &:active{
  171. opacity: 0.6;
  172. }
  173. .list-item-tit{
  174. padding-bottom: 18upx;
  175. padding-top: 10upx;
  176. border-bottom: 1px solid #e4e7ed;
  177. .buyer{
  178. flex-grow: 1;
  179. font-size: 28upx;
  180. font-weight: bold;
  181. }
  182. >view{
  183. &:last-child{
  184. width: 150upx;
  185. text-align: right;
  186. color: #666;
  187. font-size: 26upx;
  188. }
  189. }
  190. }
  191. .detail-list{
  192. > view{
  193. padding: 20upx 0;
  194. border-bottom: 1rpx solid #f8f8f8;
  195. }
  196. .pinfo{
  197. padding: 0 15rpx;
  198. .pname{
  199. font-weight: bold;
  200. margin-bottom: 6rpx;
  201. }
  202. }
  203. .prices{
  204. width: 20%;
  205. text{
  206. font-size: 20rpx;
  207. color: #999;
  208. margin-right: 20rpx;
  209. }
  210. text-align: right;
  211. > view{
  212. &:first-child{
  213. margin-bottom: 10rpx;
  214. }
  215. &:last-child{
  216. font-size: 24rpx;
  217. }
  218. }
  219. }
  220. }
  221. .list-item-con{
  222. padding: 10upx 0;
  223. .list-item-line{
  224. padding: 8upx 0;
  225. }
  226. text{
  227. color: #666;
  228. }
  229. }
  230. }
  231. }
  232. }
  233. }
  234. </style>