46 changed files with 2556 additions and 456 deletions
@ -0,0 +1,356 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<a-modal :footer="null" v-model="showModelIntro"> |
||||
|
<p class="mt-3">{{ modelIntro }}</p> |
||||
|
</a-modal> |
||||
|
<a-modal |
||||
|
:confirm-loading="confirmLoading" |
||||
|
:visible="visible" |
||||
|
@cancel="handleCancel" |
||||
|
@ok="handleOk" |
||||
|
title="服务需求" |
||||
|
width="50%" |
||||
|
> |
||||
|
<a-form :form="form"> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="所属社区" |
||||
|
> |
||||
|
<a-radio-group @change="onChange" v-model.trim="platform.platform"> |
||||
|
<a-radio :value="1">创新社区</a-radio> |
||||
|
<a-radio :value="2">创业社区</a-radio> |
||||
|
<a-radio :value="3">产业服务</a-radio> |
||||
|
<a-radio :value="0">其他</a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="公司名称" |
||||
|
> |
||||
|
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="联系人" |
||||
|
required |
||||
|
> |
||||
|
<a-input placeholder="请输入联系人..." v-model.trim="platform.manName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="联系电话" |
||||
|
required |
||||
|
> |
||||
|
<a-input |
||||
|
@change="changePhone" |
||||
|
placeholder="请输入联系电话.." |
||||
|
type="tel" |
||||
|
v-decorator="['tel', { rules: phoneRules }]" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
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> |
||||
|
<!-- <a-input v-decorator="['account', { rules: rules.account }]" /> --> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="短信验证码" |
||||
|
required |
||||
|
> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="请输入验证码" type="number" v-model="platform.code" /> |
||||
|
<a-button |
||||
|
class="code_img ml-2" |
||||
|
disabled |
||||
|
type="primary" |
||||
|
v-if="showInterval" |
||||
|
>重新发送 {{ interval }}</a-button> |
||||
|
<a-button |
||||
|
:disabled="platform.isTel === false" |
||||
|
@click="getCode" |
||||
|
class="code_img ml-2" |
||||
|
type="primary" |
||||
|
v-else |
||||
|
>获取验证码</a-button> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="需求描述" |
||||
|
> |
||||
|
<a-textarea |
||||
|
placeholder="请输入需求描述..." |
||||
|
style="height: 120px" |
||||
|
v-model.trim="platform.describe" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="上传附件" |
||||
|
> |
||||
|
<a-upload |
||||
|
:action="action" |
||||
|
:before-upload="beforeUpload" |
||||
|
:default-file-list="fileList" |
||||
|
@change="fileChange" |
||||
|
list-type="picture" |
||||
|
name="files" |
||||
|
> |
||||
|
<a-button> |
||||
|
<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 { mapMutations, mapState, mapActions } from 'vuex'; |
||||
|
import { serviceApply, upload } from 'config/api'; |
||||
|
|
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const formTailLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 18, offset: 6 }, |
||||
|
}; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
modelIntro: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
form: this.$form.createForm(this, { name: 'submit' }), |
||||
|
action: upload, |
||||
|
fileList: [], |
||||
|
visible: false, |
||||
|
formItemLayout, |
||||
|
formTailLayout, |
||||
|
confirmLoading: false, |
||||
|
platform: { |
||||
|
companyName: '', // 公司名称 |
||||
|
manName: '', // 联系人 |
||||
|
tel: '', // 联系电话 |
||||
|
describe: '', // 项目描述 |
||||
|
code: '', // 验证码 |
||||
|
files: [], // 附件Id |
||||
|
isTel: false, |
||||
|
platform: 0, // 所属平台 |
||||
|
}, |
||||
|
codeRules: [ |
||||
|
{ required: true, message: '请输入验证码' }, |
||||
|
{ min: 4, max: 4, message: '请输入4位短信验证码' }, |
||||
|
], |
||||
|
codeNum: '', |
||||
|
showInterval: false, |
||||
|
codeTimer: null, |
||||
|
interval: 120, // 验证码有效时间倒计时 |
||||
|
phoneRules: [ |
||||
|
{ required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' }, |
||||
|
], |
||||
|
typeData: { |
||||
|
type: 0, |
||||
|
Id: '', |
||||
|
}, |
||||
|
showModelIntro: false, |
||||
|
confirmLoading1: false, |
||||
|
visible1: false, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('user', ['picCode', 'anyringToken']), |
||||
|
|
||||
|
methods: { |
||||
|
...mapMutations('home', ['getUserSer']), |
||||
|
...mapActions('user', ['sendCode', 'sendPicCode']), |
||||
|
showModel() { |
||||
|
this.showModelIntro = true; |
||||
|
}, |
||||
|
setTypeDataId(id) { |
||||
|
this.typeData.Id = id; |
||||
|
const storageAnyringToken = sessionStorage.getItem('anyringToken') || this.anyringToken; |
||||
|
if (storageAnyringToken) { |
||||
|
this.visible = true; |
||||
|
} else { |
||||
|
this.visible1 = true; |
||||
|
} |
||||
|
}, |
||||
|
handleCancel1() { |
||||
|
this.visible1 = false; |
||||
|
}, |
||||
|
|
||||
|
// 选择社区 |
||||
|
onChange(e) { |
||||
|
console.log('radio checked', e.target.value); |
||||
|
this.platform.platform = e.target.value; |
||||
|
}, |
||||
|
// 点击确定 |
||||
|
handleOk1() { |
||||
|
this.$router.push('/login'); |
||||
|
}, |
||||
|
// 取消显示 |
||||
|
handleCancel(e) { |
||||
|
this.visible = false; |
||||
|
}, |
||||
|
// 验证电话 |
||||
|
changePhone(e) { |
||||
|
this.platform.tel = e.target.value; |
||||
|
this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel); |
||||
|
}, |
||||
|
// 点击确定 |
||||
|
handleOk() { |
||||
|
if (!this.platform.manName) { |
||||
|
this.$message.error('请输入联系人'); |
||||
|
} else if (!this.platform.tel) { |
||||
|
this.$message.error('请输入联系电话'); |
||||
|
} else if (!this.platform.code) { |
||||
|
this.$message.error('请输入验证码'); |
||||
|
} else { |
||||
|
if (this.platform.isTel) { |
||||
|
for (var i = 0; i < this.fileList.length; i++) { |
||||
|
this.platform.files = this.platform.files.concat(this.fileList[i].response.data[0].id); |
||||
|
} |
||||
|
this.subMitAdd(); |
||||
|
} else { |
||||
|
this.$message.error('请输入正确的联系电话'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 加入接口 |
||||
|
async subMitAdd() { |
||||
|
this.confirmLoading = true; |
||||
|
try { |
||||
|
const params = { |
||||
|
param: { |
||||
|
code: this.platform.code, |
||||
|
companyName: this.platform.companyName, |
||||
|
contactName: this.platform.manName, |
||||
|
contactPhone: this.platform.tel, |
||||
|
description: this.platform.describe, |
||||
|
filesId: this.platform.files, |
||||
|
serviceId: this.typeData.Id, |
||||
|
type: this.typeData.type, |
||||
|
platform: this.platform.platform, |
||||
|
}, |
||||
|
}; |
||||
|
console.log('params: ', params); |
||||
|
const res = await serviceApply(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.typeData) { |
||||
|
this.typeData[key] = ''; |
||||
|
} |
||||
|
this.platform.isTel = false; |
||||
|
} else { |
||||
|
throw msg; |
||||
|
} |
||||
|
this.confirmLoading = false; |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
}, |
||||
|
// 获取验证码 |
||||
|
async getCode() { |
||||
|
try { |
||||
|
const params = { |
||||
|
phone: this.platform.tel, |
||||
|
verificationCodeId: this.picCode.verificationCodeId, |
||||
|
verificationCodeValue: this.codeNum, |
||||
|
}; |
||||
|
await this.sendCode(params); |
||||
|
this.getCodeInterval(); |
||||
|
} catch (error) { |
||||
|
// throw new Error(`SignIn.vue method getCode: ${error}`); |
||||
|
// console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 验证码倒计时 |
||||
|
getCodeInterval() { |
||||
|
this.showInterval = true; |
||||
|
this.codeTimer = setInterval(() => { |
||||
|
if (this.interval === 0) { |
||||
|
clearInterval(this.codeTimer); |
||||
|
this.codeTimer = null; |
||||
|
this.showInterval = false; |
||||
|
this.interval = 120; |
||||
|
return; |
||||
|
} |
||||
|
this.interval = this.interval - 1; |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 刷新验证码 |
||||
|
changePicCode() { |
||||
|
this.sendPicCode(); |
||||
|
}, |
||||
|
beforeUpload(file) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const isLt5M = file.size / 1024 / 1024 < 5; |
||||
|
if (!isLt5M) { |
||||
|
this.$message.warning('上传附件大小不能超过5m！'); |
||||
|
return reject(false); |
||||
|
} |
||||
|
return resolve(true); |
||||
|
}); |
||||
|
}, |
||||
|
fileChange(info) { |
||||
|
this.fileList = info.fileList; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.code_img { |
||||
|
height: 32px; |
||||
|
width: 120px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,278 @@ |
|||||
|
<!-- |
||||
|
Copyright (c) 2020. |
||||
|
author: song |
||||
|
email: 15235360226@163.com |
||||
|
--> |
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<div class="inner my-1"> |
||||
|
<bread-crumb :arr="arr" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="inner"> |
||||
|
<div class="policy-box"> |
||||
|
<div |
||||
|
:key="index" |
||||
|
class="list-box d-flex flex-row flex-nowrap align-center" |
||||
|
v-for="(item, index) in lists" |
||||
|
> |
||||
|
<div @click="jumpDetails(item)" class="date-box pointer" v-if="item.releaseTime"> |
||||
|
<p class="date-mon">{{ monthEnglish[item.releaseTime.split('-')[1] - 1] }}.</p> |
||||
|
<p class="date-day">{{ item.releaseTime.split(' ')[0].split('-')[2] }}</p> |
||||
|
</div> |
||||
|
<div class="d-flex flex-column flex-1"> |
||||
|
<p @click="jumpDetails(item)" class="item-title pointer">{{ item.title }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<a-pagination |
||||
|
:current="actCurrent" |
||||
|
:page-size="pageSize" |
||||
|
:total="total" |
||||
|
@change="onShowSizeChange" |
||||
|
class="pagination" |
||||
|
show-less-items |
||||
|
show-quick-jumper |
||||
|
v-show="total > 5" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue'; |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
import { frontInfo } from 'config/api'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Briefing', |
||||
|
components: { BreadCrumb }, |
||||
|
data() { |
||||
|
return { |
||||
|
arr: [{ name: '企业简报', url: '/Briefing' }], |
||||
|
total: 0, |
||||
|
pageSize: 20, |
||||
|
iptCon: '', |
||||
|
sta: { |
||||
|
ly: 0, |
||||
|
jz: 0, |
||||
|
sl: 0, |
||||
|
}, |
||||
|
aList: [], |
||||
|
lists: [], |
||||
|
monthEnglish: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'], |
||||
|
nowData: '', |
||||
|
}; |
||||
|
}, |
||||
|
computed: mapState('home', ['actList', 'actIpCon', 'actCurrent']), |
||||
|
|
||||
|
created() { |
||||
|
this.iptCon = this.actIpCon; |
||||
|
this.aList = this.actList; |
||||
|
for (var i = 0; i < this.aList.length; i++) { |
||||
|
if (this.aList[i] === 0) { |
||||
|
this.sta.ly = 1; |
||||
|
} |
||||
|
if (this.aList[i] === 1) { |
||||
|
this.sta.jz = 1; |
||||
|
} |
||||
|
if (this.aList[i] === 2) { |
||||
|
this.sta.sl = 1; |
||||
|
} |
||||
|
} |
||||
|
this.getData(); |
||||
|
|
||||
|
// 获取当前时间 |
||||
|
var aData = new Date(); |
||||
|
// console.log(aData); //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间) |
||||
|
this.nowData = |
||||
|
aData.getFullYear() + |
||||
|
'-' + |
||||
|
(aData.getMonth() + 1) + |
||||
|
'-' + |
||||
|
aData.getDate() + |
||||
|
' ' + |
||||
|
aData.getHours() + |
||||
|
':' + |
||||
|
aData.getMinutes() + |
||||
|
':' + |
||||
|
aData.getSeconds(); |
||||
|
// console.log(this.nowData); //2019-8-20 |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapMutations('home', ['setActList', 'setActIpCon', 'setActCurrent', 'setActDetail']), |
||||
|
// 获取企业简报列表 |
||||
|
async getData() { |
||||
|
try { |
||||
|
this.setActIpCon(this.iptCon); |
||||
|
const params = { |
||||
|
param: { |
||||
|
pageNum: this.actCurrent, |
||||
|
pageSize: 20, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await frontInfo(params); |
||||
|
const { data, msg, code } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.lists = data.list; |
||||
|
this.total = parseInt(data.total); |
||||
|
} else { |
||||
|
this.$message.error(msg || '获取失败'); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
// 改变当前所选类型 |
||||
|
cSta(index) { |
||||
|
this.aList = []; |
||||
|
if (this.sta[index] === 0) { |
||||
|
this.sta[index] = 1; |
||||
|
// console.log(this.sta); |
||||
|
} else { |
||||
|
this.sta[index] = 0; |
||||
|
// console.log(this.sta); |
||||
|
} |
||||
|
if (this.sta.ly === 1) { |
||||
|
this.aList = this.aList.concat(0); |
||||
|
} |
||||
|
if (this.sta.jz === 1) { |
||||
|
this.aList = this.aList.concat(1); |
||||
|
} |
||||
|
if (this.sta.sl === 1) { |
||||
|
this.aList = this.aList.concat(2); |
||||
|
} |
||||
|
this.setActList(this.aList); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
|
||||
|
// 改变当前显示页数 |
||||
|
onShowSizeChange(current, size) { |
||||
|
this.setActCurrent(current); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到详情界面 |
||||
|
jumpDetails(item) { |
||||
|
this.setActDetail(item); |
||||
|
this.$router.push('/BriefingDetails'); |
||||
|
}, |
||||
|
|
||||
|
// 转换时间戳 |
||||
|
formatDate() { |
||||
|
var date = new Date('2020-04-07 18:08:58'); |
||||
|
// 有三种方式获取 |
||||
|
var time1 = date.getTime(); |
||||
|
var time2 = date.valueOf(); |
||||
|
var time3 = Date.parse(date); |
||||
|
// console.log(time1); //1586254138000 |
||||
|
// console.log(time2); //1586254138000 |
||||
|
// console.log(time3); //1586254138000 |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="stylus"> |
||||
|
.inner { |
||||
|
margin: 20px auto; |
||||
|
} |
||||
|
|
||||
|
.policy-box { |
||||
|
.list-box { |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
background: #fff; |
||||
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
||||
|
margin-top: 24px; |
||||
|
padding: 10px 25px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-title { |
||||
|
margin-bottom: 10px; |
||||
|
font-size: 24px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.item-content { |
||||
|
text-indent: 2em; |
||||
|
font-size: 16px; |
||||
|
line-height: 36px; |
||||
|
color: rgba(0, 0, 0, 0.35); |
||||
|
font-family: Microsoft YaHei; |
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.source { |
||||
|
cursor: pointer; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
opacity: 1; |
||||
|
margin-right: 24px; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 14px; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
color: rgba(0, 0, 0, 0.25); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.original { |
||||
|
font-size: 14px; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
line-height: 22px; |
||||
|
opacity: 1; |
||||
|
margin-bottom: 0; |
||||
|
|
||||
|
span { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.date-box { |
||||
|
width: 160px !important; |
||||
|
text-align: center; |
||||
|
box-shadow: none !important; |
||||
|
margin-top: 0 !important; |
||||
|
padding: 0 !important; |
||||
|
|
||||
|
p { |
||||
|
margin-bottom: 0 !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.date-mon { |
||||
|
font-size: 26px; |
||||
|
height: 26px; |
||||
|
line-height: 26px; |
||||
|
font-weight: 500; |
||||
|
color: #13ACC4; |
||||
|
} |
||||
|
|
||||
|
.date-day { |
||||
|
font-size: 46px; |
||||
|
height: 56px; |
||||
|
line-height: 56px; |
||||
|
font-weight: bold; |
||||
|
color: #13ACC4; |
||||
|
} |
||||
|
|
||||
|
.source-time { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin-top: 68px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,182 @@ |
|||||
|
<template> |
||||
|
<div class="box"> |
||||
|
<div> |
||||
|
<div class="policy-title"> |
||||
|
<span>{{ actDetail.title }}</span> |
||||
|
</div> |
||||
|
<!-- && hdDetail.content --> |
||||
|
<div v-if="hdDetail !== null"> |
||||
|
<div class="policy-info"> |
||||
|
<div> |
||||
|
<span> |
||||
|
<a-icon |
||||
|
class="baseColor" |
||||
|
style="font-size: 14px; margin-right: 10px" |
||||
|
type="clock-circle" |
||||
|
/> |
||||
|
<span> |
||||
|
{{ hdDetail.releaseTime }} |
||||
|
<span v-if="hdDetail.closeTime">- {{ hdDetail.closeTime }}</span> |
||||
|
</span> |
||||
|
</span> |
||||
|
<span style="margin-left: 60px"> |
||||
|
<a-icon class="baseColor" style="margin-right: 10px" type="environment" /> |
||||
|
<span>{{ hdDetail.address }}</span> |
||||
|
</span> |
||||
|
</div> |
||||
|
<!-- </div> --> |
||||
|
<!-- <div class="policy-info"> --> |
||||
|
</div> |
||||
|
<div class="policy-content" v-dompurify-html="hdDetail.content"></div> |
||||
|
<div class="policy-other"> |
||||
|
<div> |
||||
|
<span style="font-size: 14px">会议主题：</span> |
||||
|
<span>{{ hdDetail.theme }}</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<span>{{ hdDetail.organization }}</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<span style="font-size: 14px">主讲嘉宾：</span> |
||||
|
<span>{{ hdDetail.name }}</span> |
||||
|
</div> |
||||
|
<div v-if="hdDetail.other">其他事宜:{{ hdDetail.other }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
import { activeDetail } from 'config/api'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'BriefingDetails', |
||||
|
data() { |
||||
|
return { nowData: '', hdDetail: null }; |
||||
|
}, |
||||
|
computed: mapState('home', ['actDetail']), |
||||
|
async created() { |
||||
|
await this.getData(); |
||||
|
// 获取当前时间 |
||||
|
var aData = new Date(); |
||||
|
// console.log(aData); //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间) |
||||
|
this.nowData = |
||||
|
aData.getFullYear() + |
||||
|
'-' + |
||||
|
(aData.getMonth() + 1) + |
||||
|
'-' + |
||||
|
aData.getDate() + |
||||
|
' ' + |
||||
|
aData.getHours() + |
||||
|
':' + |
||||
|
aData.getMinutes() + |
||||
|
':' + |
||||
|
aData.getSeconds(); |
||||
|
// console.log(this.nowData); //2019-8-20 |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取企业简报列表 |
||||
|
async getData() { |
||||
|
try { |
||||
|
const params = { param: { activityId: this.actDetail.activityId } }; |
||||
|
const res = await activeDetail(params); |
||||
|
const { data, msg, code } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.hdDetail = data; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
// console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.box { |
||||
|
width: 1260px; |
||||
|
position: relative; |
||||
|
margin: 80px auto; |
||||
|
background: #fff; |
||||
|
min-height: 1037px; |
||||
|
overflow: hidden; |
||||
|
opacity: 1; |
||||
|
padding-bottom: 480px; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
width: 80px; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.policy-title { |
||||
|
height: 120px; |
||||
|
font-size: 24px; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
opacity: 1; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 0 150px; |
||||
|
border-bottom: 1px solid #707070; |
||||
|
} |
||||
|
|
||||
|
.policy-info { |
||||
|
height: 76px; |
||||
|
line-height: 76px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.policy-content { |
||||
|
padding: 0 25px; |
||||
|
font-size: 16px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
font-weight: 400; |
||||
|
font-family: Microsoft YaHei; |
||||
|
} |
||||
|
|
||||
|
.coms-style { |
||||
|
height: 480px; |
||||
|
padding: 25px 0; |
||||
|
border-top: 2px solid #ccc; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.coms-top { |
||||
|
height: 280px; |
||||
|
padding: 0 25px; |
||||
|
overflow: auto; |
||||
|
box-shadow: 0 0 5px #ccc; |
||||
|
} |
||||
|
|
||||
|
.coms-btm { |
||||
|
margin-top: 20px; |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.coms-content { |
||||
|
background: rgba(19, 172, 196, 0.1); |
||||
|
} |
||||
|
|
||||
|
.sub { |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.policy-other { |
||||
|
margin: 50px 25px; |
||||
|
font-size: 16px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
font-weight: 400; |
||||
|
font-family: Microsoft YaHei; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,321 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<a-button @click="showModal" 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" |
||||
|
label="活动名称" |
||||
|
> |
||||
|
<a-input :value="actName" disabled /> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="申请单位" |
||||
|
required |
||||
|
> |
||||
|
<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="参加人员" |
||||
|
required |
||||
|
> |
||||
|
<div :key="index" class="d-flex flex-nowrap mb-3" v-for="(item, index) in people"> |
||||
|
<a-input class="flex-1 mr-3" placeholder="姓名" v-model.trim="item.name" /> |
||||
|
<a-input class="flex-1 mr-3" placeholder="职称" v-model.trim="item.duties" /> |
||||
|
<a-input class="flex-1 mr-3" placeholder="职务" v-model.trim="item.positional" /> |
||||
|
<a-button |
||||
|
@click="changePerson(index)" |
||||
|
icon="plus" |
||||
|
type="link" |
||||
|
v-if="index === people.length - 1" |
||||
|
/> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="联系人" |
||||
|
required |
||||
|
> |
||||
|
<a-input placeholder="请输入联系人..." v-model.trim="platform.manName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="联系电话" |
||||
|
required |
||||
|
> |
||||
|
<a-input |
||||
|
@change="changePhone" |
||||
|
placeholder="请输入联系电话.." |
||||
|
type="tel" |
||||
|
v-decorator="['tel', { rules: phoneRules }]" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
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> |
||||
|
<!-- <a-input v-decorator="['account', { rules: rules.account }]" /> --> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="短信验证码" |
||||
|
required |
||||
|
> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="请输入验证码" type="number" v-model="platform.code" /> |
||||
|
<a-button |
||||
|
class="code_img ml-2" |
||||
|
disabled |
||||
|
type="primary" |
||||
|
v-if="showInterval" |
||||
|
>重新发送 {{ interval }}</a-button> |
||||
|
<a-button |
||||
|
:disabled="platform.isTel === false" |
||||
|
@click="getCode" |
||||
|
class="code_img ml-2" |
||||
|
type="primary" |
||||
|
v-else |
||||
|
>获取验证码</a-button> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { mapState, mapActions } from 'vuex'; |
||||
|
import { apply } from 'config/api'; |
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const formTailLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 18, offset: 6 }, |
||||
|
}; |
||||
|
export default { |
||||
|
name: 'Enroll', |
||||
|
props: { |
||||
|
activityId: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
actName: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
form: this.$form.createForm(this, { name: 'submit' }), |
||||
|
visible: false, |
||||
|
title: '活动报名', |
||||
|
formItemLayout, |
||||
|
formTailLayout, |
||||
|
confirmLoading: false, |
||||
|
// 参加人员 |
||||
|
people: [ |
||||
|
{ |
||||
|
name: '', |
||||
|
duties: '', |
||||
|
positional: '', |
||||
|
}, |
||||
|
], |
||||
|
platform: { |
||||
|
companyName: '', // 申请单位 |
||||
|
manName: '', // 联系人 |
||||
|
tel: '', // 联系电话 |
||||
|
code: '', // 验证码 |
||||
|
isTel: false, |
||||
|
}, |
||||
|
codeRules: [ |
||||
|
{ required: true, message: '请输入验证码' }, |
||||
|
{ min: 4, max: 4, message: '请输入4位短信验证码' }, |
||||
|
], |
||||
|
codeNum: '', |
||||
|
showInterval: false, |
||||
|
codeTimer: null, |
||||
|
interval: 120, // 验证码有效时间倒计时 |
||||
|
phoneRules: [ |
||||
|
{ required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' }, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('user', ['picCode']), |
||||
|
|
||||
|
async created() { |
||||
|
this.sendPicCode(); |
||||
|
await this.getUserSer(); |
||||
|
if (this.userSer) { |
||||
|
if (this.userSer.name) { |
||||
|
this.platform.manName = this.userSer.name; |
||||
|
} |
||||
|
if (this.userSer.phone) { |
||||
|
this.platform.tel = this.userSer.phone; |
||||
|
} |
||||
|
if (this.userSer.companyName) { |
||||
|
this.platform.companyName = this.userSer.companyName; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapActions('user', ['sendCode', 'sendPicCode']), |
||||
|
...mapActions('home', ['getUserSer']), |
||||
|
|
||||
|
changePerson(index) { |
||||
|
// if (this.people[index].name && this.people[index].positional && this.people[index].duties) { |
||||
|
const a = { name: '', positional: '', duties: '' }; |
||||
|
this.people.push(a); |
||||
|
// } |
||||
|
}, |
||||
|
// 显示表单输入框 |
||||
|
showModal() { |
||||
|
this.visible = true; |
||||
|
}, |
||||
|
// 取消显示 |
||||
|
handleCancel(e) { |
||||
|
this.visible = false; |
||||
|
}, |
||||
|
// 验证电话 |
||||
|
changePhone(e) { |
||||
|
this.platform.tel = e.target.value; |
||||
|
this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel); |
||||
|
}, |
||||
|
// 点击确定 |
||||
|
handleOk() { |
||||
|
if (!this.platform.companyName) { |
||||
|
this.$message.error('请输入申请单位'); |
||||
|
} else if (!this.people[0].name || !this.people[0].positional || !this.people[0].duties) { |
||||
|
this.$message.error('请至少输入一名参加人员'); |
||||
|
} else if (!this.platform.tel) { |
||||
|
this.$message.error('请输入联系电话'); |
||||
|
} else if (!this.platform.code) { |
||||
|
this.$message.error('请输入验证码'); |
||||
|
} else { |
||||
|
if (this.platform.isTel) { |
||||
|
this.subMitAdd(); |
||||
|
} else { |
||||
|
this.$message.error('请输入正确的联系电话'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 加入接口 |
||||
|
async subMitAdd() { |
||||
|
this.confirmLoading = true; |
||||
|
try { |
||||
|
const { activityId, platform, people } = this; |
||||
|
people.forEach(item => { |
||||
|
item.activityId = activityId; |
||||
|
}); |
||||
|
const params = { |
||||
|
param: { |
||||
|
activityId, |
||||
|
code: platform.code, |
||||
|
companyName: platform.companyName, |
||||
|
contactName: platform.manName, |
||||
|
contactPhone: platform.tel, |
||||
|
peoples: people, |
||||
|
}, |
||||
|
}; |
||||
|
// console.log('params: ', params); |
||||
|
const res = await apply(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('申请成功'); |
||||
|
this.visible = false; |
||||
|
this.confirmLoading = false; |
||||
|
for (let key in this.platform) { |
||||
|
this.platform[key] = ''; |
||||
|
} |
||||
|
this.platform.isTel = false; |
||||
|
} else { |
||||
|
throw msg; |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
}, |
||||
|
// 获取验证码 |
||||
|
async getCode() { |
||||
|
// console.log(111); |
||||
|
try { |
||||
|
const params = { |
||||
|
phone: this.platform.tel, |
||||
|
verificationCodeId: this.picCode.verificationCodeId, |
||||
|
verificationCodeValue: this.codeNum, |
||||
|
}; |
||||
|
await this.sendCode(params); |
||||
|
this.getCodeInterval(); |
||||
|
} catch (error) { |
||||
|
// throw new Error(`SignIn.vue method getCode: ${error}`); |
||||
|
// console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 验证码倒计时 |
||||
|
getCodeInterval() { |
||||
|
this.showInterval = true; |
||||
|
this.codeTimer = setInterval(() => { |
||||
|
if (this.interval === 0) { |
||||
|
clearInterval(this.codeTimer); |
||||
|
this.codeTimer = null; |
||||
|
this.showInterval = false; |
||||
|
this.interval = 120; |
||||
|
return; |
||||
|
} |
||||
|
this.interval = this.interval - 1; |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 刷新验证码 |
||||
|
changePicCode() { |
||||
|
this.sendPicCode(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.must-color { |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
.code_img { |
||||
|
height: 32px; |
||||
|
width: 120px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,47 @@ |
|||||
|
<!-- |
||||
|
* @Author: wally |
||||
|
* @email: 18603454788@163.com |
||||
|
* @Date: 2021-01-13 17:21:29 |
||||
|
* @LastEditors: wally |
||||
|
* @LastEditTime: 2021-01-20 09:56:56 |
||||
|
--> |
||||
|
<template> |
||||
|
<div> |
||||
|
<h-nav /> |
||||
|
<div class="inner my-1"> |
||||
|
<bread-crumb :arr="arr" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="padding-bottom: 50px"> |
||||
|
<community /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import HNav from './../components/HNav.vue'; |
||||
|
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue'; |
||||
|
import Community from '../../Community/Community.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'News', |
||||
|
components: { HNav, BreadCrumb, Community }, |
||||
|
data() { |
||||
|
return { |
||||
|
typeOfPlatform: '创业社区', |
||||
|
arr: [ |
||||
|
{ name: '创业社区', url: '/IncubationPlatform/MakerSpace' }, |
||||
|
{ name: '交流社区', url: '' }, |
||||
|
], |
||||
|
btnType: 'default', |
||||
|
}; |
||||
|
}, |
||||
|
methods: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.inner { |
||||
|
margin: 10px auto 15px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,47 @@ |
|||||
|
<!-- |
||||
|
* @Author: wally |
||||
|
* @email: 18603454788@163.com |
||||
|
* @Date: 2021-01-13 17:21:29 |
||||
|
* @LastEditors: wally |
||||
|
* @LastEditTime: 2021-01-20 09:56:56 |
||||
|
--> |
||||
|
<template> |
||||
|
<div> |
||||
|
<h-nav /> |
||||
|
<div class="inner my-1"> |
||||
|
<bread-crumb :arr="arr" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="padding-bottom: 50px"> |
||||
|
<community /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import HNav from './components/HNav.vue'; |
||||
|
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue'; |
||||
|
import Community from '../../Community/Community.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'News', |
||||
|
components: { HNav, BreadCrumb, Community }, |
||||
|
data() { |
||||
|
return { |
||||
|
typeOfPlatform: '产业社区', |
||||
|
arr: [ |
||||
|
{ name: '产业社区', url: '/Industry/Union' }, |
||||
|
{ name: '交流社区', url: '' }, |
||||
|
], |
||||
|
btnType: 'default', |
||||
|
}; |
||||
|
}, |
||||
|
methods: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.inner { |
||||
|
margin: 10px auto 15px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,183 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<h-nav /> |
||||
|
<div class="inner my-1"> |
||||
|
<bread-crumb :arr="arr" /> |
||||
|
</div> |
||||
|
<div class="inner"> |
||||
|
<div> |
||||
|
<div class="search-background"> |
||||
|
<div class="d-flex"> |
||||
|
<div class="flex-3 flex-wrap"> |
||||
|
<span class="ins-title">产品类目：</span> |
||||
|
<span v-if="productLists && productLists.length"> |
||||
|
<span |
||||
|
:class="item.isActive ? 'act-color' : ''" |
||||
|
:key="index" |
||||
|
@click="choose(index)" |
||||
|
class="ins-name" |
||||
|
v-for="(item, index) in productLists" |
||||
|
>{{ item.name }}</span> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="flex-1 align-center"> |
||||
|
<a-input-search |
||||
|
@search="searchProduct" |
||||
|
class="item-search" |
||||
|
enter-button="搜索" |
||||
|
placeholder="请输入" |
||||
|
v-model="productIpt" |
||||
|
/> |
||||
|
<add-project @update="update" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<p class="font-bold-24">产品展示</p> |
||||
|
</div> |
||||
|
<platform-list ref="child" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapMutations } from 'vuex'; |
||||
|
import { selModel } from 'config/api'; |
||||
|
import PlatformList from 'components/PlatformList/PlatformList.vue'; |
||||
|
import HNav from './components/HNav.vue'; |
||||
|
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue'; |
||||
|
import AddProject from '../components/AddProject.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Products', |
||||
|
components: { BreadCrumb, HNav, PlatformList, AddProject }, |
||||
|
data() { |
||||
|
return { |
||||
|
arr: [ |
||||
|
{ name: '产业社区', url: '/Industry/Union' }, |
||||
|
{ name: '产品展示', url: '' }, |
||||
|
], |
||||
|
productIpt: '', // 产品搜索框内容 |
||||
|
productLists: [], // 产品类目 |
||||
|
productList: [], // 产品类型选择列表 |
||||
|
showAddProject: false, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
productIpt(val) { |
||||
|
const obj = { |
||||
|
content: this.productIpt, |
||||
|
isBtn: 0, |
||||
|
}; |
||||
|
this.setProductIpt(obj); |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
const obj = { |
||||
|
content: '', |
||||
|
isBtn: 0, |
||||
|
}; |
||||
|
this.setListState(3); |
||||
|
this.setProductList([]); |
||||
|
this.setProductIpt(obj); |
||||
|
this.getType(3); |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapMutations('home', ['setProductIpt', 'setProductList', 'setListState']), |
||||
|
|
||||
|
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; |
||||
|
for (let i = 0; i < this.productLists.length; i++) { |
||||
|
this.productLists[i].isActive = false; |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(msg || '分类获取失败'); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 选中类型时触发 |
||||
|
choose(index) { |
||||
|
this.productList = []; |
||||
|
const { productLists } = this; |
||||
|
for (let i = 0; i < productLists.length; i++) { |
||||
|
productLists[i].isActive = false; |
||||
|
} |
||||
|
this.setListState(3); |
||||
|
productLists[index].isActive = !productLists[index].isActive; |
||||
|
this.productLists = [...productLists]; |
||||
|
for (let i = 0; i < productLists.length; i++) { |
||||
|
if (productLists[i].isActive) { |
||||
|
this.productList.push(productLists[i].id); |
||||
|
} |
||||
|
} |
||||
|
this.setProductList(this.productList); |
||||
|
}, |
||||
|
|
||||
|
// 搜索 |
||||
|
searchProduct() { |
||||
|
const { productLists } = this; |
||||
|
for (let i = 0; i < productLists.length; i++) { |
||||
|
productLists[i].isActive = false; |
||||
|
} |
||||
|
this.productLists = [...productLists]; |
||||
|
this.setListState(3); |
||||
|
this.productIpt = ''; |
||||
|
const obj = { |
||||
|
content: this.productIpt, |
||||
|
isBtn: 1, |
||||
|
}; |
||||
|
this.setProductList(obj); |
||||
|
}, |
||||
|
|
||||
|
// 更新 |
||||
|
update() { |
||||
|
this.$refs.child.getProductLists(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.inner { |
||||
|
margin: 40px auto; |
||||
|
} |
||||
|
|
||||
|
.search-background { |
||||
|
background: rgba(0, 0, 0, 0.02); |
||||
|
border: 1px solid rgba(0, 0, 0, 0.06); |
||||
|
height: auto; |
||||
|
padding: 0 20px; |
||||
|
width: 100%; |
||||
|
margin: 40px auto; |
||||
|
line-height: 44px; |
||||
|
} |
||||
|
|
||||
|
.item-search { |
||||
|
width: 100%; |
||||
|
height: 32px; |
||||
|
} |
||||
|
|
||||
|
.ins-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
} |
||||
|
|
||||
|
.ins-name { |
||||
|
font-size: 16px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
padding: 0 10px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.act-color { |
||||
|
color: #13ACC4 !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,228 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<a-button @click="showModal" style="height: 100%; width: 100%" type="primary" v-if="value !== 1">{{ str }}</a-button> |
||||
|
<a-modal :confirm-loading="confirmLoading" :title="title" :visible="visible" @cancel="handleCancel" @ok="handleOk" width="50%"> |
||||
|
<p style="text-align: center" v-show="value === 1"> |
||||
|
<a-radio-group style="margin-bottom: 20px !important" v-model="platform.val"> |
||||
|
<a-radio :value="2" style="margin-right: 100px">实体空间</a-radio> |
||||
|
<a-radio :value="3">虚拟空间</a-radio> |
||||
|
</a-radio-group> |
||||
|
</p> |
||||
|
<a-form :form="form"> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称"> |
||||
|
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系人" required> |
||||
|
<a-input placeholder="请输入联系人..." v-model.trim="platform.manName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系电话" required> |
||||
|
<a-input @change="changePhone" placeholder="请输入联系电话.." type="tel" v-decorator="['tel', { rules: phoneRules }]" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" 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> |
||||
|
<!-- <a-input v-decorator="['account', { rules: rules.account }]" /> --> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="请输入验证码" type="number" v-model="platform.code" /> |
||||
|
<a-button class="code_img ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button> |
||||
|
<a-button :disabled="platform.isTel === false" @click="getCode" class="code_img ml-2" type="primary" v-else> |
||||
|
获取验证码 |
||||
|
</a-button> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="合作信息简述"> |
||||
|
<a-textarea placeholder="请输入合作信息简述..." style="height: 120px" v-model.trim="platform.describe" /> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapActions } from 'vuex'; |
||||
|
import { JoinPlatform } from 'config/api'; |
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const formTailLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 18, offset: 6 }, |
||||
|
}; |
||||
|
export default { |
||||
|
name: 'AddModel', |
||||
|
props: { |
||||
|
value: { |
||||
|
type: Number, |
||||
|
default: 1, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
form: this.$form.createForm(this, { name: 'submit' }), |
||||
|
visible: false, |
||||
|
title: '申请加入', |
||||
|
str: '加入我们', |
||||
|
formItemLayout, |
||||
|
formTailLayout, |
||||
|
confirmLoading: false, |
||||
|
platform: { |
||||
|
companyName: '', // 公司名称 |
||||
|
manName: '', // 联系人 |
||||
|
tel: '', // 联系电话 |
||||
|
describe: '', // 项目描述 |
||||
|
code: '', // 验证码 |
||||
|
val: 0, |
||||
|
isTel: false, |
||||
|
}, |
||||
|
codeRules: [ |
||||
|
{ required: true, message: '请输入验证码' }, |
||||
|
{ min: 4, max: 4, message: '请输入4位短信验证码' }, |
||||
|
], |
||||
|
codeNum: '', |
||||
|
showInterval: false, |
||||
|
codeTimer: null, |
||||
|
interval: 120, // 验证码有效时间倒计时 |
||||
|
phoneRules: [ |
||||
|
{ required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' }, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
computed: mapState('user', ['picCode']), |
||||
|
async created() { |
||||
|
this.sendPicCode(); |
||||
|
await this.getUserSer(); |
||||
|
if (this.userSer) { |
||||
|
if (this.userSer.name) { |
||||
|
this.platform.manName = this.userSer.name; |
||||
|
} |
||||
|
if (this.userSer.phone) { |
||||
|
this.platform.tel = this.userSer.phone; |
||||
|
} |
||||
|
if (this.userSer.companyName) { |
||||
|
this.platform.companyName = this.userSer.companyName; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapActions('user', ['sendCode', 'sendPicCode']), |
||||
|
...mapActions('home', ['getUserSer']), |
||||
|
// 显示表单输入框 |
||||
|
showModal() { |
||||
|
this.visible = true; |
||||
|
}, |
||||
|
// 取消显示 |
||||
|
handleCancel(e) { |
||||
|
this.visible = false; |
||||
|
}, |
||||
|
// 验证电话 |
||||
|
changePhone(e) { |
||||
|
this.platform.tel = e.target.value; |
||||
|
this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel); |
||||
|
}, |
||||
|
// 点击确定 |
||||
|
handleOk() { |
||||
|
if (!this.platform.manName) { |
||||
|
this.$message.error('请输入联系人'); |
||||
|
} else if (!this.platform.tel) { |
||||
|
this.$message.error('请输入联系电话'); |
||||
|
} else if (!this.platform.code) { |
||||
|
this.$message.error('请输入验证码'); |
||||
|
} else if (!this.platform.val) { |
||||
|
this.$message.error('请选择孵化器'); |
||||
|
} else { |
||||
|
if (this.platform.isTel) { |
||||
|
this.subMitAdd(); |
||||
|
} else { |
||||
|
this.$message.error('请输入正确的联系电话'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 加入接口 |
||||
|
async subMitAdd() { |
||||
|
this.confirmLoading = true; |
||||
|
try { |
||||
|
const params = { |
||||
|
param: { |
||||
|
code: this.platform.code, |
||||
|
companyName: this.platform.companyName, |
||||
|
contactName: this.platform.manName, |
||||
|
contactPhone: this.platform.tel, |
||||
|
description: this.platform.describe, |
||||
|
type: this.platform.val, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await JoinPlatform(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('申请成功'); |
||||
|
this.visible = false; |
||||
|
this.confirmLoading = false; |
||||
|
for (let key in this.platform) { |
||||
|
this.platform[key] = ''; |
||||
|
} |
||||
|
this.platform.isTel = false; |
||||
|
} else { |
||||
|
throw msg; |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
}, |
||||
|
// 获取验证码 |
||||
|
async getCode() { |
||||
|
// console.log(111); |
||||
|
try { |
||||
|
const params = { |
||||
|
phone: this.platform.tel, |
||||
|
verificationCodeId: this.picCode.verificationCodeId, |
||||
|
verificationCodeValue: this.codeNum, |
||||
|
}; |
||||
|
await this.sendCode(params); |
||||
|
this.getCodeInterval(); |
||||
|
} catch (error) { |
||||
|
// throw new Error(`SignIn.vue method getCode: ${error}`); |
||||
|
// console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 验证码倒计时 |
||||
|
getCodeInterval() { |
||||
|
this.showInterval = true; |
||||
|
this.codeTimer = setInterval(() => { |
||||
|
if (this.interval === 0) { |
||||
|
clearInterval(this.codeTimer); |
||||
|
this.codeTimer = null; |
||||
|
this.showInterval = false; |
||||
|
this.interval = 120; |
||||
|
return; |
||||
|
} |
||||
|
this.interval = this.interval - 1; |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 刷新验证码 |
||||
|
changePicCode() { |
||||
|
this.sendPicCode(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.must-color { |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
.code_img { |
||||
|
height: 32px; |
||||
|
width: 120px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,464 @@ |
|||||
|
<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="公司名称" |
||||
|
required |
||||
|
> |
||||
|
<a-auto-complete |
||||
|
@search="handleSearchTasks" |
||||
|
@select="onSelect" |
||||
|
placeholder="公司名称" |
||||
|
v-model="platform.companyname" |
||||
|
> |
||||
|
<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-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="产品名称" |
||||
|
required |
||||
|
> |
||||
|
<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="产品图片" |
||||
|
required |
||||
|
> |
||||
|
<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="产品分类" |
||||
|
required |
||||
|
> |
||||
|
<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="产品简介" |
||||
|
required |
||||
|
> |
||||
|
<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="产品详情" |
||||
|
required |
||||
|
> |
||||
|
<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 debounce from 'lodash/debounce'; |
||||
|
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, queryInfo } 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() { |
||||
|
this.handleSearchTasks = debounce(this.handleSearchTasks, 500); |
||||
|
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: [], // 产品类目 |
||||
|
dataSource: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('user', ['anyringToken']), |
||||
|
|
||||
|
created() { |
||||
|
this.getType(3); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 模糊搜索 选择公司信息 |
||||
|
async handleSearchTasks() { |
||||
|
try { |
||||
|
const params = { param: { company: this.platform.companyname } }; |
||||
|
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.companyname = item.company; |
||||
|
}, |
||||
|
|
||||
|
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; |
||||
|
}, |
||||
|
// 点击确定 |
||||
|
async handleOk() { |
||||
|
const { companyname, name, pic, modelIds, synopsis, needContent } = this.platform; |
||||
|
if (!companyname) { |
||||
|
this.$message.error('请输入公司名称'); |
||||
|
return; |
||||
|
} |
||||
|
if (!name) { |
||||
|
this.$message.error('请输入产品名称'); |
||||
|
return; |
||||
|
} |
||||
|
if (!pic) { |
||||
|
this.$message.error('请上传产品图片'); |
||||
|
return; |
||||
|
} |
||||
|
if (!modelIds) { |
||||
|
this.$message.error('请输入产品分类'); |
||||
|
return; |
||||
|
} |
||||
|
if (!synopsis) { |
||||
|
this.$message.error('请输入产品简介'); |
||||
|
return; |
||||
|
} |
||||
|
if (!needContent) { |
||||
|
this.$message.error('请输入产品详情'); |
||||
|
return; |
||||
|
} |
||||
|
await this.subMitAdd(); |
||||
|
}, |
||||
|
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,47 @@ |
|||||
|
<!-- |
||||
|
* @Author: wally |
||||
|
* @email: 18603454788@163.com |
||||
|
* @Date: 2021-01-13 17:21:29 |
||||
|
* @LastEditors: wally |
||||
|
* @LastEditTime: 2021-01-20 09:56:56 |
||||
|
--> |
||||
|
<template> |
||||
|
<div> |
||||
|
<h-nav /> |
||||
|
<div class="inner my-1"> |
||||
|
<bread-crumb :arr="arr" /> |
||||
|
</div> |
||||
|
|
||||
|
<div style="padding-bottom: 50px"> |
||||
|
<community /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import HNav from './../components/HNav.vue'; |
||||
|
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue'; |
||||
|
import Community from '../../Community/Community.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'News', |
||||
|
components: { HNav, BreadCrumb, Community }, |
||||
|
data() { |
||||
|
return { |
||||
|
typeOfPlatform: '创新社区', |
||||
|
arr: [ |
||||
|
{ name: '创新社区', url: '/NewPlatform/NewCore' }, |
||||
|
{ name: '交流社区', url: '' }, |
||||
|
], |
||||
|
btnType: 'default', |
||||
|
}; |
||||
|
}, |
||||
|
methods: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.inner { |
||||
|
margin: 10px auto 15px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue