building-materials-shop-uniapp-241014/components/QuickOrderEntry.vue

<template>
    <movable-area class="movable-area">
        <movable-view 
            class="movable-view" 
            :x="x" 
            :y="y" 
            direction="all"
            @click="handleClick"
            :damping="999999999"
            @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>
        </movable-view>
    </movable-area>
</template>

<script>
export default {
    name: 'QuickOrderEntry',
    props: {
        // 图标路径
        imageUrl: {
            type: String,
            default: '/static/image/home/7.png'
        },
        // 点击跳转的页面
        targetUrl: {
            type: String,
            default: '/pages_order/order/fastCreateOrder'
        },
        // 是否自动获取快捷下单信息
        autoFetch: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            orderInfo: null,
            innerHasNewMessage: false,
            innerMessageCount: 0,
            isInitialized: false,
            timer: null, // 定时器ID
            x: 0, // 拖拽位置x
            y: 0 // 拖拽位置y
        }
    },
	mounted() {
		// 初始化拖拽位置
		// this.initDragPosition()
		this.getQuickOrderInfo()
        // 开启定时器，每30秒更新一次数据
        this.startTimer()
		
		uni.$on('getQuickOrderInfo', this.getQuickOrderInfo)
	},
    beforeDestroy() {
        // 组件销毁前清除定时器
        this.clearTimer()
		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() {
            // 发出点击事件，便于父组件监听
            this.$emit('click');

            await this.getQuickOrderInfo()
            
            // 如果有订单信息，提供订单列表
            if (Array.isArray(this.orderInfo) && this.orderInfo.length > 0) {
                this.$emit('order-info', this.orderInfo);
				this.navigateTo('/pages_order/order/firmOrder');
				return
            }
			
            // 如果有目标页面，则跳转
            if (this.targetUrl) {
                this.navigateTo(this.targetUrl);
            }
        },
        
        // 处理长按事件 - 跳转到快捷订单列表
        handleLongPress() {
            // 震动反馈
            uni.vibrateShort();
            
            // 显示操作菜单
            uni.showActionSheet({
                itemList: ['快捷下单', '我的快捷订单'],
                success: (res) => {
                    if (res.tapIndex === 0) {
                        // 跳转到快捷下单页面
                        this.navigateTo(this.targetUrl);
                    } else if (res.tapIndex === 1) {
                        // 跳转到快捷订单列表
                        this.navigateTo('/pages_order/order/fastOrderList');
                    }
                }
            });
        },
        
        // 直接跳转到快捷订单列表
        goToOrderList() {
            this.navigateTo('/pages_order/order/fastOrderList');
        },
        
        // 获取快捷下单的信息
        getQuickOrderInfo() {
			
			if(!uni.getStorageSync('token')){
				return
			}
			
            // 调用接口获取快捷下单信息
            return this.$api('getOrderInfo', {}, res => {
                if (res.code === 200 && res.result) {
                    // 处理返回的订单列表
                    const orderList = Array.isArray(res.result) ? res.result : [res.result];
                    
                    if (orderList.length > 0) {
                        // 保存订单列表
                        this.orderInfo = orderList;
                        // 设置消息数量为订单列表长度
                        this.innerHasNewMessage = true;
                        this.innerMessageCount = orderList.length;
                        
                        // 通知父组件获取到了数据
                        this.$emit('order-loaded', this.orderInfo);
                    } else {
                        this.innerHasNewMessage = false;
                        this.innerMessageCount = 0;
                        this.orderInfo = [];
                    }
                } else {
                    this.innerHasNewMessage = false;
                    this.innerMessageCount = 0;
                    this.orderInfo = [];
                }
                
                this.isInitialized = true;
            }, err => {
                console.error('获取快捷下单信息失败', err);
                this.innerHasNewMessage = false;
                this.innerMessageCount = 0;
                this.orderInfo = [];
                this.isInitialized = true;
            });
        },
        
        // 导航到指定页面
        navigateTo(url) {
            // 如果有订单列表，则优先使用第一个订单的ID
            if (Array.isArray(this.orderInfo) && this.orderInfo.length > 0 && this.orderInfo[0].id && url.indexOf('?') === -1) {
                url += `?orderId=${this.orderInfo[0].id}`;
            }
            
            this.$utils.navigateTo(url);
        },
        
        // 刷新快捷下单信息
        refresh() {
            this.getQuickOrderInfo();
            return this; // 链式调用
        },
        
        // 清除消息提示
        clearMessage() {
            this.innerHasNewMessage = false;
            this.innerMessageCount = 0;
            return this; // 链式调用
        },
        
        // 检查是否有新消息
        hasNewMessage() {
            return this.innerHasNewMessage;
        },
        
        // 获取消息数量
        getMessageCount() {
            return this.innerMessageCount;
        },
        
        // 开启定时器
        startTimer() {
            // 清除之前的定时器（如果存在）
            this.clearTimer()
            
            // 设置新的定时器，每30秒执行一次
            this.timer = setInterval(() => {
                // 只有在有token的情况下才更新数据
                if (uni.getStorageSync('token')) {
                    this.getQuickOrderInfo()
                }
            }, 30000)
        },
        
        // 清除定时器
        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
    },
}
</script>

<style scoped lang="scss">
.movable-area {
    height: 100vh;
    width: 750rpx;
    top: 0;
    position: fixed;
    pointer-events: none; // 此处要加，鼠标事件可以渗透
    z-index: 99;
    
    .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;
        top: 50rpx;
        right: 100%;
        white-space: nowrap;
        background-color: #DC2828;
        border-radius: 20rpx;
        font-size: 25rpx;
        color: #ffffff;
        padding: 5rpx 15rpx;
        margin-bottom: 10rpx;
        box-shadow: 0 5rpx 10rpx rgba(220, 40, 40, 0.3);
        animation: pulse 2s infinite;
    }
    
    .quick-order {
        position: relative;
        width: 230rpx;
        height: 160rpx;
        
        image {
            width: 100%;
            height: 100%;
        }
        
        .number-order {
            background-color: #DC2828;
            position: absolute;
            font-size: 30rpx;
            height: 40rpx;
            width: 40rpx;
            text-align: center;
            border-radius: 20rpx;
            color: #ffffff;
            top: 10rpx;
            left: 25rpx;
        }
        
        .long-press-hint {
            position: absolute;
            bottom: -30rpx;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            font-size: 20rpx;
            padding: 4rpx 12rpx;
            border-radius: 12rpx;
            white-space: nowrap;
            opacity: 0.8;
        }
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
</style>