Skip to content

E
ElectricitySheep
Commit a953ff75 authored by Mac's avatar Mac
Browse files
Options

相亲海报

parent 3e8f5437
Show whitespace changes
Inline Side-by-side
Showing with 991 additions and 3 deletions
src/components/StoreDesign/blindDatebill.vue 0 → 100644
View file @ a953ff75
<style>
.customPoster .custom_Header {
padding: 0 20px;
height: 56px;
line-height: 56px;
background-color: #fff;
margin-bottom: 15px;
}
.customPoster .custom_Main {
display: flex;
}
.custom_mobile_box {
width: 400px;
height: 740px;
padding: 35px 11px;
background-color: #fff;
border-radius: 30px;
margin-right: 20px;
display: flex;
flex-direction: column;
}
.custom_bg_box {
position: relative;
border: 1px solid #e2e3e3;
width: 750px;
height: 1334px;
zoom: 0.5;
}
.custom_bg_pic {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-position: center;
}
.custom_AppImage {
background: url('../../assets/img/default_qr_code.png') no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
}
.custom_formBody {
padding: 20px 35% 20px 20px;
background-color: #fff;
margin-bottom: 20px;
width: 100%;
height: 100%;
position: relative;
min-width: 640px;
display: flex;
flex-direction: column;
}
.custom_component {
width: 100px;
height: 100px;
cursor: pointer;
position: relative;
padding: 10px 0;
border: 1px solid #e2e2e2;
margin: 15px 15PX 0 0;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.ccustom_itemremove {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 28px;
height: 28px;
}
.custom_bottom {
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
border-radius: 4px;
margin-top: 35px;
}
.customShareBtn {
position: absolute !important;
bottom: -52px;
left: 0;
}
.customShareBtn .el-button--small {
padding: 9px 25px;
}
.Custom_active {
border: 1px solid #7BBDFC;
}
.custom_headerImg {
background: url('../../assets/img/storeDesign/default_head.png') no-repeat;
background-size: cover;
background-position: center center;
border-radius: 50%;
position: absolute;
}
.custom_cover {
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1615198298000_523.jpg') no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
}
.poster_bg_box {
position: relative;
border: 2px solid #e2e3e3;
width: 750px;
height: 1334px;
zoom: 0.5;
overflow: hidden;
}
.customPoster .poster_User {
margin-top: 96px;
margin-bottom: 64px;
}
.poster_User img {
height: 90px;
width: 90px;
border-radius: 50%;
margin-left: 24px;
display: block;
}
.poster_User div {
background: #f1f1f1;
padding: 0 24px;
height: 54px;
color: #4b4b4b;
margin-left: 24px;
border-radius: 30px;
}
.poster_goodImg {
margin: 0 auto;
height: 702px;
width: 702px;
overflow: hidden;
border-radius: 16px 16px 0 0;
}
.customPoster .goodsone_bg {
height: 310px;
margin: 0 auto;
width: 702px;
padding: 0 28px;
background: #ffffff;
border-radius: 0 0 16px 16px;
}
.goodsone_bg .goods-name {
padding: 28px 0;
font-size: 34px;
color: #353535;
}
.customPoster .goods_price {
padding-top: 50px;
color: #ff4544;
}
.customPoster .goods_remark {
margin-top: 28px;
color: #999999;
font-size: 28px;
}
.goodsone_bg img {
height: 230px;
width: 230px;
margin-left: auto;
display: block;
border-radius: 50%;
}
.custom_Second {
height: 750px;
width: 750px;
overflow: hidden;
}
.custom_SecondBG {
background-image: url('../../assets/img/storeDesign/style-two-end.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 600px;
width: 702px;
position: relative;
left: 24px;
top: -40px;
padding: 0 24px;
}
.cuSecond_goodsName {
font-size: 34px;
color: #353535;
padding-top: 40px;
}
.customSecond_user {
height: 96px;
width: 96px;
border-radius: 50%;
margin-left: 24px;
display: block;
}
.CusSecondRemark {
height: 52px;
width: 100%;
padding: 0 24px;
color: #353535;
background-color: #f1f1f1;
font-size: 24px;
border-radius: 30px;
margin-bottom: 70px;
}
.Second_qrcode {
height: 230px;
width: 230px;
display: block;
margin-left: auto;
}
.three_User img {
height: 97px;
width: 97px;
border-radius: 50%;
margin-left: 35px;
display: block;
}
.app-style-three .three_User div:after {
content: "";
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url('../../assets/img/storeDesign/three-love.png');
height: 24px;
width: 24px;
display: inline-block;
margin-left: 8px;
}
.cusThree_name {
font-size: 34px;
padding-top: 28px;
color: #353535;
}
.cusThree_price {
padding-top: 28px;
color: #ff4544;
}
.cusThree_qrcode {
width: 702px;
border-top: 1px solid #c9c9c9;
height: 278px;
margin: 0 auto;
margin-top: 24px;
}
.cusThree_qrcode div {
margin-top: 20px;
margin-left: 24px;
font-size: 28px;
color: #353535;
}
.app-style-four .user {
margin-top: 35px;
margin-bottom: 35px;
}
.app-style-four .user img {
height: 90px;
width: 90px;
border-radius: 50%;
margin-left: 24px;
display: block;
}
.app-style-four .user div {
background: #f1f1f1;
padding: 0 24px;
height: 54px;
color: #4b4b4b;
margin-left: 24px;
border-radius: 30px;
}
.app-style-four .four-box {
height: 1150px;
background-color: #FFFFFF;
margin: 0 auto;
width: 702px;
border-radius: 16px;
padding: 0 24px;
}
.app-style-four .goods-name {
font-size: 34px;
padding-top: 26px;
color: #353535;
}
.app-style-four .price {
padding-top: 60px;
color: #ff4544;
}
.app-style-four .goods-image {
height: 650px;
width: 650px;
margin-top: 60px;
}
.app-style-four .qrcode img {
height: 150px;
width: 150px;
margin-top: 25px;
}
.app-style-four .qrcode div {
margin-top: 22px;
margin-bottom: 26px;
font-size: 24px;
color: #999999;
}
.poster-style-box {
cursor: pointer;
display: inline-block;
border: 1px solid #E2E2E2;
border-radius: 3px;
height: 255px;
width: 160px;
margin: 5px;
padding: 0 5px;
}
.activeCustomer {
border: 1px solid #409eff!important;
}
.custom_rightCheck .el-radio {
height: 32px;
line-height: 32px;
}
.custom_grid {
flex-wrap: wrap;
height: 100px;
width: 100%;
background: #E6F4FF;
border: 1px solid #b8b8b8;
}
.poster-pic-box {
cursor: pointer;
display: inline-block;
border: 1px solid #E2E2E2;
border-radius: 3px;
height: 155px;
width: 112px;
margin: 5px;
padding: 0 5px;
}
.customSecond_btmdiv {
border-top: 1px solid #E3E3E3;
position: absolute;
bottom: 0;
background-color: #ffffff;
z-index: 999;
padding: 10px;
width: 100%;
}
.customPoster .title-style{
position:absolute;display:inline-block;border:1px solid #111;
display:-webkit-box;
-webkit-box-orient:vertical;
overflow : hidden;
text-overflow: ellipsis;
}
</style>
<template>
<div class="customPoster">
<div class="custom_Header">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="分销海报" name="1"></el-tab-pane>
<!-- <el-tab-pane label="商品海报" name="2"></el-tab-pane>-->
<!-- <el-tab-pane label="专题海报" name="3"></el-tab-pane> -->
</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 class="custom_cover" v-if="ShareMsg.IsShowCover==0"
:style="{left:ShareMsg.CoverPaddingLeft+'px',
width:ShareMsg.CoverWidth+'px',height:ShareMsg.CoverHeight+'px',top:ShareMsg.CoverPaddingTop+'px'}">
</div>
<div ref="nameSpan" class="title-style" v-if="ShareMsg.IsShowTitle==0"
:style="{left:ShareMsg.TitlePaddingLeft+'px',
fontSize:ShareMsg.TitleSize+'px',top:ShareMsg.TitlePaddingTop+'px',
color:ShareMsg.TitleColor,width:ShareMsg.TitleWidth+'px','-webkit-line-clamp':ShareMsg.TitleRow}">
这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。这里是相亲标题。。
</div>
</div>
</div>
<div class="custom_formBody">
<div style="margin-bottom:15px;">
<el-tooltip class="item" effect="dark" content="建议尺寸:750 * 1334" placement="top">
<el-button size="mini" @click="choicImg=true">更换背景图</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="恢复默认图" placement="top">
<el-button size="mini" @click="ShareMsg.PosterBgImg=sharePosterDefaultImg">恢复默认背景</el-button>
</el-tooltip>
</div>
<div flex="wrap:wrap">
<div class="custom_component" v-for="(item,index) in ShareTabs" :key="index"
:class="{'Custom_active':item.isActive==1}" @click="getChecked(item,index)">
<img v-if="index==0" src="../../assets/img/storeDesign/icon_head.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==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>
<template v-if="isShowShareIndex==4">
<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.CoverHeight" @change="getCodeMax(ShareMsg.CoverHeight,3,1)" :max="1334"
show-input>
</el-slider>
</el-form-item>
<el-form-item label="宽度" size="small">
<el-slider v-model="ShareMsg.CoverWidth" @change="getCodeMax(ShareMsg.CoverWidth,3,2)" :max="750"
show-input>
</el-slider>
</el-form-item>
<el-form-item label="上边距" size="small">
<el-slider v-model="ShareMsg.CoverPaddingTop" :max="CoverMapMaxTop" show-input></el-slider>
</el-form-item>
<el-form-item label="左边距" size="small">
<el-slider v-model="ShareMsg.CoverPaddingLeft" :max="CoverMapMaxLeft" show-input></el-slider>
</el-form-item>
</el-form>
</template>
<template v-if="isShowShareIndex==5">
<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.TitleSize" @change="getCodeMax(ShareMsg.TitleSize,4,1)" :max="80" show-input>
</el-slider>
</el-form-item>
<el-form-item label="宽度" size="small">
<el-slider v-model="ShareMsg.TitleWidth" @change="getCodeMax(ShareMsg.TitleWidth,4,2)" :max="750"
show-input>
</el-slider>
</el-form-item>
<el-form-item label="上边距" size="small">
<el-slider v-model="ShareMsg.TitlePaddingTop" :max="TitleMaxTop" show-input></el-slider>
</el-form-item>
<el-form-item label="左边距" size="small">
<el-slider v-model="ShareMsg.TitlePaddingLeft" :max="TitleMaxLeft" show-input></el-slider>
</el-form-item>
<el-form-item label="行数" size="small">
<el-slider v-model="ShareMsg.TitleRow" :min="1" :max="5" show-input @change="getCodeMax(ShareMsg.TitleSize,4,1)"></el-slider>
</el-form-item>
<el-form-item label="颜色" size="small">
<el-color-picker v-model="ShareMsg.TitleColor"></el-color-picker>
</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>
<thematicPosters></thematicPosters>
</template>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div>
</template>
<script>
import PictureCheck from "../common/PictureCheck.vue"
import thematicPosters from "../StoreDesign/thematicPosters.vue"
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
data() {
return {
//选择背景图
choicImg:false,
activeName: '1',
checkIndex: 1,
//二维码最大上边距
maxTwocodeTop: 0,
//二维码最大左边距
maxTwocodeLeft: 0,
//昵称最大上边距
nickNameTop: 0,
//昵称最大左边距
nickNameLeft: 0,
//头像最大上边距
headerMaxTop: 0,
//头像最大左边距
headerMaxLeft: 0,
//封面图最大上边距
CoverMapMaxTop: 0,
//封面图最大左边距
CoverMapMaxLeft: 0,
//标题最大上边距
TitleMaxTop: 0,
//标题最大左边距
TitleMaxLeft: 0,
//分销海报判断显示那一坨
isShowShareIndex: 1,
//分销默认背景图
sharePosterDefaultImg: this.domainManager().ImageUrl + '/Static/shareposterdefault.jpg',
ShareTabs: [{
isActive: 1,
isShow: 1,
name: '头像',
}, {
isActive: 0,
isShow: 1,
name: '昵称',
}, {
isActive: 0,
isShow: 0,
name: '二维码',
}, {
isActive: 0,
isShow: 0,
name: '封面图',
}, {
isActive: 0,
isShow: 0,
name: '标题',
}],
//分销海报
ShareMsg: {
Id: 0,
TenantId: 0,
MallBaseId: 0,
PosterBgImg: "", //海报背景图
IsShowHead: 0, //是否显示头像(0-显示，1-不显示)
HeadSize: 0, //头像大小
HeadPaddingTop: 0, //头像上间距
HeadPaddingLeft: 0, //头像左间距
IsShowNick: 0, //是否显示昵称(0-显示,1-不显示)
NickSize: 0, //昵称大小
NickPaddingTop: 0, //昵称上间距
NickColor: "", //昵称颜色
NickPaddingLeft: 0, //昵称左间距
IsShowQrCode: 0, //是否显示二维码(0-显示,1-不显示)
QrCodeSize: 0, //二维码大小
QrCodePaddingTop: 0, //二维码上间距
QrCodePaddingLeft: 0, //二维码左间距
QrCodeType: 0, //二维码形状(0-圆形，1-方形)
IsOpenSchool: 0, //商城海报
IsShowCover:0,//是否显示封面图 (0-显示,1-不显示)
CoverHeight:0,//封面图高度
CoverWidth:0,//封面图宽度 (等于-1 全屏)
CoverPaddingTop:0,//封面图上边距
CoverPaddingLeft:0,//封面图左边距
TitleWidth:500,//宽度
IsShowTitle:0,//是否显示标题(0-显示,1-不显示)
TitleSize:0,//标题大小
TitleColor:0,//标题颜色
TitlePaddingTop:0,//标题上边距
TitlePaddingLeft:0,//标题左边距
TitleRow:0,//标题行数
},
//商品海报msg
goodsPostersMsg: {
Id: 0,
PosterStyle: '', //海报样式
GoodsImgCount: 1,
PosterStyleList:[],
GoodsImgCountList:[],
IsOpenSchool: 0, //商城海报
},
//显示哪一个海报
myPostStyle:0,
//显示图片张数
myImgStyle:0
};
},
created() {},
components: {
PictureCheck,
thematicPosters,
ChooseImg
},
methods: {
//切换
handleClick(tab) {
this.checkIndex = tab.name;
},
getClass(type,num){
if(type==0){
if(this.goodsPostersMsg.PosterStyleList.indexOf(num)!=-1){
return true
}else{
return false
}
}else{
if(this.goodsPostersMsg.GoodsImgCountList.indexOf(num)!=-1){
return true
}else{
return false
}
}
},
getPost(type,num){
if(type==0){
this.myPostStyle=num;
if(this.goodsPostersMsg.PosterStyleList.indexOf(num)!=-1){
let index1=this.goodsPostersMsg.PosterStyleList.indexOf(num);
this.goodsPostersMsg.PosterStyleList.splice(index1,1);
}else{
this.goodsPostersMsg.PosterStyleList.push(num);
}
}else{
this.myImgStyle=num;
if(this.goodsPostersMsg.GoodsImgCountList.indexOf(num)!=-1){
let index1=this.goodsPostersMsg.GoodsImgCountList.indexOf(num);
this.goodsPostersMsg.GoodsImgCountList.splice(index1,1);
}else{
this.goodsPostersMsg.GoodsImgCountList.push(num);
}
}
},
//点击切换
getChecked(item, index) {
this.ShareTabs.forEach(x => {
x.isActive = 0;
})
item.isActive = 1;
item.isShow = 0;
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;
case 3:
this.ShareMsg.IsShowCover = item.isShow;
break;
case 4:
this.ShareMsg.IsShowTitle = 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;
case 3:
this.ShareMsg.IsShowCover = item.isShow;
break;
case 4:
this.ShareMsg.IsShowTitle = item.isShow;
break;
}
},
//拉伸二维码尺寸动态设置最大值
getCodeMax(chicun, num, type=0) {//type!=0的时候高宽分开算 1为高度 2位宽度
if (num == 0) {
this.headerMaxTop = 1334 - chicun;
this.headerMaxLeft = 750 - chicun;
} else if (num == 1) {
this.nickNameTop = 1334 - chicun;
this.nickNameLeft = 750 - chicun;
} else if(num == 2){
this.maxTwocodeTop = 1334 - chicun;
this.maxTwocodeLeft = 750 - chicun;
} else if(num == 3){
if(type==1){
this.CoverMapMaxTop = 1334 - chicun;
}else if(type == 2){
this.CoverMapMaxLeft = 750 - chicun
}
} else if(num == 4){
if(type==1){
this.TitleMaxTop = 1334 - (chicun*this.ShareMsg.TitleRow);
}
if(type==2){
this.TitleMaxLeft = 750 - chicun;
}
}
},
//获取分销海报
GetFenXiaoPoster() {
this.apipost("/api/Tenant/GetFenXiaoPoster", { IsOpenSchool: 0}, 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;
this.ShareMsg.IsShowCover = jsonData.IsShowCover;
this.ShareMsg.CoverHeight = jsonData.CoverHeight;
this.ShareMsg.CoverWidth = jsonData.CoverWidth;
this.ShareMsg.CoverPaddingTop = jsonData.CoverPaddingTop;
this.ShareMsg.CoverPaddingLeft = jsonData.CoverPaddingLeft;
this.ShareMsg.TitleWidth = jsonData.TitleWidth;
this.ShareTabs[3].isShow = this.ShareMsg.IsShowCover;
this.ShareMsg.IsShowTitle = jsonData.IsShowTitle;
this.ShareMsg.TitleSize = jsonData.TitleSize;
this.ShareMsg.TitleColor = jsonData.TitleColor;
this.ShareMsg.TitlePaddingTop = jsonData.TitlePaddingTop;
this.ShareMsg.TitlePaddingLeft = jsonData.TitlePaddingLeft;
this.ShareMsg.TitleRow = jsonData.TitleRow;
this.ShareTabs[4].isShow = this.ShareMsg.IsShowTitle;
} 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;
this.ShareMsg.IsShowCover = 0;
this.ShareMsg.CoverHeight = 258;
this.ShareMsg.CoverWidth = 518;
this.ShareMsg.CoverPaddingTop = 337;
this.ShareMsg.CoverPaddingLeft = 103;
this.ShareMsg.IsShowTitle = 0;
this.ShareMsg.TitleSize = 30;
this.ShareMsg.TitleWidth = 500;
this.ShareMsg.TitleColor = "rgb(0, 0, 0)";
this.ShareMsg.TitlePaddingTop = 0;
this.ShareMsg.TitlePaddingLeft = 0;
this.ShareMsg.TitleRow = 1;
}
//没有情况计算宽高
this.getCodeMax(this.ShareMsg.CoverHeight,3,1)
this.getCodeMax(this.ShareMsg.CoverWidth,3,2)
this.getCodeMax(this.ShareMsg.TitleSize,4,1)
this.getCodeMax(this.ShareMsg.TitleWidth,4,2)
} 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", { IsOpenSchool: 0}, res => {
if (res.data.resultCode == 1) {
var jsonData = res.data.data;
if (jsonData) {
this.goodsPostersMsg.Id = jsonData.Id;
this.goodsPostersMsg.PosterStyleList = jsonData.PosterStyleList;
this.goodsPostersMsg.GoodsImgCountList = jsonData.GoodsImgCountList;
if(jsonData.PosterStyleList.length>0){
this.myPostStyle = jsonData.PosterStyleList[jsonData.PosterStyleList.length-1];
}
if(this.goodsPostersMsg.GoodsImgCountList.length>0){
this.myImgStyle = jsonData.GoodsImgCountList[jsonData.GoodsImgCountList.length-1];
}
} else {
this.goodsPostersMsg.PosterStyle = '';
this.goodsPostersMsg.GoodsImgCount = '';
}
} else {
this.Info(res.data.message);
}
})
},
//添加修改商品海报
SetGoodPosterModule() {
this.goodsPostersMsg.PosterStyle=this.goodsPostersMsg.PosterStyleList.join(',');
this.goodsPostersMsg.GoodsImgCount=this.goodsPostersMsg.GoodsImgCountList.join(',');
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);
}
})
},
//选择图片
SelectId(msg) {
this.ShareMsg.PosterBgImg = this.getIconLink(msg.url);
this.choicImg = false;
},
},
mounted() {
this.maxTwocodeTop = 1334 - this.ShareMsg.QrCodeSize;
this.maxTwocodeLeft = 750 - this.ShareMsg.QrCodeSize;
this.nickNameTop = 1334 - this.ShareMsg.NickSize;
this.nickNameLeft = 750 - this.ShareMsg.NickSize;
this.headerMaxTop = 1334 - this.ShareMsg.HeadSize;
this.headerMaxLeft = 750 - this.ShareMsg.HeadSize;
this.GetFenXiaoPoster();
this.GetGoodPoster();
}
};
</script>
src/components/sallCenter/plugin/miaiuser.vue
View file @ a953ff75
...@@ -456,9 +456,9 @@ ...@@ -456,9 +456,9 @@
<el-form-item label="列表样式"> <el-form-item label="列表样式">
<el-radio v-model="data.listStyle" :label="-1">列表模式</el-radio> <el-radio v-model="data.listStyle" :label="-1">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="0">左右滑动</el-radio> <el-radio v-model="data.listStyle" :label="0">左右滑动</el-radio>
<el-radio v-model="data.listStyle" :label="1">一行一个</el-radio> <el-radio v-model="data.listStyle" :label="1">瀑布流</el-radio>
<el-radio v-model="data.listStyle" :label="2">一行两个</el-radio> <!-- <el-radio v-model="data.listStyle" :label="2">一行两个</el-radio>-->
<el-radio v-model="data.listStyle" :label="3">一行三个</el-radio> <!-- <el-radio v-model="data.listStyle" :label="3">一行三个</el-radio>-->
</el-form-item> </el-form-item>
<el-form-item label="背景颜色"> <el-form-item label="背景颜色">
<el-color-picker v-model="data.backgroundColor"></el-color-picker> <el-color-picker v-model="data.backgroundColor"></el-color-picker>
......
src/router/index.js
View file @ a953ff75
...@@ -1280,6 +1280,12 @@ export default new Router({ ...@@ -1280,6 +1280,12 @@ export default new Router({
name: 'customPoster', name: 'customPoster',
component: resolve => require(['@/components/StoreDesign/customPoster'], resolve), component: resolve => require(['@/components/StoreDesign/customPoster'], resolve),
}, },
//店铺管理 相亲海报
{
path: '/blindDatebill',
name: 'blindDatebill',
component: resolve => require(['@/components/StoreDesign/blindDatebill'], resolve),
},
//店铺管理 校园海报 //店铺管理 校园海报
{ {
path: '/schoolPoster', path: '/schoolPoster',
......
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