256 lines
7.7 KiB
Vue
256 lines
7.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="news-details-container mt16">
|
|||
|
|
<div class="nav-container flex">
|
|||
|
|
<div class="nr" style="width: 70px">当前位置：</div>
|
|||
|
|
<el-breadcrumb style="flex: 1;" separator="/" class="flex">
|
|||
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|||
|
|
<el-breadcrumb-item>
|
|||
|
|
<nuxt-link to="/demand_list">我的需求</nuxt-link>
|
|||
|
|
</el-breadcrumb-item>
|
|||
|
|
<el-breadcrumb-item class="line1 demand-title">{{detailsObj.name}}</el-breadcrumb-item>
|
|||
|
|
</el-breadcrumb>
|
|||
|
|
</div>
|
|||
|
|
<div class="content-box">
|
|||
|
|
<div class="news-detail-box m-r-16">
|
|||
|
|
<div class="content-header bg-white">
|
|||
|
|
<div class="news-detail-title">
|
|||
|
|
{{detailsObj.name}}
|
|||
|
|
</div>
|
|||
|
|
<div class="sign"><el-button type="primary" icon="el-icon-s-promotion" @click="dialogFormVisible = true">立即报名</el-button></div>
|
|||
|
|
<div class="flex">
|
|||
|
|
<div class="sm muted">
|
|||
|
|
发布时间：{{detailsObj.create_time}}
|
|||
|
|
</div>
|
|||
|
|
<div class="flex" style="margin-left: 40px">
|
|||
|
|
<i class="el-icon-s-promotion muted"></i>
|
|||
|
|
<div class="muted" style="margin-left: 3px;">已报名<span style="margin:0 5px;color: #f00;">{{detailsObj.reports_count}}</span>人</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content-html-box bg-white">
|
|||
|
|
<div v-html="detailsObj.content"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 填写表单 -->
|
|||
|
|
<el-dialog title="立即报名" :visible.sync="dialogFormVisible">
|
|||
|
|
<el-form :model="form" :rules="rules" ref="form">
|
|||
|
|
<el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
|
|||
|
|
<el-input v-model="form.name" autocomplete="off"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
|
|||
|
|
<el-input v-model="form.phone" autocomplete="off"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="公司名称" prop="company" :label-width="formLabelWidth">
|
|||
|
|
<el-input v-model="form.company" autocomplete="off"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="报价" prop="price" :label-width="formLabelWidth">
|
|||
|
|
<el-input v-model="form.price" autocomplete="off"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="其他" :label-width="formLabelWidth">
|
|||
|
|
<el-input type="textarea" v-model="form.remarks" autocomplete="off"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<div slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
|||
|
|
<el-button type="primary" @click="submitForm('form')">确 定</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
head() {
|
|||
|
|
return {
|
|||
|
|
title: this.$store.getters.headTitle,
|
|||
|
|
link: [{
|
|||
|
|
rel: "icon",
|
|||
|
|
type: "image/x-icon",
|
|||
|
|
href: this.$store.getters.favicon
|
|||
|
|
}],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
async asyncData({
|
|||
|
|
$get,
|
|||
|
|
$post,
|
|||
|
|
query
|
|||
|
|
}) {
|
|||
|
|
let detailsObj = {};
|
|||
|
|
let demand_id = '';
|
|||
|
|
let recommend_list = [];
|
|||
|
|
demand_id = query.id
|
|||
|
|
let res = await $get("demand/detail", {
|
|||
|
|
params: {
|
|||
|
|
id: query.id,
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
detailsObj = res.data;
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
detailsObj,
|
|||
|
|
demand_id
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watchQuery: ['id'],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
demand_id:'',
|
|||
|
|
dialogFormVisible: false,
|
|||
|
|
form: {
|
|||
|
|
name: '',
|
|||
|
|
phone: '',
|
|||
|
|
company: '',
|
|||
|
|
price: '',
|
|||
|
|
remarks: '',
|
|||
|
|
},
|
|||
|
|
formLabelWidth: '120px',
|
|||
|
|
rules: {
|
|||
|
|
name: [
|
|||
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
phone: [
|
|||
|
|
{ required: true, message: '请输入电话', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
company: [
|
|||
|
|
{ required: true, message: '请输入公司名称', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
price: [
|
|||
|
|
{ required: true, message: '请输入报价', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
console.log('route', this.$route)
|
|||
|
|
// this.getNewsDetails(this.$route.query.id);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async getNewsDetails(id) {
|
|||
|
|
let res = await this.$get("help/detail", {params: {id: id, client: 2}});
|
|||
|
|
if(res.code == 1) {
|
|||
|
|
this.detailsObj = res.data;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toOther(id) {
|
|||
|
|
this.$router.push('/help_center/help_center_detail?id=' + id)
|
|||
|
|
},
|
|||
|
|
// 表单提交
|
|||
|
|
submitForm(form) {
|
|||
|
|
console.log(this.demand_id)
|
|||
|
|
this.$refs[form].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
console.log(this.form)
|
|||
|
|
let params = this.form;
|
|||
|
|
params.demand_id = this.demand_id;
|
|||
|
|
this.$post("demand/report", params).then(res=>{
|
|||
|
|
if(res.code == 1) {
|
|||
|
|
this.dialogFormVisible = false,
|
|||
|
|
this.$message({
|
|||
|
|
message: '报名成功',
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.news-details-container {
|
|||
|
|
.nav-container {
|
|||
|
|
padding: 15px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
|
|||
|
|
.news-detail-box {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.content-header {
|
|||
|
|
margin: 0px 20px;
|
|||
|
|
padding: 20px 0px;
|
|||
|
|
border-bottom: 1px solid #e5e5e5;
|
|||
|
|
position: relative;
|
|||
|
|
.news-detail-title {
|
|||
|
|
color: #222;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
max-width: 860px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-html-box {
|
|||
|
|
padding: 24px 20px;
|
|||
|
|
|
|||
|
|
&>div {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
::v-deep img {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recommend-box {
|
|||
|
|
width: 264px;
|
|||
|
|
|
|||
|
|
.recommend-box-header {
|
|||
|
|
padding: 15px 10px;
|
|||
|
|
border-bottom: 1px solid #e5e5e5;
|
|||
|
|
|
|||
|
|
.primary-line {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
background-color: $--color-primary;
|
|||
|
|
width: 4px;
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recommend-box-content {
|
|||
|
|
.recommend-list-container {
|
|||
|
|
.recommend-list-item {
|
|||
|
|
padding: 10px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
.goods-info {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demand-title {
|
|||
|
|
max-width: 900px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 1;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sign {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 30px;
|
|||
|
|
}
|
|||
|
|
</style>
|