114 lines
4.5 KiB
Vue
114 lines
4.5 KiB
Vue
<template>
|
||
<div class="bg-gradient-to-b to-80% from-[#28BEBB] to-[#fff] flex flex-col items-center">
|
||
<img src="/images/checkout/payment-success.png" alt="payment-success" class="w-[258rpx] h-[140rpx] mt-[80rpx]" />
|
||
<p class="text-[56rpx] font-700 text-white mt-[16rpx]">支付成功！</p>
|
||
<div class="px-[16rpx] my-[24rpx] w-full flex flex-col items-center">
|
||
<div class="bg-[#0b9996] w-full rounded-full p-[6rpx] h-[24rpx]">
|
||
<div class="w-full h-full bg-[#004140] rounded-full"></div>
|
||
</div>
|
||
<div class="h-[468rpx] custom-bg relative flex flex-col items-center">
|
||
<nut-price :price="money" size="large" class="font-700 price-text mt-[70rpx] flex!" />
|
||
<ul class="w-full mt-[50rpx] px-[32rpx]">
|
||
<li class="flex items-center mb-[30rpx] text-[32rpx]">
|
||
<span class="text-[#666]">订单编号：</span>
|
||
<span class="mr-[10rpx]">20220308170456105610</span>
|
||
<div class="text-[#28BEBB] bg-[#e9f8f8] rounded-full px-[14rpx] py-[8rpx] text-[28rpx] font-400 border-[#28BEBB] border-solid border-[2rpx]">复制</div>
|
||
</li>
|
||
<li class="flex items-center mb-[30rpx] text-[32rpx]">
|
||
<span class="text-[#666]">下单时间：</span>
|
||
<span class="">2022-03-08 17:02</span>
|
||
</li>
|
||
<li class="flex items-center text-[32rpx]">
|
||
<span class="text-[#666]">支付方式：</span>
|
||
<img src="/images/checkout/wechat.png" alt="wechat" class="w-[32rpx] h-[32rpx] mr-[10rpx]">
|
||
<span class="">微信支付</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="px-[56rpx] w-full mt-[120rpx]">
|
||
<div class="bg-[#28BEBB] rounded-[20rpx] py-[26rpx] text-[44rpx] font-600 text-white w-full text-center">订单详情</div>
|
||
<div class="text-[#28BEBB] bg-white border-solid border-[#28BEBB] border-[4rpx] rounded-[20rpx] py-[26rpx] text-[44rpx] font-600 text-[#28BEBB] w-full text-center mt-[20rpx] mt-[40rpx]" @click="goHome">返回首页</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { useShoppingCartStore } from '@/store/shoppingCart';
|
||
import { CartTypeEnum } from '@/types/cart';
|
||
import { useRouter,useRoute } from 'vue-router';
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const type = route.query.type;
|
||
|
||
const shoppingCartStore = useShoppingCartStore();
|
||
|
||
let money = 0;
|
||
const useGetShoppingCartTotalPrice = () => {
|
||
if(type === CartTypeEnum.Restaurant){
|
||
money = shoppingCartStore.getShoppingCartByRestaurant.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
|
||
}else if(type === CartTypeEnum.Mall){
|
||
money = shoppingCartStore.getShoppingCartByMall.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
|
||
}else if(type === CartTypeEnum.Course){
|
||
money = shoppingCartStore.getShoppingCartByCourse.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
|
||
}else if(type === CartTypeEnum.HealthCare){
|
||
money = shoppingCartStore.getShoppingCartByHealthCare.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
|
||
}else if(type === CartTypeEnum.Housekeeping){
|
||
money = shoppingCartStore.getShoppingCartByHousekeeping.reduce((acc, item) => acc + Number(item.price) * Number(item.count), 0);
|
||
}
|
||
}
|
||
|
||
useGetShoppingCartTotalPrice();
|
||
|
||
const goHome = () => {
|
||
router.push('/home');
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-bg {
|
||
margin-top: -5px;
|
||
background: linear-gradient(to bottom,#9be1e0 0%,#fff 20%);
|
||
border-bottom-left-radius: 20px;
|
||
border-bottom-right-radius: 20px;
|
||
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.03);
|
||
|
||
&::before,
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
|
||
width: 10px; /* 设置宽度 */
|
||
height: 10px; /* 设置高度 */
|
||
background: #9be1e0; /* 设置背景色 */
|
||
}
|
||
|
||
&::before {
|
||
left: -10px; /* 设置左边位置 */
|
||
background: radial-gradient(circle at 0 10px, transparent 10px,#9be1e0 10px);
|
||
}
|
||
|
||
&::after {
|
||
right: -10px; /* 设置右边位置 */
|
||
background: radial-gradient(circle at 10px 10px, transparent 10px,#9be1e0 10px);
|
||
}
|
||
}
|
||
|
||
.price-text{
|
||
--nut-price-symbol-big-size: 32px;
|
||
--nut-price-big-size:56px;
|
||
--nut-price-decimal-big-size:32px;
|
||
|
||
:deep(.nut-price--symbol){
|
||
align-self: center;
|
||
}
|
||
:deep(.nut-price--decimal-large){
|
||
align-self: end;
|
||
padding-bottom: 5px;
|
||
}
|
||
}
|
||
</style>
|