uniProject/pages/admin/Hetong/addSanfangHetong.vue

<template>
	<view class="sfht-info-page">
		
	
	<view class="icon-title-navBar-box">
		<view @click="goUpPage" class="nav-bar-icon"></view>
		<text class="nav-bar-title">新增三方合同</text>
	</view>
	<!-- form -->
	<view class="sfht-form-box">
		<!-- 合同模板 -->
		<view class="form-label-select form-radius-box">
			<view class="phone-form-label"><text class="form-label-require"></text>合同模板</view>
			<picker :range="data.mobanList" mode='selector' :value="data.mobanIndex" range-key="name"
				@change="onMobanSelect" class="select-picker-box">
				<view class="form-radio-select" >
					<view v-if="data.mobanIndex==null">请点击选择</view>
					<view v-else>{{ data.mobanList[data.mobanIndex].name}}</view>
					<icon></icon>
				</view>
			</picker>
		</view>
	</view>
	
	<!-- 客户信息 -->
	<kehuCardVue :info="data.kehu"></kehuCardVue>
	<!-- 家政人员 -->
	<jiazhengCardVue :info="data.jiazheng"></jiazhengCardVue>
	<!-- 合同信息 -->
	<hetongCardVue :info="data.hetong"></hetongCardVue>
	<!-- 其他约定 -->
	<qiTaYueDingVue :info="data.qita"></qiTaYueDingVue>
	<!-- 家政签名 -->
	<qianMingVue :info="data.qianming"></qianMingVue>




	<!-- <button @click="handleSelct('kh')">选择客户</button>
	<button @click="handleSelct('jz')">选择家政</button> -->
	<!-- 客户 -->
	<selectKh ref="khRef"></selectKh>
	<!-- 家政 -->
	<selectJz ref="jzRef"></selectJz>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import * as httpApi from "@/api/sanfang.js"
	import selectKh from "./components/selectKh.vue"
	import selectJz from "./components/selectJz.vue"
	import hetongCardVue from "./components/hetongCard.vue";
	import jiazhengCardVue from "./components/jiazhengCard.vue";
	import kehuCardVue from "./components/kehuCard.vue";
	import qianMingVue from "./components/qianMing.vue";
	import qiTaYueDingVue from "./components/qiTaYueDing.vue";


	const data = reactive({
		mobanList: [],
		mobanIndex: null,
		kehu: {
			name: '',
			idCard: '',
			tel: '',
			dizhi: ''
		},
		jiazheng: {},
		hetong: {},
		qita: '',
		qianming: ''
	})

	const khRef = ref(null)
	const jzRef = ref(null)

	function handleSelct(code) {
		if (code == 'kh') {
			khRef.value.handleShow();
		} else {
			jzRef.value.handleShow();
		}
	}

	function goUpPage() {
		uni.navigateBack()
	}

	function getMoban() {
		httpApi.getMobanList().then(res => {
			data.mobanList = res.data;
		})
	}

	function onMobanSelect(da) {
		data.mobanIndex = da.detail.value
	}


	onLoad(() => {
		getMoban();
	})
</script>

<style>

</style>