mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-18 00:45:54 +08:00
feat: ✨ 新增楼层装修 更改部分买家端UI
This commit is contained in:
Yer
BIN
manager/src/assets/mix-bg1.png
Normal file
BIN
manager/src/assets/mix-bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
manager/src/assets/mix-bg2.png
Normal file
BIN
manager/src/assets/mix-bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
@@ -66,7 +66,6 @@ export default {
|
||||
}, []);
|
||||
this.wap.forEach((items,indexs) => {
|
||||
if(items.title == '活动'){
|
||||
console.log(32323232323232)
|
||||
this.wap.splice(indexs,1)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
})
|
||||
@@ -136,7 +135,7 @@ export default {
|
||||
this.linkVisible = false
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleLink(val, index) {
|
||||
val = { ...val, ___type: "other" };
|
||||
|
||||
@@ -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
|
||||
/>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
border-radius: 1em;
|
||||
background-color: rgba(50,50,50,.1);
|
||||
}
|
||||
.ivu-table table{
|
||||
.ivu-table table{
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
@@ -99,4 +99,30 @@ $theme_color: #FF5C58;
|
||||
}
|
||||
$bg_color: #f1f6fa;
|
||||
|
||||
@import "./table-common.scss";
|
||||
.wes {
|
||||
/* 多出部分用省略号表示 , 用于一行 */
|
||||
overflow: hidden;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wes-2 {
|
||||
/* 适用于webkit内核和移动端 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wes-3 {
|
||||
/* 适用于webkit内核和移动端 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@import "./table-common.scss";
|
||||
|
||||
@@ -194,7 +194,7 @@ export default {
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
type: "primary",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
@@ -216,7 +216,7 @@ export default {
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "primary",
|
||||
type: "default",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
|
||||
@@ -681,6 +681,253 @@ export const modelData = [{
|
||||
size: '1200*自定义'
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'oneRowThreeColumns',
|
||||
name: '一行三列',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
list:[
|
||||
{
|
||||
img: require('@/assets/nav/decorate8.png'),
|
||||
url:"",
|
||||
size:"385*165"
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate8.png'),
|
||||
url:"",
|
||||
size:"385*165"
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate8.png'),
|
||||
url:"",
|
||||
size:"385*165"
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'goodsType',
|
||||
name: '商品模块',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
title:"智能家居",
|
||||
labels:[
|
||||
{
|
||||
label: '音箱',
|
||||
___index:0,
|
||||
|
||||
},
|
||||
{
|
||||
label: '门锁',
|
||||
___index:1
|
||||
},
|
||||
{
|
||||
label: '路由器',
|
||||
___index:2
|
||||
},
|
||||
{
|
||||
label: '智能设备',
|
||||
___index:3
|
||||
},
|
||||
],
|
||||
list:[
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
price: "120",
|
||||
title:" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
|
||||
desc:"万家宝藏好店等你来",
|
||||
url:'',
|
||||
___index: 0
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'onlyGoodsModel',
|
||||
name: '商品模块2',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
list:[
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
price: "120",
|
||||
title:" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
|
||||
desc:"万家宝藏好店等你来",
|
||||
url:'',
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'mixModel',
|
||||
name: '混合模块',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
left:{
|
||||
model:'goods',
|
||||
//数据集合
|
||||
data:{
|
||||
image:{
|
||||
url:"",
|
||||
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg1.png',
|
||||
size:"197 * 344"
|
||||
},
|
||||
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:"",
|
||||
},
|
||||
],
|
||||
badge:{
|
||||
label:"精选",
|
||||
url:""
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
right:{
|
||||
model:'brand',
|
||||
data:{
|
||||
image:{
|
||||
url:"",
|
||||
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg2.png',
|
||||
size:"254 * 344"
|
||||
},
|
||||
list:[
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
|
||||
url:"",
|
||||
},
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
|
||||
url:"",
|
||||
},
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
|
||||
url:"",
|
||||
},
|
||||
{
|
||||
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
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:"",
|
||||
},
|
||||
],
|
||||
badge:"",
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
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',
|
||||
name: '还没逛够',
|
||||
|
||||
@@ -56,6 +56,10 @@
|
||||
<template v-if="element.type == 'seckill'">
|
||||
<seckill :data="element"></seckill>
|
||||
</template>
|
||||
<!-- 限时秒杀 待完善 -->
|
||||
<template v-if="element.type == 'seckill-only-album'">
|
||||
<seckill-only-album :data="element"></seckill-only-album>
|
||||
</template>
|
||||
<!-- 折扣广告 -->
|
||||
<template v-if="element.type == 'discountAdvert'">
|
||||
<div
|
||||
@@ -111,6 +115,26 @@
|
||||
<template v-if="element.type == 'firstAdvert'">
|
||||
<first-page-advert :data="element"></first-page-advert>
|
||||
</template>
|
||||
<!-- 商品模块 -->
|
||||
<template v-if="element.type == 'goodsType'">
|
||||
<goodsType :data="element" class="mb_20 width_1200_auto"></goodsType>
|
||||
</template>
|
||||
<!-- 商品模块2 -->
|
||||
<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 == 'oneRowThreeColumns'">
|
||||
<oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
|
||||
</template>
|
||||
<!-- 横幅广告 -->
|
||||
<template v-if="element.type == 'bannerAdvert'">
|
||||
<div class="horizontal-advert setup-content">
|
||||
@@ -237,8 +261,15 @@ import NewGoodsSort from "./modelList/newGoodsSort.vue";
|
||||
import Recommend from "./modelList/recommend.vue";
|
||||
import NotEnough from "./modelList/notEnough.vue";
|
||||
import Seckill from "./modelList/seckill.vue";
|
||||
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";
|
||||
import seckillOnlyAlbum from "./modelList/seckill-only-album.vue";
|
||||
export default {
|
||||
name: "modelFormItem",
|
||||
props: ["element", "select", "index", "data"],
|
||||
@@ -251,7 +282,13 @@ export default {
|
||||
FirstPageAdvert,
|
||||
NotEnough,
|
||||
Seckill,
|
||||
goodsType,
|
||||
ossManage,
|
||||
oneRowThreeColumns,
|
||||
"seckill-only-album":seckillOnlyAlbum,
|
||||
onlyGoodsModel,
|
||||
mixModel,
|
||||
forYour
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
444
manager/src/views/page-decoration/modelList/forYour.vue
Normal file
444
manager/src/views/page-decoration/modelList/forYour.vue
Normal 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>
|
||||
367
manager/src/views/page-decoration/modelList/goodsAndType.vue
Normal file
367
manager/src/views/page-decoration/modelList/goodsAndType.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="goods-type-wrapper">
|
||||
<div class="flex goods-type-line">
|
||||
<div class="goods-type-title">{{ data.options.title }}</div>
|
||||
<div class="flex goods-type-labels">
|
||||
<div
|
||||
@click="tabCurrentlyIndex = index"
|
||||
:class="{ active: tabCurrentlyIndex === index }"
|
||||
class="goods-type-item"
|
||||
v-for="(item, index) in data.options.labels"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 商品部分 -->
|
||||
<div class="goods-list flex">
|
||||
<div
|
||||
class="goods-list-item"
|
||||
v-for="(item, index) in data.options.list.filter((subset) => {
|
||||
return subset.___index == tabCurrentlyIndex;
|
||||
})"
|
||||
:key="index"
|
||||
>
|
||||
<div class="goods-img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||
<div class="goods-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="goods-price">
|
||||
{{ item.price | unitPrice("￥") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel(data.options.list)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div class="modal-tab-bar">
|
||||
<div class="tab-bar">
|
||||
标题
|
||||
<Input style="width: 300px" v-model="data.options.title"></Input>
|
||||
</div>
|
||||
<div class="tab-bar" v-if="data.options.labels[tabCurrentlyIndex]">
|
||||
标签
|
||||
<Input
|
||||
style="width: 300px"
|
||||
v-model="data.options.labels[tabCurrentlyIndex].label"
|
||||
></Input>
|
||||
</div>
|
||||
<Tabs
|
||||
type="card"
|
||||
@on-click="handleClickTab"
|
||||
:value="tabIndex"
|
||||
:draggable="true"
|
||||
|
||||
>
|
||||
<Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
|
||||
<TabPane
|
||||
v-for="(tab,tabIndex) in data.options.labels"
|
||||
:key="tabIndex"
|
||||
:label="tab.label"
|
||||
:name="tab.___index + ''"
|
||||
>
|
||||
<div class="flex flex-a-c">
|
||||
<Button class="del-btn" type="primary" @click="handleContextMenuDelete(tab,tabIndex)">删除当前标签</Button>
|
||||
<Button class="add-goods" @click="addCurrentGoods">
|
||||
添加商品
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in data.options.list.filter((subset) => {
|
||||
return subset.___index == tabCurrentlyIndex;
|
||||
})"
|
||||
:key="index"
|
||||
class="draggable"
|
||||
>
|
||||
<div class="flex">
|
||||
<img :src="item.img" class="column-img" />
|
||||
<div class="flex column-goods-config">
|
||||
<div class="column-config">
|
||||
<div>
|
||||
标题：
|
||||
<Input v-model="item.title"></Input>
|
||||
</div>
|
||||
<div>
|
||||
描述：
|
||||
<Input v-model="item.desc"></Input>
|
||||
</div>
|
||||
</div>
|
||||
<Button @click="delGoods(item)">删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "goods",
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabIndex:0,
|
||||
current: 0,
|
||||
showModal: false,
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false,
|
||||
tabCurrentlyIndex: 0, // 选项卡索引
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.tabIndex = this.data.options.labels[0].___index
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 算出最大的index 然后索引叠加
|
||||
*/
|
||||
handleTabsAdd() {
|
||||
let findAllIndex = this.data.options.labels.map((item) => {
|
||||
return item.___index;
|
||||
});
|
||||
let max = Math.max.apply(null, findAllIndex);
|
||||
|
||||
this.data.options.labels.push({
|
||||
label: "标签" + (max + 1),
|
||||
___index: max + 1,
|
||||
});
|
||||
},
|
||||
// 删除标签
|
||||
handleContextMenuDelete(item,index) {
|
||||
// 删除标签下关联的商品
|
||||
this.data.options.list.forEach((lab,currently)=>{
|
||||
if(lab.___index == item.___index){
|
||||
this.data.options.list.splice(currently,1)
|
||||
}
|
||||
})
|
||||
// 删除当前标签
|
||||
this.data.options.labels.splice(index,1)
|
||||
},
|
||||
// 删除商品
|
||||
delGoods(val) {
|
||||
this.data.options.list.forEach((item, i) => {
|
||||
if (
|
||||
item.title == val.title &&
|
||||
item.___index == this.tabCurrentlyIndex
|
||||
) {
|
||||
this.data.options.list.splice(i, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 切换选项卡
|
||||
handleClickTab(name) {
|
||||
console.log(name)
|
||||
this.tabCurrentlyIndex = name;
|
||||
},
|
||||
// 添加当前选项卡中的商品
|
||||
addCurrentGoods() {
|
||||
|
||||
this.$refs.liliDialog.clearGoodsSelected();
|
||||
this.$refs.liliDialog.open("goods");
|
||||
},
|
||||
// 编辑模块
|
||||
handleSelectModel(item) {
|
||||
console.log(item);
|
||||
this.selected = item;
|
||||
this.showModal = true;
|
||||
},
|
||||
// 选择商品回调
|
||||
selectedGoodsData(val) {
|
||||
if (val.length) {
|
||||
val.forEach((item) => {
|
||||
const pushGoodsDetail = {
|
||||
img: item.thumbnail,
|
||||
price: item.price,
|
||||
title: item.goodsName,
|
||||
desc: "",
|
||||
url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
|
||||
___index: this.tabCurrentlyIndex,
|
||||
};
|
||||
this.data.options.list.push(pushGoodsDetail);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
this.selected[this.current].url =
|
||||
this.$options.filters.formatLinkType(val);
|
||||
this.selected[this.current].type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
|
||||
console.log(this.selected[this.current]);
|
||||
},
|
||||
handleSelectLink(index) {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.current = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./setup-box.scss";
|
||||
.goods-type-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.del-btn{
|
||||
margin-left:10px;
|
||||
}
|
||||
.tab-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.draggable {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
transition: 0.35s;
|
||||
|
||||
&:hover {
|
||||
background-color: #ededed;
|
||||
}
|
||||
}
|
||||
.column-config {
|
||||
margin-left: 10px;
|
||||
> * {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
.column-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.add-goods {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.goods-list {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
> .setup-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column-goods-config {
|
||||
flex: 2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.goods-list-item {
|
||||
margin-bottom: 14.3px;
|
||||
width: 287px;
|
||||
height: 343.7px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
transition: 0.35s;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
&:hover {
|
||||
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||
}
|
||||
}
|
||||
.goods-img {
|
||||
text-align: center;
|
||||
> img {
|
||||
width: auto;
|
||||
max-height: 183px;
|
||||
}
|
||||
}
|
||||
.goods-name {
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
width: 200px;
|
||||
margin: 0 auto 12.4px auto;
|
||||
color: #333333;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-desc {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
margin-bottom: 12.4px;
|
||||
color: #666666;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 25.2px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #f31947;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-type-line {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.goods-type-title {
|
||||
font-size: 31px;
|
||||
font-weight: normal;
|
||||
line-height: 37px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.active {
|
||||
color: #f31947;
|
||||
}
|
||||
.goods-type-labels {
|
||||
font-size: 21px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.goods-type-item {
|
||||
margin-left: 28px;
|
||||
}
|
||||
</style>
|
||||
325
manager/src/views/page-decoration/modelList/mixModel.vue
Normal file
325
manager/src/views/page-decoration/modelList/mixModel.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div class="mix-model">
|
||||
<!-- 左侧 -->
|
||||
<div class="left-card">
|
||||
<left :data="data" />
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel('left')"
|
||||
>编辑
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="right-card">
|
||||
<right :data="data" />
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel('right')"
|
||||
>编辑
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div v-if="current">
|
||||
<div class="modal-tab-bar">
|
||||
<div>
|
||||
当前模块 :
|
||||
<ButtonGroup>
|
||||
<Button :type="current.model == 'goods' ? 'primary' : 'default'"
|
||||
>商品</Button
|
||||
>
|
||||
<Button :type="current.model == 'brand' ? 'primary' : 'default'"
|
||||
>品牌</Button
|
||||
>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div>图片 :</div>
|
||||
<div>
|
||||
<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
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleSelectImg('default')"
|
||||
>选择图片
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
type="primary"
|
||||
@click="handleSelectLink('image')"
|
||||
>选择链接
|
||||
</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.url"
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
type="primary"
|
||||
@click="handleSelectLink('badge')"
|
||||
>选择链接
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex column-list">
|
||||
<div
|
||||
v-for="(item, index) in current.data.list"
|
||||
:key="index"
|
||||
class="draggable"
|
||||
>
|
||||
<div class="flex">
|
||||
<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>
|
||||
<div>
|
||||
<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)"
|
||||
>
|
||||
选择链接
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
type="primary"
|
||||
v-if="current.model == 'brand'"
|
||||
@click="handleSelectImg('list', 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 left from "./mixs/mix-goods";
|
||||
import right from "./mixs/mix-brand";
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage.vue";
|
||||
|
||||
export default {
|
||||
name: "mixModel",
|
||||
data() {
|
||||
return {
|
||||
showModal: false,
|
||||
current: "", //当前选择的模块
|
||||
picModelFlag: false,
|
||||
selectedData: "", //选中的数据
|
||||
goodsIndex: 0, // 商品索引
|
||||
align: "",
|
||||
defaultCallbackImageType: "",
|
||||
};
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
left,
|
||||
right,
|
||||
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 == "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);
|
||||
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.$forceUpdate();
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./setup-box.scss";
|
||||
|
||||
.link-src {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.mix-model {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left-card,
|
||||
.right-card {
|
||||
width: 584px;
|
||||
height: 344px;
|
||||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
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 {
|
||||
> .flex {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
131
manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
Normal file
131
manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="flex" v-if="data.options.right.model == 'brand'">
|
||||
<div class="left-side" >
|
||||
<img :src="data.options.right.data.image.src" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="badge-box flex">
|
||||
<div class="round">
|
||||
<Icon type="ios-arrow-forward" />
|
||||
</div>
|
||||
|
||||
|
||||
</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-thumbnail">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mix-goods",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods-detail{
|
||||
|
||||
}
|
||||
.goods-detail-title{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
}
|
||||
.goods-detail-price{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0px;
|
||||
color: #F31947;
|
||||
margin-top: 8px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.goods-thumbnail{
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width:90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
.badge-box{
|
||||
margin-top: 33px;
|
||||
justify-content:right;
|
||||
>.round{
|
||||
width: 17.5px;
|
||||
height: 17.5px;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 17.5px;
|
||||
border: 0.7px solid #333333;
|
||||
margin-right: 17.5px;
|
||||
}
|
||||
}
|
||||
.goods-list{
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.goods-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:50%;
|
||||
height: 85px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
transition: .35s;
|
||||
background: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
|
||||
|
||||
}
|
||||
.left-side {
|
||||
>img{
|
||||
width: 254px;
|
||||
height: 344px;
|
||||
border-radius: 9.8px 0px 0px 9.8px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
line-height:27px;
|
||||
border-radius: 13.3px 0px 0px 13.3px;
|
||||
opacity: 1;
|
||||
background: #F31947;
|
||||
font-size: 12.6px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 26px;
|
||||
margin-bottom:17px;
|
||||
}
|
||||
</style>
|
||||
124
manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
Normal file
124
manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="flex" v-if="data.options.left.model == 'goods'">
|
||||
<div class="left-side" >
|
||||
<img :src="data.options.left.data.image.src" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="badge-box flex">
|
||||
<div class="badge">
|
||||
{{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-thumbnail">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
<div class="goods-detail-title">{{item.title}}</div>
|
||||
<div class="goods-detail-price">{{item.price | unitPrice('¥')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mix-goods",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods-detail{
|
||||
|
||||
}
|
||||
.goods-detail-title{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
}
|
||||
.goods-detail-price{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0px;
|
||||
color: #F31947;
|
||||
margin-top: 8px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.goods-thumbnail{
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width:90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
.badge-box{
|
||||
|
||||
justify-content:right;
|
||||
}
|
||||
.goods-list{
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.goods-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 173.6px;
|
||||
height: 119px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
transition: .35s;
|
||||
background: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
&:hover{
|
||||
box-shadow: 0px 1px 6px 0px #E5E5E5;
|
||||
}
|
||||
|
||||
}
|
||||
.left-side {
|
||||
>img{
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
display: block;
|
||||
width: 196.7px;
|
||||
height: 343.7px;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
line-height:27px;
|
||||
border-radius: 13.3px 0px 0px 13.3px;
|
||||
opacity: 1;
|
||||
background: #F31947;
|
||||
font-size: 12.6px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 26px;
|
||||
margin-bottom:17px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="line flex flex-j-sb">
|
||||
<div class="column" v-for="(item,index) in data.options.list" :key="index">
|
||||
<div v-if="!item.img" class="placeholder">占位符</div>
|
||||
<img v-else :src="item.img" class="three-column-img">
|
||||
</div>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel(data.options.list)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div class="modal-tab-bar">
|
||||
<div v-for="(item,index) in data.options.list" :key="index">
|
||||
<img :src="item.img" class="three-column-img">
|
||||
<div>推荐尺寸：{{item.size}}</div>
|
||||
<Button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
type="primary"
|
||||
@click="handleSelectImg(index)"
|
||||
>选择图片</Button
|
||||
>
|
||||
<Button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
type="primary"
|
||||
@click="handleSelectLink(index)"
|
||||
>选择链接</Button
|
||||
>
|
||||
</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";
|
||||
export default {
|
||||
name: "oneRowThreeColumns",
|
||||
components:{ossManage},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal:false,
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag:false,
|
||||
current:0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 回显图片
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.selected[this.current].img = val.url;
|
||||
console.log(this.selected)
|
||||
},
|
||||
// 编辑模块
|
||||
handleSelectModel(item) {
|
||||
this.selected = item;
|
||||
this.showModal = true;
|
||||
|
||||
},
|
||||
// 选择商品回调
|
||||
selectedGoodsData(val) {
|
||||
console.log(val);
|
||||
let goods = val[0];
|
||||
this.selected.img = goods.thumbnail;
|
||||
this.selected.price = goods.price;
|
||||
this.selected.name = goods.goodsName;
|
||||
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
},
|
||||
handleSelectLink(index) {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.current = index;
|
||||
},
|
||||
handleSelectImg(index){
|
||||
// 选择图片
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
this.current = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./setup-box.scss";
|
||||
.three-column-img{
|
||||
width:385px;
|
||||
height: 165px
|
||||
}
|
||||
.line:hover{
|
||||
>.setup-box{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.placeholder{
|
||||
background: #666;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.line{
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.column{
|
||||
width: 385px;
|
||||
height: 165px;
|
||||
|
||||
>img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
280
manager/src/views/page-decoration/modelList/onlyGoodsModel.vue
Normal file
280
manager/src/views/page-decoration/modelList/onlyGoodsModel.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="goods-type-wrapper">
|
||||
<!-- 商品部分 -->
|
||||
<div class="goods-list flex">
|
||||
<div
|
||||
class="goods-list-item"
|
||||
v-for="(item, index) in data.options.list"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||
<div class="goods-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="goods-img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel(data.options.list)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div class="modal-tab-bar">
|
||||
<div class="flex flex-a-c">
|
||||
<Button class="add-goods" @click="addCurrentGoods">
|
||||
添加商品
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in data.options.list"
|
||||
:key="index"
|
||||
class="draggable"
|
||||
>
|
||||
<div class="flex">
|
||||
<img :src="item.img" class="column-img" />
|
||||
<div class="flex column-goods-config">
|
||||
<div class="column-config">
|
||||
<div>
|
||||
标题：
|
||||
<Input v-model="item.title"></Input>
|
||||
</div>
|
||||
<div>
|
||||
描述：
|
||||
<Input v-model="item.desc"></Input>
|
||||
</div>
|
||||
</div>
|
||||
<Button @click="delGoods(item,index)">删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "onlyGoodsList",
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flag:false,
|
||||
tabIndex:0,
|
||||
current: 0,
|
||||
showModal: false,
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false,
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 删除商品
|
||||
delGoods(val,i) {
|
||||
this.data.options.list.splice(i, 1);
|
||||
},
|
||||
// 添加当前选项卡中的商品
|
||||
addCurrentGoods() {
|
||||
this.$refs.liliDialog.open("goods");
|
||||
},
|
||||
// 编辑模块
|
||||
handleSelectModel(item) {
|
||||
console.log(item);
|
||||
this.selected = item;
|
||||
this.showModal = true;
|
||||
},
|
||||
// 选择商品回调
|
||||
selectedGoodsData(val) {
|
||||
if (val.length) {
|
||||
val.forEach((item) => {
|
||||
const pushGoodsDetail = {
|
||||
img: item.thumbnail,
|
||||
price: item.price,
|
||||
title: item.goodsName,
|
||||
desc: "",
|
||||
url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
|
||||
};
|
||||
this.data.options.list.push(pushGoodsDetail);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
this.selected[this.current].url =
|
||||
this.$options.filters.formatLinkType(val);
|
||||
this.selected[this.current].type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
|
||||
console.log(this.selected[this.current]);
|
||||
},
|
||||
handleSelectLink(index) {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.current = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./setup-box.scss";
|
||||
.goods-type-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.del-btn{
|
||||
margin-left:10px;
|
||||
}
|
||||
.tab-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.draggable {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
transition: 0.35s;
|
||||
|
||||
&:hover {
|
||||
background-color: #ededed;
|
||||
}
|
||||
}
|
||||
.column-config {
|
||||
margin-left: 10px;
|
||||
> * {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
.column-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.add-goods {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.goods-list {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
> .setup-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column-goods-config {
|
||||
flex: 2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.goods-list-item {
|
||||
padding-top: 34.8px;
|
||||
margin-bottom: 14.3px;
|
||||
width: 287px;
|
||||
height: 343.7px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
transition: 0.35s;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
&:hover {
|
||||
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||
}
|
||||
}
|
||||
.goods-img {
|
||||
text-align: center;
|
||||
> img {
|
||||
width: auto;
|
||||
max-height: 183px;
|
||||
}
|
||||
}
|
||||
.goods-name {
|
||||
margin-bottom: 11.9px;
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-desc {
|
||||
margin-bottom: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #666666;
|
||||
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 25.2px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #f31947;
|
||||
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||
}
|
||||
.goods-type-line {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.goods-type-title {
|
||||
font-size: 31px;
|
||||
font-weight: normal;
|
||||
line-height: 37px;
|
||||
letter-spacing: 0px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.active {
|
||||
color: #f31947;
|
||||
}
|
||||
.goods-type-labels {
|
||||
font-size: 21px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.goods-type-item {
|
||||
margin-left: 28px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="seckill">
|
||||
<div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
|
||||
<div class="aside">
|
||||
<div class="title">{{ actName }}</div>
|
||||
<div class="hour">
|
||||
<span>{{ currHour }}:00</span>点场 倒计时
|
||||
</div>
|
||||
<div class="count-down" v-if="actStatus === 1">
|
||||
<span>{{ hours }}</span
|
||||
><span>{{ minutes }}</span
|
||||
><span>{{ seconds }}</span>
|
||||
</div>
|
||||
<div class="act-status" v-else>
|
||||
{{ actStatus == 0 ? "未开始" : "已结束" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<swiper ref="mySwiper" :options="swiperOptions">
|
||||
<swiper-slide
|
||||
v-for="(item, index) in options.list[0].goodsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="content">
|
||||
<img :src="item.img" width="140" height="140" :alt="item.name" />
|
||||
<div class="ellipsis">{{ item.name }}</div>
|
||||
<div>
|
||||
<span>{{ item.price | unitPrice("￥") }}</span>
|
||||
<span>{{ item.originalPrice | unitPrice("￥") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
|
||||
import "swiper/swiper-bundle.css";
|
||||
export default {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
directives: {
|
||||
swiper: directive,
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: this.data.options, // 当前数据
|
||||
actStatus: 0, // 0 未开始 1 进行中 2 已结束
|
||||
actName: "限时秒杀",
|
||||
currHour: "00", // 当前秒杀场
|
||||
diffSeconds: 0, // 倒地时
|
||||
hours: "00", // 小时
|
||||
minutes: "00", // 分钟
|
||||
seconds: "00", // 秒
|
||||
interval: undefined, // 定时器
|
||||
swiperOptions: {
|
||||
// 轮播图参数
|
||||
slidesPerView: 5,
|
||||
autoplay: true,
|
||||
loop: true,
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
diffSeconds(val) {
|
||||
const hours = Math.floor(val / 3600);
|
||||
// 当前秒数 / 60，向下取整
|
||||
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||
// 对60取模，超过小时数的分钟数
|
||||
const minutes = Math.floor(val / 60) % 60;
|
||||
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
|
||||
const seconds = val % 60;
|
||||
this.hours = hours < 10 ? "0" + hours : hours;
|
||||
this.minutes = minutes < 10 ? "0" + minutes : minutes;
|
||||
this.seconds = seconds < 10 ? "0" + seconds : seconds;
|
||||
|
||||
if (val === 0) {
|
||||
clearInterval(this.interval);
|
||||
this.hours = 0;
|
||||
this.minutes = 0;
|
||||
this.seconds = 0;
|
||||
this.countDown(this.options.list);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.countDown(this.options.list);
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
methods: {
|
||||
// 倒计时
|
||||
countDown(list) {
|
||||
/**
|
||||
* 默认倒计时两小时
|
||||
* 如果没有开始，则显示未开始
|
||||
* 进行中显示倒计时
|
||||
* 今天的秒杀结束则显示已结束
|
||||
*/
|
||||
let nowHour = new Date().getHours();
|
||||
if (nowHour < Number(list[0].time)) {
|
||||
// 活动未开始
|
||||
this.currHour = list[0].time;
|
||||
this.actStatus = 0;
|
||||
} else if (nowHour >= Number(list[list.length - 1].time + 2)) {
|
||||
// 活动已结束
|
||||
this.actStatus = 2;
|
||||
this.currHour = list[list.length - 1].time;
|
||||
} else {
|
||||
// 活动进行中
|
||||
this.actStatus = 1;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (nowHour == Number(list[i].time)) {
|
||||
this.currHour = list[i].time;
|
||||
}
|
||||
if (
|
||||
nowHour > Number(list[i].time) &&
|
||||
nowHour < Number(list[i].time + 2)
|
||||
) {
|
||||
this.currHour = list[i].time;
|
||||
}
|
||||
}
|
||||
// 当前0点时间戳
|
||||
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||
// 活动倒计时
|
||||
this.diffSeconds = Math.floor(
|
||||
(zeroTime +
|
||||
3600 * 1000 * (this.currHour + 2) -
|
||||
new Date().getTime()) /
|
||||
1000
|
||||
);
|
||||
const that = this;
|
||||
this.interval = setInterval(() => {
|
||||
this.diffSeconds--;
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.seckill {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.desc{
|
||||
position: absolute;
|
||||
color: $theme_color;
|
||||
left: 200px;
|
||||
top: 5px;
|
||||
}
|
||||
.aside {
|
||||
overflow: hidden;
|
||||
width: 190px;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background-image: url("../../../assets/seckillBg.png");
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-top: 31px;
|
||||
}
|
||||
|
||||
.hour {
|
||||
margin-top: 90px;
|
||||
text-align: center;
|
||||
span {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.count-down {
|
||||
margin: 10px 0 0 30px;
|
||||
> span {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
background-color: #2f3430;
|
||||
margin-right: 20px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
&::after {
|
||||
content: ":";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
> span:last-child::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.act-status {
|
||||
margin: 10px 0 0 65px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 1000px;
|
||||
// background: #efefef;
|
||||
.swiper-slide {
|
||||
height: 260px;
|
||||
.content {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||
}
|
||||
img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
> div {
|
||||
width: 160px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
> div:nth-of-type(1):hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
border: 1px solid $theme_color;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 92px;
|
||||
background-color: $theme_color;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 24px 8px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #999;
|
||||
width: 66px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -49,7 +49,7 @@ export default {
|
||||
// 提交模板
|
||||
submitTemplate(pageShow) {
|
||||
this.submitLoading = true
|
||||
const modelForm = JSON.parse(JSON.stringify(this.modelForm))
|
||||
const modelForm = JSON.parse(JSON.stringify(this.modelForm))
|
||||
modelForm.list.unshift(this.$refs.modelForm.navList);
|
||||
modelForm.list.unshift(this.$refs.modelForm.topAdvert);
|
||||
const data = {
|
||||
@@ -107,8 +107,9 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
.model-list {
|
||||
width: 120px;
|
||||
height: auto;
|
||||
width: 130px;
|
||||
height: 620px;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
margin-top: 60px;
|
||||
@@ -121,17 +122,21 @@ export default {
|
||||
line-height: 30px;
|
||||
}
|
||||
.model-item {
|
||||
width: 100px;
|
||||
width: 110px;
|
||||
height: 30px;
|
||||
background: #eee;
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
transition:0.15s;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
border: 1px dashed #409eff;
|
||||
color: #409eff;
|
||||
|
||||
background: $theme_color;
|
||||
cursor: move;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
}
|
||||
.ghost::after {
|
||||
|
||||
@@ -149,7 +149,7 @@ import {
|
||||
import Editor from "@tinymce/tinymce-vue";
|
||||
import { initEditor } from "@/components/editor/config";
|
||||
export default {
|
||||
name: "article",
|
||||
|
||||
components: {
|
||||
editor: Editor,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user