|
|
@ -15,23 +15,16 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="info-wrapper"> |
|
|
|
<view class="info-wrapper"> |
|
|
|
<view class="picList acea-row row-between mt-20"> |
|
|
|
<view class="picList acea-row row-between mt-20"> |
|
|
|
<view |
|
|
|
<view class="pic-box pic-box-color acea-row row-center-wrapper row-column" |
|
|
|
class="pic-box pic-box-color acea-row row-center-wrapper row-column" |
|
|
|
:class="activePic === index ? 'pic-box-color-active' : ''" v-for="(item, index) in picList" :key="index" |
|
|
|
:class="activePic === index ? 'pic-box-color-active' : ''" |
|
|
|
@click="picCharge(index, item)"> |
|
|
|
v-for="(item, index) in picList" |
|
|
|
|
|
|
|
:key="index" |
|
|
|
|
|
|
|
@click="picCharge(index, item)" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<view class="pic-number-pic"> |
|
|
|
<view class="pic-number-pic"> |
|
|
|
<text> |
|
|
|
<text> |
|
|
|
{{ item.value.price }} |
|
|
|
{{ item.value.price }} |
|
|
|
<text class="pic-number">元</text> |
|
|
|
<text class="pic-number">元</text> |
|
|
|
</text> |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
<view class="pic-number" v-if="item.value.give_price > 0">赠送:{{ item.value.give_price }} 元</view> |
|
|
|
class="pic-number" |
|
|
|
|
|
|
|
v-if="item.value.give_price > 0" |
|
|
|
|
|
|
|
>赠送:{{ item.value.give_price }} 元</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- <view |
|
|
|
<!-- <view |
|
|
|
class="pic-box pic-box-color acea-row row-center-wrapper" |
|
|
|
class="pic-box pic-box-color acea-row row-center-wrapper" |
|
|
@ -52,10 +45,24 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
import { |
|
|
|
import { weappPay } from "@/libs/wechat"; |
|
|
|
mapGetters |
|
|
|
import { rechargeWechat, getRechargeApi } from "@/api/user"; |
|
|
|
} from "vuex"; |
|
|
|
import { add, sub } from "@/utils/bc"; |
|
|
|
import { |
|
|
|
|
|
|
|
weappPay |
|
|
|
|
|
|
|
} from "@/libs/wechat"; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
rechargeWechat, |
|
|
|
|
|
|
|
getRechargeApi |
|
|
|
|
|
|
|
} from "@/api/user"; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
add, |
|
|
|
|
|
|
|
sub |
|
|
|
|
|
|
|
} from "@/utils/bc"; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
subscribeMessage |
|
|
|
|
|
|
|
} from "@/libs/order"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "Recharge", |
|
|
|
name: "Recharge", |
|
|
@ -95,8 +102,7 @@ export default { |
|
|
|
}) |
|
|
|
}) |
|
|
|
.catch((res) => { |
|
|
|
.catch((res) => { |
|
|
|
uni.showToast({ |
|
|
|
uni.showToast({ |
|
|
|
title: |
|
|
|
title: err.msg || err.response.data.msg || err.response.data.message, |
|
|
|
err.msg || err.response.data.msg || err.response.data.message, |
|
|
|
|
|
|
|
icon: "none", |
|
|
|
icon: "none", |
|
|
|
duration: 2000, |
|
|
|
duration: 2000, |
|
|
|
}); |
|
|
|
}); |
|
|
@ -154,7 +160,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
rechargeWechat({ |
|
|
|
rechargeWechat({ |
|
|
|
price: prices, |
|
|
|
price: prices, |
|
|
|
from: that.from, |
|
|
|
from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType, |
|
|
|
paid_price: paid_price, |
|
|
|
paid_price: paid_price, |
|
|
|
rechar_id: that.rechar_id, |
|
|
|
rechar_id: that.rechar_id, |
|
|
|
}) |
|
|
|
}) |
|
|
@ -170,6 +176,9 @@ export default { |
|
|
|
icon: "success", |
|
|
|
icon: "success", |
|
|
|
duration: 2000, |
|
|
|
duration: 2000, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
|
|
|
|
subscribeMessage() |
|
|
|
|
|
|
|
// #endif |
|
|
|
this.$yrouter.back(); |
|
|
|
this.$yrouter.back(); |
|
|
|
}) |
|
|
|
}) |
|
|
|
.finally((res) => { |
|
|
|
.finally((res) => { |
|
|
@ -191,8 +200,7 @@ export default { |
|
|
|
.catch((err) => { |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
console.log(err); |
|
|
|
uni.showToast({ |
|
|
|
uni.showToast({ |
|
|
|
title: |
|
|
|
title: err.msg || err.response.data.msg || err.response.data.message, |
|
|
|
err.msg || err.response.data.msg || err.response.data.message, |
|
|
|
|
|
|
|
icon: "none", |
|
|
|
icon: "none", |
|
|
|
duration: 2000, |
|
|
|
duration: 2000, |
|
|
|
}); |
|
|
|
}); |
|
|
@ -206,17 +214,21 @@ export default { |
|
|
|
#iframe { |
|
|
|
#iframe { |
|
|
|
display: none; |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic-box-color-active { |
|
|
|
.pic-box-color-active { |
|
|
|
background-color: #eb3729 !important; |
|
|
|
background-color: #eb3729 !important; |
|
|
|
color: #fff !important; |
|
|
|
color: #fff !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.picList { |
|
|
|
.picList { |
|
|
|
margin-bottom: 0.3 * 100rpx; |
|
|
|
margin-bottom: 0.3 * 100rpx; |
|
|
|
margin-top: 0.3 * 100rpx; |
|
|
|
margin-top: 0.3 * 100rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.font-color { |
|
|
|
.font-color { |
|
|
|
color: #e83323; |
|
|
|
color: #e83323; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge { |
|
|
|
.recharge { |
|
|
|
border-radius: 0.1 * 100rpx; |
|
|
|
border-radius: 0.1 * 100rpx; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
@ -228,32 +240,38 @@ export default { |
|
|
|
margin-top: -0.45 * 100rpx; |
|
|
|
margin-top: -0.45 * 100rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .nav { |
|
|
|
.recharge .nav { |
|
|
|
height: 0.75 * 100rpx; |
|
|
|
height: 0.75 * 100rpx; |
|
|
|
line-height: 0.75 * 100rpx; |
|
|
|
line-height: 0.75 * 100rpx; |
|
|
|
padding: 0 1 * 100rpx; |
|
|
|
padding: 0 1 * 100rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .nav .item { |
|
|
|
.recharge .nav .item { |
|
|
|
font-size: 0.3 * 100rpx; |
|
|
|
font-size: 0.3 * 100rpx; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .nav .item.on { |
|
|
|
.recharge .nav .item.on { |
|
|
|
font-weight: bold; |
|
|
|
font-weight: bold; |
|
|
|
border-bottom: 0.04 * 100rpx solid #e83323; |
|
|
|
border-bottom: 0.04 * 100rpx solid #e83323; |
|
|
|
} |
|
|
|
} |
|
|
|
.recharge .info-wrapper { |
|
|
|
|
|
|
|
} |
|
|
|
.recharge .info-wrapper {} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .money { |
|
|
|
.recharge .info-wrapper .money { |
|
|
|
margin-top: 0.6 * 100rpx; |
|
|
|
margin-top: 0.6 * 100rpx; |
|
|
|
padding-bottom: 0.2 * 100rpx; |
|
|
|
padding-bottom: 0.2 * 100rpx; |
|
|
|
border-bottom: 1px dashed #ddd; |
|
|
|
border-bottom: 1px dashed #ddd; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .money span { |
|
|
|
.recharge .info-wrapper .money span { |
|
|
|
font-size: 0.56 * 100rpx; |
|
|
|
font-size: 0.56 * 100rpx; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
font-weight: bold; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .money input { |
|
|
|
.recharge .info-wrapper .money input { |
|
|
|
display: inline-block; |
|
|
|
display: inline-block; |
|
|
|
width: 3 * 100rpx; |
|
|
|
width: 3 * 100rpx; |
|
|
@ -263,30 +281,38 @@ export default { |
|
|
|
font-weight: bold; |
|
|
|
font-weight: bold; |
|
|
|
padding-right: 0.7 * 100rpx; |
|
|
|
padding-right: 0.7 * 100rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .money input::placeholder { |
|
|
|
.recharge .info-wrapper .money input::placeholder { |
|
|
|
color: #ddd; |
|
|
|
color: #ddd; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .money input::-webkit-input-placeholder { |
|
|
|
.recharge .info-wrapper .money input::-webkit-input-placeholder { |
|
|
|
color: #ddd; |
|
|
|
color: #ddd; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .money input:-moz-placeholder { |
|
|
|
.recharge .info-wrapper .money input:-moz-placeholder { |
|
|
|
color: #ddd; |
|
|
|
color: #ddd; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .money input::-moz-placeholder { |
|
|
|
.recharge .info-wrapper .money input::-moz-placeholder { |
|
|
|
color: #ddd; |
|
|
|
color: #ddd; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .money input:-ms-input-placeholder { |
|
|
|
.recharge .info-wrapper .money input:-ms-input-placeholder { |
|
|
|
color: #ddd; |
|
|
|
color: #ddd; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tip { |
|
|
|
.tip { |
|
|
|
font-size: 0.28 * 100rpx; |
|
|
|
font-size: 0.28 * 100rpx; |
|
|
|
color: #333333; |
|
|
|
color: #333333; |
|
|
|
font-weight: 800; |
|
|
|
font-weight: 800; |
|
|
|
margin-bottom: 0.14 * 100rpx; |
|
|
|
margin-bottom: 0.14 * 100rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .tips span { |
|
|
|
.recharge .info-wrapper .tips span { |
|
|
|
color: #ef4a49; |
|
|
|
color: #ef4a49; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.recharge .info-wrapper .pay-btn { |
|
|
|
.recharge .info-wrapper .pay-btn { |
|
|
|
display: block; |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
@ -299,25 +325,30 @@ export default { |
|
|
|
font-size: 0.3 * 100rpx; |
|
|
|
font-size: 0.3 * 100rpx; |
|
|
|
font-weight: bold; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.payment-top { |
|
|
|
.payment-top { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 3.5 * 100rpx; |
|
|
|
height: 3.5 * 100rpx; |
|
|
|
background-color: #eb3729; |
|
|
|
background-color: #eb3729; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.payment-top .name { |
|
|
|
.payment-top .name { |
|
|
|
font-size: 0.26 * 100rpx; |
|
|
|
font-size: 0.26 * 100rpx; |
|
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
|
margin-top: -0.38 * 100rpx; |
|
|
|
margin-top: -0.38 * 100rpx; |
|
|
|
margin-bottom: 0.3 * 100rpx; |
|
|
|
margin-bottom: 0.3 * 100rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.payment-top .pic { |
|
|
|
.payment-top .pic { |
|
|
|
font-size: 0.32 * 100rpx; |
|
|
|
font-size: 0.32 * 100rpx; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.payment-top .pic-font { |
|
|
|
.payment-top .pic-font { |
|
|
|
font-size: 0.78 * 100rpx; |
|
|
|
font-size: 0.78 * 100rpx; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.picList .pic-box { |
|
|
|
.picList .pic-box { |
|
|
|
width: 32%; |
|
|
|
width: 32%; |
|
|
|
height: auto; |
|
|
|
height: auto; |
|
|
@ -325,18 +356,22 @@ export default { |
|
|
|
margin-top: 0.21 * 100rpx; |
|
|
|
margin-top: 0.21 * 100rpx; |
|
|
|
padding: 0.2 * 100rpx 0; |
|
|
|
padding: 0.2 * 100rpx 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic-box-color { |
|
|
|
.pic-box-color { |
|
|
|
background-color: #f4f4f4; |
|
|
|
background-color: #f4f4f4; |
|
|
|
color: #656565; |
|
|
|
color: #656565; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic-number { |
|
|
|
.pic-number { |
|
|
|
font-size: 0.22 * 100rpx; |
|
|
|
font-size: 0.22 * 100rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic-number-pic { |
|
|
|
.pic-number-pic { |
|
|
|
font-size: 0.38 * 100rpx; |
|
|
|
font-size: 0.38 * 100rpx; |
|
|
|
margin-right: 0.1 * 100rpx; |
|
|
|
margin-right: 0.1 * 100rpx; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic-box-money { |
|
|
|
.pic-box-money { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
display: block; |
|
|
|
display: block; |
|
|
|