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

<template>
  <view class="container" v-if="(props.s=='1' || 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 class="case">{{props.v.disName}}</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-if="props.workStatus=='1' && props.s=='0' &&props.c=='0'" >  <!-- @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 @click="handleSelect" 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, onBeforeUpdate, ref,computed } from 'vue'

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

const selected = ref(false)



const emit = defineEmits(['emitSelect'])



onBeforeUpdate(()=>{
	selected.value = props.v.selected

})


const deployStateName = computed(()=>{
	switch(props.v.thread) {
		
		case '110':
			return '药房审核通过';
		case '120':
			return '药房审核不通过';
		case '130':
			return '已调配';
		case '140':
			return '已复核';
		case '150':
			return '已浸泡';
		case '160':
			return '已煎煮';
		case '161':
			return '已先煎';
		case '162':
			return '已开始煎煮';
		case '163':
			return '已后下';
		case '164':
			return '已结束煎煮';
		case '165':
			return '已开始浓缩';
		case '166':
			return '已结束浓缩';
		case '170':
			return '已打包';
		case '171':
			return '已上架';
		case '175':
			return '已发药';
		case '180':
			return '已发货';
		case '190':
			return '已签收';
		case '60':
			return '处方作废';
		case '70':
			return '收费成功';
		case '80':
			return '收费失败';
		case '90':
			return '退费';
		case '100':
			return '取消退费';
		default:
			return '异常状态';
	}	
})

const handleDetail = ()=>{
	

	if(props.c===0){
		
		uni.navigateTo({
			url:`/pages/edit/edit?id=${props.v.id}`
			
		})
	} else {
		uni.navigateTo({
			url:`/pages/detail/detail?id=${props.v.id}`
		})
	}
}

const handleSelect = ()=>{
	
	selected.value = !selected.value
	emit('emitSelect',{
		id:props.v.id,
		selected: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: 4rpx 48.78rpx;
		margin-bottom: 2rpx;
		.zt{
			display: flex;
			width: 200rpx;
			font-size: 13.75rpx;
		}
		.je{
			display: flex;
			width: 200rpx;
			font-size: 15rpx;
		}
	}
}
</style>