jy-docs/jydocs-mobile/src/components/RechargeHave.vue

<template>
    <van-popup v-model="show" round  position="bottom" class="rechargehave-popup">
        <div class="rechargehave_top">
            <div class="rechargehave_title">
                <div class="thumbnail">
                    <img src="../assets/images/banner.png" class="thumbnail_img" alt="">
                </div>
                <div class="rechargehave_t_right">
                    <div class="t_right_name">优化招投标市场营商环境与国企采购</div>
                    <div class="t_right_active">
                        <span>500剑鱼币</span>
                        <span>共18页</span>
                        <span>123k</span>
                    </div>
                </div>
            </div>
            <div class="div_close">
                <img src="../assets/icon/close.png" class="rechargehave_close" @click="closePopup()" />
            </div>
        </div>
        <div class="rechargehave_pay_content">
            <div class="pay_title">
                支付方式
            </div>
            <div class="jianyu_pay">
                <div class="jy_pay_left">
                    <span class="jy_money">剑鱼币</span>
                    <span class="jy_tip">（剩余2020剑鱼币）</span>
                </div>
                <div class="jy_pay_icon">
                    <img src="../assets/icon/checked.png" class="icon_right_option" />
                </div>
            </div>
        </div>
        <div class="j-footer rechargehave_footer">
            <div class="apply_detail">
                <div class="det_left">
                支付积分：
                </div>
                <div class="det_right">
                <span class="det_money">500</span>
                <span>剑鱼币</span>
                </div>
            </div>
            <div class="readly">
                <van-checkbox v-model="checked" checked-color="#2ABED1" >我已阅读，理解并接受<a href="javascript:;" class="clause" @click="clause()">《剑鱼伙伴服务条款》</a></van-checkbox>
            </div>
            <div class="apply_footer">
                <button class="j-button-cancel btn_active">取消</button>
                <button class="j-button-sure btn_active" :disabled="!this.checked" @click="exchange()">去充值</button>
            </div>
        </div>
    </van-popup>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Icon, Popup, Checkbox } from 'vant'

// @ is an alias to /src
  @Component({
    name: 'Search',
    components: {
      [Popup.name]: Popup,
      [Checkbox.name]: Checkbox,
      [Icon.name]: Icon
    },
    created () {
      console.log('111')
    }
  })
export default class extends Vue {
    show = true
    checked = false
    closePopup () {
      this.show = false
    }
}
</script>

<style lang="scss">
.rechargehave-popup{
    box-sizing: border-box;
    padding: 0 16px;
    width: 100%;
    // height: 256px;
    .rechargehave_top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100px;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
        .rechargehave_title{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .thumbnail{
                width: 48px;
                height: 60px;
                .thumbnail_img{
                    width: 100%;
                    height: 100%;
                }
            }
            .rechargehave_t_right{
                margin-left: 8px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 250px;
                height: 60px;
                .t_right_name{
                    color: #171826;
                    font-size: 15px;
                    line-height: 22px;
                }
                .t_right_active{
                    color: #5F5E64;
                    font-size: 14px;
                    line-height: 20px;
                    span{
                        margin-right: 8px;
                    }
                }
            }
        }
        .div_close{
            display: flex;
            align-items: flex-start;
            justify-content: center;
            height: 100%;
            .rechargehave_close{
                margin-top:24px;
                display: flex;
                width: 20px;
                height: 20px;
            }
        }
    }
    .rechargehave_pay_content{
        overflow: hidden;
        width: 100%;
        height: 100px;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
        .pay_title{
            margin-top: 16px;
            width: 100%;
            height: 24px;
            color: #171826;
            font-size: 16px;
            line-height: 24px;
        }
        .jianyu_pay{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 24px;
            width: 100%;
            height: 20px;
            color: #171826;
            font-size: 14px;
            line-height: 20px;
            .jy_pay_left{
                .jy_tip{
                    color: #2abed1;
                }
            }
            .jy_pay_icon{
                width: 24px;
                height: 24px;
                .icon_right_option{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .rechargehave_footer{
      height: 148px;
      background: #ffffff;
      .apply_detail{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 38px;
        .det_left{
          color: #9B9CA3;
          font-family: PingFang SC;
          font-weight: medium;
          font-size: 12px;
          line-height: 18px;
        }
        .det_right{
          display: flex;
          align-items: center;
          color: #2ABED1;
          font-weight: medium;
          font-size: 14px;
          line-height: 30px;
          .det_money{
            display: flex;
            margin-right: 4px;
            font-size: 20px;
          }
        }
      }
      .apply_footer {
      width: 100%;
        height: 56px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn_active{
            width: 165px;
            height: 40px;
        }
        .j-button-cancel{
            border-radius: 4px;
            background: #EDEFF2;
            color: #5F5E64;
            font-size: 16px;
            line-height: 24px;
        }
        .j-button-sure{
            border-radius: 4px;
            background: #2ABED1;
            color: #F7F9FA;
            font-size: 16px;
            line-height: 24px;
        }
    }
    .readly{
      display:flex;
      align-items:center;
      min-height:32px;
      font-size: 12px;
      color: #5F5E64;
        .clause{
          color:#2ABED1;
        }
        .van-checkbox__icon{
          font-size:18px;
        }
      }
    }
}
</style>