Merge pull request 'feat: 伴宠师认证流程(暂存);' (#1) from fox into master

Reviewed-on: http://175.178.51.79:3000/Augcl/pet-front/pulls/1

components/dForm/index.vue

@@ -10,34 +10,36 @@
 							class="ml10">{{item.unit?item.unit:""}}</text>
 					</div>
 				</template>
-				<template v-if="item.type==='select'">
-					<up-input inputAlign="right" v-model="formData[item.key]" disabled disabledColor="#ffffff"
+				<template v-else-if="item.type==='select'">
+					<up-input inputAlign="right" :value="getDesc(formData[item.key], item.options)" disabled disabledColor="#ffffff"
 						:placeholder="item.placeholder" border="none"></up-input>
 					<template #right>
 						<up-icon name="arrow-right"></up-icon>
 					</template>
 				</template>
-				<template v-if="item.type==='radio'">
+				<template v-else-if="item.type==='radio'">
 					<up-radio-group v-model="formData[item.key]" placement="column">
 						<div class="flex-rowr">
 							<up-radio class="mr16" activeColor="#FFBF60" :customStyle="{marginBottom: '8px'}"
-								v-for="key in item.options" :key="key.name" :label="key.name" :name="key.name">
+								v-for="option in item.options" :key="option.value" :label="option.name" :name="option.value">
 							</up-radio>
 						</div>
 					</up-radio-group>
 				</template>
-				<template v-if="item.type==='textarea'">
+				<template v-else-if="item.type==='textarea'">
 					<up-textarea v-model="formData[item.key]" :placeholder="item.placeholder" count autoHeight
 						:maxlength="item.maxlength"></up-textarea>
 				</template>
-				<template v-if="item.type==='upload'">
+				<template v-else-if="item.type==='upload'">
 					<up-upload :fileList="item.fileList" @afterRead="afterRead" @delete="deletePic" name="1"
 						:multiple="item.multiple" :maxCount="item.maxCount" :accept='item.accept'
 						:previewFullImage="item.previewFullImage"></up-upload>
 				</template>
 
-
 			</up-form-item>
+
+			<slot :name="item.key"></slot>
+
 		</div>
 		<up-button @click="handleSubmit" class="mt20" type="warning" v-if="isFooter">提交</up-button>
 	</up-form>
@@ -50,7 +52,8 @@
 	import {
 		reactive,
 		ref,
-		computed
+		computed,
+		watch,
 	} from "vue"
 	const {
 		list,
@@ -66,12 +69,18 @@
 		},
 		isFooter: true
 	})
-	const emit = defineEmits(['submit'])
+	const emit = defineEmits(['submit', 'input'])
 	const formData = reactive({
 		name: ""
 	})
+
+	watch(formData, (val) => {
+		emit('input', val)
+	})
+
 	const sheet = reactive({
 		show: false,
+		key: null,
 		actions: [],
 		title: "",
 		description: ""
@@ -89,6 +98,7 @@
 	// 开启弹框
 	const open = (item) => {
 		sheet.show = true
+		sheet.key = item.key
 		sheet.actions = item.options
 		sheet.title = item.placeholder
 		sheet.description = item.description || ""
@@ -100,8 +110,13 @@
 
 	// 选择
 	const handleSelect = (val) => {
-		console.log(val)
+		formData[sheet.key] = val?.value
 	}
+
+	const getDesc = (val, options) => {
+		return options.find(item => item.value === val)?.name
+	}
+
 	// 上传
 	const afterRead = () => {}
 	// 删除上传文件
@@ -115,11 +130,17 @@
 			}
 		})
 	}
+
+	const validate = () => {
+		return dFormRef.value.validate()
+	}
+
+	defineExpose({ validate })
 </script>
 
 <style>
 	.form-item {
-		height: 90rpx;
+		min-height: 90rpx;
 		padding-top: 10rpx;
 		width: 100%;
 		border-bottom: 1rpx solid #f5f5f5;

otherPages/authentication/completed/index.scss

@@ -1,161 +0,0 @@
-.bt120 {
-		margin-bottom: 120rpx;
-		width: 716rpx;
-		box-sizing: border-box;
-	}
-
-	.footer-btn {
-		width: 100vw;
-		height: 144rpx;
-		background-color: #fff;
-		display: flex;
-		justify-content: center;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		align-items: center;
-
-		.btn {
-			font-size: 30rpx;
-			color: #fff;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 574rpx;
-			height: 94rpx;
-			border-radius: 94rpx;
-			background-color: #FFBF60;
-		}
-	}
-
-	.type {
-		width: 190rpx;
-		margin-bottom: 74rpx;
-	}
-
-	.form {
-		padding: 40rpx 32rpx;
-		box-sizing: border-box;
-		width: 716rpx;
-	}
-
-	.title {
-		&::before {
-			content: "";
-			display: block;
-			width: 9rpx;
-			height: 33rpx;
-			background-color: #FFBF60;
-			margin-right: 7rpx;
-		}
-	}
-
-	.mb6 {
-		margin-bottom: 6rpx;
-	}
-
-	.containers {
-		position: relative;
-		.neir {
-			padding: 47rpx 27rpx 36rpx 27rpx;
-			border-radius: 16rpx;
-			box-sizing: border-box;
-			width: 716rpx;
-
-			.steps {
-				.line {
-					width: 163rpx;
-					height: 3rpx;
-					background-color: #BDBDBD;
-					margin-bottom: 30rpx;
-				}
-
-				.num {
-					width: 50rpx;
-					height: 50rpx;
-					background-color: #FFBF60;
-					border-radius: 50%;
-				}
-
-			}
-		}
-
-
-		.mainBg {
-			width: 100vw;
-			height: 442rpx;
-			background-image: linear-gradient(to bottom, #FFBF60, #f5f5f5);
-		}
-
-		.content {
-			top: 0;
-			left: 0;
-			padding: 16rpx;
-
-			.logo {
-				width: 194rpx;
-				height: 70rpx;
-			}
-
-			.renz {
-
-				image {
-					width: 26rpx;
-					height: 26rpx;
-				}
-			}
-		}
-	}
-	
-	.content_{
-		width: 675rpx;
-		height: auto;
-		background-color: pink;
-		position: absolute;
-		top: 410rpx;
-		left: 15rpx;
-		padding: 1% 3%;
-		
-		.top{
-			width: 625rpx;
-			height: 132rpx;
-			background-color: #FFFCF1;
-			padding: 16rpx 26rpx;
-			font-size: 28rpx;
-			
-			.img image{
-				width: 40rpx;
-				height: 40rpx;
-				border-radius: 100%;
-				background-color: red;
-				margin:3rpx 10rpx 0 0;
-			}
-			
-			.text{
-				width: 40rpx;
-				height: 40rpx;
-				border: 1rpx solid gray;
-				border-radius: 100%;
-				// background-color: red;
-				margin:3rpx 10rpx 0 0;
-				display: grid;
-				place-items: center;
-			}
-			
-			.veo{
-				justify-content: space-between;
-				
-				.veo_ video{
-					width: 100rpx;
-					height: 150rpx;
-					background-color: red;
-				}
-			}
-			
-			
-		}
-	}
-	
-	.level{
-		display: flex;
-	}

otherPages/authentication/completed/index.vue

@@ -1,84 +0,0 @@
-<template>
-	<!-- <view>基本考核完成</view> -->
-	<view class="containers po-r">
-		<image src="" mode="" class="mainBg"></image>
-		<view class="w-100 po-a content">
-			<view class="flex-rowl">
-				<image src="@/static/images/ydd/logo.png" mode="" class="logo"></image>
-				<view class="size-36 fw700 color-fff">
-					伴宠师认证
-				</view>
-			</view>
-			<view class="renz flex-rowl mt10">
-				<text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text>
-				<image src="@/static/images/ydd/more.png" mode=""></image>
-			</view>
-			<view class="neir bg-fff mt24">
-				<view class="steps flex-between">
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							1
-						</view>
-						<text class="size-22">基本考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							2
-						</view>
-						<text class="size-22">培训考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							3
-						</view>
-						<text class="size-22">最终准备</text>
-					</view>
-				</view>
-				<view class="color-ffb size-22 mt32">
-					为保证喂养员认证顺利进行，请认真填写并确保信息的真实性
-				</view>
-			</view>
-
-		</view>
-		<view class="content_ box-size" :style="{borderRadius:'16rpx'}">
-			<view class="top box-size" :style="{borderRadius:'16rpx'}">
-				<view class="level">
-					<view class="img">
-						<image src="" mode=""></image>
-					</view>
-					基本考核答题已完成
-				</view>
-				<view class="level">
-					<view class="text">
-						!
-					</view>
-					进行培训考核的答题前请认真观看下面的视频和资料！
-				</view>
-			</view>
-			<view class="">
-				<view class="form-title">
-					平台&服务介绍
-				</view>
-				<view class="level veo">
-					<view class="veo_">
-						<video src=""></video>
-						猫妈狗爸平台介绍
-					</view>
-					<view class="">
-						<video src=""></video>
-						喂养学习视频
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-</script>
-
-<style scoped lang="scss">
-	@import"index.scss";
-</style>

otherPages/authentication/components/questionCard.vue

@@ -0,0 +1,71 @@
+<template>
+  <view class="mt32 question__view" :class="[props.mode]">
+    <view class="size-28 mb20 question">
+      {{ `${props.index + 1}、${props.data.question}` }}
+    </view>
+    <view class="size-28 option"
+      v-for="(option, oIdx) in props.data.options"
+      :key="`${props.index}-option-${oIdx}`"
+      :class="[props.modelValue === option.value ? 'is-selected' : '']"
+      @click="onClick(option.value)"
+    >
+      {{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }}
+    </view>
+  </view>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: null,
+  },
+  data: {
+    type: Object,
+    default() {
+      return {}
+    }
+  },
+  modelValue: {
+    type: String | Number,
+    default: null,
+  },
+  mode: {
+    type: String,
+    default: 'select', // select | display
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const onClick = (val) => {
+  emit('update:modelValue', val)
+}
+
+</script>
+
+<style lang="scss" scoped>
+.question {
+  color: #000000;
+}
+
+.option {
+  background-color: #F3F3F3;
+  color: #707070;
+  line-height: 37rpx;
+  padding: 23rpx;
+  border-radius: 28rpx;
+
+  & + & {
+    margin-top: 20rpx;
+  }
+}
+
+.question__view.select {
+  .option.is-selected {
+    background-color: rgba($color: #FFBF60, $alpha: 0.22);
+    color: #FFBF60;
+  }
+}
+</style>

otherPages/authentication/components/stepProgress.vue

@@ -0,0 +1,94 @@
+<template>
+  <view>
+    <view class="flex-rowl">
+      <image src="@/static/images/ydd/logo.png" mode="" class="logo"></image>
+      <view class="size-36 fw700 color-fff">
+        伴宠师认证
+      </view>
+    </view>
+    <view class="renz flex-rowl mt10">
+      <text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text>
+      <image src="@/static/images/ydd/more.png" mode=""></image>
+    </view>
+    <view class="neir bg-fff mt24">
+      <view class="steps flex-between">
+        <template v-for="(item, index) in steps" :key="`step-${index}`">
+          <view v-if="index > 0" class="line" :class="[index < props.step ? 'is-active' : '']"></view>
+          <view class="step flex-colc" :class="[index < props.step ? 'is-active' : '']">
+            <view class="num mb6 flex-rowc size-26 color-fff">
+              {{ index + 1 }}
+            </view>
+            <text class="size-22 desc">{{ item }}</text>
+          </view>
+        </template>
+      </view>
+      <view class="color-ffb size-22 mt32">
+        为保证喂养员认证顺利进行，请认真填写并确保信息的真实性
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const props = defineProps({
+  step: {
+    type: Number,
+    default: 0,
+  }
+})
+
+const steps = reactive(['基本考核', '培训考核', '最终准备'])
+</script>
+
+<style lang="scss" scoped>
+
+
+  .logo {
+    width: 194rpx;
+    height: 70rpx;
+  }
+
+  .renz {
+
+    image {
+      width: 26rpx;
+      height: 26rpx;
+    }
+  }
+
+  .neir {
+    padding: 47rpx 27rpx 36rpx 27rpx;
+    border-radius: 16rpx;
+    box-sizing: border-box;
+    width: 716rpx;
+
+    .steps {
+      .line {
+        width: 163rpx;
+        height: 3rpx;
+        background-color: #BDBDBD;
+        margin-bottom: 30rpx;
+        margin: 0 26rpx;
+      }
+
+      .num {
+        width: 50rpx;
+        height: 50rpx;
+        background-color: #BDBDBD;
+        border-radius: 50%;
+        margin-bottom: 7rpx;
+      }
+
+      .desc {
+        white-space: nowrap;
+      }
+
+      .line.is-active,
+      .step.is-active .num {
+        background-color: #FFBF60;
+      }
+    }
+  }
+</style>

otherPages/authentication/examination/base.vue

@@ -1,85 +1,201 @@
 <template>
-	<view class="box">
-		<view class="">
-			<view class="color-fff size-28">
-				答题进度 10/23
-			</view>
-			<view class="step mt20 mb32">
-				<view class="in">
+	<view class="page">
 
-				</view>
+		<view class="header">
+			<view class="flex-rowc color-fff size-28 title">
+				{{ `答题进度 ${answered}/${total}` }}
 			</view>
+			<up-line-progress class="progress" :percentage="progress" activeColor="#FFBF60" inactiveColor="#D9D9D9" height="16rpx" :showText="false"></up-line-progress>
 		</view>
 
-		<view class="content bg-fff">
-			<view class="label size-22">
-				选择题
-			</view>
-			<view class="">
-				<view class="size-28 mt32 mb20">
-					1、猫咪每天在地上走路，时不时还会打滚， 身上是很不干净的，最好每个星期洗次澡
-				</view>
-				<view class="size-28 color-777 p20 daan">
-					A、对
+		<view class="box">
+			<view class="content bg-fff">
+				<view>
+					<view class="label size-22">
+						选择题
+					</view>
 				</view>
-				<view class="size-28 color-777 p20 daan active mt24">
-					B、错
+				<view class="">
+					<questionCard 
+						v-for="(item, qIdx) in list" 
+						:key="`question-${qIdx}`"
+						:index="qIdx"
+						:data="item"
+						v-model="item.value"
+					></questionCard>
 				</view>
 			</view>
 		</view>
-	</view>
-	<view class="footer-btn">
-		<view class="btn">
-			提交
+		<view class="footer-btn">
+			<view class="btn" @click="toNext">
+				提交
+			</view>
 		</view>
+
 	</view>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { usePageList } from "@/utils/pageList";
+
+import questionCard from '../components/questionCard.vue';
+
+const total = ref(0)
+
+
+// todo
+const { list, getData } = usePageList()
+
+onShow(() => {
+	// todo: delete test data
+
+	total.value = 100
+
+	list.value = [
+		{
+			question: '猫咪每天在地上走路，时不时还会打滚，身上是很不干净的，最好每个星期洗次澡',
+			options: [
+				{
+					label: '对',
+					value: 0,
+				},
+				{
+					label: '错',
+					value: 1,
+				},
+			],
+			value: null,
+		},
+		{
+			question: '当狗狗出现乱拉乱尿或者捣乱拆家等反映时，您会如何处理?',
+			options: [
+				{
+					label: '暴力制止，根据情况是否严重来判断下手轻重，让狗狗知道这样做会受到惩罚',
+					value: 0,
+				},
+				{
+					label: '奖罚分明，制止后耐心引导，直到狗狗做出正确的行为，并立马给出奖励',
+					value: 1,
+				},
+				{
+					label: '狗狗也不是故意的，也不会造成什么很大的影响，默默打扫好就算了吧',
+					value: 2,
+				},
+			],
+			value: null,
+		},
+		{
+			question: '3、狗狗和猫咪一样是肉食性动物，最好可以纯肉喂养，对狗狗的身心健康有很大好处',
+			options: [
+				{
+					label: '对',
+					value: 0,
+				},
+				{
+					label: '错',
+					value: 1,
+				},
+			],
+			value: null,
+		},
+		{
+			question: '猫咪每天在地上走路，时不时还会打滚，身上是很不干净的，最好每个星期洗次澡',
+			options: [
+				{
+					label: '对',
+					value: 0,
+				},
+				{
+					label: '错',
+					value: 1,
+				},
+			],
+			value: null,
+		},
+		{
+			question: '当狗狗出现乱拉乱尿或者捣乱拆家等反映时，您会如何处理?',
+			options: [
+				{
+					label: '暴力制止，根据情况是否严重来判断下手轻重，让狗狗知道这样做会受到惩罚',
+					value: 0,
+				},
+				{
+					label: '奖罚分明，制止后耐心引导，直到狗狗做出正确的行为，并立马给出奖励',
+					value: 1,
+				},
+				{
+					label: '狗狗也不是故意的，也不会造成什么很大的影响，默默打扫好就算了吧',
+					value: 2,
+				},
+			],
+			value: null,
+		},
+		{
+			question: '3、狗狗和猫咪一样是肉食性动物，最好可以纯肉喂养，对狗狗的身心健康有很大好处',
+			options: [
+				{
+					label: '对',
+					value: 0,
+				},
+				{
+					label: '错',
+					value: 1,
+				},
+			],
+			value: null,
+		},
+	]
+
+})
+
+const answered = computed(() => {
+	return list.value.filter(item => item.value !== null).length
+})
+
+const progress = computed(() => {
+	return Math.floor(answered.value / total.value * 100)
+})
+
+const toNext = () => {
+	uni.navigateTo({
+		url: "/otherPages/authentication/examination/baseCompleted"
+	})
+}
+
 </script>
 
 <style lang="scss" scoped>
-	.active {
-		color: #FFBF60;
-		background-color: rgb(255, 241, 240);
+	.page {
+		padding-bottom: 144rpx;
 	}
 
-	.daan {
-		background-color: #F3F3F3;
-		border-radius: 50rpx;
-	}
+	.header {
+		padding: 0 36rpx;
+		position: sticky;
+		top: 0;
+		background-image: linear-gradient(180deg, #FFBF60 0, #ffbf60 2%, #ffbf60 8%, #f2f2f2 90%);
 
-	.p20 {
-		padding: 20px;
+		.progress {
+			margin-top: 19rpx;
+		}
 	}
 
 	.box {
-		background-image: linear-gradient(to bottom, #ffbf60, #f2f2f2);
+		margin-top: 31rpx;
 		padding: 16rpx;
 
-		.step {
-			width: 720rpx;
-			height: 32rpx;
-			border-radius: 32rpx;
-			background-color: #D9D9D9;
-
-			.in {
-				width: 50%;
-				height: 32rpx;
-				background-color: #ffbf60;
-				border-radius: 32rpx;
-			}
-		}
-	}
-
-	.content {
-		border-radius: 20rpx;
-		padding: 15rpx 20rpx;
+		.content {
+			border-radius: 20rpx;
+			padding: 15rpx 20rpx;
 
-		.label {
-			padding: 5rpx 15rpx;
-			color: #fff;
-			background-color: #FFBF60;
+			.label {
+				display: inline-block;
+				padding: 5rpx 15rpx;
+				color: #fff;
+				background-color: #FFBF60;
+			}
 		}
 	}
 </style>

otherPages/authentication/examination/baseCompleted.vue

@@ -0,0 +1,139 @@
+<template>
+	<!-- <view>基本考核完成</view> -->
+	<view class="page po-r">
+		<image src="" mode="" class="mainBg"></image>
+		<view class="w-100 po-a content">
+			<stepProgress :step="2"></stepProgress>
+
+			<view class="info">
+				<view class="top">
+					<view class="top-title">
+						<up-icon class="icon" name="checkmark-circle-fill" color="#FFBF60" size="34rpx"></up-icon>
+						<text>基本考核答题已完成</text>
+					</view>
+					<view class="top-desc">
+						<up-icon class="icon" name="error-circle" color="#707070" size="27rpx"></up-icon>
+						<text>进行培训考核的答题前请认真观看下面的视频和资料！</text>
+					</view>
+				</view>
+				<view class="info-item">
+					<view class="info-item-title">
+						平台&服务介绍
+					</view>
+					<view class="flex-between">
+						<view class="veo_">
+							<video src=""></video>
+							猫妈狗爸平台介绍
+						</view>
+						<view class="">
+							<video src=""></video>
+							喂养学习视频
+						</view>
+					</view>
+				</view>
+				<view class="info-item">
+					<view class="info-item-title">
+						服务培训
+					</view>
+				</view>
+				<view class="footer-btn">
+					<view class="btn" @click="toNext">
+						进入培训考核
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import stepProgress from '../components/stepProgress.vue';
+
+	const toNext = () => {
+		uni.navigateTo({
+			url: "/otherPages/authentication/examination/train"
+		})
+	}
+</script>
+
+<style scoped lang="scss">
+	.page {
+		position: relative;
+
+		.mainBg {
+			width: 100vw;
+			height: 442rpx;
+			background-image: linear-gradient(to bottom, #FFBF60, #f5f5f5);
+		}
+
+		.content {
+			top: 0;
+			left: 0;
+			padding: 16rpx;
+		}
+	}
+	
+	.info{
+		box-sizing: border-box;
+		width: 100%;
+		height: auto;
+		background-color: #FFFFFF;
+		padding: 22rpx 20rpx 38rpx 20rpx;
+		border-radius: 16rpx;
+		
+		.top{
+			width: 100%;
+			background-color: #FFFCF1;
+			padding: 19rpx 26rpx;
+			border-radius: 16rpx;
+			color: #707070;
+
+			&-title {
+				font-size: 28rpx;
+			}
+
+			&-desc {
+				margin-top: 22rpx;
+				font-size: 22rpx;
+			}
+		}
+
+		&-item {
+			&-title {
+				&::before {
+					content: "";
+					display: block;
+					width: 9rpx;
+					height: 33rpx;
+					background-color: #FFBF60;
+					margin-right: 7rpx;
+				}
+			}
+		}
+	}
+
+	
+	.footer-btn {
+		width: 100vw;
+		height: 144rpx;
+		background-color: #fff;
+		display: flex;
+		justify-content: center;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		align-items: center;
+
+		.btn {
+			font-size: 30rpx;
+			color: #fff;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 574rpx;
+			height: 94rpx;
+			border-radius: 94rpx;
+			background-color: #FFBF60;
+		}
+	}
+</style>

otherPages/authentication/examination/detail.vue

@@ -1,109 +0,0 @@
-<template>
-	<!-- <view>伴宠师认证</view> -->
-	<view class="box">
-		<view class="content bg-fff">
-			<view class="">
-				<view class="label size-22 level" :style="{borderRadius:'10rpx'}">
-					选择题
-				</view>
-				<view class="">
-					<view class="size-28 mt32 mb20">
-						1、猫咪每天在地上走路，时不时还会打滚， 身上是很不干净的，最好每个星期洗次澡
-					</view>
-					<view class="size-28 color-777 p20 daan mb24">
-						A、对
-					</view>
-					<view class="size-28 color-777 p20 daan active mb24">
-						B、错
-					</view>
-				</view>
-			</view>
-			<view class="mt60">
-				<view class="label size-22 level" :style="{borderRadius:'10rpx'}">
-					主观题
-				</view>
-				<view class="">
-					<view class="size-28 mt32 mb20">
-						1、喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格怕生，请问您会如何进行服务?请详细描述您的全部服务流程(若服务宠物不包含猫咪可回答“略”)
-					</view>
-					<view class="size-28 color-777 p20 daan">
-						<textarea value="" placeholder="" />
-						<text :style="{color:'#FF2A2A'}">字数低于700字，不予合格</text>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-	<view class="footer-btn buttom ">
-		<view class="size-22 color-777	">
-			剩余考试机会：<text :style="{color:'#FF8DC6'}">3</text>次
-		</view>
-		<view class="btn">
-			重新考试
-		</view>
-	</view>
-</template>
-
-<script>
-</script>
-
-<style lang="scss" scoped>
-	.active {
-		color: #FFBF60;
-		background-color: rgb(255, 241, 240);
-	}
-
-	.daan {
-		background-color: #F3F3F3;
-		border-radius: 50rpx;
-	}
-
-	.p20 {
-		padding: 20px;
-	}
-
-	.box {
-		// background-image: linear-gradient(to bottom, #ffbf60, #f2f2f2);
-		padding: 16rpx;
-
-		.step {
-			width: 720rpx;
-			height: 32rpx;
-			border-radius: 32rpx;
-			background-color: #D9D9D9;
-
-			.in {
-				width: 50%;
-				height: 32rpx;
-				background-color: #ffbf60;
-				border-radius: 32rpx;
-			}
-		}
-	}
-
-	.content {
-		border-radius: 20rpx;
-		padding: 15rpx 20rpx;
-
-		.label {
-			width: 86rpx;
-			padding: 5rpx 15rpx;
-			color: #fff;
-			background-color: #FFBF60;
-			justify-content: center;
-		}
-	}
-
-	.level {
-		display: flex;
-	}
-
-	.subjectivity {
-		height: auto;
-	}
-
-	.buttom {
-		display: grid;
-		place-items: center;
-	}
-</style>

otherPages/authentication/examination/end.vue

@@ -1,169 +1,134 @@
 <template>
-	<view class="containers po-r">
-		<image src="" mode="" class="mainBg"></image>
-		<view class="w-100 po-a content">
-			<view class="flex-rowl">
-				<image src="@/static/images/ydd/logo.png" mode="" class="logo"></image>
-				<view class="size-36 fw700 color-fff">
-					伴宠师认证
-				</view>
-			</view>
-			<view class="renz flex-rowl mt10">
-				<text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text>
-				<image src="@/static/images/ydd/more.png" mode=""></image>
-			</view>
-			<view class="neir bg-fff mt24">
-				<view class="steps flex-between">
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
+	<view>
+		<view class="containers po-r">
+			<image src="" mode="" class="mainBg"></image>
+			<view class="w-100 po-a content">
+				
+				<stepProgress :step="3"></stepProgress>
+
+				<view class="step mt24">
+					<view class="li flex-rowl">
+						<view class="num flex-rowc">
 							1
 						</view>
-						<text class="size-22">基本考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							2
-						</view>
-						<text class="size-22">基本考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							3
+						<view class="item">
+							<view class="flex-between mb10">
+								<view class="flex-rowl">
+									<image class="img" src="@/static/images/ydd/end12.png" mode=""></image>
+									<text class="size-30 color-000 fw700">实名认证</text>
+								</view>
+								<view class="size-22 color-ffb">
+									已完成
+								</view>
+							</view>
+							<view class="info">
+								<view class="size-22 color-777">
+									真实姓名：刘思恩
+								</view>
+								<view class="size-22 color-777">
+									身份证号码：48234792837458923
+								</view>
+							</view>
 						</view>
-						<text class="size-22">基本考核</text>
 					</view>
-				</view>
-				<view class="color-ffb size-22 mt32">
-					为保证喂养员认证顺利进行，请认真填写并确保信息的真实性
-				</view>
-			</view>
-
 
-			<view class="step mt24">
-				<view class="li flex-rowl">
-					<view class="num flex-rowc">
-						1
-					</view>
-					<view class="item">
-						<view class="flex-between mb10">
-							<view class="flex-rowl">
-								<image class="img" src="@/static/images/ydd/end12.png" mode=""></image>
-								<text class="size-30 color-000 fw700">实名认证</text>
-							</view>
-							<view class="size-22 color-ffb">
-								已完成
-							</view>
+					<view class="li flex-rowl po-r">
+						<view class="line po-a">
+						</view>
+						<view class="num flex-rowc">
+							2
 						</view>
-						<view class="info">
-							<view class="size-22 color-777">
-								真实姓名：刘思恩
+						<view class="item">
+							<view class="flex-between mb10">
+								<view class="flex-rowl">
+									<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
+									<text class="size-30 color-000 fw700">履约保证金缴纳</text>
+								</view>
+								<view class="size-22 color-ffb jiao">
+									去缴纳
+								</view>
 							</view>
-							<view class="size-22 color-777">
-								身份证号码：48234792837458923
+							<view class="info color-777 size-22">
+								请缴纳履约保证金，保证金注销时可申请退还
 							</view>
 						</view>
 					</view>
-				</view>
 
-				<view class="li flex-rowl po-r">
-					<view class="line po-a">
-					</view>
-					<view class="num flex-rowc">
-						2
-					</view>
-					<view class="item">
-						<view class="flex-between mb10">
-							<view class="flex-rowl">
-								<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
-								<text class="size-30 color-000 fw700">履约保证金缴纳</text>
-							</view>
-							<view class="size-22 color-ffb jiao">
-								去缴纳
-							</view>
+					<view class="li flex-rowl po-r">
+						<view class="line po-a" style="height: 150rpx;">
 						</view>
-						<view class="info color-777 size-22">
-							请缴纳履约保证金，保证金注销时可申请退还
+						<view class="num flex-rowc">
+							3
 						</view>
-					</view>
-				</view>
-
-				<view class="li flex-rowl po-r">
-					<view class="line po-a" style="height: 150rpx;">
-					</view>
-					<view class="num flex-rowc">
-						3
-					</view>
-					<view class="item">
-						<view class="flex-between mb10">
-							<view class="flex-rowl">
-								<image class="img" src="@/static/images/ydd/end1(4).png" mode="widthFix"></image>
-								<text class="size-30 color-000 fw700">添加客服微信</text>
+						<view class="item">
+							<view class="flex-between mb10">
+								<view class="flex-rowl">
+									<image class="img" src="@/static/images/ydd/end1(4).png" mode="widthFix"></image>
+									<text class="size-30 color-000 fw700">添加客服微信</text>
+								</view>
+								<view class="size-22 color-ffb jiao">
+									去缴纳
+								</view>
 							</view>
-							<view class="size-22 color-ffb jiao">
-								去缴纳
+							<view class="info color-777 size-22 flex-rowc">
+								<text class="size-22 color-777">微信二维码</text>
+								<image src="" mode="" style="width: 150rpx;height: 150rpx;"></image>
 							</view>
 						</view>
-						<view class="info color-777 size-22 flex-rowc">
-							<text class="size-22 color-777">微信二维码</text>
-							<image src="" mode="" style="width: 150rpx;height: 150rpx;"></image>
-						</view>
 					</view>
-				</view>
 
-				<view class="li flex-rowl po-r">
-					<view class="line po-a" style="height: 150rpx;">
-					</view>
-					<view class="num flex-rowc">
-						4
-					</view>
-					<view class="item">
-						<view class="flex-between mb10">
-							<view class="flex-rowl">
-								<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
-								<text class="size-30 color-000 fw700">服务工具准备</text>
-							</view>
-							<view class="size-22">
-								查看工具包
-							</view>
+					<view class="li flex-rowl po-r">
+						<view class="line po-a" style="height: 150rpx;">
 						</view>
-						<view class="info color-777 size-22">
-							<view class="flex-between">
-								<text class="size-22">所在地区:</text>
-								<input type="text" placeholder="请选择" />
-							</view>
+						<view class="num flex-rowc">
+							4
 						</view>
-						<view class="info color-777 size-22 mt20">
-							<view class="flex-between">
-								<text class="size-22">详细地址:</text>
-								<input type="text" placeholder="请输入道路、小区、门牌号等" />
+						<view class="item">
+							<view class="flex-between mb10">
+								<view class="flex-rowl">
+									<image class="img" src="@/static/images/ydd/end13.png" mode="widthFix"></image>
+									<text class="size-30 color-000 fw700">服务工具准备</text>
+								</view>
+								<view class="size-22">
+									查看工具包
+								</view>
+							</view>
+							<view class="info color-777 size-22">
+								<view class="flex-between">
+									<text class="size-22">所在地区:</text>
+									<input type="text" placeholder="请选择" />
+								</view>
+							</view>
+							<view class="info color-777 size-22 mt20">
+								<view class="flex-between">
+									<text class="size-22">详细地址:</text>
+									<input type="text" placeholder="请输入道路、小区、门牌号等" />
+								</view>
 							</view>
 						</view>
-					</view>
 
 
+					</view>
 				</view>
-			</view>
 
-
-
-			<view class="footer-btn" @click="toNext">
-				<view class="btn">
-					下一步
+				<view class="footer-btn" @click="onClick">
+					<view class="btn">
+						提交审核
+					</view>
 				</view>
 			</view>
-		</view>
 
+		</view>
+		<image src="@/static/images/ydd/chat.png" mode="widthFix" class="chat"></image>
 	</view>
-	<image src="@/static/images/ydd/chat.png" mode="widthFix" class="chat"></image>
 </template>
 
 <script setup>
 	import {
 		reactive
 	} from "vue";
-	import dFrom from "@/components/dForm/index.vue"
+	import stepProgress from '../components/stepProgress.vue';
+
 
 	const state = reactive({
 		list: [{
@@ -217,10 +182,8 @@
 		]
 	})
 
-	const toNext = () => {
-		uni.navigateTo({
-			url: "/otherPages/authentication/examination/start"
-		})
+	const onClick = () => {
+		// todo
 	}
 </script>
 

otherPages/authentication/examination/errorDetail.vue

@@ -0,0 +1,142 @@
+<template>
+	<!-- <view>伴宠师认证</view> -->
+	 <view>
+		<view class="box">
+			<view class="content bg-fff">
+				<view class="">
+					<view class="label size-22 level" :style="{borderRadius:'10rpx'}">
+						选择题
+					</view>
+					<view class="">
+						<view class="size-28 mt32 mb20">
+							1、猫咪每天在地上走路，时不时还会打滚， 身上是很不干净的，最好每个星期洗次澡
+						</view>
+						<view class="size-28 color-777 p20 daan mb24">
+							A、对
+						</view>
+						<view class="size-28 color-777 p20 daan active mb24">
+							B、错
+						</view>
+					</view>
+				</view>
+				<view class="mt60">
+					<view class="label size-22 level" :style="{borderRadius:'10rpx'}">
+						主观题
+					</view>
+					<view class="">
+						<view class="size-28 mt32 mb20">
+							1、喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格怕生，请问您会如何进行服务?请详细描述您的全部服务流程(若服务宠物不包含猫咪可回答“略”)
+						</view>
+						<view class="size-28 color-777 p20 daan">
+							<textarea value="" placeholder="" />
+							<text :style="{color:'#FF2A2A'}">字数低于700字，不予合格</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="footer-btn buttom ">
+			<view class="size-22 color-777 tips-rest">
+				<!-- todo -->
+				剩余考试机会：<text class="highlight">{{ restTimes }}</text>次
+			</view>
+			<view class="btn" @click="onClick">
+				重新考试
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { onShow } from '@dcloudio/uni-app'
+
+	const restTimes = ref()
+
+	onShow(() => {
+		// todo: fetch
+		restTimes.value = 3
+	})
+
+	const onClick = () => {
+		uni.reLaunch({
+			url: "/otherPages/authentication/examination/start"
+			// todo: check
+			// url: "/otherPages/authentication/list/index"
+    })
+	}
+</script>
+
+<style lang="scss" scoped>
+	.active {
+		color: #FFBF60;
+		background-color: rgb(255, 241, 240);
+	}
+
+	.daan {
+		background-color: #F3F3F3;
+		border-radius: 50rpx;
+	}
+
+	.p20 {
+		padding: 20px;
+	}
+
+	.box {
+		// background-image: linear-gradient(to bottom, #ffbf60, #f2f2f2);
+		padding: 16rpx;
+
+		.step {
+			width: 720rpx;
+			height: 32rpx;
+			border-radius: 32rpx;
+			background-color: #D9D9D9;
+
+			.in {
+				width: 50%;
+				height: 32rpx;
+				background-color: #ffbf60;
+				border-radius: 32rpx;
+			}
+		}
+	}
+
+	.content {
+		border-radius: 20rpx;
+		padding: 15rpx 20rpx;
+
+		.label {
+			width: 86rpx;
+			padding: 5rpx 15rpx;
+			color: #fff;
+			background-color: #FFBF60;
+			justify-content: center;
+		}
+	}
+
+	.level {
+		display: flex;
+	}
+
+	.subjectivity {
+		height: auto;
+	}
+
+	.buttom {
+		display: grid;
+		place-items: center;
+	}
+
+	
+	.tips {
+		&-rest {
+			color: #707070;
+			font-size: 22rpx;
+			margin: 9rpx 0 13rpx 0;
+			.highlight {
+				color: #FF8DC6;
+			}
+		}
+	}
+</style>

otherPages/authentication/examination/start.vue

@@ -6,7 +6,9 @@
 				<view class="com-title size-32 fw700 flex-rowl">
 					您选择的宠物类型
 				</view>
-				<image class="mt32" src="../../../static/images/ydd/img1.png" mode="widthFix"></image>
+				<image class="mt32" v-if="petType === 'cat'" src="../static/list/cat-active.png" mode="widthFix"></image>
+				<image class="mt32" v-else-if="petType === 'dog'" src="../static/list/dog-active.png" mode="widthFix"></image>
+				<image class="mt32" v-else-if="petType === 'special-pet'" src="../static/list/special-pet-active.png" mode="widthFix"></image>
 			</view>
 
 			<view class="text po-r bg-fff">
@@ -30,8 +32,9 @@
 
 		</view>
 		<view class="footer-btn flex-colc">
-			<view class="size-22 color-777">
-				剩余考试次数:3次
+			<view class="size-22 color-777 tips-rest">
+				<!-- todo -->
+				剩余考试机会：<text class="highlight">{{ restTimes }}</text>次
 			</view>
 			<view class="btn" @click="toNext">
 				开始考试
@@ -41,6 +44,18 @@
 </template>
 
 <script setup>
+	import { ref, onMounted } from 'vue'
+	import { onShow } from '@dcloudio/uni-app'
+
+	const petType = ref()
+	const restTimes = ref()
+	
+	onShow(() => {
+		// todo: fetch
+		petType.value = 'cat'
+		restTimes.value = 3
+	})
+
 	const content =
 		`即将开始基础养宠经验考核，该环节是对喂养员科学养宠经验及理念的基础考核，考核题目均为选择判断题，题目较为简单;大多为科学养宠所涉及的常识题，以客观事实判定标准答案;小部分题目为平台对喂养员的要求，以平台自行判定标准答案!`
 
@@ -97,4 +112,21 @@
 			width: 198rpx;
 		}
 	}
+
+	.tips {
+		&-rest {
+			color: #707070;
+			font-size: 22rpx;
+			margin: 9rpx 0 13rpx 0;
+			.highlight {
+				color: #FF8DC6;
+			}
+		}
+	}
+
+	.footer-btn {
+		height: 163rpx;
+		box-sizing: border-box;
+		padding-bottom: 18rpx;
+	}
 </style>

otherPages/authentication/examination/train.vue

@@ -0,0 +1,102 @@
+<template>
+	<!-- <view>培训考核</view> -->
+	<view>
+		<view class="box">
+			<view class="">
+				<view class="color-fff size-28">
+					答题进度 2/5
+				</view>
+				<view class="step mt20 mb32">
+					<view class="in">
+
+					</view>
+				</view>
+				<view class="content bg-fff">
+					<view class="label size-22 level" :style="{borderRadius:'10rpx'}">
+						主观题
+					</view>
+					<view class="">
+						<view class="size-28 mt32 mb20">
+							1、喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格怕生，请问您会如何进行服务?请详细描述您的全部服务流程(若服务宠物不包含猫咪可回答“略”
+						</view>
+						<view class="size-28 color-777 p20 daan">
+							<textarea value="" placeholder="请输入您的答案，不得低于700个字" />
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="footer-btn buttom ">
+			<view class="btn" @click="toNext">
+				提交
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+
+	const toNext = () => {
+		uni.navigateTo({
+			url: "/otherPages/authentication/examination/trainCompleted/index"
+		})
+	}
+	
+</script>
+
+<style scoped lang="scss">
+.active {
+		color: #FFBF60;
+		background-color: rgb(255, 241, 240);
+	}
+
+	.daan {
+		background-color: #F3F3F3;
+		border-radius: 50rpx;
+	}
+
+	.p20 {
+		padding: 20px;
+	}
+
+	.box {
+		height: 180rpx;
+		background-image: linear-gradient(to bottom, #ffbf60, #f2f2f2);
+		padding: 16rpx;
+		position: absolute;
+
+		.step {
+			width: 720rpx;
+			height: 15rpx;
+			border-radius: 32rpx;
+			background-color: #D9D9D9;
+
+			.in {
+				width: 50%;
+				height: 15rpx;
+				background-color: #ffbf60;
+				border-radius: 32rpx;
+			}
+		}
+	}
+
+	.content {
+		border-radius: 20rpx;
+		padding: 15rpx 20rpx;
+		position: relative;
+		bottom: 0;
+		left: 0;
+
+		.label {
+			width: 80rpx;
+			justify-content: center;
+			padding: 5rpx 15rpx;
+			color: #fff;
+			background-color: #FFBF60;
+		}
+	}
+	
+	.level{
+		display: flex;
+	}
+</style>

otherPages/authentication/examination/trainCompleted/fail.vue

@@ -0,0 +1,57 @@
+<template>
+	<view class="content_">
+		<view class="img_">
+			<image src="../../static/examination/unqualified.png" mode="" style="width: 310rpx;height: 311rpx;"></image>
+		</view>
+		<view class="buttom" :style="{borderRadius:'41rpx'}" @click="onClick">
+			查看错题原因
+			<!-- todo: icon-arrow -->
+		</view>
+	</view>
+</template>
+
+<script setup>
+
+	const onClick = () => {
+		uni.navigateTo({
+			url: "/otherPages/authentication/examination/errorDetail"
+		})
+	}
+</script>
+
+<style scoped lang="scss">
+	.content_{
+		font-size: 28rpx;
+		color: #707070;
+		
+		.img_{
+			width: 310rpx;
+			height: 311rpx;
+			margin: 80rpx 0 0 190rpx;
+		}
+		
+		.text{
+			width: 420rpx;
+			height: 74rpx;
+			justify-content: center;
+			margin: 30rpx 0 0 140rpx;
+		}
+		
+		.buttom{
+			width: 594rpx;
+			height: 94rpx;
+			display: grid;
+			place-items: center;
+			background-color: #FFBF60;
+			margin: 250rpx 0 0 40rpx;
+			font-size: 30rpx;
+			color: #FFFFFF;
+		}
+	}
+	
+	.level{
+		display: flex;
+	}
+	
+	
+</style>

otherPages/authentication/training/detail.scss → otherPages/authentication/examination/trainCompleted/index.vue

@@ -1,3 +1,38 @@
+<template>
+	<!-- <view>伴宠师认证</view> -->
+	<view class="containers po-r">
+		<image src="" mode="" class="mainBg"></image>
+		<view class="w-100 po-a content">
+			<stepProgress :step="2"></stepProgress>
+		</view>
+		<view class="content_ box-size" :style="{borderRadius:'16rpx'}">
+			<passView v-if="status === 'pass'"></passView>
+			<failView v-else-if="status === 'fail'"></failView>
+			<waitingView v-else></waitingView>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { onShow } from '@dcloudio/uni-app'
+
+	import stepProgress from '../../components/stepProgress.vue';
+	import waitingView from './waiting.vue'
+	import passView from './pass.vue'
+	import failView from './fail.vue'
+	
+	const status = ref('waiting')
+
+	onShow(() => {
+		// todo: fetch
+
+		status.value = 'waiting'
+	})
+
+</script>
+
+<style scoped lang="scss">
 .bt120 {
 		margin-bottom: 120rpx;
 		width: 716rpx;
@@ -171,4 +206,5 @@
 		display: flex;
 	}
 	
-	
+	
+</style>

otherPages/authentication/examination/trainCompleted/pass.vue

@@ -0,0 +1,62 @@
+<template>
+	<view class="content_ box-size">
+		<view class="img_">
+			<image src="../../static/examination/approved.png" mode="" style="width: 310rpx;height: 311rpx;"></image>
+		</view>
+		<view class="text_ level">
+			审核留言:-您好呀，感谢您的认真作答~从您的回答中我们感受到了您对宠物的用心，相信您可以胜任宠物喂养员这份小小的工作!希望您能在猫妈狗爸给更多毛孩子带去您的关爱!
+		</view>
+		<view class="buttom" :style="{borderRadius:'41rpx'}" @click="onClick">
+			下一步
+		</view>
+	</view>
+</template>
+
+<script setup>
+
+	const onClick = () => {
+		uni.navigateTo({
+			url: "/otherPages/authentication/examination/end"
+		})
+	}
+
+</script>
+
+<style scoped lang="scss">
+
+	.content_{
+		font-size: 28rpx;
+		color: #707070;
+		
+		.img_{
+			width: 310rpx;
+			height: 311rpx;
+			margin: 80rpx 0 0 190rpx;
+		}
+		
+		.text_{
+			width: 674rpx;
+			height: 74rpx;
+			justify-content: center;
+			margin: 30rpx 0 0 10rpx;
+			font-size: 22rpx !important;
+		}
+		
+		.buttom{
+			width: 594rpx;
+			height: 94rpx;
+			display: grid;
+			place-items: center;
+			background-color: #FFBF60;
+			margin: 250rpx 0 0 40rpx;
+			font-size: 30rpx;
+			color: #FFFFFF;
+		}
+	}
+	
+	.level{
+		display: flex;
+	}
+	
+	
+</style>

otherPages/authentication/examination/trainCompleted/waiting.vue

@@ -0,0 +1,60 @@
+<template>
+	<view class="content_">
+		<view class="img_">
+			<image src="../../static/examination/examine.png" mode="" style="width: 310rpx;height: 311rpx;"></image>
+			<image src="/static/images/ydd/examine.png" mode="" style="width: 310rpx;height: 311rpx;"></image>
+		</view>
+		<view class="text level">
+			平台会在三个工作日内完成审核，请及时查看审核结果！
+		</view>
+		<view class="buttom" :style="{borderRadius:'41rpx'}" @click="onClick">
+			我知道了
+		</view>
+	</view>
+</template>
+
+<script setup>
+
+	const onClick = () => {
+		// todo
+	}
+
+</script>
+
+<style scoped lang="scss">
+	
+	.content_{
+		font-size: 28rpx;
+		color: #707070;
+		
+		.img_{
+			width: 310rpx;
+			height: 311rpx;
+			margin: 80rpx 0 0 190rpx;
+		}
+		
+		.text{
+			width: 420rpx;
+			height: 74rpx;
+			justify-content: center;
+			margin: 30rpx 0 0 140rpx;
+		}
+		
+		.buttom{
+			width: 594rpx;
+			height: 94rpx;
+			display: grid;
+			place-items: center;
+			background-color: #FFBF60;
+			margin: 250rpx 0 0 40rpx;
+			font-size: 30rpx;
+			color: #FFFFFF;
+		}
+	}
+	
+	.level{
+		display: flex;
+	}
+	
+	
+</style>

otherPages/authentication/list/index.vue

@@ -1,50 +1,49 @@
 <template>
 	<view class="containers po-r">
 		<image src="" mode="" class="mainBg"></image>
+		
 		<view class="w-100 po-a content">
-			<view class="flex-rowl">
-				<image src="@/static/images/ydd/logo.png" mode="" class="logo"></image>
-				<view class="size-36 fw700 color-fff">
-					伴宠师认证
-				</view>
-			</view>
-			<view class="renz flex-rowl mt10">
-				<text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text>
-				<image src="@/static/images/ydd/more.png" mode=""></image>
-			</view>
-			<view class="neir bg-fff mt24">
-				<view class="steps flex-between">
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							1
-						</view>
-						<text class="size-22">基本考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							2
-						</view>
-						<text class="size-22">培训考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							3
-						</view>
-						<text class="size-22">最终准备</text>
-					</view>
-				</view>
-				<view class="color-ffb size-22 mt32">
-					为保证喂养员认证顺利进行，请认真填写并确保信息的真实性
-				</view>
-			</view>
+			
+			<stepProgress :step="1"></stepProgress>
 
 			<view class="bg-fff mt22 form ">
 				<view class="title fw700 size-30 flex-rowl">
 					基本信息
 				</view>
-				<dFrom :list="state.list" :isFooter="false" />
+				<dForm ref="formRef" :list="state.list" labelWidth="220rpx" :isFooter="false" @input="onFormInput"></dForm>
+			</view>
+			
+			<view class="license__view" v-if="form.license">
+				<view class="license">
+					<up-checkbox-group 
+						v-model="licenseData.selected" 
+						shape="circle"
+						activeColor="#FFBF60"
+						labelColor="#000000"
+						labelSize="26rpx"
+					>
+						<view class="license-options">
+							<up-checkbox
+								v-for="item in LICENSE_OPTIONS"
+								:key="`license-${item.value}`"
+								:label="item.label"
+								:name="item.value"
+							>
+							</up-checkbox>
+						</view>
+					</up-checkbox-group>
+					<view class="tips">
+						温馨提示：上传专业执照将大大增加通过概率，且会快速晋升为高级伴宠师获取更高报酬
+					</view>
+					<up-upload
+						:fileList="licenseData.fileList"
+						@afterRead="afterRead"
+						@delete="deletePic"
+						multiple
+					>
+						<image src="../static/list/icon-upload.png" style="width: 144rpx;height: 144rpx;"></image>
+					</up-upload>
+				</view>							
 			</view>
 
 			<view class="bg-fff mt22 form bt120">
@@ -52,12 +51,24 @@
 					个人宠物类型
 				</view>
 				<view class="flex-between wrap mt32">
-					<image class="type" src="@/static/images/ydd/img1.png" mode="widthFix"></image>
-					<image class="type" src="@/static/images/ydd/img2.png" mode="widthFix"></image>
-					<image class="type" src="@/static/images/ydd/img3.png" mode="widthFix"></image>
-					<image class="type" src="@/static/images/ydd/img4.png" mode="widthFix"></image>
-					<image class="type" src="@/static/images/ydd/img5.png" mode="widthFix"></image>
-					<image class="type" src="@/static/images/ydd/img6.png" mode="widthFix"></image>
+
+					<view class="type">
+						<image src="../static/list/cat.png" mode="widthFix" @click="onSelectPet('cat')"></image>
+						<image class="active" v-if="petType === 'cat'" src="../static/list/cat-active.png" mode="widthFix"></image>
+					</view>
+
+					
+					<view class="type">
+						<image src="../static/list/dog.png" mode="widthFix" @click="onSelectPet('dog')"></image>
+						<image class="active" v-if="petType === 'dog'" src="../static/list/dog-active.png" mode="widthFix"></image>
+					</view>
+
+					
+					<view class="type">
+						<image src="../static/list/special-pet.png" mode="widthFix" @click="onSelectPet('special-pet')"></image>
+						<image class="active" v-if="petType === 'special-pet'" src="../static/list/special-pet-active.png" mode="widthFix"></image>
+					</view>
+
 				</view>
 			</view>
 
@@ -72,10 +83,9 @@
 </template>
 
 <script setup>
-	import {
-		reactive
-	} from "vue";
-	import dFrom from "@/components/dForm/index.vue"
+	import { ref, reactive } from "vue";
+	import dForm from "@/components/dForm/index.vue"
+	import stepProgress from '../components/stepProgress.vue';
 
 	const state = reactive({
 		list: [{
@@ -95,10 +105,12 @@
 				label: "性别",
 				key: "sex",
 				options: [{
-						name: "男"
+						name: "男",
+						value: 0,
 					},
 					{
-						name: "女"
+						name: "女",
+						value: 1,
 					}
 				]
 			},
@@ -116,20 +128,76 @@
 				unit: "年"
 			},
 			{
-				type: "select",
+				type: "radio",
 				label: "是否有专业执照",
-				key: "shij",
+				key: "license",
 				placeholder: "请选择",
 				options: [{
-					name: "是"
+					name: "是",
+					value: 1,
 				}, {
-					name: "没有"
+					name: "没有",
+					value: 0,
 				}]
 			},
 		]
 	})
 
+	const formRef = ref()
+	const form = ref({})
+	const onFormInput = (e) => {
+		form.value = e
+	}
+
+	const licenseData = reactive({
+		selected: [],
+		fileList: []
+	})
+	const LICENSE_OPTIONS = [
+		{
+			label: '兽医职称专业执照',
+			value: 0,
+		},
+		{
+			label: '宠物美容洗护专业执照',
+			value: 1,
+		},
+		{
+			label: '宠物康复护理专业执照',
+			value: 2,
+		},
+		{
+			label: '宠物膳食管理专业执照',
+			value: 3,
+		},
+		{
+			label: '其他专业执照',
+			value: 4,
+		},
+	]
+	const afterRead = () => {
+		// todo
+	}
+	const deletePic = (event) => {
+		licenseData.fileList.splice(event.index, 1);
+	};
+
+	const petType = ref()
+	const onSelectPet = (type) => {
+		petType.value = type
+	}
+
 	const toNext = () => {
+		// todo: save data
+
+		const data = {
+			...form.value,
+			...licenseData,
+			petType: petType.value,
+		}
+
+		console.log('--data', data)
+
 		uni.navigateTo({
 			url: "/otherPages/authentication/examination/start"
 		})
@@ -170,6 +238,17 @@
 	.type {
 		width: 190rpx;
 		margin-bottom: 74rpx;
+		position: relative;
+
+		image {
+			width: 100%;
+		}
+
+		.active {
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
 	}
 
 	.form {
@@ -194,29 +273,6 @@
 	}
 
 	.containers {
-		.neir {
-			padding: 47rpx 27rpx 36rpx 27rpx;
-			border-radius: 16rpx;
-			box-sizing: border-box;
-			width: 716rpx;
-
-			.steps {
-				.line {
-					width: 163rpx;
-					height: 3rpx;
-					background-color: #BDBDBD;
-					margin-bottom: 30rpx;
-				}
-
-				.num {
-					width: 50rpx;
-					height: 50rpx;
-					background-color: #FFBF60;
-					border-radius: 50%;
-				}
-
-			}
-		}
 
 
 		.mainBg {
@@ -230,18 +286,33 @@
 			left: 0;
 			padding: 16rpx;
 
-			.logo {
-				width: 194rpx;
-				height: 70rpx;
-			}
+		}
+	}
 
-			.renz {
+	.license__view {
+		width: 716rpx;
+		padding-bottom: 40rpx;
+		box-sizing: border-box;
+		background-color: #FFFFFF;
+
+		.license {
+			width: 100%;
+			padding: 13rpx 16rpx;
+			box-sizing: border-box;
+			background-color: #FFFCF1;
 
-				image {
-					width: 26rpx;
-					height: 26rpx;
-				}
+			&-options {
+				display: grid;
+				grid-template-columns: repeat(2, 1fr);
 			}
 		}
+
+		.tips {
+			margin: 22rpx 0 24rpx 0;
+			color: #FFBF60;
+			font-size: 22rpx;
+			width: 100%;
+			word-break: break-all;
+		}
 	}
 </style>

otherPages/authentication/training/base.vue

@@ -1,64 +0,0 @@
-<template>
-	<!-- <view>伴宠师认证</view> -->
-	<view class="containers po-r">
-		<image src="" mode="" class="mainBg"></image>
-		<view class="w-100 po-a content">
-			<view class="flex-rowl">
-				<image src="@/static/images/ydd/logo.png" mode="" class="logo"></image>
-				<view class="size-36 fw700 color-fff">
-					伴宠师认证
-				</view>
-			</view>
-			<view class="renz flex-rowl mt10">
-				<text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text>
-				<image src="@/static/images/ydd/more.png" mode=""></image>
-			</view>
-			<view class="neir bg-fff mt24">
-				<view class="steps flex-between">
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							1
-						</view>
-						<text class="size-22">基本考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							2
-						</view>
-						<text class="size-22">培训考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							3
-						</view>
-						<text class="size-22">最终准备</text>
-					</view>
-				</view>
-				<view class="color-ffb size-22 mt32">
-					为保证喂养员认证顺利进行，请认真填写并确保信息的真实性
-				</view>
-			</view>
-
-		</view>
-		<view class="content_ box-size" :style="{borderRadius:'16rpx'}">
-			<view class="img_">
-				<image src="/static/images/ydd/approved.png" mode="" style="width: 310rpx;height: 311rpx;"></image>
-			</view>
-			<view class="text_ level">
-				审核留言:-您好呀，感谢您的认真作答~从您的回答中我们感受到了您对宠物的用心，相信您可以胜任宠物喂养员这份小小的工作!希望您能在猫妈狗爸给更多毛孩子带去您的关爱!
-			</view>
-			<view class="buttom" :style="{borderRadius:'41rpx'}">
-				下一步
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-</script>
-
-<style scoped lang="scss">
-	@import"detail.scss";
-</style>

otherPages/authentication/training/detail.vue

@@ -1,64 +0,0 @@
-<template>
-	<!-- <view>伴宠师认证</view> -->
-	<view class="containers po-r">
-		<image src="" mode="" class="mainBg"></image>
-		<view class="w-100 po-a content">
-			<view class="flex-rowl">
-				<image src="@/static/images/ydd/logo.png" mode="" class="logo"></image>
-				<view class="size-36 fw700 color-fff">
-					伴宠师认证
-				</view>
-			</view>
-			<view class="renz flex-rowl mt10">
-				<text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text>
-				<image src="@/static/images/ydd/more.png" mode=""></image>
-			</view>
-			<view class="neir bg-fff mt24">
-				<view class="steps flex-between">
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							1
-						</view>
-						<text class="size-22">基本考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							2
-						</view>
-						<text class="size-22">培训考核</text>
-					</view>
-					<view class="line"></view>
-					<view class="step flex-colc">
-						<view class="num mb6 flex-rowc size-26 color-fff">
-							3
-						</view>
-						<text class="size-22">最终准备</text>
-					</view>
-				</view>
-				<view class="color-ffb size-22 mt32">
-					为保证喂养员认证顺利进行，请认真填写并确保信息的真实性
-				</view>
-			</view>
-
-		</view>
-		<view class="content_ box-size" :style="{borderRadius:'16rpx'}">
-			<view class="img_">
-				<image src="/static/images/ydd/examine.png" mode="" style="width: 310rpx;height: 311rpx;"></image>
-			</view>
-			<view class="text level">
-				平台会在三个工作日内完成审核，请及时查看审核结果！
-			</view>
-			<view class="buttom" :style="{borderRadius:'41rpx'}">
-				我知道了
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-</script>
-
-<style scoped lang="scss">
-	@import"detail.scss";
-</style>

otherPages/authentication/training/index.scss

@@ -1,54 +0,0 @@
-.active {
-		color: #FFBF60;
-		background-color: rgb(255, 241, 240);
-	}
-
-	.daan {
-		background-color: #F3F3F3;
-		border-radius: 50rpx;
-	}
-
-	.p20 {
-		padding: 20px;
-	}
-
-	.box {
-		height: 180rpx;
-		background-image: linear-gradient(to bottom, #ffbf60, #f2f2f2);
-		padding: 16rpx;
-		position: absolute;
-
-		.step {
-			width: 720rpx;
-			height: 15rpx;
-			border-radius: 32rpx;
-			background-color: #D9D9D9;
-
-			.in {
-				width: 50%;
-				height: 15rpx;
-				background-color: #ffbf60;
-				border-radius: 32rpx;
-			}
-		}
-	}
-
-	.content {
-		border-radius: 20rpx;
-		padding: 15rpx 20rpx;
-		position: relative;
-		bottom: 0;
-		left: 0;
-
-		.label {
-			width: 80rpx;
-			justify-content: center;
-			padding: 5rpx 15rpx;
-			color: #fff;
-			background-color: #FFBF60;
-		}
-	}
-	
-	.level{
-		display: flex;
-	}

otherPages/authentication/training/index.vue

@@ -1,40 +0,0 @@
-<template>
-	<!-- <view>培训考核</view> -->
-	<view class="box">
-		<view class="">
-			<view class="color-fff size-28">
-				答题进度 2/5
-			</view>
-			<view class="step mt20 mb32">
-				<view class="in">
-
-				</view>
-			</view>
-			<view class="content bg-fff">
-				<view class="label size-22 level" :style="{borderRadius:'10rpx'}">
-					主观题
-				</view>
-				<view class="">
-					<view class="size-28 mt32 mb20">
-						1、喂养服务流程:如果您收到一笔喂养猫咪的订单，备注猫咪性格怕生，请问您会如何进行服务?请详细描述您的全部服务流程(若服务宠物不包含猫咪可回答“略”
-					</view>
-					<view class="size-28 color-777 p20 daan">
-						<textarea value="" placeholder="请输入您的答案，不得低于700个字" />
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-	<view class="footer-btn buttom ">
-		<view class="btn">
-			提交
-		</view>
-	</view>
-</template>
-
-<script>
-</script>
-
-<style scoped lang="scss">
-	@import"index.scss";
-</style>

pages.json

@@ -49,7 +49,6 @@
 	],
 	"subPackages": [{
 			"root": "otherPages/authentication",
-			// 绑定用户
 			"pages": [{
 				"path": "list/index",
 				"style": {
@@ -66,12 +65,28 @@
 					"navigationBarTitleText": "基础考核"
 				}
 			}, {
-				"path": "examination/end",
+				"path": "examination/baseCompleted",
+				"style": {
+					"navigationBarTitleText": "伴宠师认证"
+				}
+			},
+			{
+				"path": "examination/train",
+				"style": {
+					"navigationBarTitleText": "培训考核"
+				}
+			}, {
+				"path": "examination/trainCompleted/index",
+				"style": {
+					"navigationBarTitleText": "伴宠师认证"
+				}
+			}, {
+				"path": "examination/errorDetail",
 				"style": {
 					"navigationBarTitleText": "伴宠师认证"
 				}
 			}, {
-				"path": "examination/detail",
+				"path": "examination/end",
 				"style": {
 					"navigationBarTitleText": "伴宠师认证"
 				}
@@ -95,26 +110,6 @@
 				"style": {
 					"navigationBarTitleText": "接单地址"
 				}
-			}, {
-				"path": "completed/index",
-				"style": {
-					"navigationBarTitleText": "伴宠师认证"
-				}
-			}, {
-				"path": "training/index",
-				"style": {
-					"navigationBarTitleText": "培训考核"
-				}
-			}, {
-				"path": "training/detail",
-				"style": {
-					"navigationBarTitleText": "伴宠师认证"
-				}
-			}, {
-				"path": "training/base",
-				"style": {
-					"navigationBarTitleText": "伴宠师认证"
-				}
 			}]
 		},
 		{

pages/myOrdersManage/components/orderListByData.vue

@@ -82,7 +82,6 @@
 	import {
 		ref,
 		reactive,
-		defineProps
 	} from 'vue';
 
 	const {

pages/myOrdersManage/components/systemOrder.vue

@@ -49,10 +49,6 @@
 
 	}
 
-	import {
-		defineProps
-	} from 'vue';
-
 	const { list } = defineProps({
 		list: {
 			type: Array,

project.config.json

@@ -1,5 +1,5 @@
 {
-  "appid": "wx90d494bba15f99c3",
+  "appid": "wx01f0f43759922fda",
   "compileType": "miniprogram",
   "libVersion": "3.7.8",
   "packOptions": {

utils/pageList.js

@@ -0,0 +1,72 @@
+import { ref, reactive } from 'vue'
+import { onShow, onReachBottom } from '@dcloudio/uni-app'
+
+export const usePageList = (apiFun, defaultQueryParams) => {
+
+  const queryParams = reactive({
+    pageNo: 1,
+    pageSize: 10,
+    ...defaultQueryParams
+  })
+
+  const list = ref([])
+  const total = ref(0)
+
+  const fetchData = async () => {
+    try {
+      const res = await apiFun(queryParams)
+
+      if (res.code === 200) {
+        return res.data
+      }
+
+      return { list: [], total: 0 }
+    } catch (err) {
+      return { list: [], total: 0 }
+    }
+  }
+
+  const getData = async () => {
+    queryParams.pageNo = 1
+    const { list: _list, total: _total } = await fetchData()
+
+    list.value = _list
+    total.value = _total
+  }
+
+  const getMore = async () => {
+    if (list.value.length >= total.value) {
+      return
+    }
+
+    queryParams.pageNo++
+    const { list: _list } = await fetchData()
+
+    list.value = list.value.concat(_list)
+  }
+  
+  onShow(() => {
+    // todo fetch
+    console.log('--onShow')
+    return
+  
+    getData()
+  })
+
+  onReachBottom(() => {
+    // todo fetch
+    console.log('--onReachBottom')
+    return
+  
+    getMore()
+  })
+
+  return {
+    queryParams,
+    list,
+    total,
+    getData,
+    getMore,
+  }
+
+}