cashier-mer/src/views/user/component/detail.vue

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { useUserStore } from "@/store/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import mitt from "@/utils/mitt.js";
import pay from "@/components/pay.vue";

const userStore = useUserStore();
const router = useRouter();

const formData = ref({
    id: "",
});

onMounted(() => {
    mitt.on("set-user-detail", (res) => {
        console.log("===", res);
        formData.value = res;
        where.value.page_no = 1;
        where.value.loadend = false;
        where.value.loading = false;
        goods_list.value = [];
    });
});

onUnmounted(() => {
    mitt.off("set-user-detail");
});
</script>

<template>
    <div class="my-order">
        <div class="detail" v-if="formData.id">
            <div class="table" >
                <div class="table-title">用户信息</div>
                <div class="table-info">
                    <div class="info-item">
                        <div class="info-item-title">头像:</div>
                        <div class="info-item-info">
                            <el-avatar style="width: 4rem;height: 4rem;" :src="formData.avatar" />
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-item-title">用户昵称:</div>
                        <div class="info-item-info">{{ formData.nickname }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-item-title">ID:</div>
                        <div class="info-item-info">{{ formData.id }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-item-title">用户电话:</div>
                        <div class="info-item-info">{{ formData.mobile }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-item-title">用户账号:</div>
                        <div class="info-item-info">{{ formData.account }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-item-title">创建时间:</div>
                        <div class="info-item-info">{{ formData.create_time }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-item-title">用户类型:</div>
                        <div class="info-item-info">
                            <el-tag type="primary" v-if="formData.user_ship==0">{{ formData.user_ship_name }}</el-tag>
                            <el-tag type="success" v-else>{{ formData.user_ship_name }}</el-tag>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-item-title">用户余额:</div>
                        <div class="info-item-info">¥{{ formData.user_money }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <el-empty></el-empty>
        </div>
    </div>
</template>

<style scoped lang="scss">
.my-order {
    border-radius: 1.2rem;
    height: 100%;
    flex: 1;
    background-color: #fff;
    position: relative;
    overflow: hidden;

    .detail {
        height: 100%;
        box-sizing: border-box;
        position: relative;

        .table {
            padding: 1rem;
            padding-bottom: 6rem;
            box-sizing: border-box;
            overflow-y: auto;
            height: 100%;

            .table-title {
                font-weight: bold;
            }

            .table-info {
                display: flex;
                flex-wrap: wrap;
                color: #777;
                font-size: 0.9rem;
                padding-bottom: 1rem;
                margin-bottom: 1rem;
                border-bottom: 1px solid #eee;

                &:last-child {
                    border-bottom: none;
                }

                .info-item {
                    width: 33%;
                    display: flex;
                    padding-top: 1rem;

                    .info-item-title {
                        flex-shrink: 0;
                        padding-right: 1rem;
                    }
                }
            }
        }

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 6rem;
            box-sizing: border-box;
            background-color: #fff;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 2rem;
            border-top: 1px solid #eee;
        }
    }
}
</style>