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.

month-statement-query-list.vue 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <view class="content">
  3. <view class="top-content">
  4. <view class="example-body">
  5. <text>请选择月份:</text>
  6. <picker mode="date" @change="bindDateChange" fields="month">
  7. <view class="uni-input">{{state.date}}</view>
  8. </picker>
  9. <button size="mini" style="color: #ffffff;
  10. backgroundColor: rgb(118, 200, 77);
  11. borderColor: rgb(118, 200, 77);
  12. font-size: 26rpx;
  13. flex-shrink: 0;margin-left: 20rpx;" @click="search()">搜索</button>
  14. </view>
  15. </view>
  16. <view class="uni-container" v-if="state.listData.length>0">
  17. <view class="list-item" v-for="(item,index) in state.listData"
  18. @click="query(item.handleDate,item.vehicleId)">
  19. <view><text>姓名:</text><text>{{item.customerName}}</text></view>
  20. <view><text>证件号码:</text><text>{{item.customerIdNum}}</text></view>
  21. <view><text>通行次数:</text><text>{{item.num}}</text></view>
  22. <view><text>通行年月:</text><text>{{item.handleDate}}</text></view>
  23. <view><text>通行车牌号:</text><text>{{state.vehicleNum}}</text></view>
  24. <view><text>通行车牌颜色:</text><text>{{state.vehicleColor}}</text></view>
  25. <view><text>月通行总额:</text><text>{{item.money/100}}元</text></view>
  26. </view>
  27. <view class="bottom-line" v-if="state.flags">我是有底线的~~~</view>
  28. </view>
  29. </view>
  30. </template>
  31. <script setup lang="ts">
  32. import { reactive } from "vue";
  33. import { onLoad, onReachBottom } from "@dcloudio/uni-app";
  34. import {getUserMsg,monthlyStatementQuery } from "@/utils/network/api.js";
  35. import { stringToJson } from "@/utils/network/encryption";
  36. import { request, requestNew } from "@/utils/network/request.js";
  37. import { getItem } from "@/utils/storage";
  38. import { getVehiclePlateColor } from "@/datas/vehiclePlateColor";
  39. import { msg, navTo } from "@/utils/utils";
  40. const state = reactive({
  41. startTime: Date.now(), //日期
  42. listData: [],
  43. range: ['', ''],
  44. flags: false,
  45. vehicleId: "",
  46. customerIdNum: "",
  47. vehicleNum: "",
  48. vehicleColor: "",
  49. date: "请选择月份"
  50. })
  51. onLoad((option) => {
  52. console.log("option", option.vehicleId)
  53. state.vehicleId = option.vehicleId;
  54. state.vehicleNum = option.vehicleId.split('_')[0];
  55. state.vehicleColor = getVehiclePlateColor(option.vehicleId.split('_')[1]);
  56. getUserinfo()
  57. })
  58. const bindDateChange = (e) => {
  59. state.date = e.detail.value
  60. }
  61. const getUserinfo = () => {
  62. const options = {
  63. type: 2,
  64. data: { openId: getItem('openId') },
  65. method: "POST",
  66. showLoading: true,
  67. };
  68. request(getUserMsg, options).then((res) => {
  69. const data = stringToJson(res.bizContent);
  70. console.log(data, "用户信息");
  71. state.customerIdNum = data.customerIdNum
  72. });
  73. }
  74. //业务完成日志
  75. const search = () => {
  76. if (state.date == '请选择月份') {
  77. msg("请选择月份");
  78. return;
  79. }
  80. var data = {
  81. startTime: state.date,
  82. // endTime: state.range[1],
  83. vehicleId: state.vehicleId,
  84. customerIdNum: state.customerIdNum
  85. };
  86. const options = {
  87. type: 2,
  88. data: data,
  89. method: "POST",
  90. showLoading: true,
  91. };
  92. requestNew(monthlyStatementQuery, options).then((res) => {
  93. state.listData = res.result
  94. console.log("业务完成日志", state.listData,)
  95. });
  96. }
  97. const query = (handleDate, vehicleId) => {
  98. navTo(`/subpackage/personal-center/search/select-card?vehicleId=${vehicleId}&&handleDate=${handleDate}`)
  99. }
  100. </script>
  101. <style scoped>
  102. .top-content {
  103. position: fixed;
  104. left: 0;
  105. top: 0;
  106. background-color: white;
  107. width: 100%;
  108. padding: 20rpx;
  109. box-sizing: border-box;
  110. }
  111. .content {
  112. font-size: 32rpx;
  113. padding: 20rpx 30rpx;
  114. background-color: #EEF7F7;
  115. min-height: 100vh;
  116. }
  117. .card {
  118. display: flex;
  119. margin: 0 20rpx;
  120. align-items: center;
  121. }
  122. .title {
  123. margin-bottom: 20rpx;
  124. }
  125. .uni-container {
  126. margin: 50rpx 0;
  127. margin-top: 150rpx;
  128. }
  129. .example-body {
  130. display: flex;
  131. align-items: center;
  132. margin-top: 20rpx;
  133. }
  134. /deep/.uni-date-x {
  135. height: 76rpx !important;
  136. }
  137. .list-item {
  138. width: 95%;
  139. border-radius: 10rpx;
  140. margin: 30rpx auto;
  141. font-size: 28rpx;
  142. border: 1rpx solid #ccc;
  143. padding: 12rpx;
  144. box-sizing: border-box;
  145. background-color: white;
  146. }
  147. .list-item>view {
  148. margin-bottom: 10rpx;
  149. }
  150. .bottom-line {
  151. text-align: center;
  152. margin: 30rpx 0;
  153. }
  154. .uni-input {
  155. width: 200rpx;
  156. border: 1rpx solid #ccc;
  157. border-radius: 10rpx;
  158. }
  159. </style>