xyyd-fatfox/src/layout/grid/Feedback.tsx

import { computed, defineComponent, reactive, toRaw } from 'vue'
import useLayoutStore from '../useLayoutStore'
import ImageUploader from '@/utils/ImageUploader'

import { MdInbox } from 'oh-vue-icons/icons'
import { addIcons, OhVueIcon } from 'oh-vue-icons'
import { message, Modal, Table } from 'ant-design-vue'
import request from '@/utils/request'
import db from '@/db'

addIcons(MdInbox)
export interface Feedback {
  description: string
  qq: string
  phone: string
  images: string[]
  time: number
}
const defaultData: Omit<Feedback, 'time'> = {
  description: '',
  qq: '',
  phone: '',
  images: [] as string[]
}
export default defineComponent(() => {
  const data = reactive({ ...defaultData })
  const layout = useLayoutStore()
  const isGame = computed(() => {
    return layout.state.current === 0
  })
  const img1 = computed({
    get: () => data.images[0],
    set: (val) => (data.images[0] = val)
  })
  const img2 = computed({
    get: () => data.images[1],
    set: (val) => (data.images[1] = val)
  })
  const img3 = computed({
    get: () => data.images[2],
    set: (val) => (data.images[2] = val)
  })
  return () => (
    <div class={'p-4 ' + (isGame.value ? 'text-white' : 'text-black/60')}>
      <div class="flex justify-between items-center">
        <div>
          <span class="text-red-500">*</span>
          问题描述
        </div>
        <div
          class="cursor-pointer"
          onClick={async () => {
            let his = await db.getItem<Feedback[]>('feedbacks')
            if (!his) his = []
            const ins = Modal.info({
              title: '历史反馈',
              width: '1024px',
              maskClosable: true,
              content: () => (
                <Table
                  class="max-h-[50vh] overflow-y-auto"
                  dataSource={his.reverse()}
                  rowKey="time"
                  pagination={false}
                  columns={[
                    {
                      title: '时间',
                      customRender: ({ record }) => new Date(record.time).toLocaleString()
                    },
                    {
                      title: '问题描述',
                      customRender: ({ record }) => (
                        <div class="w-[200px] break-all">{record.description}</div>
                      )
                    },
                    {
                      title: 'QQ',
                      dataIndex: 'qq'
                    },
                    {
                      title: '手机号',
                      dataIndex: 'phone'
                    },
                    {
                      title: '图片',
                      customRender: ({ record }) => (
                        <div class="flex gap-2">
                          {record?.images?.map?.((img: string) => (
                            <img src={img} class="w-16 object-cover" />
                          ))}
                        </div>
                      )
                    }
                  ]}
                ></Table>
              ),
              onOk() {
                console.log('OK')
                ins.destroy()
              },
              onCancel() {
                ins.destroy()
              }
            })
          }}
        >
          <OhVueIcon
            name="md-inbox"
            fill={isGame.value ? 'rgba(255,255,255,.8)' : 'rgba(0,0,0,.8)'}
          />
          历史反馈
        </div>
      </div>
      <div class={'mt-2 ' + (isGame.value ? 'bg-white/10 text-white' : 'bg-black/5 text-black/60')}>
        <textarea
          v-model={data.description}
          class="bg-transparent no-textarea w-full p-2"
          style={{
            color: isGame.value ? 'white' : 'black'
          }}
        />
        <div class="p-2 flex gap-2">
          <ImageUploader width={42} v-model:value={img1.value} />
          <ImageUploader width={42} v-model:value={img2.value} />
          <ImageUploader width={42} v-model:value={img3.value} />
        </div>
      </div>
      <div class="mt-4">联系方式</div>
      <div class="text-sm">留下您的联系方式，以便必要时我们可以联系到您</div>
      <div class="grid grid-cols-2 gap-2 text-sm mt-2">
        <input
          v-model={data.qq}
          placeholder="QQ号"
          class={'p-2 rounded-lg ' + (isGame.value ? 'bg-white/10' : 'bg-black/5')}
        />
        <input
          v-model={data.phone}
          placeholder="手机号"
          class={'p-2 rounded-lg ' + (isGame.value ? 'bg-white/10' : 'bg-black/5')}
        />
      </div>
      <div
        onClick={async () => {
          if (!data.description) {
            message.error('问题描述不能为空')
            return
          }
          let his = await db.getItem<Feedback[]>('feedbacks')
          if (!his) his = []
          await db.setItem('feedbacks', [...his, { ...toRaw(data), time: Date.now() }])
          await request('POST', '/api/feedback', {
            data: {
              content: data.description,
              qq: data.qq,
              phone: data.phone,
              imgs: data.images
            },
            returnType: 'text'
          })
          message.success('提交成功')
          Object.assign(data, { ...defaultData })
        }}
        class="mt-4 text-center rounded py-1 cursor-pointer bg-[#ffa93d] text-white"
      >
        提交反馈
      </div>
    </div>
  )
})