246 lines
8.2 KiB
Vue
246 lines
8.2 KiB
Vue
<template>
|
||
<view class="li-message-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 class="ri-arrow-left-s-line li-text-70" @click="toPages({type:'nav'})"></text>
|
||
<text class="li-text-42">工单详情</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>JD2424234324325</text>
|
||
<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
|
||
</view>
|
||
<text class="li-pl-20 li-text-28 li-text-#5f5f5f">创建时间: 2025-07-09</text>
|
||
</view>
|
||
<view class="li-text-28 !li-rd-bl-50 li-px-40 li-py-6"
|
||
:style="{ color: getStatusColor(2), backgroundColor: getStatusBgColor(2) }">
|
||
{{getStatusText(2)}}
|
||
</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 class="li-flex li-flex-col">
|
||
<text class="li-text-32">{{getStatusText(2)}}</text>
|
||
<text class="li-text-28">工单已完成，干得漂亮！请确认完成状态</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- card -->
|
||
<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-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">邓大仙儿</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>177****4485</text>
|
||
</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>
|
||
<text class="li-w-400 li-two-line li-text-right">中金北区17号楼一单元201室号</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">放在门口即可</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>
|
||
<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>
|
||
<!-- <text class="li-text-#009aff li-text-right">x2</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>
|
||
<!-- card -->
|
||
<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-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">张三丰</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>135****6645</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">敲门未应答，已按照业主要求放在门口</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>
|
||
<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 class="li-w-110 li-h-110 li-rd-10" src="../../static/logo.png" mode="">
|
||
</image>
|
||
<image class="li-w-110 li-h-110 li-rd-10 li-ml-20" src="../../static/logo.png" mode="">
|
||
</image>
|
||
</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></view>
|
||
<view class="li-flex li-items-center li-mr-30">
|
||
<view>
|
||
<wd-button :round="false" type="error">取消工单</wd-button>
|
||
</view>
|
||
<view class="li-ml-15">
|
||
<wd-button :round="false" type="success">确认送达</wd-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
|
||
// 状态颜色配置
|
||
const getStatusColor = (status : number) => {
|
||
const colorMap = {
|
||
1: '#ff9d00', // 待配送
|
||
2: '#00b42a', // 已完成
|
||
3: '#37A5FF', // 未入库
|
||
4: '#F42429' // 已取消
|
||
}
|
||
return colorMap[status] || '#666666'
|
||
}
|
||
|
||
// 状态背景色配置
|
||
const getStatusBgColor = (status : number) => {
|
||
const bgColorMap = {
|
||
1: '#fff6e9', // 待配送
|
||
2: '#e8ffea', // 已完成
|
||
3: '#e8f4ff', // 未入库
|
||
4: '#ffe8e8' // 已取消
|
||
}
|
||
return bgColorMap[status] || '#f5f5f5'
|
||
}
|
||
|
||
// 状态文字配置
|
||
const getStatusText = (status : number) => {
|
||
const textMap = {
|
||
1: '待配送',
|
||
2: '已完成',
|
||
3: '未入库',
|
||
4: '已取消'
|
||
}
|
||
return textMap[status] || '未知状态'
|
||
}
|
||
|
||
|
||
|
||
const toPages = (item : any) => {
|
||
console.log(item);
|
||
switch (item.type) {
|
||
case 'nav':
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
|
||
|
||
const handleAction = (action : string) => {
|
||
console.log(action);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.li-message-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%);
|
||
background-attachment: fixed;
|
||
/* #ifdef H5 */
|
||
padding-bottom: 160rpx;
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS */
|
||
padding-bottom: 180rpx;
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
padding-bottom: 170rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
|
||
// 导航栏背景层
|
||
.nav-bg-layer {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: var(--window-top);
|
||
background: linear-gradient(to bottom,
|
||
rgba(217, 237, 255, 0.95),
|
||
rgba(217, 237, 255, 0.85));
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
z-index: 998;
|
||
}
|
||
|
||
.li-task-card {
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
::v-deep .wd-button {
|
||
width: 160rpx !important;
|
||
height: 65rpx !important;
|
||
min-width: 160rpx !important;
|
||
}
|
||
</style> |