This commit is contained in:
pushuo 2022-06-30 20:53:35 +08:00
parent da9a007bac
commit b968596fc5
4 changed files with 128 additions and 27 deletions

View File

@ -46,8 +46,8 @@
<th>操作</th>
</tr>
</thead>
<tbody v-if="form.address.length">
<tr v-for="address, index in form.address" :key="index">
<tbody v-if="addresses.length">
<tr v-for="address, index in addresses" :key="index">
<td>@{{ index }}</td>
<td>@{{ address.name }}</td>
<td>@{{ address.phone }}</td>
@ -55,7 +55,7 @@
<td>222</td>
<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(index)">删除</button>
<button class="btn btn-outline-danger btn-sm ml-1" type="button" @click="deleteAddress(address.id, index)">删除</button>
</td>{{--
</tr> --}}
</tbody>
@ -139,14 +139,16 @@
password: '',
customer_group_id: 1,
status: @json($customer['status']) * 1,
address: []
},
addresses: @json($customer['addresses'] ?? []),
source: {
customer_group: @json($customer_groups ?? []),
countries: @json($countries ?? []),
zones: []
},
dialogAddress: {
show: false,
index: null,
@ -161,9 +163,11 @@
address_2: '',
}
},
rules: {
name: [{required: true, message: '请输入用户名', trigger: 'blur'}, ],
},
addressRules: {
name: [{required: true, message: '请输入姓名', trigger: 'blur'}, ],
phone: [{required: true, message: '请输入联系电话', trigger: 'blur'}, ],
@ -202,44 +206,52 @@
editAddress(index) {
if (typeof index == 'number') {
this.dialogAddress.index = index;
this.$nextTick(() => {
this.dialogAddress.form = JSON.parse(JSON.stringify(this.form.address[index]))
})
this.dialogAddress.form = JSON.parse(JSON.stringify(this.addresses[index]))
}
this.dialogAddress.show = true
},
deleteAddress(index) {
this.form.address.splice(index, 1)
deleteAddress(id, index) {
const self = this;
$.ajax({
url: `/admin/customers/{{ $customer['id'] }}/addresses/${id}`,
type: 'delete',
success: function(res) {
self.$message.success(res.message);
self.addresses.splice(index, 1)
}
})
},
addressFormSubmit(form) {
const self = this;
this.$refs[form].validate((valid) => {
if (!valid) {
this.$message.error('请检查表单是否填写正确');
return;
}
if (this.dialogAddress.index === null) {
this.form.address.push(JSON.parse(JSON.stringify(this.dialogAddress.form)));
} else {
this.form.address[this.dialogAddress.index] = JSON.parse(JSON.stringify(this.dialogAddress.form));
}
const type = this.dialogAddress.form.id ? 'put' : 'post';
$.ajax({
url: `/admin/countries/{{ $customer['id'] }}/addresses`,
data: this.dialogAddress.form,
type: 'post',
url: `/admin/customers/{{ $customer['id'] }}/addresses${type == 'put' ? '/' + this.dialogAddress.form.id : ''}`,
data: self.dialogAddress.form,
type: type,
success: function(res) {
console.log(res)
if (type == 'post') {
self.addresses.push(res.data)
} else {
self.addresses[self.dialogAddress.index] = res.data
}
self.$message.success(res.message);
self.$refs[form].resetFields();
self.dialogAddress.show = false
self.dialogAddress.index = null;
}
})
this.$refs[form].resetFields();
this.dialogAddress.show = false
this.dialogAddress.index = null;
});
},

View File

@ -35,7 +35,7 @@
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="switch-1"
{{ $plugin->enabled ? 'checked' : '' }} data-code="{{ $plugin->code }}">
{{ $plugin->getEnabled() ? 'checked' : '' }} data-code="{{ $plugin->code }}">
<label class="form-check-label" for="switch-1"></label>
</div>
</td>

View File

@ -68,4 +68,8 @@ $dropdown-item-padding-y: .4rem;
margin-right: 1rem;
opacity: .1;
}
}
.table > :not(:first-child) {
border-top: none;
}

View File

@ -2,8 +2,14 @@
@section('body-class', 'page-checkout')
@push('header')
<script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
<script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script>
<link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}">
@endpush
@section('content')
<div class="container">
<div class="container" id="checkout-app" v-cloak>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
@ -20,7 +26,7 @@
<form action="">
<div class="checkout-address">
<h4 class="title">地址</h4>
<div class="row mb-3">
{{-- <div class="row mb-3">
<div class="col-12 col-md-6 mb-3">
<div class="form-floating">
<input type="text" name="email" class="form-control" value="" placeholder="姓名">
@ -77,7 +83,40 @@
<label class="form-label" for="email_1">address 2</label>
</div>
</div>
</div>
</div> --}}
<table class="table">
<thead>
<tr>
<th>#</th>
<th>名称</th>
<th>电话</th>
<th>注册来源</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody v-if="source.address.length">
<tr v-for="address, index in source.address" :key="index">
<td>@{{ index }}</td>
<td>@{{ address.name }}</td>
<td>@{{ address.phone }}</td>
<td>222</td>
<td>222</td>
<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> --}}
</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> --}}
</tbody>
</table>
<h4 class="title">支付方式</h4>
<div class="row mb-3">
@ -137,6 +176,52 @@
@endsection
@push('add-scripts')
<script>
new Vue({
el: '#checkout-app',
data: {
form: {
},
source: {
address: []
},
dialogAddress: {
show: false,
index: null,
form: {
name: '',
phone: '',
country_id: @json(setting('country_id')) * 1,
zipcode: '',
zone_id: '',
city_id: '',
address_1: '',
address_2: '',
}
},
},
beforeMount () {
},
methods: {
editAddress(index) {
if (typeof index == 'number') {
this.dialogAddress.index = index;
this.$nextTick(() => {
this.dialogAddress.form = JSON.parse(JSON.stringify(this.form.address[index]))
})
}
this.dialogAddress.show = true
},
}
})
$(function() {
const totalWrapTop = $('.total-wrap').offset().top;
const totalWrapWidth = $('.total-wrap').outerWidth();