glhcp/uniapp/pages/demand_details/demand_details.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>