clear both

 

 

 

<script>
  import wepy from 'wepy'
  import api from '../api/api'
  export default class recharge extends wepy.page {
    config = {
      navigationBarTitleText: '帳戶充值'
    }
    data = {
      notHere: {},
      apiRes: {},
      amountTab: {
        currentType: '0',
        amountType: [
          [1000, 0],
          [2000, 200],
          [5000, 1000],
          [10000, 3000]
        ],
        payType: 0
      }
    }
    async getAccountBalance() {
      const backEndRequire = {
        method: 'POST',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      let q = backEndRequire
      q.query = {
        uid: this.$parent.UID.uid,
      }
      const r = await api.getAccountBalance(q)
      this.apiRes.AccountBalance = r.data.data
      this.$apply()
    }
    onLoad() {
      this.notHere.commonCfg = wepy.$appConfig.common
      this.getAccountBalance()
    }
    phoneCall(e) {
      wx.makePhoneCall({
        phoneNumber: e.currentTarget.dataset.replyPhone,
        success() {}
      })
    }
    onTap(e) {
      const k = e.currentTarget.dataset.key
      const v = e.currentTarget.dataset.val
      this.amountTab[k] = v
    }
  }
</script>
<template>
  <view class="root_">
    <view>
      <view>帳戶餘額
        <text class="question-mark">?</text>
      </view>
      <view>
        <view class="balance"><text>￥</text><text class="balance-num"> {{apiRes.AccountBalance['1'].val}} </text> <text>幣</text></view>
      </view>
    </view>
    <view class="clear_both">充值金額</view>
    <view class="amountType-container">
      <repeat for="{{amountTab.amountType}}" key="index" index="index" item="item">
        <view class="amountType-separation">
          <view class="amountType-item {{index===amountTab.currentType ? 'amount-item_select-after' :'amount-item_select-before'}}" @tap="onTap" data-key="currentType" data-val={{index}}>
            <view class="amountType-gift">{{index===0 ? ' ': '送'+item[1]+'幣'}}</view>
            <view class="amountType-exchange-rate">
              <text>{{item[0]}}</text><text>元</text>=<text>{{item[0]+item[1]}}</text><text>幣</text>
            </view>
          </view>
        </view>
      </repeat>
    </view>
    <view class="clear_both">支付方式</view>
    <view class="pay-type">
      <view class="payType_img-separation">
        <view class="pay-type_select-before  {{amountTab.payType === '0' ? 'pay-type_select-after' : ''}}">
          <image @tap="onTap" data-key="payType" data-val="0" class="pay-type_img-width-height" src="{{notHere.commonCfg.localImgPath}}payWeixin.jpg"></image>
        </view>
      </view>
      <view class="payType_img-separation">
        <view class="pay-type_select-before  {{amountTab.payType === '1'  ? 'pay-type_select-after' : ''}}">
          <image @tap="onTap" data-key="payType" data-val="1" class="pay-type_img-width-height" src="{{notHere.commonCfg.localImgPath}}payAli.jpg"></image>
        </view>
      </view>
    </view>
    <view class="pay-number">應付金額
      <text>{{amountTab.amountType[amountTab.currentType][0]}}</text>元
    </view>
    <view>
      <button class="weui-btn weui-btn_mini weui-btn_primary recharge_button">當即充值</button>
    </view>
    <view class="contact">購買套餐,一鍵諮詢：
      <text class="phone-number" data-reply-phone="0755123" bindtap="phoneCall">0755-123</text>
    </view>
  </view>
</template>
<style lang="less">
  // WXSS · 小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
  @wx-width: 750rpx; // TODO 全局統一；2018年10月2日 16:29:42
  @wx-width_px: 750;
  @wx-width_rpx-num: 750;
  @wx-width_one-unit: @wx-width/@wx-width_rpx-num;
  @color-main_red: #F00;
  @color-main_blue: #2CABE2;
  @color-main_gray: #ADADAD;
  @page-padding-horizontal: @wx-width_one-unit*12;
  @wx-width_subtract-padding-width: @wx-width - @page-padding-horizontal*2;
  @common_border-width: @wx-width_one-unit; // 選中項的邊框
  @common_select-after-font-size: @wx-width_one-unit*24; // 選中項的after-content字體大小
  .root_ {
    padding: @page-padding-horizontal;
  }
  .clear_both {
    clear: both;
  }
  .balance {
    font-size: @wx-width_one-unit*25;
    .balance-num {
      font-weight: normal;
      color: @color-main_red;
    }
  }
  .question-mark {
    border: @wx-width_one-unit solid @color-main_gray;
    color: @color-main_gray;
    border-radius: 50%;
    text-align: center;
  }
  .mixin_change-border-color(@c: @color-main_gray) {
    border: @common_border-width solid @c;
  }
  .mixin_item_select-before() {
    .mixin_change-border-color(@c: @color-main_gray);
  } // 沒有點擊選中的公共樣式；
  .mixin_item_select-after(@font-size: @common_select-after-font-size, @margin-top: @common_select-after-font-size) {
    display: block;
    float: right;
    content: "√";
    background-color: @color-main_blue;
    color: #fff;
    border-radius: 50%;
    font-size: @font-size;
    margin-top: -@margin-top;
  } // 點擊選中後的公共樣式；
  .amountType-container {
    // 盒子模型；注意view初始爲display:block;
    @2items_margin-width: @wx-width_subtract-padding-width*0.02; // 並排的2個選項區域的外圍margin；
    @item-separation-margin-width: @wx-width_subtract-padding-width*0.05; // 2個選項橫排；選項margin水平間距；
    @item-border-width: @common_border-width; // 2個選項的border寬度；
    @item-available-width: @wx-width_subtract-padding-width - @2items_margin-width*2 - @item-border-width*4 - @item-separation-margin-width*4; // 待佈局選項區域；
    @item-render-width: @item-available-width/2; // 選項最終被渲染的寬度；
    @item_select-after-font-size: @common_select-after-font-size;
    margin: 0 @2items_margin-width;
    .amountType-separation {
      // width: @wx-width_one-unit;
      padding: 0 @item-separation-margin-width;
      background-color: green;
      .amountType-item {
        width: @item-render-width;
        float: left;
        .mixin_block-float(@f: right) {
          display: block;
          float: @f;
        }
        .amountType-gift {
          .mixin_block-float(@f: right);
          background-color: @color-main_red;
          border-radius: 20% 0 0 30%;
          color: #fff;
          font-size: 80%; //TODO exact
        }
        .amountType-exchange-rate {
          .mixin_block-float(@f: left);
          @v: 700;
          text:nth-last-child(2) {
            color: @color-main_red;
            font-weight: @v;
          }
          text:nth-child(1) {
            font-weight: @v;
          }
        }
      }
      .amount-item_select-before {
        .mixin_item_select-before();
      }
      .amount-item_select-after {
        .mixin_change-border-color(@c: @color-main_blue);
        &:after {
          .mixin_item_select-after(@font-size: @common_select-after-font-size, @margin-top: @common_select-after-font-size);
        }
      }
    }
  }
  .pay-type {
    @pay-type_2imgs_padding-width : @wx-width_subtract-padding-width*0.1; // 並排的2項的區域的外圍邊框
    @pay-type_img-available-width: @wx-width_subtract-padding-width - @pay-type_2imgs_padding-width*2 - @pay-type_border-width*4; // 待佈局圖片的區域
    @pay-type_border-width: @common_border-width; // 不管是否被選中，項之間、選中先後都有相同的邊框寬度；選中對邊框的影響是改變邊框顏色；
    @pay-type_imgs_width-share: 0.6; // 圖片寬度份額，其餘留做2張圖片間的水平margin；
    @pay-type_img-margin-width: @pay-type_img-available-width*(1- @pay-type_imgs_width-share)/4; // 2張圖之間的margin寬度
    @pay-type_img-render-width: @pay-type_img-available-width*@pay-type_imgs_width-share/2; // 圖片最終被渲染的寬度
    @pay-type_img-width-divide-height: 98/40; // 原圖 寬度 高度  98 40 像素 96*96 dpi;// 原2張圖寬高像素比相同；//image-height("file.png")；
    @pay-type_img-render-height: @pay-type_img-render-width/@pay-type_img-width-divide-height; // 保持圖片寬高比,圖片最終被渲染的高度
    @pay-type_amount-item_select-after-font-size: @common_select-after-font-size;
    display: inline-flex;
    padding: 0 @pay-type_2imgs_padding-width;
    height: @pay-type_img-render-height + @pay-type_border-width;
    .pay-type_img-width-height {
      width: @pay-type_img-render-width;
      height: @pay-type_img-render-height;
    }
    .payType_img-separation {
      margin: 0 @pay-type_img-margin-width;
    }
    .pay-type_select-before {
      .mixin_item_select-before()
    }
    .pay-type_select-after {
      .mixin_change-border-color(@c: @color-main_blue);
      &:after {
        .mixin_item_select-after(@font-size: @common_select-after-font-size, @margin-top: @common_select-after-font-size);
      }
    }
  }
  .contact {
    text-align: center;
    .phone-number {
      color: @color-main_blue;
    }
  }
  .recharge_button {
    width: 90%;
    border-radius: @wx-width_one-unit*8;
    background-color: @color-main_blue;
    color: #fff;
  }
</style>