MoeNovaClient/pages/make/relatedWorks.vue

<template>
	<view class="page">
		<view class="nav-bar">
			<view class="left">
				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
			</view>
			<view class="center">全部作品</view>
			<view class="right">
				<view class="btn" @click="onSubmit">确定</view>
			</view>
		</view>

		<view class="listContent">
			<view class="list-item" v-for="(item, index) in listItems" :key="index" @click="selectItem(item)">
				<view class="img-box">
					<image :src="item.images"></image>
				</view>
				<view class="info">
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.tdate }}</view>
				</view>
				<view class="select-box">
					<image v-if="selectedItem === item" src="../../static/icon/wd_icon_gouxuan05.png"></image>
					<image v-else src="../../static/icon/wd_icon_gouxuan04.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			skey: '',
			uinfo: {},
			selectedItem: null,
			listItems: []
		}
	},
	onLoad(params) {
		if (getApp().globalData.skey != "") {
			this.skey = getApp().globalData.skey;
		} else {
			this.skey = params.skey || ''; //1234567xef
		}
		this.id = params.id || '117';
		let that = this;
		that.getInfo();
	},
	onShow() {
		let that = this;
	},
	methods: {
		goBack() {
		uni.navigateBack(); // 返回上一页
		},
		selectItem(item) { // 添加选择项目的方法
			this.selectedItem = item;
		},
		onSubmit() {
			if (this.selectedItem) {
				uni.$emit('selectItem', this.selectedItem);
				uni.navigateBack(); // 返回上一页
			} else {
				uni.showToast({
					title: '请选择一个项目',
					icon: 'none'
				});
			}
		},
		getInfo() {
			var that = this;


			uni.request({
				url: this.$apiHost + '/Work/getlist', //仅为示例，并非真实接口地址。
				data: {
					uuid: getApp().globalData.uuid,
					id: this.id,
					type: "select"
				},
				header: {
					'content-type': 'application/json' //自定义请求头信息
				},
				success: (res) => {
					console.log('获取到作品信息列表', res.data.list);

					this.listItems = res.data.list;


				}
			});
		},
		checkField(str, tips) {
			if (str.length < 2) {
				uni.showToast({
					title: tips,
					icon: 'none'
				});
				return false;
			}
			return true;
		},
	}
}
</script>

<style scoped lang="scss">
page {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	background-color: #f2f6f2;
	min-height: 100vh;
}

.status_bar {
	height: 44rpx;
	width: 100%;
}

.page {
	background-color: #f2f6f2;
	display: flex;
	flex-direction: column;
	width: 750rpx;
	min-height: 100vh;
}


.nav-bar {
	width: calc(100ve - 73rpx);
	height: calc(96rpx + var(--status-bar-height));
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	padding-right: 40rpx;
	padding-left: 33rpx;
	padding-top: var(--status-bar-height);
	box-sizing: border-box;

	.left {
		display: flex;
		align-items: center;
		font-family: PingFang SC-Bold;
		font-weight: 400;
		font-size: 32rpx;
		color: #1f1f1f;

		.uni-btn-icon {
			font-size: 45rpx;
			font-weight: bold;
			color: #1f1f1f;
			transition: color 0.2s;
			margin-right: 20rpx;

			&:active {
				color: #2b85e4;
			}
		}
	}

	.center {
		font-size: 36rpx;
		font-family: "PingFang SC-Bold";
		font-weight: 400;
		color: #1f1f1f;
	}

	.right {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: "PingFang SC-Bold";
		font-weight: 400;

		.btn {
			border-radius: 26rpx;
			background: #1f1f1f;
			padding: 6rpx 32rpx;
			color: #acf934;
			font-size: 28rpx;
		}
	}
}

.listContent {
	padding: 20rpx;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	row-gap: 20rpx;

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

	.list-item {
		background: #fff;
		height: 220rpx;
		border-radius: 20rpx;
		padding: 22rpx 48rpx 22rpx 26rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.img-box {
			width: 130rpx;
			height: 166rpx;
			border-radius: 15rpx;
			overflow: hidden;
		}

		.info {
			width: 450rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 10rpx;

			.title {
				font-weight: 400;
				font-size: 32rpx;
				color: #1F1F1F;
			}

			.desc {
				font-family: 'PingFang SC-Medium';
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}

		}

		.select-box {
			width: 40rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
</style>