zyejMAll-mobile/pages/activity/point/exchange_list.vue

<template>
	<s-layout title="兑换记录" color="white" :bgStyle="{ color: '#fff' }" opacityBgUi=""
		navbarbackgroundColor="rgba(193,145,81)">
		<view class="container">
			<view class="card" v-for="(item, index) in reservationList" :key="index">
				<view class="top">
					订单时间:
					{{
						sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd')
					}}
				</view>
				<view class="left">
					<image :src="item.picUrl" class="img"></image>
				</view>
				<view class="right">
					<view class='t ss-line-2'>{{item.name}}</view>
					<!-- <view class='c'>共<text class="c-t">{{item.count}}</text>件商品</view>
					<view class='b'>来自:</view> -->
					<view class="card-bottom">
						<view class="card-left">
							<!-- <image
								src="https://zysc.fjptzykj.com:3000/shangcheng/d1dd98b6a37ea9ea90c49898024d3669a54ee2a48f028b671609937b6b1250af.png"
								class="img" mode=""></image> -->
							<!-- <text class="card-c">×</text> -->
							<view class="card-r">-{{item.usePoint}} 积分</view>
						</view>
						<view class="r-cart" @click="sheep.$router.go('/pages/activity/point/exchange_detail', { id: item.id })">查看详情</view>
					</view>
				</view>

				<view class="r-cart r-top" :class="item.status == 40 ? 'hui' : ''">{{item.label}}</view>
			</view>

		</view>
	</s-layout>
</template>

<script>
	import {
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import request from '@/sheep/request';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	export default {
		data() {
			return {
				memberId: null,
				reservationList: [],
				page: 1,
				limit: 10,
				totalPages: 1,
				sheep
			};
		},
		created() {
			this.memberId = computed(() => sheep.$store('user').userInfo).value.id
			this.getList();
		},
		methods: {
			getList() {
				request({
					// url: `${baseUrl}${apiPath}/h5/reservation/list`,
					url: `${baseUrl}${apiPath}/trade/order/getPointOrder`,
					method: 'GET',
					// params: {
					// 	userId: this.memberId,
					// },
					custom: {
						showLoading: false,
					},
				}).then((res) => {
					this.reservationList = res.data
					console.log('this.reservationList', this.reservationList)
				});
				// uni.request({
				// 	url: `${baseUrl}${apiPath}/h5/reservation/list`, // 接口地址
				// 	data: {
				// 		userId:this.memberId,
				// 	},
				// 	success: (res) => {
				// 		console.log(res.data);
				// 		this.reservationList = res.data.rows
				// 	},
				// 	fail: (error) => {
				// 		console.log(error)
				// 	}
				// })
			},
		}
	};
</script>


<style scoped lang="scss">
	.container {
		width: 100%;

		.card {
			width: 86%;
			padding: 7px 15px;
			background: white;
			margin: 10px auto;
			border-radius: 13px;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			box-shadow: 3px -2px 12px 7px rgba(0, 0, 0, 0.05);

			.top {
				width: 100%;
				padding-bottom: 6px;
				color: rgba(127, 128, 128);
				font-size: 11px;
			}

			.r-cart {
				// position:absolute;
				// top:0;
				// right:0;
				padding: 2px 11px;
				border-radius: 12px;
				height: 20px;
				line-height:20px;
				background: rgba(193, 145, 81);
				color: white;
				font-size: 11px;
				text-align: center;

				&.hui {
					background: rgba(223, 241, 244);
					color: rgba(75, 79, 82);
				}
				
			}
			.r-top{
				position:absolute;
				top:0;
				right:0;
				background:rgba(242, 232, 218);
				border-radius: 0px 12px 0px 12px;
				color:rgba(163,109,45);
			}
			.left {
				width: 70px;
				height: 70px;
				margin-right: 10px;
				border-radius: 12px;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 12px;
				}
			}

			.right {
				flex: 1;
				position: relative;

				.t {
					font-size: 15px;
					font-weight: 700;
				}

				.card-bottom {
					position: absolute;
					bottom: 0;
				}

				.c {
					font-size: 14px;
					margin: 5px 0;

					.c-t {
						color: #cccc08;
					}
				}

				.b {
					font-size: 14px;
					color: #dbcccc;
				}
			}
		}

		.card-bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.card-left {
				width: 48%;
				display: flex;
				align-items: center;

				.img {
					width: 20px;
					height: 20px;
				}

				.card-r {
					color: rgba(162, 75, 72);
					font-size: 16px;
					font-weight: 700;
				}
			}

			.card-right {
				flex: 1;
				text-align: right;
			}
		}
	}
</style>