34 changed files with 2283 additions and 455 deletions
@ -0,0 +1,586 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<a-button @click="showModal" type="primary">统计信息填报</a-button> |
||||
|
<a-modal |
||||
|
:confirm-loading="confirmLoading" |
||||
|
:okText="okText" |
||||
|
:title="title" |
||||
|
:visible="visible" |
||||
|
@cancel="handleCancel" |
||||
|
@ok="handleSubmit" |
||||
|
width="50%" |
||||
|
> |
||||
|
<!-- 公司信息 --> |
||||
|
<a-form :form="form" v-if="current === 0"> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="公司名称" |
||||
|
required |
||||
|
> |
||||
|
<a-auto-complete |
||||
|
@search="handleSearchTasks" |
||||
|
@select="onSelect" |
||||
|
placeholder="公司名称" |
||||
|
v-model="company" |
||||
|
> |
||||
|
<template slot="dataSource"> |
||||
|
<a-select-option |
||||
|
:key="task.id" |
||||
|
:value="`${task.id}`" |
||||
|
v-for="task in dataSource" |
||||
|
>{{ task.company }}</a-select-option> |
||||
|
</template> |
||||
|
</a-auto-complete> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="联系人" |
||||
|
> |
||||
|
<span>{{ companyInfo.name || '暂无' }}</span> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="联系方式" |
||||
|
> |
||||
|
<span>{{ companyInfo.phone || '暂无' }}</span> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="时间" |
||||
|
required |
||||
|
> |
||||
|
<a-date-picker |
||||
|
:open="yearShowOne" |
||||
|
@openChange="openChangeOne" |
||||
|
@panelChange="panelChangeOne" |
||||
|
format="YYYY" |
||||
|
mode="year" |
||||
|
placeholder="请选择年份" |
||||
|
v-model="platform.time" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="季度" |
||||
|
required |
||||
|
> |
||||
|
<a-select @select="onSelectQuarter" placeholder="请选择季度"> |
||||
|
<a-select-option |
||||
|
:key="quarter.id" |
||||
|
:value="quarter.id" |
||||
|
v-for="quarter in quarters" |
||||
|
>{{ quarter.value }}</a-select-option> |
||||
|
</a-select> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
<!-- 知识产权综合情况（项） --> |
||||
|
<a-form :form="form" v-if="current === 1"> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="实用本年期初数" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入实用本年期初数..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.practicalNumber" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="实用当年新增" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入实用当年新增..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.practicalIncrease" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="发明本年期初数" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入发明本年期初数..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.inventionNumber" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="发明当年新增" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入发明当年新增..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.inventionIncrease" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="软著本年期初数" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入软著本年期初数..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.softNumber" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="软著当年新增" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入软著当年新增..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.softIncrease" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="商标本年期初数" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入商标本年期初数..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.brandNumber" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="商标当年新增" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入商标当年新增..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.brandIncrease" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
<!-- 综合职工情况（个） --> |
||||
|
<a-form :form="form" v-if="current === 2"> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="人员总数" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入人员总数..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.totalNumber" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="科技人员" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入科技人员..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.sciencePersonnel" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="大专以上人数" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入大专以上人数..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.collegeaboveNumber" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
<!-- 综合经济指标 --> |
||||
|
<a-form :form="form" v-if="current === 3"> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="资产总额" |
||||
|
> |
||||
|
<a-input-number |
||||
|
:precision="precision" |
||||
|
placeholder="请输入资产总额..." |
||||
|
step="0.01" |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.totalAssets" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="营业收入" |
||||
|
> |
||||
|
<a-input-number |
||||
|
:precision="precision" |
||||
|
placeholder="请输入营业收入..." |
||||
|
step="0.01" |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.operatingIncome" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="利润总额" |
||||
|
> |
||||
|
<a-input-number |
||||
|
:precision="precision" |
||||
|
placeholder="请输入利润总额..." |
||||
|
step="0.01" |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.profitTotal" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="上缴税金" |
||||
|
> |
||||
|
<a-input-number |
||||
|
:precision="precision" |
||||
|
placeholder="请输入上缴税金..." |
||||
|
step="0.01" |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.taxes" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="研发费用" |
||||
|
> |
||||
|
<a-input-number |
||||
|
:precision="precision" |
||||
|
placeholder="请输入研发费用..." |
||||
|
step="0.01" |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.researchCosts" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
<!-- 服务情况（次） --> |
||||
|
<a-form :form="form" v-if="current === 4"> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="代理代办" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入代理代办..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.agentService" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="政策推送" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入政策推送..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.policyPush" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="双创活动" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入双创活动..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.doubleActivities" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="政策辅导" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入政策辅导..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.policyGuidance" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="项目申报" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="请输入项目申报..." |
||||
|
style="width:100%" |
||||
|
v-model.trim="platform.projectDeclaration" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
|
||||
|
<a-steps :current="current"> |
||||
|
<a-step @click="current = 0" style="cursor: pointer"> |
||||
|
<template slot="title"> |
||||
|
<span v-if="current === 0">Waiting...</span> |
||||
|
<span v-else>完成</span> |
||||
|
</template> |
||||
|
<span slot="description">公司信息</span> |
||||
|
</a-step> |
||||
|
<a-step |
||||
|
:title="current > 1 ? '完成' : 'Waiting...'" |
||||
|
@click="current = 1" |
||||
|
description="知识产权综合情况（项）" |
||||
|
style="cursor: pointer" |
||||
|
/> |
||||
|
<a-step |
||||
|
:title="current > 2 ? '完成' : 'Waiting...'" |
||||
|
@click="current = 2" |
||||
|
description="综合职工情况（个）" |
||||
|
style="cursor: pointer" |
||||
|
/> |
||||
|
<a-step |
||||
|
:title="current > 3 ? '完成' : 'Waiting...'" |
||||
|
@click="current = 3" |
||||
|
description="综合经济指标" |
||||
|
style="cursor: pointer" |
||||
|
/> |
||||
|
<a-step |
||||
|
:title="current > 4 ? '完成' : 'Waiting...'" |
||||
|
@click="current = 4" |
||||
|
description="服务情况（次）" |
||||
|
style="cursor: pointer" |
||||
|
/> |
||||
|
</a-steps> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import debounce from 'lodash/debounce'; |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
import { addEnterprise, queryInfo } from 'config/api'; |
||||
|
|
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const formTailLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 18, offset: 6 }, |
||||
|
}; |
||||
|
export default { |
||||
|
name: 'SettledModel', |
||||
|
data() { |
||||
|
this.handleSearchTasks = debounce(this.handleSearchTasks, 800); |
||||
|
return { |
||||
|
form: this.$form.createForm(this, { name: 'submit' }), |
||||
|
visible: false, |
||||
|
current: 0, |
||||
|
fileList: [], |
||||
|
title: '统计信息填报', |
||||
|
formItemLayout, |
||||
|
formTailLayout, |
||||
|
confirmLoading: false, |
||||
|
okText: '下一步', |
||||
|
platform: { |
||||
|
// 公司信息 |
||||
|
placeId: '', // 公司id |
||||
|
time: null, // 时间 |
||||
|
quarter: '', // 季度 |
||||
|
// 知识产权综合情况（项） |
||||
|
practicalNumber: '', // 实用本年期初数 |
||||
|
practicalIncrease: '', // 实用当年新增 |
||||
|
inventionNumber: '', // 发明本年期初数 |
||||
|
inventionIncrease: '', // 发明当年新增 |
||||
|
softNumber: '', // 软著本年期初数 |
||||
|
softIncrease: '', // 软著当年新增 |
||||
|
brandNumber: '', // 商标本年期初数 |
||||
|
brandIncrease: '', // 商标当年新增 |
||||
|
// 综合职工情况（个） |
||||
|
totalNumber: '', // 人员总数 |
||||
|
sciencePersonnel: '', // 科技人员 |
||||
|
collegeaboveNumber: '', // 大专以上人数 |
||||
|
// 服务情况（次） |
||||
|
agentService: '', // 代理代办 |
||||
|
policyPush: '', // 政策推送 |
||||
|
doubleActivities: '', // 双创活动 |
||||
|
policyGuidance: '', // 政策辅导 |
||||
|
projectDeclaration: '', // 项目申报 |
||||
|
}, |
||||
|
company: '', |
||||
|
dataSource: [], |
||||
|
companyInfo: { |
||||
|
company: '', // 公司名称 |
||||
|
name: '', // 联系人 |
||||
|
phone: '', // 联系方式 |
||||
|
}, // 公司信息 |
||||
|
yearShowOne: false, |
||||
|
quarters: [ |
||||
|
{ id: 1, value: '第一季度' }, |
||||
|
{ id: 2, value: '第二季度' }, |
||||
|
{ id: 3, value: '第三季度' }, |
||||
|
{ id: 4, value: '第四季度' }, |
||||
|
], |
||||
|
precision: 2, |
||||
|
}; |
||||
|
}, |
||||
|
computed: mapState('user', ['picCode']), |
||||
|
|
||||
|
watch: { |
||||
|
current(val) { |
||||
|
if (val === 4) { |
||||
|
this.okText = '完成'; |
||||
|
} else { |
||||
|
this.okText = '下一步'; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapMutations('home', ['setPagePath']), |
||||
|
// 显示表单输入框 |
||||
|
showModal() { |
||||
|
const anyringToken = sessionStorage.getItem('anyringToken'); |
||||
|
if (!anyringToken) { |
||||
|
this.setPagePath(this.$route.path); |
||||
|
this.$router.push('/login'); |
||||
|
this.$message.warning('请先登录'); |
||||
|
} else { |
||||
|
this.visible = true; |
||||
|
} |
||||
|
}, |
||||
|
// 取消显示 |
||||
|
handleCancel(e) { |
||||
|
this.visible = false; |
||||
|
}, |
||||
|
|
||||
|
// 模糊搜索 选择公司信息 |
||||
|
async handleSearchTasks() { |
||||
|
try { |
||||
|
const params = { param: { company: this.company } }; |
||||
|
const res = await queryInfo(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.dataSource = data; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
onSelect(value) { |
||||
|
const item = this.dataSource.find(item => item.id === +value); |
||||
|
this.platform.placeId = item.id; |
||||
|
this.companyInfo.company = item.company; |
||||
|
this.companyInfo.name = item.name; |
||||
|
this.companyInfo.phone = item.phone; |
||||
|
}, |
||||
|
|
||||
|
// 弹出日历和关闭日历的回调 |
||||
|
openChangeOne(status) { |
||||
|
//status是打开或关闭的状态 |
||||
|
if (status) { |
||||
|
this.yearShowOne = true; |
||||
|
} |
||||
|
}, |
||||
|
// 时间选择 |
||||
|
panelChangeOne(value) { |
||||
|
this.platform.time = this.$moment(value).format('YYYY'); |
||||
|
this.yearShowOne = false; |
||||
|
}, |
||||
|
|
||||
|
// 季度选择 |
||||
|
onSelectQuarter(value) { |
||||
|
this.platform.quarter = value; |
||||
|
}, |
||||
|
|
||||
|
// 点击确定 |
||||
|
handleSubmit() { |
||||
|
const { placeId, time, quarter } = this.platform; |
||||
|
if (!placeId) { |
||||
|
this.$message.error('请输入公司名称'); |
||||
|
this.current = 0; |
||||
|
return; |
||||
|
} |
||||
|
if (!time) { |
||||
|
this.$message.error('请选择时间'); |
||||
|
this.current = 0; |
||||
|
return; |
||||
|
} |
||||
|
if (!quarter) { |
||||
|
this.$message.error('请选择季度'); |
||||
|
this.current = 0; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (this.okText === '下一步') { |
||||
|
this.current += 1; |
||||
|
} else { |
||||
|
this.addSettled(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 添加企业统计信息填报表 |
||||
|
* @param {object} params 提交的数据 |
||||
|
*/ |
||||
|
async addSettled() { |
||||
|
this.confirmLoading = true; |
||||
|
try { |
||||
|
const params = { param: {} }; |
||||
|
params.param = { ...this.platform }; |
||||
|
const res = await addEnterprise(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('添加成功'); |
||||
|
this.visible = false; |
||||
|
for (let key in this.platform) { |
||||
|
this.platform[key] = ''; |
||||
|
} |
||||
|
for (let key in this.companyInfo) { |
||||
|
this.companyInfo[key] = ''; |
||||
|
} |
||||
|
this.company = ''; |
||||
|
this.current = 0; |
||||
|
} else { |
||||
|
this.$message.error(msg || '添加失败'); |
||||
|
} |
||||
|
this.confirmLoading = false; |
||||
|
} catch (error) { |
||||
|
console.log('error: ', error); |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.must-color { |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
.code_img { |
||||
|
height: 32px; |
||||
|
width: 120px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,206 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<a-button @click="showModal" style="width: 80px" type="primary">揭榜</a-button> |
||||
|
<a-modal |
||||
|
:confirm-loading="confirmLoading" |
||||
|
:visible="visible" |
||||
|
@cancel="handleCancel" |
||||
|
@ok="handleOk" |
||||
|
title="揭榜" |
||||
|
width="50%" |
||||
|
> |
||||
|
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }"> |
||||
|
<a-form-item label="揭榜人姓名" required> |
||||
|
<a-input placeholder="请输入揭榜人姓名" v-model="setData.accepterName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="手机号" required> |
||||
|
<a-input |
||||
|
@change="changePhone" |
||||
|
placeholder="请输入手机号" |
||||
|
type="tel" |
||||
|
v-decorator="['setData.phone', { rules: phoneRules }]" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="图片验证码" required> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="图片验证码" type="number" v-model="codeNum" /> |
||||
|
<img |
||||
|
:src="picCode.imageBase64" |
||||
|
@click="changePicCode" |
||||
|
class="code_img ml-2" |
||||
|
v-if="picCode && picCode.imageBase64" |
||||
|
/> |
||||
|
<a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item label="短信验证码"> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input |
||||
|
@change="changeCode" |
||||
|
placeholder="请输入验证码" |
||||
|
type="number" |
||||
|
v-decorator="['credential', { rules: codeRules }]" |
||||
|
/> |
||||
|
<a-button class="ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button> |
||||
|
<a-button |
||||
|
:disabled="setData.phone && setData.phone.length !== 11" |
||||
|
@click="getCode" |
||||
|
class="ml-2" |
||||
|
type="primary" |
||||
|
v-else |
||||
|
>获取验证码</a-button> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="揭榜单位" required> |
||||
|
<a-input placeholder="请输入揭榜单位" v-model="setData.unit" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="介绍人"> |
||||
|
<a-input placeholder="揭榜介绍人" v-model="setData.introducer" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="方案简述" required> |
||||
|
<a-textarea placeholder="请输入方案简述" v-model="setData.planIntro" /> |
||||
|
</a-form-item> |
||||
|
<!-- <a-form-item label="揭榜时间"> |
||||
|
<a-date-picker format="YYYY-MM-DD HH:mm:ss" show-time @ok="changeTime" /> |
||||
|
</a-form-item>--> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
<a-modal |
||||
|
:confirm-loading="confirmLoading1" |
||||
|
:visible="visible1" |
||||
|
@cancel="handleCancel1" |
||||
|
@ok="handleOk1" |
||||
|
title="需要登录" |
||||
|
width="30%" |
||||
|
> |
||||
|
还没有登录，请您先去登录 |
||||
|
<span style="color: rgba(0, 0, 0, 0.45)">（点击确定前往登录）</span> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapActions, mapState } from 'vuex'; |
||||
|
import { addUnveiling } from 'config/api'; |
||||
|
import mixin from 'views/User/mixin'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Unveiling', |
||||
|
mixins: [mixin], |
||||
|
props: { |
||||
|
proId: { |
||||
|
type: Number, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
formLayout: 'horizontal', |
||||
|
form: this.$form.createForm(this, { name: '揭榜' }), |
||||
|
visible: false, |
||||
|
visible1: false, |
||||
|
confirmLoading: false, |
||||
|
confirmLoading1: false, |
||||
|
codeNum: '', // 验证码 |
||||
|
setData: { |
||||
|
accepterName: '', // 揭榜人姓名 |
||||
|
phone: '', // 手机号 |
||||
|
unit: '', // 接棒人单位 |
||||
|
introducer: '', // 接棒人 |
||||
|
planIntro: '', // 方案描述 |
||||
|
time: '', // 时间 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
computed: mapState('user', ['picCode', 'anyringToken']), |
||||
|
methods: { |
||||
|
...mapActions('user', ['sendCode', 'sendPicCode']), |
||||
|
showModal() { |
||||
|
const storageAnyringToken = sessionStorage.getItem('anyringToken') || this.anyringToken; |
||||
|
if (storageAnyringToken) { |
||||
|
this.visible = true; |
||||
|
} else { |
||||
|
this.visible1 = true; |
||||
|
} |
||||
|
}, |
||||
|
handleCancel(e) { |
||||
|
this.visible = false; |
||||
|
}, |
||||
|
handleCancel1() { |
||||
|
this.visible1 = false; |
||||
|
}, |
||||
|
// 点击确定 |
||||
|
handleOk1() { |
||||
|
this.$router.push('/login'); |
||||
|
}, |
||||
|
changePhone(e) { |
||||
|
this.setData.phone = e.target.value; |
||||
|
}, |
||||
|
// 获取验证码 |
||||
|
async getCode() { |
||||
|
try { |
||||
|
const params = { |
||||
|
phone: this.setData.phone, |
||||
|
verificationCodeId: this.picCode.verificationCodeId, |
||||
|
verificationCodeValue: this.codeNum, |
||||
|
}; |
||||
|
await this.sendCode(params); |
||||
|
this.getCodeInterval(); |
||||
|
} catch (error) { |
||||
|
throw new Error(`SignIn.vue method getCode: ${error}`); |
||||
|
} |
||||
|
}, |
||||
|
changeCode(e) { |
||||
|
this.setData.codeNum = e.target.value; |
||||
|
}, |
||||
|
// 刷新验证码 |
||||
|
changePicCode() { |
||||
|
this.sendPicCode(); |
||||
|
}, |
||||
|
// 揭榜 |
||||
|
async handleOk(e) { |
||||
|
try { |
||||
|
this.confirmLoading = true; |
||||
|
const params = { |
||||
|
param: { |
||||
|
accepterName: this.setData.accepterName, |
||||
|
billboardId: this.proId, |
||||
|
code: this.setData.codeNum, |
||||
|
introducer: this.setData.introducer, |
||||
|
phone: this.setData.phone, |
||||
|
planIntro: this.setData.planIntro, |
||||
|
times: this.setData.time, |
||||
|
unit: this.setData.unit, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await addUnveiling(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('揭榜信息提交成功'); |
||||
|
for (let key in this.setData) { |
||||
|
this.setData[key] = ''; |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error('提交失败'); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
} |
||||
|
this.visible = false; |
||||
|
this.confirmLoading = false; |
||||
|
}, |
||||
|
changeTime(e) { |
||||
|
this.setData.time = this.$moment(e._d).format('YYYY-MM-DD HH:mm:ss'); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.code_img { |
||||
|
height: 32px; |
||||
|
width: 120px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,396 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<a-button @click="showModal" class="ml-3" type="primary">添加</a-button> |
||||
|
|
||||
|
<a-modal |
||||
|
:confirm-loading="confirmLoading" |
||||
|
:title="title" |
||||
|
:visible="visible" |
||||
|
@cancel="handleCancel" |
||||
|
@ok="handleOk" |
||||
|
width="50%" |
||||
|
> |
||||
|
<a-form :form="form"> |
||||
|
<!-- 公司名称 --> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
class="mb-3" |
||||
|
label="公司名称" |
||||
|
> |
||||
|
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyname" /> |
||||
|
</a-form-item> |
||||
|
<!-- 产品名称 --> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
class="mb-3" |
||||
|
label="产品名称" |
||||
|
> |
||||
|
<a-input placeholder="请输入需求名称..." v-model.trim="platform.name" /> |
||||
|
</a-form-item> |
||||
|
<!-- 产品编号 --> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
class="mb-3" |
||||
|
label="产品编号" |
||||
|
> |
||||
|
<a-input placeholder="请输入产品编号..." v-model.trim="platform.identifier" /> |
||||
|
</a-form-item> |
||||
|
<!-- 产品图片 --> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
class="mb-3" |
||||
|
label="产品图片" |
||||
|
> |
||||
|
<a-upload |
||||
|
:action="action" |
||||
|
:before-upload="beforeUpload" |
||||
|
:show-upload-list="false" |
||||
|
@change="handleChange" |
||||
|
class="avatar-uploader" |
||||
|
list-type="picture-card" |
||||
|
name="files" |
||||
|
> |
||||
|
<img :src="imageUrl" alt="avatar" v-if="imageUrl" /> |
||||
|
<div v-else> |
||||
|
<a-icon :type="loading ? 'loading' : 'plus'" /> |
||||
|
<div class="ant-upload-text">Upload</div> |
||||
|
</div> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
<!-- 产品分类 --> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
class="mb-3" |
||||
|
label="产品分类" |
||||
|
> |
||||
|
<a-checkbox-group @change="onChange" class="line-height-30"> |
||||
|
<a-checkbox |
||||
|
:key="index" |
||||
|
:value="item.id" |
||||
|
v-for="(item, index) in productLists" |
||||
|
>{{ item.name }}</a-checkbox> |
||||
|
</a-checkbox-group> |
||||
|
</a-form-item> |
||||
|
<!-- 产品简介 --> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
class="mb-3" |
||||
|
label="产品简介" |
||||
|
> |
||||
|
<a-textarea |
||||
|
placeholder="请输入产品简介..." |
||||
|
style="min-height: 100px" |
||||
|
v-model.trim="platform.synopsis" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<!-- 产品详情 --> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
class="mb-3" |
||||
|
label="产品详情" |
||||
|
> |
||||
|
<quill-editor |
||||
|
:options="editorOption" |
||||
|
@blur="onEditorBlur($event)" |
||||
|
@change="onEditorChange($event)" |
||||
|
@focus="onEditorFocus($event)" |
||||
|
class="editor-box" |
||||
|
ref="myQuillEditor" |
||||
|
v-model="needContent" |
||||
|
></quill-editor> |
||||
|
<a-upload |
||||
|
:action="action" |
||||
|
:multiple="false" |
||||
|
@change="fileChange" |
||||
|
accept="image/png, image/jpeg" |
||||
|
name="files" |
||||
|
style="display: none" |
||||
|
> |
||||
|
<a-button id="upload-img"> |
||||
|
<a-icon type="upload" /> |
||||
|
</a-button> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
<a-modal |
||||
|
:confirm-loading="confirmLoading1" |
||||
|
:visible="visible1" |
||||
|
@cancel="handleCancel1" |
||||
|
@ok="handleOk1" |
||||
|
title="需要登录" |
||||
|
width="30%" |
||||
|
> |
||||
|
还没有登录，请您先去登录 |
||||
|
<span style="color: rgba(0, 0, 0, 0.45)">（点击确定前往登录）</span> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
import { quillEditor } from 'vue-quill-editor'; //调用编辑器 |
||||
|
import 'quill/dist/quill.core.css'; |
||||
|
import 'quill/dist/quill.snow.css'; |
||||
|
import 'quill/dist/quill.bubble.css'; |
||||
|
import { upload, addProduct, selModel } from 'config/api'; |
||||
|
|
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const formTailLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 18, offset: 6 }, |
||||
|
}; |
||||
|
const toolbarOptions = [ |
||||
|
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线 |
||||
|
['blockquote', 'code-block'], //引用，代码块 |
||||
|
[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小 |
||||
|
[{ list: 'ordered' }, { list: 'bullet' }], //列表 |
||||
|
[{ script: 'sub' }, { script: 'super' }], // 上下标 |
||||
|
[{ indent: '-1' }, { indent: '+1' }], // 缩进 |
||||
|
[{ direction: 'rtl' }], // 文本方向 |
||||
|
// [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 |
||||
|
// [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 |
||||
|
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色 |
||||
|
// [{ font: [] }], //字体 |
||||
|
[{ align: [] }], //对齐方式 |
||||
|
['clean'], //清除字体样式 |
||||
|
['image', 'video'], //上传图片、上传视频 |
||||
|
]; |
||||
|
|
||||
|
function getBase64(img, callback) { |
||||
|
const reader = new FileReader(); |
||||
|
reader.addEventListener('load', () => callback(reader.result)); |
||||
|
reader.readAsDataURL(img); |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
name: 'Enroll', |
||||
|
components: { quillEditor }, |
||||
|
data() { |
||||
|
return { |
||||
|
form: this.$form.createForm(this, { name: 'submit' }), |
||||
|
visible: false, |
||||
|
visible1: false, |
||||
|
title: '需求征集', |
||||
|
action: upload, |
||||
|
loading: false, |
||||
|
imageUrl: '', |
||||
|
formItemLayout, |
||||
|
formTailLayout, |
||||
|
confirmLoading: false, |
||||
|
confirmLoading1: false, |
||||
|
needContent: ``, |
||||
|
editorOption: { |
||||
|
placeholder: '在这里输入...', |
||||
|
modules: { |
||||
|
toolbar: { |
||||
|
container: toolbarOptions, // 工具栏 |
||||
|
handlers: { |
||||
|
image: function(value) { |
||||
|
if (value) { |
||||
|
// alert('自定义图片'); |
||||
|
document.getElementById('upload-img').click(); |
||||
|
} else { |
||||
|
this.quill.format('image', false); |
||||
|
} |
||||
|
}, |
||||
|
video: function(value) { |
||||
|
if (value) { |
||||
|
alert('自定义视频'); |
||||
|
} else { |
||||
|
this.quill.format('image', false); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
platform: { |
||||
|
companyname: '', |
||||
|
name: '', |
||||
|
identifier: '', |
||||
|
pic: '', |
||||
|
modelIds: [], |
||||
|
synopsis: '', |
||||
|
}, |
||||
|
hideMessage: null, |
||||
|
productLists: [], // 产品类目 |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('user', ['anyringToken']), |
||||
|
|
||||
|
created() { |
||||
|
this.getType(3); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
onEditorReady(editor) { |
||||
|
// 准备编辑器 |
||||
|
}, |
||||
|
onEditorBlur() {}, // 失去焦点事件 |
||||
|
onEditorFocus() {}, // 获得焦点事件 |
||||
|
onEditorChange() { |
||||
|
// 内容改变事件 |
||||
|
// console.log(this.content); |
||||
|
}, |
||||
|
onChange(e) { |
||||
|
console.log(e); |
||||
|
this.platform.modelIds = e; |
||||
|
}, |
||||
|
// 产品图片 |
||||
|
handleChange(info) { |
||||
|
if (info.file.status === 'uploading') { |
||||
|
this.loading = true; |
||||
|
return; |
||||
|
} |
||||
|
if (info.file.status === 'done') { |
||||
|
// Get this url from response in real world. |
||||
|
getBase64(info.file.originFileObj, imageUrl => { |
||||
|
this.imageUrl = imageUrl; |
||||
|
this.loading = false; |
||||
|
}); |
||||
|
if (info.fileList && info.fileList.length && info.fileList[0].response.data && info.fileList[0].response.data.length) { |
||||
|
this.platform.pic = info.fileList[0].response.data[0].id; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
beforeUpload(file) { |
||||
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
||||
|
if (!isJpgOrPng) { |
||||
|
this.$message.error('You can only upload JPG file!'); |
||||
|
} |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2; |
||||
|
if (!isLt2M) { |
||||
|
this.$message.error('Image must smaller than 2MB!'); |
||||
|
} |
||||
|
return isJpgOrPng && isLt2M; |
||||
|
}, |
||||
|
|
||||
|
// 上传图片事件 |
||||
|
fileChange(info) { |
||||
|
console.log(info); |
||||
|
if (info.file.status === 'uploading') { |
||||
|
if (!this.hideMessage) { |
||||
|
this.hideMessage = this.$message.loading('上传中...'); |
||||
|
} |
||||
|
} |
||||
|
// this.fileList = info.fileList; |
||||
|
if (info.file.status === 'done') { |
||||
|
this.files = []; |
||||
|
const img = `<img src=${info.file.response.data[0].visitUrl} >`; |
||||
|
this.needContent += img; |
||||
|
setTimeout(this.hideMessage, 0); |
||||
|
this.$message.success('上传成功'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 显示表单输入框 |
||||
|
showModal() { |
||||
|
const storageAnyringToken = sessionStorage.getItem('anyringToken') || this.anyringToken; |
||||
|
if (storageAnyringToken) { |
||||
|
this.visible = true; |
||||
|
} else { |
||||
|
this.visible1 = true; |
||||
|
} |
||||
|
}, |
||||
|
// 取消显示 |
||||
|
handleCancel(e) { |
||||
|
this.visible = false; |
||||
|
}, |
||||
|
// 点击确定 |
||||
|
handleOk() { |
||||
|
this.subMitAdd(); |
||||
|
// this.$message.success('发榜成功,等待审核'); |
||||
|
}, |
||||
|
handleCancel1() { |
||||
|
this.visible1 = false; |
||||
|
}, |
||||
|
// 点击确定 |
||||
|
handleOk1() { |
||||
|
this.$router.push('/login'); |
||||
|
}, |
||||
|
// 加入接口 |
||||
|
async subMitAdd() { |
||||
|
this.confirmLoading = true; |
||||
|
try { |
||||
|
const params = { |
||||
|
param: { |
||||
|
companyname: this.platform.companyname, |
||||
|
name: this.platform.name, |
||||
|
identifier: this.platform.identifier, |
||||
|
pic: this.platform.pic, |
||||
|
modelIds: this.platform.modelIds, |
||||
|
synopsis: this.platform.synopsis, |
||||
|
details: this.needContent, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await addProduct(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
this.confirmLoading = false; |
||||
|
if (code === 200) { |
||||
|
for (let key in this.platform) { |
||||
|
this.platform[key] = ''; |
||||
|
} |
||||
|
this.imageUrl = ''; |
||||
|
this.needContent = ``; |
||||
|
this.visible = false; |
||||
|
this.$message.success('添加成功'); |
||||
|
this.$emit('update'); |
||||
|
} else { |
||||
|
throw msg; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取产品分类 |
||||
|
async getType(num) { |
||||
|
try { |
||||
|
const params = { param: { model: num } }; |
||||
|
const res = await selModel(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.productLists = data.list; |
||||
|
} else { |
||||
|
this.$message.error(msg || '分类获取失败'); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.must-color { |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
.code_img { |
||||
|
height: 32px; |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.ql-editor { |
||||
|
min-height: 600px; |
||||
|
max-height: 800px; |
||||
|
} |
||||
|
|
||||
|
.editor-box >>> .ql-editor { |
||||
|
min-height: 150px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,127 @@ |
|||||
|
<template> |
||||
|
<div class="search-list"> |
||||
|
<span |
||||
|
style="height: 28px; line-height: 28px; font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)" |
||||
|
>栏目：</span> |
||||
|
<a-checkbox-group @change="handleChange"> |
||||
|
<a-checkbox |
||||
|
:key="index" |
||||
|
:value="item.moldId" |
||||
|
v-for="(item, index) in bannerList" |
||||
|
>{{ item.moldName }}</a-checkbox> |
||||
|
</a-checkbox-group> |
||||
|
<br /> |
||||
|
<span style="font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)">类型：</span> |
||||
|
<a-radio-group @change="handleChange1"> |
||||
|
<a-radio :key="index" :value="index + 1" v-for="(item, index) in typeList">{{ item }}</a-radio> |
||||
|
</a-radio-group> |
||||
|
<br /> |
||||
|
<a-input-search |
||||
|
@search="handleData" |
||||
|
class="search-ipt" |
||||
|
enter-button="搜索" |
||||
|
placeholder="搜索标题..." |
||||
|
style="width: 381px" |
||||
|
v-model="titleText" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getQueryMold } from 'config/api'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
typeList: ['视频', '音频', '文档', '全部'], |
||||
|
typeNum: '', |
||||
|
bannerList: [], |
||||
|
bannerNum: [], |
||||
|
titleText: '', |
||||
|
timeList: ['近七天', '近一个月', '近一年', '全部'], |
||||
|
timeNum: '', |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getMold(); |
||||
|
}, |
||||
|
methods: { |
||||
|
async handleChange(e) { |
||||
|
this.bannerNum = e; |
||||
|
console.log(this.bannerNum); |
||||
|
await this.handleData(); |
||||
|
}, |
||||
|
|
||||
|
async handleChange1(e) { |
||||
|
console.log(e.target.value); |
||||
|
if (e.target.value < 4) { |
||||
|
this.typeNum = e.target.value; |
||||
|
} else { |
||||
|
this.typeNum = ''; |
||||
|
} |
||||
|
await this.handleData(); |
||||
|
}, |
||||
|
|
||||
|
// 查询创业学院栏目类型 |
||||
|
async getMold() { |
||||
|
try { |
||||
|
const res = await getQueryMold(); |
||||
|
const { code, data, msg } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.bannerList = data; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取数据 |
||||
|
handleData() { |
||||
|
const getParam = { |
||||
|
typeNum: this.typeNum, |
||||
|
bannerNum: this.bannerNum, |
||||
|
titleText: this.titleText, |
||||
|
}; |
||||
|
console.log('getParam: ', getParam); |
||||
|
this.$emit('getData', getParam); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.search-list { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
line-height: 36px; |
||||
|
background: #fff; |
||||
|
padding: 24px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.search-btn { |
||||
|
position: absolute; |
||||
|
right: 19px; |
||||
|
height: 34px; |
||||
|
top: 38px; |
||||
|
width: 80px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.ban-style { |
||||
|
margin-left: 10px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.ban-act { |
||||
|
color: #E77816; |
||||
|
} |
||||
|
|
||||
|
.search-ipt { |
||||
|
position: absolute; |
||||
|
right: 24px; |
||||
|
top: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,102 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="d-flex flex-wrap" style="margin-top: 24px;"> |
||||
|
<div |
||||
|
:class="(index + 2) % 3 === 0 ? 'mg' : ''" |
||||
|
:key="index" |
||||
|
style="width: 30%" |
||||
|
v-for="(item, index) in list" |
||||
|
> |
||||
|
<div style="height: 420px"> |
||||
|
<img |
||||
|
:src="item.picUrl" |
||||
|
@click="openPage(item.contentUrl)" |
||||
|
alt |
||||
|
style="width: 100%; height: 300px; cursor: pointer" |
||||
|
/> |
||||
|
<p class="item-title">{{ item.title }}</p> |
||||
|
<p class="item-content">{{ item.intro }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'knowContent', |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
typeNum: '', |
||||
|
bannerNum: [], |
||||
|
titleText: '', |
||||
|
display: -1, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
openPage(url) { |
||||
|
window.open(url); |
||||
|
}, |
||||
|
|
||||
|
fade(index) { |
||||
|
console.log(index); |
||||
|
// var obj = document.getElementById(index) |
||||
|
this.display = index; |
||||
|
// this.list[index].contentUrl = this.list[index].contentUrl + '?autoplay=1' |
||||
|
// console.log(this.list[index].contentUrl) |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.mg { |
||||
|
margin: 0 5%; |
||||
|
} |
||||
|
|
||||
|
video { |
||||
|
width: 100%; |
||||
|
// object-fit: fill; |
||||
|
} |
||||
|
|
||||
|
.item-title { |
||||
|
margin: 10px 0; |
||||
|
font-size: 24px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.item-content { |
||||
|
font-size: 16px; |
||||
|
line-height: 36px; |
||||
|
font-family: Microsoft YaHei; |
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.cover { |
||||
|
width: 473px; |
||||
|
height: 300px; |
||||
|
position: absolute; |
||||
|
// top: -310px; |
||||
|
left: 0px; |
||||
|
} |
||||
|
|
||||
|
.relative { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.none { |
||||
|
display: none; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue