ChuangHengWx/pagesPublish/publishResult.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='发布结果'></cus-header>
		<view class="xcx">
			<view class="box">
				<view class="box-title">{{title}}</view>
				<view class="box-fill">
					<view class="box-fill-bottom adfacjb">
						<view class="box-fill-bottom-left adfac">
							<image :src="imgBase+'publish_result_avatar.png'"></image>
							<text>邀请填写</text>
						</view>
						<view class="box-fill-bottom-right">进入</view>
					</view>
				</view>
				<view class="box-bottom adfac">
					<image :src="imgBase+'publish_result_xcx.png'"></image>
					<text>小程序</text>		
				</view>
			</view>
		</view>
		<view class="share">
			<view class="share-title">分享到</view>
			<view class="share-menu adf">
				<view class="share-menu-pre adffcac">
					<button class="share-btn" open-type="share">
						<image :src="imgBase+'publish_result_wx.png'"></image>
						<text>微信好友</text>
					</button>
				</view>
				<view class="share-menu-pre adffcac" @click="copyLink">
					<image :src="imgBase+'publish_result_copy.png'"></image>
					<text>复制链接</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				title:'',
				teamQuestionnaireId:''
			}
		},
		onShareTimeline() {
		    const sharerId = JSON.parse(uni.getStorageSync('userInfo')).id||'';
			return {
				title: this.title,
				query: `shareUserId=${sharerId}&shareTQId=${this.teamQuestionnaireId}&from=timeline&shareType=Questionnaire`,
				imageUrl: this.$imgBase+'share_fm.png'
			};
		},
		onShareAppMessage(res) {
		    const sharerId = JSON.parse(uni.getStorageSync('userInfo'))?.id||'';
		    return {
		      title: this.title,
		      path: `/pages/home?shareTQId=${this.teamQuestionnaireId}&shareUserId=${sharerId}&shareType=Questionnaire`,
			  imageUrl: this.$imgBase+'share_fm.png'
		    };
		},
		onLoad(options){
			this.title = options.title;
			this.teamQuestionnaireId = options.teamQuestionnaireId;
		},
		methods:{
			async copyLink(){
				let shareUserId = JSON.parse(uni.getStorageSync('userInfo')).id;
				let res = await this.$api.post('/wx/genInviteLink',{
					'path': '',
					'query': `shareTQId=${this.teamQuestionnaireId}&shareUserId=${shareUserId}&shareType=Questionnaire`,
					'env_version': 'trial'//默认"release"，正式版"release"，体验版"trial"，开发版"develop"
				});
				if(res.data.code!==0) return this.$showToast(res.data.msg)
				uni.setClipboardData({
					data:res.data.data.openlink,
					success: () => {
						this.$showToast('复制成功')
					},
					fail: () => {
						this.$showToast('复制失败')
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.share-btn {
		background-color: transparent;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&::after {
			border: none;
		}
	}

	.default_page{
		box-sizing: border-box;
		.xcx{
			padding: 70rpx 155rpx;
			.box{
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 40rpx 24rpx 18rpx;
				&-title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #002846;
					line-height: 32rpx;
				}
				&-fill{
					margin-top: 34rpx;
					width: 100%;
					height: 322rpx;
					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/publish_result_bg1.png') no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					padding: 0 5rpx 5rpx;
					&-bottom{
						width: 100%;
						height: 84rpx;
						background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/publish_result_bg2.png') no-repeat;
						background-size: 100% 100%;
						padding: 13rpx 16rpx;
						box-sizing: border-box;
						&-left{
							image{
								width: 56rpx;
								height: 56rpx;
							}
							text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #002846;
								line-height: 33rpx;
								margin-left: 12rpx;
							}
						}
						&-right{
							width: 86rpx;
							height: 42rpx;
							background: #33A7A7;
							border-radius: 10rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 42rpx;
							text-align: center;
							letter-spacing: 2rpx;
						}
					}
				}
				&-bottom{
					margin-top: 16rpx;
					border-top: 1rpx solid #EFEFEF;
					padding-top: 10rpx;
					image{
						width: 24rpx;
						height: 24rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #95A5B1;
						line-height: 20rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
		
		.share{
			flex: 1;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 40rpx 30rpx;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #002846;
				line-height: 42rpx;
				padding-left: 10rpx;
			}
			&-menu{
				flex-wrap: wrap;
				&-pre{
					width: calc(100% / 2);
					margin-top: 42rpx;
					image{
						width: 102rpx;
						height: 102rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #002846;
						line-height: 37rpx;
						text-align: center;
						margin-top: 24rpx;
					}
				}
			}
		}
	}
</style>