添加：总平台 自提点管理
This commit is contained in:
parent
c810ab56ef
commit
f3155b9e31
|
|
@ -592,7 +592,17 @@ export function productEditApi(id, data) {
|
||||||
export function changeProductStatus(id, status) {
|
export function changeProductStatus(id, status) {
|
||||||
return request.post(`store/product/change_status/${id}`, { status })
|
return request.post(`store/product/change_status/${id}`, { status })
|
||||||
}
|
}
|
||||||
|
// 提货点管理 -- 列表获取
|
||||||
|
export function pointGetList(data) {
|
||||||
|
return request.get(`store/point/list`, data)
|
||||||
|
}
|
||||||
|
// 提货点管理 -- 提交编辑
|
||||||
|
export function pointEdit(data) {
|
||||||
|
return request.post(`store/point/edit`, data)
|
||||||
|
}
|
||||||
|
// 提货点管理 -- 列表获取
|
||||||
|
export function pointDel(id) {
|
||||||
|
return request.post(`store/point/del/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -131,8 +131,16 @@ const productRouter =
|
||||||
meta: {
|
meta: {
|
||||||
title: '商品添加',
|
title: '商品添加',
|
||||||
noCache: true
|
noCache: true
|
||||||
},
|
}
|
||||||
hidden: true
|
},
|
||||||
|
{
|
||||||
|
path: 'point',
|
||||||
|
component: () => import('@/views/product/point/index'),
|
||||||
|
name: 'point',
|
||||||
|
meta: {
|
||||||
|
title: '提货点管理',
|
||||||
|
noCache: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1076,11 +1076,7 @@
|
||||||
<el-form-item label="送货方式：" prop="delivery_way">
|
<el-form-item label="送货方式：" prop="delivery_way">
|
||||||
<div class="acea-row">
|
<div class="acea-row">
|
||||||
<el-checkbox-group v-model="formValidate.delivery_way">
|
<el-checkbox-group v-model="formValidate.delivery_way">
|
||||||
<el-checkbox
|
<el-checkbox v-for="item in deliveryList" :key="item.value" :label="item.value">
|
||||||
v-for="item in deliveryList"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.value"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,296 @@
|
||||||
|
<template>
|
||||||
|
<div class="divBox">
|
||||||
|
<el-card class="box-card">
|
||||||
|
<!--顶部搜索-->
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<div class="container">
|
||||||
|
<el-form size="small" label-width="100px" :inline="true">
|
||||||
|
<el-form-item label="提货点名称：" label-width="100px" style="display: inline-block;">
|
||||||
|
<el-input style="width: 350px" v-model="tableFrom.mer_take_name" placeholder="请输入提货点名称" class="selWidth" clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-button size="small" type="primary" @click="getList(1)">搜索</el-button>
|
||||||
|
<el-button size="small" type="success" @click="diaLogChangeStatus()">添加提货点</el-button>
|
||||||
|
</div>
|
||||||
|
<!--列表-->
|
||||||
|
<el-table v-loading="listLoading" :data="tableData.data">
|
||||||
|
<el-table-column prop="id" label="ID" min-width="80" align="center"/>
|
||||||
|
<el-table-column label="名称" prop="mer_take_name" min-width="150" align="center"/>
|
||||||
|
<el-table-column label="手机号" prop="mer_take_phone" min-width="150" align="center"/>
|
||||||
|
<el-table-column label="详细地址" prop="mer_take_address" min-width="150" align="center"/>
|
||||||
|
<el-table-column label="添加时间" prop="create_time" min-width="150" align="center"/>
|
||||||
|
<el-table-column label="操作" min-width="280" fixed="right" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="success" size="small" @click="editInfo(scope.row)">编辑</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="deleteDel(scope.row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!--分页-->
|
||||||
|
<div class="block">
|
||||||
|
<el-pagination
|
||||||
|
:page-sizes="[20, 40, 60, 80]"
|
||||||
|
:page-size="tableFrom.limit"
|
||||||
|
:current-page="tableFrom.page"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="tableData.total"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="pageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<!--提货点编辑弹框-->
|
||||||
|
<el-dialog :title="Number(info.id) > 0 ? '编辑提货点' : '添加提货点'" :visible.sync="pointShow" width="80%" :before-close="diaLogChangeStatus">
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-form ref="editInfoField" :model="info" :rules="rules" label-width="150px">
|
||||||
|
<el-form-item label="提货点名称：" prop="mer_take_name">
|
||||||
|
<el-input v-model="info.mer_take_name" placeholder="请输入详细地址" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="提货点电话：" prop="mer_take_phone">
|
||||||
|
<el-input v-model="info.mer_take_phone" placeholder="请输入提货点电话" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="经纬度：" prop="mer_take_location">
|
||||||
|
<el-input :value="Object.values(info.mer_take_location).toString()" enter-button="查找位置" placeholder="请查找位置" readonly>
|
||||||
|
<el-button slot="append" type="primary" @click="onSearchs">查找位置</el-button>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="详细地址：" prop="mer_take_address">
|
||||||
|
<el-input v-model="info.mer_take_address" placeholder="请输入详细地址" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="提货点营业日期：" prop="mer_take_day">
|
||||||
|
<el-select v-model="info.mer_take_day" filterable multiple placeholder="请选择营业时间" class="mer-take-day">
|
||||||
|
<el-option v-for="item in date" :key="item.date_id" :label="item.date_name" :value="item.date_id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="提货点营业时间：" prop="mer_take_time" required>
|
||||||
|
<el-time-picker v-model="info.mer_take_time[0]" placeholder="开始时间" value-format="HH:mm" />
|
||||||
|
<el-time-picker v-model="info.mer_take_time[1]" placeholder="结束时间" value-format="HH:mm" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="diaLogChangeStatus">关 闭</el-button>
|
||||||
|
<el-button type="primary" @click="submitEditInfo">提 交</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
<!-- 地图定位 -->
|
||||||
|
<el-dialog
|
||||||
|
v-if="modalMap"
|
||||||
|
v-model="modalMap"
|
||||||
|
:visible.sync="modalMap"
|
||||||
|
title="选择位置"
|
||||||
|
close-on-click-modal
|
||||||
|
class="mapBox"
|
||||||
|
custom-class="dialog-scustom"
|
||||||
|
:append-to-body='true'
|
||||||
|
width="80%" top="20px">
|
||||||
|
<iframe id="mapPage" width="100%" height="700px" frameborder="0" :src="keyUrl" />
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { pointGetList, pointEdit, pointDel } from "@/api/product";
|
||||||
|
import {configApi} from "@/api/system";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Point",
|
||||||
|
components: { },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
listLoading: true,
|
||||||
|
tableFrom: {
|
||||||
|
page: 1,
|
||||||
|
limit: 20,
|
||||||
|
mer_take_name: '',
|
||||||
|
},
|
||||||
|
tableData: {
|
||||||
|
data: [],
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
// 弹框
|
||||||
|
info: {
|
||||||
|
mer_take_name: '',
|
||||||
|
mer_take_phone: '',
|
||||||
|
mer_take_location: {},
|
||||||
|
mer_take_address: '',
|
||||||
|
mer_take_day: '',
|
||||||
|
mer_take_time: {},
|
||||||
|
},
|
||||||
|
pointShow: false,
|
||||||
|
rules: {
|
||||||
|
mer_take_name: [{required: true, message: '请输入提货点名称', trigger: 'blur'}],
|
||||||
|
mer_take_day: [{required: true, type: 'array', message: '请选择提货点营业日期', trigger: 'change'}],
|
||||||
|
mer_take_phone: [{
|
||||||
|
required: true, validator: function (rule, value, callback) {
|
||||||
|
if (!value) {
|
||||||
|
return callback(new Error('请填写手机号'))
|
||||||
|
} else if (!/^1[3456789]\d{9}$/.test(value)) {
|
||||||
|
callback(new Error('手机号格式不正确!'))
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
}, trigger: 'blur'
|
||||||
|
}],
|
||||||
|
mer_take_address: [{required: true, message: '请输入详细地址', trigger: 'blur'}],
|
||||||
|
mer_take_location: [{
|
||||||
|
required: true, validator: function (rule, value, callback) {
|
||||||
|
if (Object.values(value).length <= 0) {
|
||||||
|
return callback(new Error('请选择经纬度'))
|
||||||
|
} else if (Number(value[0]) <= 0 || Number(value[1]) <= 0) {
|
||||||
|
callback(new Error('请选择正确的经纬度!'))
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
}, trigger: 'blur'
|
||||||
|
}],
|
||||||
|
mer_take_time: [{
|
||||||
|
required: true, validator: function (rule, value, callback) {
|
||||||
|
if (Object.values(value).length <= 0) {
|
||||||
|
return callback(new Error('请选择提货点营业时间'))
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
}, trigger: 'blur'
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
date: [
|
||||||
|
{ date_name: '周一', date_id: '1' },
|
||||||
|
{ date_name: '周二', date_id: '2' },
|
||||||
|
{ date_name: '周三', date_id: '3' },
|
||||||
|
{ date_name: '周四', date_id: '4' },
|
||||||
|
{ date_name: '周五', date_id: '5' },
|
||||||
|
{ date_name: '周六', date_id: '6' },
|
||||||
|
{ date_name: '周日', date_id: '7' }
|
||||||
|
],
|
||||||
|
// 定位相关
|
||||||
|
modalMap: false,
|
||||||
|
mapKey: '',
|
||||||
|
keyUrl: '',
|
||||||
|
delivery_type: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener('message', function (event) {
|
||||||
|
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
|
||||||
|
var loc = event.data
|
||||||
|
// console.log(loc)
|
||||||
|
if (loc && loc.module === 'locationPicker') {
|
||||||
|
// 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
|
||||||
|
window.parent.selectAddress(loc)
|
||||||
|
}
|
||||||
|
}, false)
|
||||||
|
window.selectAddress = this.selectAddress
|
||||||
|
|
||||||
|
this.getList("");
|
||||||
|
this.getMapKey();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取列表
|
||||||
|
getList(num) {
|
||||||
|
this.listLoading = true;
|
||||||
|
this.tableFrom.page = num ? num : this.tableFrom.page;
|
||||||
|
pointGetList(this.tableFrom).then(res => {
|
||||||
|
this.tableData.data = res.data.list;
|
||||||
|
this.tableData.total = res.data.count;
|
||||||
|
this.listLoading = false;
|
||||||
|
}).catch(res => {
|
||||||
|
this.listLoading = false;
|
||||||
|
this.$message.error(res.message);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
pageChange(page) {
|
||||||
|
this.tableFrom.page = page;
|
||||||
|
this.getList("");
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.tableFrom.limit = val;
|
||||||
|
this.getList(1);
|
||||||
|
},
|
||||||
|
// 定位处理 - 获取地图key
|
||||||
|
getMapKey() {
|
||||||
|
configApi().then(res => {
|
||||||
|
// console.log(res);
|
||||||
|
this.mapKey = res.data.tx_map_key
|
||||||
|
const keys = res.data.tx_map_key
|
||||||
|
this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`
|
||||||
|
this.delivery_type = res.data.delivery_type
|
||||||
|
}).catch(res => {
|
||||||
|
this.$message.error(res.message)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 定位处理 - 显示弹框
|
||||||
|
onSearchs() {
|
||||||
|
if (!this.mapKey || this.mapKey == '') this.$message.error('平台未配置腾讯地图KEY')
|
||||||
|
else this.modalMap = true
|
||||||
|
},
|
||||||
|
// 定位处理 - 选择经纬度
|
||||||
|
selectAddress(data) {
|
||||||
|
// console.log('经纬度信息', data)
|
||||||
|
this.info.mer_take_location = [data.latlng.lat,data.latlng.lng]
|
||||||
|
this.info.mer_take_address = data.poiaddress || ''
|
||||||
|
this.modalMap = false
|
||||||
|
this.$refs['editInfoField'].validate(valid => {});
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
// 提货点编辑弹框显示隐藏
|
||||||
|
diaLogChangeStatus(){
|
||||||
|
this.pointShow = !this.pointShow;
|
||||||
|
if(!this.pointShow) this.info = this.$options.data().info;
|
||||||
|
},
|
||||||
|
// 信息操作 - 提交编辑
|
||||||
|
submitEditInfo(){
|
||||||
|
let _this = this;
|
||||||
|
let info = Object.assign({}, this.info);
|
||||||
|
this.$refs['editInfoField'].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
pointEdit(info).then(res => {
|
||||||
|
if(res.status == 200){
|
||||||
|
_this.$message.success('操作成功');
|
||||||
|
_this.diaLogChangeStatus();
|
||||||
|
_this.getList(1);
|
||||||
|
_this.$forceUpdate();
|
||||||
|
}
|
||||||
|
}).catch(res => {
|
||||||
|
this.$message.error(res.message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 信息操作 - 编辑
|
||||||
|
editInfo(info){
|
||||||
|
this.info = Object.assign({}, info);
|
||||||
|
this.diaLogChangeStatus();
|
||||||
|
},
|
||||||
|
// 信息操作 - 删除
|
||||||
|
deleteDel(id){
|
||||||
|
let _this = this;
|
||||||
|
_this.$confirm('删除后不可恢复，您确认删除吗?', '提示', {
|
||||||
|
confirmButtonText: '删除',
|
||||||
|
cancelButtonText: '不删除',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
pointDel(id).then(({message}) => {
|
||||||
|
_this.$message.success(message);
|
||||||
|
_this.getList('');
|
||||||
|
}).catch(({message}) => {
|
||||||
|
_this.$message.error(message);
|
||||||
|
});
|
||||||
|
}).catch(action => {})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.mer-take-day{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue