THJ_Mobile/src/packages/mobile/views/mine/generalize/index.vue

<template>
    <app-view class="mine-generalize" flex>
        <template #header>
            <app-navbar title="我的推广" />
        </template>
        <app-pull-refresh class="mine-generalize__container" v-model:error="error" v-model:pageIndex="pageIndex"
            :page-count="pageCount" @refresh="onRefresh">
            <div class="mine-generalize__header">
                <div class="info">
                    <span>{{ userAccount.refercount }}</span>
                    <h4>推广人数</h4>
                </div>
                <div class="block">
                    <div class="block-left">
                        <h4>当日新增</h4>
                        <span>{{ userAccount.todayrefercount }}</span>
                    </div>
                    <div class="block-right">
                        <h4>推广编号</h4>
                        <span @click="showQRCode = false">{{ userAccount.refernum }}</span>
                    </div>
                </div>
            </div>
            <Tabs class="mine-generalize__tabs" @change="onClickTab">
                <Tab title="交易数据">
                    <Empty v-if="dataList.length === 0" />
                </Tab>
                <Tab title="推广收益">
                    <Empty />
                </Tab>
            </Tabs>
            <app-list :columns="columns" :data-list="dataList" v-if="dataList.length">
                <!-- 日期 -->
                <template #reckondate="{ value }">
                    {{ formatDate(value, 'YYYY-MM-DD') }}
                </template>
                <!-- 市场 -->
                <template #marketid="{ value }">
                    {{ value == Market.THJ ? '采购' : '供求' }}
                </template>
                <!-- 吨数 -->
                <template #tradeqty="{ row }">
                    {{ row.marketid === Market.THJ ? row.buytradeqty : row.selltradeqty }}
                </template>
            </app-list>
        </app-pull-refresh>
        <app-qrcode v-model:show="showQRCode" :content="userAccount.refernum" />
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Tab, Tabs, Empty } from 'vant'
import { formatDate } from '@/filters'
import { useLoginStore } from '@/stores'
import { queryUserAccount } from '@/services/api/account'
import { useQueryTHJTradeDataList } from '@/business/goods'
import { Market } from '@/constants/market'
import AppQrcode from '@mobile/components/base/qrcode/index.vue'
import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
import AppList from '@mobile/components/base/list/index.vue'

const { pageIndex, pageCount, getQueryTHJTradeDataList } = useQueryTHJTradeDataList()
const pullRefreshRef = shallowRef()
const dataList = shallowRef<Model.THJTradeDataRsp[]>([])
const error = shallowRef(false)

const { getUserId } = useLoginStore()
const showQRCode = shallowRef(false)
const userAccount = shallowRef<Partial<Model.UserAccount>>({
    todayrefercount: 0,
    refercount: 0,
})

const columns: Model.TableColumn[] = [
    { prop: 'reckondate', label: '日期' },
    { prop: 'marketid', label: '市场' },
    { prop: 'wrstandardname', label: '商品' },
    { prop: 'accountname', label: '被推荐人' },
    { prop: 'tradeqty', label: '吨数' },
    { prop: 'selltradelot', label: '笔数' },
]

queryUserAccount({
    data: {
        userID: getUserId()
    },
    success: (res) => {
        userAccount.value = res.data
    }
})

// Tab触发
const onClickTab = () => {
    pullRefreshRef.value?.refresh()
}

const onRefresh = (finish: () => void) => {
    /// 查询数据
    getQueryTHJTradeDataList(Market.THJ).then((res) => {
        if (pageIndex.value === 1) {
            dataList.value = []
        }
        dataList.value.push(...res)
    }).catch(() => {
        error.value = true
    }).finally(() => {
        finish()
    })
}
</script>

<style lang="less">
@import './index.less';
</style>