293 lines
7.6 KiB
Vue
293 lines
7.6 KiB
Vue
<template>
|
||
<div class="order-success-warp">
|
||
<userHeader :title="'订单提交成功'"></userHeader>
|
||
<div class="order-success-content">
|
||
<div class="content-top">
|
||
<el-row :gutter="16">
|
||
<el-col :span="14" align="left">
|
||
<div class="back">
|
||
<el-icon><ArrowLeftBold /></el-icon>
|
||
</div>
|
||
<div class="status">
|
||
<div class="status-val">
|
||
<el-icon><SuccessFilled /></el-icon>
|
||
<span>{{ '订单提交成功' }}</span>
|
||
</div>
|
||
<div class="tips">请您及时付款，以便订单尽快完成！</div>
|
||
<div class="sub-tips">请您在提交订单后 <span class="txt-main">0时29分59秒</span> 内完成支付，否则订单会自动取消。</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="10" align="right">
|
||
<div class="pay-amount">
|
||
<span class="tips">实付款：</span> <span class="total">{{ totalAmout.toFixed(2) }}</span>
|
||
</div>
|
||
<div class="order-no">交易订单：JY20250101000001</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="pay-style-warp">
|
||
<div class="title">支付方式</div>
|
||
<div class="pay-list">
|
||
<div class="pay-list-pos">
|
||
<div
|
||
v-for="(s, indexs) in styleList"
|
||
:key="s.name"
|
||
class="pay-item"
|
||
:class="s.name == currentPay ? 'pay-act' : 'pay-normal'"
|
||
@click="selectPayStyle(s.name)"
|
||
>
|
||
<div class="is-style">
|
||
<div class="is-style-pos">
|
||
<el-icon><CircleCheckFilled /></el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="style-icon" :style="{ background: s.color }">
|
||
<div class="iconfont" :class="'icon-' + s.icon"></div>
|
||
</div>
|
||
<div class="style-txt">
|
||
<div class="style-txt-pos">{{ s.title + '支付' || '--' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pay-code">
|
||
<div class="pay-tips">
|
||
<span class="tips">
|
||
<div class="tips-pos">{{ currentIndex > -1 ? styleList[currentIndex].title + '扫码' : '扫码' }}，支付</div>
|
||
</span>
|
||
<span class="pay-amount">{{ payAmout.toFixed(2) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pay-code-img">
|
||
<div class="code-img">
|
||
<costomImg :url="qrImg" :preview-list="[qrImg]" :is-montage="false" :is-view="false" :fit="'cover'"></costomImg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, reactive, computed } from 'vue';
|
||
import { isEmpty, getAssetsFile } from '@/utils';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import userHeader from './components/userHeader.vue';
|
||
import costomImg from '@/components/costomImg.vue';
|
||
import { qrImg } from '@/layouts/component/Header/base64img.js';
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
let totalAmout = ref(196);
|
||
|
||
let styleList = reactive([
|
||
{ title: '支付宝', name: 'alipay', icon: 'alipay', color: 'rgb(0, 159, 232)' },
|
||
{ title: '微信', name: 'wx', icon: 'wxpay', color: 'rgb(40, 196, 69)' },
|
||
]);
|
||
|
||
let currentPay = ref('wx');
|
||
|
||
const selectPayStyle = (name) => {
|
||
currentPay.value = name;
|
||
};
|
||
|
||
let currentIndex = computed(() => {
|
||
let index = -1;
|
||
index = styleList.findIndex((m) => {
|
||
return m.name == currentPay.value;
|
||
});
|
||
return index;
|
||
});
|
||
|
||
let payAmout = ref(147);
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.order-success-warp {
|
||
width: 100%;
|
||
.order-success-content {
|
||
width: 100%;
|
||
background: $color-fff;
|
||
height: calc(100vh - 136px);
|
||
margin-top: 16px;
|
||
border-radius: 16px;
|
||
overflow-y: auto;
|
||
.content-top {
|
||
background: $color-main-table-header;
|
||
padding: 16px;
|
||
.back,
|
||
.status {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
padding-left: 16px;
|
||
.status-val {
|
||
color: $color-main;
|
||
.el-icon {
|
||
font-size: 38px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
font-size: 26px;
|
||
}
|
||
.tips {
|
||
font-size: 20px;
|
||
}
|
||
.sub-tips {
|
||
font-size: 16px;
|
||
color: $color-999;
|
||
}
|
||
}
|
||
.back {
|
||
.el-icon {
|
||
font-size: 30px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.pay-amount {
|
||
padding-top: 24px;
|
||
.tips {
|
||
font-size: 20px;
|
||
}
|
||
.total {
|
||
font-size: 32px;
|
||
color: $color-main;
|
||
}
|
||
.total::before {
|
||
content: '￥';
|
||
}
|
||
}
|
||
.order-no {
|
||
color: $color-999;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.pay-style-warp {
|
||
width: 100%;
|
||
padding: 16px;
|
||
.title {
|
||
width: 100%;
|
||
font-size: 20px;
|
||
}
|
||
.pay-list {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
margin: 64px 0;
|
||
|
||
width: 100%;
|
||
.pay-list-pos {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
gap: 64px;
|
||
}
|
||
.pay-item {
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
gap: 16px;
|
||
cursor: pointer;
|
||
.is-style,
|
||
.style-icon,
|
||
.style-txt {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.is-style,
|
||
.style-txt {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
.is-style {
|
||
.el-icon {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
.style-txt {
|
||
font-size: 20px;
|
||
}
|
||
.style-icon {
|
||
border-radius: 16px;
|
||
width: 56px;
|
||
height: 56px;
|
||
position: relative;
|
||
.iconfont {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: $color-fff;
|
||
&.icon-alipay {
|
||
font-size: 46px !important;
|
||
}
|
||
&.icon-wxpay {
|
||
font-size: 38px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.pay-act {
|
||
border: 1px solid $color-main;
|
||
.is-style {
|
||
.el-icon {
|
||
color: $color-main;
|
||
}
|
||
}
|
||
}
|
||
&.pay-normal {
|
||
border: 1px solid $color-da;
|
||
.is-style {
|
||
.el-icon {
|
||
color: $color-999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-code {
|
||
text-align: center;
|
||
width: 100%;
|
||
.pay-tips {
|
||
.tips,
|
||
.pay-amount {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.tips {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.tips-pos {
|
||
font-size: 20px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
.pay-amount {
|
||
font-size: 32px;
|
||
color: $color-main;
|
||
}
|
||
.pay-amount::before {
|
||
content: '￥';
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-code-img {
|
||
display: inline-flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
margin: 24px 0;
|
||
.code-img {
|
||
display: inline-block;
|
||
width: 240px;
|
||
height: 240px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|