billListComponent.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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>应收:¥{{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" @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. 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. // 获取所有数据
  64. getAllData(){
  65. return this.listData
  66. },
  67. // 全选
  68. allSelect(val){
  69. this.listData.map(item => {
  70. item.checked = val
  71. })
  72. this.listData.splice()
  73. },
  74. jumpPage(url){
  75. uni.navigateTo({
  76. url
  77. })
  78. }
  79. }
  80. };
  81. </script>
  82. <style lang="scss" scoped>
  83. .bill-list-component {
  84. height: 100%;
  85. .chooseList {
  86. padding: 30rpx 20rpx;
  87. border-bottom: 1rpx solid #e4e7ed;
  88. &:last-child {
  89. border-bottom: 0rpx solid #e4e7ed;
  90. }
  91. .checkbox {
  92. width: 74rpx;
  93. }
  94. .choose_r {
  95. flex: 1;
  96. .billInfo {
  97. text {
  98. font-weight: 600;
  99. }
  100. view {
  101. padding: 4rpx 10rpx;
  102. text-align: center;
  103. border-radius: 30rpx;
  104. border: 1rpx solid #e4e7ed;
  105. margin-left: 10rpx;
  106. font-size: 0.7rem;
  107. color: #666;
  108. }
  109. }
  110. .billOrder {
  111. font-size: 0.8rem;
  112. color: #666;
  113. }
  114. .rigth_b {
  115. color: #666;
  116. font-size: 0.8rem;
  117. margin-top: 20rpx;
  118. view {
  119. &:last-child {
  120. color: #333;
  121. text {
  122. color: #f0ad4e;
  123. }
  124. }
  125. }
  126. }
  127. }
  128. }
  129. }
  130. </style>