|
@@ -0,0 +1,324 @@
|
|
|
+<template>
|
|
|
+ <div class="mianBox">
|
|
|
+ <!-- <van-row class="balance">
|
|
|
+ <van-col span="24">余额:32.00元</van-col>
|
|
|
+ </van-row> -->
|
|
|
+ <van-row class="contentBox">
|
|
|
+ <van-row class="input_wrap">
|
|
|
+ <span>¥</span>
|
|
|
+ <input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入充值金额( 元 )"
|
|
|
+ class="input"
|
|
|
+ @input="Input"
|
|
|
+ v-model="data.money"
|
|
|
+ />
|
|
|
+ </van-row>
|
|
|
+ </van-row>
|
|
|
+ <van-row class="select_amount" >
|
|
|
+ <van-col span="8" @tap="btn50" :style="state1" data="50" >50</van-col>
|
|
|
+ <van-col style="margin-left:8%" span="8" @tap="btn100" :style="state2" data="100">100</van-col>
|
|
|
+ <van-col style="margin-left:8%" span="8" @tap="btn150" :style="state3" data="150">150</van-col>
|
|
|
+ <van-col span="8" @tap="btn200" :style="state4" data="200">200</van-col>
|
|
|
+ <van-col style="margin-left:8%" span="8" @tap="btn250" :style="state5" data="250">250</van-col>
|
|
|
+ <van-col style="margin-left:8%" span="8" @tap="btn300" :style="state6" data="300">300</van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row class="pay_money" type="flex" justify="space-around">
|
|
|
+ <van-col span="12" class="left">到账金额</van-col>
|
|
|
+ <van-col span="12" class="right">¥{{data.money}}元</van-col>
|
|
|
+ </van-row>
|
|
|
+
|
|
|
+ <!-- <van-row class="tip">
|
|
|
+ 服务费 ¥0元<br>
|
|
|
+ 费率 0%
|
|
|
+ </van-row> -->
|
|
|
+ <!-- <van-button class="amount" color="#F22E3C" @tap="recharge">立即充值</van-button> -->
|
|
|
+ <van-dialog id="van-dialog" />
|
|
|
+ <van-toast id="van-toast" />
|
|
|
+ <!-- <van-loading size="24px" v-if = "loading" vertical style="z-index:999999;position:fixed;top:40%;left:0;right:0;" >加载中...</van-loading>
|
|
|
+ <van-overlay :show="loading" style="z-index:100;position:fixed"/> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Toast from '../../wxcomponents/vant/weapp/dist/toast/toast';
|
|
|
+import Dialog from '../../wxcomponents/vant/weapp/dist/dialog/dialog'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ loading: false,
|
|
|
+ overlayShow: false,
|
|
|
+ env:null, //识别是否为扫描用户进入,以便直接进入支付跳转
|
|
|
+ state1:"color:#000;background: #ccc;",
|
|
|
+ state2:"color:#000;background: #ccc;",
|
|
|
+ state3:"color:#000;background: #ccc;",
|
|
|
+ state4:"color:#000;background: #ccc;",
|
|
|
+ state5:"color:#000;background: #ccc;",
|
|
|
+ state6:"color:#000;background: #ccc;",
|
|
|
+ data:{
|
|
|
+ money: "0",
|
|
|
+ openid:null
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ money(val) {
|
|
|
+ // if (/^0[1-9]/.test(val)) {
|
|
|
+ // this.data.money = val.substring(1);
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ // [Field.name]: Field,
|
|
|
+ // [NumberKeyboard.name]: NumberKeyboard,
|
|
|
+ // [Dialog.name]: Dialog,
|
|
|
+ // [Toast.name]: Toast,
|
|
|
+ },
|
|
|
+ onLoad(options){
|
|
|
+
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ let _this = this
|
|
|
+ uni.getStorage({
|
|
|
+ key: 'openid',
|
|
|
+ success: function (res) {
|
|
|
+ _this.data.openid = res.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ recharge(){
|
|
|
+ if(this.data.money && this.data.money != 0 && this.data.money != "0.00"){
|
|
|
+ if(this.data.money.toString().indexOf(".")<1){
|
|
|
+ this.data.money = this.data.money + ".00"
|
|
|
+ }
|
|
|
+ if(this.data.openid){
|
|
|
+ //console.log(`"去支付页1"${JSON.stringify(this.data)}`)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `../order/index?params=${JSON.stringify(this.data)}`
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ //console.log(`"去支付页2"${JSON.stringify(this.data)}`)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `../login/index?params=${JSON.stringify(this.data)}`
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ Toast('支付金额不能为空或0元');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ Input(e){
|
|
|
+ let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
|
|
|
+ if (!val) {
|
|
|
+ this.amount = '';
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var reg = /[^\d.]/g
|
|
|
+
|
|
|
+ // 只能是数字和小数点,不能是其他输入
|
|
|
+ val = val.replace(reg, "")
|
|
|
+ // // 保证第一位只能是数字,不能是点
|
|
|
+ val = val.replace(/^\./g, "");
|
|
|
+ // // 小数只能出现1位
|
|
|
+ val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
|
|
|
+ // // 小数点后面保留2位
|
|
|
+ val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
|
|
|
+ if(val.indexOf("0") == 0){
|
|
|
+ if(val.length == 2){
|
|
|
+ val = "0."
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.data.money = val;
|
|
|
+ })
|
|
|
+ this.state1 = "color:#000;background: #ccc;",
|
|
|
+ this.state2 = "color:#000;background: #ccc;",
|
|
|
+ this.state3 = "color:#000;background: #ccc;",
|
|
|
+ this.state4 = "color:#000;background: #ccc;",
|
|
|
+ this.state5 = "color:#000;background: #ccc;",
|
|
|
+ this.state6 = "color:#000;background: #ccc;",
|
|
|
+ this.data.money = this.data.money + "";
|
|
|
+ },
|
|
|
+
|
|
|
+ jumpMode(){
|
|
|
+ //console.log(this.data.money)
|
|
|
+ if(this.data.money && this.data.money != 0 && this.data.money != "0.00"){
|
|
|
+ //this.pay(this.data.money, "A01", "3")
|
|
|
+ }else{
|
|
|
+ Toast('支付金额不能为空或0元');
|
|
|
+ Dialog.alert({
|
|
|
+ context: this, // 增加this可用
|
|
|
+ selector:"#van-dialog",//选择器
|
|
|
+ title: '提示',
|
|
|
+ message: '充值金额不能为0元!'
|
|
|
+ }).then(() => {
|
|
|
+ // on close
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // recharge(){
|
|
|
+ // this.jumpMode()
|
|
|
+ // },
|
|
|
+ btn50() {
|
|
|
+ this.state1 = "color:#fff;background:rgba(242, 46, 60, 1);",
|
|
|
+ this.state2 = "color:#000;background: #ccc;",
|
|
|
+ this.state3 = "color:#000;background: #ccc;",
|
|
|
+ this.state4 = "color:#000;background: #ccc;",
|
|
|
+ this.state5 = "color:#000;background: #ccc;",
|
|
|
+ this.state6 = "color:#000;background: #ccc;",
|
|
|
+ this.data.money = 50
|
|
|
+ },
|
|
|
+ btn100() {
|
|
|
+ this.state1 = "color:#000;background: #ccc;",
|
|
|
+ this.state2 = "color:#fff;background: rgba(242, 46, 60, 1);",
|
|
|
+ this.state3 = "color:#000;background: #ccc;",
|
|
|
+ this.state4 = "color:#000;background: #ccc;",
|
|
|
+ this.state5 = "color:#000;background: #ccc;",
|
|
|
+ this.state6 = "color:#000;background: #ccc;",
|
|
|
+ this.data.money = 100
|
|
|
+ },
|
|
|
+ btn150() {
|
|
|
+ this.state1 = "color:#000;background: #ccc;",
|
|
|
+ this.state2 = "color:#000;background: #ccc;",
|
|
|
+ this.state3 = "color:#fff;background: rgba(242, 46, 60, 1);",
|
|
|
+ this.state4 = "color:#000;background: #ccc;",
|
|
|
+ this.state5 = "color:#000;background: #ccc;",
|
|
|
+ this.state6 = "color:#000;background: #ccc;",
|
|
|
+ this.data.money = 150
|
|
|
+ },
|
|
|
+ btn200() {
|
|
|
+ this.state1 = "color:#000;background: #ccc;",
|
|
|
+ this.state2 = "color:#000;background: #ccc;",
|
|
|
+ this.state3 = "color:#000;background: #ccc;",
|
|
|
+ this.state4 = "color:#fff;background: rgba(242, 46, 60, 1);",
|
|
|
+ this.state5 = "color:#000;background: #ccc;",
|
|
|
+ this.state6 = "color:#000;background: #ccc;",
|
|
|
+ this.data.money = 200
|
|
|
+ },
|
|
|
+ btn250() {
|
|
|
+ this.state1 = "color:#000;background: #ccc;",
|
|
|
+ this.state2 = "color:#000;background: #ccc;",
|
|
|
+ this.state3 = "color:#000;background: #ccc;",
|
|
|
+ this.state4 = "color:#000;background: #ccc;",
|
|
|
+ this.state5 = "color:#fff;background: rgba(242, 46, 60, 1);",
|
|
|
+ this.state6 = "color:#000;background: #ccc;",
|
|
|
+ this.data.money = 250
|
|
|
+ },
|
|
|
+ btn300() {
|
|
|
+ this.state1 = "color:#000;background: #ccc;",
|
|
|
+ this.state2 = "color:#000;background: #ccc;",
|
|
|
+ this.state3 = "color:#000;background: #ccc;",
|
|
|
+ this.state4 = "color:#000;background: #ccc;",
|
|
|
+ this.state5 = "color:#000;background: #ccc;",
|
|
|
+ this.state6 = "color:#fff;background: rgba(242, 46, 60, 1);",
|
|
|
+ this.data.money = 300
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.mianBox {
|
|
|
+ width: 90%;
|
|
|
+ padding: 0 5% 0 5%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ // .balance{
|
|
|
+ // font-size: 16px;
|
|
|
+ // margin-top:20px;
|
|
|
+ // display: block;
|
|
|
+ // /deep/ .van-col{
|
|
|
+ // color:red;
|
|
|
+ // display: block;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ .contentBox {
|
|
|
+ width: 90%;
|
|
|
+ position: absolute;
|
|
|
+ background-color: orange !important;
|
|
|
+ .input_wrap{
|
|
|
+ width:100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border:1px solid #E6E6E6;
|
|
|
+ position: absolute;
|
|
|
+ margin-top:20px;
|
|
|
+ span{
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left:10px;
|
|
|
+ color:rgba(242, 46, 60, 1);
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ color:#000;
|
|
|
+ width:70%;
|
|
|
+ padding:8px 10px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ ::placeholder{
|
|
|
+ color:#000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select_amount{
|
|
|
+ width:100%;
|
|
|
+ margin-top:60px;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ /deep/ van-col{
|
|
|
+ padding:10px 0;
|
|
|
+ background-color: #ccc;
|
|
|
+ color:#000;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-top:20px;
|
|
|
+ float:left;
|
|
|
+ width:28%;
|
|
|
+ }
|
|
|
+ .van-col.active{
|
|
|
+ background: rgba(242, 46, 60, 1);
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ /deep/ .van-col{
|
|
|
+ text-align: center !important;
|
|
|
+ width:100%;
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay_money{
|
|
|
+ font-size: 16px;
|
|
|
+ margin:15px 0;
|
|
|
+ display: block;
|
|
|
+ .left{
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ text-align: right;
|
|
|
+ color: rgba(242, 46, 60, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tip{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #CCC;
|
|
|
+ }
|
|
|
+ /deep/ .van-button{
|
|
|
+ border-radius: 6px;
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ .amount{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 25px;
|
|
|
+ width:90%;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 18px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .van-field__label{
|
|
|
+ color:rgba(242, 46, 60, 1) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|