football/pages/balance/recharge.vue

<template>
    <app-layout>
        <view class="dir-top-nowrap recharge" v-if="pageShow">
            <view class="account">我的账户</view>
            <view :style="{'background-image': `url(${appImg.mall.balance_recharge})`}"
                  class="dir-left-nowrap bg cross-center">
                <image class="image box-grow-0" src="/static/image/icon/icon-balance.png"></image>
                <view class="balance-text box-grow-1">余额</view>
                <view class="balance-price box-grow-0">{{balance}}</view>
            </view>
            <view class="amount-text">充值金额</view>
            <view class="dir-left-wrap select">
                <view v-for="(item,index) in list" :key="index" @click="setPrice(index)"
                      class="dir-top-nowrap cross-center main-center box" :class="index === selected? 'active':''">
                    <view class="price">充{{item.pay_price}}元</view>
                    <view class="send" v-if="item.send_price > 0">送{{item.send_price}}元</view>
                    <view class="send" v-if="item.send_integral > 0">送{{item.send_integral}}积分</view>
                </view>
            </view>
            <view class="input" :class="selected === -1 && getFocus ? `red`: `grey`" v-if="setting.type === `1`">
                <input @focus="bindFocus" placeholder-style="color:#bbbbbb" v-model="pay_price" type="digit"
                       :focus="getFocus"
                       @blur="bludBlur"
                       @input="changeInput"
                       placeholder="手动输入充值金额"/>
            </view>
            <view class="btn">
                <app-button @click="submit" round color="#FFFFFF" height="88" background="#FF4544">立即充值</app-button>
            </view>
            <view class="account">充值说明</view>
            <text class="text" space="nbsp">{{setting.explain}}</text>
        </view>
    </app-layout>
</template>

<script>
    import {mapState} from 'vuex';

    export default {
        name: "recharge",
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                appImg: state => state.mallConfig.__wxapp_img,
            }),
        },
        data() {
            return {
                setting: null,
                list: null,
                pay_price: '',
                balance: '￥',
                selected: -1,
                getFocus: false,
                pageShow: false,
            }
        },
        onShow: function () {
            this.loadData();
        },


        watch: {
            pay_price: {
                handler: function (newData, oldData) {
                    if (newData) {
                        this.selected = -1;
                    }
                }
            }
        },

        methods: {
            getSetting: function () {
                const self = this;
                self.$request({
                    url: self.$api.balance.index,
                }).then(info => {
                    if (info.code === 0) {
                        self.pageShow = true;
                        if (info.data.setting.status === `1`) {
                            self.setting = info.data.setting;
                            self.balance = '￥' + info.data.balance;
                        } else {
                            uni.showModal({
                                title: '提示',
                                content: '尚未开启余额功能',
                                showCancel: false,
                                confirmText: '确定',
                                success(e) {
                                    if (e.confirm) {
                                        uni.navigateBack({delta: 1})
                                    }
                                }
                            });
                        }
                    }
                })
            },
            loadData: function () {
                const self = this;
                self.getSetting();
                self.$showLoading({title: `加载中`});
                self.$request({
                    url: self.$api.recharge.index,
                }).then(info => {
                    self.$hideLoading();
                    if (info.code === 0) {
                        self.list = info.data.list;
                    }
                }).catch(info => {
                    self.$hideLoading();
                })
            },

            bindFocus: function () {
                this.selected = -1;
                this.getFocus = true;
            },

            bludBlur: function () {
                this.getFocus = false;
            },

            changeInput(e) {
            },
            setPrice: function (index) {
                this.pay_price = '';
                this.selected = index;
            },

            submit: function () {
                const self = this;
                let para;
                if (self.selected === -1) {
                    if (self.pay_price > 0) {
                        para = {
                            id: 0,
                            pay_price: self.pay_price,
                            send_price: 0
                        };
                    } else {
                        uni.showToast({
                            title: '金额不能为空',
                            icon: 'none',
                        });
                        return;
                    }
                } else {
                    para = {
                        id: self.list[self.selected].id,
                        pay_price: self.list[self.selected].pay_price,
                        send_price: self.list[self.selected].send_price,
                    }
                }

                self.$showLoading({title: `加载中`});
                self.$request({
                    url: self.$api.recharge.balance_recharge,
                    data: para,
                    method: 'POST',
                }).then(info => {
                    self.$hideLoading();
                    if (info.code === 0) {
                        self.$payment.pay(info.data.pay_id).then(e => {
                            uni.showModal({
                                title: '提示',
                                content: '充值成功！',
                                showCancel: false,
                                confirmText: '确定',
                                success(e) {
                                    if (e.confirm) {
                                        uni.navigateBack({delta: 1})
                                    }
                                }
                            });
                        }).catch(e => {
                            uni.showToast({'title': e, icon: 'none'});
                        });
                    } else {
                        uni.showToast({'title': info.msg, icon: 'none'});
                    }
                }).catch(info => {
                    self.$hideLoading();
                })
            }
        }
    }
</script>
<style lang="scss">
    page {
        background: #FFFFFF;
    }
</style>
<style scoped lang="scss">
    .recharge {
        background: #FFFFFF;
        padding: #{40rpx} #{24rpx} 0;

        .account {
            font-size: #{24rpx};
            border-left: #{6rpx} solid #ff4544;
            padding-left: #{24rpx};
            color:#666666;
            margin-bottom: #{32}rpx;
        }

        .bg {
            background-repeat: no-repeat;
            background-size: #{702rpx} #{160rpx};
            height: #{160rpx};
            width: #{702rpx};
            color: #666666;

            .image {
                width: #{72rpx};
                height: #{72rpx};
                margin-left: #{40rpx};
            }

            .balance-text {
                font-size: #{42rpx};
                margin-left: #{20rpx}
            }

            .balance-price {
                font-size: #{46rpx};
                margin-right: #{56rpx};
            }
        }

        .amount-text {
            font-size: #{24rpx};
            color: #999999;
            margin-top: #{56rpx};
        }

        .select {
            margin: 0 #{-12rpx};

            .box {
                height: #{140rpx};
                width: #{214rpx};
                margin: #{24rpx} #{12rpx} 0 #{12rpx};
                border: #{1px} solid #cccccc;
                border-radius: #{16rpx};

                .price {
                    font-size: #{24rpx};
                    color: #999999;
                }

                .send {
                    font-size: #{24rpx};
                    color: #999999;
                }
            }

            .active {
                border: #{1px} solid #ff4544;

                .price {
                    color: #ff4544
                }

                .send {
                    color: #ff4544;
                }
            }
        }

        .input {
            margin-top: #{40rpx};
            border-radius: #{14rpx};

            input {
                color: #666666;
                height: #{88rpx};
                padding: 0 #{12rpx};
            }
        }

        .input.red {
            border: #{1px} solid #ff4544;
        }

        .input.grey {
            border: #{1px} solid #cccccc;
        }

        .btn {
            margin-top: #{56rpx};
            margin-bottom: #{72rpx};
        }

        .text {
            margin-top: -8rpx;
            word-break: break-all;
            text-align: justify;
            font-size: #{24rpx};
            color: #666666;
        }
    }
</style>