uniProject/pages/admin/Hetong/sanfangHetong.vue

<template>
	<view class="admin-jiazheng-list">
		<view class="phone-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">三方合同</text>
			<uni-icons class="nav-bar-right-icon bar-ml10" type="search" size="20" @click="toggle('top')"></uni-icons>
		</view>
		<view class="jiazheng-search-box">
			<view @click.stop="clickAlltype" class="select-item-box">
				<text class="select-text">{{data.statusText}}</text>
				<icon class="select-jt-default" />
			</view>
		</view>

		<view class="jz-new-btn-box">
			<button type="default" class="phone-green-btn" @click="handleAdd">新增合同</button>
		</view>
		
		<!-- 状态面板 -->
		<view class="all-type-box" v-show="isOpen" @click="clickAlltype">
			<view class="phone-radio-group data-check-radio-group">
				<!-- 技能块展示 -->
				<view v-for="item in listStatus" @click="handleSelectStatus(item)" :key="item.status" class="phone-radio-item">
					{{ item.statusText }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getJiazhengList,
		getJiazhengJineng,
		getJiazhengZhiyeAll,
		getJiazhengLeixing
	} from "@/api/jiazheng.js"
	import customTabbarAdminVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";

	const data = reactive({
		status: 0,
		statusText: '待签字'
	})
	const isOpen = ref(false)
	
	const listStatus = ref([
		{
			statusText: '有效',
			status: 2,
		},
		{
			statusText: '待审核',
			status: 1,
		},
		{
			statusText: '待签字',
			status: 0,
		},{
			statusText: '失效',
			status: 3,
		}
	])


	function toggle() {}

	function goUpPage() {}

	function clickAlltype() {
		isOpen.value = !isOpen.value;
	}

	function handleSelectStatus(item) {
		data.status = item.status;
		data.statusText = item.statusText;
	}

	function handleAdd() {}
	

</script>

<style>

</style>