shengtai_app/src/pages/index/index.vue

<!--
 * @Author: PoJun
 * @Date: 2023-05-15 19:59:55
 * @LastEditors: PoJun
 * @LastEditTime: 2024-05-09 20:56:10
 * @Message: Nothing
-->
<template>
    <view class="index">
        <view v-if="vuex_userInfo && vuex_userInfo.attr.BusinessRole">
            <view class="index-banner">
                <uv-image :src="BannerImg" height="300px" width="100%">
                    <template v-slot:loading>
                        <uv-loading-icon></uv-loading-icon>
                    </template>
                </uv-image>
            </view>
            <!-- 管理员角色 -->
            <view class="content" v-if="vuex_userInfo.attr.BusinessRole == 'orgMember'">
                <!-- 排名 -->
                <view class="content-container">
                    <supplier-list></supplier-list>
                </view>
                <!-- 统计图 -->
                <view class="content-container">
                    <home-chart :times="times"></home-chart>
                </view>
            </view>
            <!-- 供应商角色 -->
            <view class="content" v-else-if="vuex_userInfo.attr.BusinessRole == 'supplier'">
                <!-- 合作记录 -->
                <view class="content-container">
                    <records-list></records-list>
                </view>
                <!-- 产品目录 -->
                <view class="content-container">
                    <products-list :times="times"></products-list>
                </view>
            </view>
        </view>
        <!-- 未登录和未认证角色 -->
        <no-auth v-else :title="!vuex_userInfo ? '没有检测到您的登录状态' : '角色认证尚未完成'">
            <uv-button
                v-if="!vuex_userInfo || vuex_userInfo.attr.auditState != 1"
                :text="!vuex_userInfo ? '去登录' : '去认证'"
                @click="toLogin"
                size="small"
                :hairline="false"
                plain
                throttleTime="100"
                shape="circle"
            ></uv-button>
        </no-auth>
    </view>
</template>

<script>
import { checkAppUpdate } from "@/utils/utils.js";
import supplierList from "./components/supplier-list.vue";
import homeChart from "./components/home-chart.vue";
import recordsList from "./components/records-list.vue";
import productsList from "./components/products-list.vue";
import NoAuth from "@/components/no-auth/index.vue";

import BannerImg from "@/static/banner.png";

export default {
    components: {
        supplierList,
        homeChart,
        recordsList,
        productsList,
        NoAuth,
    },
    data() {
        return {
            BannerImg,
            times: 0, //图形的渲染有时候会出问题.
        };
    },
    onLoad() {
        checkAppUpdate();
    },
    onShow() {
        this.times++;
    },
    methods: {
        toLogin() {
            if (!this.vuex_userInfo) {
                uni.$uv.route("/pages/login/index");
            } else {
                uni.$uv.route("/subpkg/setting/authentication");
            }
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-grey;
}
.index {
    .banner {
        height: 300px;
        min-height: 300px;
    }
    .content {
        padding: 24rpx;
        transform: translateY(-40px);
        /* 增加个边距吧具体放下来 */
        margin-bottom: -50px;
        &-container {
            background-color: #fff;
            border-radius: 14rpx;
            margin-top: 24rpx;
            overflow: hidden;
        }
    }
}
</style>