邀约记录详情

src/App.vue

@@ -95,8 +95,8 @@ const tabbar: TabbarItem[] = [
 	{
 		pagePath: "pages/tabbar/invitationRecord",
 		text: "邀约记录",
-		iconPath: "/static/tabbar/invitation.png",
-		selectedIconPath: "/static/tabbar/invitation-select.png",
+		iconPath: "/static/tabbar/order.png",
+		selectedIconPath: "/static/tabbar/order-select.png",
 		launchParam: ["invitation"],
 		auth: [],
 	},

src/pages/invitation/detail.vue

@@ -1,3 +1,105 @@
-<template></template>
+<template>
+	<crud-layout title="详情" mainIsScroll bg="/static/page/blue-bg.png">
+		<view v-if="detail.id">
+			<tm-sheet :margin="[0, 20]" class="second-text-32">
+				<tm-text font-size="32">访客信息</tm-text>
+				<view class="flex justify-between mt-1">
+					<text>访客姓名：</text>
+					<text>{{ detail.name }}</text>
+				</view>
+				<view class="flex justify-between mt-1">
+					<text>访客手机号：</text>
+					<text>{{ detail.mobile }}</text>
+				</view>
+				<view class="flex justify-between mt-1">
+					<text>来访公司名称：</text>
+					<text>{{ detail.companyName }}</text>
+				</view>
+				<view class="flex justify-between mt-1">
+					<text>来访原因：</text>
+					<text>{{ visitorReasonList.find((item) => item.id == detail.reasonValue)?.title || "" }}</text>
+				</view>
+				<view class="flex justify-between mt-1">
+					<text>接待人：</text>
+					<text>{{ detail.userName }}</text>
+				</view>
+				<view class="flex justify-between mt-1">
+					<text>来访人数：</text>
+					<text>{{ detail.peopleNumber }}</text>
+				</view>
+				<view class="flex justify-between mt-1">
+					<text>是否可随行人员：</text>
+					<text>{{ detail.isOtherPeople == "1" ? "是" : "否" }}</text>
+				</view>
+				<view class="flex justify-between mt-1">
+					<text>是否可驾驶车辆：</text>
+					<text>{{ detail.isDrive == "1" ? "是" : "否" }}</text>
+				</view>
+			</tm-sheet>
 
-<script setup lang="ts"></script>
+			<tm-sheet :margin="[0, 20]" class="second-text-32">
+				<tm-text font-size="32">时间</tm-text>
+				<view class="flex justify-between mt-1">
+					<text>预计来访时间：</text>
+					<text>{{ detail.vendDate }}</text>
+				</view>
+				<view class="flex justify-between mt-1">
+					<text>预计离开时间：</text>
+					<text>{{ detail.vstartDate }}</text>
+				</view>
+			</tm-sheet>
+
+			<tm-sheet :margin="[0, 20]" class="second-text-32">
+				<tm-text font-size="32">其他</tm-text>
+				<view class="flex justify-between mt-1">
+					<text>创建方式：</text>
+					<text>{{ detail.type == "1" ? "主动申请" : detail.type == "2" ? "邀约" : "后台创建" }}</text>
+				</view>
+				<view class="flex justify-between mt-1">
+					<text>提交时间：</text>
+					<text>{{ detail.createTime }}</text>
+				</view>
+			</tm-sheet>
+		</view>
+
+		<view class="h-40rpx" />
+	</crud-layout>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue"
+import { onLoad } from "@dcloudio/uni-app"
+import { invitationApi } from "@/sheep/api"
+
+const detail = ref<any>({})
+const visitorReasonList = ref<{ title: string; id: string }[]>([])
+
+onLoad(async (options: any) => {
+	const id = options.id
+
+	try {
+		const { code, data, msg } = await invitationApi.getInvitationDetail(id)
+		if (code == 0) {
+			detail.value = data
+			return
+		}
+		uni.showToast({ title: msg || "获取详情失败", icon: "none" })
+	} catch (error: any) {
+		uni.showToast({ title: error.message, icon: "none" })
+	}
+})
+
+onMounted(() => {
+	getVisitorReasonList()
+})
+
+// 获取拜访原因列表
+const getVisitorReasonList = async () => {
+	const { code, data } = await invitationApi.getDictListByType("1")
+	if (code == 0 && data) {
+		visitorReasonList.value = data.map((item: any) => ({ title: item.label, id: item.value }))
+		return
+	}
+	visitorReasonList.value = []
+}
+</script>

src/pages/tabbar/invitation.vue

@@ -51,7 +51,7 @@
 					</tm-picker-date>
 				</tm-form-item>
 
-				<tm-form-item name="deptId" label="拜访部门">
+				<!-- <tm-form-item name="deptId" label="拜访部门">
 					<tm-drawer :show-close="true" :show-footer="true" size="auto" title="请选择拜访部门">
 						<template #trigger>
 							<tm-input :modelValue="form.deptId" placeholder="请选择拜访部门" style="pointer-events: none" disabled color="transparent">
@@ -62,11 +62,11 @@
 						</template>
 						<tm-text color="#999999">精致美观的对话框，可全局配置风格</tm-text>
 					</tm-drawer>
-				</tm-form-item>
+				</tm-form-item> -->
 
 				<tm-form-item name="reasonValue" label="拜访原因">
-					<tm-picker v-model="form.reasonValue" v-model:modelStr="_pingtaistr" rangText="reasonValue" :list="visitorReasonList">
-						<tm-input :modelValue="_pingtaistr" placeholder="请选择拜访原因" style="pointer-events: none" disabled color="transparent">
+					<tm-picker @confirm="reasonPickerConfirm" :list="visitorReasonList">
+						<tm-input :modelValue="form.reasonText" placeholder="请选择拜访原因" style="pointer-events: none" disabled color="transparent">
 							<template #rightIcon>
 								<tm-icon name="arrow-right-s-line"></tm-icon>
 							</template>
@@ -90,20 +90,19 @@ import { onLoad } from "@dcloudio/uni-app"
 import { reactive, ref } from "vue"
 import { invitationApi } from "@/sheep/api/index"
 
-const form = reactive({
+const form = reactive<any>({
 	name: "",
 	mobile: "",
 	companyName: "",
 	vStartDate: "",
 	vEndDate: "",
-	deptId: "",
 	reasonValue: "",
+	reasonText: "",
 	isOtherPeople: true,
 	isDrive: true,
 })
 const _timestr = ref("2025-01-01")
-const _pingtaistr = ref("")
-const visitorReasonList = ref([])
+const visitorReasonList = ref<{ title: string; id: string }[]>([])
 
 onLoad(() => {
 	const app = getApp()
@@ -116,35 +115,54 @@ onLoad(() => {
 const getVisitorReasonList = async () => {
 	const { code, data } = await invitationApi.getDictListByType("1")
 	if (code == 0 && data) {
-		visitorReasonList.value = data
+		visitorReasonList.value = data.map((item: any) => ({ title: item.label, id: item.value }))
 		return
 	}
 	visitorReasonList.value = []
 }
 
+// 来访原因选择器确认
+const reasonPickerConfirm = (ids: string) => {
+	const reason = visitorReasonList.value.find((item) => item.id === ids[0])
+	form.reasonText = reason?.title || ""
+	form.reasonValue = reason?.id || ""
+}
+
 const rules: Record<string, TM.FORM_RULE[]> = {
 	name: [{ required: true, message: "姓名2到5个字符", rule: /^.{2,5}$/ }],
 	mobile: [{ required: true, message: "请输入正确的手机号", rule: /^(?:(?:\+|00)86)?1\d{10}$/ }],
 	companyName: [{ required: true, message: "请输入来访公司名称" }],
 	vStartDate: [{ required: true, message: "请选择拜访开始时间" }],
 	vEndDate: [{ required: true, message: "请选择拜访离开时间" }],
-	deptId: [{ required: true, message: "请选择拜访部门" }],
 	reasonValue: [{ required: true, message: "请选择拜访原因" }],
 }
 
 // 表单提交
 const onsubmit = (evt: TM.FORM_SUBMIT_RESULT) => {
-	console.log("校验结果:", evt)
+	// console.log("校验结果:", evt)
 	if (!evt.isPass) return
 	uni.showModal({
 		title: "提示",
 		content: "确认提交吗？",
 		confirmColor: "#0094ff",
 		success: async () => {
+			if (form.isOtherPeople) {
+				form.isOtherPeople = "1"
+			} else {
+				form.isOtherPeople = "0"
+			}
+
+			if (form.isDrive) {
+				form.isDrive = "1"
+			} else {
+				form.isDrive = "0"
+			}
+
 			try {
 				const { code, data, msg } = await invitationApi.saveInvitation(form)
 				if (code == 0) {
 					uni.showToast({ title: "提交成功", icon: "success" })
+					resetForm()
 					uni.switchTab({ url: "/pages/tabbar/invitationRecord" })
 					return
 				}
@@ -155,4 +173,19 @@ const onsubmit = (evt: TM.FORM_SUBMIT_RESULT) => {
 		},
 	})
 }
+
+// 重置表单
+const resetForm = () => {
+	Object.assign(form, {
+		name: "",
+		mobile: "",
+		companyName: "",
+		vStartDate: "",
+		vEndDate: "",
+		reasonValue: "",
+		reasonText: "",
+		isOtherPeople: true,
+		isDrive: true,
+	})
+}
 </script>

src/pages/tabbar/invitationRecord.vue

@@ -15,18 +15,32 @@
 			@scroll="pageHook.scroll"
 		>
 			<template #top>
-				<view class="bg-white rounded-20rpx my-20rpx font-bold">
+				<view class="bg-white rounded-20rpx my-20rpx font-bold py-1">
 					<z-tabs
 						:list="[
-							{ name: '审核申请', value: 0 },
+							{ name: '访客申请', value: 0 },
 							{ name: '我的邀约', value: 1 },
+							// { name: '访客申请', value: 0, badge: { count: 10 } },
+							// { name: '我的邀约', value: 1, badge: { count: 6 } },
 						]"
-						bar-width="150"
+						bar-width="0"
 						:active-style="{
 							fontSize: '30rpx',
+							backgroundColor: '#ECF4F9',
+							padding: '12rpx 64rpx',
+							borderRadius: '20rpx',
+							border: '1px solid #007AFF',
 						}"
 						:inactive-style="{
 							fontSize: '30rpx',
+							padding: '12rpx 64rpx',
+							border: '1px solid transparent',
+						}"
+						:badge-style="{
+							whiteSpace: 'nowrap',
+							position: 'relative',
+							top: '-14rpx',
+							left: '-72rpx',
 						}"
 						@change="onTabChange"
 					/>
@@ -45,12 +59,15 @@
 					<view v-if="v.checkStatus == '5'" class="p-1 c-white! sub-text-26 rounded-1 bg-#f5222d">已取消</view>
 					<view class="sub-text-26">{{ v.vstartDate + " ~ " + v.vendDate }}</view>
 				</view>
-				<view class="flex justify-center items-center my-2">
-					<view class="sub-text-32 mr-4 flex-col-center font-italic bg-#ECF4F9 p-4 rounded-lt-12 rounded-rb-12">
-						<view>{{ v.name }}</view>
-						<view>{{ v.mobile }}</view>
+				<view class="flex justify-between my-1 px-2 py-4 bg-#ECF4F9 rounded-4">
+					<view class="flex-col justify-start sub-text-30 font-italic whitespace-nowrap">
+						<view>来访人：{{ v.name }}</view>
+						<view>手机号：{{ v.mobile }}</view>
+					</view>
+					<view class="flex-col second-text-28">
+						<span v-if="state.params.type == 1">接待人：{{ v.userName }}</span>
+						<span>拜访原因：{{ visitorReasonList.find((item) => item.id == v.reasonValue)?.title || "" }}</span>
 					</view>
-					<view class="second-text-28 bg-#ECF4F9 p-4 rounded-lb-12 rounded-rt-12">接待人：{{ v.userName }}</view>
 				</view>
 				<view v-if="v.checkStatus == 1" class="flex justify-end items-center gap-2">
 					<tm-modal title="确定审核通过吗？" height="auto" @confirm="visitorCheck(v.id, 2)">
@@ -59,6 +76,7 @@
 					<tm-modal title="确定审核拒绝吗？" height="auto" @confirm="visitorCheck(v.id, 3)">
 						<template v-slot:trigger><tm-button class="px-1" size="s" color="danger">审核拒绝</tm-button></template>
 					</tm-modal>
+					<tm-button class="px-1" size="s" color="success" @click.stop="goDetail(v)">查看详情</tm-button>
 				</view>
 			</view>
 		</z-paging>
@@ -66,9 +84,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue"
+import { ref, reactive, onMounted } from "vue"
 import { onLoad, onShow } from "@dcloudio/uni-app"
-import { hooks } from "@@/index"
+import { hooks, router } from "@@/index"
 import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
 import { invitationApi } from "@/sheep/api"
 
@@ -87,6 +105,7 @@ const state = reactive<any>({
 	},
 })
 const pageRef = ref<any>(null)
+const visitorReasonList = ref<{ title: string; id: string }[]>([])
 
 onLoad(() => {
 	const app = getApp()
@@ -101,6 +120,20 @@ onShow(async () => {
 	}
 })
 
+onMounted(() => {
+	getVisitorReasonList()
+})
+
+// 获取拜访原因列表
+const getVisitorReasonList = async () => {
+	const { code, data } = await invitationApi.getDictListByType("1")
+	if (code == 0 && data) {
+		visitorReasonList.value = data.map((item: any) => ({ title: item.label, id: item.value }))
+		return
+	}
+	visitorReasonList.value = []
+}
+
 const doTab = (e: any) => {
 	const target = tabs[e]
 	state.params.checkStatus = target.value
@@ -134,4 +167,9 @@ const visitorCheck = async (id: string, checkStatus: number | string) => {
 		uni.showToast({ title: error.message, icon: "error" })
 	}
 }
+
+// 查看详情
+const goDetail = (v) => {
+	router.jump("/pages/invitation/detail", { id: v.id, token: v.token })
+}
 </script>

src/sheep/api/invitation.ts

@@ -4,7 +4,7 @@ export default {
 	// 获取拜访原因字典
 	getDictListByType: (type: number | string): Promise<any> =>
 		request({
-			url: `/integrated/app/visitor/getDictListByType?type=${type}`,
+			url: `/integrated/visitors/getDictListByType?type=${type}`,
 			method: "GET",
 		}),
 
@@ -32,4 +32,11 @@ export default {
 			method: "GET",
 			params,
 		}),
+
+	// 查看邀约详情
+	getInvitationDetail: (id: string): Promise<any> =>
+		request({
+			url: `/integrated/visitors/${id}`,
+			method: "GET",
+		}),
 }