THJ_Mobile/src/packages/mobile/views/credit/signin/index.vue

<template>
    <app-view class="credit-signin">
        <template #header>
            <app-navbar title="我的任务" @ready="onReady" />
        </template>
        <div ref="headerRef" class="credit-signin__header">
            <div class="credit-signin__header-wrapper g-block--bg">
                <div class="integral">
                    <div class="integral-balance">
                        {{ userAccount.curscore ?? 0 }}
                    </div>
                    <div class="integral-title">
                        <img src="@mobile/assets/icons/gold.png" />
                        <span>积分余额</span>
                    </div>
                </div>
                <div class="iconbar">
                    <ul>
                        <li @click="userSignin">
                            <img src="@mobile/assets/icons/schedule.png" />
                            <span v-if="userAccount.issigned">已签到</span>
                            <span v-else>签到</span>
                        </li>
                        <li>
                            <img src="@mobile/assets/icons/red-envelope.png" @click="routerTo('credit-lottery')" />
                            <span>积分红包</span>
                        </li>
                        <li>
                            <img src="@mobile/assets/icons/statement.png" @click="routerTo('credit-statement')" />
                            <span>积分流水</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="credit-signin__task">
            <dl class="list">
                <dt class="list-title">积分任务</dt>
                <dd class="list-item">
                    <div class="list-item__title">
                        <div class="title-icon">
                            <img src="@mobile/assets/icons/signin.png" />
                        </div>
                        <div class="title-content">
                            <span>每日签到</span>
                            <span>积分+{{ getScoreConfig(2) }}</span>
                        </div>
                    </div>
                </dd>
                <dd class="list-item">
                    <div class="list-item__title">
                        <div class="title-icon">
                            <img src="@mobile/assets/icons/friend.png" />
                        </div>
                        <div class="title-content">
                            <span>好友下单每次</span>
                            <span>积分+{{ getScoreConfig(4) }}</span>
                        </div>
                    </div>
                </dd>
                <dd class="list-item">
                    <div class="list-item__title">
                        <div class="title-icon">
                            <img src="@mobile/assets/icons/useradd.png" />
                        </div>
                        <div class="title-content">
                            <span>邀请新人注册</span>
                            <span>积分+{{ getScoreConfig(3) }}</span>
                        </div>
                    </div>
                    <div class="list-item__button">
                        <Button type="primary" @click="routerTo('mine-generalize')" round>去完成</Button>
                    </div>
                </dd>
                <dd class="list-item">
                    <div class="list-item__title">
                        <div class="title-icon">
                            <img src="@mobile/assets/icons/cart.png" />
                        </div>
                        <div class="title-content">
                            <span>采购下单每次</span>
                            <span>积分+{{ getScoreConfig(5) }}</span>
                        </div>
                    </div>
                    <div class="list-item__button">
                        <Button type="primary" round @click="toPurchase">去完成</Button>
                    </div>
                </dd>
                <dd class="list-item" v-if="false">
                    <div class="list-item__title">
                        <div class="title-icon">
                            <img src="@mobile/assets/icons/goods.png" />
                        </div>
                        <div class="title-content">
                            <span>供求下单每次</span>
                            <span>积分+{{ getScoreConfig(6) }}</span>
                        </div>
                    </div>
                    <div class="list-item__button">
                        <Button type="primary" round @click="toSupplyDemand">去完成</Button>
                    </div>
                </dd>
            </dl>
        </div>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, onActivated } from 'vue'
import { showSuccessToast, showFailToast, Button } from 'vant'
import { fullloading } from '@/utils/vant'
import { useLoginStore } from '@/stores'
import { queryUserAccount } from '@/services/api/account'
import { queryTHJScoreConfig } from '@/services/api/credit'
import { signin } from '@/services/api/common'
import { useNavigation } from '@/hooks/navigation'

const { getUserId } = useLoginStore()
const { routerTo, backTo } = useNavigation()
const headerRef = shallowRef<HTMLDivElement>()
const userAccount = shallowRef<Partial<Model.UserAccount>>({})
const scoreConfig = shallowRef<Model.THJScoreConfigRsp[]>([])

const onReady = (el: HTMLDivElement) => {
    // 设置背景图位置
    headerRef.value?.style.setProperty('background-position', `0 -${el.clientHeight}px`)
}

// 获取积分配置
const getScoreConfig = (value: number) => {
    const item = scoreConfig.value.find((e) => e.scoreconfigtype === value)
    return item?.parma1 ?? 0
}

// 跳转到采购
const toPurchase = () => {
    backTo('Home', {
        tabName: 'purchase'
    })
}

// 跳转到供求
const toSupplyDemand = () => {
    backTo('Home', {
        tabName: 'supplyDemand'
    })
}

const userSignin = () => {
    fullloading(() => {
        signin({
            data: {
                userid: getUserId()
            },
            success: (res) => {
                if (res.data.signinstatus === 1) {
                    getUserAccount()
                    showSuccessToast('签到成功')
                } else {
                    showFailToast('今日已签到')
                }
            },
            fail: () => {
                showFailToast('签到失败')
            },
        })
    }, '签到中...')
}

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

queryTHJScoreConfig({
    success: (res) => {
        scoreConfig.value = res.data
    },
})

onActivated(() => getUserAccount())
</script>

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