ryx/pages/travel.vue

<template>
	<view class="travelPage">
		<u-swiper height=500 :list="swiper"  circular :autoplay="true" show-center-play-btn :poster="imgUrl" :duration="1000" :interval="5000">
		</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="55"
					@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" mode="aspectFill"></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" v-if="item.subtitle">
				{{item.subtitle}}
				<!-- 夏日的森林，雨水充沛了山林，鲜花盛放，溪水潺潺。漫步于自然之中，感受清新的空气，放空心灵，沉醉于山雾之中，感受不同于城市的静谧与轻松。 -->
			</view>
		</view>
		<view class="paddingsafe"></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()
		},
		onShow() {
			this.initvist()
		},
		methods: {
			initvist() {
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route; //获取当前页面的路由
				let code = uni.getStorageSync("code")
				let obj = {
					page: route,
					code: code
				}
				if (code) {
					uni.$u.http.post('/api/visit/add', obj, {
						custom: {
							auth: true
						}
					}).then((res) => {}).catch((err) => {})
				}
			},
			init() {
				let userinfo = this.$store.state.userinfo
				// 获取轮播图

				let home = uni.getStorageSync("home")
				home.images.forEach(item => {
					this.swiper.push(item.url)
				})

				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: 690rpx;
					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>