317 lines
7.1 KiB
Vue
317 lines
7.1 KiB
Vue
<!-- 商城支付成功 -->
|
||
<template>
|
||
<view class="pay-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-value" v-if="payType === 'NONE'">无需支付</view>
|
||
<view class="pay-ponit" v-if="payType === 'POINTS'">
|
||
<image src="@/static/mine/jf.png" mode="" class="point-img"></image>
|
||
{{point}}
|
||
</view>
|
||
<view class="pay-price" v-if="payType === 'WECHAT' || payType === 'ALIPAY'">
|
||
<viwe class="sym">¥</viwe>
|
||
{{sale}}
|
||
</view>
|
||
</view>
|
||
<view class="detail">
|
||
<!-- <view class="detail-item">
|
||
<view class="title">订单编号</view>
|
||
<view class="value">
|
||
{{no}}
|
||
<image src="@/static/order/fz.png" mode="" class="copy" @click="copy(no)"></image>
|
||
</view>
|
||
</view> -->
|
||
<view class="detail-item">
|
||
<view class="title">盲盒名称</view>
|
||
<view class="value">
|
||
{{name}}
|
||
</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="title">购买数量</view>
|
||
<view class="value">
|
||
{{statusObj[type]}}
|
||
</view>
|
||
</view>
|
||
<view class="detail-item" v-if="payType === 'WECHAT' || payType === 'ALIPAY'">
|
||
<view class="title">实付金额</view>
|
||
<view class="value">
|
||
{{sale}}
|
||
</view>
|
||
</view>
|
||
<!-- <view class="detail-item">
|
||
<view class="title">下单时间</view>
|
||
<view class="value">
|
||
111111
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="detail-item">
|
||
<view class="title">支付方式</view>
|
||
<view class="value">
|
||
<view v-if="payType === 'ALIPAY'">支付宝支付</view>
|
||
<view v-if="payType === 'WECHAT'">微信支付</view>
|
||
<view v-if="payType === 'POINTS'">积分支付</view>
|
||
<view v-if="payType === 'NONE'">无需支付</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view class="go-open" @click="goShop">返回商城</view>
|
||
<view class="go-cart" @click="goDetail">查看订单</view> -->
|
||
</view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/index/order"></page-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
id:"",
|
||
no:"",
|
||
price:"",
|
||
point:"",
|
||
payType:"",
|
||
boxId:'',
|
||
name:"",
|
||
type:'',
|
||
sale:'',
|
||
statusObj: {
|
||
SINGLE: "一发入魂",
|
||
TRIPLE: "三连抽",
|
||
PENTA: "五连抽",
|
||
},
|
||
}
|
||
},
|
||
onLoad(opation) {
|
||
this.price = opation.price ? opation.price : 0
|
||
this.point = opation.point ? opation.point : 0
|
||
this.payType = opation.payType ? opation.payType : 'NONE'
|
||
this.id = opation.id
|
||
|
||
this.no = opation.no
|
||
this.boxId = opation.boxId
|
||
this.name = opation.name
|
||
this.type = opation.type
|
||
this.sale = opation.sale
|
||
},
|
||
methods:{
|
||
goBack(){
|
||
uni.navigateBack()
|
||
},
|
||
copy(no) {
|
||
uni.setClipboardData({
|
||
data: no,
|
||
})
|
||
},
|
||
open(){
|
||
uni.redirectTo({
|
||
url: `/pages/index/prize?no=${this.no}&boxId=${this.boxId}`
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background-image: url('@/static/index/bg.png');
|
||
background-size: 100%;
|
||
}
|
||
.pay-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: 455rpx;
|
||
background-image: url('@/static/mine/pay-detail.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: 72rpx;
|
||
|
||
.detail-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 29rpx;
|
||
.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> |