sdjk-h5/src/views/home/index.vue

<template>
    <div>
        <div class="bg">
        </div>
        <m-nav-bar title="个人中心"></m-nav-bar>
        <div class="info">
            <div class="left">
                <img class="head" :src="userInfo.headImage" />
                <div class="name">
                    <div>
                        {{ userInfo.nickName }}
                    </div>
                    <div class="userId">
                        ID:{{ userInfo.id }}
                    </div>
                </div>
                <div>
                </div>
            </div>
            <!-- <div class="right">
                <img class="icon1" :src="configIcon" />
                <img class="icon2" :src="messageIcon" />

            </div> -->


        </div>
        <div class="money">
            <div class="data">
                <div class="today">
                    <div class="number">¥{{ todayIncome/100 }}</div>
                    <div class="desc">今日收益</div>
                </div>
                <div class="border"> </div>
                <div class="today">
                    <div class="number">¥{{ yesterdayIncome/100 }}</div>
                    <div class="desc">昨日收益</div>
                </div>
                <div class="border"> </div>
                <div class="today">
                    <div class="number">¥{{ totalIncome/100 }}</div>
                    <div class="desc">累计收益</div>
                </div>

            </div>
            <div class="button">
                <span>可提现金额：¥{{ userInfo.profitPrice/100 }}</span>
                <router-link to="/cashout">
                    <div class="now">
                        立即提现
                    </div>
                </router-link>

            </div>
        </div>
        <router-link to="/income">
            <div class="bill">

                <img class="icon" :src="billIcon">
                <span class="desc">我的账单</span>
                <img class="arrow" src="@/assets/img/leftArrow.png">
            </div>
        </router-link>
        <router-link to="/order">
            <div class="order">
                <img class="icon" :src="orderIcon">
                <span class="desc">我的订单</span>
                <img class="arrow" src="@/assets/img/leftArrow.png">
            </div>
        </router-link>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, onMounted } from 'vue'
import people1Icon from '@/assets/img/people1.png'
import configIcon from '@/assets/img/config.png'
import messageIcon from '@/assets/img/message.png'
import billIcon from '@/assets/img/bill.png'
import orderIcon from '@/assets/img/order.png'
import api from '@/api'
import { useRoute, useRouter } from 'vue-router'
import { useStore, } from 'vuex'
import { Toast } from 'vant'
export default defineComponent({
    setup() {
        const route = useRoute()
        const router = useRouter()
        const store = useStore()
        const userInfo = computed(() => {
            return store.state.userInfo
        })
        const todayIncome = ref(0)
        const yesterdayIncome = ref(0)
        const totalIncome = ref(0)


        onMounted(async () => {
            if (route.query.state === 'LOGIN') {

                await api.login.loginGzhcode({
                    authorizationCode: route.query.code as string
                }).then(res => {
                    Toast.success({
                        message: '登陆成功',
                        forbidClick: true
                    })
                    window.localStorage.setItem("token", res.data.data.token)
                    router.replace('./')
                   

                }).catch(err => {
                    Toast.fail({
                        message: err,
                        forbidClick: true
                    })
                })

            }
            //获取用户信息
            api.user.studentUserInfo().then(res => {
                store.commit('SET_USERINFO', res.data.data)
                window.localStorage.setItem("userInfo", JSON.stringify(res.data.data))

            })
            //昨日收益
            api.order.studentOrderInfoYesterdayTotal({
            }).then(res => {
                yesterdayIncome.value = res.data.data
            })
            //今日收益
            api.order.studentOrderInfoTodayTotal({
            }).then(res => {
                todayIncome.value = res.data.data
            })
            //总收益
            api.order.studentOrderInfoTotal({
            }).then(res => {
                totalIncome.value = res.data.data
            })

        })


        return {
            todayIncome,
            yesterdayIncome,
            totalIncome,
            userInfo,
            people1Icon: people1Icon,
            configIcon: configIcon,
            billIcon,
            messageIcon,
            orderIcon
        }
    }
})
</script>

<style lang="scss" scoped>
.bg {
    width: 750px;
    height: 458px;
    background: linear-gradient(180deg, #498EF5 0%, #F2F3F5 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: absolute;
    top: 0;
    z-index: -10;
}

.info {
    margin-top: 54px;
    height: 108px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .left {
        display: flex;
        height: 100%;

        .head {
            width: auto;
            height: 100%;
            margin-left: 30px;

        }

        .name {
            text-align: left;
            margin-left: 20px;


            .userId {
                color: #5C6066;
                font-size: 24px;
                margin-top: 15px;
            }
        }

    }

    .right {
        display: flex;
        align-items: center;

        .icon1 {
            width: 34px;
            height: 34px;
            margin-right: 30px;

        }

        .icon2 {
            width: 34px;
            height: 34px;
            margin-right: 48px;
        }

    }


}

.money {
    width: 690px;
    height: 276px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    margin-top: 60px;
    overflow: hidden;

    .data {
        height: 156px;
        width: 100%;
        display: flex;
        align-content: center;
        align-items: center;

        .border {
            width: 2px;
            height: 50%;
            background: #E8E8E8;
        }

        .today {
            width: 32%;
            display: flex;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;

            .desc {
                width: 100%;
                font-size: 24px;
                color: #8A9099;

            }

            .number {
                width: 100%;
                font-size: 36px;
                font-weight: bold;

            }

        }
    }

    .button {
        width: 100%;
        height: 120px;
        padding-left: 30px;
        padding-right: 30px;
        background-image: url('./../../assets/img/moneyBg.png');
        display: flex;
        align-content: center;
        align-items: center;
        color: #DBA05C;
        font-weight: bold;
        justify-content: space-between;

        .now {
            width: 150px;
            height: 50px;
            line-height: 50px;
            border-radius: 16px;
            background: linear-gradient(316deg, #DBA05C 0%, #F3C085 100%);
            color: #91540F;
            font-size: 26px;
            cursor: pointer;
            text-align: center;
        }
    }

}

.bill {
    width: 690px;
    margin: 0 auto;
    height: 148px;
    margin-top: 20px;
    display: flex;
    padding-left: 30px;
    padding-right: 30px;
    align-content: center;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    position: relative;

    .icon {
        width: 88px;
        height: 88px;
    }

    .desc {
        margin-left: 24px;
        color: #333;
    }

    .arrow {
        position: absolute;
        top: 50%;
        right: 30px;
        width: 13px;
        height: 26px;
        transform: translate(-50%, -50%) rotate(180deg);

        transform-origin: center;

    }
}

.order {
    width: 690px;
    margin: 0 auto;
    height: 148px;
    margin-top: 20px;
    display: flex;
    padding-left: 30px;
    padding-right: 30px;
    align-content: center;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    position: relative;

    .icon {
        width: 88px;
        height: 88px;
    }

    .desc {
        margin-left: 24px;
        color: #333;
    }

    .arrow {
        position: absolute;
        top: 50%;
        right: 30px;
        width: 13px;
        height: 26px;
        transform: translate(-50%, -50%) rotate(180deg);

        transform-origin: center;

    }
}
</style>