客户页面

pages/admin/Hetong/addSanfangHetong.vue

@@ -1,47 +1,44 @@
 <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 class="icon-title-navBar-box">
+			<view @click="goUpPage" class="nav-bar-icon"></view>
+			<text class="nav-bar-title">新增三方合同</text>
 		</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>
+		<!-- 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.mobanList[data.mobanIndex]">{{ data.mobanList[data.mobanIndex].name}}</view>
+						<icon></icon>
+					</view>
+				</picker>
+			</view>
+		</view>
+
+		<!-- 客户信息 -->
+		<kehuCardVue :info="data.kehu" @select-kehu="onSelectKehu"></kehuCardVue>
+		<!-- 家政人员 -->
+		<jiazhengCardVue :info="data.jiazheng" @select-jzry="onSelectJzry"></jiazhengCardVue>
+		<!-- 合同信息 -->
+		<hetongCardVue :info="data.hetong" @fuwuleixing="onSelectFuwuLeixing"></hetongCardVue>
+		<!-- 其他约定 -->
+		<qiTaYueDingVue :info="data.qita" @qita="handleUpQita"></qiTaYueDingVue>
+		<!-- 家政签名 -->
+		<qianMingVue :info="data.qianming" @qianming="handleQianming"></qianMingVue>
 
 
 
 
-	<!-- <button @click="handleSelct('kh')">选择客户</button>
+		<!-- <button @click="handleSelct('kh')">选择客户</button>
 	<button @click="handleSelct('jz')">选择家政</button> -->
-	<!-- 客户 -->
-	<selectKh ref="khRef"></selectKh>
-	<!-- 家政 -->
-	<selectJz ref="jzRef"></selectJz>
+
+
 	</view>
 </template>
 
@@ -55,14 +52,22 @@
 		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";
 
+	import {
+		useHetong
+	} from "./useHetong.js"
+
+	const {
+		provideHetong
+	} = useHetong()
+
+	const emits = defineEmits('select-kehu')
 
 	const data = reactive({
 		mobanList: [],
@@ -71,15 +76,58 @@
 			name: '',
 			idCard: '',
 			tel: '',
-			dizhi: ''
+			dizhi: '',
+			id: null
+		},
+		jiazheng: {
+			id: null,
+			realName: ''
+		},
+		hetong: {
+			baochou: '', // 基本月报酬
+			beizhu: '', // 备注
+			bingren: '', // 病人病情
+			dizhi: '', // 服务地址
+			fafangri: '', // 工资发放日
+			fangshi: '', // 服务方式，1住家型，2非住家型
+			fsShijian: '', // 非住家型服务时间
+			fuwufei: '', // 服务费
+			fuwufeiRate: '', // 服务费百分比
+			fzHaizi: '', // 辅助照顾孩子人数
+			fzHzNianling: '', // 辅助照顾孩子年龄
+			huli: '', // 产妇护理
+			idcard: '', // 家政身份证号
+			jiabingEndDate: '', // 甲丙服务结束时间
+			jiabingStartDate: '', // 甲丙服务开始时间
+			jiandurexian: '', // 服务监督热线
+			jiayiEndDate: '', // 甲乙服务结束时间
+			jiayiStartDate: '', // 甲乙服务开始时间
+			khId: '', // 客户ID
+			khName: '', // 客户姓名
+			khIdcard: '', // 客户身份证号
+			laoren: '', // 照顾老人人数
+			leixing: '', // 服务类型，1普通家务保姆，2钟点工保姆，3育儿嫂，4其他
+			lrnianling: '', // 照顾老人年龄: 60,70,80
+			lxName: '', // 其他服务类型名称
+			mianji: '', // 住房面积
+			qita: '', // 基本月报酬
+			qzHaizi: '', // 全职照顾孩子人数
+			qzHzNianliang: '', // 全职照顾孩子年龄
+			realName: '', // 家政姓名
+			renkou: '', // 常驻人口数
+			tianshu: '', // 基本月报酬天数
+			userId: '', // 家政员ID
+			xinyongdaima: '', // 统一社会信用代码
+			xiuxi: '', // 休息天数
 		},
-		jiazheng: {},
-		hetong: {},
 		qita: '',
-		qianming: ''
+		qianming: '',
+		htId: '', // 三方合同ID
 	})
 
-	const khRef = ref(null)
+	// 穿透式传参
+	provideHetong(data)
+
 	const jzRef = ref(null)
 
 	function handleSelct(code) {
@@ -97,6 +145,8 @@
 	function getMoban() {
 		httpApi.getMobanList().then(res => {
 			data.mobanList = res.data;
+			// 初始化默认选中
+			data.mobanIndex = 0;
 		})
 	}
 
@@ -104,6 +154,25 @@
 		data.mobanIndex = da.detail.value
 	}
 
+	function onSelectKehu(da) {
+		data.kehu = da;
+	}
+
+	function onSelectJzry(da) {
+		data.jiazheng = da;
+	}
+
+	function handleQianming(da) {
+		data.qianming = da;
+	}
+
+	function handleUpQita(da) {
+		data.qita = da;
+	}
+
+	function onSelectFuwuLeixing(da) {
+		data.hetong.leixing = da.value;
+	}
 
 	onLoad(() => {
 		getMoban();

pages/admin/Hetong/components/bingFuWuFei.vue

@@ -1,7 +1,17 @@
 <template>
+	<uni-collapse class="sfht-collapse-box"  @change="handleChange">
+		<uni-collapse-item title="丙方服务费" :open="true">
+			丙方服务费
+			
+		</uni-collapse-item>
+	</uni-collapse>
 </template>
 
-<script>
+<script setup>
+	const emits = defineEmits(['change'])
+	function handleChange() {
+		emits('change')
+	}
 </script>
 
 <style>

pages/admin/Hetong/components/fuWuBaoChou.vue

@@ -1,8 +1,19 @@
 <template>
+	<uni-collapse class="sfht-collapse-box"  @change="handleChange">
+		<uni-collapse-item title="服务报酬" :open="true">
+			服务报酬
+			
+		</uni-collapse-item>
+	</uni-collapse>
 </template>
 
-<script>
+<script setup>
+	const emits = defineEmits(['change'])
+	function handleChange() {
+		emits('change')
+	}
 </script>
 
+
 <style>
 </style>

pages/admin/Hetong/components/fuWuNeiRong.vue

@@ -1,8 +1,20 @@
 <template>
+	<uni-collapse class="sfht-collapse-box" @change="handleChange">
+		<uni-collapse-item title="服务内容" :open="true">
+			服务内容
+			
+		</uni-collapse-item>
+	</uni-collapse>
 </template>
 
-<script>
+<script setup>
+	
+	const emits = defineEmits(['change'])
+	function handleChange() {
+		emits('change')
+	}
 </script>
 
+
 <style>
 </style>

pages/admin/Hetong/components/fuWuShiJian.vue

@@ -1,8 +1,17 @@
 <template>
+	<uni-collapse class="sfht-collapse-box"  @change="handleChange">
+		<uni-collapse-item title="服务时间" :open="true">
+			服务时间
+			
+		</uni-collapse-item>
+	</uni-collapse>
 </template>
 
-<script>
+<script setup>
+	const emits = defineEmits(['change'])
+	function handleChange() {
+		emits('change')
+	}
 </script>
-
 <style>
 </style>

pages/admin/Hetong/components/hetongCard.vue

@@ -1,7 +1,81 @@
 <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>
+<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>

pages/admin/Hetong/components/jiazhengCard.vue

@@ -1,7 +1,43 @@
 <template>
+	<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>
+			<view class="form-radio-select" @click="handleSelect">
+				<view v-show="!!data.jiazheng.realName">{{data.jiazheng.realName}}</view>
+				<icon></icon>
+			</view>
+		</view>
+	</view>
+	<!-- 家政 -->
+	<selectJz ref="jzRef" @select="onJzSelect"></selectJz>
 </template>
 
-<script>
+<script setup>
+	import {
+		ref,
+		reactive,
+		nextTick
+	} from "vue";
+	import selectJz from "./selectJz.vue"
+	import {
+		useHetong
+	} from "../useHetong.js"
+	const {
+		injectHetong
+	} = useHetong();
+	
+	const data = injectHetong()
+	
+	const jzRef = ref(null);
+	
+	function handleSelect() {
+		jzRef.value.handleShow()
+	}
+	
+	function onJzSelect() {
+		
+	}
 </script>
 
 <style>

pages/admin/Hetong/components/kehuCard.vue

@@ -2,31 +2,30 @@
 	<uni-collapse class="sfht-collapse-box">
 		<uni-collapse-item title="客户信息" :open="true">
 			<view class="sfht-add-row">
-				<view class="sfht-title-add-btn">客户选择<icon></icon></view>
+				<view class="sfht-title-add-btn" @click="handleSelct">客户选择<icon></icon>
+				</view>
 			</view>
-			
 			<view class="form-label-input">
 				<view class="phone-form-label"><text class="form-label-require">*</text>姓名</view>
-				<uni-easyinput v-model="info.realName"
-					placeholder="请输入姓名" />
+				<uni-easyinput v-model="data.hetong.khName" placeholder="请输入姓名" />
 			</view>
 			<view class="form-label-input">
 				<view class="phone-form-label"><text class="form-label-require">*</text>电话</view>
-				<uni-easyinput v-model="info.tel"
-					placeholder="请输入电话" />
+				<uni-easyinput v-model="data.hetong.tel" placeholder="请输入电话" />
 			</view>
 			<view class="form-label-input">
-				<view class="phone-form-label"><text class="form-label-require"></text>身份证</view>
-				<uni-easyinput v-model="info.idCard"
-					placeholder="请输入身份证" />
+				<view class="phone-form-label"><text class="form-label-require">*</text>证件号</view>
+				<uni-easyinput v-model="data.hetong.idCard" placeholder="请输入证件号" />
 			</view>
 			<view class="form-label-input">
 				<view class="phone-form-label"><text class="form-label-require"></text>具体地址</view>
-				<uni-easyinput v-model="info.dizhi"
-					placeholder="请输入具体地址" />
+				<uni-easyinput v-model="data.hetong.dizhi" placeholder="请输入具体地址" />
 			</view>
 		</uni-collapse-item>
 	</uni-collapse>
+
+	<!-- 客户 -->
+	<selectKh ref="khRef" @select="onKhSelect"></selectKh>
 </template>
 
 <script setup>
@@ -35,20 +34,28 @@
 		reactive,
 		nextTick
 	} from "vue";
-	const props = defineProps({
-		info: {
-			type: Object
-		}
-	})
-	
-	
-	
-	
-	
-	
+	import selectKh from "./selectKh.vue"
+	import {
+		useHetong
+	} from "../useHetong.js"
 	
+	const {
+		injectHetong
+	} = useHetong();
+
+	const data = injectHetong()
 	
+	const emits = defineEmits(['select-kehu'])
+
+	const khRef = ref(null)
+
+	function handleSelct() {
+		khRef.value.handleShow();
+	}
 	
+	function onKhSelect(da) {
+		emits('select-kehu',da)
+	}
 </script>
 
 <style>

pages/admin/Hetong/components/qiTaYueDing.vue

@@ -1,7 +1,30 @@
 <template>
+	<uni-collapse class="sfht-collapse-box">
+		<uni-collapse-item title="其他约定" :open="true">
+			<view>备注</view>
+			<textarea @input="onInputChange" />
+		</uni-collapse-item>
+	</uni-collapse>
 </template>
 
-<script>
+<script setup>
+	import {
+		ref,
+		reactive,
+		nextTick
+	} from "vue";
+	import selectJz from "./selectJz.vue"
+	import {
+		useHetong
+	} from "../useHetong.js"
+	const {
+		injectHetong
+	} = useHetong();
+	const data = injectHetong()
+
+	function onInputChange(e) {
+		emits('qita', e.detail.value)
+	}
 </script>
 
 <style>

pages/admin/Hetong/components/qianMing.vue

@@ -1,7 +1,74 @@
 <template>
+	<!-- 合同模板 -->
+	<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>
+			<view class="form-radio-select" @click="handleQianming">
+				<view v-show="!!info">已签名</view>
+				<icon></icon>
+			</view>
+		</view>
+	</view>
+	<uni-popup ref="popupRef" type="bottom" background-color="#fff" :is-mask-click="false" :mask-click="false">
+		<view class="ht-qm-popup">
+			<view class="icon-title-navBar-box">
+				<view @click="goback2" class="nav-bar-icon"></view>
+				<text class="nav-bar-title">签名</text>
+			</view>
+			<writeSign @getBase64="getBase64"></writeSign>
+		</view>
+	</uni-popup>
+
 </template>
 
-<script>
+<script setup>
+	import {
+		ref,
+		reactive,
+		nextTick
+	} from "vue";
+	import selectJz from "./selectJz.vue"
+	import writeSign from "@/components/writeSign/index.vue"
+	import {
+		throttleAdvanced
+	} from "@/utils/common.js"
+	import {
+		base64ToPath
+	} from "image-tools";
+	import {
+		useHetong
+	} from "../useHetong.js"
+	
+	const {
+		injectHetong
+	} = useHetong();
+	const data = injectHetong()
+
+
+
+	const popupRef = ref(null)
+
+	const handleQM = throttleAdvanced((img) => {
+		data.hetong.qianming = img.replace(/^data:image\/\w+;base64,/, '')
+	})
+
+	function handleQianming() {
+		popupRef.value.open()
+	}
+
+	function goback2() {
+		popupRef.value.close()
+	}
+
+	function getBase64(da) {
+		if (!img) {
+			uni.showToast({
+				title: '签名异常'
+			})
+			return;
+		}
+		handleQM(img)
+	}
 </script>
 
 <style>

pages/admin/Hetong/components/selectKh.vue

@@ -25,13 +25,12 @@
 						<radio-group @change="radioChange">
 							<uni-list-item v-for="item in data.list" class="jz-list-item-box">
 								<template v-slot:body>
-
 									<view>
 										<view>{{item.realName}}</view>
 										<view>{{item.idCard}}</view>
 										<view>{{item.tel}}</view>
 										<view>
-											<radio :value="item.id" :checked="item.id === data.activeData" />
+											<radio :value="item.id" :checked="item.id === data.activeData&&data.activeData.id" />
 										</view>
 									</view>
 								</template>
@@ -167,7 +166,7 @@
 	}
 
 	function radioChange(opt) {
-		data.activeData = opt.id
+		data.activeData = opt
 	}
 
 	function handleAddKehu() {