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="data.hetong.leixing-1" range-key="text"
				@change="onSelectLeixing" class="select-picker-box">
				<view class="form-radio-select">
					<view v-if="leixings[data.hetong.leixing-1]">{{leixings[data.hetong.leixing-1].text}}</view>
					<icon></icon>
				</view>
			</picker>
			<view class="form-label-input" v-if="data.hetong.leixing == 4">
				<view class="phone-form-label"><text class="form-label-require"></text>其他类型</view>
				<uni-easyinput v-model="data.hetong.lxName" placeholder="请输入其他类型" />
			</view>
			<!-- 服务方式 -->
			<view class="phone-form-label"><text class="form-label-require"></text>服务方式</view>
			<picker :range="fuwus" mode='selector' :value="data.hetong.fangshi-1" range-key="text"
				@change="onSelectFuwufangshi" class="select-picker-box">
				<view class="form-radio-select">
					<view v-if="fuwus[data.hetong.fangshi-1]">{{fuwus[data.hetong.fangshi-1].text}}</view>
					<icon></icon>
				</view>
			</picker>
			<view class="form-label-input" v-if="data.hetong.fangshi == 2">
				<view class="phone-form-label"><text class="form-label-require"></text>服务时间</view>
				<uni-easyinput v-model="data.hetong.lxName" placeholder="请输入非住家型服务时间" />
			</view>
			<!-- 服务地址 -->
			<view class="form-label-input">
				<view class="phone-form-label"><text class="form-label-require"></text>服务地址</view>
				<uni-easyinput v-model="data.hetong.dizhi" placeholder="请输入服务地址" />
			</view>
			<!-- 服务内容 -->
			<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 fuwus = [{
			value: 1,
			text: '住家型'
		},
		{
			value: 2,
			text: '非住家型(服务时间)'
		},
	]

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

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

	function onSelectLeixing(e) {
		data.hetong.leixing = e.detail.value + 1
	}

	function onSelectFuwufangshi(e) {
		data.hetong.fangshi = e.detail.value + 1
	}
</script>

<style>
</style>