freight-ts-dy-web/src/components/OpOnline/index.vue

<template>
  <view
    @click="handleOnline"
    style="position: fixed; bottom: 100px; z-index: 999; right: 20px"
  >
    <image
      :src="`${url}/static/img/service.png`"
      style="width: 100rpx; height: 100rpx"
    />
    <!-- <up-icon name="chat" color="#fff" size="28">
      
      </up-icon
  > -->
  </view>
  <!-- <view class="content">
    <movable-area class="movableArea">
      <movable-view
        class="movableView"
        :position="4"
        :x="x"
        :y="y"
        :direction="'none'"
        :damping="10"
        @change="onChange"
        @tap="onTap"
        @touchend="onTouchend"
      >
        <up-icon name="chat" color="#fff" size="28"></up-icon>
      </movable-view>
    </movable-area>
  </view> -->
</template>
<script setup lang="ts">
import { url } from "@/utils/data";
import { useMemberStore } from "@/store/index";
import pinia from "@/store";
const store = useMemberStore(pinia);
const x = ref(300);
const y = ref(500);
const x1 = ref(0);
const x2 = ref(0);
const y1 = ref(0);
const y2 = ref(0);
const move = reactive({
  x: 0,
  y: 0,
});

const handleOnline = () => {
  console.log(store)
  if (!store.profile.token) {
    uni.navigateTo({
      url: "/pagesLogin/index", // 要跳转到的页面路径
    });
    return;
  }
  //跳转到对应的webview页面并传入url和其他参数
  uni.navigateTo({
    url: "/pagesOnline/index",
  });
};

function onChange(e: any) {
  if (e.detail.source === "touch") {
    move.x = e.detail.x;
    move.y = e.detail.y;
  }
}
function onTap(e: any) {
  console.log("Tap event");
  // 在这里处理单击事件的逻辑
  // 例如打开链接、执行动作等
}
function onTouchend() {
  x.value = move.x;
  y.value = move.y;
  setTimeout(() => {
    if (move.x < x2.value / 2) x.value = x1.value;
    else x.value = x2.value;
    console.log("yuan" + x.value, "y", y.value);
  }, 100);
}

onMounted(() => {
  uni.getSystemInfo({
    success: (res: any) => {
      x1.value = 0;
      x2.value = parseInt(res.windowWidth) - 50;
      y1.value = 0;
      y2.value = parseInt(res.windowHeight) - 20;
      setTimeout(() => {
        x.value = x2.value;
        y.value = parseInt((y2.value * 0.8).toString());
        move.x = x.value;
        move.y = y.value;
      }, 0);
    },
  });
});
</script>
<style scoped>
.content {
  position: relative;
  height: 100%;
}

.movableArea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

.movableView {
  pointer-events: auto;
  width: 60rpx;
  height: 60rpx;
  padding: 10rpx;
  border-radius: 100%;
  border: 2px solid #608CF1;
  background-color: #608CF1;
}
</style>