zx_bms_uni/pages/wallet/wallet.vue

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

        <view class="money_view flex-row">
            <view>充值金额</view>
            <view class="money_mark">（每一条报警短信消耗{{ coupon.cost / 100 }}币）</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 }}元</view>
                    <view class="coin_text">{{ item.coin / 100 }}币</view>
                </view>
            </view>
        </view>

        <view class="bottom_top_up">
            <view @tap="clickTopUp" class="top_up">{{ currentMoney / 100 }}元 ｜ 充值</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) {
        //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();
            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: '/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(resp.data.msg);
                }
            });
        },

        clickTopUp() {
            const pData = {
                coin: this.topupList[this.selectIndex].coin,
                type: 'jsapi'
            };
            const me = this;
            common.loading();
            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.loadGetCoin();
                        }
                    });
                } else if (resp.data.code === 15001) {
                    uni.showModal({
                        title: '提示',
                        content: resp.data.data.shop_name + '门店没有足够的余额，提醒商家进行充值',
                        showCancel: false,
                        success: function (res) {
                            if (res.confirm) {
                                //这里是点击了确定以后
                            } else {
                                //这里是点击了取消以后
                            }
                        }
                    });
                } else {
                    common.simpleToast(resp.data.msg);
                }
            });
        }
    }
};
</script>
<style>
@import './wallet.css';
</style>