效果图:
template代码：
<template>
<view class="content">
<!-- 头部搜索框 -->
<view class="serach">
<text class="page-title">历史记录</text>
<input placeholder='请输入兑换码' cursor-color='#888' class="serach-input" auto-blur='true' v-model="code" @blur="codeSearch"/>
<uni-data-select
v-model="searchValue"
:localdata="range"
@change="change"
:clear="false"
class="search-select"
></uni-data-select>
</view>
<view class="record-list">
<view v-if='gameLogData.length > 0 '>
<CardList :data="gameLogData" :pageUrl='pageUrl'/>
</view>
<view class='none-result' v-else>
暂无记录
</view>
</view>
</view>
</template>
js代码：\
<script setup>
import {getRecordList, redeemPrize} from '@/request/api.js'
import { ref , reactive, computed } from 'vue';
import {onLoad,onReady,onShow} from "@dcloudio/uni-app"
import CardList from '@/components/list/cardList.vue'
let code = ref('');//兑换码
const searchValue = ref(0);//兑换状态数组下标
const pageUrl = ref('/pages/record/recordDetail?id=');//点击卡片跳转页面
const range = reactive([
{ value: 0, text: "全部" },
{ value: 1, text: "未兑换" },
{ value: 2, text: "已兑换" },
{ value: 3, text: "已过期" },
])//兑换状态数组映射
let gameLogData = ref([]);//接口返回的历史记录数据
onShow(()=>{
code.value = '';
searchValue.value = 0;
let params = {pageNum: '1',pageSize: '100'}
recordList(params);
})
// 查询列表信息
function recordList(params){
getRecordList(params).then(res=>{
if(res.code == 200){
gameLogData.value = res.data.records;
}
}).catch(err => {
console.log(err);
})
}
function codeSearch(){
search();
}
function search(){
const arr = [1,2,3];
const params = {
pageNum: '1',
pageSize: '100',
...(arr.includes(searchValue.value) ? { status: searchValue.value } : {}),
...(code.value !== '' ? { cdKey: code.value } : {})
}
recordList(params);
}
function change(e) {
searchValue.value = e;
search();
}
</script>
