questionnaire/pages/success/success.vue

<template>
	<view class="page">
		<image class="sucLogo" src="../../static/image/successlogo.png" mode="widthFix"></image>
		<view class="text1">
			您的调查问卷已提交成功
		</view>
		<view class="text2">
			客服会尽快联系您！
		</view>
		<view class="text3">
			客服电话：<text @tap="callPhone(pageData.phone)">{{ pageData.phone }}</text>
		</view>


		<view class="shareBtn" @tap="open('sharePopup')">
			<text>转发</text>
		</view>



		<uni-popup ref="sharePopup" type="bottom">
			<view class="shareBox">
				<view class="btnBoxs">
					<view class="items">
						<button class="items" type="default" open-type="share">
							<text>小程序</text>
							<text>分享</text>
						</button>
					</view>
					<view class="items" @tap="openImg">
						<text>二维码</text>
						<text>分享</text>
					</view>
				</view>


				<view class="shareBtns" @tap="close('sharePopup')">
					关闭
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				pageData: {}, //
			};
		},

		onShareAppMessage() {
			return {
				title: this.pageData.shareTitle,
				path: `/pages/questionnaire/questionnaire?id=${this.id}&type=share`,
				imageUrl: this.pageData.shareLogo,
			};
		},

		onLoad(option) {
			if (option.id) this.id = option.id
			
			this.backframesurveycusList()
		},

		methods: {
			
			// 详情
			backframesurveycusList() {
				this.$request.get(this.$apiUrls.backframesurveycusList, {
					id: this.id
				}).then(res => {
					console.log(res)
					this.pageData = res.data
				})
			},
			// 弹窗开启
			open(inParams) {
				this.$refs[inParams].open()
			},

			// 弹窗关闭
			close(inParams) {
				this.$refs[inParams].close()
			},

			openImg() {
				uni.previewImage({
					urls: [this.pageData.qrCode],
				})
			},
			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		z-index: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFFFFF;

		.sucLogo {
			margin: 200rpx 0 24rpx;
			width: 240rpx;
		}

		.text1 {
			font-size: 36rpx;
			font-weight: 600;
			color: #000000;
			line-height: 50rpx;
		}

		.text2 {
			margin: 24rpx 0 0 0;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
		}

		.text3 {
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
		}


		.shareBtn {
			position: fixed;
			bottom: 258rpx;
			right: 30rpx;
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			background: linear-gradient(180deg, #3D78F6 0%, #336CE6 100%);
			box-shadow: 0 4rpx 8rpx 0 rgba(61, 120, 246, 0.5);
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.shareBox {
			width: 100%;
			height: 424rpx;
			background: #F9F9F9;
			border-radius: 16rpx 16rpx 1px 1px;

			.btnBoxs {
				padding: 60rpx 0;
				width: 100%;
				display: flex;
				justify-content: center;

				.items {
					margin: 0 80rpx;
					width: 160rpx;
					height: 160rpx;
					background: linear-gradient(180deg, #3D78F6 0%, #336CE6 100%);
					box-shadow: 0 4rpx 8rpx 0 rgba(61, 120, 246, 0.5);
					border-radius: 50%;
					display: inline-flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 42rpx;
				}
			}

			.shareBtns {
				margin: 0 auto;
				width: 670rpx;
				height: 120rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
				text-align: center;
				line-height: 120rpx;
			}
		}

	}
</style>