@uxda/appkit 1.2.72 → 1.2.75

package/src/user/components/UserFeedback.vue

@@ -0,0 +1,410 @@
+<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"
+          >
+            <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>
+          </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',
+            })
+          }
+        }
+
+        await uploadFile(item)
+      }
+    },
+  })
+}
+
+// 文件上传请求
+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.tempFilePath,
+    name: 'file',
+    formData: {
+      objectNo: `${token}${Date.now()}`,
+      objectTypeCode: `PROBLEM_FEEDBACK_MINI`,
+    },
+    header: { token },
+  })
+
+  const res = JSON.parse(Res.data)
+  if (res.success) {
+    formState.attachment.push({
+      url: res.result,
+      type: item.fileType,
+    })
+  }
+}
+
+// 删除附件
+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))
+  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),
+  }
+  console.log(sendData, 'sendData')
+  $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;
+        }
+      }
+    }
+  }
+  .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;
+    }
+  }
+}
+</style>

package/src/user/components/UserFeedbackEntry.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    :style="dragStyle"
+    @touchstart="onDragStart"
+    @touchmove="onDragMove"
+    @touchend="onDragEnd"
+    class="user-feedback-entry"
+    @click="onJump"
+    v-if="!hasStorage"
+  >
+    <img
+      class="user-feedback-entry-icon"
+      mode="aspectFit"
+      src="https://cdn.ddjf.com/static/images/customer-center/feedback.png"
+    />
+    <div>反馈</div>
+  </div>
+  <div class="user-feedback-entry hasStorage" v-else>
+    <img
+      class="user-feedback-entry-icon"
+      @click="onJump"
+      mode="aspectFit"
+      src="https://cdn.ddjf.com/static/images/customer-center/feedback-icon.png"
+    />
+    <div class="user-feedback-entry-close" @click="onClose">
+      <img
+        class="user-feedback-entry-close-img"
+        src="https://cdn.ddjf.com/static/images/customer-center/close-filled.png"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue'
+import { useDragBox } from '../../shared/composables/useDragBox'
+import { useSafeArea } from '../../shared/composables'
+
+const props = withDefaults(
+  defineProps<{
+    hasStorage?: boolean
+    withNavbar?: boolean
+  }>(),
+  {
+    hasStorage: false,
+    withNavbar: false,
+  }
+)
+
+// 点击关闭
+function onClose() {
+  console.log('close')
+  emits('close')
+}
+
+// 点击跳转
+function onJump() {
+  emits('jump')
+}
+
+const safeArea = useSafeArea()
+/** 浮动按钮拖拽功能 */
+const { dragData, initDragData, onDragStart, onDragMove, onDragEnd } = useDragBox()
+const dragStyle = computed(() => {
+  return `left:${dragData.left}px; top:${dragData.top}px; width:${dragData.width}px; height:${dragData.height}px;`
+})
+
+onMounted(async () => {
+  // 初始化拖拽元素
+  initDragData({
+    width: 40,
+    height: 40,
+    left: 324,
+    top: props.withNavbar ? 620 - safeArea.nav - safeArea.status : 620,
+  })
+})
+
+// 父组件事件
+const emits = defineEmits(['close', 'jump'])
+</script>
+
+<style lang="scss">
+.user-feedback-entry {
+  position: fixed;
+  z-index: 10;
+  right: 12px;
+  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  box-shadow: 0px 2px 5px 0px #006ee51a;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 10px;
+  &-icon {
+    width: 13px;
+    height: 13px;
+    margin-bottom: 1px;
+  }
+  &:active {
+    background: rgba(255, 255, 255, 0.7);
+  }
+
+  &.hasStorage {
+    width: 92px;
+    height: 43px;
+    background: transparent;
+    box-shadow: none;
+    .user-feedback-entry-icon {
+      width: 100%;
+      height: 100%;
+    }
+    &:active {
+      background: transparent;
+    }
+
+    .user-feedback-entry-close {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &-img {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+}
+</style>

package/src/user/components/UserHeadCrop.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="user-head-crop">
+    <bt-cropper ref="cropperRef" :imageSrc="params.src" :ratio="1">
+      <div class="user-head-crop-btns">
+        <div class="cbtn" @click="onCancel">取消</div>
+        <div class="cbtn comfirmBtn" @click="onConfirm">确定</div>
+      </div>
+    </bt-cropper>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Taro, { useRouter } from '@tarojs/taro'
+import { ref } from 'vue'
+import btCropper from '../../components/bt-cropper/index.vue'
+
+const { params } = useRouter()
+const cropperRef = ref()
+
+// 取消
+function onCancel() {
+  Taro.navigateBack({
+    delta: 1,
+  })
+}
+
+// 确认裁剪
+async function onConfirm() {
+  const [err, res] = await cropperRef.value.crop()
+  if (err) {
+    Taro.showModal({
+      title: '温馨提示',
+      content: err.message,
+      confirmColor: '#017fff',
+    })
+  } else {
+    Taro.eventCenter.trigger('USER-HEAD-CROP-OK', res.tempFilePath)
+    onCancel()
+  }
+}
+</script>
+
+<style lang="scss">
+.user-head-crop {
+  height: 100vh;
+  &-btns {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 50px;
+    padding: 0 20px;
+    box-sizing: border-box;
+    line-height: 50px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .cbtn {
+    color: #fff;
+  }
+  .comfirmBtn {
+    color: var(--app-primary-color, #017fff);
+  }
+}
+</style>