feat(分享): 重构分享功能并统一处理分享信息

- 移除各页面独立的onShareAppMessage方法，改为统一通过share mixin处理
- 为各详情页添加分享路径和分享信息设置逻辑
- 新增getImageOne工具方法用于获取图片字符串中的第一张图片
- 优化动态列表的媒体展示布局，根据数量自动调整样式
- 在store中扩展configListMax用于存储完整配置项

components/list/dynamic/daynamicInfo.vue

@@ -3,13 +3,13 @@
 		<view class="dynamics" v-html="$utils.stringFormatHtml(item.title)">
 		</view>
 
-		<view class="Artworkimages">
+		<view class="Artworkimages" :class="layoutClass">
 			<view class="wrokimg" @click.stop="previewMedia(media, i)" :key="i" v-for="(media, i) in mediaList">
 				<image v-if="media.type === 'image'" :src="media.url" mode="aspectFill"></image>
 				<video v-else-if="media.type === 'video'" :src="media.url" 
 					   controls 
 					   :poster="media.poster || ''"
-					   style="width: 190rpx; height: 190rpx; border-radius: 20rpx;"></video>
+					   :style="videoStyle"></video>
 				<!-- <view v-if="media.type === 'video'" class="video-overlay">
 					<uv-icon name="play-circle-fill" size="60rpx" color="#fff"></uv-icon>
 				</view> -->
@@ -70,6 +70,35 @@
 				}
 				
 				return mediaArray
+			},
+			// 根据媒体数量决定布局类型
+			layoutClass(){
+				const count = this.mediaList.length
+				if(count === 1){
+					return 'single-layout'
+				} else if(count === 2 || count === 4){
+					return 'grid-layout-2x2'
+				} else {
+					return 'grid-layout-3x3'
+				}
+			},
+			// 动态视频样式
+			videoStyle(){
+				const count = this.mediaList.length
+				let style = 'border-radius: 20rpx;'
+				
+				if(count === 1){
+					// 单个视频占满宽度
+					style += 'width: 100%; height: 400rpx;'
+				} else if(count === 2 || count === 4){
+					// 4宫格布局
+					style += 'width: calc(50% - 10rpx); height: 200rpx;'
+				} else {
+					// 9宫格布局
+					style += 'width: calc(33.33% - 10rpx); height: 150rpx;'
+				}
+				
+				return style
 			}
 		},
 		data() {
@@ -112,20 +141,54 @@
 	.Artworkimages {
 		display: flex;
 		flex-wrap: wrap;
+		margin-top: 20rpx;
 
-		.wrokimg {
-			margin: 10rpx;
-			position: relative;
+		// 单图布局 - 占满宽度
+		&.single-layout {
+			.wrokimg {
+				width: 100%;
+				margin: 0;
+				
+				image {
+					width: 100%;
+					height: 400rpx;
+					border-radius: 20rpx;
+				}
+			}
+		}
 
-			image {
-				height: 190rpx;
-				width: 190rpx;
-				border-radius: 20rpx;
+		// 4宫格布局 - 2x2
+		&.grid-layout-2x2 {
+			.wrokimg {
+				width: calc(50% - 10rpx);
+				margin: 5rpx;
+				
+				image {
+					width: 100%;
+					height: 200rpx;
+					border-radius: 20rpx;
+				}
+			}
+		}
+
+		// 9宫格布局 - 3x3
+		&.grid-layout-3x3 {
+			.wrokimg {
+				width: calc(33.33% - 10rpx);
+				margin: 5rpx;
+				
+				image {
+					width: 100%;
+					height: 150rpx;
+					border-radius: 20rpx;
+				}
 			}
+		}
+
+		.wrokimg {
+			position: relative;
 			
 			video {
-				height: 190rpx;
-				width: 190rpx;
 				border-radius: 20rpx;
 			}
 			

mixins/share.js

@@ -18,8 +18,10 @@ export default {
 	// 定义全局分享
 	// 1.发送给朋友
     onShareAppMessage(res) {
+		console.log('this.share', this.share);
 		let o = {
 			...this.share,
+			imageUrl : this.share.imageUrl || this.configList.applet_logo
 		}
 		if(this.userInfo.id){
 			o.path = this.share.path + '?shareId=' + this.userInfo.id

pages/index/article.vue

@@ -6,7 +6,7 @@
 			<view class="article-list" v-if="!loading">
 				<article-item 
 					v-for="(item, index) in List" 
-					:key="item.id || index" 
+					:key="item.id" 
 					:item="item"
 					@click="handleItemClick"
 				/>

pages/index/index.vue

@@ -225,12 +225,12 @@
 			// this.getBannerList()
 			this.$store.commit('getCategory')
 		},
-		onShareAppMessage(res) {
-			return {
-				title: this.headInfo.name,
-				path: '/pages/index/index'
-			}
-		},
+		// onShareAppMessage(res) {
+		// 	return {
+		// 		title: this.headInfo.name,
+		// 		path: '/pages/index/index'
+		// 	}
+		// },
 		onShow() {
 			// this.onSubscribeMessageTap();
 			this.getUserInfo();
@@ -311,6 +311,7 @@
 				this.$api('getIndexHeaderInfo', res => {
 					if (res.code == 200) {
 						this.headInfo = res.result
+						this.share.title = this.headInfo.name
 					}
 				})
 			},

pages_order/article/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="page">
-		<navbar title="文章详情" />
+		<navbar title="文章详情" @leftClick="$utils.navigateBack" leftClick/>
 		
 		<view class="content">
 			<!-- 加载状态 -->

pages_order/car/carListDetail.vue

@@ -76,6 +76,9 @@
 			this.queryParams.orderId = options.id
 			
 			this.params.orderId = options.id
+			
+			// 设置分享路径
+			this.share.path = '/pages_order/car/carListDetail?id=' + this.id
 		},
 		onPullDownRefresh(){
 			this.getDetail()
@@ -83,12 +86,6 @@
 		onShow() {
 			this.getDetail()
 		},
-		onShareAppMessage(res) {
-			return {
-				title: this.detail.title,
-				path: '/pages_order/scenicSpot/scenicSpotDetail?id=' + this.id
-			}
-		},
 		methods: {
 			getDetail() {
 				this.$api('getCatDetail', {
@@ -100,6 +97,9 @@
 						
 						this.detail = res.result
 						
+						// 设置分享信息
+						this.share.title = res.result.title || '拼车详情'
+						this.share.imageUrl = this.$utils.getImageOne(res.result.imageTitle)
 					}
 				})
 			},

pages_order/gourmet/gourmetDetail.vue

@@ -170,12 +170,9 @@
 			this.params.orderId = options.id
 			
 			this.queryParams.shopId = options.id
-		},
-		onShareAppMessage(res) {
-			return {
-				title: this.detail.title,
-				path: '/pages_order/gourmet/gourmetDetail?id=' + this.id
-			}
+			
+			// 设置分享路径
+			this.share.path = '/pages_order/gourmet/gourmetDetail?id=' + this.id
 		},
 		onPullDownRefresh() {
 			this.getDetail()
@@ -183,13 +180,6 @@
 		onShow() {
 			this.getDetail()
 		},
-		onShareAppMessage(res) {
-			// return {
-			//   title: this.item.title,
-			//   desc: this.item.content && this.item.content.slice(0, 30),
-			//   path: '/pages/publish/postDetail?id=' + this.id
-			// }
-		},
 		methods: {
 			// 跳转到二维码页面
 			goToQrCode() {
@@ -233,6 +223,10 @@
 						// res.result.details.split(',') : []
 
 						this.detail = res.result
+						
+						// 设置分享信息
+						this.share.title = res.result.title || '美食详情'
+						this.share.imageUrl = this.$utils.getImageOne(res.result.logoImage)
 					}
 				})
 			},

pages_order/group/groupDetail.vue

@@ -100,6 +100,9 @@
 				this.getGroupDetail()
 			}
 			// initRewardedVideoAd() 已在混入的mounted中处理
+			
+			// 设置分享路径
+			this.share.path = '/pages_order/group/groupDetail?id=' + options.id
 		},
 		methods: {
 			// 广告观看完成回调
@@ -130,6 +133,10 @@
 				this.$api('groupDetail', { id: this.groupId }, res => {
 					if (res.code === 200 && res.result) {
 						this.groupInfo = res.result
+						
+						// 设置分享信息
+						this.share.title = res.result.title || '群组详情'
+						this.share.imageUrl = this.$utils.getImageOne(res.result.image)
 					} else {
 						uni.showToast({
 							title: res.message || '获取群组详情失败',

pages_order/post/postDetail.vue

@@ -98,33 +98,35 @@
 		
 		onLoad(options) {
 			// this.$route.query的参数
-			console.log(options)
 			this.id = options.id
 			this.queryParams.type = this.params.type
 			this.queryParams.orderId = options.id
 			this.queryParams.formId = options.id
 			
 			this.params.orderId = options.id
+			
+			
+			this.share.path = '/pages_order/post/postDetail?id=' + this.id
 		},
-		onShareAppMessage(res) {
-			return {
-				title: this.detail.title,
-				path: '/pages_order/post/postDetail?id=' + this.id
-			}
-		},
+		// onShareAppMessage(res) {
+		// 	return {
+		// 		title: this.detail.title,
+		// 		path: '/pages_order/post/postDetail?id=' + this.id
+		// 	}
+		// },
 		onPullDownRefresh() {
 			this.getDetail()
 		},
 		onShow() {
 			this.getDetail()
 		},
-		onShareAppMessage(res) {
+		// onShareAppMessage(res) {
 			// return {
 			//   title: this.item.title,
 			//   desc: this.item.content && this.item.content.slice(0, 30),
 			//   path: '/pages/publish/postDetail?id=' + this.id
 			// }
-		},
+		// },
 		methods: {
 			tabsClick({index}){
 				this.tagIndex = index
@@ -140,8 +142,12 @@
 					if (res.code == 200) {
 						
 						this.params.name = res.result.userName
+						
+						this.share.title = res.result.title
 
 						this.detail = res.result
+
+						this.share.imageUrl = this.$utils.getImageOne(res.result.image)
 					}
 				})
 			},

pages_order/product/productDetail.vue

@@ -116,13 +116,9 @@
 		onLoad(args) {
 			this.id = args.id
 			this.getData()
-		},
-		// 微信小程序分享
-		onShareAppMessage(res) {
-		    return {
-				title: this.detail.name,
-				path: '/pages_order/product/productDetail?id=' + this.id
-		    }
+			
+			// 设置分享路径
+			this.share.path = '/pages_order/product/productDetail?id=' + this.id
 		},
 		onPullDownRefresh() {
 			this.getData()
@@ -157,6 +153,10 @@
 					uni.stopPullDownRefresh()
 					if(res.code == 200){
 						this.detail = res.result
+						
+						// 设置分享信息
+						this.share.title = res.result.name
+						this.share.imageUrl = this.$utils.getImageOne(res.result.image)
 					}
 				})
 			},

pages_order/renting/rentingDetail.vue

@@ -169,12 +169,9 @@
 			this.queryParams.orderId = options.id
 			
 			this.params.orderId = options.id
-		},
-		onShareAppMessage(res) {
-			return {
-				title: this.detail.title,
-				path: '/pages_order/renting/rentingDetail?id=' + this.id
-			}
+			
+			// 设置分享路径
+			this.share.path = '/pages_order/renting/rentingDetail?id=' + this.id
 		},
 		onPullDownRefresh() {
 			this.getDetail()
@@ -208,6 +205,10 @@
 						this.params.name = res.result.title
 						
 						this.detail = res.result
+						
+						// 设置分享信息
+						this.share.title = res.result.title
+						this.share.imageUrl = this.$utils.getImageOne(res.result.image)
 					}
 				})
 			},

pages_order/scenicSpot/scenicSpotDetail.vue

@@ -106,6 +106,9 @@
 			this.queryParams.orderId = options.id
 
 			this.params.orderId = options.id
+			
+			// 设置分享路径
+			this.share.path = '/pages_order/scenicSpot/scenicSpotDetail?id=' + this.id
 		},
 		onPullDownRefresh() {
 			this.getDetail()
@@ -113,12 +116,6 @@
 		onShow() {
 			this.getDetail()
 		},
-		onShareAppMessage(res) {
-			return {
-				title: this.detail.name,
-				path: '/pages_order/scenicSpot/scenicSpotDetail?id=' + this.id
-			}
-		},
 		methods: {
 			tabsClick({index}){
 				this.tagIndex = index
@@ -137,6 +134,10 @@
 						this.detail = res.result
 
 						this.detail.images = res.result.images && res.result.images.split(',')
+						
+						// 设置分享信息
+						this.share.title = res.result.name
+						this.share.imageUrl = this.$utils.getImageOne(res.result.images)
 					}
 				})
 			},

pages_order/work/workDetail.vue

@@ -143,6 +143,9 @@
 			this.queryParams.orderId = options.id
 			
 			this.params.orderId = options.id
+			
+			// 设置分享路径
+			this.share.path = '/pages_order/work/workDetail?id=' + this.id
 		},
 		onPullDownRefresh() {
 			this.getDetail()
@@ -150,12 +153,6 @@
 		onShow() {
 			this.getDetail()
 		},
-		onShareAppMessage(res) {
-			return {
-				title: this.detail.title,
-				path: '/pages_order/work/workDetail?id=' + this.id
-			}
-		},
 		methods: {
 			getDetail(){
 				let data = {
@@ -172,6 +169,9 @@
 						this.detail = res.result
 						this.detail.jobDetails = this.$utils.stringFormatHtml(res.result.jobDetails)
 						this.collectionFlag = res.result.collectionFlag
+						
+						// 设置分享信息
+						this.share.title = res.result.title
 					}
 				})
 			},

store/store.js

@@ -9,6 +9,7 @@ import api from '@/api/api.js'
 const store = new Vuex.Store({
 	state: {
 		configList: {}, //配置列表
+		configListMax: {}, //配置列表
 		priceMap : {},//各项费用配置
 		shop : false,
 		userInfo : {}, //用户信息
@@ -38,8 +39,11 @@ const store = new Vuex.Store({
 			api('getConfig', res => {
 				if(res.code == 200){
 					res.result.forEach(n => {
-						state.configList[n.keyIcon] = n.keyContent || n.keyName || n.keyDetails || n.keyImage;
+						state.configList[n.keyIcon] = n.keyContent || n.keyDetails || n.keyImage;
 						state.configList[n.keyIcon + '_keyValue'] = n.keyValue;
+						
+						
+						state.configListMax[n.keyIcon] = n;
 					});
 				}
 			})

utils/utils.js

@@ -197,6 +197,40 @@ export const toLogin = function(){
 	}
 }()
 
+//获取图片字符串中的第一张图片
+export function getImageOne(image){
+	if(!image){
+		return ''
+	}
+	let arr = image.split(',')
+	for (var index = 0; index < arr.length; index++) {
+		var element = arr[index].trim();
+		if(!element) continue;
+		
+		// 获取文件扩展名
+		const lastDotIndex = element.lastIndexOf('.');
+		if(lastDotIndex === -1) continue;
+		
+		const extension = element.substring(lastDotIndex + 1).toLowerCase();
+		
+		// 检查是否为图片格式
+		const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg'];
+		if(imageExtensions.includes(extension)){
+			return element
+		}
+	}
+	
+	// 如果没有找到图片，返回第一个非空元素作为备选
+	for (var index = 0; index < arr.length; index++) {
+		var element = arr[index].trim();
+		if(element) {
+			return element
+		}
+	}
+	
+	return ''
+}
+
 export default {
 	toArray,
 	generateUUID,
@@ -211,5 +245,6 @@ export default {
 	redirectTo,
 	copyText,
 	stringFormatHtml,
-	toLogin
+	toLogin,
+	getImageOne
 }