mp-ui-user/pages/share/index.vue

<template>
	<view>
		<u-navbar title="分享" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />

		<view class="flex invitation">
			<view class="flex invitation-user">
				<image src="../../static/bg/share_bg.png" mode="aspectFit"></image>
				<view class="title">盲票</view>
				<image class="avatar" :src="avatar" mode=""></image>
			</view>
			<view class="invitation-name">{{ userInfo.nickName }}</view>
			<view class="invitation-name-tip">邀请您一起来刮盲票</view>
			<view class="flex invitation-code">
				<image :src="codeUrl" mode="aspectFill"></image>
			</view>
			<view class="invitation-code-tip">长按识别二维码</view>
			<view class="invitation-bottom-tip">盲票,玩的就是有趣</view>
		</view>
		<view class="flex btn">
			<button type="default" open-type="share">分享链接给好友</button>
			<button type="default" @click="saveImg">保存海报</button>
		</view>

		<share-code ref="shareCode" :posterData.sync="posterData" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import ShareCode from "../../components/share-code/share-code.vue"
	export default {
		components: {
			ShareCode
		},
		data() {
			return {
				codeUrl: '',
				userInfo: {},
				avatar: '',
				boxId: '',
				// 图片数据
				posterData: {
					poster: {
						//根据屏幕大小自动生成图片背景大小
						url: "https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/mp.png", //图片地址
						r: 15, //圆角半径
						w: 340, //图片宽度
						h: 447, //图片高度
						p: 20 //图片内边距padding
					},
					mainImg: {
						// 头像
						url: "", //图片地址
						r: 33, //圆角半径
						w: 66, //宽度
						h: 66, //高度
						mt: 40
					},
					title: {
						// 昵称
						text: "", //文本
						fontSize: 26, //字体大小
						color: "#4F4F4F", //颜色
						lineHeight: 37, //行高#4F4F4F 100%
						mt: 30, //margin-top
						w: 300,
						align: "center"
					},
					codeImg: {
						// 小程序码
						url: "", //图片地址
						w: 124, //宽度
						h: 124, //高度
						mt: 20, //margin-top
						r: 62, //圆角半径
						mt: 55
					},
					tips: [

					]
				}
			};
		},

		onLoad(options) {
			this.boxId = options.boxId
		},

		onShow() {
			this.getUrl()
			this.getBaseInfo()
		},
		methods: {
			getBaseInfo() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/getLoginUserinfo', {}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						console.log(res);
						this.userInfo = res.data
						this.avatar = this.posterData.mainImg.url = env.filePublic + res.data.avatar
						this.posterData.title.text = res.data.nickName
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			getUrl() {
				$http.post('/api/v1/mp/user/share/code/generate', {
					boxId: this.boxId,
					type: "1"
				}).then(res => {
					this.codeUrl = this.posterData.codeImg.url = env.filePublic + res.data
				})
			},

			saveImg() {
				this.$refs.shareCode.posterShow()
			},
		},

		onShareAppMessage(res) {
			return {
				title: '分享盲票',
				path: `/pages/ticketBox/detail?boxId=${ this.boxId }&userId=${ this.userInfo.userId }&type=1`,
				type: 2,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invitation {
		flex-direction: column;
		margin: 50rpx 30rpx;
		padding: 0 0 80rpx;
		border: 1px solid rgba(236, 236, 236, 100);
		border-radius: 20rpx;
		background-color: #FFFFFF;

		&-user {
			position: relative;
			width: 100%;
			margin-bottom: 80rpx;

			image {
				width: 100%;
				height: 188rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}

			.title {
				position: absolute;
				font-size: 52rpx;
				color: #FFFFFF;
				top: 20rpx;
			}

			.avatar {
				position: absolute;
				width: 134rpx;
				height: 134rpx;
				border-radius: 50%;
				top: 120rpx;
			}
		}

		.invitation-name {
			font-size: 52rpx;
			margin-bottom: 40rpx;
		}

		.invitation-name-tip {
			font-size: 36rpx;
			color: rgba(134, 134, 134, 100);
			margin-bottom: 20rpx;
		}

		.invitation-code {
			image {
				width: 250rpx;
				height: 250rpx;
				margin-bottom: 20rpx;
			}
		}

		.invitation-code-tip {
			font-size: 34rpx;
			color: rgba(181, 181, 181, 100);
			margin-bottom: 60rpx;
		}

		.invitation-bottom-tip {
			font-size: 28rpx;
		}
	}

	.tip {
		text-align: center;
	}

	.btn {
		padding: 40rpx 20rpx;

		.ge {
			height: 40rpx;
		}

		/deep/ button {
			line-height: 60rpx;
			font-size: 28rpx;
			height: 60rpx;
			color: #fff;
			background-color: $uni-bg-color;
			border: none;
			border-radius: 8rpx;
		}
	}
</style>