@uxda/appkit 4.3.6 → 4.3.8

package/src/user/components/UserFeedbackEntry.vue

@@ -1,175 +1,175 @@
-<template>
-  <div :style="dragStyle" @touchstart="onDragStart" @touchmove="onDragMoveHandler" @touchend="onDragEndHandler"
-    class="user-feedback-entry" v-track-click="'反馈入口-点击'" @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" v-track-click="'反馈入口-点击'" @click="onJump" mode="aspectFit"
-      src="https://cdn.ddjf.com/static/images/customer-center/feedback-icon.png" />
-    <div class="user-feedback-entry-close" v-track-click="'反馈入口-关闭'" @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, { getSystemInfoSync } 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 = 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>
+<template>
+  <div :style="dragStyle" @touchstart="onDragStart" @touchmove="onDragMoveHandler" @touchend="onDragEndHandler"
+    class="user-feedback-entry" v-track-click="'反馈入口-点击'" @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" v-track-click="'反馈入口-点击'" @click="onJump" mode="aspectFit"
+      src="https://cdn.ddjf.com/static/images/customer-center/feedback-icon.png" />
+    <div class="user-feedback-entry-close" v-track-click="'反馈入口-关闭'" @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, { getSystemInfoSync } 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 = 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

@@ -1,65 +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" v-track-click="'头像裁剪-取消'" @click="onCancel">取消</div>
-        <div class="cbtn comfirmBtn" v-track-click="'头像裁剪-确定'" @click="onConfirm">确定</div>
-      </div>
-    </bt-cropper>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import Taro, { useRouter, showModal } 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) {
-    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>
+<template>
+  <div class="user-head-crop">
+    <bt-cropper ref="cropperRef" :imageSrc="params.src" :ratio="1">
+      <div class="user-head-crop-btns">
+        <div class="cbtn" v-track-click="'头像裁剪-取消'" @click="onCancel">取消</div>
+        <div class="cbtn comfirmBtn" v-track-click="'头像裁剪-确定'" @click="onConfirm">确定</div>
+      </div>
+    </bt-cropper>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Taro, { useRouter, showModal } 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) {
+    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>