提交

pages.json

@@ -117,6 +117,12 @@
 			        "navigationBarTitleText" : "有感商店香",
 					"navigationStyle": "custom"
 			    }
+			},
+			{
+				"path": "letter/detail",
+				"style": {
+					"navigationBarTitleText": "文章详情"
+				}
 			}
 		]
 	}],

pages/index/index.vue

@@ -67,44 +67,6 @@
 					}
 				});
 			},
-			// 2是各种详情页，3是列表专题页面，4是小程序
-			gotoUrlNew(item) {
-				console.log(item);
-				let that = this;
-				let url = '';
-				switch (item.jump_type) {
-					case 0:
-						break;
-					case 2:
-						uni.navigateTo({
-							url: item.tdata
-						});
-						break;
-					case 3:
-						uni.navigateTo({
-							url: '/subPackages/webPage/webPage?url=' + item.tdata
-						});
-						break;
-					case 4:
-						uni.navigateToMiniProgram({
-							appId: item.tdata.appid, // 此为appid
-							path: item.tdata.page, // 此为首页路径
-							envVersion: 'release',
-							success: res => {
-								// 打开成功
-								console.log('打开成功', res);
-							},
-							fail: err => {
-								console.log(err);
-							}
-						});
-						break;
-					default:
-						break;
-				}
-			},
-			
-			
 			gotoVideo(item) {
 				uni.navigateTo({
 					url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))

pages/index/readingBody.vue

@@ -2,24 +2,33 @@
 	<view class="bg">
 		<headerVue />
 
-		<view class="top-box">
+		<!-- <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>
+					<image :src="showImg(item.head_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>
+		</view> -->
+		
+		<uni-swiper-dot class="uni-swiper-dot-box" :info="swiperList" :current="current" :mode="mode"
+			:dots-styles="dotsStyles" field="content">
+			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
+				<swiper-item v-for="(item, index) in swiperList" :key="index">
+					<image :src="showImg(item.head_img)" mode=""></image>
+				</swiper-item>
+			</swiper>
+		</uni-swiper-dot>
 		
 		<scroll-view scroll-x="true" show-scrollbar="false">
 			<view class="category-scroll">
-				<image v-for="(item,index) in categories" :key="index" :src="item"></image>
+				<image v-for="(item,index) in categories" :key="index" :src="showImg(item.head_img)"></image>
 			</view>
 		</scroll-view>
 		
@@ -29,11 +38,11 @@
 		</view>
 		
 		<view class="reading-title flex-between">
-			<view v-for="(item,index) in readingType" :key="index" @click="changeType(index)">{{item}}</view>
+			<view v-for="(item,index) in readingType" :key="index" @click="changeType(index)">{{item.title}}</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>
+			<image v-for="(item,index) in readingList" :key="index" :src="showImg(item.image)" @click="viewDetail(item)"></image>
 		</view>
 		
 		<CustomTabBar :currentTab="1" />
@@ -50,44 +59,81 @@
 		},
 		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'
-					}
-				],
+				swiperList: [],
+				current: 0,
+				swiperDotIndex: 0,
+				mode: 'round',
+				dotsStyles: {
+					selectedBackgroundColor: 'rgb(133, 133, 133)',
+					selectedBorder: 'none',
+					backgroundColor: 'rgba(150, 150, 150, 0.5)',
+					border: 'none'
+				},
 				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', '更多'],
+				categories: [],
+				readingList: [],
+				readingType: [{title: '2025', id: 3}, {title: '2026', id: 6}, {title: '全部', id: ''},],
 				readingIndex: 0
 			}
 		},
+		onReady() {
+			this.sendRequest()
+		},
 		methods: {
+			sendRequest() {
+				this.Post({
+					type_id: 3,
+					position: 2,
+				}, '/api/adv/getAdv').then(res => {
+					if(res.data) {
+						this.swiperList = res.data;
+					}
+				});
+				
+				this.Post({
+					type_id: 3,
+					position: 1,
+				}, '/api/adv/getAdv').then(res => {
+					if(res.data) {
+						this.categories = res.data;
+					}
+				});
+				
+				this.getList()
+			},
+			// 全部阅读 文章
+			getList() {
+				this.Post({
+					type_id: this.readingType[this.readingIndex].id,
+					offset: 0,
+					limit: 1
+				}, '/api/article/getArticleByType').then(res => {
+					if(res.data) {
+						this.readingList = res.data
+					}
+				})
+			},
+			change(e) {
+				this.current = e.detail.current
+			},
 			onSwiperChange(e) {
 				this.currentIndex = e.detail.current;
 			},
 			changeType(index) {
 				this.readingIndex = index
+				this.getList()
 				console.log(index,this.readingIndex)
+			},
+			viewDetail(item) {
+				if (item.url) {
+					uni.navigateTo({
+						url:"/subPackages/webPage/webPage?url="+encodeURIComponent(item.url)
+					})
+					return
+				}
+				uni.navigateTo({
+					url:'/subPackages/letter/detail?id='+item.id
+				})
 			}
 		}
 	}
@@ -98,13 +144,19 @@
 		padding-bottom: 200rpx;
 	}
 
-	.top-box {
+	.swiper-box, .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;
+		overflow: hidden;
+		// padding-top: 10rpx;
+		// background-color: #fff;
+		
+		image {
+			width: 100%;
+			height: 100%;
+		}
 	}
 
 	.carousel-swiper {
@@ -156,6 +208,7 @@
 			height: 260rpx;
 			flex-shrink: 0;
 			margin-right: 20rpx;
+			border-radius: 20rpx;
 		}
 	}
 	

static/js/CommonFunction.js

@@ -292,15 +292,52 @@ Vue.prototype.goOtherDetail = (item,type) => {
 		return true
 	}
 }
+
 // 根据类型判断详情页
 Vue.prototype.goDetailByType= function(item){
-	let res = this.goOtherDetail(item)
-	if (res) {
-		return
-	}
+	// let res = this.goOtherDetail(item)
+	// if (res) {
+	// 	return
+	// }
 
 	uni.navigateTo({
 		url: `/subPackages/techan/detail?id=?${item.id}`
 	})
+}
 
+// 轮播图跳转 2是各种详情页，3是列表专题页面，4是小程序
+Vue.prototype.gotoUrlNew = (item) => {
+	console.log(item);
+	let that = this;
+	let url = '';
+	switch (item.jump_type) {
+		case 0:
+			break;
+		case 2:
+			uni.navigateTo({
+				url: item.tdata
+			});
+			break;
+		case 3:
+			uni.navigateTo({
+				url: '/subPackages/webPage/webPage?url=' + item.tdata
+			});
+			break;
+		case 4:
+			uni.navigateToMiniProgram({
+				appId: item.tdata.appid, // 此为appid
+				path: item.tdata.page, // 此为首页路径
+				envVersion: 'release',
+				success: res => {
+					// 打开成功
+					console.log('打开成功', res);
+				},
+				fail: err => {
+					console.log(err);
+				}
+			});
+			break;
+		default:
+			break;
+	}
 }

subPackages/haveFeeling/detailXiang.vue

@@ -1,10 +1,10 @@
 <template>
 	<view class="bg">
 		<headerVue />
-		<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/xiangImg.png" mode="widthFix" class="topImg"></image>
+		<image :src="showImg(detail.head_img)" mode="widthFix" class="topImg"></image>
 		
 		<view class="box">
-			<view v-for="(item,index) in list" :key="index" class="item">
+			<view v-for="(item,index) in list" :key="index" class="item" @click="gotoDetailByType(item)">
 				<image :src="showImg(item.img)" mode="aspectFill" class="headimg"></image>
 				<view class="content">
 					<view class="title text-overflow">{{item.title}}</view>
@@ -16,10 +16,7 @@
 			</view>
 		</view>
 		
-		<view style="margin: 80rpx 50rpx;">
-			富文本 富文本
-			两千年的柏树“清、奇、古、怪”，自西汉年便扎根江南太湖畔的光福。每年柏子熟时，遵循古老的仪式：于古柏枝干系上红绳，燃清香，向自然致以敬意。这是江南百姓世代流传的生存智慧，将草木荣枯视为对生命共同体的敬畏，也感恩时间的馈赠。
-		</view>
+		<view style="margin: 80rpx 50rpx;" v-html="formateRichText(detail.content)"></view>
 	</view>
 </template>
 
@@ -31,6 +28,7 @@
 		},
 		data() {
 			return {
+				detail: {},
 				list: [
 					{
 						img: 'https://static.ticket.sz-trip.com/epicSoul/readingBody/productImg.png',
@@ -70,6 +68,23 @@
 					}
 				]
 			}
+		},
+		onLoad(option) {
+			this.Post({
+				id: option.id,
+			}, '/api/goods/goods_type_detail').then(res => {
+				if(res.data) {
+					this.detail = res.data
+				}
+			});
+			
+			this.Post({
+				type_id: option.id,
+				offset: this.list.length,
+				limit: 100,
+			},'/api/tag/getGoodsByTypeId').then(res => {
+				this.list = res.data;
+			})
 		}
 	}
 </script>

subPackages/letter/detail.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="bg">
+
+		<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
+			indicator-active-color="#fff" v-if="detail.images">
+			<swiper-item v-for="(item, index) in detail.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="topBox">
+			<view class="title text-overflowRows">{{detail.title}}</view>
+			<view class="flex-between">
+				<view class="name">
+					<image :src="showImg(detail.author_img)" mode=""></image>
+					{{detail.author}}
+				</view>
+				<!-- <view class="other-info">
+					<image @click="likeAricle(detail)" v-if="detail.is_star" :src="showImg('/uploads/20250513/00b5680ca4b62479a59b40786979e3e2.png')" mode=""></image>
+					<image @click="likeAricle(detail)" v-else :src="showImg('/uploads/20250513/99e8d59b9692ae73b3204a6cec79611b.png')" mode=""></image>
+					<text style="padding-right: 36rpx;">{{handleNum(detail.star)}}</text>
+					<image :src="showImg('/uploads/20250513/71acef9a784095e9ba17c88580506705.png')" mode=""></image>
+					{{handleNum(detail.view)}}
+				</view> -->
+			</view>
+			
+		</view>
+		
+		<view class="content" v-html="formateRichText(detail.content)"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				detail: {}
+			}
+		},
+		onLoad(option) {
+			this.Post({id: option.id},'/api/article/getArticleById').then(res => {
+				if (res.data.flag == 0) {
+					uni.showToast({title: '文章不存在或已下架',icon: 'none'})
+					setTimeout(() => {this.goBack()}, 2000)
+				}
+				this.detail = res.data;
+			});
+		},
+		methods: {
+			likeAricle (item) {
+				this.Post({article_id: item.id},'/api/article/setArticleStar').then(res => {
+					if (res.code == 200 || res.code == 1) {
+						this.detail.is_star = !this.detail.is_star
+						if (this.detail.is_star) {
+							this.detail.star++
+						} else {
+							this.detail.star--
+						}
+					}
+				});
+			},
+			handleNum (num) {
+				if (num<=0) { return 0 }
+				if (num>=1000) {
+					return (num/1000).toFixed(1)+'k'
+				} 
+				return num
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bg {
+		width: 750rpx;
+		min-height: 100vh;
+		background: #FFFFFF;
+		padding-bottom: 100rpx;
+	}
+	
+	.swiper {
+		height: 408rpx;
+	
+		.swiper-item {
+			width: 100%;
+			height: 408rpx;
+	
+			.item-img {
+				width: 750rpx;
+				height: 408rpx;
+			}
+		}
+	}
+	
+	.topBox {
+		width: 100%;
+		padding: 28rpx 32rpx;
+		
+		.title {
+			font-weight: 500;
+			font-size: 32rpx;
+			color: #000000;
+		}
+		.flex-between{
+			padding: 28rpx 0;
+			border-bottom: 2rpx solid #F7F7F7;
+		}
+		
+		.name {
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #000000;
+			display: flex;
+			align-items: center;
+			
+			
+			image {
+				width: 48rpx;
+				height: 48rpx;
+				// border-radius: 50%;
+				margin-right: 12rpx;
+			}
+		}
+		
+		.other-info{
+			display: flex;
+			align-items: center;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #848484;
+			
+			image{
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 8rpx;
+			}
+		}
+	}
+	
+	.content {
+		width: 100%;
+		background: #FFFFFF;
+		padding:0 28rpx;
+	}
+</style>