legacy.pda.deploy-review/components/order-card/order-card.vue

<template>
  <view class="container" v-if="props.workStatus=='0' || props.c=='1'" @click="handleDetail">
		<view class="t">
			<view class="d1"></view>
			<view class="d2">
				<view class="dtim">时间:{{props.v.prescriptionTime}}</view>
			</view>
			<view class="d3"><view class="presno">处方号：{{props.v.preNo}}</view></view>
			<view class="d4"><view class="source" :class="{'zy':props.v.preMzZy==='1'}">{{props.v.preMzZy==='1'?'门诊':'住院'}}</view></view>
		</view>
		<view class="m">
			<image class="faceu" aspectFill :src="props.v.sex==='男'?'/static/hz.png':'/static/hy.png'" />
			<view class="patie">
				<view class="name">{{props.v.name}}</view>
				<view class="seage">
					<image class="img" aspectFill :src="props.v.sex==='男'?'/static/male.png':'/static/female.png'" />
					<view class="sex">{{props.v.sex}}</view>
					<view class="sep">|</view>
					<view class="age">{{v.age}}岁</view>
				</view>
				<view class="case">{{props.v.disName}} - {{props.v.symName}}</view>
			</view>
			<view class="pres">
				<view class="department">就诊科室：{{props.v.department}}</view>
				<view class="presInfo">
					处方信息：
					<text class="tips">
						{{props.v.dosageForm}}，{{props.v.number}}剂
					</text>
				</view>
			</view>
		</view>
		<view class="b">
			<view class="zt">当前处方状态： {{deployStateName}}</view>
			<view class="je">处方金额：{{props.v.prescriptionSum}}元</view>
		</view>
  </view>
	<view class="container" v-else @click="handleSelect">
		<view class="t">
			<view class="d1"></view>
			<view class="d2">
				<view class="dtim">时间:{{props.v.prescriptionTime}}</view>
			</view>
			<view class="d3"><view class="presno">处方号：{{props.v.preNo}}</view></view>
			<view class="d4"><view class="source" :class="{'zy':props.v.preMzZy==='1'}">{{props.v.preMzZy==='1'?'门诊':'住院'}}</view></view>
		</view>
		<view class="m">
			<view class="radio">
				<label><radio value="selected" color="#18C7B0" :checked="selected"/></label>
			</view>
			<image class="faceu" aspectFill :src="props.v.sex==='男'?'/static/hz.png':'/static/hy.png'" />
			<view class="patie">
				<view class="name">{{props.v.name}}</view>
				<view class="seage">
					<image class="img" aspectFill :src="props.v.sex==='男'?'/static/male.png':'/static/female.png'" />
					<view class="sex">{{props.v.sex}}</view>
					<view class="sep">|</view>
					<view class="age">{{v.age}}岁</view>
				</view>
				<view class="case">{{props.v.disName}} - {{props.v.symName}}</view>
			</view>
			<view class="pres">
				<view class="department">就诊科室：{{props.v.department}}</view>
				<view class="presInfo">
					处方信息：
					<text class="tips">
						{{props.v.dosageForm}}，{{props.v.number}}剂
					</text>
				</view>
			</view>
		</view>
		<view class="b">
			<view class="zt">当前处方状态： {{deployStateName}}</view>
			<view class="je">处方金额：{{props.v.prescriptionSum}}元</view>
		</view>
	</view>
</template>

<script>
  export default {
    name: 'OrderCard'
  }
</script>

<script setup>
import { onMounted, ref,computed } from 'vue'

const props = defineProps({
	v: {
		default: function() {
			return {
				name: '',
				deployState:0,
				preNo:''
			}
		},
		type: Object
	},
	workStatus: {
		default:'0',
		type: String
	},
	// 当前tab
	c: {
		default: 0,
		type: Number
	}
})

const selected = ref(false)

const emit = defineEmits(['emitSelect'])

console.log('props.workStatus',props.workStatus)


const deployStateName = computed(()=>{
	switch(props.v.deployState) {
		case '1':
		return '抓药';
		case '2':
			return '复核';
		case '3':
			return '浸泡';
		case '4':
			return '煎煮';
		case '5':
			return '打包';
		default:
		return '异常状态';
	}	
})

const handleDetail = ()=>{
	console.log("handleDetail", props.v, props.c)
	if(props.c===0){
		uni.navigateTo({
			url:`/pages/edit/edit?id=${props.v.id}`
			// url:`/pages/review/review?id=&preNo=${props.v.preNo}&deployState=${props.v.deployState}`
		})
	} else {
		uni.navigateTo({
			url:`/pages/detail/detail?id=${props.v.id}`
		})
	}
}

const handleSelect = ()=>{
	console.log('handleSelect>>',props.v.id)
	emit('emitSelect', props.v.id)
	selected.value = !selected.value
}

</script>

<style lang="scss">
.container{
	display: flex;
	width: 100%;
	display: flex;
	flex-direction:column;
	width: 100%;
	margin-top: 10rpx;
	.t{
		display: flex;
		background-color: #EBF8F7;
		height: 33.75rpx;
		width: 709.38rpx;
		font-size: 13.75rpx;
		color: #999999;
		justify-content:flex-start;
		align-items:center;
		.d1::before{
			content: '';
			display: inline-block;
			width: 20px;
			height: 20px;
			background: "#18C7B0";
		}
		.d2{
			margin-left: 16rpx;
		}
		.d3{
			margin-left: 200rpx;
		}
		.d4{
			margin-left: auto;
			.source{
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 25rpx 0 0 25rpx;
				font-size: 13.75rpx;
				width: 50rpx;
				height: 21.25rpx;
				background-color: #18C7B0;
				color: #fff;
			}
			.zy{
				background-color: #82ABE1!important;
				}
		}
	}
	.m{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 11.88rpx 25rpx 15.75rpx;
		.radio{
			
		}
		.faceu{
			width: 73.13rpx;
			height: 73.13rpx;
			margin-right: 10rpx;
		}
		.patie{
			display: flex;
			flex-direction:column;
			justify-content: flex-start;
			align-items: flex-start;
			height: 73.13rpx;
			width: 270rpx;
			.name{
				font-size: 17.5rpx;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
			.seage{
				display: flex;
				margin-top: 8rpx;
				.img{
					height: 15rpx;
					width: 15rpx;
				}
				.sex{
					font-size: 12rpx;
					color: #999999;
					padding-right: 8.75rpx;
				}
				.sep{
					font-size: 10rpx;
					color: #999999;
				}
				.age{
					font-size: 12rpx;
					color: #999999;
					padding-left: 8.75rpx;
				}
			}
			.case{
				margin-top: 3rpx;
				font-size: 15rpx;
				color: #333333;
			}
		}
		.pres{
			display: flex;
			flex-direction:column;
			justify-content: flex-start;
			align-items: flex-start;
			margin-left: 4rpx;
			height: 73.13rpx;
			.department{
				margin-top: 5rpx;
				font-size: 15rpx;
				color: #999999;
			}
			.presInfo{
				margin-top: 10rpx;
				font-size: 15rpx;
				color: #333333;
				.tips{}
			}
		}
	}
	.b{
		display: flex;
		flex-direction:row;
		justify-content: space-between;
		align-items: center;
		height: 33.75rpx;
		width: 709.38rpx;
		color: #999999;
		padding: 10rpx 48.78rpx;
		margin-bottom: 10rpx;
		.zt{
			display: flex;
			width: 200rpx;
			font-size: 13.75rpx;
		}
		.je{
			display: flex;
			width: 200rpx;
			font-size: 15rpx;
		}
	}
}
</style>