jdt-admin/src/views/commodity/point/index.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <CommonPage show-footer :title="$route.title">
    <n-data-table
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      remote
    />
    <!-- 拒绝 -->
    <n-modal v-model:show="isNoteModel">
      <n-card
        style="width: 500px"
        title="拒绝信息"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <n-input v-model:value="notesVal" type="textarea" placeholder="请输入拒绝理由...." />
        <div m-auto p-10>
          <n-button type="primary" @click="veeify">确定</n-button>
          <n-button ml-10 @click="clear">取消</n-button>
        </div>
      </n-card>
    </n-modal>
    <!-- 商品详情 -->
    <n-drawer v-model:show="showDrawer" :width="502">
      <n-drawer-content title="商品详情" closable>
        <n-space vertical>
          <div>
            <span>商品分类：</span>
            <span>{{ goodInfo.class_name }}</span>
          </div>
          <div>
            <span>商品名称：</span>
            <span>{{ goodInfo.name }}</span>
          </div>
          <div flex items-center>
            <span>封面：</span>
            <n-image width="100" :src="goodInfo.cover" />
          </div>
          <div flex items-center>
            <span w-90>轮播图：</span>
            <div flex flex-wrap>
              <n-image
                v-for="(url, index) in goodInfo.rotation?.split(',')"
                :key="index"
                width="100"
                :src="url"
              />
            </div>
          </div>
          <div>
            <span>商品价格：</span>
            <span>{{ goodInfo.number }}</span>
          </div>
          <div>
            <span>市场价格：</span>
            <span>{{ goodInfo.market_num }}</span>
          </div>
          <div>
            <span>商品库存：</span>
            <span>{{ goodInfo.stock }}</span>
          </div>
          <div>
            <span>商品简介：</span>
            <span>{{ goodInfo.profile }}</span>
          </div>
          <div>
            <span>商品详情：</span>
            <div v-html="goodInfo.details"></div>
          </div>
        </n-space>
      </n-drawer-content>
    </n-drawer>
  </CommonPage>
</template>

<script setup>
import api from './api'
import { NEllipsis, NButton, NImage, NSpace } from 'naive-ui'
import { h, withDirectives, resolveDirective } from 'vue'
const vPerms = resolveDirective('perms')

const loading = ref(false)

const isNoteModel = ref(false)

const goodInfo = ref({})

const showDrawer = ref(false)

const notesVal = ref('')

const nowRow = ref({})
const nowKey = ref(null)

const columns = ref([
  {
    title: '商品名称',
    slot: 'name',
    align: 'center',
    render: (row) => {
      return h(
        NEllipsis,
        {
          style: 'max-width: 200px',
        },
        {
          default: () => row.name,
        }
      )
    },
  },
  {
    title: '商品封面',
    slot: 'cover',
    align: 'center',
    render(row) {
      return h(NImage, {
        src: row.cover,
        width: '30',
      })
    },
  },
  {
    title: '商品分类',
    key: 'class_name',
    align: 'center',
  },
  {
    title: '商品价格',
    key: 'number',
    align: 'center',
  },
  {
    title: '商品库存',
    key: 'stock',
    align: 'center',
  },
  {
    title: '商品状态',
    slot: 'status',
    align: 'center',
    render(row) {
      return row.status === 3 ? '待审核' : row.status === 1 ? '已审核' : '已拒绝'
    },
  },
  {
    title: '备注',
    key: 'notes',
    align: 'center',
  },
  {
    title: '操作',
    slot: 'action',
    align: 'center',
    render(row) {
      if (row.status === 3) {
        return [
          h(
            NSpace,
            {
              justify: 'center',
            },
            {
              default: () => [
                withDirectives(
                  h(
                    NButton,
                    {
                      type: 'primary',
                      text: true,
                      onClick: () => {
                        nowKey.value = 1
                        nowRow.value = { ...row }
                        veeify()
                      },
                    },
                    () => '审核通过'
                  ),
                  [[vPerms, ['/admin/point/goods/process']]]
                ),
                withDirectives(
                  h(
                    NButton,
                    {
                      type: 'error',
                      text: true,
                      onClick: () => {
                        nowKey.value = 2
                        nowRow.value = { ...row }
                        isNoteModel.value = true
                      },
                    },
                    () => '审核拒绝'
                  ),
                  [[vPerms, ['/admin/point/goods/process']]]
                ),
                withDirectives(
                  h(
                    NButton,
                    {
                      type: 'info',
                      text: true,
                      onClick: () => {
                        nowKey.value = 3
                        goodInfo.value = { ...row }
                        showDrawer.value = true
                      },
                    },
                    () => '商品详情'
                  ),
                  [[vPerms, ['/admin/point/goods/process']]]
                ),
              ],
            }
          ),
        ]
      }
    },
  },
])

const data = ref([])

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    pagination.value.page = page
    getList()
  },
  onUpdatePageSize: (pageSize) => {
    pagination.value.pageSize = pageSize
    pagination.value.page = 1
    getList()
  },
})

onMounted(() => {
  getList()
})

const getList = async () => {
  loading.value = true
  try {
    const res = await api.getPointlist({
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
    })
    data.value = res.data.data || []
    pagination.value.itemCount = res.data.total
  } catch (error) {
    $message.error(error.msg)
  }
  loading.value = false
}

const clear = () => {
  isNoteModel.value = false
  notesVal.value = ''
}

const veeify = async () => {
  await api.setPointStatus({
    gid: nowRow.value.gid,
    status: nowKey.value,
    notes: notesVal.value,
  })
  getList()
  clear()
}
</script>

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