517 lines
22 KiB
Vue
517 lines
22 KiB
Vue
|
<template>
|
|||
|
|
<el-card class="myDetailCard">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>媒体信息</span>
|
|||
|
|
<el-icon style="float: right;cursor: pointer;" @click="handleClose">
|
|||
|
|
<Close />
|
|||
|
|
</el-icon>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-form ref="ruleFormRef" :model="detailForm" label-width="200px" class="myDetailForm">
|
|||
|
|
<div class="supplierTitleContainer">
|
|||
|
|
<div class="supplierNameIcon" />
|
|||
|
|
<div class="supplierNameTitle">银川金凤区新华联广场门口上方LED</div>
|
|||
|
|
</div>
|
|||
|
|
<el-collapse class="my-collapse" v-model="activeNames" @change="handleChange">
|
|||
|
|
<el-collapse-item title="媒体基础信息" name="1">
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="业务部门" prop="business_department">
|
|||
|
|
优势媒体部门
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="状态" prop="business_department">
|
|||
|
|
生效中
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="媒体编号" prop="business_department">
|
|||
|
|
媒体公司
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="媒体名称" prop="business_department">
|
|||
|
|
公交车身
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="展示形式" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="媒介形式" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="是否照明" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="是否实地考察" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="夏季照明时间" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="冬季照明时间" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="日均人流量" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="日均车流量" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="播放时间" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="播放频次" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="批文情况" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="归属" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="媒体尺寸" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="面积" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="高/宽（m）" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="可上画日期" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="当前画面" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="媒体档期" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="城市-商圈" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="地理位置（经纬度）" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
<el-collapse-item title="媒体价格" name="2">
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="刊例价（元）" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="常规折扣" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="常规净价（元）" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="成本折扣" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="成本净价（元）" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="销售方式" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="CPM" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="SOV" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="价格情况说明" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="付款要求" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="供应商" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="供应商联系人" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="供应商联系方式" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="首次是否包含安装制作费用" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="发票类型" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="税点（%）" prop="business_department">
|
|||
|
|
待定
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
<el-collapse-item title="评估信息" name="3">
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="品牌" prop="business_department">
|
|||
|
|
有限责任公司
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="标签" prop="business_department">
|
|||
|
|
长期
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="关键词" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="地标" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="适用人群" prop="business_department">
|
|||
|
|
有限责任公司
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="最短发布期" prop="business_department">
|
|||
|
|
长期
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="MR" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="行车可视情况" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="可视距离" prop="business_department">
|
|||
|
|
有限责任公司
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="可视角度（度）" prop="business_department">
|
|||
|
|
长期
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="媒体朝向" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="周边广告环境" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="遮挡情况" prop="business_department">
|
|||
|
|
有限责任公司
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="媒体距地面高度" prop="business_department">
|
|||
|
|
长期
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="地图显示比例" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<el-form-item label="小区" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="优势" prop="business_department">
|
|||
|
|
有限责任公司
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="劣势" prop="business_department">
|
|||
|
|
有限责任公司
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="备注" prop="business_department">
|
|||
|
|
有限责任公司
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
<el-collapse-item title="附件" name="4">
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="媒体文件" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="媒体图片" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="媒体视频" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="刊例照片" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="媒体链条" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="资质文件" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="splineBar" />
|
|||
|
|
<el-row :gutter="30" class="my_form_row">
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="盖章刊例" prop="business_department">
|
|||
|
|
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import { onMounted, defineEmits, ref } from 'vue'
|
|||
|
|
import { Close } from '@element-plus/icons-vue'
|
|||
|
|
|
|||
|
|
import { useBackgroundStore } from '@/store/modules/background'
|
|||
|
|
import otherbg from '@/assets/images/otherbg.png'
|
|||
|
|
const bgStore = useBackgroundStore()
|
|||
|
|
|
|||
|
|
const { proxy } = getCurrentInstance()
|
|||
|
|
const emit = defineEmits(['handleShowList']);
|
|||
|
|
const detailForm = ref({
|
|||
|
|
supplierList: [
|
|||
|
|
{ medioName: '银川金凤区新华联广场门口上方LED', medioCode: 'MT2023101100009', medioType: 'LED', medioClass: '电子广告', medioStatus: 1 },
|
|||
|
|
{ medioName: '银川金凤区新华联广场门口上方LED', medioCode: 'MT2023101100009', medioType: 'LED', medioClass: '电子广告', medioStatus: 1 }
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
const activeNames = ref(['1', '2', '3', '4'])
|
|||
|
|
const handleClose = () => {
|
|||
|
|
emit('handleShowList')
|
|||
|
|
}
|
|||
|
|
const handleChange = (val) => {
|
|||
|
|
console.log(val)
|
|||
|
|
activeNames.value = val
|
|||
|
|
}
|
|||
|
|
const handleOpenMedio = () => {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// 初始化
|
|||
|
|
onMounted(() => {
|
|||
|
|
bgStore.setBgImage(otherbg)
|
|||
|
|
});
|
|||
|
|
// 暴露方法\属性给父组件
|
|||
|
|
defineExpose({
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style lang='scss'>
|
|||
|
|
.supplierTitleContainer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 26px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.supplierNameIcon {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
background: #ffc63d;
|
|||
|
|
margin: 0px 10px 4px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.supplierNameTitle {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-family: Microsoft YaHei;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: #1E1E1E;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 分割线
|
|||
|
|
.splineBar {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1px;
|
|||
|
|
background: #D9DFE5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.supplierNameLabel {
|
|||
|
|
font-family: Microsoft YaHei;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #1A75E6;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mybadge .el-badge__content.is-dot {
|
|||
|
|
width: 6px;
|
|||
|
|
height: 6px;
|
|||
|
|
background-color: #126601;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.myMedioStatus {
|
|||
|
|
font-family: Microsoft YaHei;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #126601;
|
|||
|
|
}
|
|||
|
|
</style>
|