<template>
  <div class="uc_recharge_container">
    <!--    头部卡片-->
    <div class="mine padding">
      <div class="flex justify-between">
        <view>
          <text class="text-gray">当前剩余时长（分钟）</text>
        </view>
        <view>
          <text class="cuIcon-calendar"></text>
          <text class="under_line">我的订单</text>
        </view>
      </div>
      <view>
        <text class="text-bold mine_min">30</text>
      </view>
    </div>

    <!--    标题-->
    <div class="title flex padding align-center">
      <div class="line margin-right"></div>
      <text>会员升级</text>
    </div>

    <!--    黄金会员-->
    <div class="gold vip">
      <van-row>
        <van-col span="8" offset="6">
          <div class="card_body">
            <view>
              <text class="mine_min  text-white">200</text>
              <text class="text-white">分钟</text>
            </view>
            <view>
              <text class="text-white text-sm">3个月专注力训练课程</text>
            </view>
            <view>
              <text class="text-white text-sm">分级利润权益</text>
            </view>
          </div>
        </van-col>

        <van-col span="5" offset="4">
          <div class="card_body">

            <view>
              <text class="text-white text-sm">价格</text>
            </view>
            <view>
              <text class="text-white mine_min">199</text>
            </view>
            <img src="https://img.shuimuai.com/web/btn_seedetil_2.png" class="check_detail" alt="">

          </div>
        </van-col>

      </van-row>
    </div>

    <!--    描述-->
    <view class="desc">

      黄金会员权益：<br>
      1）获得核销时间为200分钟，有效期3个自然月（从购买当日时间开始计时）。<br>
      2）获得5张次卡（实体卡），次卡不能自己使用，只能用给其它人使用。获得次卡的用户A可进行1次到店体验，且成为黄金会员的一级分销用户。<br>
      如果次卡用户A进行消费，则黄金会员用户则获得以下对应的分润：<br>
      购买次卡获得20元分润，购买黄金会员卡获得50元分润，购买白金会员获得100元分润，购买钻石会员则获得200元分润，线下购买创客代理获得300元分润，线下购买区域代理获得600元分润，线下购买合伙人，获得2000元分润。<br>
      如果次卡用户A发展其它人B成为水母会员用户，则B作为次卡用户A的一级分销用户，也是黄金会员的二级分销用户，如果B产生消费，则次卡会员A获得一级分润（同上述的黄金会员一级分润）黄金会员可获得如下二级分润：<br>
      B购买次卡获得5元分润，购买黄金会员卡获得15元分润，购买白金会员获得30元分润，购买钻石会员则获得60元分润。线下购买创客代理获得90元分润，线下购买区域代理获得180元分润，线下购买合伙人，获得600元分润。<br>

    </view>


    <!--    购买按钮-->
    <div class="buy_button">
      <button class="cu-btn lg bg-orange text-center margin " @click="open_order_confirm">购买黄金会员</button>
    </div>

    <!--    白金会员-->
    <div class="platina vip">
      <van-row>
        <van-col span="8" offset="6">
          <div class="card_body">
            <view>
              <text class="mine_min  text-white">600</text>
              <text class="text-white">分钟</text>
            </view>
            <view>
              <text class="text-white text-sm">租赁设备</text>
            </view>
            <view>
              <text class="text-white text-sm">更高分级利润权益</text>
            </view>
          </div>
        </van-col>

        <van-col span="5" offset="4">
          <div class="card_body">

            <view>
              <text class="text-white text-sm">价格</text>
            </view>
            <view>
              <text class="text-white mine_min">599</text>
            </view>
            <img src="https://img.shuimuai.com/web/btn_seedetil_2.png" class="check_detail" alt="">

          </div>
        </van-col>

      </van-row>
    </div>

    <!--    钻石会员-->
    <div class="diamond vip">
      <van-row>
        <van-col span="8" offset="6">
          <div class="card_body">
            <view>
              <text class="mine_min  text-white">1000</text>
              <text class="text-white text-sm">分钟</text>
            </view>
            <view>
              <text class="text-white text-sm">租赁设备</text>
            </view>
            <view>
              <text class="text-white text-sm">更高分级利润权益</text>
            </view>
          </div>
        </van-col>

        <van-col span="5" offset="4">
          <div class="card_body">

            <view>
              <text class="text-white text-sm">价格</text>
            </view>
            <view>
              <text class="text-white mine_min">199</text>
            </view>
            <img src="https://img.shuimuai.com/web/btn_seedetil_2.png" class="check_detail" alt="">

          </div>
        </van-col>

      </van-row>
    </div>

    <div class="title flex padding align-center">
      <div class="line margin-right"></div>
      <text>体验磁卡次卡</text>
    </div>
    <!--  体验次卡-->
    <div class="normal vip">
      <van-row>
        <van-col span="8" offset="6">
          <div class="card_body">
            <view>
              <text class="mine_min  text-white">200</text>
              <text class="text-white">分钟</text>
            </view>
            <view>
              <text class="text-white text-sm">3个月专注力训练课程</text>
            </view>
            <view>
              <text class="text-white text-sm">分级利润权益</text>
            </view>
          </div>
        </van-col>

        <van-col span="5" offset="4">
          <div class="card_body">

            <view>
              <text class="text-white text-sm">价格</text>
            </view>
            <view>
              <text class="text-white mine_min">199</text>
            </view>
            <img src="https://img.shuimuai.com/web/btn_seedetil_2.png" class="check_detail" alt="">

          </div>
        </van-col>

      </van-row>
    </div>


    <!--    确认订单 弹窗-->
    <van-popup :show="order_confirm" @close="close_order_confirm" round closeable>
      <div class="order_confirm padding">
        <view>
          <text class="text-sm text-gray">已选商品&emsp;水母星球-钻石会员</text>
          <br>
        </view>
        <view>
          <text class="text-sm text-gray">商品价格&emsp;299元</text>
          <br>

        </view>
        <view>
          <text class="text-sm text-gray">支付方式&emsp;微信支付</text>
          <br>

        </view>
        <view class="order_price_container">
          <text class="text-sm text-gray">实付(元)&emsp;</text>
          <text class="mine_min">299</text>
        </view>
        <button class="cu-btn bg-primary lg text-white recharge_button" @click="success_pay">立即充值</button>
      </div>
    </van-popup>

    <!--    充值失败-->
    <van-popup :show="err_show" @close="close_err_pop" round :close-on-click-overlay="false">
      <div class="err_container flex flex-direction align-center justify-around">
        <view>
          <text class="title">
            充值失败，请再次尝试
          </text>
        </view>
        <img src="https://img.shuimuai.com/web/sign_notimeJfish.png" class="err_img" alt="">
        <div class="button_group flex justify-around">
          <button class="cu-btn bg-gray text-white lg" @click="cancel_recharge">取消支付</button>
          <button class="cu-btn  bg-primary text-white lg" @click="repay">再次支付</button>
        </div>
      </div>
    </van-popup>

    <!--    充值成功-->
    <van-popup :show="success_show" @close="close_success_pop" round :close-on-click-overlay="false">
      <div class="err_container flex flex-direction align-center justify-around ext_container">
        <img src="https://img.shuimuai.com/web/boyya.png" class="boy_logo" alt="">
        <view>
          <text class="title">
            充值成功
          </text>
        </view>
        <view class="sub-title">
          <text class="text-gray">
            黄金会员包含 5张 实体邀请卡,我们将以快递形式发出,请填写收货地址.
          </text>
        </view>
        <div class="button_group flex justify-around">
          <button class="cu-btn bg-gray text-white lg" @click="close_success_pop">以后再填</button>
          <button class="cu-btn  bg-primary text-white lg" @click="to_write_address">填写地址</button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>

var $this
export default {
  name: "uc_recharge_container",
  components: {},
  data() {
    return {
      order: {},
      order_confirm: false,
      err_show: false,
      success_show: true
    }
  },
  methods: {
    //弹出确认订单
    open_order_confirm() {
      $this.order_confirm = true
    },
    //关闭确认订单
    close_order_confirm() {
      $this.order_confirm = false
    },
    //关闭充值失败窗口
    close_err_pop() {
      $this.err_show = false
    },
    //取消充值
    cancel_recharge() {
      $this.close_err_pop()
    },
    // 打开充值成功窗口
    open_success_window() {
      $this.success_show = true
    },
    //关闭充值成功窗口
    close_success_pop() {
      $this.success_show = false
    },
    //再次付款
    repay() {

    },
    // 成功支付
    success_pay() {
      // 支付成功后得回调方法
      //  接收回调方法后弹出支付成功
    },
    //跳转填写地址
    to_write_address(){
      mpvue.navigateTo({
        url:"/pages/user_center/address/list/main"
      })
    }
  }
  ,
  mounted() {
  },
  created() {
    $this = this;
  },
  onLoad() {
  }
}
</script>

<style scoped>
@import "index.css";
</style>
