426 lines
12 KiB
Vue
426 lines
12 KiB
Vue
<template>
|
||
<!-- 首页 -->
|
||
<view class="index-container">
|
||
<view class="index-header">
|
||
<view class="user-name"> 您好！{{ userCompanyName }} </view>
|
||
<view class="notice-box">
|
||
<van-image height="0.8rem" width="4rem" :src="noticeImg" />
|
||
<view>
|
||
<van-notice-bar
|
||
background="transparent"
|
||
color="#00a288"
|
||
left-icon="volume-o"
|
||
:scrollable="false"
|
||
>
|
||
<van-swipe
|
||
vertical
|
||
:autoplay="3000"
|
||
:touchable="false"
|
||
:show-indicators="false"
|
||
class="notice-swipe"
|
||
>
|
||
<van-swipe-item :key="item.noticeId" v-for="item in noticeListMessage">
|
||
<van-text-ellipsis
|
||
:content="item.noticeTitle"
|
||
@click="handleMsg(item)"
|
||
/>
|
||
</van-swipe-item>
|
||
</van-swipe>
|
||
</van-notice-bar>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="search-ipt">
|
||
<SearchIpt
|
||
@onSearchByType="onSearchByType"
|
||
v-model:activeTypeName="activeTypeName"
|
||
v-model:searchModelValue="searchModelValue"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-data class-filter">
|
||
<TitleTip :title="`分类筛选`" />
|
||
<van-grid :column-num="2" :border="false">
|
||
<van-grid-item @click="onJumpClassFilter(0)">
|
||
<view class="class-box">
|
||
<view class="left-img"> </view>
|
||
装备分类
|
||
</view>
|
||
</van-grid-item>
|
||
<van-grid-item @click="onJumpClassFilter(1)">
|
||
<view class="class-box">
|
||
<view class="right-img"> </view>
|
||
公司分类
|
||
</view>
|
||
</van-grid-item>
|
||
</van-grid>
|
||
</view>
|
||
<view class="order-data">
|
||
<TitleTip />
|
||
<van-cell-group inset>
|
||
<van-grid :column-num="3">
|
||
<van-grid-item v-for="(o, i) in orderData" :key="i" @click="onViewMyOrder(o)">
|
||
<van-icon :name="o.order_icon" size="30" />
|
||
<text class="order-title">{{ o.order_title }}</text>
|
||
<text class="order-count">{{ o.order_count }}</text>
|
||
</van-grid-item>
|
||
</van-grid>
|
||
</van-cell-group>
|
||
</view>
|
||
|
||
<view class="to-do-list">
|
||
<TitleTip :title="`待办事项`" />
|
||
<van-list>
|
||
<van-cell-group inset>
|
||
<van-cell v-for="item in toDoListMessage" :key="item.taskId">
|
||
<view class="items-info">
|
||
您有一条{{ orderText(item.taskStatus) }}订单
|
||
<text @click="onViewMore(item)">点击查看</text>
|
||
</view>
|
||
</van-cell>
|
||
</van-cell-group>
|
||
</van-list>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from 'vue'
|
||
import orderIcon_1 from '@/static/index/order_icon1.png'
|
||
import orderIcon_2 from '@/static/index/order_icon2.png'
|
||
import orderIcon_3 from '@/static/index/order_icon3.png'
|
||
import orderIcon_4 from '@/static/index/order_icon4.png'
|
||
import orderIcon_5 from '@/static/index/order_icon5.png'
|
||
import orderIcon_6 from '@/static/index/order_icon6.png'
|
||
import noticeImg from '@/static/index/notice.png'
|
||
import SearchIpt from '@/components/SearchIpt/index'
|
||
import TitleTip from '@/components/TitleTip/index'
|
||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||
import { useMemberStore } from '@/stores/index.js'
|
||
import {
|
||
getToDoListAPI,
|
||
getNoticeLListAPI,
|
||
getOrderStatusCountAPI,
|
||
} from '@/services/index/index.js'
|
||
|
||
const activeTypeName = ref('机具')
|
||
const searchModelValue = ref('')
|
||
const memberStore = useMemberStore()
|
||
const userCompanyName = ref()
|
||
const showPopover = ref(false)
|
||
const activeUser = ref(1)
|
||
const finished = ref(false)
|
||
const toDoListMessage = ref([])
|
||
const noticeListMessage = ref([])
|
||
|
||
const orderData = ref([
|
||
{ order_title: '我的订单', order_count: 0, order_status: 0, order_icon: orderIcon_1 },
|
||
{ order_title: '租赁中', order_status: 4, order_count: 0, order_icon: orderIcon_4 },
|
||
{ order_title: '已完成', order_status: 20, order_count: 0, order_icon: orderIcon_6 },
|
||
])
|
||
const userActions = ref([
|
||
{ text: '出租方', userType: 1 },
|
||
{ text: '承租方', userType: 2 },
|
||
])
|
||
const statusList = [
|
||
{ id: '1', name: '待接单' },
|
||
{ id: '2', name: '待出库' },
|
||
{ id: '3', name: '待收货' },
|
||
{ id: '4', name: '租赁中' },
|
||
{ id: '5', name: '已退租' },
|
||
{ id: '10', name: '已检修待结算' },
|
||
{ id: '15', name: '结算待确认' },
|
||
{ id: '20', name: '已完成' },
|
||
{ id: '99', name: '已取消' },
|
||
]
|
||
|
||
const orderText = (status) => {
|
||
return statusList.filter((e) => e.id == status)[0].name
|
||
}
|
||
const onUserSelect = (e) => {
|
||
activeUser.value = e.userType
|
||
memberStore.editUserType(e.userType)
|
||
uni.setTabBarItem({
|
||
index: 2,
|
||
visible: e.userType === 1 ? false : true,
|
||
})
|
||
getOrderStatusCountData()
|
||
}
|
||
|
||
const onSearchByType = (value, type) => {
|
||
/**
|
||
* @type 1 查询机具 2 查询需求
|
||
* @value 搜索框值
|
||
*/
|
||
if (type === 2) {
|
||
uni.setStorageSync('myParam', { value: searchModelValue.value, type: 2 })
|
||
uni.switchTab({
|
||
url: `/pages/lease-demand/index`,
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/goods-list/index?value=${value}&type=1`,
|
||
})
|
||
}
|
||
}
|
||
|
||
const getOrderStatusCountData = async () => {
|
||
const { data: res } = await getOrderStatusCountAPI({
|
||
flag: activeUser.value === false,
|
||
})
|
||
orderData.value[0].order_count = res.length
|
||
orderData.value[1].order_count = res.filter((e) => e.orderStatus == 2).length
|
||
orderData.value[2].order_count = res.filter((e) => e.orderStatus == 3).length
|
||
orderData.value[3].order_count = res.filter((e) => e.orderStatus == 4).length
|
||
orderData.value[4].order_count = res.filter((e) => e.orderStatus == 5).length
|
||
orderData.value[5].order_count = res.filter((e) => e.orderStatus == 20).length
|
||
}
|
||
|
||
const onViewMyOrder = (order) => {
|
||
uni.navigateTo({
|
||
url: `/pages/order-list/index?type=2&status=${order.order_status}`,
|
||
})
|
||
}
|
||
|
||
const onViewMore = (item) => {
|
||
let rolesType = ''
|
||
|
||
if (['3', '15'].includes(item.taskStatus)) {
|
||
rolesType = 2
|
||
}
|
||
if (['1', '2', '4', '5', '10'].includes(item.taskStatus)) {
|
||
rolesType = 1
|
||
}
|
||
uni.navigateTo({
|
||
url: `/pages/order-list/index?code=${item.taskCode}&type=${rolesType}`,
|
||
})
|
||
}
|
||
|
||
const onJumpClassFilter = (type) => {
|
||
uni.navigateTo({
|
||
url: `/pages/class-page/index?type=${type}`,
|
||
})
|
||
}
|
||
|
||
// 点击消息
|
||
const handleMsg = (item) => {
|
||
console.log('🚀 ~ handleMsg ~ item:', item)
|
||
const params = item
|
||
uni.navigateTo({
|
||
url: `/pages/index/msgDetails?params=${JSON.stringify(params)}`,
|
||
})
|
||
}
|
||
|
||
onLoad(() => {
|
||
finished.value = true
|
||
userCompanyName.value = memberStore?.userCompanyName
|
||
})
|
||
|
||
onShow(async () => {
|
||
activeUser.value = memberStore.userType
|
||
getOrderStatusCountData()
|
||
const res = await getToDoListAPI()
|
||
const { data: result } = await getNoticeLListAPI()
|
||
toDoListMessage.value = res.rows
|
||
noticeListMessage.value = result.rows
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index-container {
|
||
.index-header {
|
||
padding: 5px 20px 30px;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(to bottom, #99dbc4, #aeded9, #daf4f3);
|
||
border-bottom-left-radius: 40px;
|
||
border-bottom-right-radius: 40px;
|
||
|
||
.user-name {
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.notice-box {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 4px;
|
||
background-color: #daf2f1;
|
||
border-radius: 6px;
|
||
|
||
view {
|
||
flex: 1;
|
||
}
|
||
|
||
.notice-swipe {
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
.search-ipt {
|
||
margin-top: 20px;
|
||
.van-field {
|
||
width: 100%;
|
||
padding: 0;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
border: 1px solid #22ab9b;
|
||
background-color: #fff;
|
||
border-radius: 18px;
|
||
padding-left: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-data {
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
|
||
.order-title,
|
||
.order-count {
|
||
font-size: 13px;
|
||
}
|
||
.order-title {
|
||
color: #7b7a7a;
|
||
padding: 8px 0;
|
||
}
|
||
}
|
||
|
||
.to-do-list {
|
||
margin-top: 10px;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
|
||
.items-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
color: #333;
|
||
& text:first-child {
|
||
color: #22ab9b;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.van-notice-bar__left-icon),
|
||
:deep(.van-notice-bar__right-icon) {
|
||
color: #df3939;
|
||
}
|
||
:deep(.van-text-ellipsis) {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
}
|
||
:deep(.van-cell-group--inset) {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
:deep(.van-tabs__content--animated) {
|
||
padding: 0 10px;
|
||
}
|
||
:deep(.van-tab__panel) {
|
||
max-height: 40vh;
|
||
display: flex;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.companyClass {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
view {
|
||
width: calc((100% - 20px) / 3);
|
||
margin-right: 10px;
|
||
margin-top: 10px;
|
||
padding: 0 6px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
border-radius: 16px;
|
||
box-sizing: border-box;
|
||
color: #999999;
|
||
background-color: #e9e9e9;
|
||
font-size: 14px;
|
||
}
|
||
|
||
& view:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
& view:hover {
|
||
background-color: #22ab9b !important;
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
|
||
.deviceClass {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-left: 10px;
|
||
view {
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
padding: 0 6px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
border-radius: 16px;
|
||
box-sizing: border-box;
|
||
color: #999999;
|
||
background-color: #e9e9e9;
|
||
font-size: 14px;
|
||
}
|
||
|
||
& view:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
& view:hover {
|
||
background-color: #22ab9b !important;
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
:deep(.van-sidebar-item--select:before) {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.van-sidebar-item__text) {
|
||
white-space: nowrap; /* 防止换行 */
|
||
overflow: hidden; /* 隐藏溢出的内容 */
|
||
text-overflow: ellipsis; /* 显示省略号 */
|
||
max-width: 100%; /* 最大宽度，根据需要设置 */
|
||
display: block; /* 确保是块级元素 */
|
||
}
|
||
|
||
.class-box {
|
||
width: 95%;
|
||
min-height: 100px;
|
||
background-color: #e8f3f0;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #777777;
|
||
font-size: 15px;
|
||
|
||
.left-img {
|
||
background: url('@/static/index/class-left.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 60px;
|
||
height: 70%;
|
||
}
|
||
.right-img {
|
||
background: url('@/static/index/class-right.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 60px;
|
||
height: 70%;
|
||
}
|
||
}
|
||
.class-filter :deep(.van-grid-item__content) {
|
||
padding: 0;
|
||
background-color: #f8f8f8;
|
||
}
|
||
</style>
|