bonus-material-app/src/pages/back/detail.vue

<template>
    <uni-nav-bar status-bar leftIcon="left" right-text="提交" title="退料任务详情" backgroundColor="#dcf4ff" :border="false" fixed @clickLeft="leftClick" @clickRight="submit"/>
    <view class="accept page-common">
        <uni-row :gutter="24" class="search-form">
            <uni-col :span="10">
                <view><uni-easyinput placeholder="请输入内容" v-model="keyWord" maxlength="10"/></view>
            </uni-col>
            <uni-col :span="4">
                <view class="search" @click="getTableList()">查询</view>
            </uni-col>
            <uni-col :span="5">
                <view class="addBtn" @click="goCode">编码退料</view>
            </uni-col>
            <uni-col :span="5" style="padding-right: 0;">
                <view class="addBtn" @click="goNum">数量退料</view>
            </uni-col>
        </uni-row> 
        <div class="table-list-item" v-for="(item, index) in tableList" :key="index">
            <uni-swipe-action class="swipe-action" ref="swipeRef">
                <uni-swipe-action-item @click="onClick($event, item, index)" :right-options="item.manageType==1 ? options:options2">
                    <div class="title">
                        <span style="font-size: 15px; font-weight: 800">退料任务</span>
                        <!-- <span v-if="item.status == 2" style="color: #ff4d4f">未验收</span> -->
                        <!-- <span v-else-if="item.status != 2" style="color: #3784fb">已验收</span> -->
                        <!-- <span v-else-if="item.status == 12" style="color: #ff4d4f">不合格</span> -->
                    </div>
                    <div class="line"></div>
                    <uni-row :gutter="24">
                        <uni-col :span="8">物资名称：</uni-col>
                        <uni-col :span="16"><div class="cont">{{ item.typeName }}</div></uni-col>
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">规格型号：</uni-col>
                        <uni-col :span="16"><div class="cont">{{ item.typeModel }}</div></uni-col>
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">退料数量：</uni-col>
                        <uni-col :span="16"><div class="cont">{{ item.preNum }}</div></uni-col>
                    </uni-row>
                    <uni-row :gutter="24">
                        <uni-col :span="8">单位：</uni-col>
                        <uni-col :span="16"><div class="cont">{{ item.unitName }}</div></uni-col>
                    </uni-row>
                    <uni-row :gutter="24" v-if="item.status != 2">
                        <uni-col :span="8">管理模式：</uni-col>
                        <uni-col :span="16">
                            <div class="cont" v-if="item.manageType==0">编码管理</div>
                            <div class="cont" v-if="item.manageType==1">数量管理</div>
                        </uni-col>
                    </uni-row>
                </uni-swipe-action-item>
            </uni-swipe-action>

        </div>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getBackInfo,deleteNumType, submitBackApply } from '@/services/back.js';
import { onLoad,onShow } from '@dcloudio/uni-app'
const keyWord = ref('')
const id = ref('') 
const taskId = ref('')
const statusList = ref(["2","12"])
const tableList = ref([])
const taskInfo = ref({})
const swipeRef = ref()

// 右滑按钮组
const options = ref([
    {
        text: '查看',
        style: {
            backgroundColor: '#65a1ff',
            color: '#fff',
            fontSize: '30rpx',
        },
    },
    {
        text: '删除',
        style: {
            backgroundColor: '#ed6042',
            color: '#fff',
            fontSize: '30rpx',
        },
    },
]) 

// 右滑按钮组
const options2 = ref([
    {
        text: '查看',
        style: {
            backgroundColor: '#65a1ff',
            color: '#fff',
            fontSize: '30rpx',
        },
    },
    
])  
const leftClick = () => { 
    // 返回
    uni.navigateBack({
        delta: 1, // 返回到已存在的页面
    })
}
//详情数据
const getTableList = () => { 
	// let obj = {
	// 	"id":id.value,
	// 	// "taskId":taskId.value,
	// 	// "statusList":statusList.value,
	// }
	// console.log(obj)
	getBackInfo(id.value,keyWord.value).then(res => { 
		console.log(res) 
        taskInfo.value = res.data.backApplyInfo;
		tableList.value = res.data.backApplyDetailsList;
		console.log(taskInfo.value)
	}).catch(error => {
		console.log(error) 
	})  
}
const search = () => {
    console.log('🚀 ~ search ~ keyWord:', keyWord.value)
	getTableList()
} 
//编码新增
const goCode = () => {
    uni.navigateTo({ url: `/pages/back/backCode?taskInfo=${JSON.stringify(taskInfo.value)}` })
}
//数量新增
const goNum = () => {
    uni.navigateTo({ url: `/pages/back/backNum?taskInfo=${JSON.stringify(taskInfo.value)}` })
}
const onClick = (e, item, itemIndex) => {
    const { index } = e
    // 1. 查看
    if (index === 0) {
        if (item.manageType == 0) {//编码管理
            uni.navigateTo({ url: `/pages/back/backCodeDetail?taskInfo=${JSON.stringify(taskInfo.value)}&rowData=${JSON.stringify(item)}` })
        } else if(item.manageType == 1) {//数量管理
            uni.navigateTo({ url: `/pages/back/backNumDetail?taskInfo=${JSON.stringify(taskInfo.value)}&rowData=${JSON.stringify(item)}` })
        }
    }
    // 2. 删除
    if (index === 1) {
        let param = {
            id:item.id,
            parentId:item.parentId
        }
        deleteNumType(param).then(res => { 
            console.log(res)
            if(res.code==200){
                uni.showToast({ title: '删除成功', icon: 'none' })
                getTableList()
            }else{
                uni.showToast({ title: '删除失败', icon: 'none' })
            }
        }).catch(error => {
            console.log(error) 
        })  
    }
    swipeRef.value[itemIndex].closeAll()
}
const submit = async () => {
    let param = {
        id: id.value,
        taskId: taskId.value
    }
    try {
        const res = await submitBackApply(param)
        if (res.code==200){
            uni.showToast({ title: '提交成功', icon: 'none' })
            leftClick()
        }
        
    } catch (error) {
        console.log('🚀 ~ submit ~ error:', error)
        uni.showToast({ title: '删除失败', icon: 'none' })
    }
    //   console.log(param)
    //   submitBackApply(param).then(res => {
    //     console.log(res)
    //     if(res.code==200){
    //       uni.showToast({ title: '提交成功', icon: 'none' })
          
    //     }else{
    //       uni.showToast({ title: '提交失败', icon: 'none' })
    //     }
    //   }).catch(error => {
    //     console.log(error)
    //   })
}
onLoad((options)=>{
	console.log(options)
	id.value = options.id
	taskId.value = options.taskId
	getTableList()
})
onShow(()=>{
	getTableList()
})
</script>

<style lang="scss" scoped>
.accept {
    height: 95vh;
    word-break: break-all;
    overflow-y: auto;
    background-color: #f7f8fa;
    padding: 24rpx;

    // 搜索表单
    .search-form {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 24rpx;
        border-radius: 20rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

        :deep(.uni-col) {
            padding-right: 16rpx;  // 统一列间距
        }

        :deep(.uni-easyinput__content) {
            background-color: #f7f8fa;
            border: 2rpx solid #e8e8e8;
            border-radius: 12rpx;
            height: 88rpx;  // 统一高度
            padding: 0 24rpx;
            transition: all 0.3s ease;

            &:focus-within {
                border-color: #3784fb;
                box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
            }

            .uni-easyinput__content-input {
                font-size: 28rpx;
                color: #262626;
                height: 88rpx;
                line-height: 88rpx;
            }
        }

        // 查询按钮
        .search {
            height: 80rpx;  // 增加按钮高度
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            text-align: center;
            line-height: 80rpx;
            color: #fff;
            border-radius: 12rpx;
            font-size: 24rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
            transition: all 0.3s ease;
            white-space: nowrap;  // 防止文字换行

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
                box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
            }
        }

        // 新增按钮
        .addBtn {
            height: 80rpx;  // 增加按钮高度
            background: linear-gradient(135deg, #19be6b 0%, #16a75c 100%);
            text-align: center;
            line-height: 80rpx;
            color: #fff;
            border-radius: 12rpx;
            font-size: 20rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(25, 190, 107, 0.2);
            transition: all 0.3s ease;
            white-space: nowrap;  // 防止文字换行

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
                box-shadow: 0 2rpx 8rpx rgba(25, 190, 107, 0.2);
            }
        }
    }
 
	// 列表项样式
	.table-list-item {
		margin: 24rpx 0;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
		overflow: hidden;  // 移除溢出隐藏
		position: relative; // 移除相对定位

		// 滑动操作区域样式优化
		.swipe-action {
			:deep(.uni-swipe) {
				width: calc(100% + 64rpx) !important;  // 增加宽度以容纳按钮
				margin: -32rpx;  // 抵消父元素的内边距
				padding: -10rpx;  // 添加内边距
				background-color: #fff;  // 设置背景色
			}

			:deep(.uni-swipe_content) {
				background: #fff;  // 设置内容区背景色
				border-radius: 20rpx;  // 保持圆角
				overflow: hidden;  // 内容区域溢出隐藏
			}

			:deep(.uni-swipe_right) {
				height: 100%;
				display: flex;
				align-items: center;
				transform: translateX(100%);  // 初始状态隐藏
				transition: transform 0.3s;
			}
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center; 
			padding-left: 20rpx;
			padding-top: 10rpx;

			span {
				font-size: 32rpx;
				font-weight: 600;
				color: #3784fb;
				background: linear-gradient(90deg, #3784fb, #4b8eff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.line {
			margin: 24rpx 0;
			height: 2rpx;
			background: linear-gradient(90deg, 
				rgba(232, 232, 232, 0) 0%,
				rgba(232, 232, 232, 1) 50%,
				rgba(232, 232, 232, 0) 100%
			);
		}

		:deep(.uni-row) {
			margin-bottom: 20rpx;
			padding-left: 20rpx;
			&:last-child {
				margin-bottom: 0;
			}

			.uni-col-8 {
				color: #8c8c8c;
				font-size: 28rpx;
				font-weight: 500;
			}

			.cont {
				color: #262626;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 1.8;
				text-align: right;
				padding-right: 20rpx;
			}
		}

		// 滑动按钮样式
		:deep(.uni-swipe_button-group) {
			height: 100%;
			display: flex;
			align-items: stretch;

			.uni-swipe_button {
				padding: 0 50rpx;
				font-size: 28rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
				height: auto;
				margin: 0;
				min-width: 120rpx;  // 设置最小宽度

				&:nth-child(1) {
					background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
					box-shadow: 0 4rpx 16rpx rgba(55, 132, 251, 0.2);
					border-radius: 0;
				}

				&:nth-child(2) {
					background: linear-gradient(135deg, #ff4d4f 0%, #ed6042 100%);
					box-shadow: 0 4rpx 16rpx rgba(237, 96, 66, 0.2);
					border-radius: 0;
				}

				&:active {
					opacity: 0.9;
					transform: scale(0.98);
				}
			}
		}

		&:active {
			transform: scale(0.985);
			background-color: #fafbfc;
		}
	}

}
</style>