核销中心优化等(home)
This commit is contained in:
parent
2ca50ae86b
commit
71a2d530cc
11
pages.json
11
pages.json
|
|
@ -148,6 +148,15 @@
|
||||||
"navigationBarTitleText": "核销历史记录"
|
"navigationBarTitleText": "核销历史记录"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "verification/historyDetail",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "核销历史记录详情"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "message/index",
|
"path": "message/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -163,7 +172,7 @@
|
||||||
"current": 0, // 当前激活的条件，默认为 0
|
"current": 0, // 当前激活的条件，默认为 0
|
||||||
"list": [{
|
"list": [{
|
||||||
"name": "", // 条件名称
|
"name": "", // 条件名称
|
||||||
"path": "pagesA/warehousing/index", // 要打开的页面路径
|
"path": "pagesA/my_order/list", // 要打开的页面路径
|
||||||
"query": "" // 可选的页面参数
|
"query": "" // 可选的页面参数
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,150 +1,173 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="li-message-page">
|
<view class="detail-page">
|
||||||
<!-- 自定义导航栏 -->
|
<!-- 自定义导航栏 -->
|
||||||
<wd-navbar :bordered="false"
|
<wd-navbar :bordered="false"
|
||||||
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
||||||
safeAreaInsetTop fixed placeholder>
|
safeAreaInsetTop fixed placeholder>
|
||||||
<template #left>
|
<template #left>
|
||||||
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
<view class="navbar-content">
|
||||||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line back-icon"
|
||||||
@click="toPages({type:'nav'})"></text>
|
@click="toPages({type:'nav'})"></text>
|
||||||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
<text v-if="!hasMultiplePages" class="ri-home-5-line home-icon"
|
||||||
@click="toPages({type:'home'})"></text>
|
@click="toPages({type:'home'})"></text>
|
||||||
<text class="li-text-42">工单详情</text>
|
<text class="page-title">工单详情</text>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</wd-navbar>
|
</wd-navbar>
|
||||||
<!-- 导航栏背景 -->
|
<!-- 导航栏背景 -->
|
||||||
<view class="nav-bg-layer"></view>
|
<view class="nav-bg-layer"></view>
|
||||||
<!-- card -->
|
|
||||||
<view class="bg-#FFFFFF li-w-92% li-mx-auto li-rd-20 li-task-card li-pb-25 overflow-hidden li-mt-40">
|
<!-- 工单状态卡片 -->
|
||||||
<view class="li-flex li-items-start li-justify-between bg-#f9f9f9">
|
<view class="ticket-card">
|
||||||
<view class="li-mb-20">
|
<view class="ticket-header">
|
||||||
<view class="li-flex li-items-center li-text-#5f5f5f li-pl-20 li-pt-20 li-text-28 li-mb-12">
|
<view class="ticket-info">
|
||||||
<text class="ri-todo-line li-mr-3"></text>
|
<view class="ticket-id">
|
||||||
<text>{{ticketInfo.ticket_no}}</text>
|
<text class="ri-file-list-line id-icon"></text>
|
||||||
<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
|
<text class="id-text">{{ticketInfo.ticket_no}}</text>
|
||||||
|
<text class="ri-file-copy-line copy-icon"></text>
|
||||||
</view>
|
</view>
|
||||||
<text class="li-pl-20 li-text-28 li-text-#5f5f5f">创建时间: {{ticketInfo.create_time}}</text>
|
<view class="create-time">创建时间: {{ticketInfo.create_time}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="li-text-28 !li-rd-bl-50 li-px-40 li-py-6" style="color: #37A5FF; backgroundColor: #e8f4ff">
|
|
||||||
<text v-if="ticketInfo.type == 'F2'">派送</text>
|
<view class="ticket-type" :class="'type-'+ticketInfo.type">
|
||||||
|
<text v-if="ticketInfo.type == 'F2'">配送</text>
|
||||||
<text v-if="ticketInfo.type == 'F4'">量房</text>
|
<text v-if="ticketInfo.type == 'F4'">量房</text>
|
||||||
<text v-if="ticketInfo.type == 'F6'">维修</text>
|
<text v-if="ticketInfo.type == 'F6'">维修</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="li-flex li-items-start li-pt-20 li-pl-20">
|
|
||||||
<view class="ri-checkbox-circle-fill li-text-#009aff li-mr-12 li-text-40 li-pt-2"></view>
|
<view class="ticket-status">
|
||||||
<!-- <text class="ri-close-circle-fill li-text-#ff0000"></text> -->
|
<view class="status-icon" :class="'status-'+ticketInfo.status">
|
||||||
<view v-if="ticketInfo.status == 0" class="li-flex li-flex-col">
|
<text v-if="ticketInfo.status == 2 || ticketInfo.status == 1" class="ri-checkbox-circle-fill"></text>
|
||||||
<text class="li-text-32">待接单</text>
|
<text v-else-if="ticketInfo.status == 3" class="ri-close-circle-fill"></text>
|
||||||
<text class="li-text-28">待接单</text>
|
<text v-else class="ri-time-line"></text>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="ticketInfo.status == 1" class="li-flex li-flex-col">
|
<view class="status-text">
|
||||||
<text class="li-text-32">已接单</text>
|
<text class="status-title">
|
||||||
<text class="li-text-28">已接单</text>
|
{{ticketInfo.status == 0 ? '待接单' :
|
||||||
</view>
|
ticketInfo.status == 1 ? '已接单' :
|
||||||
<view v-if="ticketInfo.status == 2" class="li-flex li-flex-col">
|
ticketInfo.status == 2 ? '已完结' :
|
||||||
<text class="li-text-32">已完结</text>
|
ticketInfo.status == 3 ? '已取消' : ''}}
|
||||||
<text class="li-text-28">已完结</text>
|
</text>
|
||||||
</view>
|
<text class="status-desc">
|
||||||
<view v-if="ticketInfo.status == 3" class="li-flex li-flex-col">
|
{{ticketInfo.status == 0 ? '等待服务人员接单' :
|
||||||
<text class="li-text-32">已取消</text>
|
ticketInfo.status == 1 ? '服务人员已接单' :
|
||||||
<text class="li-text-28">已取消</text>
|
ticketInfo.status == 2 ? '工单已完成' :
|
||||||
|
ticketInfo.status == 3 ? '工单已取消' : ''}}
|
||||||
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 联系信息 -->
|
<!-- 联系信息 -->
|
||||||
<view class="bg-#FFFFFF li-w-92% li-mx-auto li-mt-20 li-rd-20 li-task-card li-pb-30 overflow-hidden">
|
<view class="info-card">
|
||||||
<view class="li-pl-30 li-pt-30">联系信息</view>
|
<view class="card-title">
|
||||||
<view class="li-pl-30 li-pr-30 li-mt-30">
|
<text class="ri-user-3-line title-icon"></text>
|
||||||
<view class="li-flex li-items-start li-justify-between li-text-28">
|
<text>联系信息</text>
|
||||||
<text class="li-w-150 li-text-#9a9a9a">小区名称</text>
|
</view>
|
||||||
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo?.order?.village_name}}</text>
|
|
||||||
|
<view class="info-content">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="item-label">小区名称</text>
|
||||||
|
<text class="item-value">{{ticketInfo?.order?.village_name}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="li-flex li-items-center li-justify-between li-mt-30 li-text-28">
|
|
||||||
<text class="li-w-150 li-text-#9a9a9a">联系人</text>
|
<view class="info-item">
|
||||||
<text class="li-w-400 li-single-line li-text-right">{{ticketInfo.order.name}}</text>
|
<text class="item-label">联系人</text>
|
||||||
|
<text class="item-value">{{ticketInfo?.order?.name}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="li-flex li-items-center li-justify-between li-mt-30 li-text-28">
|
|
||||||
<text class="li-w-150 li-text-#9a9a9a">联系电话</text>
|
<view class="info-item">
|
||||||
<view class="li-flex li-items-center li-w-400 li-single-line justify-between">
|
<text class="item-label">联系电话</text>
|
||||||
<!-- 左侧留空 -->
|
<view class="phone-value">
|
||||||
<view></view>
|
<text class="ri-phone-line phone-icon"></text>
|
||||||
<!-- 右侧内容 -->
|
<text class="phone-number">{{ticketInfo?.order?.mobile}}</text>
|
||||||
<view class="li-flex li-items-center">
|
</view>
|
||||||
<text class="ri-phone-line li-text-#009aff li-mr-6"></text>
|
</view>
|
||||||
<text>{{ticketInfo.order.mobile}}</text>
|
|
||||||
|
<view class="info-item product-info">
|
||||||
|
<text class="item-label">商品信息</text>
|
||||||
|
<view class="product-detail">
|
||||||
|
<text class="product-name">燕京 8度U8 500ML*12瓶/箱*2 送燕京9度菊花听500ML*12听</text>
|
||||||
|
<view class="product-images">
|
||||||
|
<image class="product-image" src="../../static/swiper/1.png" mode="aspectFill"></image>
|
||||||
|
<image class="product-image" src="../../static/swiper/1.png" mode="aspectFill"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
|
|
||||||
<text class="li-w-150 li-text-#9a9a9a">商品信息</text>
|
|
||||||
<view class="li-flex li-flex-col li-w-400 justify-end">
|
|
||||||
<text class="li-two-line li-text-right">燕京 8度U8 500ML*12瓶/箱*2 送燕京9度菊花听500ML*12听</text>
|
|
||||||
<view class="li-flex justify-between li-items-center li-mt-20">
|
|
||||||
<view></view>
|
|
||||||
<view class="li-flex li-items-center">
|
|
||||||
<image class="li-w-110 li-h-110 li-rd-10" src="../../static/swiper/1.png" mode="">
|
|
||||||
</image>
|
|
||||||
<image class="li-w-110 li-h-110 li-rd-10 li-ml-20" src="../../static/swiper/1.png"
|
|
||||||
mode=""></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 报修信息 -->
|
<!-- 报修信息 -->
|
||||||
<view v-if="ticketInfo?.type == 'F6'" class="bg-#FFFFFF li-w-92% li-mx-auto li-mt-20 li-rd-20 li-task-card li-pb-30 overflow-hidden">
|
<view v-if="ticketInfo?.type == 'F6'" class="info-card">
|
||||||
<view class="li-pl-30 li-pt-30">报修信息</view>
|
<view class="card-title">
|
||||||
<view class="li-pl-30 li-pr-30 li-mt-30">
|
<text class="ri-tools-line title-icon"></text>
|
||||||
<view class="li-flex li-items-center li-justify-between li-text-28">
|
<text>报修信息</text>
|
||||||
<text class="li-w-150 li-text-#9a9a9a">报修位置</text>
|
</view>
|
||||||
<text class="li-w-400 li-single-line li-text-right">{{ticketInfo?.order?.region_name}}{{ticketInfo?.order?.cell_name}}{{ticketInfo?.order?.house_name}}{{ticketInfo?.order?.address}}</text>
|
|
||||||
|
<view class="info-content">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="item-label">报修位置</text>
|
||||||
|
<text class="item-value">{{ticketInfo?.order?.region_name}}{{ticketInfo?.order?.cell_name}}{{ticketInfo?.order?.house_name}}{{ticketInfo?.order?.address}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
|
|
||||||
<text class="li-w-150 li-text-#9a9a9a">问题描述</text>
|
<view class="info-item">
|
||||||
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo.order.content}}</text>
|
<text class="item-label">问题描述</text>
|
||||||
|
<text class="item-value">{{ticketInfo?.order?.content}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="ticketInfo.order.images" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
|
|
||||||
<text class="li-w-150 li-text-#9a9a9a">现场照片</text>
|
<view v-if="ticketInfo?.order?.images" class="info-item">
|
||||||
<view class="li-flex li-flex-col li-w-400 justify-end">
|
<text class="item-label">现场照片</text>
|
||||||
<view class="li-flex justify-between li-items-center li-mt-20">
|
<view class="scene-images">
|
||||||
<!-- 左侧留空 -->
|
<image v-for="(item) in ticketInfo?.order?.images?.split(',')" :key="item"
|
||||||
<view></view>
|
class="scene-image"
|
||||||
<view class="li-flex li-items-center">
|
:src="item"
|
||||||
<image v-for="(item) in ticketInfo?.order?.images?.split(',')" :key="item" class="li-w-110 li-h-110 li-rd-10 li-mr-20" :src="item">
|
mode="aspectFill">
|
||||||
</image>
|
</image>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 工单记录 -->
|
<!-- 工单记录 -->
|
||||||
<view class="bg-#FFFFFF li-w-92% li-mx-auto li-mt-20 li-rd-20 li-task-card li-pb-30 overflow-hidden">
|
<view class="info-card">
|
||||||
<view class="li-pl-30 li-pt-30">工单记录</view>
|
<view class="card-title">
|
||||||
<view class="li-pl-30 li-pr-30 li-mt-30">
|
<text class="ri-history-line title-icon"></text>
|
||||||
<!-- todo 此处最好用时间线展示 类似物流信息 -->
|
<text>工单记录</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="timeline">
|
||||||
|
<view class="timeline-item">
|
||||||
|
<view class="timeline-dot"></view>
|
||||||
|
<view class="timeline-content">
|
||||||
|
<view class="timeline-time">{{ticketInfo.create_time}}</view>
|
||||||
|
<view class="timeline-text">创建工单</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="ticketInfo.status >= 1" class="timeline-item">
|
||||||
|
<view class="timeline-dot"></view>
|
||||||
|
<view class="timeline-content">
|
||||||
|
<view class="timeline-time">2025-03-13 11:25:18</view>
|
||||||
|
<view class="timeline-text">工单已接单</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="ticketInfo.status >= 2" class="timeline-item">
|
||||||
|
<view class="timeline-dot"></view>
|
||||||
|
<view class="timeline-content">
|
||||||
|
<view class="timeline-time">2025-03-13 15:42:36</view>
|
||||||
|
<view class="timeline-text">工单已完成</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- footer -->
|
|
||||||
<view
|
<!-- 底部按钮 -->
|
||||||
class="li-flex li-fixed li-bottom-0 li-bg-white li-w-100% li-items-center li-justify-between li-py-35 li-task-card li-rd-10">
|
<view class="footer-actions">
|
||||||
<!-- 左侧留空 -->
|
<view class="action-buttons">
|
||||||
<view></view>
|
<wd-button class="action-btn cancel-btn" type="error" :round="true">退单</wd-button>
|
||||||
<view class="li-flex li-items-center li-mr-30">
|
<wd-button class="action-btn confirm-btn" :round="true">结单</wd-button>
|
||||||
<view>
|
|
||||||
<!-- todo 退单要进行二次确认 -->
|
|
||||||
<wd-button :round="false" type="error">退单</wd-button>
|
|
||||||
</view>
|
|
||||||
<view class="li-ml-15">
|
|
||||||
<!-- todo 结单根据要求，是否跳转到结单页，拍照+填写信息 -->
|
|
||||||
<wd-button :round="false">结单</wd-button>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -155,8 +178,8 @@
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||||
import { useNavigation } from '@/hooks/useNavigation'
|
import { useNavigation } from '@/hooks/useNavigation'
|
||||||
import {myTicketInfo} from '@/api/ticket'
|
import {myTicketInfo} from '@/api/ticket'
|
||||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||||
|
|
||||||
const Toast = useToast()
|
const Toast = useToast()
|
||||||
const loading = ref<boolean>(false)
|
const loading = ref<boolean>(false)
|
||||||
const bntloading = ref<boolean>(false)
|
const bntloading = ref<boolean>(false)
|
||||||
|
|
@ -195,13 +218,13 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const loadInfo = async (ticket_id : string) => {
|
const loadInfo = async (ticket_id) => {
|
||||||
const res = await myTicketInfo({ ticket_id })
|
const res = await myTicketInfo({ ticket_id })
|
||||||
ticketInfo.value = res.data
|
ticketInfo.value = res.data
|
||||||
}
|
}
|
||||||
|
|
||||||
// 状态文字配置
|
// 状态文字配置
|
||||||
const getStatusText = (status : number) => {
|
const getStatusText = (status) => {
|
||||||
const textMap = {
|
const textMap = {
|
||||||
1: '待配送',
|
1: '待配送',
|
||||||
2: '已完成',
|
2: '已完成',
|
||||||
|
|
@ -211,7 +234,7 @@
|
||||||
return textMap[status] || '未知状态'
|
return textMap[status] || '未知状态'
|
||||||
}
|
}
|
||||||
|
|
||||||
const toPages = (item : any) => {
|
const toPages = (item) => {
|
||||||
console.log(item);
|
console.log(item);
|
||||||
switch (item.type) {
|
switch (item.type) {
|
||||||
case 'nav':
|
case 'nav':
|
||||||
|
|
@ -230,36 +253,43 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const handleAction = (action : string) => {
|
const handleAction = (action) => {
|
||||||
console.log(action);
|
console.log(action);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.li-message-page {
|
.detail-page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: linear-gradient(to bottom,
|
background: linear-gradient(to bottom,
|
||||||
rgba(217, 237, 255, 0.9) 0%,
|
rgba(233, 245, 255, 0.9) 0%,
|
||||||
rgba(217, 237, 255, 0.9) 20%,
|
rgba(245, 250, 255, 0.9) 30%,
|
||||||
rgba(207, 207, 207, 0.2) 40%,
|
rgba(245, 250, 255, 0.9) 70%,
|
||||||
rgba(207, 207, 207, 0.2) 60%,
|
rgba(233, 245, 255, 0.9) 100%);
|
||||||
rgba(207, 207, 207, 0.2) 80%,
|
|
||||||
rgba(207, 207, 207, 0.2) 100%);
|
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
/* #ifdef H5 */
|
|
||||||
padding-bottom: 160rpx;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifdef APP-PLUS */
|
|
||||||
padding-bottom: 180rpx;
|
padding-bottom: 180rpx;
|
||||||
/* #endif */
|
}
|
||||||
/* #ifdef MP-WEIXIN */
|
|
||||||
padding-bottom: 170rpx;
|
.navbar-content {
|
||||||
/* #endif */
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
|
||||||
|
.back-icon, .home-icon {
|
||||||
|
font-size: 60rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 导航栏背景层 */
|
||||||
// 导航栏背景层
|
|
||||||
.nav-bg-layer {
|
.nav-bg-layer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -273,15 +303,331 @@
|
||||||
-webkit-backdrop-filter: blur(10px);
|
-webkit-backdrop-filter: blur(10px);
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
}
|
}
|
||||||
|
|
||||||
.li-task-card {
|
/* 卡片通用样式 */
|
||||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
.ticket-card, .info-card {
|
||||||
transition: all 0.3s ease;
|
width: 92%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.99);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 工单状态卡片 */
|
||||||
|
.ticket-card {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
|
||||||
|
.ticket-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #f8faff;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.ticket-info {
|
||||||
|
.ticket-id {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.id-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.id-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #009aff;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-time {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket-type {
|
||||||
|
padding: 6rpx 20rpx;
|
||||||
|
border-bottom-left-radius: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #37A5FF;
|
||||||
|
background-color: #e8f4ff;
|
||||||
|
|
||||||
|
&.type-F2 {
|
||||||
|
color: #ff9d00;
|
||||||
|
background-color: #fff6e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type-F6 {
|
||||||
|
color: #00b42a;
|
||||||
|
background-color: #e8ffea;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type-F4 {
|
||||||
|
color: #7e3ff2;
|
||||||
|
background-color: #f0e8ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
.status-icon {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #009aff;
|
||||||
|
|
||||||
|
&.status-2 {
|
||||||
|
color: #00b42a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-3 {
|
||||||
|
color: #f42429;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-0 {
|
||||||
|
color: #ff9d00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.status-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 详情卡片样式 */
|
||||||
|
.info-card {
|
||||||
|
padding: 0 0 20rpx 0;
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.title-icon {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
color: #009aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
|
||||||
|
.item-label {
|
||||||
|
width: 150rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-value {
|
||||||
|
width: 400rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
text-align: right;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.phone-icon {
|
||||||
|
color: #009aff;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-number {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #009aff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.product-info {
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.product-detail {
|
||||||
|
width: 400rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-images {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-images {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 400rpx;
|
||||||
|
|
||||||
|
.scene-image {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间线样式 */
|
||||||
|
.timeline {
|
||||||
|
padding: 10rpx 30rpx 10rpx 40rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50rpx;
|
||||||
|
width: 2rpx;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 154, 255, 0.2);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
padding: 15rpx 0 15rpx 30rpx;
|
||||||
|
|
||||||
|
.timeline-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: -12rpx;
|
||||||
|
top: 25rpx;
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #009aff;
|
||||||
|
border: 4rpx solid rgba(0, 154, 255, 0.3);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
.timeline-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部按钮样式 */
|
||||||
|
.footer-actions {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 30rpx 30rpx;
|
||||||
|
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
||||||
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
min-width: 180rpx !important;
|
||||||
|
height: 80rpx !important;
|
||||||
|
border-radius: 40rpx !important;
|
||||||
|
font-size: 28rpx !important;
|
||||||
|
box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
&.cancel-btn {
|
||||||
|
background: linear-gradient(to right, #ff6b6b, #ff4757) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.confirm-btn {
|
||||||
|
background: linear-gradient(to right, #5eafff, #4090ff) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
::v-deep .wd-button {
|
::v-deep .wd-button {
|
||||||
width: 160rpx !important;
|
width: auto !important;
|
||||||
height: 65rpx !important;
|
height: 80rpx !important;
|
||||||
min-width: 160rpx !important;
|
min-width: 180rpx !important;
|
||||||
|
margin-right: 20rpx !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -34,41 +34,63 @@
|
||||||
<!-- 工单列表 -->
|
<!-- 工单列表 -->
|
||||||
<view class="li-w-92% li-mx-auto li-mt-list-costom">
|
<view class="li-w-92% li-mx-auto li-mt-list-costom">
|
||||||
<view v-for="(item, index) in taskList" :key="index" @click="toPages({type:'detail',value:item})"
|
<view v-for="(item, index) in taskList" :key="index" @click="toPages({type:'detail',value:item})"
|
||||||
class="li-task-card li-bg-white li-mt-20 li-rd-15 li-pt-25 li-pb-30 li-px-30">
|
class="order-card">
|
||||||
<view class="li-flex li-items-center li-justify-between li-bottom-border2 li-pb-15">
|
<!-- 订单头部 -->
|
||||||
<view class="li-text-28 li-flex li-items-center li-justify-between li-text-#999">
|
<view class="order-header">
|
||||||
<text class="ri-todo-line sli-mr-3"></text>
|
<view class="order-id">
|
||||||
{{item.ticket_no}}
|
<text class="ri-file-list-line id-icon"></text>
|
||||||
<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
|
<text class="id-text">{{item.ticket_no}}</text>
|
||||||
|
<text class="ri-file-copy-line copy-icon"></text>
|
||||||
</view>
|
</view>
|
||||||
<wd-tag custom-class="space" :color="getStatusColor(item.status)"
|
<view class="order-status" :style="{
|
||||||
:bg-color="getStatusBgColor(item.status)">
|
color: getStatusColor(item.status),
|
||||||
|
backgroundColor: getStatusBgColor(item.status)
|
||||||
|
}">
|
||||||
{{getStatusText(item.status)}}
|
{{getStatusText(item.status)}}
|
||||||
</wd-tag>
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
|
|
||||||
<text class="li-text-#9a9a9a">工单类型</text>
|
|
||||||
<text v-if="item.type == 'F2'">配送</text>
|
|
||||||
<text v-if="item.type == 'F6'">维修</text>
|
|
||||||
<text v-if="item.type == 'F4'">量房</text>
|
|
||||||
</view>
|
|
||||||
<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
|
|
||||||
<text class="li-text-#9a9a9a">小区名称</text>
|
|
||||||
<text>{{item.order.village_name}}</text>
|
|
||||||
</view>
|
|
||||||
<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
|
|
||||||
<text class="li-text-#9a9a9a">联系人</text>
|
|
||||||
<text>{{item.order.name}}</text>
|
|
||||||
</view>
|
|
||||||
<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
|
|
||||||
<text class="li-text-#9a9a9a">联系电话</text>
|
|
||||||
<text>{{item.order.mobile}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="li-flex li-items-center li-justify-between li-mt-20">
|
|
||||||
<text class="li-text-24 li-text-#999">{{item.create_time}}</text>
|
<!-- 订单内容 -->
|
||||||
<wd-button custom-class="custom-shadow" size="small" v-if="item.status === 1">详情</wd-button>
|
<view class="order-content">
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="row-label">工单类型</text>
|
||||||
|
<view class="type-tag" :class="'type-'+item.type">
|
||||||
|
<text class="tag-icon" :class="{
|
||||||
|
'ri-truck-line': item.type == 'F2',
|
||||||
|
'ri-tools-line': item.type == 'F6',
|
||||||
|
'ri-ruler-line': item.type == 'F4'
|
||||||
|
}"></text>
|
||||||
|
<text v-if="item.type == 'F2'">配送</text>
|
||||||
|
<text v-if="item.type == 'F6'">维修</text>
|
||||||
|
<text v-if="item.type == 'F4'">量房</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="row-label">小区名称</text>
|
||||||
|
<text class="row-value">{{item.order.village_name}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="contact-info">
|
||||||
|
<view class="contact-row">
|
||||||
|
<text class="contact-icon ri-user-3-line"></text>
|
||||||
|
<text class="contact-label">联系人:</text>
|
||||||
|
<text class="contact-name">{{item.order.name}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="contact-row">
|
||||||
|
<text class="contact-icon ri-phone-line"></text>
|
||||||
|
<text class="contact-phone">{{item.order.mobile}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单底部 -->
|
||||||
|
<view class="order-footer">
|
||||||
|
<view class="time-info">
|
||||||
|
<text class="time-icon ri-time-line"></text>
|
||||||
|
<text class="time-text">{{item.create_time}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-btn" v-if="item.status === 1">详情</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -221,7 +243,7 @@
|
||||||
poolList()
|
poolList()
|
||||||
}
|
}
|
||||||
|
|
||||||
const toPages = (item : any) => {
|
const toPages = (item) => {
|
||||||
console.log(item);
|
console.log(item);
|
||||||
switch (item.type) {
|
switch (item.type) {
|
||||||
case 'nav':
|
case 'nav':
|
||||||
|
|
@ -245,7 +267,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// 状态颜色配置
|
// 状态颜色配置
|
||||||
const getStatusColor = (status : number) => {
|
const getStatusColor = (status) => {
|
||||||
const colorMap = {
|
const colorMap = {
|
||||||
0: '#ff9d00', // 待配送
|
0: '#ff9d00', // 待配送
|
||||||
1: '#37A5FF', // 未入库
|
1: '#37A5FF', // 未入库
|
||||||
|
|
@ -256,7 +278,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// 状态背景色配置
|
// 状态背景色配置
|
||||||
const getStatusBgColor = (status : number) => {
|
const getStatusBgColor = (status) => {
|
||||||
const bgColorMap = {
|
const bgColorMap = {
|
||||||
0: '#fff6e9', // 待配送
|
0: '#fff6e9', // 待配送
|
||||||
1: '#e8f4ff', // 未入库
|
1: '#e8f4ff', // 未入库
|
||||||
|
|
@ -267,7 +289,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// 状态文字配置
|
// 状态文字配置
|
||||||
const getStatusText = (status : number) => {
|
const getStatusText = (status) => {
|
||||||
const textMap = {
|
const textMap = {
|
||||||
0: '待接单',
|
0: '待接单',
|
||||||
1: '待完成',
|
1: '待完成',
|
||||||
|
|
@ -277,7 +299,7 @@
|
||||||
return textMap[status] || '未知状态'
|
return textMap[status] || '未知状态'
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleStatusChange = (id : any) => {
|
const handleStatusChange = (id) => {
|
||||||
query.value.page = 1
|
query.value.page = 1
|
||||||
query.value.status = id
|
query.value.status = id
|
||||||
taskList.value = []
|
taskList.value = []
|
||||||
|
|
@ -363,14 +385,190 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.li-task-card {
|
.order-card {
|
||||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
background-color: #fff;
|
||||||
transition: all 0.3s ease;
|
border-radius: 16rpx;
|
||||||
}
|
padding: 24rpx 30rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
.custom-shadow {
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||||
color: #ffffff !important;
|
position: relative;
|
||||||
background: linear-gradient(to right, #7bbfff, #009aff) !important;
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.99);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 工单头部 */
|
||||||
|
.order-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.order-id {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.id-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.id-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #009aff;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status {
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 4rpx 18rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 工单内容 */
|
||||||
|
.order-content {
|
||||||
|
padding: 10rpx 0 16rpx;
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.row-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
max-width: 65%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-tag {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #009aff;
|
||||||
|
background-color: rgba(0, 154, 255, 0.08);
|
||||||
|
|
||||||
|
&.type-F2 {
|
||||||
|
color: #ff9d00;
|
||||||
|
background-color: rgba(255, 157, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type-F6 {
|
||||||
|
color: #00b42a;
|
||||||
|
background-color: rgba(0, 180, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.type-F4 {
|
||||||
|
color: #643bed;
|
||||||
|
background-color: rgba(100, 59, 237, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-icon {
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
padding: 16rpx 20rpx;
|
||||||
|
background-color: rgba(0, 154, 255, 0.03);
|
||||||
|
border-radius: 12rpx;
|
||||||
|
|
||||||
|
.contact-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #009aff;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-phone {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #009aff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 工单底部 */
|
||||||
|
.order-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-top: 1px dashed rgba(0, 0, 0, 0.05);
|
||||||
|
padding-top: 16rpx;
|
||||||
|
|
||||||
|
.time-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.time-icon {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-btn {
|
||||||
|
padding: 8rpx 30rpx;
|
||||||
|
background: linear-gradient(to right, #7bbfff, #009aff);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
box-shadow: 0 4rpx 8rpx rgba(0, 154, 255, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .space {
|
::v-deep .space {
|
||||||
|
|
@ -385,7 +583,7 @@
|
||||||
::v-deep .space-check {
|
::v-deep .space-check {
|
||||||
padding: 10rpx 40rpx !important;
|
padding: 10rpx 40rpx !important;
|
||||||
margin-right: 20rpx !important;
|
margin-right: 20rpx !important;
|
||||||
border-radius: 10rpx !important;
|
border-radius: 30rpx !important;
|
||||||
font-size: 24rpx !important;
|
font-size: 24rpx !important;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
|
|
@ -399,7 +597,7 @@
|
||||||
::v-deep .space-checkOut {
|
::v-deep .space-checkOut {
|
||||||
padding: 10rpx 40rpx !important;
|
padding: 10rpx 40rpx !important;
|
||||||
margin-right: 20rpx !important;
|
margin-right: 20rpx !important;
|
||||||
border-radius: 10rpx !important;
|
border-radius: 30rpx !important;
|
||||||
font-size: 24rpx !important;
|
font-size: 24rpx !important;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
color: #4c4c4c !important;
|
color: #4c4c4c !important;
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
<!-- 历史记录列表 -->
|
<!-- 历史记录列表 -->
|
||||||
<view class="li-w-92% li-mx-auto li-mt-30">
|
<view class="li-w-92% li-mx-auto li-mt-30">
|
||||||
<view v-if="filteredRecords.length > 0" class="records-list">
|
<view v-if="filteredRecords.length > 0" class="records-list">
|
||||||
<view v-for="(record, index) in filteredRecords" :key="index"
|
<view v-for="(record, index) in filteredRecords" :key="index" @click="btnDetail"
|
||||||
class="record-item li-flex li-items-center li-justify-between li-bg-white li-rd-20 li-px-30 li-py-25 li-mb-20 li-shadow-sm">
|
class="record-item li-flex li-items-center li-justify-between li-bg-white li-rd-20 li-px-30 li-py-25 li-mb-20 li-shadow-sm">
|
||||||
<view class="li-flex li-flex-col">
|
<view class="li-flex li-flex-col">
|
||||||
<view class="li-flex li-items-center">
|
<view class="li-flex li-items-center">
|
||||||
|
|
@ -129,6 +129,12 @@
|
||||||
operator: '王五' // 新增字段
|
operator: '王五' // 新增字段
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
|
const btnDetail = ()=>{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesA/verification/historyDetail'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 过滤后的历史记录
|
// 过滤后的历史记录
|
||||||
const filteredRecords = computed(() => {
|
const filteredRecords = computed(() => {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,365 @@
|
||||||
|
<template>
|
||||||
|
<view class="detail-page">
|
||||||
|
<!-- 自定义导航栏 -->
|
||||||
|
<wd-navbar :bordered="false"
|
||||||
|
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
||||||
|
safeAreaInsetTop fixed placeholder>
|
||||||
|
<template #left>
|
||||||
|
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
||||||
|
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
||||||
|
@click="toPages({type:'nav'})"></text>
|
||||||
|
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
||||||
|
@click="toPages({type:'home'})"></text>
|
||||||
|
<text class="li-text-42">入库详情</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-navbar>
|
||||||
|
|
||||||
|
<!-- 导航栏背景 -->
|
||||||
|
<view class="nav-bg-layer"></view>
|
||||||
|
|
||||||
|
<!-- 状态卡片 -->
|
||||||
|
<view class="status-card li-w-92% li-mx-auto li-mt-20 li-rd-20 li-py-30">
|
||||||
|
<view class="status-header li-flex li-items-center li-justify-between li-px-30">
|
||||||
|
<view class="li-flex li-items-center">
|
||||||
|
<text class="status-icon ri-checkbox-circle-fill"></text>
|
||||||
|
<text class="status-text">入库成功</text>
|
||||||
|
</view>
|
||||||
|
<text class="status-time">2025-03-05 12:34:56</text>
|
||||||
|
</view>
|
||||||
|
<view class="li-divider li-my-20"></view>
|
||||||
|
<view class="order-info li-px-30">
|
||||||
|
<view class="order-id li-flex li-items-center li-mb-15">
|
||||||
|
<text class="ri-barcode-line li-text-36 li-text-#666 li-mr-10"></text>
|
||||||
|
<text class="li-text-32 li-text-#333">JD202503050001</text>
|
||||||
|
</view>
|
||||||
|
<view class="li-flex li-justify-between li-text-30 li-text-#666 li-mb-10">
|
||||||
|
<text>操作人员：张三</text>
|
||||||
|
<text>负责仓库：北京仓</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品信息 -->
|
||||||
|
<view class="product-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white">
|
||||||
|
<view class="section-title li-mb-20">
|
||||||
|
<text class="ri-shopping-bag-line li-text-38 li-text-#0070F0 li-mr-10"></text>
|
||||||
|
<text class="li-text-36 li-text-#333">商品信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="product-card li-flex li-mb-30">
|
||||||
|
<image src="../../static/swiper/1.png" mode="aspectFill" class="product-image"></image>
|
||||||
|
<view class="product-info li-ml-20">
|
||||||
|
<view class="product-name li-text-32 li-text-#333 li-mb-10">示例商品名称</view>
|
||||||
|
<view class="product-code li-text-26 li-text-#999 li-mb-10">商品编码：SP202505126</view>
|
||||||
|
<view class="li-flex li-items-center li-justify-between">
|
||||||
|
<text class="li-text-28 li-text-#666">规格：默认</text>
|
||||||
|
<view class="product-quantity li-flex li-items-center">
|
||||||
|
<text class="li-text-28 li-text-#666 li-mr-10">数量：</text>
|
||||||
|
<text class="li-text-32 li-text-#0070F0">1</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="product-attrs">
|
||||||
|
<view class="attr-item li-flex li-justify-between li-mb-15">
|
||||||
|
<text class="li-text-28 li-text-#666">商品分类</text>
|
||||||
|
<text class="li-text-28 li-text-#333">电子产品</text>
|
||||||
|
</view>
|
||||||
|
<view class="attr-item li-flex li-justify-between li-mb-15">
|
||||||
|
<text class="li-text-28 li-text-#666">供应商</text>
|
||||||
|
<text class="li-text-28 li-text-#333">京东自营</text>
|
||||||
|
</view>
|
||||||
|
<view class="attr-item li-flex li-justify-between li-mb-15">
|
||||||
|
<text class="li-text-28 li-text-#666">单价</text>
|
||||||
|
<text class="li-text-28 li-text-#333">¥299.00</text>
|
||||||
|
</view>
|
||||||
|
<view class="attr-item li-flex li-justify-between li-mb-15">
|
||||||
|
<text class="li-text-28 li-text-#666">库存状态</text>
|
||||||
|
<text class="li-text-28 li-text-#07c160">正常</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 入库详情 -->
|
||||||
|
<view class="detail-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white">
|
||||||
|
<view class="section-title li-mb-20">
|
||||||
|
<text class="ri-information-line li-text-38 li-text-#0070F0 li-mr-10"></text>
|
||||||
|
<text class="li-text-36 li-text-#333">入库详情</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="detail-list">
|
||||||
|
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||||||
|
<text class="li-text-28 li-text-#666">入库单号</text>
|
||||||
|
<text class="li-text-28 li-text-#333">RK202503050001</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||||||
|
<text class="li-text-28 li-text-#666">入库方式</text>
|
||||||
|
<text class="li-text-28 li-text-#333">扫码入库</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||||||
|
<text class="li-text-28 li-text-#666">入库类型</text>
|
||||||
|
<text class="li-text-28 li-text-#333">普通入库</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||||||
|
<text class="li-text-28 li-text-#666">所属库位</text>
|
||||||
|
<text class="li-text-28 li-text-#333">A-12-03</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||||||
|
<text class="li-text-28 li-text-#666">入库备注</text>
|
||||||
|
<text class="li-text-28 li-text-#333">正常入库</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作时间轴 -->
|
||||||
|
<view class="timeline-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white li-mb-40">
|
||||||
|
<view class="section-title li-mb-20">
|
||||||
|
<text class="ri-time-line li-text-38 li-text-#0070F0 li-mr-10"></text>
|
||||||
|
<text class="li-text-36 li-text-#333">操作记录</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="timeline">
|
||||||
|
<view class="timeline-item">
|
||||||
|
<view class="timeline-dot active"></view>
|
||||||
|
<view class="timeline-content li-ml-20">
|
||||||
|
<view class="timeline-title li-text-30 li-text-#333">入库完成</view>
|
||||||
|
<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:34:56</view>
|
||||||
|
<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="timeline-line"></view>
|
||||||
|
|
||||||
|
<view class="timeline-item">
|
||||||
|
<view class="timeline-dot active"></view>
|
||||||
|
<view class="timeline-content li-ml-20">
|
||||||
|
<view class="timeline-title li-text-30 li-text-#333">商品确认</view>
|
||||||
|
<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:33:42</view>
|
||||||
|
<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="timeline-line"></view>
|
||||||
|
|
||||||
|
<view class="timeline-item">
|
||||||
|
<view class="timeline-dot active"></view>
|
||||||
|
<view class="timeline-content li-ml-20">
|
||||||
|
<view class="timeline-title li-text-30 li-text-#333">扫码录入</view>
|
||||||
|
<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:32:18</view>
|
||||||
|
<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部按钮区域 -->
|
||||||
|
<view class="footer-actions li-w-92% li-mx-auto li-flex li-justify-between li-mb-30">
|
||||||
|
<wd-button custom-class="action-btn secondary" @click="printDetail">打印详情</wd-button>
|
||||||
|
<wd-button custom-class="action-btn primary" @click="shareDetail">分享详情</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onLoad } from '@dcloudio/uni-app'
|
||||||
|
import { useNavigation } from '@/hooks/useNavigation'
|
||||||
|
// 使用导航 composable
|
||||||
|
const {
|
||||||
|
hasMultiplePages, // 是否有多个页面在路由栈中
|
||||||
|
isTabBarPage, // 当前页面是否为 tabBar 页面
|
||||||
|
checkRouteStack // 检查当前路由栈状态的方法
|
||||||
|
} = useNavigation()
|
||||||
|
|
||||||
|
|
||||||
|
// 打印详情
|
||||||
|
const printDetail = () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '打印功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分享详情
|
||||||
|
const shareDetail = () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const toPages = (item : any) => {
|
||||||
|
console.log(item);
|
||||||
|
switch (item.type) {
|
||||||
|
case 'nav':
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'home':
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
checkRouteStack()
|
||||||
|
console.log('入库详情页参数:', options)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: #f7f8fc;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-page {
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
|
||||||
|
// 导航栏背景
|
||||||
|
.nav-bg-layer {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(var(--status-bar-height) + 88rpx);
|
||||||
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||||
|
z-index: -1;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态卡片
|
||||||
|
.status-card {
|
||||||
|
background: linear-gradient(135deg, #f6fafe 0%, #edf6ff 100%);
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.status-header {
|
||||||
|
.status-icon {
|
||||||
|
color: #07c160;
|
||||||
|
font-size: 44rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
color: #07c160;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-time {
|
||||||
|
color: #999;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.li-divider {
|
||||||
|
height: 2rpx;
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 商品卡片
|
||||||
|
.product-section,
|
||||||
|
.detail-section,
|
||||||
|
.timeline-section {
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
.product-image {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-attrs,
|
||||||
|
.detail-list {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 时间轴
|
||||||
|
.timeline {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-dot {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ddd;
|
||||||
|
margin-top: 14rpx;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #0070F0;
|
||||||
|
box-shadow: 0 0 0 6rpx rgba(0, 112, 240, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-line {
|
||||||
|
position: relative;
|
||||||
|
width: 2rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background-color: #ddd;
|
||||||
|
margin-left: 9rpx;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部按钮
|
||||||
|
.footer-actions {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
width: 46%;
|
||||||
|
height: 85rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.secondary {
|
||||||
|
background: #ffffff !important;
|
||||||
|
color: #0070F0 !important;
|
||||||
|
border: 2rpx solid #0070F0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -56,8 +56,9 @@
|
||||||
<!-- 扫码模式 -->
|
<!-- 扫码模式 -->
|
||||||
<view v-if="activeMode === 0" class=" li-flex li-flex-col li-items-center">
|
<view v-if="activeMode === 0" class=" li-flex li-flex-col li-items-center">
|
||||||
<view class="scan-button-wrapper li-mt-50" @click="scanCode">
|
<view class="scan-button-wrapper li-mt-50" @click="scanCode">
|
||||||
<view class="scan-button li-flex li-items-center li-justify-center">
|
<view class="scan-button li-flex li-items-center li-justify-center" :class="{'btn-scanning': isScanning}">
|
||||||
<text class="ri-qr-scan-2-line li-text-90"></text>
|
<text class="ri-qr-scan-2-line li-text-90"></text>
|
||||||
|
<view class="scan-line" :class="{'scan-active': isScanning}"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="li-text-30 li-text-#666 li-mt-30">点击扫描二维码入库</view>
|
<view class="li-text-30 li-text-#666 li-mt-30">点击扫描二维码入库</view>
|
||||||
|
|
@ -116,7 +117,7 @@
|
||||||
|
|
||||||
<!-- 商品确认弹出框 -->
|
<!-- 商品确认弹出框 -->
|
||||||
<wd-popup v-model="show9" position="bottom" closable :safe-area-inset-bottom="true"
|
<wd-popup v-model="show9" position="bottom" closable :safe-area-inset-bottom="true"
|
||||||
custom-style="height: 500px;">
|
custom-style="height: auto; max-height: 80vh;">
|
||||||
<view class="product-confirm-popup">
|
<view class="product-confirm-popup">
|
||||||
<view class="product-header">
|
<view class="product-header">
|
||||||
<text class="ri-checkbox-circle-line li-text-44 li-text-#0070F0"></text>
|
<text class="ri-checkbox-circle-line li-text-44 li-text-#0070F0"></text>
|
||||||
|
|
@ -124,44 +125,61 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="product-content">
|
<view class="product-content">
|
||||||
<view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40">
|
<view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40">
|
||||||
<image src="../../static/swiper/1.png" mode="aspectFill" class="li-w-130 li-h-130 li-rd-20"></image>
|
<view class="image-container" @click="previewImage">
|
||||||
|
<image src="../../static/swiper/1.png" mode="aspectFill" class="product-img"></image>
|
||||||
|
<view class="image-overlay">
|
||||||
|
<text class="ri-zoom-in-line li-text-44 li-text-white"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<view class="li-ml-20 li-flex li-flex-col li-justify-center">
|
<view class="li-ml-20 li-flex li-flex-col li-justify-center">
|
||||||
<view class="li-flex li-items-center">
|
<view class="li-flex li-flex-col">
|
||||||
<text class="li-text-30 li-text-#333 li-mr-10">x</text>
|
<view class="li-flex li-items-center">
|
||||||
<text class="li-text-36 li-text-#0070F0">1</text>
|
<text class="li-text-30 li-text-#333 li-mr-10">数量:</text>
|
||||||
|
<text class="li-text-36 li-text-#0070F0">1</text>
|
||||||
|
</view>
|
||||||
|
<view class="li-text-24 li-text-#999 li-mt-10">预计入库时间: 今天</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="product-info li-mt-30 li-px-30">
|
<view class="product-info li-mt-30 li-px-30">
|
||||||
<view class="info-item li-flex li-items-center li-mb-20">
|
<view class="info-item li-flex li-items-center li-mb-20">
|
||||||
<text
|
<text
|
||||||
class="ri-box-2-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
class="ri-box-2-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
||||||
<!-- 调整图标与文字对齐 -->
|
<view class="info-content">
|
||||||
<text class="li-text-30 li-text-#333">商品名称: 示例商品</text>
|
<text class="li-text-30 li-text-#333">商品名称: 示例商品</text>
|
||||||
|
<text class="li-text-24 li-text-#999 li-mt-4">商品编码: SP202505126</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item li-flex li-items-center li-mb-20">
|
<view class="info-item li-flex li-items-center li-mb-20">
|
||||||
<text
|
<text
|
||||||
class="ri-barcode-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
class="ri-barcode-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
||||||
<!-- 调整图标与文字对齐 -->
|
<view class="info-content">
|
||||||
<text class="li-text-30 li-text-#333">订单号: 123456789</text>
|
<text class="li-text-30 li-text-#333">订单号: 123456789</text>
|
||||||
|
<text class="li-text-24 li-text-#999 li-mt-4">来源: 京东自营</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item li-flex li-items-center li-mb-20">
|
<view class="info-item li-flex li-items-center li-mb-20">
|
||||||
<text
|
<text
|
||||||
class="ri-calendar-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
class="ri-calendar-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
||||||
<!-- 调整图标与文字对齐 -->
|
<view class="info-content">
|
||||||
<text class="li-text-30 li-text-#333">入库时间: 2023-10-01 12:00</text>
|
<text class="li-text-30 li-text-#333">入库时间: 2023-10-01 12:00</text>
|
||||||
|
<text class="li-text-24 li-text-#999 li-mt-4">类型: 普通入库</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item li-flex li-items-center li-mb-20">
|
<view class="info-item li-flex li-items-center li-mb-20">
|
||||||
<text
|
<text
|
||||||
class="ri-user-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
class="ri-user-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
|
||||||
<!-- 调整图标与文字对齐 -->
|
<view class="info-content">
|
||||||
<text class="li-text-30 li-text-#333">操作人: 张三</text>
|
<text class="li-text-30 li-text-#333">操作人: 张三</text>
|
||||||
|
<text class="li-text-24 li-text-#999 li-mt-4">负责仓库: 北京仓</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="confirm-button li-px-30 li-mt-40">
|
<view class="action-buttons li-px-30 li-mt-20">
|
||||||
<wd-button custom-class="custom-shadow1" type="primary" block
|
<wd-button custom-class="custom-shadow1" type="primary" block :loading="isConfirming"
|
||||||
@click="confirmProduct">确认入库</wd-button>
|
@click="confirmProduct">{{ isConfirming ? '处理中...' : '确认入库' }}</wd-button>
|
||||||
|
<view class="li-text-center li-text-28 li-text-#999 li-mt-15 li-pb-10" @click="show9 = false">稍后处理</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</wd-popup>
|
</wd-popup>
|
||||||
|
|
@ -186,6 +204,8 @@
|
||||||
const activeMode = ref(0) // 0: 扫码模式, 1: 手动输入模式
|
const activeMode = ref(0) // 0: 扫码模式, 1: 手动输入模式
|
||||||
const continuousMode = ref(false) // 是否开启连续入库模式
|
const continuousMode = ref(false) // 是否开启连续入库模式
|
||||||
const orderNumber = ref('') // 手动输入的订单号
|
const orderNumber = ref('') // 手动输入的订单号
|
||||||
|
const isScanning = ref(false) // 控制扫描动画
|
||||||
|
const isConfirming = ref(false) // 控制确认动画
|
||||||
|
|
||||||
// 入库记录
|
// 入库记录
|
||||||
const verificationRecords = ref([
|
const verificationRecords = ref([
|
||||||
|
|
@ -201,8 +221,16 @@
|
||||||
|
|
||||||
// 扫码入库
|
// 扫码入库
|
||||||
const scanCode = () => {
|
const scanCode = () => {
|
||||||
show9.value = true
|
// 激活扫描动画
|
||||||
return
|
isScanning.value = true;
|
||||||
|
|
||||||
|
// 延迟显示弹窗并停止动画
|
||||||
|
setTimeout(() => {
|
||||||
|
isScanning.value = false;
|
||||||
|
show9.value = true;
|
||||||
|
}, 800);
|
||||||
|
|
||||||
|
return;
|
||||||
uni.scanCode({
|
uni.scanCode({
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
handleVerification(res.result)
|
handleVerification(res.result)
|
||||||
|
|
@ -214,7 +242,33 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const confirmProduct = () => {
|
const confirmProduct = () => {
|
||||||
show9.value = false
|
// 添加动画效果和成功提示
|
||||||
|
isConfirming.value = true;
|
||||||
|
|
||||||
|
// 模拟API确认时间
|
||||||
|
setTimeout(() => {
|
||||||
|
isConfirming.value = false;
|
||||||
|
show9.value = false;
|
||||||
|
|
||||||
|
// 显示成功提示并添加记录
|
||||||
|
Toast.success('商品入库成功');
|
||||||
|
|
||||||
|
// 如果不是连续模式，则显示入库成功结果
|
||||||
|
if (!continuousMode.value) {
|
||||||
|
// 可以在这里跳转到详情页或显示其他结果
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: `/pagesA/warehousing/detail?code=123456789`
|
||||||
|
// });
|
||||||
|
} else {
|
||||||
|
// 在连续模式下添加一条记录
|
||||||
|
const newRecord = {
|
||||||
|
orderNumber: '123456789',
|
||||||
|
time: formatDateTime(new Date()),
|
||||||
|
status: 'success'
|
||||||
|
};
|
||||||
|
verificationRecords.value.unshift(newRecord);
|
||||||
|
}
|
||||||
|
}, 800);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 提交订单号入库
|
// 提交订单号入库
|
||||||
|
|
@ -311,6 +365,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 打开图片预览
|
||||||
|
const previewImage = () => {
|
||||||
|
uni.previewImage({
|
||||||
|
urls: ['../../static/swiper/1.png'],
|
||||||
|
current: 0,
|
||||||
|
indicator: 'number',
|
||||||
|
loop: false,
|
||||||
|
success: () => {
|
||||||
|
console.log('预览成功');
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('预览失败', err);
|
||||||
|
// 失败后的备选方案
|
||||||
|
Toast.info('图片预览加载失败');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
checkRouteStack()
|
checkRouteStack()
|
||||||
})
|
})
|
||||||
|
|
@ -341,6 +413,7 @@
|
||||||
width: 300rpx;
|
width: 300rpx;
|
||||||
height: 300rpx;
|
height: 300rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
animation: pulse 2s ease-in-out infinite;
|
||||||
|
|
||||||
.scan-button {
|
.scan-button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -350,23 +423,149 @@
|
||||||
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
|
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
|
||||||
color: white;
|
color: white;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.btn-scanning {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 4rpx 25rpx rgba(56, 165, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||||
|
animation: scanLight 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.95);
|
transform: scale(0.92);
|
||||||
box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.2);
|
box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.scanning {
|
||||||
|
animation: scanning 0.8s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ri-qr-scan-2-line {
|
||||||
|
animation: iconPulse 1.5s ease-in-out infinite alternate;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scan-line {
|
||||||
|
position: absolute;
|
||||||
|
width: 80%;
|
||||||
|
height: 2rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
top: 50%;
|
||||||
|
left: 10%;
|
||||||
|
animation: scanAnimation 2s ease-in-out infinite;
|
||||||
|
opacity: 0.2;
|
||||||
|
|
||||||
|
&.scan-active {
|
||||||
|
opacity: 1;
|
||||||
|
animation: scanAnimation 0.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10rpx;
|
top: -15rpx;
|
||||||
left: -10rpx;
|
left: -15rpx;
|
||||||
right: -10rpx;
|
right: -15rpx;
|
||||||
bottom: -10rpx;
|
bottom: -15rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid rgba(56, 165, 255, 0.3);
|
||||||
|
z-index: -1;
|
||||||
|
animation: ripple 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -8rpx;
|
||||||
|
left: -8rpx;
|
||||||
|
right: -8rpx;
|
||||||
|
bottom: -8rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2rpx solid rgba(56, 165, 255, 0.2);
|
border: 2rpx solid rgba(56, 165, 255, 0.2);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
animation: ripple 2s linear 1s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ripple {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1.2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10rpx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scanLight {
|
||||||
|
0% {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
50%, 100% {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes iconPulse {
|
||||||
|
0% {
|
||||||
|
opacity: 0.7;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scanAnimation {
|
||||||
|
0% {
|
||||||
|
top: 20%;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 80%;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scanning {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.92);
|
||||||
|
box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.35);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -439,24 +638,86 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-content {
|
.product-content {
|
||||||
|
height: 850rpx ;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
position: relative;
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.product-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
.product-img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.product-info {
|
.product-info {
|
||||||
.info-item {
|
.info-item {
|
||||||
padding: 20rpx 0; // 调整元素间距
|
padding: 20rpx 0;
|
||||||
border-bottom: 1rpx solid #eee;
|
border-bottom: 1rpx solid #eee;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: rgba(0, 112, 240, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm-button {
|
.action-buttons {
|
||||||
position: absolute;
|
position: sticky;
|
||||||
bottom: 30rpx;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 0 30rpx; // 调整确认按钮位置和样式
|
/* #ifdef APP-PLUS || H5 */
|
||||||
|
padding: 20rpx 30rpx calc(20rpx + constant(safe-area-inset-bottom));
|
||||||
|
padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef MP-WEIXIN */
|
||||||
|
padding: 20rpx 30rpx 0;
|
||||||
|
/* #endif */
|
||||||
|
border-top: 1rpx solid #f5f5f5;
|
||||||
|
background: white;
|
||||||
|
z-index: 9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,170 +1,3 @@
|
||||||
|
|
||||||
.li-bg-white{background-color:rgb(255,255,255)}
|
|
||||||
.li-flex{display:flex}
|
|
||||||
.li-flex-center{display:flex;align-items:center;justify-content:center}
|
|
||||||
.li-flex-col{flex-direction:column}
|
|
||||||
.li-h-200{height:200rpx}
|
|
||||||
.li-items-center{align-items:center}
|
|
||||||
.li-justify-between{justify-content:space-between}
|
|
||||||
.li-justify-center{justify-content:center}
|
|
||||||
.li-mb-20{margin-bottom:20rpx}
|
|
||||||
.li-mb-30{margin-bottom:30rpx}
|
|
||||||
.li-mb-8{margin-bottom:8rpx}
|
|
||||||
.li-ml-10{margin-left:10rpx}
|
|
||||||
.li-ml-15{margin-left:15rpx}
|
|
||||||
.li-mr-10{margin-right:10rpx}
|
|
||||||
.li-mr-25{margin-right:25rpx}
|
|
||||||
.li-mr-4{margin-right:4rpx}
|
|
||||||
.li-mt-10{margin-top:10rpx}
|
|
||||||
.li-mt-20{margin-top:20rpx}
|
|
||||||
.li-mt-30{margin-top:30rpx}
|
|
||||||
.li-mt-40{margin-top:40rpx}
|
|
||||||
.li-mt-50{margin-top:50rpx}
|
|
||||||
.li-mt-60{margin-top:60rpx}
|
|
||||||
.li-mt-8{margin-top:8rpx}
|
|
||||||
.li-mx-auto{margin-left:auto;margin-right:auto}
|
|
||||||
.li-px-30{padding-left:30rpx;padding-right:30rpx}
|
|
||||||
.li-py-25{padding-top:25rpx;padding-bottom:25rpx}
|
|
||||||
.li-py-40{padding-top:40rpx;padding-bottom:40rpx}
|
|
||||||
.li-rd-20{border-radius:20rpx}
|
|
||||||
.li-text-0070F0-color{color:rgb(0,112,240)}
|
|
||||||
.li-text-009aff-color{color:rgb(0,154,255)}
|
|
||||||
.li-text-100{font-size:100rpx}
|
|
||||||
.li-text-24{font-size:24rpx}
|
|
||||||
.li-text-28{font-size:28rpx}
|
|
||||||
.li-text-30{font-size:30rpx}
|
|
||||||
.li-text-32{font-size:32rpx}
|
|
||||||
.li-text-333-color{color:rgb(51,51,51)}
|
|
||||||
.li-text-34{font-size:34rpx}
|
|
||||||
.li-text-36{font-size:36rpx}
|
|
||||||
.li-text-42{font-size:42rpx}
|
|
||||||
.li-text-48{font-size:48rpx}
|
|
||||||
.li-text-55{font-size:55rpx}
|
|
||||||
.li-text-666-color{color:rgb(102,102,102)}
|
|
||||||
.li-text-70{font-size:70rpx}
|
|
||||||
.li-text-90{font-size:90rpx}
|
|
||||||
.li-text-999-color{color:rgb(153,153,153)}
|
|
||||||
.li-text-ddd-color{color:rgb(221,221,221)}
|
|
||||||
.li-w-200{width:200rpx}
|
|
||||||
.li-w-full-90{width:90%}
|
|
||||||
.li-w-full-92{width:92%}
|
|
||||||
.items-center{align-items:center}
|
|
||||||
.justify-end{justify-content:end}
|
|
||||||
.justify-center{justify-content:center}
|
|
||||||
.justify-between{justify-content:space-between}
|
|
||||||
.li-font-bold{font-weight:bold}
|
|
||||||
.li-h-160{height:160rpx}
|
|
||||||
.li-h-220{height:220rpx}
|
|
||||||
.li-h-58{height:58rpx}
|
|
||||||
.li-justify-around{justify-content:space-around}
|
|
||||||
.li-ml-22{margin-left:22rpx}
|
|
||||||
.li-ml-25{margin-left:25rpx}
|
|
||||||
.li-ml-35{margin-left:35rpx}
|
|
||||||
.li-mr-5{margin-right:5rpx}
|
|
||||||
.li-mt-12{margin-top:12rpx}
|
|
||||||
.li-mt-14{margin-top:14rpx}
|
|
||||||
.li-mt-15{margin-top:15rpx}
|
|
||||||
.li-pt-15{padding-top:15rpx}
|
|
||||||
.li-px-25{padding-left:25rpx;padding-right:25rpx}
|
|
||||||
.li-px-50{padding-left:50rpx;padding-right:50rpx}
|
|
||||||
.li-rd-10{border-radius:10rpx}
|
|
||||||
.li-rd-15{border-radius:15rpx}
|
|
||||||
.li-text-010B3E-color{color:rgb(1,11,62)}
|
|
||||||
.li-text-22{font-size:22rpx}
|
|
||||||
.li-text-26{font-size:26rpx}
|
|
||||||
.li-text-343333-color{color:rgb(52,51,51)}
|
|
||||||
.li-text-43{font-size:43rpx}
|
|
||||||
.li-text-AFB2B8-color{color:rgb(175,178,184)}
|
|
||||||
.li-text-B1B0B0-color{color:rgb(177,176,176)}
|
|
||||||
.li-text-F42429-color{color:rgb(244,36,41)}
|
|
||||||
.li-w-310{width:310rpx}
|
|
||||||
.li-w-58{width:58rpx}
|
|
||||||
.li-w-full-70{width:70%}
|
|
||||||
.li-w-full-88{width:88%}
|
|
||||||
.pt-10{padding-top:10rpx}
|
|
||||||
.li-h-90{height:90rpx}
|
|
||||||
.li-ml-30{margin-left:30rpx}
|
|
||||||
.li-mr-6{margin-right:6rpx}
|
|
||||||
.li-mt-300-important{margin-top:300rpx !important}
|
|
||||||
.li-pt-2{padding-top:2rpx}
|
|
||||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
|
||||||
.li-text-25{font-size:25rpx}
|
|
||||||
.li-text-52{font-size:52rpx}
|
|
||||||
.li-w-90{width:90rpx}
|
|
||||||
.li-w-full-80{width:80%}
|
|
||||||
.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
|
|
||||||
.bg-FFFFFF{background-color:rgb(255,255,255)}
|
|
||||||
.bg-f9f9f9{background-color:rgb(249,249,249)}
|
|
||||||
.li-ml-6{margin-left:6rpx}
|
|
||||||
.li-p-15{padding:15rpx}
|
|
||||||
.li-pb-15{padding-bottom:15rpx}
|
|
||||||
.li-pb-30{padding-bottom:30rpx}
|
|
||||||
.li-pt-25{padding-top:25rpx}
|
|
||||||
.li-pt-4{padding-top:4rpx}
|
|
||||||
.li-text-333333-color{color:rgb(51,51,51)}
|
|
||||||
.li-text-9a9a9a-color{color:rgb(154,154,154)}
|
|
||||||
.li-text-ff0000-color{color:rgb(255,0,0)}
|
|
||||||
.li-w-full-100{width:100%}
|
|
||||||
.li-h-110{height:110rpx}
|
|
||||||
.li-items-start{align-items:start}
|
|
||||||
.li-mb-12{margin-bottom:12rpx}
|
|
||||||
.li-mr-12{margin-right:12rpx}
|
|
||||||
.li-mr-3{margin-right:3rpx}
|
|
||||||
.li-mt-90{margin-top:90rpx}
|
|
||||||
.li-pb-25{padding-bottom:25rpx}
|
|
||||||
.li-pl-20{padding-left:20rpx}
|
|
||||||
.li-pl-30{padding-left:30rpx}
|
|
||||||
.li-pr-30{padding-right:30rpx}
|
|
||||||
.li-pt-20{padding-top:20rpx}
|
|
||||||
.li-pt-30{padding-top:30rpx}
|
|
||||||
.li-py-6{padding-top:6rpx;padding-bottom:6rpx}
|
|
||||||
.li-text-40{font-size:40rpx}
|
|
||||||
.li-text-5f5f5f-color{color:rgb(95,95,95)}
|
|
||||||
.li-text-right{text-align:right}
|
|
||||||
.li-w-110{width:110rpx}
|
|
||||||
.li-w-400{width:400rpx}
|
|
||||||
.li-w-full-85{width:85%}
|
|
||||||
.overflow-hidden{overflow:hidden}
|
|
||||||
.li-mb-25{margin-bottom:25rpx}
|
|
||||||
.li-h-100{height:100rpx}
|
|
||||||
.li-mr-30{margin-right:30rpx}
|
|
||||||
.li-rd-full-50{border-radius:50%}
|
|
||||||
.li-text-35{font-size:35rpx}
|
|
||||||
.li-text-38{font-size:38rpx}
|
|
||||||
.li-text-46{font-size:46rpx}
|
|
||||||
.li-w-100{width:100rpx}
|
|
||||||
|
|
||||||
.li-h-240{height:240rpx}
|
|
||||||
.li-h-250{height:250rpx}
|
|
||||||
.li-h-50{height:50rpx}
|
|
||||||
.li-h-60{height:60rpx}
|
|
||||||
.li-items-end{align-items:end}
|
|
||||||
.li-justify-start{justify-content:start}
|
|
||||||
.li-mb-2{margin-bottom:2rpx}
|
|
||||||
.li-ml-4{margin-left:4rpx}
|
|
||||||
.li-ml-50{margin-left:50rpx}
|
|
||||||
.li-mr-50{margin-right:50rpx}
|
|
||||||
.li-mt-26{margin-top:26rpx}
|
|
||||||
.li-mt-6{margin-top:6rpx}
|
|
||||||
.li-mx-20{margin-left:20rpx;margin-right:20rpx}
|
|
||||||
.li-mx-40{margin-left:40rpx;margin-right:40rpx}
|
|
||||||
.li-pb-10{padding-bottom:10rpx}
|
|
||||||
.li-pb-14{padding-bottom:14rpx}
|
|
||||||
.li-pb-20{padding-bottom:20rpx}
|
|
||||||
.li-pt-8{padding-top:8rpx}
|
|
||||||
.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
|
|
||||||
.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
|
|
||||||
.li-text-000000-color{color:rgb(0,0,0)}
|
|
||||||
.li-text-19171B-color{color:rgb(25,23,27)}
|
|
||||||
.li-text-20{font-size:20rpx}
|
|
||||||
.li-text-706e70-color{color:rgb(112,110,112)}
|
|
||||||
.li-text-B2B2B2-color{color:rgb(178,178,178)}
|
|
||||||
.li-text-BBBDDA-color{color:rgb(187,189,218)}
|
|
||||||
.li-text-F2F7FD-color{color:rgb(242,247,253)}
|
|
||||||
.li-text-F8C883-color{color:rgb(248,200,131)}
|
|
||||||
.li-text-FFFFFF-color{color:rgb(255,255,255)}
|
|
||||||
.li-text-b1bbc7-color{color:rgb(177,187,199)}
|
|
||||||
.li-w-240{width:240rpx}
|
|
||||||
.li-w-50{width:50rpx}
|
|
||||||
.li-w-60{width:60rpx}
|
|
||||||
.li-w-full-94{width:94%}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue