Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 9fd89fae 作者: guolinhua
操作

feat:更新

上级 c7c8d68a
正在显示 包含 497 行增加 和 29 行删除
src/api/model/nongjifuwu.ts 0 → 100644
// 上传请求
import { otherHttp } from '/@/utils/http/axios'
enum Api {
farmMachineList = '/farmMachine/machineWork/app/list', // 农机服务列表列表
farmMachineDetails = '/farmMachine/machineWork/queryById', // 农机服务详情
farmMachineAdd = '/farmMachine/machineWork/app/register', // 发布农机服务
farmMachineEdit = '/farmMachine/machineWork/edit', // 编辑农机服务
}
/**
* @param params 请求参数
* @description: 农机服务列表列表
*/
export function farmMachineList(params = {}) {
return otherHttp.get({
url: Api.farmMachineList,
params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
}
/**
* @param params 请求参数
* @description: 农机服务详情
*/
export function farmMachineDetails(params = {}) {
return otherHttp.get({
url: Api.farmMachineDetails,
params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
}
/**
* @param params 请求参数
* @description: 发布农机服务
*/
export function farmMachineAdd(params = {}) {
return otherHttp.post({
url: Api.farmMachineAdd,
params,
})
}
/**
* @param params 请求参数
* @description: 编辑农机服务
*/
export function farmMachineEdit(params = {}) {
return otherHttp.post({
url: Api.farmMachineEdit,
params,
})
}
src/pages.json
......@@ -161,6 +161,7 @@
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"onReachBottomDistance": 50,
"app-plus": {
"titleNView": {}
}
......
src/pages/nongjifuwu/form.vue 0 → 100644
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/modules/user'
import { useGlobSetting } from '/@/hooks/setting'
import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
import * as UserInfoAPI from '@/api/model/userInfo'
import { areaTree, getTextByCode, getCodeByText } from '@/utils/areaData'
import { useDictStore } from '@/store/modules/dict'
const dictStore = useDictStore()
const userStore = useUserStore()
const globSetting = useGlobSetting()
onLoad((option) => {
// 获取数据详情
if (option.id) {
getDetails(option.id)
} else {
// 获取当前位置
getCurrentAddressInfo()
}
})
onShow(() => {
// 数据字典赋值
initDict()
})
const pageData = reactive({
loading: false,
show: {
time1: false,
time2: false,
area: false,
urgentdegree: false,
type: false,
},
options: {
area: [],
urgentdegree: [],
type: [],
},
form: {
id: '',
name: '',
content: '',
workers: 0,
price: 0,
typeText: '',
type: null,
area: '',
areaText: '',
province: '',
city: '',
country: '',
address: '',
urgentdegreeText: '',
urgentdegree: null,
starttime: '',
estimatedendtime: '',
picture: null,
},
rules: [
{
name: 'name',
rule: ['required'],
msg: ['请输入名称'],
},
{
name: 'workers',
rule: ['required'],
msg: ['请输入工作内容'],
},
{
name: 'workers',
rule: ['required'],
msg: ['请输入工人数量'],
},
{
name: 'price',
rule: ['required'],
msg: ['请输入价钱'],
},
{
name: 'type',
rule: ['required'],
msg: ['请选择类型'],
},
{
name: 'area',
rule: ['required'],
msg: ['请选择地区'],
},
{
name: 'address',
rule: ['required'],
msg: ['请选择详细地址'],
},
{
name: 'urgentdegree',
rule: ['required'],
msg: ['请选择紧急程度'],
},
{
name: 'starttime',
rule: ['required'],
msg: ['请选择开始时间'],
},
{
name: 'estimatedendtime',
rule: ['required'],
msg: ['请选择预计结束时间'],
},
{
name: 'picture',
rule: ['required'],
msg: ['请上传图片'],
},
],
})
const { show, options, form } = toRefs(pageData)
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,
text: item.text,
}
})
pageData.options.type = dictStore.getDictList['employment_type'].map((item) => {
return {
value: item.value,
text: item.text,
}
})
}
function getCurrentAddressInfo() {
if (!uni.getStorageSync('location')) return
const { lon, lat } = uni.getStorageSync('location')
UserInfoAPI.location({
lon,
lat,
}).then((res) => {
pageData.form.province = res.province
pageData.form.city = res.city
pageData.form.country = res.country
pageData.form.areaText = `${res.province}/${res.city}/${res.country}`
pageData.form.area =
getCodeByText(res.province) + ',' + getCodeByText(res.city) + ',' + getCodeByText(res.country)
})
}
function getDetails(id) {
pageData.loading = true
LinghuoyonggongAPI.employmentDetails({ id })
.then((res) => {
console.log(res)
pageData.form = res
let areaCopy = pageData.form.area.split(',')
pageData.form.areaText = `${getTextByCode(areaCopy[0])}/${getTextByCode(areaCopy[1])}/${getTextByCode(areaCopy[2])}`
pageData.form.urgentdegreeText = pageData.options.urgentdegree.find(
(item) => item.value == pageData.form.urgentdegree,
)?.text
pageData.form.typeText = pageData.options.type.find((item) => item.value == pageData.form.type)?.text
})
.finally(() => {
pageData.loading = false
})
}
function handleChangeTime1(e) {
pageData.form.starttime = e.result
pageData.show.time1 = false
}
function handleChangeTime2(e) {
pageData.form.estimatedendtime = e.result
pageData.show.time2 = false
}
function handleChangetype(e) {
pageData.form.type = e.value
pageData.form.typeText = e.text
pageData.show.type = false
}
function handleChangeUrgentdegree(e) {
pageData.form.urgentdegree = e.value
pageData.form.urgentdegreeText = e.text
pageData.show.urgentdegree = false
}
function handleChangeAddress(e) {
pageData.form.areaText = e.text.join('/')
pageData.form.area = e.value.join(',')
pageData.show.area = false
}
const toastRef = ref()
const uploadRef = ref()
// 文件上传
function handleUpload(file) {
uni.uploadFile({
url: globSetting.apiUrl + globSetting.urlPrefix + '/sys/common/upload', // 直接使用上传接口URL
filePath: file.tempFiles[0].path,
name: 'file',
formData: {
biz: 'temp',
},
header: {
'X-Access-Token': userStore.getToken,
},
success: (res) => {
if (res.statusCode === 200) {
const data = JSON.parse(res.data)
if (data.code === 200 || data.code === 0) {
toastRef.value.show({
type: 'success',
text: '上传成功',
})
pageData.form.picture = data.message // 保存返回的图片信息
}
}
},
fail: (err) => {
toastRef.value.show({
type: 'error',
text: '上传失败',
})
uploadRef.value.clearFiles()
pageData.form.picture = null
},
})
}
// 文件删除
function handleDelete(file) {
uploadRef.value.clearFiles()
pageData.form.picture = null
}
const formRef = ref()
function submit() {
formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
if (res.isPassed) {
LinghuoyonggongAPI.employmentAdd(pageData.form).then((res) => {
toastRef.value.show({
type: 'success',
text: '用工发布成功',
})
uni.switchTab({
url: '/pages/chanxiao/chanxiao',
})
})
}
})
}
</script>
<template>
<fui-form ref="formRef" :disabled="form.id ? true : false">
<fui-input required label="名称" placeholder="请输入名称" v-model="form.name"></fui-input>
<fui-input required label="工作内容" borderTop placeholder="请输入工作内容" v-model="form.content"></fui-input>
<fui-input required label="工人数量" borderTop placeholder="请输入工人数量" v-model="form.workers"></fui-input>
<fui-input required label="价钱" borderTop placeholder="请输入价钱" v-model="form.price"></fui-input>
<fui-input
required
label="类型"
placeholder="请选择类型"
v-model="form.typeText"
@click="show.type = true"
></fui-input>
<fui-input
required
label="地区"
placeholder="请选择地区"
v-model="form.areaText"
@click="show.area = true"
></fui-input>
<fui-input label="详细地址" placeholder="请输入详细地址" v-model="form.address"></fui-input>
<fui-input
required
label="紧急程度"
placeholder="请选择紧急程度"
v-model="form.urgentdegreeText"
@click="show.urgentdegree = true"
></fui-input>
<fui-input
required
label="开始时间"
borderTop
placeholder="请选择开始时间"
v-model="form.starttime"
@click="show.time1 = true"
></fui-input>
<fui-input
required
label="结束时间"
borderTop
placeholder="请选择结束时间"
v-model="form.estimatedendtime"
@click="show.time2 = true"
></fui-input>
<view class="bg-white" style="padding: 0.875rem 0.35rem">
<view class="mb-1 flex justify-start">
<text class="pr-1" style="color: #ff2b2b">*</text>
图片
</view>
<uni-file-picker
ref="uploadRef"
limit="1"
:auto-upload="false"
@select="handleUpload"
@delete="handleDelete"
></uni-file-picker>
</view>
<view class="fui-btn__box bg-white p-4" v-if="!form.id">
<fui-button text="发布用工" bold radius="96rpx" @click="submit"></fui-button>
</view>
</fui-form>
<fui-date-picker
:show="show.time1"
type="3"
@change="handleChangeTime1"
@cancel="show.time1 = false"
></fui-date-picker>
<fui-date-picker
:show="show.time2"
type="3"
@change="handleChangeTime2"
@cancel="show.time2 = false"
></fui-date-picker>
<fui-picker
:show="show.type"
:layer="1"
:linkage="true"
:options="options.type"
@change="handleChangetype"
@cancel="show.type = false"
></fui-picker>
<fui-picker
:show="show.urgentdegree"
:layer="1"
:linkage="true"
:options="options.urgentdegree"
@change="handleChangeUrgentdegree"
@cancel="show.urgentdegree = false"
></fui-picker>
<fui-picker
:show="show.area"
:options="options.area"
:linkage="true"
:layer="3"
@change="handleChangeAddress"
@cancel="show.area = false"
></fui-picker>
<fui-toast ref="toastRef"></fui-toast>
<fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)"></fui-loading>
</template>
<style lang="scss" scoped>
:deep(.fui-button) {
border-color: #ff9800 !important;
background: #ff9800 !important;
}
</style>
src/pages/nongjifuwu/nongjifuwu.vue
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh, onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
import * as NongjifuwuAPI from '@/api/model/nongjifuwu'
import Navigate from '@/utils/page/navigate'
onLoad((option) => {
pageData.search.serviceType = Number(option.type) || 1
})
onShow(() => {
pageData.search.pageNo = 1
pageData.farmMachineList = []
getFarmMachineList()
})
const pageData = reactive({
// 分类标签
......@@ -7,15 +20,39 @@
{ id: 1, name: '找农机' },
{ id: 2, name: '干农活' },
],
currentCategoryId: 1,
search: {
pageNo: 1,
pageSize: 10,
serviceType: 1,
},
farmMachineList: [],
total: 0,
})
function getFarmMachineList() {
NongjifuwuAPI.farmMachineList(pageData.search).then((res) => {
const { records, total } = res
pageData.farmMachineList = [...pageData.farmMachineList, ...records]
pageData.total = total
})
}
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
console.log('点击分类标签:', tab)
pageData.currentCategoryId = tab.id
pageData.search.serviceType = tab.id
// 在这里添加具体的分类标签点击逻辑
pageData.search.pageNo = 1
pageData.farmMachineList = []
getFarmMachineList()
}
onReachBottom(() => {
console.log('触底了')
if (pageData.total <= pageData.farmMachineList.length) return
pageData.search.pageNo++
getFarmMachineList()
})
</script>
<template>
......@@ -36,36 +73,40 @@
v-for="item in pageData.categoryTabs"
:key="item.id"
class="codefun-flex-col codefun-justify-start codefun-items-center text-50p"
:class="item.id === pageData.currentCategoryId ? 'text-wrapper' : ''"
:class="item.id === pageData.search.serviceType ? 'text-wrapper' : ''"
@click="onCategoryTabClick(item)"
>
<text class="font_2" :class="item.id === pageData.currentCategoryId ? 'text_4' : 'text_5'">{{
<text class="font_2" :class="item.id === pageData.search.serviceType ? 'text_4' : 'text_5'">{{
item.name
}}</text>
</view>
</view>
<view class="codefun-flex-col codefun-relative section_4">
<view class="codefun-flex-row group_6">
<image
class="codefun-shrink-0 codefun-self-center image_8"
src="https://ide.code.fun/api/image?token=6902c43a9520a30011f4e723&name=1f4e4111336d0f182201176d8c761a37.png"
/>
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-self-center group_4">
<text class="font text_6">大联合收割机</text>
<text class="font_3 text_7">服务范围：市区及周边20公里</text>
<view class="group_5">
<text class="font_6">¥</text>
<text class="font_4 text_8">60</text>
<text class="font_7">/亩</text>
<view class="codefun-flex-row group_6" v-for="item in pageData.farmMachineList" :key="item.id">
<image class="codefun-shrink-0 codefun-self-center image_8" :src="item.picture" />
<view style="width: 75%">
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-self-center">
<text class="font text_6">{{ item.name }}</text>
<text class="font_3 text_7 ellipsis" style="width: 100%; margin: 26rpx 0"
>服务范围：{{ item.scope }}{{ item.scope }}{{ item.scope }}{{ item.scope
}}{{ item.scope }}</text
>
</view>
<view class="flex justify-between" style="width: 100%">
<view class="group_5">
<text class="font_6">¥</text>
<text class="font_4 text_8">{{ item.price }}</text>
<text class="font_7">/亩</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2"
>
<text class="font_5">我有需要</text>
</view>
</view>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view"
>
<text class="font_5">我有需要</text>
</view>
</view>
<view class="codefun-flex-row group_6">
<!-- <view class="codefun-flex-row group_6">
<view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
<image
class="codefun-shrink-0 image_8"
......@@ -108,15 +149,15 @@
>
<text class="font_5">我有需要</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-relative section_5">
</view> -->
<!-- <view class="codefun-flex-col codefun-justify-start codefun-relative section_5">
<view class="codefun-shrink-0 section_6" />
<text class="font_8 text_15 pos_4">夏收专享：收割机服务8折优惠</text>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 pos_3">
<text class="font_2 text_16">立即预约</text>
</view>
</view>
<view class="codefun-flex-row group_10">
</view> -->
<!-- <view class="codefun-flex-row group_10">
<view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
<image
class="codefun-shrink-0 image_8"
......@@ -137,9 +178,9 @@
>
<text class="font_5">我有需要</text>
</view>
</view>
</view> -->
</view>
<view class="codefun-flex-col section_7">
<!-- <view class="codefun-flex-col section_7">
<view class="grid">
<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item">
<text class="font_3 text_19">农机类型</text>
......@@ -196,7 +237,7 @@
<text class="font_8 text_24">发布需求</text>
</view>
</view>
</view>
</view> -->
</view>
</view>
</template>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论