270 lines
5.4 KiB
Vue
270 lines
5.4 KiB
Vue
<template>
|
||
<view class="top-up-success-page">
|
||
<view class="header">
|
||
<view class="go-back" @click="goBack">
|
||
<image src="@/static/order/fh.png" mode="" class="back-img"></image>
|
||
<view class="header-title">充值成功</view>
|
||
<view class="back-img"></view>
|
||
</view>
|
||
<view class="pay-suc">
|
||
<image src="@/static/mine/dh.png" mode="" class="suc-img"></image>
|
||
<view class="suc-detail">
|
||
<view class="title">充值成功！</view>
|
||
<!-- <view class="sub">感谢您的购买</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="open" @click="open">立即开盒</view>
|
||
<view class="pay-detail">
|
||
<view class="pay-header">
|
||
<view class="pay-price">
|
||
<viwe class="sym">¥</viwe>
|
||
19.9
|
||
</view>
|
||
</view>
|
||
<view class="detail">
|
||
<view class="detail-item">
|
||
<view class="title">用户信息</view>
|
||
<view class="value">
|
||
用*昵称
|
||
</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="title">充值代币</view>
|
||
<view class="value">
|
||
120代币
|
||
</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="title">充值奖励</view>
|
||
<view class="value">
|
||
0代币
|
||
</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="title">实付金额</view>
|
||
<view class="value">
|
||
¥19.9
|
||
</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="title">账户代币余额</view>
|
||
<view class="value">
|
||
150代币
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
|
||
}
|
||
},
|
||
onLoad(opation) {
|
||
|
||
},
|
||
methods:{
|
||
goBack(){
|
||
uni.navigateBack()
|
||
},
|
||
open(){
|
||
uni.switchTab({
|
||
url:`/pages/index/index`
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background-image: url('@/static/index/bg.png');
|
||
background-size: 100%;
|
||
}
|
||
.top-up-success-page{
|
||
.header{
|
||
background-image: url('@/static/mine/bg.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
width: 100%;
|
||
height: 506rpx;
|
||
.go-back {
|
||
padding: 49rpx 0 0 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.back-img {
|
||
width: 19rpx;
|
||
height: 34rpx;
|
||
}
|
||
.header-title {
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
.pay-suc{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 86rpx;
|
||
.suc-img{
|
||
width: 100rpx;
|
||
height: 74rpx;
|
||
}
|
||
.suc-detail{
|
||
margin-left: 9rpx;
|
||
.title{
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.sub{
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
.open{
|
||
margin: 42rpx auto 48rpx auto;
|
||
width: 279rpx;
|
||
height: 66rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 33rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: #EF4336;
|
||
}
|
||
.pay-detail{
|
||
width: 705rpx;
|
||
height: 490rpx;
|
||
background-image: url('@/static/mine/top.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
margin: 50rpx 0 0 22rpx;
|
||
padding: 64rpx 32rpx 0 28rpx;
|
||
.pay-header{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.pay-value{
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #333333;
|
||
}
|
||
.pay-ponit{
|
||
font-weight: 600;
|
||
font-size: 60rpx;
|
||
color: #333333;
|
||
.point-img{
|
||
width: 30rpx;
|
||
height: 31rpx;
|
||
margin-right: 17rpx;
|
||
}
|
||
}
|
||
.pay-price{
|
||
font-weight: 600;
|
||
font-size: 60rpx;
|
||
color: #333333;
|
||
.sym{
|
||
display: inline-block;
|
||
margin-right: 17rpx;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
.detail{
|
||
margin-top: 20rpx;
|
||
|
||
.detail-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 22rpx;
|
||
.title{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.value{
|
||
font-size: 28rpx;
|
||
color: #888888;
|
||
.copy{
|
||
margin-left: 9rpx;
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.go-open{
|
||
margin-top: 55rpx;
|
||
margin-left: 184rpx;
|
||
width: 381rpx;
|
||
height: 90rpx;
|
||
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
||
border-radius: 45rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.go-cart{
|
||
margin-top: 16rpx;
|
||
margin-left: 184rpx;
|
||
width: 381rpx;
|
||
height: 90rpx;
|
||
border-radius: 45rpx;
|
||
border: 1px solid #EF4234;
|
||
font-size: 30rpx;
|
||
color: #EF4134;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.main{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
margin-top: 90rpx;
|
||
.main-suc{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 204rpx;
|
||
height: 204rpx;
|
||
border-radius: 50%;
|
||
background-color: #EFFBF1;
|
||
.suc-img{
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
}
|
||
}
|
||
.pay-success{
|
||
font-size: 40rpx;
|
||
color: #333333;
|
||
font-weight: 800;
|
||
margin-top: 56rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |