popularize-front/components/cart/CardList.vue

<template>
    <view class="cardList">
        <view class="container" v-for="(item, index) in cardListData" :key="index">
            <view class="head">
                <text class="orderTime">下单时间：{{item.orderTime}}</text>
                <text class="orderStatus" :class="item.state === 'U' ? 'active' : ''">{{item.stateText}}</text>
            </view>
            <view class="content" :class="['U','S'].includes(item.state) ? 'content_border' : ''">
                <view class="left">
                    <img :src="item.imgUrl" alt="">
                </view>
                <view class="right">
                    <view class="detailed">
                        <view class="title">{{item.title}}</view>
                        <view class="date">{{item.time}}</view>
                        <view class="address">{{item.address}}</view>
                    </view>
                    <view class="price"><text>总计</text>¥{{item.totalPrice}}</view>
                </view>
            </view>
            <view class="button-sp-area" v-if="Array.isArray(item.btnObj) && item.btnObj.length > 0">
				<button @click="skip(val)" :style="{background: val.bgColor, color: val.color}" v-for="(val, i) in item.btnObj" :key="i" class="mini-btn" size="mini">{{val.btnTitle}}</button>
			</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        cardListData : {
            type : Array,
            default : []
        },
    },
    data() {
        return {
            
        };
    },
    components: {

    },
    computed: {
    },
    watch: {

    },
    created() {

    },
    mounted() {    
    },
    methods: {
		skip(val) {
			uni.navigateTo({
				url:'/pages_order/orderDetails'
			})
		}
    }
};
</script>

<style scoped lang="scss">
    .cardList {
        padding: 10rpx 32rpx 250rpx;
        .container {
            margin-top: 31rpx;
            padding: 25rpx 0;
            border-radius: 20rpx;
            background: #1B1713;
            .head {
                display: flex;
                justify-content: space-between;
                padding: 0 35rpx 28rpx;
                border-bottom: 1px solid #2A2A2A;
                .orderTime {
                    font-size: 25rpx;
                    color: $uni-text-color-grey;
                }
                .orderStatus {
                    font-size: 26rpx;
                    color: #ccc;
                }
            }
            .content_border {
                border-bottom: 1px solid #2A2A2A;
            }
            .content {
                display: flex;
                padding: 24rpx 35rpx;
                .left {
                    width: 228rpx;
                    height: 228rpx;
                    border-radius: 20rpx;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex: 1;
                    margin-left: 26px;
                    color: $uni-text-color-grey;
                    font-size: 24rpx;
                    .detailed {
                        .title {
                            font-size: 32rpx;
                            color: #fff;
                            padding-top: 11rpx;
                        }
                        .date {
                            padding: 25rpx 0 19rpx;
                            display: flex;
                            align-items: center;
                            &::before {
                                content: '';
                                display: block;
                                background: url('@/static/image/cart/timeIcon.png') no-repeat;
                                background-size: 100% 100%;
                                width: 24rpx;
                                height: 24rpx;
                                margin-right: 10rpx;
                            }
                        }
                        .address {
                            display: flex;
                            align-items: center;
                            &::before {
                                content: '';
                                display: block;
                                background: url('@/static/image/cart/addressIcon.png') no-repeat;
                                background-size: 100% 100%;
                                width: 22rpx;
                                height: 26rpx;
                                margin-right: 10rpx;
                            }
                        }
                    }
                    .price {
                        font-size: 28rpx;
                        color: #fff;
                        text-align: right;
                        text {
                            color: $uni-text-color-grey;
                            font-size: 25rpx;
                            padding-right: 10rpx;
                        }
                    }
                }
            }
            .button-sp-area {
                text-align: right;
                padding-top: 20rpx;
                .mini-btn {
                    width: 166rpx;
                    height: 53rpx;
                    line-height: 53rpx;
                    font-size: 24rpx;
                    border-radius: 50rpx;
                    margin-left: 20rpx;
                    background-color: #34312E;
                    color: #AFAFAF;
                }
            }
        }
    }
    .active {
        color: $uni-color-primary!important;
    }
</style>