红包/app下载/分享新增优化

2025-01-08 11:25:33 +08:00
parent 8692626dd1
commit 3291a7573a
17 changed files with 815 additions and 322 deletions
--- a/pages/login/download.vue
+++ b/pages/login/download.vue
@@ -0,0 +1,174 @@
+<template>
+	<view class="containersView">
+		<div style="width: 100%;height: 85%;position: absolute;background: url('/static/download/appeq_bg.png') no-repeat center bottom / cover;"></div>
+
+		<view style="text-align: center;position: relative;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
+			<image style="width: 124rpx;height: 124rpx;margin-top: -920rpx;border-radius:20upx;" src="/static/download/appLogo.png"></image>
+			<view style="font-size: 40rpx;margin-top: 22rpx;color: #FFFFFF;font-weight: bold;">斯耀短剧APP</view>
+			<view style="font-size: 28rpx;margin-top: 16rpx;color: #FFFFFF;font-weight: bold;">海量电子榨菜  免费又过瘾</view>
+			<button class="confirm-btn" @click="download">{{data.confirmBtn}}</button>
+			
+		</view>
+		<view id="shareit" v-if="data.show_share" @tap="closeShare">
+			<image class="arrow" src="https://renwu.xiansqx.com/img/20210813/9aa484db4c60458f86deb2a8ab6fe400.png">
+			</image>
+			<view id="follow">点击右上角按钮，选择浏览器打开下载！</view>
+		</view>
+		<!-- #ifdef H5 -->
+		<div v-if="data.isWeixin" style="width: 100%;height: 100%;position: absolute;top: 0;background: url('/static/download/open_guide.png') no-repeat center bottom / cover;"></div>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup>
+	import { reactive } from 'vue';
+	import { onLoad} from '@dcloudio/uni-app'
+	import { commonType } from '@/api/init.js';
+	
+	let data = reactive({
+		show_share: false,
+		openShare: false,
+		openShares: false,
+		confirmBtn: '斯耀短剧APP',
+		isWeixin: false,
+	})
+	
+	onLoad(() => {
+		let u = navigator.userAgent;
+		if ( u.indexOf('iPhone') > -1) {
+			// #ifdef H5
+			data.confirmBtn = "跳转网页版首页"
+			// #endif
+		}
+		
+		if ( u.toLowerCase().indexOf('micromessenger') !== -1) {
+			data.isWeixin = true
+		}
+	})
+	function closeShare() {
+		data.show_share = false;
+	}
+	
+	function download() {
+		var u = navigator.userAgent;
+		if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
+			commonType(49).then(res => {
+				if (res.code === 0) {
+					if (res.data && res.data.value) {
+						// #ifndef H5
+						plus.runtime.openURL(res.data.value, function(res) {
+							
+						});
+						// #endif
+						// #ifdef H5
+						uni.setClipboardData({
+							data: res.data.value,
+							success: r => {
+								// this.$queue.showToast('邀请码复制成功');
+								uni.showToast({
+									title: '邀请码复制成功',
+									icon: 'none',
+								});
+							}
+						});
+						window.location.href = res.data.value;
+						// #endif
+					}
+				}
+			});
+		} else {
+			commonType(50).then(res => {
+				if (res.code === 0) {
+					if (res.data && res.data.value) {
+						// #ifndef H5
+						plus.runtime.openURL(res.data.value, function(res) {
+							
+						});
+						// #endif
+						// #ifdef H5
+						uni.setClipboardData({
+							data: res.data.value,
+							success: r => {
+								uni.showToast({
+									title: '邀请码复制成功',
+									icon: 'none',
+								});
+							}
+						});
+						
+						uni.switchTab({
+							url: '/pages/index/index'
+						})
+						// window.location.href = res.data.value;
+						// #endif
+					}
+				}
+			});
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	uni-page-body{
+		width: 100%;
+		height: 100%;
+	}
+	.containersView {
+		width: 100%;
+		height: 100%;
+	}
+	#shareit {
+		-webkit-user-select: none;
+		position: fixed;
+		/*width: 100%;*/
+		height: 2000px;
+		background: rgba(0, 0, 0, 0.85);
+		text-align: center;
+		top: 0;
+		left: 0;
+		z-index: 999;
+	}
+
+	#shareit img {
+		max-width: 100%;
+	}
+
+	.arrow {
+		width: 100px;
+		height: 150px;
+		position: absolute;
+		right: 5%;
+		top: 1%;
+	}
+
+	#follow {
+		margin-right: 60px;
+		margin-left: 30px;
+		width: 90%;
+		height: 50px;
+		line-height: 50px;
+		text-align: left;
+		text-decoration: none;
+		font-size: 18px;
+		color: white;
+		float: left;
+		margin-top: 160px;
+	}
+
+	
+	.confirm-btn {
+		width: 416rpx;
+		height: 90rpx;
+		line-height: 90rpx;
+		background: #FD5775;
+		color: #fff;
+		font-size: 32rpx;
+		font-weight: bold;
+		font-size: 32rpx;
+		color: #FFFFFF;
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 70rpx;
+	}
+</style>