hldy_app_mini/pages/procure/component/contright.vue

<template>
	<view>
		<view class="cont">
			<view class="gys">
				供应商：吉林省捌零信创科技有限公司
			</view>
			<view class="topcon">
				<view class="title" @click="clk">
					<view></view>
					采购单
				</view>
				<view class="zuofei" v-if="active==2">
					<image src="/static/three/zf.png" mode="aspectFill"></image>
					作废采购单
				</view>
			</view>
			<view class="cgdh" v-if="active==2">
				<view class="cont">
					<text>采购单号： </text>101C20251121006
				</view>
				<view class="cont">
					<text>采购日期： </text>2025-10-12
				</view>
				<view class="jiage">
					<view>
						<text>￥</text>0.35 
					</view>
					<text>采购价格 </text>
				</view>
			</view>
			
			<view class="boxcen">
				<view class="boxa">
					<view class="bianj" v-if="active==1">
						<image src="/static/three/jiao.png" mode="aspectFill"></image>
					</view>
					<view class="jszl guodu" :class="active==1?'':'jsh0'" @click.stop>
						温馨提示：点击生成采购单
					</view>
					
					<view :class="active>=1?'act':''" @click="active=1;emit('link',1)">
						<image src="/static/three/cgd.png" v-if="active>=1" mode="aspectFill"></image>
						<image src="/static/three/cgd1.png" v-else mode="aspectFill"></image>
					</view>
					<text>采购单</text>
				</view>
				<text class="jiao">▶</text>
				<view class="boxa">
					<view class="bianj" v-if="active==2">
						<image src="/static/three/jiao.png" mode="aspectFill"></image>
					</view>
					<view class="jszl guodu lecen" :class="active==2?'':'jsh0'" @click.stop>
						温馨提示：供应商尚未生成随行单，请耐心等待
					</view>
					<!--  -->
					<view :class="active>=2?'act':''" @click="active=2">
						<image src="/static/three/sxd.png" v-if="active>=2" mode="aspectFill"></image>
						<image src="/static/three/sxd1.png" v-else mode="aspectFill"></image>
					</view>
					<text>随行单</text>
				</view>
				<text class="jiao">▶</text>
				<view class="boxa">
					<!-- <view class="bianj" v-if="active==3">
						<image src="/static/three/jiao.png" mode="aspectFill"></image>
					</view>
					<view class="jszl guodu lerin" :class="active==3?'':'jsh0'" @click.stop>
						温馨提示：点击生成采购单
					</view> -->
					<!--  -->
					<view :class="active==3?'act':''" @click="active=3">
						<image src="/static/three/jh.png"  v-if="active==3" mode="aspectFill"></image>
						<image src="/static/three/jh1.png" v-else mode="aspectFill"></image>
					</view>
					<text>拣货</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	 import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
	 const active = ref(0)
	 const emit = defineEmits(['link' ])
	 const clk = () =>{
		 active.value++
		 if(active.value>3){
			active.value = 0; 
		 }
	 }
</script>

<style lang="less" scoped>
.cont{
	width: 100%;
	height: 60.4vw;
	padding: 1.7vw 2.3vw;
	position: relative;
	.gys{
		width: 100%;
		text-align: right;
		position: absolute;
		right: 3.2vw;
		bottom: 3.2vw;
		font-size: 1.4vw;
		color: #555555;
	}
	.jiage{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: absolute;
		align-items: center;
		top:1.5vw;
		right: 0;
		text{
			font-size: 1.3vw;
			color: #888888;
		}
		view{
			font-size: 2.3vw;
			color: #333333;
			font-weight: bold;
			>text{
				font-size: 1.4vw
			}
		}
	}
	.cgdh{
		width: 55vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 3.8vw;
		position: relative;
		font-size: 1.4vw;
		.cont{
			color: #333333;
			text{
				font-weight: 500;
			}
		}
		
	}
	.boxcen{
		width: 50vw;
		height: 20vw;
		// margin: 18vw auto 0;
		position: absolute;
		top: 18vw;
		left:6.25vw;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.jiao{
			font-size: 1.4vw;
			color: #C2C3CA;
			margin-top: -3vw;
		}
		.act{
			background: #E1F0FF !important;
			border: 1px solid #1083F8 !important;
		}
		.boxa{
			width: 7.2vw;
			height: 10.2vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			
			
			.jszl {
				width: 43vw;
				height: 7vw;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(136, 148, 167, 0.19);
				border-radius: 2.2vw;
				position: absolute;
				top: 12vw;
				left: 0;
				z-index: 10;
				padding: 2vw;
				overflow: hidden;
				font-size: 1.3vw;
				color: #3F86CF;
				border: 1px solid #D2D2D2;
			}
			.lecen{
				left: -16vw;
			}
			.lerin{
				left: -30vw !important;
			}
			.jsh0 {
				height: 0vw !important;
				padding: 0 2vw !important;
				border: 0px solid #D2D2D2;
			}
			.bianj {
				position: absolute;
				width: 2.2vw;
				height: 1.1vw;
				top: 11.2vw;
				left: 3.1vw;
				z-index: 11;
			
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			text{
				font-size: 1.6vw;
				color: #555555;
				margin-top: 1.4vw;
			}
			view{
				width: 7.2vw;
				height: 7.2vw;
				background: #F1F1F1;
				border-radius: 1.4vw;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image{
					width: 3.8vw;
					height: 3.8vw;
				}
			}
		}
	}
	.topcon{
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 3.5vw;
		.zuofei{
			width: 11vw;
			height: 3.6vw;
			background: #FFFFFF;
			border-radius: 1.6vw;
			border: 1px solid rgba(16, 131, 248,0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.3vw;
			color: #555555;
			image{
				width: 1.4vw;
				height: 1.4vw;
				margin: 0 0.5vw;
			}
		}
	}
	.title{
		font-size: 1.7vw;
		color: #222222;
		display: flex;
		align-items: center;
		view{
			width: 0.5vw;
			height: 1.4vw;
			background: radial-gradient( 0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
			border-radius: 0.2vw;
			margin-right: 1vw;
		}
	}
}
.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>