Browse Source

页面优化

xiaoxin 2 years ago
parent
commit
5e80773ec7

+ 2 - 2
pages/community/community.vue

@@ -33,7 +33,7 @@
 					<!-- 为了磨平部分平台的BUG,必须套一层view -->
 					<view>
 						<view v-for="(item, index) in list1" :key="item.id" class="waterfall_item" @click="goPageDetail(item)">
-							<img v-if="item.image" mode="aspectFill" class="item_cover" :src="item.image" />
+							<img v-if="item.image" mode="aspectFill" class="item_cover" :src="item.image[0]" />
 							<video v-if="item.video" class="item_cover" :src="item.video" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-play-btn="false"></video>
 							<view class="item_town" v-if="item.townName">{{ item.townName }}</view>
 							<img v-if="item.video" class="item_play" src="../../static/index/video.png" />
@@ -56,7 +56,7 @@
 					<!-- 为了磨平部分平台的BUG,必须套一层view -->
 					<view>
 						<view v-for="(item, index) in list2" :key="item.id" class="waterfall_item" @click="goPageDetail(item)">
-							<img v-if="item.image" mode="aspectFill" class="item_cover" :src="item.image" />
+							<img v-if="item.image" mode="aspectFill" class="item_cover" :src="item.image[0]" />
 							<video v-if="item.video" class="item_cover" :src="item.video" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-play-btn="false"></video>
 							<view class="item_town" v-if="item.townName">{{ item.townName }}</view>
 							<img v-if="item.video" class="item_play" src="../../static/index/video.png" />

+ 28 - 21
pages/detail/detail.vue

@@ -7,7 +7,7 @@
 
 		<!-- 顶部民宿图片区域 -->
 		<view class="banner">
-			<swiper autoplay circular class="swiper">
+			<swiper autoplay circular indicator-dots indicator-color="#BBD8FE" indicator-active-color="#1E7DFB" class="swiper">
 				<swiper-item class="swiper_item" v-for="(item, current) in info.hotelFileInfoList" :key="item.id" @click="handleClickSwiper(info.hotelFileInfoList, current)">
 					<img mode="aspectFill" class="img" :src="item.url" />
 				</swiper-item>
@@ -15,10 +15,12 @@
 			<view class="slogan">
 				<img src="../../static/index/slogan.png" />
 			</view>
+			<!-- 遮罩层区域 -->
+			<view class="full" v-if="info.linkProUrl"></view>
 			<!-- 720°全景链接区域 -->
-			<view class="full" v-if="info.linkProUrl" @click="handleGoPull(info.linkProUrl)">
+			<view class="full_box" v-if="info.linkProUrl" @click="handleGoPull(info.linkProUrl)">
 				<img src="../../static/index/full.png" />
-				720°全景
+				720°全景看房
 			</view>
 			<!-- 收藏按钮区域 -->
 			<view class="collect">
@@ -419,9 +421,10 @@ export default {
 		})
 	},
 	onLoad(options) {
+		// console.log(options)
 		this.getTimes()
 		this.hotelId = options.id
-		this.distance = options.distance ? false : options.distance
+		this.distance = options.distance ? options.distance : false
 		this.town = options.town
 		uni.getSetting({
 			success: (res) => {
@@ -981,21 +984,29 @@ export default {
 
 		.full {
 			position: absolute;
-			top: 13rpx;
-			right: 20rpx;
-			display: flex;
-			align-items: center;
-			justify-content: space-around;
-			width: 173rpx;
-			height: 60rpx;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-color: rgba(0, 0, 0, 0.3);
+			pointer-events: none;
+		}
+
+		.full_box {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			width: 180rpx;
+			height: 180rpx;
 			color: #fff;
-			font-size: 24rpx;
-			border-radius: 11rpx;
-			background-color: rgba(0, 0, 0, 0.5);
+			font-size: 28rpx;
+			text-align: center;
+			transform: translate(-50%, -50%);
 
 			img {
-				width: 40rpx;
-				height: 40rpx;
+				margin-bottom: -15rpx;
+				width: 147rpx;
+				height: 147rpx;
 			}
 		}
 
@@ -1007,9 +1018,7 @@ export default {
 	}
 
 	.detail {
-		z-index: 1;
-		float: left;
-		margin-top: -177rpx;
+		margin-top: 23rpx;
 		box-sizing: border-box;
 		padding: 0 30rpx 30rpx;
 		width: 710rpx;
@@ -1110,9 +1119,7 @@ export default {
 	}
 
 	.body {
-		float: left;
 		margin-top: 20rpx;
-		// padding-bottom: 30rpx;
 		width: 710rpx;
 		border-radius: 10rpx;
 		background-color: #fff;

+ 27 - 49
pages/home3/home3.vue

@@ -123,13 +123,21 @@
 					<view class="circle"></view>
 					<view class="circle color"></view>
 					<view class="top_title">精选攻略 .</view>
-					<view class="top_msg">宝藏分享社区</view>
+					<view class="top_msg">一部手机畅游靖安</view>
 					<view class="top_more" @click="handleGoPage">查看更多 ></view>
 				</view>
-				<swiper indicator-dots indicator-color="#BBD8FE" indicator-active-color="#1E7DFB" circular :interval="3000">
-					<swiper-item class="body_strategy" v-for="item in bestNewsList" :key="item.id" @click="handleGoDetail(item)">
+				<swiper class="body_strategy" indicator-dots indicator-color="#BBD8FE" indicator-active-color="#1E7DFB" circular :interval="3000" v-if="bestNewsList.length">
+					<swiper-item v-for="item in bestNewsList" :key="item.id" @click="handleGoDetail(item)">
 						<img v-if="item.image" class="strategy_cover" mode="aspectFill" :src="item.image" />
-						<video v-if="item.video" class="strategy_cover" :src="item.video" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-play-btn="false"></video>
+						<video
+							v-if="item.video"
+							class="strategy_cover"
+							:src="item.video"
+							:controls="false"
+							:show-center-play-btn="false"
+							:show-fullscreen-btn="false"
+							:show-play-btn="false"
+						></video>
 						<view class="strategy_info">
 							<view class="info_title">{{ item.title }}</view>
 							<view class="info_tags">
@@ -140,11 +148,11 @@
 					</swiper-item>
 				</swiper>
 
-				<!-- 精选推荐区域 -->
+				<!-- 每日推荐区域 -->
 				<view class="body_top" v-if="hotelList.length">
 					<view class="circle"></view>
 					<view class="circle color"></view>
-					<view class="top_title">精选推荐 .</view>
+					<view class="top_title">每日推荐 .</view>
 					<view class="top_msg">线上订民宿,住着玩个遍</view>
 					<view class="top_more" @click="handleGoHome">查看更多 ></view>
 				</view>
@@ -172,12 +180,6 @@
 					</view>
 				</view>
 
-				<!-- 没有数据时展示的页面 -->
-				<view class="noData" v-if="!hotelList.length">
-					<img src="../../static/images/noData.png" />
-					暂无推荐数据
-				</view>
-
 				<!-- 特产甄选区域 -->
 				<view class="body_top" v-if="goodsList.length">
 					<view class="circle"></view>
@@ -287,7 +289,7 @@ export default {
 			// 当前页
 			page: 1,
 			// 每页多少条
-			rows: 4,
+			rows: 6,
 			// 总条数
 			total: null,
 			// 地区数组
@@ -300,7 +302,7 @@ export default {
 			placeIndex: 0,
 			// 选择乡镇弹窗数据
 			popList: [],
-			// 精选民宿列表数组
+			// 每日推荐民宿列表数组
 			hotelList: [],
 			// 优选民宿列表数组
 			hotelList_you: [],
@@ -378,17 +380,6 @@ export default {
 			menus: ['shareAppMessage', 'shareTimeline']
 		})
 	},
-	// onReachBottom() {
-	// 	if (this.hotelList.length < this.total) {
-	// 		this.page++
-	// 		this.getHotelList_jing()
-	// 	} else {
-	// 		uni.showToast({
-	// 			title: '没有更多数据了',
-	// 			icon: 'none'
-	// 		})
-	// 	}
-	// },
 	onPageScroll(e) {
 		if (e.scrollTop > 100) {
 			this.headerType = true
@@ -440,7 +431,7 @@ export default {
 				url: '/mhotel/articlequeryTop3ArticleLike.action'
 			})
 			// console.log(res)
-			if (res.code == 200) {
+			if (res.code == 200 && res.data) {
 				this.bestNewsList = res.data
 			}
 		},
@@ -634,7 +625,7 @@ export default {
 				this.loading = false
 			}
 		},
-		// 获取民宿列表  精选
+		// 获取民宿列表  每日推荐
 		async getHotelList_jing() {
 			const res = await this.$myRequest({
 				url: '/mhotel/ahpselectedPage.action',
@@ -867,7 +858,6 @@ export default {
 			.img {
 				width: 100%;
 				height: 100%;
-				border-radius: 0 0 20rpx 20rpx;
 			}
 
 			.img2 {
@@ -904,8 +894,7 @@ export default {
 	}
 
 	.content {
-		z-index: 1;
-		margin: -20rpx auto 0;
+		margin: 20rpx auto 0;
 		width: 690rpx;
 		border-radius: 12rpx 12rpx 0 0;
 		background-color: #f2f2f2;
@@ -1229,16 +1218,16 @@ export default {
 			.body_strategy {
 				display: flex;
 				box-sizing: border-box;
-				padding: 20rpx;
+				padding: 24rpx;
 				margin-bottom: 10rpx;
 				width: 690rpx;
-				height: 235rpx;
+				height: 718rpx;
 				border-radius: 12rpx;
 				background-color: #fff;
 
 				.strategy_cover {
-					width: 253rpx;
-					height: 190rpx;
+					width: 640rpx;
+					height: 400rpx;
 					border-radius: 7rpx;
 				}
 
@@ -1248,7 +1237,7 @@ export default {
 					flex-direction: column;
 					justify-content: space-between;
 					margin-left: 20rpx;
-					width: 500rpx;
+					width: 100%;
 					height: 190rpx;
 					font-size: 24rpx;
 					color: #666666;
@@ -1256,6 +1245,8 @@ export default {
 
 					.info_title {
 						flex: 1.5;
+						display: flex;
+						align-items: center;
 						font-size: 32rpx;
 						font-weight: bold;
 						color: #000;
@@ -1286,6 +1277,7 @@ export default {
 						-webkit-box-orient: vertical;
 						-webkit-line-clamp: 2;
 						overflow: hidden;
+						line-height: 35rpx;
 					}
 				}
 			}
@@ -1466,20 +1458,6 @@ export default {
 					overflow: hidden;
 				}
 			}
-
-			.noData {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-				padding-bottom: 65rpx;
-
-				img {
-					margin-top: 80rpx;
-					width: 600rpx;
-					height: 600rpx;
-				}
-			}
 		}
 	}
 

+ 15 - 0
pagesSub/tweetDetail/tweetDetail.vue

@@ -327,6 +327,12 @@ export default {
 			// console.log(res)
 			if (res.code === 200) {
 				this.info = res.data
+				// console.log(this.info.content)
+
+				// 处理管理端发布的攻略不换行的问题
+				this.info.content = this.replaceHtmlTags(this.info.content)
+
+				// console.log(this.info.content)
 			}
 		},
 		// 获取相关推文数组
@@ -615,6 +621,15 @@ export default {
 			uni.navigateTo({
 				url: `/pagesSub/myHome/myHome?userId=${userId}`
 			})
+		},
+		// 把html标签替换的函数
+		replaceHtmlTags(text) {
+			text = text.replace(/<\/(p|h[1-6]|div|li|section|article|blockquote|pre)>/gi, '\n')
+			text = text.replace(/<(p|h[1-6]|div|li|section|article|blockquote|pre)[^>]*>/gi, '\n')
+
+			text = text.replace(/&nbsp;/gi, ' ')
+			text = text.replace(/<[^>]*>/g, '')
+			return text
 		}
 	}
 }

BIN
static/index/full.png