zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

最新楼层装修模块

master
学习很差啦 2023-04-07 16:47:27 +08:00
parent 816d842a57
commit 1cbafbce25
19 changed files with 940 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
buyer/src/components/fixed/index.vue
View File

@ -16,23 +16,28 @@ export default {
iconList:[
{
icon:"user",
label:"会员中心"
label:"会员中心",
path:"/home"
},
{
icon:"consumer",
label:"客服"
label:"客服",
path:"/home"
},
{
icon:"notification",
label:"消息"
label:"消息",
path:"/home/MsgList"
},
{
icon:"feedback",
label:"反馈"
label:"反馈",
path:"/home"
},
{
icon:"back",
label:"顶部"
label:"顶部",
path:"back"
},
],
isScrolling:false,
@ -62,7 +67,7 @@ export default {
}
},
handleClickIcon(val){
if(val.icon === 'back'){
if(val.path === 'back'){
this.scrollToTop()
}
}

16
buyer/src/components/indexDecorate/ModelFormItem.vue
View File

@ -94,6 +94,14 @@
<template v-if="element.type == 'onlyGoodsModel'">
<onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
</template>
<!-- 混合模块 -->
<template v-if="element.type == 'mixModel'">
<mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
</template>
<!-- 混合模块 -->
<template v-if="element.type == 'forYour'">
<forYour :data="element" class="mb_20 width_1200_auto"></forYour>
</template>
<!-- 新品排行 -->
<template v-if="element.type == 'newGoodsSort'">
<new-goods-sort
@ -142,6 +150,8 @@ import Seckill from "./modelList/Seckill.vue";
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
import goodsAndType from "./modelList/goodsAndType.vue";
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
import mixModel from "./modelList/mixModel.vue";
import forYour from "./modelList/forYour.vue";
export default {
@ -158,7 +168,9 @@ export default {
Seckill,
oneRowThreeColumns,
goodsAndType,
onlyGoodsModel
onlyGoodsModel,
mixModel,
forYour
},
data() {
return {
@ -223,7 +235,7 @@ export default {
}
.width_1200_auto {
width: 1200px;
width: 1184px;
margin: 0 auto;
}

29
buyer/src/components/indexDecorate/modelList/Carousel.vue
View File

@ -27,8 +27,8 @@
}}
</div>
<div v-if="userInfo.id">
<div class="icon-list flex flex-j-sb" @click="entryControl">
<div class="icon-item" :key="index" v-for="(item,index) in recentList">
<div class="icon-list flex flex-j-sb" >
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item,index) in recentList">
<div class="value">
{{ item.value}}
</div>
@ -48,16 +48,16 @@
</div>
<div class="gray-line"></div>
<div class="icon-list flex flex-j-sb" @click="entryControl">
<div class="icon-item" :key="index" v-for="(item,index) in entranceList">
<div class="icon-list flex flex-j-sb" >
<div class="icon-item" @click="entryControl(item)" :key="index" v-for="(item,index) in entranceList">
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
<div>
{{ item.label}}
</div>
</div>
</div>
<div class="icon-list flex flex-j-sb" @click="entryControl">
<div class="icon-item" :key="index" v-for="(item,index) in appendList">
<div class="icon-list flex flex-j-sb" >
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item,index) in appendList">
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
<div>
{{ item.label}}
@ -88,19 +88,23 @@ export default {
entranceList:[
{
icon:"collage",
label:"宝贝收藏"
label:"宝贝收藏",
path:"/home/Favorites"
},
{
icon:"shop",
label:"收藏店铺"
label:"收藏店铺",
path:"/home/Favorites?type=STORE"
},
{
icon:"carts",
label:"购物车"
label:"购物车",
path:"/cart"
},
{
icon:"story",
label:"我的足迹"
label:"我的足迹",
path:"/home/MyTracks"
},
],
appendList:[
@ -143,8 +147,9 @@ export default {
},
methods: {
// 快捷跳转中心
entryControl(){
entryControl(val){
console.log(val)
this.$router.push(val.path)
},
},
mounted() {

228
buyer/src/components/indexDecorate/modelList/forYour.vue Normal file
View File

@ -0,0 +1,228 @@
<template>
<div class="model" v-if="data">
<div class="for-your">{{ data.options.title }}</div>
<div class="flex card">
<div class="left">
<img :src="data.options.data.image.src" alt="" />
</div>
<div class="right flex">
<!-- 商品区 -->
<div class="goods-list">
<div
class="goods-item"
:key="index"
v-for="(item, index) in data.options.data.list"
@click="linkTo(item.url)"
>
<div>
<div class="goods-name">{{ item.title }}</div>
<div class="goods-desc">{{ item.desc }}</div>
</div>
<img class="goods-img" :src="item.img" alt="" />
</div>
</div>
<!-- 热卖区 -->
<div class="hot-list">
<div class="hot-title">{{ data.options.data.hot.title }}</div>
<div
class="hot-item flex flex-a-c"
v-for="(item, index) in data.options.data.hot.list"
:key="index"
@click="linkTo(item.url)"
>
<img :src="item.img" alt="" />
<div class="hot-goods">
<div class="hot-goods-title">{{ item.title }}</div>
<div>
<div class="hot-price">￥{{ item.price | unitPrice }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "forYour",
data() {
return {
current: "",
};
},
props: {
data: {
type: Object,
default: {},
},
},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.goods-list {
display: flex;
width: 558px;
flex-wrap: wrap;
}
.goods-item {
width: 278px;
height: 277px;
text-align: center;
box-sizing: border-box;
cursor: pointer;
border-right: 1.4px solid #e2e2e2;
&:nth-of-type(3) {
border-top: 1.4px solid #e2e2e2;
}
&:nth-of-type(4) {
border-top: 1.4px solid #e2e2e2;
}
&:hover {
/deep/ .goods-name {
color: $theme_color;
}
/deep/ .goods-desc {
color: $theme_color;
}
}
}
.goods-name {
margin-top: 23px;
font-size: 25px;
font-weight: normal;
line-height: 30px;
text-align: center;
letter-spacing: 0px;
color: #333333;
}
.goods-img {
width: 190px;
height: 156px;
margin-top: 19px;
border-radius: 10px;
}
.goods-desc {
font-size: 14px;
font-weight: normal;
line-height: 17px;
text-align: center;
margin-top: 11px;
letter-spacing: 0px;
color: #333333;
}
.for-your {
font-size: 35px;
font-weight: normal;
line-height: 42px;
text-align: center;
letter-spacing: 0px;
margin-bottom: 32px;
color: #333333;
}
.card,
.right-card {
opacity: 1;
background: #ffffff;
border-radius: 10px;
position: relative;
box-shadow: 0px 1px 13px 0px #E5E5E5;
&:hover {
.setup-box {
display: block;
}
}
}
.modal-tab-bar {
> .flex {
align-items: center;
margin: 10px 0;
}
}
.draggable {
> .flex {
align-items: center;
}
}
.left {
width: 346px;
height: 554px;
border-radius: 9.8px 0px 0px 9.8px;
> img {
max-width: 100%;
height: 100%;
}
}
.right {
width: 839px;
height: 554px;
border-radius: 0px 9.8px 9.8px 0px;
}
.hot-list {
width: 279px;
}
.hot-title {
margin-left: 25px;
line-height: 63px;
font-size: 17px;
font-weight: normal;
letter-spacing: 0px;
color: #333333;
height: 63px;
}
.hot-item {
cursor: pointer;
box-sizing: border-box;
border-top: 1.4px solid #e2e2e2;
height: 122px;
padding:0 14px;
align-items: center;
&:hover {
> .hot-goods {
> .hot-goods-title {
color: $theme_color;
}
}
}
> img {
width: 76.3px;
height: 77.7px;
}
}
.hot-goods {
margin-left: 14px;
}
.hot-goods-title {
font-size: 13px;
font-weight: normal;
line-height: 16px;
letter-spacing: 0px;
color: #333333;
}
.hot-price {
margin-top: 10.3px;
font-size: 24px;
font-weight: normal;
line-height: 29px;
letter-spacing: 0px;
color: $theme_color;
}
</style>

9
buyer/src/components/indexDecorate/modelList/goodsAndType.vue
View File

@ -15,10 +15,10 @@
</div>
</div>
<!-- 商品部分 -->
<div class="goods-list flex-j-sb">
<div class="only-goods-list flex-j-sb">
<div
v-if="paramData.options"
class="goods-list-item"
class="only-goods-list-item"
v-for="(item, index) in paramData.options.list.filter((client) => {
return client.___index == current;
})"
@ -104,7 +104,10 @@ export default {
color: #ffffff;
background: $theme_color;
}
.goods-list-item {
.only-goods-list{
display: flex;
}
.only-goods-list-item {
padding-top: 30px;
width: 287px;
height: 343.7px;

13
buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="flex" v-if="data.options.right.model == 'brand'">
<div class="left-side" >
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
<img :src="data.options.right.data.image.src" alt="">
</div>
<div>
<div class="right-side">
<div class="badge-box flex">
<div class="round">
<Icon type="ios-arrow-forward" />
@ -12,7 +12,7 @@
</div>
<div class="flex goods-list">
<div class="goods-item flex" :key="index" v-for="(item,index) in data.options.right.data.list">
<div class="goods-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.right.data.list">
<div class="goods-thumbnail">
<img :src="item.img" alt="">
</div>
@ -43,8 +43,8 @@ export default {
</script>
<style scoped lang="scss">
.goods-detail{
.right-side{
width: 330px;
}
.goods-detail-title{
font-size: 13px;
@ -59,7 +59,7 @@ export default {
font-weight: normal;
line-height: 17px;
letter-spacing: 0px;
color: #F31947;
color: $theme_color;
margin-top: 8px;
margin-bottom:10px;
}
@ -87,6 +87,7 @@ export default {
}
}
.goods-list{
width: 330px;
flex-wrap: wrap;
justify-content:space-between;
padding: 0 16px;

17
buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
View File

@ -1,16 +1,17 @@
<template>
<div class="flex" v-if="data.options.left.model == 'goods'">
<div class="left-side" >
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
<img :src="data.options.left.data.image.src" alt="">
</div>
<div>
<div class="right-side">
<div class="badge-box flex">
<div class="badge">
{{data.options.left.data.badge}}
<div class="badge" @click="linkTo(data.options.right.data.image.url)">
{{data.options.left.data.badge.label}}
</div>
</div>
<div class="flex goods-list">
<div class="goods-item flex" :key="index" v-for="(item,index) in data.options.left.data.list">
<div class="goods-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.left.data.list">
<div class="goods-thumbnail">
<img :src="item.img" alt="">
</div>
@ -45,8 +46,8 @@ export default {
</script>
<style scoped lang="scss">
.goods-detail{
.right-side{
width: 387px;
}
.goods-detail-title{
font-size: 13px;
@ -79,11 +80,13 @@ export default {
justify-content:right;
}
.goods-list{
width: 387px;
flex-wrap: wrap;
justify-content:space-between;
padding: 0 16px;
}
.goods-item{
cursor: pointer;
display: flex;
align-items: center;
width: 173.6px;

12
buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="goods-type-wrapper">
<!-- 商品部分 -->
<div class="goods-list flex" >
<div class="only-goods-list flex" >
<div
class="goods-list-item"
class="only-goods-list-item"
v-for="(item, index) in data.options.list"
:key="index"
@click="handleClick(item)"
@ -86,7 +86,7 @@ export default {
margin-left: 20px;
margin-bottom: 10px;
}
.goods-list {
.only-goods-list {
position: relative;
flex-wrap: wrap;
justify-content: space-between;
@ -101,7 +101,7 @@ export default {
align-items: center;
justify-content: space-between;
}
.goods-list-item {
.only-goods-list-item {
padding-top: 34.8px;
margin-bottom: 14.3px;
width: 287px;
@ -155,7 +155,7 @@ export default {
text-align: center;
letter-spacing: 0px;
color: #f31947;
color: $theme_color;
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
}
.goods-type-line {
@ -172,7 +172,7 @@ export default {
color: #333333;
}
.active {
color: #f31947;
color: $theme_color;
}
.goods-type-labels {
font-size: 21px;

4
buyer/src/pages/home/memberCenter/Favorites.vue
View File

@ -53,11 +53,12 @@ export default {
params: { // 请求参数
pageNumber: 1,
pageSize: 100,
type: 'GOODS'
type: this.$route.query.type || 'GOODS'
},
spinShow: false // 加载状态
};
},
methods: {
getList () { // 获取收藏列表
this.spinShow = true
@ -123,6 +124,7 @@ export default {
mounted () {
if (this.homePage) this.params.pageSize = 5;
this.getList()
}
};
</script>

BIN
manager/src/assets/mix-bg1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 211 KiB

After

Width:  |  Height:  |  Size: 69 KiB

BIN
manager/src/assets/mix-bg2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 208 KiB

After

Width:  |  Height:  |  Size: 71 KiB

1
manager/src/components/lili-dialog/link-dialog.vue
View File

@ -66,7 +66,6 @@ export default {
}, []);
this.wap.forEach((items,indexs) => {
if(items.title == '活动'){
console.log(32323232323232)
this.wap.splice(indexs,1)
}
})

1
manager/src/components/lili-dialog/template/other.vue
View File

@ -117,7 +117,6 @@ export default {
if(urls.indexOf('/floorList/renovation') != -1){
this.linkList.forEach((items,indexs)=>{
if(items.title == '砍价'){
console.log(12321322,indexs)
this.linkList.splice(indexs,1)
}
})

4
manager/src/components/lili-dialog/template/special.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="wrapper">
<div class="content">
<div >
<div>
<div class="tables">
<Table
border
@ -22,7 +22,7 @@
:current="params.pageNumber"
:page-size="params.pageSize"
class="mt_10"
:total="Number(totals)"
:total="Number(total)"
size="small"
show-elevator
/>

78
manager/src/views/page-decoration/modelConfig.js
View File

@ -789,7 +789,7 @@ export const modelData = [{
data:{
image:{
url:"",
src:require('@/assets/mix-bg1.png'),
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg1.png',
size:"197 * 344"
},
list:[
@ -830,7 +830,7 @@ export const modelData = [{
data:{
image:{
url:"",
src:require('@/assets/mix-bg2.png'),
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg2.png',
size:"254 * 344"
},
list:[
@ -872,6 +872,80 @@ export const modelData = [{
},
},
{
type: 'forYour',
name: '为你推荐',
icon: 'md-image',
options: {
model:'goods',
title:"为你推荐",
//数据集合
data:{
image:{
url:"",
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg3.png',
size:"197 * 344"
},
list:[
{
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example1.png",
title:"标题",
desc:"精品好物等你挑",
url:"",
size:"346 * 554"
},
{
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example2.png",
title:"标题",
desc:"精品好物等你挑",
url:"",
size:"190 * 156"
},
{
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example3.png",
title:"标题",
desc:"精品好物等你挑",
url:"",
size:"190 * 156"
},
{
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example4.png",
title:"标题",
desc:"精品好物等你挑",
url:"",
size:"190 * 156"
},
],
hot:{
title:"最近热卖",
list:[
{
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
title:"商品标题",
price:"120",
url:"",
},{
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
title:"商品标题",
price:"120",
url:"",
},{
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
title:"商品标题",
price:"120",
url:"",
},{
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
title:"商品标题",
price:"120",
url:"",
},
]
}
},
},
},
{
type: 'notEnough',

8
manager/src/views/page-decoration/modelFormItem.vue
View File

@ -127,6 +127,10 @@
<template v-if="element.type == 'mixModel'">
<mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
</template>
<!-- 为你推荐 -->
<template v-if="element.type == 'forYour'">
<forYour :data="element" class="mb_20 width_1200_auto"></forYour>
</template>
<!-- 一行三列 -->
<template v-if="element.type == 'oneRowThreeColumns'">
<oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
@ -261,6 +265,7 @@ import goodsType from "./modelList/goodsAndType.vue";
import ossManage from "@/views/sys/oss-manage/ossManage";
import mixModel from "./modelList/mixModel.vue";
import forYour from "./modelList/forYour.vue";
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
@ -282,7 +287,8 @@ export default {
oneRowThreeColumns,
"seckill-only-album":seckillOnlyAlbum,
onlyGoodsModel,
mixModel
mixModel,
forYour
},
data() {
return {

444
manager/src/views/page-decoration/modelList/forYour.vue Normal file
View File

@ -0,0 +1,444 @@
<template>
<div class="model" v-if="data">
<div class="for-your">{{ data.options.title }}</div>
<div class="flex card">
<div class="left">
<img :src="data.options.data.image.src" alt="" />
</div>
<div class="right flex">
<!-- 商品区 -->
<div class="goods-list">
<div
class="goods-item"
:key="index"
v-for="(item, index) in data.options.data.list"
>
<div>
<div class="goods-name">{{ item.title }}</div>
<div class="goods-desc">{{ item.desc }}</div>
</div>
<img class="goods-img" :src="item.img" alt="" />
</div>
</div>
<!-- 热卖区 -->
<div class="hot-list">
<div class="hot-title">{{ data.options.data.hot.title }}</div>
<div
class="hot-item flex flex-a-c"
v-for="(item, index) in data.options.data.hot.list"
:key="index"
>
<img :src="item.img" alt="" />
<div class="hot-goods">
<div class="hot-goods-title">{{ item.title }}</div>
<div>
<div class="hot-price">￥{{ item.price | unitPrice }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="setup-box">
<div>
<Button size="small" @click.stop="handleSelectModel()">编辑 </Button>
</div>
</div>
</div>
<Modal
v-model="showModal"
title="装修"
draggable
width="800"
:z-index="100"
:mask-closable="false"
>
<div>
<div class="modal-tab-bar">
<div>
主标题:
<Input style="width: 200px" v-model="data.options.title"></Input>
</div>
<Divider>左侧商品部分</Divider>
<div class="flex">
<div>图片 :</div>
<div>
<img class="image" :src="data.options.data.image.src" alt="" />
<div>
<div>推荐尺寸：{{ data.options.data.image.size }}</div>
<div class="link-src">
链接地址：
<Input
style="width: 200px"
v-model="data.options.data.image.url"
disabled
/>
</div>
<Button
size="small"
type="primary"
@click="handleSelectImg('image')"
>选择图片
</Button>
<Button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink('image')"
>选择链接
</Button>
</div>
</div>
</div>
<Divider>中间商品部分</Divider>
<div class="flex column-list">
<div
v-for="(item, index) in data.options.data.list"
:key="index"
class="draggable"
>
<div class="flex">
<img :src="item.img" class="column-img" />
<div class="column-goods-list">
<div><Input v-model="item.title"></Input></div>
<div><Input v-model="item.desc"></Input></div>
<div><Input disabled v-model="item.url"></Input></div>
<div>{{ item.size }}</div>
<Button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink('list', index)"
>选择链接
</Button>
<Button
size="small"
class="ml_10"
type="primary"
@click="handleSelectImg('list', index)"
>选择图片
</Button>
</div>
</div>
</div>
</div>
<Divider>右侧商品部分</Divider>
<div class="flex">
<div>右侧标题 :</div>
<Input
style="width: 200px"
v-model="data.options.data.hot.title"
></Input>
</div>
<div class="flex column-list">
<div
v-for="(item, index) in data.options.data.hot.list"
:key="index"
class="draggable"
>
<div class="flex">
<img :src="item.img" class="column-img" />
<div class="column-goods-list">
<Button
size="small"
class="ml_10"
type="primary"
@click="handleSelectGoods('hot', index)"
>选择商品
</Button>
</div>
</div>
</div>
</div>
</div>
</div>
</Modal>
<!-- 选择商品。链接 -->
<liliDialog
ref="liliDialog"
@selectedLink="selectedLink"
@selectedGoodsData="selectedGoodsData"
></liliDialog>
<!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage
@callback="callbackSelected"
:isComponent="true"
ref="ossManage"
/>
</Modal>
</div>
</template>
<script>
import ossManage from "@/views/sys/oss-manage/ossManage.vue";
export default {
name: "forYour",
data() {
return {
showModal: false,
picModelFlag: false,
selectedData: "", //选中的数据
goodsIndex: 0, // 商品索引
align: "",
defaultCallbackImageType: "",
current: "",
};
},
props: {
data: {
type: Object,
default: {},
},
},
components: {
ossManage,
},
mounted() {
},
methods: {
handleSelectImg(type, index) {
this.defaultCallbackImageType = type;
this.goodsIndex = index;
// 选择图片
this.$refs.ossManage.selectImage = true;
this.picModelFlag = true;
},
handleSelectGoods(val, index) {
this.$refs.liliDialog.open("goods");
this.$refs.liliDialog.singleGoods();
this.selectedData = val;
this.goodsIndex = index;
},
handleSelectLink(val, index) {
// 调起选择链接弹窗
this.$refs.liliDialog.open("link");
this.selectedData = val;
this.goodsIndex = index;
},
// 回显图片
callbackSelected(val) {
this.picModelFlag = false;
if (this.defaultCallbackImageType == "image") {
this.data.options.data.image.src = val.url;
} else {
this.data.options.data[this.defaultCallbackImageType][
this.goodsIndex
].img = val.url;
}
},
// 选择商品回调
selectedGoodsData(val) {
this.data.options.data.hot.list[this.goodsIndex].img = val[0].thumbnail;
this.data.options.data.hot.list[this.goodsIndex].title = val[0].goodsName;
this.data.options.data.hot.list[this.goodsIndex].price = val[0].price;
this.data.options.data.hot.list[this.goodsIndex].url =
this.$options.filters.formatLinkType(val[0]);
console.log(val, this.selectedData, this.goodsIndex);
},
// 选择链接回调
selectedLink(val) {
console.log(val,this.selectedData)
if (this.selectedData == "image") {
this.data.options.data.image.url =
this.$options.filters.formatLinkType(val);
} else {
console.log(this.data.options.data.list,this.goodsIndex)
this.data.options.data.list[
this.goodsIndex
].url = this.$options.filters.formatLinkType(val);
}
},
/*
* 点击不同模块进行编辑
* 判断也很简单，就是第一个第二个模块进行判断
*
* */
handleSelectModel() {
this.showModal = true;
},
},
};
</script>
<style scoped lang="scss">
@import "./setup-box.scss";
.goods-list {
display: flex;
width: 558px;
flex-wrap: wrap;
}
.goods-item {
width: 278px;
height: 277px;
text-align: center;
box-sizing: border-box;
border-right: 1.4px solid #e2e2e2;
&:nth-of-type(3) {
border-top: 1.4px solid #e2e2e2;
}
&:nth-of-type(4) {
border-top: 1.4px solid #e2e2e2;
}
}
.active {
color: #f31947;
}
.goods-name {
margin-top: 23px;
font-size: 25px;
font-weight: normal;
line-height: 30px;
text-align: center;
letter-spacing: 0px;
color: #333333;
}
.goods-img {
width: 190px;
height: 156px;
border-radius: 10px;
margin-top: 19px;
}
.goods-desc {
font-size: 14px;
font-weight: normal;
line-height: 17px;
text-align: center;
margin-top: 11px;
letter-spacing: 0px;
color: #333333;
}
.for-your {
font-size: 35px;
font-weight: normal;
line-height: 42px;
text-align: center;
letter-spacing: 0px;
margin-bottom: 32px;
color: #333333;
}
.column-goods-list {
> div {
margin: 10px;
}
}
.link-src {
margin: 10px 0;
}
.card,
.right-card {
opacity: 1;
background: #ffffff;
position: relative;
&:hover {
.setup-box {
display: block;
}
}
}
.column-img {
width: 100px;
height: 100px;
}
.column-list {
flex-wrap: wrap;
> div {
width: 50%;
}
}
.image {
max-width: 100px;
}
.modal-tab-bar {
> .flex {
align-items: center;
margin: 10px 0;
}
}
.draggable {
margin: 10px 0;
> .flex {
align-items: center;
}
}
.left {
width: 346px;
height: 554px;
border-radius: 9.8px 0px 0px 9.8px;
> img {
max-width: 100%;
height: 100%;
}
}
.right {
width: 839px;
height: 554px;
border-radius: 0px 9.8px 9.8px 0px;
}
.hot-list {
width: 279px;
}
.hot-title {
margin-left: 25px;
line-height: 63px;
font-size: 17px;
font-weight: normal;
letter-spacing: 0px;
color: #333333;
height: 63px;
}
.hot-item {
box-sizing: border-box;
border-top: 1.4px solid #e2e2e2;
height: 122px;
padding-left: 14px;
align-items: center;
> img {
width: 76.3px;
height: 77.7px;
}
}
.hot-goods {
margin-left: 14px;
}
.hot-goods-title {
font-size: 13px;
font-weight: normal;
line-height: 16px;
letter-spacing: 0px;
color: #333333;
}
.hot-price {
margin-top: 10.3px;
font-size: 24px;
font-weight: normal;
line-height: 29px;
letter-spacing: 0px;
color: #f31947;
}
</style>

199
manager/src/views/page-decoration/modelList/mixModel.vue
View File

@ -2,29 +2,23 @@
<div class="mix-model">
<!-- 左侧 -->
<div class="left-card">
<left :data="data"/>
<left :data="data" />
<div class="setup-box">
<div>
<Button
size="small"
@click.stop="handleSelectModel('left')"
>编辑
</Button
>
<Button size="small" @click.stop="handleSelectModel('left')"
>编辑
</Button>
</div>
</div>
</div>
<!-- 右侧 -->
<div class="right-card">
<right :data="data"/>
<right :data="data" />
<div class="setup-box">
<div>
<Button
size="small"
@click.stop="handleSelectModel('right')"
>编辑
</Button
>
<Button size="small" @click.stop="handleSelectModel('right')"
>编辑
</Button>
</div>
</div>
</div>
@ -41,56 +35,65 @@
<div>
当前模块 :
<ButtonGroup>
<Button :type="current.model == 'goods' ? 'primary' : 'default'">商品</Button>
<Button :type="current.model == 'brand' ? 'primary' : 'default'">品牌</Button>
<Button :type="current.model == 'goods' ? 'primary' : 'default'"
>商品</Button
>
<Button :type="current.model == 'brand' ? 'primary' : 'default'"
>品牌</Button
>
</ButtonGroup>
</div>
<div class="flex">
<div>图片 :</div>
<div>
图片 :
</div>
<div>
<img class="image" :src="current.data.image.src" alt="">
<img class="image" :src="current.data.image.src" alt="" />
<div>
<div>推荐尺寸：{{ current.data.image.size }}</div>
<div class="link-src">
链接地址：
<Input style="width: 200px;" v-model="current.data.image.url" disabled/>
<Input
style="width: 200px"
v-model="current.data.image.url"
disabled
/>
</div>
<Button
size="small"
type="primary"
@click="handleSelectImg(current.data.image)"
>选择图片
</Button
>
@click="handleSelectImg('default')"
>选择图片
</Button>
<Button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink('image')"
>选择链接
</Button
>
>选择链接
</Button>
</div>
</div>
</div>
<div class="flex" v-if="current.model == 'goods'">
<div>
标签 :
</div>
<Input style="width:200px" type="text" v-model="current.data.badge.label"/>
<Input style="width:100px; margin-left:10px" disabled type="text" v-model="current.data.badge.value"/>
<div>标签 :</div>
<Input
style="width: 200px"
type="text"
v-model="current.data.badge.label"
/>
<Input
style="width: 100px; margin-left: 10px"
disabled
type="text"
v-model="current.data.badge.url"
/>
<Button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink('badge')"
>选择链接
</Button
>
>选择链接
</Button>
</div>
<div class="flex column-list">
<div
@ -99,39 +102,36 @@
class="draggable"
>
<div class="flex">
<img :src="item.img" class="column-img"/>
<img :src="item.img" class="column-img" />
<Button
size="small"
class="ml_10"
type="primary"
v-if="current.model == 'goods'"
@click="handleSelectGoods('list',index)"
>选择商品
</Button
>
@click="handleSelectGoods('list', index)"
>选择商品
</Button>
<div>
<div style="margin-bottom: 10px">
<Input v-model="item.url" />
<div v-if="current.model == 'brand'" style="margin-bottom: 10px">
<Input disabled v-model="item.url" />
</div>
<Button
size="small"
class="ml_10"
type="primary"
v-if="current.model == 'brand'"
@click="handleSelectLink('list',index)"
@click="handleSelectLink('list', index)"
>
选择链接
</Button
>
</Button>
<Button
size="small"
class="ml_10"
type="primary"
v-if="current.model == 'brand'"
@click="handleSelectImg('list',index)"
>选择图片
</Button
>
@click="handleSelectImg('list', index)"
>选择图片
</Button>
</div>
</div>
</div>
@ -159,8 +159,8 @@
</template>
<script>
import left from './mixs/mix-goods'
import right from './mixs/mix-brand'
import left from "./mixs/mix-goods";
import right from "./mixs/mix-brand";
import ossManage from "@/views/sys/oss-manage/ossManage.vue";
export default {
@ -172,25 +172,26 @@ export default {
picModelFlag: false,
selectedData: "", //选中的数据
goodsIndex: 0, // 商品索引
align: ""
}
align: "",
defaultCallbackImageType: "",
};
},
props: {
data: {
type: Object,
default: {}
}
default: {},
},
},
components: {
left,
right,
ossManage
},
mounted() {
ossManage,
},
mounted() {},
methods: {
handleSelectImg() {
handleSelectImg(type, index) {
this.defaultCallbackImageType = type;
this.goodsIndex = index;
// 选择图片
this.$refs.ossManage.selectImage = true;
this.picModelFlag = true;
@ -199,54 +200,68 @@ export default {
handleSelectGoods(val, index) {
this.$refs.liliDialog.open("goods");
this.$refs.liliDialog.singleGoods();
this.selectedData = val
this.goodsIndex = index
this.selectedData = val;
this.goodsIndex = index;
},
handleSelectLink(val, index) {
// 调起选择链接弹窗
this.$refs.liliDialog.open("link");
this.selectedData = val
this.goodsIndex = index
this.selectedData = val;
this.goodsIndex = index;
},
// 回显图片
callbackSelected(val) {
this.picModelFlag = false;
this.current.data.image.src = val.url;
if (this.defaultCallbackImageType == "default") {
console.log(this.current.data.image);
this.current.data.image.src = val.url;
} else {
console.log(this.goodsIndex, this.data.options[this.align].data.list);
this.data.options[this.align].data.list[this.goodsIndex].img = val.url;
// this.data.options[this.align].data[this.selectedData][this.goodsIndex].url = val.img
}
},
// 选择商品回调
selectedGoodsData(val) {
console.log(val)
console.log(val);
this.$nextTick(() => {
this.data.options[this.align].data.list[this.goodsIndex].img = val[0].thumbnail
this.data.options[this.align].data.list[this.goodsIndex].title = val[0].goodsName
this.data.options[this.align].data.list[this.goodsIndex].price = val[0].price
this.data.options[this.align].data.list[this.goodsIndex].url = val[0].url
})
console.log(this.data.options[this.align].data.list[this.goodsIndex])
this.data.options[this.align].data.list[this.goodsIndex].img =
val[0].thumbnail;
this.data.options[this.align].data.list[this.goodsIndex].title =
val[0].goodsName;
this.data.options[this.align].data.list[this.goodsIndex].price =
val[0].price;
this.data.options[this.align].data.list[this.goodsIndex].url =
val[0].url;
});
console.log(this.data.options[this.align].data.list[this.goodsIndex]);
this.$forceUpdate();
},
// 选择链接回调
selectedLink(val) {
console.log(val)
this.data.options[this.align].data[this.selectedData].url = this.$options.filters.formatLinkType(val);
console.log(this.data.options[this.align].data[this.selectedData]);
if (this.selectedData != "list") {
this.data.options[this.align].data[this.selectedData].url = this.$options.filters.formatLinkType(val);
console.log(this.data.options[this.align].data[this.selectedData])
}
if (this.selectedData == "list") {
this.data.options[this.align].data[this.selectedData][this.goodsIndex]
.url = this.$options.filters.formatLinkType(val);
}
},
/*
* 点击不同模块进行编辑
* 判断也很简单，就是第一个第二个模块进行判断
*
* */
* 点击不同模块进行编辑
* 判断也很简单，就是第一个第二个模块进行判断
*
* */
handleSelectModel(align) {
this.align = align;
this.current = this.data.options[align]
console.log(this.data.options[align])
this.showModal = true
this.current = this.data.options[align];
console.log(this.data.options[align]);
this.showModal = true;
},
}
}
},
};
</script>
<style scoped lang="scss">
@ -261,13 +276,14 @@ export default {
justify-content: space-between;
}
.left-card, .right-card {
.left-card,
.right-card {
width: 584px;
height: 344px;
border-radius: 10px;
opacity: 1;
background: #FFFFFF;
box-shadow: 0px 1px 13px 0px #E5E5E5;
background: #ffffff;
box-shadow: 0px 1px 13px 0px #e5e5e5;
position: relative;
&:hover {
@ -294,7 +310,6 @@ export default {
max-width: 100px;
}
.modal-tab-bar {
> .flex {
align-items: center;

2
manager/src/views/page/article-manage/articleList.vue
View File

@ -149,7 +149,7 @@ import {
import Editor from "@tinymce/tinymce-vue";
import { initEditor } from "@/components/editor/config";
export default {
name: "article",
components: {
editor: Editor,
},