front-end/ghsApp/src/admin/custom/noExpend.vue

<template>
<view class="app-content">
    <view class="ex-page">
        <view class="top-bar">
            <view style="margin-left:50upx;display: flex;align-items: center;font-size:28upx;">
                最近<button class="admin-button-com blue mini-btn" @click="changeDay" style="margin:0 3upx 0 3upx;">{{recentDay}}天</button>未下单
            </view>
        </view>
        <view class="main-view">
            <view class="space-view ex-table">
                <block>
                    <t-table :headerBackgroundColor="'#F0F2F6'">
                        <t-tr header><t-th>ID</t-th><t-th>客户名称</t-th><t-th>最后下单日</t-th></t-tr>
                            <block v-if="list.data && !$util.isEmpty(list.data)">
                                <view v-for="(item, index) in list.data" :key="index" @click.stop="pageTo({url:'/pagesClient/member/detail?id='+item.id})">
                                    <t-tr>
                                        <t-td><view style="color:#333333;font-size:28upx;">{{item.id}}</view></t-td>
                                        <t-td><view style="color:#333333;font-size:28upx;">{{item.name}}</view></t-td>
                                        <t-td>
                                            <view style="color:#333333;font-size:28upx;" v-if="item.recentExpend!='0000-00-00 00:00:00'">{{item.recentExpend?item.recentExpend.substr(0,10):''}}</view>
                                            <view style="color:#333333;font-size:28upx;" v-else>没有下单</view>
                                        </t-td>
                                    </t-tr>
                                </view>
                            </block>
                    </t-table>
                </block>
            </view>
        </view>
    </view>

    <modal-module :show="recentDayShow" @click="confirmDayFn" :maskClosable="true" title="天数" padding="30rpx 30rpx" >
    <template v-slot:content>
        <div class="app-modal-input-wrap">
        <div class="inp-list-line">
            <div class="line-input">
            <input type="number" ref="input" style="width:61.8%;text-align:center;" @blur="recentBlur" :focus="recentFocus" v-model="recentUnDay" :adjust-position="false" class="inp-input" />
            </div>
        </div>
        </div>
    </template>
    </modal-module>

</view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { list } from "@/mixins";
import ShopSelect from "@/components/module/shopSelect";
import DateSelect from "@/components/module/dateSelect";
import AppSearchModule from "@/components/module/app-search";
import { getList } from "@/api/member";
import {mapActions, mapGetters} from "vuex";
import ModalModule from "@/components/plugin/modal"
export default {
    components: { 
        AppWrapperEmpty,
        ShopSelect,
        AppSearchModule,
        DateSelect,
        ModalModule
    },
    mixins: [list],
    computed: {
        ...mapGetters(["getDictionariesInfo","getLoginInfo"])
    },
    data() {
        return {
            recentDay:7,
            recentUnDay:7,
            recentDayShow:false,
            recentFocus:false
        };
    },
    onLoad() {
        this.getCustomList()
    },
    onPullDownRefresh() {
        this.resetList();
        this.getCustomList()
        uni.stopPullDownRefresh()
    },
    onReachBottom() {
        if (!this.list.finished) {
            if (this.list.totalPage != null && this.list.page > this.list.totalPage) {
                this.list.finished = true
                return;
            }
            this.getCustomList().then((res) => {
                uni.stopPullDownRefresh();
            })
        } else {
            uni.stopPullDownRefresh();
        }
    },
    methods: {
        init() {
        },
        changeDay(){
            let that = this
            that.recentDayShow = true
            that.recentUnDay = ''
            setTimeout(x => {
                this.$nextTick(() => {
                    that.recentFocus = true
                })
            }, 200)
        },
        recentBlur() {
            this.recentFocus = false
        },
        getCustomList() {
            return getList({type:4, page: this.list.page,recentDay:this.recentDay}).then((res) => {
                this.completes(res);
                if (this.$util.isEmpty(res.data)){
                    return false;
                }
            })
        },
        confirmDayFn(val) {
            let that=this;
            if (val.index == 0) {
                that.recentDayShow = false
                that.recentFocus = false
                return
            }
            this.recentDay = this.recentUnDay
            this.resetList()
            this.getCustomList()
            this.recentDayShow = false
            this.recentFocus = false
        }
    }
};
</script>
<style lang="scss" scoped>
.ex-page {
    background: white;
    padding-top:20upx;
    height: 100%;
    display: flex;
    flex-direction: column;
    .top-bar {
        position: absolute;
        left: 0;
        top:30upx;
        display: flex;
        width: 100%;
        z-index: 20;
        .bar{
            width: 50%;
            height: 100%;
            text-align: center;
            &:nth-child(1){
                border-right: 1upx solid #eeeeec;
            }
        }
    }
    .main-view {
        margin-top:70upx;
        flex: 1;
        background-color: #f9fbfc;
        .space-view {
            background-color: #fff;
            .change-level{
                font-size:22upx;
                padding:10upx 15upx;
            }
        }
        .ex-info {
            padding: 30upx;
            .info-cell {
                display: flex;
                align-items: center;
                font-size: 28upx;
                &:not(:first-child) {
                    margin-top: 20upx;
                }
                .cell-label {
                    width: 110upx;
                    color: #666666;
                }
                .cell-value {
                    margin-left: 40upx;
                    color: #333;
                    &.warning {
                        color: #ffaf1d;
                    }
                    &.success {
                        color: #27c325;
                    }
                }
            }
        }
        .ex-table {
            ::v-deep.icon-info {
                color: #333333;
            }
        }
    }
    .bar-view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30upx;
        width: 100%;
        height: 100upx;

        box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
        .info-view {
            font-size: 26upx;
        }
        .btn-view {
            display: flex;
            .admin-button-com {
                margin: 0 10upx;
            }
        }
    }
}
</style>