Browse Source

feat(QuickOrderEntry): 添加拖拽功能并重构悬浮按钮布局

重构悬浮按钮为可拖拽组件,支持保存位置到本地存储
移除固定位置的bottom属性,改为通过movable-area实现自由拖动
master
前端-胡立永 3 days ago
parent
commit
2a7b68b688
1 changed files with 75 additions and 25 deletions
  1. +75
    -25
      components/QuickOrderEntry.vue

+ 75
- 25
components/QuickOrderEntry.vue View File

@ -1,19 +1,29 @@
<template>
<view class="quick-order-container"
:style="{bottom}"
@click="handleClick"
@longpress="handleLongPress">
<view class="new-message" v-if="innerHasNewMessage" @click.stop="goToOrderList">
你有新的快捷下单信息
</view>
<view class="quick-order">
<view class="number-order" v-if="innerMessageCount > 0">
{{ innerMessageCount }}
<movable-area class="movable-area">
<movable-view
class="movable-view"
:x="x"
:y="y"
direction="all"
@click="handleClick"
:animation="false"
:damping="200"
@change="handleChange"
@longpress="handleLongPress">
<view class="quick-order-container">
<view class="new-message" v-if="innerHasNewMessage" @click.stop="goToOrderList">
你有新的快捷下单信息
</view>
<view class="quick-order">
<view class="number-order" v-if="innerMessageCount > 0">
{{ innerMessageCount }}
</view>
<image :src="imageUrl" mode=""></image>
<view class="long-press-hint">长按查看更多</view>
</view>
</view>
<image :src="imageUrl" mode=""></image>
<view class="long-press-hint">长按查看更多</view>
</view>
</view>
</movable-view>
</movable-area>
</template>
<script>
@ -34,10 +44,7 @@ export default {
autoFetch: {
type: Boolean,
default: true
},
bottom : {
default : '33vh',
}
}
},
data() {
return {
@ -45,10 +52,14 @@ export default {
innerHasNewMessage: false,
innerMessageCount: 0,
isInitialized: false,
timer: null // ID
timer: null, // ID
x: 0, // x
y: 0 // y
}
},
mounted() {
//
this.initDragPosition()
this.getQuickOrderInfo()
// 30
this.startTimer()
@ -61,6 +72,29 @@ export default {
uni.$off('getQuickOrderInfo', this.getQuickOrderInfo)
},
methods: {
//
initDragPosition() {
//
const savedPosition = uni.getStorageSync('quickOrderPosition')
if (savedPosition && savedPosition.x !== undefined && savedPosition.y !== undefined) {
// 使
this.x = savedPosition.x
this.y = savedPosition.y
}
},
//
handleChange(e) {
const { x, y, source } = e.detail
//
if (source === 'touch') {
//
uni.setStorageSync('quickOrderPosition', { x, y })
}
},
//
async handleClick() {
// 便
@ -208,16 +242,32 @@ export default {
</script>
<style scoped lang="scss">
.quick-order-container {
.movable-area {
height: 100vh;
width: 750rpx;
top: 0;
position: fixed;
right: 30rpx;
bottom: 30vh;
pointer-events: none; //
z-index: 99;
transition: transform 0.3s;
&:active {
transform: scale(0.95);
.movable-view {
width: 230rpx;
height: 160rpx;
pointer-events: auto; //
transition: transform 0.3s;
left: 600rpx;
top: 50%;
&:active {
transform: scale(0.95);
}
}
}
.quick-order-container {
width: 100%;
height: 100%;
position: relative;
.new-message {
position: absolute;


Loading…
Cancel
Save