Skip to content

Z
zj-manage
Commit 7a04889e by swl
Options

gx

parent 9836fd16
Showing with 570 additions and 101 deletions
src/api/livingCircle.js
import { api, formatParams } from "@/utils/axios"; import { api, formatParams } from "@/utils/axios";
// 生活地图--商家、居民申请列表 // 生活地图--商家、居民申请列表
export function applyList(params) { export function applyList(params) {
return api( return api(
...@@ -125,6 +126,19 @@ export function iconUpload(params) { ...@@ -125,6 +126,19 @@ export function iconUpload(params) {
}) })
); );
} }
// 上传-图片
export function uploadImg(params) {
let header = {
"Content-Type": "multipart/form-data",
};
let formData = new FormData();
formData.append("file", params);
return api(
Object.assign(formatParams("POST", formData, header), {
url: `/admin-api/file/uploadImg`,
})
);
}
// 关键词列表 // 关键词列表
export function getKeyword(params) { export function getKeyword(params) {
return api( return api(
...@@ -166,3 +180,11 @@ export function delKeyword(params) { ...@@ -166,3 +180,11 @@ export function delKeyword(params) {
}) })
); );
} }
// 店铺-编辑
export function editShop(params) {
return api(
Object.assign(formatParams("POST", params), {
url: "/admin-api/living-circle/edit?id=" + params.id,
})
);
}
src/components/FileUpload.vue 0 → 100644
<template>
<div>
<el-upload
:disabled="disable"
ref="upload"
:http-request="upload"
class="upload-demo"
:file-list="value"
list-type="picture-card"
:on-remove="removeFile"
:on-exceed="fileExceed"
:before-upload="fileLimitFn"
:limit="limit"
:on-success="fileSuccess"
:on-error="fileError"
:on-preview="handlePreview"
action="#"
multiple
>
<!-- <el-button size="small" type="primary" icon="el-icon-upload"
>点击上传</el-button
> -->
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__tip" slot="tip">
<!-- <gaopaiyi @input="baseFileData"></gaopaiyi> -->
{{ tip }}
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<el-image
fit="contain"
:src="url"
style="width: 100%; margin: 20px auto"
/>
</el-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import axios from "axios";
//import gaopaiyi from "./gaopaiyi.vue";
import { config } from "@/utils/request";
export default {
name: "FileUpload",
components: {},
props: {
data: {
type: Array,
require: true,
default: () => {
return [];
},
},
fileType: {
type: String,
default: () => {
return "img";
},
},
fileSize: {
type: Number,
default: () => {
return 50;
},
},
limit: {
type: Number,
default: () => {
return 10;
},
},
disable: {
type: Boolean,
default: () => {
return false;
},
},
needValid: {
type: Boolean,
default: () => {
return false;
},
},
},
data() {
return {
progressFlag: true,
dialogImageUrl: "",
dialogVisible: false,
imgType: ["jpg", "jpeg", "png", "gif"],
fileList: [],
url: "",
};
},
computed: {
tip() {
return `支持上传${
this.fileType == "all"
? "任意格式"
: this.fileType == "img"
? "图片类型"
: "非图片类型"
}文件，且单个文件不能超过${this.fileSize}MB，最多上传${this.limit}个文件`;
},
value: {
get() {
return this.data;
},
set(val) {
this.$emit("update:data", val);
},
},
},
methods: {
// 文件上传操作
upload(file) {
let formData = new FormData();
formData.append("file", file.file);
axios
.post(`${config.proxy}/admin-api/file/uploadImg`, formData, {
headers: {
"Content-Type": "multipart/form-data",
Authorization: getToken() ? "Bearer " + getToken() : "",
},
onUploadProgress: (progressEvent) => {
let percent =
((progressEvent.loaded / progressEvent.total) * 100) | 0;
//调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
file.onProgress({ percent: percent });
},
})
.then((res) => {
if (res.data.code == 200) {
file.onSuccess(res.data);
} else {
file.onError(res.data);
}
})
.catch((error) => {
file.onError(error);
});
},
// 文件移除操作
removeFile(file, fileList) {
this.value = fileList;
this.needValid ? this.$emit("fileValid") : "";
},
chargeImg(name) {
let type = name
? name.substring(name.lastIndexOf(".") + 1).toLowerCase()
: "";
return this.imgType.includes(type);
},
// 上传前的限制
fileLimitFn(file) {
const fileSize = file.size / 1024 / 1024;
// 类型限制
if (this.fileType == "img" && !this.chargeImg(file.name)) {
this.$notify.warning(`非图片类型的文件不支持上传`);
return false;
} else if (this.fileType == "file" && this.chargeImg(file.name)) {
this.$notify.warning(`图片类型的文件不支持上传`);
return false;
}
// 大小限制
if (fileSize > this.fileSize) {
this.$notify.warning(`${file.name}文件大小不得超过${this.fileSize}MB`);
return false;
}
},
// 文件超出个数限制
fileExceed() {
this.$notify.warning(`允许上传的最大个数${this.limit}个`);
},
// 文件上传成功
fileSuccess(responese, file, fileList) {
console.log(responese, file, fileList, "fileSuccess");
// if (file.uid) {
// this.$fileReady[file.uid] = "success";
// this.$store.commit("utils/SET_FILEREADY", this.$fileReady);
// }
file.url = responese.data;
delete file.raw;
delete file.percentage;
delete file.response;
delete file.size;
this.value = fileList;
},
// 文件上传失败
fileError(res, file) {
if (file.uid) {
delete this.$fileReady[file.uid];
// this.$store.commit("utils/SET_FILEREADY", this.$fileReady);
}
this.$notify.warning("上传文件失败");
},
// 文件预览
handlePreview(file) {
this.url = file.url;
this.dialogVisible = true;
},
},
};
</script>
<style>
.upload-demo .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.upload-demo .el-upload:hover {
border-color: #409eff;
}
.upload-demo .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100% !important;
height: 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
</style>
src/views/livingCircle/category.vue
...@@ -134,7 +134,6 @@ ...@@ -134,7 +134,6 @@
:show-file-list="false" :show-file-list="false"
action="#" action="#"
:http-request="upload" :http-request="upload"
:before-upload="beforeUpload"
> >
<img <img
v-if="dataForm.iconUrl" v-if="dataForm.iconUrl"
...@@ -253,7 +252,6 @@ export default { ...@@ -253,7 +252,6 @@ export default {
this.menuList = res.data; this.menuList = res.data;
}); });
}, },
beforeUpload() {},
upload(file) { upload(file) {
this.dataForm.iconUrl = URL.createObjectURL(file.file); this.dataForm.iconUrl = URL.createObjectURL(file.file);
...@@ -318,7 +316,7 @@ export default { ...@@ -318,7 +316,7 @@ export default {
id: this.dataForm.id, id: this.dataForm.id,
name: this.dataForm.name, name: this.dataForm.name,
sort: this.dataForm.sort, sort: this.dataForm.sort,
iconUrl: this.dataForm.iconUrl, iconUrl: this.dataForm.iconUrl1,
menuId: this.dataForm.menuId, menuId: this.dataForm.menuId,
}; };
editCategory(params).then((res) => { editCategory(params).then((res) => {
......
src/views/livingCircle/enter.vue
...@@ -83,7 +83,12 @@ ...@@ -83,7 +83,12 @@
:pagination="pagination" :pagination="pagination"
@Jump="jumpPage" @Jump="jumpPage"
> >
<el-table-column slot="type" label="入驻类型" align="center"> <el-table-column
slot="type"
label="入驻类型"
align="center"
width="120px"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag <el-tag
v-if=" v-if="
...@@ -110,7 +115,12 @@ ...@@ -110,7 +115,12 @@
> >
</template> </template>
</el-table-column> </el-table-column>
<el-table-column slot="state" label="审核状态" align="center"> <el-table-column
slot="state"
label="审核状态"
align="center"
width="120px"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag <el-tag
v-if=" v-if="
...@@ -129,7 +139,12 @@ ...@@ -129,7 +139,12 @@
> >
</template> </template>
</el-table-column> </el-table-column>
<el-table-column slot="delFlag" label="启用状态" align="center"> <el-table-column
slot="delFlag"
label="启用状态"
align="center"
width="120px"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag <el-tag
v-if="scope.row.delFlag == 0 || scope.row.delFlag == 1" v-if="scope.row.delFlag == 0 || scope.row.delFlag == 1"
...@@ -162,6 +177,9 @@ ...@@ -162,6 +177,9 @@
<el-button type="primary" size="mini" round @click="view(scope.row)" <el-button type="primary" size="mini" round @click="view(scope.row)"
>查看</el-button >查看</el-button
> >
<el-button type="success" size="mini" round @click="edit(scope.row)"
>编辑</el-button
>
<el-button <el-button
@click="delFlagHandle(scope.row)" @click="delFlagHandle(scope.row)"
:type="scope.row.delFlag == 0 ? 'warning' : 'success'" :type="scope.row.delFlag == 0 ? 'warning' : 'success'"
...@@ -170,62 +188,107 @@ ...@@ -170,62 +188,107 @@
slot="reference" slot="reference"
>{{ scope.row.delFlag == 0 ? "禁用" : "启用" }} >{{ scope.row.delFlag == 0 ? "禁用" : "启用" }}
</el-button> </el-button>
<!-- <el-button type="danger" size="mini" round @click="del(scope.row)"
>删除</el-button
> -->
</template> </template>
</el-table-column> </el-table-column>
</table-template> </table-template>
</div> </div>
<el-dialog <el-dialog
title="详情" :title="type == 'view' ? '详情' : '编辑'"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="30%" width="40%"
destroy-on-close destroy-on-close
> >
<div class="cell"> <el-form
<p class="label">名称</p> :model="detail"
<p class="value">{{ detail.name }}</p> :rules="rules"
</div> ref="ruleForm"
<div class="cell"> label-width="120px"
<p class="label">入驻类型</p> class="demo-ruleForm formData"
<p class="value"> >
<el-tag <el-form-item label="名称" prop="name">
v-if="detail.type == 0 || detail.type == 1" <el-input
:type="detail.type == 1 ? 'success' : ''" v-model="detail.name"
> clearable
{{ detail.type == 0 ? "商家入驻" : "上报网红墙" }}</el-tag placeholder="请输入名称"
> :disabled="type == 'view'"
</p> ></el-input>
</div> </el-form-item>
<div class="cell"> <el-form-item label="入驻类型" prop="type">
<p class="label">类型</p> <el-radio-group v-model="detail.type" disabled>
<p class="value">{{ detail.category }}</p> <el-radio :label="0">商家入驻</el-radio>
</div> <el-radio :label="1">上报地点</el-radio>
<div class="cell" v-if="detail.otherInfo"> <el-radio :label="2">上报网红墙</el-radio>
<p class="label">经营范围和内容</p> </el-radio-group>
<p class="value">{{ detail.otherInfo }}</p> </el-form-item>
</div> <el-form-item label="类型" prop="categoryIds">
<div class="cell"> <el-cascader
<p class="label">详细地址</p> :disabled="type == 'view'"
<p class="value">{{ detail.address }}</p> style="width: 100%"
</div> :options="menuOptions"
<div class="cell"> clearable
<p class="label">区</p> filterable
<p class="value">{{ detail.district }}</p> v-model="detail.categoryIds"
</div> @change="categoryChange"
<div class="cell"> placeholder="请选择类型"
<p class="label">电话</p> ></el-cascader>
<p class="value">{{ detail.phone }}</p> </el-form-item>
</div> <el-form-item
<div class="cell"> label="经营范围和内容"
<p class="label">营业时间</p> prop="otherInfo"
<p class="value">{{ detail.businessHours }}</p> v-if="detail.otherInfo"
</div> >
<div class="cell"> <el-input
<p class="label">创建时间</p> v-model="detail.otherInfo"
<p class="value">{{ detail.createTime }}</p> clearable
</div> placeholder="请输入经营范围和内容"
<div class="cell"> :disabled="type == 'view'"
<p class="label">审核状态</p> ></el-input>
<p class="value"> </el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input
v-model="detail.address"
clearable
placeholder="请输入详细地址"
:disabled="type == 'view'"
></el-input>
</el-form-item>
<el-form-item label="区" prop="district">
<el-input
v-model="detail.district"
placeholder="请输入区"
clearable
disabled
></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input
v-model="detail.phone"
placeholder="请输入电话"
clearable
:disabled="type == 'view'"
></el-input>
</el-form-item>
<el-form-item label="营业时间" prop="businessHours">
<el-input
v-model="detail.businessHours"
clearable
placeholder="例如：周一至周五 9:00-23:00"
:disabled="type == 'view'"
></el-input>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-input v-model="detail.createTime" clearable disabled></el-input>
</el-form-item>
<el-form-item label="启用状态" prop="delFlag">
<el-radio-group v-model="detail.delFlag" disabled>
<el-radio :label="1">禁用</el-radio>
<el-radio :label="0">启用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="审核状态" prop="state">
<el-tag <el-tag
v-if="detail.state == 0 || detail.state == 1 || detail.state == 4" v-if="detail.state == 0 || detail.state == 1 || detail.state == 4"
:type=" :type="
...@@ -239,34 +302,26 @@ ...@@ -239,34 +302,26 @@
: "未审核" : "未审核"
}}</el-tag }}</el-tag
> >
</p> </el-form-item>
</div>
<div class="cell"> <el-form-item label="门面照片">
<p class="label">启用状态</p> <file-upload
<p class="value"> :data.sync="shopImg"
<el-tag :limit="1"
v-if="detail.delFlag == 0 || detail.delFlag == 1" :disable="type == 'view'"
:type="detail.delFlag == 1 ? 'danger' : 'success'" ></file-upload>
>{{ detail.delFlag == 1 ? "禁用" : "启用" }}</el-tag </el-form-item>
>
</p>
</div>
<div class="cell">
<p class="label">照片</p>
<p class="value">
<el-image
v-for="(item, index) in detail.pictureList"
:key="index"
style="width: 100px; height: 100px; margin-right: 10px"
:src="item.url"
:z-index="7777777"
:preview-src-list="[item.url]"
>
</el-image>
</p>
</div>
<span slot="footer" class="dialog-footer"> <el-form-item label="左右店铺">
<file-upload
:data.sync="besideImg"
:limit="2"
:disable="type == 'view'"
></file-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" v-if="type == 'view'">
<el-button <el-button
type="success" type="success"
round round
...@@ -292,22 +347,33 @@ ...@@ -292,22 +347,33 @@
>确 定</el-button >确 定</el-button
> --> > -->
</span> </span>
<span slot="footer" class="dialog-footer" v-else>
<el-button type="primary" round @click="dialogVisible = false"
>取 消</el-button
>
<el-button type="success" round @click="editConfirm">确 定</el-button>
</span>
</el-dialog>
<el-dialog :visible.sync="visible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import tableTemplate from "@/components/Table"; import tableTemplate from "@/components/Table";
import FileUpload from "@/components/FileUpload.vue";
import { import {
applyList, applyList,
applyReview, applyReview,
applyDetail, applyDetail,
shopEnable, shopEnable,
shopMenu, shopMenu,
editShop,
} from "@/api/livingCircle"; } from "@/api/livingCircle";
export default { export default {
name: "enter", name: "enter",
components: { tableTemplate }, components: { tableTemplate, FileUpload },
data() { data() {
return { return {
dialogVisible: false, dialogVisible: false,
...@@ -320,13 +386,15 @@ export default { ...@@ -320,13 +386,15 @@ export default {
categoryId: "", categoryId: "",
}, },
menuOptions: [], menuOptions: [],
visible: false,
dialogImageUrl: "",
loading: false, loading: false,
tableData: [], tableData: [],
tableColumns: [ tableColumns: [
{ {
key: "name", key: "name",
label: "名称", label: "名称",
width: 180,
}, },
{ {
key: "type", key: "type",
...@@ -336,6 +404,7 @@ export default { ...@@ -336,6 +404,7 @@ export default {
{ {
key: "category", key: "category",
label: "类型", label: "类型",
width: 120,
}, },
{ {
key: "district", key: "district",
...@@ -354,15 +423,12 @@ export default { ...@@ -354,15 +423,12 @@ export default {
{ {
key: "phone", key: "phone",
label: "联系电话", label: "联系电话",
width: 150,
}, },
{ {
key: "businessHours", key: "businessHours",
label: "营业时间", label: "营业时间",
}, width: 150,
{
key: "createTime",
label: "创建时间",
width: 180,
}, },
{ {
...@@ -375,16 +441,16 @@ export default { ...@@ -375,16 +441,16 @@ export default {
label: "启用状态", label: "启用状态",
type: "slot", type: "slot",
}, },
// { {
// key: "url", key: "userName",
// label: "营业执照", label: "创建人",
// type: "slot", width: 120,
// }, },
// { {
// key: "url1", key: "createTime",
// label: "身份证", label: "创建时间",
// type: "slot", width: 170,
// }, },
], ],
pagination: { pagination: {
total: 0, total: 0,
...@@ -392,10 +458,20 @@ export default { ...@@ -392,10 +458,20 @@ export default {
currentPage: 1, currentPage: 1,
}, },
rules: { rules: {
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }], name: [{ required: true, message: "请输入名称", trigger: "blur" }],
address: [
{ required: true, message: "请输入详细地址", trigger: "blur" },
],
categoryIds: [
{ required: true, message: "请选择类型", trigger: "blur" },
],
}, },
userName: "", userName: "",
typeList: [], typeList: [],
type: "view",
categoryName: "",
shopImg: [],
besideImg: [],
}; };
}, },
mounted() { mounted() {
...@@ -404,7 +480,53 @@ export default { ...@@ -404,7 +480,53 @@ export default {
this.init(); this.init();
this.getShopMenu(); this.getShopMenu();
}, },
computed: {
fileType() {
return ["jpeg", "png", "jpg"];
},
},
methods: { methods: {
editConfirm() {
let arr = [];
let arr1 = [];
this.shopImg.forEach((item) => {
arr.push({
url: item.url,
urlType: 0,
});
});
this.besideImg.forEach((item) => {
arr1.push({
url: item.url,
urlType: 1,
});
});
console.log(arr, arr1);
let params = {
address: this.detail.address,
businessHours: this.detail.businessHours,
categoryId: this.detail.categoryIds[1],
name: this.detail.name,
phone: this.detail.phone,
pictureList: [...arr, ...arr1],
id: this.detail.id,
};
editShop(params).then((res) => {
if (res.code == 200) {
this.$message.success(res.msg || "编辑成功");
this.dialogVisible = false;
this.init();
} else {
this.$message.warning(res.msg || "编辑失败");
}
});
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.visible = true;
},
getShopMenu() { getShopMenu() {
shopMenu().then((res) => { shopMenu().then((res) => {
if (res.code == 200) { if (res.code == 200) {
...@@ -436,8 +558,11 @@ export default { ...@@ -436,8 +558,11 @@ export default {
this.init(); this.init();
// console.log("menuChange--->", val, this.searchForm.categoryId); // console.log("menuChange--->", val, this.searchForm.categoryId);
}, },
categoryChange(val) {
console.log(val);
},
init() { init() {
this.loading = true;
applyList({ applyList({
name: this.searchForm.name, name: this.searchForm.name,
state: this.searchForm.state, state: this.searchForm.state,
...@@ -448,6 +573,8 @@ export default { ...@@ -448,6 +573,8 @@ export default {
categoryId: this.searchForm.categoryId, categoryId: this.searchForm.categoryId,
}).then((res) => { }).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.loading = false;
this.tableData = this.tableData =
res.data.list && res.data.list.length > 0 res.data.list && res.data.list.length > 0
? res.data.list.map((item) => { ? res.data.list.map((item) => {
...@@ -480,6 +607,7 @@ export default { ...@@ -480,6 +607,7 @@ export default {
this.pagination.total = res.data.total; this.pagination.total = res.data.total;
} else { } else {
this.$message.warning(res.msg || "查询列表失败"); this.$message.warning(res.msg || "查询列表失败");
this.loading = false;
} }
}); });
}, },
...@@ -551,11 +679,74 @@ export default { ...@@ -551,11 +679,74 @@ export default {
// }); // });
// this.dialogVisible = false; // this.dialogVisible = false;
}, },
filterTree(val) {
let arr = [];
this.menuOptions.forEach((item) => {
item.children.forEach((it) => {
if (it.value == val) {
this.categoryName = `${item.label}-${it.label}`;
arr = [item.value, it.value];
return;
}
});
});
return arr;
},
view(row) { view(row) {
this.type = "view";
applyDetail(row.id).then((res) => {
if (res.code == 200) {
this.detail = res.data;
this.detail.categoryIds = this.filterTree(res.data.categoryId);
let arr = [];
let arr1 = [];
res.data.pictureList?.forEach((item) => {
if (item.urlType == 0) {
arr.push({
url: item.url,
urlType: item.urlType,
});
} else {
arr1.push({
url: item.url,
urlType: item.urlType,
});
}
});
this.shopImg = arr;
this.besideImg = arr1;
this.dialogVisible = true;
} else {
this.$message.warning(res.msg || "获取详情失败");
}
});
},
edit(row) {
this.type = "edit";
applyDetail(row.id).then((res) => { applyDetail(row.id).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.detail = res.data; this.detail = res.data;
this.detail.categoryIds = this.filterTree(res.data.categoryId);
let arr = [];
let arr1 = [];
res.data.pictureList?.forEach((item) => {
if (item.urlType == 0) {
arr.push({
url: item.url,
urlType: item.urlType,
});
} else {
arr1.push({
url: item.url,
urlType: item.urlType,
});
}
});
this.shopImg = arr;
this.besideImg = arr1;
this.dialogVisible = true; this.dialogVisible = true;
} else { } else {
this.$message.warning(res.msg || "获取详情失败"); this.$message.warning(res.msg || "获取详情失败");
...@@ -646,4 +837,33 @@ export default { ...@@ -646,4 +837,33 @@ export default {
} }
} }
} }
.formData{
height 600px
overflow auto
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style> </style>
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