billHistoryDetail.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="b_head">
  4. <view class="head_list">
  5. <text>分享时间</text>
  6. <text>2022-11-29 10:02:54</text>
  7. </view>
  8. <view class="head_list">
  9. <text>客户名称</text>
  10. <text>东莞市寮步车正汽车服务中心</text>
  11. </view>
  12. <view class="head_list">
  13. <text>对账周期</text>
  14. <text>2022年11月29日~2022年12月31日</text>
  15. </view>
  16. <view class="head_list">
  17. <text>付款状态</text>
  18. <text>已付款(支付宝)</text>
  19. </view>
  20. </view>
  21. <view class="b_detail">
  22. <view class="detail_list u-flex">
  23. <view class="detail_box">
  24. <text>总单数:</text>
  25. <text>34</text>
  26. </view>
  27. <view class="detail_box">
  28. <text>待收金额合计:</text>
  29. <text>34.00</text>
  30. </view>
  31. </view>
  32. <view class="detail_list u-flex">
  33. <view class="detail_box">
  34. <text>折让金额:</text>
  35. <text>34</text>
  36. </view>
  37. <view class="detail_box">
  38. <text>折让待收金额:</text>
  39. <text>34.00</text>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="detail_con">
  44. <billList></billList>
  45. </view>
  46. <view class="footer">
  47. <u-button type="primary" :custom-style="customStyle" shape="circle">再次发送对账单</u-button>
  48. </view>
  49. </view>
  50. </template>
  51. <script>
  52. import billList from './billListComponent.vue'
  53. import { findBySn,insert } from '@/api/verify.js';
  54. export default {
  55. components: { billList },
  56. data() {
  57. return {
  58. customStyle:{
  59. backgroundColor: this.$config('primaryColor'),
  60. color: '#fff',
  61. verifySn:'',
  62. billInfo:{},
  63. billList:[]
  64. },
  65. };
  66. },
  67. onReady() {
  68. uni.setNavigationBarColor({
  69. frontColor: '#ffffff',
  70. backgroundColor: this.$config('primaryColor')
  71. });
  72. },
  73. onLoad(options) {
  74. if(options && options.billId){
  75. this.verifySn=options.billId
  76. this.loadData()
  77. }
  78. },
  79. methods:{
  80. loadData(){
  81. queryPage({verifySn:this.verifySn}).then(res => {
  82. if (res.status == 200) {
  83. this.billInfo=res.data;
  84. this.billList=res.data.list;
  85. }
  86. });
  87. }
  88. }
  89. };
  90. </script>
  91. <style lang="scss" scoped>
  92. .content {
  93. height: 100vh;
  94. width: 100%;
  95. .b_head {
  96. background-color: #fff;
  97. .head_list {
  98. padding:14rpx 20rpx;
  99. border-bottom: 1rpx solid #f8f8f8;
  100. text {
  101. &:first-child {
  102. color: $uni-text-color-grey;
  103. display: inline-block;
  104. width: 160rpx;
  105. }
  106. }
  107. }
  108. }
  109. .b_detail{
  110. margin:6rpx 0;
  111. background-color: #fff;
  112. padding:20rpx;
  113. box-sizing: border-box;
  114. .detail_list{
  115. margin-bottom: 10rpx;
  116. &:last-child{
  117. margin-bottom: 0rpx;
  118. }
  119. .detail_box::after{
  120. content:';';
  121. color:$uni-text-color-grey;
  122. }
  123. .detail_box{
  124. text{
  125. &:first-child{
  126. color:$uni-text-color-grey;
  127. }
  128. &:last-child{
  129. color:$uni-color-warning;
  130. font-weight: 600;
  131. }
  132. }
  133. }
  134. }
  135. }
  136. .detail_con{
  137. flex-grow: 1;
  138. overflow: auto;
  139. background-color: #fff;
  140. }
  141. .footer{
  142. padding:10rpx 20rpx;
  143. background:#fff;
  144. margin-top:20rpx;
  145. }
  146. }
  147. </style>