Skip to content

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

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

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