yihuo/pages/award_detail_yfs/first_last.vue

<template>
	<view class="firstLast">
		<view class="wrapper" :style="{ backgroundImage: 'url(' + ossurl.box.detail.yfsBg + ')' }">
			<view class="boxSection">
				<view class="titlebox"><text>超帅模型对决</text></view>
				<view class="t fx-c-s">
					<view class="l fx-c">
						<image style="width: 40rpx;" src="https://file.supermarts.cn/file/yi_huo_man_yu/images/award/i25.png" mode="widthFix">
						</image>
						<view class="Remaining">当前盒子剩余：<text style="font-size: 38rpx; font-weight: bold;">{{ box.leftQuantity }}</text>/{{ box.quantity }}发</view>
					</view>
					<view class="r fx-c">
						<image style="width: 40rpx;" src="https://file.supermarts.cn/file/yi_huo_man_yu/images/award/i29.png" mode="widthFix"></image>
						<text>玩法</text>
					</view>
				</view>
			</view>
			<!-- <view class="title">
				{{ data.name }}
				<view class="size">
					<image :src="ossurl.box.detail.boxIcon" class="boxIcon" mode="aspectFit" />
					当前盒子剩余：
					<span class="currentSize">{{ box.leftQuantity }}</span>
					/{{ box.quantity }}发
				</view>
			</view> -->
			<view class="flex-align-around">
				<view v-for="(item, index) in prizeList" :key="index" class="cell prize"
					@click="showGoodsDetail(item.spu)">
					<image :src="item.cover" class="image" mode="aspectFit" />

					<view class="levelTitle" :class="[item.level === 'FIRST' ? 'first' : 'last']">
						{{ item.level === 'FIRST' ? '抢先赏' : 'LAST赏' }}
					</view>
					<view v-if="item.nickname" class="userBox">
						<image :src="item.avatar" class="userAvatar" />
						<view class="nickname">{{item.nickname}}</view>
					</view>
				</view>
			</view>
			<view v-if="box" class="controlBox">
				<view class="paddingY3 flex-align-center">
					<view class="flex-align marginR2 preBox" @click="preBox">
						<image :src="ossurl.box.detail.prev" style="width: 32rpx; height: 32rpx" />
						<view class="font2">上一盒</view>
					</view>
					<view class="changeBox" @click="showBox" :style="{ backgroundImage: 'url(' + ossurl.mine.butbj + ')' }">
						<image :src="ossurl.box.detail.refreshIcon"
							style="width: 32rpx; height: 32rpx; margin-right: 18rpx" />
						换盒 (
						<text>{{ box.number }}</text>
						/{{ box.lastNumber }})
					</view>
					<view class="flex-align marginL2 nextBox" @click="nextBox">
						<view class="font2">下一盒</view>
						<image :src="ossurl.box.detail.next" style="width: 32rpx; height: 32rpx" />
					</view>
				</view>
			</view>
			<!-- <image :src="ossurl.box.detail.playMethod" @click="showRule" class="rule" /> -->
		</view>
		<rule ref="rule" />
		<goods-detail ref="goodsDetailRef" @close="goodsDetailColse" />
	</view>
</template>
<script>
	import ossurl from '@/utils/ossurl'
	import rule from './first_last_rule.vue'
	import goodsDetail from './../store/goods_detail'

	export default {
		components: {
			rule,
			goodsDetail
		},
		props: {
			data: Object,
			prizeList: Array,
			box: Object
		},
		data() {
			return {
				ossurl
			}
		},
		methods: {
			showRule() {
				this.$refs.rule.show()
			},
			goodsDetailColse() {
				this.$parent.$parent.lock = false
			},
			showGoodsDetail(spu) {
				this.$parent.$parent.lock = true
				this.$refs.goodsDetailRef.show(spu)
			},
			showBox() {
				this.$emit('showBox')
			},
			preBox() {
				this.$emit('preBox')
			},
			nextBox() {
				this.$emit('nextBox')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.firstLast {
		padding: 20rpx;
	}
	.boxSection{
		.titlebox{
			width: 100%;
			text-align: center;
			padding-top: 16rpx;
			text{
				font-size: 34rpx;
				font-weight: bold;
			}
		}
		.t{
			margin-bottom: 26rpx;
			.l{
				padding-top: 20rpx;
			}
			.r{
				padding-top: 2rpx;
				text{
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
	.wrapper {
		position: relative;
		height: 436rpx;
		background-size: 100% 100%;
		text-align: center;
		
		.title {
			font-size: 28rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			color: #000000;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;

			.size {
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}

			.boxIcon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.currentSize {
				font-size: 32rpx;
			}
		}

		.rule {
			width: 80rpx;
			height: 42rpx;
			position: absolute;
			right: -5rpx;
			top: 100rpx;
		}

		.prize {
			position: relative;

			.image {
				width: 132rpx;
				height: 132rpx;
				background: #ffffff;
				opacity: 1;
				border: 4rpx solid #ffeab7;
				border-radius: 50%;
			}

			.levelTitle {
				width: 126rpx;
				height: 42rpx;
				font-size: 24rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				color: #000000;
				line-height: 44rpx;
				text-align: center;
				border-radius: 552rpx 552rpx 552rpx 552rpx;
				margin-top: -20rpx;
				z-index: 10;
				position: relative;
			}

			.levelTitle.first {
				background: linear-gradient(90deg, #2ddfec 0%, #37b0fb 100%);
				border-radius: 552rpx 552rpx 552rpx 552rpx;
				opacity: 1;
				border: 2rpx solid #63efff;
			}

			.levelTitle.last {
				background: linear-gradient(90deg, #ff453c 0%, #ff683f 100%);

				opacity: 1;
				border: 2rpx solid #ff7b72;
			}
		}

		.changeBox {
			width: 282rpx;
			height: 60rpx;
			// background: #fec433;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 350;
			color: #000000;
		}

		.controlBox {
			background: #fffcf4;
			padding: 8rpx 12rpx;
			display: inline-block;
			margin: auto;
			border-radius: 50rpx;
			margin-top: 20rpx;
		}
	}

	.nextBox,
	.preBox {
		padding: 0 20rpx;
	}

	.userBox {
		position: absolute;
		top:0;
		.nickname {
			font-size: 12px;
			color: #FEC433;
			width: 132rpx;
			height: 132rpx;
			background: #ffffff;
			opacity: 1;
			border: 4rpx solid #ffeab7;
			background: rgba(0, 0, 0, 0.8);
			border: 1px solid;
			border-image: linear-gradient(180deg, rgba(253.0000001192093, 234.00000125169754, 222.00000196695328, 1), rgba(253.0000001192093, 229.00000154972076, 208.0000028014183, 0)) 1 1;
			line-height: 132rpx;
			border-radius: 50%;
			top: 0;
			overflow: hidden;
		}
	}

	.userAvatar {
		width: 32px;
		height: 32px;
		border: 2px solid #FFE996;
		box-sizing: border-box;
		position: absolute;
		top: -20rpx;
		left: 30rpx;
		border-radius: 50%;
	}
</style>