YXGJ/store/orderForm/index.vue

<template>
    <view>
        <u-tabs :list="types" :activeStyle="{ fontWeight: 'bold', color: '#C30D23' }" lineColor="#C30D23"
            @change="changeStatus" />
        <view class="date-box">
            <view class="date" @click="openFilter">
                <text class="iconfont icon-sousuo" />
                起始：
                <text class="value">
                    {{ content.where.begindate_create || '' }}
                </text>
            </view>
            <view class="date" @click="openFilter">
                <text class="iconfont icon-sousuo" />
                结束：
                <text class="value">
                    {{ content.where.enddate_create || '' }}
                </text>
            </view>
            <view class="search" @click.stop="setSearchShow">
                <text class="iconfont icon-sousuo" />
            </view>
        </view>
        <u-transition :show="searchShow">
            <view class="My_search-box">
                <My_search :value="content.where.condition" @onSearch="onSearch">
                    <view class="cancel" v-if="content.where.condition" hover-class="navigator-hover" @click="onSearch('')">
                        取消
                    </view>
                    <view v-else style="width: 5px;" />
                </My_search>
            </view>
        </u-transition>
        <filtrate ref="Filtrate" :filtrateList="filtrateList" @onFiltration="onFiltration" />

        <My_listbox ref="List" @getlist="getList">
            <navigator v-for="item in list" :key="item.sa_custorderid" class="item"
                :url="'/store/orderForm/detail?id=' + item.sa_custorderid" hover-class="navigator-hover">
                <view class="sonum">
                    订单号:{{ item.sonum }}
                    <text :style="{ color: item.status == '待付款' ? '#E3041F' : '#666666' }">
                        {{ item.status }}
                    </text>
                </view>

                <view class="product">
                    <u--image :src="item.cover" width="86" height="80" radius="8" lazy-load>
                        <template v-slot:loading>
                            <u-loading-icon color="red"></u-loading-icon>
                        </template>
                    </u--image>
                    <view class="content">
                        <view class="product-title u-line-1">
                            {{ item.itemname }}
                        </view>
                        <view class="price">
                            总计 <text style="color: #E3041F;">￥</text>
                            <text style="color: #E3041F;font-size: 18px;font-weight: bold;">
                                {{ CNY(item.price, '') }}
                            </text>
                            <text style="color: #E3041F;">元</text>
                        </view>
                    </view>
                </view>
                <view class="but-box" v-if="item.status == '待付款'">
                    <view />
                    <view class="but" hover-class="navigator-hover" hover-stop-propagation="false">
                        付款
                    </view>
                </view>
            </navigator>
        </My_listbox>
    </view>
</template>

<script>
export default {
    data() {
        return {
            types: [
                { name: "全部" },
                { name: "待付款" },
                { name: "已付款" },
            ],
            searchShow: false,
            content: {
                "where": {
                    "condition": "",
                    "status": "",
                    "begindate_create": this.daysAgo(1).begindate,
                    "enddate_create": this.daysAgo(1).enddate
                }
            },
            list: [],
            filtrateList: [
                {
                    type: "dateRange",
                    title: "时间区间",//组名称
                    day: 1,
                    key: 'create',//提交时返回的Key
                    begindate: this.daysAgo(1).begindate,
                    enddate: this.daysAgo(1).enddate
                }
            ]
        }
    },
    created() {
        this.getList(true)
        uni.setNavigationBarTitle({
            title: '商城订单',
        })
    },
    methods: {
        getList(init = false) {
            if (this.paging(this.content, init)) return;
            this.$Http.basic({
                "id": "20240507100302",
                content: this.content
            }).then(res => {
                console.log("订单列表", res)
                this.$refs.List.RefreshToComplete()
                if (this.cutoff(res.msg)) return;
                res.data = res.data.map(v => {
                    v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sa_fad") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
                    return v
                })
                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data), this.colors;
                this.content = this.$refs.List.paging(this.content, res)
            })
        },
        changeStatus({ name }) {
            this.content.where.status = name == '全部' ? '' : name;
            this.getList(true)
        },
        openFilter() {
            this.$refs.Filtrate.changeShow();
        },
        onSearch(condition) {
            if (condition == this.content.where.condition) return;
            this.content.where.condition = condition;
            this.getList(true);
        },
        onFiltration(e) {
            this.content.where.begindate_create = e.create.begindate;
            this.content.where.enddate_create = e.create.enddate;
            this.getList(true);
        },
        setSearchShow() {
            this.searchShow = !this.searchShow;
            setTimeout(() => {
                this.$refs.List.setHeight()
            }, 300);
        }
    },

}
</script>

<style lang="scss" scoped>
.date-box {
    display: flex;
    width: 100vw;
    background: #fff;
    padding: 5px 16px;
    box-sizing: border-box;

    .date {
        flex: 1;
        line-height: 20px;
        font-size: 14px;

        .iconfont {
            margin-right: 5px;
            color: #707070;
        }

        .value {
            color: #C30D23;
        }
    }

    .search {
        color: #999999;
        font-size: 14px;
        line-height: 20px;
        padding-left: 10px;
    }
}

.item {
    width: 355px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    margin: 10px auto 0;

    .sonum {
        display: flex;
        justify-content: space-between;
        height: 20px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #333333;
    }

    .product {
        display: flex;
        margin-top: 12px;

        .content {
            margin-left: 20px;

            .product-title {
                margin-top: 10px;
                line-height: 24px;
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-weight: bold;
                font-size: 16px;
                color: #333333;
            }

            .price {
                margin-top: 10px;
            }
        }

    }

    .but-box {
        display: flex;
        justify-content: space-between;

        .but {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 100px;
            height: 40px;
            background: #C30D23;
            border-radius: 5px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #FFFFFF;
        }
    }
}

.My_search-box {
    background: #fff;
    width: 100vw;
    padding: 5px;
    padding-left: 10px;
    box-sizing: border-box;

    .cancel {
        line-height: 30px;
        margin-left: 10px;
        padding: 0 10px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #666666;
        border-radius: 4px;
    }
}
</style>