wip
This commit is contained in:
parent
a64bff4f6f
commit
cf847a253f
|
|
@ -532,6 +532,15 @@ body.page-checkout .radio-line-wrap .radio-line-item .right .title {
|
|||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
body.page-checkout .addresses-wrap .item.address-right {
|
||||
padding: 0 2.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body.page-checkout .checkout-black, body.page-bk-stripe .checkout-black {
|
||||
margin-bottom: 2.6rem;
|
||||
|
|
@ -550,6 +559,9 @@ body.page-checkout .checkout-title, body.page-bk-stripe .checkout-title {
|
|||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body.page-checkout .checkout-title:before, body.page-bk-stripe .checkout-title:before {
|
||||
content: "";
|
||||
|
|
@ -560,6 +572,12 @@ body.page-checkout .checkout-title:before, body.page-bk-stripe .checkout-title:b
|
|||
width: 3px;
|
||||
height: 16px;
|
||||
}
|
||||
body.page-checkout .checkout-title .btn, body.page-bk-stripe .checkout-title .btn {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
body.page-checkout .checkout-title .btn.icon, body.page-bk-stripe .checkout-title .btn.icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
body.page-checkout .total-wrap, body.page-bk-stripe .total-wrap {
|
||||
padding: 1.4rem;
|
||||
border: 3px solid #efefef;
|
||||
|
|
@ -750,17 +768,6 @@ body.page-account-address .addresses-wrap .item, body.page-checkout .addresses-w
|
|||
height: 130px;
|
||||
cursor: pointer;
|
||||
}
|
||||
body.page-account-address .addresses-wrap .item.add-addres, body.page-checkout .addresses-wrap .item.add-addres {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
}
|
||||
body.page-account-address .addresses-wrap .item.add-addres i, body.page-checkout .addresses-wrap .item.add-addres i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
body.page-account-address .addresses-wrap .item:hover, body.page-checkout .addresses-wrap .item:hover {
|
||||
border-color: #222;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,20 +14,6 @@ body.page-account-address, body.page-checkout {
|
|||
height: 130px;
|
||||
cursor: pointer;
|
||||
|
||||
&.add-addres {
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: center; // flex-end | center | space-between
|
||||
flex-direction: column;
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
// flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #222;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,32 @@ body.page-checkout {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addresses-wrap {
|
||||
.item {
|
||||
&.address-right {
|
||||
padding: 0 2.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: auto;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
// .add-addres {
|
||||
// display: flex;
|
||||
// align-items: center; // flex-start | center
|
||||
// justify-content: center; // flex-end | center | space-between
|
||||
// flex-direction: column;
|
||||
// font-size: 1rem;
|
||||
// color: #666;
|
||||
|
||||
// i {
|
||||
// font-size: 2rem;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
body.page-checkout, body.page-bk-stripe {
|
||||
|
|
@ -59,6 +85,9 @@ body.page-checkout, body.page-bk-stripe {
|
|||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: space-between; // flex-end | center | space-between
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
|
@ -69,6 +98,13 @@ body.page-checkout, body.page-bk-stripe {
|
|||
width: 3px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-bottom: -10px;
|
||||
&.icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-wrap {
|
||||
|
|
|
|||
|
|
@ -24,10 +24,13 @@
|
|||
<div class="row mt-5">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="checkout-black">
|
||||
<h5 class="checkout-title">地址</h5>
|
||||
<div class="checkout-title">
|
||||
<h5 class="mb-0">地址</h5>
|
||||
<button class="btn btn-sm icon" v-if="isAllAddress" @click="isAllAddress = false"><i class="bi bi-x-lg"></i></button>
|
||||
</div>
|
||||
<div class="addresses-wrap">
|
||||
<div class="row">
|
||||
<div class="col-6" v-for="address, index in source.addresses" :key="index" v-if="source.addresses.length">
|
||||
<div class="col-6" v-for="address, index in source.addresses" :key="index" v-if="source.addresses.length &&( address.id == form.shipping_address_id || isAllAddress)">
|
||||
<div :class="['item', address.id == form.shipping_address_id ? 'active' : '']" @click="updateCheckout(address.id, 'shipping_address_id')">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ address.name }}</span>
|
||||
|
|
@ -41,8 +44,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="item add-addres" @click="editAddress"><i class="bi bi-plus-square-dotted"></i> 添加新地址</div>
|
||||
<div class="col-6" v-if="!isAllAddress">
|
||||
<div class="item address-right">
|
||||
<button class="btn btn-outline-dark w-100 mb-3" @click="isAllAddress = true">选择其他地址</button>
|
||||
<button class="btn btn-outline-dark w-100" @click="editAddress"><i class="bi bi-plus-square-dotted"></i> 添加新地址</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -132,6 +138,8 @@
|
|||
shipping_method_code: @json($current['shipping_method_code']),
|
||||
},
|
||||
|
||||
isAllAddress: false,
|
||||
|
||||
source: {
|
||||
addresses: @json($addresses ?? []),
|
||||
countries: @json($countries ?? []),
|
||||
|
|
@ -166,6 +174,13 @@
|
|||
}
|
||||
},
|
||||
|
||||
// 计算属性
|
||||
computed: {
|
||||
// isAddress: {
|
||||
// this.form.shipping_address_id ==
|
||||
// }
|
||||
},
|
||||
|
||||
beforeMount () {
|
||||
this.countryChange(this.dialogAddress.form.country_id);
|
||||
},
|
||||
|
|
@ -180,7 +195,6 @@
|
|||
})
|
||||
}
|
||||
|
||||
console.log(1)
|
||||
this.dialogAddress.show = true
|
||||
},
|
||||
|
||||
|
|
@ -199,6 +213,9 @@
|
|||
$http[type](url, this.dialogAddress.form).then((res) => {
|
||||
if (type == 'post') {
|
||||
this.source.addresses.push(res.data)
|
||||
this.updateCheckout(res.data.id, 'shipping_address_id')
|
||||
this.form.shipping_address_id = res.data.id
|
||||
|
||||
} else {
|
||||
this.source.addresses[this.dialogAddress.index] = res.data
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue