stellar-ui-v2 1.40.16 → 1.40.18

package/README.md

@@ -10,9 +10,9 @@
 
 ## ✨ 特性
 
-- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
-- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
-- 📖 提供丰富的文档和组件示例.
+- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
+- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
+- 📖 提供丰富的文档和组件示例.
 - 🎨 支持修改 CSS 变量实现主题定制.
 
 ## 📱 预览
@@ -75,11 +75,11 @@ npm i stellar-ui-v2 -S
 
 ## 周边生态
 
-| 项目																							| 描述															|
-| ---																							| ---															|
-|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus)							| 一个基于vue3构建，打造的uni-app组件库								|
-|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)					|常用于小程序需要全局引入组件的场景的包								|
-|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper)	|旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件	|
+| 项目																							| 描述															|
+| ---																							| ---															|
+|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus)							| 一个基于vue3构建，打造的uni-app组件库								|
+|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)					|常用于小程序需要全局引入组件的场景的包								|
+|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper)	|旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件	|
 |[ste-cli](https://github.com/wuhanshuzhiyun/ste-cli)											|stellar配套的脚手架												|
 
 ## 核心团队

package/components/ste-app-share/README.md

@@ -0,0 +1,90 @@
+# AppShare 分享
+- APP分享组件
+- 仅支持APP端
+
+---$
+
+### 代码演示
+#### 基础用法
+```html
+<template>
+	<ste-app-share :open="open" @close="open = false" :data="data" :poster="poster" :miniProgram="miniProgram"></ste-app-share>
+</template>
+<script>
+let num = 0;
+export default {
+	data() {
+		return {
+			open: false,
+			poster: {
+				qrcode: 'https://image.whzb.com/chain/StellarUI/头像/邻里购.png',
+				background: '#ffffff',
+				title: '推荐一个宝贝给你，快来看看吧~',
+				message: '请及时购买，价格具有时效性',
+			},
+			data: {
+				price: '100.00',
+				image: 'https://image.whzb.com/chain/image/1c/1cd2/1cd27514a2516b146e317fa3b538f4f4/6976279890175-1.jpg',
+				name: '中百福嘉白干子 200g/份',
+				desc: '豆香浓郁|家常百搭',
+			},
+			miniProgram: {
+				id: 'gh_c9b7b9786694',
+				path: 'pages/tabbar/tabbar',
+				type: 0,
+				webUrl: 'https://image.whzb.com/chain/StellarUI/头像/邻里购.png',
+			},
+		};
+	},
+	methods: {
+		headOpen() {
+			if (num % 2 === 0) {
+				this.data.image = 'https://image.whzb.com/chain/image/1c/1cd2/1cd27514a2516b146e317fa3b538f4f4/6976279890175-1.jpg';
+			} else {
+				this.data.image = 'https://image.whzb.com/chain/StellarUI/image/test.jpg';
+			}
+			num++;
+			this.open = true;
+		},
+	},
+};
+</script>
+```
+
+---$
+### API
+
+| 属性名				| 说明					| 类型						| 默认值																																																								| 可选值	| 支持版本	|
+| -----					| -----				| ---						| -------																																																							| ------| --------|
+| `open`				| 打开分享			| `boolean`			| `false`																																																							| -			| -				|
+| `viewPoster`	| 是否显示海报	| `boolean`			| `true`																																																							| -			| -				|
+| `poster`			| 海报参数			| `Poster`			| `{ background: '#ffffff', title: '推荐一个宝贝给你，快来看看吧~', message: '请及时购买，价格具有时效性', qrcode: '' }`	| -			| -				|
+| `miniProgram`	| 小程序参数		| `MiniProgram`	| `{ id: '', path: '', type: 0, webUrl: '' }`																																					| -			| -				|
+| `data`				| 分享数据			| `Data`				| `{ price: '', image: '', name: '', desc: '' }`																																			| -			| -				|
+
+#### Poster 海报参数
+| 属性名			| 说明			| 类型			| 默认值													| 可选值	| 支持版本	|
+| -----				| -----		| ---			| -------												| ------| --------|
+| `background`| 背景色		| `string`| `#ffffff`											| -			| -				|
+| `title`			| 顶部标题	| `string`| `推荐一个宝贝给你，快来看看吧~`	| -			| -				|
+| `message`		| 底部提示	| `string`| `请及时购买，价格具有时效性`		| -			| -				|
+| `qrcode`		| 二维码		| `string`| -															| -			| -				|
+
+#### MiniProgram 小程序参数
+| 属性名	| 说明																																	| 类型			| 默认值		| 可选值	| 支持版本	|
+| -----		| -----																																| ---			| -------	| ------| --------|
+| `id`		| 微信小程序原始id																											| `string`| -				| -			| -				|
+| `path`	| 点击链接进入的页面																										| `string`| -				| -			| -				|
+| `type`	| 微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0	| `string`| `0`			| -			| -				|
+| `webUrl`| 兼容低版本的网页链接																									| `string`| -				| -			| -				|
+
+#### Data 分享数据
+| 属性名	| 说明			| 类型			| 默认值		| 可选值	| 支持版本	|
+| -----		| -----		| ---			| -------	| ------| --------|
+| `price`	| 价格			| `string`| -				| -			| -				|
+| `image`	| 图片链接	| `string`| -				| -			| -				|
+| `name`	| 商品名称	| `string`| -				| -			| -				|
+| `desc`	| 商品描述	| `string`| -				| -			| -				|
+
+---$
+{{xuyajun}}

package/components/ste-app-share/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "业务组件",
+    "title": "AppShare 分享",
+    "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/countTo.png"
+}

package/components/ste-app-share/draw.js

@@ -0,0 +1,85 @@
+async function getImage(src) {
+	const image = await uni.getImageInfo({ src: src });
+	if (Array.isArray(image)) {
+		const [e, img] = image;
+		if (e) throw e;
+		return img;
+	} else if (image.path) {
+		return image;
+	}
+	throw new Error('获取图片失败');
+}
+
+/**
+ * @param {UniApp.CanvasContext} ctx
+ * @param {{background:string;title:string;message:string;qrcode:string}} poster
+ * @param {{page: string;image: string;name: string;desc: string;price:string}} data
+ */
+export function drawPoster(ctx, poster, data) {
+	return new Promise(async (resolve, reject) => {
+		const { width, height } = ctx;
+		// 清空
+		ctx.clearRect(0, 0, width, height);
+		// 绘制白色背景
+		ctx.setFillStyle(poster.background || '#ffffff');
+		ctx.fillRect(0, 0, width, height);
+		// 居中绘制标题
+		if (poster.title) {
+			ctx.setFontSize(14);
+			ctx.setFillStyle('#333333');
+			ctx.setTextAlign('center');
+			ctx.fillText(poster.title, width / 2, 30);
+		}
+		// 绘制宽高一致的图片
+		if (data.image) {
+			try {
+				const image = await getImage(data.image);
+				ctx.drawImage(image.path, 0, 40, width, width);
+			} catch (e) {
+				console.error(e);
+			}
+		}
+		// 绘制加粗文本name
+		if (data.name) {
+			ctx.setFontSize(16);
+			ctx.setFillStyle('#333333');
+			ctx.setTextAlign('left');
+			ctx.fillText(data.name, 10, width + 80);
+		}
+		// 绘制message
+		if (data.desc) {
+			ctx.setFontSize(14);
+			ctx.setFillStyle('#666666');
+			ctx.setTextAlign('left');
+			ctx.fillText(data.desc, 10, width + 100);
+		}
+		// 绘制价格
+		if (data.price) {
+			ctx.setFontSize(20);
+			ctx.setFillStyle('#ff0000');
+			ctx.setTextAlign('left');
+			ctx.fillText(`￥${data.price}`, 10, width + 130);
+		}
+
+		// 绘制文字
+		if (poster.message) {
+			ctx.setFontSize(12);
+			ctx.setFillStyle('#666666');
+			ctx.setTextAlign('left');
+			ctx.fillText(poster.message, 10, height - 25);
+		}
+		// 绘制qrcode
+		if (poster.qrcode) {
+			try {
+				const qrcode = await getImage(poster.qrcode);
+				ctx.drawImage(qrcode.path, width - 80, width + 80, 70, 70);
+			} catch (e) {
+				console.error(e);
+			}
+		}
+		// 绘制完成
+		ctx.draw(false, () => {
+			resolve();
+		});
+	});
+}

package/components/ste-app-share/share.js

@@ -0,0 +1,40 @@
+/**
+ * @param {'WXSceneSession' | 'WXSceneTimeline' | 'WXSceneFavorite'} scene
+ * @param {{id: string;path: string;type: number;webUrl: string}} miniProgram
+ * @param {{page: string;image: string;name: string;desc: string;price:string}} data
+ */
+export const share = (scene, miniProgram, data) => {
+	return new Promise((resolve, reject) => {
+		uni.downloadFile({
+			url: data.image,
+			success: (res) => {
+				console.log('imageUrl===', res.tempFilePath);
+				const options = {
+					provider: 'weixin',
+					scene,
+					type: 5,
+					miniProgram: Object.assign({ type: 0, webUrl: res.tempFilePath }, miniProgram),
+					imageUrl: res.tempFilePath,
+					title: data.name,
+					summary: `${data.name} #${data.desc}`,
+				};
+				console.log('options====', options);
+				uni.share({
+					...options,
+					success: (res) => {
+						console.log('分享成功', res);
+						resolve(res);
+					},
+					fail: (err) => {
+						console.log('分享失败', err);
+						reject(err);
+					},
+				});
+			},
+			fail: (err) => {
+				console.log('下载失败', err);
+				reject(err);
+			},
+		});
+	});
+};

package/components/ste-app-share/ste-app-share.vue

@@ -0,0 +1,270 @@
+<template>
+	<!-- 分享弹窗 -->
+	<view class="ste-share-root" :class="{ open: dataOpen }">
+		<view class="content-box" :style="{ opacity: viewPoster ? 1 : 0 }">
+			<view class="loading" v-if="loading"></view>
+			<canvas id="content-poster" canvas-id="content-poster" />
+		</view>
+		<view class="footer-box">
+			<view class="footer-head">
+				<view class="footer-head-item"></view>
+				<view>分享到</view>
+				<view class="footer-head-item" @click="close">×</view>
+			</view>
+			<scroll-view class="footer-scroll-view" scroll-x="true">
+				<view class="footer-share-list">
+					<view class="footer-item" @click="handShare('WXSceneSession')">
+						<image class="footer-icon" src="../../static/weixin.png" mode="widthFix"></image>
+						<text>微信好友</text>
+					</view>
+					<view class="footer-item" @click="handShare('WXSceneTimeline')">
+						<image class="footer-icon" src="../../static/wxpyq.png" mode="widthFix"></image>
+						<text>朋友圈</text>
+					</view>
+					<view class="footer-item" @click="handShare('WXSceneFavorite')">
+						<image class="footer-icon" src="../../static/shoucang.png" mode="widthFix"></image>
+						<text>微信收藏</text>
+					</view>
+					<view class="footer-item" @click="downloadPoster" v-if="viewPoster">
+						<image class="footer-icon" src="../../static/haibao.png" mode="widthFix"></image>
+						<text>生成海报</text>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { copyFileToPublicDir, drawPoster } from './draw';
+import { share } from './share';
+
+export default {
+	name: 'ste-app-share',
+	group: '业务组件',
+	title: 'AppShare 分享',
+	props: {
+		open: {
+			type: Boolean,
+			default: false,
+		},
+		/** 显示海报 */
+		viewPoster: {
+			type: Boolean,
+			default: true,
+		},
+		/** 海报参数 */
+		poster: {
+			type: Object,
+			default: () => ({ background: '#ffffff', title: '推荐一个宝贝给你，快来看看吧~', message: '请及时购买，价格具有时效性', qrcode: '' }),
+		},
+		/** 小程序参数  */
+		miniProgram: {
+			type: Object,
+			default: () => ({ id: '', path: '', type: 0, webUrl: '' }),
+		},
+		/** 分享数据 */
+		data: {
+			type: Object,
+			default: () => ({ price: '', image: '', name: '', desc: '' }),
+		},
+	},
+	data() {
+		return {
+			dataOpen: false,
+			loading: false,
+			ctx: null,
+			canvas: null,
+		};
+	},
+	watch: {
+		open: {
+			handler(val) {
+				this.dataOpen = val;
+				if (val) {
+					this.draw();
+				}
+			},
+			immediate: true,
+		},
+	},
+	mounted() {},
+	methods: {
+		close() {
+			this.dataOpen = false;
+			this.$emit('close', false);
+		},
+		handShare(scene) {
+			// #ifndef APP
+			uni.showToast({ title: '暂不支持', icon: 'none', duration: 2000 });
+			// #endif
+			// #ifdef APP
+			share(scene, this.miniProgram, this.data);
+			// #endif
+		},
+		draw() {
+			if (!this.viewPoster) return;
+			this.loading = true;
+			if (!this.ctx) {
+				this.ctx = uni.createCanvasContext('content-poster', this);
+				const query = uni.createSelectorQuery().in(this);
+				this.canvas = query
+					.select('#content-poster')
+					.boundingClientRect((canvas) => {
+						this.ctx.width = canvas.width;
+						this.ctx.height = canvas.height;
+
+						drawPoster(this.ctx, this.poster, this.data).finally(() => {
+							this.loading = false;
+						});
+					})
+					.exec();
+			} else {
+				drawPoster(this.ctx, this.poster, this.data).finally(() => {
+					this.loading = false;
+				});
+			}
+		},
+		downloadPoster() {
+			uni.canvasToTempFilePath({
+				canvasId: 'content-poster',
+				success: ({ tempFilePath }) => {
+					uni.saveImageToPhotosAlbum({
+						filePath: tempFilePath,
+						success: () => {
+							uni.showToast({ title: '保存成功', icon: 'success', duration: 2000 });
+						},
+						fail: (err) => {
+							uni.showToast({ title: '保存失败', icon: 'none', duration: 2000 });
+						},
+					});
+				},
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+.ste-share-root {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 9999;
+	background-color: rgba(0, 0, 0, 0.5);
+	opacity: 0;
+	pointer-events: none;
+	transition: all 0.3s;
+	&.open {
+		opacity: 1;
+		pointer-events: auto;
+	}
+	.content-box {
+		position: absolute;
+		width: 660rpx;
+		height: 960rpx;
+		top: 90rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 9;
+		border-radius: 12px;
+		overflow: hidden;
+		#content-poster {
+			width: 100%;
+			height: 100%;
+		}
+		.loading {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: 10;
+			background-color: #fff;
+			&::after {
+				content: '加载中...';
+				position: absolute;
+				width: 100%;
+				top: calc(50% + 20px);
+				font-size: 12px;
+				color: #999;
+				text-align: center;
+				line-height: 40px;
+			}
+			&::before {
+				content: '';
+				position: absolute;
+				width: 40px;
+				height: 40px;
+				top: calc(50%);
+				left: calc(50%);
+				border-radius: 50%;
+				border: 4px solid #f3f3f3;
+				border-top-color: #999;
+				animation: loading 1s infinite linear;
+			}
+		}
+	}
+	.footer-box {
+		width: 100%;
+		background-color: #fff;
+		position: absolute;
+		bottom: 0;
+		z-index: 10;
+		border-radius: 15px 15px 0 0;
+		overflow: hidden;
+		.footer-head {
+			width: 100%;
+			height: 44px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.footer-head-item {
+				font-size: 20px;
+				width: 44px;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+		.footer-scroll-view {
+			width: 100%;
+			height: 75px;
+		}
+		.footer-share-list {
+			white-space: nowrap;
+			padding: 0 15px 15px 15px;
+			display: flex;
+			align-items: flex-start;
+
+			.footer-item {
+				width: 60px;
+				height: 60px;
+				display: inline-flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				font-size: 12px;
+				line-height: 30px;
+				& + .footer-item {
+					margin-left: 10px;
+				}
+				.footer-icon {
+					width: 30px;
+					height: 30px;
+				}
+			}
+		}
+	}
+}
+
+@keyframes loading {
+	0% {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+	100% {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}
+</style>

package/components/ste-app-update/README.md

@@ -1,6 +1,7 @@
 # AppUpdate App更新
 
-此组件用于APP更新功能
+- 此组件用于APP更新功能
+- 仅支持APP端
 
 ---$
 
@@ -9,8 +10,8 @@
 - 属性`clientId`用于设置APP的应用编码
 - 属性`clientSecret`用于设置APP的应用密钥
 - 函数`start`用于开始检查更新
-- 回调事`cancel`取消更新
-- 回调事`complete`取消，成功更新都会执行
+- 回调事件`cancel`取消更新
+- 回调事件`complete`取消，成功更新都会执行
 
 ```html
 <script>

package/components/ste-index-list/README.md

@@ -111,12 +111,12 @@ methods: {
 
 #### IndexList Props
 
-| 属性名			| 说明											|类型				|默认值		|可选值	| 支持版本	|
-| ---				|---											| ---				| ---		| ---	| ---		|
-| `active`			| 当前激活的索引下标，支持sync双向绑定，默认值0		| `Number`			| `0`		| -		| -			|
-| `height`			| 高度，默认值100%								| `String`/`Number`	| `"100%"`	| -		| -			|
-| `sticky`			| `title`是否粘性布局，自定义`title`插槽时不生效	| `Boolean`			| `true`	| -		| -			|
-| `inactiveColor`	| 右边锚点状态非激活时的颜色						| `String`			| `#666666`	| -		| -			|
+| 属性名			| 说明											|类型				|默认值		|可选值	| 支持版本	|
+| ---				|---											| ---				| ---		| ---	| ---		|
+| `active`			| 当前激活的索引下标，支持sync双向绑定，默认值0		| `Number`			| `0`		| -		| -			|
+| `height`			| 高度，默认值100%								| `String`/`Number`	| `"100%"`	| -		| -			|
+| `sticky`			| `title`是否粘性布局，自定义`title`插槽时不生效	| `Boolean`			| `true`	| -		| -			|
+| `inactiveColor`	| 右边锚点状态非激活时的颜色						| `String`			| `#666666`	| -		| -			|
 | `activeColor`		| 右边锚点状态激活时的颜色							| `String`			| `#0090FF`	| -		| -			|
 
 #### IndexList Events