feat(custom): 增加游戏大厅

src/api/index.js

@@ -3,4 +3,11 @@ import { request } from '@/utils'
 export default {
   getUser: () => request.get('/user'),
   refreshToken: () => request.post('/auth/refreshToken', null, { noNeedTip: true }),
+  //   上传
+  uploadImg: (data) =>
+    request.post('/upload', data, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    }),
 }

src/components/Editor.vue

@@ -0,0 +1,97 @@
+<template>
+  <div ref="_ref" style="border: 1px solid #ccc">
+    <Toolbar
+      style="border-bottom: 1px solid #ccc"
+      :editor="editorRef"
+      :default-config="toolbarConfig"
+      mode="default"
+    />
+    <Editor
+      v-model="htmlValue"
+      :style="{ height: height + 'px', overflowY: 'hidden' }"
+      :default-config="editorConfig"
+      mode="default"
+      @on-created="handleCreated"
+    />
+  </div>
+</template>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+import { onBeforeUnmount, shallowRef, ref } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import api from '@/api'
+
+const props = defineProps({
+  valueHtml: {
+    type: String,
+    default: '',
+  },
+  height: {
+    type: Number,
+    default: 500,
+  },
+})
+
+const emit = defineEmits(['update:valueHtml'])
+
+const editorRef = shallowRef()
+
+const _ref = ref(null)
+
+const toolbarConfig = {}
+
+const editorConfig = { placeholder: '请输入游戏介绍...', MENU_CONF: {} }
+
+const htmlValue = computed({
+  get() {
+    return props.valueHtml
+  },
+  set(value) {
+    emit('update:valueHtml', value)
+  },
+})
+
+editorConfig.MENU_CONF['uploadImage'] = {
+  allowedFileTypes: ['image/*'],
+  base64LimitSize: 5 * 1024, // 5kb
+  // 超时时间，默认为 10 秒
+  timeout: 5 * 1000, // 5 秒
+
+  async customUpload(file, insertFn) {
+    await upFile(file, insertFn)
+  },
+}
+
+editorConfig.MENU_CONF['uploadVideo'] = {
+  allowedFileTypes: ['video/*'],
+
+  async customUpload(file, insertFn) {
+    await upFile(file, insertFn)
+  },
+}
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+  editor.on('fullScreen', () => {
+    _ref.value.style.zIndex = 10
+  })
+}
+
+const upFile = async (file, insertFn) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  const res = await api.uploadImg(formData)
+  insertFn(res.data.data)
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/business/mer_list/index.vue

@@ -154,7 +154,7 @@ import { NButton } from 'naive-ui'
 import api from './api'
 const vPerms = resolveDirective('perms')
 
-const isEdit = computed(() => (drawerTitle.value === '编辑商户' ? true : false))
+const isEdit = computed(() => drawerTitle.value === '编辑商户')
 
 const columns = ref([
   {

src/views/game/api.js

@@ -14,4 +14,10 @@ export default {
 
   // 宙斯详情
   getDetail: (data) => request.post('/log/betting/list', data),
+
+  // 获取游戏大厅
+  getGameList: (data) => request.post('/game/list', data),
+
+  //   添加修改游戏
+  addGame: (data) => request.post('/game/edit', data),
 }

src/views/game/home/index.vue

@@ -0,0 +1,223 @@
+<script setup>
+import { h, ref, resolveDirective, withDirectives } from 'vue'
+import api from '../api'
+import { NTag, NImage, NButton } from 'naive-ui'
+import Upload from '@/components/Upload.vue'
+import Editor from '@/components/Editor.vue'
+
+const vPerms = resolveDirective('perms')
+
+const loading = ref(false)
+
+const showModal = ref(false)
+
+const columns = ref([
+  {
+    title: '游戏封面',
+    align: 'center',
+    slot: 'cover',
+    render: (row) => {
+      return h(NImage, {
+        width: '50',
+        src: row.cover,
+      })
+    },
+  },
+  {
+    title: '游戏名称',
+    align: 'center',
+    key: 'name',
+  },
+  {
+    title: '是否开启',
+    align: 'center',
+    slot: 'status',
+    render: (row) => {
+      return h(
+        NTag,
+        {
+          type: row.status === 1 ? 'success' : 'warning',
+        },
+        {
+          default: () => (row.status === 1 ? '开启' : '禁用'),
+        }
+      )
+    },
+  },
+  {
+    title: '操作',
+    align: 'center',
+    slot: 'action',
+    render: (row) => {
+      return [
+        withDirectives(
+          h(
+            NButton,
+            {
+              type: 'primary',
+              text: true,
+              size: 'small',
+              onClick: () => {
+                openModal(2, row)
+              },
+            },
+            () => '编辑'
+          ),
+          [[vPerms, ['/admin/game/edit']]]
+        ),
+      ]
+    },
+  },
+])
+
+const data = ref([])
+
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+  onChange: (page) => {
+    pagination.value.page = page
+    getList()
+  },
+})
+
+onMounted(() => {
+  getList()
+})
+
+const getList = async () => {
+  const res = await api.getGameList({
+    pageSize: pagination.value.pageSize,
+    pageNum: pagination.value.page,
+  })
+  data.value = res.data.data || []
+  pagination.value.itemCount = res.data.total
+}
+
+const openModal = (type = null, row) => {
+  if (type) {
+    model.value = {
+      ...row,
+      cover: row.cover ? [{ url: row.cover, name: '图片', status: 'finished' }] : [],
+    }
+  }
+  showModal.value = true
+}
+
+const formRef = ref(null)
+
+const rules = {
+  cover: {
+    required: true,
+    type: 'array',
+    message: '请选择游戏封面',
+    trigger: 'change',
+  },
+  name: {
+    required: true,
+    message: '请输入游戏名称',
+    trigger: 'blur',
+  },
+  url: {
+    required: true,
+    message: '请输入游戏链接',
+    trigger: 'blur',
+  },
+  introduction: {
+    required: true,
+    message: '请输入游戏介绍',
+    trigger: 'blur',
+  },
+}
+
+const model = ref({
+  name: '',
+  url: '',
+  introduction: '',
+  cover: [],
+  status: 2,
+})
+
+const submit = () => {
+  formRef.value?.validate(async (errors) => {
+    if (!errors) {
+      const data = {
+        ...model.value,
+        cover: model.value.cover[0].url,
+      }
+      const res = await api.addGame(data)
+      $message.success(res.msg)
+      clear()
+    }
+  })
+}
+
+const clear = () => {
+  model.value = {
+    name: '',
+    url: '',
+    introduction: '',
+    cover: [],
+    status: 2,
+  }
+  formRef.value?.restoreValidation()
+  showModal.value = false
+  getList()
+}
+</script>
+
+<template>
+  <CommonPage show-footer :title="$route.title">
+    <n-button v-perms="['/admin/game/edit']" type="primary" @click="openModal()">添加游戏</n-button>
+    <n-data-table
+      class="mt-5"
+      :loading="loading"
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      :bordered="false"
+      remote
+    />
+
+    <!--  添加/编辑游戏  -->
+    <n-modal v-model:show="showModal">
+      <n-card
+        style="width: 900px"
+        title="添加/编辑游戏"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <n-form ref="formRef" :model="model" :rules="rules" label-placement="left">
+          <n-grid :cols="24" :x-gap="24">
+            <n-form-item-gi :span="16" label="游戏封面：" path="cover">
+              <Upload v-model:list="model.cover" :max="1" />
+            </n-form-item-gi>
+            <n-form-item-gi :span="16" label="游戏名称：" path="name">
+              <n-input v-model:value="model.name" placeholder="请输入游戏名称" />
+            </n-form-item-gi>
+            <n-form-item-gi :span="16" label="游戏链接：" path="url">
+              <n-input v-model:value="model.url" placeholder="请输入游戏链接" />
+            </n-form-item-gi>
+            <n-form-item-gi :span="24" label="游戏介绍：" path="introduction">
+              <Editor v-model:value-html="model.introduction" :height="350" />
+            </n-form-item-gi>
+            <n-form-item-gi :span="16" label="是否显示：" path="status">
+              <n-switch v-model:value="model.status" :unchecked-value="2" :checked-value="1" />
+            </n-form-item-gi>
+            <n-form-item-gi :span="12">
+              <div m-auto p-10>
+                <n-button type="primary" @click="submit">提交</n-button>
+                <n-button ml-10 @click="clear">取消</n-button>
+              </div>
+            </n-form-item-gi>
+          </n-grid>
+        </n-form>
+      </n-card>
+    </n-modal>
+  </CommonPage>
+</template>
+
+<style scoped lang="scss"></style>