refactor: mp/WxReply重构，拆分组件

2023-04-19 11:07:51 +08:00
1 parent cddf1ee878
commit f8a86cbc24
@@ -0,0 +1,172 @@
+<template>
+  <el-tab-pane name="image">
+    <template #label>
+      <el-row align="middle"><Icon icon="ep:picture" class="mr-5px" /> 图片</el-row>
+    </template>
+    <!-- 情况一：已经选择好素材、或者上传好图片 -->
+    <div class="select-item" v-if="objData.url">
+      <img class="material-img" :src="objData.url" />
+      <p class="item-name" v-if="objData.name">{{ objData.name }}</p>
+      <el-row class="ope-row" justify="center">
+        <el-button type="danger" circle @click="onDelete">
+          <Icon icon="ep:delete" />
+        </el-button>
+      </el-row>
+    </div>
+    <!-- 情况二：未做完上述操作 -->
+    <el-row v-else style="text-align: center" align="middle">
+      <!-- 选择素材 -->
+      <el-col :span="12" class="col-select">
+        <el-button type="success" @click="showDialog = true">
+          素材库选择 <Icon icon="ep:circle-check" />
+        </el-button>
+        <el-dialog
+          title="选择图片"
+          v-model="showDialog"
+          width="90%"
+          append-to-body
+          destroy-on-close
+        >
+          <WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
+        </el-dialog>
+      </el-col>
+      <!-- 文件上传 -->
+      <el-col :span="12" class="col-add">
+        <el-upload
+          :action="UPLOAD_URL"
+          :headers="HEADERS"
+          multiple
+          :limit="1"
+          :file-list="fileList"
+          :data="uploadData"
+          :before-upload="beforeImageUpload"
+          :on-success="onUploadSuccess"
+        >
+          <el-button type="primary">上传图片</el-button>
+          <template #tip>
+            <span>
+              <div class="el-upload__tip">支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div>
+            </span>
+          </template>
+        </el-upload>
+      </el-col>
+    </el-row>
+  </el-tab-pane>
+</template>
+
+<script setup lang="ts">
+import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
+import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
+import type { UploadRawFile } from 'element-plus'
+import { getAccessToken } from '@/utils/auth'
+import { ObjData } from './types'
+
+const message = useMessage()
+
+const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
+const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
+
+const props = defineProps<{
+  modelValue: ObjData
+}>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: ObjData)
+}>()
+const objData = computed<ObjData>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const showDialog = ref(false)
+const fileList = ref([])
+const uploadData = reactive({
+  accountId: objData.value.accountId,
+  type: 'image',
+  title: '',
+  introduction: ''
+})
+
+const beforeImageUpload = (rawFile: UploadRawFile) =>
+  useBeforeUpload(MaterialType.Image, 2)(rawFile)
+
+const onUploadSuccess = (res: any) => {
+  if (res.code !== 0) {
+    message.error('上传出错：' + res.msg)
+    return false
+  }
+
+  // 清空上传时的各种数据
+  fileList.value = []
+  uploadData.title = ''
+  uploadData.introduction = ''
+
+  // 上传好的文件，本质是个素材，所以可以进行选中
+  selectMaterial(res.data)
+}
+
+const onDelete = () => {
+  objData.value.mediaId = null
+  objData.value.url = null
+  objData.value.name = null
+}
+
+const selectMaterial = (item) => {
+  showDialog.value = false
+
+  objData.value.type = 'image'
+  objData.value.mediaId = item.mediaId
+  objData.value.url = item.url
+  objData.value.name = item.name
+}
+</script>
+
+<style lang="scss" scoped>
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+
+  .material-img {
+    width: 100%;
+  }
+
+  .item-name {
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+
+    .item-infos {
+      width: 30%;
+      margin: auto;
+    }
+
+    .ope-row {
+      padding-top: 10px;
+      text-align: center;
+    }
+  }
+
+  .col-select {
+    border: 1px solid rgb(234, 234, 234);
+    padding: 50px 0px;
+    height: 160px;
+    width: 49.5%;
+  }
+
+  .col-add {
+    border: 1px solid rgb(234, 234, 234);
+    padding: 50px 0px;
+    height: 160px;
+    width: 49.5%;
+    float: right;
+
+    .el-upload__tip {
+      line-height: 18px;
+      text-align: center;
+    }
+  }
+}
+</style>