listComponent.vue 5.8 KB

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