fanxing-shop/pages/order/index.vue

<!-- 我的订单 -->
<template>
    <view class="order">
        <view class="tabs">
            <u-tabs :list="tabLists" lineWidth="40" lineHeight="8" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
                color: '#0D121A',
                fontSize: '32rpx',
                fontWeight: 'bold',
                transform: 'scale(1.05)'
            }" :inactiveStyle="{
                color: '#9EA3B1',
                fontSize: '28rpx',
                transform: 'scale(1)'
            }" itemStyle="padding-left: 18px; padding-right: 18px; height: 56px;" @click="tabsChange">
            </u-tabs>
        </view>
        <view class="content">
            <mescroll-body height="100%" class="custom-height" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
                :up="upOption" @up="upCallback">
                <view class="order-list" v-if="arrList && arrList.length">
                    <view class="tab-content" v-for="(item, index) in arrList" :key="index">
                        <view class="order-top flex jcsb aic">
                            <text class="name">{{ item.name }}</text>
                            <text class="status">{{ item.statusName }}</text>
                        </view>
                        <view class="order-middle flex jcsb aifs">
                            <view class="order-middle-left">
                                <view>拍摄场景：6个</view>
                                <view>交付周期：20天</view>
                            </view>
                            <view class="order-middle-right flex aic">
                                <text class="right-label fs24">应付款</text>
                                <text class="right-money fs28"><text class="fs24">¥</text>2500</text>
                            </view>
                        </view>
                        <view class="order-bottom flex jcsb aic">
                            <view class="order-bottom-left flex aic">
                                <image :src="timeImg" class="time-img"></image>
                                <text class="time fw400"><text class="fw500">{{ item.time }}</text>后自动取消</text>
                            </view>
                            <view class="order-bottom-right flex aic">
                                <view class="btn btn1 p2">取消</view>
                                <view class="btn btn2 p1">支付</view>
                                <!-- <view class="btn3">寄样</view> -->
                            </view>
                        </view>
                    </view>
                </view>
                <no-data :statusType="2" tipsText="暂无记录" v-if="!isInit && !arrList.length"></no-data>
            </mescroll-body>
        </view>

    </view>
</template>

<script>
import MescrollMixin from "@/plugins/mescroll/components/mescroll-uni/mescroll-mixins.js";
import MescrollBody from '@/plugins/mescroll/components/mescroll-uni/mescroll-uni.vue';
import { orderApi } from '@/apis/order.js';
export default {
    mixins: [MescrollMixin],
    components: {
        MescrollBody
    },
    data() {
        return {
            page: 1,
            limit: 10,
            lineBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_line.png',
            timeImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_time.png',
            arrList: [
                {
                    status: 1,
                    name: 'A类套餐(50条视频)',
                    orderNo: '20200709123456789',
                    time: '34:56',
                    price: '100.00',
                    status: 1,
                    statusName: '待付款',
                    statusColor: '#FF5E00',
                    statusIcon: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_daifukuan%403x.png'

                }
            ],
            isInit: false,
            paymentStatus: 1,
            tabLists: [
                {
                    name: '全部',
                    value: 0
                },{
                    name: '待付款',
                    value: 1
                },{
                    name: '拍摄中',
                    value: 2
                }, {
                    name: '已完成',
                    value: 3
                }
            ]
        };
    },
    computed: {},
    watch: {},
    methods: {
        tabsChange(item){
            console.log(item,'item');
        },
        getList() {
            let params = {
                paymentStatus:this.paymentStatus,
                page: 1,
                limit: 10,
            }
            orderApi(params).then(res => {
                console.log(res);
            })
        }
    },
    created() {

    },
    mounted() {

    },
}
</script>
<style lang='scss' scoped>
.order {
    height: 100vh;
    background-color: #EDEFF5;
    display: flex;
    flex-direction: column;

    .tabs {
        background-color: #FFF;
        padding: 0 28rpx 12rpx;
    }

    .content{
        flex: 1;
        overflow: hidden;
    }
    .order-list {
        padding: 24rpx;

        .tab-content {
            padding: 40rpx 36rpx;
            width: 100%;
            // height: 296rpx;
            background: #FFFFFF;
            border-radius: 24rpx;

            .order-top {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .name {
                    font-weight: bold;
                    font-size: 32rpx;
                    color: #0D121A;
                }

                .status {
                    font-size: 28rpx;
                    color: #FF7441;
                }

                .status2 {
                    font-size: 28rpx;
                    color: #0D121A;
                }

                .status3 {
                    font-size: 28rpx;
                    color: #9EA3B1;
                }
            }

            .order-middle {
                margin-top: 32rpx;
                color: #0D121A;

                .order-middle-left {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #9EA3B1;
                }

                .order-middle-right {
                    .right-label {
                        font-weight: 400;
                        margin-right: 8rpx;
                    }

                    .right-money {
                        font-weight: 500;
                    }
                }
            }

            .order-bottom {
                margin-top: 16rpx;

                .order-bottom-left {
                    .time-img {
                        margin-right: 8rpx;
                        width: 48rpx;
                        height: 48rpx;
                    }

                    .time {
                        color: #FF7441;
                        font-size: 24rpx;
                    }
                }

                .order-bottom-right {
                    .p1 {
                        padding: 18rpx 44rpx;
                    }

                    .p2 {
                        padding: 16rpx 42rpx;
                    }

                    .btn {
                        font-weight: 500;
                        font-size: 28rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 36rpx;
                    }

                    .btn1 {
                        color: #0D121A;
                        border: 3rpx solid #E2E4EB;
                    }

                    .btn2 {
                        margin-left: 16rpx;
                        background: #FF7441;
                        color: #FFF;
                    }
                }
            }
        }
    }
}
</style>