You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

transferRecord.vue 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <view class="content">
  3. <text class="please">请选择车辆:</text>
  4. <view class="uni-list-cell-db">
  5. <picker @change="bindPickerChange" :value="state.index" :range="state.array">
  6. <view class="uni-input">{{state.array[state.index]}}</view>
  7. </picker>
  8. </view>
  9. <view class="time-btn" @click="query(1)">查询</view>
  10. </view>
  11. <view class="list" v-for="(item,index) in state.tableData" :key="index">
  12. <view><text class="title">卡号:</text><text>{{item.cardId}}</text></view>
  13. <view><text class="title">签号:</text><text>{{item.obuId}}</text></view>
  14. <view><text class="title">车牌号:</text><text>{{item.vehiclePlate}}</text></view>
  15. <view><text class="title">过户状态:</text><text>{{item.statusChinese}}</text></view>
  16. <view><text class="title">过户开始时间:</text><text>{{item.insertTime}}</text></view>
  17. <view><text class="title">过户结束时间:</text><text>{{item.updateTime}}</text></view>
  18. </view>
  19. <view class="noRecord" v-if="state.noRecord">暂无过户记录</view>
  20. <view style="text-align: center;margin: 20rpx;margin-bottom: 50rpx;" v-if="state.flags">我是有底线的</view>
  21. </template>
  22. <script setup lang="ts">
  23. import { ref, reactive } from "vue";
  24. import { onLoad, onReachBottom } from "@dcloudio/uni-app";
  25. import { selectCarInfo, transferRecordApi } from "@/utils/network/api.js";
  26. import { getItem } from "@/utils/storage";
  27. import { request } from "@/utils/network/request.js";
  28. import { stringToJson } from "@/utils/network/encryption.js";
  29. const state = reactive({
  30. index: 0, //渠道订单编号
  31. array: [],
  32. carData: [], //所有车的数据
  33. vehicleId: "", //传给后端的车牌id
  34. tableData: [],
  35. noRecord: false,
  36. pageNo: 1,
  37. pageSize: 10,
  38. flags: false,
  39. });
  40. onLoad(() => {
  41. queryCarMsg();
  42. });
  43. const bindPickerChange = (e) => {
  44. state.index = e.detail.value
  45. }
  46. // 查询车辆信息
  47. const queryCarMsg = () => {
  48. const options = {
  49. type: 2,
  50. data: {
  51. "openId": getItem('openId')
  52. },
  53. method: "POST",
  54. showLoading: true,
  55. };
  56. //调用方式
  57. request(selectCarInfo, options).then((res) => {
  58. const data = (stringToJson(res.bizContent).vehicleManages)
  59. for (var i = 0; i < data.length; i++) {
  60. state.array.push(data[i]['vehiclePlate'])
  61. var obj = {};
  62. obj["vehiclePlate"] = data[i]['vehiclePlate']
  63. obj["vehicleId"] = data[i]['vehicleId']
  64. state.carData.push(obj)
  65. }
  66. console.log("state.list", data)
  67. console.log("state.carData", state.carData)
  68. })
  69. }
  70. const query = (val) => {
  71. if (val == 1) {
  72. state.pageNo = 1
  73. }
  74. if (state.pageNo == 1 && state.tableData.length > 0) {
  75. state.tableData = []
  76. }
  77. for (var i = 0; i < state.carData.length; i++) {
  78. if (state.carData[i]["vehiclePlate"] == state.array[state.index]) {
  79. state.vehicleId = state.carData[i]["vehicleId"]
  80. }
  81. }
  82. console.log("state.array[state.index]", state.vehicleId)
  83. const options = {
  84. type: 2,
  85. data: {
  86. "openId": getItem('openId'),
  87. "vehicleId": state.vehicleId,
  88. "pageNo": state.pageNo,
  89. "pageSize": state.pageSize,
  90. },
  91. method: "POST",
  92. showLoading: true,
  93. };
  94. //调用方式
  95. request(transferRecordApi, options).then((res) => {
  96. const data = (stringToJson(res.bizContent)).data
  97. state.tableData = [...stringToJson(res.bizContent).data, ...state.tableData]
  98. if (state.tableData.length != 0) {
  99. for (var k = 0; k < state.tableData.length; k++) {
  100. // WAITING("等待使用", 0) USE("已使用", 1) CANCEL("弃置", -1)
  101. if (state.tableData[k]["status"] == "WAITING") {
  102. state.tableData[k]["statusChinese"] = "待完成过户"
  103. } else if (state.tableData[k]["status"] == "USE") {
  104. state.tableData[k]["statusChinese"] = "已过户"
  105. } else {
  106. state.tableData[k]["statusChinese"] = "弃置"
  107. }
  108. state.tableData[k]["vehiclePlate"] = state.tableData[k]["vehicleId"].substring(0, state.tableData[k]["vehicleId"].length - 2)
  109. }
  110. state.noRecord = false
  111. } else {
  112. state.noRecord = true
  113. state.tableData = []
  114. }
  115. console.log("res", data, state.noRecord)
  116. })
  117. }
  118. // 触底加载
  119. onReachBottom(() => {
  120. if (state.tableData.length < state.pageNo * 10) return state.flags = true
  121. console.log("触底了")
  122. state.pageNo++
  123. query(2)
  124. })
  125. </script>
  126. <style scoped>
  127. .content {
  128. font-size: 32rpx;
  129. display: flex;
  130. padding: 20rpx;
  131. align-items: center;
  132. }
  133. .uni-input {
  134. border: 1rpx solid #c1c1c1;
  135. border-radius: 5rpx;
  136. padding: 2rpx 10rpx;
  137. }
  138. .please {
  139. margin-right: 26rpx;
  140. display: inline-block;
  141. }
  142. .time-btn {
  143. width: 120rpx;
  144. height: 60rpx;
  145. background: #00B38B;
  146. border-radius: 40rpx;
  147. color: #FFFFFF;
  148. font-size: 32rpx;
  149. line-height: 60rpx;
  150. text-align: center;
  151. margin-left: 60rpx;
  152. }
  153. .list {
  154. width: 93%;
  155. margin: 20rpx auto;
  156. background-color: #f4f4f4;
  157. border-radius: 10rpx;
  158. font-size: 32rpx;
  159. padding: 10rpx;
  160. box-sizing: border-box;
  161. }
  162. .list>view {
  163. margin: 20rpx;
  164. }
  165. .title {
  166. width: 30%;
  167. }
  168. .noRecord {
  169. text-align: center;
  170. margin: 100rpx auto;
  171. font-size: 32rpx;
  172. }
  173. </style>