Skip to content

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

开发实操3.1

上级 daad3b2f
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 873 行增加 和 175 行删除
package-lock.json
浏览文件 @ 3d19d4a5
......@@ -2031,6 +2031,11 @@
"resolved": "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz",
"integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28="
},
"blueimp-md5": {
"version": "2.18.0",
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.18.0.tgz",
"integrity": "sha512-vE52okJvzsVWhcgUHOv+69OG3Mdg151xyn41aVQN/5W5S+S43qZhxECtYLAEHMSFWX6Mv5IZrzj3T5+JqXfj5Q=="
},
"bn.js": {
"version": "5.1.3",
"resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-5.1.3.tgz",
......@@ -3631,6 +3636,14 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": {
"zrender": "4.3.2"
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
......@@ -10015,10 +10028,9 @@
"dev": true
},
"qs": {
"version": "6.9.4",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz",
"integrity": "sha1-kJCykNH5FyjTwi5UhDykSupatoc=",
"dev": true
"version": "6.9.6",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
"integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
},
"query-string": {
"version": "4.3.4",
......@@ -10478,6 +10490,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-detector": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.1.10.tgz",
"integrity": "sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw=="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
......@@ -12439,6 +12456,16 @@
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
},
"vue-echarts": {
"version": "5.0.0-beta.0",
"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz",
"integrity": "sha512-QZFKGXDAYFQo+F20REpzcdLx79nsl4kOorJRpN+08aYq4YiIlmtWss1Lxadm7Fo+NYyWm8nnT+h4xHv3uqWIDQ==",
"requires": {
"core-js": "^3.4.4",
"lodash": "^4.17.15",
"resize-detector": "^0.1.10"
}
},
"vue-eslint-parser": {
"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",
......@@ -13326,6 +13353,11 @@
"dev": true
}
}
},
"zrender": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
}
}
}
package.json
浏览文件 @ 3d19d4a5
......@@ -74,6 +74,8 @@
"webpack-merge": "^4.2.2"
},
"dependencies": {
"qs": "^6.9.6",
"blueimp-md5": "^2.18.0",
"@ckeditor/ckeditor5-build-classic": "^23.1.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5",
"axios": "^0.20.0",
......@@ -91,6 +93,8 @@
"vue-meta-info": "^0.1.7",
"vue-router": "^3.4.6",
"vue-template-compiler": "^2.6.12",
"vuex": "^3.5.1"
"vuex": "^3.5.1",
"echarts": "^4.7.0",
"vue-echarts": "^5.0.0-beta.0"
}
}
src/api/common.js
浏览文件 @ 3d19d4a5
......@@ -9,80 +9,103 @@ export function uploadFile(data) {
})
}
/**
* 获取学生信息
*/
export function getUserSchoolInfo() {
return httpRequest.get('/api/zy/user/getinfo')
}
/**
* 获取学员得分记录
*/
export function getRecordsScore(params) {
return httpRequest.get('/api/opera/v3/api/training/rank/member-score-records', { params })
}
/**
* 获取学员得分记录
*/
export function getRank(params) {
return httpRequest.get('/api/opera/v3/api/training/rank/case-training', { params })
}
/**
* 获取用户等级
*/
export function getUserGrade() {
return httpRequest.get('/api/opera/v1/api/user/level')
return httpRequest.get('/api/opera/v3/api/user/level')
}
/* 获取案例列表 */
export function getCaseList(params) {
return httpRequest.get('/api/opera/v1/api/cases', { params })
return httpRequest.get('/api/opera/v3/api/cases', { params })
}
/* 选中案例 */
export function confirmCases(data) {
return httpRequest.post('/api/opera/v1/api/case/select', data)
return httpRequest.post('/api/opera/v3/api/case/select', data)
}
/* 用户群列表 */
export function getUserGroup(params) {
return httpRequest.get('/api/opera/v1/api/groups', { params })
return httpRequest.get('/api/opera/v3/api/groups', { params })
}
/* 用户群列表详情 */
export function getUserGroupDetail(params) {
return httpRequest.get(`/api/opera/v1/oprations/${params}/cgroup`)
return httpRequest.get(`/api/opera/v3/oprations/${params}/cgroup`)
}
/* 触达列表 */
export function getTriggerList(params) {
return httpRequest.get('/api/opera/v1/api/reach/list', { params })
return httpRequest.get('/api/opera/v3/api/reach/list', { params })
}
/* 用户触达提交 */
export function submitTrigger(data) {
return httpRequest.post('/api/opera/v1/api/reach/submit', data)
return httpRequest.post('/api/opera/v3/api/reach/submit', data)
}
/* 用户触达提交文本 */
export function submitContext(data) {
return httpRequest.post('/api/opera/v1/api/reach/submit/context', data)
return httpRequest.post('/api/opera/v3/api/reach/submit/context', data)
}
/* 特征提交 */
export function submitCharacteristic(data) {
return httpRequest.post('/api/opera/v1/api/characteristic/submit', data)
return httpRequest.post('/api/opera/v3/api/characteristic/submit', data)
}
/* 获取所以分类 */
export function getClassifyList(params) {
return httpRequest.get('/api/opera/v2/api/training/categories', { params })
return httpRequest.get('/api/opera/v3/api/training/categories', { params })
}
/* 3.0 接口 */
/* 获取案例分类 */
export function getUserConfig(id) {
return httpRequest.get(`/api/opera/v2/api/training/${id}/user-use-configs`)
return httpRequest.get(`/api/opera/v3/api/training/${id}/user-use-configs`)
}
/* 获取案例列表 */
export function newGetCaseList(id) {
return httpRequest.get(`/api/opera/v2/api/training/${id}/cases`)
return httpRequest.get(`/api/opera/v3/api/training/${id}/cases`)
}
/* 提交特征 */
export function submitCharacteristics(data) {
return httpRequest.post('/api/opera/v2/api/training/characteristic/submit', data)
return httpRequest.post('/api/opera/v3/api/training/characteristic/submit', data, {
headers: { 'Content-Type': 'application/json' }
})
}
/* 提交特征 */
export function clearScore(data) {
return httpRequest.post('/api/opera/v2/api/training/characteristic/clear-score', data)
return httpRequest.post('/api/opera/v3/api/training/characteristic/clear-score', data)
}
/* 提交特征 */
export function allSubmit(data) {
return httpRequest.post('/api/opera/v2/api/training/statistics/submit', data)
return httpRequest.post('/api/opera/v3/api/training/statistics/submit', data)
}
src/main.js
浏览文件 @ 3d19d4a5
......@@ -5,9 +5,15 @@ import App from './app.vue'
import './style.scss'
import ElementUI from 'element-ui'
import BeforeEnter from './utils/beforeEnter'
import Echarts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/tooltip'
const before = new BeforeEnter()
Vue.use(ElementUI)
Vue.component('v-chart', Echarts)
/* 设置全局变量 */
window.G = Vue.prototype.$GLOBAL = {
......
src/pages/home/index.vue
浏览文件 @ 3d19d4a5
......@@ -15,11 +15,11 @@
<swiper ref="mySwiper" :options="swiperOption">
<template v-for="(item, index) in caseItemList">
<swiper-slide :key="index">
<div class="slide-item" @click="showItem(item)">
<div class="slide-item">
<div class="pot-title">{{ item.name }}</div>
<div class="title">{{ item.name }}</div>
<ul class="item-sele-list">
<template v-for="(opt, sindex) in item.itemChiData">
<template v-for="(opt, sindex) in item.cases">
<li :key="sindex + 's'">
<div class="cont" @click="selectCase(opt)">
<span>{{ opt.name }}</span>
......@@ -108,9 +108,7 @@ export default {
.then(response => {
this.caseData = response.data
this.caseItemList = response.data[0].children
if (window.sessionStorage.homeTabIndex) {
this.tabCase(parseInt(window.sessionStorage.homeTabIndex))
}
this.tabCase(parseInt(0))
})
.finally(() => {
})
......
src/pages/practice/components/practice1.vue
浏览文件 @ 3d19d4a5
......@@ -24,7 +24,12 @@
<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>
<template v-if="item.show_type !== 'textarea'">
<el-input v-model="formData.production_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
<template v-else>
<el-input type="textarea" v-model="formData.production_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
</li>
</template>
</ul>
......@@ -32,7 +37,12 @@
<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>
<template v-if="item.show_type !== 'textarea'">
<el-input v-model="formData.fund_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
<template v-else>
<el-input type="textarea" v-model="formData.fund_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
</li>
</template>
</ul>
......@@ -40,15 +50,22 @@
<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>
<template v-if="item.show_type !== 'textarea'">
<el-input v-model="formData.invest_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
<template v-else>
<el-input type="textarea" v-model="formData.invest_detail[index].content" :placeholder="item.show_info ? item.show_info : '请输入内容'"></el-input>
</template>
</li>
</template>
</ul>
</div>
<div class="next-btnnext-btn">
<div class="border">
<div class="btn" @click="confirm">确定并进入下一步</div>
</div>
<!-- <div class="border"> -->
<div class="new-le-btn" @click="$router.push({ path: '/explain' })"></div>
<div class="left-btn" @click="confirm"></div>
<div class="right-btn" @click="$router.push({ path: '/index' })"></div>
<!-- </div> -->
</div>
</div>
</div>
......@@ -72,6 +89,7 @@ export default {
created() {
const caseStorageData = JSON.parse(window.sessionStorage.caseData)
this.data = caseStorageData
// console.log(this.data, '12321')
this.formData.production_detail = caseStorageData.production_detail.map(item => {
item.content = ''
return item
......@@ -84,7 +102,7 @@ export default {
item.content = ''
return item
})
console.log(this.formData)
console.log(this.formData, '=1233')
},
mounted() {
setTimeout(() => {
......@@ -100,9 +118,9 @@ export default {
},
methods: {
countDomHeight() {
$('.practice-box').css('height', $('.app-main').height() - 139 + 'px')
$('.practice-box').css('height', $('.app-main').height() - 145 + 'px')
$('.item-right .form .setHeight').css('height', $('.item-right').height() - 112 + 'px')
$('.embed-height').css('height', $('.item-left').height() - $('.item-left .heads').outerHeight() - 20 + 'px')
$('.embed-height').css('height', $('.item-left').height() - $('.item-left .heads').outerHeight() - 50 + 'px')
$('.pdf-height').css('height', $('.practice-box').height() - ($('.pdf-get-height').outerHeight() + $('.heads').outerHeight()))
},
tabChange(n) {
......@@ -127,12 +145,24 @@ export default {
// }
// }
// })
this.$confirm('有部分内容您还没有填写，是否确认进入下一步', '提示', {
this.$confirm('有部分内容您还没有填写，请填写', '提示', {
confirmButtonText: '确定',
cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
this.$emit('step1Confirm', this.formData)
// this.$emit('step1Confirm', this.formData)
if (proForm) {
this.tabIndex = 0
return false
}
if (fundForm) {
this.tabIndex = 1
return false
}
if (invForm) {
this.tabIndex = 2
return false
}
}).catch(() => {
if (proForm) {
this.tabIndex = 0
......@@ -159,9 +189,9 @@ export default {
display: flex;
width: 100%;
height: 473px;
margin-top: 16px;
// margin-top: 16px;
.item-left{
margin-right: 8px;
margin-right: 18px;
flex: 1;
height: 100%;
// background: #fff;
......@@ -180,7 +210,7 @@ export default {
height: 21px;
margin: 0 auto;
font-size: 14px;
text-decoration: underline;
// text-decoration: underline;
color: #71CDF9;
border-bottom: 1px solid #71CDF9;
margin-top: 17px;
......@@ -218,34 +248,46 @@ export default {
}
}
.item-right{
margin-left: 8px;
margin-left: 18px;
flex: 1;
height: 100%;
// background: #fff;
.tab-btn{
width: 100%;
height: 48px;
height: 30px;
// background: #f1f1f1;
display: flex;
li{
cursor: pointer;
flex: 1;
text-align: center;
line-height: 48px;
font-size: 18px;
color: #666666;
line-height: 48px;
line-height: 30px;
background: rgba(31, 100, 158, 0);
box-shadow: 0px 0px 15px 0px #3D87A2 inset;
border-radius: 4px 4px 0px 0px;
font-size: 14px;
color: #3F8CA8;
&:nth-child(2){
margin: 0 4px;
}
&.active{
color: #C01540;
background: #fff;
box-shadow: none;
color: #fff;
background: rgba(107, 231, 255, .8);
}
}
}
.form{
padding: 0 24px;
// padding: 0 24px;
ul{
background: url(https://zws-imgs-pub.ezijing.com/static/public/89898a60e953a3a6c301fa9a6e586ae5.png);
background-size: 100% 100%;
height: 360px;
overflow-y: scroll;
padding: 0 20px;
box-sizing: border-box;
&::-webkit-scrollbar{
display:none;
}
......@@ -253,39 +295,68 @@ export default {
li{
align-items: center;
width: 100%;
border-bottom: 1px solid #eee;
height: 72px;
border-bottom: 1px solid #46658F;
// height: 72px;
padding: 15px 0;
display: flex;
align-items: center;
.name{
font-size: 14px;
color: #444444;
line-height: 14px;
margin-right: 23px;
color: #58C0DA;
white-space: nowrap;
margin: 0 16px 0 10px;
}
::v-deep{
.el-input__inner{
background: none;
border: 1px solid #58C0D9;
color: #58C0DA;
}
.el-textarea__inner{
background: none;
border: 1px solid #58C0D9;
color: #58C0DA;
}
}
}
}
.next-btnnext-btn{
padding: 0 16px;
// padding: 0 16px;
box-sizing: border-box;
width: 100%;
.border{
border-top: 1px solid #eee;
display: flex;
align-items: center;
height: 64px;
padding-top: 10px;
justify-content: space-between;
.new-le-btn{
cursor: pointer;
width: 174px;
height: 39px;
background-size: 100% 100%;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4aa791e030d1e71667751079e6db179a.png);
}
.btn{
.left-btn{
width: 174px;
height: 39px;
background-size: 100% 100%;
background: url(https://zws-imgs-pub.ezijing.com/static/public/790cbdae6590715dc1e0e48ebcd8e3c9.png);
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;
// 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;
}
.right-btn{
cursor: pointer;
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/a198053dcb4335500c0f8d3961279e78.png);
background-size: 100% 100%;
// margin-left: auto;
}
}
}
......
src/pages/practice/components/practice3.vue
浏览文件 @ 3d19d4a5
......@@ -4,16 +4,17 @@
<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">
<!-- <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>
<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-contents">
<div class="form-all">
<form1 v-show="navItemIndex == 1 - 1"></form1>
<form2 v-show="navItemIndex == 2 - 1"></form2>
......@@ -23,14 +24,15 @@
<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 class="foot-btn-box">
<div class="btn" @click="$emit('changeStepIndex', 1)"></div>
<div class="btn" @click="isEdit = true"></div>
<div class="btn" @click="$router.push('/index')"></div>
</div>
</div>
</div>
<preview :navItemIndex="navItemIndex" v-show="isEdit" @confirm="confirm"></preview>
<preview :navItemIndex="navItemIndex" v-show="isEdit" @backPage="backPage" @confirm="confirm"></preview>
</div>
</template>
<script>
......@@ -106,8 +108,11 @@ export default {
this.countDomHeight()
},
methods: {
backPage() {
this.isEdit = false
},
countDomHeight() {
$('.practice3-box').css('height', $('.app-main').height() - 139 + 'px')
$('.practice3-box').css('height', $('.app-main').height() - 189 + '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')
},
......@@ -116,6 +121,17 @@ export default {
window.sessionStorage.indexTouchActive = n
},
confirm(val) {
if (val === '') {
this.$confirm('请填写文案', '提示', {
confirmButtonText: '确定',
// cancelButtonText: '继续填写',
type: 'warning'
}).then(() => {
// this.$emit('step1Confirm', this.formData)
}).catch(() => {
})
return
}
this.$emit('step3Confirm', val)
// console.log(val)
}
......@@ -133,15 +149,108 @@ export default {
}
</script>
<style lang="scss" scoped>
::v-deep{
.text-line .line{
background: #58C0D9 !important;
}
.text-line .text{
color: #58C0D9 !important;
}
.form-box .form .name{
color: #58C0DA;
}
.el-radio__input.is-checked .el-radio__inner{
border-color: #fff;
background: rgba(107, 231, 255, 1);
}
.el-radio__input.is-checked + .el-radio__label{
color: #fff;
}
.el-radio.is-bordered.is-checked{
border-color: #71CDF9;
background: rgba(107, 231, 255, 1);
box-shadow: none;
}
.el-radio.is-bordered{
border: none;
box-shadow:inset 0px 0px 20px 0px #3D87A2;
}
.el-radio__inner{
background: none;
border: 1px solid #71CDF9;
}
.el-radio{
color: #71CDF9;
}
.el-checkbox.is-bordered{
// background: rgba(61, 135, 162, 1);
box-shadow:inset 0px 0px 20px 0px #3D87A2;
border: none;
}
.el-checkbox.is-checked{
box-shadow: none;
// background: #6BE7FF;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
border-color: #6BE7FF;
background: none;
}
.el-checkbox__input.is-checked + .el-checkbox__label{
color: #6BE7FF;
}
.el-checkbox__inner{
border-color:#71CDF9;
background: none;
}
.el-checkbox__label{
color:#71CDF9;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
border-color:#71CDF9;
}
.el-input__inner{
border: 1px solid #58C0D9;
background: none !important;
color: #71CDF9;
}
.el-input__inner::-webkit-input-placeholder{
color: #68829C;
}
.el-select .el-input.is-focus .el-input__inner{
border: 1px solid #58C0D9;
}
.el-select .el-input__inner:focus{
border: 1px solid #58C0D9;
}
.el-select .el-input__inner:hover{
border: 1px solid #58C0D9;
}
.el-input__icon{
color: #71CDF9;
}
.content-bottom-form{
border-top: 1px solid #58C0D9 !important;
}
.el-select__caret{
color: #71CDF9 !important;
}
.el-input-number__decrease:hover{
border-color: #58C0D9;
}
}
.practice3-box{
display: flex;
margin-top: 16px;
.item-left-content{
width: 200px;
width: 170px;
height: 410px;
// height: 473px;
margin-right: 16px;
background: #fff;
padding: 20px 10px;
// background: #fff;
padding: 20px 0;
background: url(https://zws-imgs-pub.ezijing.com/static/public/eb59a5d485adb191bfda193c6486e69d.png);
background-size: 100% 100%;
box-sizing: border-box;
li{
cursor: pointer;
......@@ -151,7 +260,7 @@ export default {
display: flex;
align-items: center;
&.active{
background: #FFF4F7;
// background: #FFF4F7;
.icon{
.icons{
display: none;
......@@ -161,7 +270,7 @@ export default {
}
}
.text{
color: #C01540;
color: #6BE7FF;
font-weight: bold;
}
}
......@@ -178,54 +287,95 @@ export default {
}
.text{
font-size: 16px;
color: #999999;
margin-left: 10px;
color: #58C0DA;
width: 100%;
text-align: center;
}
}
}
.item-right-content{
// padding: 30px 0;
// box-sizing: border-box;
position: relative;
flex: 1;
background: #fff;
height: 490px;
overflow: hidden;
// height: 410px;
// overflow: hidden;
// padding-bottom: 30px;
// background: #fff;
.form-contents{
background: url(https://zws-imgs-pub.ezijing.com/static/public/9ae2c5cf27a4d68960e0b9ec994fc650.png);
background-size: 100% 100%;
height: 410px;
overflow: hidden;
padding: 20px 0;
box-sizing: border-box;
}
.form-all{
height: 411px;
// box-sizing: border-box;
// padding: 15px 15px 30px 15px;
height: 370px;
overflow-y: scroll;
&::-webkit-scrollbar{
display:none;
}
}
.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;
// position: absolute;
// bottom: 0;
// left: 0;
width: 100%;
border-top: 1px solid #eee;
height: 100%;
padding-top: 20px;
// height: 64px;
// background: #fff;
// padding: 0 24px;
// box-sizing: border-box;
display: flex;
align-items: center;
img{
position: absolute;
bottom: 100px;
left: 0;
width: 644px;
z-index: 9;
}
justify-content: space-between;
.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;
width: 174px;
height: 39px;
cursor: pointer;
&:nth-child(1){
background: url(https://zws-imgs-pub.ezijing.com/static/public/4aa791e030d1e71667751079e6db179a.png);
background-size: 100% 100%;
}
&:nth-child(2){
background: url(https://zws-imgs-pub.ezijing.com/static/public/9b171e8318ca3bd1ef0ceff2fe7072ce.png);
background-size: 100% 100%;
}
&:nth-child(3){
background: url(https://zws-imgs-pub.ezijing.com/static/public/f3b7191f9c4a66b92c20a611dcc46d42.png);
background-size: 100% 100%;
}
}
// .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;
// }
// }
}
}
}
......
src/pages/practice/components/preview.vue
浏览文件 @ 3d19d4a5
<template>
<div class="preview-box">
<div class="content-left">
<div class="bg-box">
<div class="text-box">
<div class="name">文案编辑</div>
<el-input
......@@ -24,15 +25,18 @@
list-type="picture">
<el-button class="btn" size="small" type="primary" icon="el-icon-picture-outline">点击上传</el-button>
</el-upload>
<div class="div-btn">点击上传</div>
</div>
</div>
<div class="foot-btn-box">
<div class="btn-box">
<!-- <div class="btn">点此预览</div> -->
<div class="btn" @click="$emit('backPage')">返回上一步</div>
<div class="btn" @click="confirm">确认提交</div>
</div>
<!-- <div class="btn">点此预览</div> -->
<!-- <div class="btn" @click="confirm">确认提交</div> -->
</div>
</div>
<div class="content-right">
<div class="bg-img">
<!-- app弹窗 小程序 -->
<div class="mobile-box" v-if="showActiveIndex == 0 || showActiveIndex == 3">
<div class="content-box">
......@@ -80,6 +84,10 @@
</div>
</div>
</div>
<div class="new-312-btn">
<div class="btn">切换案例</div>
</div>
</div>
</div>
</template>
<script>
......@@ -102,7 +110,7 @@ export default {
},
methods: {
countDomHeight() {
$('.preview-box').css('height', $('.app-main').height() - 139 + 'px')
// $('.preview-box').css('height', $('.app-main').height() - 139 + 'px')
},
successImg(file) {
this.url = file.url
......@@ -133,25 +141,37 @@ export default {
}
</script>
<style lang="scss" scoped>
::v-deep{
.el-textarea__inner{
background: none;
border: 1px solid #58C0D9;
}
}
.preview-box{
display: flex;
height: 473px;
// height: 473px;
padding-top: 16px;
.content-left{
flex: 1;
height: 100%;
background: #fff;
position: relative;
padding: 16px 16px 0;
// padding: 16px 0 0;
box-sizing: border-box;
.bg-box{
height: 450px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/f1948050810147cf4bd7fa3c836b1315.png);
background-size: 100% 100%;
padding: 25px 46px;
box-sizing: border-box;
}
.text-box{
display: flex;
}
.name{
width: 84px;
font-size: 16px;
color: #666666;
line-height: 22px;
font-size: 14px;
color: #58C0DA;
}
.textarea{
height: 200px;
......@@ -159,13 +179,38 @@ export default {
textarea{
resize: none;
height: 200px;
color: #58C0DA;
}
}
}
.upload-box{
padding-top: 40px;
display: flex;
position: relative;
// align-items: center;
.upload-demo{
position: absolute;
top: 40px;
left: 80px;
z-index: 9;
::v-deep{
.el-upload{
opacity: .001;
}
}
}
.div-btn{
width: 142px;
height: 43px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4d8e7f0484b7b32db2b05daf82c7742c.png);
background-size: 100% 100%;
transform: translate(-15px, -5px);
font-size: 16px;
font-weight: normal;
color: #00EEFF;
line-height: 43px;
text-align: center;
}
.name{
line-height: 32px;
}
......@@ -177,42 +222,79 @@ export default {
}
}
.foot-btn-box{
position: absolute;
bottom: 0;
left: 0;
// position: absolute;
// bottom: 0;
// left: 0;
width: 100%;
padding: 0 24px;
padding: 20px 0;
box-sizing: border-box;
}
.btn-box{
border-top: 1px solid #eee;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
.btn{
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/9520ab07439e78b9337c1f02ed00bb27.png);
background-size: 100% 100%;
font-size: 16px;
font-weight: bold;
color: #71CDF9;
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;
line-height: 39px;
cursor: pointer;
margin-right: 16px;
}
}
// .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;
width: 455px;
margin-left: 16px;
// height: 100%;
// background: #fff;
.new-312-btn{
display: flex;
padding: 20px 0;
.btn{
margin-left: auto;
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/9520ab07439e78b9337c1f02ed00bb27.png);
background-size: 100% 100%;
font-size: 16px;
font-weight: bold;
color: #71CDF9;
text-align: center;
line-height: 39px;
cursor: pointer;
}
}
.bg-img{
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: url(https://zws-imgs-pub.ezijing.com/static/public/4f053216617be493193e374e6b8fc0c8.png);
background-size: 100% 100%;
height: 451px;
}
.mobile-box{
width: 201px;
height: 391px;
......
src/pages/practice/index.vue
浏览文件 @ 3d19d4a5
<template>
<div>
<ul class="head-step">
<li class="active">1.产品分析</li>
<li>2.用户分析</li>
<li>3.用户触达</li>
<li>4.成绩结果</li>
<li v-for="(item, index) in step" :key="index" :class="dataParam.stepIndex === index && 'active'">{{ item }}</li>
</ul>
<!-- <div class="head-steps">
<div class="title">
......@@ -20,9 +17,10 @@
</ul>
</div> -->
<template>
<practice1 @step1Confirm="step1Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 0"></practice1>
<!-- <practice2 @step2Confirm="step2Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 1"></practice2>
<practice3 @step3Confirm="step3Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 2"></practice3> -->
<practice1 @changeStepIndex="changeStepIndex" @step1Confirm="step1Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 0"></practice1>
<practice2 @changeStepIndex="changeStepIndex" @step2Confirm="step2Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 1"></practice2>
<practice3 @changeStepIndex="changeStepIndex" @step3Confirm="step3Confirm" :dataParam="dataParam" v-show="dataParam.stepIndex == 2"></practice3>
<practice4 v-if="dataParam.stepIndex == 3"></practice4>
</template>
</div>
</template>
......@@ -31,21 +29,27 @@ import * as api from '@/api/common.js'
import practice1 from './components/practice1'
import practice2 from './components/practice2'
import practice3 from './components/practice3'
import practice4 from '../result/index'
export default {
components: {
practice1,
practice2,
practice3
practice3,
practice4
},
data() {
return {
dataParam: {
stepIndex: 0
},
formData: {}
formData: {},
step: ['1.产品分析', '2.用户分析', '3.用户触达', '4.成绩结果']
}
},
methods: {
changeStepIndex(n) {
this.dataParam.stepIndex = parseInt(n)
},
stepChange(n) {
this.dataParam.stepIndex = n
},
......@@ -60,23 +64,50 @@ export default {
this.dataParam.stepIndex = 2
this.formData.characteristic_score = val
},
step3Confirm(val) {
const sessData = JSON.parse(window.sessionStorage.caseData)
this.formData.case_id = sessData.id
this.formData.reach_scheme = val
this.formData.characteristic_id = sessData.characteristics[0].id
getUserSchoolInfo() {
api
.getUserSchoolInfo()
.then(response => {
this.formData.sso_id = response.id
this.formData.username = response.realname
this.formData.school = response.student_info.school
api
.allSubmit(this.formData)
.then(response => {
if (parseInt(response.code) === 0) {
window.sessionStorage.resultData = JSON.stringify(response.data)
this.$router.push({
path: '/result'
})
const resul = response.data
resul.sso_id = this.formData.sso_id
window.sessionStorage.resultData = JSON.stringify(resul)
this.dataParam.stepIndex = 3
// this.$router.push({
// path: '/result'
// })
}
})
.finally(() => {
})
})
.finally(() => {
})
},
step3Confirm(val) {
const sessData = JSON.parse(window.sessionStorage.caseData)
this.formData.case_id = sessData.id
this.formData.reach_scheme = val
this.formData.characteristic_id = sessData.characteristics[0].id
this.getUserSchoolInfo()
// api
// .allSubmit(this.formData)
// .then(response => {
// if (parseInt(response.code) === 0) {
// window.sessionStorage.resultData = JSON.stringify(response.data)
// this.$router.push({
// path: '/result'
// })
// }
// })
// .finally(() => {
// })
}
}
}
......
src/pages/result/index copy.vue 0 → 100644
浏览文件 @ 3d19d4a5
<template>
<div class="result-box">
<div class="content-left">
<div class="score-box">
<div class="num">{{ data.gross_score }}分</div>
<img src="https://zws-imgs-pub.ezijing.com/static/public/3e4e378aa05c0672290eb9bcd61218c1.png" alt="">
</div>
<!-- <div class="text">恭喜您，成绩很优秀，继续保持哦。建议您在<span>#产品分析#</span>方面进一步学习和提升，再选择案例进行练习。</div> -->
<div class="text" v-html="resultText"></div>
<img class="img-bottom" src="https://zws-imgs-pub.ezijing.com/static/public/d0d57e03e79a4a5dea5993fd67ff9a7e.png" alt="">
</div>
<div class="content-right">
<div class="chart-box">
<ul class="chart">
<li>
<div class="item" :style="getHeight(parseInt(data.production_analyze.score / data.production_analyze.score_sum * 100))"></div>
<div class="text">产品分析</div>
</li>
<li>
<div class="item" :style="getHeight(parseInt(data.user_analyze.score / data.user_analyze.score_sum * 100))"></div>
<div class="text">用户分析</div>
</li>
<li>
<div class="item" :style="getHeight(parseInt(data.reach_analyze.score / data.reach_analyze.score_sum * 100))"></div>
<div class="text">用户触达</div>
</li>
</ul>
<div class="flag">
<div class="item">
<div class="icon"></div>
<div class="text">得分</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">失分</div>
</div>
</div>
</div>
<div class="foot-btn-box">
<div class="btn-box">
<div class="btn" @click="contince">这个案例我要再来一次</div>
<div class="btn" @click="$router.push({ path: '/index' })">我要选择其他案例</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
export default {
data() {
return {
data: {},
resultText: ''
}
},
computed: {
getHeight() {
return (num) => {
return `height:${num}%`
}
}
},
created() {
this.data = JSON.parse(window.sessionStorage.resultData)
// data.gross_score
// const getText = ''
const textParam = [
{
name: '产品分析',
score: this.data.production_analyze.score / this.data.production_analyze.score_sum * 100
},
{
name: '用户分析',
score: this.data.user_analyze.score / this.data.user_analyze.score_sum * 100
},
{
name: '用户触达',
score: this.data.reach_analyze.score / this.data.reach_analyze.score_sum * 100
}
]
const sortText = textParam.sort((a, b) => { return a.score - b.score })
if (this.data.gross_score < 50) {
this.resultText = `离达标的要求还有一段距离，继续努力哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 50 && this.data.gross_score < 60) {
this.resultText = `离达标的要求很接近了，继续加油哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 60 && this.data.gross_score < 70) {
this.resultText = `恭喜您，已经达标了，真棒！建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 70 && this.data.gross_score < 80) {
this.resultText = `恭喜您，成绩很优秀，继续保持哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
} else if (this.data.gross_score >= 80) {
this.resultText = `恭喜您拿到了高分！继续保持，继续加油哦。建议您在<span>#${sortText[0].name}#</span>方面进一步学习和提升，再选择案例进行练习。`
}
},
methods: {
contince () {
const sessData = JSON.parse(window.sessionStorage.caseData)
const param = {}
param.case_id = sessData.id
param.characteristic_id = sessData.characteristics[0].id
api
.clearScore(param)
.then(response => {
if (parseInt(response.code) === 0) {
this.$router.push({
path: '/practice'
})
}
})
.finally(() => {
})
}
}
}
</script>
<style lang="scss" scoped>
.foot-btn-box{
display: flex;
justify-content: space-between;
.btn{
width: 174px;
height: 39px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/2b1321f8b96152236720e7c6f9e991c5.png);
background-size: 100% 100%;
font-size: 16px;
color: #71CDF9;
text-align: center;
line-height: 39px;
font-weight: bold;
}
}
.result-box{
height: 100%;
.res-content-box{
position: relative;
display: flex;
height: 100%;
}
.content-left{
flex: 1;
background: #fff;
margin-right: 8px;
padding-bottom: 35px;
.score-box{
width: 178px;
height: 180px;
margin: 0 auto;
position: relative;
padding-top: 16px;
.num{
position: absolute;
top: 107px;
left: 0;
font-size: 26px;
font-weight: bold;
color: #FFFFFF;
line-height: 37px;
width: 100%;
text-align: center;
}
img{
width: 100%;
height: 100%;
display: block;
}
}
.text{
width: 584px;
font-size: 16px;
color: #444444;
line-height: 32px;
margin: 32px auto 16px auto;
}
.img-bottom{
width: 400px;
display: block;
margin: 0 auto;
}
}
.content-right{
position: relative;
flex: 1;
background: #fff;
margin-left: 8px;
.chart-box{
width: 500px;
margin: 0 auto;
padding-top: 80px;
.chart{
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-around;
li{
width: 30px;
height: 337px;
background: rgba(253, 200, 201, 0.5);
position: relative;
.item{
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 0%;
background: #FB9193;
}
.text{
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
width: 60px;
text-align: center;
color: #444444;
line-height: 20px;
}
}
}
.flag{
display: flex;
justify-content: center;
padding-top: 65px;
.item{
display: flex;
align-items: center;
.icon{
width: 10px;
height: 10px;
background: #F37A77;
margin-right: 5px;
}
.text{
font-size: 14px;
color: #444444;
line-height: 20px;
}
&:nth-child(1){
margin-right: 20px;
}
&:nth-child(2){
margin-left: 20px;
.icon{
background: #FEE4E4;
}
}
}
}
}
}
.foot-btn-box{
position: absolute;
bottom: 0;
left: 0;
background: #fff;
width: 100%;
height: 64px;
padding: 0 16px;
box-sizing: border-box;
.btn-box{
border-top: 1px solid #eee;
display: flex;
align-items: center;
height: 100%;
.btn{
cursor: pointer;
padding: 0 24px;
font-size: 14px;
color: #F8F8F8;
line-height: 32px;
height: 32px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
text-align: center;
&:nth-child(2){
margin-left: auto;
}
}
}
}
}
</style>
src/pages/result/index.vue
浏览文件 @ 3d19d4a5
差异被折叠。
src/style.scss
浏览文件 @ 3d19d4a5
$--color-primary: #c01540;
$--color-primary: #58C0D9;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
......@@ -95,7 +95,7 @@ html {
}
:root {
--main-color: #c01540;
--main-color: #58C0D9;
}
body {
......@@ -104,7 +104,7 @@ body {
color: #222;
font-family: 'PingFang SC', 'Source Han Sans CN', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana,
'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
background-color: #f1f1f1;
background-color: rgb(6,12,37);
}
.empty {
......
src/utils/axios.js
浏览文件 @ 3d19d4a5
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
// import md5 from 'blueimp-md5'
const httpRequest = axios.create({
// baseURL: process.env.VUE_APP_BASE_API,
timeout: 60000,
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
tenant: 'transport'
}
withCredentials: true
})
// 请求拦截
httpRequest.interceptors.request.use(
function(config) {
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.data = qs.stringify(config.data)
const defaultParams = {
timestamp: parseInt(Date.now() / 1000),
nonce: Math.random()
.toString(36)
.slice(-8)
}
if (config.headers['Content-Type'] === 'multipart/form-data') {
const form = new window.FormData()
for (const key in config.data) {
form.append(key, config.data[key])
// 接口请求参数
let params = config.params || config.data
// 排序
function alphabeticalSort(a, b) {
return a.localeCompare(b)
}
config.data = form
// https://gitlab.ezijing.com/root/api-documents/-/blob/master/messages/api/%E7%8E%AF%E5%A2%83%E8%AF%B4%E6%98%8E.md#%E6%8E%A5%E5%8F%A3%E7%AD%BE%E5%90%8D
params = Object.assign({}, defaultParams, params)
const str = qs.stringify(Object.assign({}, params, { salt: 'n7xAav2tSjn9Ysnr' }), { sort: alphabeticalSort })
const strs = qs.parse(str)
Object.keys(strs).map(item => {
strs[item] = Array.isArray(strs[item]) ? JSON.stringify(strs[item]) : strs[item]
})
params.signature = 'UG7wBenexQhiuD2wpCwuxkU0jqcj006d'
if (config.method === 'post') {
config.data = params
} else {
config.params = params
}
// config.data = params
// if (config.headers['Content-Type'] === 'multipart/form-data') {
// const form = new window.FormData()
// for (const key in config.data) {
// form.append(key, config.data[key])
// }
// config.data = form
// }
return config
},
function(error) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论