ProAdvanced/platform/app-plus/subNVue/reward-popup.nvue

<template>
	<view class="wrapper">

		<!-- 领取奖励提示，解锁成就 -->
		<view v-if="currentType == 'levelReward'" class="reward-container">
			<image style="width: 548rpx; height: 240rpx;" mode="aspectFit"
				src="../../../static/common/subNVue/reward-title.png">
			</image>
			<view class="position-relative">
				<image style="width: 472rpx; height: 482rpx;" mode="aspectFit"
					src="../../../static/common/subNVue/bg-light.png">
				</image>
				<view class="position-absolute-center">
					<image class="reward-image"
						:style="{width:lists[levelRewardIndex].width+'px',height:lists[levelRewardIndex].height+'px'}"
						mode="aspectFit" :src="lists[levelRewardIndex].url">
					</image>
				</view>

			</view>
			<view class="position-relative">
				<image style="width: 502rpx;height: 94rpx;" mode="aspectFit"
					src="../../../static/common/subNVue/line-border@2x.png">
				</image>
				<view class="position-absolute-center">
					<text class="text-white text-15px text-center"
						style="line-height: 30rpx;height: 30rpx;">{{lists[levelRewardIndex].explain}}</text>
				</view>

			</view>
			<button class="make-bg-bPurple reward-button" @click="buttonMessage('confirm')"><text
					class="text-white text-18px">确定</text> </button>
		</view>
		<!-- 显示奖励信息 -->
		<view v-if="currentType == 'prompt'" class="reward-container" style="height: 1000rpx;">
			<view class="position-absolute-center-top" style="top: 20rpx;">
				<image style="width: 656rpx; height: 224rpx;" mode="aspectFit"
					src="../../../static/common/subNVue/prompt-bg-title@2x.png">
				</image>
			</view>

			<view class="prompt-mid" style="height: 622rpx; ">
				<block v-for="(item, index) in lists" :key="index">
					<view class="justify-center align-center" style="height: 230rpx; width: 160rpx; margin:5rpx;">
						<view class="prompt-cell-bg" ></view>
						<image class="position-absolute-center-top" style="height:200rpx;"
							src="../../../static/common/subNVue/prompt-bg@2x.png"></image>
						<view class="position-absolute-center-top" style="height:140rpx;top: 40rpx;">
							<image :style="{width:item.width+'px',height:item.height+'px'}" mode="aspectFit"
								:src="item.url">
							</image>
							<view class="position-absolute-center-bottom">
								<text class="text-14px text-center"
									style="height: 14px;line-height: 14px;">{{item.explain}}</text>
							</view>
						</view>

					</view>

				</block>

			</view>
			<view class="position-absolute-center-top" style="top: 160rpx">
				<image class="prompt-title" mode="aspectFit"
					src="../../../static/common/subNVue/prompt-reward-title@2x.png">
				</image>
				<!-- 内容部分 -->
				<text class="text-18px text-black" style="margin-top: 44rpx;">本关卡可获得以下奖励</text>
			</view>
			<view class="position-absolute-center-bottom" style="bottom: 260rpx;">
				<button class="make-bg-bPurple prompt-button" @click="buttonMessage('confirm')"><text
						class="text-white text-18px">确定</text> </button>
			</view>
		</view>
		<!-- 解锁关卡 -->
		<view v-if="currentType == 'unlock'" class="reward-container" style="height: 1000rpx;">
			<view class="position-absolute-center-top" style="top: 20rpx;">
				<image style="width: 656rpx; height: 224rpx;" mode="aspectFit"
					src="../../../static/common/subNVue/prompt-bg-title@2x.png">
				</image>
			</view>

			<view class="prompt-mid flex-direction-column" style="height: 622rpx">
				<view class="" style="height: 230rpx; width: 500rpx; margin:5rpx;">
					<view class="position-absolute-center">
						<image class="" style="height:296rpx;width: 296rpx"
							src="../../../static/common/subNVue/unlock/unlock-mid-bg.png"></image>
					</view>
					<view class="position-absolute-center">
						<image style="width: 196rpx;height:196rpx;" mode="aspectFit"
							src="../../../static/common/subNVue/unlock/unlock-mid.png">
						</image>
					</view>

				</view>
				<view>
					<!-- 内容部分 -->
					<text class="text-18px text-black">解锁关卡消耗：</text>
				</view>
				<view class="justify-center align-center flex-direction-row unlock-cell">
					<view class="align-center flex-direction-row"
						style="margin-right: 40rpx; padding: 0 18px; height: 56rpx;">
						<image class="png-more" style="margin-right: 16rpx;"
							src="../../../static/common/sideBar/sGold.png">
						</image>
						<view class="text-14px" style="line-height: 28rpx;">{{unlockItem.consumeGold}}</view>
					</view>
					<view class=" align-center flex-direction-row" style="padding: 0 18px; height: 56rpx;">
						<image class="png-more" style="margin-right: 16rpx; "
							src="../../../static/common/sideBar/sDiamond.png">
						</image>
						<view class="text-14px" style="line-height: 28rpx;">{{unlockItem.consumeDiamond}}</view>
					</view>
				</view>


			</view>
			<view class="position-absolute-center-top" style="top: 160rpx">
				<image class="prompt-title" mode="aspectFit"
					src="../../../static/common/subNVue/unlock/unlock-title.png">
				</image>
			</view>
			<view class="position-absolute-center-bottom justify-center align-center flex-direction-row"
				style="bottom: 240rpx;">
				<button class="make-bg-bPurple unlock-button" @click="buttonMessage('confirm')"><text
						class="text-white text-18px">解锁</text> </button>
				<button class="bg-grey-mid unlock-button" style="margin-left: 44rpx; border-color: #CDCDCD;"
					@click="buttonMessage('cancle')"><text class="text-white text-18px">取消</text> </button>
			</view>


		</view>


		<!-- 显示签到信息 -->
		<view v-if="currentType == 'signIn'" class="reward-container" style="height: 1000rpx;">
			<view class="position-absolute-center-top" style="top: 20rpx;">
				<image style="width: 656rpx; height: 224rpx;" mode="aspectFit"
					src="../../../static/common/subNVue/prompt-bg-title@2x.png">
				</image>
			</view>

			<view class="prompt-mid justify-start flex-direction-column" style="height: 724rpx; ">
				<view style="height: 81rpx;"></view>
				<view class="flex-wrap flex-direction-row flex-sub justify-center">
					<block v-for="(item, index) in lists" :key="index">
						<view class="justify-center align-center" style="height: 148rpx; width: 116rpx; margin:5rpx;">
							<view class="prompt-cell-bg" style="height: 148rpx;" :style="{opacity:item.isSelect?1:0.5}">
							</view>
							<view class="position-absolute-center" style="height:148rpx;">
								<image style="" :style="{width:item.width+'px',height:item.height+'px'}"
									mode="aspectFit" :src="item.isSelect?item.url:item.selectedUrl">
								</image>
								<text class="text-14px text-center"
									style="height: 14px;line-height: 14px; margin-top:12rpx;">{{item.explain}}+20</text>

							</view>

						</view>
						<view class="justify-center align-center" style=" margin:22rpx 5rpx;">
							<image v-if="item.isSelect" class="" style="height:34rpx;width:34rpx;"
								src="../../../static/common/subNVue/sign/sign-tick@2x.png"></image>
							<text v-else class="text-13px text-gray">第{{index+1}}天</text>
						</view>

					</block>
				</view>


			</view>
			<view class="position-absolute-center-top" style="top: 108rpx">
				<image class="prompt-title" mode="aspectFit"
					src="../../../static/common/subNVue/sign/sign-title@2x.png">
				</image>
			</view>
			<view class="position-absolute-center-bottom" style="bottom: 200rpx;">
				<button class="make-bg-bPurple prompt-button" @click="buttonMessage('confirm')"><text
						class="text-white text-18px">点击领取</text> </button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				content: '',
				lists: [],
				levelRewardIndex: 0,
				promptList: [{
					name: 'gold',
					width: 31,
					height: 31,
					url: '../../../static/common/sideBar/sGold.png',
					explain: ''
				}, {
					name: 'diamond',
					width: 31,
					height: 31,
					url: '../../../static/common/sideBar/sDiamond.png',
					explain: ''
				}, {
					name: 'medal',
					width: 36,
					height: 41,
					url: '../../../static/common/modal/medal.png',
					explain: ''
				}, {
					name: 'questionMark',
					width: 24,
					height: 35,
					url: '../../../static/common/subNVue/prompt-qm@2x.png',
					explain: '未知'
				}],
				rewardList: [{
					name: 'reward-gold',
					width: 98,
					height: 98,
					url: '../../../static/common/subNVue/reward-gold.png',
					explain: ''
				}, {
					name: 'reward-diamond',
					width: 98,
					height: 98,
					url: '../../../static/common/subNVue/reward-diamond.png',
					explain: ''
				}, {
					name: 'reward-medal',
					width: 118,
					height: 135,
					url: '../../../static/common/subNVue/big-medal.png',
					explain: ''
				}],
				currentType: 'none',

				/**
				 * 解锁项目
				 */
				unlockItem: {
					consumeGold: 0,
					consumeDiamond: 0
				},
				//当前传入操作的item
				operationItem: null
			}
		},
		created() {
			const vm = this;
			// for (let i = 1; i < 4; i++) {
			// 	this.lists.push('item' + i);
			// }
			uni.$on('reward-popup', (data) => {
				vm.title = data.title;
				vm.content = data.content;
				vm.lists = [];
				vm.currentType = data.type;
				vm.operationItem = data.operationItem;
				if (vm.currentType == 'prompt') {
					let _item = data.item;
					console.log(_item);
					if (_item.gold && _item.gold != 0) {
						let temp = Object.assign({}, vm.promptList[0]);
						temp.explain = _item.gold + '';
						vm.lists.push(temp);
					} else {
						vm.lists.push(vm.promptList[3]);
					}

					if (_item.diamond && _item.diamond != 0) {
						let temp = Object.assign({}, vm.promptList[1]);
						temp.explain = _item.diamond + '';
						vm.lists.push(temp);
					} else {
						vm.lists.push(vm.promptList[3]);
					}

					if (_item.honor && _item.honor.type != 0) {
						let temp = Object.assign({}, vm.promptList[2]);
						temp.explain = _item.honor.name + '';
						vm.lists.push(temp);
					} else {
						vm.lists.push(vm.promptList[3]);
					}
				} else if (vm.currentType == 'unlock') {
					vm.unlockItem.consumeGold = data.item.consumeGold;
					vm.unlockItem.consumeDiamond = data.item.consumeDiamond;
				} else if (vm.currentType == 'signIn') {
					vm.lists = data.lists;
				} else if (vm.currentType == "levelReward") {
					let _item = data.item;
					if (_item.gold && _item.gold != 0) {
						let temp = Object.assign({}, vm.rewardList[0]);
						temp.explain = _item.gold + '';
						vm.lists.push(temp);
					}

					if (_item.diamond && _item.diamond != 0) {
						let temp = Object.assign({}, vm.rewardList[1]);
						temp.explain = _item.diamond + '';
						vm.lists.push(temp);
					}

					if (_item.honor && _item.honor.type != 0) {
						let temp = Object.assign({}, vm.rewardList[2]);
						temp.explain = _item.honor.explain + '';
						vm.lists.push(temp);
					}

					vm.levelRewardIndex = 0;
					console.log(vm.lists);
				}

			})
		},
		beforeDestroy() {
			uni.$off('drawer-page')
		},
		methods: {
			sendMessage() {
				const subNVue = uni.getCurrentSubNVue()
				uni.$emit('reward-popup-page', {
					title: '已读完!',
				})
			},
			handle(item, index) {
				const subNVue = uni.getCurrentSubNVue()
				uni.$emit('reward-popup-page', {
					type: 'interactive',
					info: item + ' 该元素被点击了!',
				})
			},
			buttonMessage(buttonEvent) {
				const subNVue = uni.getCurrentSubNVue()
				uni.$emit('reward-popup-page', {
					type: 'button',
					messageType: this.currentType,
					confirm: buttonEvent == 'confirm' ? true : false,
					cancel: buttonEvent == 'cancel' ? true : false,
					info: buttonEvent + ' 该元素被点击了!',
					operationItem: this.operationItem
				})
				if (this.currentType == 'levelReward') {
					if (this.levelRewardIndex == this.lists.length - 1) {
						this.hidePupup();
					} else {
						this.levelRewardIndex++;
					}
				} else {
					this.hidePupup();
				}

			},
			hidePupup() {
				// const subNVue = uni.getCurrentSubNVue();
				// subNVue.hide("auto", 250);
				uni.getCurrentSubNVue().hide('auto',250);
				setTimeout(()=>{
					this.currentType = 'none';
				},250);
			}
		}
	}
</script>

<style>
	.wrapper {
		justify-content: center;
	}

	.title {
		height: 100rpx;
		line-height: 100rpx;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
		border-bottom-color: #CBCBCB;
		flex: 0;
		font-size: 30rpx;
	}

	.scroller {
		height: 400rpx;
		padding: 8rpx 15rpx;
	}

	.content {
		color: #555555;
		font-size: 32rpx;
	}

	.message-wrapper {
		flex: 0;
		border-top-style: solid;
		border-top-width: 1rpx;
		border-top-color: #CBCBCB;
		height: 80rpx;
		align-items: flex-end;
	}

	.send-message {
		font-size: 30rpx;
		line-height: 80rpx;
		color: #00CE47;
		margin-left: 20rpx;
	}

	.cell {
		margin: 10rpx;
		padding: 20rpx 0;
		top: 10rpx;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		background-color: #5989B9;
	}

	.text {
		font-size: 30rpx;
		text-align: center;
		color: white;
	}

	/**
	 * 奖励样式
	 */
	.reward-container {
		flex-direction: column;
		justify-content: space-between;
		padding: 10rpx 15rpx;
		/* background-color: #F4F5F6; */
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
	}

	.reward-item {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: center;
		align-items: center;

	}

	.reward-image {
		width: 180rpx;
		height: 180rpx;
	}

	.reward-button {
		width: 348rpx;
		height: 88rpx;
		margin-top: 50rpx;
		border-color: rgba(151, 151, 255, 1);
	}

	/**
	 * 提示奖励部分
	 */
	.prompt-title {
		width: 368rpx;
		height: 90rpx;
	}

	.prompt-mid {
		border-width: 14rpx;
		border-style: solid;
		border-color: #E5E5FF;
		border-radius: 10px;
		background-color: #FFFFFF;
		width: 600rpx;
		height: 622rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* padding: 0 20px; */
	}

	.prompt-button {
		width: 348rpx;
		height: 88rpx;
		margin-top: 50rpx;
		border-color: rgba(151, 151, 255, 1);
		border-radius: 21px;
	}

	.prompt-cell {
		margin: 20rpx 5rpx 5rpx 5rpx;
		/* padding: 40rpx 0; */
		height: 260rpx;
		top: 10rpx;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		background-color: #F2F2FF;
	}

	.prompt-cell-bg {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: center;
		align-items: center;
		height: 210rpx;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		background-color: #F2F2FF;
	}

	/**
	 * 解锁样式
	 */
	.unlock-cell {
		height: 80rpx;
		width: 466rpx;
		margin-top: 20rpx;
		margin-bottom: 120rpx;
		background-color: rgba(202, 202, 202, 0.13);
		border-radius: 40rpx;
	}

	.unlock-button {
		width: 208rpx;
		height: 80rpx;
		border-color: rgba(151, 151, 255, 1);
		border-radius: 9px;
	}
</style>