<template>
  <view class="tips-popup" v-if="show">
    <view class="mask" @click="handleClose"></view>
    <view class="popup-content">
      <view class="popup-header">
        <text class="popup-title">提现规则</text>
        <view class="close-btn" @click="handleClose">
          <image src="/static/images/close.png" mode="aspectFit" class="close-icon"></image>
        </view>
      </view>
      <view class="popup-body">
        <view class="rule-item">
          <text class="rule-text">发起提现申请，后台审核通过，线下进行打款</text>
        </view>
        <view class="rule-item">
          <text class="rule-text">请您确认绑定的支付宝、微信号的准确性。</text>
        </view>
        <view class="rule-item">
          <text class="rule-text">后台将按照您绑定的提现账户进行进行转账。</text>
        </view>
        <view class="rule-item">
          <text class="rule-text">如因提交的信息有误导致的转账失败或转错账户，将由用户自行承担，平台不承担任何责任。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'tips-popup',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('close-popup', false)
    }
  }
}
</script>

<style>
.tips-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.popup-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 600rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  overflow: hidden;
}

.popup-header {
  position: relative;
  height: 112rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.popup-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.close-btn {
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 16rpx;
}

.close-icon {
  width: 32rpx;
  height: 32rpx;
}

.popup-body {
  padding: 32rpx 40rpx 48rpx;
}

.rule-item {
  margin-bottom: 24rpx;
}

.rule-item:last-child {
  margin-bottom: 0;
}

.rule-text {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.6;
}
</style> 