mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 10:25:53 +08:00
优化管理端代码结构
This commit is contained in:
paulGao
249
manager/src/components/lili-dialog/goods-dialog.vue
Normal file
249
manager/src/components/lili-dialog/goods-dialog.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="wap-content">
|
||||
<div class="query-wrapper">
|
||||
<div class="query-item">
|
||||
<div>搜索范围</div>
|
||||
<Input placeholder="商品名称" @on-clear="goodsData=[]; goodsParams.goodsName=''; goodsParams.pageNumber = 1; getQueryGoodsList()" @on-enter="()=>{goodsData=[];goodsParams.pageNumber =1; getQueryGoodsList();}" icon="ios-search" clearable
|
||||
style="width: 150px" v-model="goodsParams.goodsName" />
|
||||
</div>
|
||||
<div class="query-item">
|
||||
<Cascader v-model="category" placeholder="请选择商品分类" style="width: 250px" :data="skuList"></Cascader>
|
||||
</div>
|
||||
<div class="query-item">
|
||||
<Button type="primary" @click="goodsData=[]; getQueryGoodsList();" icon="ios-search">搜索</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="positon:retavle;">
|
||||
<Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="[3,3]">
|
||||
<div class="wap-content-item" :class="{ active: item.selected }" @click="checkedGoods(item, index)" v-for="(item, index) in goodsData" :key="index">
|
||||
<div>
|
||||
<img :src="item.thumbnail" alt="" />
|
||||
</div>
|
||||
<div class="wap-content-desc">
|
||||
<div class="wap-content-desc-title">{{ item.goodsName }}</div>
|
||||
<div class="wap-sku">{{ item.goodsUnit }}</div>
|
||||
<div class="wap-sku"><Tag :color="item.salesModel === 'RETAIL' ? 'default' : 'geekblue'">{{item.salesModel === "RETAIL" ? "零售型" : "批发型"}}</Tag></div>
|
||||
<div class="wap-content-desc-bottom">
|
||||
<div>￥{{ item.price | unitPrice }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
|
||||
<div v-if="empty" class="empty">暂无商品信息</div>
|
||||
</Scroll>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Goods from "@/api/goods";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: "multiple", //单选或者多选 single multiple
|
||||
skuList: [], // 商品sku列表
|
||||
total: 0, // 商品总数
|
||||
goodsParams: { // 商品请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 18,
|
||||
order: "desc",
|
||||
goodsName: "",
|
||||
sn: "",
|
||||
categoryPath: "",
|
||||
marketEnable: "UPPER",
|
||||
authFlag: "PASS",
|
||||
sort:"createTime"
|
||||
},
|
||||
category: [], // 分类
|
||||
goodsData: [], // 商品数据
|
||||
empty: false, // 空数据
|
||||
loading: false, // 加载状态
|
||||
};
|
||||
},
|
||||
props: {
|
||||
selectedWay: {
|
||||
type: Array,
|
||||
default: function(){
|
||||
return new Array()
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
category(val) {
|
||||
this.goodsParams.categoryPath = val[2];
|
||||
},
|
||||
selectedWay: {
|
||||
handler() {
|
||||
this.$emit("selected", this.selectedWay);
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
"goodsParams.categoryPath": {
|
||||
handler: function () {
|
||||
this.goodsData = [];
|
||||
(this.goodsParams.pageNumber = 0), this.getQueryGoodsList();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 触底加载更多方法
|
||||
handleReachBottom() {
|
||||
setTimeout(() => {
|
||||
if (
|
||||
this.goodsParams.pageNumber * this.goodsParams.pageSize <=
|
||||
this.total
|
||||
) {
|
||||
this.goodsParams.pageNumber++;
|
||||
this.getQueryGoodsList();
|
||||
}
|
||||
}, 1500);
|
||||
},
|
||||
// 获取商品列表
|
||||
getQueryGoodsList() {
|
||||
API_Goods.getGoodsSkuData(this.goodsParams).then((res) => {
|
||||
this.initGoods(res);
|
||||
});
|
||||
},
|
||||
// 获取列表方法
|
||||
initGoods(res) {
|
||||
if (res.result.records.length !=0) {
|
||||
res.result.records.forEach((item) => {
|
||||
item.selected = false;
|
||||
item.___type = "goods"; //设置为goods让pc wap知道标识
|
||||
this.selectedWay.forEach(e => {
|
||||
if (e.id && e.id === item.id) {
|
||||
item.selected = true
|
||||
}
|
||||
})
|
||||
});
|
||||
/**
|
||||
* 解决数据请求中，滚动栏会一直上下跳动
|
||||
*/
|
||||
this.total = res.result.total;
|
||||
this.goodsData.push(...res.result.records);
|
||||
|
||||
} else {
|
||||
this.empty = true;
|
||||
}
|
||||
},
|
||||
// 查询商品
|
||||
init() {
|
||||
API_Goods.getGoodsSkuData(this.goodsParams).then((res) => {
|
||||
// 商品
|
||||
this.initGoods(res);
|
||||
});
|
||||
if (localStorage.getItem('category')) {
|
||||
this.deepGroup(JSON.parse(localStorage.getItem('category')))
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.deepGroup(JSON.parse(localStorage.getItem('category')))
|
||||
},3000)
|
||||
}
|
||||
},
|
||||
|
||||
deepGroup(val) {
|
||||
val.forEach((item) => {
|
||||
let childWay = []; //第二级
|
||||
// 第二层
|
||||
if (item.children) {
|
||||
item.children.forEach((child) => {
|
||||
// // 第三层
|
||||
if (child.children) {
|
||||
child.children.forEach((grandson, index, arr) => {
|
||||
arr[index] = {
|
||||
value: grandson.id,
|
||||
label: grandson.name,
|
||||
children: "",
|
||||
};
|
||||
});
|
||||
}
|
||||
let children = {
|
||||
value: child.id,
|
||||
label: child.name,
|
||||
children: child.children,
|
||||
};
|
||||
childWay.push(children);
|
||||
});
|
||||
}
|
||||
// 第一层
|
||||
let way = {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
children: childWay,
|
||||
};
|
||||
|
||||
this.skuList.push(way);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击商品
|
||||
*/
|
||||
checkedGoods(val, index) {
|
||||
// 如果单选的话
|
||||
if (this.type != "multiple") {
|
||||
this.goodsData.forEach((item) => {
|
||||
item.selected = false;
|
||||
});
|
||||
this.selectedWay = [];
|
||||
val.selected = true;
|
||||
this.selectedWay.push(val);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (val.selected == false) {
|
||||
val.selected = true;
|
||||
this.selectedWay.push(val);
|
||||
} else {
|
||||
val.selected = false;
|
||||
for (let i = 0; i<this.selectedWay.length; i++ ) {
|
||||
if (this.selectedWay[i].id===val.id) {
|
||||
this.selectedWay.splice(i,1)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "./style.scss";
|
||||
.wap-content {
|
||||
width: 100%;
|
||||
}
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.wap-content {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
}
|
||||
.wap-content-list {
|
||||
position: relative;
|
||||
}
|
||||
.wap-content-item {
|
||||
width: 210px;
|
||||
margin: 10px 7px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
// .wap-content-item{
|
||||
|
||||
// }
|
||||
.active {
|
||||
background: url("../../assets/selected.png") no-repeat;
|
||||
background-position: right;
|
||||
background-size: 10%;
|
||||
}
|
||||
</style>
|
||||
83
manager/src/components/lili-dialog/index.vue
Normal file
83
manager/src/components/lili-dialog/index.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<Modal :styles="{ top: '120px' }" width="1160" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
|
||||
<template v-if="flag">
|
||||
<goodsDialog @selected="(val) => {goodsData = val;}"
|
||||
v-if="goodsFlag" ref="goodsDialog" :selectedWay='goodsData'/>
|
||||
<linkDialog @selectedLink="(val) => { linkData = val; }" v-else class="linkDialog" />
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
import goodsDialog from "./goods-dialog";
|
||||
import linkDialog from "./link-dialog";
|
||||
export default {
|
||||
components: {
|
||||
goodsDialog,
|
||||
linkDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsFlag: false, // 是否商品选择器
|
||||
goodsData: [], //选择的商品
|
||||
linkData: "", //选择的链接
|
||||
flag: false, // modal显隐
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clearGoodsSelected(){
|
||||
this.goodsData = []
|
||||
},
|
||||
// 关闭弹窗
|
||||
clickClose() {
|
||||
this.$emit("closeFlag", false);
|
||||
this.goodsFlag = false;
|
||||
},
|
||||
// 单选商品
|
||||
singleGoods() {
|
||||
var timer = setInterval(() => {
|
||||
if (this.$refs.goodsDialog) {
|
||||
this.$refs.goodsDialog.type = "single";
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
// 点击确认
|
||||
clickOK() {
|
||||
if (this.goodsFlag) {
|
||||
this.$emit("selectedGoodsData", this.goodsData);
|
||||
} else {
|
||||
this.$emit("selectedLink", this.linkData);
|
||||
}
|
||||
this.clickClose();
|
||||
},
|
||||
// 打开组件方法
|
||||
open(type, mutiple) {
|
||||
this.flag = true;
|
||||
if (type == "goods") {
|
||||
this.goodsFlag = true;
|
||||
if (mutiple) {
|
||||
this.singleGoods()
|
||||
}
|
||||
} else {
|
||||
this.goodsFlag = false;
|
||||
}
|
||||
|
||||
},
|
||||
// 关闭组件
|
||||
close() {
|
||||
this.flag = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/deep/ .ivu-modal {
|
||||
overflow: hidden;
|
||||
height: 650px !important;
|
||||
}
|
||||
/deep/ .ivu-modal-body {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
85
manager/src/components/lili-dialog/link-dialog.vue
Normal file
85
manager/src/components/lili-dialog/link-dialog.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<Tabs :value="wap[0].title" class="tabs">
|
||||
<TabPane
|
||||
:label="item.title"
|
||||
:name="item.title"
|
||||
@click="clickTag(item, i)"
|
||||
v-for="(item, i) in wap"
|
||||
:key="i"
|
||||
>
|
||||
<component
|
||||
ref="lili-component"
|
||||
:is="templateWay[item.name]"
|
||||
@selected="
|
||||
(val) => {
|
||||
changed = val;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import wap from "./wap.js";
|
||||
import goodsDialog from "./goods-dialog";
|
||||
import templateWay from "./template/index";
|
||||
export default {
|
||||
components: {
|
||||
goodsDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
templateWay, // 模板数据
|
||||
changed: "", // 变更模板
|
||||
selected: 0, // 已选数据
|
||||
selectedLink: "", //选中的链接
|
||||
wap, // tab标签
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
changed: {
|
||||
handler(val) {
|
||||
this.$emit("selectedLink", val[0]); //因为是单选，所以直接返回第一个
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs["lili-component"][0].type = "single"; //商品页面设置成为单选
|
||||
});
|
||||
|
||||
this.wap.forEach((item) => {
|
||||
if (item) {
|
||||
item.selected = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "./style.scss";
|
||||
.wap-content-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.wap-flex {
|
||||
margin: 2px;
|
||||
}
|
||||
.tabs {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .ivu-modal {
|
||||
overflow: hidden;
|
||||
height: 650px !important;
|
||||
}
|
||||
/deep/ .ivu-modal-body {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
112
manager/src/components/lili-dialog/style.scss
Normal file
112
manager/src/components/lili-dialog/style.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.wap-list {
|
||||
flex: 2;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
>.wap-list,
|
||||
|
||||
.wap-content {
|
||||
flex: 8;
|
||||
}
|
||||
}
|
||||
|
||||
.wap-sku {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-wrapper {
|
||||
display: flex;
|
||||
margin: 8px 0;
|
||||
|
||||
>.query-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>* {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .ivu-scroll-container {
|
||||
width: 100% !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
|
||||
/deep/ .ivu-scroll-content {
|
||||
/* */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wap-content-list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wap-item {
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wap-item:hover {
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
|
||||
.wap-content-item {
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
height: 100px;
|
||||
padding: 2px;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
|
||||
/deep/ img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wap-content-desc {
|
||||
width: 180px;
|
||||
padding: 8px;
|
||||
|
||||
>.wap-content-desc-title {
|
||||
display: -webkit-box;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
>.wap-content-desc-bottom {
|
||||
font-size: 12px;
|
||||
padding: 4px 0;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
>div:nth-of-type(1) {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
118
manager/src/components/lili-dialog/template/category.vue
Normal file
118
manager/src/components/lili-dialog/template/category.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- 一级分类 -->
|
||||
<div class="list">
|
||||
<div class="list-item" :class="{active:parentIndex === cateIndex}" @click="handleClickChild(cate,cateIndex)" v-for="(cate,cateIndex) in categoryList" :key="cateIndex">
|
||||
{{cate.name}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 二级分类 -->
|
||||
<div class="list">
|
||||
<div class="list-item" :class="{active:secondIndex === secondI}" @click="handleClickSecondChild(second,secondI)" v-if="secondLevel.length != 0" v-for="(second,secondI) in secondLevel"
|
||||
:key="secondI">
|
||||
{{second.name}}
|
||||
</div>
|
||||
</div>
|
||||
<!--三级分类 -->
|
||||
<div class="list">
|
||||
<div class="list-item" :class="{active:thirdIndex === thirdI}" @click="handleClickthirdChild(third,thirdI)" v-if="thirdLevel.length != 0" v-for="(third,thirdI) in thirdLevel" :key="thirdI">
|
||||
{{third.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
parentIndex: '', // 分类父级下标
|
||||
secondIndex: '', // 分类二级下标
|
||||
thirdIndex: '', // 分类三级下标
|
||||
categoryList: [], // 分类列表一级数据
|
||||
secondLevel: [], // 分类列表二级数据
|
||||
thirdLevel: [], // 分类列表三级数据
|
||||
selectedData: "", // 已选分类数据
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 点击一级
|
||||
handleClickChild(item, index) {
|
||||
this.parentIndex = index;
|
||||
this.secondLevel = item.children;
|
||||
item.___type = "category";
|
||||
item.allId = item.id;
|
||||
|
||||
this.secondIndex = '';
|
||||
this.thirdIndex = '';
|
||||
this.thirdLevel = []
|
||||
this.$emit("selected", [item]);
|
||||
// 点击第一级的时候默认显示第二级第一个
|
||||
// this.handleClickSecondChild(item.children, 0);
|
||||
},
|
||||
// 点击二级
|
||||
handleClickSecondChild(second, index) {
|
||||
second.___type = "category";
|
||||
second.allId = `${second.parentId},${second.id}`
|
||||
|
||||
this.secondIndex = index;
|
||||
this.thirdLevel = second.children;
|
||||
this.thirdIndex = '';
|
||||
this.$emit("selected", [second]);
|
||||
// this.handleClickthirdChild(second.children[0], 0);
|
||||
},
|
||||
// 点击三级
|
||||
handleClickthirdChild(item, index) {
|
||||
item.___type = "category";
|
||||
item.allId = `${this.categoryList[this.parentIndex].id},${item.parentId},${item.id}`
|
||||
this.$emit("selected", [item]);
|
||||
this.thirdIndex = index;
|
||||
},
|
||||
init() {
|
||||
let category = JSON.parse(localStorage.getItem('category'))
|
||||
if (category) {
|
||||
category.forEach((item) => {
|
||||
item.___type = "category";
|
||||
});
|
||||
this.categoryList = category;
|
||||
// this.handleClickChild(category[0], 0);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
category = JSON.parse(localStorage.getItem('category'))
|
||||
category.forEach((item) => {
|
||||
item.___type = "category";
|
||||
});
|
||||
this.categoryList = category;
|
||||
// this.handleClickChild(category[0], 0);
|
||||
},3000)
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
width: 30%;
|
||||
margin: 0 1.5%;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
> .list-item {
|
||||
padding: 10px;
|
||||
transition: 0.35s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-item:hover {
|
||||
background: #ededed;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
15
manager/src/components/lili-dialog/template/index.js
Normal file
15
manager/src/components/lili-dialog/template/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
|
||||
import category from './category.vue'
|
||||
import shops from './shops.vue'
|
||||
import marketing from './marketing.vue'
|
||||
import pages from './pages.vue'
|
||||
import goods from '../goods-dialog.vue'
|
||||
import other from './other.vue'
|
||||
export default {
|
||||
pages,
|
||||
marketing,
|
||||
shops,
|
||||
category,
|
||||
goods,
|
||||
other,
|
||||
}
|
||||
460
manager/src/components/lili-dialog/template/marketing.vue
Normal file
460
manager/src/components/lili-dialog/template/marketing.vue
Normal file
@@ -0,0 +1,460 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="list">
|
||||
<div
|
||||
class="list-item"
|
||||
v-for="(item, index) in Object.keys(promotionList)"
|
||||
:key="index"
|
||||
@click="clickPromotion(item, index)"
|
||||
:class="{ active: selectedIndex == index }"
|
||||
>
|
||||
{{ typeOption(item).title }}
|
||||
</div>
|
||||
|
||||
<!-- <div class="list-item" >暂无活动</div> -->
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-if="showPromotionList">
|
||||
<!-- <div class="search-views">
|
||||
<Input v-model="value11" disabled class="search">
|
||||
<span slot="prepend">店铺名称</span>
|
||||
</Input>
|
||||
<Button type="primary">选择</Button>
|
||||
|
||||
</div> -->
|
||||
|
||||
<div class="tables">
|
||||
<Table
|
||||
height="350"
|
||||
border
|
||||
tooltip
|
||||
:loading="loading"
|
||||
:columns="activeColumns"
|
||||
:data="showPromotionList"
|
||||
></Table>
|
||||
|
||||
<Page
|
||||
@on-change="
|
||||
(val) => {
|
||||
params.pageNumber = val;
|
||||
}
|
||||
"
|
||||
:current="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
class="mt_10"
|
||||
:total="Number(totals)"
|
||||
size="small"
|
||||
show-elevator
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getAllPromotion,
|
||||
getPromotionSeckill,
|
||||
getPromotionGoods,
|
||||
} from "@/api/promotion";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
totals: "", // 总数
|
||||
loading: true, //表格请求数据为true
|
||||
promotionList: "", // 活动列表
|
||||
selectedIndex: 0, //左侧菜单选择
|
||||
promotions: "", //选中的活动key
|
||||
index: 999, // 已选下标
|
||||
params: {
|
||||
// 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
pintuanColumns: [
|
||||
// 表头
|
||||
{
|
||||
title: "活动标题",
|
||||
key: "title",
|
||||
tooltip: true,
|
||||
width: 250,
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
key: "goodsName",
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "店铺名称",
|
||||
key: "storeName",
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "开始时间",
|
||||
key: "startTime",
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "结束时间",
|
||||
key: "endTime",
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
fixed: "right",
|
||||
width: 100,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
// type: this.index == params.index ? "primary" : "",
|
||||
size: "small",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.selectedPromotion(params);
|
||||
},
|
||||
},
|
||||
},
|
||||
this.index == params.index ? "已选" : "选择"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
seckillColumns: [
|
||||
{
|
||||
title: "商品名称",
|
||||
key: "goodsName",
|
||||
tooltip: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "店铺名称",
|
||||
key: "storeName",
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "活动时间",
|
||||
key: "timeLine",
|
||||
tooltip: true,
|
||||
render: (h, params) => {
|
||||
return h("div", {}, `${params.row.timeLine}点`);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: "原价",
|
||||
key: "originalPrice",
|
||||
tooltip: true,
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
"div",
|
||||
{},
|
||||
this.$options.filters.unitPrice(params.row.originalPrice)
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "现价",
|
||||
key: "price",
|
||||
tooltip: true,
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
style: {},
|
||||
},
|
||||
this.$options.filters.unitPrice(params.row.price, "￥")
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "promotionApplyStatus",
|
||||
tooltip: true,
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
style: {},
|
||||
},
|
||||
params.row.promotionApplyStatus == "APPLY"
|
||||
? "申请"
|
||||
: params.row.promotionApplyStatus == "PASS"
|
||||
? "通过"
|
||||
: "拒绝"
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 100,
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
// type: this.index == params.index ? "primary" : "",
|
||||
size: "small",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.selectedPromotion(params);
|
||||
},
|
||||
},
|
||||
},
|
||||
this.index == params.index ? "已选" : "选择"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
activeColumns: [], // 活动表头
|
||||
|
||||
columns: [
|
||||
{
|
||||
title: "活动标题",
|
||||
key: "title",
|
||||
tooltip: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
key: "goodsName",
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "活动开始时间",
|
||||
key: "startTime",
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "活动结束时间",
|
||||
key: "endTime",
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
fixed: "right",
|
||||
width: 100,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
// type: this.index == params.index ? "primary" : "",
|
||||
size: "small",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.selectedPromotion(params);
|
||||
},
|
||||
},
|
||||
},
|
||||
this.index == params.index ? "已选" : "选择"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
promotionData: "", //商品集合
|
||||
|
||||
showPromotionList: [], //显示当前促销的商品
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler() {
|
||||
this.index = 999;
|
||||
this.typeOption(this.promotions) &&
|
||||
this.typeOption(this.promotions).methodsed();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
sortGoods(type) {
|
||||
this.loading = false;
|
||||
this.params.pageNumber - 1;
|
||||
this.showPromotionList = this.promotionList[type];
|
||||
},
|
||||
typeOption(type) {
|
||||
// 活动选项
|
||||
switch (type) {
|
||||
case "FULL_DISCOUNT":
|
||||
return {
|
||||
title: "满减",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
|
||||
this.sortGoods("FULL_DISCOUNT");
|
||||
},
|
||||
};
|
||||
case "PINTUAN":
|
||||
return {
|
||||
title: "拼团",
|
||||
methodsed: (id) => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.sortGoods("PINTUAN");
|
||||
},
|
||||
};
|
||||
|
||||
case "KANJIA":
|
||||
return {
|
||||
title: "砍价",
|
||||
methodsed: (id) => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.sortGoods("KANJIA");
|
||||
},
|
||||
};
|
||||
case "SECKILL":
|
||||
return {
|
||||
title: "秒杀",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.seckillColumns;
|
||||
this.sortGoods("SECKILL");
|
||||
},
|
||||
};
|
||||
case "COUPON":
|
||||
return {
|
||||
title: "优惠券",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.sortGoods("COUPON");
|
||||
},
|
||||
};
|
||||
case "POINTS_GOODS":
|
||||
return {
|
||||
title: "积分商品",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.sortGoods("POINTS_GOODS");
|
||||
},
|
||||
};
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 选择活动
|
||||
selectedPromotion(val) {
|
||||
val.row.___type = "marketing";
|
||||
val.row.___promotion = this.promotions;
|
||||
this.$emit("selected", [val.row]);
|
||||
|
||||
this.index = val.index;
|
||||
},
|
||||
// 获取所有营销的活动
|
||||
async init() {
|
||||
let res = await getAllPromotion();
|
||||
if (res.success) {
|
||||
this.loading = false;
|
||||
this.getPromotion(res);
|
||||
// this.clickPromotion(this.typeOption[Object.keys(res.result)[0]], 0);
|
||||
} else {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
getPromotion(res) {
|
||||
if (res.result) {
|
||||
this.promotionList = res.result;
|
||||
this.typeOption(Object.keys(res.result)[0]).methodsed();
|
||||
}
|
||||
|
||||
// if (Object.keys(res.result).length) {
|
||||
// this.typeOption[Object.keys(res.result)[0]].methodsed(
|
||||
// this.promotionList[Object.keys(res.result)[0]].id
|
||||
// );
|
||||
// }
|
||||
},
|
||||
|
||||
// 点击某个活动查询活动列表
|
||||
clickPromotion(val, i) {
|
||||
this.promotions = val;
|
||||
this.selectedIndex = i;
|
||||
this.params.pageNumber = 1;
|
||||
this.typeOption(val) &&
|
||||
this.typeOption(val).methodsed(this.promotionList[val].id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.search {
|
||||
width: 300px;
|
||||
}
|
||||
.page {
|
||||
margin-top: 2vh;
|
||||
text-align: right;
|
||||
}
|
||||
.time {
|
||||
font-size: 12px;
|
||||
}
|
||||
.tables {
|
||||
height: 400px;
|
||||
margin-top: 20px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .ivu-table-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.list {
|
||||
margin: 0 1.5%;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
> .list-item {
|
||||
padding: 10px;
|
||||
transition: 0.35s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-item:hover {
|
||||
background: #ededed;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
.content {
|
||||
overflow: hidden;
|
||||
flex: 4;
|
||||
}
|
||||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
.search-views {
|
||||
display: flex;
|
||||
> * {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
manager/src/components/lili-dialog/template/other.vue
Normal file
145
manager/src/components/lili-dialog/template/other.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<Row :gutter="30">
|
||||
<Col
|
||||
span="4"
|
||||
v-for="(item, index) in linkList"
|
||||
:key="index"
|
||||
v-if="
|
||||
(item.title !== '拼团频道' && item.title !== '签到') ||
|
||||
$route.name !== 'renovation'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="card"
|
||||
:class="{ active: selectedIndex == index }"
|
||||
@click="handleLink(item, index)"
|
||||
>
|
||||
<Icon size="24" :type="item.icon" />
|
||||
<p>{{ item.title }}</p>
|
||||
</div>
|
||||
</Col>
|
||||
<!-- 外部链接，只有pc端跳转 -->
|
||||
<Col span="4">
|
||||
<div
|
||||
class="card"
|
||||
:class="{ active: selectedIndex == linkList.length }"
|
||||
@click="handleLink(linkItem, linkList.length)"
|
||||
>
|
||||
<Icon size="24" :type="linkItem.icon" />
|
||||
<p>{{ linkItem.title }}</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
linkList: [
|
||||
// 链接列表
|
||||
{
|
||||
title: "首页",
|
||||
icon: "md-home",
|
||||
___type: "home",
|
||||
},
|
||||
{
|
||||
title: "购物车",
|
||||
icon: "md-cart",
|
||||
___type: "cart",
|
||||
},
|
||||
{
|
||||
title: "收藏商品",
|
||||
icon: "md-heart",
|
||||
___type: "collection",
|
||||
},
|
||||
{
|
||||
title: "我的订单",
|
||||
icon: "md-document",
|
||||
___type: "order",
|
||||
},
|
||||
{
|
||||
title: "个人中心",
|
||||
icon: "md-person",
|
||||
___type: "user",
|
||||
},
|
||||
{
|
||||
title: "拼团频道",
|
||||
icon: "md-flame",
|
||||
___type: "group",
|
||||
},
|
||||
{
|
||||
title: "秒杀频道",
|
||||
icon: "md-flame",
|
||||
___type: "seckill",
|
||||
},
|
||||
{
|
||||
title: "领券中心",
|
||||
icon: "md-pricetag",
|
||||
___type: "coupon",
|
||||
},
|
||||
{
|
||||
title: "签到",
|
||||
icon: "md-happy",
|
||||
___type: "sign",
|
||||
},
|
||||
{
|
||||
title: "小程序直播",
|
||||
icon: "ios-videocam",
|
||||
___type: "live",
|
||||
},
|
||||
{
|
||||
title: "砍价",
|
||||
icon: "md-share-alt",
|
||||
___type: "kanjia",
|
||||
},
|
||||
{
|
||||
title: "积分商城",
|
||||
icon: "ios-basket",
|
||||
___type: "point",
|
||||
},
|
||||
],
|
||||
linkItem: {
|
||||
title: "外部链接",
|
||||
icon: "ios-link",
|
||||
___type: "link",
|
||||
url: "",
|
||||
},
|
||||
linkVisible: false, // 是否显示外部链接
|
||||
selectedIndex: 9999999, // 已选index
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleLink(val, index) {
|
||||
val = { ...val, ___type: "other" };
|
||||
this.selectedIndex = index;
|
||||
this.$emit("selected", [val]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../style.scss";
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
transition: 0.35s;
|
||||
cursor: pointer;
|
||||
/deep/ p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
.card:hover {
|
||||
background: #ededed;
|
||||
}
|
||||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
</style>
|
||||
80
manager/src/components/lili-dialog/template/pages.vue
Normal file
80
manager/src/components/lili-dialog/template/pages.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- TODO 目前数据少暂且不用 -->
|
||||
<!-- <div class="list">
|
||||
<div class="list-item active">
|
||||
文章页
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="content">
|
||||
<Article @callbacked="callbackArticle" :selected="true" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Article from "@/views/page/article-manage/articleList.vue";
|
||||
export default {
|
||||
components: {
|
||||
Article,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
callbackArticle(val) {
|
||||
val.___type = "pages";
|
||||
|
||||
val.___path = "/pages/passport/article";
|
||||
|
||||
this.$emit("selected", [val]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .ivu-card-body {
|
||||
height: 414px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ivu-table-wrapper ivu-table-wrapper-with-border {
|
||||
height: 300px !important;
|
||||
}
|
||||
.list {
|
||||
margin: 0 1.5%;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
> .list-item {
|
||||
padding: 10px;
|
||||
transition: 0.35s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-item:hover {
|
||||
background: #ededed;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
flex: 2;
|
||||
width: auto;
|
||||
}
|
||||
.content {
|
||||
overflow: hidden;
|
||||
flex: 8;
|
||||
height: 431px;
|
||||
}
|
||||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
.wrapper {
|
||||
height: 416px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/deep/ .ivu-table {
|
||||
height: 300px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
/deep/ .ivu-card-body {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
110
manager/src/components/lili-dialog/template/shops.vue
Normal file
110
manager/src/components/lili-dialog/template/shops.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="shop">
|
||||
<div class="wap-content">
|
||||
<div class="query-wrapper">
|
||||
<div class="query-item">
|
||||
<div>店铺名称</div>
|
||||
<Input placeholder="请输入店铺名称" @on-clear="shopsData=[]; params.storeName=''; params.pageNumber =1; init()" @on-enter="()=>{shopsData=[]; params.pageNumber =1; init();}" icon="ios-search" clearable style="width: 150px"
|
||||
v-model="params.storeName" />
|
||||
</div>
|
||||
|
||||
<div class="query-item">
|
||||
<Button type="primary" @click="shopsData=[];params.pageNumber =1; init();" icon="ios-search">搜索</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="23">
|
||||
<div class="wap-content-item" @click="clickShop(item,index)" :class="{ active:selected == index }" v-for="(item, index) in shopsData" :key="index">
|
||||
<div>
|
||||
<img class="shop-logo" :src="item.storeLogo" alt="" />
|
||||
</div>
|
||||
<div class="wap-content-desc">
|
||||
<div class="wap-content-desc-title">{{ item.storeName }}</div>
|
||||
|
||||
<div class="self-operated" :class="{'theme_color':item.selfOperated }">{{ item.selfOperated ? '自营' : '非自营' }}</div>
|
||||
<div class="wap-sku" :class="{'theme_color':(item.storeDisable === 'OPEN' ? true : false) }">{{ item.storeDisable === 'OPEN' ? '开启中' : '未开启' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
</Scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getShopListData } from "@/api/shops.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false, // 加载状态
|
||||
total: "", // 总数
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
storeDisable: "OPEN",
|
||||
storeName: "",
|
||||
},
|
||||
shopsData: [], // 店铺数据
|
||||
selected: 9999999999, //设置一个不可能选中的index
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
handleReachBottom() {
|
||||
setTimeout(() => {
|
||||
if (this.params.pageNumber * this.params.pageSize <= this.total) {
|
||||
this.params.pageNumber++;
|
||||
this.init();
|
||||
}
|
||||
}, 1500);
|
||||
},
|
||||
init() {
|
||||
this.loading = true;
|
||||
getShopListData(this.params).then((res) => {
|
||||
if (res.success) {
|
||||
/**
|
||||
* 解决数据请求中，滚动栏会一直上下跳动
|
||||
*/
|
||||
this.total = res.result.total;
|
||||
|
||||
this.shopsData.push(...res.result.records);
|
||||
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
clickShop(val, i) {
|
||||
this.selected = i;
|
||||
val = { ...val, ___type: "shops" };
|
||||
this.$emit("selected", [val]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../style.scss";
|
||||
.shop {
|
||||
display: flex;
|
||||
}
|
||||
.self-operated {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.wap-content-list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.shop-logo {
|
||||
object-fit: cover;
|
||||
}
|
||||
.wap-content-item {
|
||||
}
|
||||
.active {
|
||||
background: url("../../../assets/selected.png") no-repeat;
|
||||
background-position: right;
|
||||
background-size: 10%;
|
||||
}
|
||||
</style>
|
||||
33
manager/src/components/lili-dialog/wap.js
Normal file
33
manager/src/components/lili-dialog/wap.js
Normal file
@@ -0,0 +1,33 @@
|
||||
export default [
|
||||
{
|
||||
title: "商品",
|
||||
url: "0",
|
||||
openGoods: true,
|
||||
name: "goods"
|
||||
},
|
||||
{
|
||||
title: "分类",
|
||||
url: "1",
|
||||
name: "category"
|
||||
},
|
||||
{
|
||||
title: "店铺",
|
||||
url: "2",
|
||||
name: "shops"
|
||||
},
|
||||
{
|
||||
title: "活动",
|
||||
url: "3",
|
||||
name: "marketing"
|
||||
},
|
||||
{
|
||||
title: "页面",
|
||||
url: "3",
|
||||
name: "pages"
|
||||
},
|
||||
{
|
||||
title: "其他",
|
||||
url: "3",
|
||||
name: "other"
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user