From 7a1962f74653057dc92e44007a621a935f7a44a5 Mon Sep 17 00:00:00 2001
From: zhangkai <847704969@qq.com>
Date: Tue, 13 May 2025 12:52:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=86=E4=BA=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/center/detail.vue | 225 +++++++++++++++++++++++++++++-----------
 static/center/close.png | Bin 1628 -> 1196 bytes
 2 files changed, 166 insertions(+), 59 deletions(-)

diff --git a/pages/center/detail.vue b/pages/center/detail.vue
index c566912..7db0d81 100644
--- a/pages/center/detail.vue
+++ b/pages/center/detail.vue
@@ -1,6 +1,6 @@
 <template>
 	<view class="detail_all">
-		<view class="nav">
+		<view class="nav" @click="goHome">
 			<u-navbar :is-back="true" leftIconColor="#FFFFFF" :autoBack="true"  :bgColor="background"
 				:titleStyle='titleStyle'> </u-navbar>
 		</view>
@@ -199,48 +199,47 @@
 		<!-- 分享海报 -->
 		<u-overlay :show="overlay" class="pos">
 			
-			<view class="Poster">
-				<span class="posterClose" @click="closeoo">
+			<view class="Poster" id="Poster">
+				<span  class="posterClose" @click="closeoo">
 					<image src="../../static/center/close.png" mode="" style="width: 64rpx;height: 64rpx;"></image>
 				</span>
-				<image :src="path" mode="widthFix" style="width: 661rpx;height: 1075rpx;"></image>
-				<l-painter isCanvasToTempFilePath ref="painter" @success="(path = $event)"
-					css="width: 661rpx;height:1075rpx; padding-bottom: 40rpx; background-image: url('https://naweigetetest2.hschool.com.cn/uploads/20250512/cab87804899539e37ef155163ab12b54.png')">
-
-					<l-painter-view
-						css="margin-left: 35rpx; margin-top: 24rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 690rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
-						<l-painter-image :src="detail.user.avatar"
-							css="object-fit: cover; object-position: 50% 50%; width: 626rpx; height: 448rpx; border-radius: 12rpx;" />
-
-						<l-painter-view css=" width: 626rpx;display: flex;alignItems: center;">
-							<l-painter-view>
-								<l-painter-view css="margin-top: 24rpx;">
-									<l-painter-text :text="formattedTitle" css="color: #343434;font-size: 36rpx;" />
-								</l-painter-view>
-								<l-painter-text
-									css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 26rpx;display: block; width: 380rpx; padding-right:32rpx; box-sizing: border-box"
-									:text="detail.price"></l-painter-text>
-								<l-painter-text
-									css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 26rpx;display: block;margin-bottom:30rpx; width: 380rpx; padding-right:32rpx; box-sizing: border-box"
-									:text="detail.address"></l-painter-text>
-							</l-painter-view>
-							<l-painter-view css="margin-top: 24rpx;">
-								<l-painter-qrcode css="width: 200rpx; height: 200rpx;" :text="qrUrl"></l-painter-qrcode>
-							</l-painter-view>
-						</l-painter-view>
-
-					</l-painter-view>
-				</l-painter>
+				<view   ref="painter" class="title_top">
+					<view class="toutop">
+						<image class="toutu" :src="detail.user.avatar" />
+						<view class="toututt">{{detail.user.nickname}}的邀请</view>
+					</view>
+					<view class="center_con">
+						<image v-if="detail.images" :src="detail.images[0]" class="cenimg" />
+						<view class="center_text">
+							<view>
+								<view class="c1t1">{{ formattedTitle }}</view>
+								<view class="c2t2">￥{{ detail.price }}</view>
+								<view class="c3t3">地址：{{ detail.address }}</view>
+							</view>
+							<view style="background-color: #ffffff;border-radius: 18rpx;">
+								<l-painter>
+									<l-painter-view css="margin:20rpx;">
+										<l-painter-qrcode css="width: 160rpx; height: 160rpx;margin:0 auto;" :text="qrUrl"></l-painter-qrcode>
+									</l-painter-view>
+								</l-painter>
+							</view>
+						</view>
+					</view>
+				</view>
 			</view>
 			<view class="btnList">
-				<span class="save" @click.stop="save()">保 存 海 报</span>
+				<span class="save" @click="capturePage()">保 存 海 报</span>
 				<!-- <span class="sharePoster"  @click.stop="sharePoster()">
 				分 享
 				</span> -->
 				<button open-type="share" class="no-border-button" plain="true">
-					<span>分 享 发 布</span>
+					<span>分 享</span>
 				</button>
 			</view>
+			<canvas 
+				canvas-id="myCanvas" 
+				style="position: absolute;top:256rpx;left: 48rpx; width: 661rpx;height:1075rpx; visibility: hidden;">
+			</canvas>
 		</u-overlay>
 
 	</view>
@@ -289,6 +288,7 @@
 					img: 'width: 100%'
 
 				},
+				isShare:'',
 				value_slide:0,
 				scrollTop: 0,
 				overlay: false,
@@ -329,18 +329,29 @@
 				},
 			};
 		},
-
-		onShareTimeline() {
+		//发送给朋友
+		onShareAppMessage() {
 			return {
 				title: this.detail.title, //分享的标题
-				imageUrl: this.detail.headimage, //展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
-				query: `id=${this.id}`
+				imageUrl: this.detail.images[0], //展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
+				path: `/pages/center/detail?id=${this.id}&isShare=1`
 			}
 		},
+		//发送朋友圈
+		// onShareTimeline() {
+		// 	return {
+		// 		title: this.detail.title, //分享的标题
+		// 		imageUrl: this.detail.images[0], //展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
+		// 		query: `id=${this.id}&isShare=1`
+		// 	}
+		// },
 
 		onLoad(options) {
 			this.userInfo = uni.getStorageSync("userInfo")
 			this.id = options.id
+			if(options.isShare){
+				this.isShare = options.isShare;
+			}
 			// this.id = 1
 			if (options.type == 2) {
 				this.type = 2
@@ -359,6 +370,32 @@
 		},
 
 		methods: {
+			capturePage() {
+				uni.canvasToTempFilePath({
+					x: 0, // 起始x坐标（可选）
+					y: 0, // 起始y坐标（可选）
+					width: uni.upx2px(750), // 宽度（单位px）
+					height: uni.upx2px(1334), // 高度（单位px）
+					destWidth: 750, // 目标图片宽度（可选）
+					destHeight: 1334, // 目标图片高度（可选）
+					canvasId: 'myCanvas', // Canvas组件的id
+					success: function (res) {
+						console.log('tempFilePath:', res.tempFilePath); // 图片路径信息输出到控制台或进行其他处理
+						this.save(res.tempFilePath)
+					},
+					fail: function (err) {
+						console.error(err); // 输出错误信息到控制台进行调试
+					}
+				});
+			},
+			// 返回首页
+			goHome() {
+				if(this.isShare == 1){
+					uni.switchTab({
+						url: "/pages/index/index"
+					})
+				}
+			},
 			closeoo(){
 				this.overlay = false;
 			},
@@ -647,14 +684,9 @@
 				this.selectedTime = null
 				this.buyShow = false
 			},
-			// 返回首页
-			toIndex() {
-				uni.switchTab({
-					url: "/pages/index/index"
-				})
-			},
+			
 			// 保存海报
-			save() {
+			save(e) {
 				let base64 = this.path.replace(/^data:image\/\w+;base64,/, ""); //图片替换
 				let filePath = wx.env.USER_DATA_PATH + '/qrcode.png';
 				uni.getFileSystemManager().writeFile({
@@ -1475,24 +1507,95 @@
 		// border-radius: 10px !important;
 		background: #FFFFFF !important;
 	}
-
-	.Poster {
-		position: relative;
-		top: 21rpx;
-		left: 30rpx;
-		width: 690rpx;
-		height: 1200rpx;
-	}
-
-	.posterClose {
-		position: absolute;
-		right: 8rpx;
-		top: 8rpx;
-	}
-
 	.pos {
 		position: relative;
+		width: 100%;
+		height: 100%;
 	}
+	.Poster {
+		position: relative;
+		margin: 0 auto;
+		.posterClose {
+			position: absolute;
+			right: 8rpx;
+			top: 200rpx;
+		}
+		.title_top{
+			position: relative;
+			margin: 0 auto;
+			width: 661rpx;height:1075rpx;
+			background-image: url('https://naweigetetest2.hschool.com.cn/dyqc/fenxiang.png');
+			background-size: 100%;
+			background-repeat: no-repeat;
+    		margin-top: 240rpx;
+			
+		}
+		.toutop{
+			position: absolute;
+			top: 120rpx;
+			left: 30rpx;
+			    display: flex;
+    align-items: center;
+	width: 80%;
+			.toutu{
+				width: 60rpx;
+				height: 60rpx;
+				border-radius: 134rpx 134rpx 134rpx 134rpx;
+				border: 2rpx solid #FFFFFF;
+			}
+			.toututt{
+				padding-left: 15rpx;
+				height: 36rpx;
+				font-family: PingFang SC Bold, PingFang SC Bold;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #3D3D3D;
+				line-height: 36rpx;
+				text-align: center;
+				font-style: normal;
+				text-transform: none;
+			}
+		}
+		.center_con{
+			padding-top: 200rpx;
+			.cenimg{
+				width: 620rpx;
+				height: 620rpx;
+				border-radius: 24rpx;
+				margin: 0 auto;
+    			display: block;
+			}
+			.center_text{
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+				margin-top: 30rpx;
+				.c1t1{
+					color: #202020;font-size: 36rpx;
+					// margin-top: 30rpx;
+				}
+				.c2t2{
+					font-family: D-DIN-PRO, D-DIN-PRO;
+					font-weight: 900;
+					font-size: 28rpx;
+					color: #FF4810;
+					margin-top: 20rpx;
+				}
+				.c3t3{
+					margin-top: 20rpx;
+					font-family: PingFang SC Regular, PingFang SC Regular;
+					font-weight: 400;
+					font-size: 26rpx;
+					color: #9C9C9C;
+				}
+			}
+		}
+		
+	}
+
+	
+
+	
 
 	.btnList {
 		width: 690rpx;
@@ -1501,6 +1604,10 @@
 		left: 30rpx;
 		display: flex;
 		justify-content: space-evenly;
+		// width: 750rpx;
+		// height: 247rpx;
+		// background: #FFFFFF;
+		// border-radius: 44rpx 44rpx 0rpx 0rpx;
 
 		span {
 			width: 250rpx;
diff --git a/static/center/close.png b/static/center/close.png
index 9feb3f707130cc83e13d23ce53cbf59ccacb2f49..40e9aa00bce2187e2cb73da707babd8e2cae06f8 100644
GIT binary patch
literal 1196
zcmV;d1XKHoP)<h;3K|Lk000e1NJLTq001!n001!v1^@s6bDTjO00001b5ch_0Itp)
z=>Px(W=TXrRA@upT3KsTK@|Ru+R|E06PGS7MIt`9fC^&WK~V9*-{7O*tD@j95GwjA
z_~_5jhk|Y05L9q^5Q0=|7ndw94T*Z>yH3OH?M*Usb7NWuLLWNk-1E&@X6Ae&h+(Me
zG5`qxYt7#-0385UnBPwTzX5zVzpntk0LY1mHfn-2qCi#G1K0qd4?tT4U1b1M047A_
zQv`WW#2JLDQig`70dz<GaEKhe^u_>k@{SV-Rb2yMXUxV2@e}~O6p_!i3uFbt#QY8b
zTWl4_Fz+pZS0ch(syXU{P}NQV`<lG^)r`yocp@URwNTUqp{lC@><6&2-fA@Q{{-+@
zL|D;6M^zB2x*EV?QzDyaqm^ow=ur{*7B)K+gbATT02oS(W&8l}AS|>NfG|l+55!qM
z<5~#j$XGDh!$9o%$5qG`;9C)S;TM_*LREQeIOwXi1@rHV2#+n^sDLm#@lkX3X@Ol%
zpJZ4u(Y>AB4`LI5Jua&9`FwwSdwZd?vy(@L$YXYPwyRhyrc$ZYdj};?MPwof;y3`F
zKCMP3lettbmyZD`B@&72{r&y-tpo#;rl+R|bGh7Q0PSsUZTHgY^fgO8c@Y_@fKb(S
z01j9RBb&``nwgoo>6`y6kw^@=0-2ngJX9zY2w?e~uD-s$bKTwDla{tT5|NKyIH~Gx
z0GllZLHCc3kKg9%MFkQDfL<LK7&z+?p6^8DxtN4L<$515VQ|I2iU6!UQU!pOY+#{z
zAGu2qDRaEAbwp)e6l0>u)G=(7AhrV7?u@_)xESR!*TJ6G1i`Y(@)~*A7-uslq5%^G
z!E+Krs-aQKNGc9iA=~`1Fe*n7Olp6Xv5*U&QVociT`8k60-)+5L7a~B&QJx2A9a)}
zRBK^>62zIvOJ7B>29US`coxL&2`c@^AUsc;Fx|RX9MXbtDiOpH0LeHIv?#H&1hE&u
z#zsN3u*AM^c*m}h1M`x&iJP6bV>6T(Qjvy>aV~Qmj2R;cw&hQ{o?>l15Hu!cAUwt1
ziFBWc3SbUUH6Y1k@@j8y?;{5<{Jl?5!0-%%w!(|(QuL6#hQCq3PKQ;)j17XRsi|8&
z(2;iHFpu=~^qjYB7<?CzVQ<HtGelKcW?62nMkbTFP%f9*Tqq@z$sxxusC>f!xo8>%
z!|8PThLr)pGZFE+Bf-8CtCW>DD9naIM@L82;Z7WCAH%a$DkU5m1SDcc7WAD=ZjcFL
zBYCk8HkK<)(*M_sHQwO9v9!D51_*fxHkMn-5Cub;j1e2j3#hMJOcALrCOQfARu3{o
z<RwBWuX>yvDKBz%tz?YI5RtPBrMl*o*lJ6?<k?f-M#yAex;(buLxxG>ivm7IY1SZt
z!WRV<CaB(r>XPw61*QSbBg!@xKBJx?0BC#$zz5ftH_jjeo*}P6K#jh#q2V7bfQC+K
z2!t<ZsE0R19$Q$^$T;!GTw;l4iR7<n-aGN^!(&6i=Ius3aDM<M`*F(_E+}^Z0000<
KMNUMnLSTXuDG;In

literal 1628
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
aV)HN9<U;0G)_5KO0000<MNUMnLSTY?cmm!4