web-app-v1/pages/zbs-exchangerecord/exchangerecord.vue

<template>
	<scroll-view
		:scroll-y="true"
		class="recordContainer"
	>
		<template v-if="list.length > 0">
			<view
				v-for="item in list" 
				:key="item.id"
				class="recordItem"
				:class="item.type ? 'voided' : ''"
			>
				<view class="header">
					<view class="time">{{ item.timestamp | dateFormatter('yyyy-MM-dd hh:mm:ss') }}</view>
					<view class="money">-{{ item.cost }}</view>
				</view>
				<view class="body">
					<view
						class="avatar"
						:style="{ backgroundImage: `url(${item.gift_info.imgurl})` }"
					/>
					<view class="info">
						<view class="name">{{ item.name }}</view>
						<view class="num">X{{ item.num }}</view>
					</view>
					<view class="voidBtn" v-if="!item.type" @click="publishDestoryGiftOrder(item)">取消兑换</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="noTip">暂无兑换记录</view>
		</template>
	</scroll-view>
</template>

<script>
	import { api_record, notGiftOrder } from '../../apis/zbs.js'
	export default {
		data() {
			return {
				list: []
			};
		},
		computed: {
			userServerInfo() {
				//用户服务器信息
				return this.$store.state.userinfo;
			},
		},
		onShow() {
			this.getRecordList()
		},
		methods: {
			publishDestoryGiftOrder(data) {
				const _this = this
				uni.showModal({
					content: "确认取消该兑换订单",
					success(res) {
						if(res.confirm) {
							uni.showLoading()
							notGiftOrder({ gift_id: data.id, user_id: _this.userServerInfo.id }).then(res => {
								uni.hideLoading()
								if(res.code === 200) {
									uni.showModal({
										content: "兑换订单取消成功",
										showCancel: false,
										success(res) {
											if(res.confirm) {
												_this.getRecordList()
												_this.$store.dispatch('onLaunch')
											}
										}
									})
								} else {
									uni.showModal({
										content: res.msg || '取消兑换订单失败',
										showCancel: false
									})
								}
							}).catch(() => {
								uni.hideLoading()
								uni.showModal({
									content:"取消兑换订单失败",
									showCancel: false
								})
							})
						}
					}
				})
			},
			getRecordList() {
				uni.showLoading()
				api_record({ user_id: this.userServerInfo.id }).then(res => {
					uni.hideLoading()
					if(res.code === 200) {
						this.list = res.data.list
					} else {
						uni.showModal({
							content: "获取兑换记录失败",
							showCancel:false
						})
					}
				}).catch(() => {
					uni.hideLoading()
					uni.showModal({
						content: "获取兑换记录失败",
						showCancel:false
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.recordContainer {
			width: 100%;
			height: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #F9F9FB;
			.recordItem {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				border-radius: 24rpx;
				background-color: #FFFFFF;
				&.voided {
					position: relative;
					overflow: hidden;
					&::after {
						content: "";
						display: block;
						width: 168rpx;
						height: 168rpx;
						background-position: center;
						background-repeat: no-repeat;
						background-size: 100%;
						// background-image: url(../../static/gift/cancel.png);
						background-image: url('https://api.jiuweiyun.cn/public/uploads/weapp/icon/cancel.png');
						filter: grayscale(100%);
						position: absolute;
						right: 56rpx;
						bottom: -20rpx;
					}
				}
				.header {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					.time {
						color: #999999;
						font-size: 28rpx;
						line-height: 40rpx;
					}
					.money {
						color: #EA4A41;
						font-size: 32rpx;
						line-height: 44rpx;
						font-weight: bold;
					}
				}
				.body {
					width: 100%;
					display: flex;
					align-items: stretch;
					justify-content: space-between;
					position: relative;
					.avatar {
						width: 128rpx;
						height: 128rpx;
						border-radius: 8rpx;
						background-color: #FF7B39;
						background-position: center;
						background-repeat: no-repeat;
						background-size: 100%;
						margin-right: 20rpx;
					}
					.info {
						flex: 1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.name {
							color: #333333;
							font-size: 32rpx;
							line-height: 44rpx;
							font-weight: bold;
						}
						.num {
							color: #999999;
							font-size: 28rpx;
							line-height: 40rpx;
						}
					}
					.voidBtn{
						width: 192rpx;
						height: 68rpx;
						border-radius: 68rpx;
						text-align: center;
						background: linear-gradient(141deg, #F97C55 0%, #F44545 100%);
						line-height: 68rpx;
						color: #FFFFFF;
						font-size: 28rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
			.noTip {
				width: 100%;
				text-align: center;
				padding: 20rpx 0;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
</style>