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.svg" />
                            <span v-if="userAccount.issigned">已签到</span>
                            <span v-else>签到</span>
                        </li>
                        <li>
                            <img src="@mobile/assets/icons/red-envelope.svg" @click="routerTo('credit-lottery')" />
                            <span>积分红包</span>
                        </li>
                        <li>
                            <img src="@mobile/assets/icons/statement.svg" @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="showQRCode = true" 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="navigationBack(1)">去完成</Button>
                    </div>
                </dd>
                <dd class="list-item">
                    <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="navigationBack(2)">去完成</Button>
                    </div>
                </dd>
            </dl>
        </div>
        <app-register-code v-model:show="showQRCode" :text="userAccount.refernum" />
    </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'
import AppRegisterCode from '@mobile/components/modules/register-code/index.vue'

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

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 navigationBack = (index: number) => {
    routerBack({ tabIndex: index })
}

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

const getUserAccount = () => {
    queryUserAccount({
        userID: loginStore.userId
    }).then((res) => {
        userAccount.value = res.data
    })
}

queryTHJScoreConfig().then((res) => {
    scoreConfig.value = res.data
})

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

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