post-uniapp-240725/pages/index/index - 副本 (2).vue

<template>
	<view class="content">
		<img :src="item" width="100%" v-for="(item, index) in list"/>
		<!-- <view 
		style="background: linear-gradient(#fff, rgb(220, 38, 7));
		width: 100%;height: 150rpx;">
			
		</view> -->
		<!-- <img src="/static/24.png" alt="" width="100%"/>
		<img src="/static/123.png" alt="" width="100%"/> -->
<!-- 		<view class="top" v-if="false">
			<img src="/static/4.png" width="100%"
			style="position: absolute;z-index: -1;top: 0;left: 0;"/>
			
			<view class="title">
				<p>轻松<text>记单词</text></p>
				<p>专业<text>抗遗忘</text></p>
			</view>
			
			<view class="description">
				一小时熟记<text>30-100</text>个单词
			</view>
			
			<view 
			style="background: url(/static/3.png);
			background-size: 100% 100%;width: 90%;
			margin-top: 100rpx;text-align: center;">
				<view class="info-title">
					记单词很轻松，<text>不忘记</text>是关键
				</view>
				
				<view class="info-list">
					<view class="info-item">
						一对一保姆式带训，高效学习
					</view>
					<view class="info-item">
						1套颠覆性的训练方法，快速提升20-60分
					</view>
					<view class="info-item">
						AI智能+21天抗遗忘+全程1对1真人陪练
					</view>
					<view class="info-item">
						量身定制学习方案，针对性强
					</view>
					<view class="info-item">
						量身定制学习方案，针对性强
					</view>
					<view class="info-item">
						随时约，随时学，碎片化时间更好利用！
					</view>
					<view class="info-item">
						特色抗遗忘训练，单词学的更快，记得更牢！
					</view>
				</view>
			</view>
			
			<view class="footer">
				<p>从底层逻辑上系统的解决英语学不好的问题</p>
				<p>将英语这门学科变成<text>强势学科!</text></p>
				<p>对英语做到<text>秒读</text><text>秒认</text><text>秒翻译</text></p>
			</view>
		</view> -->
		<view class="bottom">
			<view class="shang">
				<view class="info"
				style="color: #fff;margin-bottom: 40rpx;">
					填写信息立即报名
				</view>
				<div class="register-username">
					<!-- <image src='../../static/register/userNameLogin@3x.png'></image> -->
					<u--input placeholder="请输入学生姓名" border="surround"
						v-model="registerForm.name"></u--input>
				</div>
				<div class="register-username">
					<!-- <image src='../../static/register/userNameLogin@3x.png'></image> -->
					<u--input placeholder="请输入手机号" border="surround"
						v-model="registerForm.phone"></u--input>
				</div>
				<view style="margin-bottom: 20rpx;">
					<text style="color: #fff;font-size: 40rpx;
					margin-right: 10rpx;">￥59.9抢</text>
					<del style="color: #eee;font-size: 28rpx;">原价￥300.0</del>
				</view>
				<u-button type="primary" @click="Register()"
				style="border-radius: 20rpx;color: #000;width: 200rpx;"
				color="#fff">立即支付</u-button>
				
			</view>

		</view>
	</view>
</template>

<script>
	import api from '@/plugins/api.js'
	export default {
		data() {
			return {
				code : '',
				registerForm: {
					name: '',
					phone: '',
				},
				list : [
					'/static/0240718173256.jpg',
					'/static/24.png',
					'/static/123.png',
				]
			}
		},
		onLoad() {
			if(this.GetQueryString('code')){		//路径上面有code说明微信已授权
				this.code = this.GetQueryString('code');
				//直接去登录发起请求
				this.toWxLogin(this.code)
			}else{
				this.getwx_authorize()
			}
		},
		methods: {
			getwx_authorize() {
				// let vid = uni.getStorageSync("ivcode");
				let redirect_uri = encodeURIComponent(this.VITE_REDIRECT_URI);
				let appid = this.VITE_APPID;
				window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+'&redirect_uri='+redirect_uri+'&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect'+'&t='+new Date().getTime();
				// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid +
				// 	'&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_userinfo&state=' + 123 +
				// 	'&connect_redirect=1#wechat_redirect';
			},
			//获取url中参数的方法
			GetQueryString(name) {
				var url = window.location.href;
				try {
					var cs = url.split('?')[1]; //获取?之后的参数字符串
					var cs_arr = cs.split('&'); //参数字符串分割为数组
					for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
						if (cs_arr[i].split('=')[0] == name) {
							return cs_arr[i].split('=')[1];
						}
					}
					return "";
				} catch {
					return "";
				}
			},
			//微信登录
			toWxLogin(code) {
				console.log(code);
				api('wxLogin', { code }, res=>{
					if(res.code == 200){
						localStorage.setItem("token", res.result.token)
						localStorage.setItem("userInfo", JSON.stringify(res.result.userInfo))
					}else{
						location.href = this.VITE_REDIRECT_URI
					}
				})
			},
			Register(){
				api('createOrder', { 
					...this.registerForm
				}, res=>{
					if(res.code == 200){
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 100%;
		height: 1330rpx;
		.title{
			margin-top: 140rpx;
			color: #f8621f;
			font-size: 60rpx;
			font-weight: 900;
			line-height: 100rpx;
			transform: rotateZ(-4deg);
			letter-spacing: 10rpx;
			text{
				font-size: 90rpx;
			}
		}
		.description{
			margin-top: 30rpx;
			color: #fff;
			font-size: 28rpx;
			transform: rotateZ(-3deg);
			letter-spacing: 5rpx;
			padding-left: 120rpx;
			text{
				letter-spacing: 0rpx;
				padding-left: 10rpx;
			}
		}
		
		.info-title{
			color: #000;
			font-size: 35rpx;
			font-weight: 900;
			line-height: 100rpx;
			letter-spacing: 7rpx;
			text{
				font-size: 45rpx;
			}
		}
		.info-list{
			font-size: 25rpx;
			letter-spacing: 3rpx;
			padding: 20rpx;
			font-weight: 600;
			color: #000;
			line-height: 50rpx;
			.info-item{
				display: flex;
				align-items: center;
			}
			.info-item::before{
				content: '';
				display: block;
				width: 10rpx;
				height: 10rpx;
				background-color: #f8621f;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
		.footer{
			margin-top: 90rpx;
			font-size: 28rpx;
			letter-spacing: 3rpx;
			font-weight: 600;
			color: #f8621f;
			line-height: 50rpx;
			text-align: center;
			background: url(/static/2.png);
			background-size: 100% 100%;
			width: 90%;
			padding: 20rpx 0;
			p:nth-child(2){
				text{
					font-size: 40rpx;
					letter-spacing: 20rpx;
					margin-left: 20rpx;
				}
			}
			p:nth-child(3){
				text{
					font-size: 40rpx;
					letter-spacing: 4rpx;
					margin-left: 25rpx;
				}
			}
		}
	}
	.bottom{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 100%;
		// --color : #890404;
		--color : #dc2808;
		.shang{
			width: 100%;
			box-sizing: border-box;
			background: linear-gradient(to right, rgb(239,118,66), rgb(220, 38, 7));
			overflow: hidden;
			padding: 30rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.xia{
			background-color: #fff;
			margin-bottom: 50rpx;
			h1{
				font-size: 50rpx;
				line-height: 150rpx;
				color: var(--color);
				font-weight: 500;
				letter-spacing: 5rpx;
				text-align: center;
			}
			.tx{
				border-left: 20rpx solid var(--color);
				border-right: 20rpx solid var(--color);
				border-top: 8rpx solid var(--color);
				border-bottom: 8rpx solid var(--color);
				width: fit-content;
				margin: 0 auto;
				background-color: #f9d3d4;
				color: #fff;
				font-size: 35rpx;
			}
			.asd{
				display: flex;
				margin-top: 20rpx;
				.left{
					width: 250rpx;
					display: flex;
					flex-direction: column;
					color: var(--color);
					font-weight: 900;
					line-height: 60rpx;
					justify-content: center;
					align-items: center;
					.img{
						// background-color: #f9d3d4;
						width: 180rpx;
						height: 180rpx;
					}
				}
				.right{
					position: relative;
					width: 500rpx;
					height: 260rpx;
					background: url(/static/5.png);
					background-size: 100% 100%;
					.price{
						color: var(--color);
						font-weight: 900;
						.qweq{
							padding: 20rpx;
							font-size: 28rpx;
						}
						.num{
							width: 400rpx;
							text-align: center;
							font-size: 40rpx;
							text{
								font-size: 55rpx;
							}
						}
						.mx{
							font-size: 16rpx;
							color: #fff;
							position: absolute;
							bottom: 75rpx;
							left: 25rpx;
							text-align: center;
							width: 350rpx;
						}
					}
				}
			}
		}
	}
	.register-username{
		display: flex;
		border: 1px solid #ED762F;
		height: 35px;
		align-items: center;
		margin-bottom: 20px;
		padding: 0 10px;
		border-radius: 5px;
		box-sizing: border-box;
		background-color: #fff;
		color: #000;
		image {
			width: 20px;
			height: 20px;
		}
	}
</style>