Commit 3b82b1ca authored by gengshaojing's avatar gengshaojing

add: 自提点管理

parent d181c7c3
const ACTIVITY_URI = require("../config.js").ACTIVITY_URI;
const req = require("../utils/request").httpReq;
// 获取商家列表
exports.edit = async (ctx) => {
const url = `${ACTIVITY_URI}/marketing/background/business_circle_edit`;
const opts = {
url,
method: "GET",
};
ctx.body = await req(ctx, opts);
};
// 商品库列表
exports.list = async (ctx) => {
const url = `${ACTIVITY_URI}/marketing/background/business_circle_list`;
const opts = {
url,
method: "GET",
};
ctx.body = await req(ctx, opts);
};
// 查看商品详情
exports.delete = async (ctx) => {
const url = `${ACTIVITY_URI}/marketing/background/business_circle_delete`;
const opts = {
url,
method: "GET",
};
ctx.body = await req(ctx, opts);
};
const ACTIVITY_URI = require("../config.js").ACTIVITY_URI;
const req = require("../utils/request").httpReq;
// 获取商家列表
exports.edit = async (ctx) => {
const url = `${ACTIVITY_URI}/marketing/background/tag_edit`;
const opts = {
url,
method: "GET",
};
ctx.body = await req(ctx, opts);
};
// 商品库列表
exports.list = async (ctx) => {
const url = `${ACTIVITY_URI}/marketing/background/tag_list`;
const opts = {
url,
method: "GET",
};
ctx.body = await req(ctx, opts);
};
// 查看商品详情
exports.delete = async (ctx) => {
const url = `${ACTIVITY_URI}/marketing/background/tag_delete`;
const opts = {
url,
method: "GET",
};
ctx.body = await req(ctx, opts);
};
......@@ -11,6 +11,8 @@ const withdrawal = require("./controllers/withdrawal");
const groupmeal = require("./controllers/groupmeal");
const qr_code = require("./controllers/qr-code");
const relay = require("./controllers/relay");
const tag = require("./controllers/tag");
const business_circle = require("./controllers/business_circle");
const router = Router();
const API_VERSION = "/api/v1";
......@@ -157,4 +159,14 @@ router.post(`${API_VERSION}/relay/ks3api_upload`, relay.uploadPic);
router.get(`${API_VERSION}/relay/order_export`, relay.orderExport);
router.get(`${API_VERSION}/relay/old_order_export`, relay.oldOrderExport);
// 分类
router.get(`${API_VERSION}/marketing/background/tag_edit`, tag.edit);
router.get(`${API_VERSION}/marketing/background/tag_list`, tag.list);
router.get(`${API_VERSION}/marketing/background/tag_delete`, tag.delete);
// 分类
router.get(`${API_VERSION}/marketing/background/business_circle_edit`, business_circle.edit);
router.get(`${API_VERSION}/marketing/background/business_circle_list`, business_circle.list);
router.get(`${API_VERSION}/marketing/background/business_circle_delete`, business_circle.delete);
module.exports = router;
<template>
<div class="type_dialog">
<el-dialog title="商圈管理" v-model="comDialogVisible" width="70%" @closed="closeFormDialog">
<el-form :inline="true" :model="addForm">
<el-form-item label="商圈名称:">
<el-input v-model="addForm.business_circle_name" placeholder="请输入商圈名称" clearable style="min-width: 300px"></el-input>
</el-form-item>
<el-form-item label="位置:">
<el-input v-model="addForm.location" placeholder="请点击下放按钮从高德获取坐标" disabled style="min-width: 300px"></el-input>
<el-button type="text" @click="mapDialogVisible = true">点击从高德获取坐标</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onAdd" :loading="addBtnLoading">添加</el-button>
</el-form-item>
</el-form>
<el-table class="dialog_table" align="center" :data="type_list" border v-loading="loading">
<el-table-column align="center" label="商圈名称">
<template #default="{ row }">
<div v-if="row.edit" class="inline_edit">
<el-input size="small" v-model="row.business_circle_name"></el-input>
</div>
<p v-else>{{ row.business_circle_name }}</p>
</template>
</el-table-column>
<el-table-column align="center" label="位置">
<template #default="{ row }">
<div v-if="row.edit" class="inline_edit">
<el-button size="small" type="text" @click="mapDialogVisible = true">{{ row.location }}</el-button>
</div>
<p v-else>{{ row.location }}</p>
</template>
</el-table-column>
<el-table-column prop="prop" label="操作" align="center" min-width="60">
<template #default="{ row, $index }">
<template v-if="row.edit">
<el-button size="small" @click="onRowCancel(row, $index)" class="inline_edit--cancel">取消</el-button>
<el-button type="primary" size="small" @click="onEdit(row)" v-loading="row.loading">保存</el-button>
</template>
<template v-else>
<el-popconfirm
confirmButtonText="确定"
cancelButtonText="取消"
icon="el-icon-info"
iconColor="red"
title="请确认是否要删除该商圈?"
@confirm="onDelete(row)"
>
<template #reference>
<el-button type="primary" size="small">删除</el-button>
</template>
</el-popconfirm>
<el-button type="primary" size="small" @click="onRowEdit(row, $index)">修改</el-button>
</template>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeFormDialog">关 闭</el-button>
</div>
</template>
</el-dialog>
<!-- 地图 dialog -->
<el-dialog custom-class="mapDialog" v-model="mapDialogVisible" width="100%">
<my-map class="my-map" @getMapInfo="getMapInfo" @hideMapDialog="mapDialogVisible = false" />
</el-dialog>
</div>
</template>
<script>
import { reactive, ref, toRefs, watch } from "vue";
import { getBusinessCircleList, handleBusinessCircle, businessCircleDelete } from "@/service/point";
import { ElForm, ElMessage } from "element-plus";
import myMap from "../../../Activity/releaseProduc/components/myMap";
export default {
props: {
dialogVisible: {
type: Boolean,
default: false,
},
},
components: { myMap },
setup(props, { emit }) {
const dataMap = reactive({
loading: false,
addBtnLoading: false,
comDialogVisible: false,
mapDialogVisible: false,
addForm: {
business_circle_id: undefined, // 商圈id
business_circle_name: "", // 商圈名
location: "", // 详细地址
longitude: "", // 位置经度
latitude: "", // 位置纬度
},
type_list: [],
isEdit: false,
editIndex: 0,
editRow: {
business_circle_id: "", // 商圈id
business_circle_name: "", // 商圈名
location: "", // 详细地址
longitude: "", // 位置经度
latitude: "", // 位置纬度
},
});
// 获取 商圈商圈列表
const onGetList = async () => {
dataMap.loading = true;
try {
const { list } = await getBusinessCircleList();
console.log("商圈商圈列表", list);
const newArr = list.map((item) => {
item.edit = false;
item.loading = false;
return { ...item };
});
console.log("newArr", newArr);
dataMap.type_list = newArr;
} catch (e) {
console.log(e);
ElMessage.error("获取商圈列表失败");
} finally {
dataMap.loading = false;
}
};
// 添加商圈
const onAdd = async () => {
if (!dataMap.addForm.business_circle_name) {
ElMessage.error("请输入商圈名称");
return;
}
if (!dataMap.addForm.location) {
ElMessage.error("请选择位置");
return;
}
dataMap.addBtnLoading = true;
console.log("dataMap.addForm", dataMap.addForm);
try {
const { code, reason } = await handleBusinessCircle(dataMap.addForm);
console.log("添加商圈列表code", code);
console.log("添加商圈列表reason", reason);
if (+code === 0) {
ElMessage.success("添加成功");
onGetList();
onReset();
} else {
ElMessage.error(reason);
}
} catch (e) {
console.log(e);
ElMessage.error("添加商圈失败");
} finally {
dataMap.addBtnLoading = false;
}
};
const onDelete = async (row) => {
console.log(row);
try {
const { code, reason } = await businessCircleDelete({ business_circle_id: row.business_circle_id, is_delete: 1 });
console.log("删除商圈code", code);
console.log("删除商圈reason", reason);
if (+code === 0) {
ElMessage.success("删除成功");
onGetList();
} else {
ElMessage.error(reason);
}
} catch (e) {
console.log(e);
ElMessage.error("删除失败");
}
};
// 修改
const onEdit = async (row) => {
const params = dataMap.type_list[dataMap.editIndex];
row.loading = true;
try {
const { code, reason } = await handleBusinessCircle(params);
console.log("修改商圈code", code);
console.log("修改商圈reason", reason);
if (+code === 0) {
ElMessage.success("修改成功");
row.edit = false;
onGetList();
onReset("editRow");
} else {
ElMessage.error(reason);
}
} catch (e) {
console.log(e);
ElMessage.error("修改失败");
} finally {
row.loading = false;
}
};
watch(
() => props.dialogVisible,
(newValue) => {
console.log("props.dialogVisible", newValue);
dataMap.comDialogVisible = newValue;
if (newValue) onGetList();
},
);
const getMapInfo = (mapInfo) => {
console.log("mapInfo", mapInfo);
const { address, lng, lat } = mapInfo;
if (dataMap.isEdit) {
dataMap.type_list[dataMap.editIndex].location = address;
dataMap.type_list[dataMap.editIndex].longitude = lng;
dataMap.type_list[dataMap.editIndex].latitude = lat;
dataMap.isEdit = false;
} else {
dataMap.addForm.location = address;
dataMap.addForm.longitude = lng;
dataMap.addForm.latitude = lat;
}
};
// 关闭dialog
const closeFormDialog = () => {
console.log("关闭dialog");
dataMap.comDialogVisible = false;
emit("closeDialog");
onReset();
emit("onGetBusinessCircleList");
};
const onReset = (form = "addForm") => {
dataMap[form] = {
business_circle_id: undefined, // 商圈id
business_circle_name: "", // 商圈名
location: "", // 详细地址
longitude: "", // 位置经度
latitude: "", // 位置纬度
};
};
const onRowEdit = (row, index) => {
row.edit = true;
dataMap.isEdit = true;
dataMap.editIndex = index;
dataMap.editRow = Object.assign({}, row);
};
const onRowCancel = (row, index) => {
console.log(index);
dataMap.editRow.edit = false;
dataMap.type_list[index] = dataMap.editRow;
};
return {
...toRefs(dataMap),
onAdd,
onDelete,
onEdit,
getMapInfo,
closeFormDialog,
onRowEdit,
onRowCancel,
};
},
};
</script>
<style lang="less" scoped>
.courier_dialog {
.dialog_header {
display: flex;
.num {
margin-left: 30px;
}
}
.dialog_form {
.dialog_form-item {
display: flex;
align-items: center;
.courier_name {
}
.courier_input {
width: 300px;
margin-left: 10px;
}
.courier_btn {
margin-left: 10px;
}
}
}
.dialog_selection,
.dialog_table,
.dialog_form {
margin-top: 20px;
}
}
.inline_edit {
display: flex;
align-items: center;
.inline_edit--cancel {
margin-left: 20px;
}
}
</style>
<template>
<div class="type_dialog">
<el-dialog title="添加自提点" v-model="comDialogVisible" width="70%" @closed="closeFormDialog">
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-position="right" label-width="120px">
<el-form-item label="自提点名称" prop="name">
<el-input class="dialog-input" v-model="addForm.name" maxlength="30" show-word-limit autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="位置" prop="location" style="width: 100%">
<div class="location_wrapper">
<el-input class="dialog-input" v-model="addForm.location" placeholder="" :disabled="true"></el-input>
<el-button type="primary" @click="mapDialogVisible = true">从高德获取坐标</el-button>
</div>
</el-form-item>
<el-form-item label="">
{{ addForm.location }}
</el-form-item>
<el-form-item prop="address" label="详细地址">
<el-input class="dialog-input" v-model="addForm.address"></el-input>
</el-form-item>
<el-form-item label="自提点联系人" prop="contactor">
<el-input class="dialog-input" v-model="addForm.contactor" maxlength="30" show-word-limit></el-input>
</el-form-item>
<el-form-item prop="phone" type="tel" label="联系电话">
<el-input class="dialog-input" v-model="addForm.phone"></el-input>
</el-form-item>
<el-form-item label="商圈" class="form_item" prop="business_circle_id">
<el-select v-model="addForm.business_circle_id" placeholder="请选择商圈">
<el-option
:label="item.business_circle_name"
:value="item.business_circle_id"
:key="item.business_circle_id"
v-for="item in businessCircleList"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="分类" class="form_item">
<el-select v-model="addForm.tag_id" placeholder="请选择分类">
<el-option :label="item.tag_name" :value="item.tag_id" v-for="item in tagList" :key="item.tag_id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间要求" class="form_item">
<el-time-picker v-model="addForm.lunch_deliver_time" placeholder="请选择时间"></el-time-picker>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="obSubmit" :loading="onSaveLoading">保 存</el-button>
<el-button @click="onCancel">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 地图 dialog -->
<el-dialog custom-class="mapDialog" v-model="mapDialogVisible" width="100%">
<my-map class="my-map" @getMapInfo="getMapInfo" @hideMapDialog="mapDialogVisible = false" />
</el-dialog>
</div>
</template>
<script>
import { reactive, toRefs, watch, ref } from "vue";
import myMap from "../../../Activity/releaseProduc/components/myMap";
import ActivityService from "@/service/Activity/index";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
let checkphone = (rule, value, callback) => {
let myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if (value === "") {
callback();
}
if (!myreg.test(value)) {
return callback(new Error("电话格式不对"));
} else {
callback();
}
};
export default {
props: {
dialogVisible: {
type: Boolean,
default: false,
},
tagList: {
type: Array,
default() {
return [];
},
},
businessCircleList: {
type: Array,
default() {
return [];
},
},
},
components: { myMap },
setup(props, { emit }) {
const dataMap = reactive({
comDialogVisible: false,
mapDialogVisible: false,
onSaveLoading: false,
addForm: {
name: "",
location: "",
province: "",
city: "",
area: "",
longitude: "",
latitude: "",
address: "",
contactor: "",
phone: "",
business_circle_id: "",
tag_id: "",
lunch_deliver_time: "",
},
addFormRules: {
name: [
{ required: true, message: "请输入自提点名称", trigger: "blur" },
{ min: 0, max: 30, message: "长度在 0 到 30 个字符", trigger: "blur" },
],
location: [{ required: true, message: "请输入位置", trigger: "change" }],
address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
contactor: [{ min: 0, max: 30, message: "长度在 0 到 30 个字符", trigger: "blur" }],
phone: [{ validator: checkphone, trigger: "blur" }],
business_circle_id: [{ required: true, message: "请选择商圈", trigger: ["blur", "change"] }],
},
});
const addFormRef = ref(null);
watch(
() => props.dialogVisible,
(newValue) => {
console.log("props.dialogVisible", newValue);
dataMap.comDialogVisible = newValue;
},
);
// obSubmit
const obSubmit = () => {
console.log("obSubmit");
addFormRef.value.validate(async (valid) => {
if (valid) {
dataMap.onSaveLoading = true;
try {
const params = Object.assign({}, dataMap.addForm);
console.log(params);
params.lunch_deliver_time = dayjs(dataMap.addForm.lunch_deliver_time).format("YYYY-MM-DD HH:mm:ss");
const res = await ActivityService.addPlace(params);
console.log(res);
ElMessage.success("添加成功");
closeFormDialog();
emit("onGetTakePlaceList");
} catch (e) {
ElMessage.error("添加失败");
} finally {
dataMap.onSaveLoading = false;
}
} else {
return false;
}
});
};
// obCancel
const onCancel = () => {
closeFormDialog();
};
const onReset = () => {
dataMap.addForm = {
type_name: "",
};
};
// 关闭dialog
const closeFormDialog = () => {
console.log("关闭dialog");
dataMap.comDialogVisible = false;
emit("closeDialog");
addFormRef.value && addFormRef.value.clearValidate(); // 重置表单
addFormRef.value && addFormRef.value.resetFields(); // 重置表单
};
const getMapInfo = (mapInfo) => {
console.log("mapInfo", mapInfo);
dataMap.addForm.location = mapInfo.address;
dataMap.addForm.province = mapInfo.province;
dataMap.addForm.city = mapInfo.city;
dataMap.addForm.area = mapInfo.area;
dataMap.addForm.longitude = mapInfo.lng; // longitude latitude contactor
dataMap.addForm.latitude = mapInfo.lat;
};
return {
...toRefs(dataMap),
obSubmit,
onCancel,
addFormRef,
closeFormDialog,
getMapInfo,
};
},
};
</script>
<style lang="less" scoped>
.courier_dialog {
.dialog_header {
display: flex;
.num {
margin-left: 30px;
}
}
.dialog_form {
.dialog_form-item {
display: flex;
align-items: center;
.courier_name {
}
.courier_input {
width: 300px;
margin-left: 10px;
}
.courier_btn {
margin-left: 10px;
}
}
}
.dialog_selection,
.dialog_table,
.dialog_form {
margin-top: 20px;
}
}
.inline_edit {
display: flex;
align-items: center;
.inline_edit--cancel {
margin-left: 20px;
}
}
.location_wrapper {
display: flex;
align-items: center;
.el-button {
margin-left: 20px;
}
}
.form_item {
:deep(.el-select),
:deep(.el-input__inner) {
min-width: 300px !important;
}
}
</style>
<template>
<div class="type_dialog">
<el-dialog title="分类管理" v-model="comDialogVisible" width="70%" @closed="closeFormDialog">
<el-form :inline="true" :model="addForm">
<el-form-item label="分类名称:" label-width="100px">
<el-input v-model="addForm.type_name" placeholder="请输入分类名称" clearable style="min-width: 300px"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addType" :loading="addBtnLoading">添加</el-button>
</el-form-item>
</el-form>
<el-table class="dialog_table" align="center" :data="type_list" border v-loading="loading">
<el-table-column align="center" label="分类名称">
<template #default="{ row }">
<div v-if="row.edit" class="inline_edit">
<el-input size="small" v-model="row.tag_name"></el-input>
</div>
<p v-else>{{ row.tag_name }}</p>
</template>
</el-table-column>
<el-table-column prop="prop" label="操作" align="center" min-width="60">
<template #default="{ row, $index }">
<template v-if="row.edit">
<el-button size="small" @click="onRowCancel(row, $index)" class="inline_edit--cancel">取消</el-button>
<el-button type="primary" size="small" @click="onTagEdit(row)" v-loading="row.loading">保存</el-button>
</template>
<template v-else>
<el-popconfirm
confirmButtonText="确定"
cancelButtonText="取消"
icon="el-icon-info"
iconColor="red"
title="请确认是否要删除该分类?"
@confirm="onTagDelete(row)"
>
<template #reference>
<el-button type="primary" size="small">删除</el-button>
</template>
</el-popconfirm>
<el-button type="primary" size="small" @click="onRowEdit(row)">修改</el-button>
</template>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeFormDialog">关 闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
import { onMounted, reactive, toRefs, watch } from "vue";
import { getTagList, handleTag, tagDelete } from "@/service/point";
import { ElMessage } from "element-plus";
export default {
props: {
dialogVisible: {
type: Boolean,
default: false,
},
},
setup(props, { emit }) {
const dataMap = reactive({
loading: false,
addBtnLoading: false,
comDialogVisible: false,
addForm: {
type_name: "",
},
type_list: [],
edit_row: {},
});
// 获取 分类标签列表
const onGetTagList = async () => {
dataMap.loading = true;
try {
const { result } = await getTagList();
console.log("分类标签列表", result);
const newArr = result.map((item) => {
item.edit = false;
item.loading = false;
return { ...item };
});
console.log("newArr", newArr);
dataMap.type_list = newArr;
} catch (e) {
console.log(e);
ElMessage.error("获取分类列表失败");
} finally {
dataMap.loading = false;
}
};
// 添加分类
const addType = async () => {
if (!dataMap.addForm.type_name) {
ElMessage.error("请输入分类名称");
return;
}
dataMap.addBtnLoading = true;
try {
const { code, reason } = await handleTag({ tag_name: dataMap.addForm.type_name });
console.log("添加标签列表code", code);
console.log("添加标签列表reason", reason);
if (+code === 0) {
ElMessage.success("添加成功");
onGetTagList();
onReset();
} else {
ElMessage.error(reason);
}
} catch (e) {
console.log(e);
ElMessage.error("添加分类失败");
} finally {
dataMap.addBtnLoading = false;
}
};
const onTagDelete = async (row) => {
console.log(row);
try {
const { code, reason } = await tagDelete({ tag_id: row.tag_id, is_delete: 1 });
console.log("删除标签code", code);
console.log("删除标签reason", reason);
if (+code === 0) {
ElMessage.success("删除成功");
onGetTagList();
} else {
ElMessage.error(reason);
}
} catch (e) {
console.log(e);
ElMessage.error("删除失败");
}
};
// 修改
const onTagEdit = async (row) => {
console.log(row);
row.loading = true;
try {
const { code, reason } = await handleTag({ tag_id: row.tag_id, tag_name: row.tag_name });
console.log("修改标签code", code);
console.log("修改标签reason", reason);
if (+code === 0) {
ElMessage.success("修改成功");
row.edit = false;
onGetTagList();
} else {
ElMessage.error(reason);
}
} catch (e) {
console.log(e);
ElMessage.error("修改失败");
} finally {
row.loading = false;
}
};
watch(
() => props.dialogVisible,
(newValue) => {
console.log("props.dialogVisible", newValue);
dataMap.comDialogVisible = newValue;
if (newValue) onGetTagList();
},
);
// 关闭dialog
const closeFormDialog = () => {
console.log("关闭dialog");
dataMap.comDialogVisible = false;
emit("closeDialog");
onReset();
emit("onGetTagList");
};
const onReset = () => {
dataMap.addForm = {
type_name: "",
};
};
const onRowEdit = (row) => {
row.edit = true;
dataMap.edit_row = Object.assign({}, row);
};
const onRowCancel = (row, index) => {
console.log(index);
dataMap.edit_row.edit = false;
dataMap.type_list[index] = dataMap.edit_row;
};
return {
...toRefs(dataMap),
addType,
onTagDelete,
onTagEdit,
closeFormDialog,
onRowEdit,
onRowCancel,
};
},
};
</script>
<style lang="less" scoped>
.courier_dialog {
.dialog_header {
display: flex;
.num {
margin-left: 30px;
}
}
.dialog_form {
.dialog_form-item {
display: flex;
align-items: center;
.courier_name {
}
.courier_input {
width: 300px;
margin-left: 10px;
}
.courier_btn {
margin-left: 10px;
}
}
}
.dialog_selection,
.dialog_table,
.dialog_form {
margin-top: 20px;
}
}
.inline_edit {
display: flex;
align-items: center;
.inline_edit--cancel {
margin-left: 20px;
}
}
</style>
.type_list-box {
display: flex;
align-items: center;
.tag_list {
}
}
.item_label {
width: 100px;
text-align: right;
}
.business_circle-btn {
margin: 0 20px;
}
.el-check-tag.is-checked {
background: #409eff;
color: #ffffff;
border: 1px solid #409eff;
}
.el-check-tag {
background: #ffffff;
color: #606266;
border: 1px solid #dcdfe6;
}
.goods {
width: 100%;
height: 100%;
padding: 0 30px;
.header {
display: flex;
justify-content: flex-end;
margin-bottom: 30px;
}
.dioFor {
margin-left: 5%;
width: 70%;
}
.diotab {
margin-left: 5%;
margin-top: 10px;
}
.dialog-footer {
display: flex;
align-items: center;
justify-content: center;
}
.commodity_list {
margin-top: 30px;
}
.pagination {
margin-top: 30px;
}
}
<template>
<Layout>
<el-card class="goods" v-loading="pageLoading">
<div class="type_list-box">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="分类:" label-width="100px">
<el-button
size="small"
:type="item.checked ? 'primary' : ''"
v-for="(item, index) in tagList"
@click="onTagStatus(item)"
:key="index"
>
{{ item.tag_name }}
</el-button>
</el-form-item>
<!-- <el-form-item><el-button type="text">分类管理</el-button></el-form-item>-->
</el-form>
</div>
<div class="search_form">
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="自提点名称:" label-width="100px">
<el-input v-model="searchForm.keywords" placeholder="请输入自提点名称" clearable></el-input>
</el-form-item>
<el-form-item label="商圈:">
<el-select v-model="searchForm.business_circle_ids" placeholder="请选择商圈" clearable multiple>
<el-option
:label="item.business_circle_name"
:value="item.business_circle_id"
:key="item.business_circle_id"
v-for="item in businessCircleList"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item><el-button type="text" class="business_circle-btn">商圈管理</el-button></el-form-item>-->
<el-form-item>
<el-button type="primary" @click="onSearch">搜索</el-button>
</el-form-item>
</el-form>
</div>
<div class="header">
<el-button type="primary" @click="typeDialogVisible = true">分类管理</el-button>
<el-button type="primary" @click="businessCircleDialogVisible = true">商圈管理</el-button>
<el-button type="primary" @click="pointDialogVisible = true">添加自提点</el-button>
</div>
<el-table :data="takePlaceList" border stripe fit style="width: 100%" v-loading="loading">
<el-table-column align="center" prop="take_place_name" label="自提点名称"></el-table-column>
<el-table-column align="center" prop="business_circle_name" label="商圈"></el-table-column>
<el-table-column align="center" prop="location" label="位置"></el-table-column>
<el-table-column align="center" prop="address" label="详细地址"></el-table-column>
<el-table-column align="center" prop="activeName" label="联系人">
<template #default="{ row }">
<p>{{ row.contact_name }}</p>
<p>{{ row.phone }}</p>
</template>
</el-table-column>
<el-table-column align="center" prop="tag_name" label="分类"></el-table-column>
<el-table-column prop="prop" label="操作" align="center" min-width="60">
<template #default="{ row }">
<el-popconfirm
confirmButtonText="确定"
cancelButtonText="取消"
icon="el-icon-info"
iconColor="red"
title="请确认是否要删除该商圈?"
@confirm="onDelete(row)"
>
<template #reference>
<el-button type="primary" size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!-- 页码区 -->
<Pagination
@current-change="onCurrentChange"
:current-page="pagination.page"
:page-size="pagination.pageSize"
:total="pagination.total"
></Pagination>
<!-- 添加自提点弹窗 -->
<pointDialog
:dialogVisible="pointDialogVisible"
@closeDialog="pointDialogVisible = false"
:tagList="tagList"
:businessCircleList="businessCircleList"
@onGetTakePlaceList="onGetTakePlaceList"
/>
<!-- 分类管理弹窗 -->
<typeDialog :dialogVisible="typeDialogVisible" @closeDialog="typeDialogVisible = false" @onGetTagList="onGetTagList" />
<!-- 商圈管理弹窗 -->
<businessCircleDialog
:dialogVisible="businessCircleDialogVisible"
@closeDialog="businessCircleDialogVisible = false"
@onGetBusinessCircleList="onGetBusinessCircleList"
/>
</el-card>
</Layout>
</template>
<script>
import Layout from "../layout/index.vue";
import Pagination from "../components/Pagination/index.vue";
import typeDialog from "./components/typeDialog";
import businessCircleDialog from "./components/businessCircleDialog";
import pointDialog from "./components/pointDialog";
import { onMounted, reactive, toRefs } from "vue";
import { getTagList, getTakePlaceList, takePlaceDelete, getBusinessCircleList } from "../../../service/point";
import ActivityService from "@/service/Activity/index";
import { ElMessage } from "element-plus";
export default {
name: "point",
components: {
Layout,
Pagination,
typeDialog,
businessCircleDialog,
pointDialog,
},
setup() {
const dataMap = reactive({
tagList: [],
businessCircleList: [],
takePlaceList: [],
loading: false,
formInline: {
user: "",
region: "",
},
searchForm: {
keywords: "",
business_circle_ids: [],
tag_ids: [],
offset: 0,
limit: 20,
},
pagination: {
page: 1,
total: 0,
pageSize: 20,
},
// 自提点弹窗
pointDialogVisible: false,
// 分类管理弹窗
typeDialogVisible: false,
// 商圈管理弹窗
businessCircleDialogVisible: false,
});
// 获取 分类标签列表
const onGetTagList = () => {
getTagList().then((res) => {
console.log("分类标签列表", res.result);
const defaultTagList = [
{ tag_name: "全部", tag_id: "", checked: true },
{ tag_name: "未分类", tag_id: 0, checked: false },
];
const tagList = res.result.map((item) => {
item.checked = false;
return { ...item };
});
dataMap.tagList = defaultTagList.concat(tagList);
console.log("分类标签列表", dataMap.tagList);
});
};
// 获取 商圈商圈列表
const onGetBusinessCircleList = async () => {
try {
const { list } = await getBusinessCircleList();
console.log("商圈商圈列表", list);
dataMap.businessCircleList = list;
} catch (e) {
console.log(e);
ElMessage.error("获取商圈列表失败");
}
};
const onTagStatus = (item) => {
if (item.tag_name === "全部") {
dataMap.tagList.forEach((item) => {
item.checked = item.tag_name === "全部";
});
} else {
dataMap.tagList[0].checked = false;
item.checked = !item.checked;
}
};
const onGetTakePlaceList = async () => {
dataMap.loading = true;
try {
const params = Object.assign({}, dataMap.searchForm);
const { page, pageSize } = dataMap.pagination;
params.offset = page === 1 ? 0 : (page - 1) * pageSize;
const { result } = await ActivityService.getPlaceList(params);
dataMap.takePlaceList = result.list;
dataMap.pagination.total = result.total;
} catch (e) {
console.log(e);
ElMessage.error("获取自提点列表失败");
} finally {
dataMap.loading = false;
}
};
const onDelete = async (row) => {
console.log(row);
try {
const { code, reason } = await ActivityService.deletePlace({ take_place_id: row.take_place_id });
if (+code === 0) {
ElMessage.success("删除成功");
onGetTakePlaceList();
} else {
ElMessage.error(reason);
}
} catch (e) {
console.log(e);
ElMessage.error("删除失败");
}
};
const onCurrentChange = (val) => {
console.log(val);
dataMap.pagination.page = val;
onGetTakePlaceList();
};
const onSearch = () => {
const selectedTag = dataMap.tagList.filter((item) => item.tag_name !== "全部" && item.checked === true);
const selectedTagIds = selectedTag.map((item) => item.tag_id);
console.log("选中的tag", selectedTag);
console.log("选中tag的id", selectedTagIds);
dataMap.searchForm.tag_ids = selectedTagIds;
console.log(dataMap.searchForm);
onGetTakePlaceList();
};
onMounted(() => {
onGetTagList();
onGetTakePlaceList();
onGetBusinessCircleList();
});
return {
...toRefs(dataMap),
onTagStatus,
onGetTakePlaceList,
onDelete,
onSearch,
onCurrentChange,
onGetBusinessCircleList,
onGetTagList,
};
},
};
</script>
<style lang="less" src="./index.less" scope></style>
......@@ -15,6 +15,10 @@ const headerConfig = [
path: "/op/groupmeal/distrib",
name: "配送员管理",
},
{
path: "/op/groupmeal/point",
name: "自提点管理",
},
{
path: "/op/groupmeal/merchantManagement",
name: "商家管理",
......
......@@ -39,6 +39,11 @@ const groupmealRouters = [
name: "couponManagement",
component: () => import(/* webpackChunkName: "couponManagement" */ "@/pages/Groupmeal/couponManagement"),
},
{
path: "/op/groupmeal/point",
name: "point",
component: () => import(/* webpackChunkName: "goods" */ "@/pages/Groupmeal/Point"),
},
];
export default groupmealRouters;
import axios from "../utils/request";
// 分类--列表
export async function getTagList(params) {
const res = await axios.get(`/api/v1/marketing/background/tag_list`, {
params,
});
return res.result;
}
// 分类--添加 || 编辑
export async function handleTag(params) {
return await axios.get(`/api/v1/marketing/background/tag_edit`, {
params,
});
}
// 分类--删除
export async function tagDelete(params) {
return await axios.get(`/api/v1/marketing/background/tag_delete`, {
params,
});
}
// 商圈--列表
export async function getBusinessCircleList(params) {
const res = await axios.get(`/api/v1/marketing/background/business_circle_list`, {
params,
});
return res.result;
}
// 分类--添加 || 编辑
export async function handleBusinessCircle(params) {
return await axios.get(`/api/v1/marketing/background/business_circle_edit`, {
params,
});
}
// 分类--删除
export async function businessCircleDelete(params) {
return await axios.get(`/api/v1/marketing/background/business_circle_delete`, {
params,
});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment