iot-device-management-frontend/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue

<script lang="ts" setup>
import type { Reply } from './types';

import type { UploadRawFile } from '#/views/mp/hooks/useUpload';

import { computed, reactive, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';
import { useAccessStore } from '@vben/stores';

import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';

import { WxMaterialSelect } from '#/views/mp/components';
import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';

defineOptions({ name: 'TabImage' });

const props = defineProps<{
  modelValue: Reply;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', v: Reply): void;
}>();

const accessStore = useAccessStore();
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
const reply = computed<Reply>({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
});

const showDialog = ref(false);
const fileList = ref([]);
const uploadData = reactive({
  accountId: reply.value.accountId,
  introduction: '',
  title: '',
  type: 'image',
});

/** 图片上传前校验 */
function beforeImageUpload(rawFile: UploadRawFile) {
  return useBeforeUpload(UploadType.Image, 2)(rawFile);
}

/** 自定义上传请求 */
async function customRequest(options: any) {
  const { file, onSuccess, onError } = options;

  const formData = new FormData();
  formData.append('file', file);
  formData.append('accountId', String(uploadData.accountId));
  formData.append('type', uploadData.type);
  formData.append('title', uploadData.title);
  formData.append('introduction', uploadData.introduction);

  try {
    const response = await fetch(UPLOAD_URL, {
      method: 'POST',
      headers: HEADERS,
      body: formData,
    });

    const result = await response.json();

    if (result.code !== 0) {
      message.error(result.msg || '上传出错');
      onError(new Error(result.msg || '上传失败'));
      return;
    }
    // 清空上传时的各种数据
    fileList.value = [];
    uploadData.title = '';
    uploadData.introduction = '';

    // 上传好的文件，本质是个素材，所以可以进行选中
    selectMaterial(result.data);
    message.success('上传成功');
    onSuccess(result, file);
  } catch (error) {
    message.error('上传失败，请重试');
    onError(error);
  }
}

/** 删除图片 */
function onDelete() {
  reply.value.mediaId = null;
  reply.value.url = null;
  reply.value.name = null;
}

/** 选择素材 */
function selectMaterial(item: any) {
  showDialog.value = false;
  reply.value.mediaId = item.mediaId;
  reply.value.url = item.url;
  reply.value.name = item.name;
}
</script>

<template>
  <div>
    <!-- 情况一：已经选择好素材、或者上传好图片 -->
    <div v-if="reply.url" class="select-item">
      <img class="material-img" :src="reply.url" alt="图片素材" />
      <p v-if="reply.name" class="item-name">{{ reply.name }}</p>
      <Row class="ope-row" justify="center">
        <Button danger shape="circle" @click="onDelete">
          <template #icon>
            <IconifyIcon icon="lucide:trash-2" />
          </template>
        </Button>
      </Row>
    </div>

    <!-- 情况二：未做完上述操作 -->
    <Row v-else class="text-center" align="middle">
      <!-- 选择素材 -->
      <Col :span="12" class="col-select">
        <Button type="primary" @click="showDialog = true">
          素材库选择
          <template #icon>
            <IconifyIcon icon="lucide:circle-check" />
          </template>
        </Button>
        <Modal
          v-model:open="showDialog"
          title="选择图片"
          :width="1200"
          :footer="null"
          destroy-on-close
        >
          <WxMaterialSelect
            type="image"
            :account-id="reply.accountId"
            @select-material="selectMaterial"
          />
        </Modal>
      </Col>

      <!-- 文件上传 -->
      <Col :span="12" class="col-add">
        <Upload
          :custom-request="customRequest"
          :multiple="true"
          :max-count="1"
          :file-list="fileList"
          :before-upload="beforeImageUpload"
          :show-upload-list="false"
        >
          <Button type="primary">
            上传图片
            <template #icon>
              <IconifyIcon icon="lucide:upload" />
            </template>
          </Button>
        </Upload>
        <div class="upload-tip">
          支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
        </div>
      </Col>
    </Row>
  </div>
</template>

<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.select-item {
  // width: 280px;
  padding: 10px;
  margin: 0 auto 10px;
  border: 1px solid #eaeaea;
}

.material-img {
  width: 100%;
}

.item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.ope-row {
  padding-top: 10px;
  text-align: center;
}

.col-select,
.col-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px;
  padding: 50px 0;
  border: 1px solid rgb(234 234 234);
}

.col-select {
  width: 49.5%;
}

.col-add {
  float: right;
  width: 49.5%;
}

.upload-tip {
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
  color: #666;
  text-align: center;
}
</style>