settlementManage.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <view class="settlement-pages">
  3. <!-- 授信结算 -->
  4. <view class="sxjs-box" v-if="settlementType == 'CREDIT'">
  5. <view class="sxjs-head flex flex_column align-center justify_center">
  6. <view>已用额度</view>
  7. <view class="edu">
  8. ¥<text>{{info.usedAmount}}</text>
  9. </view>
  10. <view>
  11. <u-button :throttle-time="100" size="mini" @click="viewDetail" :custom-style="{background:'#1283d4',color:'#fff'}" shape="circle" type="success">查看详情</u-button>
  12. </view>
  13. </view>
  14. <view class="sxjs-head-grid flex align-center justify_between">
  15. <view>
  16. <view>授信额度</view>
  17. <view class="edu">¥<text>{{info.creditLimit}}</text></view>
  18. </view>
  19. <view>
  20. <view>可用额度</view>
  21. <view class="edu">¥<text>{{info.usableAmount}}</text></view>
  22. </view>
  23. </view>
  24. </view>
  25. <!-- 按月结算 -->
  26. <view class="ayjs-box" v-if="settlementType == 'MONTH'">
  27. <view class="ayjs-head flex flex_column align-center justify_center">
  28. <view>累计待结算</view>
  29. <view class="edu">
  30. ¥<text>{{info.waitSettleAmount}}</text>
  31. </view>
  32. <view v-if="info.waitSettleAmount">
  33. <u-button :throttle-time="100" size="mini" @click="viewDetail('-1')" :custom-style="{background:'#1283d4',color:'#fff'}" shape="circle" type="success">查看详情</u-button>
  34. </view>
  35. </view>
  36. <view class="jsList">
  37. <view v-for="item in ayJsList" :key="item.month" class="flex align-center justify_between" @click="viewDetail(item.month)">
  38. <view>{{item.month}}月</view>
  39. <view>
  40. <text>¥{{item.settleAmount}}</text>
  41. <uni-font-icons color="#999" size="12" type="icon-xiangyoujiantou"></uni-font-icons>
  42. </view>
  43. </view>
  44. <view style="padding-top: 10%;border:0" v-if="ayJsList.length==0 && status!='loading'">
  45. <u-empty :src="`/static/nodata.png`" icon-size="120" text="暂无数据" img-width="120" mode="list"></u-empty>
  46. </view>
  47. <view style="padding: 20upx;border:0" v-if="(total>=ayJsList.length&&ayJsList.length)||status=='loading'">
  48. <u-loadmore load-text="正在加载..." :status="status" />
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. import uniIcons from '@/components/uni-icons/uni-icons.vue';
  56. import {findStoreShelfSettleRule,waitSettleForMonth} from '@/api/shelf'
  57. export default {
  58. components: {
  59. uniIcons
  60. },
  61. data() {
  62. return {
  63. settlementType: '',
  64. info: null,
  65. ayJsList: [],
  66. status: '',
  67. total: 0
  68. }
  69. },
  70. onReady() {
  71. },
  72. onNavigationBarButtonTap(btns){
  73. // 结算记录
  74. if(btns.index == 0){
  75. uni.navigateTo({
  76. url: "/pages/digitalShelf/settlementRecord/settlementRecord"
  77. })
  78. }
  79. },
  80. onShow() {
  81. this.getDetail()
  82. },
  83. methods: {
  84. // 查询详情
  85. getDetail(){
  86. findStoreShelfSettleRule().then(res => {
  87. console.log(res)
  88. if(res.status == 200){
  89. this.info = res.data
  90. this.settlementType = res.data.settleType
  91. if(this.settlementType == "MONTH"){
  92. // 获取待结算列表
  93. this.getAyDjsList()
  94. }
  95. }
  96. })
  97. },
  98. // 获取待结算列表
  99. getAyDjsList(){
  100. this.status = 'loading'
  101. waitSettleForMonth().then(res => {
  102. console.log(res)
  103. this.ayJsList = res.data || []
  104. this.total = this.ayJsList.length
  105. this.status = ''
  106. })
  107. },
  108. // 已用额度详情
  109. viewDetail(month){
  110. if(this.settlementType == 'CREDIT'){
  111. uni.navigateTo({
  112. url: "/pages/digitalShelf/settlementManage/settlementSxDetail?data="+encodeURIComponent(JSON.stringify(this.info))
  113. })
  114. }else{
  115. uni.navigateTo({
  116. url: "/pages/digitalShelf/settlementManage/settlementAyDetail?month="+month+"&data="+encodeURIComponent(JSON.stringify(this.info))
  117. })
  118. }
  119. }
  120. }
  121. }
  122. </script>
  123. <style lang="less">
  124. .settlement-pages{
  125. min-height: 100vh;
  126. > view{
  127. padding: 30rpx 50rpx;
  128. }
  129. .sxjs-box{
  130. > view{
  131. background-color: #fff;
  132. border-radius: 25rpx;
  133. margin-bottom: 20rpx;
  134. min-height: 100rpx;
  135. padding: 30rpx;
  136. color: #666;
  137. }
  138. .sxjs-head{
  139. width: 100%;
  140. text-align: center;
  141. font-size: 30rpx;
  142. .edu{
  143. color: #FA3534;
  144. padding: 10rpx 0;
  145. font-size: 36rpx;
  146. text{
  147. font-size: 46rpx;
  148. font-style: italic;
  149. font-weight: 900;
  150. }
  151. }
  152. }
  153. .sxjs-head-grid{
  154. > view{
  155. width: 50%;
  156. border-right: 2rpx solid #eee;
  157. text-align: center;
  158. .edu{
  159. text{
  160. font-size: 40rpx;
  161. color: #222;
  162. }
  163. }
  164. &:last-child{
  165. border: 0;
  166. }
  167. }
  168. }
  169. }
  170. .ayjs-box{
  171. > view{
  172. background-color: #fff;
  173. border-radius: 25rpx;
  174. margin-bottom: 20rpx;
  175. min-height: 100rpx;
  176. padding: 30rpx;
  177. color: #666;
  178. }
  179. .ayjs-head{
  180. width: 100%;
  181. text-align: center;
  182. font-size: 30rpx;
  183. .edu{
  184. color: #FA3534;
  185. padding: 10rpx 0;
  186. font-size: 36rpx;
  187. text{
  188. font-size: 46rpx;
  189. font-style: italic;
  190. font-weight: 900;
  191. }
  192. }
  193. }
  194. .jsList{
  195. > view{
  196. border-bottom: 2rpx solid #eee;
  197. padding: 20rpx 10rpx;
  198. text{
  199. margin-left: 10rpx;
  200. }
  201. &:last-child{
  202. border: 0;
  203. }
  204. }
  205. }
  206. }
  207. }
  208. </style>