Skip to content

M
marketing
Commit 4613645f by 陈羽
Options

update:UI样式调整

parent 965446f5
Showing with 68 additions and 29 deletions
src/views/pop/form.vue
<template>
<section class="dm-wrap" v-loading="loading">
<section class="dm-wrap pop-form" v-loading="loading">
<div>
<el-form ref="form" :model="group" label-width="92px" :rules="rules" :hide-required-asterisk="true">
<el-form-item label="计划名称：" prop="name">
......@@ -31,7 +31,7 @@
<!-- 投放内容 图片 -->
<div class="upload_box" v-if="pop.putonType === 1">
<el-form-item :prop="`content_${elIndex}`">
<dm-upload-file class="pop_dm_upload_file" width="396px" :disabled="pop.activeStatus == 2" :action="`${config.api}/api-plug/upload-img?requestProject=marketing`" withCredentials :on-remove="index => handleRemove(index, elIndex)" :before-upload="file => beforeAvatarUpload(file, elIndex)" :on-success="(response, file) => successAvatarUpload(response, file, elIndex)" :file-list="pop.fileList">
<dm-upload-file class="pop_dm_upload_file" width="400px" :disabled="pop.activeStatus == 2" :action="`${config.api}/api-plug/upload-img?requestProject=marketing`" withCredentials :on-remove="index => handleRemove(index, elIndex)" :before-upload="file => beforeAvatarUpload(file, elIndex)" :on-success="(response, file) => successAvatarUpload(response, file, elIndex)" :file-list="pop.fileList">
<template slot="tip">上传jpg/png/gif文件，建议尺寸750x690px，且不超过500kb </template>
<template v-slot:file-item="{ fileData }">
<div class="file-list-item">
......@@ -114,16 +114,15 @@
</template>
<el-radio-group v-model="pop.autoCloseFlag" class="block_radio" :disabled="pop.activeStatus == 2">
<el-radio :label="0">需要由用户手动关闭，不支持自动关闭</el-radio>
<el-radio :label="1">设置<el-input-number v-model="pop.autoCloseDelay" controls-position="right" :min="1" :max="10" :disabled="pop.activeStatus == 2"></el-input-number>秒 后自动关闭</el-radio>
<el-radio :label="1">设置<el-input-number v-model="pop.autoCloseDelay" controls-position="right" :min="1" :max="10" :disabled="pop.activeStatus == 2" style="width:90px;margin:0 10px 0 9px;"></el-input-number>秒 后自动关闭</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div class="preview">
<div class="displayheader"></div>
<div class="container-content">
<img v-if="pop.putonType === 1" style="width: 70%;" :src="pop.popupImageDetails.imageUrl" />
<div v-else style="width:80%;margin:0 auto;display:flex;flex-direction: column;">
<div class="card-item" style="width:100%" v-for="(item, cardIndex) in pop.popupCouponDetails.couponList" :key="cardIndex">
<div v-else style="width:80%;margin:0 auto;display:flex;flex-direction: column;align-items:center;">
<div class="card-item" style="width:90%" v-for="(item, cardIndex) in pop.popupCouponDetails.couponList" :key="cardIndex">
<div class="left">
<p class="type">{{ item.cardType === 0 ? '抵金券' : item.cardType === 1 ? '折扣券' : '兑换券' }}</p>
<p class="line"></p>
......@@ -150,9 +149,9 @@
</el-radio-group>
<el-button slot="reference" round type="primary" :style="'color:#ffffff;border-color: ' + btnColor[pop.sortNum] + ';' + 'background-color:' + btnColor[pop.sortNum] + ';'">{{ sortOptions[pop.sortNum] }}</el-button>
</el-popover>
<p class="tip">点击设置弹窗优先级，当用户命中同一页面多个弹窗时，按优先级顺序弹出一个即停止</p>
<p class="tip" style="font-size:12px;cursor:default;">点击设置弹窗优先级，当用户命中同一页面多个弹窗时，按优先级顺序弹出一个即停止</p>
<i class="sort_line"></i>
<el-button type="info" round style="background: #F0F5FF;color:#909399;border: 0;" :disabled="pop.activeStatus == 2" @click="detelePop(elIndex)">删除</el-button>
<el-button type="info" round class="delete_btn" :disabled="pop.activeStatus == 2" @click="detelePop(elIndex)">删除</el-button>
<i class="sort_line"></i>
</div>
</div>
......@@ -160,9 +159,11 @@
<i class="iconfont icon-jia"></i>
<p>还可添加{{ surplus }}个弹窗</p>
</div>
<el-button @click="submit">{{ group.id ? '保持' : '确认新建' }}</el-button>
</el-form>
</div>
<div class="bottomBtn">
<el-button @click="$router.go(-1)">取消</el-button> <el-button type="primary" @click="submit">{{ group.id ? '保存' : '确认新建' }}</el-button>
</div>
</section>
</template>
<script>
......@@ -621,7 +622,8 @@ export default {
if (val) {
const hasChoose = couponList.some(coupon => coupon.coupCardId === val.coupCardId);
if (!hasChoose) {
couponList.push({ coupCardId: val.coupCardId, cardType: val.cardType, cardName: val.cardName });
couponList.push({ ...val });
// couponList.push({ coupCardId: val.coupCardId, cardType: val.cardType, cardName: val.cardName });
pop.showCardDialog = false;
} else {
this.$tips({ type: 'warning', message: '卡券已存在' });
......@@ -725,6 +727,7 @@ export default {
color: #909399;
background: #f5f7fa;
border-radius: 6px;
cursor: pointer;
.iconfont {
margin-bottom: 16px;
font-size: 15px;
......@@ -733,6 +736,12 @@ export default {
color: #909399;
line-height: 20px;
}
&:hover {
background: #f0f5ff;
.icon-jia {
color: #1890ff;
}
}
}
.popBox {
display: flex;
......@@ -924,36 +933,60 @@ export default {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 300px;
height: 500px;
width: 262px;
height: 530px;
margin: 0px auto 20px;
background: #f0f2f5;
border: 1px solid #e3e5e9;
border-radius: 30px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
.displayheader {
width: 100%;
height: 70px;
line-height: 80px;
font-weight: bold;
background: #fff;
background-image: url('../../../static/img/navbar.png');
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
}
background-image: url('./assets/img/popPreviewBg.png');
background-repeat: no-repeat;
background-size: contain;
.container-content {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 90px;
padding-top: 150px;
.card-item {
margin-bottom: 0;
.type {
font-size: 14px;
width: 70px;
}
.info {
font-size: 12px;
}
}
}
}
.select-page {
width: 45%;
}
.bottomBtn {
position: fixed;
bottom: 0;
right: 0;
display: flex;
z-index: 99;
justify-content: center;
align-items: center;
height: 60px;
width: 100%;
background: #ffffff;
}
.delete_btn {
background: #f0f5ff;
color: #909399;
border: 0;
}
.delete_btn.is-disabled:hover {
background: #f0f5ff;
color: #909399;
border: 0;
}
.delete_btn:not(.is-disabled):hover {
background: #fff1f0;
color: #ff555e;
}
</style>
<style lang="scss">
.pop_dm_upload_file .file-item-content .file-success,
......@@ -986,4 +1019,10 @@ export default {
.pop_sort_popover .is-checked .el-radio__label i {
opacity: 1 !important;
}
.pop-form .el-radio-group .is-checked .el-radio__label {
color: #606266;
}
.pop-form .el-form .is-success .el-input__inner {
border: 1px solid #dcdfe6;
}
</style>
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