listComponent.vue 5.9 KB

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