Otsuka-APP/pages/work/BusinessApproval/index.vue

<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="20vw">
				<uni-forms-item label="支付方式">
					<uni-data-select
						v-model="paymentValue"
						:localdata="paymentOptions"
						@change="filterContracts"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="生产单位">
					<uni-data-select
						v-model="companyValue"
						:localdata="companyOptions"
						@change="filterContracts"
					></uni-data-select>
				</uni-forms-item>
			</uni-forms>
		</view>
		
		<view v-if="filteredContracts.length === 0" class="no-data">
			<text>暂无匹配的合同数据</text>
		</view>
		
		<view v-else>
			<uni-card 
				v-for="(contract, index) in filteredContracts" 
				:key="contract.saleid" 
				:title="contract.usernames" 
				@click="gotoDetail(contract)"
				:class="index % 2 === 0 ? 'card-even' : 'card-odd'"
			>
				<uni-row class="demo-uni-row">
					<uni-col :span="12">
						<view class="demo-uni-col dark">生产单位: {{ contract.companyName }}</view>
					</uni-col>
					<uni-col :span="12">
						<view class="demo-uni-col light">合同编号: {{ contract.contractcode }}</view>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row">
					<uni-col :span="12">
						<view class="demo-uni-col dark">制单日期: {{ formatDate(contract.adddate) }}</view>
					</uni-col>
					<uni-col :span="12">
						<view class="demo-uni-col light">订单金额: {{ contract.contractmoney.toFixed(2) }}</view>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row">
					<uni-col :span="12">
						<view class="demo-uni-col dark">状态: {{ contract.stateText }}</view>
					</uni-col>
					<uni-col :span="12">
						<view class="demo-uni-col light">区域: {{ contract.areaName }}</view>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
	</view>
</template>

<script setup>
	
import { ref, reactive, onMounted, computed,getCurrentInstance } from "vue"
import { contractData } from "./data.js" // 根据实际路径调整
const { proxy } = getCurrentInstance()
// 表单数据
const baseFormData = ref({})
const paymentValue = ref(0)
const companyValue = ref(0)

// 筛选选项
const paymentOptions = ref([
	{ value: 0, text: "全部支付方式" },
	{ value: 1, text: "账期支付" },
	{ value: 2, text: "预付款" }
])

const companyOptions = ref([
	{ value: 0, text: "全部生产单位" },
	{ value: 1, text: "浙江大冢制药有限公司" },
	{ value: 2, text: "广东大冢制药有限公司" }
])

// 合同数据
const contracts = ref([])

// 过滤后的合同数据
const filteredContracts = computed(() => {
	let result = contracts.value
	
	// 根据生产单位筛选
	if (companyValue.value === 1) {
		result = result.filter(contract => contract.companyName.includes('浙江'))
	} else if (companyValue.value === 2) {
		result = result.filter(contract => contract.companyName.includes('广东'))
	}
	
	// 可以根据支付方式添加更多筛选逻辑
	
	return result
})

// 初始化数据
onMounted(() => {
	contracts.value = contractData.rows
})

// 格式化日期
function formatDate(dateString) {
	if (!dateString) return '未知日期'
	return dateString.split(' ')[0]
}

// 筛选合同
function filterContracts(e) {
	console.log("筛选条件变化:", e)
	// 计算属性会自动更新，无需额外操作
}

// 跳转到详情页
function gotoDetail(contract) {
	console.log("查看合同详情:", contract)
	// proxy.$tab.navigateTo('/pages/work/yonghu/detail')
	// proxy.$tab.navigateTo(`/pages/work/yonghu/detail?saleid=${contract.saleid}`)
	proxy.$tab.navigateTo('/pages/work/BusinessApproval/OrderDetail')
}
</script>

<style lang="scss" scoped>
.container {
	padding: 10px;
	background-color: #f5f7fa;
	min-height: 100vh;
}

.example {
	padding:  10px;
	background: #fff;
	border-radius: 8px;
	margin-bottom: 15px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

:deep(.uni-section .uni-section-header) {
	padding: 0;
}

:deep(.uni-card) {
	padding: 0 !important;
	margin: 10px 0 !important;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

:deep(.uni-card__content) {
	padding: 12px !important;
}

.demo-uni-row {
	padding: 5px 0;
	font-size: 14px;
}

.demo-uni-col {
	padding: 2px 0;
	
	&.dark {
		color: #333;
		font-weight: 500;
	}
	
	&.light {
		color: #666;
	}
}

.card-even {
	border-left: 4px solid #2979ff;
}

.card-odd {
	border-left: 4px solid #19be6b;
}

.no-data {
	text-align: center;
	padding: 40px 0;
	color: #999;
	font-size: 16px;
}
</style>