Skip to content

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

update

上级 716da8e6
隐藏空白字符变更
内嵌 并排
正在显示 包含 477 行增加 和 60 行删除
src/components/base/Step.vue
浏览文件 @ 959528a9
...@@ -22,11 +22,12 @@ export default { ...@@ -22,11 +22,12 @@ export default {
activeStep: { activeStep: {
type: Number, type: Number,
default: 0 default: 0
} },
list: { type: Array }
}, },
data() { data() {
return { return {
stepList: [{ stepName: '确定用户群' }, { stepName: '制定方案' }, { stepName: '明确主题' }, { stepName: '预览' }] stepList: this.list || [{ stepName: '确定用户群' }, { stepName: '制定方案' }, { stepName: '明确主题' }, { stepName: '预览' }]
} }
} }
} }
......
src/modules/market-tools/views/DouYin copy.vue 0 → 100644
浏览文件 @ 959528a9
<template>
<div>
<el-steps :active="stepsIndex" align-center>
<el-step title="创建账户"></el-step>
<el-step title="发布视频"></el-step>
<el-step title="查看营销数据"></el-step>
</el-steps>
<div class="content-box">
<div class="step-content1" v-show="stepsIndex === 0">
<div class="video-box">
<div class="dy-box" v-if="!registerIndex">
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
<div class="works-title">{{ form.title }}</div>
<div class="works-dec">{{ form.dec }}</div>
<video :src="form.url" width="375px" class="video"></video>
</div>
<div class="register-step" v-else>
<img :src="`https://webapp-pub.ezijing.com/x-training-new/register${registerIndex}.JPG`" />
</div>
<div class="register-btn" ref="registerBtn" @click="registerNext"></div>
</div>
<div class="text">{{ registerText }}</div>
</div>
<div class="step-content2" v-show="stepsIndex === 1">
<div class="form-box">
<el-form ref="form" :model="form" label-width="80px" :disabled="$route.query.type == 1 ? true : false">
<el-form-item label="标题">
<el-input v-model="form.title" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.dec"> </el-input>
</el-form-item>
<el-form-item label="视频">
<upload-video v-model="form.url" @input="input"></upload-video>
</el-form-item>
</el-form>
</div>
<div class="dy-box">
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
<div class="works-title">{{ form.title }}</div>
<div class="works-dec">{{ form.dec }}</div>
<video :src="form.url" width="375px" class="video"></video>
</div>
</div>
<div class="step-content1 step-content3" v-show="stepsIndex === 2">
<div class="video-box">
<div class="dy-box" v-if="dataIndex == 4">
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
<div class="works-title">{{ form.title }}</div>
<div class="works-dec">{{ form.dec }}</div>
<video :src="form.url" width="375px" class="video"></video>
</div>
<div class="register-step" v-else>
<img :src="`https://webapp-pub.ezijing.com/x-training-new/data${dataIndex + 1}.jpg`" />
</div>
<div class="register-btn" ref="dataBtn" @click="dataNext"></div>
</div>
<div class="text">{{ registerText }}</div>
</div>
<div class="mian-btn">
<el-button type="primary" @click="cacheReport(1)" v-if="$route.query.type != 1">保存</el-button>
<el-button type="primary" @click="prevBtn" v-if="stepsIndex != 0">上一步</el-button>
<el-button v-if="stepsIndex == 0" type="primary" @click="registerNextBtn">下一步</el-button>
<el-button v-if="stepsIndex == 1" type="primary" @click="formNextBtn">下一步</el-button>
<el-button type="primary" @click="submitReport" v-if="stepsIndex == 2 && $route.query.type != 1"
>完成</el-button
>
</div>
</div>
</div>
</template>
<script>
import { submitReport, cacheReport, checkRecord, getReportDetail } from '../api'
import UploadVideo from '@/components/upload/UploadVideo.vue'
export default {
components: { UploadVideo },
data() {
return {
form: {
title: '',
dec: '',
url: ''
},
caseId: '',
stepsIndex: 0,
registerIndex: 0,
registerText: '第一步:打开抖音APP，点击底部“我”',
dataIndex: 0,
dataText: '第一步：点击“我”，进入个人主页'
}
},
computed: {
cases() {
return this.$store.state.case
}
},
mounted() {
if (parseInt(this.$route.query.type)) {
this.getReportDetail(this.$route.query.id)
} else {
this.checkRecord()
}
},
methods: {
prevBtn() {
this.stepsIndex--
if (this.stepsIndex === 0) {
this.registerNext(1)
}
},
// 验证是否有未完成的答题记录
checkRecord() {
checkRecord(this.cases.id, 2).then(res => {
if (res.data.items.length) {
this.getReportDetail(res.data.items[0].id)
}
})
},
registerNextBtn() {
if (this.$route.query.type) {
this.stepsIndex++
} else {
if (this.registerIndex === 4) {
this.stepsIndex++
// this.registerIndex = 0
} else {
this.$message({ message: '请完成当前步骤', type: 'warning' })
}
}
},
formNextBtn() {
if (this.$route.query.type) {
this.stepsIndex++
} else {
const isNull = Object.values(this.form).findIndex(item => {
return item === ''
})
if (isNull === -1) {
this.stepsIndex++
} else {
this.$message({ message: '请在发布视频完善信息', type: 'warning' })
}
}
if (this.stepsIndex === 2) {
this.dataNext(1)
}
},
// 提交报告
submitReport() {
const isNull = Object.values(this.form).findIndex(item => {
return item === ''
})
if (isNull !== -1) {
this.$message({ message: '请在发布视频完善信息', type: 'warning' })
return false
}
if (this.dataIndex !== 3) {
this.$message({ message: '请完成当前步骤', type: 'warning' })
return false
}
const params = {
reports: JSON.stringify({ type: 1, commit_report: [this.form] })
}
const id = this.$route.query.id || this.caseId
if (id) {
params.id = id
}
submitReport(params)
.then(res => {
this.$message({
message: '保存成功！你可以在作品展示中查看报告，查看成绩',
type: 'success'
})
setTimeout(() => {
this.$router.push({ path: '/works-show' })
}, 3000)
})
.catch(err => {
this.$message.error(err.message || '稍后再试')
})
},
// 保存报告
cacheReport(num) {
const commitReport = [
this.form,
{ steps: this.stepsIndex, registerIndex: this.registerIndex, dataIndex: this.dataIndex }
]
const param = { type: 1, commit_report: commitReport }
cacheReport(this.cases.id, { reports: JSON.stringify(param) })
.then(res => {
if (num) this.$message({ type: 'success', message: '保存成功' })
this.caseId = res.data.id
})
.catch(err => {
this.$message.error(err.message || '稍后再试')
})
},
// 获取报告
getReportDetail(id) {
getReportDetail(id).then(res => {
this.caseId = res.data.detail.id
const cachData = res.data.detail.answer.commit_report
if (this.$route.query.type !== '1') {
this.stepsIndex = cachData[1].steps
this.registerIndex = cachData[1].registerIndex
this.dataIndex = cachData[1].dataIndex
if (this.stepsIndex === 0) this.registerNext(1)
if (this.stepsIndex === 2) this.dataNext(1)
}
this.form.title = cachData[0].title
this.form.dec = cachData[0].dec
this.form.url = cachData[0].url
})
},
// 查看营销数据教程
dataNext(num) {
console.log(this.dataIndex, '123=123')
const styles = {
0: { w: '50px', t: '30px', l: '320px', text: '第二步:点击右上角，进入菜单' },
1: { w: '200px', t: '300px', l: '100px', text: '第三步:点击”创作者服务中心“' },
2: { w: '50px', t: '190px', l: '290px', text: '第四步:点击”数据中心“' },
3: { w: '0px', t: '0px', l: '0px', text: '完成' }
}
let getStyle = ''
if (num !== 1) {
if (this.dataIndex < 3) this.dataIndex++
getStyle = styles[this.dataIndex]
} else {
getStyle = styles[this.dataIndex]
}
this.$nextTick(() => {
const getDom = this.$refs.dataBtn.style
this.setStyle(getStyle, getDom)
})
},
// 注册教程
registerNext(num) {
const styles = {
1: { w: '310px', t: '380px', l: '30px', text: '第二步:点击其他手机号登录' },
2: { w: '310px', t: '280px', l: '30px', text: '第三步:输入手机号点击获取手机验证码' },
3: { w: '310px', t: '340px', l: '30px', text: '第四步:点击登录' },
4: { w: '0px', t: '0px', l: '0px', text: '第五步:登录成功之后，在右下角点击“我”，就可以修改自己的头像和资料了' }
}
if (num !== 1) {
if (this.registerIndex < 4) this.registerIndex++
}
const getStyle = styles[this.registerIndex]
this.$nextTick(() => {
const getDom = this.$refs.registerBtn.style
this.setStyle(getStyle, getDom)
})
},
setStyle(sty, dom) {
dom.width = sty.w
dom.top = sty.t
dom.left = sty.l
this.registerText = sty.text
},
input(url) {}
}
}
</script>
<style lang="scss" scoped>
.step-content1 {
display: flex;
justify-content: center;
.video-box {
min-width: 375px;
width: 375px;
background: #000;
position: relative;
img {
width: 100%;
display: block;
}
.register-btn {
position: absolute;
top: 600px;
left: 300px;
width: 60px;
height: 50px;
cursor: pointer;
z-index: 999;
}
}
.text {
font-size: 18px;
color: #000;
margin-left: 30px;
max-width: 300px;
min-width: 300px;
}
.dy-box {
min-width: 375px;
width: 375px;
height: 667px;
background: #000;
position: relative;
img {
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.works-title {
position: absolute;
top: 505px;
left: 24px;
font-size: 12px;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 263px;
z-index: 999;
}
.works-dec {
position: absolute;
top: 526px;
left: 24px;
font-size: 12px;
color: #ffffff;
width: 263px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
z-index: 999;
}
.video {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
}
.step-content2 {
display: flex;
.dy-box {
min-width: 375px;
width: 375px;
height: 667px;
background: #000;
margin-left: 80px;
position: relative;
img {
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.works-title {
position: absolute;
top: 505px;
left: 24px;
font-size: 12px;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 263px;
z-index: 999;
}
.works-dec {
position: absolute;
top: 526px;
left: 24px;
font-size: 12px;
color: #ffffff;
width: 263px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
z-index: 999;
}
.video {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.form-box {
flex: 1;
}
}
.step-content3 {
display: flex;
justify-content: center;
}
.content-box {
padding-top: 30px;
}
.mian-btn {
padding: 30px;
display: flex;
justify-content: right;
}
</style>
src/modules/market-tools/views/DouYin.vue
浏览文件 @ 959528a9
<template> <template>
<div> <div>
<el-steps :active="stepsIndex" align-center> <ToolCard class="main_content">
<el-step title="创建账户"></el-step> <Step :activeStep="stepsIndex" :list="stepList" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
<el-step title="发布视频"></el-step> <div class="content-box" style="flex:1;">
<el-step title="查看营销数据"></el-step> <div class="step-content1" v-show="stepsIndex === 0">
</el-steps> <div class="video-box">
<div class="content-box"> <div class="dy-box" v-if="!registerIndex">
<div class="step-content1" v-show="stepsIndex === 0"> <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
<div class="video-box"> <div class="works-title">{{ form.title }}</div>
<div class="dy-box" v-if="!registerIndex"> <div class="works-dec">{{ form.dec }}</div>
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" /> <video :src="form.url" width="375px" class="video"></video>
<div class="works-title">{{ form.title }}</div> </div>
<div class="works-dec">{{ form.dec }}</div> <div class="register-step" v-else>
<video :src="form.url" width="375px" class="video"></video> <img :src="`https://webapp-pub.ezijing.com/x-training-new/register${registerIndex}.JPG`" />
</div>
<div class="register-btn" ref="registerBtn" @click="registerNext"></div>
</div> </div>
<div class="register-step" v-else> <div class="text">{{ registerText }}</div>
<img :src="`https://webapp-pub.ezijing.com/x-training-new/register${registerIndex}.JPG`" />
</div>
<div class="register-btn" ref="registerBtn" @click="registerNext"></div>
</div>
<div class="text">{{ registerText }}</div>
</div>
<div class="step-content2" v-show="stepsIndex === 1">
<div class="form-box">
<el-form ref="form" :model="form" label-width="80px" :disabled="$route.query.type == 1 ? true : false">
<el-form-item label="标题">
<el-input v-model="form.title" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.dec"> </el-input>
</el-form-item>
<el-form-item label="视频">
<upload-video v-model="form.url" @input="input"></upload-video>
</el-form-item>
</el-form>
</div>
<div class="dy-box">
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
<div class="works-title">{{ form.title }}</div>
<div class="works-dec">{{ form.dec }}</div>
<video :src="form.url" width="375px" class="video"></video>
</div> </div>
</div> <div class="step-content2" v-show="stepsIndex === 1">
<div class="step-content1 step-content3" v-show="stepsIndex === 2"> <div class="form-box">
<div class="video-box"> <el-form ref="form" :model="form" label-width="80px" :disabled="$route.query.type == 1 ? true : false">
<div class="dy-box" v-if="dataIndex == 4"> <el-form-item label="标题">
<el-input v-model="form.title" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.dec"> </el-input>
</el-form-item>
<el-form-item label="视频">
<upload-video v-model="form.url" @input="input"></upload-video>
</el-form-item>
</el-form>
</div>
<div class="dy-box">
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" /> <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
<div class="works-title">{{ form.title }}</div> <div class="works-title">{{ form.title }}</div>
<div class="works-dec">{{ form.dec }}</div> <div class="works-dec">{{ form.dec }}</div>
<video :src="form.url" width="375px" class="video"></video> <video :src="form.url" width="375px" class="video"></video>
</div> </div>
<div class="register-step" v-else> </div>
<img :src="`https://webapp-pub.ezijing.com/x-training-new/data${dataIndex + 1}.jpg`" /> <div class="step-content1 step-content3" v-show="stepsIndex === 2">
<div class="video-box">
<div class="dy-box" v-if="dataIndex == 4">
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
<div class="works-title">{{ form.title }}</div>
<div class="works-dec">{{ form.dec }}</div>
<video :src="form.url" width="375px" class="video"></video>
</div>
<div class="register-step" v-else>
<img :src="`https://webapp-pub.ezijing.com/x-training-new/data${dataIndex + 1}.jpg`" />
</div>
<div class="register-btn" ref="dataBtn" @click="dataNext"></div>
</div> </div>
<div class="register-btn" ref="dataBtn" @click="dataNext"></div> <div class="text">{{ registerText }}</div>
</div>
<div class="mian-btn">
<el-button type="primary" @click="cacheReport(1)" v-if="$route.query.type != 1">保存</el-button>
<el-button type="primary" @click="prevBtn" v-if="stepsIndex != 0">上一步</el-button>
<el-button v-if="stepsIndex == 0" type="primary" @click="registerNextBtn">下一步</el-button>
<el-button v-if="stepsIndex == 1" type="primary" @click="formNextBtn">下一步</el-button>
<el-button type="primary" @click="submitReport" v-if="stepsIndex == 2 && $route.query.type != 1"
>完成</el-button
>
</div> </div>
<div class="text">{{ registerText }}</div>
</div>
<div class="mian-btn">
<el-button type="primary" @click="cacheReport(1)" v-if="$route.query.type != 1">保存</el-button>
<el-button type="primary" @click="prevBtn" v-if="stepsIndex != 0">上一步</el-button>
<el-button v-if="stepsIndex == 0" type="primary" @click="registerNextBtn">下一步</el-button>
<el-button v-if="stepsIndex == 1" type="primary" @click="formNextBtn">下一步</el-button>
<el-button type="primary" @click="submitReport" v-if="stepsIndex == 2 && $route.query.type != 1"
>完成</el-button
>
</div> </div>
</div> </ToolCard>
</div> </div>
</template> </template>
<script> <script>
import { submitReport, cacheReport, checkRecord, getReportDetail } from '../api' import { submitReport, cacheReport, checkRecord, getReportDetail } from '../api'
import UploadVideo from '@/components/upload/UploadVideo.vue' import UploadVideo from '@/components/upload/UploadVideo.vue'
import ToolCard from '@/components/base/ToolCard.vue'
import Step from '@/components/base/Step.vue'
export default { export default {
components: { UploadVideo }, components: { UploadVideo, ToolCard, Step },
data() { data() {
return { return {
stepList: [
{ stepName: '创建账户' }, { stepName: '发布视频' }, { stepName: '查看营销数据' }
],
activeStep: 0,
form: { form: {
title: '', title: '',
dec: '', dec: '',
...@@ -263,6 +267,12 @@ export default { ...@@ -263,6 +267,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.pt50-pl60 {
padding: 50px 0 0 60px;
}
.main_content{
display: flex;
}
.step-content1 { .step-content1 {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -340,6 +350,7 @@ export default { ...@@ -340,6 +350,7 @@ export default {
} }
.step-content2 { .step-content2 {
display: flex; display: flex;
padding: 0 30px;
.dy-box { .dy-box {
min-width: 375px; min-width: 375px;
width: 375px; width: 375px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论