@uxda/appkit 4.0.0 → 4.0.2

package/src/user/components/UserEntry.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="user-entry">
+    <div class="user-entry-head">
+      <img
+        class="user-entry-head-img"
+        @click="toUser"
+        mode="aspectFit"
+        v-if="avatar"
+        :src="avatar"
+        alt=""
+      />
+      <img
+        class="user-entry-head-img"
+        mode="aspectFit"
+        @click="toUser1"
+        v-else
+        src="https://cdn.ddjf.com/static/images/wx-yunservice/account-head.png"
+        alt=""
+      />
+    </div>
+    <div class="user-entry-bd">
+      <div v-if="!mobile" class="user-entry-bd-bigtxt" @click="toLogin">
+        请登录
+        <img
+          class="user-entry-bd-bigtxt-icon"
+          mode="aspectFit"
+          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0MCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDQwLjM1MTZINDBWMC4zNTE1NjJIMFY0MC4zNTE2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNCA4LjM1MTU2TDI2IDIwLjM1MTZMMTQgMzIuMzUxNiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4wMSIvPgo8cGF0aCBkPSJNMTQgOC4zNTE1NkwyNiAyMC4zNTE2TDE0IDMyLjM1MTYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="
+          alt=""
+        />
+      </div>
+      <template v-else>
+        <div @click="toUser" class="user-entry-bd-txt">
+          {{ name }}
+          <img
+            style="width: 14px; height: 14px; margin-left: 2px"
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjA4MzUgN0wxOC4wODM1IDE0TDExLjA4MzUgMjEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="
+            alt=""
+          />
+        </div>
+        <div @click="toUser" class="user-entry-bd-smalltxt">{{ encodePhone(mobile) }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useEncode } from '../../shared/composables/useEncode'
+
+const props = withDefaults(
+  defineProps<{
+    avatar?: string
+    mobile?: string
+    name?: string
+  }>(),
+  {
+    avatar: '',
+    mobile: '',
+    name: '',
+  }
+)
+
+const { encodePhone } = useEncode()
+
+// 登录后，点击前往个人资料页
+function toUser() {
+  emits('jump')
+}
+
+function toUser1() {
+  props.mobile && toUser()
+}
+
+// 未登录时，点击前往登录
+function toLogin() {
+  emits('login')
+}
+
+// 父组件事件
+const emits = defineEmits(['jump', 'login'])
+</script>
+
+<style lang="scss">
+.user-entry {
+  position: absolute;
+  left: 0;
+  top: 130px;
+  transform: translateY(-50%);
+  display: flex;
+  padding: 0 22px;
+  align-items: center;
+  width: 100%;
+  &-head {
+    position: relative;
+    width: 62px;
+    height: 62px;
+    margin-right: 8px;
+    &-img {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border-radius: 50%;
+      border: 1.5px solid #fff;
+    }
+    &-icon {
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      bottom: 2px;
+      left: 48px;
+      background: url('https://cdn.ddjf.com/static/images/wx-yunservice/edit-icon.png') center;
+      background-size: cover;
+    }
+  }
+  &-bd {
+    color: #fff;
+    &-bigtxt {
+      display: flex;
+      align-items: center;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 28px;
+      margin-left: 10px;
+      &-icon {
+        width: 20px;
+      }
+    }
+    &-txt {
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 25px;
+      margin-bottom: 5px;
+      display: flex;
+      align-items: center;
+    }
+    &-smalltxt {
+      margin-top: 0;
+      font-size: 15px;
+      line-height: 21px;
+    }
+  }
+}
+</style>

package/src/user/components/UserFeedback.vue

@@ -0,0 +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>