meituan-beibuwan-h5/pages/mt/index.vue

<template>
	<view class="content">
		<view class="header">
			<view class="banklogo"></view>
		</view>
		<text class="title">美团</text>
		<text class="second-title">美食一键送达 让生活更有滋味</text>
		<view class="logo"></view>
		<view class="buttons">
			<view class="button" @click="()=>{meituanLogin(1)}">我要点外卖</view>
			<view class="button" @click="()=>{meituanLogin(2)}">我要到店吃</view>
		</view>
		<text class="bottom-text">本页面内的服务由成都蓝色兄弟网络科技有限公司提供</text>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import {authState} from '@/util/auth.js'
	import {payState} from '@/util/pay.js'
	export default {
		data() {
			return {
				title: 'Hello',
				token:"",
				userinfo:{}
			}
		},
		onLoad() {
			this.token = this.$route.query.token
			if(this.token){
				this.beibuwanLogin(this.$route.query.token)
			}
		},
		onShow(){
			payState.setIsPay(false)
		},
		methods: {
			beibuwanLogin(token){
				api.beibuwanLogin({
					token:token
				}).then((res)=>{
					if(res.data.code == 200){
						const data = res.data.data
						this.userinfo = data
						authState.login({
							phone:data.phone,
							token:data.token
						})
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},
			meituanLogin(type){
				api.meituanLogin({
					phone:this.userinfo.phone,
					type:type
				}).then((res)=>{
					if(res.data.code == 200){
						const data = res.data
						window.location.href = data.url
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style>
	.content {		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
		/* height: calc(100vh - 240rpx); */
		background-image: url('@/static/images/background.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		
		height: 100%;
	}
	
	.header{
		width: 100%;
	}
	
	.banklogo{
		background-image: url('@/static/images/banklogo.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 400rpx;
		height: 54rpx;
		margin-top: 46rpx;
		margin-left: 58rpx;
	}

	.logo {
		height: 633rpx;
		width: 672rpx;
		/* margin-top: 22rpx; */
		background-image: url('@/static/images/meituan-ip.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		
		margin-right: 50rpx;
	}

	.title {
		font-size: 176rpx;
		font-weight: bold;
		color: #333333;
		margin-top: 128rpx;
	}
	
	.second-title{
		font-weight: normal;
		font-size: 36rpx;
		color: #4D4D4D;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	
	.bottom-text{
		font-weight: normal;
		font-size: 24rpx;
		color: #4D4D4D;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 76rpx;
	}
	
	.buttons{
		margin-top:-54rpx;
		display: flex;
		flex-direction: column;
		gap: 40rpx;
	}
	
	.button{
		width: 488rpx;
		height: 146rpx;
		background-image: url('@/static/images/button.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		
		font-weight: normal;
		font-size: 36rpx;
		color: #FF8300;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>