From eb906ab0faeb6c3941e2574e85b81abfad4ef417 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=B0=91=E5=90=9B?= <476671688@qq.com>
Date: Fri, 23 Feb 2024 18:16:57 +0800
Subject: [PATCH] =?UTF-8?q?[fix]=E5=A2=9E=E5=8A=A0=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E6=A0=8F=E7=9B=AE=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/customerService.ts       |  41 +++
 src/components/UploadFile/index.ts            |   3 +-
 .../UploadFile/src/UploadMaterial.vue         | 251 ++++++++++++++++++
 .../customerService/CustomerServiceForm.vue   | 105 ++++++++
 .../mall/product/customerService/index.vue    | 116 ++++++++
 .../discountCoupon/DiscountCouponForm.vue     |   4 +
 src/views/marketing/discount/discountForm.vue |   2 +-
 7 files changed, 520 insertions(+), 2 deletions(-)
 create mode 100644 src/api/mall/product/customerService.ts
 create mode 100644 src/components/UploadFile/src/UploadMaterial.vue
 create mode 100644 src/views/mall/product/customerService/CustomerServiceForm.vue
 create mode 100644 src/views/mall/product/customerService/index.vue

diff --git a/src/api/mall/product/customerService.ts b/src/api/mall/product/customerService.ts
new file mode 100644
index 0000000..4ad218a
--- /dev/null
+++ b/src/api/mall/product/customerService.ts
@@ -0,0 +1,41 @@
+import request from '@/config/axios'
+
+/**
+ * 商品品牌
+ */
+export interface KfVO {
+  /**
+   * 品牌编号
+   */
+  id?: number
+  /**
+   * 品牌名称
+   */
+  name: string
+  /**
+   * 图片素材id
+   */
+  mediaId: string
+}
+
+// 创建商品品牌
+export const createKf = (data: KfVO) => {
+  return request.post({ url: '/cp/kf', data })
+}
+
+// 更新商品品牌
+export const updateKf = (data: KfVO) => {
+  return request.put({ url: '/cp/kf', data })
+}
+
+// 删除商品品牌
+export const deleteKf = (id: number) => {
+  return request.delete({ url: `/cp/kf?id=${id}` })
+}
+
+
+// 获得商品品牌列表
+export const getKfPage = (params: PageParam) => {
+  return request.get({ url: '/cp/kf/page', params })
+}
+
diff --git a/src/components/UploadFile/index.ts b/src/components/UploadFile/index.ts
index 97c1d66..c46542b 100644
--- a/src/components/UploadFile/index.ts
+++ b/src/components/UploadFile/index.ts
@@ -1,5 +1,6 @@
 import UploadImg from './src/UploadImg.vue'
 import UploadImgs from './src/UploadImgs.vue'
 import UploadFile from './src/UploadFile.vue'
+import UploadMaterial from './src/UploadMaterial.vue'
 
-export { UploadImg, UploadImgs, UploadFile }
+export { UploadImg, UploadImgs, UploadFile, UploadMaterial }
diff --git a/src/components/UploadFile/src/UploadMaterial.vue b/src/components/UploadFile/src/UploadMaterial.vue
new file mode 100644
index 0000000..c2e6fa1
--- /dev/null
+++ b/src/components/UploadFile/src/UploadMaterial.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="upload-box">
+    <el-upload
+      :action="updateUrl"
+      :id="uuid"
+      :class="['upload', drag ? 'no-border' : '']"
+      :multiple="false"
+      :show-file-list="false"
+      :headers="uploadHeaders"
+      :before-upload="beforeUpload"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :drag="drag"
+      :accept="fileType.join(',')"
+    >
+      <template v-if="modelValue.url">
+        <img :src="modelValue.url" class="upload-image" />
+        <div class="upload-handle" @click.stop>
+          <div class="handle-icon" @click="editImg">
+            <Icon icon="ep:edit" />
+            <span>{{ t('action.edit') }}</span>
+          </div>
+          <div class="handle-icon" @click="imgViewVisible = true">
+            <Icon icon="ep:zoom-in" />
+            <span>{{ t('action.detail') }}</span>
+          </div>
+          <div class="handle-icon" @click="deleteImg">
+            <Icon icon="ep:delete" />
+            <span>{{ t('action.del') }}</span>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="upload-empty">
+          <slot name="empty">
+            <Icon icon="ep:plus" />
+            <!-- <span>请上传图片</span> -->
+          </slot>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+    <el-image-viewer
+      v-if="imgViewVisible"
+      @close="imgViewVisible = false"
+      :url-list="[modelValue.url]"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadImg">
+import type { UploadProps } from 'element-plus'
+
+import { generateUUID } from '@/utils'
+import { propTypes } from '@/utils/propTypes'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+
+type FileTypes =
+  | 'image/apng'
+  | 'image/bmp'
+  | 'image/gif'
+  | 'image/jpeg'
+  | 'image/pjpeg'
+  | 'image/png'
+  | 'image/svg+xml'
+  | 'image/tiff'
+  | 'image/webp'
+  | 'image/x-icon'
+
+// 接受父组件参数
+const props = defineProps({
+  modelValue: propTypes.object.def({}),
+  updateUrl: propTypes.string.def(import.meta.env.VITE_BASE_URL + '/admin-api/cp/kf/uploadMaterial'),
+  drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
+  fileSize: propTypes.number.def(5), // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+  height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
+  width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
+  borderRadius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
+})
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+// 生成组件唯一id
+const uuid = ref('id-' + generateUUID())
+// 查看图片
+const imgViewVisible = ref(false)
+
+const emit = defineEmits(['update:modelValue'])
+
+const deleteImg = () => {
+  emit('update:modelValue', {})
+}
+
+const uploadHeaders = ref({
+  Authorization: 'Bearer ' + getAccessToken(),
+  'tenant-id': getTenantId()
+})
+
+const editImg = () => {
+  const dom = document.querySelector(`#${uuid.value} .el-upload__input`)
+  dom && dom.dispatchEvent(new MouseEvent('click'))
+}
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
+  const imgType = props.fileType
+  if (!imgType.includes(rawFile.type as FileTypes))
+    message.notifyWarning('上传图片不符合所需的格式！')
+  if (!imgSize) message.notifyWarning(`上传图片大小不能超过 ${props.fileSize}M！`)
+  return imgType.includes(rawFile.type as FileTypes) && imgSize
+}
+
+// 图片上传成功提示
+const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
+  message.success('上传成功')
+  emit('update:modelValue', res.data)
+}
+
+// 图片上传错误提示
+const uploadError = () => {
+  message.notifyError('图片上传失败，请您重新上传！')
+}
+</script>
+<style scoped lang="scss">
+.is-error {
+  .upload {
+    :deep(.el-upload),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+:deep(.disabled) {
+  .el-upload,
+  .el-upload-dragger {
+    cursor: not-allowed !important;
+    background: var(--el-disabled-bg-color);
+    border: 1px dashed var(--el-border-color-darker) !important;
+    &:hover {
+      border: 1px dashed var(--el-border-color-darker) !important;
+    }
+  }
+}
+.upload-box {
+  .no-border {
+    :deep(.el-upload) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: v-bind(width);
+      height: v-bind(height);
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      border-radius: v-bind(borderRadius);
+      transition: var(--el-transition-duration-fast);
+      &:hover {
+        border-color: var(--el-color-primary);
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+      .el-upload-dragger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        overflow: hidden;
+        background-color: transparent;
+        border: 1px dashed var(--el-border-color-darker);
+        border-radius: v-bind(borderRadius);
+        &:hover {
+          border: 1px dashed var(--el-color-primary);
+        }
+      }
+      .el-upload-dragger.is-dragover {
+        background-color: var(--el-color-primary-light-9);
+        border: 2px dashed var(--el-color-primary) !important;
+      }
+      .upload-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .upload-empty {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        line-height: 30px;
+        color: var(--el-color-info);
+        .el-icon {
+          font-size: 28px;
+          color: var(--el-text-color-secondary);
+        }
+      }
+      .upload-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        background: rgb(0 0 0 / 60%);
+        opacity: 0;
+        transition: var(--el-transition-duration-fast);
+        .handle-icon {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 0 6%;
+          color: aliceblue;
+          .el-icon {
+            margin-bottom: 40%;
+            font-size: 130%;
+            line-height: 130%;
+          }
+          span {
+            font-size: 85%;
+            line-height: 85%;
+          }
+        }
+      }
+    }
+  }
+  .el-upload__tip {
+    line-height: 18px;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/views/mall/product/customerService/CustomerServiceForm.vue b/src/views/mall/product/customerService/CustomerServiceForm.vue
new file mode 100644
index 0000000..406aeae
--- /dev/null
+++ b/src/views/mall/product/customerService/CustomerServiceForm.vue
@@ -0,0 +1,105 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="客服名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入客服名称" :maxlength="15" show-word-limit/>
+      </el-form-item>
+      <el-form-item label="客服头像" prop="mediaData">
+        <UploadMaterial v-model="formData.mediaData" :limit="1" :is-show-tip="false" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts" name="ProductBrandForm">
+import { CommonStatusEnum } from '@/utils/constants'
+import * as CustomerServiceApi from '@/api/mall/product/customerService'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: '',
+})
+const formRules = reactive({
+  name: [{ required: true, message: '客服名称不能为空', trigger: 'blur' }],
+  mediaData: [{ required: true, message: '客服头像不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, data?: object) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (data) {
+    formLoading.value = true
+    formData.value = data
+    formData.value.mediaData = {
+      mediaId: data.mediaId,
+      url: data.avatarUrl
+    }
+    try {
+
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as CustomerServiceApi.KfVO
+    data.mediaId = data.mediaData.mediaId
+    data.avatarUrl = data.mediaData.url
+    if (formType.value === 'create') {
+      await CustomerServiceApi.createKf(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CustomerServiceApi.updateKf(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    picUrl: '',
+    status: CommonStatusEnum.ENABLE,
+    description: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/product/customerService/index.vue b/src/views/mall/product/customerService/index.vue
new file mode 100644
index 0000000..773c714
--- /dev/null
+++ b/src/views/mall/product/customerService/index.vue
@@ -0,0 +1,116 @@
+<template>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-button
+      type="primary"
+      plain
+      @click="openForm('create')"
+      v-hasPermi="['product:customerService:create']"
+    >
+      <Icon icon="ep:plus" class="mr-5px" /> 新增
+    </el-button>
+    <el-table v-loading="loading" :data="list" row-key="id" default-expand-all>
+      <el-table-column label="客服id" prop="openKfid" />
+      <el-table-column label="客服名称" prop="name" width="120" />
+      <el-table-column label="客服头像" align="center" prop="avatarUrl" width="120">
+        <template #default="scope">
+          <img v-if="scope.row.avatar" :src="scope.row.avatarUrl" alt="客服头像" class="h-100px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="客服链接" prop="accountLink" />
+<!--      <el-table-column-->
+<!--        label="创建时间"-->
+<!--        align="center"-->
+<!--        prop="createTime"-->
+<!--        width="180"-->
+<!--        :formatter="dateFormatter"-->
+<!--      />-->
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row)"
+            v-hasPermi="['product:customerService:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['product:customerService:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CustomerServiceForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="ProductBrand">
+// import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+// import { dateFormatter } from '@/utils/formatTime'
+import * as CustomerServiceApi from '@/api/mall/product/customerService'
+import CustomerServiceForm from './CustomerServiceForm.vue'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref<any[]>([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+  createTime: []
+})
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CustomerServiceApi.getKfPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, data?: object) => {
+  formRef.value.open(type, data)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await CustomerServiceApi.deleteKf(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/mall/product/discountCoupon/DiscountCouponForm.vue b/src/views/mall/product/discountCoupon/DiscountCouponForm.vue
index b775cca..fb9fb84 100644
--- a/src/views/mall/product/discountCoupon/DiscountCouponForm.vue
+++ b/src/views/mall/product/discountCoupon/DiscountCouponForm.vue
@@ -306,6 +306,10 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const idList = ref([]) // 已选商品数量
 const visitDetail = ref(false)
 const formRules = reactive({
+  couponName: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
+  couponValue: [{ required: true, message: '请输入优惠内容', trigger: 'blur' }],
+  discount: [{ required: true, message: '请输入优惠内容', trigger: 'blur' }],
+  number: [{ required: true, message: '请输入发放张数', trigger: 'blur' }]
 })
 const groupVisible = ref(false)
 const ruleFormRef = ref()
diff --git a/src/views/marketing/discount/discountForm.vue b/src/views/marketing/discount/discountForm.vue
index 6934cef..e33929b 100644
--- a/src/views/marketing/discount/discountForm.vue
+++ b/src/views/marketing/discount/discountForm.vue
@@ -436,7 +436,7 @@ const formatTimestamp = (timestamp) => {
 }
 // 过滤出已设置规格活动金额大于0的数据
 const filterSkus = (skus: SkuResp[]) => {
-  return skus.filter(item => item.price > 0)
+  return skus.filter(item => item.discount > 0)
 }
 </script>
 <style lang="scss" scoped>