From a76435be0ddf9035545c134e370b40e9aca62341 Mon Sep 17 00:00:00 2001
From: jiazhipeng <jiazhipeng@xmainc.com>
Date: Mon, 2 Sep 2024 11:41:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B8=B8=E8=AE=B0=E6=94=BB=E7=95=A5=E3=80=81?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E6=97=A5=E5=8E=86=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                  |  28 +++
 pages/index/index.vue                       |   2 +-
 subPackages/eventCalendar/detail.vue        | 214 ++++++++++++++++++
 subPackages/eventCalendar/eventCalendar.vue |   7 +-
 subPackages/hotelHomestay/detail.vue        |  10 +-
 subPackages/hotelHomestay/hotelHomestay.vue |   2 +-
 subPackages/hotelHomestay/order.vue         |   3 +-
 subPackages/line/detail.vue                 | 184 +++++++++++++++
 subPackages/line/lineList.vue               |   7 +-
 subPackages/order/orderCoupon.vue           |   2 +-
 subPackages/techan/detail.vue               |  14 +-
 subPackages/travelGuide/detail.vue          | 200 +++++++++++++++++
 subPackages/travelGuide/travelGuide.vue     | 234 ++++++++++++++++++++
 13 files changed, 899 insertions(+), 8 deletions(-)
 create mode 100644 subPackages/eventCalendar/detail.vue
 create mode 100644 subPackages/line/detail.vue
 create mode 100644 subPackages/travelGuide/detail.vue
 create mode 100644 subPackages/travelGuide/travelGuide.vue

diff --git a/pages.json b/pages.json
index 04d8f2a..80afdf0 100644
--- a/pages.json
+++ b/pages.json
@@ -87,6 +87,12 @@
 					"navigationStyle": "custom"
 				}
 			},
+			{
+				"path": "line/detail",
+				"style": {
+					"navigationBarTitleText": "线路详情"
+				}
+			},
 			{
 				"path": "eventCalendar/eventCalendar",
 				"style": {
@@ -94,6 +100,12 @@
 					"navigationStyle": "custom"
 				}
 			},
+			{
+				"path": "eventCalendar/detail",
+				"style": {
+					"navigationBarTitleText": "活动详情"
+				}
+			},
 			{
 				"path": "service/service",
 				"style": {
@@ -156,6 +168,21 @@
 					"navigationBarTitleText": "酒店民宿"
 				}
 			},
+			{
+				"path" : "travelGuide/travelGuide",
+				"style" : 
+				{
+					"navigationBarTitleText": "游记攻略",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "travelGuide/detail",
+				"style" : 
+				{
+					"navigationBarTitleText": "攻略详情"
+				}
+			},
 			{
 				"path": "food/taocanDetail",
 				"style": {
@@ -204,6 +231,7 @@
 			        "navigationBarTitleText" : "个人收藏"
 			    }
 			}
+			
 		]
 	}],
 	"tabBar": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 7316443..aeea83a 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -186,7 +186,7 @@
 					{
 						img: 'https://static.ticket.sz-trip.com/yandu/images/index/jdmp.png',
 						text: '游记攻略',
-						path: ''
+						path: '/subPackages/travelGuide/travelGuide'
 					},
 					{
 						img: 'https://static.ticket.sz-trip.com/yandu/images/index/jdmp.png',
diff --git a/subPackages/eventCalendar/detail.vue b/subPackages/eventCalendar/detail.vue
new file mode 100644
index 0000000..d2508b4
--- /dev/null
+++ b/subPackages/eventCalendar/detail.vue
@@ -0,0 +1,214 @@
+<template>
+	<view class="bg">
+		<view class="swipe-box" v-if="info.images">
+			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
+				indicator-active-color="#fff" @change="swiperChange">
+				<swiper-item v-for="(item, index) in info.images.split(',')" :key="item.id">
+					<view class="swiper-item">
+						<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
+					</view>
+				</swiper-item>
+			</swiper>
+			
+			<view class="swiper-pointer">
+				{{swiperCurrent}}/{{info.images.split(',').length}}
+			</view>
+			
+			<view class="collect" style="right: 100rpx;" @click.stop="collect()">
+				<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image>
+				<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image>
+			</view>
+			
+			<view class="collect" @click.stop="share()">
+				<image src="https://tongli.sz-trip.com/uploads/20240902/8eb614e4ea41db655a4e6da2cc0ca954.png"></image>
+			</view>
+		</view>
+		
+	
+			<view class="common-container info-container">
+				<view class="info-title text-overflowRows">{{info.title}}</view>
+				<view class="text-overflow" style="padding: 40rpx 0 16rpx;">{{info.address}}</view>
+				<view class="text-overflow" v-if="info.start_time && info.end_time">时间：{{info.start_time}} - {{info.end_time}}</view>
+			</view>
+			<view class="common-container detail-container">
+				<view class="" id="cpts" v-html="formateRichText(info.detail)"></view>
+			</view>
+
+
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				id: null,
+				swiperCurrent: 1,
+				info: {},
+			}
+		},
+		onShow(options) {
+		},
+		onLoad(options) {
+			this.id = options.id;
+			this.getInfo();
+		},
+		methods: {
+			swiperChange (e) {
+				this.swiperCurrent = e.detail.current+1
+			},
+			// 获取信息
+			getInfo() {
+				this.Post({id: this.id},'/api/activity/getActivityCalendarDetail').then(res => {
+					if (res.data.flag == 0) {
+						uni.showToast({title: '商品不存在或已下架',icon: 'none'})
+						setTimeout(() => {this.goBack()}, 2000)
+					}
+					this.info = res.data;
+				});
+			},
+			// 收藏
+			collect() {
+				this.Post({type: 7,id: this.id},'/api/scenic/collect').then(res => {
+					if (res) {
+						uni.showToast({title: res.msg,icon: 'none'});
+						this.info.is_collect = !this.info.is_collect
+					}
+				});
+			},
+			share () {
+				var pages = getCurrentPages() //获取加载的页面
+				var view = pages[pages.length - 1] //获取当前页面的对象
+				uni.share({
+					provider: "weixin",
+					scene: "WXSceneSession",
+					type: 0,
+					href: `${view.route}`,
+					title: this.info.title,
+					imageUrl: this.showImg(this.info.image),
+					success: function (res) {
+						console.log("success:" + JSON.stringify(res));
+					},
+					fail: function (err) {
+						console.log("fail:" + JSON.stringify(err));
+					}
+				});
+			}
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	*{
+		box-sizing: border-box;
+	}
+	.bg{
+		min-height: 100vh;
+		background: #F8F8F8;
+	}
+	
+	.swipe-box {
+		height: 867rpx;
+		position: relative;
+	
+		.swiper-item-num {
+			width: 90rpx;
+			height: 40rpx;
+			background: rgba(0, 0, 0, 0.5);
+			border-radius: 20rpx;
+			font-size: 24rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #ffffff;
+			text-align: center;
+			line-height: 40rpx;
+			position: absolute;
+			right: 30rpx;
+			bottom: 50rpx;
+		}
+		
+		.collect{
+			position: absolute;
+			width: 51rpx;
+			height: 51rpx;
+			right: 20rpx;
+			top: 20rpx;
+			font-size: 23rpx;
+			background: rgba(0, 0, 0, 0.5);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			image{
+				width: 36rpx;
+				height: 36rpx;
+			}
+		}
+		.swiper-pointer{
+			position: absolute;
+			right: 20rpx;
+			bottom: 20rpx;
+			background: rgba(22,22,22,0.5);
+			border-radius: 23rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			font-size: 24rpx;
+			color: #FFFFFF;
+			padding: 6rpx 14rpx;
+			
+		}
+	}
+	
+	.swiper {
+		height: 867rpx;
+		position: relative;
+	
+		.swiper-item {
+			width: 100%;
+			height: 867rpx;
+	
+			.item-img {
+				width: 750rpx;
+				height: 867rpx;
+			}
+			.item-img.pop-swiper-image{
+				height: 347rpx;
+				border-radius: 13rpx;
+			}
+		}
+	}
+	
+	.common-container{
+		background: white;
+		width: 100%;
+	}
+	
+	
+	.info-container{
+		padding: 34rpx 25rpx;
+		width: 100%;
+		margin-bottom: 21rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		font-size: 25rpx;
+		color: #666666;
+		.info-title{
+
+			font-weight: bold;
+			font-size: 35rpx;
+			color: #000000;
+		}
+		
+	}
+	
+	.detail-container{
+		width: 100%;
+		padding: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #333333;
+	}
+</style>
diff --git a/subPackages/eventCalendar/eventCalendar.vue b/subPackages/eventCalendar/eventCalendar.vue
index 8802b86..064873a 100644
--- a/subPackages/eventCalendar/eventCalendar.vue
+++ b/subPackages/eventCalendar/eventCalendar.vue
@@ -52,7 +52,7 @@
 				</view>
 			</view>
 			
-			<view class="item" v-for="(item,index) in list" :key="index">
+			<view class="item" v-for="(item,index) in list" :key="index" @click="viewDetail(item)">
 				<image :src="showImg(item.image)" mode="aspectFill" class="item-img"></image>
 				<view class="content flex-column">
 					<view class="title text-overflowRows">{{item.title}}</view>
@@ -356,6 +356,11 @@
 					this.getList()
 				}
 			},
+			viewDetail (item) {
+				uni.navigateTo({
+					url:'/subPackages/eventCalendar/detail?id='+item.id
+				})
+			},
 		}
 	}
 </script>
diff --git a/subPackages/hotelHomestay/detail.vue b/subPackages/hotelHomestay/detail.vue
index 55db99d..4b45b96 100644
--- a/subPackages/hotelHomestay/detail.vue
+++ b/subPackages/hotelHomestay/detail.vue
@@ -413,9 +413,16 @@
 		
 		.collect{
 			position: absolute;
+			width: 51rpx;
+			height: 51rpx;
 			right: 36rpx;
 			top: 36rpx;
 			font-size: 23rpx;
+			background: rgba(0, 0, 0, 0.5);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			image{
 				width: 36rpx;
 				height: 36rpx;
@@ -716,7 +723,8 @@
 			border-radius: 13rpx;
 			padding: 20rpx;
 			margin-top: 26rpx;
-			max-height: 600rpx;
+			max-height: 800rpx;
+			overflow-y: auto;
 			.pop-detail-title{
 				font-family: PingFang SC;
 				font-weight: 500;
diff --git a/subPackages/hotelHomestay/hotelHomestay.vue b/subPackages/hotelHomestay/hotelHomestay.vue
index 555d66a..90850ba 100644
--- a/subPackages/hotelHomestay/hotelHomestay.vue
+++ b/subPackages/hotelHomestay/hotelHomestay.vue
@@ -13,7 +13,7 @@
 				<view class="left-image flex-shrink-0 relative">
 					<image class="left-image " :src="showImg(item.image)" mode="aspectFill"></image>
 					<view class="collect" @click.stop="like(item)">
-						<image src="https://tongli.sz-trip.com/uploads/20240826/81b1f86ff8534db09472853b4c0b6748.png" v-if="item.is_collect"></image>
+						<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="item.is_collect"></image>
 						<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image>
 					</view>
 					
diff --git a/subPackages/hotelHomestay/order.vue b/subPackages/hotelHomestay/order.vue
index bed8400..0bf6ef4 100644
--- a/subPackages/hotelHomestay/order.vue
+++ b/subPackages/hotelHomestay/order.vue
@@ -470,7 +470,8 @@
 			border-radius: 13rpx;
 			padding: 20rpx;
 			margin-top: 26rpx;
-			max-height: 600rpx;
+			max-height: 800rpx;
+			overflow-y: auto;
 			.pop-detail-title{
 				font-family: PingFang SC;
 				font-weight: 500;
diff --git a/subPackages/line/detail.vue b/subPackages/line/detail.vue
new file mode 100644
index 0000000..56b9867
--- /dev/null
+++ b/subPackages/line/detail.vue
@@ -0,0 +1,184 @@
+<template>
+	<view class="bg">
+		<view class="swipe-box">
+			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
+				indicator-active-color="#fff" @change="swiperChange">
+				<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id">
+					<view class="swiper-item">
+						<image class="item-img" :src="showImg(item)" ></image>
+					</view>
+				</swiper-item>
+			</swiper>
+			
+			<view class="swiper-pointer">
+				{{swiperCurrent}}/{{info.list_images.split(',').length}}
+			</view>
+			
+			<view class="collect" @click.stop="collect()">
+				<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image>
+				<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image>
+			</view>
+		</view>
+		
+	
+			<view class="common-container info-container">
+				<view class="info-title text-overflowRows">{{info.title}}</view>
+			</view>
+			<view class="common-container detail-container">
+				<view class="" id="cpts" v-html="formateRichText(info.feature_content)"></view>
+			</view>
+
+
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				id: null,
+				swiperCurrent: 1,
+				info: {list_images:''},
+			}
+		},
+		onShow(options) {
+		},
+		onLoad(options) {
+			this.id = options.id;
+			this.getInfo();
+		},
+		methods: {
+			swiperChange (e) {
+				this.swiperCurrent = e.detail.current+1
+			},
+			// 获取信息
+			getInfo() {
+				this.Post({goods_id: this.id},'/api/goods/getGoodDetail').then(res => {
+					if (res.data.flag == 0) {
+						uni.showToast({title: '商品不存在或已下架',icon: 'none'})
+						setTimeout(() => {this.goBack()}, 2000)
+					}
+					this.info = res.data;
+				});
+			},
+			// 收藏
+			collect() {
+				this.Post({type: 6,id: this.id},'/api/scenic/collect').then(res => {
+					if (res) {
+						uni.showToast({title: res.msg,icon: 'none'});
+						this.info.is_collect = !this.info.is_collect
+					}
+				});
+			},
+	
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	*{
+		box-sizing: border-box;
+	}
+	.bg{
+		min-height: 100vh;
+		background: #F8F8F8;
+	}
+	
+	.swipe-box {
+		height: 867rpx;
+		position: relative;
+	
+		.swiper-item-num {
+			width: 90rpx;
+			height: 40rpx;
+			background: rgba(0, 0, 0, 0.5);
+			border-radius: 20rpx;
+			font-size: 24rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #ffffff;
+			text-align: center;
+			line-height: 40rpx;
+			position: absolute;
+			right: 30rpx;
+			bottom: 50rpx;
+		}
+		
+		.collect{
+			position: absolute;
+			width: 51rpx;
+			height: 51rpx;
+			right: 36rpx;
+			top: 36rpx;
+			font-size: 23rpx;
+			background: rgba(0, 0, 0, 0.5);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			image{
+				width: 36rpx;
+				height: 36rpx;
+			}
+		}
+		.swiper-pointer{
+			position: absolute;
+			right: 36rpx;
+			bottom: 80rpx;
+			background: rgba(22,22,22,0.5);
+			border-radius: 23rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			font-size: 24rpx;
+			color: #FFFFFF;
+			padding: 6rpx 14rpx;
+			
+		}
+	}
+	
+	.swiper {
+		height: 867rpx;
+		position: relative;
+	
+		.swiper-item {
+			width: 100%;
+			height: 867rpx;
+	
+			.item-img {
+				width: 750rpx;
+				height: 867rpx;
+			}
+			.item-img.pop-swiper-image{
+				height: 347rpx;
+				border-radius: 13rpx;
+			}
+		}
+	}
+	
+	.common-container{
+		background: white;
+		width: 100%;
+	}
+	
+	
+	.info-container{
+		padding: 34rpx 25rpx;
+		width: 100%;
+		font-family: PingFang SC;
+		font-weight: bold;
+		font-size: 35rpx;
+		color: #000000;
+		margin-bottom: 21rpx;
+	}
+	
+	.detail-container{
+		width: 100%;
+		padding: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #333333;
+	}
+</style>
diff --git a/subPackages/line/lineList.vue b/subPackages/line/lineList.vue
index ec98905..eb54a3c 100644
--- a/subPackages/line/lineList.vue
+++ b/subPackages/line/lineList.vue
@@ -2,7 +2,7 @@
 	<view class="bg">
 		<span class="iconfont topLeft" @click="goBack">&#xe660;</span>
 		<img :src="showImg('/uploads/20240826/97282395bdd31e0b1fe20e5356cc4fc4.png')" class="topImg" />
-		<view class="item" v-for="item in list" :key="item.id">
+		<view class="item" v-for="item in list" :key="item.id" @click="viewDetail(item)">
 			<image class="img" :src="showImg(item.image)" mode=""></image>
 			<view class="content">
 				<view class="title text-overflowRows">
@@ -45,6 +45,11 @@
 					}
 				})
 			},
+			viewDetail (item) {
+				uni.navigateTo({
+					url:'/subPackages/line/detail?id='+item.id
+				})
+			},
 		},
 		onReachBottom() {
 			setTimeout(() => {
diff --git a/subPackages/order/orderCoupon.vue b/subPackages/order/orderCoupon.vue
index 242f487..9b08ece 100644
--- a/subPackages/order/orderCoupon.vue
+++ b/subPackages/order/orderCoupon.vue
@@ -46,7 +46,7 @@
 		</view>
 		
 		<view v-else class="noCoupon">
-			<img src="https://static.ticket.sz-trip.com/dongtai/images/user/noCoupon.png" class="no-couPon">
+			<img :src="showImg('/uploads/20240902/376de17481e3010f50305be570009745.png')" class="no-couPon">
 			<view>暂无优惠券</view>
 		</view>
 		
diff --git a/subPackages/techan/detail.vue b/subPackages/techan/detail.vue
index f6232d8..bebee17 100644
--- a/subPackages/techan/detail.vue
+++ b/subPackages/techan/detail.vue
@@ -1,7 +1,19 @@
 <template>
 	<view class="bg" id="bg" v-if="info">
 		<view class="swipe-box">
-			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular>
+			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" circular>
+				<swiper-item v-if="info && info.videourl">
+				    <video
+				        :src="showImg(info.videourl)"
+				        id="detailVideo"
+				        :poster="showImg(info.image)"
+						@play="play"
+						@error="videoErrorCallback"
+						controls
+						style="width: 100%;height: 100%;"
+						object-fit="cover"
+				    ></video>
+				</swiper-item>
 				<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id">
 					<view class="swiper-item">
 						<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
diff --git a/subPackages/travelGuide/detail.vue b/subPackages/travelGuide/detail.vue
new file mode 100644
index 0000000..5d74e4e
--- /dev/null
+++ b/subPackages/travelGuide/detail.vue
@@ -0,0 +1,200 @@
+<template>
+	<view class="bg">
+		<view class="swipe-box" v-if="info.images">
+			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
+				indicator-active-color="#fff" @change="swiperChange">
+				<swiper-item v-for="(item, index) in info.images.split(',')" :key="item.id">
+					<view class="swiper-item">
+						<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
+					</view>
+				</swiper-item>
+			</swiper>
+			
+			<view class="swiper-pointer">
+				{{swiperCurrent}}/{{info.images.split(',').length}}
+			</view>
+			
+			<view class="collect" @click.stop="collect()">
+				<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image>
+				<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image>
+			</view>
+			
+			<!-- <view class="collect" @click.stop="share()">
+				<image src="https://tongli.sz-trip.com/uploads/20240902/8eb614e4ea41db655a4e6da2cc0ca954.png"></image>
+			</view> -->
+		</view>
+		
+	
+			<view class="common-container info-container">
+				<view class="info-title text-overflowRows">{{info.title}}</view>
+				<view class="flex-between" style="padding: 40rpx 0 0;">
+					<view>浏览 {{info.view}}</view>
+					<view>发布时间：{{info.create_time}}</view>
+				</view>
+				
+				<!-- <view class="text-overflow" v-if="info.start_time && info.end_time">时间：{{info.start_time}} - {{info.end_time}}</view> -->
+			</view>
+			<view class="common-container detail-container">
+				<view class="" id="cpts" v-html="formateRichText(info.detail)"></view>
+			</view>
+
+
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				id: null,
+				swiperCurrent: 1,
+				info: {},
+			}
+		},
+		onShow(options) {
+		},
+		onLoad(options) {
+			this.id = options.id;
+			this.getInfo();
+		},
+		methods: {
+			swiperChange (e) {
+				this.swiperCurrent = e.detail.current+1
+			},
+			// 获取信息
+			getInfo() {
+				this.Post({id: this.id},'/api/article/getArticleById').then(res => {
+					if (res.data.flag == 0) {
+						uni.showToast({title: '文章不存在或已下架',icon: 'none'})
+						setTimeout(() => {this.goBack()}, 2000)
+					}
+					this.info = res.data;
+				});
+			},
+			// 收藏
+			collect() {
+				this.Post({type: 1,id: this.id},'/api/scenic/collect').then(res => {
+					if (res) {
+						uni.showToast({title: res.msg,icon: 'none'});
+						this.info.is_collect = !this.info.is_collect
+					}
+				});
+			},
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	*{
+		box-sizing: border-box;
+	}
+	.bg{
+		min-height: 100vh;
+		background: #F8F8F8;
+	}
+	
+	.swipe-box {
+		height: 867rpx;
+		position: relative;
+	
+		.swiper-item-num {
+			width: 90rpx;
+			height: 40rpx;
+			background: rgba(0, 0, 0, 0.5);
+			border-radius: 20rpx;
+			font-size: 24rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #ffffff;
+			text-align: center;
+			line-height: 40rpx;
+			position: absolute;
+			right: 30rpx;
+			bottom: 50rpx;
+		}
+		
+		.collect{
+			position: absolute;
+			width: 51rpx;
+			height: 51rpx;
+			right: 20rpx;
+			top: 20rpx;
+			font-size: 23rpx;
+			background: rgba(0, 0, 0, 0.5);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			image{
+				width: 36rpx;
+				height: 36rpx;
+			}
+		}
+		.swiper-pointer{
+			position: absolute;
+			right: 20rpx;
+			bottom: 20rpx;
+			background: rgba(22,22,22,0.5);
+			border-radius: 23rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			font-size: 24rpx;
+			color: #FFFFFF;
+			padding: 6rpx 14rpx;
+			
+		}
+	}
+	
+	.swiper {
+		height: 867rpx;
+		position: relative;
+	
+		.swiper-item {
+			width: 100%;
+			height: 867rpx;
+	
+			.item-img {
+				width: 750rpx;
+				height: 867rpx;
+			}
+			.item-img.pop-swiper-image{
+				height: 347rpx;
+				border-radius: 13rpx;
+			}
+		}
+	}
+	
+	.common-container{
+		background: white;
+		width: 100%;
+	}
+	
+	
+	.info-container{
+		padding: 34rpx 25rpx;
+		width: 100%;
+		margin-bottom: 21rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		font-size: 25rpx;
+		color: #666666;
+		.info-title{
+
+			font-weight: bold;
+			font-size: 35rpx;
+			color: #000000;
+		}
+		
+	}
+	
+	.detail-container{
+		width: 100%;
+		padding: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #333333;
+	}
+</style>
diff --git a/subPackages/travelGuide/travelGuide.vue b/subPackages/travelGuide/travelGuide.vue
new file mode 100644
index 0000000..526fa01
--- /dev/null
+++ b/subPackages/travelGuide/travelGuide.vue
@@ -0,0 +1,234 @@
+<template>
+	<view class="bg">
+		<view class="topImg relative">
+			<img v-if="headImg" :src="showImg(headImg)" class="topImg" mode="aspectFill">
+			<view class="icon-back"  :style="{top:systemInfo.textTop,left:'19rpx'}" @click="goBack()" >
+				<uni-icons type="left" size="24" color="#242424"></uni-icons>
+			</view>
+		</view>
+		
+		<view class="tag-container no-scrollbar">
+			<view :class="['tag', type_id==0?'active':'']" @click="setTag(0)">全部</view>
+			<view :class="['tag', type_id==1?'active':'']" v-for="(item,i) in 10" :key="i" @click="setTag(i)">景点</view>
+		</view>
+		
+		<view class="strategy-box box">
+			<view v-for="(num,nums) in 2" :key="nums">
+			    <view v-for="(item,index) in list" :key="index" class="strategy-item" v-if="index % 2 === nums" @click="viewDetail(item)">
+					<!-- <view class="title-tag" v-if="item.image_tag">{{item.image_tag}}</view> -->
+			        <image class="strategy-image" :src="showImg(item.image)" mode="widthFix"></image>
+			        <view class="strategy-content">
+			        	<view class="strategy-title">{{item.title}}</view>
+			        	<view class="flex-between">
+			        		<view class="text-overflow" style="display: flex;align-items: center;width: 200rpx;">
+			        			<image :src="showImg(item.author_img)" mode="" class="author-img"></image>
+			        			{{item.author}}
+			        		</view>
+			        		<view style="display: flex;align-items: center;">
+			        			<image src="https://static.ticket.sz-trip.com/yandu/images/index/eye.png" mode="" class="eye-img"></image>
+			        			{{item.view}}
+			        		</view>
+			        	</view>
+			        </view>
+			    </view>
+			</view>
+		</view>
+		
+	
+	</view>
+</template>
+
+<script>
+	export default{
+		data(){
+			return {
+				systemInfo: {
+					height:"0px",
+					textHeight:"0px",
+					textTop:"0px",
+					contentTop: '0px',
+				},
+				
+				list: [],
+				showMore: true,
+				headImg:"https://tongli.sz-trip.com/uploads/20240902/55c5cbe137790323cc719b5c83d5e2e9.png",
+
+				type_id: 0,//景点分类id
+			}
+		},
+		onShow() {
+			this.showMore = true
+		},
+		onReady() {
+			this.getArticleByType()
+		},
+		onLoad(options) {
+			let that = this
+			uni.getSystemInfo({
+			  success(res) {
+			    console.log(res)
+			    that.systemInfo.height =res.windowHeight+'px'
+				const menu=uni.getMenuButtonBoundingClientRect()
+				that.systemInfo.textHeight=menu.height+"px"
+				that.systemInfo.textTop=menu.top+"px"
+				that.systemInfo.contentTop = (menu.height + menu.top)+"px"
+			    console.log(that.systemInfo)
+			  }
+			})
+		},
+		  
+		methods: {
+			setTag (item) {
+				this.type_id = item
+				// this.getArticleByType()
+			},
+			
+			// 游记攻略
+			getArticleByType() {
+				this.Post({
+					type_id: 41,
+					offset: this.list.length,
+					limit: 10
+				},'/api/Article/getArticleByType').then(res => {
+					this.list = [...this.list, ...res.data]
+					
+					if(res.data.length < 10) this.showMore = false
+				})
+			},
+			// 游记攻略查看更多
+			strategyMore() {
+				this.getArticleByType()
+			},
+			viewDetail (item) {
+				uni.navigateTo({
+					url:'/subPackages/travelGuide/detail?id='+item.id
+				})
+			},
+		},
+		onReachBottom() {
+			setTimeout(() => {
+				if (!this.showMore) this.getList()
+			},1000)
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	*{
+		box-sizing: border-box;
+		font-family: PingFangSC;
+	}
+	.bg{
+		min-height: 100vh;
+		background: #FFFFFF;
+	}
+	.topImg{
+		width: 100%;
+		height: 440rpx;
+		.icon-back{
+			position: absolute;
+			display: flex;
+			align-items: center;
+			z-index: 50;
+		}
+	}
+	
+	.tag-container{
+		margin: 42rpx 26rpx;
+		display: flex;
+		flex-wrap: nowrap;
+		overflow-y: auto;
+		.tag{
+			flex-shrink: 0;
+			border-radius: 13rpx;
+			border: 1px solid #999999;
+			font-family: PingFang SC;
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #666666;
+			padding: 13rpx 29rpx;
+			margin-right: 20rpx;
+		}
+		.tag.active{
+			background: linear-gradient(90deg, #9EE4FE, #7FD491);
+			border: none;
+			font-weight: bold;
+			color: #000000;
+		}
+	}
+	
+	.strategy-box {
+		padding: 0 26rpx;
+		padding-bottom: 50rpx;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+		
+		.strategy-item {
+			width: 339rpx;
+			border-radius: 13rpx;
+			overflow: hidden;
+			margin-bottom: 28rpx;
+			position: relative;
+			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38);
+			
+			.title-tag {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 153rpx;
+				line-height: 47rpx;
+				background: #71B580;
+				border-radius: 20rpx 0rpx 20rpx 0rpx;
+				text-align: center;
+				font-weight: 500;
+				font-size: 27rpx;
+				color: #FFFFFF;
+				overflow-x: auto;
+				white-space: nowrap;
+			}
+			.title-tag::-webkit-scrollbar {
+				display: none;
+			}
+			
+			.strategy-image {
+				width: 337rpx;
+				display: block;
+			}
+			
+			.strategy-content {
+				background: #FFFFFF;
+				padding: 20rpx;
+				
+				.strategy-title {
+					font-family: PingFang SC;
+					font-weight: bold;
+					font-size: 31rpx;
+					color: #2C2C2C;
+				}
+				
+				.flex-between {
+					font-weight: 500;
+					font-family: PingFang SC;
+					font-size: 24rpx;
+					color: #000000;
+
+					margin-top: 14rpx;
+					
+					.author-img {
+						width: 37rpx;
+						height: 37rpx;
+						margin-right: 6rpx;
+					}
+					
+					.eye-img {
+						width: 26.67rpx;
+						height: 18.67rpx;
+						margin-right: 6rpx;
+					}
+				}
+			}
+		}
+	}
+	
+</style>
\ No newline at end of file