点击刷新
<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>
<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>
<view>充值金额</view>
<repeat for="{{amountTab.amountType}}" key="index" index="index" item="item">
<view class="amount-item" @tap="onTap" data-key="currentType" data-val={{index}}>
<view mode="aspectFit" class=" {{index===amountTab.currentType ? 'amount-item_select-after' :''}}">
<view>
<view wx:if="{{index !== 0}}">送{{item[1]}}币</view>
<view>
<text>{{item[0]}}</text><text>元</text>=<text>{{item[0]+item[1]}}</text><text>币</text>
</view>
</view>
</view>
</view>
</repeat>
</view>
</view>
<view>支付方式</view>
<view class="pay-type">
<view class="payType_img-separation">
<view class="{{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="{{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>
<view class="pay-number">应付金额
<text>{{amountTab.amountType[amountTab.currentType][0]}}</text>元
</view>
</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="075581773181" bindtap="phoneCall">0755-81773181</text>
</view>
</view>
</template>
<style lang="less">
@import "../style/weui.wxss"; // WXSS · 小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
@wx-width: 750rpx;
@wx-width_px: 750;
@wx-width_one-unit: @wx-width/750;
@color-main_red: #F00;
@color-main_blue: #2CABE2; // TODO 全局统一；2018年10月2日 16:29:42
@page-padding-horizontal: @wx-width_one-unit*12;
@wx-width_subtract-padding-width: @wx-width - @page-padding-horizontal*2;
.root_ {
padding: @page-padding-horizontal;
}
.balance {
font-size: @wx-width_one-unit*25;
.balance-num {
font-weight: normal;
}
}
.question-mark {
@c: #adadad;
border: @wx-width_one-unit solid @c;
color: @c;
border-radius: 50%;
text-align: center;
}
.amount-item {
width: 50%;
display: inline-flex;
}
@pay-type_2imgs_padding-width : @wx-width_subtract-padding-width*0.1; // 并排的2张图的区域的外围边框
@pay-type_border-width: @wx-width_one-unit; // 图片被点击后的新增边框宽度
@pay-type_img_available-width: @wx-width_subtract-padding-width - @pay-type_2imgs_padding-width*2 - @pay-type_border-width*2; // 可用区的图片宽度份额，其他留作2张图片间的水平padding
@pay-type_imgs_width-share: 0.6;
@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: @wx-width_one-unit*24;
.pay-type {
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-after,
.amount-item_select-after {
border: @pay-type_border-width solid @color-main_blue;
@v: @pay-type_amount-item_select-after-font-size;
&:after {
display: block;
float: right;
content: "√";
background-color: @color-main_blue;
color: #fff;
border-radius: 50%;
font-size: @v;
margin-top: -@v;
}
}
.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>
对宽度的精细化控制
【宽度赋值原则】
1、艺术的数组，科研的结果，比如：黄金分割；
2、加减乘除的计算的结果；
© 著作权归作者所有
举报
发表评论
0/200
