2098 lines
43 KiB
Vue
2098 lines
43 KiB
Vue
<template>
|
||
<view class="index-container">
|
||
<!-- 返回按钮 -->
|
||
<!-- <view v-if="showBackButton" class="back-button" @click="handleBack">
|
||
<IconFont name="arrow-left" color="#333" :size="20" />
|
||
<text class="back-text">返回</text>
|
||
</view> -->
|
||
|
||
<view v-if="!isBound" class="state-hint">
|
||
<view class="state-img-wrapper" @click="handleEmptyStateClick">
|
||
<image class="state-img" :src="emptyImg" mode="aspectFit" />
|
||
</view>
|
||
<view class="state-title">暂无数据</view>
|
||
</view>
|
||
|
||
<view v-else class="list-container">
|
||
<!-- 搜索框和状态筛选 -->
|
||
<view class="search-container">
|
||
<view class="search-box">
|
||
<IconFont name="search" color="#999" :size="16" />
|
||
<input :value="searchKeyword" @input="(e) => searchKeyword = e.detail.value" placeholder="请输入订单号搜索"
|
||
class="search-input" @confirm="handleSearch" confirm-type="search" />
|
||
<view v-if="searchKeyword" class="search-clear" @click="clearSearch">
|
||
<IconFont name="close" color="#999" :size="14" />
|
||
</view>
|
||
</view>
|
||
<!-- 状态筛选：Tab 可换行显示 -->
|
||
<view class="status-tabs">
|
||
<view class="status-tab" v-for="(item, idx) in statusOptions" :key="idx"
|
||
:class="{ active: selectedStatusIndex === idx }" @click="onStatusTabClick(idx)">
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<OrderList
|
||
:check-status="selectedStatus"
|
||
:search-keyword="searchKeyword"
|
||
:show-action="true"
|
||
:can-view="canView"
|
||
:can-add="canAdd"
|
||
:can-edit="canEdit"
|
||
:can-delete="canDelete"
|
||
@item-click="handleItemClick"
|
||
@refresh="handleListRefresh"
|
||
@viewCheck="handleViewCheck"
|
||
@view-check="handleViewCheck"
|
||
ref="orderListRef" />
|
||
</view>
|
||
|
||
<!-- 图片预览弹窗 -->
|
||
<nut-popup v-model:visible="showImagePopup" position="center" :style="{ padding: '20rpx' }" round
|
||
:close-on-click-overlay="true">
|
||
<view class="image-popup">
|
||
<view class="image-popup-header">
|
||
<text class="image-popup-title">
|
||
图片预览 ({{ currentImageIndex + 1 }}/{{ currentImages.length }})
|
||
</text>
|
||
<view class="image-popup-close" @click="showImagePopup = false">
|
||
<IconFont name="close" color="#666" :size="20" />
|
||
</view>
|
||
</view>
|
||
<swiper class="image-swiper" :current="currentImageIndex" @change="onSwiperChange"
|
||
:indicator-dots="currentImages.length > 1" :indicator-color="'rgba(0, 0, 0, 0.3)'"
|
||
:indicator-active-color="'#1890ff'" :circular="true">
|
||
<swiper-item v-for="(image, index) in currentImages" :key="index">
|
||
<image :src="image" mode="aspectFit" class="preview-image" />
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</nut-popup>
|
||
|
||
<!-- 质检表单弹窗 -->
|
||
<CheckFormPopup v-model="showFormPopup" :order-item="currentFormItem" :mode="formMode"
|
||
@submit-success="handleFormSubmitSuccess" />
|
||
|
||
<!-- 查看质检信息弹窗 -->
|
||
<CheckFormPopup v-model="showViewCheckPopup" :order-item="currentViewItem" mode="view" />
|
||
|
||
<!-- 绑定弹窗 -->
|
||
<BindPopup v-model="showBindPopup" @bind-success="handleBindSuccess" />
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, computed, watch } from 'vue'
|
||
import Taro from '@tarojs/taro'
|
||
import { IconFont } from '@nutui/icons-vue'
|
||
import { request } from '../../utils/request'
|
||
import api from '../../api'
|
||
import emptyImg from '../../assets/empty-state.svg'
|
||
import OrderList from '../../components/order-list/index.vue'
|
||
import BindPopup from '../../components/bind-popup/index.vue'
|
||
import CheckFormPopup from '../../components/check-form-popup/index.vue'
|
||
import { useAuth } from '../../composables/useAuth'
|
||
|
||
// 导入图片工具函数
|
||
import { buildImgUrl, buildFileUrl } from '../../utils/image'
|
||
|
||
// 判断是否显示返回按钮（页面栈长度大于1时显示）
|
||
const showBackButton = computed(() => {
|
||
try {
|
||
const pages = Taro.getCurrentPages()
|
||
return pages.length > 1
|
||
} catch (e) {
|
||
return false
|
||
}
|
||
})
|
||
|
||
// 返回上一页
|
||
const handleBack = () => {
|
||
try {
|
||
const pages = Taro.getCurrentPages()
|
||
if (pages.length > 1) {
|
||
Taro.navigateBack()
|
||
} else {
|
||
// 如果没有上一页，跳转到首页
|
||
Taro.switchTab({
|
||
url: '/pages/home/index'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('返回失败:', error)
|
||
// 如果 navigateBack 失败，尝试跳转到首页
|
||
Taro.switchTab({
|
||
url: '/pages/home/index'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 图标列表（NutUI内置图标，使用 IconFont 的 name 属性）
|
||
const iconList = [
|
||
'home',
|
||
'my',
|
||
'setting',
|
||
'notice',
|
||
'cart',
|
||
'category',
|
||
'star',
|
||
'heart',
|
||
'share',
|
||
'download',
|
||
'uploader',
|
||
'edit',
|
||
'del',
|
||
'search',
|
||
'find',
|
||
'add',
|
||
'minus',
|
||
'check',
|
||
'close',
|
||
'arrow-right',
|
||
'star-fill',
|
||
'heart-fill',
|
||
'cart2',
|
||
'shop',
|
||
'people'
|
||
]
|
||
|
||
// 图标颜色列表（蓝色系）
|
||
const iconColors = [
|
||
'#1890ff',
|
||
'#40a9ff',
|
||
'#69c0ff',
|
||
'#91d5ff',
|
||
'#bae7ff',
|
||
'#096dd9',
|
||
'#0050b3'
|
||
]
|
||
|
||
// 标题模板
|
||
const titleTemplates = [
|
||
'项目管理系统',
|
||
'数据分析平台',
|
||
'客户关系管理',
|
||
'在线协作工具',
|
||
'内容管理系统',
|
||
'电商运营平台',
|
||
'移动应用开发',
|
||
'云存储服务',
|
||
'智能推荐系统',
|
||
'企业办公套件',
|
||
'在线教育平台',
|
||
'社交网络应用',
|
||
'视频会议系统',
|
||
'任务管理工具',
|
||
'财务管理系统'
|
||
]
|
||
|
||
// 描述模板
|
||
const descTemplates = [
|
||
'高效的项目管理解决方案，提升团队协作效率',
|
||
'强大的数据分析能力，助力业务决策',
|
||
'完善的客户管理功能，提升客户满意度',
|
||
'实时协作编辑，让团队工作更高效',
|
||
'灵活的内容管理，满足各种业务需求',
|
||
'全面的电商功能，助力业务增长',
|
||
'专业的移动应用开发服务',
|
||
'安全可靠的云存储解决方案',
|
||
'基于AI的智能推荐算法',
|
||
'一站式企业办公解决方案',
|
||
'优质的在线教育体验',
|
||
'连接你我，分享生活',
|
||
'高清流畅的视频会议体验',
|
||
'简单易用的任务管理工具',
|
||
'专业的财务管理解决方案'
|
||
]
|
||
|
||
// 位置列表
|
||
const locations = [
|
||
'北京',
|
||
'上海',
|
||
'广州',
|
||
'深圳',
|
||
'杭州',
|
||
'成都',
|
||
'武汉',
|
||
'西安',
|
||
'南京',
|
||
'重庆'
|
||
]
|
||
|
||
// 生成随机数据
|
||
const generateRandomItem = (id) => {
|
||
const randomIcon = iconList[Math.floor(Math.random() * iconList.length)]
|
||
const randomIconColor = iconColors[Math.floor(Math.random() * iconColors.length)]
|
||
const randomTitle = titleTemplates[Math.floor(Math.random() * titleTemplates.length)]
|
||
const randomDesc = descTemplates[Math.floor(Math.random() * descTemplates.length)]
|
||
const randomLocation = locations[Math.floor(Math.random() * locations.length)]
|
||
const randomTime = `${Math.floor(Math.random() * 12) + 1}小时前`
|
||
const images = getRandomImages(id)
|
||
|
||
return {
|
||
id,
|
||
icon: randomIcon,
|
||
iconColor: randomIconColor,
|
||
title: randomTitle,
|
||
description: randomDesc,
|
||
location: randomLocation,
|
||
time: randomTime,
|
||
images: images
|
||
}
|
||
}
|
||
|
||
// 状态文案
|
||
const getStatusText = (status) => {
|
||
const map = {
|
||
0: '待质检',
|
||
2: '质检通过',
|
||
3: '质检失败'
|
||
}
|
||
return map[status] || '未知状态'
|
||
}
|
||
|
||
// 列表数据
|
||
const listData = ref([])
|
||
const safeList = computed(() => {
|
||
const arr = Array.isArray(listData.value) ? listData.value : []
|
||
return arr.filter(Boolean)
|
||
})
|
||
const loading = ref(false)
|
||
const hasMore = ref(true)
|
||
const page = ref(1)
|
||
const pageSize = 10
|
||
const searchKeyword = ref('') // 搜索关键词
|
||
|
||
// 状态筛选（Tab）
|
||
// 状态：全部 / 待质检 / 已质检 / 拆包中 / 已驳回 / 质检完成 / 质检作废
|
||
const statusOptions = [
|
||
{ label: '全部', value: '' },
|
||
{ label: '待质检', value: 0 },
|
||
{ label: '已质检', value: 1 },
|
||
{ label: '拆包中', value: 2 },
|
||
{ label: '已驳回', value: 3 },
|
||
{ label: '质检完成', value: 4 },
|
||
{ label: '质检作废', value: 5 }
|
||
]
|
||
const selectedStatusIndex = ref(0) // 当前选中的状态索引
|
||
const selectedStatus = computed(() => statusOptions[selectedStatusIndex.value].value)
|
||
|
||
// 弹窗控制
|
||
const showImagePopup = ref(false)
|
||
const showFormPopup = ref(false)
|
||
const currentImages = ref([])
|
||
const currentImageIndex = ref(0)
|
||
const formRef = ref(null)
|
||
|
||
// 使用公共登录逻辑
|
||
const { token, isBound, showBindPopup, checkAuth, showBindPopupFromError } = useAuth()
|
||
|
||
// 权限检查
|
||
const permissions = ref([])
|
||
|
||
// 权限常量
|
||
const PERMISSIONS = {
|
||
VIEW: 'twopoint_zhxyOrderCheck_view', // 查看
|
||
ADD: 'twopoint_zhxyOrderCheck_add', // 新增
|
||
EDIT: 'twopoint_zhxyOrderCheck_edit', // 编辑
|
||
DEL: 'twopoint_zhxyOrderCheck_del' // 删除
|
||
}
|
||
|
||
// 权限检查函数
|
||
const hasPermission = (permission) => {
|
||
if (!permissions.value || permissions.value.length === 0) {
|
||
console.log('权限数组为空，返回 false')
|
||
return false
|
||
}
|
||
const has = permissions.value.includes(permission)
|
||
console.log(`检查权限 ${permission}:`, has, '权限数组:', permissions.value)
|
||
return has
|
||
}
|
||
|
||
// 计算属性：是否有查看权限
|
||
const canView = computed(() => hasPermission(PERMISSIONS.VIEW))
|
||
// 计算属性：是否有新增权限
|
||
const canAdd = computed(() => hasPermission(PERMISSIONS.ADD))
|
||
// 计算属性：是否有编辑权限
|
||
const canEdit = computed(() => hasPermission(PERMISSIONS.EDIT))
|
||
// 计算属性：是否有删除权限
|
||
const canDelete = computed(() => hasPermission(PERMISSIONS.DEL))
|
||
|
||
// 加载权限数据
|
||
const loadPermissions = () => {
|
||
try {
|
||
const storedPermissions = Taro.getStorageSync('permissions')
|
||
console.log('存储的权限数据:', storedPermissions)
|
||
console.log('权限数据类型:', typeof storedPermissions)
|
||
console.log('是否为数组:', Array.isArray(storedPermissions))
|
||
|
||
if (storedPermissions) {
|
||
// 如果是数组，直接使用
|
||
if (Array.isArray(storedPermissions)) {
|
||
permissions.value = storedPermissions
|
||
}
|
||
// 如果是对象，尝试提取权限数组
|
||
else if (typeof storedPermissions === 'object') {
|
||
// 可能是 { permissions: [...] } 格式
|
||
if (storedPermissions.permissions && Array.isArray(storedPermissions.permissions)) {
|
||
permissions.value = storedPermissions.permissions
|
||
}
|
||
// 可能是对象数组，需要提取权限标识
|
||
else if (Array.isArray(Object.values(storedPermissions))) {
|
||
// 尝试从对象中提取权限标识
|
||
permissions.value = Object.values(storedPermissions).filter(p => typeof p === 'string')
|
||
}
|
||
// 如果是对象，尝试获取所有键值
|
||
else {
|
||
permissions.value = Object.keys(storedPermissions).filter(k => typeof k === 'string')
|
||
}
|
||
}
|
||
// 如果是字符串，尝试解析
|
||
else if (typeof storedPermissions === 'string') {
|
||
try {
|
||
const parsed = JSON.parse(storedPermissions)
|
||
if (Array.isArray(parsed)) {
|
||
permissions.value = parsed
|
||
}
|
||
} catch (e) {
|
||
permissions.value = []
|
||
}
|
||
}
|
||
else {
|
||
permissions.value = []
|
||
}
|
||
} else {
|
||
permissions.value = []
|
||
}
|
||
|
||
console.log('最终权限数组:', permissions.value)
|
||
console.log('权限检查结果:', {
|
||
canView: canView.value,
|
||
canAdd: canAdd.value,
|
||
canEdit: canEdit.value,
|
||
canDelete: canDelete.value
|
||
})
|
||
} catch (error) {
|
||
console.error('加载权限失败:', error)
|
||
permissions.value = []
|
||
}
|
||
}
|
||
|
||
// 检查是否需要重新绑定（来自 424 错误）
|
||
const checkNeedRebind = () => {
|
||
const needRebind = Taro.getStorageSync('needRebind')
|
||
if (needRebind) {
|
||
showBindPopupFromError()
|
||
}
|
||
}
|
||
const canViewList = computed(() => isBound.value)
|
||
const isFirstLoad = ref(true) // 是否是首次加载
|
||
|
||
// 点击暂无数据图标，触发登录检查
|
||
const handleEmptyStateClick = async () => {
|
||
await checkAuth()
|
||
}
|
||
|
||
// 绑定成功回调
|
||
const handleBindSuccess = () => {
|
||
// 绑定成功后刷新列表
|
||
if (orderListRef.value) {
|
||
orderListRef.value.refresh()
|
||
}
|
||
|
||
// 绑定成功后，如果有待打开的列表项，根据checkStatus打开表单
|
||
if (currentItem.value) {
|
||
setTimeout(() => {
|
||
const checkStatus = currentItem.value.checkStatus
|
||
if (checkStatus === 0) {
|
||
openForm(currentItem.value, 'create')
|
||
} else if (checkStatus === 3) {
|
||
openForm(currentItem.value, 'edit')
|
||
}
|
||
currentItem.value = null
|
||
}, 500)
|
||
}
|
||
}
|
||
|
||
const formMode = ref('create') // 'create' 或 'edit'
|
||
const currentFormItem = ref(null) // 当前表单对应的订单项
|
||
const showViewCheckPopup = ref(false) // 查看质检信息弹窗
|
||
const currentViewItem = ref(null) // 当前查看的订单项
|
||
|
||
// 生成随机图片URL数组（使用占位图服务）
|
||
const getRandomImages = (id) => {
|
||
// 每个列表项生成1-5张随机图片
|
||
const imageCount = Math.floor(Math.random() * 5) + 1
|
||
const images = []
|
||
const width = 600
|
||
const height = 400
|
||
|
||
for (let i = 0; i < imageCount; i++) {
|
||
const seed = (id * 10 + i) % 100
|
||
images.push(`https://picsum.photos/seed/${seed}/${width}/${height}`)
|
||
}
|
||
|
||
return images
|
||
}
|
||
|
||
// 从 localImg 字符串拆解图片URL数组
|
||
const buildImagesFromLocalImg = (localImg) => {
|
||
if (!localImg) return []
|
||
const source = Array.isArray(localImg) ? localImg : String(localImg).split(/[,;\s]+/)
|
||
return source
|
||
.map((item) => String(item).trim())
|
||
.filter(Boolean)
|
||
.map((fileName) => buildFileUrl(fileName))
|
||
}
|
||
|
||
// 加载数据
|
||
const loadData = async (isRefresh = false) => {
|
||
if (loading.value) return
|
||
if (!canViewList.value) {
|
||
loading.value = false
|
||
return
|
||
}
|
||
|
||
loading.value = true
|
||
|
||
try {
|
||
// 调用真实的 API 接口
|
||
const params = {
|
||
quecurrent: isRefresh ? 1 : page.value,
|
||
size: pageSize
|
||
}
|
||
|
||
// 如果有搜索关键词，添加orderNum参数
|
||
if (searchKeyword.value && searchKeyword.value.trim()) {
|
||
params.orderNum = searchKeyword.value.trim()
|
||
}
|
||
|
||
// 如果有选中的状态，添加checkStatus参数
|
||
if (selectedStatus.value !== '') {
|
||
params.checkStatus = selectedStatus.value
|
||
}
|
||
|
||
const res = await api.getCheckOrder(params)
|
||
|
||
if (res.statusCode === 200) {
|
||
const raw =
|
||
res.data?.records ??
|
||
res.data?.data?.records ??
|
||
res.data?.data ??
|
||
res.data ??
|
||
[]
|
||
const newData = Array.isArray(raw) ? raw : []
|
||
|
||
// 规范化数据：处理 localImg 为图片数组，并确保 id 存在
|
||
const startIndex = isRefresh ? 0 : listData.value.length
|
||
const processed = newData.map((item, idx) => {
|
||
const images =
|
||
Array.isArray(item?.images) && item.images.length > 0
|
||
? item.images
|
||
: buildImagesFromLocalImg(item?.localImg)
|
||
|
||
const fallbackId =
|
||
item?.id ??
|
||
item?.contractId ??
|
||
`${item?.companyName || 'item'}-${startIndex + idx}`
|
||
|
||
return {
|
||
...item,
|
||
id: fallbackId,
|
||
images
|
||
}
|
||
})
|
||
|
||
if (isRefresh) {
|
||
listData.value = processed
|
||
page.value = 1
|
||
} else {
|
||
listData.value = [...listData.value, ...processed]
|
||
page.value++
|
||
}
|
||
|
||
// 判断是否还有更多数据
|
||
if (newData.length < pageSize) {
|
||
hasMore.value = false
|
||
}
|
||
} else {
|
||
throw new Error(res.data?.message || '请求失败')
|
||
}
|
||
} catch (error) {
|
||
Taro.showToast({
|
||
title: error.message || '加载失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
} finally {
|
||
loading.value = false
|
||
|
||
// 停止下拉刷新动画
|
||
if (isRefresh) {
|
||
Taro.stopPullDownRefresh()
|
||
}
|
||
}
|
||
}
|
||
|
||
// 下拉刷新函数
|
||
const onRefresh = () => {
|
||
if (!canViewList.value) {
|
||
Taro.showToast({
|
||
title: '请先登录并绑定手机号',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
Taro.stopPullDownRefresh()
|
||
return
|
||
}
|
||
if (orderListRef.value) {
|
||
orderListRef.value.refresh()
|
||
}
|
||
Taro.stopPullDownRefresh()
|
||
}
|
||
|
||
// 触底加载 - 使用页面滚动到底部事件
|
||
const onReachBottom = () => {
|
||
if (canViewList.value && orderListRef.value) {
|
||
orderListRef.value.loadMore()
|
||
}
|
||
}
|
||
|
||
// 点击图标 - 单图预览（carImg）
|
||
const handleIconClick = (item) => {
|
||
if (!item) return
|
||
const imgUrl = buildImgUrl(item.carImg || '')
|
||
if (!imgUrl) {
|
||
Taro.showToast({
|
||
title: '暂无车辆图片',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
return
|
||
}
|
||
Taro.previewImage({
|
||
current: imgUrl,
|
||
urls: [imgUrl]
|
||
})
|
||
}
|
||
|
||
// 拨打电话
|
||
const makePhoneCall = (phone) => {
|
||
if (!phone) {
|
||
Taro.showToast({
|
||
title: '当前司机无手机号',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
return
|
||
}
|
||
Taro.makePhoneCall({
|
||
phoneNumber: String(phone)
|
||
})
|
||
}
|
||
|
||
// Swiper 切换事件
|
||
const onSwiperChange = (e) => {
|
||
currentImageIndex.value = e.detail.current
|
||
}
|
||
|
||
// 存储当前点击的列表项，用于登录后打开表单
|
||
const currentItem = ref(null)
|
||
|
||
// 打开表单 - 使用组件
|
||
const openForm = (item, mode = 'create') => {
|
||
if (!item) return
|
||
currentFormItem.value = item
|
||
formMode.value = mode
|
||
showFormPopup.value = true
|
||
}
|
||
|
||
// 格式化时间：只显示年月日、时分
|
||
const formatDateTime = (dateTime) => {
|
||
if (!dateTime) return ''
|
||
|
||
try {
|
||
const date = new Date(dateTime)
|
||
if (isNaN(date.getTime())) {
|
||
// 如果不是标准日期格式，尝试其他格式
|
||
return dateTime
|
||
}
|
||
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
|
||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||
} catch (e) {
|
||
// 如果解析失败，返回原值
|
||
return dateTime
|
||
}
|
||
}
|
||
|
||
// 搜索处理
|
||
const orderListRef = ref(null)
|
||
const handleSearch = () => {
|
||
// 通过组件ref刷新列表
|
||
if (orderListRef.value) {
|
||
orderListRef.value.refresh()
|
||
}
|
||
}
|
||
|
||
// 清空搜索
|
||
const clearSearch = () => {
|
||
searchKeyword.value = ''
|
||
// 通过组件ref刷新列表
|
||
if (orderListRef.value) {
|
||
orderListRef.value.refresh()
|
||
}
|
||
}
|
||
|
||
// 状态筛选改变
|
||
const onStatusChange = (e) => {
|
||
const index = parseInt(e.detail.value)
|
||
selectedStatusIndex.value = index
|
||
// 状态改变时重置分页并刷新数据
|
||
page.value = 1
|
||
hasMore.value = true
|
||
listData.value = []
|
||
loadData(true)
|
||
}
|
||
|
||
// 复制订单号
|
||
const copyOrderNum = (orderNum) => {
|
||
if (!orderNum) return
|
||
|
||
Taro.setClipboardData({
|
||
data: String(orderNum),
|
||
success: () => {
|
||
Taro.showToast({
|
||
title: '订单号已复制',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
},
|
||
fail: () => {
|
||
Taro.showToast({
|
||
title: '复制失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 显示确认框后再打开表单
|
||
const showConfirmBeforeOpenForm = (item, mode) => {
|
||
// 获取车牌号和品类名称
|
||
const carNum = item.carNum || '--'
|
||
const categoryName = item.orderTypeName || '--'
|
||
|
||
Taro.showModal({
|
||
title: '确认质检',
|
||
content: `车牌号：${carNum}\n品类：${categoryName}\n\n确认开始质检吗？`,
|
||
confirmText: '确认',
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 用户确认后打开表单
|
||
openForm(item, mode)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 点击列表项其他部分 - 根据checkStatus判断
|
||
const handleItemClick = (item) => {
|
||
if (!item) return
|
||
// 检查绑定状态
|
||
if (!isBound.value) {
|
||
currentItem.value = item
|
||
showBindPopup.value = true
|
||
return
|
||
}
|
||
|
||
const checkStatus = item.checkStatus
|
||
if (checkStatus === 0) {
|
||
// 待质检：先显示确认框，再打开新增表单
|
||
// 权限检查在 showConfirmBeforeOpenForm 中进行，无权限会静默返回
|
||
if (canAdd.value) {
|
||
showConfirmBeforeOpenForm(item, 'create')
|
||
}
|
||
} else if (checkStatus === 3) {
|
||
// 供应商驳回：先显示确认框，再打开编辑表单
|
||
// 权限检查在 showConfirmBeforeOpenForm 中进行，无权限会静默返回
|
||
if (canEdit.value) {
|
||
showConfirmBeforeOpenForm(item, 'edit')
|
||
}
|
||
} else if (checkStatus === 2) {
|
||
// 供应商确认，拆包中：允许编辑
|
||
// 权限检查在 showConfirmBeforeOpenForm 中进行，无权限会静默返回
|
||
if (canEdit.value) {
|
||
showConfirmBeforeOpenForm(item, 'edit')
|
||
}
|
||
}
|
||
// 其他状态静默处理，不显示任何提示
|
||
}
|
||
|
||
// 列表刷新回调
|
||
const handleListRefresh = () => {
|
||
if (orderListRef.value) {
|
||
orderListRef.value.refresh()
|
||
}
|
||
}
|
||
|
||
// 查看质检信息
|
||
const handleViewCheck = (item) => {
|
||
if (!item) {
|
||
return
|
||
}
|
||
|
||
// 权限检查 - 静默处理，无权限直接返回
|
||
if (!canView.value) {
|
||
return
|
||
}
|
||
|
||
// 先设置订单项，再打开弹窗，确保数据传递正确
|
||
currentViewItem.value = { ...item }
|
||
showViewCheckPopup.value = true
|
||
}
|
||
|
||
// 状态Tab点击
|
||
const onStatusTabClick = (idx) => {
|
||
selectedStatusIndex.value = idx
|
||
// OrderList 组件的 watch 会自动监听 checkStatus 变化并刷新
|
||
}
|
||
|
||
// 表单提交成功回调
|
||
const handleFormSubmitSuccess = () => {
|
||
// 刷新列表
|
||
if (orderListRef.value) {
|
||
orderListRef.value.refresh()
|
||
}
|
||
}
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
// 加载权限数据
|
||
loadPermissions()
|
||
|
||
// 页面进入时检查登录状态
|
||
checkAuth().then((isAuth) => {
|
||
// 检查是否需要重新绑定（来自 424 错误）
|
||
checkNeedRebind()
|
||
// 登录检查完成后，将刷新函数存储到全局，供 script 块使用
|
||
if (typeof globalThis !== 'undefined') {
|
||
globalThis.__pageRefreshHandler = onRefresh
|
||
globalThis.__pageReachBottomHandler = onReachBottom
|
||
}
|
||
|
||
// 检查 URL 参数，如果是从首页跳转过来的，自动打开表单
|
||
const pages = Taro.getCurrentPages()
|
||
const currentPage = pages[pages.length - 1]
|
||
if (currentPage && currentPage.options) {
|
||
const { orderId, autoOpen } = currentPage.options
|
||
if (orderId && autoOpen === 'true' && isAuth) {
|
||
// 从订单列表中找到对应的订单
|
||
setTimeout(async () => {
|
||
if (orderListRef.value) {
|
||
// 先刷新列表，确保数据是最新的
|
||
await orderListRef.value.refresh()
|
||
// 等待列表加载完成后再查找订单
|
||
setTimeout(() => {
|
||
// 这里需要从 OrderList 组件获取数据，或者直接调用接口获取订单详情
|
||
// 暂时先通过接口获取订单详情
|
||
api.getCheckOrder({ quecurrent: 1, size: 100 }).then(res => {
|
||
if (res.statusCode === 200) {
|
||
const orders = res.data?.records || res.data?.data?.records || res.data?.data || []
|
||
const targetOrder = orders.find(order =>
|
||
String(order.id) === String(orderId) ||
|
||
String(order.orderId) === String(orderId)
|
||
)
|
||
if (targetOrder) {
|
||
handleItemClick(targetOrder)
|
||
}
|
||
}
|
||
})
|
||
}, 500)
|
||
}
|
||
}, 300)
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
// 监听登录与绑定状态，只在首次加载时自动加载
|
||
watch(canViewList, (val) => {
|
||
if (val && isFirstLoad.value && listData.value.length === 0) {
|
||
hasMore.value = true
|
||
page.value = 1
|
||
loadData(true)
|
||
isFirstLoad.value = false
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<script>
|
||
import Taro from '@tarojs/taro'
|
||
|
||
// Taro 页面生命周期
|
||
export default {
|
||
onPullDownRefresh() {
|
||
// 从全局获取刷新函数
|
||
if (typeof globalThis !== 'undefined' && globalThis.__pageRefreshHandler) {
|
||
globalThis.__pageRefreshHandler()
|
||
} else {
|
||
// 如果无法访问，至少停止刷新动画
|
||
setTimeout(() => {
|
||
Taro.stopPullDownRefresh()
|
||
}, 1000)
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
// 触底加载
|
||
if (typeof globalThis !== 'undefined' && globalThis.__pageReachBottomHandler) {
|
||
globalThis.__pageReachBottomHandler()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.back-button {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 24rpx;
|
||
margin: 24rpx 24rpx 16rpx 24rpx;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.back-button:active {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.back-text {
|
||
margin-left: 8rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.index-container {
|
||
min-height: 100vh;
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.list-container {
|
||
padding: 24rpx;
|
||
padding-bottom: 148rpx;
|
||
background: linear-gradient(180deg, #f7f9fc 0%, #f5f7fa 100%);
|
||
}
|
||
|
||
/* 搜索框样式 */
|
||
.search-container {
|
||
padding: 0 0rpx 20rpx 0rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 0 24rpx;
|
||
height: 80rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.search-box .nut-icon {
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
height: 100%;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.search-clear {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 16rpx;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.status-filter {
|
||
padding: 0 0rpx;
|
||
}
|
||
|
||
.status-tabs {
|
||
margin-top: 12rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.status-tab {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 64rpx;
|
||
padding: 0 28rpx;
|
||
border-radius: 32rpx;
|
||
background: #f3f5f8;
|
||
color: #5f6b7a;
|
||
font-size: 26rpx;
|
||
border: 1rpx solid transparent;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.status-tab.active {
|
||
background: #e6f0ff;
|
||
color: #1755ff;
|
||
border-color: #d6e4ff;
|
||
box-shadow: 0 4rpx 12rpx rgba(23, 85, 255, 0.12);
|
||
}
|
||
|
||
.state-hint {
|
||
min-height: 40vh;
|
||
padding: 60rpx 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 24rpx;
|
||
color: #555;
|
||
}
|
||
|
||
.state-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.state-btn {
|
||
width: 280rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
font-size: 30rpx;
|
||
border: none;
|
||
}
|
||
|
||
.state-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.state-img-wrapper {
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: inline-block;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.state-img {
|
||
width: 260rpx;
|
||
height: 200rpx;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
|
||
.list-item {
|
||
margin-bottom: 24rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||
transition: all 0.2s ease;
|
||
|
||
&:active {
|
||
transform: translateY(1rpx);
|
||
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
// 订单头部
|
||
.order-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
padding: 24rpx 24rpx 16rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.order-number-section {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.order-number-label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.order-number-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.copy-btn {
|
||
margin-left: 16rpx;
|
||
padding: 4rpx 12rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 4rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.copy-text {
|
||
font-size: 22rpx;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.order-status-badge {
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 4rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 订单内容
|
||
.order-content {
|
||
display: flex;
|
||
padding: 20rpx 24rpx;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.order-image-wrapper {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
background: #f5f5f5;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.order-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.order-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
// 车辆信息
|
||
.vehicle-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.detail-label {
|
||
color: #999;
|
||
margin-right: 8rpx;
|
||
width: 120rpx;
|
||
flex-shrink: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.detail-value {
|
||
color: #333;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
}
|
||
|
||
.phone-row-clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.phone-row-disabled {
|
||
cursor: default;
|
||
}
|
||
|
||
.phone-value {
|
||
color: #1890ff;
|
||
}
|
||
|
||
.phone-value-unknown,
|
||
.phone-row-disabled .phone-value {
|
||
color: #999;
|
||
}
|
||
|
||
.phone-icon {
|
||
margin-left: 8rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
// 时间信息
|
||
.time-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
padding-top: 12rpx;
|
||
border-top: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.time-detail-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.time-detail-label {
|
||
color: #999;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.time-detail-value {
|
||
color: #666;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 36rpx;
|
||
font-weight: 800;
|
||
color: #0f172a;
|
||
line-height: 1.45;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.item-desc {
|
||
font-size: 28rpx;
|
||
color: #4a5568;
|
||
line-height: 1.6;
|
||
margin-bottom: 18rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.item-order-num {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
padding: 8rpx 0;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.order-num-label {
|
||
font-size: 24rpx;
|
||
color: #5f6b7a;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.order-num-text {
|
||
font-size: 30rpx;
|
||
color: #1f2937;
|
||
font-weight: 600;
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.order-num-copy {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
border-radius: 4rpx;
|
||
transition: background-color 0.2s;
|
||
padding: 4rpx 8rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.copy-icon {
|
||
font-size: 24rpx;
|
||
color: #1765ad;
|
||
padding: 4rpx 10rpx;
|
||
border: 1rpx solid #d0e2ff;
|
||
border-radius: 6rpx;
|
||
background-color: #eff6ff;
|
||
}
|
||
|
||
.order-num-copy:active {
|
||
background-color: rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.order-num-copy:active .copy-icon {
|
||
background-color: rgba(24, 144, 255, 0.2);
|
||
}
|
||
|
||
.item-order-line {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12rpx;
|
||
margin-bottom: 10rpx;
|
||
padding: 0 12rpx;
|
||
}
|
||
|
||
.item-order-line .item-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.order-actions {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.status-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
padding: 0 12rpx;
|
||
}
|
||
|
||
// 状态标签样式
|
||
.status-0 {
|
||
background: #fff7e6;
|
||
color: #d48806;
|
||
}
|
||
|
||
.status-1 {
|
||
background: #e6f7ff;
|
||
color: #096dd9;
|
||
}
|
||
|
||
.status-2 {
|
||
background: #f6ffed;
|
||
color: #389e0d;
|
||
}
|
||
|
||
.status-3 {
|
||
background: #fff7e6;
|
||
color: #d46b08;
|
||
}
|
||
|
||
.status-unknown {
|
||
background: #f5f5f5;
|
||
color: #999;
|
||
}
|
||
|
||
.time-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
margin-top: 4rpx;
|
||
padding: 0 12rpx;
|
||
}
|
||
|
||
.time-item {
|
||
flex: 1;
|
||
padding: 12rpx 14rpx;
|
||
background: #f7f9fc;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.time-label {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: #6b7280;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.time-text {
|
||
font-size: 26rpx;
|
||
color: #1f2937;
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.vehicle-info {
|
||
margin: 10rpx 0 8rpx;
|
||
padding: 12rpx 18rpx;
|
||
background: #fcfdff;
|
||
border-radius: 14rpx;
|
||
color: #1f2a44;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12rpx 20rpx;
|
||
}
|
||
|
||
.vehicle-left {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 12rpx 20rpx;
|
||
}
|
||
|
||
.vehicle-right {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.vehicle-field {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.vehicle-label {
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
background: rgba(31, 42, 68, 0.08);
|
||
font-size: 22rpx;
|
||
color: #1f2a44;
|
||
}
|
||
|
||
.vehicle-value {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.vehicle-phone {
|
||
background: rgba(23, 85, 255, 0.12);
|
||
padding: 8rpx 14rpx;
|
||
border-radius: 14rpx;
|
||
cursor: pointer;
|
||
border: 1rpx solid rgba(23, 85, 255, 0.18);
|
||
}
|
||
|
||
.phone-emoji {
|
||
font-size: 30rpx;
|
||
line-height: 1;
|
||
color: #1755ff;
|
||
}
|
||
|
||
.item-actions {
|
||
margin-left: 16rpx;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
// 操作按钮区域（恢复旧版“去质检”样式）
|
||
.item-footer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
padding: 20rpx 24rpx;
|
||
background: #fafbfc;
|
||
border-top: 1rpx solid #eef0f3;
|
||
}
|
||
|
||
.footer-divider {
|
||
height: 1rpx;
|
||
background: linear-gradient(90deg, transparent 0%, #e6e9ef 20%, #e6e9ef 80%, transparent 100%);
|
||
}
|
||
|
||
/* footer-actions 由布局继承，无需额外样式，这里移除空规则避免告警 */
|
||
|
||
.check-btn {
|
||
min-width: 140rpx;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
padding: 0 24rpx;
|
||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
border: none;
|
||
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.check-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.check-btn:active {
|
||
transform: translateY(1rpx);
|
||
box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.25);
|
||
}
|
||
|
||
.item-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.meta-text {
|
||
font-size: 24rpx;
|
||
color: #6b7280;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.item-arrow {
|
||
margin-left: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 旧的 footer 样式已移除，使用新的 order-actions
|
||
|
||
.loading-more,
|
||
.no-more {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx 0;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.loading-text,
|
||
.no-more-text {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.no-more-text {
|
||
color: #ccc;
|
||
}
|
||
|
||
/* 图片预览弹窗样式 */
|
||
.image-popup {
|
||
width: 600rpx;
|
||
max-width: 90vw;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 30rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.image-popup-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.image-popup-close {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.image-swiper {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
}
|
||
|
||
.preview-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/* 表单弹窗样式 */
|
||
.form-popup {
|
||
background-color: #fff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.form-scroll {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.form-popup-header {
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
text-align: center;
|
||
}
|
||
|
||
.form-popup-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.custom-form {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.form-label {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-label-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 12rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.required {
|
||
color: #ff4d4f;
|
||
margin-left: 4rpx;
|
||
}
|
||
|
||
.required-star {
|
||
color: #ff4d4f;
|
||
margin-right: 4rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 24rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-picker-wrapper {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 24rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
}
|
||
|
||
.form-picker-input {
|
||
flex: 1;
|
||
height: 100%;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
background-color: transparent;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.form-picker-icon {
|
||
flex-shrink: 0;
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
.form-picker-wrapper.disabled {
|
||
color: #999;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.form-picker-wrapper.disabled .form-picker-input {
|
||
color: #999;
|
||
}
|
||
|
||
.form-select-wrapper {
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.form-select-display {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 24rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-select-text {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.form-select-wrapper.disabled .form-select-display {
|
||
color: #999;
|
||
background-color: #f0f0f0;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.form-select-wrapper.disabled .form-select-text {
|
||
color: #999;
|
||
}
|
||
|
||
.form-select-options {
|
||
position: absolute;
|
||
top: 88rpx;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
border-radius: 8rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||
max-height: 400rpx;
|
||
overflow-y: auto;
|
||
z-index: 1000;
|
||
border: 1rpx solid #e8e8e8;
|
||
}
|
||
|
||
.form-select-option {
|
||
padding: 24rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-select-option:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.form-select-option:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.form-select-option.active {
|
||
color: #1890ff;
|
||
background-color: #e6f7ff;
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 160rpx;
|
||
padding: 20rpx 24rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.uploader-container {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-actions-placeholder {
|
||
height: 120rpx;
|
||
}
|
||
|
||
.form-actions-fixed {
|
||
padding: 20rpx 30rpx;
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
background-color: #fff;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.form-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.form-btn-cancel {
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
|
||
.form-btn-cancel::after {
|
||
border: none;
|
||
}
|
||
|
||
.form-btn-submit {
|
||
background-color: #1890ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.form-btn-submit::after {
|
||
border: none;
|
||
}
|
||
|
||
.form-btn:active {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 登录弹窗样式 */
|
||
.login-popup {
|
||
width: 560rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.login-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.login-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.login-close {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.login-content {
|
||
padding: 40rpx 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-desc {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 40rpx;
|
||
display: block;
|
||
}
|
||
|
||
.login-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.login-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.login-btn:active {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 绑定弹窗样式 */
|
||
.bind-popup {
|
||
width: 640rpx;
|
||
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.bind-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 40rpx 40rpx 30rpx;
|
||
background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
|
||
border-bottom: 1rpx solid rgba(24, 144, 255, 0.1);
|
||
}
|
||
|
||
.bind-title-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.bind-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #1890ff;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
|
||
.bind-close {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
background-color: rgba(0, 0, 0, 0.04);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.bind-close:active {
|
||
background-color: rgba(0, 0, 0, 0.08);
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.bind-content {
|
||
padding: 50rpx 40rpx 40rpx;
|
||
}
|
||
|
||
.bind-desc {
|
||
font-size: 26rpx;
|
||
color: #8c8c8c;
|
||
margin-bottom: 50rpx;
|
||
display: block;
|
||
text-align: center;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.bind-form {
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.bind-form-item {
|
||
margin-bottom: 36rpx;
|
||
}
|
||
|
||
.form-item-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.input-wrapper {
|
||
position: relative;
|
||
background-color: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #e8e8e8;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.input-wrapper:focus-within {
|
||
border-color: #1890ff;
|
||
background-color: #fff;
|
||
box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.1);
|
||
}
|
||
|
||
.bind-code-item {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.code-input-wrapper {
|
||
flex: 1;
|
||
}
|
||
|
||
.bind-input {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
padding: 0 28rpx;
|
||
background-color: transparent;
|
||
border: none;
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bind-input::placeholder {
|
||
color: #bfbfbf;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.bind-code-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.bind-code-btn {
|
||
width: 200rpx;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.bind-code-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.bind-code-btn:disabled {
|
||
background: #d9d9d9;
|
||
color: #fff;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.bind-code-btn:active:not(:disabled) {
|
||
transform: translateY(2rpx);
|
||
box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
|
||
}
|
||
|
||
.bind-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.bind-btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
border-radius: 48rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
transition: all 0.3s;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.bind-btn-submit {
|
||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||
color: #fff;
|
||
box-shadow: 0 8rpx 20rpx rgba(24, 144, 255, 0.4);
|
||
order: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.bind-btn-submit::after {
|
||
border: none;
|
||
}
|
||
|
||
.bind-btn-submit:disabled {
|
||
opacity: 0.6;
|
||
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);
|
||
}
|
||
|
||
.bind-btn-submit:active:not(:disabled) {
|
||
transform: translateY(2rpx);
|
||
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.4);
|
||
}
|
||
|
||
.bind-btn-cancel {
|
||
background-color: #f5f5f5;
|
||
color: #8c8c8c;
|
||
order: 2;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.bind-btn-cancel::after {
|
||
border: none;
|
||
}
|
||
|
||
.bind-btn-cancel:disabled {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.bind-btn-cancel:active:not(:disabled) {
|
||
background-color: #e8e8e8;
|
||
transform: scale(0.98);
|
||
}
|
||
</style>
|