popularize-front/components/cart/CardList.vue

<template>
    <view class="cardList">
        <view class="container" @click="toOrderDetails" 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 cardStyle_" :class="['U','S'].includes(item.state) ? 'content_border' : ''">
                <view class="left">
                    <image :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.stop="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) {
			this.$emit('btnClick', val)
		},
		toOrderDetails(val) {
			this.$emit('toOrderDetails', val)
		}
    }
};
</script>

<style scoped lang="scss">
    .cardList {
        padding: 10rpx 32rpx 250rpx;
        .container {
            margin-top: 31rpx;
            padding: 25rpx 0;
            border-radius: 20rpx;
            background: $uni-color-card-background;
            .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;
            }
            .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>