save

pages/exhibit/index.vue

@@ -27,7 +27,7 @@
 				<view :class="showBook?'relic_active':''" @click="changeBook('book')">党史书籍</view>
 			</view>
 			<view class="books" v-if="showBook">
-				<image class="books_img" src="../../static/book/book_bottom.png" mode=""></image>
+				<image class="books_img" :src="isH5 ? '/h5/static/book/book_bottom.png' : '../../static/book/book_bottom.png'" mode=""></image>
 				<u-swiper @click="toBook" :list="bookList" :displayMultipleItems="displayMultipleItems" :circular="true"
 					:indicator="true" indicatorStyle="bottom" indicatorMode="dot" bgColor="transparent"
 					indicatorActiveColor="#9f4946" indicatorInactiveColor="#9f4946" :autoplay="false"
@@ -55,7 +55,7 @@
 					</swiper>
 					<view class="myswiper-item-title">
 						<view class="">
-							{{relicList[relicIndex].name?relicList[relicIndex].name:''}}
+							{{relicList[relicIndex] && relicList[relicIndex].name ? relicList[relicIndex].name : ''}}
 						</view>
 						<!-- <view class="">
 							革命博物馆典藏
@@ -108,28 +108,42 @@
 				exhibitList: [],
 				bookList: [],
 				relicList: [],
-				bgimg: '../../static/book/relic_bg.png',
+				bgimg: '',
 				padTop: 0,
 				showBook: false,
 				relicIndex: 0,
 				displayMultipleItems: 0,
-				authToken: ''
+				authToken: '',
+				isH5: false
 			}
 		},
 		onLoad() {
-			const MenuButton = uni.getMenuButtonBoundingClientRect()
-			this.padTop = MenuButton.top + MenuButton.height + 10
+			// 检测运行环境：H5还是小程序
+			const isH5 = typeof window !== 'undefined' && window.location
+			this.isH5 = isH5
+			
+			if (isH5) {
+				// H5环境：使用固定的顶部间距和绝对路径
+				this.padTop = 80 // H5环境下的固定顶部间距
+				this.bgimg = '/h5/static/book/relic_bg.png' // H5环境使用绝对路径
+			} else {
+				// 小程序环境：使用getMenuButtonBoundingClientRect和相对路径
+				const MenuButton = uni.getMenuButtonBoundingClientRect()
+				this.padTop = MenuButton.top + MenuButton.height + 10
+				this.bgimg = '../../static/book/relic_bg.png' // 小程序环境使用相对路径
+			}
+			
 			this.authToken = uni.getStorageSync('userInfo_token').token
 			this.getExhibit()
 			this.getRelic()
 			this.getBooks()
-		},
-		onShareAppMessage() {
-			return this.util.shareInfo
-		},
-		
-		onShareTimeline(){
-			return this.util.shareInfo
+		},
+		onShareAppMessage() {
+			return this.util.shareInfo
+		},
+		
+		onShareTimeline(){
+			return this.util.shareInfo
 		},
 		methods: {
 			cancelTime(str) {
@@ -148,10 +162,12 @@
 			changeBook(e) {
 				if (e === 'book') {
 					this.showBook = true
-					this.bgimg = '../../static/book/book_bg.png'
+					// 根据环境设置不同的路径
+					this.bgimg = this.isH5 ? '/h5/static/book/book_bg.png' : '../../static/book/book_bg.png'
 				} else {
 					this.showBook = false
-					this.bgimg = '../../static/book/relic_bg.png'
+					// 根据环境设置不同的路径
+					this.bgimg = this.isH5 ? '/h5/static/book/relic_bg.png' : '../../static/book/relic_bg.png'
 				}
 			},
 			toRelicDetail(id) {
@@ -199,7 +215,11 @@
 			},
 			changeRelic(e) {
 				console.log(e)
-				this.relicIndex = e.detail.current
+				const newIndex = e.detail.current
+				// 确保索引不超出数组范围
+				if (newIndex >= 0 && newIndex < this.relicList.length) {
+					this.relicIndex = newIndex
+				}
 			},
 			getRelic() {
 				var that = this;
@@ -215,6 +235,10 @@
 						that.relicList = res.data.filter(item => {
 							return item.show_list === 1
 						})
+						// 确保 relicIndex 不超出数组范围
+						if (that.relicList.length > 0 && that.relicIndex >= that.relicList.length) {
+							that.relicIndex = 0
+						}
 					},
 					utilFail: function(res) {
 
@@ -227,9 +251,9 @@
 					api: '/api/mobile/book/index',
 					data: {
 						page: 1,
-						page_size: 99,
-						sort_name:"datetime",
-						sort_type:'ASC'
+						page_size: 99,
+						sort_name:"datetime",
+						sort_type:'ASC'
 
 					},
 					utilSuccess: function(res) {
@@ -372,7 +396,7 @@
 	}
 
 	.relic .relic_active {
-		background: url(../../static/book/current.png) no-repeat left top;
+		background: url(/h5/static/book/current.png) no-repeat left top;
 		background-size: 100% 100%;
 		border: 1px solid transparent;
 		color: #fff;
@@ -408,18 +432,18 @@
 
 	.books .u-swiper__wrapper__item__wrapper::before {
 		content: "";
-		    content: "";
-		    position: absolute;
-		    left: 22%;
-		    bottom: 115rpx;
-		    width: 30rpx;
-		    height: 40rpx;
-		    z-index: -1;
-		    background-color: transparent;
-		    /* margin: 50px; */
-		    box-shadow: 30rpx 10rpx 20rpx rgba(0, 0, 0, 0.3);
-		    transform: translateY(4px) translateX(24rpx) scale(1, 0.9) translateZ(19px) rotate(132deg);
-		    transform-style: preserve-3d;
+		    content: "";
+		    position: absolute;
+		    left: 22%;
+		    bottom: 115rpx;
+		    width: 30rpx;
+		    height: 40rpx;
+		    z-index: -1;
+		    background-color: transparent;
+		    /* margin: 50px; */
+		    box-shadow: 30rpx 10rpx 20rpx rgba(0, 0, 0, 0.3);
+		    transform: translateY(4px) translateX(24rpx) scale(1, 0.9) translateZ(19px) rotate(132deg);
+		    transform-style: preserve-3d;
 		    perspective: 2000rpx;
 
 		/* background: hsl(48, 100%, 20%);

utils/util.js

@@ -153,7 +153,7 @@ const wxH5AuthLogin = (cb) => {
 		})
 	} else {
 		// 未获取授权码，跳转到微信授权页面
-		const appId = 'wxbf4862e929ab85b0'
+		const appId = 'wx90acb6e2aa676977'
 		const currentUrl = window.location.href
 		const redirectUri = encodeURIComponent(currentUrl.replace(/#\//, ""));
 		const scope = 'snsapi_userinfo'