支付成功
This commit is contained in:
“13713575202”
parent
bfcd1e67ad
commit
6613a3bb56
@ -22,6 +22,9 @@ const SettingStore = useSettingStore();
|
|||||||
width: calc(100% - 320px) !important;
|
width: calc(100% - 320px) !important;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
padding: 16px 16px 16px 0;
|
padding: 16px 16px 16px 0;
|
||||||
|
.layout-main-inner {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -136,6 +136,24 @@ export const constantRoutes = [
|
|||||||
name: 'ShoppingCar',
|
name: 'ShoppingCar',
|
||||||
meta: { title: '我的购物车' },
|
meta: { title: '我的购物车' },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/userCenter-sureOrder',
|
||||||
|
component: () => import('@/views/userCenter/sureOrder.vue'),
|
||||||
|
name: 'sureOrder',
|
||||||
|
meta: { title: '确认订单' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/userCenter-orderSuccess',
|
||||||
|
component: () => import('@/views/userCenter/orderSuccess.vue'),
|
||||||
|
name: 'orderSuccess',
|
||||||
|
meta: { title: '订单提交成功' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/userCenter-paySuccess',
|
||||||
|
component: () => import('@/views/userCenter/paySuccess.vue'),
|
||||||
|
name: 'paySuccess',
|
||||||
|
meta: { title: '支付成功' },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-operation-service/userCenter-userOrders',
|
path: '/sub-operation-service/userCenter-userOrders',
|
||||||
component: () => import('@/views/userCenter/userOrders.vue'),
|
component: () => import('@/views/userCenter/userOrders.vue'),
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,6 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-user-page-top">
|
<div class="c-user-page-top">
|
||||||
<div class="title">{{ pageTitle }}</div>
|
<div class="title">
|
||||||
|
<div class="title-pos">{{ pageTitle }}</div>
|
||||||
|
</div>
|
||||||
<div class="top-right">
|
<div class="top-right">
|
||||||
<div v-for="(n, index) in linkList" :key="n.name" class="right-item" :class="currentLink == n.name ? 'act' : ''" @click="toLink(n)">
|
<div v-for="(n, index) in linkList" :key="n.name" class="right-item" :class="currentLink == n.name ? 'act' : ''" @click="toLink(n)">
|
||||||
<div class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
|
<div class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
|
||||||
@ -61,6 +63,11 @@ const toLink = (item) => {
|
|||||||
.title {
|
.title {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.title-pos {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.top-right {
|
.top-right {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|||||||
292
sub-operation-service/src/views/userCenter/orderSuccess.vue
Normal file
292
sub-operation-service/src/views/userCenter/orderSuccess.vue
Normal file
@ -0,0 +1,292 @@
|
|||||||
|
<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>
|
||||||
93
sub-operation-service/src/views/userCenter/paySuccess.vue
Normal file
93
sub-operation-service/src/views/userCenter/paySuccess.vue
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<div class="pay-success-warp">
|
||||||
|
<userHeader :title="'支付成功'"></userHeader>
|
||||||
|
|
||||||
|
<div class="pay-success-content">
|
||||||
|
<div class="icon-img">
|
||||||
|
<el-icon><CircleCheckFilled /></el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="success-txt">
|
||||||
|
<div class="title">恭喜，支付成功！</div>
|
||||||
|
<div class="tips">查看订单详情，请前往“个人中心”的“我的订单”</div>
|
||||||
|
</div>
|
||||||
|
<div class="success-do">
|
||||||
|
<div class="success-do-pos">
|
||||||
|
<div class="do-item">
|
||||||
|
<el-button @click="toLink('/sub-operation-service/userCenter-userOrders')">查看订单</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="do-item">
|
||||||
|
<el-button type="primary" @click="toLink('/sub-operation-service/home')">返回首页</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import userHeader from './components/userHeader.vue';
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const toLink = (path) => {
|
||||||
|
if (path && path != '') {
|
||||||
|
router.push(path);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pay-success-warp {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.pay-success-content {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 136px);
|
||||||
|
background: $color-fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 64px;
|
||||||
|
margin-top: 16px;
|
||||||
|
.icon-img {
|
||||||
|
.el-icon {
|
||||||
|
font-size: 80px;
|
||||||
|
color: $color-main;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-txt {
|
||||||
|
.title {
|
||||||
|
font-size: 38px;
|
||||||
|
color: $color-main;
|
||||||
|
}
|
||||||
|
.tips {
|
||||||
|
font-size: 24px;
|
||||||
|
color: $color-999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-do {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 64px 0;
|
||||||
|
.success-do-pos {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 64px;
|
||||||
|
.do-item {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
.el-button {
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 20px 48px !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -156,7 +156,9 @@ let totalAmout = computed(() => {
|
|||||||
return num;
|
return num;
|
||||||
});
|
});
|
||||||
|
|
||||||
const toSettlement = () => {};
|
const toSettlement = () => {
|
||||||
|
router.push('/sub-operation-service/userCenter-sureOrder');
|
||||||
|
};
|
||||||
|
|
||||||
const toCheckAll = () => {
|
const toCheckAll = () => {
|
||||||
isAll.value = !isAll.value;
|
isAll.value = !isAll.value;
|
||||||
@ -251,7 +253,8 @@ const doSingleDel = (indexP, index) => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
background: $color-fff;
|
background: $color-fff;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 16px;
|
overflow: hidden;
|
||||||
|
margin: 16px 0;
|
||||||
.fix-top,
|
.fix-top,
|
||||||
.fix-bottom {
|
.fix-bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
541
sub-operation-service/src/views/userCenter/sureOrder.vue
Normal file
541
sub-operation-service/src/views/userCenter/sureOrder.vue
Normal file
@ -0,0 +1,541 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sure-order-warp">
|
||||||
|
<userHeader :title="'确认订单'"></userHeader>
|
||||||
|
<div class="addr-list">
|
||||||
|
<div class="addr-list-top">
|
||||||
|
<div class="back">
|
||||||
|
<el-icon><ArrowLeftBold /></el-icon>
|
||||||
|
<span>确认收货地址</span>
|
||||||
|
</div>
|
||||||
|
<div class="addr-manage">管理地址</div>
|
||||||
|
</div>
|
||||||
|
<el-scrollbar>
|
||||||
|
<div class="scrollbar-flex-content">
|
||||||
|
<div
|
||||||
|
v-for="item in addrlist"
|
||||||
|
:key="item"
|
||||||
|
class="addr-item"
|
||||||
|
:class="currentAddr == item.id ? 'addr-item-act' : 'addr-item-normal'"
|
||||||
|
@click="selectAddr(item.id)"
|
||||||
|
>
|
||||||
|
<div class="addr-item-icon">
|
||||||
|
<div class="icon-pos">
|
||||||
|
<div class="iconfont icon-location"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="addr-item-info">
|
||||||
|
<div class="region">{{ item.region || '--' }}</div>
|
||||||
|
<div class="addr">{{ item.addr || '--' }}</div>
|
||||||
|
<div class="link-name">{{ item.linkName }} {{ item.phone }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="order-info">
|
||||||
|
<div class="order-info-top">确认订单信息</div>
|
||||||
|
<div class="order-info-list">
|
||||||
|
<div class="content-item-warp">
|
||||||
|
<div class="content-item-header">
|
||||||
|
<div class="header-th first">商品</div>
|
||||||
|
<div class="header-th other">规格</div>
|
||||||
|
<div class="header-th other">原价</div>
|
||||||
|
<div class="header-th other">数量</div>
|
||||||
|
<div class="header-th other">小计</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item-list">
|
||||||
|
<div v-for="(n, index) in datalist" :key="index" class="content-item">
|
||||||
|
<div class="shop-info">
|
||||||
|
<div class="shop-img">
|
||||||
|
<costomImg
|
||||||
|
:url="'images/ecommerce/' + 'pic.png'"
|
||||||
|
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
|
||||||
|
:is-view="false"
|
||||||
|
></costomImg>
|
||||||
|
</div>
|
||||||
|
<span class="shop-name txt-ellipsis clamp2">{{ n.shop }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="n.goodlist && n.goodlist.length > 0" class="good-list">
|
||||||
|
<div v-for="(g, indexg) in n.goodlist" :key="indexg" class="good-item">
|
||||||
|
<div class="good-img">
|
||||||
|
<costomImg
|
||||||
|
:url="'images/ecommerce/' + 'pic.png'"
|
||||||
|
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
|
||||||
|
:is-view="false"
|
||||||
|
></costomImg>
|
||||||
|
</div>
|
||||||
|
<div class="good-info">
|
||||||
|
<div class="good-info-pos">
|
||||||
|
<div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="good-price-num">
|
||||||
|
<div class="good-price-num-pos">
|
||||||
|
<div class="price">{{ g.price }} / {{ g.unit }}</div>
|
||||||
|
<div class="total">{{ g.price }}</div>
|
||||||
|
<div class="num">
|
||||||
|
<div class="right-item">
|
||||||
|
<el-input-number v-model="g.num" :min="1">
|
||||||
|
<template #suffix>
|
||||||
|
<span>{{ g.unit }}</span>
|
||||||
|
</template>
|
||||||
|
</el-input-number>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="good-total">
|
||||||
|
{{ (g.price * g.num).toFixed(2) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-item-bottom">
|
||||||
|
<div class="num-total">
|
||||||
|
共
|
||||||
|
<span class="num-val">{{ totalNum }}</span
|
||||||
|
>件商品
|
||||||
|
</div>
|
||||||
|
<div class="price-total">
|
||||||
|
<div class="amount cost-item">
|
||||||
|
<span>商品总价：</span>
|
||||||
|
<span class="coat-val">{{ totalAmout.toFixed(2) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="freight cost-item">
|
||||||
|
<span>运费：</span>
|
||||||
|
<span class="coat-val">{{ carriage.toFixed(2) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="order-bottom">
|
||||||
|
<div class="bottom-total">
|
||||||
|
<span class="tips">实付款</span>
|
||||||
|
<span class="total">{{ (totalAmout + carriage).toFixed(2) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-do">
|
||||||
|
<el-button type="primary" @click="toSureOrder">提交订单</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed } from 'vue';
|
||||||
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
|
import userHeader from './components/userHeader.vue';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const addrlist = reactive([
|
||||||
|
{ id: '001', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 101', linkName: '李先生', phone: '13813575526' },
|
||||||
|
{ id: '002', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王先生', phone: '13813575528' },
|
||||||
|
{ id: '003', region: '云南省 昆明市 呈贡区 彩云北路', addr: '星光小区 一单元 1楼 101', linkName: '李女士', phone: '13813575527' },
|
||||||
|
{ id: '004', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王女生', phone: '13813565525' },
|
||||||
|
{ id: '005', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 105', linkName: '张女生', phone: '13813565526' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
let currentAddr = ref('001');
|
||||||
|
|
||||||
|
const selectAddr = (data) => {
|
||||||
|
currentAddr.value = data;
|
||||||
|
};
|
||||||
|
|
||||||
|
let datalist = reactive([
|
||||||
|
{
|
||||||
|
id: '01',
|
||||||
|
shop: '银河生态农产品有限公司',
|
||||||
|
shopimg: '',
|
||||||
|
ischeck: false,
|
||||||
|
goodlist: [
|
||||||
|
{ id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.9, unit: '份', num: 2, ischeck: false },
|
||||||
|
{ id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.6, unit: '份', num: 100, ischeck: false },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '02',
|
||||||
|
shop: '方立生态农产品有限公司',
|
||||||
|
shopimg: '',
|
||||||
|
ischeck: false,
|
||||||
|
goodlist: [{ id: '001', title: '勐撒镇 原生态 有机 大白菜', price: 4.9, unit: '份', num: 2, ischeck: false }],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const toSureOrder = () => {
|
||||||
|
router.push('/sub-operation-service/userCenter-orderSuccess');
|
||||||
|
};
|
||||||
|
|
||||||
|
let carriage = ref(98);
|
||||||
|
let totalAmout = computed(() => {
|
||||||
|
let num = 0;
|
||||||
|
let list = [];
|
||||||
|
if (datalist && datalist.length > 0) {
|
||||||
|
list = datalist
|
||||||
|
.map((m) => {
|
||||||
|
return m.goodlist;
|
||||||
|
})
|
||||||
|
.flat();
|
||||||
|
|
||||||
|
// console.info('totalAmout**************', list);
|
||||||
|
if (list && list.length > 0) {
|
||||||
|
num = list.reduce((acc, current) => {
|
||||||
|
return acc + current.price * current.num;
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return num;
|
||||||
|
});
|
||||||
|
|
||||||
|
let totalNum = computed(() => {
|
||||||
|
let num = 0;
|
||||||
|
let list = [];
|
||||||
|
if (datalist && datalist.length > 0) {
|
||||||
|
list = datalist
|
||||||
|
.map((m) => {
|
||||||
|
return m.goodlist;
|
||||||
|
})
|
||||||
|
.flat();
|
||||||
|
|
||||||
|
if (list && list.length > 0) {
|
||||||
|
num = list.reduce((acc, current) => {
|
||||||
|
return acc + 1;
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return num;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.sure-order-warp {
|
||||||
|
width: 100%;
|
||||||
|
.addr-list {
|
||||||
|
background: $color-fff;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 16px 0;
|
||||||
|
.addr-list-top {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
.back {
|
||||||
|
font-size: 20px;
|
||||||
|
.el-icon {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.el-icon,
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addr-manage {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.scrollbar-flex-content {
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.addr-item {
|
||||||
|
width: 280px;
|
||||||
|
padding: 16px 8px;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
cursor: pointer;
|
||||||
|
background: $color-fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
&.addr-item-act {
|
||||||
|
border: 1px solid $color-main;
|
||||||
|
.iconfont {
|
||||||
|
color: $color-main !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.addr-item-normal {
|
||||||
|
border: 1px solid $color-da;
|
||||||
|
}
|
||||||
|
.addr-item-icon,
|
||||||
|
.addr-item-info {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.addr-item-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.iconfont {
|
||||||
|
font-size: 20px;
|
||||||
|
color: $color-666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addr-item-info {
|
||||||
|
font-size: 15px;
|
||||||
|
padding-left: 8px;
|
||||||
|
line-height: 24px;
|
||||||
|
.region,
|
||||||
|
.link-name {
|
||||||
|
color: $color-999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info {
|
||||||
|
background: $color-fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 340px);
|
||||||
|
position: relative;
|
||||||
|
padding: 16px;
|
||||||
|
.order-info-top,
|
||||||
|
.order-bottom,
|
||||||
|
.order-info-list {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.order-info-top {
|
||||||
|
top: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.order-bottom {
|
||||||
|
bottom: 0;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.bottom-total,
|
||||||
|
.bottom-do {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.bottom-total {
|
||||||
|
.tips,
|
||||||
|
.total {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.tips {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.total {
|
||||||
|
font-size: 42px;
|
||||||
|
color: $color-main;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
.total::before {
|
||||||
|
content: '￥';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom-do {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
display: inline-flex;
|
||||||
|
::v-deep() {
|
||||||
|
.el-button {
|
||||||
|
font-size: 18px !important;
|
||||||
|
padding: 0 40px !important;
|
||||||
|
line-height: 42px !important;
|
||||||
|
height: 42px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order-info-list {
|
||||||
|
top: 60px;
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
height: calc(100% - 150px);
|
||||||
|
background: $color-f5;
|
||||||
|
left: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
position: relative;
|
||||||
|
.content-item-warp {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
.content-item-header {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
.header-th {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 32px;
|
||||||
|
color: $color-999;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
&.first {
|
||||||
|
width: 340px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
&.other {
|
||||||
|
width: calc((100% - 340px) / 4);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-item-list {
|
||||||
|
width: 100%;
|
||||||
|
top: 48px;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
overflow-y: auto;
|
||||||
|
height: calc(100% - 100px);
|
||||||
|
}
|
||||||
|
.content-item {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
.shop-info {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
.shop-do,
|
||||||
|
.shop-img,
|
||||||
|
.shop-name {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.shop-img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.shop-do {
|
||||||
|
width: 30px;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.shop-name {
|
||||||
|
width: calc(100% - 62px);
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.good-list {
|
||||||
|
width: 100%;
|
||||||
|
.good-item {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
padding-left: 16px;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
.good-do,
|
||||||
|
.good-img,
|
||||||
|
.good-info,
|
||||||
|
.good-price-num {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.good-do {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.good-do-pos {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.good-img {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.good-info {
|
||||||
|
width: 200px;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.good-info-pos {
|
||||||
|
font-size: 18px;
|
||||||
|
color: $color-666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.good-price-num {
|
||||||
|
width: calc(100% - 340px);
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.good-price-num-pos {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 16px;
|
||||||
|
.price,
|
||||||
|
.total {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.total {
|
||||||
|
color: $color-main;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.total::before {
|
||||||
|
content: '￥';
|
||||||
|
}
|
||||||
|
.good-total {
|
||||||
|
color: $color-main;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item-bottom {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: -8px;
|
||||||
|
line-height: 48px;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.num-total,
|
||||||
|
.price-total {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 20px;
|
||||||
|
.cost-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 16px;
|
||||||
|
.coat-val::before {
|
||||||
|
content: '￥';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.num-total {
|
||||||
|
.num-val {
|
||||||
|
color: $color-main;
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user