zm/nuttyreading-master-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小店效果修改

Browse Source
This commit is contained in:
@fawn-nine
2024-05-28 09:23:04 +08:00
parent df1a867db0
commit a8f12d22ef
1 changed files with 233 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

386
src/views/modules/shop/smallstore.vue
View File

@@ -1,9 +1,19 @@
<template>
<div class="mod-config">
<commonTree source="tags" @changeCurrentNode="changeCurrentNode" ref="commonTree" :dataList="treeDataList" @getCommonShopDataList="getCommonShopDataList"
@handleClickNodes="handleClickNodes" :urlList="urlList"></commonTree>
<div v-if="isFresh" v-loading="!isFresh"
style="width: calc(100% - 360px); height: 100%; float: right; border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;">
<commonTree
source="tags"
@changeCurrentNode="changeCurrentNode"
ref="commonTree"
:dataList="treeDataList"
@getCommonShopDataList="getCommonShopDataList"
@handleClickNodes="handleClickNodes"
:urlList="urlList"
></commonTree>
<div
v-if="isFresh"
v-loading="!isFresh"
style="width: calc(100% - 360px); height: 100%; float: right; border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;"
>
<div class="border_box info_box">
<div class="title_box">
<div class="title"><span class="line"></span>基本小店信息</div>
@@ -12,62 +22,117 @@
<div class="addFormBox">
<el-form :model="addForm" ref="addForm" label-width="80px">
<el-form-item label="小店名称" prop="name" class="form_item">
<el-input placeholder="请输入小店名称" style="width: 100%" v-model="addForm.name" clearable>
<el-input
placeholder="请输入小店名称"
style="width: 100%"
v-model="addForm.name"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="排序" prop="sort" class="form_item">
<el-input-number placeholder="请输入小店排序" style="width: 100%" v-model="addForm.sort" :min="0" clearable
@keyup.native="UpNumber" @keydown.native="UpNumber">
<el-input-number
placeholder="请输入小店排序"
style="width: 100%"
v-model="addForm.sort"
:min="0"
clearable
@keyup.native="UpNumber"
@keydown.native="UpNumber"
>
</el-input-number>
</el-form-item>
<el-form-item label="封面图" prop="images" label-width="120px" >
<el-form-item label="封面图" prop="images" label-width="120px">
<div style="display:flex; align-items:center">
<div>
<div>
<el-upload
class="avatar-uploader"
:action="baseUrl + '/oss/fileoss'"
:show-file-list="false"
:on-success="handlePicSuccess"
>
<!-- <img v-if="!refreshImg" :src="addForm.images" class="avatar"> -->
<img v-if="fimages" :src="fimages" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload></div>
<div> <el-tag v-if="fimages != ''" class="delImgBtn" @click="delImg()" type="danger">清空图片</el-tag></div></div>
</el-form-item>
class="avatar-uploader"
:action="baseUrl + '/oss/fileoss'"
:show-file-list="false"
:on-success="handlePicSuccess"
>
<!-- <img v-if="!refreshImg" :src="addForm.images" class="avatar"> -->
<img v-if="fimages" :src="fimages" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<div>
<div v-if="fimages != ''">
<el-tag class="delImgBtn" @click="delImg()" type="danger"
>清空图片</el-tag
>
</div>
</div>
</div>
</el-form-item>
</el-form>
</div>
<div style=" border: 1px dashed #bababa;" v-if="currentNode && currentNode.data.isLast == 1"></div>
<div
style=" border: 1px dashed #bababa;"
v-if="currentNode && currentNode.data.isLast == 1"
></div>
</div>
<div class="border_box tree_content_box" v-if="addForm.id" >
<div class="title_box" style="margin-bottom: 10px; height: 80px; display:block;">
<div class="border_box tree_content_box" v-if="addForm.id">
<div
class="title_box"
style="margin-bottom: 10px; height: 80px; display:block;"
>
<div class="title">
<span class="line"></span>已关联商品列表
<el-button plain type="primary" style="margin-left: 20px" @click="openTable('addForm')"
size="mini">新增</el-button>
<el-button
plain
type="primary"
style="margin-left: 20px"
@click="openTable('addForm')"
size="mini"
>新增</el-button
>
<!-- <div style="" class="button_box"> -->
<!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
<!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
<!-- </div> -->
</div>
</div>
<commonShop :currentId="addForm.id ? addForm.id : ''" currentType="bookMarketId" :dataList="associatedGoodsList"
:urlList="urlList" @delete="dataFormDelete" :isEdit="isEdit" :oprateType="oprateType" ref="commonShop" :style="`height: calc(100% - 50px); `"></commonShop>
<div class="submitButton submitButtonBox" >
<commonShop
:currentId="addForm.id ? addForm.id : ''"
currentType="bookMarketId"
:dataList="associatedGoodsList"
:urlList="urlList"
@delete="dataFormDelete"
:isEdit="isEdit"
:oprateType="oprateType"
ref="commonShop"
:style="`height: calc(100% - 50px); `"
></commonShop>
<div class="submitButton submitButtonBox">
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button> -->
<el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button>
<el-button
type="primary"
@click="dataFormSubmit('addForm')"
size="small"
>确定</el-button
>
<!-- </div> -->
</div>
</div>
<div class="submitButton submitButtonBox" style="position: absolute;bottom: 13px;right: 15px;" v-if="!isEdit">
<div
class="submitButton submitButtonBox"
style="position: absolute;bottom: 13px;right: 15px;"
v-if="!isEdit"
>
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button> -->
<el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button>
<el-button
type="primary"
@click="dataFormSubmit('addForm')"
size="small"
>确定</el-button
>
<!-- </div> -->
</div>
</div>
@@ -80,9 +145,17 @@
</el-form> -->
<commonShopTable ref="commonShopTable" :currentId="addForm.id" currentType="bookMarketId"
@submit="handleSubmitShopTable"></commonShopTable>
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<commonShopTable
ref="commonShopTable"
:currentId="addForm.id"
currentType="bookMarketId"
@submit="handleSubmitShopTable"
></commonShopTable>
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div>
</template>
@@ -107,19 +180,19 @@ export default {
deleteShop: "/master/shopStore/delStore",
saveShop: "/master/shopStore/saveOrUpdateStore",
add: "/master/shopStore/saveOrUpdateStore",
getAssociatedGoodsList: "/master/shopStore/getStoreProductList",
getAssociatedGoodsList: "/master/shopStore/getStoreProductList"
},
oprateType:"yingxiao", // yingxiao：类型是营销 fenlei:类型是分类
oprateType: "yingxiao", // yingxiao：类型是营销 fenlei:类型是分类
addForm: {},
isFresh: false,
dataRule: {
name: [
{
required: true,
message: "小店名称不能为空",
message: "小店名称不能为空"
// trigger: "change",
},
],
}
]
},
currentNode: {},
treeDataList: [],
@@ -134,10 +207,10 @@ export default {
isBreak: false, //是否结束循环
defaultProps: {
children: "children",
label: "title",
label: "title"
},
dataForm: {
key: "",
key: ""
},
dataList: [],
pageIndex: 1,
@@ -146,46 +219,46 @@ export default {
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
fileList:[],
refreshImg:true,
fimages:""
fileList: [],
refreshImg: true,
fimages: ""
};
},
components: {
AddOrUpdate,
commonShop,
commonTree,
commonShopTable,
commonShopTable
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
}
},
activated() {
this.isEdit = false;
this.getDataList();
},
methods: {
// handlePictureCardPreview(file) {
// handlePictureCardPreview(file) {
// // this.addForm.images = file.url;
// this.fimages = file.url;
// this.$message.success("上传成功");
// //this.refreshImg = true
// console.log(this.addForm)
// // this.dialogVisible = true;
// },
delImg(){
this.fimages = ''
this.addForm.images = '';
},
// },
delImg() {
this.fimages = "";
this.addForm.images = "";
},
handlePicSuccess(res, file) {
// console.log(res,'res')
// if (res.msg == "success") {
this.fimages = res.url;
this.addForm.images = res.url
this.$message.success("上传成功");
console.log(this.fimages,this.addForm.images,'上传')
this.fimages = res.url;
this.addForm.images = res.url;
this.$message.success("上传成功");
console.log(this.fimages, this.addForm.images, "上传");
// } else {
// this.$message.error("上传失败");
// }
@@ -202,29 +275,29 @@ export default {
// this.$refs.commonShop.handleCheckAllChange(val);
// });
// },
handleSubmitShopTable: debounce(async function (ids) {
handleSubmitShopTable: debounce(async function(ids) {
await this.$http({
url: this.$http.adornUrl(`${this.urlList.saveShop}`),
method: "post",
data: this.$http.adornData({
productId: ids,
bookMarketId: this.addForm.id,
}),
bookMarketId: this.addForm.id
})
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success(data.msg);
if (this.$refs.commonShop) {
if(addForm.id != ''){
if (addForm.id != "") {
// console.log(addForm.id,'addForm.id')
this.$refs.commonShop.getAssociatedGoodsList({
bookMarketId: this.addForm.id,
bookMarketId: this.addForm.id
});
}
}
if (this.$refs.commonShopTable) {
this.$refs.commonShopTable.close();
}
}
if (this.$refs.commonShopTable) {
this.$refs.commonShopTable.close();
}
} else {
this.$message.error(data.msg);
}
@@ -241,10 +314,10 @@ export default {
this.$nextTick(() => {
if (e == 1) {
if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList({
bookMarketId: this.addForm.id ? this.addForm.id : null,
});
}
this.$refs.commonShop.getAssociatedGoodsList({
bookMarketId: this.addForm.id ? this.addForm.id : null
});
}
}
});
},
@@ -254,48 +327,47 @@ export default {
this.isEdit = false;
this.isFresh = true;
console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
this.currentNode = { data: { ...form } }
this.currentNode = { data: { ...form } };
this.addForm = form;
this.fimages = form.images
this.fimages = form.images;
await this.getDataList();
// this.$refs.commonTree.setCurrentNodeShow();
this.$nextTick(() => {
// this.$refs.commonShop.clear();
// this.$refs.commonShop.bookMarketId = null;
if (this.$refs.commonShop && id) {
// this.$refs.commonShop.bookMarketId = null;
if (this.$refs.commonShop && id) {
this.$refs.commonShop.getAssociatedGoodsList(form);
}
}
});
},
//新增修改
dataFormSubmit: debounce(async function (formName) {
dataFormSubmit: debounce(async function(formName) {
// return false
if (this.addForm.name == "" || !this.addForm.name) {
this.$message.error("请输入小店名称");
return false;
}
var form={...this.addForm}
delete form.children
await this.$refs[formName].validate(async (valid) => {
var form = { ...this.addForm };
delete form.children;
await this.$refs[formName].validate(async valid => {
if (valid) {
await this.$http({
url: this.$http.adornUrl(`${this.urlList.add}`),
method: "post",
data: this.$http.adornData({
...form,
}),
...form
})
}).then(async ({ data }) => {
if (data && data.code === 0) {
if (data && data.code === 0) {
await this.getDataList();
this.$nextTick(async () => {
this.$refs.commonTree.setCurrentNodeShow(data.result.id);
this.addForm = data.result;
this.currentNode = { data: { ...data.result } }
this.fimages= data.result.images
this.currentNode = { data: { ...data.result } };
this.fimages = data.result.images;
// this.currentNode = { data: { ...data.list } }
this.$message({
message: "操作成功",
@@ -303,7 +375,7 @@ export default {
duration: 1500,
onClose: () => {
this.visible = false;
},
}
});
});
} else {
@@ -314,12 +386,16 @@ export default {
});
}, 200),
//删除关联商品
dataFormDelete: debounce(async function (row, deleteType) {
this.$confirm(`确定要删除${deleteType != 'all' ? '该' : '所有'}关联商品嘛?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
dataFormDelete: debounce(async function(row, deleteType) {
this.$confirm(
`确定要删除${deleteType != "all" ? "该" : "所有"}关联商品嘛?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(async () => {
// var lableIds = row[0].bookLabelId
// var productIds = row.map(e => e.productId)
@@ -332,15 +408,13 @@ export default {
// this.$message.error("请选择已关联的商品");
// return false;
// }
this.$refs.commonShop.dataListLoading = true;
await this.$http({
url: this.$http.adornUrl(
`${this.urlList.delete}`
),
url: this.$http.adornUrl(`${this.urlList.delete}`),
method: "post",
data: {
id:row[0].id
id: row[0].id
},
header: {
//默认 无 说明：请求头
@@ -349,29 +423,27 @@ export default {
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success("删除成功");
} else {
this.$message.error(data.msg);
}this.$nextTick(() => {
// this.$refs.commonShop.selectShopArr = [];
if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList({
bookLabelId: this.addForm.id,
});
}
});
}
this.$nextTick(() => {
// this.$refs.commonShop.selectShopArr = [];
if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList({
bookLabelId: this.addForm.id
});
}
});
});
})
.catch(() => { });
.catch(() => {});
}, 200),
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([0]);
},
changeCurrentNode(val) {
this.changeCurrentNode = val;
this.$forceUpdate()
this.$forceUpdate();
},
handlereset() {
this.currentNode = null;
@@ -416,12 +488,12 @@ export default {
},
addOrUpdateHandle() {
var addform = {
images: 0,
images: 0,
sort: 0,
name: "",
id:null
id: null
};
this.handleClickNodes({ data: addform }, addform, "add");
this.handleClickNodes({ data: addform }, addform, "add");
},
filterNode(value, data) {
@@ -522,10 +594,10 @@ export default {
const children = parent.data.nodes || parent.data;
//若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
if (Array.isArray(parent.data)) {
const parentIndex = parent.data.findIndex((d) => d.id === data.id);
const parentIndex = parent.data.findIndex(d => d.id === data.id);
parent.data.splice(parentIndex, 1);
} else {
const childIndex = children.findIndex((d) => d.id === data.id);
const childIndex = children.findIndex(d => d.id === data.id);
children.splice(childIndex, 1);
}
this.curNode = undefined;
@@ -546,7 +618,7 @@ export default {
return;
}
let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
@@ -558,7 +630,7 @@ export default {
nodes: [],
id: id,
typeName: "模板组",
temporaryData: "1", //用来区分临时数据
temporaryData: "1" //用来区分临时数据
};
/* 如果模版深度最多两层，以下条件改成该部分注释
this.curNode && this.curNode.depth == 1
@@ -658,7 +730,7 @@ export default {
this.isUpdateGroup = false;
const parent = node.parent;
const children = parent.data.nodes || parent.data;
const index = children.findIndex((d) => d.id === data.id);
const index = children.findIndex(d => d.id === data.id);
let temp = data;
temp.text = this.isactTitle;
children.splice(index, 1, temp);
@@ -680,8 +752,8 @@ export default {
url: this.$http.adornUrl(this.urlList.treeList),
method: "post",
data: this.$http.adornData({
"current": 1,
"limit": 10
current: 1,
limit: 10
})
}).then(({ data }) => {
console.log("🚀 ~ getDataList ~ data:", data);
@@ -709,7 +781,7 @@ export default {
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val;
},
}
// // 新增 / 修改
// addOrUpdateHandle(row) {
// this.addOrUpdateVisible = true;
@@ -717,35 +789,45 @@ export default {
// this.$refs.addOrUpdate.init(row);
// });
// },
},
}
};
</script>
<style lang="less" scoped>
.delImgBtn{cursor: pointer; display: inline-block; margin-left: 10px;}
.delImgBtn {
cursor: pointer;
display: inline-block;
margin-left: 10px;
}
.imageTxt {
font-size: 12px;
}
.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 {
border: 1px dashed #d9d9d9; border-color: #409EFF;
font-size: 28px;
color: #8c939d;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
}
.avatar {
width: 70px;
height: 70px;
display: block;
}
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
border: 1px dashed #d9d9d9;
border-color: #409eff;
font-size: 28px;
color: #8c939d;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
}
.avatar {
width: 70px;
border: 1px dashed #409eff;
// border-color: #409eff;
height: 70px;
display: block;
}
.tree_box {
width: 350px !important;
height: 100%;
@@ -758,8 +840,8 @@ export default {
}
.border_box {
margin-bottom: 10px; height: 138px;
margin-bottom: 10px;
height: 138px;
.title_box {
display: flex;
@@ -801,7 +883,6 @@ export default {
border-radius: 10px;
padding: 15px 15px;
box-sizing: border-box;
}
.tree_content_box {
@@ -826,7 +907,7 @@ export default {
}
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #eaebed;
color: #4796ec;
font-weight: bold;
@@ -852,7 +933,6 @@ export default {
padding-right: 8px;
}
p {
margin: 0;
margin-bottom: 10px;