Vue3+Vite+TS后台项目 ~ 9.权限管理_规则

最新推荐文章于 2024-10-14 10:25:01 发布
最新推荐文章于 2024-10-14 10:25:01 发布
阅读量1.3k 收藏 4
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45137565/article/details/122213202
版权

日拱一卒无有尽， 功不唐捐终入海


一、接口封装

新建 src / api / menu.ts 文件

import request from '@/utils/request'
import { IFormData } from './types/form'
import type { Menu } from './types/menu'

// 获取权限列表
export const getMenus = (params: {
  is_show: 0 | 1 | ''
  keyword: string
}) => {
  return request<Menu[]>({
    method: 'GET',
    url: '/setting/menus',
    params
  })
}

// 添加权限
export const createMenu = (data: {
  path: number[]
} & Omit<Menu, 'id' | 'children' | 'is_del' | 'path'>) => {
  return request({
    method: 'POST',
    url: '/setting/menus',
    data
  })
}

// 获取添加权限规则表单
export const getMenuTree = () => {
  return request<IFormData>({
    method: 'GET',
    url: '/setting/menus/create'
  }).then(data => {
    const findData = data.rules.find(item => item.field === 'menu_list')
    return (findData && findData.props && findData.props.data) || []
  })
}

// 修改权限规则
export const updateMenu = (id: number, data: { path: number[] } & Omit<Menu, 'id' | 'children' | 'is_del' | 'path'>) => {
  return request({
    method: 'PUT',
    url: `/setting/menus/${id}`,
    data
  })
}

// 删除权限
export const deleteMenu = (id: number) => {
  return request({
    method: 'DELETE',
    url: `/setting/menus/${id}`
  })
}

// 获取单个规则
export const getMenu = (id: number) => {
  return request<{
    path: number[]
  } & Omit<Menu, 'path'>>({
    method: 'GET',
    url: `/setting/menus/${id}`
  })
}

// 修改状态
export const updateMenuStatus = (id: number, isShow: 0 | 1) => {
  return request({
    method: 'PUT',
    url: `/setting/menus/show/${id}`,
    data: {
      is_show: isShow
    }
  })
}

新建 src / api / types / menu.ts 文件

export interface Menu {
  id: number
  pid: number
  icon: string
  menu_name: string
  module: string
  controller: string
  action: string
  api_url: string
  methods: string
  params: string
  sort: number
  is_show: 0 | 1
  is_show_path: number
  access: number
  menu_path: string
  path: string
  auth_type: 1 | 2
  header: string
  is_header: number
  unique_auth: string
  is_del: number
  statusLoading?: boolean
  children: Menu[]
}

二、折叠表格插件

Vxe-table 官方文档

// 安装（右上角选择 vue3 版本（V4）
 npm install xe-utils@3 vxe-table@next

全局引用：
编辑 src / main.ts 文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import elementPlus from './plugins/element-plus'
import 'xe-utils'
import VXETable from 'vxe-table'

// 全局样式
import './styles/index.scss'
import 'vxe-table/lib/style.css'

createApp(App)
  .use(router)
  .use(store, key)
  .use(elementPlus, { size: 'small', zIndex: 2000 })
  .use(VXETable)
  .mount('#app')

三、规则列表

新建 src / views / setting / permission / rule / index.vue 文件

<template>
  <!-- <page-container> -->
  <el-card>
    <template #header>
      数据筛选
    </template>
    <el-form
      :inline="true"
      ref="form"
      :model="listParams"
      :disabled="listLoading"
      @submit.prevent="handleQuery"
    >
      <el-form-item label="状态">
        <el-select
          v-model="listParams.is_show"
          placeholder="请选择"
          clearable
        >
          <el-option
            label="全部"
            value=""
          />
          <el-option
            label="显示"
            :value="1"
          />
          <el-option
            label="不显示"
            :value="0"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="规则名称">
        <el-input
          v-model="listParams.keyword"
          clearable
          placeholder="请输入规则名称"
        />
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit">
          查询
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card>
    <template #header>
      <el-button
        type="primary"
        @click="formVisible = true"
      >
        添加规则
      </el-button>
    </template>
    <!--
        启用树菜单：
          1. data 数据需要是树结构
          2. 给 vxe-table 组件设置 row-id
          3. 给 vxe-column 设置 tree-node
       -->
    <vxe-table
      :data="list"
      row-id="id"
      :tree-config="{ children: 'children' }"
      v-loading="listLoading"
    >
      <vxe-column
        field="id"
        title="ID"
      />
      <vxe-column
        field="menu_name"
        title="名称"
        tree-node
      />
      <vxe-column
        title="接口路径"
      >
        <template #default="{ row }">
          {{ row.api_url ? `[${row.methods}] ${row.api_url}` : '' }}
        </template>
      </vxe-column>
      <vxe-column
        field="unique_auth"
        title="前端权限"
      />
      <vxe-column
        field="menu_path"
        title="页面路由"
      />
      <vxe-column title="状态">
        <template #default="{ row }">
          <el-switch
            v-model="row.is_show"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            :loading="row.statusLoading"
            @change="handleStatusChange(row)"
          />
        </template>
      </vxe-column>
      <vxe-column
        title="操作"
        min-width="100"
      >
        <template #default="scope">
          <el-button
            type="text"
            @click="handleCreate(scope.row.id)"
          >
            添加规则
          </el-button>
          <el-button
            type="text"
            @click="handleUpdate(scope.row.id)"
          >
            编辑
          </el-button>
          <el-popconfirm
            title="确认删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <template #reference>
              <el-button type="text">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </vxe-column>
    </vxe-table>
  </el-card>
  <!-- </page-container> -->
  <rule-form
    v-model="formVisible"
    v-model:rule-id="ruleId"
    v-model:pid="pid"
    @success="handleFormSuccess"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { getMenus, deleteMenu, updateMenuStatus } from '@/api/menu'
import type { Menu } from '@/api/types/menu'
import { ElMessage } from 'element-plus'
import RuleForm from './RuleForm.vue'

const list = ref<Menu[]>([]) // 列表数据
const listLoading = ref(true)
const listParams = reactive({ // 列表数据查询参数
  keyword: '',
  is_show: '' as 0 | 1 | ''
})
const formVisible = ref(false)
const ruleId = ref<number | null>(null)
const pid = ref<number | null>(null)

onMounted(() => {
  loadList()
})

const loadList = async () => {
  listLoading.value = true
  const data = await getMenus(listParams).finally(() => {
    listLoading.value = false
  })
  data.forEach(item => {
    item.statusLoading = false // 控制切换状态的 loading 效果
  })
  list.value = data
}

const handleQuery = async () => {
  loadList()
}

const handleDelete = async (id: number) => {
  await deleteMenu(id)
  ElMessage.success('删除成功')
  loadList()
}

const handleStatusChange = async (item: Menu) => {
  item.statusLoading = true
  await updateMenuStatus(item.id, item.is_show).finally(() => {
    item.statusLoading = false
  })
  ElMessage.success(`${item.is_show === 1 ? '启用' : '禁用'}成功`)
}

const handleUpdate = (id: number) => {
  ruleId.value = id
  formVisible.value = true
}

const handleFormSuccess = () => {
  formVisible.value = false
  loadList()
}

const handleCreate = (id: number) => {
  pid.value = id
  formVisible.value = true
}

</script>

<style lang="scss" scoped></style>

四、新建 / 编辑 弹窗

新建 src / views / setting / permission / rule / RuleForm.vue 文件

<template>
  <!-- :confirm="handleSubmit" -->
  <el-dialog
    ref="dialog"
    :title="props.ruleId ? '编辑规则' : '添加规则'"
    width="60%"
    append-to-body
    @closed="handleDialogClosed"
    @open="handleDialogOpen"
  >
    <el-form
      label-width="110px"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      ref="form"
      :validate-on-rule-change="false"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="类型">
            <el-radio-group v-model="formData.auth_type">
              <el-radio :label="2">
                接口
              </el-radio>
              <el-radio :label="1">
                菜单（只显示三级）
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="名称"
            prop="menu_name"
          >
            <el-input v-model="formData.menu_name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="父级分类"
            prop="path"
          >
            <el-cascader
              v-model="formData.path"
              :options="menus"
              clearable
              :props="{ checkStrictly: true }"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
        <template v-if="formData.auth_type === 2">
          <el-col :span="12">
            <el-form-item
              label="请求方式"
              prop="methods"
            >
              <el-select v-model="formData.methods">
                <el-option
                  v-for="item in methods"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="接口地址"
              prop="api_url"
            >
              <el-input v-model="formData.api_url" />
            </el-form-item>
          </el-col>
        </template>
        <template v-else>
          <el-col :span="12">
            <el-form-item
              label="接口参数"
              prop="params"
            >
              <el-input v-model="formData.params" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="路由路径"
              prop="menu_path"
            >
              <el-input v-model="formData.menu_path" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="图标"
              prop="icon"
            >
              <el-input v-model="formData.icon" />
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="12">
          <el-form-item
            label="权限标识"
            prop="unique_auth"
          >
            <el-input v-model="formData.unique_auth" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="排序"
            prop="sort"
          >
            <el-input v-model.number="formData.sort" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="状态"
            prop="is_show"
          >
            <el-radio-group v-model="formData.is_show">
              <el-radio :label="0">
                关闭
              </el-radio>
              <el-radio :label="1">
                开启
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="是否展示"
            prop="is_show_path"
          >
            <el-radio-group v-model="formData.is_show_path">
              <el-radio :label="0">
                否
              </el-radio>
              <el-radio :label="1">
                是
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
        >确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import * as menuApi from '@/api/menu'
import { ElMessage } from 'element-plus'
import type { Menu } from '@/api/types/menu'
import type { PropType } from 'vue'
import type { IElForm, IElDialog } from '@/types/element-plus'

const props = defineProps({
  ruleId: {
    type: Number as PropType<number | null>,
    default: null
  },
  pid: {
    type: Number as PropType<number | null>,
    default: null
  }
})
const emit = defineEmits(['success', 'update:rule-id', 'update:pid'])

const form = ref<IElForm | null>(null)
const formData = ref<{ path: number[] } & Omit<Menu, 'id' | 'children' | 'is_del' | 'path'>>({
  auth_type: 1,
  menu_name: '',
  pid: 0,
  params: '',
  controller: '',
  module: '',
  action: '',
  icon: '',
  path: [],
  menu_path: '',
  api_url: '',
  methods: '',
  unique_auth: '',
  header: '',
  is_header: 0,
  sort: 0,
  access: 0,
  is_show: 0,
  is_show_path: 1
})

const menuRules = {
  menu_path: [
    { message: '请输入路由路径', required: true, trigger: 'change' }
  ],
  unique_auth: [
    { message: '请输入权限标识', required: true, trigger: 'change' }
  ]
}

const apiRules = {
  methods: [
    { message: '请选择请求方式', required: true, trigger: 'change' }
  ],
  api_url: [
    { message: '请输入接口地址', required: true, trigger: 'change' }
  ]
}

const commonRules = {
  menu_name: [
    { message: '请输入按钮名称', required: true, trigger: 'change' }
  ]
}

const formRules = computed(() => {
  // 清除验证结果
  form.value?.clearValidate()
  return formData.value.auth_type === 1
    ? { ...menuRules, ...commonRules }
    : { ...apiRules, ...commonRules }
})

const menus = ref<Menu[]>([])

const methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map(item => ({
  label: item,
  value: item
}))

const formLoading = ref(false)

const handleDialogOpen = async () => {
  formLoading.value = true
  await Promise.all([
    loadMenus(),
    loadMenu(),
    setDefaultMenuPath()
  ]).finally(() => {
    formLoading.value = false
  })
}

const loadMenus = async () => {
  const data = await menuApi.getMenuTree()
  menus.value = data
}

const setDefaultMenuPath = async () => {
  if (props.pid) {
    const menu = await menuApi.getMenu(props.pid)
    formData.value.pid = props.pid
    formData.value.path = [...menu.path, props.pid]
  }
}

const loadMenu = async () => {
  if (!props.ruleId) {
    return
  }
  const data = await menuApi.getMenu(props.ruleId)
  data.path = [
    ...data.path,
    data.id
  ]
  formData.value = data
}

const handleChange = (value: any) => {
  formData.value.pid = value[value.length - 1]
}

const handleSubmit = async () => { // 确认
  const valid = await form.value?.validate()
  if (!valid) return
  if (props.ruleId) {
    await menuApi.updateMenu(props.ruleId, formData.value)
  } else {
    await menuApi.createMenu(formData.value)
  }
  ElMessage.success('保存成功')
  emit('success')
}

const dialog = ref<IElDialog | null>(null)

const handleCancel = () => { // 取消
  if (dialog.value) {
    dialog.value.visible = false
  }
}

const handleDialogClosed = () => {
  emit('update:rule-id', null)
  emit('update:pid', null)
  form.value?.clearValidate() // 清除验证结果
  form.value?.resetFields() // 清除表单数据
}
</script>

<style lang="scss" scoped></style>

五、页面展示

在这里插入图片描述




后海 0_o
关注
vite-vue-ts-admin:使用vite2加vue3和typescript搭建的后台管理系统
04-19
Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得语法的正确IDE支持，请使用而不是Vetur（并禁用Vetur）。 TS中.vue导入的类型支持 由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具类型（例如，在使用手动h(...)调用时获取道具验证），则可以使用以下代码： 如果使用手掌 运行Volar: Switch TS Plug
Vue3+Vite4+TS 后台模板
06-08
综合这些技术，Vue3+Vite4+TS后台模板为开发者提供了一个高效、易用且功能丰富的开发基础，能够快速搭建后台管理系统，节省时间和精力，同时确保代码质量。在实际项目中，开发者可以根据具体需求进行定制和扩展，以...
Vue3教程：Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦
程序员有故事
03-30 4328
之前发布过一篇文章《Vue3教程：开发一个 Vue 3 + element-plus 的后台管理系统》，文中提到会开发并开源一个 Vue 3 + Element Plus 的项目供大家练手和学习，随后也一直有收到留言和反馈，问我什么时候开源之类的问题，今天终于可以通知大家，完成啦！????????开源啦！???????? 如果觉得我写得还行的话，请献上你宝贵的一赞????，这将是我持续写作的动力！感谢大家啦。 vue3-admin 开源地址 所有的代码、文件全部都开源到 GitHub 仓库中，前后端代码全部
「从零开始的 Vue 3 系列」：第九章——vue3中实‘动态路由‘与“权限管理“
最新发布
llfxq的博客
10-14 780
本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。**思路：**动态路由实现就是前端登录获取用户信息->后端验证与权限获取->返回权限数据->前端动态生成路由–>权限控制那么项目中是如何实现呢：定义基础路由// 其他公共路由routes,});在用户登录时，从后端获取用户的权限数据。权限数据通常包含用户可以访问的路由或角色信息。
vue3+ts的权限路由配置
qq_47040462的博客
07-03 1826
5.4并在router的index路由权限中使用构建的过滤方法以及store和路由权限。3.构建公共组件 （主要是home页面的头部和路由栏，以及出口路由栏main）1、构建项目，配置vite和tsconfig.json---主要是@的配置。4.构建路由组件以及403组件和home父组件（路由组件都在父组件中实现）2.配置入口函数--main.ts--主要是配置UI框架和pinia。5.2 配置utils中的方法（用来过滤权限和使用）5.权限路由方法（最重要的步骤）5.1 配置sotre。
vue3+ts+vite后台管理模板
小庄哥的博客
05-23 1456
vue3+ts+vite+elementplus+uniapp后台管理模板，支持后台设置菜单，集成pinia，体验地址。
Vue3+Vite+TS后台项目 ~ 1.vite 创建项目
yuan
09-21 1280
管什么真理无穷，进一寸有一寸的欢喜 —— 胡适 搭建 Vite 项目： Vite 官方中文文档 兼容性注意 Vite 需要 Node.js 版本 >= 12.0.0。 # 使用 npm $ npm init vite@latest # 使用 yarn $ yarn create vite # 使用 pnpm $ pnpm dlx create-vite 小编这里使用的是 npm # 进入 存放项目的目录 cd '目录’ # 使用 npm 创建 vite 项目 npm init v.
Vue3+Vite+Ant Design 后台管理系统模板.zip
07-06
Vue3+Vite+Ant Design 后台管理系统模板是一个现代且高效的前端开发框架组合，用于构建功能丰富的Web应用。这个模板结合了Vue.js的最新版本3、Vite构建工具以及Ant Design Vue UI库，旨在提供一个快速开发后台管理...
使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip
01-22
Vue 3.2 -- 使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统、动态菜单、国际化、mock数据、表格集成快速使用等功能，简洁干净开箱即用。. 各领域数据集，工具源码，适合毕业设计、课程设计...
使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip
01-04
使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 ...
基于vue3+vite+typescript+pinia后台管理系统模版源码+详细说明.zip
05-05
采用 vue3 全家桶（vite+pinia+element-plus+vue-router@4）功能介绍 使用 Vue3.2.45 + TypeScript 开发 采用 Vite4.0 作为项目开发、打包工具（配置 Gzip 打包、TSX 语法、跨域代理……） 使用 Prettier 统一格式化...
vue3+ts后台管理系统
weixin_42178050的博客
05-07 1394
https://github.com/lzh-kf/vue3-admin
vite+vue3搭建简易后台管理系统（步骤六：添加vuex, 集中式存储管理应用的所有组件的状态（如实现侧边栏的折叠，点击header,折叠或者打开侧边栏））
窗外鸟的博客
05-17 608
效果点击折叠按钮，侧边栏打开或者折叠 打开官方文档，根据步骤进行安装 输入 npm install vuex@next –save 并添加一store/Index.js store/index.js 代码块 import { createStore } from 'vuex' export default createStore({ state() { return { collapse: false } }, ..
vite+vue3搭建简易后台管理系统（步骤四：构建Header）
窗外鸟的博客
05-17 926
看了一些大神的Header作品，所以自己也写一个，添加一Header，并在Home(主页)中引用 添加Header内容 Header.vue 代码块 <template> <div class="header"> <!-- 折叠按钮 --> <div class="collapse-btn" @click="collapse = !collapse"> <el-icon v-..
vite+vue3搭建简易后台管理系统（步骤五：构建侧边栏Aside）
窗外鸟的博客
05-17 785
查看element官方Menu菜单，查看其代码 想要实现效果：根据所有路由过滤出自己想要展示的路由，然后展示到界面上，定义一个Test1.vue,Test2.vue.Test3.vue 用于展示显示的内容，并在主页中添加展示的route-view. 新建Aside.vue文件，根据实现效果编写代码，并添加新路由配置 此时启动项目，界面成功展示，点击测试1,2,3可以进行跳转，但是侧边栏界面样式不一致 打开main.css,修改样式，此时界面，也进行了改变 （aside代码,下一章） ..
vite打包快&几款基于vue3和vite的开箱即用的中后台管理模版
hkduan的博客
11-30 5677
几款基于vue3和vite的开箱即用的中后台管理模版 几个强大的管理后台模版，并聊聊他们的特点。 Vue vben admin Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的 vue3, vite2, TypeScript 等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 特点 最新技术栈：使用 Vue3/vite2 等前沿技术 TypeScript: 应用程序级 JavaScript 的语言 主题：可配置的主题 国际化：内置完善的国际化方案 Mock 数据 内
Vue3 + TS 项目实战 - 后台管理系统 - 按钮权限
技术前端，忠于热爱 @0.活在风浪里
04-28 1471
一会了解之意Vue3+Ts，系统按钮权限设计
VUE菜单权限、路由权限
weixin_48181168的博客
09-25 3745
方式1（路由钩子函数里判断） 前端定义路由，配置好路由表，代码示例 { path: '/path', component: () => import('./component'), name: 'componentName', meta: { menuName：'菜单名称' auth: 'authCode' } } 在登录的时候后台会返回一串有
vue3后台管理项目vite配置
weixin_59124055的博客
05-11 1107
import {viteMockServe} from "vite-plugin-mock"; import {defineConfig, ConfigEnv} from 'vite' import vue from '@vitejs/plugin-vue' const {resolve} = require('path') // https://vitejs.dev/config/ export default defineConfig({ // base:'./', re...
Vue3+Vite+TS打造后台管理系统模板
资源摘要信息:"使用vue3+vite+ts创建的后台管理系统模板.zip" 本资源是一个使用Vue.js 3、Vite和TypeScript技术栈创建的后台管理系统模板。Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

后海 0_o

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值