popularize-front/components/cart/CardList.vue

<template>
	<view class="cardList">
		<view class="container" @click="toOrderDetails(item)" v-for="(item, index) in cardListData" :key="index">
			<view class="head">
				<text class="orderTime">{{$t('components.cart.cardList.orderTime')}}：{{item.createTime}}</text>
				<text class="orderStatus active">{{ stateText[item.state] }}</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="getImage(item)" mode="aspectFill"/>
				</view>
				<view class="right">
					<view class="detailed">
						<view class="title">{{ getTitle(item) }}</view>
						<!-- <view class="title">{{ item.title }}</view> -->
						<view class="date">{{item.startTime}}</view>
						<view class="address">{{ getAddress(item) }}</view>
						<!-- <view class="address">{{item.address}}</view> -->
					</view>
					<view class="price"><text>{{$t('components.cart.cardList.total')}}</text>¥{{item.payPrice}}</view>
				</view>
			</view>
			<view class="button-sp-area">
				
				<!-- <button @click.stop="skip(item,4)" v-if="item.state == 0" :style="{background: '#492623;', color: '#FF3E3F',margin:'0 30rpx 0 0'}"
				class="mini-btn" size="mini">立即支付</button> -->
				
				<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">{{$t('components.cart.cardList.cancelActivity')}}</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">{{$t('components.cart.cardList.signIn')}}</button>

				<button @click.stop="skip(item,2)" v-if="item.state == 2 && item.isPj == 'N'" :style="{background: '#492623;', color: '#FF3E3F',margin:'0 30rpx 0 0'}"
				class="mini-btn" size="mini">{{$t('components.cart.cardList.evaluate')}}</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">{{$t('components.cart.cardList.invoice')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cardListData: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				stateText : ['', this.$t('components.cart.cardList.states.pending'), this.$t('components.cart.cardList.states.completed'), this.$t('components.cart.cardList.states.cancelled')],
			};
		},
		components: {

		},
		computed: {},
		watch: {

		},
		created() {

		},
		mounted() {},
		methods: {
			skip(val, type) {
				this.$emit('btnClick', val, type)
			},
			toOrderDetails(val) {
				this.$emit('toOrderDetails', val)
			},
			getImage(item){
				return item.image && item.image.split(',')[0]
			},
			getTitle(item) {
				// 根据订单类型决定使用哪种对象类型进行国际化
				if (item.type == 0) {
					// 活动订单
					return this.$ot(item.activity, 'active', 'title')
				} else {
					// 旅行订单
					return this.$ot(item.travel, 'travel', 'title')
				}
			},
			getAddress(item) {
				// 根据订单类型决定使用哪种对象类型进行国际化
				if (item.type == 0) {
					// 活动订单
					return this.$ot(item.activity, 'active', 'address')
				} else {
					// 旅行订单
					return this.$ot(item.travel, 'travel', 'address')
				}
			},
		}
	};
</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>