Skip to content

E
ElectricitySheep
Commit 803c6dd3 authored by 黄奎's avatar 黄奎
Browse files
Options

新增页面

parent b5c2f892
Hide whitespace changes
Inline Side-by-side
Showing with 624 additions and 437 deletions
src/components/StoreDesign/customPoster.vue
View file @ 803c6dd3
<style> <style>
.custom_Header{ .custom_Header {
padding: 0 20px; padding: 0 20px;
height: 56px; height: 56px;
line-height: 56px; line-height: 56px;
background-color: #fff; background-color: #fff;
margin-bottom: 15px; margin-bottom: 15px;
} }
.custom_Main{
display:flex; .custom_Main {
display: flex;
} }
.custom_mobile_box{
.custom_mobile_box {
width: 400px; width: 400px;
height: 740px; height: 740px;
padding: 35px 11px; padding: 35px 11px;
...@@ -19,27 +21,31 @@ ...@@ -19,27 +21,31 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.custom_bg_box{
.custom_bg_box {
position: relative; position: relative;
border: 1px solid #e2e3e3; border: 1px solid #e2e3e3;
width: 750px; width: 750px;
height: 1334px; height: 1334px;
zoom: 0.5; zoom: 0.5;
} }
.custom_bg_pic{
background:url('../../assets/img/customBg.jpg') no-repeat; .custom_bg_pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-size:100% 100%; background-size: 100% 100%;
background-position: center; background-position: center;
} }
.custom_AppImage{
background:url('../../assets/img/default_qr_code.png') no-repeat; .custom_AppImage {
background: url('../../assets/img/default_qr_code.png') no-repeat;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
position: absolute; position: absolute;
} }
.custom_formBody{
.custom_formBody {
padding: 20px 35% 20px 20px; padding: 20px 35% 20px 20px;
background-color: #fff; background-color: #fff;
margin-bottom: 20px; margin-bottom: 20px;
...@@ -50,7 +56,8 @@ ...@@ -50,7 +56,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.custom_component{
.custom_component {
width: 100px; width: 100px;
height: 100px; height: 100px;
cursor: pointer; cursor: pointer;
...@@ -64,7 +71,8 @@ ...@@ -64,7 +71,8 @@
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
.ccustom_itemremove{
.ccustom_itemremove {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
...@@ -72,34 +80,40 @@ ...@@ -72,34 +80,40 @@
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
.custom_bottom{
.custom_bottom {
border: 1px solid #EBEEF5; border: 1px solid #EBEEF5;
background-color: #FFF; background-color: #FFF;
color: #303133; color: #303133;
-webkit-transition: .3s; -webkit-transition: .3s;
transition: .3s; transition: .3s;
border-radius:4px; border-radius: 4px;
margin-top:35px; margin-top: 35px;
} }
.customShareBtn{
.customShareBtn {
position: absolute !important; position: absolute !important;
bottom: -52px; bottom: -52px;
left: 0; left: 0;
} }
.customShareBtn .el-button--small{
padding:9px 25px; .customShareBtn .el-button--small {
padding: 9px 25px;
} }
.Custom_active{
border:1px solid #7BBDFC; .Custom_active {
border: 1px solid #7BBDFC;
} }
.custom_headerImg{
background:url('../../assets/img/storeDesign/default_head.png') no-repeat; .custom_headerImg {
background: url('../../assets/img/storeDesign/default_head.png') no-repeat;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
} }
.poster_bg_box{
.poster_bg_box {
position: relative; position: relative;
border: 2px solid #e2e3e3; border: 2px solid #e2e3e3;
width: 750px; width: 750px;
...@@ -107,18 +121,21 @@ ...@@ -107,18 +121,21 @@
zoom: 0.5; zoom: 0.5;
overflow: hidden; overflow: hidden;
} }
.poster_User{
.poster_User {
margin-top: 96px; margin-top: 96px;
margin-bottom: 64px; margin-bottom: 64px;
} }
.poster_User img{
.poster_User img {
height: 90px; height: 90px;
width: 90px; width: 90px;
border-radius: 50%; border-radius: 50%;
margin-left: 24px; margin-left: 24px;
display: block; display: block;
} }
.poster_User div{
.poster_User div {
background: #f1f1f1; background: #f1f1f1;
padding: 0 24px; padding: 0 24px;
height: 54px; height: 54px;
...@@ -126,14 +143,16 @@ ...@@ -126,14 +143,16 @@
margin-left: 24px; margin-left: 24px;
border-radius: 30px; border-radius: 30px;
} }
.poster_goodImg{
.poster_goodImg {
margin: 0 auto; margin: 0 auto;
height: 702px; height: 702px;
width: 702px; width: 702px;
overflow: hidden; overflow: hidden;
border-radius: 16px 16px 0 0; border-radius: 16px 16px 0 0;
} }
.goodsone_bg{
.goodsone_bg {
height: 310px; height: 310px;
margin: 0 auto; margin: 0 auto;
width: 702px; width: 702px;
...@@ -141,33 +160,39 @@ ...@@ -141,33 +160,39 @@
background: #ffffff; background: #ffffff;
border-radius: 0 0 16px 16px; border-radius: 0 0 16px 16px;
} }
.goods-name{
.goods-name {
padding: 28px 0; padding: 28px 0;
font-size: 34px; font-size: 34px;
color: #353535; color: #353535;
} }
.goods_price{
.goods_price {
padding-top: 50px; padding-top: 50px;
color: #ff4544; color: #ff4544;
} }
.goods_remark{
.goods_remark {
margin-top: 28px; margin-top: 28px;
color: #999999; color: #999999;
font-size: 28px; font-size: 28px;
} }
.goodsone_bg img{
.goodsone_bg img {
height: 230px; height: 230px;
width: 230px; width: 230px;
margin-left: auto; margin-left: auto;
display: block; display: block;
border-radius: 50%; border-radius: 50%;
} }
.custom_Second{
.custom_Second {
height: 750px; height: 750px;
width: 750px; width: 750px;
overflow: hidden; overflow: hidden;
} }
.custom_SecondBG{
.custom_SecondBG {
background-image: url('../../assets/img/storeDesign/style-two-end.png'); background-image: url('../../assets/img/storeDesign/style-two-end.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -178,19 +203,22 @@ ...@@ -178,19 +203,22 @@
top: -40px; top: -40px;
padding: 0 24px; padding: 0 24px;
} }
.cuSecond_goodsName{
.cuSecond_goodsName {
font-size: 34px; font-size: 34px;
color: #353535; color: #353535;
padding-top: 40px; padding-top: 40px;
} }
.customSecond_user{
.customSecond_user {
height: 96px; height: 96px;
width: 96px; width: 96px;
border-radius: 50%; border-radius: 50%;
margin-left: 24px; margin-left: 24px;
display: block; display: block;
} }
.CusSecondRemark{
.CusSecondRemark {
height: 52px; height: 52px;
width: 100%; width: 100%;
padding: 0 24px; padding: 0 24px;
...@@ -200,19 +228,22 @@ ...@@ -200,19 +228,22 @@
border-radius: 30px; border-radius: 30px;
margin-bottom: 70px; margin-bottom: 70px;
} }
.Second_qrcode{
.Second_qrcode {
height: 230px; height: 230px;
width: 230px; width: 230px;
display: block; display: block;
margin-left: auto; margin-left: auto;
} }
.three_User img{
.three_User img {
height: 97px; height: 97px;
width: 97px; width: 97px;
border-radius: 50%; border-radius: 50%;
margin-left: 35px; margin-left: 35px;
display: block; display: block;
} }
.app-style-three .three_User div:after { .app-style-three .three_User div:after {
content: ""; content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -222,82 +253,96 @@ ...@@ -222,82 +253,96 @@
width: 24px; width: 24px;
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
} }
.cusThree_name {
.cusThree_name {
font-size: 34px; font-size: 34px;
padding-top: 28px; padding-top: 28px;
color: #353535; color: #353535;
} }
.cusThree_price {
.cusThree_price {
padding-top: 28px; padding-top: 28px;
color: #ff4544; color: #ff4544;
} }
.cusThree_qrcode {
.cusThree_qrcode {
width: 702px; width: 702px;
border-top: 1px solid #c9c9c9; border-top: 1px solid #c9c9c9;
height: 278px; height: 278px;
margin: 0 auto; margin: 0 auto;
margin-top: 24px; margin-top: 24px;
} }
.cusThree_qrcode div{
.cusThree_qrcode div {
margin-top: 20px; margin-top: 20px;
margin-left: 24px; margin-left: 24px;
font-size: 28px; font-size: 28px;
color: #353535; color: #353535;
} }
.app-style-four .user {
.app-style-four .user {
margin-top: 35px; margin-top: 35px;
margin-bottom: 35px; margin-bottom: 35px;
} }
.app-style-four .user img {
.app-style-four .user img {
height: 90px; height: 90px;
width: 90px; width: 90px;
border-radius: 50%; border-radius: 50%;
margin-left: 24px; margin-left: 24px;
display: block; display: block;
} }
.app-style-four .user div {
.app-style-four .user div {
background: #f1f1f1; background: #f1f1f1;
padding: 0 24px; padding: 0 24px;
height: 54px; height: 54px;
color: #4b4b4b; color: #4b4b4b;
margin-left: 24px; margin-left: 24px;
border-radius: 30px; border-radius: 30px;
} }
.app-style-four .four-box {
.app-style-four .four-box {
height: 1150px; height: 1150px;
background-color: #FFFFFF; background-color: #FFFFFF;
margin: 0 auto; margin: 0 auto;
width: 702px; width: 702px;
border-radius: 16px; border-radius: 16px;
padding: 0 24px; padding: 0 24px;
} }
.app-style-four .goods-name {
.app-style-four .goods-name {
font-size: 34px; font-size: 34px;
padding-top: 26px; padding-top: 26px;
color: #353535; color: #353535;
} }
.app-style-four .price {
.app-style-four .price {
padding-top: 60px; padding-top: 60px;
color: #ff4544; color: #ff4544;
} }
.app-style-four .goods-image {
.app-style-four .goods-image {
height: 650px; height: 650px;
width: 650px; width: 650px;
margin-top: 60px; margin-top: 60px;
} }
.app-style-four .qrcode img {
.app-style-four .qrcode img {
height: 150px; height: 150px;
width: 150px; width: 150px;
margin-top: 25px; margin-top: 25px;
} }
.app-style-four .qrcode div {
.app-style-four .qrcode div {
margin-top: 22px; margin-top: 22px;
margin-bottom: 26px; margin-bottom: 26px;
font-size: 24px; font-size: 24px;
color: #999999; color: #999999;
} }
.poster-style-box{
.poster-style-box {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
border: 1px solid #E2E2E2; border: 1px solid #E2E2E2;
...@@ -306,19 +351,22 @@ ...@@ -306,19 +351,22 @@
width: 160px; width: 160px;
margin: 5px; margin: 5px;
padding: 0 5px; padding: 0 5px;
} }
.custom_rightCheck .el-radio{
height:32px; .custom_rightCheck .el-radio {
height: 32px;
line-height: 32px; line-height: 32px;
} }
.custom_grid{
.custom_grid {
flex-wrap: wrap; flex-wrap: wrap;
height: 100px; height: 100px;
width: 100%; width: 100%;
background: #E6F4FF; background: #E6F4FF;
border: 1px solid #b8b8b8; border: 1px solid #b8b8b8;
} }
.poster-pic-box {
.poster-pic-box {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
border: 1px solid #E2E2E2; border: 1px solid #E2E2E2;
...@@ -327,8 +375,9 @@ ...@@ -327,8 +375,9 @@
width: 112px; width: 112px;
margin: 5px; margin: 5px;
padding: 0 5px; padding: 0 5px;
} }
.customSecond_btmdiv{
.customSecond_btmdiv {
border-top: 1px solid #E3E3E3; border-top: 1px solid #E3E3E3;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -336,285 +385,301 @@ ...@@ -336,285 +385,301 @@
z-index: 999; z-index: 999;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
} }
</style> </style>
<template> <template>
<div class="customPoster"> <div class="customPoster">
<div class="custom_Header"> <div class="custom_Header">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="分销海报" name="1"></el-tab-pane> <el-tab-pane label="分销海报" name="1"></el-tab-pane>
<el-tab-pane label="商品海报" name="2"></el-tab-pane> <el-tab-pane label="商品海报" name="2"></el-tab-pane>
<el-tab-pane label="专题海报" name="3"></el-tab-pane> <!-- <el-tab-pane label="专题海报" name="3"></el-tab-pane> -->
</el-tabs> </el-tabs>
</div>
<template v-if="checkIndex==1">
<div class="custom_Main">
<div class="custom_mobile_box">
<div class="custom_bg_box">
<div class="custom_bg_pic" :style="{ backgroundImage:'url('+ShareMsg.PosterBgImg+')'}">
<div class="custom_headerImg" v-if="ShareMsg.IsShowHead==0"
:style="{left:ShareMsg.HeadPaddingLeft+'px',
width:ShareMsg.HeadSize+'px',height:ShareMsg.HeadSize+'px',top:ShareMsg.HeadPaddingTop+'px'}">
</div>
</div>
<span ref="nameSpan" style="position:absolute;display:inline-block;" v-if="ShareMsg.IsShowNick==0"
:style="{left:ShareMsg.NickPaddingLeft+'px',
fontSize:ShareMsg.NickSize+'px',top:ShareMsg.NickPaddingTop+'px',color:ShareMsg.NickColor}">用户昵称</span>
<div class="custom_AppImage" v-if="ShareMsg.IsShowQrCode==0" :style="{left:ShareMsg.QrCodePaddingLeft+'px',
width:ShareMsg.QrCodeSize+'px',height:ShareMsg.QrCodeSize+'px',top:ShareMsg.QrCodePaddingTop+'px',
'borderRadius':ShareMsg.QrCodeType==0?'50%':'0%'}"></div>
</div>
</div> </div>
<template v-if="checkIndex==1"> <div class="custom_formBody">
<div class="custom_Main"> <div style="margin-bottom:15px;">
<div class="custom_mobile_box"> <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 1334" placement="top">
<div class="custom_bg_box"> <el-button size="mini">更换背景图</el-button>
<div class="custom_bg_pic"> </el-tooltip>
<div class="custom_headerImg" v-if="ShareMsg[0].isShow==1" :style="{left:ShareMsg[0].leftMargin+'px', </div>
width:ShareMsg[0].size+'px',height:ShareMsg[0].size+'px',top:ShareMsg[0].upMargin+'px'}"></div> <div flex="wrap:wrap">
</div> <div class="custom_component" v-for="(item,index) in ShareTabs" :key="index"
<span ref="nameSpan" style="position:absolute;display:inline-block;" v-if="ShareMsg[1].isShow==1" :style="{left:ShareMsg[1].leftMargin+'px', :class="{'Custom_active':item.isActive==1}" @click="getChecked(item,index)">
fontSize:ShareMsg[1].size+'px',top:ShareMsg[1].upMargin+'px',color:ShareMsg[1].nameColor}">用户昵称</span> <img v-if="index==0" src="../../assets/img/storeDesign/icon_head.png" alt="" />
<div class="custom_AppImage" v-if="ShareMsg[2].isShow==1" :style="{left:ShareMsg[2].leftMargin+'px', <img v-else-if="index==1" src="../../assets/img/storeDesign/icon_name.png" alt="" />
width:ShareMsg[2].size+'px',height:ShareMsg[2].size+'px',top:ShareMsg[2].upMargin+'px', <img v-else src="../../assets/img/storeDesign/icon_qr_code.png" alt="" />
'borderRadius':ShareMsg[2].ShapeStyle==1?'50%':'0%'}"></div> <div>{{item.name}}</div>
</div> <img class="ccustom_itemremove" v-if="item.isShow==0"
@click.stop="deleteItem(item,index),isShowShareIndex=0"
src="../../assets/img/storeDesign/icon_delete.png" alt="" />
</div>
</div>
<div class="custom_bottom">
<template v-if="isShowShareIndex==1">
<div class="el-card__header">头像设置</div>
<el-form label-width="20%" style="padding:20px;">
<el-form-item label="大小" size="small">
<el-slider v-model="ShareMsg.HeadSize" @change="getCodeMax(ShareMsg.HeadSize,0)" :max="300"
show-input>
</el-slider>
</el-form-item>
<el-form-item label="上边距" size="small">
<el-slider v-model="ShareMsg.HeadPaddingTop" :max="headerMaxTop" show-input></el-slider>
</el-form-item>
<el-form-item label="左边距" size="small">
<el-slider v-model="ShareMsg.HeadPaddingLeft" :max="headerMaxLeft" show-input></el-slider>
</el-form-item>
</el-form>
</template>
<template v-if="isShowShareIndex==2">
<div class="el-card__header">昵称设置</div>
<el-form label-width="20%" style="padding:20px;">
<el-form-item label="大小" size="small">
<el-slider v-model="ShareMsg.NickSize" @change="getCodeMax(ShareMsg.NickSize,1)" :max="80" show-input>
</el-slider>
</el-form-item>
<el-form-item label="上边距" size="small">
<el-slider v-model="ShareMsg.NickPaddingTop" :max="nickNameTop" show-input></el-slider>
</el-form-item>
<el-form-item label="左边距" size="small">
<el-slider v-model="ShareMsg.NickPaddingLeft" :max="nickNameLeft" show-input></el-slider>
</el-form-item>
<el-form-item label="颜色" size="small">
<el-color-picker v-model="ShareMsg.NickColor"></el-color-picker>
</el-form-item>
</el-form>
</template>
<template v-if="isShowShareIndex==3">
<div class="el-card__header">二维码设置</div>
<el-form label-width="20%" style="padding:20px;">
<el-form-item label="样式" size="small">
<el-radio-group v-model="ShareMsg.QrCodeType">
<el-radio :label="0">圆形</el-radio>
<el-radio :label="1">方形</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="大小" size="small">
<el-slider v-model="ShareMsg.QrCodeSize" @change="getCodeMax(ShareMsg.QrCodeSize,2)" :max="300"
show-input>
</el-slider>
</el-form-item>
<el-form-item label="上边距" size="small">
<el-slider v-model="ShareMsg.QrCodePaddingTop" :max="maxTwocodeTop" show-input></el-slider>
</el-form-item>
<el-form-item label="左边距" size="small">
<el-slider v-model="ShareMsg.QrCodePaddingLeft" :max="maxTwocodeLeft" show-input></el-slider>
</el-form-item>
</el-form>
</template>
</div>
<div class="customShareBtn">
<el-button size="small" type="primary" @click="SetFenXiaoPoster()">保存</el-button>
</div>
</div>
</div>
</template>
<template v-else-if="checkIndex==2">
<div class="custom_Main">
<div class="custom_mobile_box">
<div class="poster_bg_box">
<template v-if="goodsPostersMsg.PosterStyle==1">
<div flex="dir:left cross:center" class="poster_User">
<img src="../../assets/img/storeDesign/default_head.png" alt="" />
<div flex="dir:left cross:center main-center">用户昵称向您推荐一个好物</div>
</div>
<div class="poster_goodImg">
<PictureCheck :GoodsImgCount="goodsPostersMsg.GoodsImgCount"></PictureCheck>
</div>
<div flex="dir:left cross:center" class="goodsone_bg">
<div flex="dir:top main:center">
<div class="goods-name">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="goods_price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div>
<div class="goods_remark">长按识别小程序码进入</div>
</div>
<img src="../../assets/img/default_qr_code.png" alt="" />
</div>
</template>
<template v-else-if="goodsPostersMsg.PosterStyle==2">
<div class="custom_Second">
<PictureCheck :GoodsImgCount="goodsPostersMsg.GoodsImgCount"></PictureCheck>
</div>
<div class="custom_SecondBG">
<div class="cuSecond_goodsName">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="goods_price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div> </div>
<div class="custom_formBody"> <div flex="dir:left cross:center" style="margin-top: 90px;">
<div style="margin-bottom:15px;"> <div flex="dir:top">
<el-tooltip class="item" effect="dark" content="建议尺寸:750 * 1334" placement="top" > <div flex="dir:left cross:center" style="margin:96px 0 15px 0;">
<el-button size="mini">更换背景图</el-button> <img class="customSecond_user" src="../../assets/img/storeDesign/default_head.png" alt="" />
</el-tooltip> <div style="color:#353535;margin-left:26px;">用户昵称</div>
</div> </div>
<div flex="wrap:wrap"> <div flex="dir-left main:center cross:center" class="CusSecondRemark">
<div class="custom_component" v-for="(item,index) in ShareMsg" :key="index" :class="{'Custom_active':item.isActive==1}" @click="getCHecked(item,index)"> <div>长按识别小程序码进入</div>
<img v-if="index==0" src="../../assets/img/storeDesign/icon_head.png" alt=""/> <img src="../../assets/img/storeDesign/three-arrow.png" alt="">
<img v-else-if="index==1" src="../../assets/img/storeDesign/icon_name.png" alt=""/>
<img v-else src="../../assets/img/storeDesign/icon_qr_code.png" alt=""/>
<div>{{item.name}}</div>
<img class="ccustom_itemremove" v-if="item.isShow==1" @click.stop="item.isShow=0,isShowShareIndex=0" src="../../assets/img/storeDesign/icon_delete.png" alt=""/>
</div>
</div> </div>
<div class="custom_bottom"> </div>
<template v-if="isShowShareIndex==1"> <img src="../../assets/img/default_qr_code.png" alt="" class="Second_qrcode">
<div class="el-card__header">头像设置</div> </div>
<el-form label-width="20%" style="padding:20px;"> </div>
<el-form-item label="大小" size="small"> </template>
<el-slider v-model="ShareMsg[0].size" @change="getCodeMax(ShareMsg[0].size,0)" :max="300" show-input></el-slider> <template v-else-if="goodsPostersMsg.PosterStyle==3">
</el-form-item> <div class="app-style-three">
<el-form-item label="上边距" size="small"> <div flex="dir:left cross:center" class="three_User" style="margin:40px 0 38px 0;">
<el-slider v-model="ShareMsg[0].upMargin" :max="headerMaxTop" show-input></el-slider> <img src="../../assets/img/storeDesign/default_head.png">
</el-form-item> <div style="margin-left:30px;">
<el-form-item label="左边距" size="small"> 我看上了这款商品 <br>
<el-slider v-model="ShareMsg[0].leftMargin" :max="headerMaxLeft" show-input></el-slider> 帮我看看咋样啊~ <br>
</el-form-item> 比心
</el-form> </div>
</template> </div>
<template v-if="isShowShareIndex==2"> </div>
<div class="el-card__header">昵称设置</div> <div style="width:680px;height:680px;margin:0 auto;">
<el-form label-width="20%" style="padding:20px;"> <PictureCheck :GoodsImgCount="goodsPostersMsg.GoodsImgCount"></PictureCheck>
<el-form-item label="大小" size="small"> </div>
<el-slider v-model="ShareMsg[1].size" @change="getCodeMax(ShareMsg[1].size,1)" :max="80" show-input></el-slider> <div flex="dir:top cross:center">
</el-form-item> <div class="cusThree_name">商品名称|商品名称</div>
<el-form-item label="上边距" size="small"> <div flex="dir:left cross:bottom" class="cusThree_price">
<el-slider v-model="ShareMsg[1].upMargin" :max="nickNameTop" show-input></el-slider> <div style="font-size: 32px; line-height: 1;">￥</div>
</el-form-item> <div style="font-size: 56px; line-height: 1;">160</div>
<el-form-item label="左边距" size="small"> </div>
<el-slider v-model="ShareMsg[1].leftMargin" :max="nickNameLeft" show-input></el-slider> </div>
</el-form-item> <div flex="dir:left cross:center main:center" class="cusThree_qrcode">
<el-form-item label="颜色" size="small"> <img src="../../assets/img/default_qr_code.png" style="width:230px;height:230px;" alt="" />
<el-color-picker v-model="ShareMsg[1].nameColor"></el-color-picker> <div>长按识别小程序码 即可查看</div>
</el-form-item> </div>
</el-form> </template>
</template> <template v-else-if="goodsPostersMsg.PosterStyle==4">
<template v-if="isShowShareIndex==3"> <div class="app-style-four">
<div class="el-card__header">二维码设置</div> <div flex="dir:left cross:center" class="user"><img src="../../assets/img/storeDesign/default_head.png">
<el-form label-width="20%" style="padding:20px;"> <div flex="dir:left cross:center main-center">
<el-form-item label="样式" size="small"> 用户昵称向您推荐一个好物
<el-radio-group v-model="ShareMsg[2].ShapeStyle"> </div>
<el-radio :label="1">圆形</el-radio> </div>
<el-radio :label="2">方形</el-radio> <div class="four-box">
</el-radio-group> <div class="goods-name">商品名称|商品名称</div>
</el-form-item> <div flex="dir:left cross:bottom" class="price">
<el-form-item label="大小" size="small"> <div style="font-size: 32px; line-height: 1;">￥</div>
<el-slider v-model="ShareMsg[2].size" @change="getCodeMax(ShareMsg[2].size,2)" :max="300" show-input></el-slider> <div style="font-size: 56px; line-height: 1;">160</div>
</el-form-item> </div>
<el-form-item label="上边距" size="small"> <div class="goods-image">
<el-slider v-model="ShareMsg[2].upMargin" :max="maxTwocodeTop" show-input></el-slider> <PictureCheck :GoodsImgCount="goodsPostersMsg.GoodsImgCount"></PictureCheck>
</el-form-item> </div>
<el-form-item label="左边距" size="small"> <div flex="cross:center dir:top" class="qrcode">
<el-slider v-model="ShareMsg[2].leftMargin" :max="maxTwocodeLeft" show-input></el-slider> <img src="../../assets/img/default_qr_code.png" alt="">
</el-form-item> <div>长按识别小程序码进入</div>
</el-form> </div>
</template> </div>
</div>
</template>
</div>
</div>
<div class="custom_formBody">
<div class="custom_rightCheck" style="padding:30px 0 50px;">
<el-form label-width="100px">
<el-form-item label="海报样式">
<el-radio-group v-model="goodsPostersMsg.PosterStyle" style="width:345px;">
<div class="poster-style-box" @click="goodsPostersMsg.PosterStyle=1">
<el-radio :label="1">样式一</el-radio>
<img src="../../assets/img/storeDesign/check1.png" alt="">
</div>
<div class="poster-style-box" @click="goodsPostersMsg.PosterStyle=2">
<el-radio :label="2">样式二</el-radio>
<img src="../../assets/img/storeDesign/check2.png" alt="">
</div>
<div class="poster-style-box" @click="goodsPostersMsg.PosterStyle=3">
<el-radio :label="3">样式三</el-radio>
<img src="../../assets/img/storeDesign/check3.png" alt="">
</div>
<div class="poster-style-box" @click="goodsPostersMsg.PosterStyle=4">
<el-radio :label="4">样式四</el-radio>
<img src="../../assets/img/storeDesign/check4.png" alt="">
</div>
</el-radio-group>
</el-form-item>
<el-form-item label="商品图数量">
<el-radio-group v-model="goodsPostersMsg.GoodsImgCount" style="width:450px;">
<div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=1">
<el-radio :label="1">一张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 100%;"></div>
</div> </div>
<div class="customShareBtn"> </div>
<el-button size="small" type="primary">保存</el-button> <div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=2">
<el-radio :label="2">二张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 100%;"></div>
</div> </div>
</div> </div>
</div> <div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=3">
</template> <el-radio :label="3">三张</el-radio>
<template v-else-if="checkIndex==2"> <div flex="dir:left" class="custom_grid">
<div class="custom_Main"> <div style="height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div class="custom_mobile_box"> <div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
<div class="poster_bg_box"> <div style="height: 50%; width: 50%;"></div>
<template v-if="postersMsg.PosterStyle==1">
<div flex="dir:left cross:center" class="poster_User">
<img src="../../assets/img/storeDesign/default_head.png" alt=""/>
<div flex="dir:left cross:center main-center">用户昵称向您推荐一个好物</div>
</div>
<div class="poster_goodImg">
<PictureCheck :pictureNum="postersMsg.pictureNum"></PictureCheck>
</div>
<div flex="dir:left cross:center" class="goodsone_bg">
<div flex="dir:top main:center">
<div class="goods-name">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="goods_price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div>
<div class="goods_remark">长按识别小程序码进入</div>
</div>
<img src="../../assets/img/default_qr_code.png" alt=""/>
</div>
</template>
<template v-else-if="postersMsg.PosterStyle==2">
<div class="custom_Second">
<PictureCheck :pictureNum="postersMsg.pictureNum"></PictureCheck>
</div>
<div class="custom_SecondBG">
<div class="cuSecond_goodsName">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="goods_price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div>
<div flex="dir:left cross:center" style="margin-top: 90px;">
<div flex="dir:top">
<div flex="dir:left cross:center" style="margin:96px 0 15px 0;">
<img class="customSecond_user" src="../../assets/img/storeDesign/default_head.png" alt=""/>
<div style="color:#353535;margin-left:26px;">用户昵称</div>
</div>
<div flex="dir-left main:center cross:center" class="CusSecondRemark">
<div>长按识别小程序码进入</div>
<img src="../../assets/img/storeDesign/three-arrow.png" alt="">
</div>
</div>
<img src="../../assets/img/default_qr_code.png" alt="" class="Second_qrcode">
</div>
</div>
</template>
<template v-else-if="postersMsg.PosterStyle==3">
<div class="app-style-three">
<div flex="dir:left cross:center" class="three_User" style="margin:40px 0 38px 0;">
<img src="../../assets/img/storeDesign/default_head.png">
<div style="margin-left:30px;">
我看上了这款商品 <br>
帮我看看咋样啊~ <br>
比心
</div>
</div>
</div>
<div style="width:680px;height:680px;margin:0 auto;">
<PictureCheck :pictureNum="postersMsg.pictureNum"></PictureCheck>
</div>
<div flex="dir:top cross:center">
<div class="cusThree_name">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="cusThree_price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div>
</div>
<div flex="dir:left cross:center main:center" class="cusThree_qrcode">
<img src="../../assets/img/default_qr_code.png" style="width:230px;height:230px;" alt=""/>
<div>长按识别小程序码 即可查看</div>
</div>
</template>
<template v-else-if="postersMsg.PosterStyle==4">
<div class="app-style-four">
<div flex="dir:left cross:center" class="user"><img src="../../assets/img/storeDesign/default_head.png">
<div flex="dir:left cross:center main-center">
用户昵称向您推荐一个好物
</div>
</div>
<div class="four-box">
<div class="goods-name">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div>
<div class="goods-image">
<PictureCheck :pictureNum="postersMsg.pictureNum"></PictureCheck>
</div>
<div flex="cross:center dir:top" class="qrcode">
<img src="../../assets/img/default_qr_code.png" alt="">
<div>长按识别小程序码进入</div>
</div>
</div>
</div>
</template>
</div> </div>
</div> </div>
<div class="custom_formBody"> <div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=4">
<div class="custom_rightCheck" style="padding:30px 0 50px;"> <el-radio :label="4">四张</el-radio>
<el-form label-width="100px"> <div flex="dir:left" class="custom_grid">
<el-form-item label="海报样式"> <div
<el-radio-group v-model="postersMsg.PosterStyle" style="width:345px;"> style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);">
<div class="poster-style-box" @click="postersMsg.PosterStyle=1"> </div>
<el-radio :label="1">样式一</el-radio> <div style="height: 50%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<img src="../../assets/img/storeDesign/check1.png" alt=""> <div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
</div> <div style="height: 50%; width: 50%;"></div>
<div class="poster-style-box" @click="postersMsg.PosterStyle=2">
<el-radio :label="2">样式二</el-radio>
<img src="../../assets/img/storeDesign/check2.png" alt="">
</div>
<div class="poster-style-box" @click="postersMsg.PosterStyle=3">
<el-radio :label="3">样式三</el-radio>
<img src="../../assets/img/storeDesign/check3.png" alt="">
</div>
<div class="poster-style-box" @click="postersMsg.PosterStyle=4">
<el-radio :label="4">样式四</el-radio>
<img src="../../assets/img/storeDesign/check4.png" alt="">
</div>
</el-radio-group>
</el-form-item>
<el-form-item label="商品图数量">
<el-radio-group v-model="postersMsg.pictureNum" style="width:450px;">
<div class="poster-pic-box" @click="postersMsg.pictureNum=1">
<el-radio :label="1">一张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 100%;"></div>
</div>
</div>
<div class="poster-pic-box" @click="postersMsg.pictureNum=2">
<el-radio :label="2">二张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 100%;"></div>
</div>
</div>
<div class="poster-pic-box" @click="postersMsg.pictureNum=3">
<el-radio :label="3">三张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%;"></div>
</div>
</div>
<div class="poster-pic-box" @click="postersMsg.pictureNum=4">
<el-radio :label="4">四张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%;"></div>
</div>
</div>
<div class="poster-pic-box" @click="postersMsg.pictureNum=5">
<el-radio :label="5">五张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 33.3%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 16.6%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 33.3%; width: 50%;"></div>
</div>
</div>
</el-radio-group>
</el-form-item>
</el-form>
</div> </div>
<div class="customSecond_btmdiv"> </div>
<el-button size="small" type="primary">保存</el-button> <div class="poster-pic-box" @click="goodsPostersMsg.GoodsImgCount=5">
<el-radio :label="5">五张</el-radio>
<div flex="dir:left" class="custom_grid">
<div
style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);">
</div>
<div style="height: 33.3%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 16.6%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 33.3%; width: 50%;"></div>
</div> </div>
</div> </div>
</div> </el-radio-group>
</template> </el-form-item>
<template v-else> </el-form>
<thematicPosters></thematicPosters> </div>
</template> <div class="customSecond_btmdiv">
</div> <el-button size="small" type="primary" @click="SetGoodPosterModule()">保存</el-button>
</div>
</div>
</div>
</template>
<template v-else>
<thematicPosters></thematicPosters>
</template>
</div>
</template> </template>
<script> <script>
import PictureCheck from "../common/PictureCheck.vue" import PictureCheck from "../common/PictureCheck.vue"
...@@ -622,107 +687,229 @@ ...@@ -622,107 +687,229 @@
export default { export default {
data() { data() {
return { return {
activeName:'1', activeName: '1',
checkIndex:1, checkIndex: 1,
//二维码最大上边距
//二维码最大上边距 maxTwocodeTop: 0,
maxTwocodeTop:0, //二维码最大左边距
//二维码最大左边距 maxTwocodeLeft: 0,
maxTwocodeLeft:0, //昵称最大上边距
//昵称最大上边距 nickNameTop: 0,
nickNameTop:0, //昵称最大左边距
//昵称最大左边距 nickNameLeft: 0,
nickNameLeft:0, //头像最大上边距
//头像最大上边距 headerMaxTop: 0,
headerMaxTop:0, //头像最大左边距
//头像最大左边距 headerMaxLeft: 0,
headerMaxLeft:0, //分销海报判断显示那一坨
//分销海报判断显示那一坨 isShowShareIndex: 1,
isShowShareIndex:1, //分销默认背景图
ShareMsg:[{ sharePosterDefaultImg: this.domainManager().ImageUrl + '/Static/shareposterdefault.jpg',
isActive:1, ShareTabs: [{
isShow:0, isActive: 1,
name:'头像', isShow: 1,
//大小 name: '头像',
size:120, }, {
//上边距 isActive: 0,
upMargin:20, isShow: 1,
//左边距 name: '昵称',
leftMargin:20 }, {
},{ isActive: 0,
isActive:0, isShow: 0,
isShow:0, name: '二维码',
name:'昵称', }],
//大小 //分销海报
size:40, ShareMsg: {
//上边距 Id: 0,
upMargin:60, TenantId: 0,
//左边距 MallBaseId: 0,
leftMargin:160, PosterBgImg: "", //海报背景图
nameColor:'rgb(0, 0, 0)' IsShowHead: 0, //是否显示头像(0-显示，1-不显示)
},{ HeadSize: 0, //头像大小
isActive:0, HeadPaddingTop: 0, //头像上间距
isShow:1, HeadPaddingLeft: 0, //头像左间距
//形状 IsShowNick: 0, //是否显示昵称(0-显示,1-不显示)
ShapeStyle:1, NickSize: 0, //昵称大小
name:'二维码', NickPaddingTop: 0, //昵称上间距
//大小 NickColor: "", //昵称颜色
size:162, NickPaddingLeft: 0, //昵称左间距
//上边距 IsShowQrCode: 0, //是否显示二维码(0-显示,1-不显示)
upMargin:1022, QrCodeSize: 0, //二维码大小
//左边距 QrCodePaddingTop: 0, //二维码上间距
leftMargin:76 QrCodePaddingLeft: 0, //二维码左间距
}], QrCodeType: 0, //二维码形状(0-圆形，1-方形)
//商品海报msg },
postersMsg:{ //商品海报msg
PosterStyle:1, goodsPostersMsg: {
pictureNum:1 Id: 0,
} PosterStyle: 1, //海报样式
GoodsImgCount: 1
}
}; };
}, },
created() { created() {},
},
components: { components: {
PictureCheck, PictureCheck,
thematicPosters thematicPosters
}, },
methods: { methods: {
//切换 //切换
handleClick(tab){ handleClick(tab) {
this.checkIndex = tab.name; this.checkIndex = tab.name;
}, },
//点击切换 //点击切换
getCHecked(item,index){ getChecked(item, index) {
this.ShareMsg.forEach(x=>{ this.ShareTabs.forEach(x => {
x.isActive=0; x.isActive = 0;
}) })
item.isActive=1; item.isActive = 1;
item.isShow=1; item.isShow = 0;
this.isShowShareIndex=index+1 switch (index) {
case 0:
this.ShareMsg.IsShowHead = item.isShow;
break;
case 1:
this.ShareMsg.IsShowNick = item.isShow;
break;
case 2:
this.ShareMsg.IsShowQrCode = item.isShow;
break;
}
this.isShowShareIndex = index + 1;
},
//删除选项
deleteItem(item, index) {
item.isShow = 1;
switch (index) {
case 0:
this.ShareMsg.IsShowHead = item.isShow;
break;
case 1:
this.ShareMsg.IsShowNick = item.isShow;
break;
case 2:
this.ShareMsg.IsShowQrCode = item.isShow;
break;
}
}, },
//拉伸二维码尺寸动态设置最大值 //拉伸二维码尺寸动态设置最大值
getCodeMax(chicun,num){ getCodeMax(chicun, num) {
if(num==0){ if (num == 0) {
this.headerMaxTop = 1334-chicun; this.headerMaxTop = 1334 - chicun;
this.headerMaxLeft = 750-chicun; this.headerMaxLeft = 750 - chicun;
}else if(num==1){ } else if (num == 1) {
this.nickNameTop = 1334-chicun; this.nickNameTop = 1334 - chicun;
this.nickNameLeft = 750-chicun; this.nickNameLeft = 750 - chicun;
}else{ } else {
this.maxTwocodeTop=1334-chicun; this.maxTwocodeTop = 1334 - chicun;
this.maxTwocodeLeft = 750-chicun; this.maxTwocodeLeft = 750 - chicun;
} }
},
//获取分销海报
GetFenXiaoPoster() {
this.apipost("/api/Tenant/GetFenXiaoPoster", {}, res => {
if (res.data.resultCode == 1) {
var jsonData = res.data.data;
if (jsonData) {
this.ShareMsg.Id = jsonData.Id;
this.ShareMsg.PosterBgImg = jsonData.PosterBgImg;
this.ShareMsg.IsShowHead = jsonData.IsShowHead;
this.ShareMsg.HeadSize = jsonData.HeadSize;
this.ShareMsg.HeadPaddingTop = jsonData.HeadPaddingTop;
this.ShareMsg.HeadPaddingLeft = jsonData.HeadPaddingLeft;
this.ShareTabs[0].isShow = this.ShareMsg.IsShowHead;
this.ShareMsg.IsShowNick = jsonData.IsShowNick;
this.ShareMsg.NickSize = jsonData.NickSize;
this.ShareMsg.NickPaddingTop = jsonData.NickPaddingTop;
this.ShareMsg.NickPaddingLeft = jsonData.NickPaddingLeft;
this.ShareMsg.NickColor = jsonData.NickColor;
this.ShareTabs[1].isShow = this.ShareMsg.IsShowNick;
this.ShareMsg.IsShowQrCode = jsonData.IsShowQrCode;
this.ShareMsg.QrCodeSize = jsonData.QrCodeSize;
this.ShareMsg.QrCodePaddingTop = jsonData.QrCodePaddingTop;
this.ShareMsg.QrCodePaddingLeft = jsonData.QrCodePaddingLeft;
this.ShareMsg.QrCodeSize = jsonData.QrCodeSize;
this.ShareMsg.QrCodeType = jsonData.QrCodeType;
this.ShareTabs[2].isShow = this.ShareMsg.IsShowQrCode;
} else {
this.ShareMsg.PosterBgImg = this.sharePosterDefaultImg;
this.ShareMsg.IsShowHead = 1;
this.ShareMsg.HeadSize = 120;
this.ShareMsg.HeadPaddingTop = 20;
this.ShareMsg.HeadPaddingLeft = 20;
this.ShareMsg.IsShowNick = 1;
this.ShareMsg.NickSize = 40;
this.ShareMsg.NickPaddingTop = 60;
this.ShareMsg.NickPaddingLeft = 160;
this.ShareMsg.NickColor = "rgb(0, 0, 0)";
this.ShareMsg.IsShowQrCode = 0;
this.ShareMsg.QrCodeSize = 162;
this.ShareMsg.QrCodePaddingTop = 1022;
this.ShareMsg.QrCodePaddingLeft = 76;
this.ShareMsg.QrCodeSize = 162;
this.ShareMsg.QrCodeType = 0;
}
} else {
this.Info(res.data.message);
}
})
},
//添加修改分销海报
SetFenXiaoPoster() {
this.apipost("/api/Tenant/SetFenXiaoPoster", this.ShareMsg, res => {
if (res.data.resultCode == 1) {
this.GetFenXiaoPoster();
this.Success(res.data.message);
} else {
this.Info(res.data.message);
}
})
},
//获取商品海报
GetGoodPoster() {
this.apipost("/api/Tenant/GetGoodPoster", {}, res => {
if (res.data.resultCode == 1) {
var jsonData = res.data.data;
if (jsonData) {
this.goodsPostersMsg.Id = jsonData.Id;
this.goodsPostersMsg.PosterStyle = jsonData.PosterStyle;
this.goodsPostersMsg.GoodsImgCount = jsonData.GoodsImgCount;
} else {
this.goodsPostersMsg.PosterStyle = 1;
this.goodsPostersMsg.GoodsImgCount = 1;
}
} else {
this.Info(res.data.message);
}
})
},
//添加修改商品海报
SetGoodPosterModule() {
this.apipost("/api/Tenant/SetGoodPosterModule", this.goodsPostersMsg, res => {
if (res.data.resultCode == 1) {
this.GetGoodPoster();
this.Success(res.data.message);
} else {
this.Info(res.data.message);
}
})
} }
}, },
mounted() { mounted() {
this.maxTwocodeTop=1334-this.ShareMsg[2].size; this.maxTwocodeTop = 1334 - this.ShareMsg.QrCodeSize;
this.maxTwocodeLeft = 750-this.ShareMsg[2].size; this.maxTwocodeLeft = 750 - this.ShareMsg.QrCodeSize;
this.nickNameTop = 1334-this.ShareMsg[1].size; this.nickNameTop = 1334 - this.ShareMsg.NickSize;
this.nickNameLeft = 750-this.ShareMsg[1].size; this.nickNameLeft = 750 - this.ShareMsg.NickSize;
this.headerMaxTop = 1334-this.ShareMsg[0].size; this.headerMaxTop = 1334 - this.ShareMsg.HeadSize;
this.headerMaxLeft = 750-this.ShareMsg[0].size; this.headerMaxLeft = 750 - this.ShareMsg.HeadSize;
this.GetFenXiaoPoster();
this.GetGoodPoster();
} }
}; };
</script>
\ No newline at end of file </script>
src/components/common/PictureCheck.vue
View file @ 803c6dd3
...@@ -84,12 +84,12 @@ ...@@ -84,12 +84,12 @@
</style> </style>
<template> <template>
<div class="app-style-multi-map"> <div class="app-style-multi-map">
<template v-if="pictureNum==1"> <template v-if="GoodsImgCount==1">
<div class="goods_one"> <div class="goods_one">
<img src="../../assets/img/storeDesign/goods-url.png" alt=""/> <img src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div> </div>
</template> </template>
<template v-else-if="pictureNum==2"> <template v-else-if="GoodsImgCount==2">
<div flex="dir:left" class="goods-two"> <div flex="dir:left" class="goods-two">
<div class="el-image"> <div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/> <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="pictureNum==3"> <template v-else-if="GoodsImgCount==3">
<div flex="dir:left" class="goods-three"> <div flex="dir:left" class="goods-three">
<div class="el-image"> <div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/> <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="pictureNum==4"> <template v-else-if="GoodsImgCount==4">
<div flex="dir:left" class="goods-four"> <div flex="dir:left" class="goods-four">
<div class="el-image"> <div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/> <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="pictureNum==5"> <template v-else-if="GoodsImgCount==5">
<div flex="dir:left" class="goods-five"> <div flex="dir:left" class="goods-five">
<div class="el-image"> <div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/> <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
...@@ -151,7 +151,7 @@ ...@@ -151,7 +151,7 @@
</template> </template>
<script> <script>
export default { export default {
props: ["pictureNum"], props: ["GoodsImgCount"],
data() { data() {
return { return {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment