This commit is contained in:
pushuo 2022-06-30 21:35:38 +08:00
parent 4519a93599
commit f42b378d78
5 changed files with 167 additions and 13 deletions

View File

@ -546,3 +546,61 @@ body.page-checkout .total-wrap .totals > li > span:first-of-type {
body.page-checkout .total-wrap .totals > li > span:last-of-type {
color: #dc3545;
}
body.page-checkout .addresses-wrap {
margin-bottom: 2rem;
}
body.page-checkout .addresses-wrap .item {
position: relative;
padding: 20px 20px 30px;
margin-bottom: 10px;
border: 1px solid #e8e8e8;
height: 155px;
cursor: pointer;
}
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-checkout .addresses-wrap .item.add-addres i {
font-size: 2rem;
}
body.page-checkout .addresses-wrap .item:hover {
border-color: #222;
}
body.page-checkout .addresses-wrap .item.active {
border-left: none;
}
body.page-checkout .addresses-wrap .item.active:before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 4px;
height: calc(100% + 2px);
background-color: #4991F4;
background: repeating-linear-gradient(-45deg, #d60404 0, #d60404 10px, #fff 10px, #fff 20px, #4991F4 20px, #4991F4 30px, #fff 30px, #fff 40px);
}
body.page-checkout .addresses-wrap .item .name-wrap {
margin-bottom: 0.5rem;
}
body.page-checkout .addresses-wrap .item .name-wrap .name {
font-size: 1rem;
font-weight: bold;
}
body.page-checkout .addresses-wrap .item .name-wrap .phone {
font-size: 0.8rem;
color: #666;
}
body.page-checkout .addresses-wrap .item .zipcode {
margin-bottom: 0.5rem;
}
body.page-checkout .addresses-wrap .item .address-info {
margin-bottom: 0.5rem;
}
body.page-checkout .addresses-wrap .item .address-bottom a {
color: #2d68a8;
}

View File

@ -18032,3 +18032,7 @@ textarea.form-control-lg {
margin-right: 1rem;
opacity: 0.1;
}
.table > :not(:first-child) {
border-top: none;
}

View File

@ -56,15 +56,13 @@
<td>
<button class="btn btn-outline-secondary btn-sm" type="button" @click="editAddress(index)">编辑</button>
<button class="btn btn-outline-danger btn-sm ml-1" type="button" @click="deleteAddress(address.id, index)">删除</button>
</td>{{--
</tr> --}}
</td>
</tbody>
<tbody v-else>
<tr>
<td colspan="6" class="text-center">
<span class="me-2">当前账号无地址</span> <el-link type="primary" @click="editAddress">新增地址</el-link>
</td>{{--
</tr> --}}
</td>
</tbody>
</table>
</el-tab-pane>

View File

@ -93,4 +93,78 @@ body.page-checkout {
}
}
}
.addresses-wrap {
margin-bottom: 2rem;
.item {
position: relative;
padding: 20px 20px 30px;
margin-bottom: 10px;
border: 1px solid #e8e8e8;
height: 155px;
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;
}
&.active {
border-left: none;
&:before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 4px;
height: calc(100% + 2px);
background-color: #4991F4;
background: repeating-linear-gradient(-45deg, #d60404 0, #d60404 10px, #fff 10px, #fff 20px, #4991F4 20px, #4991F4 30px, #fff 30px, #fff 40px);
}
}
.name-wrap {
margin-bottom: .5rem;
.name {
font-size: 1rem;
font-weight: bold;
}
.phone {
font-size: .8rem;
color: #666;
}
}
.zipcode {
margin-bottom: .5rem;
}
.address-info {
margin-bottom: .5rem;
}
.address-bottom {
a {
color: #2d68a8;
}
}
}
}
}

View File

@ -85,7 +85,7 @@
</div>
</div> --}}
<table class="table">
{{-- <table class="table">
<thead>
<tr>
<th>#</th>
@ -96,8 +96,8 @@
<th>操作</th>
</tr>
</thead>
<tbody v-if="source.address.length">
<tr v-for="address, index in source.address" :key="index">
<tbody v-if="source.addresses.length">
<tr v-for="address, index in source.addresses" :key="index">
<td>@{{ index }}</td>
<td>@{{ address.name }}</td>
<td>@{{ address.phone }}</td>
@ -106,17 +106,36 @@
<td>
<button class="btn btn-outline-secondary btn-sm" type="button" @click="editAddress(index)">编辑</button>
<button class="btn btn-outline-danger btn-sm ml-1" type="button">删除</button>
</td>{{--
</tr> --}}
</td>
</tbody>
<tbody v-else>
<tr>
<td colspan="6" class="text-center">
<span class="me-2">当前账号无地址</span> <el-link type="primary" @click="editAddress">新增地址</el-link>
</td>{{--
</tr> --}}
</td>
</tbody>
</table>
</table> --}}
<div class="addresses-wrap">
<div class="row">
<div class="col-4" v-for="address, index in source.addresses" :key="index" v-if="source.addresses.length">
<div :class="['item', address.id == form.shipping_address_id ? 'active' : '']">
<div class="name-wrap">
<span class="name">@{{ address.name }}</span>
<span class="phone">@{{ address.phone }}</span>
</div>
<div class="zipcode">@{{ address.zipcode }}</div>
<div class="address-info">@{{ address.country_id }} @{{ address.zone_id }}</div>
<div class="address-bottom">
<a class="">编辑</a>
</div>
</div>
</div>
<div class="col-4">
<div class="item add-addres"><i class="bi bi-plus-square-dotted"></i> 添加新地址</div>
</div>
</div>
</div>
<h4 class="title">支付方式</h4>
<div class="row mb-3">
@ -181,10 +200,11 @@
data: {
form: {
shipping_address_id: 7,
},
source: {
address: []
addresses: @json($addresses ?? []),
},
dialogAddress: {