191 lines
4.1 KiB
Vue
191 lines
4.1 KiB
Vue
<template>
|
||
<view>
|
||
<view class="news-details">
|
||
<view class="header">
|
||
<view class="title xxl m-b-20">{{ demandDetail.name }}</view>
|
||
<view class="flex row-between">
|
||
<view class="xs lighter">发布时间：{{ demandDetail.create_time }}</view>
|
||
<view class="flex">
|
||
<image class="icon-sm" src="/static/images/icon_see.png"></image>
|
||
<view class="m-l-10 xs muted">{{ demandDetail.reports_count }}人报名</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="main">
|
||
<u-parse :html="demandDetail.content "/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="downloadHeight"></view>
|
||
|
||
<view class="download">
|
||
<button class="bg-primary br60 white btn" size="mini"
|
||
@tap="show = true">立即报名</button>
|
||
</view>
|
||
|
||
|
||
<u-popup v-model="show" mode="bottom">
|
||
<view class="address-edit">
|
||
<view class="form bg-white">
|
||
<view class="tit">立即报名</view>
|
||
<u-field v-model="addressObj.name" label="姓名" placeholder="请填写姓名">
|
||
</u-field>
|
||
<u-field v-model="addressObj.phone" label="电话" placeholder="请填写手机号码">
|
||
</u-field>
|
||
<u-field v-model="addressObj.company" label="公司名称" placeholder="请填写公司名称">
|
||
</u-field>
|
||
<u-field v-model="addressObj.price" label="报价" placeholder="请填写报价">
|
||
</u-field>
|
||
<view>
|
||
<u-field v-model="addressObj.remarks" type="textarea" label="其他" placeholder="请填写备注"
|
||
:field-style="{flex: 1, height: '200rpx'}" />
|
||
</view>
|
||
</view>
|
||
<button class="my-btn bg-primary white br60" @tap="formSubmit()">完成</button>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<loading-view v-if="showLoading"></loading-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { getDemandDetail,demandSubmit } from '@/api/store';
|
||
export default {
|
||
data() {
|
||
return {
|
||
showLoading: true,
|
||
addressObj: {
|
||
name: '',
|
||
phone: '',
|
||
company: '',
|
||
price: '',
|
||
remarks: '',
|
||
},
|
||
demandId:'',
|
||
demandDetail: {},
|
||
show:false,
|
||
};
|
||
},
|
||
onLoad: function(options) {
|
||
this.demandId = parseInt(options.id);
|
||
this.getDemandDetailFun();
|
||
},
|
||
methods: {
|
||
getDemandDetailFun() {
|
||
getDemandDetail({
|
||
id: this.demandId
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.demandDetail = res.data
|
||
setTimeout(() => {
|
||
this.article_content = res.data.content;
|
||
this.showLoading = false
|
||
}, 200);
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
async formSubmit() {
|
||
let {
|
||
addressObj: {
|
||
name,
|
||
phone,
|
||
company,
|
||
price,
|
||
remarks,
|
||
},
|
||
demandId,
|
||
} = this;
|
||
if (!name) return this.$toast({
|
||
title: '请填写姓名'
|
||
});
|
||
if (!phone) return this.$toast({
|
||
title: '请填写手机号码'
|
||
});
|
||
if (!company) return this.$toast({
|
||
title: '请填写公司名称'
|
||
});
|
||
if (!price) return this.$toast({
|
||
title: '请填写报价'
|
||
});
|
||
const params = {
|
||
name,
|
||
phone,
|
||
company,
|
||
price,
|
||
remarks,
|
||
demand_id: demandId,
|
||
}
|
||
const {
|
||
data,
|
||
code,
|
||
msg
|
||
} = await demandSubmit(params)
|
||
if(code == 1) {
|
||
this.show = false;
|
||
this.getDemandDetailFun();
|
||
this.$toast({
|
||
title: msg
|
||
})
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
.news-details .header{
|
||
padding: 20rpx 15px;
|
||
border-bottom: $-solid-border;
|
||
}
|
||
.news-details .main {
|
||
padding: 40rpx 15px;
|
||
}
|
||
|
||
.address-edit {
|
||
padding-top: 10rpx;
|
||
|
||
.my-btn {
|
||
margin: 30rpx 26rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.download {
|
||
position: fixed;
|
||
left:0%;
|
||
bottom:0;
|
||
z-index: 99;
|
||
width: 100%;
|
||
padding:14rpx 0;
|
||
background-color: #fff;
|
||
border-top: 1px solid #ececec;
|
||
box-shadow: 0 0 30rpx rgba(0,0,0,0.1);
|
||
.btn {
|
||
width: 88%;
|
||
margin: 0 auto;
|
||
font-size: 30rpx;
|
||
display: block;
|
||
background: linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36));
|
||
}
|
||
}
|
||
|
||
.downloadHeight {
|
||
height: 120rpx;
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
.form .tit {
|
||
text-align: center;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
padding: 24rpx 0 20rpx 0;
|
||
}
|
||
</style>
|