|
|
@@ -0,0 +1,218 @@
|
|
|
+<template>
|
|
|
+ <div class="workflowTradeDetail container-height">
|
|
|
+ <Breadcrumb />
|
|
|
+ <div class="flex-column-center">
|
|
|
+ <div class="font_size30 bold">发布工作流需求</div>
|
|
|
+ <div class="gray font_size20">填写以下信息，让更多专业人士了解您的需求</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-between mt10">
|
|
|
+ <div class="flex_1 mr20">
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-position="top" class="page-add">
|
|
|
+ <!-- 基本信息 -->
|
|
|
+ <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
|
|
|
+ <div class="gap10">
|
|
|
+ <div class="line_vertical"></div>
|
|
|
+ <div class="font_size20 bold">基本信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt10">
|
|
|
+ <el-form-item label="" prop="name">
|
|
|
+ <div>
|
|
|
+ <span class="color_required font_size16">*</span>
|
|
|
+ <span class="font_size16 bold">需求标题</span>
|
|
|
+ <span class="font_size14 gray999 ml20">一个好的标题能吸引更多专业人士关注</span>
|
|
|
+ </div>
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入工作流标题" maxlength="50"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="name">
|
|
|
+ <div>
|
|
|
+ <span class="color_required font_size16">*</span>
|
|
|
+ <span class="font_size16 bold">工作流类型</span>
|
|
|
+ <span class="font_size14 gray999 ml20">选择最贴合的工作流分类</span>
|
|
|
+ </div>
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入工作流标题" maxlength="50"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 详细内容 -->
|
|
|
+ <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
|
|
|
+ <div class="gap10">
|
|
|
+ <div class="line_vertical"></div>
|
|
|
+ <div class="font_size20 bold">详细内容</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt10">
|
|
|
+ <el-form-item label="需求背景" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="说明您的需求来源和目的" maxlength="500" type="textarea" show-word-limit/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="具体要求" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name"
|
|
|
+ rows="7"
|
|
|
+ placeholder="详细描述功能要求、技术要求等（50-2000字）
|
|
|
+建议分点说明：
|
|
|
+1.功能需求
|
|
|
+2.技术要求
|
|
|
+3.经验要求
|
|
|
+4.其他说明
|
|
|
+ " maxlength="2000" type="textarea" show-word-limit/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 项目信息 -->
|
|
|
+ <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
|
|
|
+ <div class="gap10">
|
|
|
+ <div class="line_vertical"></div>
|
|
|
+ <div class="font_size20 bold">项目信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt10">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="" prop="name">
|
|
|
+ <div>
|
|
|
+ <span class="color_required font_size16">*</span>
|
|
|
+ <span class="font_size16 bold">预算下限(元)</span>
|
|
|
+ <span class="font_size14 gray999 ml20">选填，有助于吸引合适的服务者</span>
|
|
|
+ </div>
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="最低预算" maxlength="11" type="number" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="" prop="name">
|
|
|
+ <div>
|
|
|
+ <span class="color_required font_size16">*</span>
|
|
|
+ <span class="font_size16 bold">预算上限(元)</span>
|
|
|
+ <span class="font_size14 gray999 ml20">选填，有助于吸引合适的服务者</span>
|
|
|
+ </div>
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="最高预算" maxlength="11" type="number" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="报名截止时间" prop="name">
|
|
|
+ <!-- 只能选择之后的时间 -->
|
|
|
+ <el-date-picker
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="选择报名截止时间"
|
|
|
+ :disabled-date="time => time.getTime() < Date.now() - 8.64e7"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 联系方式 -->
|
|
|
+ <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
|
|
|
+ <div class="gap10">
|
|
|
+ <div class="line_vertical"></div>
|
|
|
+ <div class="font_size20 bold">联系方式</div>
|
|
|
+ </div>
|
|
|
+ <div class="mt10">
|
|
|
+ <el-form-item label="手机号" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入手机号" maxlength="11" type="number" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="微信">
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入手机号" maxlength="50"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="邮箱">
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入手机号" maxlength="50"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt20">
|
|
|
+ <el-button type="primary" class="font_size16 gradient" @click="submitForm" size="large">
|
|
|
+ <el-icon><Promotion /></el-icon>
|
|
|
+ <span class="ml10">发布需求</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button class="font_size16" @click="goBack" size="large">
|
|
|
+ <el-icon><Close /></el-icon>
|
|
|
+ <span class="ml10">取消</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="workflowTradeDetail_right detail_right">
|
|
|
+ <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
|
|
|
+ <div class="gap10">
|
|
|
+ <div class="line_vertical"></div>
|
|
|
+ <div class="font_size20 bold">发布提示</div>
|
|
|
+ </div>
|
|
|
+ <!-- 无序列表 -->
|
|
|
+ <ul class="font_size16">
|
|
|
+ <li>标题要简洁明了，突出核心需求</li>
|
|
|
+ <li>详细描述需求背景和具体要求</li>
|
|
|
+ <li>明确交付标准和验收方式</li>
|
|
|
+ <li>合理设置预算范围</li>
|
|
|
+ <li>添加相关标签提高匹配度</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="padding16 bg_color_fff border_radius_16 mt20 box_shadow_card">
|
|
|
+ <div class="gap10">
|
|
|
+ <div class="line_vertical"></div>
|
|
|
+ <div class="font_size20 bold">发布规则</div>
|
|
|
+ </div>
|
|
|
+ <!-- 有序列表 -->
|
|
|
+ <ol class="font_size16">
|
|
|
+ <li>这里是发布规则文字说明</li>
|
|
|
+ <li>这里是发布规则文字说明</li>
|
|
|
+ <li>这里是发布规则文字说明</li>
|
|
|
+ <li>这里是发布规则文字说明</li>
|
|
|
+ </ol>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import riliIcon from '@/assets/imgs/rili.png'
|
|
|
+ import biaoqianIcon from '@/assets/imgs/biaoqian.png'
|
|
|
+ import yuangong from '@/assets/imgs/yuangong.png'
|
|
|
+ import zaixianbaomingIcon from '@/assets/imgs/zaixianbaoming.png'
|
|
|
+ import dianhuaIcon from '@/assets/imgs/dianhua.png'
|
|
|
+ import weixinIcon from '@/assets/imgs/weixin.png'
|
|
|
+ import youxiangIcon from '@/assets/imgs/youxiang.png'
|
|
|
+
|
|
|
+
|
|
|
+ import { useRouter, useRoute } from 'vue-router'
|
|
|
+ const router = useRouter()
|
|
|
+ const route = useRoute()
|
|
|
+ console.log(router,route)
|
|
|
+ import { ref, computed, reactive } from 'vue'
|
|
|
+ import { useAppStore } from '@/pinia/appStore'
|
|
|
+ const appStore = useAppStore()
|
|
|
+
|
|
|
+ //获取参数
|
|
|
+ const query = route.query;
|
|
|
+ // 表单实例
|
|
|
+const ruleFormRef = ref(null)
|
|
|
+const ruleForm = reactive({
|
|
|
+ name: '',
|
|
|
+})
|
|
|
+// 校验规则
|
|
|
+const rules = reactive({
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入需求标题', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+// 提交表单
|
|
|
+const submitForm = async () => {
|
|
|
+ await ruleFormRef.value.validate((valid, fields) => {
|
|
|
+ console.log(valid, fields)
|
|
|
+ if (!valid) {
|
|
|
+ DGTMessage.warning(fields.name[0].message)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ DGTMessage.success('表单提交成功')
|
|
|
+ })
|
|
|
+};
|
|
|
+const goBack = () => {
|
|
|
+ router.back()
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .workflowTradeDetail{
|
|
|
+ .workflowTradeDetail_right{
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
zhangningning