mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 02:15:54 +08:00
商家楼层装修
This commit is contained in:
lemon橪
@@ -14,7 +14,7 @@
|
||||
<Button type="primary" @click="goodsData=[]; getQueryGoodsList();" icon="ios-search">搜索</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="positon:retavle;">
|
||||
<div >
|
||||
<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">
|
||||
|
||||
@@ -1,85 +1,55 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="wap-list">
|
||||
<div
|
||||
class="wap-item"
|
||||
@click="clickTag(item, i)"
|
||||
v-for="(item, i) in wap"
|
||||
:key="i"
|
||||
:class="{ active: selected == i }"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="wap-content"></div>
|
||||
|
||||
<!-- 弹出选择商品的modal -->
|
||||
<Modal
|
||||
title="选择"
|
||||
:styles="{ top: '120px' }"
|
||||
width="750"
|
||||
@on-cancel="clickClose"
|
||||
@on-ok="clickClose"
|
||||
v-model="flag"
|
||||
:mask-closable="false"
|
||||
scrollable
|
||||
>
|
||||
<goodsDialog
|
||||
@selected="
|
||||
<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) => {
|
||||
goodsData = val;
|
||||
changed = val;
|
||||
}
|
||||
"
|
||||
ref="goodsDialog"
|
||||
/>
|
||||
</Modal>
|
||||
" />
|
||||
</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 {
|
||||
goodsData: "", // 商品列表
|
||||
flag: false, // 控制商品模块显隐
|
||||
selected: 0, // 已选模块
|
||||
templateWay, // 模板数据
|
||||
changed: "", // 变更模板
|
||||
selected: 0, // 已选数据
|
||||
selectedLink: "", //选中的链接
|
||||
wap, // tab标签栏数据
|
||||
wap // tab标签
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selectedLink(val) {
|
||||
this.$emit("selectedLink", val);
|
||||
changed: {
|
||||
handler(val) {
|
||||
this.$emit("selectedLink", val[0]); //因为是单选，所以直接返回第一个
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
console.log( this.$refs["lili-component"])
|
||||
this.$refs["lili-component"][0].type = "single"; //商品页面设置成为单选
|
||||
});
|
||||
|
||||
this.wap.forEach((item) => {
|
||||
item.selected = false;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
clickClose() {
|
||||
this.flag = false;
|
||||
},
|
||||
|
||||
// 点击链接
|
||||
clickTag(val, i) {
|
||||
this.selected = i;
|
||||
if (!val.openGoods) {
|
||||
this.selectedLink = val;
|
||||
}
|
||||
// 打开选择商品
|
||||
else {
|
||||
this.$refs.goodsDialog.selectedWay = [];
|
||||
this.$refs.goodsDialog.type = "single";
|
||||
this.flag = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@@ -91,6 +61,9 @@ export default {
|
||||
.wap-flex {
|
||||
margin: 2px;
|
||||
}
|
||||
.tabs {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .ivu-modal {
|
||||
overflow: hidden;
|
||||
@@ -101,4 +74,4 @@ export default {
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
121
seller/src/views/lili-dialog/template/category.vue
Normal file
121
seller/src/views/lili-dialog/template/category.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<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
seller/src/views/lili-dialog/template/index.js
Normal file
15
seller/src/views/lili-dialog/template/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
|
||||
import category from './category.vue'
|
||||
import shops from './shops.vue'
|
||||
|
||||
import pages from './pages.vue'
|
||||
import goods from '../goods-dialog.vue'
|
||||
import other from './other.vue'
|
||||
export default {
|
||||
// pages,
|
||||
|
||||
// shops,
|
||||
category,
|
||||
goods,
|
||||
other,
|
||||
}
|
||||
141
seller/src/views/lili-dialog/template/other.vue
Normal file
141
seller/src/views/lili-dialog/template/other.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<Row :gutter="30">
|
||||
<Col span="6" 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="6" v-if="$route.name === 'renovation'">
|
||||
<div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
|
||||
<Poptip v-model="linkVisible">
|
||||
<Icon size="24" :type="linkItem.icon" />
|
||||
<p>{{linkItem.title}}</p>
|
||||
<div slot="title">链接地址</div>
|
||||
<div slot="content">
|
||||
<Input type="text" @keyup="handleLink(linkItem,linkList.length)" v-model="linkItem.url" placeholder="https://"></Input>
|
||||
</div>
|
||||
</Poptip>
|
||||
|
||||
</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;
|
||||
if (index === this.linkList.length) {
|
||||
this.linkVisible = true
|
||||
} else {
|
||||
this.linkVisible = false
|
||||
}
|
||||
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
seller/src/views/lili-dialog/template/pages.vue
Normal file
80
seller/src/views/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
seller/src/views/lili-dialog/template/shops.vue
Normal file
110
seller/src/views/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>
|
||||
@@ -1,25 +1,29 @@
|
||||
export default [
|
||||
{
|
||||
title:"商品",
|
||||
url:"0",
|
||||
openGoods:true
|
||||
},
|
||||
{
|
||||
title:"分类",
|
||||
url:"1"
|
||||
},
|
||||
{
|
||||
title:"店铺",
|
||||
url:"2"
|
||||
},
|
||||
{
|
||||
title:"活动",
|
||||
url:"3",
|
||||
|
||||
},
|
||||
{
|
||||
title:"其他",
|
||||
url:"4"
|
||||
}
|
||||
{
|
||||
title: "商品",
|
||||
url: "0",
|
||||
openGoods: true,
|
||||
name: "goods"
|
||||
},
|
||||
// {
|
||||
// title: "分类",
|
||||
// url: "1",
|
||||
// name: "category"
|
||||
// },
|
||||
|
||||
// {
|
||||
// title: "活动",
|
||||
// url: "3",
|
||||
// name: "marketing"
|
||||
// },
|
||||
// {
|
||||
// title: "页面",
|
||||
// url: "3",
|
||||
// name: "pages"
|
||||
// },
|
||||
{
|
||||
title: "其他",
|
||||
url: "3",
|
||||
name: "other"
|
||||
}
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user