mits-school-payment/pages/index/index.vue

<template class="page">
    <view class="tickets">
        <view class="l-tickets">
            <view>
                <span>{{orderInfo.course_name}}</span>
            </view>
            <view>
                <span class="price">￥{{orderInfo.order_price}}</span>
            </view>
            <view>
                <span>请在10分钟内完成支付</span>
            </view>
            <view>
                <span class="pay-button" @click="payMent">立即支付</span>
            </view>
        </view>
        <view class="r-tickets">
			{{orderNo}}
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			orderNo:'',
			orderInfo: ''
        }
    },
    onLoad() {
        this.getWxAuth()
    },
    methods: {
        getWxAuth() {
            if (window.location.href.indexOf('code') > -1) {
                let code = window.location.href.split('code=')[1].split('&')[0]
                console.log('111111111111111111111111111111',code)
                uni.request({
                    url: '/api/school/wx/auth',
                    method: 'GET',
                    data:{
                        code: code
                    }
                }).then(res => {
					if(res.data.ok){
						// if (window.location.href.indexOf('state') > -1) {
							const orderNo = window.location.href.split('state=')[1].split('&')[0]
							const data = JSON.parse(res.data.data)
							uni.setStorageSync('openId', data.openid)
							uni.setStorageSync('orderNo', orderNo)
							this.createOrder(orderNo)
						// }
					}
                })
            } else {
				console.log(window.location.href);
				// if (window.location.href.indexOf('orderNo') > -1) {
					let orderNo = window.location.href.split('orderNo=')[1].split('&')[0]
					this.orderNo = orderNo
					window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa8bead7acbe0a236&redirect_uri=http://192.168.2.184:8083/pages/index/index&response_type=code&scope=snsapi_base&state=${orderNo}#wechat_redirect`)
				// }
            }
        },
		/**
		 * 创建订单
		 */
		createOrder(order_no){
			uni.request({
				url: '/api/school/student/order/wxqry',
				method:"GET",
				data: {
					order_no
				}
			}).then(res=>{
				console.log(res);
				if(res.data.ok){
					this.orderInfo = res.data.data
				}
			})
		},
		/**
		 * 立即支付
		 */
		payMent(){
			uni.request({
				url: `/api/school/student/order/wxpub?open_id=${uni.getStorageSync('openId')}&order_no=${this.orderInfo.order_no}`,
				method:"POST",
			}).then(res=>{
				console.log(res.data);
			})
		}
    }
}
</script>

<style>
	.page{
		background-color: rgb(34, 41, 65);
	}
	.tickets {
		display: flex;
		padding: 40rpx;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .3));
		background-color: rgb(34, 41, 65);
	}

	.r-tickets {
		flex: 1;
		width: 100%;
	}
	.r-tickets {
		flex: 1;
		position: relative;
	}
	.r-tickets::before {
		content: '';
		height: 1rpx;
		width: 96%;
		background: linear-gradient(to right, rgb(34, 41, 65) 0%, rgb(34, 41, 65) 50%, transparent 50%) top left / 20rpx 1rpx repeat-x;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}

	.l-tickets {
		width: 100%;
		height: 75%;
		position: relative;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background: radial-gradient(circle at left bottom, transparent 16rpx, white 0) left bottom / 50% 100% no-repeat,
			radial-gradient(circle at right bottom, transparent 16rpx, white 0) right bottom / 50% 100% no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
	}

	.r-tickets {
		position: relative;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		background: radial-gradient(circle at left top, transparent 16rpx, white 0) left top / 50% 100% no-repeat,
			radial-gradient(circle at right top, transparent 16rpx, white 0) right top / 50% 100% no-repeat;
	}
	.price{
		font-size: 26px;
		color: rgb(74, 144, 226);
	}
	.pay-button{
		line-height: 40px;
		background-color: rgb(74, 144, 226);
		color: #fff;
		padding: 10px 20px;
		width: 40vw;
		display: block;
		text-align: center;
	}
</style>