H5_QiCaiYao/pages_tool/member/received.vue

<template>
	<view class="exchange_record">
		<div class="goods-list">
			<div
				class="goods-item"
				v-for="(item, index) in orderList"
				:key="index"
				@click="btn(item)"
				v-show="item.type == 1"
			>
			<!-- 虚拟商品不展示 -->
				<div class="order_no">订单号：{{ item.order_no }}</div>
				<div class="goods-info">
					<image
						:src="$util.img(item.goods_image)"
						mode="aspectFill"
						class="cover"
					></image>
					<div class="right">
						<div class="name">{{ item.goods_name }}</div>
						<div class="integral">
							<div class="price">
								{{ item.point }}积分
								<span v-if="Number(item.price)">+{{ item.price }}元</span>
							</div>
							<div>x{{ item.num }}</div>
						</div>
					</div>
				</div>
				<div class="status-box">
					<div class="status" v-show="item.order_status == 1">待发货</div>
					<div class="status" v-show="item.order_status == 3">已发货</div>
					<div class="disburse">
						实付：
						<span>
							{{ item.point }}积分
							<span v-if="Number(item.price)">{{ item.price }}元</span>
						</span>
					</div>
				</div>
				<!-- 	<div class="btns"><div class="btn1" @click="duihuan">查看物流</div></div> -->
			</div>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList: []
		};
	},
	mounted() {
		this.getAllOrderList();
	},
	methods: {
		getAllOrderList() {
			this.$api.sendRequest({
				url: '/api/goodsexchange/getExchangeOrderList',
				data: {
					order_status: 1
				},
				success: res => {
					console.log(res.data.list);
					this.orderList = res.data.list;
				}
			});
		},
		btn(item) {
			this.$util.redirectTo(`/pages_tool/details/details?order_id=${item.order_id}&im=1`);
		},

		quxiao() {
			//冒泡
			event.stopPropagation();
			this.$util.showToast({
				title: '取消成功'
			});
		},
		duihuan() {
			event.stopPropagation();
			this.$util.showToast({
				title: '兑换成功'
			});
		}
	}
};
</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;
					}
				}
			}
			.order_no {
				color: #aaa;
				margin-bottom: 30rpx;
			}
			.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>