listComponent.vue 5.5 KB

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