<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
:withFooter="false"
|
>
|
<div class="com" v-if="info">
|
<div class="com_image">
|
<img :src="info.fullLog" />
|
</div>
|
<div class="com_info">
|
<div class="com_info_title">{{info.name}}</div>
|
<div class="list_item_cate">
|
<div class="list_item_cate_row" v-for="(item, index) in info.lablesList" :key="index">{{item}}</div>
|
</div>
|
<div class="com_info_text1">服务商：{{info.serverName}}</div>
|
<div class="com_info_text">{{info.introduction}}</div>
|
<div class="com_info_btn" @click="openT" v-if="[1, 2].includes(userInfo.type)">联系我们</div>
|
<div class="com_info_x"></div>
|
<div class="com_info_content" v-html="info.details"></div>
|
</div>
|
<el-dialog
|
title="联系我们"
|
:destroy-on-close="true"
|
:visible.sync="show"
|
:close-on-click-modal="false"
|
:modal-append-to-body="false"
|
width="500px">
|
<el-form :model="formData" label-position="right" :rules="rules" ref="ruleForm">
|
<el-form-item label="联系人" prop="name">
|
<el-input v-model="formData.name"></el-input>
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone">
|
<el-input type="number" v-model="formData.phone" maxlength="11"></el-input>
|
</el-form-item>
|
<el-form-item label="简要描述" prop="description">
|
<el-input v-model="formData.description"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="show = false">取 消</el-button>
|
<el-button type="primary" @click="submit">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getById } from '@/api/business/applicationInfo'
|
import { create } from '@/api/business/demandRecord'
|
import { mapState } from 'vuex'
|
export default {
|
name: 'OperaDemandRecordWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
computed: {
|
...mapState(['userInfo'])
|
},
|
data () {
|
return {
|
form: {},
|
formData: {
|
name: '',
|
phone: '',
|
description: ''
|
},
|
rules: {
|
name: [
|
{ required: true, message: '请输入', trigger: 'blur' }
|
],
|
phone: [
|
{ required: true, message: '请输入', trigger: 'blur' }
|
]
|
},
|
show: false,
|
info: null
|
}
|
},
|
methods: {
|
async open (title, id) {
|
this.title = title
|
this.info = await getById(id)
|
this.info.lablesList = this.info.lables.split(',') || []
|
this.visible = true
|
},
|
openT() {
|
this.formData.name = ''
|
this.formData.phone = ''
|
this.formData.description = ''
|
this.show = true
|
},
|
submit() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
create({
|
applicationId: this.info.id,
|
linkName: this.formData.name,
|
linkPhone: this.formData.phone,
|
details: this.formData.description
|
}).then(res => {
|
this.$message.success('提交成功！')
|
this.show = false
|
})
|
} else {
|
return false;
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.com {
|
width: 100%;
|
display: flex;
|
.com_image {
|
width: 140px;
|
height: 140px;
|
flex-shrink: 0;
|
background: #F4F7FC;
|
margin-right: 30px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
img {
|
width: 100%;
|
}
|
}
|
.com_info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.com_info_title {
|
font-weight: 600;
|
font-size: 26px;
|
color: #222222;
|
}
|
.com_info_text1 {
|
font-weight: 400;
|
font-size: 13px;
|
color: #666666;
|
margin-top: 15px;
|
}
|
.com_info_text {
|
font-weight: 400;
|
font-size: 16px;
|
color: #666666;
|
margin-top: 15px;
|
}
|
.com_info_btn {
|
width: 96px;
|
height: 36px;
|
line-height: 36px;
|
text-align: center;
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
background: #216EEE;
|
border-radius: 2px;
|
cursor: pointer;
|
margin-top: 15px;
|
}
|
.com_info_x {
|
width: 100%;
|
height: 1px;
|
margin: 20px 0;
|
background-color: #DFE2E8;
|
}
|
.com_info_content {
|
width: 100%;
|
}
|
.list_item_cate {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 12px;
|
.list_item_cate_row {
|
padding: 5px 8px;
|
box-sizing: border-box;
|
background: rgba(33,110,238,0.1);
|
border-radius: 2px;
|
font-weight: 400;
|
font-size: 12px;
|
color: #216EEE;
|
margin-right: 10px;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
