173 lines
3.9 KiB
Vue
173 lines
3.9 KiB
Vue
<template>
|
|
<view v-if="logOutvisible" class="is-pay-dlgs">
|
|
<view class="log-out">
|
|
<view class="log-out-tip">请您在新打开的支付页面内完成支付操作，为确保支付顺利，请保持页面开启直至支付完成。</view>
|
|
<view class="log-out-footer">
|
|
<view class="cancel" @click="closeLogOut">未支付</view>
|
|
<view class="shu"></view>
|
|
<view class="log-out-submit" @click="submitLogOut">已完成支付</view>
|
|
</view>
|
|
</view>
|
|
<view class="is-pay-dlgs" v-if="smallVisible">
|
|
<view class="log-out-small">
|
|
<view class="log-out-tip">
|
|
盲盒即将揭晓
|
|
<view class="red">真的要放弃这个机会吗？</view>
|
|
</view>
|
|
<view class="log-out-footer">
|
|
<view class="cancel" @click="closeSmallLogOut">先去逛逛</view>
|
|
<view class="shu"></view>
|
|
<view class="log-out-submit" @click="submitSmallLogOut">继续支付</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="1">
|
|
<view class="log-out">
|
|
<view class="log-out-tip">是否已完成支付？</view>
|
|
<view class="log-out-footer">
|
|
<view class="cancel" @click="closeLogOut">取消</view>
|
|
<view class="shu"></view>
|
|
<view class="log-out-submit" @click="submitLogOut">确定</view>
|
|
</view>
|
|
</view>
|
|
</popup-view> -->
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
logOutvisible:true,
|
|
smallVisible:false
|
|
}
|
|
},
|
|
methods:{
|
|
closeLogOut(){
|
|
this.smallVisible = true
|
|
},
|
|
closeSmallLogOut(){
|
|
this.smallVisible = false
|
|
this.$emit('isCancel')
|
|
},
|
|
submitLogOut(){
|
|
this.$emit('isOk')
|
|
},
|
|
submitSmallLogOut(){
|
|
this.smallVisible = false
|
|
this.$emit('againPay')
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.is-pay-dlgs{
|
|
position: fixed;width: 100%;height: 100vh;z-index: 999;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.log-out{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 590rpx;
|
|
height: 300rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
.log-out-tip{
|
|
height: 200rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: rgba(0,0,0,0.85);
|
|
// line-height: 200rpx;
|
|
text-align: center;
|
|
padding: 50rpx 60rpx;
|
|
}
|
|
.log-out-footer{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 2rpx solid rgba(0,0,0,0.06);
|
|
height: 100rpx;
|
|
.cancel{
|
|
width: 294rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
border-right: 1px solid rgba(0,0,0,0.06);
|
|
}
|
|
.log-out-submit{
|
|
width: 294rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #E55353;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.log-out-small{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 490rpx;
|
|
height: 250rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
.log-out-tip{
|
|
height: 150rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: rgba(0,0,0,0.85);
|
|
// line-height: 100rpx;
|
|
padding-top: 40rpx;
|
|
text-align: center;
|
|
.red{
|
|
color: #E55353;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.log-out-footer{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 2rpx solid rgba(0,0,0,0.06);
|
|
height: 100rpx;
|
|
.cancel{
|
|
width: 294rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
border-right: 1px solid rgba(0,0,0,0.06);
|
|
}
|
|
.log-out-submit{
|
|
width: 294rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #E55353;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |