shuzi/pages/index/cangp.vue

<template>
	<view class="container">
		<view class="topNav">
			<view class="hgHeight">

			</view>
			<view class="flex">
				<view class="titleItem" @click="tabList(0)" :class="{action:onIndex==0}">
					我的盲盒
				</view>
				<view class="titleItem" @click="tabList(1)" :class="{action:onIndex==1}">
					NFT合成
				</view>
			</view>
		</view>
		<!-- 我的盲盒 -->
		<view class="ls" v-show="onIndex==0">
			<view class="ll" v-for="(item,index) in mh.list">
				<image class="imgBox" :src="item.mystery_box_info.pic" mode="scaleToFill"></image>
				<view class="bottomTitle padding-20">

					<view class="title clamp ">
						{{item.mystery_box_info.name}}
					</view>
					<view class="tip flex margin-t-10">
						<view>
							<view class="clamp">
								官方发行
							</view>
							<view class=" margin-t-10">
								数量：{{item.mystery_box_count}}
							</view>
						</view>
						<view class="buttom" @click="openMh(item)">打开</view>
					</view>
				</view>
			</view>
			<u-loadmore class='clearFloat' lineColor='#FFFFFF' iconColor='#FFFFFF' color="#FFFFFF"
				:status="mh.loadingType" />
		</view>
		<!-- NFT合成 -->
		<view class="ls" v-show="onIndex==1">
			<view class="lt flex" v-for="(item,index) in nft.list">
				<image class="leftImg" :src="item.res.uri" mode="scaleToFill"></image>
				<view class="rightContent padding-20 flex">
					<view class="left">
						<view class="rightName clamp ">
							{{item.name}}
						</view>
						<view class="flex margin-t-10">
							<view class="item">

							</view>
						</view>
					</view>
					<image class="rightImg" src="../../static/user/back.png" mode="widthFix"></image>

				</view>
			</view>


			<u-loadmore class='clearFloat' lineColor='#FFFFFF' iconColor='#FFFFFF' color="#FFFFFF"
				:status="nft.loadingType" />
		</view>
		<u-modal @confirm='confirmPay' :showCancelButton='true' @cancel='showAlert=false' :show="showAlert"
			title="请输入打开盲盒数量">
			<view class="slot-content padding-t-20">
				<u--input class='margin-l-30' border='surround' type='number' v-model="payNum" inputAlign='right'
					@input="changeNum"></u--input>
			</view>
		</u-modal>
		<u-modal @confirm='showAlertSuccess = false' :show="showAlertSuccess" title="盲盒开启结果">
			<view class="slot-content padding-t-20">
				
				<view class="boxAlert flex" v-for="(item , inde) in successJg ">
					<image class="img" :src="item.info.uri" mode="scaleToFill"></image>
					<view>
						{{item.info.name}}
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	// #ifdef H5
	import {
		weixindata
	} from '@/utils/wxAuthorized';
	// #endif
	import {
		mysteryMy,
		openMysteryMy,
		craftGuide
	} from '@/api/product.js';
	export default {
		data() {
			return {
				// 当前选中的数据对象
				actionItem: '',
				payNum: 1, //打开的数量
				// 弹出输入窗口
				showAlert: false,
				// 成功弹出窗
				showAlertSuccess: false,
				// 弹出开启盲盒结果
				successJg: [],
				onIndex: 0, //当前选中的分类
				// 盲盒里诶啊哦
				mh: {
					page: 1,
					limit: 100,
					list: [],
					loaded: false,
					loadingType: 'loadmore'
				},
				// nft合成列表
				nft: {
					page: 1,
					limit: 100,
					list: [],
					loaded: false,
					loadingType: 'loadmore'
				}
			};
		},
		computed: {
			...mapState(['loginInterceptor', 'baseURL']),
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		onLoad: function(option) {
			// 合成表
			this.craftGuide();
		},
		onShow() {
			// 我的盲盒
			this.lodingMh();
		},
		methods: {
			// nft合成列表
			craftGuide(source) {
				let navItem = this.nft;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				craftGuide({
						page: navItem.page,
						limit: navItem.limit,
						status: 0
					})
					.then(({
						data
					}) => {
						if (data.list.length > 0) {
							navItem.list = navItem.list.concat(data.list);
							navItem.page++;
						}
						if (navItem.limit == data.list.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'loadmore';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'nomore';
						}
						uni.hideLoading();
						navItem.loaded = true;
					})
					.catch(e => {
						console.log(e);
					});

			},
			// 打开盲盒
			confirmPay() {
				const that = this;
				that.showAlert = false;
				uni.showLoading({
					title: '开启中...',
					mask: true
				});
				openMysteryMy({
						num: that.payNum,
						mystery_id: that.actionItem.mystery_box_id
					})
					.then(({
						data
					}) => {
						// 显示成功弹窗{
						that.showAlertSuccess = true;
						that.successJg = data.boxes.map((i) => {
							return i
						})
						uni.hideLoading()
						console.log(data, 'dk');
					})
					.catch(e => {
						uni.hideLoading()
						console.log(e);
					});
			},
			// 判断是否输入正确数量
			changeNum(s) {
				console.log(s);
				let num = Math.floor(s);
				if (s.indexOf('.') > -1) {
					uni.showModal({
						title: '错误',
						content: '只可填入整数',
						showCancel: false,
					});
				}
				this.$nextTick(() => {
					this.payNum = +num
				})
			},
			tabList(index) {
				// 保存当前选中的对象
				this.onIndex = index;
			},
			// 加载盲盒
			lodingMh(source) {
				let navItem = this.mh;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				mysteryMy({
						page: navItem.page,
						limit: navItem.limit,
						status: 0
					})
					.then(({
						data
					}) => {
						if (data.list.length > 0) {
							navItem.list = navItem.list.concat(data.list);
							navItem.page++;
						}
						if (navItem.limit == data.list.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'loadmore';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'nomore';
						}
						uni.hideLoading();
						navItem.loaded = true;
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 打开盲盒
			openMh(item) {
				this.actionItem = item;
				this.showAlert = true;
				console.log('dk');
			},
			navTo(url) {
				uni.switchTab({
					url
				})
			},
		}
	};
</script>

<style lang="scss">
	page {
		width: 750rpx;
		min-height: 100%;
		background: #111111;
	}

	.container {
		/* #ifdef APP */
		padding-top: var(--status-bar-height);
		/* #endif */
		min-height: 100%;
	}

	.slot-content {
		display: flex;
		flex-wrap: wrap;

		.boxAlert {
			line-height: 1;
			border: 1px solid #9F570E;
			padding: 10rpx 20rpx;
			color: #9F570E;
			border-radius: 10rpx;
			margin: 10rpx;

			.img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				border-radius: 10rpx;
			}
		}
	}

	.topNav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		padding: 30rpx;
		background-color: #181820;

		.hgHeight {
			height: var(--status-bar-height);
		}

		.titleItem {
			width: 336rpx;
			height: 80rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: $font-base;
			color: #FFFFFF;
			border: 1px solid #FFFFFF;

			&.action {
				font-weight: bold;
				color: #9F570E;
				background: linear-gradient(270deg, #FFE7C4, #FFCE8A);
			}
		}
	}

	.ls {
		color: #FFFFFF;
		padding: 30rpx;
		padding-top: 170rpx;

		.clearFloat {
			clear: both;
		}
		.lt{
			width: 100%;
			background-color: #1d1c21;
			line-height: 0;
			padding: 30rpx;
			border-radius: 20rpx;
			.leftImg{
				flex-shrink: 0;
				width: 100rpx;
				height: 100rpx;
				border-radius: 30rpx;
			}
			.rightContent{
				line-height: 1;
				flex-grow: 1;
			.rightImg{
				width: 20rpx;
			}
				
			}
		}
		.ll {
			width: 330rpx;
			line-height: 0;
			margin-bottom: 30rpx;
			float: left;
			border-radius: 20rpx;
			overflow: hidden;

			&:nth-child(even) {
				margin-left: 30rpx;
			}

			.imgBox {
				background-color: #1D1D22;
				width: 330rpx;
				height: 330rpx;
			}

			.bottomTitle {
				background-color: #1d1c21;
				line-height: 1;

				.title {
					font-size: $font-sm;
				}

				.tip {
					font-size: $font-sm - 4rpx;

					.buttom {
						width: 98rpx;
						padding: 10rpx 0;
						text-align: center;
						background: linear-gradient(270deg, #FFE7C4, #FFCE8A);
						border-radius: 20rpx;
						color: #9F570E;
					}
				}
			}
		}
	}
</style>