mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 02:15:54 +08:00
commit message
This commit is contained in:
Chopper
235
seller/src/views/lili-dialog/goods-dialog.vue
Normal file
235
seller/src/views/lili-dialog/goods-dialog.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<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=''; getQueryGoodsList()" @on-enter="()=>{goodsData=[]; getQueryGoodsList();}" icon="ios-search" clearable
|
||||
style="width: 150px" v-model="goodsParams.goodsName" />
|
||||
</div>
|
||||
<div class="query-item">
|
||||
<Cascader v-model="category" placeholder="请选择商品分类" style="width: 150px" :data="cateList"></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-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
|
||||
|
||||
cateList: [], // 商品分类列表
|
||||
selectedWay: [], //选中商品集合
|
||||
total: "", // 商品总数
|
||||
goodsParams: { // 请求商品列表参数
|
||||
pageNumber: 1,
|
||||
pageSize: 18,
|
||||
order: "desc",
|
||||
goodsName: "",
|
||||
sn: "",
|
||||
categoryPath: "",
|
||||
marketEnable: "UPPER",
|
||||
isAuth: "PASS",
|
||||
},
|
||||
category: [], // 选中的商品分类
|
||||
goodsData: [], // 商品列表
|
||||
empty: false, // 是否空数据
|
||||
loading: false, // 商品加载loading
|
||||
};
|
||||
},
|
||||
props: ["clearFlag"],
|
||||
watch: {
|
||||
category(val) {
|
||||
this.goodsParams.categoryPath = val[2];
|
||||
},
|
||||
selectedWay: {
|
||||
handler() {
|
||||
this.$emit("selected", this.selectedWay);
|
||||
},
|
||||
deep: 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.total = res.result.total;
|
||||
this.goodsData.push(...res.result.records);
|
||||
|
||||
} else {
|
||||
this.empty = true;
|
||||
}
|
||||
},
|
||||
|
||||
// 查询商品
|
||||
init() {
|
||||
Promise.all([
|
||||
API_Goods.getGoodsSkuData(this.goodsParams),
|
||||
API_Goods.getGoodsCategoryAll(0),
|
||||
]).then((res) => {
|
||||
// 商品
|
||||
this.initGoods(res[0]);
|
||||
|
||||
// 分类
|
||||
if (res[1].result) {
|
||||
this.deepGroup(res[1].result);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
deepGroup(val) {
|
||||
val.forEach((item) => {
|
||||
let childWay = []; //第二级
|
||||
let grandWay = []; //第三级
|
||||
// 第二层
|
||||
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.cateList.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;
|
||||
this.selectedWay.splice(index, 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
106
seller/src/views/lili-dialog/index.vue
Normal file
106
seller/src/views/lili-dialog/index.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<Modal
|
||||
:title="title"
|
||||
:styles="{ top: '120px' }"
|
||||
width="750"
|
||||
@on-cancel="clickClose"
|
||||
@on-ok="clickOK"
|
||||
v-model="flag"
|
||||
:mask-closable="false"
|
||||
scrollable
|
||||
>
|
||||
<goodsDialog
|
||||
@selected="
|
||||
(val) => {
|
||||
goodsData = val;
|
||||
}
|
||||
"
|
||||
ref="goodsDialog"
|
||||
v-if="goodsFlag"
|
||||
/>
|
||||
<linkDialog
|
||||
@selectedLink="
|
||||
(val) => {
|
||||
linkData = val;
|
||||
}
|
||||
"
|
||||
v-else
|
||||
class="linkDialog"
|
||||
/>
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
import goodsDialog from "./goods-dialog";
|
||||
import linkDialog from "./link-dialog";
|
||||
export default {
|
||||
components: {
|
||||
goodsDialog,
|
||||
linkDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "选择", // 模态框标题
|
||||
goodsFlag: false, // 是否商品选择器
|
||||
goodsData: "", //选择的商品
|
||||
linkData: "", //选择的链接
|
||||
flag: false, // 控制模态框显隐
|
||||
};
|
||||
},
|
||||
props: ["types"],
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 关闭弹窗
|
||||
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();
|
||||
// this.clearFlag = false
|
||||
},
|
||||
open(type){
|
||||
this.flag = true;
|
||||
if(type == 'goods'){
|
||||
this.goodsFlag = true;
|
||||
} 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>
|
||||
106
seller/src/views/lili-dialog/link-dialog.vue
Normal file
106
seller/src/views/lili-dialog/link-dialog.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<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="
|
||||
(val) => {
|
||||
goodsData = val;
|
||||
}
|
||||
"
|
||||
ref="goodsDialog"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import wap from "./wap.js";
|
||||
import goodsDialog from "./goods-dialog";
|
||||
export default {
|
||||
components: {
|
||||
goodsDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsData: "", // 商品列表
|
||||
flag: false, // 控制商品模块显隐
|
||||
selected: 0, // 已选模块
|
||||
selectedLink: "", //选中的链接
|
||||
wap,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selectedLink(val) {
|
||||
|
||||
|
||||
this.$emit("selectedLink", val);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
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;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "./style.scss";
|
||||
.wap-content-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.wap-flex {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
/deep/ .ivu-modal {
|
||||
overflow: hidden;
|
||||
height: 650px !important;
|
||||
}
|
||||
/deep/ .ivu-modal-body {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
101
seller/src/views/lili-dialog/style.scss
Normal file
101
seller/src/views/lili-dialog/style.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.wap-list {
|
||||
flex: 2;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
> .wap-list,
|
||||
.wap-content {
|
||||
padding: 8px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.active{
|
||||
background: #ededed;
|
||||
}
|
||||
.active {
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
.wap-content-item {
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
height: 80px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
25
seller/src/views/lili-dialog/wap.js
Normal file
25
seller/src/views/lili-dialog/wap.js
Normal file
@@ -0,0 +1,25 @@
|
||||
export default [
|
||||
{
|
||||
title:"商品",
|
||||
url:"0",
|
||||
openGoods:true
|
||||
},
|
||||
{
|
||||
title:"分类",
|
||||
url:"1"
|
||||
},
|
||||
{
|
||||
title:"店铺",
|
||||
url:"2"
|
||||
},
|
||||
{
|
||||
title:"活动",
|
||||
url:"3",
|
||||
|
||||
},
|
||||
{
|
||||
title:"其他",
|
||||
url:"4"
|
||||
}
|
||||
|
||||
];
|
||||
Reference in New Issue
Block a user