价格展示相关优化，拼团活动返回不刷新问题处理
Chopper
parent
07445e42e3
commit
647ed90eac
|
|
@ -90,14 +90,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="width_150">
|
||||
{{ goods.goodsSku.price | unitPrice("￥") }}
|
||||
{{ goods.purchasePrice | unitPrice("￥") }}
|
||||
</div>
|
||||
<div class="width_100">
|
||||
<InputNumber :min="1" size="small" v-model="goods.num" @on-change="changeNum(goods.num, goods.goodsSku.id)"></InputNumber>
|
||||
<div class="fontsize_12">{{goods.goodsSku.quantity > 0 ? '有货' : '无货'}}</div>
|
||||
</div>
|
||||
<div class="width_150">
|
||||
{{ goods.num * goods.goodsSku.price | unitPrice("￥") }}
|
||||
{{ goods.subTotal | unitPrice("￥") }}
|
||||
</div>
|
||||
<div class="width_100">
|
||||
<span class="handle-btn" v-if="!goods.errorMessage" @click="delGoods(goods.goodsSku.id)">删除</span>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,8 @@
|
|||
<Tag class="ml_10" v-if="item.isDefault" color="red">默认</Tag>
|
||||
<Tag class="ml_10" v-if="item.alias" color="warning">{{
|
||||
item.alias
|
||||
}}</Tag>
|
||||
}}
|
||||
</Tag>
|
||||
</div>
|
||||
<div>{{ item.mobile }}</div>
|
||||
<div>
|
||||
|
|
@ -120,12 +121,12 @@
|
|||
}}</span>
|
||||
</span>
|
||||
<span class="goods-price">{{
|
||||
goods.goodsSku.price | unitPrice("￥")
|
||||
goods.purchasePrice | unitPrice("￥")
|
||||
}}</span>
|
||||
<span>x{{ goods.num }}</span>
|
||||
<span>{{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}</span>
|
||||
<span class="goods-price">{{
|
||||
(goods.goodsSku.price * goods.num) | unitPrice("￥")
|
||||
goods.subTotal | unitPrice("￥")
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -219,21 +220,27 @@
|
|||
<span>{{ totalNum }}件商品，总商品金额：</span
|
||||
><span>{{ priceDetailDTO.goodsPrice | unitPrice("￥") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="priceDetailDTO.freightPrice>0">
|
||||
<span>运费：</span
|
||||
><span>{{ priceDetailDTO.freightPrice | unitPrice("￥") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="priceDetailDTO.discountPrice>0">
|
||||
<span>优惠金额：</span
|
||||
><span
|
||||
>-{{
|
||||
(priceDetailDTO.discountPrice +
|
||||
priceDetailDTO.couponPrice +
|
||||
priceDetailDTO.updatePrice)
|
||||
| unitPrice("￥")
|
||||
priceDetailDTO.discountPrice | unitPrice("￥")
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div v-if="priceDetailDTO.couponPrice>0">
|
||||
<span>优惠券金额：</span
|
||||
><span
|
||||
>-{{
|
||||
priceDetailDTO.couponPrice | unitPrice("￥")
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-if="$route.query.way === 'POINTS'">
|
||||
<span>应付积分：</span
|
||||
><span class="actrual-price">{{
|
||||
|
|
@ -286,6 +293,7 @@ import {
|
|||
couponNum
|
||||
} from '@/api/cart';
|
||||
import {canUseCouponList} from '@/api/member.js';
|
||||
|
||||
export default {
|
||||
name: 'Pay',
|
||||
components: {invoiceModal, addressManage},
|
||||
|
|
@ -459,7 +467,8 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => {}
|
||||
onCancel: () => {
|
||||
}
|
||||
});
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
|
|
@ -567,30 +576,36 @@ export default {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 20px auto 0;
|
||||
|
||||
div:nth-child(1) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
width: 200px;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
margin: 0 20px;
|
||||
|
||||
span {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-steps {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
@include content_color($light_content_color);
|
||||
height: 30px;
|
||||
|
|
@ -616,6 +631,7 @@ export default {
|
|||
color: #ff8f23;
|
||||
}
|
||||
}
|
||||
|
||||
/** logo end */
|
||||
/** content start */
|
||||
.content {
|
||||
|
|
@ -624,10 +640,12 @@ export default {
|
|||
min-height: 200px;
|
||||
padding: 15px 25px;
|
||||
}
|
||||
|
||||
/** 地址管理 */
|
||||
.address-manage {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> div {
|
||||
border: 1px dotted #949494;
|
||||
width: 265px;
|
||||
|
|
@ -637,47 +655,58 @@ export default {
|
|||
cursor: pointer;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.add-address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.ivu-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.address-item {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
|
||||
> div:nth-child(1) {
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> span:nth-child(1) {
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
color: $theme_color;
|
||||
|
||||
span:hover {
|
||||
border-bottom: 1px solid $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
.corner-icon {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
|
||||
div {
|
||||
width: 0;
|
||||
border-top: 20px solid transparent;
|
||||
border-right: 20px solid $theme_color;
|
||||
}
|
||||
|
||||
.ivu-icon {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
|
|
@ -688,29 +717,36 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-red {
|
||||
border-color: $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
/** 购买商品列表 start */
|
||||
.shop-name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
|
||||
.ivu-icon {
|
||||
color: #ff8f23;
|
||||
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> span:nth-child(2) {
|
||||
color: #999;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.delivery-list {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -722,19 +758,23 @@ export default {
|
|||
width: 200px;
|
||||
min-height: 100px;
|
||||
padding: 10px;
|
||||
|
||||
li {
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
background-color: #f8f8f8;
|
||||
margin: 10px 0 20px 0;
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -742,34 +782,42 @@ export default {
|
|||
padding: 20px 0;
|
||||
margin: 0 20px;
|
||||
border-bottom: 1px dotted #999;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
> span {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
> span:nth-child(1) {
|
||||
font-size: 12px;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
color: $theme_color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-mark {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
/** 购买商品列表 end */
|
||||
/** 发票信息 start */
|
||||
.invoice {
|
||||
|
|
@ -781,6 +829,7 @@ export default {
|
|||
margin: 0 0 0 10px;
|
||||
font-size: 12px !important;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
|
|
@ -791,6 +840,7 @@ export default {
|
|||
position: absolute;
|
||||
left: -9px;
|
||||
}
|
||||
|
||||
.ivu-icon {
|
||||
color: #ff8f23;
|
||||
margin-right: 3px;
|
||||
|
|
@ -798,19 +848,23 @@ export default {
|
|||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.inovice-content {
|
||||
> span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 发票信息 end */
|
||||
|
||||
/** 订单价格 */
|
||||
|
|
@ -819,18 +873,21 @@ export default {
|
|||
margin-top: 30px;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
|
||||
> div > span:nth-child(2) {
|
||||
width: 130px;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.actrual-price {
|
||||
color: $theme_color;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/** content end */
|
||||
/** 底部支付栏 */
|
||||
.order-footer {
|
||||
|
|
@ -842,11 +899,14 @@ export default {
|
|||
flex-direction: row-reverse;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 10px auto;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
|
||||
.pay {
|
||||
background-color: $theme_color;
|
||||
width: 150px;
|
||||
|
|
@ -857,6 +917,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/** 公共表头 */
|
||||
.card-head {
|
||||
display: flex;
|
||||
|
|
@ -868,44 +929,54 @@ export default {
|
|||
span:nth-child(1) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
color: #438cde;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-divider {
|
||||
background: $theme_color;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.pay-address {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.more-addr {
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.coupon-item {
|
||||
width: 260px;
|
||||
height: 125px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.c-right {
|
||||
width: 30px;
|
||||
padding: 10px 7px;
|
||||
}
|
||||
|
||||
b {
|
||||
background: url("../../assets/images/small-circle.png") top left repeat-y;
|
||||
right: 28px;
|
||||
}
|
||||
|
||||
.circle-top,
|
||||
.circle-bottom {
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
.used {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
|
|
@ -914,6 +985,7 @@ export default {
|
|||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
max-height: 260px;
|
||||
overflow: scroll;
|
||||
|
|
|
|||
|
|
@ -285,13 +285,6 @@ export default {
|
|||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
// 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
|
||||
beforeRouteLeave(to, from, next){
|
||||
if(to.name === 'pintuan') {
|
||||
to.meta.keepAlive = true
|
||||
}
|
||||
next()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue