fhxnuser_uniapp_fudai_video_01/pages_course/appDownload.vue

<template>
	<view class="container">
		<view class="method-section">
			<view class="method-title">下载方式一</view>
			<view class="method-desc">
				点击下方“复制链接”按钮，将链接粘贴到手机浏览器搜索栏中，即可快速打开下载页。
			</view>
			<view class="copy-btn-box" v-if="os=='ios'||os=='android'">
				<button class="copy-btn" @click="copyLink">复制链接</button>
			</view>
			<view class="copy-btn-box" v-else>
				<button class="copy-btn" style="margin:24rpx" @click="copyLink(1)">复制安卓下载链接</button>
				<button class="copy-btn" style="margin:24rpx" @click="copyLink(2)">复制苹果下载链接</button>
			</view>
		</view>

		<view class="method-section">
			<view class="method-title">下载方式二</view>
			<view class="method-desc">
				在手机“应用商店”中搜索“芳华未来”，找到应用后点击安装即可，操作如下图。
			</view>
			<image v-if="os!='ios'" class="img" src="https://cdn.his.cdwjyyh.com/minapp/course/android_app.jpg" mode="widthFix"></image>
			<image v-if="os!='android'" class="img" src="https://cdn.his.cdwjyyh.com/minapp/course/ios_app.jpg" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				os: ''
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res)=>{
					this.os = res.osName
				}
			});
		},
		methods: {
			copyLink(type) {
				const systemInfo = uni.getSystemInfoSync()
				let url = ''
				if(systemInfo.osName=='ios') {
					url= "https://a.app.qq.com/o/simple.jsp?pkgname=com.mytek.rtlive"
				}else if(systemInfo.osName=='android') {
					url= "https://m.malink.cn/s/2UZjMz"
				} else {
					url = type == 1 ? "https://m.malink.cn/s/2UZjMz":"https://a.app.qq.com/o/simple.jsp?pkgname=com.mytek.rtlive"
				}
				uni.setClipboardData({
					data: url,
					success: function () {
						uni.showToast({
							title: '链接已复制',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style scoped>
	.container {
		padding: 40rpx;
	}
	.method-section {
		margin-bottom: 60rpx;
	}
	.method-title {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 20rpx;
		font-weight: 500;
	}
	.method-desc {
		font-size: 30rpx;
		color: #333;
		line-height: 1.6;
		margin-bottom: 30rpx;
	}
	.copy-btn-box {
		display: flex;
		justify-content: center;
	}
	.copy-btn {
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ff512f;
		color: #fff;
		font-size: 30rpx;
		border-radius: 40rpx;
		border: none;
	}
	.copy-btn::after {
		border: none;
	}
	.img {
		width: 100%;
		display: block;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
</style>