You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
2.9 KiB
122 lines
2.9 KiB
<template>
|
|
<view class="cardList">
|
|
<view class="container" @click="toOrderDetails(item)" v-for="(item, index) in cardListData" :key="index">
|
|
<view class="head">
|
|
<text class="orderTime">下单时间：{{item.createTime}}</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.image" alt="">
|
|
</view>
|
|
<view class="right">
|
|
<view class="detailed">
|
|
<view class="title">{{item.title}}</view>
|
|
<view class="date">{{item.startTime}}</view>
|
|
<view class="address">{{item.address}}</view>
|
|
</view>
|
|
<view class="price"><text>总计</text>¥{{item.price}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="button-sp-area">
|
|
<button @click.stop="skip(item,0)" v-if="item.state == 1" :style="{background: '#34312E;', color: '#AFAFAF',margin:'0 30rpx 0 0'}"
|
|
class="mini-btn" size="mini">取消活动</button>
|
|
<button @click.stop="skip(item,1)" v-if="item.state == 1" :style="{background: '#492623;', color: '#FF3E3F',margin:'0 30rpx 0 0'}"
|
|
class="mini-btn" size="mini">活动签到</button>
|
|
<button @click.stop="skip(item,2)" v-if="item.state == 2" :style="{background: '#492623;', color: '#FF3E3F',margin:'0 30rpx 0 0'}"
|
|
class="mini-btn" size="mini">评价活动</button>
|
|
<button @click.stop="skip(item,3)" v-if="item.state == 2" :style="{background: '#49361D;', color: '#FFB245',margin:'0 30rpx 0 0'}"
|
|
class="mini-btn" size="mini">开具发票</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 0;
|
|
|
|
.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>
|