billListComponent.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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="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>应收:¥{{toThousands(item.bizAmount||0,2)}}</view>
  16. <view>已收:¥{{toThousands(item.settledAmount ||0,2)}}</view>
  17. <view>
  18. 待收:
  19. <text>¥{{toThousands(item.unsettleAmount||0,2)}}</text>
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. <view v-if="listData&&listData.length==0" @click="jumpPage('/pages/test')">
  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. import { toThousands } from '@/libs/tools.js'
  31. export default {
  32. props: {
  33. list: {
  34. type: Array,
  35. default: () => {
  36. return [];
  37. }
  38. },
  39. showCheck:{
  40. type: Boolean,
  41. default:false
  42. }
  43. },
  44. data() {
  45. return {
  46. listData:[],
  47. noDataText:'暂无数据',
  48. toThousands
  49. };
  50. },
  51. methods: {
  52. setData(list){
  53. this.listData = list
  54. },
  55. checkChange(e){
  56. const row = this.listData.find(item => item.bizSn == e.name)
  57. if(row){
  58. row.checked = !row.checked
  59. this.listData.splice()
  60. }
  61. // 判断是否全选
  62. const isAllNoChecked = this.listData.filter(item => !item.checked)
  63. this.$emit('allChecked',isAllNoChecked.length == 0,row)
  64. },
  65. // 获取所有数据
  66. getAllData(){
  67. return this.listData
  68. },
  69. // 全选
  70. allSelect(val){
  71. this.listData.map(item => {
  72. item.checked = val
  73. })
  74. this.listData.splice()
  75. },
  76. jumpPage(url){
  77. uni.navigateTo({
  78. url
  79. })
  80. }
  81. }
  82. };
  83. </script>
  84. <style lang="scss" scoped>
  85. .bill-list-component {
  86. height: 100%;
  87. .chooseList {
  88. padding: 30rpx 20rpx;
  89. border-bottom: 1rpx solid #e4e7ed;
  90. &:last-child {
  91. border-bottom: 0rpx solid #e4e7ed;
  92. }
  93. .checkbox {
  94. width: 74rpx;
  95. }
  96. .choose_r {
  97. flex: 1;
  98. .billInfo {
  99. text {
  100. font-weight: 600;
  101. }
  102. view {
  103. padding: 4rpx 10rpx;
  104. text-align: center;
  105. border-radius: 30rpx;
  106. border: 1rpx solid #e4e7ed;
  107. margin-left: 10rpx;
  108. font-size: 0.7rem;
  109. color: #666;
  110. }
  111. }
  112. .billOrder {
  113. font-size: 0.8rem;
  114. color: #666;
  115. }
  116. .rigth_b {
  117. color: #666;
  118. font-size: 0.8rem;
  119. margin-top: 20rpx;
  120. view {
  121. &:last-child {
  122. color: #333;
  123. text {
  124. color: #f0ad4e;
  125. }
  126. }
  127. }
  128. }
  129. }
  130. }
  131. }
  132. </style>