shuzi/pages/index/guide.vue

<template>
	<view class="container">
		<view class="ls">
			<view @click="item.onData.count>0?tabInde(item,index):''" class="lt flex" v-for="(item,index) in nftInfo">
				<image class="leftImg" :src="item.uri" mode="scaleToFill"></image>
				<view class="rightContent padding-c-20 flex">
					<view class="left">
						<view class="rightName clamp ">
							{{item.name}}
						</view>
						<view class="itemlist margin-t-20 u-warning" v-if="!item.onData.checked">
							<text v-if="item.onData.count>0">
								可供选择{{item.onData.count}}件，点击选择
							</text>
							<text class="text-danger" v-else>
								未持有该类NFT无法选择
							</text>
						</view>
						<view class="itemlist margin-t-20 u-success" v-else>
							选择ID:{{item.onData.info.id}}
						</view>
					</view>
					<image class="rightImg" src="../../static/user/back.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<button class="add-btn" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">立即合成</button>
	</view>
</template>

<script>
	import {
		nftMy,
		nftCraft
	} from '@/api/product.js';
	export default {
		data() {
			return {
				nftInfo: [],
				loding: false ,//判断是否提交合成中
				id:''
			};
		},
		onLoad: function(option) {
			const that = this;
			// #ifdef APP-NVUE
			const eventChannel = that.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
			const eventChannel = that.getOpenerEventChannel();
			// #endif
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('setItemData', function(data) {
				that.id = data.result;
				that.setItemData(data.elements)
			})
		},
		onShow() {

		},
		methods: {
			// 保存数据
			setItemData(item) {
				this.nftInfo = item.map((e) => {
					e.info.onData = {
						info: '',
						checked: false, //保存是否选择
						count: e.count
					}
					return e.info
				})
			},
			tabInde(item, ind) {
				const that = this;
				console.log(item, 'id');
				uni.navigateTo({
					url: './myNftList?id=' + item.id + '&type=2&ind=' + ind,
					events: {
						checkedData: function(res) {
							that.nftInfo[res.ind].onData.checked = true;
							that.nftInfo[res.ind].onData.info = res.data;
							that.nftInfo = that.nftInfo.map((e) => {
								return e
							})
						},
					}
				});
			},
			// 开始合成
			confirm() {
				let upData = {
					element:[],
					result:this.id 
				}
				for (let i = 0; i < this.nftInfo.length; i++) {
					const data = this.nftInfo[i]
					if (!data.onData.checked) {
						uni.showModal({
							title: '提示',
							content: '请选择'+data.name+'NFT',
							showCancel: false,
						});
						break
					}
					upData.element.push( data.onData.info.id);
				}
				this.loding = true;
				uni.showLoading({
					title: '合成中'
				});
				nftCraft(upData).then((data)=>{
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: '成功合成',
						showCancel: false,
					});
					this.loding = false;
					console.log(data,'返回');
				}).catch(()=>{
					uni.hideLoading()
					this.loding = true;
				})
			}
		}
	};
</script>

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

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

	.ls {
		color: #FFFFFF;
		padding: 30rpx;

		.clearFloat {
			clear: both;
		}

		.lt {
			width: 100%;
			background-color: #1d1c21;
			line-height: 0;
			padding: 30rpx;
			border-radius: 20rpx;

			.leftImg {
				flex-shrink: 0;
				width: 120rpx;
				height: 120rpx;
				border-radius: 30rpx;
			}

			.rightContent {
				line-height: 1;
				flex-grow: 1;

				.rightImg {
					width: 20rpx;
				}

				.itemlist {
					display: flex;
					flex-wrap: wrap;
					font-size: 20rpx;

					.item {
						border: 1px solid #FFCE8A;
						padding: 10rpx 10rpx;
						border-radius: 5rpx;
						margin-right: 10rpx;
						margin-bottom: 10rpx;
						color: #FFCE8A;
					}
				}
			}
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		font-size: $font-lg;
		color: #fff;
		background:#FFCE8A;
		border-radius: 10rpx;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	.bg-gray {
		background-color: $color-gray;
	}
</style>