<template>
  <view class="collection_page">
    <view class="pay_title">请选择自动扣款方式</view>
    <view class="pay_type" @click="handleSelectPayType(1)">
      <view class="pay_label">
        <image src="/static/svg/wx_pay.svg" mode="heightFix" />
        <text>微信支付</text>
      </view>
      <uni-icons v-if="selectEd == 1" type="checkbox-filled" size="20" color="#2A7EFB"></uni-icons>
      <uni-icons v-else type="circle" size="20" color="#888"></uni-icons>
    </view>
    <!-- <view class="pay_type" @click="handleSelectPayType(2)">
      <view class="pay_label">
        <image src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KN40MBZ0TV865VWX5SH2K6V1.png" mode="heightFix" />
        <text>微信支付</text>
      </view>
      <uni-icons v-if="selectEd === 2" type="checkbox-filled" size="20" color="#2A7EFB"></uni-icons>
      <uni-icons v-else type="circle" size="20" color="#888"></uni-icons>
    </view> -->
    <hs-footer btnParimaryName="确定" @handleParmaryClick="handleSubmit" />
  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectEd = ref(0)

const handleSubmit = () => {
  uni.showModal({
    title: '提示',
    content: '该功能在当前项目暂未开放，敬请期待',
    confirmColor: '#0082FA',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
const handleSelectPayType = (e: number) => {
  selectEd.value = e
}
</script>

<style lang="scss" scoped>
.collection_page {
  background: linear-gradient(180deg, #d8e7ff 0%, rgba(255, 255, 255, 0) 500rpx);
  background-repeat: no-repeat;
  height: 100vh;
}
.pay_title {
  color: #333;
  font-size: 40rpx;
  font-weight: 500;
  padding: 60rpx 30rpx 30rpx 30rpx;
}

.pay_price {
  font-size: 50rpx;
  text-align: center;
  font-weight: 600;
  color: #df3600;
  text {
    font-size: 30rpx;
  }
}

.pay_type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 10rpx;
  margin: 30rpx 30rpx 0 30rpx;
  padding: 30rpx;
  .pay_label {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    image {
      width: 60rpx;
      height: 60rpx;
    }
    text {
      padding-left: 10rpx;
    }
  }
}

.footer_btn {
  position: fixed;
  bottom: 0;
  z-index: 100;
  background-color: #fff;
  padding: 25rpx 30rpx;
  left: 0;
  right: 0;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
  padding-bottom: calc(25rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(25rpx + env(safe-area-inset-bottom));
}
</style>
