|
|
|
@ -8,35 +8,80 @@ |
|
|
|
<div class="flow-path"> |
|
|
|
<div class="flow-title">服务流程</div> |
|
|
|
<div class="flow-content"> |
|
|
|
<img src="~assets/image.png" style="width:100%" /> |
|
|
|
<img src="~assets/image.png" style="width: 100%" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="inner d-flex flex-wrap" style="margin: 60px auto"> |
|
|
|
<div |
|
|
|
:class="(index + 1) % 4 === 0 ? 'margin-0' : ''" |
|
|
|
:key="index" |
|
|
|
class="item-box mb-8" |
|
|
|
v-for="(item, index) in list" |
|
|
|
> |
|
|
|
<div :class="(index + 1) % 4 === 0 ? 'margin-0' : ''" :key="index" class="item-box mb-8" v-for="(item, index) in list"> |
|
|
|
<img :src="item.picUrl" style="height: 220px; width: 100%; border: 1px solid #ccc" /> |
|
|
|
<p class="font-24 my-4">{{ item.name }}</p> |
|
|
|
<p class="font-24 my-4"> |
|
|
|
<span @click="showModal(item.id)" style="cursor: pointer">{{ item.name }}</span> |
|
|
|
</p> |
|
|
|
<p class="font-16 my-4 textColor line-height-30 item-content">{{ item.intro }}</p> |
|
|
|
<p |
|
|
|
<!-- <p |
|
|
|
@click="jump(item.id)" |
|
|
|
class="font-16 baseColor" |
|
|
|
style="text-align: right; cursor: pointer" |
|
|
|
>了解更多→</p> |
|
|
|
>了解更多→</p> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<a-modal :confirm-loading="confirmLoading" 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 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="项目信息简述" required> |
|
|
|
<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" :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> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapMutations } from 'vuex'; |
|
|
|
import { selService } from 'config/api'; |
|
|
|
import { mapMutations, mapState, mapActions } from 'vuex'; |
|
|
|
import { selService, serviceApply, upload } from 'config/api'; |
|
|
|
import Banner from 'components/Banner/Banner.vue'; |
|
|
|
import HNav from './../components/HNav.vue'; |
|
|
|
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue'; |
|
|
|
|
|
|
|
const formItemLayout = { |
|
|
|
labelCol: { span: 5 }, |
|
|
|
wrapperCol: { span: 18 }, |
|
|
|
}; |
|
|
|
const formTailLayout = { |
|
|
|
labelCol: { span: 6 }, |
|
|
|
wrapperCol: { span: 18, offset: 6 }, |
|
|
|
}; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Service', |
|
|
|
components: { HNav, Banner, BreadCrumb }, |
|
|
|
@ -54,13 +99,46 @@ export default { |
|
|
|
current: 1, |
|
|
|
pageSize: 8, |
|
|
|
total: 0, |
|
|
|
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, |
|
|
|
}, |
|
|
|
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: '', |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: mapState('user', ['picCode']), |
|
|
|
created() { |
|
|
|
this.getService(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
...mapMutations('home', ['setServiceArr']), |
|
|
|
...mapMutations('home', ['setServiceArr', 'getUserSer']), |
|
|
|
...mapActions('user', ['sendCode', 'sendPicCode']), |
|
|
|
// 获取服务列表 |
|
|
|
async getService() { |
|
|
|
try { |
|
|
|
@ -84,6 +162,117 @@ export default { |
|
|
|
params: { id }, |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 显示表单输入框 |
|
|
|
showModal(id) { |
|
|
|
this.typeData.Id = id; |
|
|
|
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.describe) { |
|
|
|
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(); |
|
|
|
// console.log(this.platform.files); |
|
|
|
} 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, |
|
|
|
}, |
|
|
|
}; |
|
|
|
const res = await serviceApply(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(); |
|
|
|
}, |
|
|
|
fileChange(info) { |
|
|
|
this.fileList = info.fileList; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
