Skip to content

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

3.1开发

上级 b972bc92
隐藏空白字符变更
内嵌 并排
正在显示 包含 4512 行增加 和 399 行删除
package-lock.json
浏览文件 @ daad3b2f
...@@ -3552,12 +3552,11 @@ ...@@ -3552,12 +3552,11 @@
} }
}, },
"dom7": { "dom7": {
"version": "3.0.0", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz", "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==", "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"dev": true,
"requires": { "requires": {
"ssr-window": "^3.0.0-alpha.1" "ssr-window": "^2.0.0"
} }
}, },
"domain-browser": { "domain-browser": {
...@@ -11425,10 +11424,9 @@ ...@@ -11425,10 +11424,9 @@
} }
}, },
"ssr-window": { "ssr-window": {
"version": "3.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz", "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==", "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
"dev": true
}, },
"ssri": { "ssri": {
"version": "6.0.1", "version": "6.0.1",
...@@ -11696,13 +11694,12 @@ ...@@ -11696,13 +11694,12 @@
} }
}, },
"swiper": { "swiper": {
"version": "6.4.11", "version": "5.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-6.4.11.tgz", "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
"integrity": "sha512-AtOotOxvGBlYddJa7s1wzdh7/BAyfJq9h8q/JKgI2X9UrSx87YAOSfnM5j2UifYbvETmR6qhivGFew6kogA8Yw==", "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
"dev": true,
"requires": { "requires": {
"dom7": "^3.0.0", "dom7": "^2.1.5",
"ssr-window": "^3.0.0" "ssr-window": "^2.0.0"
} }
}, },
"table": { "table": {
...@@ -12437,6 +12434,11 @@ ...@@ -12437,6 +12434,11 @@
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz", "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz",
"integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM=" "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
}, },
"vue-awesome-swiper": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
},
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "7.1.1", "version": "7.1.1",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.1.tgz?cache=0&sync_timestamp=1602499032728&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.1.tgz", "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.1.tgz?cache=0&sync_timestamp=1602499032728&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.1.tgz",
......
package.json
浏览文件 @ daad3b2f
...@@ -66,7 +66,6 @@ ...@@ -66,7 +66,6 @@
"sass-loader": "^10.0.3", "sass-loader": "^10.0.3",
"semver": "^1.1.4", "semver": "^1.1.4",
"style-loader": "^2.0.0", "style-loader": "^2.0.0",
"swiper": "^6.4.11",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"vconsole-webpack-plugin": "^1.5.2", "vconsole-webpack-plugin": "^1.5.2",
"webpack": "^4.44.2", "webpack": "^4.44.2",
...@@ -85,6 +84,8 @@ ...@@ -85,6 +84,8 @@
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"vue": "^2.6.12", "vue": "^2.6.12",
"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.22.0", "vue-i18n": "^8.22.0",
"vue-loader": "^15.9.3", "vue-loader": "^15.9.3",
"vue-meta-info": "^0.1.7", "vue-meta-info": "^0.1.7",
......
src/components/AppContainer.vue
浏览文件 @ daad3b2f
...@@ -24,8 +24,8 @@ export default { ...@@ -24,8 +24,8 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
padding: 16px; // padding: 16px;
background-color: #fff; // background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
} }
.app-container-hd { .app-container-hd {
......
src/components/layout/header.vue
浏览文件 @ daad3b2f
<template> <template>
<div class="app-header"> <div class="app-header">
<div class="title"> <div class="left-content">
<div class="bg-image">
<div class="left-img"></div>
<div class="center-img"></div>
<div class="right-img"></div>
</div>
<div class="title"></div>
<ul class="aside-btn">
<template v-for="(item, index) in aside">
<template v-if="item.type">
<a :href="item.path" :key="index">
<li :class="$route.path === item.path && 'active'">{{ item.name }}</li>
</a>
</template>
<template v-else>
<router-link :to="item.path" :key="index">
<li :key="index" :class="item.path !== '/ranking' ? 'active' : $route.path === item.path && 'active'">{{ item.name }}</li>
</router-link>
</template>
</template>
</ul>
<div class="user">
<router-link to="/account/password">修改密码</router-link>
<span @click="logout">退出登录</span>
</div>
</div>
<div class="right-content">
<div class="time">{{ time }}</div>
</div>
<!-- <div class="title">
<router-link to="/">{{ title }}</router-link> <router-link to="/">{{ title }}</router-link>
</div> </div>
<div class="nav-box"> <div class="nav-box">
...@@ -8,18 +37,15 @@ ...@@ -8,18 +37,15 @@
<div class="nav-btn" @click="goPage()">课程</div> <div class="nav-btn" @click="goPage()">课程</div>
</div> </div>
<div class="tool"> <div class="tool">
<!-- <nav class="nav">
<router-link to="/">首页</router-link>
</nav> -->
<div class="user"> <div class="user">
<div class="user-tools"> <div class="user-tools">
<router-link to="/account/password">修改密码</router-link> <router-link to="/account/password">修改密码</router-link>
<span @click="logout">退出登录</span> <span @click="logout">退出登录</span>
</div> </div>
<div class="user-avatar"><img :src="avatar" /></div> <div class="user-avatar "><img :src="avatar" /></div>
<div class="user-name">{{ user.nickname }}</div> <div class="user-name">{{ user.nickname }}</div>
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
...@@ -30,7 +56,23 @@ export default { ...@@ -30,7 +56,23 @@ export default {
name: 'AppHeader', name: 'AppHeader',
data() { data() {
return { return {
title: '金融产品数字化营销实训系统' title: '金融产品数字化营销实训系统',
time: '00: 00: 00',
aside: [
{
name: '实训',
path: '/explain'
},
{
name: '课程',
path: 'https://x-learning.ezijing.com/',
type: 1
},
{
name: '排行榜',
path: '/ranking'
}
]
} }
}, },
computed: { computed: {
...@@ -41,6 +83,11 @@ export default { ...@@ -41,6 +83,11 @@ export default {
return this.user.avatar || defaultAvatar return this.user.avatar || defaultAvatar
} }
}, },
created() {
setInterval(() => {
this.time = this.getCurrentTime()
}, 1000)
},
methods: { methods: {
// 退出登录 // 退出登录
logout() { logout() {
...@@ -51,82 +98,206 @@ export default { ...@@ -51,82 +98,206 @@ export default {
}, },
goPage() { goPage() {
window.open('https://x-learning.ezijing.com/') window.open('https://x-learning.ezijing.com/')
},
getCurrentTime() {
const date = new Date()
const year = date.getFullYear()
const mon = date.getMonth() + 1
const da = date.getDate()
const h = date.getHours()
const m = date.getMinutes()
const s = date.getSeconds()
return `${year}.${this.toDo(mon)}.${this.toDo(da)} ${this.toDo(h)}：${this.toDo(m)}：${this.toDo(s)}`
},
toDo(n) {
const num = parseInt(n)
return num < 10 ? `0${num}` : num
} }
} }
} }
</script> </script>
<style lang="scss" > <style lang="scss">
.app-header { .app-header {
position: absolute;
top: 0;
left: 0;
height: 80px;
z-index: 99999;
box-sizing: border-box;
width: 100%;
padding: 9px 0 0 15px;
display: flex; display: flex;
align-items: center; .left-content{
// justify-content: space-between; transform: translateX(7px);
height: 56px; flex: 1;
padding: 0 30px; position: relative;
color: #fff;
background: url(https://zws-imgs-pub.ezijing.com/static/public/08a0582bed60e67b08e9311306a6fb34.png), linear-gradient(47deg, #C01540 0%, #C01540 7%, rgba(192, 21, 64, 0.76) 26%, rgba(192, 21, 64, 0.58) 66%, #C01540 100%);
background-size: cover;
box-shadow: 0px 0px 22px 0px #f8f9fb;
.tool {
margin-left: auto;
display: flex; display: flex;
align-items: center; .user{
} margin-left: auto;
line-height: 76px;
.title { display: flex;
font-size: 20px; font-size: 14px;
color: currentColor; font-weight: normal;
} color: #51D2FF;
span{
.nav { margin-left: 18px;
margin-left: 30px; margin-right: 45px;
color: currentColor; cursor: pointer;
a { }
padding: 0 20px;
} }
} .bg-image{
.user {
display: flex;
align-items: center;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
margin-right: 8px;
img {
width: 100%; width: 100%;
height: 100%; position: absolute;
object-fit: cover; top: 3px;
left: 0;
z-index: -1;
display: flex;
.left-img{
width: 193px;
height: 69px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/df8e6eb9a0faaeda66c36ecf0521ec24.png);
background-size: 100% 100%;
margin-top: 11.5px;
}
.center-img{
flex: 1;
height: 76px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/ad29787835215a6d0be4e28b2e2f0d28.png);
background-size: 100% 100%;
}
.right-img{
// -webkit-transform: translateX(15px);
width: 45px;
height: 63px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/8a074c457167a9fc9712174611f94402.png);
background-size: 100% 100%;
margin-top: 7px;
}
} }
} .title{
.user-tools { width: 308px;
padding: 32px 0; height: 46px;
span { background: url(https://zws-imgs-pub.ezijing.com/static/public/d711e945c5440ffa6e67a495ac9a97fd.png);
color: currentColor; background-size: 100% 100%;
padding: 0 16px; margin-top: 19px;
cursor: pointer; margin-left: 61px;
// opacity: 0.3;
}
.aside-btn{
display: flex;
padding-top: 20px;
height: 43px;
li{
cursor: pointer;
width: 112px;
height: 43px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/6570a068ba2bc77019d2c79dc7ffd64e.png);
background-size: 100% 100%;
font-size: 16px;
color: #8BA9FF;
line-height: 43px;
text-align: center;
margin-left: 10px;
&.active{
background: url(https://zws-imgs-pub.ezijing.com/static/public/3717f3b47395b1fd21cd2a68c73c2c46.png);
background-size: 100% 100%;
color: rgba(0, 238, 255, 1);
}
}
} }
// height: 82px;
// background: url(https://zws-imgs-pub.ezijing.com/static/public/df8e6eb9a0faaeda66c36ecf0521ec24.png);
// background-size: 100% 100%;
} }
} .right-content{
.nav-box{ transform: translateX(-8px);
display: flex; width: 289px;
margin-left: 156px; height: 114px;
.nav-btn{ background: url(https://zws-imgs-pub.ezijing.com/static/public/6ff9b69171c830e63807d150cc6a3539.png);
width: 136px; background-size: 100% 100%;
height: 56px; margin-left: auto;
font-size: 16px; .time{
color: #FFFFFF; font-size: 13px;
line-height: 56px; color: #00CCFF;
text-align: center; padding-top: 33px;
cursor: pointer; padding-left: 60px;
&.active{
color: #C01540;
background: #FFFFFF;
} }
} }
} }
// .app-header {
// position: absolute;
// top: 0;
// left: 0;
// display: flex;
// align-items: center;
// // justify-content: space-between;
// height: 56px;
// padding: 0 30px;
// color: #fff;
// background: url(https://zws-imgs-pub.ezijing.com/static/public/08a0582bed60e67b08e9311306a6fb34.png), linear-gradient(47deg, #C01540 0%, #C01540 7%, rgba(192, 21, 64, 0.76) 26%, rgba(192, 21, 64, 0.58) 66%, #C01540 100%);
// background-size: cover;
// box-shadow: 0px 0px 22px 0px #f8f9fb;
// .tool {
// margin-left: auto;
// display: flex;
// align-items: center;
// }
// .title {
// font-size: 20px;
// color: currentColor;
// }
// .nav {
// margin-left: 30px;
// color: currentColor;
// a {
// padding: 0 20px;
// }
// }
// .user {
// display: flex;
// align-items: center;
// }
// .user-avatar {
// width: 32px;
// height: 32px;
// border-radius: 50%;
// overflow: hidden;
// margin-right: 8px;
// img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// }
// }
// .user-tools {
// padding: 32px 0;
// span {
// color: currentColor;
// padding: 0 16px;
// cursor: pointer;
// }
// }
// }
// .nav-box{
// display: flex;
// margin-left: 156px;
// .nav-btn{
// width: 136px;
// height: 56px;
// font-size: 16px;
// color: #FFFFFF;
// line-height: 56px;
// text-align: center;
// cursor: pointer;
// &.active{
// color: #C01540;
// background: #FFFFFF;
// }
// }
// }
</style> </style>
src/components/layout/index.vue
浏览文件 @ daad3b2f
<template> <template>
<div class="app-layout"> <div class="app-layout">
<app-header /> <app-header />
<div class="app-layout-bd"> <div :class="$route.path === '/explain' ? 'app-layout-bd' : 'app-layout-bd bg-imgs'">
<!-- <app-aside v-bind="$attrs" v-if="showAside" /> --> <!-- <app-aside v-bind="$attrs" v-if="showAside" /> -->
<app-main /> <app-main />
</div> </div>
...@@ -27,7 +27,12 @@ export default { ...@@ -27,7 +27,12 @@ export default {
.app-layout-bd { .app-layout-bd {
flex: 1; flex: 1;
display: flex; display: flex;
background: url(https://zws-imgs-pub.ezijing.com/static/public/10a4d26b4c39a548294807d0029e82b7.png);
background-size: cover;
&.bg-imgs{
background: url(https://zws-imgs-pub.ezijing.com/static/public/974768045ca236ce291ccee128bd884d.png);
background-size: cover;
}
.app-main { .app-main {
flex: 1; flex: 1;
} }
......
src/components/layout/main.vue
浏览文件 @ daad3b2f
...@@ -10,6 +10,8 @@ export default {} ...@@ -10,6 +10,8 @@ export default {}
<style lang="scss"> <style lang="scss">
.app-main { .app-main {
padding: 16px; padding: 90px 20px 0 20px;
// padding-top: 90px;
box-sizing: border-box;
} }
</style> </style>
src/pages/home/explain.vue
浏览文件 @ daad3b2f
<template> <template>
<app-container> <app-container>
<div class="explain-box"> <div class="explain-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/acedc1ee27267ef5d154cdc6af16413b.png" alt=""> <!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/acedc1ee27267ef5d154cdc6af16413b.png" alt=""> -->
<div class="content"> <div class="new-edit">
<div class="title">实训说明</div> <div class="content">
<div class="tit-h2">欢迎来到《金融产品数字化营销》实训系统！</div> <div class="title"></div>
<div class="doce"> <!-- <div class="tit-h2">欢迎来到《金融产品数字化营销》实训系统！</div> -->
<p>紫荆教育作为金融领域在线教育行业的领军企业，我们调研了数百家合作金融机构，深知目前行业中缺乏高端营销人才。而在金融产品营销人才培养的课程体系中，除了技术和理论课程，迫切需要通过实训环节使学生对金融产品数字化营销的特点和应用领域有更直观和感性的认知，在实践中巩固所学知识，学以致用，才能真正达到金融机构对数字化营销人才的要求。为此我们基于《金融产品数字化营销》初、中、高级的理论课程内容，结合真实市场环境中不同金融产品的营销场景，开发此实训系统，旨在为学生提供系统化、模块化、流程化的模拟金融产品营销实践的平台，熟悉不同营销手段的具体实施过程。</p> <div class="doce">
<p>学生可通过手机、平板、电脑等多种终端登录。此实训系统容纳目前市场上十余种普遍使用的营销手段，可实现同一案例多次操作，实训过程和结果评估和反馈，多用户实训效果排名等功能。希望学生们能通过实训系统的反复练习，提升营销技能，真正掌握《金融产品数字化营销》这门课程的内容。</p> <p>紫荆教育作为金融领域在线教育行业的领军企业，我们调研了数百家合作金融机构，深知目前行业中缺乏高端营销人才。而在金融产品营销人才培养的课程体系中，除了技术和理论课程，迫切需要通过实训环节使学生对金融产品数字化营销的特点和应用领域有更直观和感性的认知，在实践中巩固所学知识，学以致用，才能真正达到金融机构对数字化营销人才的要求。为此我们基于《金融产品数字化营销》初、中、高级的理论课程内容，结合真实市场环境中不同金融产品的营销场景，开发此实训系统，旨在为学生提供系统化、模块化、流程化的模拟金融产品营销实践的平台，熟悉不同营销手段的具体实施过程。</p>
<!-- <p>学生可通过手机、平板、电脑等多种终端登录。此实训系统容纳目前市场上十余种普遍使用的营销手段，可实现同一案例多次操作，实训过程和结果评估和反馈，多用户实训效果排名等功能。希望学生们能通过实训系统的反复练习，提升营销技能，真正掌握《金融产品数字化营销》这门课程的内容。</p> --> <p>学生可通过手机、平板、电脑等多种终端登录。此实训系统容纳目前市场上十余种普遍使用的营销手段，可实现同一案例多次操作，实训过程和结果评估和反馈，多用户实训效果排名等功能。希望学生们能通过实训系统的反复练习，提升营销技能，真正掌握《金融产品数字化营销》这门课程的内容。</p>
</div> <!-- <p>学生可通过手机、平板、电脑等多种终端登录。此实训系统容纳目前市场上十余种普遍使用的营销手段，可实现同一案例多次操作，实训过程和结果评估和反馈，多用户实训效果排名等功能。希望学生们能通过实训系统的反复练习，提升营销技能，真正掌握《金融产品数字化营销》这门课程的内容。</p> -->
<div class="explain-btn" @click="$router.push({ path: '/index' })"> </div>
<div class="btns">我知道了，进入实训基地</div> <!-- <div class="explain-btn" @click="$router.push({ path: '/index' })">
<div class="btns">我知道了，进入实训基地</div>
</div> -->
</div> </div>
<div class="run-btn" @click="$router.push({ path: '/index' })">进入实训基地</div>
</div> </div>
</div> </div>
</app-container> </app-container>
...@@ -22,6 +25,15 @@ import AppContainer from '@/components/AppContainer' ...@@ -22,6 +25,15 @@ import AppContainer from '@/components/AppContainer'
export default { export default {
components: { components: {
AppContainer AppContainer
},
mounted() {
this.countDomHeight()
},
methods: {
countDomHeight() {
$('.content').css('height', $(window).height() - 250 + 'px')
$('.doce').css('height', $(window).height() - 317 + 'px')
}
} }
} }
</script> </script>
...@@ -30,9 +42,34 @@ export default { ...@@ -30,9 +42,34 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 40px; // padding-top: 40px;
box-sizing: border-box; box-sizing: border-box;
// align-items: center; // align-items: center;
.new-edit{
width: 60%;
padding-top: 37px;
margin-left: auto;
.content{
width: 100%;
background: url(https://zws-imgs-pub.ezijing.com/static/public/aa4834feed58cf0adf11533e59477c15.png);
background-size: 100% 100%;
position: relative;
padding-bottom: 30px;
}
.run-btn{
width: 142px;
height: 39px;
text-align: center;
background: url(https://zws-imgs-pub.ezijing.com/static/public/5d288f32bbe907c39cb8380a5fca085e.png);
background-size: 100% 100%;
font-size: 16px;
font-weight: 500;
color: #71CDF9;
line-height: 39px;
margin: 29px auto 0;
cursor: pointer;
}
}
img{ img{
position: sticky; position: sticky;
top: 0; top: 0;
...@@ -43,11 +80,20 @@ export default { ...@@ -43,11 +80,20 @@ export default {
display: block; display: block;
} }
.title{ .title{
text-align: center; opacity: 0.9;
font-size: 24px; width: 433px;
font-weight: bold; height: 55px;
color: #222222; position: absolute;
line-height: 33px; left: 50%;
top: -10px;
-webkit-transform: translateX(-50%);
background: url(https://zws-imgs-pub.ezijing.com/static/public/c26be4bef4fb8d9c3eb15f946551cac3.png);
background-size: auto 100%;
// text-align: center;
// font-size: 24px;
// font-weight: bold;
// color: #222222;
// line-height: 33px;
} }
.tit-h2{ .tit-h2{
text-align: center; text-align: center;
...@@ -59,11 +105,19 @@ export default { ...@@ -59,11 +105,19 @@ export default {
margin-top: 16px; margin-top: 16px;
} }
.doce{ .doce{
// width: 617px;
transform: translateY(67px);
margin: 0 auto;
padding: 0 60px 37px;
overflow-y: scroll;
box-sizing: border-box;
&::-webkit-scrollbar{
display: none;
}
p{ p{
text-indent: 2em; font-size: 18px;
font-size: 16px; color: #71CDF9;
color: #444444; line-height: 30px;
line-height: 32px;
} }
} }
} }
......
src/pages/home/index.vue
浏览文件 @ daad3b2f
<template> <template>
<app-container class="case-box"> <div class="case-box">
<div class="case-mian"> <div class="div-select">
<ul class="case-tab-btn"> <div class="select-c" @click="divSelect.isShow = !divSelect.isShow">
<span>{{ divSelect.name }}</span>
<div class="icon"></div>
</div>
<ul class="option-box" v-show="divSelect.isShow">
<template v-for="(item, index) in caseData"> <template v-for="(item, index) in caseData">
<li :class="index == caseIndex && 'active'" :key="index" @click="tabCase(index)"> <li @click="tabCase(index)" :class="index == caseIndex && 'active'" :key="index">{{ item.name }}</li>
<div class="icon">
<!-- <img class="icons" v-if="index == 0" src="https://zws-imgs-pub.ezijing.com/static/public/77d9a7c4dba43695e9d984ea06434c70.png" alt=""> -->
<!-- <img class="icons" v-if="index == 1" src="https://zws-imgs-pub.ezijing.com/static/public/13ca8a5ecdbdbfa4c2383c3ad3d8ffca.png" alt=""> -->
<img class="icons" src="https://zws-imgs-pub.ezijing.com/static/public/b15396ce451c816967fee3e94b2f8fb0.png" alt="">
<!-- <img class="iconActive" v-if="index == 0" src="https://zws-imgs-pub.ezijing.com/static/public/f354795ef8bd7a7f3d5317a8745b7398.png" alt=""> -->
<!-- <img class="iconActive" v-if="index == 1" src="https://zws-imgs-pub.ezijing.com/static/public/8329440aa66e4e52520f15d579ab80b4.png" alt=""> -->
<img class="iconActive" src="https://zws-imgs-pub.ezijing.com/static/public/5159de6dbd4cb02b1d4863840fcb8426.png" alt="">
</div>
<div class="text">{{ item.name }}</div>
</li>
</template> </template>
</ul> </ul>
<ul class="module m1"> </div>
<div class="title">请选择您要实训的案例</div> <div class="case-content">
<ul class="case-list"> <swiper ref="mySwiper" :options="swiperOption">
<template v-for="(item, index) in caseItemList"> <template v-for="(item, index) in caseItemList">
<li :key="index" v-if="item" :class="item.caseIsShow && 'active'"> <swiper-slide :key="index">
<div class="card-box"> <div class="slide-item" @click="showItem(item)">
<div class="pop" @click="showItem(item)"> <div class="pot-title">{{ item.name }}</div>
<div class="text">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
<div v-if="!item.caseIsShow" class="caret el-icon-caret-bottom"></div> <ul class="item-sele-list">
<div v-else class="caret el-icon-caret-top"></div>
<div v-if="!item.caseIsShow" class="hover-show">点击展开具体案例</div>
<div v-else class="hover-show">点击收回具体案例</div>
</div>
<img :src="item.url" alt="">
</div>
<div class="select-item" v-if="item.caseIsShow">
<template v-for="(opt, sindex) in item.itemChiData"> <template v-for="(opt, sindex) in item.itemChiData">
<div class="item" :key="sindex+'s'" @click="selectCase(opt)"> <li :key="sindex + 's'">
<div class="name">{{ opt.name }}</div> <div class="cont" @click="selectCase(opt)">
<div class="sele-txt">选择</div> <span>{{ opt.name }}</span>
</div> <div class="sele-btn">选择</div>
</div>
</li>
</template> </template>
</div> </ul>
</li> </div>
</template> </swiper-slide>
</ul> </template>
</ul> </swiper>
<div class="tab-btn">
<div class="left-btn" @click="switchQuestions('left')"></div>
<div class="right-btn" @click="switchQuestions()"></div>
</div>
</div> </div>
</app-container> </div>
</template> </template>
<script> <script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import * as api from '@/api/common.js' import * as api from '@/api/common.js'
import AppContainer from '@/components/AppContainer' import AppContainer from '@/components/AppContainer'
export default { export default {
components: { components: {
AppContainer AppContainer,
Swiper,
SwiperSlide
},
directives: {
swiper: directive
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
}, },
data() { data() {
console.log($('.swiper-container').width())
return { return {
divSelect: {
name: '',
isShow: false
},
caseIndex: 0, caseIndex: 0,
caseData: [], caseData: [],
caseItemList: [] caseItemList: [],
swiperOption: {
slidesPerView: 'auto',
spaceBetween: 79
}
} }
}, },
mounted() { mounted() {
this.getClassifyList() this.getClassifyList()
}, },
methods: { methods: {
switchQuestions(e) {
e === 'left' ? this.swiper.slidePrev() : this.swiper.slideNext()
},
countDomHeight() {
// console.log($(window).height())
$('.slide-item').css('height', $(window).height() - 285 + 'px')
$('.item-sele-list').css('height', $('.slide-item').height() - 44 + 'px')
},
tabCase(n) { tabCase(n) {
this.caseIndex = n this.caseIndex = n
for (let i = 0; i < this.caseData.length; i++) { for (let i = 0; i < this.caseData.length; i++) {
if (i === n) { if (i === n) {
this.caseData[i].children.caseIsShow = false this.divSelect.name = this.caseData[i].name
this.divSelect.isShow = false
// this.caseData[i].children.caseIsShow = false
this.caseItemList = this.caseData[i].children this.caseItemList = this.caseData[i].children
} }
} }
window.sessionStorage.homeTabIndex = n this.$nextTick(() => {
this.countDomHeight()
})
console.log(this.caseItemList)
// window.sessionStorage.homeTabIndex = n
}, },
getClassifyList() { getClassifyList() {
api api
...@@ -98,15 +126,16 @@ export default { ...@@ -98,15 +126,16 @@ export default {
}) })
item.caseIsShow = true item.caseIsShow = true
this.$forceUpdate() this.$forceUpdate()
console.log(this.caseItemList) console.log(this.caseItemList, '=123321')
}) })
.finally(() => { .finally(() => {
}) })
}, },
showItem(item) { showItem(item) {
item.caseIsShow this.GetCaseList(item)
? item.caseIsShow = false // item.caseIsShow
: this.GetCaseList(item) // ? item.caseIsShow = false
// : this.GetCaseList(item)
this.$forceUpdate() this.$forceUpdate()
}, },
selectCase(item) { selectCase(item) {
...@@ -131,175 +160,191 @@ export default { ...@@ -131,175 +160,191 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.case-box{ .case-box{
padding: 0; width: 100%;
.case-mian{ .case-content{
width: 100%; width: 1200px;
height: 100%; margin: 0 auto 0;
display: flex; overflow: hidden;
} ::v-deep .swiper-container{
.case-tab-btn{ width: 100%;
position: relative; // margin: 0 auto;
z-index: 9; .swiper-wrapper{
width: 48px; .swiper-slide{
height: 100%; width: auto !important;
background: #f1f1f1; // width: 329px !important;
li{
cursor: pointer;
width: 48px;
height: 132px;
border-radius: 5px 0 0 5px;
&.active{
background: #fff;
.icon{
.iconActive{
display: block;
}
.icons{
display: none;
}
}
.text{
color: #C01540;
} }
} }
.icon{ }
width: 100%; .slide-item{
height: 21px; width: 329px;
padding-top: 32px; max-height: 385px;
display: flex; background: url(https://zws-imgs-pub.ezijing.com/static/public/d056cf770d8adf5798267f9d9c5cdf18.png);
justify-content: center; background-size: 100% 100%;
img{ position: relative;
width: 20px; margin-top: 30px;
height: 20px; padding-top: 45px;
box-sizing: border-box;
&:hover{
.pot-title{
font-weight: bold;
color: #00EEFF;
} }
.iconActive{ .title{
display: none; font-size: 18px;
font-weight: bold;
color: #00EEFF;
} }
ul{
li{
span{
opacity: 1;
}
}
}
}
.pot-title{
position: absolute;
top: -13px;
left: 13px;
font-size: 18px;
color: #FFFFFF;
} }
.text{ .title{
margin: 11px auto; width: 296px;
width: 14px; height: 44px;
border: 1px solid rgba(0, 143, 253, .4);
margin: 0 auto;
background: rgba(102, 242, 255, .3);
font-size: 14px; font-size: 14px;
color: #666666; color: #71CDF9;
line-height: 18px; line-height: 44px;
text-align: center;
} }
} ul{
} width: 296px;
.module{ margin: 0 auto;
flex: 1; overflow-y: scroll;
padding: 0 40px; &::-webkit-scrollbar{
box-sizing: border-box; display: none;
.title{ // background: rgba(0,0,0,0.1);
font-size: 16px; // transform: translateX(10px);
font-weight: bold;
color: #222222;
line-height: 22px;
line-height: 54px;
border-bottom: 1px solid #eee;
}
.case-list{
padding-top: 16px;
display: flex;
flex-wrap: wrap;
margin-left: -80px;
li{
position: relative;
width: 200px;
height: 240px;
margin-bottom: 16px;
margin-left: 80px;
cursor: pointer;
&.active{
.pop{
background: rgba(180,10,58, 0.5);
}
} }
.card-box{ li{
width: 100%; width: 296px;
height: 100%; height: 52px;
border-bottom: 1px solid rgba(0, 143, 253, .2);
position: relative; position: relative;
img{ text-align: center;
padding-top: 4px;
box-sizing: border-box;
.cont{
width: 100%; width: 100%;
height: 100%; height: 44px;
display:block; &:hover{
} background: rgba(81, 210, 255, .1);
} .sele-btn{
.pop{ font-size: 14px;
position: absolute; color: #00EEFF;
top: 0; opacity: 1;
left: 0; }
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
border-radius: 5px;
&:hover{
background: rgba(0,0,0,0.6);
.hover-show{
display: block;
} }
} }
.hover-show{ span{
display: none; font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
text-align: center;
transform: translate(-50%, -50%);
font-size: 16px;
font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
line-height: 44px;
opacity: 0.8;
} }
.text{ .sele-btn{
position: absolute; position: absolute;
bottom: 14px; top: 0;
left: 16px; right: 0;
width: auto; font-size: 14px;
border-bottom: 2px solid #fff; color: #37A5D9;
font-size: 18px; line-height: 52px;
font-weight: bold; opacity: 0.8;
color: #FFFFFF;
line-height: 25px;
}
.caret{
position: absolute;
bottom: 21px;
right: 16px;
color: #fff;
}
}
.select-item{
width: 200px;
.item{
width: 200px;
height: 44px;
background: #FFFFFF;
box-shadow: 0px 2px 6px 0px rgba(153, 153, 153, 0.2);
border-radius: 4px;
display: flex;
align-items: center;
margin-top: 16px;
padding: 0 12px 0 14px;
box-sizing: border-box;
cursor: pointer; cursor: pointer;
&:hover{
box-shadow: 0px 2px 8px 0px rgba(153, 153, 153, 0.4);
}
.name{
font-size: 16px;
font-weight: bold;
color: #444444;
}
.sele-txt{
font-size: 12px;
font-weight: bold;
color: #999999;
margin-left: auto;
}
} }
} }
} }
} }
.tab-btn{
width: 354px;
display: flex;
margin: 32px auto 0 auto;
.left-btn{
width: 27px;
height: 56px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/ee275aad564180622daaeaf697a21fe0.png);
background-size: 100% 100%;
cursor: pointer;
}
.right-btn{
width: 27px;
height: 56px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/7ac256a75da602d1a68a2f6c8f3625f5.png);
background-size: 100% 100%;
margin-left: auto;
cursor: pointer;
}
}
}
.div-select{
padding-top: 14px;
position: relative;
.select-c{
width: 152px;
height: 63px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/b75a29f2de27a892aa1a5c5af96ba405.png);
background-size: 100% 100%;
display: flex;
align-items: center;
cursor: pointer;
span{
font-size: 19px;
font-weight: bold;
color: #1EE3F3;
margin-left: 70px;
}
.icon{
width: 11px;
height: 6px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/170110ec7e1d9e1b9aa7cc503db2130f.png);
background-size: 100% 100%;
margin-left: 11px;
}
}
.option-box{
position: absolute;
top: 74px;
left: 0;
z-index: 999;
width: 141px;
max-height: 176px;
overflow-y: scroll;
background: #0D416B;
box-shadow: 0px 0px 4px 0px rgba(0, 132, 255, 0.8), 0px 0px 16px 0px rgba(0, 156, 255, 0.31);
margin-left: 5px;
padding-top: 20px;
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
}
li{
width: 100%;
line-height: 100%;
font-size: 19px;
font-weight: bold;
color: #1EE3F3;
opacity: 0.5;
text-align: center;
margin-bottom: 30px;
cursor: pointer;
&.active{
opacity: 1;
}
}
}
} }
} }
</style> </style>
src/pages/home/index3.0.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<app-container class="case-box">
<div class="case-mian">
<ul class="case-tab-btn">
<template v-for="(item, index) in caseData">
<li :class="index == caseIndex && 'active'" :key="index" @click="tabCase(index)">
<div class="icon">
<!-- <img class="icons" v-if="index == 0" src="https://zws-imgs-pub.ezijing.com/static/public/77d9a7c4dba43695e9d984ea06434c70.png" alt=""> -->
<!-- <img class="icons" v-if="index == 1" src="https://zws-imgs-pub.ezijing.com/static/public/13ca8a5ecdbdbfa4c2383c3ad3d8ffca.png" alt=""> -->
<img class="icons" src="https://zws-imgs-pub.ezijing.com/static/public/b15396ce451c816967fee3e94b2f8fb0.png" alt="">
<!-- <img class="iconActive" v-if="index == 0" src="https://zws-imgs-pub.ezijing.com/static/public/f354795ef8bd7a7f3d5317a8745b7398.png" alt=""> -->
<!-- <img class="iconActive" v-if="index == 1" src="https://zws-imgs-pub.ezijing.com/static/public/8329440aa66e4e52520f15d579ab80b4.png" alt=""> -->
<img class="iconActive" src="https://zws-imgs-pub.ezijing.com/static/public/5159de6dbd4cb02b1d4863840fcb8426.png" alt="">
</div>
<div class="text">{{ item.name }}</div>
</li>
</template>
</ul>
<ul class="module m1">
<div class="title">请选择您要实训的案例</div>
<ul class="case-list">
<template v-for="(item, index) in caseItemList">
<li :key="index" v-if="item" :class="item.caseIsShow && 'active'">
<div class="card-box">
<div class="pop" @click="showItem(item)">
<div class="text">{{ item.name }}</div>
<div v-if="!item.caseIsShow" class="caret el-icon-caret-bottom"></div>
<div v-else class="caret el-icon-caret-top"></div>
<div v-if="!item.caseIsShow" class="hover-show">点击展开具体案例</div>
<div v-else class="hover-show">点击收回具体案例</div>
</div>
<img :src="item.url" alt="">
</div>
<div class="select-item" v-if="item.caseIsShow">
<template v-for="(opt, sindex) in item.itemChiData">
<div class="item" :key="sindex+'s'" @click="selectCase(opt)">
<div class="name">{{ opt.name }}</div>
<div class="sele-txt">选择</div>
</div>
</template>
</div>
</li>
</template>
</ul>
</ul>
</div>
</app-container>
</template>
<script>
import * as api from '@/api/common.js'
import AppContainer from '@/components/AppContainer'
export default {
components: {
AppContainer
},
data() {
return {
caseIndex: 0,
caseData: [],
caseItemList: []
}
},
mounted() {
this.getClassifyList()
},
methods: {
tabCase(n) {
this.caseIndex = n
for (let i = 0; i < this.caseData.length; i++) {
if (i === n) {
this.caseData[i].children.caseIsShow = false
this.caseItemList = this.caseData[i].children
}
}
window.sessionStorage.homeTabIndex = n
},
getClassifyList() {
api
.getClassifyList({ tag: 'case' })
.then(response => {
this.caseData = response.data
this.caseItemList = response.data[0].children
if (window.sessionStorage.homeTabIndex) {
this.tabCase(parseInt(window.sessionStorage.homeTabIndex))
}
})
.finally(() => {
})
},
GetCaseList(item) {
api
.newGetCaseList(item.id, { category_id: item.id })
.then(response => {
this.caseItemList.map(items => {
if (items.id === item.id) {
items.itemChiData = Array.isArray(response.data) ? response.data : []
}
})
item.caseIsShow = true
this.$forceUpdate()
console.log(this.caseItemList, '=123321')
})
.finally(() => {
})
},
showItem(item) {
item.caseIsShow
? item.caseIsShow = false
: this.GetCaseList(item)
this.$forceUpdate()
},
selectCase(item) {
window.sessionStorage.caseData = JSON.stringify(item)
const param = {}
param.case_id = item.id
param.characteristic_id = item.characteristics[0].id
api
.clearScore(param)
.then(response => {
if (parseInt(response.code) === 0) {
this.$router.push({
path: '/practice'
})
}
})
.finally(() => {
})
}
}
}
</script>
<style lang="scss" scoped>
.case-box{
padding: 0;
.case-mian{
width: 100%;
height: 100%;
display: flex;
}
.case-tab-btn{
position: relative;
z-index: 9;
width: 48px;
height: 100%;
background: #f1f1f1;
li{
cursor: pointer;
width: 48px;
height: 132px;
border-radius: 5px 0 0 5px;
&.active{
background: #fff;
.icon{
.iconActive{
display: block;
}
.icons{
display: none;
}
}
.text{
color: #C01540;
}
}
.icon{
width: 100%;
height: 21px;
padding-top: 32px;
display: flex;
justify-content: center;
img{
width: 20px;
height: 20px;
}
.iconActive{
display: none;
}
}
.text{
margin: 11px auto;
width: 14px;
font-size: 14px;
color: #666666;
line-height: 18px;
}
}
}
.module{
flex: 1;
padding: 0 40px;
box-sizing: border-box;
.title{
font-size: 16px;
font-weight: bold;
color: #222222;
line-height: 22px;
line-height: 54px;
border-bottom: 1px solid #eee;
}
.case-list{
padding-top: 16px;
display: flex;
flex-wrap: wrap;
margin-left: -80px;
li{
position: relative;
width: 200px;
height: 240px;
margin-bottom: 16px;
margin-left: 80px;
cursor: pointer;
&.active{
.pop{
background: rgba(180,10,58, 0.5);
}
}
.card-box{
width: 100%;
height: 100%;
position: relative;
img{
width: 100%;
height: 100%;
display:block;
}
}
.pop{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
border-radius: 5px;
&:hover{
background: rgba(0,0,0,0.6);
.hover-show{
display: block;
}
}
.hover-show{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
text-align: center;
transform: translate(-50%, -50%);
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
.text{
position: absolute;
bottom: 14px;
left: 16px;
width: auto;
border-bottom: 2px solid #fff;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
line-height: 25px;
}
.caret{
position: absolute;
bottom: 21px;
right: 16px;
color: #fff;
}
}
.select-item{
width: 200px;
.item{
width: 200px;
height: 44px;
background: #FFFFFF;
box-shadow: 0px 2px 6px 0px rgba(153, 153, 153, 0.2);
border-radius: 4px;
display: flex;
align-items: center;
margin-top: 16px;
padding: 0 12px 0 14px;
box-sizing: border-box;
cursor: pointer;
&:hover{
box-shadow: 0px 2px 8px 0px rgba(153, 153, 153, 0.4);
}
.name{
font-size: 16px;
font-weight: bold;
color: #444444;
}
.sele-txt{
font-size: 12px;
font-weight: bold;
color: #999999;
margin-left: auto;
}
}
}
}
}
}
}
</style>
src/pages/practice/components/copy/practice1.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div class="practice-box">
<div class="item-left">
<div class="heads">
<div class="text">
设计和开展营销活动的基础和必要前提是熟悉各种金融产品特性和关键信息。请首先阅读此案例中产品的相关说明书、合同、产品概要、业务规则或其他信息，并在页面下方的产品分析环节，依次回答各金融产品的关键信息。
</div>
<div class="downs" @click="goPage(data.accessory)">产品说明书下载</div>
</div>
<div class="content-box">
<div class="title pdf-get-height">产品说明书</div>
<!-- <div class="tit-h2">序言</div> -->
<div class="text pdf-height embed-height"><embed class="embed" width="100%" height="100%" :src="data.accessory" /></div>
</div>
</div>
<div class="item-right">
<ul class="tab-btn">
<template v-for="(item, index) in tabBtnText">
<li @click="tabChange(index)" :class="index == tabIndex && 'active'" :key="index">{{ item }}</li>
</template>
</ul>
<div class="form" v-if="Object.keys(formData).length">
<ul class="setHeight" v-if="tabIndex == 0">
<template v-for="(item, index) in formData.production_detail">
<li :key="'p'+index">
<div class="name">{{ item.name }}</div>
<el-input v-model="formData.production_detail[index].content" placeholder="请输入内容"></el-input>
</li>
</template>
</ul>
<ul class="setHeight" v-if="tabIndex == 1">
<template v-for="(item, index) in formData.fund_detail">
<li :key="'pd'+index">
<div class="name">{{ item.name }}</div>
<el-input v-model="formData.fund_detail[index].content" placeholder="请输入内容"></el-input>
</li>
</template>
</ul>
<ul class="setHeight" v-if="tabIndex == 2">
<template v-for="(item, index) in formData.invest_detail">
<li :key="'pdd'+index">
<div class="name">{{ item.name }}</div>
<el-input v-model="formData.invest_detail[index].content" placeholder="请输入内容"></el-input>
</li>
</template>
</ul>
</div>
<div class="next-btnnext-btn">
<div class="border">
<div class="btn" @click="confirm">确定并进入下一步</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
dataParam: {
type: Object
}
},
data() {
return {
data: {},
input: '',
tabIndex: 0,
tabBtnText: ['产品概括', '基金投资与净值表现', '投资本基金涉及的费用'],
formData: {}
}
},
created() {
const caseStorageData = JSON.parse(window.sessionStorage.caseData)
this.data = caseStorageData
this.formData.production_detail = caseStorageData.production_detail.map(item => {
item.content = ''
return item
})
this.formData.fund_detail = caseStorageData.fund_detail.map(item => {
item.content = ''
return item
})
this.formData.invest_detail = caseStorageData.invest_detail.map(item => {
item.content = ''
return item
})
console.log(this.formData)
},
mounted() {
setTimeout(() => {
this.countDomHeight()
}, 1000)
const _this = this
$(document).keyup(function(event) {
_this.$forceUpdate()
})
$(document).keydown(function(event) {
_this.$forceUpdate()
})
},
methods: {
countDomHeight() {
$('.practice-box').css('height', $('.app-main').height() - 139 + 'px')
$('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
$('.embed-height').css('height', $('.item-left').height() - $('.item-left .title').outerHeight() - $('.item-left .tit-h2').outerHeight() - $('.item-left .heads').outerHeight() - 20 + 'px')
$('.pdf-height').css('height', $('.practice-box').height() - ($('.pdf-get-height').outerHeight() + $('.heads').outerHeight()))
},
tabChange(n) {
this.tabIndex = n
},
goPage(url) {
window.open(url)
},
confirm() {
const proForm = this.formData.production_detail.find(item => { return item.content === '' })
const fundForm = this.formData.fund_detail.find(item => { return item.content === '' })
const invForm = this.formData.invest_detail.find(item => { return item.content === '' })
if (proForm || fundForm || invForm) {
// this.$alert('有部分内容您还没有填写，是否确认进入下一步', '提示', {
// confirmButtonText: '确定',
// showCancelButton: true,
// cancelButtonText: '继续填写',
// callback: action => {
// console.log(action)
// if (action === 'confirm') {
// this.$emit('step1Confirm', this.formData)
// }
// }
// })
this.$confirm('有部分内容您还没有填写，是否确认进入下一步', '提示', {
confirmButtonText: '确定',
cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
this.$emit('step1Confirm', this.formData)
}).catch(() => {
if (proForm) {
this.tabIndex = 0
return false
}
if (fundForm) {
this.tabIndex = 1
return false
}
if (invForm) {
this.tabIndex = 2
return false
}
})
} else {
this.$emit('step1Confirm', this.formData)
}
}
}
}
</script>
<style lang="scss" scoped>
.practice-box{
display: flex;
width: 100%;
height: 473px;
margin-top: 16px;
.item-left{
margin-right: 8px;
flex: 1;
height: 100%;
background: #fff;
.heads{
display: flex;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
padding: 12px 24px;
.text{
flex: 1;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 24px;
}
.downs{
width: 98px;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: bold;
color: #5090EB;
line-height: 20px;
margin-left: 40px;
cursor: pointer;
}
}
.content-box{
padding: 0 24px 24px;
.title{
padding: 16px 0;
font-size: 24px;
font-weight: bold;
color: #222222;
line-height: 33px;
text-align: center;
}
.tit-h2{
font-size: 16px;
font-weight: bold;
color: #222222;
line-height: 22px;
margin-bottom: 13px;
}
.text{
// height: 220px;
// overflow-y: scroll;
text-indent: 2em;
font-size: 14px;
color: #666666;
line-height: 25px;
}
}
}
.item-right{
margin-left: 8px;
flex: 1;
height: 100%;
background: #fff;
.tab-btn{
width: 100%;
height: 48px;
background: #f1f1f1;
display: flex;
li{
cursor: pointer;
flex: 1;
text-align: center;
line-height: 48px;
font-size: 18px;
color: #666666;
line-height: 48px;
&.active{
color: #C01540;
background: #fff;
}
}
}
.form{
padding: 0 24px;
ul{
height: 360px;
overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
}
li{
align-items: center;
width: 100%;
border-bottom: 1px solid #eee;
height: 72px;
display: flex;
.name{
font-size: 14px;
color: #444444;
line-height: 14px;
margin-right: 23px;
white-space: nowrap;
}
}
}
.next-btnnext-btn{
padding: 0 16px;
box-sizing: border-box;
width: 100%;
.border{
border-top: 1px solid #eee;
display: flex;
align-items: center;
height: 64px;
}
.btn{
cursor: pointer;
margin-left: auto;
height: 32px;
width: 160px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
font-size: 14px;
color: #F8F8F8;
line-height: 32px;
text-align: center;
}
}
}
}
.embed{
transform: translateX(-20px);
}
</style>
src/pages/practice/components/copy/practice2.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div>
<div class="practice2-box" v-show="!isResult">
<div class="read" v-show="islookRun">
<div class="title">请阅读相关信息，阅读后点击“阅读完毕”按钮，在下一页您需要进行用户分析</div>
<img class="img" :src="data.url" alt="">
<div class="btn-box">
<div class="btn-cont">
<div class="btn" @click="islookRun = false">阅读完毕</div>
</div>
</div>
</div>
<div class="answer-box" v-show="!islookRun">
<div class="form-box">
<div class="title">下面是您可选择的各类用户特征，请筛选出您的营销活动的触达用户群</div>
<ul class="setHeight3">
<template v-for="(item, index) in checkboxData">
<!-- <template v-for="(opt, index) in item.options"> -->
<li :key="index">
<div class="name">{{ item.name }}</div>
<div class="checkbox-box">
<!-- <el-checkbox class="mar-none" border :indeterminate="isIndeterminate" v-model="item.answerCount" @change="handleCheckAllChange">全选</el-checkbox> -->
<el-checkbox-group v-model="item.answerCount" @change="handleCheckedCitiesChange">
<el-checkbox border v-for="city in item.options" :label="city.option" :key="city.option_name">{{city.option_name}}</el-checkbox>
</el-checkbox-group>
</div>
</li>
<!-- </template> -->
</template>
</ul>
</div>
<div class="foot-btn-box">
<div class="btn-box">
<img v-show="islook" :src="data.url" alt="">
<div class="btn" @click="islook = !islook">查看资料</div>
<div class="btn" @click="confirm">确认并进入下一步</div>
</div>
</div>
</div>
</div>
<div class="result-box" v-show="isResult">
<div class="item-left">
<div class="title">
<!-- 您所筛选出的用户群，适合于<span>#风险偏好较低#</span>的用户群。 -->
</div>
<template v-if="resultCharacteristic.deduct_score_times >= 3">
<div class="title">您所选的用户标签不符合当前案例的目标客群，选择次数已超3次，您对营销目标客群选择并不熟悉，请加强学习，返回重新开始。</div>
</template>
<template v-else>
<div v-if="resultCharacteristic.status == 1" class="title">您所筛选出的用户群适合于您所选案例产品的营销</div>
<div v-if="resultCharacteristic.status == 2" class="title">您某些选项的选择有严重问题，您需要重新做出选择</div>
<div v-if="resultCharacteristic.status == 3" class="title">您所筛选出的用户群，不适合营销您所选择的营销产品</div>
</template>
<img src="https://zws-imgs-pub.ezijing.com/static/public/14cd9f545600187e8d5be61f6e98cd2c.png" alt="">
</div>
<div class="item-right">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul class="setHeight2">
<template v-for="(item, index) in checkboxData">
<li :key="index">
<div class="item-right-scroll">
<div class="name">{{ item.name }}</div>
<div class="checkbox-box">
<!-- <el-checkbox class="mar-none" border :indeterminate="isIndeterminate" v-model="item.answerCount" @change="handleCheckAllChange">全选</el-checkbox> -->
<el-checkbox-group disabled v-model="item.answerCount" @change="handleCheckedCitiesChange">
<el-checkbox border v-for="city in getOptData(item.options)" :label="city.option" :key="city.option_name">{{city.option_name}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</li>
</template>
</ul>
</div>
</div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<div class="foot-btn-box">
<div class="btn-box">
<template v-if="resultCharacteristic.deduct_score_times >= 3">
<div class="btn" @click="goPage('/index')">返回案例选择</div>
</template>
<template v-else>
<div class="btn" v-if="resultCharacteristic.status == 1" @click="$emit('step2Confirm', score)">进入下一页</div>
<div class="btn" @click="isResult = false" v-if="resultCharacteristic.status == 2 || resultCharacteristic.status == 3">我在考虑下</div>
</template>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
const cityOptions = []
export default {
props: {
dataParam: {
type: Object
}
},
data() {
return {
isResult: false,
data: {},
islook: false,
islookRun: true,
checkAll: false,
checkedCities: [],
cities: cityOptions,
isIndeterminate: true,
checkboxForm: {},
checkboxData: [],
resultCharacteristic: {},
score: 0
}
},
mounted() {
this.countDomHeight()
const caseStorageData = JSON.parse(window.sessionStorage.caseData)
this.data = caseStorageData
this.checkboxData = caseStorageData.characteristics[0].options.map(item => {
const dataArr = []
console.log(item)
item.options.map(c => {
dataArr.push(c.option)
})
item.answerCount = dataArr
item.options.map(chi => {
chi.answer = 0
return chi
})
return item
})
console.log(this.checkboxData, '123---123')
},
methods: {
getOptData(item) {
return item.filter(item => {
return item.answer === 1
})
},
countDomHeight() {
$('.result-box').css('height', $('.app-main').height() - 139 + 'px')
$('.practice2-box').css('height', $('.app-main').height() - 139 + 'px')
$('.answer-box .setHeight3').css('height', $('.practice2-box').height() - 108 + 'px')
$('.result-box .setHeight2').css('height', $('.result-box').height() - 64 + 'px')
},
goPage(path) {
this.$router.replace({
path: path
})
},
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : []
this.isIndeterminate = false
},
handleCheckedCitiesChange(value) {
const checkedCount = value.length
this.checkAll = checkedCount === this.cities.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
this.$forceUpdate()
},
confirm() {
this.checkboxData.map(item => {
return item.options.map(allOpt => {
const itemFind = item.answerCount.find(c => { return c === allOpt.option })
if (itemFind) {
allOpt.answer = 1
} else {
allOpt.answer = 0
}
return allOpt
})
})
console.log(this.data)
const param = {}
param.case_id = this.data.id
param.characteristic_id = this.data.characteristics[0].id
param.characteristic_detail = this.checkboxData
api
.submitCharacteristics(param)
.then(response => {
this.resultCharacteristic = response.data
this.isResult = true
this.$nextTick(() => {
$('.item-right-scroll').css('width', `${$(document).width() / 2 - (16 * 5)}px`)
})
this.score = response.data.score
})
.finally(() => {
})
console.log(this.checkboxData, '123321')
}
},
computed: {
dataWatch() {
return this.dataParam.stepIndex
}
},
watch: {
dataWatch(newV) {
this.isResult = false
this.islook = false
this.islookRun = true
}
}
}
</script>
<style lang="scss" scoped>
.read{
// height: 100%;
background: #fff;
}
::v-deep{
.el-checkbox{
margin: 0 0 0 20px !important;
}
.mar-none{
&.el-checkbox{
margin-left: 0 !important;
margin-right: 0 !important;
}
}
}
.practice2-box{
position: relative;
min-height: 473px;
background: #fff;
margin-top: 16px;
.title{
height: 44px;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
font-size: 14px;
color: #222222;
line-height: 44px;
padding-left: 24px;
box-sizing: border-box;
}
.img{
width: 90%;
// width: 644px;
// height: 60%;
display: block;
margin: 16px auto;
}
.btn-box{
background: #fff;
position: sticky;
bottom: 0;
left: 0;
width: 100%;
height: 63px;
padding: 0 16px;
box-sizing: border-box;
.btn-cont{
height: 100%;
border-top: 1px solid #eee;
display: flex;
align-items: center;
.btn{
width: 104px;
height: 32px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
text-align: center;
line-height: 32px;
color: #fff;
cursor: pointer;
}
}
}
.form-box{
ul{
// height: 364px;
overflow-y: scroll;
padding: 0 24px;
li{
height: 72px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
.name{
width: 88px;
text-align: center;
}
.checkbox-box{
display: flex;
align-items: center;
.check-bor{
display: flex;
align-items: center;
height: 40px;
padding: 0 10px 0 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
}
}
}
}
.foot-btn-box{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 64px;
background: #fff;
padding: 0 24px;
box-sizing: border-box;
.btn-box{
position: relative;
width: 100%;
border-top: 1px solid #eee;
height: 100%;
display: flex;
align-items: center;
img{
position: absolute;
bottom: 100px;
left: 0;
width: 644px;
z-index: 9;
}
.btn{
padding: 0 24px;
height: 32px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
font-size: 14px;
color: #F8F8F8;
line-height: 32px;
margin-right: 16px;
cursor: pointer;
}
}
}
}
.result-box{
display: flex;
width: 100%;
height: 473px;
margin-top: 16px;
.item-left{
margin-right: 8px;
flex: 1;
height: 100%;
background: #fff;
.title{
width: 300px;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 30px;
margin: 0 auto;
padding: 16px 0;
text-align: center;
span{
color: #C01540;
}
}
img{
display: block;
width: 390px;
margin: 0 auto;
}
}
.item-right{
margin-left: 8px;
flex: 1;
height: 100%;
background: #fff;
position: relative;
ul{
// height: 408px;
overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
padding: 0 24px;
li{
height: 72px;
border-bottom: 1px solid #eee;
.item-right-scroll{
overflow-x: scroll;
white-space:nowrap;
display: flex;
align-items: center;
height: 72px;
// &::-webkit-scrollbar{
// display:none;
// }
}
.name{
min-width: 88px;
width: 88px;
text-align: center;
white-space: break-spaces;
}
.checkbox-box{
display: flex;
align-items: center;
.check-bor{
display: flex;
align-items: center;
height: 40px;
padding: 0 10px 0 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
}
}
}
.foot-btn-box{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
height: 64px;
box-sizing: border-box;
padding: 0 24px;
.btn-box{
height: 64px;
display: flex;
border-top: 1px solid #ccc;
align-items: center;
.btn{
padding: 0 24px;
height: 32px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
text-align: center;
line-height: 32px;
margin-left: auto;
color: #fff;
cursor: pointer;
}
}
}
}
}
</style>
src/pages/practice/components/copy/practice3.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div>
<div class="practice3-box" v-show="!isEdit">
<ul class="item-left-content">
<template v-for="(item, index) in navItem">
<li :class="navItemIndex == index && 'active'" :key="index" @click="navItemChange(index)">
<div class="icon">
<img :src="item.icon" alt="" class="icons">
<img :src="item.iconActive" alt="" class="iconActive">
<!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/f354795ef8bd7a7f3d5317a8745b7398.png" alt=""> -->
</div>
<div class="text">{{ item.text }}</div>
</li>
</template>
</ul>
<div class="item-right-content">
<div class="form-all">
<form1 v-show="navItemIndex == 1 - 1"></form1>
<form2 v-show="navItemIndex == 2 - 1"></form2>
<form3 v-show="navItemIndex == 3 - 1"></form3>
<form4 v-show="navItemIndex == 4 - 1"></form4>
<form5 v-show="navItemIndex == 5 - 1"></form5>
<form6 v-show="navItemIndex == 6 - 1"></form6>
<form7 v-show="navItemIndex == 7 - 1"></form7>
</div>
<div class="foot-btn-box">
<div class="btn-box">
<div class="btn" @click="isEdit = true">确定并进入下一步</div>
</div>
</div>
</div>
</div>
<preview :navItemIndex="navItemIndex" v-show="isEdit" @confirm="confirm"></preview>
</div>
</template>
<script>
import form1 from './tabForm1'
import form2 from './tabForm2'
import form3 from './tabForm3'
import form4 from './tabForm4'
import form5 from './tabForm5'
import form6 from './tabForm6'
import form7 from './tabForm7'
import preview from './preview'
export default {
props: {
dataParam: {
type: Object
}
},
components: {
form1,
form2,
form3,
form4,
form5,
form6,
form7,
preview
},
data() {
return {
isEdit: false,
navItem: [
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/148b68eec73a6cc9a34748d79985e834.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/b3bd7fddd17a0e931dce407b083ba07c.png',
text: 'App弹窗'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/3d243b3f6a574a7640a3f7e46030789f.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/58a9958827342b6daa82b025dd6b5e39.png',
text: 'Push消息'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/20d600c21100089c0da81965473d929d.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/4399a42674e0667f7b412356d412f43d.png',
text: '微信群发助手'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/5c8a0f50dd293821c50d430bf878adbc.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/0eb5b337a3f413678f43441e3a60c78f.png',
text: '微信小程序'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/7211b3e184dc1b538079f02102b36ebf.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/85228d8743161fe282ed30871a4a70a6.png',
text: '短信'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/0090fb935b49dc5b899db96067633db8.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/373f377f1d37f5d253b303df78a6b3f7.png',
text: '邮件'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/eddd11a911b9ba33a66ab15d550b0bc1.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/971b996a6547d0d1db592fdd3166fc73.png',
text: 'Web弹窗'
}
],
navItemIndex: 0
}
},
mounted() {
window.sessionStorage.indexTouchActive = this.navItemIndex
this.countDomHeight()
},
methods: {
countDomHeight() {
$('.practice3-box').css('height', $('.app-main').height() - 139 + 'px')
// $('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
// $('.embed-height').css('height', $('.item-left').height() - $('.item-left .title').outerHeight() - $('.item-left .tit-h2').outerHeight() - $('.item-left .heads').outerHeight() - 20 + 'px')
},
navItemChange(n) {
this.navItemIndex = n
window.sessionStorage.indexTouchActive = n
},
confirm(val) {
this.$emit('step3Confirm', val)
// console.log(val)
}
},
computed: {
dataWatch() {
return this.dataParam.stepIndex
}
},
watch: {
dataWatch(newV) {
this.isEdit = false
}
}
}
</script>
<style lang="scss" scoped>
.practice3-box{
display: flex;
margin-top: 16px;
.item-left-content{
width: 200px;
// height: 473px;
margin-right: 16px;
background: #fff;
padding: 20px 10px;
box-sizing: border-box;
li{
cursor: pointer;
width: 180px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
&.active{
background: #FFF4F7;
.icon{
.icons{
display: none;
}
.iconActive{
display: block;
}
}
.text{
color: #C01540;
font-weight: bold;
}
}
.icon{
margin-left: 27px;
width: 20px;
img{
display: block;
width: 100%;
}
.iconActive{
display: none;
}
}
.text{
font-size: 16px;
color: #999999;
margin-left: 10px;
}
}
}
.item-right-content{
position: relative;
flex: 1;
background: #fff;
.form-all{
height: 411px;
overflow-y: scroll;
}
.foot-btn-box{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 64px;
background: #fff;
padding: 0 24px;
box-sizing: border-box;
.btn-box{
position: relative;
width: 100%;
border-top: 1px solid #eee;
height: 100%;
display: flex;
align-items: center;
img{
position: absolute;
bottom: 100px;
left: 0;
width: 644px;
z-index: 9;
}
.btn{
padding: 0 24px;
height: 32px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
font-size: 14px;
color: #F8F8F8;
line-height: 32px;
margin-right: 16px;
cursor: pointer;
}
}
}
}
}
</style>
src/pages/practice/components/copy/preview.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div class="preview-box">
<div class="content-left">
<div class="text-box">
<div class="name">文案编辑</div>
<el-input
class="textarea"
auto-complete=""
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
</div>
<div class="upload-box" v-if="showActiveIndex == 0 || showActiveIndex == 4 || showActiveIndex == 5 || showActiveIndex == 6 ">
<div class="name">上传图片</div>
<el-upload
class="upload-demo"
:limit=1
action="/api/opera/v1/file/upload"
:file-list="fileList"
:on-change="successImg"
:on-remove="removeImg"
list-type="picture">
<el-button class="btn" size="small" type="primary" icon="el-icon-picture-outline">点击上传</el-button>
</el-upload>
</div>
<div class="foot-btn-box">
<div class="btn-box">
<!-- <div class="btn">点此预览</div> -->
<div class="btn" @click="confirm">确认提交</div>
</div>
</div>
</div>
<div class="content-right">
<!-- app弹窗 小程序 -->
<div class="mobile-box" v-if="showActiveIndex == 0 || showActiveIndex == 3">
<div class="content-box">
<div class="img" v-if="url != ''" :style="getStyle"></div>
<div class="text" v-html="textarea" v-if="textarea != ''"></div>
<div class="btn" v-if="textarea != '' || url != ''">我知道了</div>
</div>
</div>
<!-- push消息 -->
<div class="mobile2-box" v-if="showActiveIndex == 1">
<div class="content-box">
<div class="text" v-html="textarea"></div>
</div>
</div>
<!-- 微信群发助手 -->
<div class="mobile3-box" v-if="showActiveIndex == 2">
<div class="content-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/f3a5ad7453575fadcf3e4d19132c412b.png" alt="">
<div class="content">
<div class="text" v-html="textarea"></div>
<div class="icon"></div>
</div>
</div>
</div>
<!-- 短信 https://zws-imgs-pub.ezijing.com/static/public/5b287657925b6560f288bdfdc1a790f5.png -->
<div class="mobile4-box" v-if="showActiveIndex == 4">
<div class="content-box">
<div class="content">
<div class="text" v-html="textarea"></div>
<div class="icon"></div>
</div>
</div>
</div>
<!-- 邮件 -->
<div class="mobile5-box" v-if="showActiveIndex == 5">
<div class="content-box" v-html="textarea"></div>
<div class="img" v-if="url != ''" :style="getStyle"></div>
</div>
<!-- 邮件 -->
<div class="mobile6-box" v-if="showActiveIndex == 6">
<div class="content-box">
<div class="img" v-if="url != ''" :style="getStyle"></div>
<div class="text" v-html="textarea" v-if="textarea != ''"></div>
<div class="btn" v-if="textarea != '' || url != ''">我知道了</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
navItemIndex: {}
},
data() {
return {
textarea: '',
fileList: [],
url: '',
showActiveIndex: 0
}
},
mounted() {
this.countDomHeight()
this.showActiveIndex = window.sessionStorage.indexTouchActive
console.log(this.showActiveIndex, '===123')
},
methods: {
countDomHeight() {
$('.preview-box').css('height', $('.app-main').height() - 139 + 'px')
},
successImg(file) {
this.url = file.url
this.$forceUpdate()
},
removeImg(file) {
this.url = ''
this.$forceUpdate()
},
confirm() {
this.$emit('confirm', this.textarea)
}
},
computed: {
getStyle() {
return `background:url(${this.url});background-size: cover;`
},
dataWatch() {
return this.navItemIndex
}
},
watch: {
dataWatch(newV) {
this.showActiveIndex = this.navItemIndex
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.preview-box{
display: flex;
height: 473px;
padding-top: 16px;
.content-left{
flex: 1;
height: 100%;
background: #fff;
position: relative;
padding: 16px 16px 0;
box-sizing: border-box;
.text-box{
display: flex;
}
.name{
width: 84px;
font-size: 16px;
color: #666666;
line-height: 22px;
}
.textarea{
height: 200px;
::v-deep{
textarea{
resize: none;
height: 200px;
}
}
}
.upload-box{
padding-top: 40px;
display: flex;
// align-items: center;
.name{
line-height: 32px;
}
.btn{
height: 32px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
border: none;
}
}
.foot-btn-box{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0 24px;
box-sizing: border-box;
}
.btn-box{
border-top: 1px solid #eee;
height: 64px;
display: flex;
align-items: center;
.btn{
text-align: center;
line-height: 32px;
color: #fff;
width: 104px;
height: 32px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
font-size: 14px;
color: #F8F8F8;
cursor: pointer;
margin-right: 16px;
}
}
}
.content-right{
width: 500px;
height: 100%;
background: #fff;
position: relative;
margin-left: 16px;
display: flex;
align-items: center;
justify-content: center;
.mobile-box{
width: 201px;
height: 391px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/d186d0e04e598fa45553764cbc74246d.png);
background-size: 100% 100%;
display: flex;
align-items: center;
&.mobile2{
background: url(https://zws-imgs-pub.ezijing.com/static/public/6b64bbea7dc7f083830d9642fae48043.png);
background-size: 100% 100%;
.pops{
margin: 46px auto 0 auto;
width: 157px;
height: 66px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/d7a3e0f7e2b3e293736febd540683a53.png);
background-size: 100% 100%;
}
}
.content-box{
width: 154px;
margin: 0 auto;
border-radius: 4px;
background: #fff;
.img{
width: 100%;
height: 70px;
}
.text{
padding: 5px;
font-size: 12px;
color: #000000;
line-height: 17px;
word-break: break-all;
}
.btn{
width: 154px;
height: 26px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 0px 0px 4px 4px;
font-size: 12px;
color: #F8F8F8;
line-height: 26px;
text-align: center;
}
}
}
.mobile2-box{
width: 201px;
height: 391px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/6b64bbea7dc7f083830d9642fae48043.png);
background-size: 100% 100%;
.content-box{
margin: 46px auto 0 auto;
width: 157px;
height: 66px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/d7a3e0f7e2b3e293736febd540683a53.png);
background-size: 100% 100%;
.text{
width: 145px;
font-size: 12px;
color: #220E01;
line-height: 17px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
padding-top: 24px;
margin: 0 auto;
}
}
}
.mobile3-box{
width: 201px;
height: 391px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/f22aae1e2e4d1e9b5ea89ee672df00fe.png);
background-size: 100% 100%;
.content-box{
display: flex;
width: 152px;
margin: 0 auto;
padding-top: 71px;
img{
width: 17px;
height: 17px;
margin-right: 5px;
}
.content{
position: relative;
flex: 1;
background: #fff;
padding: 5px;
.text{
font-size: 12px;
color: #444444;
line-height: 17px;
}
.icon{
position: absolute;
top: 5px;
left: -3px;
width: 4px;
height: 6px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/bb379871ee8bc0a8bef0ff83916ed09f.png);
background-size: 100% 100%;
}
}
}
}
.mobile4-box{
width: 201px;
height: 391px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/2ee8953c39f5d287d034043fb197720e.png);
background-size: 100% 100%;
.content-box{
padding-top: 98px;
.content{
position: relative;
width: 142px;
background: #E9E9EB;
border-radius: 8px;
padding: 5px;
margin: 0 auto;
}
.text{
font-size: 12px;
color: #000000;
line-height: 17px;
}
.icon{
position: absolute;
bottom: 0px;
left: -4px;
width: 9px;
height: 9px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/b927de84f5c053512319b92d5b23a346.png);
background-size: 100% 100%;
}
}
}
.mobile5-box{
width: 201px;
height: 391px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/df62e7df9ad44f1bab8945bacced37d1.png);
background-size: 100% 100%;
position: relative;
.content-box{
width: 152px;
margin: 0 auto;
padding-top: 105px;
font-size: 12px;
color: #222222;
line-height: 16px;
}
.img{
position: absolute;
bottom: 54px;
left: 50%;
transform: translateX(-50%);
width: 164px;
height: 82px;
}
}
.mobile6-box{
width: 425px;
height: 243px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/6b95bdf6f60dd8db51c0753594cfbf13.png);
background-size: 100% 100%;
display: flex;
align-items: center;
&.mobile2{
background: url(https://zws-imgs-pub.ezijing.com/static/public/6b64bbea7dc7f083830d9642fae48043.png);
background-size: 100% 100%;
.pops{
margin: 46px auto 0 auto;
width: 157px;
height: 66px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/d7a3e0f7e2b3e293736febd540683a53.png);
background-size: 100% 100%;
}
}
.content-box{
width: 276px;
margin: 0 auto;
border-radius: 4px;
background: #fff;
.img{
width: 100%;
height: 44px;
}
.text{
padding: 5px;
font-size: 12px;
color: #000000;
line-height: 17px;
}
.btn{
width: 100%;
height: 26px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 0px 0px 4px 4px;
font-size: 12px;
color: #F8F8F8;
line-height: 26px;
text-align: center;
}
}
}
}
}
</style>
src/pages/practice/components/copy/tabForm1.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div class="form-box">
<div class="form">
<div class="name">推送方式</div>
<el-radio class="mar-el-checkbox" v-model="radio" label="1" border>基于APP启动事件触发显示</el-radio>
<el-radio v-model="radio" label="2" border>基于用户事件触发显示</el-radio>
</div>
<div class="radio-left-form" v-if="radio == 1">
<div class="form">
<div class="name mar-l80">当用户启动App后</div>
<el-select v-model="leftForm.select1" placeholder="请选择" class="win500">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<template v-if="leftForm.select1 == 2">
<div class="form mar-l224 relation">
<el-select v-model="leftForm.select2" placeholder="请选择" class="win500">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="form mar-l224">
<div class="name">等于</div>
<el-input class="win448" v-model="leftForm.input1" placeholder="Android属性值"></el-input>
</div>
<div class="form mar-l275">
<el-input class="win448" v-model="leftForm.input2" placeholder="iOS属性值"></el-input>
</div>
</template>
</div>
<div class="radio-right-form" v-if="radio == 2">
<div class="form">
<div class="name mar-l80">当用户做过</div>
<el-select v-model="leftForm.select6" placeholder="请选择" class="win500">
<el-option
v-for="item in select5Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text-line mar-l180">
<div class="line"></div>
<div class="text">后</div>
<div class="line"></div>
</div>
<div class="form mar-l180">
<el-select v-model="leftForm.select7" placeholder="请选择" class="win500">
<el-option
v-for="item in select6Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<template v-if="leftForm.select7 == 1">
<div class="form mar-l180 relation">
<el-select v-model="leftForm.select8" placeholder="请选择" class="win500">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="form mar-l180">
<div class="name">等于</div>
<el-input class="win448" v-model="leftForm.input3" placeholder="请输入内容"></el-input>
</div>
<div class="form mar-l232">
<el-input class="win448" v-model="leftForm.input4" placeholder="请输入内容"></el-input>
</div>
</template>
</div>
<div class="content-bottom-form">
<div class="form top">
<div class="name">弹出频率</div>
<div class="f-box">
<div class="form" style="padding-top:16px">
<div class="name">若用户<span>点击</span>弹窗，下次触发相同条件时，弹窗将会</div>
<el-select v-model="leftForm.select3" placeholder="请选择" class="win279">
<el-option
v-for="item in select3Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<template v-if="leftForm.select3 == 1">
<div class="form" >
<div class="name">添加弹出次数上限：活动期间，最多向用户展示</div>
<el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>
</div>
<div class="form">
<el-checkbox class="mar-el-checkbox" label="1">添加弹出时间间隔：点击弹窗后</el-checkbox>
<el-input-number style="margin-left:20px" value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;次
</div>
<div class="form">
<el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
<el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
<el-option
v-for="item in select4Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
</div>
</template>
<template v-if="leftForm.select3 == 2">
<div class="form">
<el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
<el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
<el-option
v-for="item in select4Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
</div>
</template>
<!-- <div class="form">
<div class="name">若用户<span>关闭</span>弹窗，下次触发相同条件时，弹窗将会</div>
<el-select v-model="leftForm.select4" placeholder="请选择" class="win279">
<el-option
v-for="item in select3Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
export default {
data() {
return {
checkbox: ['基于APP启动事件触发显示', '基于用户事件触发显示'],
radio: '1',
leftForm: {
select1: '2',
select2: '',
select3: 0,
select4: 0,
select5: 0,
select6: '',
select7: 0,
select8: '',
input1: '',
input2: '',
input3: '',
input4: ''
},
options: [
{
value: '1',
label: '立即弹窗'
},
{
value: '2',
label: '在制定页面显示弹窗'
}
],
select2Options: [],
select3Options: [],
select4Options: [],
select5Options: [
{
value: 1,
label: '登录'
},
{
value: 2,
label: '点击banner'
},
{
value: 3,
label: '收藏'
}
],
select6Options: []
}
},
mounted() {
const opt = ['页面URL', '页面标题', '来源地址', '来源域名', '渠道来源分组', '搜索引擎', '搜索词', '社交媒体', '分享者ID', '社交媒体分享来源', '分享层级', '分享地址', '场景值类型']
this.setArrData(opt, 'select2Options')
this.setArrData(['不再弹出', '限制次数内弹出', '每次弹出'], 'select3Options')
this.setArrData(['天', '小时'], 'select4Options')
this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
// this.getUserConfig()
},
methods: {
getUserConfig() {
const id = JSON.parse(window.sessionStorage.caseData).id
api
.getUserConfig(id)
.then(response => {
this.setArrData(response.data.list, 'select5Options')
console.log(response)
})
.finally(() => {
})
},
setArrData (allItem, data) {
allItem.map((item, index) => {
this[data].push({
value: index,
label: item
})
})
},
navItemChange(n) {
this.navItemIndex = n
}
}
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-checkbox,.el-radio{
margin: 0 0 0 20px !important;
}
&.mar-el-checkbox{
margin-left: 0 !important;
margin-right: 0 !important;
}
.el-input__inner{
background: #F5F7FA !important;
}
}
.form-box{
padding: 16px 24px;
.form{
align-items: center;
display: flex;
margin-bottom: 16px;
&.top{
align-items: baseline;
}
.name{
font-size: 16px;
color: #666666;
margin-right: 20px;
span{
font-weight: bold;
color: #222222;
}
}
}
.content-bottom-form{
border-top: 1px solid #eee;
}
}
.radio-right-form{
.text-line{
width: 500px;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 16px;
.line{
width: 250px;
height: 1px;
background: #EEEEEE;
}
.text{
font-size: 16px;
color: #666666;
line-height: 22px;
}
}
}
.mar-l224{
margin-left: 224px;
}
.mar-l80{
margin-left: 80px;
}
.mar-l275{
margin-left: 275px;
}
.mar-l180{
margin-left: 180px;
}
.mar-l232{
margin-left: 232px;
}
.win500{
width: 500px;
}
.win448{
width: 448px;
}
.win279{
width: 279px;
}
</style>
src/pages/practice/components/copy/tabForm2.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div class="form-box">
<div class="form">
<div class="name">推送规则</div>
<el-radio class="mar-el-checkbox" v-model="radio" label="1" border>仅发送一次</el-radio>
<el-radio v-model="radio" label="2" border>基于用户事件触发</el-radio>
<el-radio v-model="radio" label="3" border>周期性推送</el-radio>
</div>
<div class="radio-form1" v-if="radio == 1">
<div class="form mar-l83">
<el-select v-model="leftForm.select1" placeholder="请选择">
<el-option
v-for="item in select1Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="form mar-l83" v-if="leftForm.select1 == 1">
<div class="name">消息将于</div>
<el-date-picker
v-model="leftForm.input1"
type="date"
placeholder="选择日期">
</el-date-picker>
<div class="name hou">准时发送</div>
</div>
</div>
<div class="radio-form2" v-if="radio == 2">
<div class="form mar-l83">
<div class="name">从</div>
<el-date-picker
v-model="leftForm.input2"
type="date"
placeholder="开始时间">
</el-date-picker>
<div class="name hou">到</div>
<el-date-picker
v-model="leftForm.input3"
type="date"
placeholder="结束时间">
</el-date-picker>
</div>
<div class="form">
<div class="name mar-l83">当用户做过</div>
<el-select v-model="leftForm.select2" placeholder="请选择" class="win432">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text-line mar-l83">
<div class="line"></div>
<div class="text">时</div>
<div class="line"></div>
</div>
<div class="form mar-l83">
<el-select class="win150" v-model="leftForm.select3" placeholder="请选择">
<el-option
v-for="item in select3Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<template v-if="leftForm.select3 == 1">
<el-input class="win150 mar-lr16" v-model="leftForm.input4" placeholder="请输入内容"></el-input>
<el-select class="win150" v-model="leftForm.select4" placeholder="请选择">
<el-option
v-for="item in select4Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<div class="name hou">发送</div>
</div>
</div>
<div class="radio-form3" v-if="radio == 3">
<div class="form mar-l83">
<div class="name">从</div>
<el-date-picker
v-model="leftForm.input5"
type="date"
placeholder="开始时间">
</el-date-picker>
<div class="name hou">到</div>
<el-date-picker
v-model="leftForm.input6"
type="date"
placeholder="结束时间">
</el-date-picker>
</div>
<div class="form mar-l83">
<el-select class="win150" v-model="leftForm.select5" placeholder="请选择">
<el-option
v-for="item in select5Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<template v-if="leftForm.select5 == 1">
<el-select class="win150 mar-l16" v-model="leftForm.select6" placeholder="请选择">
<el-option
v-for="item in select6Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<template v-if="leftForm.select5 == 2">
<el-select class="win150 mar-l16" v-model="leftForm.select7" placeholder="请选择">
<el-option
v-for="item in select7Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<div class="name hou">准时推送</div>
</div>
</div>
<div class="content-bottom-form">
<div class="form mar-l83 mar-t16">
<el-checkbox class="mar-el-checkbox">当push消息无法触达时，使用短信进行补发</el-checkbox>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
export default {
data() {
return {
checkbox: ['仅发送一次', '基于用户事件触发', '周期性推送'],
radio: '2',
leftForm: {
select1: 0,
select2: '',
select3: 0,
select4: 0,
select5: 0,
select6: 0,
input1: '',
input2: '',
input3: '',
input4: '',
input5: '',
input6: ''
},
options: [
{
value: '1',
label: '立即弹窗'
},
{
value: '2',
label: '在制定页面显示弹窗'
}
],
select1Options: [],
select2Options: [
{
value: 1,
label: '连续7日未登录'
},
{
value: 2,
label: '连续30日未登录'
}
],
select3Options: [],
select4Options: [],
select5Options: [],
select6Options: [],
select7Options: []
}
},
mounted() {
this.setArrData(['立即发送', '定时发送'], 'select1Options')
this.setArrData(['立即', '等待'], 'select3Options')
this.setArrData(['分钟', '小时', '天'], 'select4Options')
this.setArrData(['每日', '每周', '每月'], 'select5Options')
this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
this.setArrData([
'1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号'
], 'select7Options')
// this.getUserConfig()
},
methods: {
getUserConfig() {
const id = JSON.parse(window.sessionStorage.caseData).id
api
.getUserConfig(id)
.then(response => {
this.setArrData(response.data.list, 'select2Options')
console.log(response)
})
.finally(() => {
})
},
setArrData (allItem, data) {
allItem.map((item, index) => {
this[data].push({
value: index,
label: item
})
})
},
navItemChange(n) {
this.navItemIndex = n
}
}
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-checkbox,.el-radio{
margin: 0 0 0 20px !important;
}
&.mar-el-checkbox{
margin-left: 0 !important;
margin-right: 0 !important;
}
.el-input__inner{
background: #F5F7FA !important;
}
}
.form-box{
padding: 16px 24px;
.form{
align-items: center;
display: flex;
margin-bottom: 16px;
&.top{
align-items: baseline;
}
.name{
font-size: 16px;
color: #666666;
margin-right: 20px;
&.hou{
margin-left: 20px;
}
span{
font-weight: bold;
color: #222222;
}
}
}
.content-bottom-form{
border-top: 1px solid #eee;
}
}
.radio-right-form{
}
.text-line{
width: 530px;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 16px;
.line{
width: 250px;
height: 1px;
background: #EEEEEE;
}
.text{
font-size: 16px;
color: #666666;
line-height: 22px;
}
}
.mar-l224{
margin-left: 224px;
}
.mar-l80{
margin-left: 80px;
}
.mar-l275{
margin-left: 275px;
}
.mar-l180{
margin-left: 180px;
}
.mar-l232{
margin-left: 232px;
}
.mar-l83{
margin-left: 83px;
}
.mar-t16{
margin-top: 16px;
}
.mar-lr16{
margin: 0 16px;
}
.mar-l16{
margin-left: 16px;
}
.win500{
width: 500px;
}
.win448{
width: 448px;
}
.win279{
width: 279px;
}
.win432{
width: 432px;
}
.win150{
width: 150px;
}
</style>
src/pages/practice/components/copy/tabForm3.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div class="form-box">
<div class="form">
<div class="name">推送规则</div>
<el-radio class="mar-el-checkbox" v-model="radio" label="1" border>仅发送一次</el-radio>
<el-radio v-model="radio" label="2" border>基于用户事件触发</el-radio>
</div>
<div class="radio-form1" v-if="radio == 1">
<div class="form mar-l83">
<el-select v-model="leftForm.select1" placeholder="请选择">
<el-option
v-for="item in select1Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="form mar-l83" v-if="leftForm.select1 == 1">
<div class="name">消息将于</div>
<el-date-picker
v-model="leftForm.input1"
type="date"
placeholder="选择日期">
</el-date-picker>
<div class="name hou">准时发送</div>
</div>
</div>
<div class="radio-form2" v-if="radio == 2">
<div class="form mar-l83">
<div class="name">从</div>
<el-date-picker
v-model="leftForm.input2"
type="date"
placeholder="开始时间">
</el-date-picker>
<div class="name hou">到</div>
<el-date-picker
v-model="leftForm.input3"
type="date"
placeholder="开始时间">
</el-date-picker>
<div class="name hou">时间范围内</div>
</div>
<div class="form">
<div class="name mar-l83">当用户做过</div>
<el-select v-model="leftForm.select2" placeholder="请选择" class="win432">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name hou">时立即发送</div>
</div>
</div>
<!-- <div class="content-bottom-form">
<div class="form mar-l83 mar-t16">
<el-checkbox class="mar-el-checkbox">当push消息无法触达时，使用短信进行补发</el-checkbox>
</div>
</div> -->
</div>
</template>
<script>
import * as api from '@/api/common.js'
export default {
data() {
return {
radio: '1',
leftForm: {
select1: 0,
select2: '',
select3: 0,
select4: 0,
select5: 0,
select6: 0,
input1: '',
input2: '',
input3: '',
input4: '',
input5: '',
input6: ''
},
options: [
{
value: '1',
label: '立即弹窗'
},
{
value: '2',
label: '在制定页面显示弹窗'
}
],
select1Options: [],
select2Options: [
{
value: 1,
label: '主动发送消息给公众号'
},
{
value: 2,
label: '点击公众号菜单'
},
{
value: 3,
label: '关注公众号'
}
],
select3Options: [],
select4Options: [],
select5Options: [],
select6Options: [],
select7Options: []
}
},
mounted() {
this.setArrData(['立即发送', '定时发送'], 'select1Options')
this.setArrData(['立即', '等待'], 'select3Options')
this.setArrData(['分钟', '小时', '天'], 'select4Options')
this.setArrData(['每日', '每周', '每月'], 'select5Options')
this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
this.setArrData([
'1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号'
], 'select7Options')
// this.getUserConfig()
},
methods: {
getUserConfig() {
const id = JSON.parse(window.sessionStorage.caseData).id
api
.getUserConfig(id)
.then(response => {
this.setArrData(response.data.list, 'select2Options')
console.log(response)
})
.finally(() => {
})
},
setArrData (allItem, data) {
allItem.map((item, index) => {
this[data].push({
value: index,
label: item
})
})
},
navItemChange(n) {
this.navItemIndex = n
}
}
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-checkbox,.el-radio{
margin: 0 0 0 20px !important;
}
&.mar-el-checkbox{
margin-left: 0 !important;
margin-right: 0 !important;
}
.el-input__inner{
background: #F5F7FA !important;
}
}
.form-box{
padding: 16px 24px;
.form{
align-items: center;
display: flex;
margin-bottom: 16px;
&.top{
align-items: baseline;
}
.name{
font-size: 16px;
color: #666666;
margin-right: 20px;
&.hou{
margin-left: 20px;
}
span{
font-weight: bold;
color: #222222;
}
}
}
.content-bottom-form{
border-top: 1px solid #eee;
}
}
.radio-right-form{
}
.text-line{
width: 530px;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 16px;
.line{
width: 250px;
height: 1px;
background: #EEEEEE;
}
.text{
font-size: 16px;
color: #666666;
line-height: 22px;
}
}
.mar-l224{
margin-left: 224px;
}
.mar-l80{
margin-left: 80px;
}
.mar-l275{
margin-left: 275px;
}
.mar-l180{
margin-left: 180px;
}
.mar-l232{
margin-left: 232px;
}
.mar-l83{
margin-left: 83px;
}
.mar-t16{
margin-top: 16px;
}
.mar-lr16{
margin: 0 16px;
}
.mar-l16{
margin-left: 16px;
}
.win500{
width: 500px;
}
.win448{
width: 448px;
}
.win279{
width: 279px;
}
.win432{
width: 432px;
}
.win150{
width: 150px;
}
</style>
src/pages/practice/components/copy/tabForm4.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div class="form-box">
<div class="form">
<div class="name">推送方式</div>
<el-radio class="mar-el-checkbox" v-model="radio" label="1" border>基于APP启动事件触发显示</el-radio>
<el-radio v-model="radio" label="2" border>基于用户事件触发显示</el-radio>
</div>
<div class="radio-left-form" v-if="radio == 1">
<div class="form">
<div class="name mar-l80">当用户启动App后</div>
<el-select v-model="leftForm.select1" placeholder="请选择" class="win500">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<template v-if="leftForm.select1 == 2">
<div class="form mar-l224 relation">
<el-select v-model="leftForm.select2" placeholder="请选择" class="win500">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="form mar-l224">
<div class="name">等于</div>
<el-input class="win448" v-model="leftForm.input1" placeholder="请输入内容"></el-input>
</div>
<div class="form mar-l275">
<el-input class="win448" v-model="leftForm.input2" placeholder="请输入内容"></el-input>
</div>
</template>
</div>
<div class="radio-right-form" v-if="radio == 2">
<div class="form">
<div class="name mar-l80">当用户做过</div>
<el-select v-model="leftForm.select6" placeholder="请选择" class="win500">
<el-option
v-for="item in select5Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text-line mar-l180">
<div class="line"></div>
<div class="text">后</div>
<div class="line"></div>
</div>
<div class="form mar-l180">
<el-select v-model="leftForm.select7" placeholder="请选择" class="win500">
<el-option
v-for="item in select6Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<template v-if="leftForm.select7 == 1">
<div class="form mar-l180 relation">
<el-select v-model="leftForm.select8" placeholder="请选择" class="win500">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="form mar-l180">
<div class="name">等于</div>
<el-input class="win448" v-model="leftForm.input3" placeholder="请输入内容"></el-input>
</div>
<div class="form mar-l232">
<el-input class="win448" v-model="leftForm.input4" placeholder="请输入内容"></el-input>
</div>
</template>
</div>
<div class="content-bottom-form">
<div class="form top">
<div class="name">弹出频率</div>
<div class="f-box">
<div class="form" style="padding-top:16px">
<div class="name">若用户<span>点击</span>弹窗，下次触发相同条件时，弹窗将会</div>
<el-select v-model="leftForm.select3" placeholder="请选择" class="win279">
<el-option
v-for="item in select3Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<template v-if="leftForm.select3 == 1">
<div class="form" >
<div class="name">添加弹出次数上限：活动期间，最多向用户展示</div>
<el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>
</div>
<div class="form">
<el-checkbox class="mar-el-checkbox" label="1">添加弹出时间间隔：点击弹窗后</el-checkbox>
<el-input-number style="margin-left:20px" value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;次
</div>
<div class="form">
<el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
<el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
<el-option
v-for="item in select4Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
</div>
</template>
<template v-if="leftForm.select3 == 2">
<div class="form">
<el-input-number value="1" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
<el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
<el-option
v-for="item in select4Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
</div>
</template>
<!-- <div class="form">
<div class="name">若用户<span>关闭</span>弹窗，下次触发相同条件时，弹窗将会</div>
<el-select v-model="leftForm.select4" placeholder="请选择" class="win279">
<el-option
v-for="item in select3Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
export default {
data() {
return {
checkbox: ['基于APP启动事件触发显示', '基于用户事件触发显示'],
radio: '1',
leftForm: {
select1: '2',
select2: '',
select3: 0,
select4: 0,
select5: 0,
select6: '',
select7: 0,
select8: '',
input1: '',
input2: '',
input3: '',
input4: ''
},
options: [
{
value: '1',
label: '立即弹窗'
},
{
value: '2',
label: '在制定页面显示弹窗'
}
],
select2Options: [],
select3Options: [],
select4Options: [],
select5Options: [
{
value: 1,
label: '小程序分享'
},
{
value: 2,
label: '元素点击'
}
],
select6Options: []
}
},
mounted() {
const opt = ['页面URL', '页面标题', '来源地址', '来源域名', '渠道来源分组', '搜索引擎', '搜索词', '社交媒体', '分享者ID', '社交媒体分享来源', '分享层级', '分享地址', '场景值类型']
this.setArrData(opt, 'select2Options')
this.setArrData(['不再弹出', '限制次数内弹出', '每次弹出'], 'select3Options')
this.setArrData(['天', '小时'], 'select4Options')
this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
// this.getUserConfig()
},
methods: {
getUserConfig() {
const id = JSON.parse(window.sessionStorage.caseData).id
api
.getUserConfig(id)
.then(response => {
this.setArrData(response.data.list, 'select5Options')
console.log(response)
})
.finally(() => {
})
},
setArrData (allItem, data) {
allItem.map((item, index) => {
this[data].push({
value: index,
label: item
})
})
},
navItemChange(n) {
this.navItemIndex = n
}
}
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-checkbox,.el-radio{
margin: 0 0 0 20px !important;
}
&.mar-el-checkbox{
margin-left: 0 !important;
margin-right: 0 !important;
}
.el-input__inner{
background: #F5F7FA !important;
}
}
.form-box{
padding: 16px 24px;
.form{
align-items: center;
display: flex;
margin-bottom: 16px;
&.top{
align-items: baseline;
}
.name{
font-size: 16px;
color: #666666;
margin-right: 20px;
span{
font-weight: bold;
color: #222222;
}
}
}
.content-bottom-form{
border-top: 1px solid #eee;
}
}
.radio-right-form{
.text-line{
width: 500px;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 16px;
.line{
width: 250px;
height: 1px;
background: #EEEEEE;
}
.text{
font-size: 16px;
color: #666666;
line-height: 22px;
}
}
}
.mar-l224{
margin-left: 224px;
}
.mar-l80{
margin-left: 80px;
}
.mar-l275{
margin-left: 275px;
}
.mar-l180{
margin-left: 180px;
}
.mar-l232{
margin-left: 232px;
}
.win500{
width: 500px;
}
.win448{
width: 448px;
}
.win279{
width: 279px;
}
</style>
src/pages/practice/components/copy/tabForm5.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div class="form-box">
<div class="form">
<div class="name">推送规则</div>
<el-radio class="mar-el-checkbox" v-model="radio" label="1" border>仅发送一次</el-radio>
<el-radio v-model="radio" label="2" border>基于用户事件触发</el-radio>
<el-radio v-model="radio" label="3" border>周期性推送</el-radio>
</div>
<div class="radio-form1" v-if="radio == 1">
<div class="form mar-l83">
<el-select v-model="leftForm.select1" placeholder="请选择">
<el-option
v-for="item in select1Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="form mar-l83" v-if="leftForm.select1 == 1">
<div class="name">消息将于</div>
<el-date-picker
v-model="leftForm.input1"
type="date"
placeholder="选择日期">
</el-date-picker>
<div class="name hou">准时发送</div>
</div>
</div>
<div class="radio-form2" v-if="radio == 2">
<div class="form mar-l83">
<div class="name">从</div>
<el-date-picker
v-model="leftForm.input2"
type="date"
placeholder="开始时间">
</el-date-picker>
<div class="name hou">到</div>
<el-date-picker
v-model="leftForm.input3"
type="date"
placeholder="结束时间">
</el-date-picker>
</div>
<div class="form">
<div class="name mar-l83">当用户做过</div>
<el-select v-model="leftForm.select2" placeholder="请选择" class="win432">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text-line mar-l83">
<div class="line"></div>
<div class="text">时</div>
<div class="line"></div>
</div>
<div class="form mar-l83">
<div class="name">活动期间，最多向用户展示</div>
<el-select class="win150" v-model="leftForm.select7" placeholder="请选择">
<el-option
v-for="item in select8Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name hou">发送</div>
</div>
</div>
<div class="radio-form3" v-if="radio == 3">
<div class="form mar-l83">
<div class="name">从</div>
<el-date-picker
v-model="leftForm.input22"
type="date"
placeholder="开始时间">
</el-date-picker>
<div class="name hou">到</div>
<el-date-picker
v-model="leftForm.input33"
type="date"
placeholder="结束时间">
</el-date-picker>
</div>
<div class="form">
<div class="name mar-l83">当用户做过</div>
<el-select v-model="leftForm.select22" placeholder="请选择" class="win432">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text-line mar-l83">
<div class="line"></div>
<div class="text">时</div>
<div class="line"></div>
</div>
<div class="form mar-l83">
<div class="name">活动期间，最多向用户展示</div>
<el-select class="win150" v-model="leftForm.select77" placeholder="请选择">
<el-option
v-for="item in select8Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name hou">发送</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
export default {
data() {
return {
checkbox: ['仅发送一次', '基于用户事件触发', '周期性推送'],
radio: '1',
leftForm: {
select1: 0,
select2: '',
select22: '',
select3: 0,
select4: 0,
select5: 0,
select6: 0,
select7: 0,
select77: 0,
input1: '',
input2: '',
input22: '',
input3: '',
input33: '',
input4: '',
input5: '',
input6: ''
},
options: [
{
value: '1',
label: '立即弹窗'
},
{
value: '2',
label: '在制定页面显示弹窗'
}
],
select1Options: [],
select2Options: [
{
value: 1,
label: '连续7日未登录'
},
{
value: 2,
label: '连续30日未登录'
}
],
select3Options: [],
select4Options: [],
select5Options: [],
select6Options: [],
select7Options: [],
select8Options: []
}
},
mounted() {
this.setArrData(['立即发送', '定时发送'], 'select1Options')
this.setArrData(['立即', '等待'], 'select3Options')
this.setArrData(['分钟', '小时', '天'], 'select4Options')
this.setArrData(['每日', '每周', '每月'], 'select5Options')
this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
this.setArrData([
'1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号'
], 'select7Options')
this.setArrData([
'无限', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'
], 'select8Options')
// this.getUserConfig()
},
methods: {
getUserConfig() {
const id = JSON.parse(window.sessionStorage.caseData).id
api
.getUserConfig(id)
.then(response => {
this.setArrData(response.data.list, 'select2Options')
console.log(response)
})
.finally(() => {
})
},
setArrData (allItem, data) {
allItem.map((item, index) => {
this[data].push({
value: index,
label: item
})
})
},
navItemChange(n) {
this.navItemIndex = n
}
}
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-checkbox,.el-radio{
margin: 0 0 0 20px !important;
}
&.mar-el-checkbox{
margin-left: 0 !important;
margin-right: 0 !important;
}
.el-input__inner{
background: #F5F7FA !important;
}
}
.form-box{
padding: 16px 24px;
.form{
align-items: center;
display: flex;
margin-bottom: 16px;
&.top{
align-items: baseline;
}
.name{
font-size: 16px;
color: #666666;
margin-right: 20px;
&.hou{
margin-left: 20px;
}
span{
font-weight: bold;
color: #222222;
}
}
}
.content-bottom-form{
border-top: 1px solid #eee;
}
}
.radio-right-form{
}
.text-line{
width: 530px;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 16px;
.line{
width: 250px;
height: 1px;
background: #EEEEEE;
}
.text{
font-size: 16px;
color: #666666;
line-height: 22px;
}
}
.mar-l224{
margin-left: 224px;
}
.mar-l80{
margin-left: 80px;
}
.mar-l275{
margin-left: 275px;
}
.mar-l180{
margin-left: 180px;
}
.mar-l232{
margin-left: 232px;
}
.mar-l83{
margin-left: 83px;
}
.mar-t16{
margin-top: 16px;
}
.mar-lr16{
margin: 0 16px;
}
.mar-l16{
margin-left: 16px;
}
.win500{
width: 500px;
}
.win448{
width: 448px;
}
.win279{
width: 279px;
}
.win432{
width: 432px;
}
.win150{
width: 150px;
}
</style>
src/pages/practice/components/copy/tabForm6.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div class="form-box">
<div class="form">
<div class="name">推送规则</div>
<el-radio class="mar-el-checkbox" v-model="radio" label="1" border>仅发送一次</el-radio>
<el-radio v-model="radio" label="2" border>基于用户事件触发</el-radio>
<el-radio v-model="radio" label="3" border>周期性推送</el-radio>
</div>
<div class="radio-form1" v-if="radio == 1">
<div class="form mar-l83">
<el-select v-model="leftForm.select1" placeholder="请选择">
<el-option
v-for="item in select1Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="form mar-l83" v-if="leftForm.select1 == 1">
<div class="name">消息将于</div>
<el-date-picker
v-model="leftForm.input1"
type="date"
placeholder="选择日期">
</el-date-picker>
<div class="name hou">准时发送</div>
</div>
</div>
<div class="radio-form2" v-if="radio == 2">
<div class="form mar-l83">
<div class="name">从</div>
<el-date-picker
v-model="leftForm.input2"
type="date"
placeholder="开始时间">
</el-date-picker>
<div class="name hou">到</div>
<el-date-picker
v-model="leftForm.input3"
type="date"
placeholder="结束时间">
</el-date-picker>
</div>
<div class="form">
<div class="name mar-l83">当用户做过</div>
<el-select v-model="leftForm.select2" placeholder="请选择" class="win432">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text-line mar-l83">
<div class="line"></div>
<div class="text">时</div>
<div class="line"></div>
</div>
<div class="form mar-l83">
<div class="name">活动期间，最多向用户展示</div>
<el-select class="win150" v-model="leftForm.select7" placeholder="请选择">
<el-option
v-for="item in select8Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name hou">发送</div>
</div>
</div>
<div class="radio-form3" v-if="radio == 3">
<div class="form mar-l83">
<div class="name">从</div>
<el-date-picker
v-model="leftForm.input22"
type="date"
placeholder="开始时间">
</el-date-picker>
<div class="name hou">到</div>
<el-date-picker
v-model="leftForm.input33"
type="date"
placeholder="结束时间">
</el-date-picker>
</div>
<div class="form">
<div class="name mar-l83">当用户做过</div>
<el-select v-model="leftForm.select22" placeholder="请选择" class="win432">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text-line mar-l83">
<div class="line"></div>
<div class="text">时</div>
<div class="line"></div>
</div>
<div class="form mar-l83">
<div class="name">活动期间，最多向用户展示</div>
<el-select class="win150" v-model="leftForm.select77" placeholder="请选择">
<el-option
v-for="item in select8Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name hou">发送</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
export default {
data() {
return {
checkbox: ['仅发送一次', '基于用户事件触发', '周期性推送'],
radio: '1',
leftForm: {
select1: 0,
select2: '',
select22: '',
select3: 0,
select4: 0,
select5: 0,
select6: 0,
select7: 0,
select77: 0,
input1: '',
input2: '',
input22: '',
input3: '',
input33: '',
input4: '',
input5: '',
input6: ''
},
options: [
{
value: '1',
label: '立即弹窗'
},
{
value: '2',
label: '在制定页面显示弹窗'
}
],
select1Options: [],
select2Options: [
{
value: 1,
label: '连续7日未登录'
},
{
value: 2,
label: '连续30日未登录'
}
],
select3Options: [],
select4Options: [],
select5Options: [],
select6Options: [],
select7Options: [],
select8Options: []
}
},
mounted() {
this.setArrData(['立即发送', '定时发送'], 'select1Options')
this.setArrData(['立即', '等待'], 'select3Options')
this.setArrData(['分钟', '小时', '天'], 'select4Options')
this.setArrData(['每日', '每周', '每月'], 'select5Options')
this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
this.setArrData([
'1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号'
], 'select7Options')
this.setArrData([
'无限', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'
], 'select8Options')
// this.getUserConfig()
},
methods: {
getUserConfig() {
const id = JSON.parse(window.sessionStorage.caseData).id
api
.getUserConfig(id)
.then(response => {
this.setArrData(response.data.list, 'select2Options')
console.log(response)
})
.finally(() => {
})
},
setArrData (allItem, data) {
allItem.map((item, index) => {
this[data].push({
value: index,
label: item
})
})
},
navItemChange(n) {
this.navItemIndex = n
}
}
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-checkbox,.el-radio{
margin: 0 0 0 20px !important;
}
&.mar-el-checkbox{
margin-left: 0 !important;
margin-right: 0 !important;
}
.el-input__inner{
background: #F5F7FA !important;
}
}
.form-box{
padding: 16px 24px;
.form{
align-items: center;
display: flex;
margin-bottom: 16px;
&.top{
align-items: baseline;
}
.name{
font-size: 16px;
color: #666666;
margin-right: 20px;
&.hou{
margin-left: 20px;
}
span{
font-weight: bold;
color: #222222;
}
}
}
.content-bottom-form{
border-top: 1px solid #eee;
}
}
.radio-right-form{
}
.text-line{
width: 530px;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 16px;
.line{
width: 250px;
height: 1px;
background: #EEEEEE;
}
.text{
font-size: 16px;
color: #666666;
line-height: 22px;
}
}
.mar-l224{
margin-left: 224px;
}
.mar-l80{
margin-left: 80px;
}
.mar-l275{
margin-left: 275px;
}
.mar-l180{
margin-left: 180px;
}
.mar-l232{
margin-left: 232px;
}
.mar-l83{
margin-left: 83px;
}
.mar-t16{
margin-top: 16px;
}
.mar-lr16{
margin: 0 16px;
}
.mar-l16{
margin-left: 16px;
}
.win500{
width: 500px;
}
.win448{
width: 448px;
}
.win279{
width: 279px;
}
.win432{
width: 432px;
}
.win150{
width: 150px;
}
</style>
src/pages/practice/components/copy/tabForm7.vue 0 → 100644
浏览文件 @ daad3b2f
<template>
<div class="form-box">
<div class="form">
<div class="name">推送规则</div>
<el-radio class="mar-el-checkbox" v-model="radio" label="1" border>基于用户浏览事件显示</el-radio>
<el-radio v-model="radio" label="2" border>基于用户事件触发显示</el-radio>
</div>
<div class="radio-form1" v-if="radio == 1">
<div class="form mar-l83">
<div class="name">当用户浏览</div>
<el-input class="win279" v-model="leftForm.input1" placeholder="请输入内容"></el-input>
<div class="name hou">时，立即弹窗</div>
</div>
</div>
<div class="radio-form2" v-if="radio == 2">
<div class="radio-right-form" v-if="radio == 2">
<div class="form">
<div class="name mar-l80">当用户做过</div>
<el-select v-model="leftForm.select6" placeholder="请选择" class="win500">
<el-option
v-for="item in select5Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text-line mar-l180">
<div class="line"></div>
<div class="text">后</div>
<div class="line"></div>
</div>
<div class="form mar-l180">
<el-select v-model="leftForm.select7" placeholder="请选择" class="win500">
<el-option
v-for="item in select6Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<template v-if="leftForm.select7 == 1">
<div class="form mar-l180 relation">
<el-select v-model="leftForm.select8" placeholder="请选择" class="win500">
<el-option
v-for="item in select2Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="form mar-l180">
<div class="name">等于</div>
<el-input class="win448" v-model="leftForm.input3" placeholder="请输入内容"></el-input>
</div>
<div class="form mar-l232">
<el-input class="win448" v-model="leftForm.input4" placeholder="请输入内容"></el-input>
</div>
</template>
</div>
</div>
<div class="content-bottom-form">
<div class="form top">
<div class="name">弹出频率</div>
<div class="f-box">
<div class="form" style="padding-top:16px">
<div class="name">若用户<span>点击</span>弹窗，下次触发相同条件时，弹窗将会</div>
<el-select v-model="leftForm.select3" placeholder="请选择" class="win279">
<el-option
v-for="item in select3Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<template v-if="leftForm.select3 == 1">
<div class="form" >
<div class="name">添加弹出次数上限：活动期间，最多向用户展示</div>
<el-input-number v-model="countNum1" controls-position="right" :min="1" :max="10"></el-input-number>
</div>
<div class="form">
<el-checkbox class="mar-el-checkbox" label="1">添加弹出时间间隔：点击弹窗后</el-checkbox>
<el-input-number style="margin-left:20px" v-model="countNum2" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;次
</div>
<div class="form">
<el-input-number v-model="countNum3" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
<el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
<el-option
v-for="item in select4Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
</div>
</template>
<template v-if="leftForm.select3 == 2">
<div class="form">
<el-input-number v-model="countNum4" controls-position="right" :min="1" :max="10"></el-input-number>&nbsp;&nbsp;&nbsp;
<el-select v-model="leftForm.select5" placeholder="请选择" class="win279">
<el-option
v-for="item in select4Options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="name">&nbsp;&nbsp;&nbsp;内不再弹出</div>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
export default {
data() {
return {
checkbox: ['仅发送一次', '基于用户事件触发', '周期性推送'],
radio: '1',
leftForm: {
select1: 0,
select2: '',
select22: '',
select3: 0,
select4: 0,
select5: 0,
select6: '',
select7: 0,
select77: 0,
input1: 'https://www.baidu.com',
input2: '',
input22: '',
input3: '',
input33: '',
input4: '',
input5: '',
input6: ''
},
countNum1: 0,
countNum2: 0,
countNum3: 0,
countNum4: 0,
options: [
{
value: '1',
label: '立即弹窗'
},
{
value: '2',
label: '在制定页面显示弹窗'
}
],
select1Options: [],
select2Options: [],
select3Options: [],
select4Options: [],
select5Options: [
{
value: 1,
label: '登录'
},
{
value: 2,
label: '点击banner'
},
{
value: 3,
label: '收藏'
}
],
select6Options: [],
select7Options: [],
select8Options: []
}
},
mounted() {
this.setArrData(['立即发送', '定时发送'], 'select1Options')
this.setArrData(['立即', '等待'], 'select3Options')
this.setArrData(['分钟', '小时', '天'], 'select4Options')
// this.setArrData(['每日', '每周', '每月'], 'select5Options')
// this.setArrData(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 'select6Options')
// this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
const opt = ['页面URL', '页面标题', '来源地址', '来源域名', '渠道来源分组', '搜索引擎', '搜索词', '社交媒体', '分享者ID', '社交媒体分享来源', '分享层级', '分享地址', '场景值类型']
this.setArrData(opt, 'select2Options')
this.setArrData(['立即显示弹窗', '在用户后续访问到指定页面时弹窗'], 'select6Options')
// this.getUserConfig()
},
methods: {
getUserConfig() {
const id = JSON.parse(window.sessionStorage.caseData).id
api
.getUserConfig(id)
.then(response => {
this.setArrData(response.data.list, 'select5Options')
console.log(response)
})
.finally(() => {
})
},
setArrData (allItem, data) {
allItem.map((item, index) => {
this[data].push({
value: index,
label: item
})
})
},
navItemChange(n) {
this.navItemIndex = n
}
}
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-checkbox,.el-radio{
margin: 0 0 0 20px !important;
}
&.mar-el-checkbox{
margin-left: 0 !important;
margin-right: 0 !important;
}
.el-input__inner{
background: #F5F7FA !important;
}
}
.form-box{
padding: 16px 24px;
.form{
align-items: center;
display: flex;
margin-bottom: 16px;
&.top{
align-items: baseline;
}
.name{
font-size: 16px;
color: #666666;
margin-right: 20px;
&.hou{
margin-left: 20px;
}
span{
font-weight: bold;
color: #222222;
}
}
}
.content-bottom-form{
border-top: 1px solid #eee;
}
}
.radio-right-form{
}
.text-line{
width: 530px;
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 16px;
.line{
width: 250px;
height: 1px;
background: #EEEEEE;
}
.text{
font-size: 16px;
color: #666666;
line-height: 22px;
}
}
.mar-l224{
margin-left: 224px;
}
.mar-l80{
margin-left: 80px;
}
.mar-l275{
margin-left: 275px;
}
.mar-l180{
margin-left: 180px;
}
.mar-l232{
margin-left: 232px;
}
.mar-l83{
margin-left: 83px;
}
.mar-t16{
margin-top: 16px;
}
.mar-lr16{
margin: 0 16px;
}
.mar-l16{
margin-left: 16px;
}
.win500{
width: 500px;
}
.win448{
width: 448px;
}
.win279{
width: 279px;
}
.win432{
width: 432px;
}
.win150{
width: 150px;
}
</style>
src/pages/practice/components/practice1.vue
浏览文件 @ daad3b2f
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="downs" @click="goPage(data.accessory)">产品说明书下载</div> <div class="downs" @click="goPage(data.accessory)">产品说明书下载</div>
</div> </div>
<div class="content-box"> <div class="content-box">
<div class="title pdf-get-height">产品说明书</div> <!-- <div class="title pdf-get-height">产品说明书</div> -->
<!-- <div class="tit-h2">序言</div> --> <!-- <div class="tit-h2">序言</div> -->
<div class="text pdf-height embed-height"><embed class="embed" width="100%" height="100%" :src="data.accessory" /></div> <div class="text pdf-height embed-height"><embed class="embed" width="100%" height="100%" :src="data.accessory" /></div>
</div> </div>
...@@ -102,7 +102,7 @@ export default { ...@@ -102,7 +102,7 @@ export default {
countDomHeight() { countDomHeight() {
$('.practice-box').css('height', $('.app-main').height() - 139 + 'px') $('.practice-box').css('height', $('.app-main').height() - 139 + 'px')
$('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px') $('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
$('.embed-height').css('height', $('.item-left').height() - $('.item-left .title').outerHeight() - $('.item-left .tit-h2').outerHeight() - $('.item-left .heads').outerHeight() - 20 + 'px') $('.embed-height').css('height', $('.item-left').height() - $('.item-left .heads').outerHeight() - 20 + 'px')
$('.pdf-height').css('height', $('.practice-box').height() - ($('.pdf-get-height').outerHeight() + $('.heads').outerHeight())) $('.pdf-height').css('height', $('.practice-box').height() - ($('.pdf-get-height').outerHeight() + $('.heads').outerHeight()))
}, },
tabChange(n) { tabChange(n) {
...@@ -164,34 +164,34 @@ export default { ...@@ -164,34 +164,34 @@ export default {
margin-right: 8px; margin-right: 8px;
flex: 1; flex: 1;
height: 100%; height: 100%;
background: #fff; // background: #fff;
.heads{ .heads{
display: flex; // width: 100%;
align-items: center; max-height: 126px;
background: #FFFFFF; background: url(https://zws-imgs-pub.ezijing.com/static/public/1bee3c4894350a47b4c9898e7efd3954.png);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); background-size: 100% 100%;
padding: 12px 24px; padding: 25px 36px 15px;
.text{ .text{
flex: 1;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; color: rgba(55, 165, 217, .8);
font-weight: 400;
color: #666666;
line-height: 24px;
} }
.downs{ .downs{
width: 98px; width: 104px;
height: 21px;
margin: 0 auto;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC; text-decoration: underline;
font-weight: bold; color: #71CDF9;
color: #5090EB; border-bottom: 1px solid #71CDF9;
line-height: 20px; margin-top: 17px;
margin-left: 40px; margin-bottom: 5px;
cursor: pointer;
} }
} }
.content-box{ .content-box{
padding: 0 24px 24px; padding-bottom: 24px;
padding-top: 11px;
box-sizing: border-box;
// background: #fff;
.title{ .title{
padding: 16px 0; padding: 16px 0;
font-size: 24px; font-size: 24px;
...@@ -221,11 +221,11 @@ export default { ...@@ -221,11 +221,11 @@ export default {
margin-left: 8px; margin-left: 8px;
flex: 1; flex: 1;
height: 100%; height: 100%;
background: #fff; // background: #fff;
.tab-btn{ .tab-btn{
width: 100%; width: 100%;
height: 48px; height: 48px;
background: #f1f1f1; // background: #f1f1f1;
display: flex; display: flex;
li{ li{
cursor: pointer; cursor: pointer;
...@@ -291,6 +291,6 @@ export default { ...@@ -291,6 +291,6 @@ export default {
} }
} }
.embed{ .embed{
transform: translateX(-20px); transform: translateX(-30px);
} }
</style> </style>
src/pages/practice/index.vue
浏览文件 @ daad3b2f
<template> <template>
<div> <div>
<div class="head-steps"> <ul class="head-step">
<li class="active">1.产品分析</li>
<li>2.用户分析</li>
<li>3.用户触达</li>
<li>4.成绩结果</li>
</ul>
<!-- <div class="head-steps">
<div class="title"> <div class="title">
<div class="name" v-if="dataParam.stepIndex == 0">产品分析</div> <div class="name" v-if="dataParam.stepIndex == 0">产品分析</div>
<div class="name" v-if="dataParam.stepIndex == 1">用户分析</div> <div class="name" v-if="dataParam.stepIndex == 1">用户分析</div>
...@@ -12,11 +18,11 @@ ...@@ -12,11 +18,11 @@
<li @click="stepChange(1)" :class="dataParam.stepIndex == 1 && 'active'">2. 用户分析</li> <li @click="stepChange(1)" :class="dataParam.stepIndex == 1 && 'active'">2. 用户分析</li>
<li @click="stepChange(2)" :class="dataParam.stepIndex == 2 && 'active'">3. 用户触达</li> <li @click="stepChange(2)" :class="dataParam.stepIndex == 2 && 'active'">3. 用户触达</li>
</ul> </ul>
</div> </div> -->
<template> <template>
<practice1 @step1Confirm="step1Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 0"></practice1> <practice1 @step1Confirm="step1Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 0"></practice1>
<practice2 @step2Confirm="step2Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 1"></practice2> <!-- <practice2 @step2Confirm="step2Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 1"></practice2>
<practice3 @step3Confirm="step3Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 2"></practice3> <practice3 @step3Confirm="step3Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 2"></practice3> -->
</template> </template>
</div> </div>
</template> </template>
...@@ -76,71 +82,32 @@ export default { ...@@ -76,71 +82,32 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.head-steps{ .head-step{
height: 123px; display: flex;
background: #FFFFFF; justify-content: center;
padding: 0 16px; padding: 30px 0;
box-sizing: border-box; li{
.title{ width: 221px;
// line-height: 54px; height: 34px;
height: 54px; background: url(https://zws-imgs-pub.ezijing.com/static/public/e8c8c498bfa73d57ea70d4fb49be995c.png);
display: flex; background-size: 100% 100%;
align-items: center; font-size: 14px;
border-bottom: 1px solid #eee; font-weight: bold;
.tab-btns{ color: #6BE7FF;
width: 104px; line-height: 19px;
height: 32px; opacity: 0.5;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%); text-align: center;
border-radius: 4px; line-height: 34px;
margin-left: auto; letter-spacing: 8px;
font-size: 14px; margin-right: 60px;
color: #F8F8F8; &:nth-child(4){
cursor: pointer; margin-right: 0;
text-align: center;
line-height: 32px;
} }
} &.active{
.steps-box{ opacity: 1;
display: flex; background: url(https://zws-imgs-pub.ezijing.com/static/public/e8c8c498bfa73d57ea70d4fb49be995c.png);
padding-top: 12px; background-size: 100% 100%;
li{
padding-left: 63px;
box-sizing: border-box;
cursor: pointer;
height: 44px;
line-height: 44px;
font-size: 16px;
font-weight: bold;
color: #666666;
flex: 1;
background: url(https://zws-imgs-pub.ezijing.com/static/public/077728fa84beeb3ca66095e8b5cb0707.png);
background-size:100% 100%;
&:nth-child(1){
padding-left: 40px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/a6651985e66b96cc689907f71b02a539.png);
background-size: 100% 100%;
}
&:nth-child(1){
&.active{
background: url(https://zws-imgs-pub.ezijing.com/static/public/ea86673a7d822c4a6c575a418a68f687.png);
background-size:100% 100%;
color: #fff;
}
}
// https://zws-imgs-pub.ezijing.com/static/public/ea86673a7d822c4a6c575a418a68f687.png
&.active{
background: url(https://zws-imgs-pub.ezijing.com/static/public/f2c7aa268f33a6c7281636dfcf2783f2.png);
background-size:100% 100%;
color: #fff;
}
&:hover{
background: url(https://zws-imgs-pub.ezijing.com/static/public/5ca979e697a63db443b286ee6dcab381.png);
background-size: 100% 100%;
}
} }
} }
} }
.practice-box{
display: flex;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论