W250913/14.uniapp/project2/pages/list/index.vue

<template>

	<view class="movieList">
		<view class="title">{{title}}</view>
		<view class="list" v-for="(item,index) in list" :key="index" @click="goToDetail(item)">
			<view class="list-left">
				<image :src="item.pic.normal" mode=""></image>
			</view>
			<view class="list-right">
				<view class="list-desc">
					<view class="list-title">
						<view class="tips">
							{{item.title}}
						</view>
						<van-rate color="#ffd21e" void-color='#c7c7c7' class="rate" :value="item.rating.star_count" />
						<text>{{item.rating.value}}</text>
					</view>
					<view class="list-icon">
						<image :src="imgUrl" mode=""></image>
					</view>
				</view>
				<view class="list-main">
					<descVue :val="item.comment" />
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		Domestic,
		Variety,
		American
	} from '../../api/list.js';
	import descVue from '../../components/desc.vue';
	export default {
		data() {
			return {

				imgUrl: '/static/xiangkan.png',
				interfaceName: "",
				ids: "",
				list: [],
				title: '',
				startNum: 0,
				countNum: 8,
				totalNum: 0
			}
		},
		components:{
				descVue
		},
		onLoad(options) {
			this.ids = options.ids;
			console.log(options.ids, 'options')
		},
		onShow() {
			this.init();
		},
		onReachBottom() {
			console.log(("打印"))
			if (this.startNum < this.totalNum) {
				this.startNum += 8;
				this.getList();
			}
		},
		methods: {
			init() {
				if (this.ids === 'tv_domestic') {
					this.interfaceName = Domestic;
				} else if (this.ids === 'tv_american') {
					this.interfaceName = American;
				} else if (this.ids === 'tv_variety_show') {
					this.interfaceName = Variety;
				}
				this.getList();
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(async () => {
					let res = await this.interfaceName({
						start: this.startNum,
						count: this.countNum
					});
					this.list = this.list.concat(res.subject_collection_items);
					console.log(this.list, 'res')
					this.title = res.subject_collection.name;
					this.totalNum = res.total;
					uni.hideLoading();
				}, 600);
			}
		}
	}
</script>

<style lang="scss">
	.title {
		font-size: 24rpx;
		margin: 20rpx 0 30rpx 0;
	}

	.list {
		width: 96%;
		height: auto;
		margin: 0 auto;
		display: flex;
		padding: 30rpx 0 50rpx;
		border-bottom: 1px solid #eee;

		.list-left {
			flex: 2;

			image {
				width: 160rpx;
				height: 230rpx;
				border-radius: 8rpx;
			}
		}

		.list-right {
			flex: 8;
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;

			.list-desc {
				flex: 1;
				display: flex;

				.list-title {
					flex: 4;
					border-right: 1px dashed #ccc;
					padding: 10rpx;

					.tips {
						font-size: 44rpx;
					}

					::v-deep .van-rate__icon {
						font-size: 20rpx;
					}

					text {
						margin-left: 10rpx;
						color: #7d7d7d;
					}
				}

				.list-icon {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;

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

			.list-main {
				flex: 2;
				font-size: 25rpx;
				color: #7d7d7d;
				background: #f7f7f7;
				border-radius: 10rpx;
				padding: 10rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>