核销中心优化等(home)
This commit is contained in:
parent
2ca50ae86b
commit
71a2d530cc
11
pages.json
11
pages.json
|
|
@ -148,6 +148,15 @@
|
|||
"navigationBarTitleText": "核销历史记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "verification/historyDetail",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "核销历史记录详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "message/index",
|
||||
"style": {
|
||||
|
|
@ -163,7 +172,7 @@
|
|||
"current": 0, // 当前激活的条件，默认为 0
|
||||
"list": [{
|
||||
"name": "", // 条件名称
|
||||
"path": "pagesA/warehousing/index", // 要打开的页面路径
|
||||
"path": "pagesA/my_order/list", // 要打开的页面路径
|
||||
"query": "" // 可选的页面参数
|
||||
}]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,150 +1,173 @@
|
|||
<template>
|
||||
<view class="li-message-page">
|
||||
<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"
|
||||
<view class="navbar-content">
|
||||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line back-icon"
|
||||
@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>
|
||||
<text class="li-text-42">工单详情</text>
|
||||
<text class="page-title">工单详情</text>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
<!-- 导航栏背景 -->
|
||||
<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="li-mb-20">
|
||||
<view class="li-flex li-items-center li-text-#5f5f5f li-pl-20 li-pt-20 li-text-28 li-mb-12">
|
||||
<text class="ri-todo-line li-mr-3"></text>
|
||||
<text>{{ticketInfo.ticket_no}}</text>
|
||||
<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
|
||||
|
||||
<!-- 工单状态卡片 -->
|
||||
<view class="ticket-card">
|
||||
<view class="ticket-header">
|
||||
<view class="ticket-info">
|
||||
<view class="ticket-id">
|
||||
<text class="ri-file-list-line id-icon"></text>
|
||||
<text class="id-text">{{ticketInfo.ticket_no}}</text>
|
||||
<text class="ri-file-copy-line copy-icon"></text>
|
||||
</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 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 == 'F6'">维修</text>
|
||||
</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>
|
||||
<!-- <text class="ri-close-circle-fill li-text-#ff0000"></text> -->
|
||||
<view v-if="ticketInfo.status == 0" class="li-flex li-flex-col">
|
||||
<text class="li-text-32">待接单</text>
|
||||
<text class="li-text-28">待接单</text>
|
||||
|
||||
<view class="ticket-status">
|
||||
<view class="status-icon" :class="'status-'+ticketInfo.status">
|
||||
<text v-if="ticketInfo.status == 2 || ticketInfo.status == 1" class="ri-checkbox-circle-fill"></text>
|
||||
<text v-else-if="ticketInfo.status == 3" class="ri-close-circle-fill"></text>
|
||||
<text v-else class="ri-time-line"></text>
|
||||
</view>
|
||||
<view v-if="ticketInfo.status == 1" class="li-flex li-flex-col">
|
||||
<text class="li-text-32">已接单</text>
|
||||
<text class="li-text-28">已接单</text>
|
||||
</view>
|
||||
<view v-if="ticketInfo.status == 2" class="li-flex li-flex-col">
|
||||
<text class="li-text-32">已完结</text>
|
||||
<text class="li-text-28">已完结</text>
|
||||
</view>
|
||||
<view v-if="ticketInfo.status == 3" class="li-flex li-flex-col">
|
||||
<text class="li-text-32">已取消</text>
|
||||
<text class="li-text-28">已取消</text>
|
||||
<view class="status-text">
|
||||
<text class="status-title">
|
||||
{{ticketInfo.status == 0 ? '待接单' :
|
||||
ticketInfo.status == 1 ? '已接单' :
|
||||
ticketInfo.status == 2 ? '已完结' :
|
||||
ticketInfo.status == 3 ? '已取消' : ''}}
|
||||
</text>
|
||||
<text class="status-desc">
|
||||
{{ticketInfo.status == 0 ? '等待服务人员接单' :
|
||||
ticketInfo.status == 1 ? '服务人员已接单' :
|
||||
ticketInfo.status == 2 ? '工单已完成' :
|
||||
ticketInfo.status == 3 ? '工单已取消' : ''}}
|
||||
</text>
|
||||
</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="li-pl-30 li-pt-30">联系信息</view>
|
||||
<view class="li-pl-30 li-pr-30 li-mt-30">
|
||||
<view class="li-flex li-items-start li-justify-between li-text-28">
|
||||
<text class="li-w-150 li-text-#9a9a9a">小区名称</text>
|
||||
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo?.order?.village_name}}</text>
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<text class="ri-user-3-line title-icon"></text>
|
||||
<text>联系信息</text>
|
||||
</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>
|
||||
<text class="li-w-400 li-single-line li-text-right">{{ticketInfo.order.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 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="li-flex li-items-center li-w-400 li-single-line justify-between">
|
||||
<!-- 左侧留空 -->
|
||||
<view></view>
|
||||
<!-- 右侧内容 -->
|
||||
<view class="li-flex li-items-center">
|
||||
<text class="ri-phone-line li-text-#009aff li-mr-6"></text>
|
||||
<text>{{ticketInfo.order.mobile}}</text>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="item-label">联系人</text>
|
||||
<text class="item-value">{{ticketInfo?.order?.name}}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="item-label">联系电话</text>
|
||||
<view class="phone-value">
|
||||
<text class="ri-phone-line phone-icon"></text>
|
||||
<text class="phone-number">{{ticketInfo?.order?.mobile}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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 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 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 class="li-pl-30 li-pt-30">报修信息</view>
|
||||
<view class="li-pl-30 li-pr-30 li-mt-30">
|
||||
<view class="li-flex li-items-center li-justify-between li-text-28">
|
||||
<text class="li-w-150 li-text-#9a9a9a">报修位置</text>
|
||||
<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 v-if="ticketInfo?.type == 'F6'" class="info-card">
|
||||
<view class="card-title">
|
||||
<text class="ri-tools-line title-icon"></text>
|
||||
<text>报修信息</text>
|
||||
</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>
|
||||
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo.order.content}}</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 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 class="li-flex li-flex-col li-w-400 justify-end">
|
||||
<view class="li-flex justify-between li-items-center li-mt-20">
|
||||
<!-- 左侧留空 -->
|
||||
<view></view>
|
||||
<view class="li-flex li-items-center">
|
||||
<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">
|
||||
|
||||
<view class="info-item">
|
||||
<text class="item-label">问题描述</text>
|
||||
<text class="item-value">{{ticketInfo?.order?.content}}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="ticketInfo?.order?.images" class="info-item">
|
||||
<text class="item-label">现场照片</text>
|
||||
<view class="scene-images">
|
||||
<image v-for="(item) in ticketInfo?.order?.images?.split(',')" :key="item"
|
||||
class="scene-image"
|
||||
:src="item"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
</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="li-pl-30 li-pt-30">工单记录</view>
|
||||
<view class="li-pl-30 li-pr-30 li-mt-30">
|
||||
<!-- todo 此处最好用时间线展示 类似物流信息 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<text class="ri-history-line title-icon"></text>
|
||||
<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>
|
||||
<!-- 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></view>
|
||||
<view class="li-flex li-items-center li-mr-30">
|
||||
<view>
|
||||
<!-- todo 退单要进行二次确认 -->
|
||||
<wd-button :round="false" type="error">退单</wd-button>
|
||||
|
||||
<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 class="li-ml-15">
|
||||
<!-- todo 结单根据要求，是否跳转到结单页，拍照+填写信息 -->
|
||||
<wd-button :round="false">结单</wd-button>
|
||||
</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 class="footer-actions">
|
||||
<view class="action-buttons">
|
||||
<wd-button class="action-btn cancel-btn" type="error" :round="true">退单</wd-button>
|
||||
<wd-button class="action-btn confirm-btn" :round="true">结单</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -195,13 +218,13 @@
|
|||
}
|
||||
})
|
||||
|
||||
const loadInfo = async (ticket_id : string) => {
|
||||
const loadInfo = async (ticket_id) => {
|
||||
const res = await myTicketInfo({ ticket_id })
|
||||
ticketInfo.value = res.data
|
||||
}
|
||||
|
||||
// 状态文字配置
|
||||
const getStatusText = (status : number) => {
|
||||
const getStatusText = (status) => {
|
||||
const textMap = {
|
||||
1: '待配送',
|
||||
2: '已完成',
|
||||
|
|
@ -211,7 +234,7 @@
|
|||
return textMap[status] || '未知状态'
|
||||
}
|
||||
|
||||
const toPages = (item : any) => {
|
||||
const toPages = (item) => {
|
||||
console.log(item);
|
||||
switch (item.type) {
|
||||
case 'nav':
|
||||
|
|
@ -230,36 +253,43 @@
|
|||
}
|
||||
|
||||
|
||||
const handleAction = (action : string) => {
|
||||
const handleAction = (action) => {
|
||||
console.log(action);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.li-message-page {
|
||||
.detail-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(217, 237, 255, 0.9) 0%,
|
||||
rgba(217, 237, 255, 0.9) 20%,
|
||||
rgba(207, 207, 207, 0.2) 40%,
|
||||
rgba(207, 207, 207, 0.2) 60%,
|
||||
rgba(207, 207, 207, 0.2) 80%,
|
||||
rgba(207, 207, 207, 0.2) 100%);
|
||||
rgba(233, 245, 255, 0.9) 0%,
|
||||
rgba(245, 250, 255, 0.9) 30%,
|
||||
rgba(245, 250, 255, 0.9) 70%,
|
||||
rgba(233, 245, 255, 0.9) 100%);
|
||||
background-attachment: fixed;
|
||||
/* #ifdef H5 */
|
||||
padding-bottom: 160rpx;
|
||||
/* #endif */
|
||||
/* #ifdef APP-PLUS */
|
||||
padding-bottom: 180rpx;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
padding-bottom: 170rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
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 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -274,14 +304,330 @@
|
|||
z-index: 998;
|
||||
}
|
||||
|
||||
.li-task-card {
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
/* 卡片通用样式 */
|
||||
.ticket-card, .info-card {
|
||||
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 {
|
||||
width: 160rpx !important;
|
||||
height: 65rpx !important;
|
||||
min-width: 160rpx !important;
|
||||
width: auto !important;
|
||||
height: 80rpx !important;
|
||||
min-width: 180rpx !important;
|
||||
margin-right: 20rpx !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -34,41 +34,63 @@
|
|||
<!-- 工单列表 -->
|
||||
<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})"
|
||||
class="li-task-card li-bg-white li-mt-20 li-rd-15 li-pt-25 li-pb-30 li-px-30">
|
||||
<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">
|
||||
<text class="ri-todo-line sli-mr-3"></text>
|
||||
{{item.ticket_no}}
|
||||
<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
|
||||
class="order-card">
|
||||
<!-- 订单头部 -->
|
||||
<view class="order-header">
|
||||
<view class="order-id">
|
||||
<text class="ri-file-list-line id-icon"></text>
|
||||
<text class="id-text">{{item.ticket_no}}</text>
|
||||
<text class="ri-file-copy-line copy-icon"></text>
|
||||
</view>
|
||||
<wd-tag custom-class="space" :color="getStatusColor(item.status)"
|
||||
:bg-color="getStatusBgColor(item.status)">
|
||||
<view class="order-status" :style="{
|
||||
color: getStatusColor(item.status),
|
||||
backgroundColor: getStatusBgColor(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>
|
||||
</view>
|
||||
|
||||
<!-- 订单内容 -->
|
||||
<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 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 class="info-row">
|
||||
<text class="row-label">小区名称</text>
|
||||
<text class="row-value">{{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.mobile}}</text>
|
||||
|
||||
<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 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>
|
||||
|
||||
<!-- 订单底部 -->
|
||||
<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>
|
||||
|
|
@ -221,7 +243,7 @@
|
|||
poolList()
|
||||
}
|
||||
|
||||
const toPages = (item : any) => {
|
||||
const toPages = (item) => {
|
||||
console.log(item);
|
||||
switch (item.type) {
|
||||
case 'nav':
|
||||
|
|
@ -245,7 +267,7 @@
|
|||
}
|
||||
|
||||
// 状态颜色配置
|
||||
const getStatusColor = (status : number) => {
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
0: '#ff9d00', // 待配送
|
||||
1: '#37A5FF', // 未入库
|
||||
|
|
@ -256,7 +278,7 @@
|
|||
}
|
||||
|
||||
// 状态背景色配置
|
||||
const getStatusBgColor = (status : number) => {
|
||||
const getStatusBgColor = (status) => {
|
||||
const bgColorMap = {
|
||||
0: '#fff6e9', // 待配送
|
||||
1: '#e8f4ff', // 未入库
|
||||
|
|
@ -267,7 +289,7 @@
|
|||
}
|
||||
|
||||
// 状态文字配置
|
||||
const getStatusText = (status : number) => {
|
||||
const getStatusText = (status) => {
|
||||
const textMap = {
|
||||
0: '待接单',
|
||||
1: '待完成',
|
||||
|
|
@ -277,7 +299,7 @@
|
|||
return textMap[status] || '未知状态'
|
||||
}
|
||||
|
||||
const handleStatusChange = (id : any) => {
|
||||
const handleStatusChange = (id) => {
|
||||
query.value.page = 1
|
||||
query.value.status = id
|
||||
taskList.value = []
|
||||
|
|
@ -363,14 +385,190 @@
|
|||
}
|
||||
|
||||
|
||||
.li-task-card {
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
.order-card {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.99);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.custom-shadow {
|
||||
color: #ffffff !important;
|
||||
background: linear-gradient(to right, #7bbfff, #009aff) !important;
|
||||
/* 工单头部 */
|
||||
.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 {
|
||||
|
|
@ -385,7 +583,7 @@
|
|||
::v-deep .space-check {
|
||||
padding: 10rpx 40rpx !important;
|
||||
margin-right: 20rpx !important;
|
||||
border-radius: 10rpx !important;
|
||||
border-radius: 30rpx !important;
|
||||
font-size: 24rpx !important;
|
||||
transition: all 0.3s ease;
|
||||
color: #ffffff !important;
|
||||
|
|
@ -399,7 +597,7 @@
|
|||
::v-deep .space-checkOut {
|
||||
padding: 10rpx 40rpx !important;
|
||||
margin-right: 20rpx !important;
|
||||
border-radius: 10rpx !important;
|
||||
border-radius: 30rpx !important;
|
||||
font-size: 24rpx !important;
|
||||
transition: all 0.3s ease;
|
||||
color: #4c4c4c !important;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<!-- 历史记录列表 -->
|
||||
<view class="li-w-92% li-mx-auto li-mt-30">
|
||||
<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">
|
||||
<view class="li-flex li-flex-col">
|
||||
<view class="li-flex li-items-center">
|
||||
|
|
@ -130,6 +130,12 @@
|
|||
},
|
||||
])
|
||||
|
||||
const btnDetail = ()=>{
|
||||
uni.navigateTo({
|
||||
url:'/pagesA/verification/historyDetail'
|
||||
})
|
||||
}
|
||||
|
||||
// 过滤后的历史记录
|
||||
const filteredRecords = computed(() => {
|
||||
if (!searchKeyword.value) return records.value
|
||||
|
|
|
|||
|
|
@ -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 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>
|
||||
<view class="scan-line" :class="{'scan-active': isScanning}"></view>
|
||||
</view>
|
||||
</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"
|
||||
custom-style="height: 500px;">
|
||||
custom-style="height: auto; max-height: 80vh;">
|
||||
<view class="product-confirm-popup">
|
||||
<view class="product-header">
|
||||
<text class="ri-checkbox-circle-line li-text-44 li-text-#0070F0"></text>
|
||||
|
|
@ -124,44 +125,61 @@
|
|||
</view>
|
||||
<view class="product-content">
|
||||
<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-flex li-flex-col">
|
||||
<view class="li-flex li-items-center">
|
||||
<text class="li-text-30 li-text-#333 li-mr-10">x</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 class="product-info li-mt-30 li-px-30">
|
||||
<view class="info-item li-flex li-items-center li-mb-20">
|
||||
<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-24 li-text-#999 li-mt-4">商品编码: SP202505126</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item li-flex li-items-center li-mb-20">
|
||||
<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-24 li-text-#999 li-mt-4">来源: 京东自营</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item li-flex li-items-center li-mb-20">
|
||||
<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-24 li-text-#999 li-mt-4">类型: 普通入库</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item li-flex li-items-center li-mb-20">
|
||||
<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-24 li-text-#999 li-mt-4">负责仓库: 北京仓</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="confirm-button li-px-30 li-mt-40">
|
||||
<wd-button custom-class="custom-shadow1" type="primary" block
|
||||
@click="confirmProduct">确认入库</wd-button>
|
||||
</view>
|
||||
<view class="action-buttons li-px-30 li-mt-20">
|
||||
<wd-button custom-class="custom-shadow1" type="primary" block :loading="isConfirming"
|
||||
@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>
|
||||
</wd-popup>
|
||||
|
|
@ -186,6 +204,8 @@
|
|||
const activeMode = ref(0) // 0: 扫码模式, 1: 手动输入模式
|
||||
const continuousMode = ref(false) // 是否开启连续入库模式
|
||||
const orderNumber = ref('') // 手动输入的订单号
|
||||
const isScanning = ref(false) // 控制扫描动画
|
||||
const isConfirming = ref(false) // 控制确认动画
|
||||
|
||||
// 入库记录
|
||||
const verificationRecords = ref([
|
||||
|
|
@ -201,8 +221,16 @@
|
|||
|
||||
// 扫码入库
|
||||
const scanCode = () => {
|
||||
show9.value = true
|
||||
return
|
||||
// 激活扫描动画
|
||||
isScanning.value = true;
|
||||
|
||||
// 延迟显示弹窗并停止动画
|
||||
setTimeout(() => {
|
||||
isScanning.value = false;
|
||||
show9.value = true;
|
||||
}, 800);
|
||||
|
||||
return;
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
handleVerification(res.result)
|
||||
|
|
@ -214,7 +242,33 @@
|
|||
}
|
||||
|
||||
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(() => {
|
||||
checkRouteStack()
|
||||
})
|
||||
|
|
@ -341,6 +413,7 @@
|
|||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
|
||||
.scan-button {
|
||||
width: 100%;
|
||||
|
|
@ -350,23 +423,149 @@
|
|||
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
|
||||
color: white;
|
||||
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 {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.92);
|
||||
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 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: -10rpx;
|
||||
right: -10rpx;
|
||||
bottom: -10rpx;
|
||||
top: -15rpx;
|
||||
left: -15rpx;
|
||||
right: -15rpx;
|
||||
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: 2rpx solid rgba(56, 165, 255, 0.2);
|
||||
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 {
|
||||
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 {
|
||||
.info-item {
|
||||
padding: 20rpx 0; // 调整元素间距
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:active {
|
||||
background-color: rgba(0, 112, 240, 0.05);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
.action-buttons {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 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>
|
||||
|
|
@ -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