From c4d03c18c30ac575d379e7d6586ef58026e6495c Mon Sep 17 00:00:00 2001
From: chenkainan <chenkainan163@163.com>
Date: Wed, 25 Jun 2025 16:21:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                       |   5 -
 pages.json                              |  21 +++
 pages/index/readingBody.vue             |   6 +-
 subPackages/haveFeeling/detailXiang.vue |   8 +
 subPackages/haveFeeling/shopDetail.vue  |   8 +
 subPackages/readingBody/index.vue       | 223 ++++++++++++++++++++++++
 6 files changed, 263 insertions(+), 8 deletions(-)
 create mode 100644 subPackages/haveFeeling/detailXiang.vue
 create mode 100644 subPackages/haveFeeling/shopDetail.vue
 create mode 100644 subPackages/readingBody/index.vue

diff --git a/package-lock.json b/package-lock.json
index 50708b2..fa2787c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,11 +4,6 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "moment": {
-      "version": "2.30.1",
-      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
-      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
-    },
     "ydui-district": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/ydui-district/-/ydui-district-1.1.0.tgz",
diff --git a/pages.json b/pages.json
index 8297bb0..faf50fb 100644
--- a/pages.json
+++ b/pages.json
@@ -89,6 +89,27 @@
 			    "style" : {
 			        "navigationBarTitleText" : ""
 			    }
+			},
+			{
+			    "path" : "readingBody/index",
+			    "style" : {
+			        "navigationBarTitleText" : "阅读体",
+					"navigationStyle": "custom"
+			    }
+			},
+			{
+			    "path" : "readingBody/index",
+			    "style" : {
+			        "navigationBarTitleText" : "有感商店详情页",
+					"navigationStyle": "custom"
+			    }
+			},
+			{
+			    "path" : "readingBody/index",
+			    "style" : {
+			        "navigationBarTitleText" : "有感商店香",
+					"navigationStyle": "custom"
+			    }
 			}
 		]
 	}],
diff --git a/pages/index/readingBody.vue b/pages/index/readingBody.vue
index 5420b83..77d962f 100644
--- a/pages/index/readingBody.vue
+++ b/pages/index/readingBody.vue
@@ -1,12 +1,12 @@
 <template>
 	<view class="bg">
-		<view class="content">
+		<navigator url="/subPackages/readingBody/index" class="content">
 			<swiper class="top-banner"  :indicator-dots="false" :autoplay="false" v-if="topBanner && topBanner.length > 0">
-				<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoUrlNew(item)">
+				<swiper-item v-for="(item, index) in topBanner" :key="index" >
 					<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
 				</swiper-item>
 			</swiper>
-		</view>
+		</navigator>
 		<CustomTabBar :currentTab="1" />
 	</view>
 </template>
diff --git a/subPackages/haveFeeling/detailXiang.vue b/subPackages/haveFeeling/detailXiang.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/subPackages/haveFeeling/detailXiang.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/subPackages/haveFeeling/shopDetail.vue b/subPackages/haveFeeling/shopDetail.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/subPackages/haveFeeling/shopDetail.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/subPackages/readingBody/index.vue b/subPackages/readingBody/index.vue
new file mode 100644
index 0000000..ad252d3
--- /dev/null
+++ b/subPackages/readingBody/index.vue
@@ -0,0 +1,223 @@
+<template>
+	<view class="bg">
+		<headerVue />
+
+		<view class="top-box">
+			<swiper class="carousel-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500"
+				@change="onSwiperChange">
+				<swiper-item v-for="(item, index) in swiperList" :key="index">
+					<image :src="item.img" mode=""></image>
+				</swiper-item>
+			</swiper>
+			<view class="exhibit-issue">issue/0{{ currentIndex + 1 }}</view>
+			<!-- 底部指示点 -->
+			<view class="custom-indicators">
+				<view v-for="(_, index) in swiperList" :key="index"
+					:class="['indicator-dot', {'active': index === currentIndex}]"></view>
+			</view>
+		</view>
+		
+		<scroll-view scroll-x="true" show-scrollbar="false">
+			<view class="category-scroll">
+				<image v-for="(item,index) in categories" :key="index" :src="item"></image>
+			</view>
+		</scroll-view>
+		
+		<view class="title-box">
+			全部阅读
+			<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/titleSpan.png" mode=""></image>
+		</view>
+		
+		<view class="reading-title flex-between">
+			<view v-for="(item,index) in readingType" :key="index" @click="changeType(index)">{{item}}</view>
+			<span :style="{left: readingIndex == 0 ? '32rpx' : (readingIndex == 1 ? '245rpx' : '448rpx')}"></span>
+		</view>
+		<view class="reading-box">
+			<image v-for="(item,index) in readingList" :key="index" :src="item"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	import headerVue from "@/components/header.vue"
+	export default {
+		components: {
+			headerVue
+		},
+		data() {
+			return {
+				swiperList: [{
+						img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
+					},
+					{
+						img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
+					},
+					{
+						img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
+					},
+					{
+						img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/img.png'
+					}
+				],
+				currentIndex: 0,
+				categories: [
+					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img1.png',
+					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img1.png',
+					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img1.png'
+				],
+				readingList: [
+					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
+					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
+					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
+					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
+					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png',
+					'https://static.ticket.sz-trip.com/epicSoul/readingBody/img2.png'
+				],
+				readingType: ['2025', '2026', '更多'],
+				readingIndex: 0
+			}
+		},
+		methods: {
+			onSwiperChange(e) {
+				this.currentIndex = e.detail.current;
+			},
+			changeType(index) {
+				this.readingIndex = index
+				console.log(index,this.readingIndex)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bg {
+		padding-bottom: 200rpx;
+	}
+
+	.top-box {
+		margin: 60rpx 40rpx 0;
+		height: 830rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+		border-radius: 20rpx;
+		padding-top: 10rpx;
+		background-color: #fff;
+	}
+
+	.carousel-swiper {
+		width: 582.13rpx;
+		height: 706.24rpx;
+		margin: -40rpx auto 0;
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.exhibit-issue {
+		font-family: serif;
+		font-size: 28rpx;
+		color: #999;
+		font-style: italic;
+		padding: 40rpx 30rpx 0 0;
+		text-align: right;
+	}
+
+	.custom-indicators {
+		display: flex;
+		justify-content: center;
+		gap: 8rpx;
+		margin-top: 40rpx;
+
+		.indicator-dot {
+			width: 8rpx;
+			height: 8rpx;
+			border-radius: 4rpx;
+			background-color: rgba(150, 150, 150, 0.5);
+			transition: all 0.3s;
+		}
+
+		.indicator-dot.active {
+			width: 20rpx;
+			background-color: rgb(133, 133, 133);
+		}
+	}
+	
+	.category-scroll {
+		padding: 40rpx 0 0 40rpx;
+		display: flex;
+		
+		image {
+			width: 520rpx;
+			height: 260rpx;
+			flex-shrink: 0;
+			margin-right: 20rpx;
+		}
+	}
+	
+	.title-box {
+		font-size: 36rpx;
+		font-weight: 500;
+		margin-top: 40rpx;
+		padding-left: 60rpx;
+		
+		image {
+			width: 185.85rpx;
+			height: 20.98rpx;
+			margin-left: 21rpx;
+		}
+	}
+	
+	.reading-title {
+		margin: 60rpx auto 0;
+		width: 585rpx;
+		height: 30rpx;
+		border-radius: 15rpx;
+		background-color: rgba(46, 220, 78, .8);
+		font-weight: bold;
+		font-size: 28rpx;
+		color: #000000;
+		padding: 0 55rpx;
+		position: relative;
+		
+		view {
+			position: absolute;
+			z-index: 20;
+			bottom: 15rpx;
+		}
+		&>view:nth-child(2) {
+			left: 268rpx;
+		}
+		&>view:nth-child(3) {
+			right: 55rpx;
+		}
+		
+		span {
+			width: 111rpx;
+			height: 100%;
+			background-color: rgb(9, 154, 60);
+			border-radius: 15rpx;
+			position: absolute;
+			left: 32rpx;
+		}
+	}
+	
+	.reading-box {
+		margin: 0 40rpx 0;
+		border-radius: 20rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+		padding: 35rpx 20rpx 5rpx;
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		position: relative;
+		top: -15rpx;
+		background-color: #fff;
+		
+		image {
+			width: 188rpx;
+			height: 335rpx;
+			margin-bottom: 30rpx;
+		}
+	}
+</style>
\ No newline at end of file