billListComponent.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <view class="bill-list-component">
  3. <view class="chooseList u-flex" v-for="(item,index) in listData" :key="item.bizSn">
  4. <view class="checkbox" v-show="showCheck"><u-checkbox v-model="item.checked" name="item.bizSn" @change.stop="checkChange" size="40" shape="circle"></u-checkbox></view>
  5. <view class="choose_r" @click="jumpPage('/pages/sales/salesDetail?salesBillId='+item.bizSn)" >
  6. <view class="u-flex u-row-between">
  7. <view class="billInfo u-flex">
  8. <text>{{item.bizDate.substr(0,10)}}</text>
  9. <view v-if="item.bizStatusDictValue">{{item.bizStatusDictValue}}</view>
  10. <view v-if="item.bizSourceTypeDictValue">{{item.bizSourceTypeDictValue}}</view>
  11. </view>
  12. <view class="billOrder">{{item.bizNo}}</view>
  13. </view>
  14. <view class="rigth_b u-flex u-row-between">
  15. <view>应收:¥{{item.bizAmount ||0}}</view>
  16. <view>已收:¥{{item.settledAmount ||0}}</view>
  17. <view>
  18. 待收:
  19. <text>¥{{item.unsettleAmount|| 0}}</text>
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. <view v-if="listData&&listData.length==0">
  25. <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50"></u-empty>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. export default {
  31. props: {
  32. list: {
  33. type: Array,
  34. default: () => {
  35. return [];
  36. }
  37. },
  38. showCheck:{
  39. type: Boolean,
  40. default:false
  41. }
  42. },
  43. data() {
  44. return {
  45. listData:[],
  46. noDataText:'暂无数据'
  47. };
  48. },
  49. methods: {
  50. setData(list){
  51. this.listData = list
  52. },
  53. checkChange(e){
  54. const row = this.listData.find(item => item.bizSn == e.name)
  55. if(row){
  56. row.checked = !row.checked
  57. this.listData.splice()
  58. }
  59. // 判断是否全选
  60. const isAllNoChecked = this.listData.filter(item => !item.checked)
  61. this.$emit('allChecked',isAllNoChecked.length == 0,row)
  62. },
  63. setChecked(id,val){
  64. const row = this.partList.find(item => item.id == id)
  65. row.checked = val
  66. this.partList.splice()
  67. },
  68. // 获取所有数据
  69. getAllData(){
  70. return this.listData
  71. },
  72. // 全选
  73. allSelect(val){
  74. this.listData.map(item => {
  75. item.checked = val
  76. })
  77. this.listData.splice()
  78. },
  79. jumpPage(url){
  80. uni.navigateTo({
  81. url
  82. })
  83. }
  84. }
  85. };
  86. </script>
  87. <style lang="less">
  88. .bill-list-component {
  89. .chooseList {
  90. padding: 30rpx 20rpx;
  91. border-bottom: 1rpx solid #e4e7ed;
  92. &:last-child {
  93. border-bottom: 0rpx solid #e4e7ed;
  94. }
  95. .checkbox {
  96. width: 74rpx;
  97. }
  98. .choose_r {
  99. flex: 1;
  100. .billInfo {
  101. text {
  102. font-weight: 600;
  103. }
  104. view {
  105. padding: 4rpx 10rpx;
  106. text-align: center;
  107. border-radius: 30rpx;
  108. border: 1rpx solid #e4e7ed;
  109. margin-left: 10rpx;
  110. font-size: 0.7rem;
  111. color: #666;
  112. }
  113. }
  114. .billOrder {
  115. font-size: 0.8rem;
  116. color: #666;
  117. }
  118. .rigth_b {
  119. color: #666;
  120. font-size: 0.8rem;
  121. margin-top: 20rpx;
  122. view {
  123. &:last-child {
  124. color: #333;
  125. text {
  126. color: #f0ad4e;
  127. }
  128. }
  129. }
  130. }
  131. }
  132. }
  133. }
  134. </style>