需求大厅 装备大厅 需求发布 等页面功能完善

This commit is contained in:
BianLzhaoMin 2024-12-19 18:25:30 +08:00
parent 2d2244ab55
commit eabd11b777
29 changed files with 1359 additions and 165 deletions

17
package-lock.json generated
View File

@ -23,8 +23,10 @@
"@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002", "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002", "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
"@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002", "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
"@vant/area-data": "^2.0.0",
"less": "^4.2.1", "less": "^4.2.1",
"less-loader": "^12.2.0", "less-loader": "^12.2.0",
"moment": "^2.30.1",
"pinia": "^2.3.0", "pinia": "^2.3.0",
"pinia-plugin-persistedstate": "^4.1.3", "pinia-plugin-persistedstate": "^4.1.3",
"vant": "^4.9.10", "vant": "^4.9.10",
@ -4867,6 +4869,12 @@
"license": "MIT", "license": "MIT",
"peer": true "peer": true
}, },
"node_modules/@vant/area-data": {
"version": "2.0.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/@vant/area-data/-/area-data-2.0.0.tgz",
"integrity": "sha512-zgP4AA8z09S9QTNgVCCHo9cHjcybrv22RJDYPjuCkecn4SB98T5EoPQh2TwqbQXmUhbaOGgiZGy3OUaUxnY7qg==",
"license": "MIT"
},
"node_modules/@vant/auto-import-resolver": { "node_modules/@vant/auto-import-resolver": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/@vant/auto-import-resolver/-/auto-import-resolver-1.2.1.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/@vant/auto-import-resolver/-/auto-import-resolver-1.2.1.tgz",
@ -9820,6 +9828,15 @@
"integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==", "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"license": "MIT",
"engines": {
"node": "*"
}
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/ms/-/ms-2.1.3.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/ms/-/ms-2.1.3.tgz",

View File

@ -57,8 +57,10 @@
"@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002", "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
"@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002", "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
"@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002", "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
"@vant/area-data": "^2.0.0",
"less": "^4.2.1", "less": "^4.2.1",
"less-loader": "^12.2.0", "less-loader": "^12.2.0",
"moment": "^2.30.1",
"pinia": "^2.3.0", "pinia": "^2.3.0",
"pinia-plugin-persistedstate": "^4.1.3", "pinia-plugin-persistedstate": "^4.1.3",
"vant": "^4.9.10", "vant": "^4.9.10",

View File

@ -32,8 +32,11 @@ scroll-view {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.van-nav-bar__content { :deep(.van-nav-bar__content) {
background-color: $uni-navbar-bg-color; background-color: #75aea4;
.van-nav-bar__text {
color: #333;
}
} }
.ellipsis { .ellipsis {

View File

@ -0,0 +1,23 @@
<template>
<van-nav-bar :title="navTitle" left-text="返回" left-arrow @click-left="onClickLeft" />
</template>
<script setup>
import { ref } from 'vue'
const onClickLeft = () => {
uni.navigateBack()
}
defineProps({
navTitle: {
type: String,
default: () => '',
},
})
</script>
<style lang="scss" scoped>
:deep(.van-nav-bar .van-icon),
:deep(.van-nav-bar__title) {
color: #333 !important;
}
</style>

View File

@ -0,0 +1,115 @@
<template>
<!-- 搜索框 -->
<view class="search-ipt">
<view
class="check-type"
@click="
() => {
isSelectShow = !isSelectShow
}
"
>
{{ activeTypeName }}
<van-icon name="arrow-down" />
<view class="check-item" v-if="isSelectShow">
<view
@click.stop="
() => {
activeTypeName = '机具'
isSelectShow = !isSelectShow
}
"
>
机具
</view>
<view
@click.stop="
() => {
activeTypeName = '需求'
isSelectShow = !isSelectShow
}
"
>
需求
</view>
</view>
</view>
<van-field v-model="searchModelValue" />
<van-button square type="primary" icon="search" @click="onSearchBtn" />
</view>
</template>
<script setup>
import { ref } from 'vue'
const isSelectShow = ref(false)
const activeTypeName = ref('机具')
const searchModelValue = ref('')
const emits = defineEmits(['onSearchByType'])
const onSearchBtn = () => {
emits('onSearchByType', searchModelValue.value, activeTypeName.value === '机具' ? 1 : 2)
}
</script>
<style lang="scss" scoped>
.search-ipt {
display: flex;
align-items: center;
.check-type {
position: relative;
height: 36px;
width: 100px;
display: flex;
align-items: center;
justify-content: space-around;
background-color: #fff;
border: 1px solid #22ab9b;
border-right: none;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
.check-item {
position: absolute;
bottom: 0;
width: 70px;
left: 0;
transform: translateY(100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.5s;
background-color: #fff;
z-index: 9;
view {
padding: 6px;
font-size: 13px;
}
}
.check-item view:hover {
background-color: #00a288;
color: #fff;
}
}
.van-field {
padding: 0;
height: 36px;
line-height: 36px;
border: 1px solid #22ab9b;
// border-top-left-radius: 18px;
// border-bottom-left-radius: 18px;
padding-left: 18px;
border-left: none;
}
.van-button {
height: 36px;
width: 70px;
line-height: 36px;
background: #22ab9b;
border: none;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
font-size: 18px;
}
}
</style>

View File

@ -0,0 +1,29 @@
<template>
<!-- 标题 -->
<view class="title-tip">
<view></view>
<view> 订单数据 </view>
</view>
</template>
<script setup>
import { ref } from 'vue'
</script>
<style lang="scss" scoped>
.title-tip {
display: flex;
align-items: center;
padding: 8px 0;
}
.title-tip view:first-child {
width: 5px;
height: 18px;
background-color: $el-color-primary;
margin-right: 6px;
}
.title-tip view {
color: $el-color-primary;
}
</style>

View File

@ -7,16 +7,25 @@
"navigationBarTitleText": "登录" "navigationBarTitleText": "登录"
} }
}, },
//
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "首页" "navigationStyle": "custom"
} }
}, },
//
{ {
"path": "pages/lease-demand/index", "path": "pages/lease-demand/index",
"style": { "style": {
"navigationBarTitleText": "租赁需求" "navigationStyle": "custom"
}
},
//
{
"path": "pages/demand-release/index",
"style": {
"navigationStyle": "custom"
} }
}, },
{ {
@ -48,42 +57,56 @@
"style": { "style": {
"navigationBarTitleText": "订单结算" "navigationBarTitleText": "订单结算"
} }
},
//
{
"path": "pages/goods-list/index",
"style": {
"navigationStyle": "custom"
}
} }
], ],
// "tabBar": { "tabBar": {
// "color": "#2c2c2c", "color": "#2c2c2c",
// "selectedColor": "#00ad9d", "selectedColor": "#00ad9d",
// "borderStyle": "black", "borderStyle": "black",
// "backgroundColor": "#FFFFFF", "backgroundColor": "#FFFFFF",
// "iconWidth": "24px", "iconWidth": "24px",
// "list": [ "list": [
// { {
// "pagePath": "pages/index/index", "pagePath": "pages/index/index",
// "text": "首页" "text": "首页",
// }, "iconPath": "static/tab-bar/home_sel.png"
// { },
// "pagePath": "pages/lease-demand/index", {
// "text": "租赁需求" "pagePath": "pages/lease-demand/index",
// }, "text": "租赁需求",
// { "iconPath": "static/tab-bar/lease.png",
// "pagePath": "pages/cart/index", "selectedIconPath": "static/tab-bar/lease_sel.png"
// "text": "预约车" },
// }, {
// { "pagePath": "pages/cart/index",
// "pagePath": "pages/message/index", "text": "预约车",
// "text": "消息" "iconPath": "static/tab-bar/car.png",
// }, "visible": false
// { },
// "pagePath": "pages/my/index", {
// "text": "我的" "pagePath": "pages/message/index",
// } "text": "消息",
// ] "iconPath": "static/tab-bar/message.png"
// }, },
{
"pagePath": "pages/my/index",
"text": "我的",
"iconPath": "static/tab-bar/user.png",
"selectedIconPath": "static/tab-bar/user_sel.png"
}
]
},
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "#fff", "navigationBarTextStyle": "#fff",
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#00a288", "navigationBarBackgroundColor": "#00a288",
"backgroundColor": "#00a288", "backgroundColor": "#00a288"
"navigationStyle": "custom"
} }
} }

View File

@ -0,0 +1,312 @@
<template>
<!-- 需求发布 -->
<view class="h5-container">
<Navbar :navTitle="`需求发布`" />
<view class="demand-release h5-content">
<view class="demand-bg"></view>
<!-- <van-image height="0.8rem" width="4rem" :src="noticeImg" /> -->
</view>
<scroll-view scroll-y class="scroll-item">
<van-form>
<van-cell-group inset>
<van-field
v-model="demandForm.leaseName"
placeholder="请输入需求名称"
label="需求名称"
:rules="[{ message: '请输入需求名称' }]"
/>
<van-field
v-model="areaName"
is-link
readonly
name="area"
label="项目所在地"
placeholder="点击选择省市区"
:rules="[{ message: '请选择省市区' }]"
@click="showArea = true"
/>
<van-field
v-model="demandForm.address"
name="validatorMessage"
placeholder="请输入详细地址"
label="详细地址"
:rules="[{ message: '请输入详细地址' }]"
/>
<van-field
v-model="demandForm.person"
placeholder="请输入联系人"
label="联系人"
:rules="[{ message: '请输入正确内容' }]"
/>
<van-field
v-model="demandForm.personPhone"
placeholder="请输入联系电话"
label="联系电话"
:rules="[{ message: '请输入正确内容' }]"
/>
<van-field
v-model="demandForm.leaseStartTime"
is-link
readonly
name="datePicker"
label="租赁开始日期"
placeholder="点击选择时间"
@click="onOpenTimePopup(1)"
/>
<van-field
v-model="demandForm.leaseEndTime"
is-link
readonly
name="datePicker"
label="租赁结束日期"
placeholder="点击选择时间"
@click="onOpenTimePopup(2)"
/>
<van-field
v-model="demandForm.endTime"
is-link
readonly
name="datePicker"
label="需求截止日期"
placeholder="点击选择时间"
@click="onOpenTimePopup(3)"
/>
<van-field
v-model="demandForm.description"
placeholder="请输入需求描述"
label="需求描述"
:rules="[{ message: '请输入正确内容' }]"
/>
</van-cell-group>
</van-form>
<van-form style="margin: 10px 0">
<van-cell-group inset>
<van-button icon="plus" type="primary" size="mini">添加需求描述</van-button>
</van-cell-group>
</van-form>
<van-form v-for="(item, index) in demandDetails" :key="item.newId">
<van-cell-group inset>
<van-field
v-model="item.typeName"
is-link
readonly
label="地区"
placeholder="请选择装备类目"
@click="onOpenPopup(index)"
/>
<van-field label="预估数量">
<template #input>
<van-stepper v-model="item.leaseNum" />
</template>
</van-field>
<van-field
v-model="item.description"
name="密码"
label="装备描述"
placeholder="请输入装备描述"
:rules="[{ required: true, message: '请填写装备描述' }]"
/>
<van-field name="uploader" label="参考图片/样式">
<template #input>
<van-uploader v-model="item.fileInfoList" />
</template>
</van-field>
</van-cell-group>
</van-form>
<van-form style="margin: 10px 0">
<van-cell-group inset>
<van-button
type="primary"
size="small"
style="width: 100%"
@click="onSubmitDemand"
>
提交
</van-button>
</van-cell-group>
</van-form>
</scroll-view>
<van-popup v-model:show="showArea" destroy-on-close position="bottom">
<van-area
:area-list="areaList"
v-model="areaListValue"
@confirm="onConfirmArea"
@cancel="showArea = false"
/>
</van-popup>
<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
<van-date-picker
v-model="timeValue"
@confirm="onConfirmTime"
@cancel="showPicker = false"
/>
</van-popup>
<van-popup v-model:show="showEquipmentType" round position="bottom">
<van-cascader
v-model="equipmentTypeValue"
title="请选择装备类目"
:options="equipmentTypeList"
:field-names="fieldNames"
@close="onCloseEquipmentType"
@change="onChangeEquipmentType"
/>
</van-popup>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { areaList } from '@vant/area-data'
import { getEquipmentTypeAPI } from '@/services/common/index.js'
import { addLeaseInfoAPI } from '@/services/demand/index.js'
import Navbar from '@/components/Navbar/index'
import { onLoad } from '@dcloudio/uni-app'
const showArea = ref(false)
const showPicker = ref(false)
const showEquipmentType = ref(false)
const equipmentTypeList = ref([])
const equipmentTypeValue = ref()
const equipmentOpenIndex = ref(0)
const areaListValue = ref()
const areaName = ref('')
const timeType = ref(0)
const timeValue = ref([])
const fieldNames = ref({
text: 'name',
value: 'id',
})
const demandForm = reactive({
leaseName: '',
person: '',
personPhone: '',
leaseStartTime: '',
leaseEndTime: '',
endTime: '',
description: '',
isSubmit: true,
areaCode: '',
cityCode: '',
provinceCode: '',
address: '',
detailsList: [],
})
const demandDetails = ref([
{
newId: Date.now(),
typeIds: [],
typeId: '',
typeName: '',
leaseNum: 1,
fileInfoList: [],
description: '',
},
])
const getEquipmentTypeData = async () => {
const { data: res } = await getEquipmentTypeAPI()
equipmentTypeList.value = res
}
const onConfirm = () => {}
//
const onOpenTimePopup = (type) => {
timeType.value = type
showPicker.value = true
}
//
const onOpenPopup = (index) => {
equipmentOpenIndex.value = index
showEquipmentType.value = true
}
const onChangeEquipmentType = (value) => {
demandDetails.value[equipmentOpenIndex.value].typeName =
value.selectedOptions[value.selectedOptions.length - 1].name
demandDetails.value[equipmentOpenIndex.value].typeId =
value.selectedOptions[value.selectedOptions.length - 1].id
demandDetails.value[equipmentOpenIndex.value].typeIds = []
demandDetails.value[equipmentOpenIndex.value].typeIds = value.selectedOptions.map((e) => e.id)
}
const onCloseEquipmentType = () => {
showEquipmentType.value = false
}
//
const onSubmitDemand = async () => {
demandForm.detailsList = demandDetails.value
const res = await addLeaseInfoAPI(demandForm)
if (res.code === 200) {
showSuccessToast('提交成功')
setTimeout(() => {
uni.navigateBack()
}, 500)
}
}
//
const onConfirmTime = (val) => {
const [y, m, d] = val.selectedValues
if (timeType.value === 1) {
demandForm.leaseStartTime = `${y}-${m}-${d} 00:00:00`
}
if (timeType.value === 2) {
demandForm.leaseEndTime = `${y}-${m}-${d} 23:59:59`
}
if (timeType.value === 3) {
demandForm.endTime = `${y}-${m}-${d} 23:59:59`
}
showPicker.value = false
}
//
const onConfirmArea = (val) => {
areaName.value = ''
val.selectedOptions.forEach((e) => {
areaName.value = areaName.value + '/' + e.text
})
areaName.value = areaName.value.slice(1)
const [provinceCode, cityCode, areaCode] = val.selectedValues
Object.assign(demandForm, {
provinceCode,
cityCode,
areaCode,
})
showArea.value = false
}
onLoad(() => {
getEquipmentTypeData()
})
</script>
<style lang="scss" scoped>
:deep(.van-nav-bar .van-icon) {
color: #333 !important;
}
.demand-release {
background-color: #bde2d2;
.demand-bg {
width: 100%;
height: 120px;
background: url('@/static/demand/header_bg.png') no-repeat;
background-size: 100% 100%;
}
}
.scroll-item {
margin-top: 10px;
padding-bottom: 10px;
}
</style>

View File

@ -89,7 +89,7 @@ const getDeviceDetailsData = async () => {
console.log(res, '装备详情') console.log(res, '装备详情')
} }
const onRentNow = () => { const onRentNow = () => {
uni.navigateTo({ url: '/pages/order/index' }) uni.navigateTo({ url: `/pages/order/index?id=${deviceInfo.value.maId}` })
} }
onLoad(() => { onLoad(() => {

View File

@ -0,0 +1,137 @@
<template>
<!-- 装备共享大厅 -->
<view class="h5-container">
<van-nav-bar title="装备共享大厅" left-text="返回" left-arrow @click-left="onClickLeft" />
<!-- <view class="search-index flex-row-start">
<van-field placeholder="搜索" />
<van-button square type="primary" icon="search" />
</view> -->
<view class="h5-content" style="padding: 20px">
<SearchIpt @onSearchByType="onSearchByType" />
</view>
<view class="goods-items">
<view class="filter-box">
<view class="flex-row-start">
<view>
使用年限
<van-icon name="sort" />
</view>
<view>
租金
<van-icon name="sort" />
</view>
<view>
上架时间
<van-icon name="sort" />
</view>
</view>
</view>
</view>
<scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower">
<van-grid :column-num="2" :border="false">
<van-grid-item
v-for="(item, index) in deviceList"
:key="index"
@click="onViewGoodsDetails(item)"
>
<GoodsItems :goodsInfo="item" />
</van-grid-item>
</van-grid>
</scroll-view>
</view>
</template>
<script setup>
import GoodsItems from '@/components/GoodsItems'
import SearchIpt from '@/components/SearchIpt/index'
import { getDeviceListAPI } from '@/services/index/index.js'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const active = ref('')
const deviceList = ref([])
const onScrollTolower = () => {
console.log('滚动触底')
}
const getDeviceListData = async () => {
const { data: result } = await getDeviceListAPI({})
deviceList.value = result.rows
console.log(res, '装备列表')
}
const onViewGoodsDetails = (item) => {
uni.navigateTo({ url: `/pages/goods-details/index?id=${item.maId}` })
}
const onSearchByType = (value, type) => {
/**
* @type 1 查询机具 2 查询需求
* @value 搜索框值
*/
if (type === 2) {
uni.switchTab({
url: `/pages/lease-demand/index?value=${value}`,
})
} else {
getDeviceListData()
}
}
const onClickLeft = () => {
history.back()
}
onLoad(() => {
getDeviceListData()
})
</script>
<style lang="scss" scoped>
.search-index {
height: 80px;
justify-content: center;
.van-field {
width: 65%;
padding: 0;
height: 36px;
line-height: 36px;
border: 1px solid #22ab9b;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
padding-left: 18px;
}
.van-button {
height: 36px;
width: 70px;
line-height: 36px;
background: #22ab9b;
border: none;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
font-size: 18px;
}
}
.goods-items {
padding: 10px;
box-sizing: border-box;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: $uni-bg-color;
}
.flex-row-start view {
margin-right: 6px;
}
.van-tabbar {
height: 70px;
}
.scroll-item {
background-color: $uni-bg-color;
.van-grid-item {
border: none;
}
}
</style>

View File

@ -0,0 +1,115 @@
<template>
<!-- 首页 -->
<view class="h5-container">
<van-nav-bar title="机械化装备平台" />
<view class="search-index flex-row-start">
<van-field placeholder="搜索" />
<van-button square type="primary" icon="search" />
</view>
<view class="goods-items">
<view class="filter-box">
<view class="flex-row-start">
<view>
使用年限
<van-icon name="sort" />
</view>
<view>
租金
<van-icon name="sort" />
</view>
<view>
上架时间
<van-icon name="sort" />
</view>
</view>
</view>
</view>
<scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower">
<van-grid :column-num="2" :border="false">
<van-grid-item
v-for="(item, index) in deviceList"
:key="index"
@click="onViewGoodsDetails(item)"
>
<GoodsItems :goodsInfo="item" />
</van-grid-item>
</van-grid>
</scroll-view>
</view>
</template>
<script setup>
import GoodsItems from '@/components/GoodsItems'
import { getDeviceListAPI } from '@/services/index/index.js'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const active = ref('')
const deviceList = ref([])
const onScrollTolower = () => {
console.log('滚动触底')
}
const getDeviceListData = async () => {
const { data: result } = await getDeviceListAPI({})
deviceList.value = result.rows
console.log(res, '装备列表')
}
const onViewGoodsDetails = (item) => {
uni.navigateTo({ url: `/pages/goods-details/index?id=${item.maId}` })
}
onLoad(() => {
getDeviceListData()
})
</script>
<style lang="scss" scoped>
.search-index {
height: 80px;
justify-content: center;
.van-field {
width: 65%;
padding: 0;
height: 36px;
line-height: 36px;
border: 1px solid #22ab9b;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
padding-left: 18px;
}
.van-button {
height: 36px;
width: 70px;
line-height: 36px;
background: #22ab9b;
border: none;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
font-size: 18px;
}
}
.goods-items {
padding: 10px;
box-sizing: border-box;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: $uni-bg-color;
}
.flex-row-start view {
margin-right: 6px;
}
.van-tabbar {
height: 70px;
}
.scroll-item {
background-color: $uni-bg-color;
.van-grid-item {
border: none;
}
}
</style>

View File

@ -1,126 +1,178 @@
<template> <template>
<!-- 首页 --> <!-- 首页 -->
<view class="h5-container"> <view class="index-container h5-container">
<van-nav-bar title="机械化装备平台" /> <view class="index-header">
<view class="search-index flex-row-start"> <view class="flex-row-start">
<van-field placeholder="搜索" /> <van-icon name="manager" style="margin-right: 6px" />
<van-button square type="primary" icon="search" /> <van-popover
</view> size="small"
:show-arrow="false"
:actions="userActions"
v-model:show="showPopover"
@select="onUserSelect"
>
<template #reference>
<text> {{ activeUser }} </text>
<van-icon name="arrow-down" />
</template>
</van-popover>
</view>
<view class="goods-items"> <view class="user-name"> 您好安徽送变电公司 / 李世民 </view>
<view class="filter-box"> <view class="notice-box">
<view class="flex-row-start"> <van-image height="0.8rem" width="4rem" :src="noticeImg" />
<view> <view>
使用年限 <van-notice-bar color="#00a288" background="transparent" left-icon="volume-o">
<van-icon name="sort" /> 大鹏一日同风起扶摇直上九万里
</view> </van-notice-bar>
<view>
租金
<van-icon name="sort" />
</view>
<view>
上架时间
<van-icon name="sort" />
</view>
</view> </view>
</view> </view>
<view class="search-ipt">
<!-- <van-field placeholder="搜索" /> -->
<SearchIpt @onSearchByType="onSearchByType" />
</view>
</view> </view>
<scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower"> <view class="order-data">
<van-grid :column-num="2" :border="false"> <TitleTip />
<van-grid-item
v-for="(item, index) in deviceList" <van-grid :column-num="3">
:key="index" <van-grid-item v-for="value in 6" :key="value">
@click="onViewGoodsDetails(item)" <text> 我的订单 </text>
> <text>我的订单</text>
<GoodsItems :goodsInfo="item" /> <text>30</text>
</van-grid-item> </van-grid-item>
</van-grid> </van-grid>
</scroll-view> </view>
<!-- <van-empty description="首页欢迎您" /> --> <view class="to-do-list h5-content">
<van-image height="0.8rem" width="4rem" :src="toDoList" />
<van-tabbar v-model="active"> <van-list
<van-tabbar-item icon="home-o">首页</van-tabbar-item> v-model:loading="loading"
<van-tabbar-item icon="search">租赁</van-tabbar-item> :finished="finished"
<van-tabbar-item icon="friends-o">消息</van-tabbar-item> finished-text="没有更多了"
<van-tabbar-item icon="setting-o">我的</van-tabbar-item> @load="onLoad"
</van-tabbar> >
<van-cell v-for="item in 4" :key="item">
<view class="items-info">
您有一条费用待确认
<text>查看更多</text>
</view>
</van-cell>
</van-list>
</view>
</view> </view>
</template> </template>
<script setup> <script setup>
import GoodsItems from '@/components/GoodsItems'
import { getDeviceListAPI } from '@/services/index/index.js'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue' import { ref } from 'vue'
const active = ref('') import noticeImg from '@/static/index/notice.png'
const deviceList = ref([]) import toDoList from '@/static/index/to_do_list.png'
const onScrollTolower = () => { import SearchIpt from '@/components/SearchIpt/index'
console.log('滚动触底') import TitleTip from '@/components/TitleTip/index'
import { onLoad } from '@dcloudio/uni-app'
const showPopover = ref(false)
const activeUser = ref('出租方')
const loading = ref(false)
const finished = ref(false)
const userActions = ref([
{ text: '出租方', userType: 1 },
{ text: '承租方', userType: 2 },
])
const onUserSelect = (e) => {
activeUser.value = e.text
uni.setTabBarItem({
index: 2,
visible: e.userType == 1 ? false : true,
})
} }
const getDeviceListData = async () => {
const { data: result } = await getDeviceListAPI({}) const onSearchByType = (value, type) => {
deviceList.value = result.rows /**
console.log(res, '装备列表') * @type 1 查询机具 2 查询需求
} * @value 搜索框值
const onViewGoodsDetails = (item) => { */
uni.navigateTo({ url: `/pages/goods-details/index?id=${item.maId}` }) if (type === 2) {
uni.switchTab({
url: `/pages/lease-demand/index?value=${value}`,
})
} else {
uni.navigateTo({
url: '/pages/goods-list/index',
})
}
} }
onLoad(() => { onLoad(() => {
getDeviceListData() finished.value = true
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search-index { .index-container {
height: 80px; .index-header {
justify-content: center; padding: 5px 20px 30px;
box-sizing: border-box;
background: linear-gradient(to bottom, #6caf97, #78b0a9, #b8d0cf);
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
.van-field { .user-name {
width: 65%; text-align: center;
padding: 0; padding: 16px 0;
height: 36px; font-size: 16px;
line-height: 36px; }
border: 1px solid #22ab9b;
border-top-left-radius: 18px; .notice-box {
border-bottom-left-radius: 18px; display: flex;
padding-left: 18px; align-items: center;
padding: 0 4px;
background-color: #bcd7d4;
border-radius: 6px;
view {
flex: 1;
}
.van-notice-bar__left-icon,
.van-notice-bar__right-icon {
color: #df3939;
}
}
.search-ipt {
margin-top: 10px;
.van-field {
width: 100%;
padding: 0;
height: 30px;
line-height: 30px;
border: 1px solid #22ab9b;
background-color: #fff;
border-radius: 18px;
padding-left: 18px;
}
}
} }
.van-button { .order-data {
height: 36px; padding: 0 20px;
width: 70px; box-sizing: border-box;
line-height: 36px;
background: #22ab9b;
border: none;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
font-size: 18px;
} }
}
.goods-items { .to-do-list {
padding: 10px; margin-top: 10px;
box-sizing: border-box;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: $uni-bg-color;
}
.flex-row-start view { .items-info {
margin-right: 6px; display: flex;
} justify-content: space-between;
font-size: 12px;
.van-tabbar { color: #333;
height: 70px; & text:first-child {
} color: #0292f9;
.scroll-item { }
background-color: $uni-bg-color; }
padding-bottom: 70px;
.van-grid-item {
border: none;
} }
} }
</style> </style>

View File

@ -1,18 +1,249 @@
<template> <template>
<!-- 租赁需求 --> <!-- 需求共享大厅 -->
<view class="content"> <view class="h5-container">
<van-empty description="租赁需求欢迎您" /> <van-nav-bar title="需求共享大厅" left-text="返回" left-arrow @click-left="onClickLeft" />
<view class="demand-header">
<view>
<SearchIpt @onSearchByType="onSearchByType" />
</view>
<navigator class="demand-release" url="/pages/demand-release/index">
<view>
<van-highlight
:keywords="keywords"
source-string="需求发布"
highlight-class="custom-class"
/>
</view>
<view>发布机具需求信息</view>
</navigator>
</view>
<view class="goods-items h5-content">
<view class="filter-box">
<view>
使用年限
<van-icon name="sort" />
</view>
<view>
租金
<van-icon name="sort" />
</view>
<view>
上架时间
<van-icon name="sort" />
</view>
</view>
</view>
<scroll-view scroll-y class="scroll-item h5-content" @scrolltolower="onScrollTolower">
<van-grid :column-num="1" :gutter="4">
<van-grid-item v-for="d in leaseDemandLis" :key="d.id">
<view class="demand-items">
<view style="font-weight: bold; font-size: 16px">
{{ d.leaseName }}
</view>
<view class="count-down">
剩余
<van-count-down :time="d.countDownTime">
<template #default="timeData">
<text class="block">
{{
timeData.days > 10 ? timeData.days : '0' + timeData.days
}}
</text>
<text class="colon"></text>
<text class="block">
{{
timeData.hours > 10
? timeData.hours
: '0' + timeData.hours
}}
</text>
<text class="colon"></text>
<text class="block"
>{{
timeData.minutes > 10
? timeData.minutes
: '0' + timeData.minutes
}}
</text>
<text class="colon"></text>
</template>
</van-count-down>
</view>
</view>
<view class="demand-items">
<view> 装备类目 </view>
</view>
<view class="demand-items">
<view> 租赁公司 {{ d.companyName }} </view>
<view> 联系电话 {{ d.personPhone }} </view>
</view>
<view class="demand-items">
<view> 联系人 {{ d.person }} </view>
<view> 预估租期() {{ d.leaseDay }} </view>
</view>
<view class="demand-items">
<view> 预估数量 {{ d.leaseTotalNum }} </view>
<view> 截止时间 {{ d.endTime }} </view>
</view>
<view class="demand-items">
<view style="text-align: right">
<van-button type="success" size="mini">需求详情</van-button>
<van-button
type="primary"
size="mini"
class="primary-lease"
@click="onReceivingOrders(d.id)"
>
接单
</van-button>
</view>
</view>
</van-grid-item>
</van-grid>
</scroll-view>
</view> </view>
</template> </template>
<script setup> <script setup>
import SearchIpt from '@/components/SearchIpt/index'
import { getLeaseDemandListAPI } from '@/services/demand/index.js'
import { acceptLeaseDemandOrderAPI } from '@/services/demand/index.js'
import { onLoad } from '@dcloudio/uni-app'
import moment from 'moment'
import { ref } from 'vue' import { ref } from 'vue'
const keywords = ref('发布')
const leaseDemandLis = ref([])
const countDownTime = ref(30 * 60 * 60 * 1000)
const onScrollTolower = () => {
console.log('滚动触底')
}
const onSearchByType = (value, type) => {
/**
* @type 1 查询机具 2 查询需求
* @value 搜索框值
*/
if (type === 2) {
uni.switchTab({
url: `/pages/lease-demand/index?value=${value}`,
})
} else {
getDeviceListData()
}
}
const onClickLeft = () => {
uni.navigateBack()
}
//
const getLeaseDemandListData = async () => {
const { data: res } = await getLeaseDemandListAPI({})
leaseDemandLis.value = res.rows
const nowTime = moment()
leaseDemandLis.value.forEach((e) => {
e.countDownTime =
moment.duration(moment(e.endTime, 'YYYY-MM-DD HH:mm:ss').diff(nowTime)).asSeconds() *
1000
})
}
const onReceivingOrders = (id) => {
uni.showModal({
title: '温馨提示',
content: '是否确认接单?',
success: async () => {
const res = await acceptLeaseDemandOrderAPI({ id })
if (res.code === 200) {
showSuccessToast('接单成功')
getLeaseDemandListData()
}
},
})
}
onLoad(() => {
getLeaseDemandListData()
})
</script> </script>
<style> <style lang="scss" scoped>
.content { .demand-header {
width: 100%; padding: 5px 20px 15px;
height: 100%; box-sizing: border-box;
text-align: center; background: linear-gradient(to bottom, #6caf97, #78b0a9, #b8d0cf);
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.demand-release {
padding: 15px 6px;
margin-bottom: 10px;
margin-top: 15px;
background-color: #fff;
border-radius: 6px;
background: linear-gradient(to left, #73cabe, #a2dcd5, #ccebe8);
view {
font-style: italic;
font-size: 13px;
letter-spacing: 2px;
}
& view:first-child {
margin-bottom: 6px;
font-size: 15px;
font-weight: bold;
}
}
.filter-box {
display: flex;
align-items: center;
}
.scroll-item {
// background-color: $uni-bg-color;
:deep(.van-grid-item__content) {
background-color: #f6fbfd;
border-radius: 6px;
}
.demand-items {
width: 100%;
padding: 2px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #333;
view {
flex: 1;
}
.count-down {
display: flex;
align-items: center;
color: #ee0a24;
font-size: 13px;
.van-count-down {
color: #ee0a24;
letter-spacing: 1px;
font-size: 13px;
}
}
}
}
:deep(.van-highlight__tag) {
color: $el-color-primary;
}
:deep(.van-nav-bar .van-icon),
:deep(.van-nav-bar__title) {
color: #333;
} }
</style> </style>

View File

@ -56,7 +56,8 @@ const onSubmitLogin = async () => {
if (userResult.code === 200) { if (userResult.code === 200) {
showToast('登录成功') showToast('登录成功')
setTimeout(() => { setTimeout(() => {
uni.navigateTo({ url: '/pages/index/index' }) // uni.navigateTo({ url: '/pages/index/index' })
uni.switchTab({ url: '/pages/index/index' })
}, 500) }, 500)
} }
} }

View File

@ -1,8 +1,5 @@
<template> <template>
<!-- 消息 --> <!-- 消息 -->
<view class="content">
<van-empty description="消息欢迎您" />
</view>
</template> </template>
<script setup> <script setup>

View File

@ -7,52 +7,77 @@
<text> (1) </text> <text> (1) </text>
</view> </view>
<view class="order-set"> <view class="order-set" v-for="(item, index) in orderList" :key="index">
<van-row> <van-row>
<van-col span="13"> <van-col span="13">
<view class="company-box"> <view class="company-box">
<van-image fit="cover" width="1.5rem" height="1.2rem" :src="companyImg" /> <van-image fit="cover" width="1.5rem" height="1.2rem" :src="companyImg" />
<view class="company-name"> <view class="company-name">
<view> 安徽省合肥市 </view> <view> {{ item.companyName }} </view>
<van-image fit="cover" height="0.5rem" :src="companyBg" /> <van-image fit="cover" height="0.5rem" :src="companyBg" />
</view> </view>
</view> </view>
</van-col> </van-col>
<van-col span="11" class="contacts"> 联系人李世民 13656235623 </van-col> <van-col span="11" class="contacts">
联系人 {{ item.person }} {{ item.personPhone }}
</van-col>
</van-row> </van-row>
<van-row> <van-row>
<van-col span="18"> <van-col span="18">
<view class="items-info"> <view class="items-info">
<van-image fit="cover" height="4rem" width="4rem" :src="companyBg" /> <van-image fit="cover" height="4rem" width="4rem" :src="item.picUrl" />
<view class="info"> <view class="info">
<view>牵张机</view> <view style="color: #000">{{ item.deviceName }}</view>
<view>装备编号</view> <view>装备编号{{ item.code }}</view>
<view>装备型号</view> <view>装备型号{{ item.typeName }}</view>
<view> <view>
租赁金额 租赁金额
<text> 2000/ </text> <text style="color: var(--van-submit-bar-price-color)">
{{ item.dayLeasePrice }}/
</text>
</view> </view>
<view class="items-info"> <view class="items-info">
开始日期 {{ startTime ? startTime : '开始日期' }}
<van-image fit="cover" width="1rem" height="1rem" :src="dateIcon" /> <van-image
结束日期 fit="cover"
<van-image fit="cover" width="1rem" height="1rem" :src="dateIcon" /> width="1rem"
height="1rem"
:src="dateIcon"
@click="onSelectTime(1)"
/>
{{ endTime ? endTime : '结束日期' }}
<van-image
fit="cover"
width="1rem"
height="1rem"
:src="dateIcon"
@click="onSelectTime(2)"
/>
</view>
<view>
租赁天数
{{ item.days }}
</view> </view>
</view> </view>
</view> </view>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<van-stepper button-size="16" /> <van-stepper button-size="16" :max="item.deviceCount" v-model="item.num" />
</van-col> </van-col>
</van-row> </van-row>
<van-row style="margin-top: 14px"> <van-row style="margin-top: 14px">
总金额 总金额
<text> 30000 </text> <view style="color: var(--van-submit-bar-price-color)">
<text> </text>
<text style="font-size: 16px; font-weight: bold">
{{ item.num * item.dayLeasePrice * item.days }}
</text>
</view>
</van-row> </van-row>
<van-row style="padding: 10px 0; margin-top: 10px; border-top: 1px solid #ccc"> <van-row style="padding: 10px 0; margin-top: 10px; border-top: 1px solid #ccc">
<van-checkbox-group v-model="checked" shape="square" icon-size="16px"> <van-checkbox-group v-model="item.checked" shape="square" icon-size="16px">
<van-checkbox name="1"> <van-checkbox name="1">
我已阅读并同意 我已阅读并同意
<text class="protocol" @click.stop="onViewProtocol"> xxx公司协议 </text> <text class="protocol" @click.stop="onViewProtocol"> xxx公司协议 </text>
@ -61,16 +86,24 @@
</van-row> </van-row>
</view> </view>
<!-- <van-date-picker title="选择日期" /> --> <van-popup v-model:show="showBottom" position="bottom" :destroy-on-close="true">
<van-date-picker
v-model="leaseTime"
@confirm="onConfirm"
@cancel="onCancel"
:min-date="minDate"
title="选择日期"
/>
</van-popup>
<van-submit-bar <van-submit-bar
button-color="#579d92" button-color="#579d92"
:price="3050" :price="totalPrice"
button-text="提交" button-text="提交"
@submit="onSubmitOrder" @submit="onSubmitOrder"
> >
<template #default> <template #default>
<view class="amount"> 共计件装备 </view> <view class="amount"> 共计 1 件装备 </view>
</template> </template>
</van-submit-bar> </van-submit-bar>
</view> </view>
@ -80,10 +113,68 @@
import companyImg from '@/static/goods/company-img.png' import companyImg from '@/static/goods/company-img.png'
import companyBg from '@/static/goods/company-bg.png' import companyBg from '@/static/goods/company-bg.png'
import dateIcon from '@/static/goods/date-icon.png' import dateIcon from '@/static/goods/date-icon.png'
import { ref } from 'vue' import { getDeviceDetailsAPI } from '@/services/goods/index.js'
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import moment from 'moment'
const checked = ref(['1']) const checked = ref(['1'])
const onSubmitOrder = () => {} const orderList = ref([])
const showBottom = ref(false)
const minDate = new Date(2024, 0, 1)
const timeType = ref(0)
const leaseTime = ref()
const startTime = ref()
const endTime = ref()
const onSubmitOrder = () => {
orderList.value.forEach((e) => {
if (e.days < 1) {
showFailToast('请选择租期')
return
}
if (!e.checked.includes('1')) {
showFailToast('请先阅读公司协议')
return
}
})
}
const onViewProtocol = () => {} const onViewProtocol = () => {}
const onSelectTime = (type) => {
timeType.value = type
showBottom.value = true
}
const onConfirm = () => {
if (timeType.value === 1) {
startTime.value = leaseTime.value.join('-')
} else {
endTime.value = leaseTime.value.join('-')
orderList.value[0].days = moment(endTime.value).diff(startTime.value, 'day')
}
showBottom.value = false
}
const onCancel = () => {
showBottom.value = false
}
const getDeviceDetailsData = async (id) => {
const { data: res } = await getDeviceDetailsAPI(id)
const orderInfo = {
rentBeginTime: '',
rentEndTime: '',
days: 0,
num: 1,
checked: [''],
...res,
}
orderList.value.push(orderInfo)
}
const totalPrice = computed(() => {
const item = orderList.value[0]
return item?.num * item?.dayLeasePrice * item?.days * 100
})
onLoad((options) => {
getDeviceDetailsData(options.id)
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -114,7 +205,6 @@ const onViewProtocol = () => {}
} }
.amount { .amount {
margin-left: 50px;
font-size: 13px; font-size: 13px;
color: #ccc; color: #ccc;
} }
@ -162,7 +252,7 @@ const onViewProtocol = () => {}
} }
& view:first-child { & view:first-child {
font-size: 13px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
} }

View File

@ -0,0 +1,11 @@
import { http } from '@/utils/http'
/**
* 获取装备分类
*/
export const getEquipmentTypeAPI = () => {
return http({
method: 'GET',
url: `/material-mall/maType/getEquipmentType`,
})
}

View File

@ -0,0 +1,32 @@
import { http } from '@/utils/http'
/**
* 需求新增接口
*/
export const addLeaseInfoAPI = (data) => {
return http({
method: 'POST',
url: `/material-mall/ma-lease/add`,
data,
})
}
/**
* 需求列表接口
*/
export const getLeaseDemandListAPI = (data) => {
return http({
method: 'POST',
url: `/material-mall/ma-lease/leaseList`,
data,
})
}
/**
* 需求接单
*/
export const acceptLeaseDemandOrderAPI = (data) => {
return http({
method: 'POST',
url: `/material-mall/ma-lease/accept`,
data,
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

BIN
src/static/index/notice.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/static/tab-bar/car.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/static/tab-bar/user.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -13,6 +13,10 @@
flex-direction: column; flex-direction: column;
background-color: $uni-bg-color-grey; background-color: $uni-bg-color-grey;
} }
.h5-content {
padding: 0 10px;
box-sizing: border-box;
}
.flex-row-start { .flex-row-start {
display: flex; display: flex;