uniProject/pages/admin/Hetong/components/hetongCard.vue

<template>
	<uni-collapse ref="collapse" class="sfht-collapse-box" @change="onChange">
		<uni-collapse-item title="合同信息" :open="true">
			<!-- 合同内容 -->
			<view class="phone-form-label"><text class="form-label-require"></text>服务类型</view>
			<picker :range="leixings" mode='selector' :value="leixingIndex" range-key="text" @change="onSelectLeixing"
				class="select-picker-box">
				<view class="form-radio-select">
					<view v-if="leixings[leixingIndex]">{{leixings[leixingIndex].text}}</view>
					<icon></icon>
				</view>
			</picker>

			<!-- 服务内容 -->
			<fuWuNeiRong @change="onChange"></fuWuNeiRong>
			<!-- 服务报酬 -->
			<fuWuBaoChou @change="onChange"></fuWuBaoChou>
			<!-- 服务时间 -->
			<fuWuShiJian @change="onChange"></fuWuShiJian>
			<!-- 丙方服务费 -->
			<bingFuWuFei @change="onChange"></bingFuWuFei>
		</uni-collapse-item>
	</uni-collapse>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue";
	import fuWuNeiRong from "./fuWuNeiRong.vue"
	import fuWuBaoChou from "./fuWuBaoChou.vue"
	import fuWuShiJian from "./fuWuShiJian.vue"
	import bingFuWuFei from "./bingFuWuFei.vue"
	import {
		useHetong
	} from "../useHetong.js"
	
	const {
		injectHetong
	} = useHetong();

	const data = injectHetong()
	
	const collapse = ref(null)
	const leixings = [{
			value: 1,
			text: '普通家务保姆'
		},
		{
			value: 2,
			text: '钟点工保姆'
		},
		{
			value: 3,
			text: '育儿嫂'
		},
		{
			value: 4,
			text: '其他'
		}
	]
	const leixingIndex = ref(0);


	setTimeout(() => {
		collapse.value && collapse.value.resize()
	}, 300)

	function onChange() {
		setTimeout(() => {
			collapse.value && collapse.value.resize()
		}, 300)
	}

	function onSelectLeixing(e) {
	}
</script>

<style>
</style>