[同步代码]

pages.json

@@ -283,13 +283,14 @@
 			"path": "pages/goods/details",
 			"name": "goodsDetails",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "商品详情",
+				"navigationBarTextStyle":"white",
 				"titleNView": {
-					"backgroundColor": "#FFFFFF",
+					"backgroundColor": "#8b64fd",
 					"type": "transparent",
 					"buttons": [{
 						"text": "分享",
-						"fontSize": "12",
+						"fontSize": "14",
 						"color": "#555555"
 					}]
 				}

pages/goods/details.vue

@@ -28,7 +28,9 @@
 					</view>
 				</view>
 				<view class="title">
-					<view class="title-hot" v-if="goodsObj.specal_tags.is_allow_values">{{goodsObj.specal_tags.is_allow_values}}</view>
+					<view class="title-hot" v-if="goodsObj.specal_tags.is_allow_values">
+						{{goodsObj.specal_tags.is_allow_values}}
+					</view>
 					<view class="title-hot" v-if="goodsObj.specal_tags.is_self">{{goodsObj.specal_tags.is_self}}</view>
 					{{goodsObj.name}}
 				</view>
@@ -175,9 +177,7 @@
 						</view>
 					</view>
 				</view>
-				<view class="coupons-true" @click="serveClose">
+				<view class="coupons-true" @click="serveClose">确定</view>
-					确定
-				</view>
 			</view>
 		</uni-popup>
 	</view>
@@ -189,6 +189,9 @@
 		managesCoupons
 	} from '@/apis/interfaces/goods'
 	import userAuth from '@/public/userAuth'
+	import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js'
+	const uniShare = new UniShare()
+	import {config} from '@/apis/index.js'
 	export default {
 		data() {
 			return {
@@ -210,6 +213,17 @@
 				this.coupons = res.coupons
 			})
 		},
+		onBackPress({
+			from
+		}) {
+			console.log(from);
+			if (from == 'backbutton') {
+				this.$nextTick(function() {
+					uniShare.hide()
+				})
+				return uniShare.isShow;
+			}
+		},
 		methods: {
 			// 提交购买单
 			buyGoods() {
@@ -298,6 +312,40 @@
 			// 查看保障服务-隐藏
 			serveClose() {
 				this.$refs.servePopup.close()
+			},
+			// 顶部菜单点击了分享功能
+			onNavigationBarButtonTap() {
+				console.log('点击了分享功能。。。')
+				uniShare.show({
+					content: { //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
+						type: 0,
+						href: 'https://www.lianshang.vip/app?',
+						title: '链商星球，共创未来，一起搭建链商经济的世界~',
+						summary: '链商星球app你值得拥有~天天签到领福利~',
+						imageUrl: config.apiUrls+'images/top_logo.png'
+					},
+					menus: [{
+							"img": "/static/icons/payWay_icon_00.png",
+							"text": "微信好友",
+							"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
+								"provider": "weixin",
+								"scene": "WXSceneSession"
+							}
+						},
+						{
+							"img": "/static/icons/share-pyq.png",
+							"text": "微信朋友圈",
+							"share": {
+								"provider": "weixin",
+								"scene": "WXSenceTimeline"
+							}
+						}
+					],
+					cancelText: "取消分享",
+				}, e => { //callback
+					console.log(uniShare.isShow);
+					console.log(e);
+				})
 			}
 		}
 	}

uni_modules/uni-share/changelog.md

@@ -0,0 +1,14 @@
+## 2.0.0（2021-10-14）
+支持监听返回操作(如：物理返回，全面屏手机侧滑)关闭分享弹窗
+## 1.0.6（2021-08-25）
+兼容vue3
+## 1.0.5（2021-08-05）
+优化代码实现，修改原来用`eval()`函数实现的逻辑
+## 1.0.4（2021-06-07）
+为符合苹果应用市场的审核，只显示存在对应的分享客户端的选项。如：配置包含微信分享，但是用户手机上并没有安装微信，就不显示微信分享。
+## 1.0.2（2021-05-06）
+修复错误的提示：“打包时未添加oauth模块”
+## 1.0.1（2021-04-30）
+新增完整示例
+## 1.0.0（2021-04-28）
+第1版发布

uni_modules/uni-share/js_sdk/uni-image-menu.js

@@ -0,0 +1,203 @@
+var nvMask, nvImageMenu;
+class NvImageMenu {
+	constructor(arg) {
+		this.isShow = false
+	}
+	show({
+		list,
+		cancelText
+	}, callback) {
+		if (!list) {
+			list = [{
+				"img": "/static/sharemenu/wechatfriend.png",
+				"text": "图标文字"
+			}]
+		}
+		//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
+		var screenWidth = plus.screen.resolutionWidth
+		//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
+		//图标下的按钮文字距离图标5像素，文字大小12像素
+		//底部取消按钮高度固定为44px
+		//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
+		var margin = 20,
+			iconWidth = 60,
+			icontextSpace = 5,
+			textHeight = 12
+		var left1 = margin / 360 * screenWidth
+		var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
+		if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
+			margin = 15
+			iconWidth = 40
+			left1 = margin / 360 * screenWidth
+			iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
+		}
+		var left2 = left1 + iconWidth + iconSpace
+		var left3 = left1 + (iconWidth + iconSpace) * 2
+		var left4 = left1 + (iconWidth + iconSpace) * 3
+		var top1 = left1
+		var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
+
+		const TOP = {
+				top1,
+				top2
+			},
+			LEFT = {
+				left1,
+				left2,
+				left3,
+				left4
+			};
+
+		nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
+			top: '0px',
+			left: '0px',
+			height: '100%',
+			width: '100%',
+			backgroundColor: 'rgba(0,0,0,0.2)'
+		});
+		nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
+			bottom: '0px',
+			left: '0px',
+			height: (iconWidth + textHeight + 2 * margin) * Math.ceil(list.length / 4) + 44 +
+			'px', //'264px',
+			width: '100%',
+			backgroundColor: 'rgb(255,255,255)'
+		});
+		nvMask.addEventListener("click", () => { //处理遮罩层点击
+			// console.log('处理遮罩层点击');
+			this.hide()
+			callback({
+				event: "clickMask"
+			})
+		})
+		let myList = []
+		list.forEach((item, i) => {
+			myList.push({
+				tag: 'img',
+				src: item.img,
+				position: {
+					top: TOP['top' + (parseInt(i / 4) + 1)],
+					left: LEFT['left' + (1 + i % 4)],
+					width: iconWidth,
+					height: iconWidth
+				}
+			})
+			myList.push({
+				tag: 'font',
+				text: item.text,
+				textStyles: {
+					size: textHeight
+				},
+				position: {
+					top: TOP['top' + (parseInt(i / 4) + 1)] + iconWidth + icontextSpace,
+					left: LEFT['left' + (1 + i % 4)],
+					width: iconWidth,
+					height: textHeight
+				}
+			})
+		})
+
+		//绘制底部图标菜单的内容
+		nvImageMenu.draw([{
+				tag: 'rect', //菜单顶部的分割灰线
+				color: '#e7e7e7',
+				position: {
+					top: '0px',
+					height: '1px'
+				}
+			},
+			{
+				tag: 'font',
+				text: cancelText, //底部取消按钮的文字
+				textStyles: {
+					size: '14px'
+				},
+				position: {
+					bottom: '0px',
+					height: '44px'
+				}
+			},
+			{
+				tag: 'rect', //底部取消按钮的顶部边线
+				color: '#e7e7e7',
+				position: {
+					bottom: '45px',
+					height: '1px'
+				}
+			},
+			...myList
+		])
+		nvMask.show()
+		nvImageMenu.show()
+		// 开始动画
+		/*
+			plus.nativeObj.View.startAnimation({
+				type: 'slide-in-bottom',
+				duration: 300
+			}, nvImageMenu, {}, function() {
+				console.log('plus.nativeObj.View.startAnimation动画结束');
+				// 关闭原生动画
+				plus.nativeObj.View.clearAnimation();
+				nvImageMenu.show()
+			});
+		*/
+
+
+		this.isShow = true
+		nvImageMenu.addEventListener("click", e => { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
+			// console.log("click menu"+JSON.stringify(e));
+			if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
+				// callback({event:"clickCancelButton"})
+				this.hide()
+			} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
+				//屏幕左右边缘5像素及菜单顶部5像素不处理点击
+			} else { //点击了图标按钮
+				var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
+				var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
+				var iCol = -1
+				if (e.clientX < (left2 - (iconSpace / 2))) {
+					iCol = 0
+				} else if (e.clientX < (left3 - (iconSpace / 2))) {
+					iCol = 1
+				} else if (e.clientX < (left4 - (iconSpace / 2))) {
+					iCol = 2
+				} else {
+					iCol = 3
+				}
+				if (iRow == 0) {
+					iClickIndex = iCol
+				} else {
+					iClickIndex = iCol + 4
+				}
+				// console.log("点击按钮的序号: " + iClickIndex);
+				// if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
+				// }
+				callback({
+					event: "clickMenu",
+					index: iClickIndex
+				})
+			}
+		})
+		/* nvImageMenu.addEventListener("touchstart", function(e) {
+			if (e.screenY > (plus.screen.resolutionHeight - 44)) {
+				//TODO 这里可以处理按下背景变灰的效果
+			}
+		})
+		nvImageMenu.addEventListener("touchmove", function(e) {
+			//TODO 这里可以处理按下背景变灰的效果
+			if (e.screenY > plus.screen.resolutionHeight - 44) {}
+		})
+		nvImageMenu.addEventListener("touchend", function(e) {
+			//TODO 这里可以处理释放背景恢复的效果
+		})
+		*/
+	}
+
+	hide() {
+		nvMask.hide()
+		nvImageMenu.hide()
+		this.isShow = false
+	}
+}
+
+export default NvImageMenu

uni_modules/uni-share/js_sdk/uni-share.js

@@ -0,0 +1,98 @@
+import UniImageMenu from './uni-image-menu.js';
+class UniShare extends UniImageMenu{
+	constructor(arg) {
+		super()
+		this.isShow = super.isShow
+	}
+	async show(param, callback){
+		var menus = []
+		plus.share.getServices(services => { //只显示有服务的项目
+			services = services.filter(item => item.nativeClient)
+			let servicesList = services.map(e => e.id)
+			param.menus.forEach(item => {
+				if (servicesList.includes(item.share.provider) || typeof(item.share) == 'string') {
+					menus.push(item)
+				}
+			})
+			super.show({
+				list: menus,
+				cancelText: param.cancelText
+			}, e => {
+				callback(e)
+				if(e.event == 'clickMenu'){
+					if (typeof(menus[e.index]['share']) == 'string') {
+						this[menus[e.index]['share']](param)
+					} else {
+						uni.share({
+							...param.content,
+							...menus[e.index].share,
+							success: res=> {
+								console.log("success:" + JSON.stringify(res));
+								super.hide()
+							},
+							fail: function(err) {
+								console.log("fail:" + JSON.stringify(err));
+								uni.showModal({
+									content: JSON.stringify(err),
+									showCancel: false,
+									confirmText: "知道了"
+								});
+							}
+						})
+					}
+				}
+			})
+		}, err => {
+			uni.showModal({
+				title: '获取服务供应商失败：' + JSON.stringify(err),
+				showCancel: false,
+				confirmText: '知道了'
+			});
+			console.error('获取服务供应商失败：' + JSON.stringify(err));
+		})
+	}
+	hide(){
+		super.hide()
+	}
+	copyurl(param) {
+		console.log('copyurl',param);
+		uni.setClipboardData({
+			data: param.content.href,
+			success: ()=>{
+				console.log('success');
+				uni.hideToast() //关闭自带的toast
+				uni.showToast({
+					title: '复制成功',
+					icon: 'none'
+				});
+				super.hide();
+			},
+			fail: (err) => {
+				uni.showModal({
+					content: JSON.stringify(err),
+					showCancel: false
+				});
+			}
+		});
+	}
+	// 使用系统分享发送分享消息 
+	shareSystem(param) {
+		console.log('shareSystem',param);
+		plus.share.sendWithSystem({
+			type: 'text',
+			content: param.content.title + param.content.summary || '',
+			href: param.content.href,
+		}, (e)=> {
+			console.log('分享成功');
+			super.hide()
+		}, (err)=> {
+			console.log('分享失败：' + JSON.stringify(err));
+			uni.showModal({
+				title: '获取服务供应商失败：' + JSON.stringify(err),
+				showCancel: false,
+				confirmText: '知道了'
+			});
+		});
+	}
+}
+export default UniShare

uni_modules/uni-share/package.json

@@ -0,0 +1,80 @@
+{
+  "id": "uni-share",
+  "displayName": "uni-share",
+  "version": "2.0.0",
+  "description": "底部弹出宫格图标式的分享菜单，可覆盖原生组件。",
+  "keywords": [
+    "分享菜单"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "n",
+          "Android Browser": "n",
+          "微信浏览器(Android)": "n",
+          "QQ浏览器(Android)": "n"
+        },
+        "H5-pc": {
+          "Chrome": "n",
+          "IE": "n",
+          "Edge": "n",
+          "Firefox": "n",
+          "Safari": "n"
+        },
+        "小程序": {
+          "微信": "n",
+          "阿里": "n",
+          "百度": "n",
+          "字节跳动": "n",
+          "QQ": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-share/readme.md

@@ -0,0 +1,85 @@
+#### 本功能基于[底部图标菜单](https://ext.dcloud.net.cn/plugin?id=4858)封装而成。
+### 示例代码
+```
+<template>
+	<button type="default" @click="uniShare">显示</button>
+</template>
+<script>
+	import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
+	export default {
+		methods: {
+			uniShare() {
+				uniShare({
+					content: { //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
+						type: 0,
+						href: 'https://uniapp.dcloud.io/',
+						title: '标题',
+						summary: '描述',
+						imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
+					},
+					menus: [{
+							"img": "/static/app-plus/sharemenu/wechatfriend.png",
+							"text": "微信好友",
+							"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
+								"provider": "weixin",
+								"scene": "WXSceneSession"
+							}
+						},
+						{
+							"img": "/static/app-plus/sharemenu/wechatmoments.png",
+							"text": "微信朋友圈",
+							"share": {
+								"provider": "weixin",
+								"scene": "WXSenceTimeline"
+							}
+						},
+						{
+							"img": "/static/app-plus/sharemenu/mp_weixin.png",
+							"text": "微信小程序",
+							"share": {
+								provider: "weixin",
+								scene: "WXSceneSession",
+								type: 5,
+								miniProgram: {
+									id: '123',
+									path: '/pages/list/detail',
+									webUrl: '/#/pages/list/detail',
+									type: 0
+								},
+							}
+						},
+						{
+							"img": "/static/app-plus/sharemenu/weibo.png",
+							"text": "微博",
+							"share": {
+								"provider": "sinaweibo"
+							}
+						},
+						{
+							"img": "/static/app-plus/sharemenu/qq.png",
+							"text": "QQ",
+							"share": {
+								"provider": "qq"
+							}
+						},
+						{
+							"img": "/static/app-plus/sharemenu/copyurl.png",
+							"text": "复制",
+							"share": "copyurl"
+						},
+						{
+							"img": "/static/app-plus/sharemenu/more.png",
+							"text": "更多",
+							"share": "shareSystem"
+						}
+					],
+					cancelText: "取消分享",
+				}, e => { //callback
+					console.log(e);
+				})
+			}
+		}
+	}
+</script>
+
+```