shuzi/pages/index/myNftList.vue

<template>
	<view class="container">
		<view class="flex dy-list">
			<view class="box-content" v-for="item in navitem.list" @click="type==1?navto(item):''">
				<view class="img">
					<image :src="item.class_info.uri" mode=""></image>
				</view>
				<view class="content-title">
					<view class="title">
						<view class="text clamp">{{ item.class_info.name }}</view>
						<view class="zm" v-if="item.hang != null">转卖中</view>
					</view>
					<view class="content-price">
						<view class="price" v-if="item.hang">
							挂卖中￥{{ item.price }}
						</view>
						<view class="price" v-if="item.extract">
							提取中
						</view>
						<view class="price" v-if="!item.hang&&!item.extract">
							￥{{ item.price }}
						</view>
						<view class="" v-if="!item.extract&&type==1">
							<view class="button" @click="navPop(item)" v-if="item.hang == null">卖出</view>
							<view class="button" @click="qxMai(item.hang.id)" v-else>取消卖出</view>
						</view>
						<view class="" v-if="type==2&&!item.hang&&!item.extract">
							<view class="button" @click="checked(item)">选择</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore class='clearFloat' lineColor='#FFFFFF' iconColor='#FFFFFF' color="#FFFFFF"
			:status="navitem.loadingType" />
		<uni-popup ref="maipop" type="center">
			<view class="mai-box">
				<view class="mai-title">卖出价格</view>
				<input type="number" v-model="money" placeholder="请输入" />
				<view class="mai-button">
					<view class="button-left" @click="maiClose()">取消</view>
					<view class="button-right" @click="buy()">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="qumaipop" type="center">
			<view class="mai-box">
				<view class="mai-title">提示</view>
				<view class="mai-title">您正在转卖这件藏品确认取消卖出?</view>
				<view class="mai-button">
					<view class="button-left" @click="maiClose()">取消</view>
					<view class="button-right" @click="quxbuy(item)">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { sell, qxgd } from '@/api/order.js';
	import {
		nftMy
	} from '@/api/product.js';
	export default {
		data() {
			return {
				id: '', //请求查询的分类id
				type: 1, //默认1显示普通列表2表示选择列表
				eventChannel: '', //保存数据处理对象
				navitem: {
					loadingType: 'loadmore',
					list: [],
					page: 1,
					limit: 10,
					loaded: false
				},
				// 当前选中要挂单的商品
				actionItem: {},
				// 出售价格
				money: 0
			};
		},
		onLoad: function(option) {
			const that = this;
			that.id = option.id;
			that.type = option.type
			this.craftGuide();
			// 判断是否是选择商品
			if (that.type == 2) {
				that.ind = option.ind
				// #ifdef APP-NVUE
				that.eventChannel = that.$scope.eventChannel; // 兼容APP-NVUE
				// #endif
				// #ifndef APP-NVUE
				that.eventChannel = that.getOpenerEventChannel();
				// #endif
			}
		},
		onShow() {

		},
		onReachBottom() {
			this.craftGuide()
		},
		methods: {
			// 跳转商品详情页面
			navto(item){
				uni.navigateTo({
					url: '/pages/product/product?isSc=1&id='+item.id,
				});
			},
			// 选择商品
			checked(item) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '是否选择ID' + item.id + '号NFT',
					success: res => {
						if (res.confirm) {
							uni.navigateBack();
							that.eventChannel.emit('checkedData', {
								data: item,
								ind: that.ind,
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			// 获取nft列表信息
			craftGuide(source) {
				let navItem = this.navitem;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				nftMy({
						page: navItem.page,
						limit: navItem.limit,
						nft_class_id: this.id
					})
					.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);
					});

			},
			// 打开挂单
			navPop(item) {
				this.item = item;
				this.$refs.maipop.open();
			},
			// 取消挂单
			qxMai(item) {
				this.$refs.qumaipop.open();
				console.log(item, 'id');
				this.onid = item;
			},
			// 关闭弹窗
			maiClose() {
				this.$refs.maipop.close();
				this.$refs.qumaipop.close();
			},
			// 开始挂单
			buy() {
				let obj = this;
				console.log(obj.item, 'item');
				if (obj.price == '') {
					obj.$api.msg('请输入价格');
					return;
				}
				sell({
						price: obj.money
					},
					obj.item.id
				).then(res => {
					console.log(res, 'res');
					uni.showModal({
						title: '成功',
						content: '挂售成功!',
						showCancel: false
					});
					obj.$refs.maipop.close();
				}).catch((e)=>{
					console.log(e);
				});
			},
			// 取消挂单
			quxbuy() {
				qxgd({}, this.onid).then(res => {
					console.log(res, '取消挂单');
					this.$refs.qumaipop.close();
					uni.showModal({
						title: '成功',
						content: '已成功取消挂单',
						showCancel: false
					});
				});
			},
		}
	};
</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%;
	}

	.dy-list {
		flex-wrap: wrap;
		padding: 30rpx;

		.box-content {
			width: 330rpx;
			height: 415rpx;
			// margin:0 15rpx 50rpx ;

			.img {
				width: 330rpx;
				height: 280rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content-title {
				z-index: 99;
				display: flex;

				margin-top: -10rpx;
				padding: 20rpx;
				flex-direction: column;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				border: 2rpx solid #533a6a;
				// box-shadow: 0px 0px 20rpx 0px rgba(79,59,103,0.0600);

				.title {
					display: flex;
					align-items: center;
					// font-size: 39rpx;
					// font-weight: bold;
					// color: #FFFFFF;
					// margin-bottom: 20rpx;
				}

				.zm {
					flex-shrink: 0;
					// margin: 10rpx;
					// width: 63rpx;
					display: inline-block;
					// padding: 2rpx;
					// height: 30rpx;
					// border: 1rpx solid #FDD58A;
					margin-left: 10rpx;
					border-radius: 5rpx;
					font-size: 16rpx;
					font-weight: 500;
					color: #FDD58A;
					// line-height: 30rpx;
					text-align: center;
				}

				.text {
					color: #ffffff;
					font-size: 24rpx;
					margin: 10rpx 0;
				}
			}

			.content-price {
				display: flex;
				justify-content: space-between;

				.price {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}

				.button {
					width: 104rpx;
					height: 35rpx;
					border-radius: 18rpx;
					background: $bgBaseBg;
					color: #9F570E;
					font-size: 20rpx;
					font-weight: 500;
					line-height: 35rpx;
					text-align: center;
				}
			}
		}
	}

	.mai-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		width: 582rpx;
		height: 377rpx;
		background: #ffffff;
		border-radius: 20rpx;

		.mai-title {
			margin: 0 60rpx;
			font-size: 42rpx;
			font-weight: 500;
			color: #0c1732;
			line-height: 56rpx;
		}

		input {
			width: 494rpx;
			height: 90rpx;
			font-size: 40rpx;
			background: rgba(199, 212, 255, 0.35);
			border-radius: 10rpx;
			text-align: center;
		}

		.mai-button {
			display: flex;
			width: 90%;
			justify-content: space-between;

			.button-left {
				text-align: center;
				width: 248rpx;
				height: 78rpx;
				border: 2rpx solid #a581ff;
				border-radius: 10rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #a581ff;
				line-height: 78rpx;
			}

			.button-right {
				text-align: center;
				width: 248rpx;
				height: 78rpx;
				background: $bgBaseBg;
				border-radius: 10rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 78rpx;
			}
		}
	}
</style>