<template>
  <div class="app-content">
    <div class="recharge_box">
      <view class="renew">
        续费<text style="padding-left: 10upx;">{{initData.renew}}</text>/年<text
          class="toBuy"
          @click="goBuy"
        >去购买</text>
      </view>
      <view class="voucher">
        充值<text style="color: #FF3C00;padding-left: 10upx;">{{initData.recharge}}元</text>，免费使用一年
      </view>
      <view
        class="immediately"
        @click="onceRecharge"
      >立即充值</view>
      <view class="use">本次充值仅限在<text style="color: #666;padding: 0 10upx;font-weight: 700;">{{initData.shopName}}</text>使用</view>
      <view class="use use_margin"><text style="color: #666;">{{initData.userNum}}</text> 人已充值</view>
      <view class="user_avator">
        <image :src="`${constant.imgUrl}/recharge/has_recharge.png`"></image>
      </view>
    </div>
  </div>
</template>

<script>
import { rechargeRenew, rechargeRenewPay } from '@/api/recharge'
import wexinPay from "@/utils/pay/wxPay";
export default {
  name: 'recharge-renew',
  data () {
    return {
      initData: {}
    }
  },
  onLoad () {
  },
  methods: {
    init () {
      this._getDet()
    },
    _getDet () {
      rechargeRenew().then(res => {
        console.log(res)
        this.initData = res.data
      }).catch(err => { console.log(err) })
    },
    // 立即充值
    onceRecharge () {
      rechargeRenewPay().then(res => {
        console.log(res)
        wexinPay(res.data, this.getSuccess, this.getError)
      }).catch(err => { console.log(err) })
    },
    getSuccess () {
      uni.navigateTo({
        url: '/admin/recharge/rechargeSuccess'
      })
    },
    getError () {
    },
    // 去购买
    goBuy () {
      uni.navigateTo({
        url: '/pagesClient/official/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-content {
  padding-top: 1px;
  width: 100vw;
  height: 100vh;
  background: url(https://img.huaml.com/recharge/free_renew.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  .recharge_box {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 3px 13px 0px rgba(221, 0, 0, 0.36);
    margin: 60% auto 0;
    height: 617upx;
    width: 640upx;
    border-radius: 20px;
    background: #fff;
    & > .renew {
      margin-top: 70upx;
      text-align: center;
      font-size: 28upx;
      color: #333;
      & > .toBuy {
        padding-left: 10upx;
        color: #3385ff;
        position: relative;
        &::after {
          position: absolute;
          right: -15upx;
          top: 50%;
          content: "";
          transform: translateY(-50%) rotate(225deg);
          width: 10upx;
          height: 10upx;
          border-left: 1px solid #3385ff;
          border-bottom: 1px solid #3385ff;
        }
      }
    }
    & > .voucher {
      font-size: 32upx;
      font-weight: 700;
      margin-top: 70upx;
      text-align: center;
      white-space: pre-wrap;
    }
    & > .immediately {
      width: 520px;
      height: 88px;
      line-height: 88upx;
      background: linear-gradient(0deg, #fe921e 0%, #ffd21f 100%);
      border-radius: 44px;
      margin: 40upx auto 0;
      font-size: 32upx;
      text-align: center;
      color: #fff;
    }
    & > .use {
      color: #999999;
      font-size: 26upx;
      text-align: center;
      margin-top: 20upx;
    }
    & > .use_margin {
      margin-top: 80upx;
    }
    & > .user_avator {
      text-align: center;
      margin-top: 20upx;
      & > image {
        width: 285upx;
        height: 49upx;
        margin: 0 auto;
      }
    }
  }
}
</style>
