zx_bms_uni/myPages/pages/wallet/wallet.vue

<template>
    <!-- myPages/pages/wallet/wallet.wxml -->
    <view class="container">
        <view @tap="clickPaymentDetail" class="current_view flex-row flex-between">
            <view class="flex-row">
                <view>{{$t('当前余额')+'：'}}</view>
                <view class="money_red">{{ coin / 100 + $t('币')}}</view>
            </view>
            <view class="flex-row">
                <view class="money_mark">{{$t('收支明细')}}</view>
                <image class="item-icon" src="/static/resource/images/youjiantou.png"></image>
            </view>
        </view>

        <view class="money_view flex-row">
            <view>{{$t('充值金额')}}</view>
            <view class="money_mark">（{{ $t('每一条报警短信消耗') + coupon.cost / 100 + $t('币')}}）</view>
        </view>
        <view class="table_view" style="display: flex">
            <view class="top_up_view" v-for="(item, index) in topupList" :key="index">
                <view @tap="clickCurrentMoney" :data-index="index" :class="selectIndex == index ? 'select_bg top_up_bg' : 'top_up_bg'">
                    <view class="money_text">{{ item.money / 100 + $t('元')}}</view>
                    <view class="coin_text">{{ item.coin / 100 + $t('币')}}</view>
                </view>
            </view>
        </view>

        <view class="bottom_top_up">
            <view @tap="clickTopUp" class="top_up">{{ currentMoney / 100 + $t('元')}} ｜ {{$t('充值')}}</view>
        </view>
    </view>
</template>

<script>
// pages/wallet/wallet.js

var appConfig = require('../../../common/appConfig.js');
const config = require('../../../common/config.js');
const http = require('../../../common/http.js');
const common = require('../../../common/common.js');
var storage = require('../../../common/storage.js');
var user = require('../../../common/user.js');
export default {
    data() {
        return {
            topupList: [],
            selectIndex: 0,
            currentMoney: 0,
            coupon: {
                cost: 0
            },
            coin: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t('充值')
		});
        //currentMoney
        this.loadGetCoin();
        this.loadCoinConfig();
        this.loadHasCoupon();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        clickCurrentMoney: function (e) {
            const index = e.currentTarget.dataset.index;
            this.setData({
                selectIndex: index,
                currentMoney: this.topupList[index].money
            });
        },

        loadReponse() {},

        loadCoinConfig() {
            const me = this;
            common.loading(this);
            http.postApi(config.API_COIN_CONFIG, {}, function (resp) {
                uni.hideLoading();
                if (resp.data.code === 200) {
                    me.setData({
                        topupList: resp.data.data.list
                    });
                    if (resp.data.data.list.length > 0) {
                        me.setData({
                            currentMoney: me.topupList[me.selectIndex].money
                        });
                    }
                }
            });
        },

        loadGetCoin() {
            const me = this;
            http.postApi(config.API_GET_COIN, {}, function (resp) {
                if (resp.data.code === 200) {
                    me.setData({
                        coin: resp.data.data.coin
                    });
                }
            });
        },

        clickPaymentDetail() {
            uni.navigateTo({
                url: '/myPages/pages/paymentDetail/paymentDetail',
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        loadHasCoupon() {
            const me = this;
            http.postRequest(config.API_HAS_COUPON, {}, function (resp) {
                if (resp.data.code === 200) {
                    me.setData({
                        coupon: resp.data.data
                    });
                } else {
                    common.simpleToast(me,resp.data.msg);
                }
            });
        },

        clickTopUp() {
            const pData = {
                coin: this.topupList[this.selectIndex].coin,
                type: 'jsapi'
            };
            const me = this;
            common.loading(this);
            http.postApi(config.API_COIN_CREDIT, pData, function (resp) {
                uni.hideLoading();
                if (resp.data.code === 200) {
                    console.log(resp.data.data.payParams);
                    var payParams = JSON.parse(resp.data.data.payParams);
                    var order_sn = resp.data.data.order_sn;
                    user.wxPay(order_sn, payParams, function (isSuccess) {
                        if (isSuccess) {
                            common.simpleToast(me,me.$t('支付成功'));
                            me.loadGetCoin();
                        }
                    });
                } else if (resp.data.code === 15001) {
                    uni.showModal({
                        title: me.$t('提示'),
                        content: resp.data.data.shop_name + me.$t('门店没有足够的余额，提醒商家进行充值'),
                        showCancel: false,
                        success: function (res) {
                            if (res.confirm) {
                                //这里是点击了确定以后
                            } else {
                                //这里是点击了取消以后
                            }
                        }
                    });
                } else {
                    common.simpleToast(me,resp.data.msg);
                }
            });
        }
    }
};
</script>
<style>
@import './wallet.css';
</style>