easypay-app/pages/users/pay_success/index.vue

181 lines
3.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="Pay_success">
<view class="successbox">
<image src="../../../static/images/success.png" mode=""></image>
<view class="title">
申请成功请等待审核
</view>
<view class="content">
<view class="bd">
<view class="">订单编号</view> <text>{{ordermo}}</text>
</view>
<view class="bd">
<view class="">下单时间</view> <text>{{shopobj.date}}</text>
</view>
<view class="bd">
<view class="">支付方式</view> <text>分期支付</text>
</view>
<view class="bd">
<view class="">支付金额</view> <text>{{shopobj.shopmey}}</text>
</view>
</view>
<navigator url="../../../pages/users/order_list/index" class="ckdj">查看订单</navigator>
<navigator url="../../../pages/index/index" open-type="switchTab" class="fhsy">返回首页</navigator>
</view>
<!-- 加载logo -->
<view class="logobox" v-show="logoflag">
<image class="logoicon" src="../../../static/img/logo.png"></image>
<text>正在生成订单中请稍等...</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
shopobj: {},
ordermo: '',
logoflag:true,
}
},
onLoad(option) {
this.shopobj = JSON.parse(option.shopobj)
this.timer = setInterval(() => {
this.ordermo = this.$Cache.get('ordernobh')
this.logoflag = false
// console.log(this.ordermo)
}, 3000); // 定时器时间设置为1秒
},
onShow() {
},
onUnload() {
// 页面卸载时清除定时器
clearTimeout(this.timer);
},
onBeforeUnload() {
// 页面跳转前清除定时器
clearInterval(this.timer);
},
created() {
},
methods: {
},
mounted() {
}
}
</script>
<style lang="less">
page {
position: relative;
}
.logobox {
width: 100%;
height: 100vh;
background-color: red;
position: fixed;
top: 0;
left: 0;
opacity: 1;
padding-top: 30%;
box-sizing: border-box;
background-color:#000;
text-align: center;
z-index: 1;
}
.logobox text{
display: block;
color: #fff;
font-size: 14px;
z-index: 999;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
.logoicon {
width: 100%;
height: 500rpx;
z-index: 99;
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
}
.Pay_success {
width: 100%;
margin-top: 200rpx;
background-color: #fff;
padding-bottom: 80rpx;
.successbox {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 0 40rpx;
image {
position: absolute;
top: -65rpx;
left: 50%;
transform: translateX(-50%);
width: 138rpx;
height: 138rpx;
}
.title {
width: 100%;
text-align: center;
padding-top: 100rpx;
box-sizing: border-box;
font-weight: 700;
line-height: 120rpx;
border-bottom: 1px solid #ccc;
}
.content {
.bd {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 20rpx;
text {
color: #666;
}
}
}
.ckdj {
width: 100%;
height: 84rpx;
border: 1px solid #ccc;
border-radius: 50rpx;
line-height: 84rpx;
text-align: center;
margin-top: 50rpx;
background-color: #42ca4d;
color: #fff;
}
.fhsy {
width: 100%;
height: 84rpx;
border: 1px solid #ccc;
border-radius: 50rpx;
line-height: 84rpx;
text-align: center;
margin-top: 50rpx;
}
}
}
</style>