@uxda/appkit 4.0.2 → 4.0.12

package/src/user/components/UserFeedback.vue

@@ -1,440 +1,440 @@
-<template>
-  <div class="user-feedback" :class="{ isSuccess }">
-    <div v-if="!isSuccess" class="user-feedback-wrap">
-      <div class="user-feedback-head">
-        <div class="user-feedback-head-info">1.系统使用过程中，遇到系统问题可通过此途径反馈。</div>
-        <div class="user-feedback-head-info">
-          2.尽量在出问题的页面直接点击“问题反馈”，系统将后台获取当前页面信息，以便快速定位问题页。
-        </div>
-        <div class="user-feedback-head-info">
-          3.问题描述请尽可能详细描述操作步骤，如涉及订单或客户信息，尽量附上订单编号/客户姓名等关键信息，以便快速定位问题。
-        </div>
-        <div class="user-feedback-head-info">4.问题描述支持上传图片及截图，视频不能超过50M。</div>
-      </div>
-
-      <div class="user-feedback-tit">补充描述</div>
-      <div class="user-feedback-body">
-        <editor
-          id="myEditor"
-          :show-img-resize="true"
-          class="user-feedback-editor"
-          placeholder="请输入补充描述"
-        />
-        <div class="user-feedback-handle">
-          <div
-            class="user-feedback-handle-item"
-            v-for="(item, key) in formState.attachment"
-            :key="key"
-          >
-            <template v-if="item.status === 'done'">
-              <img
-                v-if="item.type === 'image'"
-                class="user-feedback-handle-item-img"
-                mode="aspectFit"
-                :src="item.url"
-              />
-              <video class="user-feedback-handle-item-img" :src="item.url" v-else />
-              <div class="user-feedback-handle-item-close" @click="onDelete(key)">
-                <img
-                  class="user-feedback-handle-item-close-img"
-                  src="https://cdn.ddjf.com/static/images/customer-center/close-filled.png"
-                />
-              </div>
-            </template>
-            <img
-              class="user-feedback-handle-item-loading"
-              mode="aspectFit"
-              src="https://cdn.ddjf.com/static/images/customer-center/loading.png"
-              alt=""
-            />
-          </div>
-          <div class="user-feedback-handle-item" @click="toUpload">+</div>
-        </div>
-      </div>
-
-      <div class="user-feedback-footer">
-        <nut-button class="user-feedback-footer-btn" plain type="primary" @click="onCancel"
-          >最小化</nut-button
-        >
-        <nut-button class="user-feedback-footer-btn" type="primary" @click="onOk">反馈</nut-button>
-      </div>
-    </div>
-    <div class="user-feedback-wrap" v-else>
-      <img
-        class="user-feedback-success-img"
-        mode="aspectFit"
-        src="https://cdn.ddjf.com/static/images/customer-center/success-icon.png"
-      />
-      <div class="user-feedback-success-info">提交成功</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import Taro from '@tarojs/taro'
-import { onMounted, reactive, ref } from 'vue'
-import { useAppKitOptions } from '../../Appkit'
-import { useHttp } from '../api'
-
-interface FormStateType {
-  content: string
-  attachment: any[]
-}
-
-const props = withDefaults(
-  defineProps<{
-    app?: string
-    traceIds: string
-    value?: FormStateType | null
-    captureScreen?: any
-  }>(),
-  {
-    app: '',
-    traceIds: '',
-    value: null,
-    captureScreen: () => {},
-  }
-)
-
-onMounted(() => {
-  setTimeout(() => {
-    initEditor()
-  }, 500)
-})
-
-const formState = reactive<FormStateType>({
-  content: '',
-  attachment: [],
-})
-const isSuccess = ref(false) // 反馈提交成功标记
-
-const editorCtx = ref()
-// 编辑器初始化
-function initEditor() {
-  const query = Taro.createSelectorQuery()
-  query
-    .select('#myEditor')
-    .context((res) => {
-      editorCtx.value = res.context
-
-      if (props.value) {
-        if (props.value.content) {
-          formState.content = props.value.content
-          editorCtx.value.setContents({
-            html: props.value.content,
-          })
-        }
-        if (props.value.attachment && props.value.attachment.length) {
-          formState.attachment = props.value.attachment
-        }
-      }
-    })
-    .exec()
-}
-
-// 上传图片、视频
-function toUpload() {
-  if (formState.attachment.length >= 20) {
-    return Taro.showToast({
-      title: '最多上传20份附件',
-      icon: 'none',
-    })
-  }
-  Taro.chooseMedia({
-    count: 20 - formState.attachment.length,
-    mediaType: ['mix'],
-    maxDuration: 60,
-    success: async (res) => {
-      console.log(res.tempFiles, 'res.tempFiles')
-      for (const item of res.tempFiles) {
-        if (item.fileType === 'video') {
-          if (item.size > 1024 * 1024 * 50) {
-            return Taro.showToast({
-              title: '视频大小不能超过50M',
-              icon: 'none',
-            })
-          }
-        }
-
-        formState.attachment.push({
-          url: item.tempFilePath,
-          type: item.fileType,
-          status: 'uploading',
-        })
-        await uploadFile(formState.attachment[formState.attachment.length - 1])
-      }
-    },
-  })
-}
-
-// 文件上传请求
-async function uploadFile(item: any) {
-  const appkitOptions = useAppKitOptions()
-  const token = appkitOptions.tempToken() || appkitOptions.token()
-
-  let Res: any = await Taro.uploadFile({
-    url: `${appkitOptions.baseUrl()}/saas-base/file/upload`,
-    filePath: item.url,
-    name: 'file',
-    formData: {
-      objectNo: `${token}${Date.now()}`,
-      objectTypeCode: `PROBLEM_FEEDBACK_MINI`,
-    },
-    header: { token },
-  })
-
-  const res = JSON.parse(Res.data)
-  if (res.success) {
-    item.url = res.result
-    item.status = 'done'
-  }
-}
-
-// 删除附件
-function onDelete(index: number) {
-  formState.attachment.splice(index, 1)
-}
-
-// 点击最小化
-function onCancel() {
-  editorCtx.value.getContents({
-    success: (res) => {
-      const html = res.html
-      formState.content = html
-
-      if (html && html !== '<p><br></p>') {
-        formState.content = html
-      }
-      emits('minimize', formState)
-      Taro.navigateBack()
-    },
-  })
-}
-
-// 点击确定反馈时
-function onOk() {
-  editorCtx.value.getContents({
-    success: (res) => {
-      const html = res.html
-      if (html === '<p><br></p>' || !html) {
-        Taro.showToast({
-          title: '请输入问题描述',
-          icon: 'none',
-        })
-      } else {
-        formState.content = html
-        requestFeedback()
-      }
-    },
-  })
-}
-
-// 请求反馈接口
-function requestFeedback() {
-  const $http = useHttp()
-  const appkitOptions = useAppKitOptions()
-
-  Taro.showLoading({
-    title: '反馈中...',
-  })
-
-  const attachment = JSON.parse(
-    JSON.stringify(
-      formState.attachment
-        .filter((item) => item.status === 'done')
-        .map((item) => ({ url: item.url, type: item.type }))
-    )
-  )
-  if (props.captureScreen && Object.keys(props.captureScreen).length) {
-    attachment.push({
-      captureScreen: props.captureScreen,
-    })
-  }
-
-  const sendData = {
-    appCode: props.app || appkitOptions.app(),
-    content: formState.content,
-    id: '',
-    remarks: '',
-    title: '',
-    traceIds: props.traceIds,
-    device: 'MINI',
-    attachment: JSON.stringify(attachment),
-  }
-  $http
-    .post('/saas-base/problemFeedback/add', sendData)
-    .then(() => {
-      Taro.hideLoading()
-      emits('success')
-      // Taro.showToast({ title: '反馈提交成功', icon: 'none' })
-      // Taro.navigateBack()
-      isSuccess.value = true
-      clearFormState()
-    })
-    .catch(() => {
-      Taro.hideLoading()
-    })
-}
-
-// 反馈成功后，清空反馈内容
-function clearFormState() {
-  formState.content = ''
-  formState.attachment = []
-}
-
-// 父组件事件
-const emits = defineEmits(['minimize', 'success'])
-</script>
-
-<style lang="scss">
-.user-feedback {
-  margin: 10px 12px;
-  padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
-  min-height: 100vh;
-  box-sizing: border-box;
-  overflow: hidden;
-  &.isSuccess {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    .user-feedback-wrap {
-      height: 100vh;
-      align-items: center;
-    }
-  }
-  &-wrap {
-    min-height: calc(100vh - calc(75px + env(safe-area-inset-bottom, 0px)));
-    height: 100%;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding: 10px;
-    border-radius: 5px;
-  }
-  &-head {
-    background: #f2f9ff;
-    padding: 15px;
-    border-radius: 2px;
-    font-size: 12px;
-    margin-bottom: 8px;
-    &-info {
-      padding-left: 9px;
-      text-indent: -9px;
-    }
-  }
-  &-tit {
-    height: 44px;
-    display: flex;
-    align-items: center;
-    color: #1a1a1a;
-    font-weight: 500;
-    font-size: 17px;
-  }
-  &-body {
-    border-radius: 4px 4px 0px 0px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  &-editor {
-    padding: 10px;
-    font-size: 14px;
-    background: #f5f5f5;
-    overflow-y: auto;
-    min-height: 165px;
-  }
-  &-handle {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-top: 10px;
-    margin-right: -4px;
-    &-item {
-      position: relative;
-      border-radius: 2px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 79px;
-      height: 79px;
-      background: #f5f5f5;
-      font-size: 30px;
-      color: rgba(53, 53, 53, 0.3);
-      margin-right: 4px;
-      margin-bottom: 4px;
-      &-img {
-        max-width: 100%;
-        max-height: 100%;
-      }
-      &-close {
-        position: absolute;
-        top: -2px;
-        right: -2px;
-        width: 20px;
-        height: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        &-img {
-          width: 10px;
-          height: 10px;
-        }
-      }
-      &-loading {
-        width: 17px;
-        height: 17px;
-        animation: rotate 2s linear infinite;
-      }
-    }
-  }
-  .ql-editor.ql-blank:before {
-    color: rgba(0, 0, 0, 0.3);
-    font-style: normal;
-  }
-
-  &-footer {
-    position: fixed;
-    z-index: 10;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    min-height: 63px;
-    background: #ffffff;
-    box-shadow: 0 -3px 11px 0 rgba(224, 224, 224, 0.5);
-    padding: 10px 12px calc(8px + env(safe-area-inset-bottom, 0px));
-    display: flex;
-    justify-content: space-between;
-    box-sizing: border-box;
-    &-btn {
-      flex: 1;
-      &:first-child {
-        margin-right: 10px;
-      }
-    }
-  }
-
-  &-success {
-    &-img {
-      width: 87px;
-      height: 90px;
-      margin-top: 110px;
-      margin-bottom: 20px;
-    }
-    &-info {
-      color: #353535;
-      font-size: 16px;
-      font-weight: 500;
-    }
-  }
-
-  @keyframes rotate {
-    from {
-      transform: rotate(0);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-</style>
+<template>
+  <div class="user-feedback" :class="{ isSuccess }">
+    <div v-if="!isSuccess" class="user-feedback-wrap">
+      <div class="user-feedback-head">
+        <div class="user-feedback-head-info">1.系统使用过程中，遇到系统问题可通过此途径反馈。</div>
+        <div class="user-feedback-head-info">
+          2.尽量在出问题的页面直接点击“问题反馈”，系统将后台获取当前页面信息，以便快速定位问题页。
+        </div>
+        <div class="user-feedback-head-info">
+          3.问题描述请尽可能详细描述操作步骤，如涉及订单或客户信息，尽量附上订单编号/客户姓名等关键信息，以便快速定位问题。
+        </div>
+        <div class="user-feedback-head-info">4.问题描述支持上传图片及截图，视频不能超过50M。</div>
+      </div>
+
+      <div class="user-feedback-tit">补充描述</div>
+      <div class="user-feedback-body">
+        <editor
+          id="myEditor"
+          :show-img-resize="true"
+          class="user-feedback-editor"
+          placeholder="请输入补充描述"
+        />
+        <div class="user-feedback-handle">
+          <div
+            class="user-feedback-handle-item"
+            v-for="(item, key) in formState.attachment"
+            :key="key"
+          >
+            <template v-if="item.status === 'done'">
+              <img
+                v-if="item.type === 'image'"
+                class="user-feedback-handle-item-img"
+                mode="aspectFit"
+                :src="item.url"
+              />
+              <video class="user-feedback-handle-item-img" :src="item.url" v-else />
+              <div class="user-feedback-handle-item-close" @click="onDelete(key)">
+                <img
+                  class="user-feedback-handle-item-close-img"
+                  src="https://cdn.ddjf.com/static/images/customer-center/close-filled.png"
+                />
+              </div>
+            </template>
+            <img
+              class="user-feedback-handle-item-loading"
+              mode="aspectFit"
+              src="https://cdn.ddjf.com/static/images/customer-center/loading.png"
+              alt=""
+            />
+          </div>
+          <div class="user-feedback-handle-item" @click="toUpload">+</div>
+        </div>
+      </div>
+
+      <div class="user-feedback-footer">
+        <nut-button class="user-feedback-footer-btn" plain type="primary" @click="onCancel"
+          >最小化</nut-button
+        >
+        <nut-button class="user-feedback-footer-btn" type="primary" @click="onOk">反馈</nut-button>
+      </div>
+    </div>
+    <div class="user-feedback-wrap" v-else>
+      <img
+        class="user-feedback-success-img"
+        mode="aspectFit"
+        src="https://cdn.ddjf.com/static/images/customer-center/success-icon.png"
+      />
+      <div class="user-feedback-success-info">提交成功</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Taro from '@tarojs/taro'
+import { onMounted, reactive, ref } from 'vue'
+import { useAppKitOptions } from '../../Appkit'
+import { useHttp } from '../api'
+
+interface FormStateType {
+  content: string
+  attachment: any[]
+}
+
+const props = withDefaults(
+  defineProps<{
+    app?: string
+    traceIds: string
+    value?: FormStateType | null
+    captureScreen?: any
+  }>(),
+  {
+    app: '',
+    traceIds: '',
+    value: null,
+    captureScreen: () => {},
+  }
+)
+
+onMounted(() => {
+  setTimeout(() => {
+    initEditor()
+  }, 500)
+})
+
+const formState = reactive<FormStateType>({
+  content: '',
+  attachment: [],
+})
+const isSuccess = ref(false) // 反馈提交成功标记
+
+const editorCtx = ref()
+// 编辑器初始化
+function initEditor() {
+  const query = Taro.createSelectorQuery()
+  query
+    .select('#myEditor')
+    .context((res) => {
+      editorCtx.value = res.context
+
+      if (props.value) {
+        if (props.value.content) {
+          formState.content = props.value.content
+          editorCtx.value.setContents({
+            html: props.value.content,
+          })
+        }
+        if (props.value.attachment && props.value.attachment.length) {
+          formState.attachment = props.value.attachment
+        }
+      }
+    })
+    .exec()
+}
+
+// 上传图片、视频
+function toUpload() {
+  if (formState.attachment.length >= 20) {
+    return Taro.showToast({
+      title: '最多上传20份附件',
+      icon: 'none',
+    })
+  }
+  Taro.chooseMedia({
+    count: 20 - formState.attachment.length,
+    mediaType: ['mix'],
+    maxDuration: 60,
+    success: async (res) => {
+      console.log(res.tempFiles, 'res.tempFiles')
+      for (const item of res.tempFiles) {
+        if (item.fileType === 'video') {
+          if (item.size > 1024 * 1024 * 50) {
+            return Taro.showToast({
+              title: '视频大小不能超过50M',
+              icon: 'none',
+            })
+          }
+        }
+
+        formState.attachment.push({
+          url: item.tempFilePath,
+          type: item.fileType,
+          status: 'uploading',
+        })
+        await uploadFile(formState.attachment[formState.attachment.length - 1])
+      }
+    },
+  })
+}
+
+// 文件上传请求
+async function uploadFile(item: any) {
+  const appkitOptions = useAppKitOptions()
+  const token = appkitOptions.tempToken() || appkitOptions.token()
+
+  let Res: any = await Taro.uploadFile({
+    url: `${appkitOptions.baseUrl()}/saas-base/file/upload`,
+    filePath: item.url,
+    name: 'file',
+    formData: {
+      objectNo: `${token}${Date.now()}`,
+      objectTypeCode: `PROBLEM_FEEDBACK_MINI`,
+    },
+    header: { token },
+  })
+
+  const res = JSON.parse(Res.data)
+  if (res.success) {
+    item.url = res.result
+    item.status = 'done'
+  }
+}
+
+// 删除附件
+function onDelete(index: number) {
+  formState.attachment.splice(index, 1)
+}
+
+// 点击最小化
+function onCancel() {
+  editorCtx.value.getContents({
+    success: (res) => {
+      const html = res.html
+      formState.content = html
+
+      if (html && html !== '<p><br></p>') {
+        formState.content = html
+      }
+      emits('minimize', formState)
+      Taro.navigateBack()
+    },
+  })
+}
+
+// 点击确定反馈时
+function onOk() {
+  editorCtx.value.getContents({
+    success: (res) => {
+      const html = res.html
+      if (html === '<p><br></p>' || !html) {
+        Taro.showToast({
+          title: '请输入问题描述',
+          icon: 'none',
+        })
+      } else {
+        formState.content = html
+        requestFeedback()
+      }
+    },
+  })
+}
+
+// 请求反馈接口
+function requestFeedback() {
+  const $http = useHttp()
+  const appkitOptions = useAppKitOptions()
+
+  Taro.showLoading({
+    title: '反馈中...',
+  })
+
+  const attachment = JSON.parse(
+    JSON.stringify(
+      formState.attachment
+        .filter((item) => item.status === 'done')
+        .map((item) => ({ url: item.url, type: item.type }))
+    )
+  )
+  if (props.captureScreen && Object.keys(props.captureScreen).length) {
+    attachment.push({
+      captureScreen: props.captureScreen,
+    })
+  }
+
+  const sendData = {
+    appCode: props.app || appkitOptions.app(),
+    content: formState.content,
+    id: '',
+    remarks: '',
+    title: '',
+    traceIds: props.traceIds,
+    device: 'MINI',
+    attachment: JSON.stringify(attachment),
+  }
+  $http
+    .post('/saas-base/problemFeedback/add', sendData)
+    .then(() => {
+      Taro.hideLoading()
+      emits('success')
+      // Taro.showToast({ title: '反馈提交成功', icon: 'none' })
+      // Taro.navigateBack()
+      isSuccess.value = true
+      clearFormState()
+    })
+    .catch(() => {
+      Taro.hideLoading()
+    })
+}
+
+// 反馈成功后，清空反馈内容
+function clearFormState() {
+  formState.content = ''
+  formState.attachment = []
+}
+
+// 父组件事件
+const emits = defineEmits(['minimize', 'success'])
+</script>
+
+<style lang="scss">
+.user-feedback {
+  margin: 10px 12px;
+  padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
+  min-height: 100vh;
+  box-sizing: border-box;
+  overflow: hidden;
+  &.isSuccess {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    .user-feedback-wrap {
+      height: 100vh;
+      align-items: center;
+    }
+  }
+  &-wrap {
+    min-height: calc(100vh - calc(75px + env(safe-area-inset-bottom, 0px)));
+    height: 100%;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 10px;
+    border-radius: 5px;
+  }
+  &-head {
+    background: #f2f9ff;
+    padding: 15px;
+    border-radius: 2px;
+    font-size: 12px;
+    margin-bottom: 8px;
+    &-info {
+      padding-left: 9px;
+      text-indent: -9px;
+    }
+  }
+  &-tit {
+    height: 44px;
+    display: flex;
+    align-items: center;
+    color: #1a1a1a;
+    font-weight: 500;
+    font-size: 17px;
+  }
+  &-body {
+    border-radius: 4px 4px 0px 0px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  &-editor {
+    padding: 10px;
+    font-size: 14px;
+    background: #f5f5f5;
+    overflow-y: auto;
+    min-height: 165px;
+  }
+  &-handle {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    margin-right: -4px;
+    &-item {
+      position: relative;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 79px;
+      height: 79px;
+      background: #f5f5f5;
+      font-size: 30px;
+      color: rgba(53, 53, 53, 0.3);
+      margin-right: 4px;
+      margin-bottom: 4px;
+      &-img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+      &-close {
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &-img {
+          width: 10px;
+          height: 10px;
+        }
+      }
+      &-loading {
+        width: 17px;
+        height: 17px;
+        animation: rotate 2s linear infinite;
+      }
+    }
+  }
+  .ql-editor.ql-blank:before {
+    color: rgba(0, 0, 0, 0.3);
+    font-style: normal;
+  }
+
+  &-footer {
+    position: fixed;
+    z-index: 10;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    min-height: 63px;
+    background: #ffffff;
+    box-shadow: 0 -3px 11px 0 rgba(224, 224, 224, 0.5);
+    padding: 10px 12px calc(8px + env(safe-area-inset-bottom, 0px));
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    &-btn {
+      flex: 1;
+      &:first-child {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &-success {
+    &-img {
+      width: 87px;
+      height: 90px;
+      margin-top: 110px;
+      margin-bottom: 20px;
+    }
+    &-info {
+      color: #353535;
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>