jp-zeroWorkerStation/pages/packages/mine/employmentService/postMessage.vue

<template>
	<view>
		<u-navbar back-text="发布信息" back-icon-size="28" back-icon-color="#ffffff" :background="{backgroundColor: '#2795FD',}"
			:back-text-style="{color: '#ffffff'}"></u-navbar>
		<!-- 发布标题 -->
		<view class="post-title">
			<view class="title">
				发布标题
			</view>
			<view class="title-content">
				<input v-model="form.title" class="input" type="text" value="" placeholder="请填写标题内容" />
			</view>
			<!-- 类型选择 -->
			<view class="type">
				<view class="name">
					<text>*</text>共享类型
				</view>
				<!-- 单选框 -->
				<u-radio-group v-model="form.type">
					<u-radio v-for="(item, index) in list" :key="index" :name="item.type"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>

		</view>
		<!-- 内容描述 -->
		<view class="content-description">
			<view class="title">
				内容描述
			</view>
			<view class="content-textarea">
				<textarea v-model="form.content" class="textarea" value="" placeholder="请描述共享用工需求内容，并留下您的联系方式。" />
			</view>

		</view>

		<!-- 底部按钮 -->

		<button class="btn" @click="publishInformation">发布信息</button>
	</view>
</template>

<script>
	import * as packagesAPI from '@/apis/pagejs/packages.js'
	
	export default {
		data() {
			return {
				list: [{
						name: '急需用工',
						type: '1',
						disabled: false
					},
					{
						name: '资源共享',
						type: '2',
						disabled: false
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				form: {
					id: '',
					type: '1',
					title: '',
					content: ''
				},
			};
		},
		methods: {
			publishInformation() {
				if(!this.form.title) {
					uni.showToast({
						title: "请填写标题内容",
						icon: "none"
					})
					return
				}
				if(!this.form.content) {
					uni.showToast({
						title: "请描述共享用工需求内容",
						icon: "none"
					})
					return
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				packagesAPI.createShareWork(this.form).then((res) => {
					uni.hideLoading();
					uni.navigateTo({
						url: '/pages/packages/mine/employmentService/shareEmployment'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	};
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>
<style scoped lang="scss">
	// 发布标题
	.post-title {
		margin: 24rpx 32rpx 0;
		padding: 24rpx 32rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 36rpx;
		background-color: #fff;
		border-radius: 24rpx;

		.title {
			font-family: 'PingFangSC-medium';
		}

		.title-content {
			.input {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				color: rgba(136, 136, 136, 1);
				font-family: Microsoft Yahei;
			}
		}

		// 类型选择
		.type {
			display: flex;
			align-items: center;
			margin-top: 16rpx;

			.name {
				font-size: 32rpx;
				color: #101010;
				margin-right: 40rpx;

				text {
					color: #EE3138
				}
			}
		}
	}

	// 内容描述
	.content-description {
		margin: 24rpx 32rpx 0;
		padding: 24rpx 32rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 36rpx;
		background-color: #fff;
		border-radius: 24rpx;

		.title {
			font-family: 'PingFangSC-medium';
		}

		.content-textarea {
			margin-top: 24rpx;

			.textarea {
				width: 100%;
				height: 640rpx;
				color: rgba(136, 136, 136, 1);
				font-family: Microsoft Yahei;
				line-height: 40rpx;
			}
		}
	}

	// 底部按钮


	.btn {
		position: fixed;
		bottom: 32rpx;
		left: 0;
		right: 0;
		background-color: #F0F0F2;
		padding: 0 32rpx;
		border-radius: 50px;
		background-color: rgba(34, 149, 255, 1);
		color: rgba(241, 241, 241, 1);
		font-size: 36rpx;
		margin: 0 32rpx;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.03);
	}
</style>