zx_bms_uni/pages/paymentDetail/paymentDetail.vue

<template>
    <!-- pages/paymentDetail/paymentDetail.wxml -->

    <view class="container">
        <view :style="'height: ' + (is_main ? '140rpx' : '80rpx') + ';'"></view>
        <view v-if="selectStatus" class="list-group">
            <view v-for="(item, index) in recordList" :key="index">
                <view class="info-group list-item">
                    <view class="top-group">
                        <view class="group-view flex-row">
                            <view class="flex-row">
                                <view class="info-text">订单号：</view>
                                <view class="info-text-gray">{{ item.order_sn }}</view>
                            </view>
                        </view>
                        <view v-if="type != 'group'" class="group-view flex-row">
                            <view class="flex-row">
                                <view class="info-text">用户：</view>
                                <view class="info-text-gray">{{ item.nickname }}/{{ item.phone }}</view>
                            </view>
                        </view>
                        <view class="group-view flex-row flex-between">
                            <view class="flex-row">
                                <view class="info-text">充值金额：</view>
                                <view class="red-text">¥{{ item.money / 100 }}</view>
                            </view>
                            <view class="flex-row">
                                <view class="info-text">到账币数：</view>
                                <view class="red-text">{{ item.coin / 100 }}币</view>
                            </view>
                        </view>
                        <view class="group-view flex-row flex-between">
                            <view class="flex-row">
                                <view class="info-text">支付状态：</view>
                                <view class="info-text-gray">{{ item.status == 0 ? '未支付' : '已支付' }}</view>
                            </view>
                            <view class="flex-row">
                                <view class="info-text-gray">{{ tools.formatTime(item.ctime) }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view v-if="!selectStatus" class="list-group">
            <view v-for="(item, index) in walletList" :key="index">
                <view class="info-group list-item">
                    <view class="top-group">
                        <view class="group-view flex-row">
                            <view class="flex-row">
                                <view class="info-text">设备号/用户：</view>
                                <view v-if="item.type == '1'" class="info-text-gray">
                                    {{ userInfo.info.name }}
                                </view>
                                <view v-if="item.type == '2'" class="info-text-gray">
                                    {{ '设备号：' + item.target_id }}
                                </view>
                                <view v-if="item.type == '3'" class="info-text-gray">
                                    {{ item.nickname + '/' + item.phone }}
                                </view>
                                <view v-if="item.type == '4' && type != 'group'" class="info-text-gray">
                                    {{ item.nickname + '/' + item.phone }}
                                </view>
                                <view v-if="item.type == '4' && type == 'group'" class="info-text-gray">
                                    {{ userInfo.info.name }}
                                </view>
                            </view>
                        </view>
                        <view class="group-view flex-row flex-between">
                            <view class="flex-row">
                                <view class="info-text">余额：</view>
                                <view class="red-text">{{ item.after_coin / 100 }}币</view>
                            </view>
                            <view class="flex-row">
                                <view class="info-text">金币流水：</view>
                                <view v-if="item.after_coin - item.before_coin >= 0" class="red-text">{{ '+' + (item.after_coin - item.before_coin) / 100 }}币</view>
                                <view v-if="item.after_coin - item.before_coin < 0" class="green-text">{{ (item.after_coin - item.before_coin) / 100 }}币</view>
                            </view>
                        </view>
                        <view class="group-view flex-row flex-between">
                            <view class="flex-row">
                                <view class="info-text">摘要：</view>
                                <view class="info-text-gray">{{ item.remark }}</view>
                            </view>
                        </view>
                        <view class="group-view flex-row flex-between">
                            <view class="flex-row">
                                <view class="info-text">时间：</view>
                                <view class="info-text-gray">{{ tools.formatTime(item.ctime) }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="no-more">没有更多信息</view>
        <view :style="'height: ' + (is_main ? '140rpx' : '80rpx') + ';'"></view>
        <view class="top-bar-container">
            <view class="flex-row flex-between">
                <view @tap="clickSelectType" data-index="1" :class="'tab_nav ' + (selectStatus == 1 ? 'select_color' : '')">充值记录</view>
                <view @tap="clickSelectType" data-index="2" :class="'tab_nav ' + (selectStatus == 0 ? 'select_color' : '')">钱包流水</view>
            </view>
            <view v-if="is_main" style="margin-left: 20rpx; margin-top: 10rpx" :class="'flex-row ' + (selectStatus != 1 ? 'select_color' : '')">
                <view @tap="clickSelectUserInfoType" data-index="1" :class="'sub_nav ' + (isShop == 1 ? 'sub_nav_select' : 'sub_nav_select_no')">商家</view>
                <view @tap="clickSelectUserInfoType" data-index="2" :class="'sub_nav ' + (isShop == 1 ? 'sub_nav_select_no' : 'sub_nav_select')">用户</view>
            </view>
        </view>
    </view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script>
// pages/paymentDetail/paymentDetail.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');
const LIMT_PAGE = 20;
export default {
    data() {
        return {
            isLoading: false,
            recordList: [],
            walletList: [],
            start_page: 1,
            limit_page: LIMT_PAGE,
            selectStatus: 1,
            isShop: 1,

            userInfo: {
                info: {
                    name: ''
                }
            },

            is_main: true,
            type: 'group',
            coin: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        const userInfo = storage.getUserInfo();
        this.setData({
            userInfo: userInfo
        });
        this.loadGetCoin();
        this.refreshLoadSmsAlarmList();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.refreshLoadSmsAlarmList();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.isLoading) {
            return;
        }
        this.setData({
            isLoading: true
        });
        this.start_page++;
        this.loadListData();
    },
    methods: {
        refreshLoadSmsAlarmList: function () {
            if (this.isLoading) {
                return;
            }
            this.setData({
                recordList: [],
                walletList: [],
                isLoading: true
            });
            common.loading();
            this.limit_page = LIMT_PAGE;
            this.start_page = 1;
            this.loadListData();
        },

        clickSelectType: function (e) {
            const index = e.currentTarget.dataset.index;
            this.setData({
                selectStatus: index === '1' ? 1 : 0
            });
            this.refreshLoadSmsAlarmList();
        },

        clickSelectUserInfoType: function (e) {
            const index = e.currentTarget.dataset.index;
            this.setData({
                isShop: index === '1' ? 1 : 0,
                type: index === '1' ? 'group' : 'user'
            });
            this.refreshLoadSmsAlarmList();
        },

        loadListData() {
            if (this.selectStatus === 1) {
                this.loadApiGetCoinRecordList();
            } else {
                this.loadApiGetCoinHisttoryList();
            }
        },

        loadApiGetCoinRecordList() {
            const pData = {
                size: this.limit_page,
                page: this.start_page,
                type: this.type === 'group' ? '2' : '1'
            };
            const me = this;
            http.postApi(config.API_GET_COIN_ORDER, pData, function (resp) {
                uni.hideLoading();
                uni.stopPullDownRefresh();
                if (resp.data.code === 200) {
                    let recordList = me.recordList;
                    var topUp_recordList = resp.data.data.list;
                    recordList.push.apply(recordList, topUp_recordList);
                    me.setData({
                        recordList: recordList,
                        isLoading: false
                    });
                }
            });
        },

        loadApiGetCoinHisttoryList() {
            const pData = {
                size: this.limit_page,
                page: this.start_page,
                type: this.type === 'group' ? '2' : '1'
            };
            const me = this;
            http.postApi(config.API_GET_COIN_HISTORY, pData, function (resp) {
                uni.hideLoading();
                uni.stopPullDownRefresh();
                if (resp.data.code === 200) {
                    let walletList = me.walletList;
                    var wallet_list = resp.data.data.list;
                    walletList.push.apply(walletList, wallet_list);
                    me.setData({
                        walletList: walletList,
                        isLoading: false
                    });
                }
            });
        },

        // loadWarnList() {
        //   const me = this
        //    common.loading()
        //   const pData = {
        //     size: me.data.limit_page,
        //     page: me.data.start_page
        //   }
        //   http.postRequest(config.API_ALARM_SUMMARY, pData, function(resp) {
        //       wx.hideLoading()
        //     wx.stopPullDownRefresh()
        //     if(resp.data.code === 200) {
        //       let alarmList = me.data.alarmList
        //       var alarm_list = resp.data.data.list
        //       for(var i=0;alarm_list.length > i;i++){
        //         var import_alarm_list = alarm_list[i].alarm_setting[0].list
        //         var warn_alarm_list = alarm_list[i].alarm_setting[1].list
        //         var importAlarmList = []
        //         var warnAlarmList = []
        //         for(var j=0;import_alarm_list.length >j;j++){
        //           importAlarmList.push(import_alarm_list[j].alarmName)
        //         }
        //         for(var m=0;warn_alarm_list.length >m;m++){
        //           warnAlarmList.push(warn_alarm_list[m].alarmName)
        //         }
        //         alarm_list[i].importAlarm = importAlarmList.toString()
        //         alarm_list[i].warnAlarm = warnAlarmList.toString()
        //       }
        //       console.log(alarm_list)
        //       alarmList.push.apply(alarmList, alarm_list)
        //       me.setData({
        //         alarmList: alarmList,
        //         alarmStatus:resp.data.data.close_alarm,
        //         coin:resp.data.data.coin,
        //         isLoading: false
        //       })
        //     } else {
        //       common.simpleToast(resp.data.msg)
        //     }
        //   })
        // }
        loadGetCoin() {
            const me = this;
            http.postApi(config.API_GET_COIN, {}, function (resp) {
                if (resp.data.code === 200) {
                    me.setData({
                        coin: resp.data.data.coin,
                        is_main: resp.data.data.is_main
                    });
                }
            });
        }
    }
};
</script>
<style>
@import './paymentDetail.css';
</style>