提交 3430f437 authored 作者: 王诒正's avatar 王诒正

案例列表

上级 23435e13
import httpRequest from '@/utils/axios'
// 案例列表
export function caseList(params) {
return httpRequest.get('/api/opera/v1/operations/cases', { params })
}
// 案例详情
export function caseInfo(id, params = {}) {
return httpRequest.get(`/api/opera/v1/operations/${id}/case`, { params })
}
// 添加案例背景
export function caseCreate(data) {
return httpRequest.post('/api/opera/v1/operations/case', data)
}
// 更新案例背景
export function caseUpdate(id, data) {
return httpRequest.put(`/api/opera/v1/operations/${id}/case`, data)
}
// 删除案例背景
export function caseDelete(id, params) {
return httpRequest.delete(`/api/opera/v1/operations/${id}/case`, { params })
}
<template>
<div>11</div>
<div></div>
</template>
......@@ -54,7 +54,7 @@ export default {
data() {
return {
triggerMode: [
{ option: 'A', context: '11' }
{ option: 'A', context: '' }
],
triggerTime: [
{ option: 'A', context: '' }
......
<template>
<div>
<div>
<el-card class="box-card">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/yhfq/albj' }">案例背景</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/yhfq/albj/detail' }">案例背景</el-breadcrumb-item>
</el-breadcrumb>
</el-card>
</div>
<div>
<el-card class="box-card" style="float: left; width: 33.5%">
<div slot="header" class="clearfix">
<span style="text-align:center">公司信息</span>
</div>
<div class="text item">
{{ companyDetail }}
</div>
</el-card>
<el-card class="box-card" style="float: left; width: 33.3%">
<div slot="header" class="clearfix">
<span style="text-align:center">产品信息</span>
</div>
<div class="text item">
{{ productDetail }}
</div>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="text-align:center">职位信息</span>
</div>
<div class="text item">
{{ positionDetail }}
</div>
</el-card>
</div>
</div>
</template>
<script>
export default {
name: 'detail',
mounted() {
var data = this.$route.params
console.log('dasdasdas', this.$route.params)
this.companyDetail = data.company_detail
this.productDetail = data.product_detail
this.positionDetail = data.position_detail
},
data() {
return {
companyDetail: '',
productDetail: '',
positionDetail: ''
}
}
}
</script>
<style>
</style>
<template>
<app-container title="请选择您要进入的案例背景">
<template>
<div class="list" v-for="item in arr" :key="item.index" @click="clk(item.index)" ref="main" :flag="flag">
<it-em :id="activeIndex == item.index ? 'clk' : ''">
<template v-slot:title>
<div>
<img :src="item.imgsrc" alt="" srcset="" />
<p>{{ item.title }}</p>
</div>
</template>
<template v-slot:xm>
<div>姓名</div>
<div>{{ item.name }}</div>
</template>
<template v-slot:gs>
<div>公司</div>
<div>{{ item.gs }}</div>
</template>
<template v-slot:bm>
<div>部门</div>
<div>{{ item.bm }}</div>
</template>
<template v-slot:zw>
<div>职位</div>
<div>{{ item.zw }}</div>
</template>
<template v-slot:cp>
<div>营销产品</div>
<div>{{ item.cp }}</div>
</template>
</it-em>
</div>
</template>
<!-- <it-em>
<template v-slot:title>
<div>
<img src="../../../assets/images/gsxx.png" alt="" srcset="">
<p>案例分析2</p>
</div>
</template>
<template v-slot:xm>
<div>姓名</div>
<div>立马</div>
</template>
<template v-slot:gs>
<div>公司</div>
<div>建国保险公司</div>
</template>
<template v-slot:bm>
<div>部门</div>
<div>市场营销部</div>
</template>
<template v-slot:zw>
<div>职位</div>
<div>市场营销专员</div>
</template>
<template v-slot:cp>
<div>营销产品</div>
<div>建国重疾险</div>
</template>
</it-em>
<it-em>
<template v-slot:title>
<div>
<img src="../../../assets/images/gsxx.png" alt="" srcset="">
<p>案例分析3</p>
</div>
</template>
<template v-slot:xm>
<div>姓名</div>
<div>立马</div>
</template>
<template v-slot:gs>
<div>公司</div>
<div>建国保险公司</div>
</template>
<template v-slot:bm>
<div>部门</div>
<div>市场营销部</div>
</template>
<template v-slot:zw>
<div>职位</div>
<div>市场营销专员</div>
</template>
<template v-slot:cp>
<div>营销产品</div>
<div>建国重疾险</div>
</template>
</it-em> -->
<template #footer>
<div class="app-container-ft">
<el-button type="primary" size="mini" @click="open()">开始实训</el-button>
<el-button type="primary" size="mini" @click="jump()">查看背景详情</el-button>
</div>
</template>
</app-container>
<div>
<div>
<el-card class="box-card">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }">案例背景</el-breadcrumb-item>
</el-breadcrumb>
</el-card>
</div>
<div>
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
<el-tab-pane label="初级" name="1">
<div>
<el-card class="box-card">
<el-row>
<el-button size="mini" icon="el-icon-plus" type="success">添加</el-button>
</el-row>
</el-card>
<el-card class="box-card">
<el-table
:data="tableData1"
border
style="width: 100%">
<el-table-column
fixed
prop="created_at"
label="日期">
</el-table-column>
<el-table-column label="图片">
<template slot-scope="scope">
<div class="demo-image__placeholder">
<div class="block">
<el-image fit="scale-down" :src="scope.row.poster_url">
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="案例名称">
</el-table-column>
<el-table-column
prop="username"
label="姓名">
</el-table-column>
<el-table-column
prop="department"
label="部门">
</el-table-column>
<el-table-column
prop="position"
label="职位">
</el-table-column>
<el-table-column
prop="product"
label="营销产品">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-select size="mini" :value="opera" @change="operation" placeholder="请选择">
<el-option :value="{ tag: 'reach', row: scope.row }" label="触达方案"></el-option>
<el-option :value="{ tag: 'group', row: scope.row }" label="用户群"></el-option>
<el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>
<el-option :value="{ tag: 'delete', row: scope.row }" label="删除"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</el-tab-pane>
<el-tab-pane label="中级" name="2">
<div>
<el-card class="box-card">
<el-row>
<el-button size="mini" icon="el-icon-plus" type="success">添加</el-button>
</el-row>
</el-card>
<el-card class="box-card">
<el-table
:data="tableData2"
border
style="width: 100%">
<el-table-column
fixed
prop="created_at"
label="日期">
</el-table-column>
<el-table-column label="图片">
<template slot-scope="scope">
<div class="demo-image__placeholder">
<div class="block">
<el-image fit="scale-down" :src="scope.row.poster_url">
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="案例名称">
</el-table-column>
<el-table-column
prop="username"
label="姓名">
</el-table-column>
<el-table-column
prop="department"
label="部门">
</el-table-column>
<el-table-column
prop="position"
label="职位">
</el-table-column>
<el-table-column
prop="product"
label="营销产品">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-select size="mini" :value="opera" @change="operation" placeholder="请选择">
<el-option :value="{ tag: 'reach', row: scope.row }" label="触达方案"></el-option>
<el-option :value="{ tag: 'group', row: scope.row }" label="用户群"></el-option>
<el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>
<el-option :value="{ tag: 'delete', row: scope.row }" label="删除"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</el-tab-pane>
<el-tab-pane label="高级" name="3">当前功能暂无...</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
</app-container>
</template>
<script>
import AppContainer from '@/components/AppContainer'
import ItEm from './item.vue'
import * as api from '@/api/cases'
export default {
components: { AppContainer, ItEm },
mounted() {
api.caseList({ level: parseInt(this.activeName) }).then(res => {
console.log(res)
if (res.code === 0) {
this.tableData1 = res.data
}
}).catch(error => {
console.log(error)
})
},
data() {
return {
arr: [
{
imgsrc: require('../../../assets/images/gsxx.png'),
title: '案例分析1',
name: '立马',
gs: '建国保险公司',
bm: '市场营销部',
zw: '市场营销专员',
cp: '建国重疾险',
index: 1
},
{
imgsrc: require('../../../assets/images/gsxx.png'),
title: '案例分析2',
name: '立马',
gs: '建国保险公司',
bm: '市场营销部',
zw: '市场营销专员',
cp: '建国重疾险',
index: 2
},
{
imgsrc: require('../../../assets/images/gsxx.png'),
title: '案例分析3',
name: '立马',
gs: '建国保险公司',
bm: '市场营销部',
zw: '市场营销专员',
cp: '建国重疾险',
index: 3
}
],
activeIndex: -1,
flag: false,
main1: false,
main2: false,
main3: false
activeName: '1',
opera: '',
tableData1: [],
tableData2: [],
tableData3: []
}
},
methods: {
clk(index) {
this.activeIndex = index
handleClick(tab, event) {
api.caseList({ level: parseInt(this.activeName) }).then(res => {
console.log(res)
if (res.code === 0) {
this.tableData2 = res.data
}
}).catch(error => {
console.log(error)
})
},
jump() {
if (this.activeIndex !== -1) {
this.$router.push('/yhfq/alfx')
operation(opera) {
console.log(opera.row)
switch (opera.tag) {
case 'reach':
break
case 'group':
break
case 'detail':
this.$router.push({
name: 'case-detail',
params: opera.row
})
break
case 'delete':
break
}
},
open() {
window.location.href = 'http://eademo-test.ezijing.com/app.html#/InAppList'
}
}
}
</script>
<style scoped lang="scss">
app-container {
overflow: hidden;
// it-em {
// float: left;
// margin-right: 20px;
// }
}
#clk {
box-shadow: 0px 8px 16px 0px rgba(192, 21, 64, 0.4);
border: 1px solid #c01540;
}
</style>
import Layout from '@/components/layout'
// 用户分
// 用户分
const userGroup = [
/* 首页 */
{ path: '/yhfq', redirect: '/yhfq/albj' },
{ path: '/yhfq/albj', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') },
{ path: '/yhfq/albj/detail', name: 'case-detail', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj/detail') },
{ path: '/albj', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') },
{ path: '/yhfq/alfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/alfx') },
{ path: '/yhfq/yhqfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/yhqfx') }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论