Skip to content

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

添加营销工具

上级 ef476662
显示空白字符变更
内嵌 并排
正在显示 包含 619 行增加 和 5 行删除
package-lock.json
浏览文件 @ 6d54fcb3
{
"name": "vue-admin-template",
"name": "x-training-new",
"version": "0.0.0",
"lockfileVersion": 2,
"requires": true,
......@@ -8,10 +8,12 @@
"version": "0.0.0",
"dependencies": {
"axios": "^0.21.3",
"blueimp-md5": "^2.18.0",
"element-ui": "^2.15.6",
"query-string": "^7.0.1",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
},
"devDependencies": {
......@@ -1862,6 +1864,11 @@
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
},
"node_modules/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=="
},
"node_modules/bowser": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
......@@ -5070,6 +5077,11 @@
"node": ">= 6"
}
},
"node_modules/sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
......@@ -5769,6 +5781,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"node_modules/vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"dependencies": {
"sortablejs": "1.10.2"
}
},
"node_modules/vuex": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
......@@ -7435,6 +7455,11 @@
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
},
"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=="
},
"bowser": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
......@@ -9877,6 +9902,11 @@
"socks": "^2.3.3"
}
},
"sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
......@@ -10451,6 +10481,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"requires": {
"sortablejs": "1.10.2"
}
},
"vuex": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
......
package.json
浏览文件 @ 6d54fcb3
......@@ -11,10 +11,12 @@
},
"dependencies": {
"axios": "^0.21.3",
"blueimp-md5": "^2.18.0",
"element-ui": "^2.15.6",
"query-string": "^7.0.1",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
},
"devDependencies": {
......
src/modules/market-tools/components/DouYin.vue 0 → 100644
浏览文件 @ 6d54fcb3
<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-if="stepsIndex === 0">
<div class="video-box">
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" v-if="!registerIndex" />
<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-if="stepsIndex === 1">
<div class="form-box">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="标题">
<el-input v-model="form.title"></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-if="stepsIndex === 2">
<div class="video-box">
<div class="dy-box" v-if="!dataIndex">
<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}.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="stepsIndex++" v-if="stepsIndex != 2">继续</el-button>
<el-button type="primary" @click="stepsIndex++" v-else>确认提交</el-button>
</div>
</div>
</div>
</template>
<script>
import UploadVideo from '@/components/upload/UploadVideo.vue'
export default {
components: { UploadVideo },
data() {
return {
form: {
title: '',
dec: '',
url: ''
},
stepsIndex: 0,
registerIndex: 0,
registerText: '第一步:打开抖音APP，点击底部“我”',
dataIndex: 0,
dataText: '第一步：点击“我”，进入个人主页'
}
},
methods: {
dataNext() {
const styles = {
1: { w: '50px', t: '30px', l: '320px', text: '第二步:点击右上角，进入菜单' },
2: { w: '200px', t: '300px', l: '100px', text: '第三步:点击”创作者服务中心“' },
3: { w: '50px', t: '190px', l: '290px', text: '第四步:点击”数据中心“' }
}
if (this.dataIndex < 4) this.dataIndex++
const getStyle = styles[this.dataIndex]
const getDom = this.$refs.dataBtn.style
this.setStyle(getStyle, getDom)
},
registerNext() {
const styles = {
0: { w: '60px', t: '600px', l: '300px', text: '第一步:打开抖音APP，点击底部“我”' },
1: { w: '310px', t: '380px', l: '30px', text: '第二步:点击其他手机号登录' },
2: { w: '310px', t: '280px', l: '30px', text: '第三步:输入手机号点击获取手机验证码' },
3: { w: '310px', t: '340px', l: '30px', text: '第四步:点击登录' }
}
// if (this.registerIndex < 3) {
// this.registerIndex++
// } else {
// this.registerIndex = 0
// }
this.registerIndex < 3 ? this.registerIndex++ : this.registerIndex = 0
const getStyle = styles[this.registerIndex]
const getDom = this.$refs.registerBtn.style
this.setStyle(getStyle, getDom)
// getDom.width = getStyle.w
// getDom.top = getStyle.t
// getDom.left = getStyle.l
// this.registerText = getStyle.text
},
setStyle(sty, dom) {
dom.width = sty.w
dom.top = sty.t
dom.left = sty.l
this.registerText = sty.text
},
input(url) {
console.log(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;
}
}
.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;
.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%);
}
}
}
.content-box {
padding-top: 30px;
}
.mian-btn {
padding: 30px;
display: flex;
justify-content: right;
}
</style>
src/modules/market-tools/index.js
浏览文件 @ 6d54fcb3
......@@ -6,6 +6,10 @@ const routes = [
{
path: '',
component: () => import('./views/Index.vue')
},
{
path: 'tool',
component: () => import('./views/Tool.vue')
}
]
}
......
src/modules/market-tools/views/Index.vue
浏览文件 @ 6d54fcb3
<template>
<div class="market-tools">营销工具</div>
<div class="market-tools">
<div class="tool-main">
<div class="tool-bg">
<div class="tool-content">
<ul>
<li @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>
</li>
</ul>
<div class="confirm-btn" @click="$router.push({ path: '/market-tools/tool' })">选好了</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {}
export default {
data() {
return {
listIndex: 2,
list: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
text: '搜索引擎优化'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon2.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
text: '搜索引擎营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon3.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon-a3.png',
text: '视频营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon4.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon4.png',
text: '社交媒体营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon5.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon5.png',
text: '智能推荐'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon6.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon6.png',
text: '数字化广告'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
text: '电子邮件营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon8.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon8.png',
text: 'SOLOMO'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
text: '移动营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
text: 'APP营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
text: '全渠道营销'
}
]
}
},
methods: {
selectList(n) {
if (n === 2) return
this.$message('暂未开通')
}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.market-tools{
height:calc(100vh - 86px);
.tool-main{
background: #fff;
padding-bottom: 11px;
.tool-bg{
position: relative;
width: 1254px;
height: 559px;
margin: 0 auto;
background: url(https://webapp-pub.ezijing.com/x-training-new/tool-index-bg.png);
background-size: 100% 100%;
.tool-content{
width: 708px;
position: absolute;
top: 166px;
left: 282px;
ul{
display: flex;
flex-wrap: wrap;
}
li{
width: 167px;
height: 76px;
background: #F5F5F5;
border-radius: 6px;
display: flex;
align-items: center;
margin: 0 10px 10px 0;
cursor: pointer;
&.active{
background: #68B8A4;
.text{
color: #fff;
}
}
img{
margin-left: 16px;
}
.text{
font-size: 14px;
color: #797979;
line-height: 24px;
margin-left: 14px;
}
}
}
.confirm-btn{
width: 119px;
background: #68B8A4;
border-radius: 16px;
margin: 34px auto 0;
text-align: center;
font-size: 18px;
color: #FFFFFF;
line-height: 32px;
cursor: pointer;
}
}
}
padding: 30px;
/* height:calc(100vh - 86px); */
}
</style>
src/modules/market-tools/views/Tool.vue 0 → 100644
浏览文件 @ 6d54fcb3
<template>
<div class="tool-box">
<ul class="left-nav">
<li @click="selectList(index)" v-for="(item, index) in list" :key="index" :class="listIndex === index ? 'active' : ''">
<div class="icon-box">
<img :src="listIndex === index ? item.iconActive : item.icon">
</div>
<div class="text">{{ item.text }}</div>
</li>
</ul>
<div class="right-content">
<dou-yin></dou-yin>
</div>
</div>
</template>
<script>
import DouYin from '../components/DouYin.vue'
export default {
components: { DouYin },
data() {
return {
listIndex: 2,
list: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
text: '搜索引擎优化'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon2.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
text: '搜索引擎营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon3.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon-a3.png',
text: '视频营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon4.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon4.png',
text: '社交媒体营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon5.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon5.png',
text: '智能推荐'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon6.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon6.png',
text: '数字化广告'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
text: '电子邮件营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon8.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon8.png',
text: 'SOLOMO'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
text: '移动营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
text: 'APP营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
text: '全渠道营销'
}
]
}
},
methods: {
selectList(n) {
if (n === 2) return
this.$message('暂未开通')
}
}
}
</script>
<style lang="scss" scoped>
.tool-box{
display: flex;
padding: 25px 30px 30px;
.left-nav{
width: 264px;
height: 684px;
background: url(https://webapp-pub.ezijing.com/x-training-new/nav-bg.png);
background-size: 100% 100%;
padding-top: 18px;
box-sizing: border-box;
li{
width: 220px;
height: 58px;
display: flex;
align-items: center;
margin: 0 auto;
cursor: pointer;
&.active{
background: #68B8A4;
.text{
color: #fff;
}
}
.icon-box{
width: 50px;
margin-left: 40px;
}
.text{
font-size: 14px;
color: #666666;
}
}
}
.right-content{
flex: 1;
background: #fff;
margin-left: 30px;
padding: 30px;
box-sizing: border-box;
}
}
</style>
src/modules/product-analysis/api.js 0 → 100644
浏览文件 @ 6d54fcb3
import httpRequest from '@/utils/axios'
/**
* 获取商品列表
*/
export function getInvoiceList(params) {
return httpRequest.get('/api/finance/v1/invoices/list', { params }).then({})
}
// 获取支付过滤条件
export function getCondition(params) {
return httpRequest.get('/api/finance/v1/payments/condition', { params })
}
// 分配发票跟进人
export function assignSales(data) {
return httpRequest.post('/api/finance/v1/invoices/assign-sales', data, {})
}
// 发票充值
export function deposit() {
return httpRequest.post('/api/finance/v1/invoices/deposit')
}
// 下载发票列表
export function downloadInvoices(params) {
return httpRequest.get('/api/finance/v1/invoices/download', { params, responseType: 'blob' })
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论