103 lines
4.0 KiB
Vue
103 lines
4.0 KiB
Vue
<template>
|
||
<PageLayout>
|
||
<infinite-scroll :load="load" :list="list" ref="scrollRef">
|
||
<template #prepend>
|
||
<q-tabs
|
||
v-model="tab"
|
||
no-caps
|
||
dense
|
||
narrow-indicator
|
||
active-color="red"
|
||
indicator-color="red"
|
||
class="bg-white"
|
||
>
|
||
<q-route-tab v-for="item in tabs" :name="item.bill_type" :label="item.name" :key="item.bill_type"
|
||
:to="item.bill_type==0?route.path:{path:route.path,query:{tab:item.bill_type}}"
|
||
replace
|
||
class="col" />
|
||
</q-tabs>
|
||
<q-separator color="grey-3" />
|
||
</template>
|
||
<template v-slot="{ item,index }">
|
||
<q-separator v-if="index" />
|
||
<q-item class="bg-white" :to="{path:'/my/order/'+item.order_sn}">
|
||
<div class="column fit">
|
||
<div class="flex row fit">
|
||
<q-item-section avatar class="col">
|
||
<q-item-label>{{ item.lottery.name}}({{ item.buy_type_name }})</q-item-label>
|
||
<q-item-label class="text-grey">{{ item.play_type_name }}</q-item-label>
|
||
</q-item-section>
|
||
<q-item-section class="text-center col-3">
|
||
<q-item-label class="text-red" v-if="item.type == 3">{{ formatMoney(item.union_show_piece_money) }}元</q-item-label>
|
||
<q-item-label class="text-red" v-else>{{ formatMoney(item.money) }}元</q-item-label>
|
||
</q-item-section>
|
||
<q-item-section side class="col text-right">
|
||
<q-item-label v-if="item.lottery_state == 1 || item.lottery_state == 7" class="text-red">
|
||
{{ LOTTERY_STATE[item.lottery_state] || item.lottery_state }}{{
|
||
formatMoney(
|
||
item.type == 3
|
||
?(item.union_send_prize>0
|
||
?item.union_send_prize
|
||
:item.union_tax_prize)
|
||
:(item.lottery_send_prize>0
|
||
? item.lottery_send_prize
|
||
: (item.lottery_tax_prize||item.lottery_prize)
|
||
)
|
||
)
|
||
}}
|
||
</q-item-label>
|
||
<q-item-label v-else>{{ LOTTERY_STATE[item.lottery_state] || item.lottery_state }}</q-item-label>
|
||
<q-item-label class="text-grey" caption>{{ formatDate(item.pay_at) }}</q-item-label>
|
||
</q-item-section>
|
||
</div>
|
||
<div v-if="item.lottery_state==6" class="q-mt-sm text-right">
|
||
<q-badge color="orange-1" text-color="brown" multi-line class="q-pa-sm text-left"><b>撤单原因：</b>{{ item.revoke_message }}</q-badge>
|
||
</div>
|
||
</div>
|
||
</q-item>
|
||
</template>
|
||
</infinite-scroll>
|
||
</PageLayout>
|
||
</template>
|
||
<script setup>
|
||
import { ref, onMounted, reactive,watch,onActivated } from "vue";
|
||
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
|
||
import { useSelfStore } from "stores/self";
|
||
import { api } from "boot/axios";
|
||
import { useQuasar } from "quasar";
|
||
import { formatDate,formatMoney } from 'src/utils/tools.js'
|
||
import { LOTTERY_STATE } from "src/utils/const.js"
|
||
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
|
||
const $q = useQuasar();
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const store = useSelfStore();
|
||
const tab = ref(parseInt(route.query.tab || 0))
|
||
const tabs = ref([
|
||
{bill_type:0,name: '全部'},
|
||
{bill_type:5,name: '待接单'},
|
||
{bill_type:4,name: '待出票'},
|
||
{bill_type:3,name: '待开奖'},
|
||
{bill_type:10,name: '已开奖'},
|
||
{bill_type:1,name: '已中奖'}])
|
||
const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
|
||
return api.orderBetsRecord({
|
||
page,
|
||
lottery_state: tab.value
|
||
})
|
||
})
|
||
watch(tab,refresh)
|
||
|
||
let enterTime = route.query.t
|
||
onActivated(()=>{
|
||
if((route.query.tab||0)!=tab.value){
|
||
tab.value = parseInt(route.query.tab || 0)
|
||
refresh()
|
||
}else if(route.query.t!=enterTime){
|
||
refresh()
|
||
}
|
||
enterTime = route.query.t
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped></style>
|