caimei-applets-store/components/views/cm-drag/cm-drag.vue

<template>
    <view
        id="_drag_button"
        class="cart-icon"
        :style="'left: ' + left + 'px; top:' + top + 'px;'"
        @touchstart="touchstart"
        @touchmove.stop.prevent="touchmove"
        @touchend="touchend"
        @click.stop.prevent="click"
        :class="{ transition: isDock && !isMove }"
    >
        <text v-if="cartNum > 0" class="badge">{{ cartNum >= 100 ? '99+' : cartNum }}</text>
        <text class="iconfont icon-gouwuche-mianxing"></text>
    </view>
</template>

<script>
export default {
    name: 'drag-button',
    props: {
        cartNum: {
            type: Number,
            default: 0
        },
        isDock: {
            type: Boolean,
            default: false
        },
        existTabBar: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            StaticUrl: this.$Static,
            top: 300,
            left: 150,
            width: 0,
            height: 0,
            offsetWidth: 0,
            offsetHeight: 0,
            windowWidth: 0,
            windowHeight: 0,
            isMove: true,
            edge: 10
        }
    },
    created() {
        console.log(this.cartNum)
    },
    mounted() {
        const sys = uni.getSystemInfoSync()
        this.windowWidth = sys.windowWidth
        this.windowHeight = sys.windowHeight
        // #ifdef APP-PLUS
        this.existTabBar && (this.windowHeight -= 50)
        // #endif
        if (sys.windowTop) {
            this.windowHeight += sys.windowTop
        }
        // console.log(sys)
        const query = uni.createSelectorQuery().in(this)
        query
            .select('#_drag_button')
            .boundingClientRect(data => {
                this.width = data.width
                this.height = data.height
                this.offsetWidth = data.width / 2
                this.offsetHeight = data.height / 2
                this.left = this.windowWidth - this.width - this.edge - 5
                this.top = this.windowHeight - this.height - this.edge - 150
            })
            .exec()
    },
    methods: {
        click() {
            this.$emit('btnClick')
        },
        touchstart(e) {
            this.$emit('btnTouchstart')
        },
        touchmove(e) {
            // 单指触摸
            if (e.touches.length !== 1) {
                return false
            }
            this.isMove = true
            this.left = e.touches[0].clientX - this.offsetWidth
            let clientY = e.touches[0].clientY - this.offsetHeight
            // #ifdef H5
            clientY += this.height
            // #endif
            let edgeBottom = this.windowHeight - this.height - this.edge
            // 上下触及边界
            if (clientY < this.edge) {
                this.top = this.edge
            } else if (clientY > edgeBottom) {
                this.top = edgeBottom
            } else {
                this.top = clientY
            }
        },
        touchend(e) {
            if (this.isDock) {
                let edgeRigth = this.windowWidth - this.width - this.edge

                if (this.left < this.windowWidth / 2 - this.offsetWidth) {
                    this.left = this.edge
                } else {
                    this.left = edgeRigth
                }
            }

            this.isMove = false
            this.$emit('btnTouchend')
        }
    }
}
</script>

<style lang="scss" scoped>
.cart-icon {
    width: 92rpx;
    height: 92rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    right: 24rpx;
    bottom: 28%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    line-height: 92rpx;
    text-align: center;
    .icon-gouwuche-mianxing {
        font-size: 56rpx;
        color: #ff457b;
    }
    .badge {
        @extend .cm-flex-center;
        font-size: 24rpx;
        position: absolute;
        top: -10rpx;
        right: 0;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background-color: #ff457b;
        color: #fff;
    }
    &.transition {
        transition: left 0.3s ease, top 0.3s ease;
    }
}
</style>