property/user_ui/pages/down.vue

<template>
		<view class="box">
			<!-- <image :src="bg" class="bgimg"></image> -->
			<view class="main">
				<image :src="top" class="topimg"></image>
				<view class="topa">
					<image :src="topa" ></image>
				</view>
				
				<image :src="abg" class="abg"></image>
				<view class="btns" @click="getDown('user')" style="margin-top: -28rpx;"><image :src="user" class="imga"></image>用户端下载</view>
				<view class="btns" @click="getDown('wuye')"><image :src="usera" class="imgb" ></image>物业端下载</view>
				<view class="tips">
					<view class="tipa">
						<view class="tit">产品介绍</view>
						<view class="tita">PRODUCT INTRODUCTION</view>
						<view class="line"><image :src="line"></image></view>
						<view class="txt">千栗智慧社区管理平台是一款集房产管理、车辆管理、社区服务于一体的综合型千栗智慧社区管理软件。</view>
						<view class="txt">通过该软件，业主可以轻松管理自己的房产和车辆信息，实时查看社区内车位和充电桩位情况，同时关注家人的健康状况，并享受便捷的社区商城服务。</view>
						<view class="txt">对于物业公司而言，千栗智慧社区管理平台则提供了全面的社区人员管理、房产管理、进出记录监控、门禁控制、车位及充电桩管理以及物业费收缴等功能，极大的提升了物业管理效率和服务质量。
						</view>
					</view>
				</view>
			</view>
		</view>
  <!-- <view class="regbox pregbox flexdc pr"  id="regbox" style="padding-top: 120rpx;">
	  <image :src="headimg" class="headimg flex0"></image> 
	  <view class="rbtn btn2" @click="getDown">立即下载</view>
  </view> -->
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
  export default {
	data(){
		return{
			bg:require('@/static/images/down/bg.png'),
			abg:require('@/static/images/down/abg.png'),
			boxbg:require('@/static/images/down/boxbg.png'),
			line:require('@/static/images/down/line.png'),
			top:require('@/static/images/down/top.png'),
			topa:require('@/static/images/down/topa.png'),
			user:require('@/static/images/down/user.png'),
			usera:require('@/static/images/down/usera.png'),
			userurl:"/profile/upload/2025/04/07/__UNI__E57E235__20250401144753_20250407105540A002.apk",
			useraurl:"/profile/upload/2025/04/07/__UNI__35B39A9__20250401144647_20250407105511A001.apk",
		}
	},
	
	methods:{
		isWechat() {
		    return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
		},

		getDown(type){
			if (this.isWechat()) {
			    uni.showToast({
			        title: '点击右上角在浏览器中打开后下载',
			        icon: 'none',
			        duration: 3000
			    })
			    return
			}
			var url=''
			if(type=='user'){
				url=baseUrl+this.userurl;
			}else{
				url=baseUrl+this.useraurl;
			}
			let a = document.createElement('a');
			a.setAttribute('href', url);
			a.setAttribute('download', 'downapp');
			a.innerHTML = "立即下载";
			document.body.appendChild(a);
			a.click();
			a.remove()
		}
	},
	onLoad: function() {
			
    },
  }
</script>

<style lang="scss" scoped>
.box{position: relative;height: 100vh;overflow: auto;background: url(../static/images/down/bg.png) no-repeat;background-size: 100% 100%;
	.bgimg{width: 100%;min-height: 100vh;position: absolute;left: 0;right: 0;bottom: 0;top: 0;z-index: 0;}
	.main{padding: 40rpx 0 76rpx;position: relative;
		.topimg{width: 240rpx;height: 32rpx;margin-left: 40rpx;margin-bottom: 44rpx;}
		.topa{margin:0 auto;padding-left: 28rpx;width: 734rpx;box-sizing: border-box;
			image{width: 706rpx;height: 388rpx;}
		}
		.abg{width: 620rpx;height: 664rpx;margin-top: -144rpx;}
		.btns{width: 392rpx;height: 68rpx;border: 2rpx solid #222222;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #222222;border-radius: 68rpx;margin:0 auto 34rpx;
			.imga{width: 40rpx;height: 36rpx;margin-right: 24rpx;}
			.imgb{width: 38rpx;height: 40rpx;margin-right: 28rpx;}
		}
		.tips{padding:0 12rpx 0 40rpx; margin-top: 74rpx;}
		.tipa{background: url(../static/images/down/boxbg.png) no-repeat;background-size: 100% 100%;padding: 46rpx 66rpx 80rpx 38rpx;width: 698rpx;margin: 0 auto;box-sizing: border-box;
			.tit{font-weight: bold;font-size: 44rpx;color: #222222;text-align: center;margin-bottom: 4rpx;}
			.tita{color: #222222;font-size: 18rpx;
line-height: 36rpx;text-align: center;}
			.line{width: 100%;box-sizing: border-box;margin-top: 26rpx;margin-bottom: 40rpx;
				image{width: 100%;height: 16rpx;}
			}
			.txt{font-size: 24rpx;text-indent: 2em;
color: #434242;line-height: 40rpx;}
		}
	}
}
</style>