pay-video-applet-uniapp-24-8-22/pages_mine/mine/sonPage/release/releaseList.vue

<template>
	<view class="publishList">
		<view class="item" v-for="(item, index) in list" @click="gotoDetail(item)" :key="index">
			<image :src="item.image" style="width: 40%"></image>
			<view class="text">
				<view class="title">
					{{ item.title }}
				</view>
				<view class="createBy">
					<view class="">
						是否置顶：{{ item.isTop=='Y'?"是":"否" }}
					</view>
				</view>
				<view class="isPay">
					<view class="">
						是否付费：{{ item.isPay=='Y'?"是":"否" }}
					</view>
				</view>
				<view class="createTime">
					发布时间：{{ item.createTime }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "releaseList",
		props: ['list'],
		data() {
			return {
				total: 0,
				queryParams: {
					pageNo: 1,
					pageSize: 5,
				},
				checkedIndex: 0,
			};
		},
		onShow() {
			// this.getData()
		},
		// onReachBottom() {
		//   let allTotal = this.queryParams.pageNo * this.queryParams.pageSize
		//   if (allTotal < this.total) {
		//     //当前条数小于总条数 则增加请求数
		//  console.log(this.queryParams.pageSize,'==son=')
		//     this.queryParams.pageSize += 10
		//     this.getData() //调用加载数据方法
		//   }
		// },
		methods: {
			getData() {
				this.$api('infoGetMyReleasePage', {
					pageNo: this.queryParams.pageNo,
					pageSize: this.queryParams.pageSize,
					state: this.checkedIndex

				}, res => {
					if (res.code == 200) {
						this.list = res.result.records
						this.total = res.result.total
					}
				})
			},
			gotoDetail(item) {
				// 根据字段区分跳转到不同页面
				if (item.isCard == 'N') {
					// 跳转到动态(贴子)详情页面
					console.log("跳转到动态(贴子)详情页面")
					this.$utils.navigateTo('/publish/postDetail?id=' + item.id)
				} else {
					// 跳转到演员(名片)详情页面
					console.log("跳转到演员(名片)详情页面")
					this.$utils.navigateTo('/publish/actorDetail?id=' + item.id)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.publishList {
		width: 90%;

		.item {
			height: 200rpx;
			width: 100%;
			background-color: #fff;
			overflow: hidden;
			border-radius: 10rpx;
			color: #777;
			display: flex;
			font-size: 24rpx;
			margin: 30rpx 0;

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

			.text {
				display: flex;
				flex-direction: column;
				padding: 16rpx;
				width: 60%;

				.title {
					font-size: 30rpx;
					font-weight: 600;
					color: #000;
				}

				.createBy {
					display: flex;
					margin-top: auto;
					margin-bottom: 10rpx;
					justify-content: space-between;

					&>view {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.isPay {
					display: flex;
					margin-top: auto;
					margin-bottom: 10rpx;
					color: #7395f4;
					justify-content: space-between;

					&>view {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>