|
@ -1,19 +1,29 @@ |
|
|
<template> |
|
|
<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> |
|
|
</view> |
|
|
<image :src="imageUrl" mode=""></image> |
|
|
|
|
|
<view class="long-press-hint">长按查看更多</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
</movable-view> |
|
|
|
|
|
</movable-area> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
@ -34,10 +44,7 @@ export default { |
|
|
autoFetch: { |
|
|
autoFetch: { |
|
|
type: Boolean, |
|
|
type: Boolean, |
|
|
default: true |
|
|
default: true |
|
|
}, |
|
|
|
|
|
bottom : { |
|
|
|
|
|
default : '33vh', |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
@ -45,10 +52,14 @@ export default { |
|
|
innerHasNewMessage: false, |
|
|
innerHasNewMessage: false, |
|
|
innerMessageCount: 0, |
|
|
innerMessageCount: 0, |
|
|
isInitialized: false, |
|
|
isInitialized: false, |
|
|
timer: null // 定时器ID |
|
|
|
|
|
|
|
|
timer: null, // 定时器ID |
|
|
|
|
|
x: 0, // 拖拽位置x |
|
|
|
|
|
y: 0 // 拖拽位置y |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
|
|
|
// 初始化拖拽位置 |
|
|
|
|
|
this.initDragPosition() |
|
|
this.getQuickOrderInfo() |
|
|
this.getQuickOrderInfo() |
|
|
// 开启定时器,每30秒更新一次数据 |
|
|
// 开启定时器,每30秒更新一次数据 |
|
|
this.startTimer() |
|
|
this.startTimer() |
|
@ -61,6 +72,29 @@ export default { |
|
|
uni.$off('getQuickOrderInfo', this.getQuickOrderInfo) |
|
|
uni.$off('getQuickOrderInfo', this.getQuickOrderInfo) |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
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() { |
|
|
async handleClick() { |
|
|
// 发出点击事件,便于父组件监听 |
|
|
// 发出点击事件,便于父组件监听 |
|
@ -208,16 +242,32 @@ export default { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
<style scoped lang="scss"> |
|
|
.quick-order-container { |
|
|
|
|
|
|
|
|
.movable-area { |
|
|
|
|
|
height: 100vh; |
|
|
|
|
|
width: 750rpx; |
|
|
|
|
|
top: 0; |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
right: 30rpx; |
|
|
|
|
|
bottom: 30vh; |
|
|
|
|
|
|
|
|
pointer-events: none; // 此处要加,鼠标事件可以渗透 |
|
|
z-index: 99; |
|
|
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 { |
|
|
.new-message { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|