eud-gk-share/pages/result/result.vue

<template>
	<view class="result">
		<view class="desc">使用操作视频</view>
		<view class="video">
			<video id="myVideo" src="https://resources.delesson.cn/operate.mp4" controls></video>
		</view>
		<view class="bless">
			<image src="../../static/bless.png" mode="aspectFit"></image>
		</view>
		<view class="diannao">
			<view class="text">电脑端</view>
			<image class="maozi" src="../../static/maozi.png" mode="aspectFit"></image>
			<view class="piece">
				<view @click="copy" class="url">www.dlxgk.com</view>
				<view class="rubric">请前往德立信志愿官网使用</view>
			</view>
		</view>
		<view class="diannao xiaochengxu">
			<view class="text">小程序</view>
			<image class="zhi" src="../../static/zhi.png" mode="aspectFit"></image>
			<view class="piece">
				<image :show-menu-by-longpress="true" class="code" src="../../static/code.jpg" mode="aspectFit"
					@click="previewImage"></image>
				<view class="rubric">长按识别二维码，前往微信小程序</view>
			</view>
		</view>
		<view class="diannao downloadApp">
			<view class="text">下载app</view>
			<image src="../../static/shu.png" class="shu" mode="aspectFit"></image>
			<view class="piece">
				<image :show-menu-by-longpress="true" class="code" src="../../static/code.jpg" mode="aspectFit"
					@click="previewImage"></image>
				<view class="rubric" >长按识别二维码，下载APP</view>
			</view>
		</view>
		<view class="bless-text">
			<view>高分不滑档，低分有选择!</view>
			<view>德立信志愿祝您金榜题名!</view>
		</view>
	</view>
	<uni-popup ref="message" type="dialog">
		<uni-popup-dialog type="info" before-close cancelText="取消" confirmText="复制" :title="title"
			@confirm="dialogConfirm" @close="message.close()">
			<view>
				<view>账号：{{myAccount}}</view>
				<view>密码：123456</view>
			</view>
		</uni-popup-dialog>
	</uni-popup>
</template>

<script lang="ts" setup>
	import { computed, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const accountList = ref([
		{
			"value": "11",
			"text": "北京市",
			account: 16666666026
		},
		{
			"value": "12",
			"text": "天津市",
			account: 16666666027
		},
		{
			"value": "13",
			"text": "河北省",
			account: 16666666099
		},
		{
			"value": "14",
			"text": "山西省",
			account: 16666666098
		},
		{
			"value": "15",
			"text": "内蒙古",
			account: 16666666023
		},
		{
			"value": "21",
			"text": "辽宁省",
			account: 16666666097
		},
		{
			"value": "22",
			"text": "吉林省",
			account: 16666666096
		},
		{
			"value": "23",
			"text": "黑龙江",
			account: 16666666005
		},
		{
			"value": "31",
			"text": "上海市",
			account: 16666666028
		},
		{
			"value": "32",
			"text": "江苏省",
			account: 16666666006
		},
		{
			"value": "33",
			"text": "浙江省",
			account: 16666666007
		},
		{
			"value": "34",
			"text": "安徽省",
			account: 16666666008
		},
		{
			"value": "35",
			"text": "福建省",
			account: 16666666009
		},
		{
			"value": "36",
			"text": "江西省",
			account: 16666666010
		},
		{
			"value": "37",
			"text": "山东省",
			account: 16666666011
		},
		{
			"value": "41",
			"text": "河南省",
			account: 16666666012
		},
		{
			"value": "42",
			"text": "湖北省",
			account: 16666666013
		},
		{
			"value": "43",
			"text": "湖南省",
			account: 16666666014
		},
		{
			"value": "44",
			"text": "广东省",
			account: 16666666015
		},
		{
			"value": "45",
			"text": "广西省",
			account: 16666666094
		},
		{
			"value": "46",
			"text": "海南省",
			account: 16666666016
		},
		{
			"value": "50",
			"text": "重庆市",
			account: 16666666029
		},
		{
			"value": "51",
			"text": "四川省",
			account: 16666666017
		},
		{
			"value": "52",
			"text": "贵州省",
			account: 16666666018
		},
		{
			"value": "53",
			"text": "云南省",
			account: 16666666019
		},
		{
			"value": "61",
			"text": "陕西省",
			account: 16666666020
		},
		{
			"value": "62",
			"text": "甘肃省",
			account: 16666666021
		},
		{
			"value": "63",
			"text": "青海省",
			account: 16666666022
		},
		{
			"value": "64",
			"text": "宁夏",
			account: 16666666025
		},
		{
			"value": "65",
			"text": "新疆",
			account: 16666666028
		}
	])
	const copy = () => {
		uni.setClipboardData({
			data: 'https://www.dlxgk.com',
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		});
	}
	const dialogConfirm = () => {
		uni.setClipboardData({
			data: `账号：${myAccount.value} 密码：123456`,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		})
		message.value.close()
	}
	const previewImage = (e) => {
		uni.previewImage({
			urls: ['/static/code.jpg'],
			indicator: 'default',
			loop: false,
		});
	}
	const message = ref()
	const provinceCode = ref()
	const title = computed(() => {
		const str = accountList.value.find(item => item.value == provinceCode.value)?.text?.replace('省', '')?.replace('市', '')
		return str + '试用账号'
	})
	const myAccount = computed(() => {
		return accountList.value.find(item => item.value == provinceCode.value)?.account
	})
	onLoad((options) => {
		provinceCode.value = options.provinceCode
	})
</script>

<style lang="scss" scoped>
	.result {
		background: url('../../static/newbejing.png') no-repeat;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;

		.desc {
			font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
			font-weight: bold;
			font-size: 20px;
			color: #FFFFFF;
			line-height: 23px;
			letter-spacing: 4px;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding: 30rpx 0;
			text-align: center;
		}

		.video {
			width: 80%;
			height: 400rpx;
			background: url('../../static/videokuang.png') no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			video {
				width: 100%;
				height: 100%;
				border-radius: 5rpx;
			}
		}

		.bless {
			width: 80%;
			height: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 20rpx;

			image {
				width: 100%;
				height: 300rpx;
			}
		}

		.diannao {
			background: url('../../static/beijingkuang.png') no-repeat;
			background-size: 100% 100%;
			width: 80%;
			height: 300rpx;
			margin: 0 auto 20rpx;
			position: relative;

			.text {
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 16px;
				color: #FFFFFF;
				height: 92rpx;
				line-height: 92rpx;
				letter-spacing: 3px;
				text-align: left;
				font-style: normal;
				text-transform: none;
				text-align: center;
			}

			.maozi {
				width: 208rpx;
				height: 96rpx;
				position: absolute;
				right: -50rpx;
				top: 10rpx;
			}

			.shu {
				width: 114rpx;
				height: 82rpx;
				position: absolute;
				right: -40rpx;
				top: 20rpx;
			}

			.piece {
				position: absolute;
				top: 60%;
				left: 0;
				transform: translateY(-50%);
				width: 100%;
				text-align: center;

				.url {
					font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
					font-weight: bold;
					font-size: 56rpx;
					color: #1A7DF1;
					line-height: 66rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					text-align: center;
					margin-bottom: 20rpx;
				}

				.rubric {
					font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
					font-weight: bold;
					font-size: 28rpx;
					color: #1A7DF1;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					text-align: center;
				}

				.advert {
					font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
					font-weight: bold;
					font-size: 24rpx;
					color: #1A7DF1;
					line-height: 36rpx;
					letter-spacing: 1px;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin: 0 32rpx 20rpx;
				}

				.receive {
					width: 80%;
					height: 62rpx;
					margin: 0 auto;
					background: #1A7DF1;
					border-radius: 64rpx;
					text-align: center;
					line-height: 62rpx;
					font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					letter-spacing: 3px;
					font-style: normal;
					text-transform: none;
				}
			}
		}

		.xiaochengxu,.downloadApp {
			.zhi {
				width: 122rpx;
				height: 98rpx;
				position: absolute;
				left: -50rpx;
				top: 10rpx;
			}

			.piece {
				.code {
					width: 136rpx;
					height: 136rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.bless-text {
			padding-bottom: 42rpx;
			font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
			font-weight: bold;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 47rpx;
			letter-spacing: 4px;
			text-shadow: 0px 4px 8px #1A7DF1;
			text-align: center;
			font-style: normal;
			text-transform: none;
			padding-top: 20rpx;

			view {
				margin-bottom: 20rpx;
			}
		}
	}
</style>