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

172 lines
3.4 KiB
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>