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.

consumption-record.vue 2.4KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <view class='content'>
  3. <view class='search_wrap'>
  4. <input type="text" v-model='state.value' placeholder='搜索ETC卡号' @confirm="doSearch"/><button size='mini' @click='search()'>搜索</button>
  5. </view>
  6. <view class='item' v-for="(item,index) in state.newList">
  7. <view class='time'><text>时间:{{item.tradeConfirmTime}}</text><text>¥{{item.fee}}</text></view>
  8. <view>ETC卡号:{{item.cardId}}</view>
  9. </view>
  10. </view>
  11. </template>
  12. <script lang="ts" setup>
  13. import { reactive } from "vue";
  14. import {request} from "@/utils/network/request.js";
  15. import {transactionRecord} from "@/utils/network/api.js";
  16. import {stringToJson} from "@/utils/network/encryption.js";
  17. import { onLoad} from "@dcloudio/uni-app";
  18. const state = reactive({
  19. list:'', //所有数据
  20. newList:'', //最终展示的
  21. name:'',
  22. value:'',//input框里的值
  23. })
  24. onLoad((option : any) => {
  25. console.log("option",option)
  26. state.name=option.name;
  27. getList();
  28. })
  29. const getList=()=>{
  30. // const options = {
  31. // type: 2,
  32. // data: {
  33. // 'accountId': state.name
  34. // },
  35. // method: "POST",
  36. // showLoading: true,
  37. // };
  38. // request(transactionRecord, options).then((res) => {
  39. // const data = stringToJson(res.bizContent);
  40. // state.list=data.qtkCorporateAccountDetails;
  41. // for(var i=0;i<state.list.length;i++){
  42. // state.list[i].tradeConfirmTime=state.list[i].tradeConfirmTime.split('T').join(' ');
  43. // }
  44. // state.newList=state.list;
  45. // console.log("交易记录",data)
  46. // })
  47. }
  48. const search=()=>{
  49. state.newList=[];
  50. for (var i = 0; i < state.list.length; i++) {
  51. if (state.list[i].cardId.indexOf(state.value) >= 0) {
  52. state.newList.push(state.list[i]);
  53. }
  54. }
  55. console.log("state.newList",state.newList)
  56. }
  57. const doSearch=()=>{
  58. search();
  59. }
  60. </script>
  61. <style scoped>
  62. .content{
  63. /* background-color:#f6f6f6; */
  64. min-height:100vh;
  65. padding: 0 30rpx;
  66. overflow: hidden;
  67. font-size: 32rpx;
  68. }
  69. .search_wrap{
  70. display:flex;
  71. margin:20rpx 0;
  72. }
  73. .search_wrap>input{
  74. background-color:rgb(238,240,237);
  75. width: 76%;
  76. height: 40rpx;
  77. line-height: 40rpx;
  78. padding: 10rpx 10rpx;
  79. border-radius: 10rpx 0 0 10rpx;
  80. }
  81. .item{
  82. width:100%;
  83. border-radius:10rpx;
  84. box-sizing: border-box;
  85. padding: 30rpx 20rpx;
  86. margin-top:30rpx;
  87. background:linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  88. color:white;
  89. }
  90. .time{
  91. display:flex;
  92. margin-bottom: 16rpx;
  93. justify-content: space-between;
  94. }
  95. </style>