This commit is contained in:
pushuo 2022-07-07 19:01:51 +08:00
parent a64bff4f6f
commit cf847a253f
4 changed files with 76 additions and 30 deletions

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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 {

View File

@ -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
}