616 lines
18 KiB
Vue
616 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<common current-name="order">
|
|||
|
|
<template #main>
|
|||
|
|
<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" @click="goAddressList()">管理地址</div>
|
|||
|
|
</div>
|
|||
|
|
<el-scrollbar>
|
|||
|
|
<div class="scrollbar-flex-content">
|
|||
|
|
<div
|
|||
|
|
v-for="(item, index) in addrlist"
|
|||
|
|
:key="item.id"
|
|||
|
|
class="addr-item"
|
|||
|
|
:class="currentAddr == item.id ? 'addr-item-act' : 'addr-item-normal'"
|
|||
|
|
@click="selectAddr(item.id)"
|
|||
|
|
@mouseover="hoverAddr(true, index)"
|
|||
|
|
@mouseleave="hoverAddr(false, index)"
|
|||
|
|
>
|
|||
|
|
<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.postArea || '--' }}</div>
|
|||
|
|
<div class="addr">{{ item.postAddress || '--' }}</div>
|
|||
|
|
<div class="link-name">
|
|||
|
|
{{ item.receiverName }} {{ item.receiverPhone }} <text v-if="currentAddr == item.id" style="color: #25bf82">当前选中</text>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-scrollbar>
|
|||
|
|
</div> -->
|
|||
|
|
|
|||
|
|
<div class="order-info">
|
|||
|
|
<div class="order-info-top">订单信息</div>
|
|||
|
|
<div class="order-statu-info">
|
|||
|
|
<div class="order-statu-info-list">订单编号：{{ datalist[0]?.orderNo }}</div>
|
|||
|
|
<div class="order-statu-info-list">创建时间：{{ datalist[0]?.orderNo }}</div>
|
|||
|
|
<div class="order-statu-info-list">支付时间：{{ datalist[0]?.orderNo }}</div>
|
|||
|
|
</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.orderNo }}</span> -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="n.orderItemInfos && n.orderItemInfos.length > 0" class="good-list">
|
|||
|
|
<div v-for="(g, indexg) in n.orderItemInfos" :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.productName || '--' }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="good-price-num">
|
|||
|
|
<div class="good-price-num-pos">
|
|||
|
|
<div class="price">{{ g.unitPrice }} / {{ g.unit }}</div>
|
|||
|
|
<div class="total">{{ g.unitPrice }}</div>
|
|||
|
|
<div class="num">
|
|||
|
|
<div class="right-item">
|
|||
|
|
<el-input-number v-model="g.quantity" :disabled="true" :min="1">
|
|||
|
|
<template #suffix>
|
|||
|
|
<span>{{ g.unit }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-input-number>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="good-total">
|
|||
|
|
{{ (g.unitPrice * g.quantity).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>
|
|||
|
|
</common>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import { userPostAddress, upOrderInfoList, confirmOrder } from '../../apis/user';
|
|||
|
|
import common from './components/common.vue';
|
|||
|
|
import { ref, reactive, computed, onMounted } from 'vue';
|
|||
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|||
|
|
import userHeader from './components/userHeader.vue';
|
|||
|
|
import { useRoute, useRouter } from 'vue-router';
|
|||
|
|
const router = useRouter();
|
|||
|
|
const route = useRoute();
|
|||
|
|
|
|||
|
|
let addrlist = ref([]);
|
|||
|
|
let currentAddr = ref(0);
|
|||
|
|
let total = ref(99);
|
|||
|
|
let orderList = ref([]);
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
getAddressList();
|
|||
|
|
getOrderInfo();
|
|||
|
|
});
|
|||
|
|
let datalist = ref([
|
|||
|
|
// {
|
|||
|
|
// id: '01',
|
|||
|
|
// shop: '银河生态农产品有限公司',
|
|||
|
|
// shopimg: '',
|
|||
|
|
// ischeck: false,
|
|||
|
|
// orderItemInfos: [
|
|||
|
|
// { 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,
|
|||
|
|
// orderItemInfos: [{ id: '001', title: '勐撒镇 原生态 有机 大白菜', price: 4.9, unit: '份', num: 2, ischeck: false }],
|
|||
|
|
// },
|
|||
|
|
]);
|
|||
|
|
const getAddressList = () => {
|
|||
|
|
userPostAddress().then((res) => {
|
|||
|
|
addrlist.value = res.data.records;
|
|||
|
|
currentAddr.value = addrlist.value[0].id;
|
|||
|
|
console.log(addrlist);
|
|||
|
|
addrlist.value.forEach((item) => {
|
|||
|
|
if (item.isDefault == '1') {
|
|||
|
|
currentAddr.value = item.id;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getOrderInfo = () => {
|
|||
|
|
upOrderInfoList({ id: route.query.id }).then((res) => {
|
|||
|
|
datalist.value = res.data.records;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const goAddressList = () => {
|
|||
|
|
router.push('/sub-operation-service/addressList');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const selectAddr = (data) => {
|
|||
|
|
currentAddr.value = data;
|
|||
|
|
};
|
|||
|
|
//鼠标移入移出事件
|
|||
|
|
const hoverAddr = (data, index) => {
|
|||
|
|
console.log('data', data, index);
|
|||
|
|
addrlist.value.forEach((item, i) => {
|
|||
|
|
if (index == i) {
|
|||
|
|
item.isEditBtn = data;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
//编辑地址
|
|||
|
|
const editAddr = (data) => {
|
|||
|
|
console.log('data', data);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toSureOrder = () => {
|
|||
|
|
confirmOrder({ id: route.query.id, userChooseAddressId: currentAddr.value }).then((res) => {
|
|||
|
|
// router.push('/sub-operation-service/orderSuccess');
|
|||
|
|
router.push({
|
|||
|
|
path: '/sub-operation-service/orderSuccess',
|
|||
|
|
query: { id: route.query.id },
|
|||
|
|
});
|
|||
|
|
// useRouter().push({ path: '/sub-operation-service/orderSuccess' });
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let carriage = ref(0);
|
|||
|
|
let totalAmout = computed(() => {
|
|||
|
|
let num = 0;
|
|||
|
|
let list = [];
|
|||
|
|
if (datalist.value && datalist.value.length > 0) {
|
|||
|
|
list = datalist.value
|
|||
|
|
.map((m) => {
|
|||
|
|
return m.orderItemInfos;
|
|||
|
|
})
|
|||
|
|
.flat();
|
|||
|
|
|
|||
|
|
// console.info('totalAmout**************', list);
|
|||
|
|
if (list && list.length > 0) {
|
|||
|
|
num = list.reduce((acc, current) => {
|
|||
|
|
return acc + current.unitPrice * current.quantity;
|
|||
|
|
}, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return num;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let totalNum = computed(() => {
|
|||
|
|
let num = 0;
|
|||
|
|
let list = [];
|
|||
|
|
if (datalist && datalist.value.length > 0) {
|
|||
|
|
list = datalist.value
|
|||
|
|
.map((m) => {
|
|||
|
|
return m.orderItemInfos;
|
|||
|
|
})
|
|||
|
|
.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 {
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin: 16px 0;
|
|||
|
|
padding: 16px;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
background: $color-fff;
|
|||
|
|
.addr-list-top {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
.back {
|
|||
|
|
font-size: 20px;
|
|||
|
|
.el-icon {
|
|||
|
|
font-size: 30px;
|
|||
|
|
}
|
|||
|
|
.el-icon,
|
|||
|
|
span {
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.addr-manage {
|
|||
|
|
font-size: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.scrollbar-flex-content {
|
|||
|
|
display: flex;
|
|||
|
|
width: fit-content;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
.addr-item {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
padding: 16px 8px;
|
|||
|
|
width: 280px;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
background: $color-fff;
|
|||
|
|
cursor: pointer;
|
|||
|
|
&.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;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
.addr-item-icon {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: $color-666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.addr-item-info {
|
|||
|
|
padding-left: 8px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
.region,
|
|||
|
|
.link-name {
|
|||
|
|
color: $color-999;
|
|||
|
|
position: relative;
|
|||
|
|
.bj {
|
|||
|
|
color: #25bf82;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.order-info {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100vh - 340px);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
background: $color-fff;
|
|||
|
|
.order-info-top,
|
|||
|
|
.order-bottom,
|
|||
|
|
.order-info-list {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
padding: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.order-statu-info {
|
|||
|
|
text-align: left;
|
|||
|
|
margin-top: 40px;
|
|||
|
|
z-index: 1;
|
|||
|
|
padding: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 18px;
|
|||
|
|
.order-statu-info-list {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.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 {
|
|||
|
|
padding-left: 16px;
|
|||
|
|
font-size: 42px;
|
|||
|
|
color: $color-main;
|
|||
|
|
}
|
|||
|
|
.total::before {
|
|||
|
|
content: '￥';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.bottom-do {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
::v-deep() {
|
|||
|
|
.el-button {
|
|||
|
|
display: inline-block !important;
|
|||
|
|
padding: 0 40px !important;
|
|||
|
|
height: 42px !important;
|
|||
|
|
font-size: 18px !important;
|
|||
|
|
line-height: 42px !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.order-info-list {
|
|||
|
|
position: relative;
|
|||
|
|
top: 30px;
|
|||
|
|
left: 16px;
|
|||
|
|
padding: 16px;
|
|||
|
|
width: calc(100% - 32px);
|
|||
|
|
height: calc(100% - 150px);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
background: $color-f5;
|
|||
|
|
.content-item-warp {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
.content-item-header {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
width: 100%;
|
|||
|
|
gap: 16px;
|
|||
|
|
.header-th {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: $color-999;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
line-height: 32px;
|
|||
|
|
&.first {
|
|||
|
|
width: 340px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
&.other {
|
|||
|
|
width: calc((100% - 340px) / 4);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.content-item-list {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 48px;
|
|||
|
|
left: 0;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100% - 100px);
|
|||
|
|
}
|
|||
|
|
.content-item {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
.shop-info {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
width: 100%;
|
|||
|
|
gap: 16px;
|
|||
|
|
.shop-do,
|
|||
|
|
.shop-img,
|
|||
|
|
.shop-name {
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
.shop-img {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.shop-do {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 30px;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.shop-name {
|
|||
|
|
width: calc(100% - 62px);
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.good-list {
|
|||
|
|
width: 100%;
|
|||
|
|
.good-item {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
margin: 8px 0;
|
|||
|
|
padding-left: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
.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 {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 200px;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.good-info-pos {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: $color-666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.good-price-num {
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: calc(100% - 340px);
|
|||
|
|
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 {
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: $color-main;
|
|||
|
|
}
|
|||
|
|
.total::before {
|
|||
|
|
content: '￥';
|
|||
|
|
}
|
|||
|
|
.good-total {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: $color-main;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.content-item-bottom {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -8px;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 2;
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
width: 100%;
|
|||
|
|
line-height: 48px;
|
|||
|
|
.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 {
|
|||
|
|
padding: 0 8px;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: $color-main;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|