W250511/14.uniapp小程序/project2/pages/list/list.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">
					<Desc :val="item.recommend_comment"></Desc>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Domestic,
		Variety,
		American
	} from '../../api/home.js';
	import Desc from '../../components/desc.vue';
	export default {
		onLoad(options) {
			this.ids = options.params;
		},
		onShow() {
			this.main()
		},
		data() {
			return {
				list: [],
				imgUrl: '/static/xiangkan.png',
				title: "",
				ids: "",
				interfaceName: '',
				startNum: 0,
				countNum: 8,
				totalNum: 0
			}
		},
		components: {
			Desc
		},
		methods: {
			main() {
				if (this.ids == 'tv_domestic') {
					this.interfaceName = Domestic;
				} else if (this.ids == "tv_american") {
					this.interfaceName = Variety;
				} else if (this.ids == 'tv_variety_show') {
					this.interfaceName = American;
				}

				this.init();
			},
			async init() {
				let res = await this.interfaceName({
					start: this.startNum,
					count: this.countNum
				});
				if (this.list.length) {
					this.list = this.list.concat(res.subject_collection_items)
				} else {
					this.list = res.subject_collection_items;
				}
				this.title = res.subject_collection.name;
				this.totalNum = res.total;
			},
			goToDetail(val) {
				console.log(val.id, 'val')
				uni.navigateTo({
					url:`/pages/detail/detail?ids=${val.id}`
				})
			}
		},
		onPullDownRefresh() {
			this.main();
		},
		onReachBottom() {
			console.log("走进来")
			if (this.startNum < this.totalNum) {
				this.startNum += 8;
				this.main();
			}
		}

	}
</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: 25rrpx;
				color: #7d7d7d;
				background: #f7f7f7;
				border-radius: 10rpx;
				padding: 10rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>