@uxda/appkit 4.0.0 → 4.0.2

package/src/user/components/UserFeedbackEntry.vue

@@ -0,0 +1,192 @@
+<template>
+  <div
+    :style="dragStyle"
+    @touchstart="onDragStart"
+    @touchmove="onDragMoveHandler"
+    @touchend="onDragEndHandler"
+    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
+    :style="dragStyle1"
+    @touchstart="onDragStart1"
+    @touchmove="onDragMoveHandler1"
+    @touchend="onDragEndHandler1"
+    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'
+import Taro from '@tarojs/taro'
+
+const props = withDefaults(
+  defineProps<{
+    hasStorage?: boolean
+    withTabbar?: boolean
+    withNavbar?: boolean
+  }>(),
+  {
+    hasStorage: false,
+    withTabbar: false,
+    withNavbar: false,
+  }
+)
+
+// 点击关闭
+function onClose() {
+  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;`
+})
+function onDragMoveHandler(e: TouchEvent) {
+  emits('drag', true)
+  onDragMove(e)
+}
+function onDragEndHandler() {
+  emits('drag', false)
+  onDragEnd()
+}
+
+const {
+  dragData: dragData1,
+  initDragData: initDragData1,
+  onDragStart: onDragStart1,
+  onDragMove: onDragMove1,
+  onDragEnd: onDragEnd1,
+} = useDragBox()
+const dragStyle1 = computed(() => {
+  return `left:${dragData1.left}px; top:${dragData1.top}px; width:${dragData1.width}px; height:${dragData1.height}px;`
+})
+function onDragMoveHandler1(e: TouchEvent) {
+  emits('drag', true)
+  onDragMove1(e)
+}
+function onDragEndHandler1() {
+  emits('drag', false)
+  onDragEnd1()
+}
+
+onMounted(async () => {
+  const systemInfo = Taro.getSystemInfoSync()
+  const safeHeight = (systemInfo.safeArea || {}).height || systemInfo.screenHeight
+  const height = safeHeight > 620 ? 620 : safeHeight - 80
+
+  const navbarHeight = safeArea.nav + safeArea.status
+  // 初始化拖拽元素
+  initDragData({
+    width: 40,
+    height: 40,
+    left: 324,
+    top: props.withNavbar ? height - navbarHeight : height,
+    limitVertical: [
+      !props.withNavbar ? navbarHeight : 0,
+      props.withTabbar ? safeArea.menuRect.bottom : 0,
+    ],
+  })
+  initDragData1({
+    width: 92,
+    height: 43,
+    left: 272,
+    top: props.withNavbar ? height - navbarHeight : height,
+    limitVertical: [
+      !props.withNavbar ? navbarHeight : 0,
+      props.withTabbar ? safeArea.menuRect.bottom : 0,
+    ],
+  })
+})
+
+// 父组件事件
+const emits = defineEmits(['close', 'jump', 'drag'])
+</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>