diancan_uni/pages/user/cash/index.vue

<template>
    <!-- index.wxml -->
    <view class="wrap">
        <view class="wrap_nr">
            <view class="wrap_t" :style="'background-image: url(' + topBg + ')'">
                <view class="wrap_t_name">卡内余额</view>
                <view class="total_price">
                    <text class="unit">¥</text>
                    {{ money }}
                </view>
            </view>
            <view class="wrap_b">
                <view class="card_top">
                    <view class="wrap_b_t">
                        <view class="wrap_b_t_l">
                            <image class="item_icon" mode="heightFix" src="/static/statics/img/icon_dengji.png"></image>
                            <view class="item_name">请选择充值方案</view>
                        </view>
                        <view class="wrap_b_t_r" @tap="goCashLog">充值记录</view>
                    </view>
                    <image class="line_tu" src="/static/statics/img/line_tu.png"></image>
                </view>
                <view class="card_list">
                    <view class="card_item_w" @tap="clickCard" :data-id="item.id" v-for="(item, index) in cardList" :key="index">
                        <view :class="item.checked ? 'card_item active' : 'card_item'">
                            <view v-if="item.type == 2">
                                <!-- 年卡 -->
                                <view class="card_item_col">
                                    <view class="card_text">{{ item.price }}元购{{ item.title }}</view>
                                    <view class="card_send">得</view>
                                    <view class="card_text">会员</view>
                                </view>
                            </view>
                            <view v-else>
                                <!-- 充值卡 -->
                                <view class="card_item_col">
                                    <view class="card_text">充值{{ item.price }}元</view>
                                    <view class="card_send">得</view>
                                    <view class="card_text">{{ item.priceAddCoupons }}元</view>
                                </view>
                                <view class="card_item_col desc" v-if="item.coupon_rule">
                                    <text class="">{{ item.price }}元卡金</text>
                                    <text class="">+ {{ item.coupon_rule.coupon.price }}元x{{ item.coupon_rule.num }}张券</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <!-- loading -->
    <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
</template>

<script>
// index.js
let myPro = require('../../../utils/wxRequest.js');

let util = require('../../../utils/util.js');

export default {
    data() {
        return {
            money: '',
            topBg: '/static/statics/img/cash_bg.png',

            // 全局loading
            loading: false,

            store: '',
            cardList: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;
        that.setData({
            topBg: 'data:image/png;base64,' + uni.getFileSystemManager().readFileSync(that.topBg, 'base64')
        });
    },
    onShow: function () {
        // Do something when page show.
        let that = this; // 店铺

        uni.getStorage({
            key: 'store',
            success: function (res) {
                that.setData({
                    store: JSON.parse(res.data)
                });
            }
        });
        that.getUserInfo();
        that.getRechargeCard();
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 用户信息
        getUserInfo() {
            let that = this;
            myPro
                .wxRequest('user/v2/userinfo', 'GET', {})
                .then((res) => {
                    that.setData({
                        money: res.result.money
                    }); // 同步会员信息 is_member

                    getApp().globalData.is_member = res.result.is_member;
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 获取充值卡
        getRechargeCard() {
            let that = this;
            let params = {
                type: 2,
                card_type: 1 // 1普通 2年卡(会员卡)
            };
            myPro
                .wxRequest('user/v2/rechargecardlist', 'GET', params)
                .then((res) => {
                    let list = res.result;

                    for (let i in list) {
                        list[i].checked = false; // 卡+券的总金额 (都按代金券走,折扣券不考虑)

                        if (list[i].coupon_rule) {
                            list[i].priceAddCoupons = (list[i].coupon_rule.coupon.price * list[i].coupon_rule.num + parseFloat(list[i].price)).toFixed(2);
                        } else {
                            list[i].priceAddCoupons = list[i].price;
                        }
                    }

                    that.setData({
                        cardList: list
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 选择充值卡
        clickCard(event) {
            let that = this;
            let id = event.currentTarget.dataset.id;
            let list = that.cardList;

            for (let i in list) {
                if (list[i].id == id) {
                    list[i].checked = !list[i].checked;

                    if (list[i].checked) {
                        that.nextFun(list[i].id);
                    }
                } else {
                    list[i].checked = false;
                }
            }

            that.setData({
                cardList: list
            });
        },

        // 充值
        nextFun(id) {
            let that = this;
            let params = {
                recharge_card_id: id,
                store_id: that.store ? that.store.id : 1 // 门店id
            };
            myPro
                .wxRequest('user/recharge', 'POST', params)
                .then((res) => {
                    let config = res.result.config;
                    that.wxPayCard(JSON.parse(config));
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 微信付款
        wxPayCard: function (result) {
            let that = this;
            uni.requestPayment({
                timeStamp: result.timeStamp,
                nonceStr: result.nonceStr,
                package: result.package,
                signType: result.signType,
                paySign: result.paySign,

                success(res) {
                    uni.showToast({
                        title: '充值成功',
                        icon: 'none'
                    }); // 拉取余额和会员角色

                    that.getUserInfo();
                },

                fail(res) {
                    uni.showToast({
                        title: '充值失败',
                        icon: 'none'
                    });
                    console.log('报错信息', res);
                }
            });
        },

        // 充值记录
        goCashLog() {
            let that = this;
            uni.navigateTo({
                url: '/pages/user/cashlog/index'
            });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    width: 750rpx;
    min-height: 100vh;
    background: #f6f6f6;
}
.wrap_nr {
    padding: 14rpx 30rpx 0;
}
.wrap_t {
    width: 690rpx;
    height: 225rpx;
    font-size: 30rpx;
    color: #000000;
    /* padding-left: 60rpx; */
    background-repeat: no-repeat;
    background-size: 690rpx 225rpx;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
}
.wrap_t .total_price {
    /* margin-top: 30rpx; */
    font-size: 48rpx;
    font-weight: 500;
    margin-left: 30rpx;
}
.wrap_t .total_price .unit {
    font-size: 30rpx;
}
.wrap_b {
    /* background: #FFFFFF; */
    margin-top: 24rpx;
    border-radius: 5rpx;
}
.card_top {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card_top .line_tu {
    width: 690rpx;
    height: 30rpx;
}
.wrap_b_t {
    width: 100%;
    padding: 30rpx 30rpx 10rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wrap_b_t .wrap_b_t_l {
    display: flex;
    align-items: center;
}
.wrap_b_t .item_icon {
    width: 48rpx;
    height: 36rpx;
}
.wrap_b_t .item_name {
    font-size: 30rpx;
    color: #000000;
    padding-left: 20rpx;
}
.wrap_b_t .wrap_b_t_r {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.87);
}
.card_list {
    background: #ffffff;
    padding: 0 30rpx 10rpx;
}
.btn_wrap {
    margin-top: 90rpx;
}
.btn_wrap .btn {
    width: 405rpx;
    height: 98rpx;
    margin: 0 auto;
    background: #d54c43;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #fffefe;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>