ryx/pages/travel.vue

<template>
	<view class="travelPage">
		<u-swiper height=500 :list="swiper"  :autoplay="false" circular autoplay show-center-play-btn
			:poster="imgUrl"></u-swiper>
		<u-sticky bgColor="#fff">
			<view class="tags">
				<u-tabs :list="list" :activeStyle="{color: '#1E9F6A','font-weight': 'bold'}"  lineColor="#1E9F6A" :inactiveStyle="{color: 'rgba(51, 51, 51, 0.5)'}" :is-scroll="true"  lineWidth="80"  @change="chooseTitle">
				</u-tabs>
			</view>
		</u-sticky>
		<view class="travelContent" v-for="item,index in listArr" @click="gotravelDetails(item.id)">
			<!-- <image src="http://cdn.uviewui.com/uview/empty/list.png" mode=""></image> -->
			<view class="video">
				<image :src="item.cover_picture" ></image>
				<!-- <video src="" controls></video> -->
			</view>
			<view class="travel" >
				<view class="traveltitle">
					{{item.name}}
				</view>
				<view class="price">
					￥{{item.min_price}}
				</view>
			</view>
			<view class="describe">
				{{item.subtitle}}
				<!-- 夏日的森林，雨水充沛了山林，鲜花盛放，溪水潺潺。漫步于自然之中，感受清新的空气，放空心灵，沉醉于山雾之中，感受不同于城市的静谧与轻松。 -->
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				imgUrl: "https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png",
				swiper: [],
				// 标签栏
				list: [
					// {name:"老年康养团",id:1},{name:"上班族解乏团",id:2},{name:"少儿夏令营",id:3},{name:"自然&教育",id:4},
					],
				// 套餐列表
				listArr:[
					// {cover_picture:"https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png",name:"深林康养",description:" 夏日的森林，雨水充沛了山林，鲜花盛放，溪水潺潺。漫步于自然之中，感受清新的空气，放空心灵，沉醉于山雾之中，感受不同于城市的静谧与轻松。",min_price:"300"},
					// {cover_picture:"https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png",name:"深林康养",description:" 夏日的森林，雨水充沛了山林，鲜花盛放，溪水潺潺。漫步于自然之中，感受清新的空气，放空心灵，沉醉于山雾之中，感受不同于城市的静谧与轻松。",min_price:"300"}
				],
				lineWidth:''
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				let userinfo=this.$store.state.userinfo
				// 获取轮播图
				let swiper=uni.getStorageSync("data")
				//this.swiper=swiper[9].value
				// 套餐主题
				uni.$u.http.post('/api/category/list',userinfo,{
					custom: {
						auth: true
					}
				}).then((res) => {
					console.log(res)
					this.list=res
				}).catch((err) => {
					console.log( err)
				})
				// 套餐列表
				uni.$u.http.post('/api/good/index',{
					category_id:1,
					per_page:15,
					page:1
				},{
					custom: {
						auth: true
					}
				}).then((res) => {
					console.log(res.data)
					this.listArr=res.data
					this.list2=res.data.picture
					console.log(res.data[0].picture,"详情图")
				}).catch((err) => {
					console.log( err)
				})
			},
			// 切换标签
			chooseTitle(e){
				console.log(e)
				this.lineWidth=e.rect.width
				uni.$u.http.post('/api/good/index',{
					category_id:e.id,
					per_page:15,
					page:1
				},{
					custom: {
						auth: true
					}
				}).then((res) => {
					console.log(res.data)
					this.listArr=res.data
				}).catch((err) => {
					console.log( err)
				})
			},
			// 跳转套餐详情
			gotravelDetails(id) {
				uni.navigateTo({
					url: `/pages/travel/travelDetails?id=${id}`
				})
			}
		}
	}
</script>
<style lang="less">
	page{
		color: rgba(51, 51, 51, 1);
	}
	.tags{
		box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.06);
	}
	.travelPage {
		// padding: 20rpx;
		box-sizing: border-box;
		height: 100%;
		background-color: #FCFCFC;

		.title {
			margin: 20rpx;
		}

		.travelContent {
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			;
			margin: 40rpx 0rpx;
			background-color: #fff;
			border-radius: 30rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 14rpx 0rpx rgba(0, 21, 3, 0.05);
			border-radius: 0px 0px 16rpx 100rpx;

			.video {
				margin: 0 30rpx;
				// box-shadow: 0px 8px 14px 0px rgba(0, 21, 3, 0.05);
				// border-radius: 16px 16px 16px 58px;
				image{
					width: 100%;
					height: 410rpx;
				}
			}

			// video {
			// 	width: 100%;
			// 	box-shadow: 0px 8px 14px 0px rgba(0, 21, 3, 0.05);
			// 	border-radius: 16rpx 16rpx 0px 0px;
			// }

			.travel {
				font-weight: bold;
				font-size: 30rpx;
				padding: 40rpx 56rpx 10rpx;
				display: flex;
				justify-content: space-between;
			}

			.describe {
				font-size: 26rpx;
				box-sizing: border-box;
				padding: 10rpx 56rpx 40rpx;
			}
		}
	}
</style>