Skip to content

X
x-training-new
提交 8c36dd62 authored 作者: matian's avatar matian
浏览文件
操作

Auto stash before merge of "master" and "origin/master"

上级 b3bd3a80
隐藏空白字符变更
内嵌 并排
正在显示 包含 735 行增加 和 72 行删除
src/modules/market-tools/components/Email.vue 0 → 100644
浏览文件 @ 8c36dd62
<template>
<div class="main_content">
<!-- 步骤条 -->
<div class="main_content_left">
<el-steps direction="vertical" :active="stepsIndex">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3" description="111s"></el-step>
</el-steps>
</div>
<!-- 步骤一 -->
<div class="main_content_right">
<cardList class="box-card" v-for="(item, index) in cardList" :key="index" :cardList="item" />
</div>
</div>
</template>
<script>
import cardList from './cardList.vue'
export default {
components: {
cardList
},
data() {
return {
stepsIndex: 0,
cardList: [
{
cardTitle: '个人设置',
form: {
personAttribute: [
{
personal: '',
equal: '',
range: '',
// 第一列选项
personalMap: [
{
value: 'personal',
label: '年龄',
disabled: false,
children: [
{ value: '0', label: '18岁以下' },
{ value: '1', label: '18-30' },
{ value: '2', label: '31-45' },
{ value: '3', label: '46-60' },
{ value: '4', label: '60岁以上' }
]
},
{
value: 'education',
label: '学历',
disabled: false,
children: [
{ value: '0', label: '初中及以下' },
{ value: '1', label: '高中及中专' },
{ value: '2', label: '本科' },
{ value: '3', label: '硕士' },
{ value: '4', label: '博士及以上' }
]
},
{
value: 'occupation',
label: '职业',
disabled: false,
children: [
{ value: '0', label: '学生' },
{ value: '1', label: '人事' },
{ value: '2', label: '医生' }
]
},
{
value: 'fund',
label: '是否交易过基金产品',
disabled: false,
children: [
{ value: '0', label: '是' },
{ value: '1', label: '否' }
]
},
{
value: 'experience',
label: '理财经验',
disabled: false,
children: [
{ value: '0', label: '没有经验' },
{ value: '1', label: '1-3年' },
{ value: '2', label: '3-5年' },
{ value: '3', label: '5年以上' }
]
}
],
// 第三列选项
rangeMap: [],
// 第二列选项
equalMap: [
{ value: '1', label: '等于' },
{ value: '2', label: '不等于' }
]
}
]
}
},
{
cardTitle: '资产特征',
form: {
personAttribute: [
{
personal: '',
equal: '',
range: '',
// 第一列选项
personalMap: [
{
value: 'personal',
label: '年收入总额',
disabled: false,
children: [
{ value: '0', label: '5万以下' },
{ value: '1', label: '5万-15万' },
{ value: '2', label: '15-25万' },
{ value: '3', label: '25-50万' },
{ value: '4', label: '50-100万' },
{ value: '5', label: '100万以上' }
]
},
{
value: 'education',
label: '可支配资产总额',
disabled: false,
children: [
{ value: '0', label: '10万以下' },
{ value: '1', label: '10万-20万' },
{ value: '2', label: '20-50万' },
{ value: '3', label: '50-80万' },
{ value: '4', label: '80-100万' },
{ value: '5', label: '100万-300万' },
{ value: '6', label: '300万以上' }
]
},
{
value: 'occupation',
label: '金融资产中占比最高',
disabled: false,
children: [
{ value: '0', label: '存款' },
{ value: '1', label: '基金' },
{ value: '2', label: '保险' },
{ value: '3', label: '股票' },
{ value: '4', label: '理财产品' },
{ value: '5', label: '其他' }
]
},
{
value: 'fund',
label: '金融产品交易偏好',
disabled: false,
children: [
{ value: '0', label: '每周交易' },
{ value: '1', label: '每月交易' },
{ value: '2', label: '每半年交易' },
{ value: '3', label: '每年交易' },
{ value: '4', label: '几乎不交易' }
]
},
{
value: 'experience',
label: '风险承受能力分级',
disabled: false,
children: [
{ value: '0', label: '谨慎型' },
{ value: '1', label: '稳健型' },
{ value: '2', label: '平衡型' },
{ value: '3', label: '进取型' },
{ value: '4', label: '激进型' }
]
}
],
// 第二列选项
equalMap: [
{ value: '1', label: '等于' },
{ value: '2', label: '不等于' }
]
}
]
}
},
{
cardTitle: '营销特征',
form: {
personAttribute: [
{
personal: '',
equal: '',
range: '',
// 第一列选项
personalMap: [
{
value: 'personal',
label: '价格敏感度',
disabled: false,
children: [
{ value: '0', label: '非常不敏感' },
{ value: '1', label: '不敏感' },
{ value: '2', label: '一般' },
{ value: '3', label: '敏感' },
{ value: '4', label: '非常敏感' }
]
},
{
value: 'education',
label: '品牌敏感度',
disabled: false,
children: [
{ value: '0', label: '非常不敏感' },
{ value: '1', label: '不敏感' },
{ value: '2', label: '一般' },
{ value: '3', label: '敏感' },
{ value: '4', label: '非常敏感' }
]
},
{
value: 'occupation',
label: '收益敏感度',
disabled: false,
children: [
{ value: '0', label: '非常不敏感' },
{ value: '1', label: '不敏感' },
{ value: '2', label: '一般' },
{ value: '3', label: '敏感' },
{ value: '4', label: '非常敏感' }
]
},
{
value: 'fund',
label: '金融知识熟悉度',
disabled: false,
children: [
{ value: '0', label: '没有任何了解' },
{ value: '1', label: '了解非常少' },
{ value: '2', label: '一般' },
{ value: '3', label: '比较了解' },
{ value: '4', label: '非常了解' }
]
},
{
value: 'experience',
label: '浏览产品信息渠道偏好',
disabled: false,
children: [
{ value: '0', label: '线下网点' },
{ value: '1', label: '机构官网' },
{ value: '2', label: '金融类应用' },
{ value: '3', label: '生活类应用' },
{ value: '4', label: '微信公众号' },
{ value: '5', label: '短信' },
{ value: '6', label: '邮件' },
{ value: '7', label: '主题沙龙' },
{ value: '8', label: '其他' }
]
}
],
// 第二列选项
equalMap: [
{ value: '1', label: '等于' },
{ value: '2', label: '不等于' }
]
}
]
}
},
{
cardTitle: '消费特征',
form: {
personAttribute: [
{
personal: '',
equal: '',
range: '',
// 第一列选项
personalMap: [
{
value: 'personal',
label: '娱乐偏好',
disabled: false,
children: [
{ value: '0', label: '影音' },
{ value: '1', label: '运动' },
{ value: '2', label: '美食' },
{ value: '3', label: '旅游' },
{ value: '4', label: '游戏' },
{ value: '5', label: '其他' }
]
},
{
value: 'education',
label: '社交活跃平台',
disabled: false,
children: [
{ value: '0', label: 'QQ' },
{ value: '1', label: '微信' },
{ value: '2', label: '微博' },
{ value: '3', label: '小红书' },
{ value: '4', label: '短视频网站' },
{ value: '5', label: '其他' }
]
},
{
value: 'occupation',
label: '月均消费金额',
disabled: false,
children: [
{ value: '0', label: '1000及以下' },
{ value: '1', label: '1000-3000' },
{ value: '2', label: '3000-5000' },
{ value: '3', label: '5000-10000' },
{ value: '4', label: '10000以上' }
]
},
{
value: 'fund',
label: '购物渠道偏好',
disabled: false,
children: [
{ value: '0', label: '线下门店' },
{ value: '1', label: '电商网站' },
{ value: '2', label: '购物类手机应用' },
{ value: '3', label: '视频类手机应用' },
{ value: '4', label: '其他' }
]
},
{
value: 'experience',
label: '购物服务要求程度',
disabled: false,
children: [
{ value: '0', label: '服务要求低' },
{ value: '1', label: '服务要求中等' },
{ value: '2', label: '服务要求高' }
]
}
],
// 第二列选项
equalMap: [
{ value: '1', label: '等于' },
{ value: '2', label: '不等于' }
]
}
]
}
},
{
cardTitle: '需求特征',
form: {
personAttribute: [
{
personal: '',
equal: '',
range: '',
// 第一列选项
personalMap: [
{
value: 'personal',
label: '感兴趣的金融产品',
disabled: false,
children: [
{ value: '0', label: '存款' },
{ value: '1', label: '基金' },
{ value: '2', label: '保险' },
{ value: '3', label: '股票' },
{ value: '4', label: '其他' }
]
},
{
value: 'education',
label: '浏览金融产品时关注词条',
disabled: false,
children: [
{ value: '0', label: '收益率' },
{ value: '1', label: '收益周期' },
{ value: '2', label: '风险属性' },
{ value: '3', label: '购买赎回费率' },
{ value: '4', label: '起购金额' },
{ value: '5', label: '机构名称' }
]
},
{
value: 'occupation',
label: '感兴趣的金融信息',
disabled: false,
children: [
{ value: '0', label: '国家政策' },
{ value: '1', label: '行业动态' },
{ value: '2', label: '金融机构信息' },
{ value: '3', label: '投资理财案例' },
{ value: '4', label: '产品宣讲' },
{ value: '5', label: '其他' }
]
},
{
value: 'fund',
label: '感兴趣的优惠方式',
disabled: false,
children: [
{ value: '0', label: '体验金' },
{ value: '1', label: '红包' },
{ value: '2', label: '优惠费率' },
{ value: '3', label: '新手标' },
{ value: '4', label: '会员积分' },
{ value: '5', label: '实物礼品' },
{ value: '6', label: '其他' }
]
},
{
value: 'experience',
label: '金融产品服务要求程度',
disabled: false,
children: [
{ value: '0', label: '几乎不需要客服' },
{ value: '1', label: '在线客服' },
{ value: '2', label: '电话客服' },
{ value: '3', label: '一对一客户经理' }
]
}
],
// 第二列选项
equalMap: [
{ value: '1', label: '等于' },
{ value: '2', label: '不等于' }
]
}
]
}
}
]
}
}
}
</script>
<style lang="scss" scoped>
.main_content {
display: flex;
justify-content: space-around;
.main_content_left {
min-height: 400px;
}
.main_content_right {
display: flex;
flex-direction: column;
justify-content: space-around;
.box-card {
min-width: 520px;
margin-top: 20px;
}
}
}
</style>
src/modules/market-tools/components/cardList.vue 0 → 100644
浏览文件 @ 8c36dd62
<template>
<div class="main_content">
<!-- 步骤一 -->
<el-card class="box_card">
<div slot="header" class="clearfix">
<span>{{ cardList.cardTitle }}</span>
<img
src="https://webapp-pub.ezijing.com/x-training-new/bg_add.png"
alt=""
@click="handleAdd"
class="box_card_add"
style="float: right; padding: 3px 0"
/>
<!-- <el-button @click="handleAdd" type="text" icon="el-icon-circle-plus-outline" class="box_card_add"></el-button> -->
</div>
<div class="optionList">
<div class="optionList_left">
<div v-for="item in cardList.form.personAttribute.length - 1" :key="item">
<div class="optionList_left_line"></div>
<div class="optionList_left_text">且</div>
</div>
</div>
<div class="optionList_right">
<el-form :inline="true" :model="cardList.form">
<div v-for="(item, indexB) in list" :key="indexB">
<el-form-item>
<el-select v-model="item.personal">
<el-option
v-for="it in item.personalMap"
:key="it.value"
:label="it.label"
:value="it.value"
:disabled="it.disabled"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="item.equal">
<el-option v-for="it in item.equalMap" :key="it.value" :label="it.label" :value="it.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="item.range">
<template v-if="item.personalMap.length > 0 && item.personalMap.find(i => item.personal === i.value)">
<el-option
v-for="it in item.personalMap.find(i => item.personal === i.value).children"
:key="it.value"
:label="it.label"
:value="it.value"
>
</el-option>
</template>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="text" @click="handleDelete(item, indexB)" icon="el-icon-close"></el-button>
</el-form-item>
</div>
</el-form>
</div>
</div>
</el-card>
</div>
</template>
<script>
export default {
props: {
cardList: {
type: Object,
default: () => {}
}
},
computed: {
list() {
return this.cardList.form.personAttribute.map(item => {
item.personalMap = item.personalMap.map(i => {
i.disabled = !!this.cardList.form.personAttribute.find(item => item.personal === i.value)
console.log(item.personal, i.value)
return i
})
return item
})
}
},
methods: {
// // 增加
handleAdd() {
if (this.cardList.form.personAttribute.length < this.cardList.form.personAttribute[0].personalMap.length) {
const item = Object.assign({}, this.cardList.form.personAttribute[0])
item.personal = ''
item.equal = ''
item.range = ''
// eslint-disable-next-line vue/no-mutating-props
this.cardList.form.personAttribute.push(item)
} else {
this.$message.warning('添加项不能超过下拉选项个数')
}
},
// 删除
handleDelete(item, indexB) {
// console.log(item, 'item11')
if (this.cardList.form.personAttribute.length > 1) {
// eslint-disable-next-line vue/no-mutating-props
this.cardList.form.personAttribute.splice(indexB, 1)
} else {
this.$message.warning('默认至少有一条数据')
}
}
}
}
</script>
<style lang="scss" scoped>
.main_content {
display: flex;
justify-content: space-around;
.main_content_left {
min-height: 400px;
}
.main_content_right {
.box_card {
min-width: 520px;
.optionList {
display: flex;
.optionList_left {
position: relative;
display: flex;
flex-direction: column;
.optionList_left_line {
width: 0px;
height: 85px;
border: 1px solid #c5c5c5;
opacity: 1;
}
.optionList_left_text {
border-radius: 50%;
width: 25px;
height: 25px;
background: #fff;
border: 1px solid #c5c5c5;
text-align: center;
font-size: 14px;
font-weight: 400;
line-height: 25px;
color: #49bba2;
margin-left: -12px;
margin-top: -60px;
}
}
.optionList_right {
margin-left: 16px;
.el-form-item {
padding-top: 0;
.optionList_right_del {
width: 12px;
height: 12px;
opacity: 1;
}
}
}
}
}
}
}
</style>
src/modules/market-tools/views/Index.vue
浏览文件 @ 8c36dd62
...@@ -4,8 +4,13 @@ ...@@ -4,8 +4,13 @@
<div class="tool-bg"> <div class="tool-bg">
<div class="tool-content"> <div class="tool-content">
<ul> <ul>
<li @click="selectList(index)" v-for="(item, index) in list" :key="index" :class="listIndex === index ? 'active' : ''"> <li
<img :src="listIndex === index ? item.iconActive : item.icon"> @click="selectList(index)"
v-for="(item, index) in list"
:key="index"
:class="listIndex === index ? 'active' : ''"
>
<img :src="listIndex === index ? item.iconActive : item.icon" />
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
</li> </li>
</ul> </ul>
...@@ -23,107 +28,104 @@ export default { ...@@ -23,107 +28,104 @@ export default {
listIndex: 2, listIndex: 2,
list: [ list: [
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon1.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon3.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon1.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon-a3.png',
text: '搜索引擎优化' text: '视频营销'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon2.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon2.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
text: '搜索引擎营销' text: '邮件营销'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon3.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon3.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
text: '视频营销' text: 'APP营销'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon4.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon4.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
text: '社交媒体营销' text: '移动短信营销'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon5.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon5.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
text: '智能推荐' text: '微信提醒营销'
} }
] ]
} }
}, },
methods: { methods: {
selectList(n) { selectList(n) {
this.listIndex = n console.log(n, 'nnnn')
if (n === 9) {
// this.$router.push('/')
}
// if (n === 2) return
// this.$message('暂未开通')
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.market-tools{ .market-tools {
.tool-main{ .tool-main {
background: #fff; background: #fff;
padding: 10px 0 50px 0; padding-bottom: 11px;
border-radius: 16px; .tool-bg {
.tool-bg{
position: relative; position: relative;
width: 1112px; width: 1112px;
height: 489px; height: 489px;
margin: 0 auto; margin: 0 auto;
background: url(https://webapp-pub.ezijing.com/x-training-new/tool-index-bg.png); background: url(https://webapp-pub.ezijing.com/x-training-new/tool-index-bg.png);
background-size: 100% 100%; background-size: 100% 100%;
.tool-content{ .tool-content {
width: 600px; width: 708px;
position: absolute; position: absolute;
top: 166px; top: 166px;
left: 270px; left: 282px;
ul{ ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
li{ li {
width: 180px; width: 180px;
height: 96px; height: 96px;
background: rgba(255, 255, 255, 0.39); background: #f5f5f5;
border: 1px solid #E8E8E8; border-radius: 6px;
opacity: 1; display: flex;
border-radius: 10px; align-items: center;
margin: 0 20px 20px 0; // margin: 0 10px 10px 0;
text-align: center; margin: 0 45px 10px 24px;
position: relative;
cursor: pointer; cursor: pointer;
&.active{ &.active {
border-color: rgba(73, 187, 162, 1); background: #68b8a4;
box-shadow: 0px 3px 18px rgba(51, 51, 51, 0.15); .text {
// background: #68B8A4; color: #fff;
.text{
// color: #fff;
} }
} }
img{ img {
margin-top: 20px; margin-left: 16px;
// margin-left: 16px;
} }
.text{ .text {
position: absolute; font-size: 14px;
bottom: 15px; color: #797979;
left: 0; line-height: 24px;
width: 100%; margin-left: 14px;
font-size: 16px;
color: #333333;
line-height: 100%;
// margin-top: 18px;
// margin-left: 14px;
} }
} }
} }
.confirm-btn{ .confirm-btn {
width: 119px; width: 119px;
background: #68B8A4; background: #68b8a4;
border-radius: 16px; border-radius: 16px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
line-height: 32px; line-height: 32px;
cursor: pointer; cursor: pointer;
} }
......
src/modules/market-tools/views/Tool.vue
浏览文件 @ 8c36dd62
<template> <template>
<div class="tool-box"> <div class="tool-box">
<ul class="left-nav"> <ul class="left-nav">
<li @click="selectList(index)" v-for="(item, index) in list" :key="index" :class="listIndex === index ? 'active' : ''"> <li
@click="selectList(index)"
v-for="(item, index) in list"
:key="index"
:class="listIndex === index ? 'active' : ''"
>
<div class="icon-box"> <div class="icon-box">
<img :src="listIndex === index ? item.iconActive : item.icon"> <img :src="listIndex === index ? item.iconActive : item.icon" />
</div> </div>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
</li> </li>
</ul> </ul>
<div class="right-content"> <div class="right-content">
<dou-yin></dou-yin> <!-- <dou-yin></dou-yin> -->
<Email />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import DouYin from '../components/DouYin.vue' import Email from '../components/Email.vue'
// import DouYin from '../components/DouYin.vue'
export default { export default {
components: { DouYin }, components: { Email },
data() { data() {
return { return {
listIndex: 2, listIndex: 9,
list: [ list: [
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
...@@ -90,40 +97,40 @@ export default { ...@@ -90,40 +97,40 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tool-box{ .tool-box {
display: flex; display: flex;
padding: 25px 30px 30px; padding: 25px 30px 30px;
.left-nav{ .left-nav {
width: 264px; width: 264px;
height: 684px; height: 684px;
background: url(https://webapp-pub.ezijing.com/x-training-new/nav-bg.png); background: url(https://webapp-pub.ezijing.com/x-training-new/nav-bg.png);
background-size: 100% 100%; background-size: 100% 100%;
padding-top: 18px; padding-top: 18px;
box-sizing: border-box; box-sizing: border-box;
li{ li {
width: 220px; width: 220px;
height: 58px; height: 58px;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
cursor: pointer; cursor: pointer;
&.active{ &.active {
background: #68B8A4; background: #68b8a4;
.text{ .text {
color: #fff; color: #fff;
} }
} }
.icon-box{ .icon-box {
width: 50px; width: 50px;
margin-left: 40px; margin-left: 40px;
} }
.text{ .text {
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
} }
} }
} }
.right-content{ .right-content {
flex: 1; flex: 1;
background: #fff; background: #fff;
margin-left: 30px; margin-left: 30px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论