hldy_app_mini/pages/NursingNew/component/pleasetake/component/requestform.vue

<template>
	<view class="buttons-father" :style="transition?{opacity: `1`}:{opacity: `0`}" v-show="isShow">
		<view class="title-input">
			<input type="text" v-model="plzinfo.searchContent" placeholder="请领单号" @confirm="clickconfirm" />
			<image src="/static/index/procurement/x.png" mode="aspectFill" v-if="plzinfo.searchContent"
				@click="plzinfo.searchContent=``"></image>
		</view>
		<view class="title-ball" @click="clickconfirm();handleClick()">
			<image class="title-ball-img" :src="imgSrc" mode="aspectFill"></image>
		</view>
		<view class="title-ball" @click="chongzhi();handleClick1()">
			<image class="title-ball-img" :src="imgSrc1" mode="aspectFill"></image>
		</view>
		<view class="center-font">
			<image src="/static/index/purchaseorder/company.png" mode="aspectFill" class="center-font-imge"></image>
			{{ uni.getStorageSync('nuName')}}
		</view>

		<view class="right-button" @click="badshow=true" v-show="plsbuy[lefttarget]?.status==`1`">
			<image src="/static/index/warehouse/procurement/picking/bebad.png" />
			<view>
				作废
			</view>
		</view>
		<view class="right-button" @click="shouhuoshow=true" v-show="plsbuy[lefttarget]?.status==`4`">
			<image src="/static/index/warehouse/procurement/picking/shouhuo.png" />
			<view>
				收货
			</view>
		</view>
		<!-- <nomessage cont="暂无数据" :show="nomessageshow" /> -->
		<view class="bignomessage" v-if="nomessageshow">
			<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
			<view>暂无数据</view>
		</view>
	</view>
	<tanchuang :show="badshow" font="确定要作废这个请领单吗" @back="badshow=false;" @right="zuofei"> </tanchuang>
	<tanchuang :show="shouhuoshow" font="这个请领单确定要收货吗" @back="shouhuoshow=false;" @right="shouhuo"> </tanchuang>

	<view class="other-contain" :style="transition?{opacity: `1`}:{opacity: `0`}" v-show="isShow && !nomessageshow">

		<view class="other-contain-left">
			<view class="left-selecttype">
				<view :class="selectType===index?`selecttype-target`: `selecttype`" v-for="(item,index) in tagsarray"
					@click="changetype(index)">
					{{ item }}
				</view>
				<view class="heng-blue" :style="{ left: `${ 11.6 + selectType * 18.5}%` }">
				</view>
			</view>
			<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop"
				@scrolltolower="plsbuytolower" lower-threshold="300">
				<!-- <view style="height: 1%;"></view> -->
				<view class="haventmessage" v-if="!plsbuy.length">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="pls-card" v-for="(v,i) in plsbuy" :key='i' @click="clickLeftMenu(i,v)" :style="{
						 borderColor: i === lefttarget ? '#0f9fff' : '',
						  // background: i === lefttarget ? '#fff' : 'rgba(255,255,255,0.6)'
						}">
					<view
						style="background: #ff5757;position: absolute;width: 1.3vw;height: 1.3vw;border-radius: 50%;right: 0vw;top: 0vw;"
						v-if="v.izYgRead=='N'">
					</view>
					<view class="pls-card-title">
						<view class="middle-title-spec">
							请领单号
						</view>
						<view class="title-left">
							{{ v.qldNo }}
						</view>
					</view>
					<view class="pls-card-middle">
						<view class="middle-heng"></view>
						<view class="pls-card-middle-one">
							<view class="middle-title">
								{{ v.tjTime.replace(/-/g, '.') }}
							</view>
							<view class="middle-heng-father">
								<image class="middle-ball-img" src="/static/index/requestform/isok.png" />
							</view>
							<view class="end-font">

								<view>
									待出库
								</view>
								<view style="font-size: 25rpx;">
									{{ "[ " + v.tjByName + " ]" }}
								</view>
							</view>
						</view>
						<view class="pls-card-middle-one">
							<view class="middle-title"
								:style=" v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
								{{
									Number(v.status)>1?
								  v?.status === '2' 
								    ? v.zfTime?.slice(0,10).replace(/-/g, '.') 
								    : v?.status === '3'
								      ? v.htTime?.slice(0,10).replace(/-/g, '.') 
								      : v.ckTime?.slice(0,10).replace(/-/g, '.') 
									  : ""
								}}

							</view>
							<view class="middle-heng-father">
								<image class="middle-ball-img" style="width: 32rpx;height: 32rpx;"
									v-if="v?.status === '2' || v?.status === '3'"
									src="/static/index/requestform/iserror.png" />
								<view class="middle-ball" v-else-if="v?.status === '1'">
								</view>
								<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
							</view>
							<view class="end-font">

								<view :style="v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
									{{
									  v?.status === '2' 
									    ? `已作废`
									    : v?.status === '3'
									      ? `已回退`
									      : `已出库`
									}}

								</view>
								<view style="font-size: 25rpx;" v-if="Number(v.status)>1"
									:style=" v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
									{{ "[ " +   (v?.status === '2' 
									    ? v?.zfByName
									    : v?.status === '3'
									      ? v?.htByName
									      : v?.ckByName)+ " ]" }}
								</view>
							</view>
						</view>
						<view class="pls-card-middle-one">
							<view class="middle-title">
								{{ Number(v.status)==5 ? v.shTime?.slice(0,10).replace(/-/g, '.') :""}}
							</view>

							<view class="middle-heng-father">

								<!-- <view class="middle-ball" :style="{backgroundColor: `#1083F8`}"></view> -->
								<view class="middle-ball" :style="Number(v.status)==4?{}:{backgroundColor: `#E5E5E5`}"
									v-if="Number(v.status)!=5"></view>
								<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
							</view>
							<view class="end-font">
								<view v-if="v?.cgdType!='9'">
									已收货
								</view>
								<view style="font-size: 25rpx;" v-if="Number(v.status)==5">
									{{ "[ " + v.shByName + " ]" }}
								</view>
							</view>
						</view>
					</view>
					<view class="pls-card-end">
						<view class="end-left">
							<image class="end-left-img" src="/static/index/requestform/gongyingshang.png" />
							<view class="end-left-font">
								{{ v.nuName }}
							</view>
						</view>
						<view :class="v?.status === '2' || v?.status === '3' ?`tag-fail`:`tag-success`">
							{{ v.statusText  }}
						</view>
					</view>
				</view>
				<view class="pls-card center" v-if="plsbuy.length===1">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="pls-card center" v-if="plsbuy.length===1">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="pls-card center" v-if="plsbuy.length===2">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="other-contain-right">
			<scroll-view scroll-y="true" scroll-with-animation class="right-contain">
				<view class="right-ones">
					<view class="right-one" v-for="(item,index) in rightarray" :key="index">
						<view class="right-one-left">
							<view class="bgimg">
								<image class="left-image"
									:src="item.materialInfo?.materialImg?serverUrl+item.materialInfo?.materialImg:'/static/index/procurement/k.png'"
									mode="aspectFill"></image>
							</view>
							<view class="left-tages">
								{{ item.materialInfo.categoryName}}
							</view>
							<view class="left-tages">
								{{ item.materialInfo.typeName}}
							</view>
							<view class="left-tages" v-if="item.materialInfo.medicationName">
								{{ item.materialInfo.medicationName}}
							</view>
						</view>
						<view class="right-one-right">
							<view class="right-title">
								{{ item.materialInfo.materialName }}
							</view>
							<view style="display: flex;margin-top: 10rpx;">
								<view class="right-setting">
									规格编号：
								</view>
								<view class="right-mm">
									{{ item.materialInfo.materialNo }}
								</view>
							</view>
							<view style="display: flex;margin-top: 10rpx;">
								<view class="right-setting">
									规格型号：
								</view>
								<view class="right-mm">
									{{ item.materialInfo.specificationModel }}
								</view>
							</view>

							<view class="right-down">
								<view class="">
									<view class="right-first-num">
										{{ item.qlNum }}
									</view>
									<view class="right-first-type">
										请领数量
									</view>
								</view>
								<view class="right-shu"></view>
								<view class="">
									<view class="right-first-num" style="font-weight: 500;">
										{{ item.materialInfo.materialUnits }}
									</view>
									<view class="right-first-type">
										请领单位
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="right-one-white center" v-if="rightarray.length<2&&rightarray.length">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
					<view class="right-one-white center" v-if="rightarray.length<3&&rightarray.length">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
					<view class="right-one-white center" v-if="rightarray.length<4&&rightarray.length">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
					<view class="right-one-white center" v-if="rightarray.length<5&&rightarray.length">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
					<view class="right-one-white center" v-if="rightarray.length<6&&rightarray.length">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
				</view>
				<defaultr cont="暂无数据" v-if="rightarray.length==0 && rightdonghua"
					style="width: 30%;height: 30%;position: absolute;">
				</defaultr>
			</scroll-view>
		</view>
		<errorshow :show="openerror" :font="errormessage" @close="openerror=false" />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import { queryQld, queryQldWlInfo, transRead, cancellation, confirmReceipt } from '../api/api.js'
	import nomessage from '../common/nomessage.vue'
	import defaultr from '../common/default.vue'
	const props = defineProps({
		isShow: {
			type: Boolean,
			required: true,
		},
	});
	const tagsarray = ref(["全部", "待出库", "已出库", "已收货 ", "已作废"])
	// const nottrue = Array(10).fill(null)
	// 使用watch监听isShow变化
	const transition = ref(false);
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			// 当旧值为false，新值为true时延迟0.2秒调用方法
			if (!oldVal && newVal) {
				cannomessage.value = true
				transition.value = false;
				chongzhi()
				// firstgetqueryCgdList();
				setTimeout(() => {
					transition.value = true;
				}, 50)
			} else {
				transition.value = false;
			}

		}
	)
	onMounted(() => {

	})
	const lanjie = ref(false);

	const selectType = ref(0)
	const changetype = (index : number) => {
		if ((selectType.value == index) && index) {
			return
		}
		leftscrolltop.value = 0.01
		setTimeout(() => {
			leftscrolltop.value = 0
		}, 50)
		lefttarget.value = 0
		selectType.value = index
		plzinfo.pageNo = 1;
		plzinfo.canpull = true;

		switch (index) {
			case 0:
				plzinfo.status = `1,2,4,5`
				break
			case 1:
				plzinfo.status = `1`
				break
			case 2:
				plzinfo.status = `4`
				break
			case 3:
				plzinfo.status = `5`
				break
			case 4:
				plzinfo.status = `2`
				break
		}
		firstgetqueryCgdList()
	}
	const clickconfirm = () => {
		if (chongzhiLock) return
		chongzhiLock = true
		plzinfo.pageNo = 1;
		plzinfo.canpull = true;
		lefttarget.value = 0
		firstgetqueryCgdList()
		leftscrolltop.value = 0.01
		setTimeout(() => {
			leftscrolltop.value = 0
		}, 10)
		setTimeout(() => chongzhiLock = false, 500)
	}
	let chongzhiLock = false

	const chongzhi = () => {
		if (chongzhiLock) return
		chongzhiLock = true

		plzinfo.searchContent = ""
		changetype(0)
		// firstgetqueryCgdList()

		setTimeout(() => chongzhiLock = false, 500)
	}
	const plsbuy = ref([])
	const alltotal = ref(0);
	const lefttarget = ref(0)
	const plzinfo = reactive({
		pageNo: 1,
		pageSize: 30,
		canpull: true,
		searchContent: "",
		status: "1,2,4,5",
		elderId: uni.getStorageSync('elderId'),
		nuId: uni.getStorageSync('nuId')
	})

	const nomessageshow = ref(false);
	const leftscrolltop = ref(0)

	const rightarray = ref([]);
	// 检测锁
	const cannomessage = ref(true)
	const rightdonghua = ref(true);
	const firstgetqueryCgdList = () => {
		queryQld(plzinfo).then((res : any) => {
			transition.value = true;
			if (((res.message === "缺少参数") || (!res.result?.total)) && cannomessage.value) {
				nomessageshow.value = true;
				return
			}

			cannomessage.value = false
			plsbuy.value = []
			// console.log("6666",res.result.records)
			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total

			if (res.result.records.length) {
				rightdonghua.value = false;

				queryQldWlInfo({ qldNo: res.result.records[0].qldNo }).then((element : any) => {
					rightarray.value = []
					rightarray.value.push(...element.result)
					rightdonghua.value = true;
				})
			} else {
				rightarray.value = []
			}

			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}

		})
	}
	const setout = ref(true)
	let times = null
	const plsbuytolower = () => {
		if (!setout.value) { return }
		plzinfo.pageNo++;
		getqueryCgdList()
		setout.value = false
		times = setTimeout(() => {
			setout.value = true
		}, 500)
	}
	//获得采购单列表
	const getqueryCgdList = () => {
		if (!plzinfo.canpull) return
		queryQld(plzinfo).then((res : any) => {
			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total
			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	const clickLeftMenu = (index : any, item : any) => {
		let num = Math.ceil((index + 1))
		leftscrolltop.value = (num - 2) * 188;
		lefttarget.value = index;

		rightdonghua.value = false;
		queryQldWlInfo({ qldNo: plsbuy.value[index].qldNo }).then((element : any) => {
			rightarray.value = [];
			rightarray.value.push(...element.result)
			rightdonghua.value = true;
		})
		// form.cgdId = plsbuy.value[index].id
		// form.pageNo = 1
		// form.canpull = true;
		// queryCgdInfoList(form).then(res => {
		// 	InvoicingList.value = []
		// 	InvoicingList.value.push(...res.result.records);
		// 	if (form.pageNo) {
		// 		clickmiddle(0);
		// 	}
		// })
		if (item.izYgRead == 'N') {
			let param = {
				status: `yg`,
				qldNo: plsbuy.value[index].qldNo,
			}
			transRead(param).then((res : any) => {
				if (res.success) {
					item.izYgRead = 'Y'
				}
			})
		}

	}
	const serverUrl = ref("")
	onLoad(() => {

		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
		// getSelectList();
	})
	const openerror = ref(false);
	const errormessage = ref("")

	const badshow = ref(false)
	const zuofei = () => {
		let data = {
			qldNo: plsbuy.value[lefttarget.value].qldNo,
			nuId: uni.getStorageSync('nuId'),
			elderId: uni.getStorageSync('elderId'),
			nuName: uni.getStorageSync('nuName'),
			elderName: uni.getStorageSync(`NUall`).elderInfo.name

		}
		cancellation(data).then((res : any) => {
			badshow.value = false
			if (res.success) {
				plsbuy.value[lefttarget.value] = res.result.result
			} else {
				plzinfo.pageNo = 1;
				plzinfo.canpull = true;
				leftscrolltop.value = 0.01
				setTimeout(() => {
					leftscrolltop.value = 0
				}, 50)
				lefttarget.value = 0
				firstgetqueryCgdList();
			}

			setTimeout(() => {
				if (res.success) {
					uni.showToast({
						title: res.result.message,
						icon: 'success', // 'none' 表示不带图标
						duration: 3000
					})
				} else {
					openerror.value = true;
					errormessage.value = res.message
				}

			}, 300)

		})
	}
	const shouhuoshow = ref(false)
	const shouhuo = () => {
		let param = {
			qldNo: plsbuy.value[lefttarget.value].qldNo,
			elderId: uni.getStorageSync('elderId'),
			nuId: uni.getStorageSync('nuId')
		}
		confirmReceipt(param).then((res : any) => {
			shouhuoshow.value = false
			if (res.success) {
				plsbuy.value[lefttarget.value] = res.result.result
			} else {
				plzinfo.pageNo = 1;
				leftscrolltop.value = 0.01
				setTimeout(() => {
					leftscrolltop.value = 0
				}, 50)
				lefttarget.value = 0
				plzinfo.canpull = true;
				firstgetqueryCgdList();
			}

			setTimeout(() => {
				if (res.success) {
					uni.showToast({
						title: res.result.message,
						icon: 'success', // 'none' 表示不带图标
						duration: 3000
					})
				} else {
					openerror.value = true;
					errormessage.value = res.message
				}
			}, 300)

		})
	}
	const basePath = '/static/index/procurement/' // 图片公共路径
	const imgNormal = basePath + 'sh.png'
	const imgActive = basePath + 'shr.png'
	const imgSrc = ref(imgNormal)
	const busy = ref(false) // 防止重复点击造成多个定时器

	function handleClick() {
		if (busy.value) return
		busy.value = true

		// 切换到 active 图
		imgSrc.value = imgActive

		// 0.5 秒后复原
		setTimeout(() => {
			imgSrc.value = imgNormal
			busy.value = false
		}, 300)
	}
	const basePath1 = '/static/index/procurement/' // 图片公共路径
	const imgNormal1 = basePath + 'cz.png'
	const imgActive1 = basePath + 'czr.png'

	const imgSrc1 = ref(imgNormal1)
	const busy1 = ref(false) // 防止重复点击造成多个定时器

	function handleClick1() {
		if (busy1.value) return
		busy1.value = true

		// 切换到 active 图
		imgSrc1.value = imgActive1

		// 0.5 秒后复原
		setTimeout(() => {
			imgSrc1.value = imgNormal1
			busy1.value = false
		}, 300)
	}
</script>

<style scoped lang="less">
	.right-container-tem {
		display: flex;

		.right-container-tem-text {
			font-size: 30rpx;
			margin-right: 20rpx;
		}


		.right-container-tem-img {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.buttons-father {
		height: 3.3vw;
		width: 100%;
		transition: opacity 1s ease;
		display: flex;
		position: relative;
		margin-top: 1.1vw;
		// background-color: blue;

		.center-font {
			position: absolute;
			left: 31%;
			top: 50%;
			transform: translateY(-50%);
			color: #555555;
			font-size: 29rpx;
			font-weight: 800;
			display: flex;
			align-items: center;

			.center-font-imge {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}
		}

		.title-input {
			display: flex;
			align-items: center;
			width: 19.3vw;
			border-radius: 1.65vw;
			height: 3.3vw;
			background: #FFFFFF;
			border: 1px solid #D2D2D2;

			image {
				width: 2.2vw;
				height: 2.2vw;
				margin: 0 0.5vw;
			}

			input {
				// width: 15vw;
				height: 3.3vw;
				font-size: 1.4vw;
				padding-left: 1.6vw;

			}
		}

		.title-ball {
			width: 5.3vh;
			height: 5.3vh;
			border-radius: 50%;
			margin-left: 10rpx;
			background-color: #fff;
			border: 2rpx solid #D9DADC;
			display: flex;
			justify-content: center;
			align-items: center;

			.title-ball-img {
				width: 55%;
				height: 55%;
			}
		}

		.ipt {
			display: flex;
			align-items: center;
			width: 16vw;
			background: #E2E4E9;
			border-radius: 1.65vw;
			height: 3.3vw;

			image {
				width: 2.2vw;
				height: 2.2vw;
				margin: 0 0.5vw;
			}

			input {
				width: 18vw;
				height: 3.5vw;
				font-size: 1.4vw;
				padding-left: 1.6vw;

			}
		}

		.scr {
			border-radius: 1.65vw;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 0.7vw;
			background-color: #fff;
			border: 1px solid #D9DADC;
			color: #555555;
			width: 6.5vw;
			height: 3.3vw;
		}

		.shx {
			width: 6.5vw;
			height: 3.3vw;
			background-color: #fff;
			border-radius: 1.65vw;
			border: 1px solid #D9DADC;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 0.5vw;
			color: #555555;

			image {
				width: 1.5vw;
				height: 1.5vw;
				margin: 0 0.2vw 0 0;
			}


		}

		.right-button {
			position: absolute;
			right: 1.8vw;
			top: 0;
			width: 6.5vw;
			height: 3.3vw;
			background-color: #fff;
			border-radius: 1.65vw;
			border: 1px solid #D9DADC;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin: 0 0 0 0.5vw;
			color: #555555;

			image {
				width: 1.5vw;
				height: 1.5vw;
				margin: 0.1vw 0.2vw 0 0;
			}
		}

		.right-button:active,
		.scr:active,
		.shx:active {
			color: #1083F8;
			background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
			border: 1rpx solid #1083F8;
			transition: .4s;
			-webkit-transform-style: preserve-3d;
			-webkit-overflow-scrolling: touch;
		}
	}

	.other-contain {
		width: 100%;
		height: 85vh;
		display: flex;
		transition: opacity 1s ease;
		margin-top: 5rpx;

		.other-contain-left {
			width: 30%;
			height: 100%;

			.left-menu-scroll {
				margin-top: 2.5%;
				height: 97%;
				width: 100%;

				.pls-card {
					width: 98%;
					height: 356rpx;
					border: transparent 4rpx solid;
					background-color: #fff;
					border-radius: 40rpx;
					margin-bottom: 16rpx;
					// margin: 1vh 0;
					padding: 0 30rpx;
					position: relative;

					.pls-card-title {
						height: 5.5vh;
						width: 105%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						padding-left: 10rpx;
						padding-right: 35rpx;

						.middle-title-spec {
							color: #888888;
							font-size: 29rpx;
						}

						.title-left {
							font-weight: 600;
							font-size: 34rpx;
							// color: #888888;
						}

						.title-right {
							display: flex;
							align-items: flex-end;
							font-size: 30rpx;
							position: relative;

							.title-right-big {
								font-weight: 600;
								font-size: 40rpx;
								margin-right: 35rpx;
								color: #555555;
							}

							.title-right-img {
								position: absolute;
								right: -10rpx;
								bottom: 6rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

					.pls-card-middle {
						width: 100%;
						height: 11vh;
						margin-top: 1.7vh;
						display: flex;
						position: relative;

						.middle-heng {
							position: absolute;
							left: 4%;
							top: 35%;
							transform: translateY(-35%);
							width: 92%;
							height: 2px;
							/* 虚线粗细 */
							background-image: repeating-linear-gradient(to right,
									#E5E5E5 0,
									#E5E5E5 6px,
									transparent 6px,
									transparent 10px);
						}

						.pls-card-middle-one {
							width: 33.3%;
							height: 100%;

							// background-color: yellow;
							.middle-title {
								width: 100%;
								height: 2.1vh;
								// background-color: #007CFF;
								color: #888888;
								text-align: center;
								font-size: 25rpx;
								overflow: hidden;
							}

							.middle-heng-father {
								width: 100%;
								height: 4vh;
								position: relative;

								.middle-ball-img {
									width: 35rpx;
									height: 35rpx;
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
								}

								.middle-ball {
									width: 20rpx;
									height: 20rpx;
									background-color: #1083F8;
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
									border-radius: 50%;
								}
							}

							.end-font {
								width: 100%;
								height: 6vh;
								text-align: center;
								color: #666666;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-size: 25rpx;
							}
						}
					}

					.pls-card-end {
						width: 100%;
						height: 6vh;
						display: flex;
						justify-content: space-between;
						position: relative;
						padding-left: 15rpx;
						margin-top: 18rpx;

						.end-left {
							height: 100%;
							display: flex;
							align-items: center;

							.end-left-img {
								width: 35rpx;
								height: 35rpx;
							}

							.end-left-font {
								margin-top: 3rpx;
								width: 400rpx;
								// background-color: #007CFF;
								// font-size: 26rpx;
								color: #666666;
								margin-left: 3rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}

						.tag-fail {
							width: 120rpx;
							height: 50rpx;
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #FDEBEC;
							color: #FF5757;
							border: 1rpx solid #FF5757;
							position: absolute;
							right: 0rpx;
							bottom: 20rpx;
						}

						.tag-success {
							width: 120rpx;
							height: 50rpx;
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #ECF6FF;
							color: #1083F8;
							border: 1rpx solid #1083F8;
							position: absolute;
							right: 0rpx;
							bottom: 20rpx;
						}
					}
				}
			}

			.left-selecttype {
				margin-top: 8rpx;
				width: 98%;
				height: 85rpx;
				border-radius: 40rpx;
				background-color: #FFFFFF;
				display: flex;
				padding-right: 30rpx;
				padding-left: 15rpx;
				position: relative;


				.heng-blue {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 29rpx;
					height: 7rpx;
					border-radius: 10rpx;
					background-color: #1083F8;
					transition: 0.3s all ease;

				}

				.selecttype {
					width: 20%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #999999;
					font-size: 29rpx;
					position: relative;

				}

				.selecttype-target {
					width: 20%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #222222;
					font-size: 29rpx;
					font-weight: 600;
					position: relative;
				}
			}
		}

		.other-contain-right {
			width: 68%;
			margin-left: 0.5%;
			height: 106%;
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: 0.5vh;

			.right-contain {
				width: 100%;
				height: 98%;
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				position: relative;


				.right-ones {
					display: flex;
					width: 100%;
					flex-wrap: wrap;
					padding-left: 15rpx;
					padding-top: 13rpx;
					// padding-bottom: 80rpx;
					
					.right-one-white{
						width: 615rpx;
						height: 365rpx;
						border: 1rpx solid #c9c9c9;
						background-color: #fff;
						border-radius: 30rpx;
						margin-left: 20rpx;
						margin-bottom: 23rpx;
						padding: 0 30rpx;
						position: relative;
						// background-color: #fff;
					}

					.right-one {
						width: 615rpx;
						height: 365rpx;
						margin-left: 20rpx;
						margin-bottom: 23rpx;
						background-color: #fff;
						border-radius: 30rpx;
						display: flex;
						border: 1rpx solid #c9c9c9;

						.right-one-left {
							// height: 100%;
							width: 40%;
							display: flex;
							flex-direction: column;
							align-items: center;
							// justify-content: space-around;
							padding: 0.5vw 0;

							.bgimg {
								width: 7vw;
								height: 7vw;
								margin: 1.5vw auto 0.25vw;
								border-radius: 1.1vw;
								background: #fff;
								display: flex;
								justify-content: center;
								align-items: center;
								padding: 0.2vw;
								// background-color: red;

								>image {
									width: 100%;
									height: 100%;
									border-radius: 1.1vw;
								}
							}

							.left-tages {
								margin-bottom: 5rpx;
								width: 140rpx;
								// height: 36rpx;
								border-radius: 30rpx;
								color: #555555;
								border: 1rpx solid #D2D2D2;
								margin-top: 5rpx;
								font-size: 22rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								text-align: center;
								line-height: 34rpx;
							}
						}

						.right-one-right {
							height: 100%;
							width: 60%;

							.right-title {
								font-size: 36rpx;
								font-weight: 600;
								margin-top: 40rpx;
								color: #222222;
								width: 300rpx;
								overflow: hidden;
								/* 必须 */
								white-space: nowrap;
								/* 强制单行 */
								text-overflow: ellipsis;
								/* 显示省略号 */
							}

							.right-setting {
								color: #888888;
								margin-top: 5rpx;
								font-size: 28rpx;
							}

							.right-mm {
								color: #555555;
								font-size: 30rpx;
								width: 200rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.right-down {
								display: flex;
								margin-top: 50rpx;

								.right-first-num {
									font-size: 38rpx;
									color: #555555;
									font-weight: 600;
								}

								.right-first-type {
									color: #888888;
									font-size: 26rpx;
								}

								.right-shu {
									width: 2rpx;
									height: 50rpx;
									background-color: #C9C9C9;
									margin: 0 40rpx;
									margin-top: 10rpx;
								}
							}
						}
					}
				}

			}
		}
	}

	.haventmessage {
		width: 97%;
		height: 100%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;

	}

	.que {
		width: 10vw;
		height: 10vw;
		// margin: auto;

		image {
			width: 100%;
			height: 100%;
		}

		view {
			margin-top: -30rpx;
			width: 100%;
			text-align: center;
			font-weight: 300;
			font-size: 1.2vw;
			color: #555555;
		}
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bignomessage{
		position: fixed;
		top: 8.5vh;
		left: 9.2vw;
		width: 89.5vw;
		height: 89.6vh;
		z-index: 100;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 30rpx;
		
		image {
			width: 16.3vw;
			height: 16.3vw;
		}
		
		view {
			text-align: center;
			margin-top: -2vw;
			font-weight: 300;
			font-size: 1.5vw;
			color: #555555;
		}
	}
</style>