front/components/use-poster/use-poster.vue

<template>
	<view>
		<u-modal confirmText="关闭" ref="posterModal" :show="show" :title="title" :closeOnClickOverlay="true"
			@close="close" @confirm="close">
			<view class="slot-content">
				<u-poster @success="success" ref="posterRef" :palette="value" :width="width"></u-poster>

				<view class="flex1 btn-container dflex-b">
					<view class="btn btn-warn" @click.stop="save()">保存相册</view>
					<button open-type="share" class="btn btn-base" @click.stop="share()">分享好友</button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				title: '分享好友',
				width: 255,
				value: {},
				file:'',
			}
		},

		methods: {
			close() {
				this.show = false;
			},
			save() {
				if (this.Dever.env == 2) {
					const link = document.createElement('a')
					link.href = this.file
					link.download = 'share.png'
					link.click()
					uni.showToast({
						title: '已保存到相册',
						icon: 'none'
					})
				} else if (this.Dever.env == 3) {
					uni.showToast({
						title: '请长按保存到相册',
						icon: 'none'
					})
				} else {
					uni.saveImageToPhotosAlbum({
						filePath: this.file,
						success: () => {
							uni.showToast({
								title: '已保存到相册',
								icon: 'success'
							})
						},
						fail: (err) => {
							console.error('保存失败：', err)
							// 可能是没有权限
							uni.showModal({
								title: '提示',
								content: '请开启相册权限后重试',
								showCancel: false
							})
						}
					})
				}
			},

			share() {
				var share = {};
				share.path = this.fetch.path;
				share.name = this.fetch.name;
				share.pic = this.fetch.logo;
				this.$emit('setShare', share)
			},
			success(file) {
				this.file = file;
			},
			open(name, title, info, logo, avatar, pic, param) {
				if (!param) {
					param = {}
				}
				this.DeverApi.get(this, 'user.code', param, res => {
					this.show = true;
					var views = []
					this.fetch.name = title;
					this.fetch.logo = logo;
					views.push({
						"type": "rect",
						"style": {
							"width": "356px",
							"height": "473px",
							"top": "11px",
							"left": "8px",
							"background": "#fff",
							"borderRadius": "10px",
							"zindex": 1,
							"color": "#fff"
						}
					});
					views.push({
						"type": "image",
						"url": avatar,
						"style": {
							"width": "59px",
							"height": "59px",
							"top": "34px",
							"left": "42px",
							"borderColor": "transparent",
							"borderRadius": "50px",
							"zindex": 10,
							"borderWidth": "1px",
							"mode": "scaleToFill"
						}
					})

					if (pic) {
						views.push({
							"type": "image",
							"url": pic,
							"style": {
								"width": "277px",
								"height": "277px",
								"top": "108px",
								"left": "48px",
								"borderColor": "transparent",
								"borderRadius": "8px",
								"zindex": 10,
								"mode": "scaleToFill"
							}
						})
					} else {
						if (this.Dever.env == 5) {
							views.push({
								"type": "image",
								"url": res.qrcode,
								"style": {
									"width": "277px",
									"height": "277px",
									"top": "108px",
									"left": "48px",
									"borderColor": "transparent",
									"borderRadius": "8px",
									"zindex": 10,
									"mode": "scaleToFill"
								}
							})
						} else {
							views.push({
								"type": "qrcode",
								"content": res.link,
								"style": {
									"width": "277px",
									"height": "277px",
									"top": "108px",
									"left": "48px",
									"background": "#ffffff",
									"color": "#000000",
									"zindex": 10,
								}
							})
						}
					}
					views.push({
						"type": "text",
						"text": "长按或扫一扫加入",
						"style": {
							"width": "172px",
							"height": "23px",
							"top": "422px",
							"left": "110px",
							"background": "transparent",
							"borderColor": "transparent",
							"zindex": 11,
							"color": "#000000",
							"fontSize": "18px",
							"lineHeight": 1.16,
							"maxLines": "2",
							"fontFamily": "Arial"
						}
					});

					views.push({
						"type": "text",
						"text": name,
						"style": {
							"width": "213px",
							"height": "23px",
							"top": "41px",
							"left": "110px",
							"background": "transparent",
							"borderColor": "transparent",
							"zindex": 11,
							"color": "#000000",
							"fontSize": "18px",
							"lineHeight": 1.16,
							"maxLines": "2",
							"fontFamily": "Arial"
						}
					})

					views.push({
						"type": "text",
						"text": info,
						"style": {
							"width": "224px",
							"height": "23px",
							"top": "66px",
							"left": "110px",
							"background": "transparent",
							"borderColor": "transparent",
							"zindex": 11,
							"color": "#000000",
							"fontSize": "18px",
							"lineHeight": 1.16,
							"maxLines": "2",
							"fontFamily": "Arial"
						}
					})

					if (pic) {
						if (this.Dever.env == 5) {
							views.push({
								"type": "image",
								"url": res.qrcode,
								"style": {
									"width": "58px",
									"height": "58px",
									"top": "404px",
									"left": "286px",
									"background": "#ffffff",
									"color": "#000000",
									"zindex": 100
								}
							})
						} else {
							views.push({
								"type": "qrcode",
								"content": res.link,
								"style": {
									"width": "58px",
									"height": "58px",
									"top": "404px",
									"left": "286px",
									"background": "#ffffff",
									"color": "#000000",
									"zindex": 100
								}
							})
						}
					}
					this.value = {
						"width": "375px",
						"height": "500px",
						"background": "#fff",
						"views": views
					}
				});
			}
		}
	}
</script>

<style>
	.btn-container {
		margin-top: 20rpx;
		gap: 20rpx;
		/* 按钮之间留点间距 */
	}

	.btn {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 50rpx;
		/* 圆角胶囊效果 */
		font-size: 28rpx;
		font-weight: 600;
		color: #fff;
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.15);
		/* 阴影增强层次感 */
		transition: all 0.3s;
	}

	/* 悬停/点击时稍微缩小，增加交互感 */
	.btn:active {
		transform: scale(0.96);
		opacity: 0.9;
	}

	.btn-warn {
		background: linear-gradient(135deg, #ff7b47 0%, #ff4e50 100%);
	}

	.btn-base {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}
</style>