stock-front/src/views/taskMessage/UserManageList.vue

<script setup>
import { onMounted, reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { pageUserList } from "@/service/userManage"
import { showFailToast } from "vant";
import { getLoginUser, styleUrl } from "@/common/js/utils";
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user';

const router = useRouter()

const user = getLoginUser();
const loading = ref(false); // 加载状态
const error = ref(false); // 错误状态
const finished = ref(false); // 结束翻页状态


// state 用户状态：1正常，2禁用，3删除
const showStateText = (state) => {
            if (state === '1') {
                return "正常";
            }
            if (state === '2') {
                return "禁用中";
            }
            if (state === '3') {
                return "已删除";
            }
            return "未知";
        };

const userManageList = ref([]); // 列表集合
const userInfoTotal = ref(0); // 用户列表总数
let searchParams = reactive({
    current: 1, // 当前页，默认第一页
    size: 10, // 页大小，默认10条
});

// 滚动加载
const onLoad = () => {
    if (!finished.value) {
        searchParams.current = searchParams.current + 1;
        getList();
    }
};
// 查询列表
const searchGetList = () => {
    userManageList.value = [];
    searchParams.current = 1;
    getList();
};
// 获取用户管理列表数据
const getList = async () => {

    const { data } = await pageUserList(
        Object.assign({}, searchParams)
    );
    if (data.code === "00000") {
        // 列表值叠加
        userManageList.value = userManageList.value.concat(
            data.data.records
        );
        userInfoTotal.value = data.data.total;
        if (userManageList.value.length === data.data.total) {
            finished.value = true;
        }
        loading.value = false;
    } else {
        showFailToast(data.message);
    }
};

const userStore = useUserStore();
// 去管理账号，禁用账号
const toManageUser = (item) => {
    userStore.setUserInfo(item);
    router.push({ name: 'userManage' });
};

// 是否有操作的权限
const isOper = ref(true);
// 初始化页面获取列表
onMounted(async () => {
    // 加载样式
    styleUrl('pendingOrderList');
    if (user) {
        // searchParams.adminId = user.userId;
        searchGetList();

        // 如果不是admin账号，不能有操作权限
        if (user.userName != 'admin') {
            isOper.value = false;
        }
    }
});
</script>
<!-- 用户审批 -->
<!-- d点击后跳转会上一页， -->
<!-- 点击后进行设置，设置后对到列表页 -->

<template>
    <!-- 用户管理列表 -->
    <div class="pendingOrderList flex-col">
        <s-header name="用户管理" :noback="false"></s-header>

        <div class="pendingOrderBox flex-col">
            <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
                :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false"
                @load="onLoad">
                <div class="listBox">
                    <div v-for="(item) in userManageList" :key="item.phone" class="listItem">
                        <div class="itemBox">

                            <div class="itemRow">
                                <span class="itemTitle">用户名:&nbsp;</span>{{
                                    item.userName }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">手机号码:&nbsp;</span>{{
                                    item.phone }}
                            </div>
                            <!-- <div class="itemRow">
                                <span class="itemTitle">支付宝号:&nbsp;</span>{{
                                    item.payeeCode }}
                            </div> -->
                            <div class="itemRow">
                                <span class="itemTitle">当前股票份额:&nbsp;</span>{{
                                    item.stockNum }}
                            </div>

                            <!-- isBan禁用：去禁用账号> -->
                            <div class="itemRow">
                                <span class="itemTitle">账号状态:&nbsp;</span><span style="color: red">{{
                                    showStateText(item.state)
                                    }}</span>
                            </div>
                            <!-- state 用户状态：1正常，2禁用，3删除 -->
                            <!-- // 正常情况下显示按钮，非正常情况下仅显示状态 -->

                            <!-- 禁用/启用账号 -->
                            <div v-if="item.state === '1' && isOper" class="itemRow" style="display: flex; justify-content: flex-end">
                                <van-button span="5" round type="primary" :style="{
                                    height: '2em',
                                    padding: '0 1.2em',
                                    margin: '0 1em',
                                    backgroundColor: 'rgb(200, 55, 95 / 80%)', // 红色背景，不透明度为100%
                                    color: '#fff', // 文字颜色为白色
                                    boxShadow: '0 2px 8px rgba(255, 55, 95, 0.3)', // 添加阴影效果
                                    transition: 'all 0.3s ease' // 添加过渡效果，使变化更平滑
                                }" @click="toManageUser(item)">
                                    禁用账号
                                </van-button>
                            </div>

                            <div class="itemRow" style="display: flex; justify-content: flex-end">
                                <!-- 未禁用 -->
                                <span v-if="item.status === '1'" style="color: #4fc08d">{{
                                    showStatusText(item.status)
                                    }}</span>
                                <!-- 已禁用 -->
                                <span v-if="item.status === '2'" style="color: #ff0000">{{
                                    showStatusText(item.status)
                                    }}</span>
                            </div>

                        </div>
                    </div>
                </div>
            </van-list>
        </div>

    </div>
</template>



<style lang="less" scoped>
@import "../../common/style/common.less";
</style>