wip
This commit is contained in:
parent
4519a93599
commit
f42b378d78
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18032,3 +18032,7 @@ textarea.form-control-lg {
|
|||
margin-right: 1rem;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.table > :not(:first-child) {
|
||||
border-top: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue