详情页面

src/manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "报修",
-	"appid": "__UNI__2C329A7",
+	"appid": "__UNI__EB98651",
 	"description": "",
 	"versionName": "1.0.0",
 	"versionCode": "100",

src/pages.json

@@ -59,6 +59,14 @@
 				"navigationStyle": "custom"
 			}
 
+		}, {
+			"path": "pages/circle/views/details/details",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
 		}
 	],
 	"tabBar": {

src/pages/circle/circle.vue

@@ -1,5 +1,5 @@
 <template>
-	<view style="height: 100%;">
+	<view class="container">
 		<view class="circle-title">
 			<view class="circle-title-nav">
 				<view class="circle-title-nav-list">
@@ -36,87 +36,93 @@
 	} = userData()
 </script>
 
-<style lang="scss">
+<style>
 	page {
 		width: 100%;
 		height: 100%;
-		background: #F8F8FA;
+
-		overflow: hidden;
 	}
+</style>
+<style lang="scss" scoped>
+	.container {
+		height: 100%;
+		background: #F8F8FA;
 
-	.circle-title {
-		width: 100%;
-		height: 137rpx;
-		background-image: url(../../static/common/top-bg.png);
-		background-color: #fff;
-		background-size: 100% 100%;
-		// background-position: 100rpx;
-		padding-top: 118rpx;
-		position: sticky;
-		top: 0;
-		left: 0;
-		z-index: 9999;
 
-		.circle-title-nav {
+		.circle-title {
 			width: 100%;
-			padding: 28rpx;
+			height: 137rpx;
-			box-sizing: border-box;
+			background-image: url(../../static/common/top-bg.png);
+			background-color: #fff;
+			background-size: 100% 100%;
+			// background-position: 100rpx;
+			padding-top: 118rpx;
+			position: sticky;
+			top: 0;
+			left: 0;
+			z-index: 9;
 
-			.circle-title-nav-list {
+			.circle-title-nav {
-				width: 80%;
+				width: 100%;
-				display: flex;
+				padding: 28rpx;
-				font-size: 32rpx;
+				box-sizing: border-box;
-				color: rgba(43, 43, 53, 0.6);
 
-				.nav-item {
+				.circle-title-nav-list {
-					width: 20%;
+					width: 80%;
+					display: flex;
+					font-size: 32rpx;
 					color: rgba(43, 43, 53, 0.6);
 
-				}
+					.nav-item {
+						width: 20%;
+						color: rgba(43, 43, 53, 0.6);
 
-				.nav-item:last-child {
+					}
-					width: 25%;
-				}
 
-				.nav-select {
+					.nav-item:last-child {
-					font-size: 36rpx;
+						width: 25%;
-					font-weight: 600;
+					}
-					color: #08080D;
 
-					padding-right: 15rpx;
+					.nav-select {
-				}
+						font-size: 36rpx;
+						font-weight: 600;
+						color: #08080D;
 
-				.nav-select::after {
+						padding-right: 15rpx;
-					display: inline-block;
+					}
-					width: 15rpx;
-					height: 30rpx;
-					content: '';
-					background-image: url(../../static/common/icon-halving.png);
-					background-size: 100% 100%;
 
+					.nav-select::after {
+						display: inline-block;
+						width: 15rpx;
+						height: 30rpx;
+						content: '';
+						background-image: url(../../static/common/icon-halving.png);
+						background-size: 100% 100%;
+
+					}
 				}
 			}
 		}
-	}
 
-	.circle-edit {
+		.circle-edit {
-		display: inline-block;
+			display: inline-block;
-		position: fixed;
+			position: fixed;
-		right: 32rpx;
+			right: 32rpx;
-		bottom: 188rpx;
+			bottom: 188rpx;
-		z-index: 9999;
+			z-index: 9999;
 
-		.image {
+			.image {
-			width: 144rpx;
+				width: 144rpx;
-			height: 144rpx;
+				height: 144rpx;
+
+			}
+		}
+
+		.circle-discover {
+			height: calc(100% - 255rpx);
+			overflow-y: scroll;
+			// padding-bottom: -255rpx;
 
 		}
 	}
-
-	.circle-discover {
-		height: calc(100% - 255rpx);
-		overflow-y: scroll;
-		// padding-bottom: -255rpx;
-
-	}
 </style>

src/pages/circle/components/discover.vue

@@ -70,7 +70,8 @@
 				</view>
 				<view :class="`grid-container${item.url.length<=9?item.url.length:9}`">
 					<view class="grid-item" v-for="(itemchild,indexchild) in item.url" :key="indexchild">
-						<image :src="itemchild" mode="aspectFill" class="grid-item-iamge">
+						<image :src="itemchild" @click="handPreviewImage(item.url)" mode="aspectFill"
+							class="grid-item-iamge">
 						</image>
 					</view>
 				</view>
@@ -108,8 +109,14 @@
 
 <script lang="ts" setup>
 	import { ref, defineComponent, getCurrentInstance, toRefs } from "vue"
+	import {
+		userData
+	} from '../hook/userData'
 	const { proxy } = getCurrentInstance();
 	const dataResource = ref<string[]>()
+	const {
+		handPreviewImage
+	} = userData()
 	interface Props {
 		resource : string[]
 	}

src/pages/circle/hook/userData.ts

@@ -16,11 +16,27 @@ export function userData() {
 		console.log(333)
 	}
 	const topicList = ref<any>([{ url: [getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }])
+	// 预览话题图片
+	const handPreviewImage = function (urls) {
+		uni.previewImage({
+			urls: urls,
+			// longPressActions: {
+			// 	itemList: ['发送给朋友', '保存图片', '收藏'],
+			// 	success: function (data) {
+			// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+			// 	},
+			// 	fail: function (err) {
+			// 		console.log(err.errMsg);
+			// 	}
+			// }
+		});
+	}
 	return {
 		selectNav,
 		navItem,
 		handSelectNav,
 		refresherrestore,
-		topicList
+		topicList,
+		handPreviewImage
 	}
 }

src/pages/circle/views/details/details.vue

@@ -0,0 +1,319 @@
+<template>
+	<view class="container" :style="{paddingTop:menuButtonTop+'rpx'}">
+		<uni-nav-bar class="nav-bar">
+			<view class="text">动态详情</view>
+			<template v-slot:left>
+				<image src="../../../../static/common/back.png" mode="aspectFit" class="image"></image>
+			</template>
+			<!-- 	<template v-slot:right>
+				<image src="../../../../static/common/icon-more.png" mode="aspectFit" class="image"></image>
+			</template> -->
+		</uni-nav-bar>
+		<view class="details-main">
+			<scroll-view scroll-y="true" class="scroll-Y" refresher-enabled scroll-with-animation
+				refresher-background="#F8F8FA">
+				<view class="article-content">
+					<view class="article-item-head">
+						<image src="../../../../static/mine/lv1.png" mode="" class="avatar"></image>
+						<view class="article-item-head-center">
+							<view class="center-head">
+								<text class="center-head-name">金卡纳练习会</text>
+								<image src="../../../../static/common/vip.png" class="vip-img" mode=""></image>
+							</view>
+							<view class="center-foot">
+								<text style="padding-right: 22rpx;">12-31</text>
+								<text>豪爵铃木 DL250车主发布</text>
+							</view>
+						</view>
+						<view class="article-item-head-right">
+							<text>关注</text>
+						</view>
+					</view>
+					<swiper :indicator-dots="true" circular current="1" :autoplay="false" :interval="3000"
+						:duration="1000" class="details-swiper">
+						<swiper-item>
+							<image src="../../../../static/logo.png" mode="scaleToFill" class="image"></image>
+						</swiper-item>
+						<swiper-item>
+							<image src="../../../../static/common/112.webp" mode="scaleToFill" class="image"></image>
+						</swiper-item>
+						<swiper-item>
+							<image
+								src="https://ts1.cn.mm.bing.net/th?id=OIP-C.7pldmOaHsIlsAGsWmA4SawHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
+								mode="scaleToFill" class="image"></image>
+						</swiper-item>
+					</swiper>
+					<view class="article-item-content">
+						<view class="topicList-item">
+							<image src="../../../../static/common/topic.png" mode="aspectFill"
+								class="topicList-item-iamge">
+							</image>
+							<text class="topicList-item-text">如何有效防止摔车</text>
+						</view>
+						<view class="article-item-content-title">
+							<text>朋友上周推荐的这个骑行软件，数据记录好精准，感觉很不错！</text>
+						</view>
+						<view class="article-item-content-text">
+							1.低速时不要猛捏前刹，避震回弹会使车身重心不稳，女孩子体力小，这种清空很容易摔倒
+							2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速！
+							2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速!
+						</view>
+						<view class="article-item-address">
+							<image src="../../../../static/common/icon-address.png" mode="aspectFill" class="image">
+							</image>
+							<text>四川省成都市青龙湖湿地公园</text>
+						</view>
+					</view>
+
+				</view>
+				<view class="details-main-gift">
+					<view class="details-main-gift-left">
+						<text class="details-main-gift-left-top">送礼</text>
+						<text class="details-main-gift-left-bottom">送礼榜虚位以待，你即将坐上送礼榜首哦！</text>
+					</view>
+					<view class="details-main-gift-right">
+						<image src="../../../../static/common/giveGifts.png" mode="aspectFit" class="image"></image>
+					</view>
+				</view>
+				<view class="details-main-gift">
+					<view class="details-main-gift-left">
+						<text class="details-main-gift-left-top">评论</text>
+						<text class="details-main-gift-left-bottom">送这里还没人评论哦，点击评论</text>
+					</view>
+					<view class="details-main-gift-right">
+						<image src="../../../../static/common/review.png" mode="aspectFit" class="image"></image>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { getMenuButton, rpxTopx } from "@/utils/common.js"
+	// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+	// #ifdef MP-WEIXIN
+	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+	let menuButtonTop = rpxTopx(menuButtonInfo.top)
+	// #endif
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		width: 100%;
+
+		.nav-bar {
+			.text {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				justify-content: center;
+				font-size: 32rpx;
+				color: #08080D;
+				font-weight: 600;
+			}
+
+			text-align: center;
+
+			.image {
+				width: 48rpx;
+				height: 48rpx;
+			}
+
+			::v-deep .uni-navbar__content {
+				border: none;
+			}
+
+		}
+
+		.details-main {
+			width: 100%;
+			background: #F8F8FA;
+
+			.article-content {
+				background-color: #FFFFFF;
+
+				.article-item-head {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 38rpx 34rpx;
+					box-sizing: border-box;
+
+					.avatar {
+						width: 76rpx;
+						height: 76rpx;
+					}
+
+					.article-item-head-center {
+						margin-left: -100rpx;
+
+						.center-head-name {
+							font-weight: 600;
+							font-size: 32rpx;
+							color: #08080D;
+						}
+
+						.vip-img {
+							width: 48rpx;
+							height: 48rpx;
+							vertical-align: middle;
+							margin-left: 8rpx;
+						}
+
+						.center-foot {
+							font-size: 24rpx;
+							font-family: AlibabaPuHuiTi_2_55_Regular;
+							color: rgba(43, 43, 53, 0.4);
+							line-height: 36rpx;
+						}
+					}
+
+					.article-item-head-right {
+						width: 104rpx;
+						height: 48rpx;
+						background: linear-gradient(270deg, #5B8FF0 0%, #1E5099 100%);
+						border-radius: 8rpx;
+						text-align: center;
+
+
+						text {
+							height: 44rpx;
+							font-size: 26rpx;
+							font-family: AlibabaPuHuiTi_2_55_Regular;
+							color: #FFFFFF;
+							line-height: 44rpx;
+						}
+					}
+
+				}
+
+				.article-item-content {
+					width: 100%;
+					padding: 32rpx;
+					box-sizing: border-box;
+
+					.article-item-content-title {
+						padding: 32rpx 0 16rpx;
+						font-weight: 600;
+						color: #08080D;
+						font-size: 32rpx;
+					}
+
+					.article-item-content-text {
+						width: 100%;
+						max-height: 234rpx;
+						font-size: 28rpx;
+						color: #08080D;
+						user-select: text;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						overflow: hidden;
+						-webkit-line-clamp: 5;
+						text-overflow: ellipsis;
+					}
+
+					.topicList-item {
+						// height: 48rpx;
+						background: rgba(54, 103, 189, 0.12);
+						border-radius: 8rpx;
+						padding: 8rpx 16rpx;
+						display: inline-block;
+						box-sizing: border-box;
+
+
+						.topicList-item-iamge {
+							width: 48rpx;
+							height: 48rpx;
+							vertical-align: middle;
+							padding-right: 16rpx;
+						}
+
+						.topicList-item-text {
+							height: 36rpx;
+							font-size: 24rpx;
+							font-family: AlibabaPuHuiTi_2_55_Regular;
+							color: #08080D;
+							line-height: 36rpx;
+						}
+
+					}
+
+					// img {
+					// 	max-width: 100%;
+					// 	height: auto;
+					// }
+				}
+
+				.article-item-address {
+					color: rgba(43, 43, 53, 0.6);
+					font-size: 24rpx;
+					padding-top: 32rpx;
+
+					.image {
+						width: 32rpx;
+						height: 32rpx;
+						vertical-align: bottom;
+						padding: 0 2rpx;
+					}
+				}
+			}
+
+			.details-swiper {
+				height: 532rpx;
+
+				.image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.details-main-gift {
+				height: 164rpx;
+				margin-top: 16rpx;
+				background-color: #FFFFFF;
+				padding: 32rpx;
+				display: flex;
+				width: 100%;
+				align-items: center;
+				justify-content: space-between;
+				box-sizing: border-box;
+
+				.details-main-gift-left {
+					display: flex;
+					flex-direction: column;
+
+					.details-main-gift-left-top {
+						font-weight: 600;
+						padding-bottom: 16rpx;
+						color: #08080D;
+					}
+
+					.details-main-gift-left-bottom {
+						font-size: 24rpx;
+						color: rgba(168, 172, 185, 1);
+					}
+				}
+
+				.details-main-gift-left-top {
+					font-weight: 600;
+					padding-bottom: 16rpx;
+					color: #08080D;
+				}
+
+				.details-main-gift-left-bottom {
+					font-size: 24rpx;
+					color: rgba(168, 172, 185, 1);
+				}
+
+				.details-main-gift-right {
+					.image {
+						width: 160rpx;
+						height: 48rpx;
+					}
+				}
+			}
+		}
+
+	}
+</style>

src/pages/mine/mine.vue

@@ -11,12 +11,14 @@
 						<span class="title-boundVehicle-icon"></span>
 					</view>
 					<view v-else class="title-car-info">
-						<view style="display: flex;align-items: center;">
+						<view class="title-car-info-item">
-							<view class="image"></view>
+							<image src="../../static/mine/mine-car-select.png" mode="aspectFit" class="image">
+							</image>
 							<span>阿普利亚 GPR 125</span>
 						</view>
-						<view style="display: flex;align-items: center;">
+						<view class="title-car-info-item">
-							<view class="image2"></view>
+							<image src="../../static/mine/lv1.png" mode="aspectFit" class="image">
+							</image>
 							<span>黑铁骑士</span>
 						</view>
 					</view>
@@ -24,8 +26,8 @@
 				<view class="title-right" v-if="false">
 					<span class="login">注册/登录</span>
 				</view>
-				<view v-else>
+				<view v-else class="title-right">
-					<view class="image" style="margin-top: 30rpx;"></view>
+					<image src="../../static/mine/icon-right-black.png" mode="aspectFit" class="image"></image>
 				</view>
 			</view>
 			<view class="mine-basicData">
@@ -35,21 +37,18 @@
 				</view>
 			</view>
 		</view>
-
 		<view class="mine-content">
 			<view class="equityCard">
-				<img src="../../static/mine/mine-bd.png" alt="" class="image">
+				<image src="../../static/mine/mine-bd.png" mode="aspectFit" class="image"></image>
 				<view class="equityCard-text">
 					<view class="equityCard-text-top">
-						<p>爱摩保VIP专属权益</p>
+						<text>爱摩保VIP专属权益</text>
-						<view style="display: flex;width: 100rpx;">
+						<view class="equityCard-text-right">
-							<span>开通</span>
+							<text>开通</text>
-							<!-- <img src="../../static/mine/icon-right.png" class="img" alt=""> -->
+							<image src="../../static/mine/icon-right.png" mode="aspectFit" class="image"></image>
-							<view class="img">
-							</view>
 						</view>
 					</view>
-					<span>保障齐全 10日赔付 智能精准定位 骑行低功耗自动记录</span>
+					<text>保障齐全 10日赔付 智能精准定位 骑行低功耗自动记录</text>
 				</view>
 			</view>
 			<view class="mine-carData">
@@ -105,15 +104,15 @@
 	const { feature, assist, basicData } = userDate()
 </script>
 
-<style lang="scss">
+<style>
 	page {
-		height: calc(100% - 176rpx);
+		/* height: 100%; */
-		width: 100%;
 	}
-
+</style>
+<style lang="scss" scoped>
 	.contenter {
 		width: 100%;
-		height: 100%;
+		// height: 100%;
 
 		.mine-title {
 			background-image: url(../../static/mine/mine-title.png);
@@ -121,7 +120,7 @@
 			width: 100%;
 			background-size: 100% 100%;
 			padding-top: 160rpx;
-			// box-sizing: border-box;
+			box-sizing: border-box;
 
 			.title-avatar {
 				display: flex;
@@ -129,14 +128,6 @@
 				justify-content: space-between;
 				padding: 0 32rpx;
 
-
-				// :first-child {
-				// 	width: 188rpx;
-				// 	height: 200rpx;
-				// 	margin-bottom: -50rpx;
-
-				// }
-
 				.title-center {
 					display: flex;
 					flex-direction: column;
@@ -192,7 +183,14 @@
 
 				.title-right {
 					height: 120rpx;
-					line-height: 120rpx;
+					// line-height: 120rpx;
+					display: flex;
+					align-items: center;
+
+					.image {
+						width: 48rpx;
+						height: 48rpx;
+					}
 
 					.login {
 						padding: 10rpx 26rpx;
@@ -222,21 +220,27 @@
 					display: flex;
 					justify-content: space-between;
 
-					.image,
+					.title-car-info-item {
-					.image2 {
+						display: flex;
-						background-image: url(../../static/mine/mine-car-select.png);
+						align-items: center;
-						background-repeat: no-repeat;
+
-						width: 48rpx;
+						.image {
-						height: 48rpx;
+							width: 48rpx;
-						background-size: 100% 100%;
+							height: 48rpx;
-						// margin-top: 35rpx;
+							vertical-align: middle;
+
+						}
+
+						&:last-child .image {
+							width: 32rpx;
+							height: 32rpx;
+							vertical-align: middle;
+							padding-right: 6rpx;
+						}
 					}
 
-					.image2 {
+
-						background-image: url(../../static/mine/lv1.png);
+
-						width: 36rpx;
-						height: 36rpx;
-					}
 				}
 			}
 
@@ -272,7 +276,6 @@
 		.equityCard {
 			position: relative;
 			width: 100%;
-			height: 162rpx;
 			background-image: url(../../static/mine/mine-bg.png);
 			background-repeat: no-repeat;
 			background-size: 100% 100%;
@@ -287,37 +290,31 @@
 					width: 100%;
 					justify-content: space-between;
 
-					:first-child {
+					&:first-child {
-						width: 290rpx;
-						height: 32rpx;
 						font-size: 30rpx;
-						font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
-						font-weight: bold;
 						color: #FDDCA1;
-						line-height: 32rpx;
 					}
 
-					.img {
+					.equityCard-text-right {
-						width: 150rpx;
+						display: flex;
-						height: 30rpx;
+						align-items: center;
-						background-image: url(../../static/mine/icon-right.png);
-						background-repeat: no-repeat;
-						background-size: 100% 100%;
-					}
 
+						.image {
+							width: 32rpx;
+							height: 32rpx;
+						}
+					}
 				}
 
-				:last-child {
+				&:last-child {
-					height: 20rpx;
 					font-size: 20rpx;
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
 					color: rgba(255, 255, 255, 0.8);
-					line-height: 20rpx;
 				}
 			}
 
-			.image {
+			&>.image {
 				position: absolute;
 				width: 100%;
 				height: 24rpx;
@@ -331,7 +328,8 @@
 			width: 100%;
 			padding: 0 32rpx;
 			background: #F8F8FA;
-			height: calc(100% - 270rpx);
+			// height: calc(100% - 140rpx);
+			padding-bottom: 160rpx;
 			position: relative;
 			box-sizing: border-box;
 

src/utils/common.js

@@ -0,0 +1,12 @@
+// 获取小程序胶囊位置
+export function getMenuButton() {
+	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+	return menuButtonInfo
+}
+// px 转换为 rpx ，传参类型是数字（Number）
+
+export function rpxTopx(px) {
+	let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
+	let rpx = (750 / deviceWidth) * Number(px)
+	return Math.floor(rpx);
+}