code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-19 17:35:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化管理端代码结构

Browse Source
This commit is contained in:
paulGao
2022-09-02 17:51:33 +08:00
parent 36c4584970
commit 55aa57d812
147 changed files with 1759 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
manager/src/components/lili-dialog/template/category.vue Normal file
View 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
View 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
View 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
View 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
View 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
View 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>