a77/pages/collection/collection.vue

<template>
	<view class="index">
		<!-- <nav-header>我的藏品</nav-header> -->
		<view class=""
			style="display: flex;justify-content: space-between;height: 100rpx;align-items: center;padding: 0 32rpx;">
			<view class="" @click="totabar('/pages/my/my')">
				<image src="/static/2.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
			</view>
			<view class="" style="font-weight: bold;color: #fff;">
				我的藏品
			</view>
			<view class="">

			</view>
		</view>




		<scroll-view scroll-y @scrolltolower="tolower" style="height: 100vh;">

			<view class="good-list" v-if="collection_list.length >0">
				<view v-for="(item, index) in collection_list" :key="index" class="goodsitem">
					<view class="list-item">
						<view class="list-img" v-if="item.type ==1" @click="onGood(item,index)">
							<image :src="item.cover" />
						</view>
						<view class="list-ctx">
							{{ item.title }}
						</view>
						<view class="text_hide " v-if="item.type ==1"
							style="width: 200rpx;font-size: 24rpx;margin-left: 20rpx;margin-top: 10rpx;">
							<text>by {{ item.writer }}</text>
						</view>

						<view class="foot" v-if="item.type ==1">
							<view>
								共{{item.count ||0}}个
							</view>
							<view class="price">
								<!-- <image src="/static/my/022.png" mode="widthFix" style="width: 24rpx;"></image> -->
							</view>
						</view>
					</view>
				</view>
			</view>



			<view class="" v-if="collection_list.length >0" style="font-size: 24rpx;color: #999;text-align: center;">
				没有数据了
			</view>

			<view class="nothing"
				v-if="tag1==0?collection_list.length <=0:tag1==1?collection_list.length <=0: list.length <= 0">
				<view class="">
					<image src="/static/shoping/8.png" mode="widthFix" style="width: 504rpx;"></image>
				</view>
				<view class="">
					{{tag1==0?'暂无藏品':tag1==1?'暂无盲盒':'暂无数据'}}
				</view>
			</view>

			<!-- 作品编号 -->
			<uni-popup ref="popup" type="bottom">
				<view class="pop_content">

					<view class="top">
						<view class="">
							<image :src="img" mode=""
								style="width: 192rpx;height: 192rpx;border-radius: 20rpx;margin-top: -100rpx;"></image>
						</view>
						<view class="close" @click="$refs.popup.close()">
							<image src="/static/my/close1.png" mode="widthFix" style="width: 48rpx;"></image>
						</view>
						<view class="title">
							{{number.length!=0?number[0].name:'' }}
							<view>/共{{length}}个</view>
						</view>
					</view>


					<view class="sort">默认按编号排序</view>
					<scroll-view scroll-y="true" style="height: 30vh;" @scrolltolower="lower1">
						<view></view>
						<view class="box">
							<view class="item" v-for="item,i in number" :key="i" @click="goTo(item)">
								<view class="dot" v-if="item.status==1"></view>
								<view class="dot ji" v-if="item.status==4"></view>
								<!-- <view class=""></view> -->
								<view class="num">{{item.order_no}}</view>
								<!-- <view class="pir">￥{{item.price}}</view> -->
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-popup>
		</scroll-view>
	</view>
</template>

<script>
	import navHeader from "@/components/my/nav_header.vue"
	import XinyuCanvasDrawer from "@/components/xinyu-canvas-drawer/index.vue";
	export default {
		components: {
			navHeader,
			// aQrcode,
			XinyuCanvasDrawer
		},
		onShow() {
			this.init()
			this.collection_fold()
		},
		data() {
			return {
				show_exit_pop: false,
				i: 0,
				list1: [{
						name: '作品',
					},
					{
						name: '盲盒',
					}
				],
				collection_list: [], //作品
				number: [], // 编号
				src: "", //分享图
				link: '',
				fresh: false, //下拉

				tag: [{
						name: '藏品'
					},
					{
						name: '盲盒'
					},
					{
						name: '已售出'
					}
				],
				tag1: 0,
				value: '',
				img: '',
				list: [],
				show: false,
				type: 0,
				page: 0,
				collection_id:'',
				length:''

			}
		},
		watch: {

		},
		methods: {
			init() {
				// 初始化 数据数组为空  页面0
				this.collection_list = []
				this.page = 0
			},
			// 标签切换

			/**
			 * 作品
			 */
			collection_fold() {
				// uni.showToast({
				// 	title: "加载中",
				// 	icon: "loading"
				// })
				this.api.collection_fold(15, ++this.page, this.value).then(res => {
					res.data.data.forEach(ele => {
						this.collection_list.push({
							id: ele.id,
							title: ele.coll.name,
							img: ele.coll.img,
							cover: ele.coll.cover,
							type: 1, //1作品
							no: ele.order_no,
							count: ele.count, //折叠数量
							collection_id: ele.collection_id,
							no: ele.order_no,
							count: ele.count,
							count1: ele.count1 ? ele.count1 : 0,
							writer: ele.author.nickname,
							writer_img: ele.author.headimg,
						})
					})
				})
			},
			tolower() {
				this.collection_fold()
			},
			lower1() {
				this.onGood1()
			},
			/**
			 *  作品折叠
			 */
			onGood1() {
				console.log(123)
				this.api.collection_fold_info(this.collection_id, 10, ++this.page).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						res.data.data.forEach(ele => {
							this.number.push({
								id: ele.mark_id,
								name: ele.coll.name,
								price: ele.price,
								order_no: ele.order_no,
								status: ele.status,
								url: '/pages/collection/collectionDetails/collectionDetails?id=' +
									ele
									.id,
								mark_id: ele.mark_id,
								type: 1,
								img: ele.coll.cover
							})
						})
						this.$refs.popup.open()
					}
				})
			},
			onGood(item,index) {
				this.page = 0
				this.number = []
				this.collection_id = item.collection_id
				this.api.collection_fold_info(this.collection_id, 10, ++this.page).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.img = res.data.data[0].coll.cover
						this.length = res.data.total
						res.data.data.forEach(ele => {
							this.number.push({
								id: ele.mark_id,
								name: ele.coll.name,
								price: ele.price,
								order_no: ele.order_no,
								status: ele.status,
								url: '/pages/collection/collectionDetails/collectionDetails?id=' +
									ele
									.id,
								mark_id: ele.mark_id,
								type: 1,
								img: ele.coll.cover
							})
						})
						this.$refs.popup.open()
					}
				})
			},
			getT(n) {
				return n < 10 ? '0' + n : n
			},

			goTo(item) {

				if (item.status == 4) {
					this.$refs.popup.close();
					if (item.type == 1) {
						this.$api.to("/pages/market/market_collection_details/market_collection_details?id=" + item.id)
					} else {
						this.$api.to("/pages/market/market_box_details/market_box_details?id=" + item.id)
					}
				} else {
					this.$refs.popup.close();
					this.$api.to(item.url)
				}
			},

		}
	}
</script>

<style lang="less" scoped>
	.index {
		box-sizing: border-box;
		height: calc(100vh - var(--window-bottom));
	}



	.head {
		height: 120rpx;
		line-height: 120rpx;
		position: sticky;
		top: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: ;
		position: relative;
	}

	.head .content {
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		color: ;
	}


	.head .right {
		position: absolute;
		top: 20rpx;
		right: 30rpx;
	}

	.head .right image {
		width: 48rpx;
		height: 48rpx;
		margin-left: 30rpx;
	}

	.user_info {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx 40rpx 30rpx;
		overflow: hidden;
	}

	.user_info .user-hed {
		display: flex;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}

	.user_info .user-hed>view:last-child {
		display: flex;
	}

	.logined {
		width: 530rpx;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;

		.static {
			display: flex;
			justify-content: space-between;
			position: relative;

			&:first-child {
				margin-top: 10rpx;
			}

			&:first-child>view:nth-child(1) {
				font-size: 40rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 500;
				color: #F4F4F4;
			}

			&:first-child>view:nth-child(2) {
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.hash {
			display: flex;
			align-content: center;
			font-size: 28rpx;
			color: #666;
			margin-top: 20rpx;
		}

	}

	.user_info_details {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.user_info_details>view:first-child {
		font-size: 40rpx;
		font-weight: 600;
	}

	.user_info_details>view:last-child {
		display: flex;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 16rpx;
		color: #FBFBFB;
		letter-spacing: 2rpx;
	}


	.bula {
		// border-radius: 12rpx;
		display: flex;
		box-sizing: border-box;
		flex-wrap: wrap;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.bula>view {
		width: calc(100% / 4);
		text-align: center;
		margin-top: 30rpx;
		box-sizing: border-box;
	}

	.bula>view:first-child text:before {
		content: "";
		display: block;
		height: 50rpx;
		width: 46rpx;
		// background: url("@/static/my/5516@2x.png");
		background-size: 100% 100%;
		margin: 5rpx auto;
	}

	.bula>view:nth-child(2) text:before {
		content: "";
		display: block;
		height: 50rpx;
		width: 50rpx;
		// background: url("@/static/my/5517@2x.png");
		background-size: 100% 100%;
		margin: 5rpx auto;
	}

	.bula>view:nth-child(3) text:before {
		content: "";
		display: block;
		height: 50rpx;
		width: 50rpx;
		// background: url("@/static/my/5514@2x.png");
		background-size: 100% 100%;
		margin: 5rpx auto;
	}

	.bula>view:nth-child(4) text:before {
		content: "";
		display: block;
		height: 52rpx;
		width: 52rpx;
		// background: url("@/static/my/3157@2x.png");
		background-size: 100% 100%;
		margin: 5rpx auto;
	}

	.bula>view:nth-child(5) text:before {
		content: "";
		display: block;
		height: 52rpx;
		width: 52rpx;
		// background: url("@/static/my/20220826155029.png");
		background-size: 100% 100%;
		margin: 5rpx auto;
	}

	.bula>view:nth-child(6) text:before {
		content: "";
		display: block;
		height: 52rpx;
		width: 52rpx;
		// background: url("@/static/my/20220826155032.png");
		background-size: 100% 100%;
		margin: 5rpx auto;
	}

	.bula>view:nth-child(7) text:before {
		content: "";
		display: block;
		height: 52rpx;
		width: 52rpx;
		// background: url("@/static/my/20220826155024.png");
		background-size: 100% 100%;
		margin: 5rpx auto;
	}

	.bula>view:nth-child(8) text:before {
		content: "";
		display: block;
		height: 52rpx;
		width: 52rpx;
		// background: url("@/static/my/20220826155018.png");
		background-size: 100% 100%;
		margin: 5rpx auto;
	}


	.tools {
		width: 686rpx;
		margin: 30rpx auto;
		margin-bottom: 0;
		border-radius: 20rpx;
		background: ;
	}

	.tools_row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		height: 100rpx;
		font-size: 32rpx;
		font-weight: 400;
		border-bottom: 2rpx solid #F2F7FA;
		margin-left: 20rpx;
	}

	.tools_row image {
		display: block;
		margin-right: 34rpx;
	}

	.tools_row>view {
		align-self: center;
		font-size: 28rpx;
		font-weight: 400;
		color: 000;
	}

	.tools_row>view:last-child {
		width: 60rpx;
		box-sizing: border-box;
	}

	.invite {
		width: 686rpx;
		height: 180rpx;
		margin: 30rpx auto;

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


	.menu {
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
		font-weight: 400;
		padding-top: 20rpx;
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;

		view {
			font-size: 28rpx;
			text-align: center;
			color: #999;
			height: 55rpx;
		}

		.colorWhite {
			position: relative;
			color: #000 !important;
		}

		.colorWhite::after {
			content: '';
			position: absolute;
			left: 0%;
			bottom: 0;
			width: 100rpx;
			height: 4rpx;
			background: #F2CF9C;
			border-radius: 8rpx;
		}
	}

	.head_search {
		width: 750rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0rpx 20rpx 0 20rpx;
		margin-top: 30rpx;
	}

	.head_search>view {
		align-self: center;
	}

	.head_search .input_box {
		width: 622rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		background: ;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 15rpx;
			box-sizing: border-box;
		}

		input {
			width: 530rpx;
			height: 60rpx;
			color: ;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}


	.head_search>view:last-child {
		margin-left: 20rpx;
		font-size: 28rpx;
	}


	.good-list {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		// min-height: calc(100vh - 670rpx);
		// background: #161618;

		.list-item {
			box-sizing: border-box;
			overflow: hidden;
			width: 332rpx;
			background: #1D1F1E;
			border-radius: 24rpx;
			color: #fff;

			.list-img {
				width: 332rpx;
				height: 316rpx;
				position: relative;
				margin: 0 auto;
				margin-bottom: 0;
				text-align: center;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}

				.list-sho {
					height: 44rpx;
					line-height: 44rpx;
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					z-index: 2;
					background: rgba(0, 0, 0, 0.6);
					border-radius: 74rpx;
					color: #fff;
					padding: 5rpx 20rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;

					&::before {
						content: "";
						width: 28rpx;
						height: 28rpx;
						background: #000;
						display: inline-block;
						border-radius: 50%;
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}
			}

			.list-ctx {
				font-size: 34rpx;
				font-weight: 400;
				color: 000;
				padding: 15rpx 0 0 20rpx;
				color: #fff;
			}

			.list-gx {
				font-size: 24rpx;
				color: #fff;
				padding-left: 20rpx;
				margin: 10rpx 0;
			}

			.list-prc {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #fff;
				padding: 15rpx 20rpx 0;

				text:last-child {
					font-size: 32rpx;
					font-weight: 600;
					color: #fff;
					font-family: PingFang SC-Semibold, PingFang SC;
				}
			}

		}
	}

	.pop_content {
		background-color: ;
		height: 30vh;
		padding: 20rpx;
		// overflow: scroll;
		padding-bottom: 150rpx;
		position: relative;
		// border-radius: 24rpx 24rpx 0 0;
		background: #171918;

		.top {
			display: flex;
		}

		.close {
			position: absolute;
			font-size: 50rpx;
			top: 20rpx;
			right: 30rpx;
		}

		.title {
			font-size: 34rpx;
			font-weight: 500;
			color: #fff;
			margin-left: 24rpx;


			>view {
				font-size: 24rpx;
				color: #999;
				margin-top: 8rpx;
			}
		}

		.sort {
			font-size: 24rpx;
			color: #999;
			margin-top: 15rpx;
		}

		.box {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.item {
				width: 212rpx;
				height: 128rpx;
				// background: rgba(255, 255, 255, .6);
				position: relative;
				text-align: center;
				font-size: 24rpx;
				margin: 10rpx;
				border-radius: 24rpx;
				background: #1D1F1E;
				color: #fff;

				.dot {
					font-weight: 400;
					color: #fff;
					width: 84rpx;
					height: 60rpx;
					// background: linear-gradient(135deg, #E79D45 0%, #E79D45 100%);
					border-radius: 0px 0px 0px 8rpx;
					position: absolute;
					top: 0;
					right: 0;
					border-radius: 0 24rpx 0 12rpx;
					font-size: 24rpx;

					background: url(/static/my/023.png) no-repeat;
					background-size: 100% 100%;
				}

				.ji {
					background: url(/static/my/040.png) no-repeat;
					background-size: 100% 100%;
				}


				.num {
					color: #fff;
					margin-top: 35rpx;
				}

				// .pir {
				// 	font-size: 30rpx;
				// 	font-weight: bold;
				// 	color: 000;
				// 	color: #043E4A;
				// }
			}
		}
	}


	.share_content {
		width: 680rpx;
		margin: auto;
		margin-bottom: 60rpx;

		.logo {
			.image {
				width: 680rpx;
				height: 820rpx;
				border-radius: 20rpx;
			}
		}

		.box {
			width: 680rpx;
			height: 180rpx;
			background: FFF;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			margin-top: 10rpx;
			background: #0d0d0e;

			.img {
				width: 82rpx;
				height: 82rpx;
				background: #27AC00;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
				border-radius: 60rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

			}

			.txt {
				margin-top: 5rpx;
				font-size: 28rpx;
				color: 000;
			}
		}

		.close {
			width: 64rpx;
			height: 64rpx;
			margin: 20rpx auto;
		}


	}

	.foot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 20rpx;
		padding: 5rpx 0;

		view:first-child {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999;
		}

		.price {
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #fff;
		}
	}





















	.nothing {
		width: 504rpx;
		margin: 156rpx auto 0;

		>view:last-child {
			text-align: center;
			color: #999999;
			font-size: 28rpx;
		}
	}











	.goodsitem {
		margin-bottom: 20rpx;
	}
</style>