book-hi/components/withdrawal-confirm.vue

<template>
  <floating-drag
    :visible="visible"
    :initialPosition="initialPosition"
    :width="120"
    :height="120"
    @click="handleClick"
    @position-change="onPositionChange"
  >
    <view class="confirm-btn">
      <text>提现</text>
      <text>确认</text>
    </view>
  </floating-drag>
</template>

<script>
import FloatingDrag from './floating-drag.vue';

export default {
  name: 'WithdrawalConfirm',
  components: {
    FloatingDrag
  },
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: true
    },
    // 初始位置
    initialPosition: {
      type: Object,
      default: () => ({
        left: 'auto',
        right: 0,
        bottom: '20%'
      })
    }
  },
  methods: {
    // 处理点击事件
    handleClick() {
      this.$emit('click');
    },
    
    // 处理位置变更事件
    onPositionChange(position) {
      this.$emit('position-change', position);
    }
  }
};
</script>

<style lang="scss" scoped>
.confirm-btn {
  width: 100%;
  height: 100%;
  background-color: #4cd964;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 4rpx solid #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);

  text {
    color: #ffffff;
    font-size: 34rpx;
    text-align: center;
    font-weight: 500;
    padding: 0 10rpx;
    line-height: 1.2;
  }
}
</style>