123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <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">用户名: </span>{{
- item.userName }}
- </div>
- <div class="itemRow">
- <span class="itemTitle">手机号码: </span>{{
- item.phone }}
- </div>
- <!-- <div class="itemRow">
- <span class="itemTitle">支付宝号: </span>{{
- item.payeeCode }}
- </div> -->
- <div class="itemRow">
- <span class="itemTitle">当前股票份额: </span>{{
- item.stockNum }}
- </div>
- <!-- isBan禁用:去禁用账号> -->
- <div class="itemRow">
- <span class="itemTitle">账号状态: </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>
|