building-materials-shop-uniapp-241014/pages/index/order.vue

<template>
    <view class="page">

        <navbar title="订单中心" bgColor="#DC2828" color="#fff" leftClick @leftClick="$utils.navigateBack" />

        <uv-tabs :list="tabs" :activeStyle="{ color: '#FD5100', fontWeight: 600 }" lineColor="#FD5100" lineHeight="8rpx"
            lineWidth="50rpx" :scrollable="false" @click="clickTabs"></uv-tabs>

        <view v-if="orderList.records.length > 0" class="list">
            <view class="item" v-for="(item, index) in orderList.records" @click="toOrderDetail(item.id)" :key="index">

                <!-- 顶部 -->
                <view class="top">
                    <view class="service">
                        <text>{{ item.title }}</text>
                        <!-- <text>{{ item.type_dictText }}</text> -->
                    </view>
                    <view class="status">
                        <text> {{ tabs[item.status - 1 + 2].name }}</text>
                    </view>
                </view>
                <!-- 中 -->
                <view class="content">
                    <view class="left">
                        <image mode="aspectFill" :src="item.image"></image>
                    </view>
                    <view class="right">
                        <view class="text-hidden-1">
                            客户姓名：{{ item.name }}
                        </view>
                        <view class="text-hidden-1">
                            下单时间：{{ item.createTime }}
                        </view>
                        <view class="text-hidden-1">
                            联系电话：{{ item.phone }}
                        </view>
                    </view>
                </view>
                <!-- 底 -->
                <view class="bottom">
                    <view class="price">
                        总价格：<text class="num">￥{{ item.price }}元</text>
                    </view>
                    <view class="b2" v-if="item.status == 0" @click.stop="toPayOrder(item)">
                        立即支付
                    </view>
                    <view class="b2" v-if="item.status == 1" @click.stop="confirmOrder(item)">
                        确认收货
                    </view>
                    <view class="b1" v-if="item.status == 0" @click.stop="cancelOrder(item)">
                        取消订单
                    </view>
                    <!-- <view class="b1" v-if="item.status != 0">
                        联系客服
                    </view> -->
                </view>

            </view>
        </view>

    </view>
</template>

<script>
import orderMixin from '@/mixins/order.js'
export default {
    mixins: [orderMixin],
    components: {
    },
    computed: {
    },
    data() {
        return {
            tabs: [
                {
                    name: '全部'
                },
                {
                    name: '待付款'
                },
                {
                    name: '配送中'
                },
                {
                    name: '已完成'
                },
                {
                    name: '已取消'
                }
            ],
            queryParams: {
                pageNo: 1,
                pageSize: 10
            },
            orderList: {
                records: [],
                total: 0,
            },
            state: -1,
        }
    },
    onShow() {
        this.getData()
    },
    //滚动到屏幕底部
    onReachBottom() {
        if (this.queryParams.pageSize < this.orderList.total) {
            this.queryParams.pageSize += 10
            this.getData()
        }
    },
    methods: {
        getData() {
            let queryParams = {
                ...this.queryParams,
            }
            if (this.state != -1) {
                queryParams.state = this.state
            }
            this.$api('getOrderPageBean', queryParams, res => {
                if (res.code == 200) {
                    this.orderList = res.result
                }
            })
        },
        //点击tab栏
        clickTabs({ index }) {
            if (index == 0) {
                this.state = -1;
            } else {
                this.state = index - 1;
            }
            this.queryParams.pageSize = 10
            this.getData()
        },
        //跳转订单详情页面
        toOrderDetail(id) {
            uni.navigateTo({
                url: '/pages_order/order/orderDetail?id=' + id
            })
        },
        getOrderList() {

        },
    }
}
</script>

<style scoped lang="scss">
.page {}

.list {
    .item {
        width: calc(100% - 40rpx);
        background-color: #fff;
        margin: 20rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        padding: 30rpx;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 30rpx;

            .service {}

            .status {
                font-size: 26rpx;
                font-weight: 600;
                color: $uni-color;
            }
        }

        .content {
            display: flex;
            margin: 10rpx 0;

            .left {
                width: 150rpx;
                height: 150rpx;
                border-radius: 10rpx;

                image {
                    width: 150rpx;
                    height: 150rpx;
                    border-radius: 10rpx;
                }
            }

            .right {
                width: calc(100% - 160rpx);
                color: #777;
                font-size: 24rpx;
                padding-left: 20rpx;
                line-height: 40rpx;
                background-color: #F8F8F8;
            }
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            font-size: 25rpx;

            .price {
                color: #787777;
                font-weight: 900;

                text {
                    color: #fd7d41;
                    font-size: 26rpx;
                }
            }

            .b1 {
                border: 1px solid #777;
                color: #777;
                box-sizing: border-box;
            }

            .b2 {
                background: linear-gradient(178deg, $uni-color, #d34f4f);
                color: #fff;
            }

            view {
                margin: 12rpx;
                border-radius: 28rpx;
                padding: 8rpx 28rpx;
                margin-bottom: 0;
            }
        }
    }
}
</style>