119 lines
3.5 KiB
PHP
119 lines
3.5 KiB
PHP
<style>
|
||
.logistics-list{
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
.country{
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
.country .country-name{
|
||
margin-left: 5px;
|
||
cursor: pointer;
|
||
-webkit-user-select: none; /* Safari */
|
||
-moz-user-select: none; /* Firefox */
|
||
-ms-user-select: none; /* IE 10+ */
|
||
user-select: none; /* 标准语法 */
|
||
}
|
||
.country .country-name i{
|
||
margin-left: 3px;
|
||
}
|
||
</style>
|
||
<template id="select-logistics">
|
||
<el-dialog custom-class="mobileWidth" title="{{ __('admin/logistics.choose_logistics') }}" :visible.sync="is_show" width="80%" @close="closeSelectLogistics">
|
||
{{--国家信息--}}
|
||
<div class="country" v-if="Object.keys(country).length > 0">
|
||
{{ __('shop/products.ship_to') }}：
|
||
<div class="wh-20 border d-flex justify-content-center rounded-2 align-items-center">
|
||
<img :src="country.icon" class="img-fluid rounded-2">
|
||
</div>
|
||
<div class="country-name">@{{ country.name }}</div>
|
||
</div>
|
||
{{--物流列表--}}
|
||
<div class="logistics-list" v-if="Object.keys(logistics_list).length > 0">
|
||
<el-table :data="logistics_list" style="width: 100%">
|
||
<el-table-column label="{{ __('admin/logistics.logistics_name') }}" prop="name" min-width="130"></el-table-column>
|
||
<el-table-column label="{{ __('admin/logistics.estimated_time') }}" prop="estimated_time" min-width="200"></el-table-column>
|
||
<el-table-column label="{{ __('shop/carts.shipping_fee') }}" prop="shipping_fee" min-width="120"></el-table-column>
|
||
<el-table-column label="{{ __('common.action') }}" width="80">
|
||
<template #default="scope">
|
||
<el-button type="success" circle @click="selectedLogistics(scope.row)">
|
||
<i class="bi bi-check-lg"></i>
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<el-empty v-else description="{{ __('common.no_data') }}" />
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
Vue.component('select-logistics', {
|
||
template: '#select-logistics',
|
||
props: {
|
||
country_id:{
|
||
default: 0,
|
||
type: [Number,String],
|
||
},
|
||
goods_list:{
|
||
default: {},
|
||
type: [Object,Array],
|
||
}
|
||
},
|
||
data: function () {
|
||
return {
|
||
is_show: false,
|
||
logistics_list: {},
|
||
country: {},
|
||
}
|
||
},
|
||
watch:{
|
||
country_id(){
|
||
this.getLogisticsList();
|
||
}
|
||
},
|
||
computed: {},
|
||
beforeMount() {},
|
||
mounted(){
|
||
this.getLogisticsList()
|
||
},
|
||
methods: {
|
||
// 显示选择器
|
||
showSelectLogistics() {
|
||
this.is_show = true;
|
||
},
|
||
// 关闭选择器
|
||
closeSelectLogistics() {
|
||
this.is_show = false;
|
||
},
|
||
// 列表获取
|
||
getLogisticsList(){
|
||
let _this = this;
|
||
// 发起请求
|
||
$http.post(`products/productsLogistics`, {
|
||
country_id: _this.country_id,
|
||
goods_list: JSON.stringify(_this.goods_list),
|
||
}).then((res) => {
|
||
if(res.status === 'success'){
|
||
_this.logistics_list = Object.values(Object.assign({},res.data.list || {})) ;
|
||
_this.country = res.data.country || {};
|
||
}
|
||
})
|
||
},
|
||
// 切换物流选中
|
||
selectedLogistics(item){
|
||
let _this = this;
|
||
_this.closeSelectLogistics();
|
||
_this.$message.success("{{ __('common.edit_success') }}");
|
||
_this.$emit('change-info',item);
|
||
}
|
||
|
||
|
||
}
|
||
});
|
||
</script>
|