weapp/exchange.vue

<template>
	<view class="giftContainer">
		<view class="message">
			<view class="icon"><text>通知</text></view>
			<view class="text"><view class="scroll">奖学金兑换自结算日起2天内开启兑换，超过时限奖学金将自动清零。</view></view>
		</view>
		<view class="banner">
			<view class="num">
				<text class="spec" v-if="userServerInfo">{{ userServerInfo.bonus }}</text>
				<text>奖学金</text>
			</view>
			<view class="num">兑换礼包，福利优人一步</view>
		</view>
		<view class="fixedHeader">
			<view class="num">
				<text>奖学金：</text>
				<text class="spec" v-if="userServerInfo">{{ userServerInfo.bonus }}</text>
			</view>
			<view v-if="userServerInfo">
				<view v-if="userServerInfo.type === 1 || userServerInfo.type === 2" class="title" @tap="exchangerecord">
					<text>{{ userServerInfo.type === 2 ? '兑换记录' : '我的礼品' }}</text>
				</view>
			</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<view v-for="item in list" :key="item.id" class="item" @click="exchange(item)">
				<view class="avatar" :style="{ backgroundImage: `url(${item.img})` }" @click.stop="priview(item.img)">
					<view v-if="!Number(item.surplus)" class="none"><text>已兑完</text></view>
				</view>
				<view class="info">
					<view class="title">{{ item.name }}</view>
					<view class="info-num">
						<view class="info-other">限量{{ item.total }}份</view>
						<view class="info-status" v-if="item.exchanged">已兑换</view>
					</view>
					<view class="bottom">
						<view class="money">
							<text class="spec">{{ item.price }}</text>
							<text>奖学金</text>
						</view>
						<view class="btn" :class="Number(item.surplus) && isCan ? '' : 'disabled'">立即兑换</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { api_getExchangeList } from '../../api.js';
export default {
	data() {
		return {
			pageTitle: '礼品兑换',
			scrollViewHeight: 0,
			list: []
		};
	},
	computed: {
		userServerInfo() {
			//用户服务器信息
			return this.$store.state.userServerInfo;
		},
		isCan() {
			return this.$store.state.userServerInfo && this.$store.state.userServerInfo.status === 3 ? true : false;
		}
	},
	onShow() {
		this.getGiftList();
	},
	methods: {
		getGiftList() {
			uni.showLoading();
			this.$ajax.get(api_getExchangeList).then(([, { data: res }]) => {
				//获取兑换礼品列表
				this.list = res.data.list;
				uni.hideLoading();
			});
		},
		exchangerecord() {
			//进入兑换记录页面
			if (this.userServerInfo.type === 1) {
				uni.navigateTo({ url: '../exchangerecord/exchangerecord' });
			} else if (this.userServerInfo.type === 2) {
				uni.navigateTo({ url: '../mygift/mygift' });
			} else {
				uni.showModal({
					content: '无兑换记录',
					showCancel: false
				});
			}
		},
		priview(src) {
			// 预览
			uni.previewImage({ urls: [src] });
		},
		exchange(data) {
			// 兑换
			getApp().globalData.detail = data; //把兑换列表保存到 globalData 中
			uni.navigateTo({
				url: '../detail/detail' //去商品详情页面时
			});
			return false;
			if (!data.isCan) {
				uni.showModal({
					content: '兑换还未开始',
					showCancel: false
				});
				return false;
			}
			if (data.surplus) {
				//如果有货
				getApp().globalData.detail = data; //把兑换列表保存到 globalData 中
				uni.navigateTo({
					url: '../detail/detail' //去商品详情页面时
				});
			} else {
				uni.showModal({
					content: '来晚了！礼品已兑换完毕！再看看别的吧！',
					showCancel: false
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	height: auto;
	display: flex;
	flex-direction: column;
	.giftContainer {
		flex: 1;
		overflow: hidden;
		padding: 30rpx;
		box-sizing: border-box;
		.message {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 42rpx 0 14rpx;
			box-sizing: border-box;
			background-color: #fff4f3;
			height: 62rpx;
			border-radius: 62rpx;
			margin-bottom: 30rpx;
			.icon {
				width: 128rpx;
				height: 46rpx;
				background: linear-gradient(88deg, #ffc401 0%, #fe2400 41%, #fe0000 100%);
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #ffffff;
				font-size: 28rpx;
				margin-right: 14rpx;
				&::before {
					content: '';
					display: block;
					width: 28rpx;
					height: 28rpx;
					background: url(../../static/gift/1.png) 100% center no-repeat;
					background-size: 100%;
					margin-right: 6rpx;
				}
			}
			.text {
				flex: 1;
				height: 40rpx;
				overflow: hidden;
				.scroll {
					height: 40rpx;
					line-height: 40rpx;
					white-space: nowrap;
					color: #ea4a41;
					font-weight: 28rpx;
					animation: scroll-left-right 12s linear infinite;
				}
			}
		}
		.banner {
			width: 100%;
			height: 240rpx;
			background: linear-gradient(270deg, #f97c55 0%, #f44545 100%);
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			position: relative;
			padding: 60rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-bottom: 30rpx;
			.num {
				color: #ffffff;
				font-size: 32rpx;
				line-height: 44rpx;
				.spec {
					font-size: 76rpx;
					margin-right: 10rpx;
				}
			}
			&::after {
				content: '';
				display: block;
				width: calc(100% + 30rpx);
				height: 28rpx;
				background: linear-gradient(180deg, rgba(234, 74, 65, 0) 0%, rgba(234, 74, 65, 0.35) 100%);
				border-radius: 28rpx;
				position: absolute;
				left: -15rpx;
				right: -15rpx;
				bottom: -14rpx;
			}
			&::before {
				content: '';
				display: block;
				width: 170rpx;
				height: 170rpx;
				background-image: url('https://api.jiuweiyun.cn/public/uploads/weapp/icon/2.png');
				background-position: center;
				background-size: 100%;
				background-repeat: no-repeat;
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
			}
		}
		.fixedHeader {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			.num {
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 32rpx;
				line-height: 56rpx;
				.spec {
					color: #ea4a41;
					font-size: 40rpx;
				}
				&::before {
					content: '';
					display: block;
					width: 40rpx;
					height: 40rpx;
					background-image: url(../../static/gift/3.png);
					background-size: 100%;
					background-position: center;
					background-repeat: no-repeat;
					margin-right: 10rpx;
				}
			}
			.title {
				display: flex;
				align-items: center;
				color: #999999;
				font-size: 32rpx;
				&::before {
					content: '';
					display: block;
					width: 34rpx;
					height: 34rpx;
					background-image: url(../../static/gift/4.png);
					background-size: 100%;
					background-position: center;
					background-repeat: no-repeat;
					margin-right: 10rpx;
				}
			}
		}
		.list {
			width: 100%;
			.item {
				width: 100%;
				display: flex;
				align-items: stretch;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.avatar {
					width: 260rpx;
					height: 260rpx;
					background-color: #f9f9fb;
					position: relative;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100%;
					overflow: hidden;
					.none {
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						background: rgba(0, 0, 0, 0.5);
						display: flex;
						align-items: center;
						justify-content: center;
						color: #ffffff;
						font-size: 32rpx;
					}
				}
				.info {
					flex: 1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title {
						color: #333333;
						font-size: 32rpx;
						line-height: 44rpx;
						width: 100%;
						height: 44rpx;
						overflow: hidden;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
					&-num {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 70rpx;
						.info-other {
							color: #ea4a41;
							font-size: 28rpx;
							height: 52rpx;
							line-height: 52rpx;
							padding: 0 10rpx;
							border-radius: 8rpx;
							background-color: #fff4f3;
						}
						.info-status {
							color: #ffffff;
							font-size: 28rpx;
							height: 44rpx;
							line-height: 44rpx;
							padding: 0 14rpx;
							background-color: #ffbb01;
							border-top-left-radius: 16rpx;
							border-bottom-right-radius: 16rpx;
						}
					}
					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.money {
							color: #ea4a41;
							font-size: 24rpx;
							.spec {
								font-size: 40rpx !important;
							}
						}
						.btn {
							height: 68rpx;
							border-radius: 68rpx;
							background: linear-gradient(141deg, #f97c55 0%, #f44545 100%);
							line-height: 68rpx;
							width: 192rpx;
							text-align: center;
							color: #ffffff;
							font-size: 28rpx;
							&.disabled {
								background: #f8f8f8 !important;
								color: #999999;
							}
						}
					}
				}
			}
		}
	}
}
.exchange {
	// @include page();

	.content {
		display: flex;
		flex-direction: column;
		.scroll {
			height: 50rpx;
			line-height: 50rpx;
			background: rgba(250, 99, 66, 0.2);
			display: flex;
			align-items: center;
			color: #fa6342;
			text {
				font-size: 40rpx;
				color: #fa6342;
				margin-left: 30rpx;
			}
			.scroll-wrapper {
				flex: 1;
				height: 100%;
				overflow: hidden;
				.scroller {
					height: 100%;
					white-space: nowrap;
					font-size: 26rpx;
					padding-left: 10rpx;
					animation: scroll-left-right 12s linear infinite;
				}
			}
		}
		.banner {
			width: 100%;
			height: 216rpx;
		}
		.nav {
			height: 76rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			border-bottom: 6rpx solid #eeeeee;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			view {
				height: 100%;
				display: flex;
				align-items: center;
				.cuIcon {
					font-size: 40rpx;
					margin-right: 12rpx;
				}
			}
		}
		.list {
			flex: 1;
			scroll-view {
				box-sizing: border-box;
				padding: 0 30rpx 0;
			}
		}
	}
}
@keyframes scroll-left-right {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}
</style>