hldy_xcx/pages/yuangongindex/procurement.vue

<template>
	<view :style="{paddingTop:`${uni.getStorageSync('moveHeight')+90}px`}">
		<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
				<view style="font-size: 30rpx;">采购单</view>
			</view>
		</view>
		<view class="swtab" :style="{top:`${uni.getStorageSync('moveHeight')+40}px`}">
			<view  v-for="(v,i) in ['全部','采购中','挂账','完成']" :key="i" :class="dex==i?'act guodu':'guodu'" @click="naurl(i)">{{v}}</view>
		</view>
		<view class="card" v-for="(v,i) in list" :key="i" @click="navurl(v)">
			<view class="top">
				<view class="left">
					<text>采购单号</text>
					<view>{{v.cgdNo}}</view>
				</view>
				<view class="rs l" :class="{'l':v.cgdType==0,'h':v.cgdType==1,'b':v.cgdType==2}">
					{{v.cgdType_dictText}}
				</view>
			</view>
			
			<view class="jg">
				<text>采购机构：</text>
				<view>{{v.departName}}</view>
			</view>
			<view class="jg">
				<text>机构联系人：</text>
				<view>{{v.qgBy}}</view>
			</view>
			<view class="jg">
				<text>联系电话：</text>
				<view>{{v.createBy}}</view>
			</view>
			<view class="jg">
				<text>采购时间：</text>
				<view>{{v.qgDate}}</view>
			</view> 
		</view>
		<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 30rpx;">
			<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="list.length>0" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, nextTick } from 'vue';
	import { onLoad, onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app'
	import { getEmployeesOrgRela,getCgdListByGysId } from './api.js'
	import { 	getMessageList } from '@/pages/addstaff/api/addjigou.js'
	import { getSupInfoByOpenId } from '@/pages/supplierindex/api.js'
	import model from "@/compontent/public/model.vue"
	const goBack = () => {
		uni.navigateBack()
	}
	const dex = ref(0);
	const naurl = (e)=>{
		dex.value = e;
		list.value = [];
		pageNo.value = 1;
		init()
	}
	const GysId = ref('')
	onLoad(()=>{
		getSupInfoByOpenId().then(res => {
			if (res.success) {
				GysId.value =  res.result.id;
				init()
			}
		})
	})
	const pageNo = ref(1)
	const list = ref([]);
	const status = ref('loadmore')
	const init = ()=>{
		let obj = {
			gysId:GysId.value,
			cgdType:dex.value==0?'':dex.value-1,
			pageSize:10,
			pageNo:pageNo.value
			
		}
		let header = {
		  'X-Access-Token': uni.getStorageSync('token') || '',
		  'Content-Type': 'application/json;charset=UTF-8',
		  'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
		}
		let timeout = 5000
		uni.request({
		  url: uni.getStorageSync('serverUrl2') + '/api/pad/invoicing/getCgdListByGysId',
		  method: 'GET',
		  header: header,
		  data: obj,
		  timeout,
		  success(response) {
		    const res = response.data;
			list.value.push(...res.result.records)
			status.value = (res.result.total == list.value.length ? 'nomore' : 'loadmore')
		}})   
	}
	onReachBottom(()=>{
		if(status.value=='loading'|| status.value=='nomore'){return}
		status.value = 'loading';
		pageNo.value++;
		init()
	})
	
	const navurl = (e)=>{
		uni.navigateTo({
			url:'/pages/yuangongindex/detIlspro?id='+e.id
		})
	}
</script>

<style scoped lang="scss">
	.card{
		width: 699rpx;
		height: 410rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(67,75,90,0.09);
		border-radius: 20rpx;
		margin: 27rpx auto 0;
		padding: 24rpx;
		.jg{
			width: 617rpx;
			height: 26rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			margin: 35rpx auto 0;
			display: flex;
			justify-content: space-between;
			text{
				color: #666;
			}
			view{
				margin-top: 10rpx;
				color: #333;
			}
		}
		.top{
			width: 100%;
			height: 90rpx;
			border-bottom: 1px solid #E5E5E5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.rs{
				width: 116rpx;
				height: 49rpx;
				border-radius: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 25rpx;
			}
			.l{
				border: 1px solid #0074E1;
				color: #0074E1;
			}
			.h{
				border: 1px solid #EE2C35;
				color: #EE2C35;
			}
			.b{
				border: 1px solid #333333;
				color: #333;
			}
			
			.left{
				display: flex;
				flex-direction: column;
				text{
					font-weight: 400;
					font-size: 23rpx;
					color: #888888;
				}
				view{
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}
			}
		}
	}
	.swtab{
		width: 100%;
		height: 50px;
		position: fixed;
		background-color: #fff;
		left: 0;
		z-index: 9999;
		display: flex;
		justify-content: space-around;
		view{
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
			height: 40px;
			width: auto;
			line-height: 30px;
			margin-top: 5px;
		}
		view::after{
			content: '';
			width: 0%;
			left: 50%;
		}
		.act{
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			position: relative;
		}
		.act::after{
			content: '';
			position: absolute;
			width: 50%;
			left: 25%;
			bottom: 0;
			background: #0074E1;
			border-radius: 5rpx;
			border: 2px solid #0074E1;
			transition: .4s;
			-webkit-transform-style: preserve-3d;
			-webkit-overflow-scrolling: touch;
		}
	}
	.title-back {
		background-color: #fff;
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.left-father {
		display: flex;
		align-items: center;
		z-index: 1;

		.back-img {
			width: 45rpx;
			height: 40rpx;
			margin-left: 40rpx;
			margin-right: 15rpx;
		}
	}
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

</style>
<style>
	page{
		background: #F0F0F3;
	}
</style>