zhangsiye/mini/components/Recharge/index.vue

<template>
  <view class="recharge">
    <u-popup
      :show="show"
      :mode="mode"
      round="20rpx"
      :close-on-click-overlay="false"
      @close="close"
    >
      <view class="container">
        <view class="static-text main-between cross-center">
          <text>充值金币</text>
          <u-icon name="close-circle" size="52rpx" color="#BEBDBB" @click="close" />
        </view>
        <view class="overage">账户余额：<text>3金币</text></view>

        <view class="recharge-group dir-left-wrap">
          <view
            v-for="(item,index) in recharge"
            :key="index"
            class="recharge-item dir-top-wrap main-center cross-center"
            :class="{active: rechargeActive === index}"
            @click="rechargeActive = index"
          >
            <text class="price">49.99元</text>
            <text class="gold">500+300金币</text>
            <text class="gift">多送350金币</text>
          </view>
        </view>

        <view class="btn">充值</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'Recharge',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'center'
    }
  },
  data() {
    return {
      modal: {
        show: false
      },
      recharge: [1, 2, 3, 4],
      rechargeActive: 1
    }
  },
  computed: {},
  watch: {
    show(val) {
      this.modal.show = val
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="scss" scoped>
    .recharge {
      font-size: 28rpx;
      .container{
        width: 700rpx;
        border: 2rpx solid;
        padding: 30rpx 40rpx;
        .static-text{
          font-size: 38rpx;
          font-weight: 600;
          margin-bottom: 40rpx;
        }
        .overage{
          color: $info-color;
          text{
            color: #FB3651 ;
          }
        }
        .recharge-group{
          margin-top: 30rpx;
          .recharge-item{
            border: 4rpx solid $primary-color;
            width: calc(#{600rpx} / 2);
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 10rpx;
            padding: 40rpx 20rpx;
            transition: .3s;
            &:nth-child(2n){
              margin-right: 0;
            }
            &.active{
              background: #1b1e32;
              border: 4rpx solid #1b1e32;
              .price{
                color: $default-color;
              }
            }
            .price{
              margin-bottom: 40rpx;
              font-size: 38rpx;
            }
            .gold{
              color: $primary-color;
              margin-bottom: 10rpx;
            }
            .gift{
              color: $info-color;
            }
          }
        }
        .btn{
          background: linear-gradient(270deg, #6EEBE8 0%, #FF74B9 100%);
          width: 90%;
          margin: 40rpx auto;
          padding: 20rpx 0;
          text-align: center;
          border-radius: 40rpx;
          color: $default-color;
          letter-spacing: .1rem;
        }
      }
    }
</style>