H5_QiCaiYao/pages_tool/member/exchange_record.vue

<template>
	<view class="exchange_record">
		<div class="tabs">
			<u-tabs
				:list="tabList"
				:scrollable="false"
				lineColor="#21BBF3"
				:activeStyle="{
					fontSize: '28rpx',
					fontWeight: 600,
					color: '#21BBF3'
				}"
				@click="click"
			></u-tabs>
		</div>
		<whole v-if="indexa == 0"></whole>
		<!-- <paid v-if="indexa == 1"></paid> -->
		<received v-if="indexa == 1"></received>
		<Completed v-if="indexa == 2"></Completed>
	</view>
</template>

<script>
import whole from './whole.vue';
// import paid from './paid.vue';
import received from './received.vue';
import Completed from './Completed.vue';
export default {
	components: {
		whole,
		// paid,
		received,
		Completed
	},
	data() {
		return {
			indexa: 0,
			tabList: [
				{
					name: '全部'
				},
				{
					name: '待收货'
				},
				{
					name: '已收货'
				}
			]
		};
	},
	onShow() {},
	methods: {
		click(index) {
			this.indexa = index.index;
		}
	}
};
</script>

<style lang="scss">
.exchange_record {
	line-height: 1;

	.goods-list {
		padding: 32rpx;

		.goods-item {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
			margin-bottom: 32rpx;
			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.btn1 {
					width: 176rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #fff;
					text-align: center;
					line-height: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					margin-left: 24rpx;
					background: #21bbf3;
				}

				.cancel {
					width: 176rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					text-align: center;
					line-height: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 2rpx solid #e8e8e8;
				}
			}

			.status-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.status {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #f33b50;
				}

				.disburse {
					margin: 36rpx 0 22rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;

					span {
						font-size: 40rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #222222;
					}
				}
			}

			.goods-info {
				display: flex;
				align-items: center;

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 176rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						line-height: 40rpx;
					}

					.integral {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.cover {
					margin-right: 24rpx;
					width: 176rpx;
					min-width: 176rpx;
					height: 176rpx;
					border-radius: 8rpx;
				}
			}
		}
	}

	.tabs {
		background-color: #fff;
		padding: 10rpx 0 6rpx;
	}
}
</style>