post-uniapp-240725/pages/index/index.vue

<template>
	<view class="content">
		<img src="/static/logo.png" style="position: absolute;right: 10px;top: 10px;" height="25rpx"/>
		<img :src="item" width="100%" v-for="(item, index) in list"/>

		<view class="bottom">
			<view class="shang" style="padding-bottom: 200rpx;">
				<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;">￥{{ price }}抢</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 style="color: #ccc;font-size: 35rpx;margin-top: 50rpx;display: flex;
				justify-content: center;flex-direction: column;align-items: center;">
					<img src="/static/d01.png" style="" width="200rpx"/>
					<img src="/static/logo.png" style="" width="100rpx"/>
					冠尚彤语言训练系统
				</view> -->
				
				
				<view style="color: rgb(238 234 56);font-size: 33rpx;margin-top: 460rpx;display: flex;
				justify-content: center;align-items: center;font-weight: 900;">
					<img src="/static/d01.png" style="margin-right: 10rpx;" height="28rpx"/>
					<view style="position: relative;">
						<view style="color: #fff;font-size: 25rpx;
						position: absolute;top: -390rpx;white-space:nowrap;
						display: flex;flex-direction: column;
						justify-content: center;align-items: center;
						" @click="clickService">
							联系我们：{{ phone }}
							<view style="margin-top: 20rpx;text-align: center;">
								预约请扫码<br />
								<img src="/static/er3.png" width="145rpx"/>
							</view>
						</view>
						冠尚彤语言训练系统
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import api from '@/plugins/api.js'
	export default {
		data() {
			return {
				code : '',
				price : 0,
				registerForm: {
					name: '',
					phone: '',
				},
				type : 1,//0是money，1是price
				phone : '400-026-7262',
				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();
			},
			//获取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 "";
				}
			},
			clickService() {
				uni.makePhoneCall({
					phoneNumber: this.phone,
					success: () => {},
					fail: () => {}
				});
			},
			//微信登录
			toWxLogin(code) {
				console.log(code);
				api('wxLogin', { code }, res=>{
					if(res.code == 200){
						if(this.type == 0){
							this.price = res.result.money
						}else{
							this.price = res.result.price
						}
						localStorage.setItem("token", res.result.token)
						localStorage.setItem("userInfo", JSON.stringify(res.result.userInfo))
					}else{
						location.href = this.VITE_REDIRECT_URI
					}
				})
			},
			Register(){
				if(!localStorage.getItem('token')){
					this.getwx_authorize()
				}
				
				if (this.registerForm.name.trim() === '') return uni.$u.toast('请输入姓名')
				else if (this.registerForm.phone.trim() === '') return uni.$u.toast('请输入手机号')
				if(!/^1[3-9]\d{9}$/.test(this.registerForm.phone)){
					return uni.$u.toast('手机号格式不合法')
				}
				
				api('createOrder', {
					...this.registerForm,
					type : this.type
				}, res=>{
					if(res.code == 200){
						this.chooseWXPay(res.result)
					}
				})
				
			},
			chooseWXPay(res){
				let self = this
				self.$jweixin.config({
					debug: false, 
					appId:res.appId,//必填
					jsApiList: ['chooseWXPay']
				});
				self.$jweixin.ready(function() {
					self.$jweixin.chooseWXPay({
						appId: res.appId,
						timestamp: res
						.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
						nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
						package: res.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: res.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
						paySign: res.paySign, // 支付签名
						success: function(res) {
							// 支付成功后的回调函数
							uni.showToast({
								icon: 'none',
								title: '支付成功',
							});
							
							self.registerForm.name = ''
							self.registerForm.phone = ''
						}
					});
				});
				self.$jweixin.error(function(res) {
					uni.showToast({
						icon: 'none',
						title: '支付失败了',
					});
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.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;
		}
	}
	.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>