Skip to content

X
x-training-new
提交 0c7726fc authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 656e519a
显示空白字符变更
内嵌 并排
正在显示 包含 214 行增加 和 35 行删除
src/components/base/EditStyle.vue
浏览文件 @ 0c7726fc
......@@ -6,7 +6,13 @@
<div :class="returnData.show === false ? 'active btn' : 'btn'" @click="handleDom">
点击{{ returnData.show || returnData.show === undefined ? '创建' : '删除' }}{{ subTitle }}
</div>
<el-input :maxlength="valueMaxLength" v-if="returnData.show === false" style="margin-top: 15px" v-model="returnData.textValue" placeholder="请输入"></el-input>
<el-input
:maxlength="valueMaxLength"
v-if="returnData.show === false"
style="margin-top: 15px"
v-model="returnData.textValue"
placeholder="请输入"
></el-input>
</div>
<div class="tool-select">
<div v-for="(item, index) in toolList" :key="index">
......@@ -65,7 +71,14 @@ export default {
// 一组数据的话工具框的下标
toolIndex: { type: Number, default: 0 },
// 输入框最多输入的长度
valueMaxLength: { type: Number, default: 10 }
valueMaxLength: { type: Number, default: 10 },
// 回显的数据
echoData: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
......@@ -75,8 +88,10 @@ export default {
returnData: {}
}
},
created() {
mounted() {
this.returnData = this.echoData
this.setToolData()
// this.returnData = this.echoData
},
methods: {
// 拖拽的dom 通过此方法显示隐藏
......@@ -148,7 +163,8 @@ export default {
a.push(`${b.styleName}: ${b.value};`)
return a
}, [])
.join().replace(/,/g, '')
.join()
.replace(/,/g, '')
},
// 设置option值
setOption(min, max, count, symbol = '') {
......
src/modules/market-tools/components/mail/MailStepFour.vue 0 → 100644
浏览文件 @ 0c7726fc
<template>
<div class="four-box">
<div class="card">
<div class="title">个人属性</div>
<div class="ul-list">
<div class="li">
<div class="icon"></div>
<div class="text">年龄 等于 20-30</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.four-box{
.card{
background: rgba(250, 250, 250, 0.39);
border: 1px solid #E8E8E8;
border-radius: 16px;
margin-bottom: 20px;
padding: 20px;
.title{
font-size: 18px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
.ul-list{
padding-top: 20px;
.li{
display: flex;
align-items: center;
margin-bottom: 15px;
.icon{
width: 6px;
height: 6px;
background: rgba(73, 187, 162, 0.39);
border-radius: 50%;
}
.text{
font-size: 16px;
line-height: 100%;
color: #666666;
margin-left: 10px;
}
}
}
}
}
</style>
src/modules/market-tools/components/mail/MailStepThree.vue
浏览文件 @ 0c7726fc
<template>
<div class="mail-three-box">
<div class="content-left">
<edit-style v-for="(item, index) in toolList" :key="index" v-bind="item" @data="setTitleData" :toolIndex="index"></edit-style>
<template v-if="showFlag">
<edit-style
v-for="(item, index) in toolList"
:key="index"
v-bind="item"
@data="setStyleData"
:toolIndex="index"
></edit-style>
<div class="upload-img">
<div class="btn">上传图片</div>
<UploadImage class="upload" style="width:50px" v-model="imgParams.url" @input="uploadImg"></UploadImage>
<UploadImage class="upload" style="width: 50px" v-model="imgParams.url" @input="uploadImg"></UploadImage>
</div>
</template>
</div>
<div class="content-right">
<div class="card-dom" id="max">
<div id="title" v-show="titleParams.show == false" :style="titleParams.style" class="title">{{ titleParams.textValue || '请输入' }}</div>
<div id="describe" v-show="describeParams.show == false" :style="describeParams.style" class="describe">{{ describeParams.textValue || '请输入' }}</div>
<div id="btn" v-show="btnParams.show == false" :style="btnParams.style" class="btn">{{ btnParams.textValue || '请输入' }}</div>
<div v-if="imgParams.url" id="uploadImg" :style="`background:url(${imgParams.url});background-size:cover;`" class="img" />
<div id="title" v-show="titleParams.show == false" :style="titleParams.style" class="title">
{{ titleParams.textValue || '请输入' }}
</div>
<div id="describe" v-show="describeParams.show == false" :style="describeParams.style" class="describe">
{{ describeParams.textValue || '请输入' }}
</div>
<div id="btn" v-show="btnParams.show == false" :style="btnParams.style" class="btn">
{{ btnParams.textValue || '请输入' }}
</div>
<div
v-if="imgParams.url"
id="uploadImg"
:style="`background:url(${imgParams.url});background-size:cover;`"
class="img"
/>
</div>
<!-- <div @click="makePreview">点击生成预览</div> -->
</div>
</div>
</template>
......@@ -25,15 +43,17 @@ import drag from '@/utils/drag.js'
import EditStyle from '@/components/base/EditStyle.vue'
export default {
components: { EditStyle, UploadImage },
props: ['data'],
data() {
return {
showFlag: false,
imgParams: { url: '' },
titleParams: {},
describeParams: {},
btnParams: {},
textarea1: '',
toolList: [
{
dataFlag: 'titleParams',
title: '邮件标题',
subTitle: '标题栏',
tool: [
......@@ -44,6 +64,7 @@ export default {
]
},
{
dataFlag: 'describeParams',
title: '邮件内容',
subTitle: '内容栏',
tool: [
......@@ -55,6 +76,7 @@ export default {
valueMaxLength: 50
},
{
dataFlag: 'btnParams',
title: '按钮',
subTitle: '按钮',
tool: [
......@@ -67,12 +89,71 @@ export default {
]
}
]
// tool: ['fontSize', 'fontColor', 'fontLineH', 'fontFamily', 'borderRadius', 'bgColor', 'fontPosition']
}
},
created() {
},
mounted() {
if (!Array.isArray(this.data)) {
this.dataEcho()
} else {
this.showFlag = true
}
},
methods: {
// 数据回显
dataEcho() {
this.titleParams = this.data.titleParams
this.imgParams = this.data.imgParams
this.describeParams = this.data.describeParams
this.btnParams = this.data.btnParams
this.toolList.map(item => {
item.echoData = Object.assign({}, this.data[item.dataFlag])
delete item.echoData.originalData
item.tool = this.data[item.dataFlag].originalData
return item
})
this.$nextTick(() => {
const imgDom = document.querySelector('#uploadImg')
const imgPosition = this.data.imgParams.position
if (imgPosition) {
imgDom.style.top = imgPosition.top + 'px'
imgDom.style.left = imgPosition.left + 'px'
}
drag(imgDom, document.querySelector('#max'), res => {
this.imgParams.position = res
})
const titleDom = document.querySelector('#title')
const titlePosition = this.data.titleParams.position
if (titlePosition) {
titleDom.style.top = titlePosition.top + 'px'
titleDom.style.left = titlePosition.left + 'px'
}
drag(titleDom, document.querySelector('#max'), res => {
this.imgParams.position = res
})
const describeDom = document.querySelector('#describe')
const describePosition = this.data.describeParams.position
if (describePosition) {
describeDom.style.top = describePosition.top + 'px'
describeDom.style.left = describePosition.left + 'px'
}
drag(describeDom, document.querySelector('#max'), res => {
this.imgParams.position = res
})
const btnDom = document.querySelector('#btn')
const btnPosition = this.data.btnParams.position
if (btnPosition) {
btnDom.style.top = btnPosition.top + 'px'
btnDom.style.left = btnPosition.left + 'px'
}
drag(btnDom, document.querySelector('#max'), res => {
this.imgParams.position = res
})
this.showFlag = true
})
},
// 传回父组件需要提交缓存的数据
makePreview() {
const params = {
titleParams: this.titleParams,
......@@ -80,20 +161,33 @@ export default {
describeParams: this.describeParams,
btnParams: this.btnParams
}
console.log(params)
console.log(params, 'params')
for (const data in params) {
if (params[data].show !== false) {
this.$message({
message: '请编辑主题',
type: 'warning'
})
return false
}
}
return params
},
// 上传图片
uploadImg() {
this.$nextTick(() => {
console.log(111, 222)
drag(document.querySelector('#uploadImg'), document.querySelector('#max'), function(res) {
this.imgParams.show = false
drag(document.querySelector('#uploadImg'), document.querySelector('#max'), res => {
this.imgParams.position = res
})
})
},
setTitleData(data) {
// 设置样式 组合数据
setStyleData(data) {
switch (data.toolIndex) {
case 0:
this.titleParams = data
console.log(this.titleParams.originalData, '12212112')
this.$nextTick(() => {
drag(document.querySelector('#title'), document.querySelector('#max'), res => {
this.titleParams.position = res
......@@ -117,7 +211,6 @@ export default {
})
break
}
console.log(data)
}
}
}
......@@ -125,32 +218,33 @@ export default {
<style lang="scss" scoped>
.mail-three-box {
margin-bottom: 20px;
display: flex;
.content-left {
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
padding: 30px 30px 0;
.upload-img{
.upload-img {
position: relative;
.btn{
.btn {
width: 321px;
height: 40px;
background: rgba(237, 245, 243, 0.39);
border: 1px solid #80D6C4;
border: 1px solid #80d6c4;
border-radius: 8px;
font-size: 14px;
line-height: 40px;
color: #49BBA2;
color: #49bba2;
cursor: pointer;
text-align: center;
}
.upload{
.upload {
position: absolute;
top:0;
left:0;
top: 0;
left: 0;
opacity: 0.00001;
::v-deep{
.el-upload{
::v-deep {
.el-upload {
width: 320px;
height: 40px;
}
......
src/modules/market-tools/views/Mail.vue
浏览文件 @ 0c7726fc
......@@ -2,7 +2,7 @@
<div>
<ToolCard class="main_content">
<Step :activeStep="activeStep" class="pt50-pl60" />
<div>
<div style="flex:1;">
<MailStepOne
v-if="activeStep === 0"
class="pt-50"
......@@ -19,7 +19,8 @@
@getTime="getTime"
ref="mailStepTwo"
/>
<MailStepThree v-if="activeStep === 2" />
<MailStepThree :data="stepThreeData" ref="mailStepThree" v-if="activeStep === 2" />
<MailStepFour class="step-four" v-if="activeStep === 3"></MailStepFour>
<div class="main_content_btn">
<div class="step_prev step_btn" @click="handlePrev" v-if="activeStep > 0">上一步</div>
<div class="step_next step_btn" @click="handleNext" v-if="activeStep >= 0 && activeStep < 2">下一步</div>
......@@ -40,19 +41,22 @@ import MailStepOne from '../components/mail/MailStepOne.vue'
import Step from '@/components/base/Step.vue'
import MailStepTwo from '../components/mail/MailStepTwo.vue'
import MailStepThree from '../components/mail/MailStepThree.vue'
import MailStepFour from '../components/mail/MailStepFour.vue'
export default {
components: {
ToolCard,
MailStepOne,
Step,
MailStepTwo,
MailStepThree
MailStepThree,
MailStepFour
},
data() {
return {
activeStep: 0,
stepOneList: [],
stepTwoList: [],
stepThreeData: {},
time: '',
caseId: '',
times: '',
......@@ -69,7 +73,8 @@ export default {
},
// 上一步
handlePrev() {
this.handleStep(2)
this.activeStep--
// this.handleStep(2)
},
// 下一步
handleNext() {
......@@ -93,13 +98,14 @@ export default {
commit_report: [
{ stepOneList: this.stepOneList },
{ form: this.stepTwoList },
{ time: this.time, time2: this.time2 }
{ time: this.time, time2: this.time2 },
{ stepThreeData: this.stepThreeData }
]
}
cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
this.caseId = res.data.id
if (val === 2) {
this.activeStep--
this.activeStep++
} else {
this.activeStep++
}
......@@ -107,7 +113,8 @@ export default {
},
// 预览
handlePreview() {
this.activeStep++
this.stepThreeData = this.$refs.mailStepThree.makePreview()
this.handleStep(2)
},
handlePlan() {},
// 获取步骤信息回显
......@@ -133,6 +140,8 @@ export default {
this.stepTwoList = answerList[0].answer.commit_report[1].form || stepTwo
this.time = answerList[0].answer.commit_report[2].time || this.times
this.time2 = answerList[0].answer.commit_report[2].time2 || this.times2
this.stepThreeData = answerList[0].answer.commit_report[3].stepThreeData || {}
console.log(this.stepThreeData, '213')
} else {
this.initStepList()
}
......@@ -154,7 +163,6 @@ export default {
if (this.$route.query.type) {
this.getReportDetail(this.$route.query.id)
} else {
// this.initStepList()
this.checkRecord()
}
}
......@@ -203,4 +211,10 @@ export default {
.pt-50 {
padding-top: 50px;
}
.step-four {
padding: 42px 35px;
flex: 1;
border-left: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论