borrow-record.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <view>
  3. <scroll-view
  4. style="height: 100vh;padding:20rpx 20rpx;box-sizing: border-box;"
  5. scroll-y="true"
  6. @scrolltolower="scroll">
  7. <!-- <view
  8. class="list-area"
  9. v-for="item in dataList"
  10. :key="item.id"
  11. @click="toDetail(item.id,item.assetBarCode,item.isreturn)">
  12. <u-cell :isLink="true">
  13. <view slot="title" class="u-slot-title">
  14. <i class="iconfont icon-shijian"></i>
  15. <text>{{item.isreturn=="0"?"借用时间:"+item.borrowDate:"归还时间:"+item.actualReturnDate}}</text>
  16. </view>
  17. <view slot="label" class="u-slot-label" :style="{color:`${item.isreturn==='0'?'#439dea':'#000000'}`}">
  18. <text class="list-name">设备:{{item.assetBarCode}}</text>
  19. <text class="list-status">{{isReturn(item.isreturn)}}</text>
  20. </view>
  21. </u-cell>
  22. 借用时间 borrowDate
  23. 归还时间 actualReturnDate
  24. 设备编号 assetBarCode
  25. 借用状态 isreturn
  26. 借用地点 borrowPlaceName
  27. <view class="borrow">
  28. <view class="b1">
  29. <view class="name"><i class="iconfont icon-shebei" style="color: #409EFF"></i>设备:{{item.assetBarCode}}</view>
  30. <text style="font-size: 28rpx;">借用地点:{{item.borrowPlaceName}}</text>
  31. <view style="font-size: 28rpx;">{{item.isreturn=="0"?"借用时间:"+item.borrowDate:"归还时间:"+item.actualReturnDate}}</view>
  32. </view>
  33. <view class="b2">
  34. <view :style="{'color': item.isreturn=='0' ? '#F56C6C' : '#5CB87A'}">{{isReturn(item.isreturn)}}</view>
  35. </view>
  36. </view>
  37. </view> -->
  38. <u-list @scrolltolower="scrolltolower" height="100%">
  39. <u-list-item
  40. v-for="(item, index) in dataList"
  41. :key="item.id"
  42. >
  43. <view class="data-box" @click="toDetail(item.id,item.assetBarCode,item.isreturn)">
  44. <view style="display: flex;justify-content: space-between;margin-bottom: 30rpx;">
  45. <view class="data-header">
  46. <image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"
  47. :src="require('@/static/images/shebeiname1.png')"
  48. mode="aspectFit"></image>
  49. <text>设备:<text style="letter-spacing: -1rpx;">{{item.assetBarCode}}</text></text>
  50. </view>
  51. <text :style="{color:`${item.isreturn==='0'? '#F56C6C' : '#5CB87A'}`}">{{isReturn(item.isreturn)}}</text>
  52. </view>
  53. <view class="data-content">
  54. <text>借用地点:{{item.borrowPlaceName}}</text><br/>
  55. <text>{{item.isreturn=="0"?"借用时间:"+item.borrowDate:"归还时间:"+item.actualReturnDate}}</text>
  56. </view>
  57. </view>
  58. </u-list-item>
  59. </u-list>
  60. </scroll-view>
  61. </view>
  62. </template>
  63. <script>
  64. import { getBorrowList } from '@/api/asset.js'
  65. export default {
  66. data() {
  67. return {
  68. dataList:[],
  69. isOver:false,
  70. page:1,
  71. };
  72. },
  73. methods:{
  74. scroll(){
  75. if(this.isOver){
  76. return;
  77. }
  78. this.init(this.page,false)
  79. },
  80. init(page,init){
  81. if(init){
  82. this.dataList=[]
  83. }
  84. getBorrowList({
  85. pageNum: page,
  86. pageSize:10
  87. }).then(res=>{
  88. res.data.rows.forEach(item=>{
  89. this.dataList.push(item)
  90. })
  91. let num = Math.ceil(res.data.total/10)
  92. console.log(num)
  93. if(page == num){
  94. this.isOver = true
  95. }else{
  96. this.isOver = false
  97. this.page++
  98. }
  99. })
  100. },
  101. isReturn(val){
  102. if(val=="0"){
  103. return "未归还"
  104. }else if(val=="1"){
  105. return "已归还"
  106. }
  107. },
  108. toDetail(id,bar,isreturn){
  109. // 0 未还 1 已还
  110. if(isreturn=="0"){
  111. uni.navigateTo({
  112. url:'/pages/borrow/borrow?number='+bar,
  113. })
  114. }else{
  115. uni.navigateTo({
  116. url:'/pages/return/return?id='+id
  117. })
  118. }
  119. }
  120. },
  121. onShow() {
  122. this.init(1,true)
  123. }
  124. }
  125. </script>
  126. <style lang="scss">
  127. page{
  128. background-color: #f5f6fa;
  129. }
  130. .home{
  131. padding: 0 24rpx 30rpx;
  132. // display: flex;
  133. // flex-direction: column;
  134. height: 100vh;
  135. // box-sizing: border-box;
  136. }
  137. .u-slot-value {
  138. display: flex;
  139. justify-content: center;
  140. align-items: center;
  141. i {
  142. flex: 1
  143. }
  144. text {
  145. flex: 4
  146. }
  147. }
  148. /deep/ .u-cell-group__wrapper{
  149. border-left: 1rpx solid #d6d7d9;
  150. border-right: 1rpx solid #d6d7d9;
  151. }
  152. .data-box{
  153. // border: 1px solid black;
  154. margin: 26rpx 0;
  155. padding: 30rpx;
  156. background-color: #fff;
  157. border-radius: 18rpx;
  158. color: #252525;
  159. .data-header{
  160. display: flex;
  161. align-items: center;
  162. font-size: 36rpx;
  163. letter-spacing: 4rpx;
  164. }
  165. .data-content{
  166. line-height: 200%;
  167. font-size: 30rpx;
  168. }
  169. }
  170. // .borrow{
  171. // display: flex;
  172. // background-color: $uni-bg-color;
  173. // margin: 0 0 30rpx 0;
  174. // border-radius: 10rpx;
  175. // padding: 20rpx;
  176. // align-items: center;
  177. // .b1 {
  178. // flex: 5;
  179. // text-align: left;
  180. // line-height: 52rpx;
  181. // .name {
  182. // display: flex;
  183. // i {
  184. // padding-right: 10rpx;
  185. // }
  186. // }
  187. // }
  188. // .b2 {
  189. // flex: 1;
  190. // font-size: 28rpx;
  191. // }
  192. // }
  193. // .list-area{
  194. // background-color: $uni-bg-color;
  195. // margin: 0 0 20rpx 0;
  196. // line-height: 150%;
  197. // border-radius: 10rpx;
  198. // padding: 10rpx 20rpx;
  199. // .u-slot-title{
  200. // display: flex;
  201. // align-items: center;
  202. // .iconfont{
  203. // margin-right: 20rpx;
  204. // font-size: 38rpx;
  205. // font-weight: bold;
  206. // }
  207. // }
  208. // .u-slot-label{
  209. // position: relative;
  210. // .list-status{
  211. // position: absolute;
  212. // right: 140rpx;
  213. // }
  214. // }
  215. // }
  216. </style>