138 lines
2.8 KiB
Vue
138 lines
2.8 KiB
Vue
<template>
|
|
<div class="page-body">
|
|
|
|
<div class="module-block">
|
|
<div>
|
|
充值金额
|
|
</div>
|
|
<div class="input-box">
|
|
<span>￥</span>
|
|
<input type="digit" @input="bindKeyInput($event,'amout')" maxlength="6" :value="amout" placeholder="0.00">
|
|
</div>
|
|
<div class="tip-text" v-show="!amout">请输入整数的充值金额。</div>
|
|
</div>
|
|
<!-- <image :src="pic_url" mode="aspectFit"></image> -->
|
|
<!-- <div> -->
|
|
<button class="module-btn" id="pushMoney" @tap="toPay">
|
|
充值
|
|
</button>
|
|
|
|
<!-- </div> -->
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
data () {
|
|
return {
|
|
url: '',
|
|
orderCode: '',
|
|
amout: '',
|
|
pic_url: ' '
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['user'])
|
|
|
|
},
|
|
methods: {
|
|
bindKeyInput (event, val) {
|
|
this[val] = event.mp.detail.value
|
|
},
|
|
toPay () {
|
|
let _this = this
|
|
this.$api.mpPost({
|
|
action_type: 'GetMember_RechargeTicket',
|
|
Membership_VipId: this.user.Membership_VipId,
|
|
WeChat_MiniProToken: this.user.WeChat_MiniProToken,
|
|
Recharge_Amount: this.amout
|
|
}).then(res => {
|
|
if (res.Result_Code === 100) {
|
|
_this.orderCode = res.Result_Data.TICKET_CODE
|
|
var backData = res.Result_Data.pay_info
|
|
|
|
mpvue.navigateTo({url: '/pages/webview/main?name=url&url=' + encodeURIComponent(backData.link_url)})
|
|
} else {
|
|
mpvue.showModal({
|
|
title: '温馨提示',
|
|
content: res.Result_Desc,
|
|
showCancel: false,
|
|
confirmText: '确定',
|
|
confirmColor: '#3CC51F'
|
|
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onLoad (option) {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
input:focus {
|
|
border: none;
|
|
}
|
|
|
|
.page-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
height: calc(100vh);
|
|
padding: 64rpx 32rpx;
|
|
font-size: 24rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
}
|
|
|
|
.module-block {
|
|
height: 50%;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.input-box {
|
|
margin-top: 32rpx;
|
|
display: flex;
|
|
width: 100%;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
|
|
}
|
|
|
|
.tip-text {
|
|
margin-top: 32rpx;
|
|
color: #ea3323;
|
|
}
|
|
|
|
.input-box span {
|
|
font-size: 40rpx;
|
|
font-weight: bolder;
|
|
margin-right: 8rpx;
|
|
line-height: 96rpx;
|
|
}
|
|
|
|
.input-box input {
|
|
height: 100rpx;
|
|
width: 100%;
|
|
border: none;
|
|
font-size: 56rpx;
|
|
outline: none;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.module-btn {
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
width: 600rpx;
|
|
text-align: center;
|
|
background-color: #06C05F;
|
|
border: 0;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
border-radius: 8rpx;
|
|
margin: 0 auto;
|
|
}
|
|
</style> |