Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 6b5c7de5 作者: 廖在望
操作

feat: 调整表单顺序，增加样式

上级 5d650a0f
正在显示 包含 59 行增加 和 158 行删除
src/pages/linghuoyonggong/form.vue
...@@ -63,56 +63,46 @@ ...@@ -63,56 +63,46 @@
}, },
rules: [ rules: [
{ {
name: 'name', name: 'type',
rule: ['required'], rule: ['required'],
msg: ['请输入名称'], msg: ['请选择用工类型'],
}, },{
{ name: 'name',
name: 'workers',
rule: ['required'], rule: ['required'],
msg: ['请输入工作内容'], msg: ['请输入标题'],
}, }, {
{
name: 'workers', name: 'workers',
rule: ['required'], rule: ['required'],
msg: ['请输入工人数量'], msg: ['请输入工人数量'],
}, }, {
{
name: 'price', name: 'price',
rule: ['required'], rule: ['required'],
msg: ['请输入价钱'], msg: ['请输入用工单价'],
}, }, {
{ name: 'starttime',
name: 'type',
rule: ['required'], rule: ['required'],
msg: ['请选择类型'], msg: ['请选择开始时间'],
}, }, {
{ name: 'estimatedendtime',
rule: ['required'],
msg: ['请选择预计结束时间'],
}, {
name: 'content',
rule: ['required'],
msg: ['请输入工作内容'],
}, {
name: 'area', name: 'area',
rule: ['required'], rule: ['required'],
msg: ['请选择地区'], msg: ['请选择地区'],
}, }, {
{
name: 'address', name: 'address',
rule: ['required'], rule: ['required'],
msg: ['请选择详细地址'], msg: ['请输入详细地址'],
}, }, {
{
name: 'urgentdegree', name: 'urgentdegree',
rule: ['required'], rule: ['required'],
msg: ['请选择紧急程度'], msg: ['请选择紧急程度'],
}, }, {
{
name: 'starttime',
rule: ['required'],
msg: ['请选择开始时间'],
},
{
name: 'estimatedendtime',
rule: ['required'],
msg: ['请选择预计结束时间'],
},
{
name: 'picture', name: 'picture',
rule: ['required'], rule: ['required'],
msg: ['请上传图片'], msg: ['请上传图片'],
...@@ -124,8 +114,6 @@ ...@@ -124,8 +114,6 @@
function initDict() { function initDict() {
pageData.options.area = areaTree pageData.options.area = areaTree
console.log(dictStore.getDictList.purchase_status)
pageData.options.urgentdegree = dictStore.getDictList.employment_urgent.map((item) => { pageData.options.urgentdegree = dictStore.getDictList.employment_urgent.map((item) => {
return { return {
value: item.value, value: item.value,
...@@ -142,7 +130,7 @@ ...@@ -142,7 +130,7 @@
function getCurrentAddressInfo() { function getCurrentAddressInfo() {
if (!uni.getStorageSync('location')) if (!uni.getStorageSync('location'))
return return
const { lon, lat } = uni.getStorageSync('location') const { lon, lat } = uni.getStorageSync('location')
UserInfoAPI.location({ UserInfoAPI.location({
...@@ -288,18 +276,16 @@ return ...@@ -288,18 +276,16 @@ return
<view class="formBox"> <view class="formBox">
<fui-form ref="formRef" label-weight="auto" top="60" :disabled="form.id ? true : false"> <fui-form ref="formRef" label-weight="auto" top="60" :disabled="form.id ? true : false">
<view class="mt20"> <view class="mt20">
<fui-input required label="名称" placeholder="请输入名称" v-model="form.name" labelSize="28" label-width="180" /> <fui-input required label="用工类型" placeholder="请选择用工类型" v-model="form.typeText" labelSize="28" size="28" label-width="180" @click="show.type = true" />
<fui-input required label="工作内容" placeholder="请输入工作内容" v-model="form.content" labelSize="28" label-width="180" /> <fui-input required label="标题" placeholder="请输入标题" v-model="form.name" labelSize="28" label-width="180" maxlength="16" size="28"/>
</view> </view>
<view class="mt20"> <view class="mt20">
<fui-input required type="number" :min="0" label="工人数量" placeholder="请输入工人数量" v-model="form.workers" labelSize="28" label-width="180" /> <fui-input required type="number" :min="0" label="工人数量" placeholder="请输入工人数量" v-model="form.workers" labelSize="28" label-width="180" maxlength="4" size="28">
<fui-input required type="number" label="价钱" :min="0" placeholder="请输入价钱" v-model="form.price" labelSize="28" label-width="180" /> <view slot="suffix" class="unit-slot">人</view>
<fui-input required label="类型" placeholder="请选择类型" v-model="form.typeText" labelSize="28" label-width="180" @click="show.type = true" /> </fui-input>
</view> <fui-input required type="number" label="用工单价" :min="0" placeholder="请输入用工单价" v-model="form.price" labelSize="28" label-width="180" maxlength="6" size="28">
<view class="mt20"> <view slot="suffix" class="unit-slot">元/人</view>
<fui-input required label="地区" placeholder="请选择地区" v-model="form.areaText" labelSize="28" label-width="180" @click="show.area = true" /> </fui-input>
<fui-input required label="详细地址" placeholder="请输入详细地址" v-model="form.address" labelSize="28" label-width="180" />
<fui-input required label="紧急程度" placeholder="请选择紧急程度" v-model="form.urgentdegreeText" labelSize="28" label-width="180" @click="show.urgentdegree = true" />
<!-- 时间范围 --> <!-- 时间范围 -->
<view class="form-section" style="padding: 0 30rpx"> <view class="form-section" style="padding: 0 30rpx">
<view class="form-item flex align-center"> <view class="form-item flex align-center">
...@@ -310,7 +296,7 @@ return ...@@ -310,7 +296,7 @@ return
{{ form.starttime || '开始时间' }} {{ form.starttime || '开始时间' }}
</text> </text>
</view> </view>
<text class="time-separator">-</text> <text class="time-separator">至</text>
<view class="time-input" @click="show.time2 = true"> <view class="time-input" @click="show.time2 = true">
<text class="time-text" :class="{ placeholder: !form.estimatedendtime }"> <text class="time-text" :class="{ placeholder: !form.estimatedendtime }">
{{ form.estimatedendtime || '结束时间' }} {{ form.estimatedendtime || '结束时间' }}
...@@ -319,17 +305,16 @@ return ...@@ -319,17 +305,16 @@ return
</view> </view>
</view> </view>
</view> </view>
<fui-input required label="工作内容" placeholder="请输入工作内容" v-model="form.content" labelSize="28" label-width="180" maxlength="32" size="28" />
</view>
<view class="mt20">
<fui-input required label="地区" placeholder="请选择地区" v-model="form.areaText" labelSize="28" label-width="180" @click="show.area = true" size="28"/>
<fui-input required label="详细地址" placeholder="请输入详细地址" v-model="form.address" labelSize="28" label-width="180" size="28"/>
<fui-input required label="紧急程度" placeholder="请选择紧急程度" v-model="form.urgentdegreeText" labelSize="28" label-width="180" size="28" @click="show.urgentdegree = true" />
</view> </view>
<view class="bg-white mt20" style="padding: 0.875rem 1rem"> <view class="bg-white mt20" style="padding: 0.875rem 1rem">
<view class="mb-1 flex justify-start"><span style="color: red;">*&nbsp;</span> 图片 </view> <view class="mb-1 flex justify-start" style="font-size: 28rpx;"><span style="color: red;">*&nbsp;</span> 图片 </view>
<uni-file-picker <uni-file-picker :value="form.pictureObj" ref="uploadRef" limit="1" :auto-upload="false" @select="handleUpload" @delete="handleDelete"/>
:value="form.pictureObj"
ref="uploadRef"
limit="1"
:auto-upload="false"
@select="handleUpload"
@delete="handleDelete"
/>
</view> </view>
<view class="fui-btn__box" v-if="!form.id" style="margin-top: 30rpx"> <view class="fui-btn__box" v-if="!form.id" style="margin-top: 30rpx">
<fui-button text="发布用工" bold radius="96rpx" @click="submit" /> <fui-button text="发布用工" bold radius="96rpx" @click="submit" />
...@@ -517,4 +502,9 @@ return ...@@ -517,4 +502,9 @@ return
margin-bottom: 0; margin-bottom: 0;
padding: 0; padding: 0;
} }
.unit-slot {
padding: 0 16rpx;
color: #333;
font-size: 28rpx;
}
</style> </style>
src/pages/linghuoyonggong/linghuoyonggong.vue
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
}) })
onShow(() => { onShow(() => {
// pageData.purchaseDemands = []
pageData.search.pageNo = 1 pageData.search.pageNo = 1
if (pageData.currentEmploymentId === 1) { if (pageData.currentEmploymentId === 1) {
pageData.search.publishstatu = 1 pageData.search.publishstatu = 1
...@@ -51,65 +50,7 @@ ...@@ -51,65 +50,7 @@
currentEmploymentId: 1, currentEmploymentId: 1,
// 用工列表 // 用工列表
employmentList: [ employmentList: [],
// {
// id: 1,
// image: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=f33c4419bab5b0fb3a63b5b3006059f2.png',
// title: '蔬菜种植',
// duration: '预计3天',
// people: '需要5人',
// price: '150元/天',
// distance: '3.2km',
// rating: '4',
// actionText: '我想去',
// icons: {
// duration:
// 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=56353ebdea095baedbcb33fc53f68a03.png',
// people: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=85c3b17d5049630ed51fd57b701f047f.png',
// price: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=9e806e0315ec11c12ec9e2b6870dd395.png',
// location:
// 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=39c448ae66659127e7bcd035ea16e0de.png',
// },
// },
// {
// id: 2,
// image: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=f33c4419bab5b0fb3a63b5b3006059f2.png',
// title: '果树修剪',
// duration: '预计5天',
// people: '需要3人',
// price: '180元/天',
// distance: '2.1km',
// rating: '5',
// actionText: '我想去',
// icons: {
// duration:
// 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=56353ebdea095baedbcb33fc53f68a03.png',
// people: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=85c3b17d5049630ed51fd57b701f047f.png',
// price: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=9e806e0315ec11c12ec9e2b6870dd395.png',
// location:
// 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=39c448ae66659127e7bcd035ea16e0de.png',
// },
// },
// {
// id: 3,
// image: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=f33c4419bab5b0fb3a63b5b3006059f2.png',
// title: '水稻插秧',
// duration: '预计7天',
// people: '需要8人',
// price: '120元/天',
// distance: '5.6km',
// rating: '3',
// actionText: '我想去',
// icons: {
// duration:
// 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=56353ebdea095baedbcb33fc53f68a03.png',
// people: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=85c3b17d5049630ed51fd57b701f047f.png',
// price: 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=9e806e0315ec11c12ec9e2b6870dd395.png',
// location:
// 'https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=39c448ae66659127e7bcd035ea16e0de.png',
// },
// },
],
total: 0, total: 0,
}) })
...@@ -298,27 +239,18 @@ return ...@@ -298,27 +239,18 @@ return
<view class="codefun-flex-col page"> <view class="codefun-flex-col page">
<view class="codefun-flex-col codefun-self-stretch"> <view class="codefun-flex-col codefun-self-stretch">
<view class="codefun-mt-14 codefun-flex-row group_2 gap-2"> <view class="codefun-mt-14 codefun-flex-row group_2 gap-2">
<view <view v-for="tab in pageData.categoryTabs" :key="tab.id" class="codefun-flex-col codefun-justify-start codefun-items-center"
v-for="tab in pageData.categoryTabs" :class="[tab.id === pageData.search.type ? 'text-wrapper' : 'text-wrapper_2']" @click="onCategoryTabClick(tab)">
:key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="[tab.id === pageData.search.type ? 'text-wrapper' : 'text-wrapper_2']"
@click="onCategoryTabClick(tab)"
>
<text class="font_2 text_2"> <text class="font_2 text_2">
{{ tab.name }} {{ tab.name }}
</text> </text>
</view> </view>
</view> </view>
<view class="codefun-mt-14 codefun-flex-col group_3"> <view class="codefun-mt-14 codefun-flex-col group_3">
<view class="codefun-flex-row section_2"> <view class="codefun-flex-row section_2">
<view <view v-for="tab in pageData.employmentTabs" :key="tab.id" class="codefun-flex-col codefun-justify-start codefun-items-center text-50p"
v-for="tab in pageData.employmentTabs" :class="[tab.id === pageData.currentEmploymentId ? 'text-wrapper_3' : 'codefun-self-start']" @click="onEmploymentTabClick(tab)">
:key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center text-50p"
:class="[tab.id === pageData.currentEmploymentId ? 'text-wrapper_3' : 'codefun-self-start']"
@click="onEmploymentTabClick(tab)"
>
<text class="font_2"> <text class="font_2">
{{ tab.name }} {{ tab.name }}
</text> </text>
...@@ -329,35 +261,21 @@ return ...@@ -329,35 +261,21 @@ return
<fui-empty marginTop="100" src="/src/static/images/no-data.png" title="暂无数据" /> <fui-empty marginTop="100" src="/src/static/images/no-data.png" title="暂无数据" />
</view> </view>
<template v-else> <template v-else>
<view <view class="codefun-flex-col list-item" v-for="item in pageData.employmentList" :key="item.id" @click="onEmploymentItemClick(item)" >
class="codefun-flex-col list-item"
v-for="item in pageData.employmentList"
:key="item.id"
@click="onEmploymentItemClick(item)"
>
<view class="codefun-flex-row"> <view class="codefun-flex-row">
<image class="image_7" :src="item.picture" lazy-load /> <image class="image_7" :src="item.picture" lazy-load />
<view class="codefun-flex-col codefun-flex-1 codefun-self-center group_4"> <view class="codefun-flex-col codefun-flex-1 codefun-self-center group_4">
<view class="codefun-flex-row codefun-justify-between codefun-items-center"> <view class="codefun-flex-row codefun-justify-between codefun-items-center">
<text class="codefun-self-start font">{{ item.name }}</text> <text class="codefun-self-start font">{{ item.name }}</text>
<view> <view>
<image <image class="codefun-self-start image_8" src="/src/static/images/codefun/c98744e63719b5413f260ec6a899ee20.png" />
class="codefun-self-start image_8"
src="/src/static/images/codefun/c98744e63719b5413f260ec6a899ee20.png"
/>
<text class="codefun-self-start font_3 text_9">{{ item.area }}</text> <text class="codefun-self-start font_3 text_9">{{ item.area }}</text>
</view> </view>
</view> </view>
<view <view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-11" >
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-11"
>
<view class="flex codefun-items-center gap-1"> <view class="flex codefun-items-center gap-1">
<image class="image_9" src="/src/static/images/time.svg" /> <image class="image_9" src="/src/static/images/time.svg" />
<text class="font_4" <text class="font_4">预计{{item.daysDiff || getDaysDiff(item.starttime, item.estimatedendtime)}}天</text>
>预计{{
item.daysDiff || getDaysDiff(item.starttime, item.estimatedendtime)
}}天</text
>
</view> </view>
<view class="flex codefun-items-center gap-1"> <view class="flex codefun-items-center gap-1">
<image class="image_9" src="/src/static/images/person.svg" /> <image class="image_9" src="/src/static/images/person.svg" />
...@@ -371,15 +289,10 @@ return ...@@ -371,15 +289,10 @@ return
</view> </view>
</view> </view>
<view class="codefun-mt-8 codefun-flex-row codefun-justify-between codefun-items-center"> <view class="codefun-mt-8 codefun-flex-row codefun-justify-between codefun-items-center">
<view class="flex-center"> <view class="flex-center"> <fui-rate :score="item.urgentdegree" :size="36" />
<fui-rate :score="item.urgentdegree" :size="36" />
<text class="font_5 ml-1">{{ item.urgentdegree }}</text> <text class="font_5 ml-1">{{ item.urgentdegree }}</text>
</view> </view>
<view <view v-if="pageData.currentEmploymentId !== 2" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4" @click.stop="onQuoteClick(item)" >
v-if="pageData.currentEmploymentId !== 2"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
@click.stop="onQuoteClick(item)"
>
<text class="font_6 text_12">我想去</text> <text class="font_6 text_12">我想去</text>
</view> </view>
</view> </view>
...@@ -388,12 +301,10 @@ return ...@@ -388,12 +301,10 @@ return
</view> </view>
</view> </view>
</view> </view>
<!-- <image class="codefun-self-end image_7 image_12 mt-269" :src="pageData.bottomImage" /> -->
</view> </view>
<fui-fab position="right" distance="10" bottom="240" width="96" @click="handlePublish"> <fui-fab position="right" distance="10" bottom="240" width="96" @click="handlePublish">
<view class="text-white text-center"> <view class="text-white text-center">
<!-- <image src="/src/static/images/chanxiao/notepad.svg" style="width: 40rpx" mode="widthFix"></image> -->
<view class="fab-icon" /> <view class="fab-icon" />
<view style="font-size: 24rpx">发布</view> <view style="font-size: 24rpx">发布</view>
</view> </view>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论