团队预约调整

package.json

@@ -21,7 +21,7 @@
 		"html2canvas": "^1.4.1",
 		"jsencrypt": "^3.3.2",
 		"jspdf": "^2.5.1",
-		"moment": "^2.29.4",
+		"moment": "^2.30.1",
 		"nprogress": "0.2.0",
 		"pdfreader": "^3.0.2",
 		"qrcodejs2": "0.0.2",

src/router/systemRouter.js

@@ -89,10 +89,10 @@ const routes = [
 		}
 	},
 	{
-		path: "/confirmRegister",
-		component: () => import(/* webpackChunkName: "cmsTemplatePreview" */ '@/views/mobile/appointment/confirmRegister'),
+		path: "/groupExam",
+		component: () => import(/* webpackChunkName: "cmsTemplatePreview" */ '@/views/mobile/appointment/groupExam'),
 		meta: {
-			title: "体检预约详情"
+			title: "团队体检详情"
 		}
 	},
 	{

src/views/mobile/appointment/confirmRegister.vue

@@ -1,159 +0,0 @@
-<template>
-	<el-card class="health-check-card">
-		<el-row class="title">
-			<span>飞依诺职工体检</span>
-		</el-row>
-		<el-row :gutter="10" style="background-color:#E6E6FA;">
-			<el-col :span="24">
-				<el-row>
-					<el-col class="label" :span="8">体检地点：</el-col>
-					<el-col :span="16">{{ healthCheck.location }}</el-col>
-				</el-row>
-				<el-row>
-					<el-col class="label" :span="8">体检时间：</el-col>
-					<el-col :span="16">{{ healthCheck.time }}</el-col>
-				</el-row>
-			</el-col>
-		</el-row>
-		<el-divider></el-divider>
-		<el-row :gutter="10">
-			<el-col :span="24">
-				<el-row>
-					<el-col class="label" :span="8">体检对象：</el-col>
-					<el-col :span="16">{{ healthCheck.target }}</el-col>
-				</el-row>
-				<el-row>
-					<el-col class="label" :span="8">已报名人数：</el-col>
-					<el-col :span="16">{{ healthCheck.enrolledCount }}</el-col>
-				</el-row>
-				<el-row>
-					<el-col class="label" :span="8">包含项目数：</el-col>
-					<el-col :span="16">{{ healthCheck.itemCount }}</el-col>
-				</el-row>
-			</el-col>
-		</el-row>
-		<el-divider></el-divider>
-		<el-row>
-			<el-col class="label" :span="8">体检说明：</el-col>
-			<el-col :span="16">{{ healthCheck.description }}</el-col>
-		</el-row>
-		<el-row>
-			<el-col class="label" :span="8">包含项目：</el-col>
-			<el-col :span="16">
-				<div v-if="healthCheck.items" v-for="item in healthCheck.items" :key="item">
-					<div class="checkItem">
-						<el-tag>{{ item.name }}</el-tag>
-						<span>&nbsp;{{ item.content }}</span>
-					</div>
-				</div>
-			</el-col>
-		</el-row>
-	</el-card>
-	<el-row class="signButton">
-		<el-button type="primary" size="large" @click="handleSignUp">报名参加</el-button>
-	</el-row>
-</template>
-
-<script>
-import store from "@/store";
-import {
-	GetHealthExamBookingRequest,
-} from "@/jsonrpc/services/healthExamBooking.m";
-export default {
-	data() {
-		return {
-			code: '',
-			healthCheck: {},
-		};
-	},
-	async mounted() {
-		this.$nextTick(async ()=>{
-			this.code = this.$route.query.code;
-			var data = await this.GetData();
-			this.healthCheck = {
-				location: data.location,
-				time: this.GetDateString(data.startDate.toLocaleDateString().split('/'))+" "+data.startDate.toLocaleTimeString()+"-"+data.endDate.toLocaleTimeString(),
-				target: data.subject,
-				enrolledCount: data.persons.length,
-				itemCount: data.examItems.length,
-				description: data.description,
-				items: data.examItems.map(f=>{
-					return {
-						name:f.name, content:f.content
-					};
-				}),
-			};
-		});
-	},
-	methods: {
-		handleSignUp() {
-			this.$router.push({ path: "/submitRegister",params: {code:this.code} });
-		},
-		GetDateString(date)
-		{
-			var year = date[0];
-			var month = date[1];
-			var day = date[2];
-			return year+"年"+month+"月"+day+"日";
-		},
-		async GetData() {
-			var request = new GetHealthExamBookingRequest({
-				code: this.code,
-				token: store.state.userInfo.token,
-			}).toJson();
-			var data = await this.$rpc.healthExamBooking.getHealthExamBookingAsync(request);
-			console.log(data);
-			return data;
-		},
-	},
-};
-</script>
-
-<style scoped>
-.health-check-card {
-	padding: 5px;
-	margin: 10px;
-	border-radius: 5px;
-}
-
-.el-row {
-	padding: 2px;
-}
-
-.el-col {
-	padding: 5px;
-}
-
-.title {
-	font-size: 20px;
-	font-weight: bold;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-	margin-bottom: 20px;
-}
-
-.signButton {
-	align-items: center;
-	justify-content: center;
-	text-align: center;
-}
-
-.checkItem {
-	margin-bottom: 5px;
-}
-
-.label {
-	font-weight: bold;
-}
-
-/* 设置按钮的宽度和高度 */
-.el-button--large {
-	margin: 30px;
-	width: 300px;
-	height: 50px;
-	font-size: 20px;
-	font-weight: bold;
-}
-</style>

src/views/mobile/appointment/groupExam.vue

@@ -0,0 +1,148 @@
+<template>
+  <div id="app">
+    <el-row>
+      <el-col :span="24">
+        <el-card :body-style="{ padding: '0px' }" class="view-card">
+          <div class="exam-info">
+            <el-row class="exam-name">
+              <el-col :span="24">{{ exam.name }}</el-col>
+            </el-row>
+            <el-row class="exam-location">
+              <el-col :span="6">体检地点</el-col>
+              <el-col :span="18">{{ exam.location }}</el-col>
+            </el-row>
+            <el-row class="exam-time">
+              <el-col :span="6">体检时间</el-col>
+              <el-col :span="18">{{ exam.time }}</el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-card :body-style="{ padding: '0px' }" class="view-card">
+          <div class="exam-info2">
+            <el-row>
+              <el-col :span="6">体检对象</el-col>
+              <el-col :span="18">{{ exam.subject }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">体检说明</el-col>
+              <el-col :span="18">
+                <div
+                  v-html="exam.description"
+                  class="formatted-rich-text"
+                  style="padding: 0"
+                ></div>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">&nbsp;&nbsp;&nbsp;&nbsp;已报名</el-col>
+              <el-col :span="18">{{ exam.persons?.length || 0 }}人</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24"
+                >包含项目（{{ exam.examItems?.length || 0 }}项）</el-col
+              >
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-tag
+                  v-for="item in exam.examItems"
+                  :key="item"
+                  class="exam-item"
+                >
+                  {{ item.name }}
+                </el-tag>
+              </el-col>
+            </el-row>
+          </div>
+
+          <div class="foot">
+            <el-button type="primary" class="btnSubmit">报名参加</el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import moment from "moment";
+export default {
+  data() {
+    return {
+      code: "",
+      exam: {},
+    };
+  },
+  async created() {
+    this.code = this.$route.query.code;
+    var exam =
+      (await this.$rpc.healthExamBooking.getHealthExamBookingAsync({
+        Token: store.state.userInfo.token,
+        Code: this.code,
+      })) || {};
+    this.exam = exam;
+    if (exam.code && exam.startDate && exam.endDate) {
+      var day = moment(exam.startDate).format("YYYY年MM月DD日");
+      var timeRange =
+        moment(exam.startDate).format("HH:mm") +
+        "-" +
+        moment(exam.endDate).format("HH:mm");
+      this.exam.time = day + " " + timeRange;
+    }
+  },
+  methods: {
+    handleSignUp() {
+      this.$router.push({
+        path: "/submitRegister",
+        params: { code: this.code },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.view-card {
+  margin: 10px 20px 0 20px;
+}
+.exam-info {
+  padding: 10px 20px;
+}
+.exam-location,
+.exam-time {
+  padding: 10px 0;
+  font-size: 14px;
+}
+.exam-info .exam-name {
+  padding: 10px 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+.exam-info2 {
+  padding: 10px 20px;
+}
+.exam-info2 div {
+  padding: 5px 0;
+  font-size: 14px;
+}
+.exam-item {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+.formatted-rich-text {
+  white-space: pre-line;
+}
+.foot {
+  margin-bottom: 20px;
+  text-align: center;
+}
+.btnSubmit {
+  width: 80%;
+  font-size: 16px;
+}
+</style>