weapp-v3/components/exchange-item.vue

<template>
	<view class="exchange-item">
		<view class="pic" @tap="priview(item.img)">
			<image :src="item.img" mode="aspectFill"></image>
			<view class="bg"></view>
		</view>
		<view class="info" @tap="exchange">
			<view class="top">{{ item.name }}</view>
			<view class="mid">
				<text class="left">{{ item.surplus ? '限量' + item.total + '份' : '已抢完' }}</text>
				<text class="right" :style="{ color: item.exchanged ? '#999999' : '#FA6342' }">{{ item.exchanged ? '已兑换' : '未兑换' }}</text>
			</view>
			<view class="bot">
				<view class="exchanged">{{ item.total - item.surplus }}人已领</view>
				<view class="price">
					<text class="num">{{ item.price + ' ' }}</text>
					<text>奖学金</text>
				</view>
				<view class="exchangebtn none" v-if="!isCan">立即兑换</view>
				<view class="exchangebtn" v-else :class="item.surplus ? '' : 'none'">立即兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '../store.js'
	export default {
		props: {
			item: Object,
			index: Number
		},
		computed: {
			isCan: () => {
				let { state } = store
				return (state.userServerInfo && state.userServerInfo.status === 3) ? true : false
			}
		},
		methods: {
			exchange () {  //点击兑换礼品商品后
				if(!this.isCan) {
					uni.showModal({
						content: "兑换还未开始",
						showCancel: false
					})
					return false
				}
				if (this.item.surplus) {  //如果有货
					getApp().globalData.detail = this.item  //把兑换列表保存到 globalData 中
					uni.navigateTo({
						url: '../detail/detail'  //去商品详情页面时
					})
				} else {
					uni.showModal({
						content: "来晚了！礼品已兑换完毕！再看看别的吧！",
						showCancel: false
					})
				}
			},
			priview(src) {
				uni.previewImage({ urls: [src] })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.exchange-item {
		width: 100%;
		height: 260rpx;
		margin: 20rpx 0;
		display: flex;
		.pic {
			height: 100%;
			width: 260rpx;
			margin-right: 40rpx;
			position: relative;
			border-radius: 8rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
			.bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, .05);
			}
		}
		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			.top {
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
			}
			.mid {
				height: 55rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				.left {
					width: 140rpx;
					height: 36rpx;
					color: #FA6342;
					line-height: 36rpx;
					text-align: center;
					background: rgba(250,99,66,0);
					border: 1rpx solid #FA6342;
					border-radius: 6rpx;
				}
			}
			.bot {
				flex: 1;
				position: relative;
				.exchanged {
					position: absolute;
					left: 0;
					bottom: 73rpx;
					color: #999999;
					font-size: 24rpx;
				}
				.price {
					position: absolute;
					left: 0;
					bottom: 20rpx;
					color: #FA6342;
					font-size: 24rpx;
					.num {
						font-size: 36rpx;
					}
				}
				.exchangebtn {
					position: absolute;
					right: 0;
					bottom: 20rpx;
					width: 152rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					color: #FA6342;
					background: rgba(255,235,232,1);
					border-radius: 28rpx;
					&.none {
						color: #999999;
						background: rgba(222,222,222,1);
					}
					
				}
			}
		}
	}
</style>