更换报名效果实现

src/pages/compliance-training/registration.vue

@@ -122,25 +122,27 @@
         </view>
       </view>
 
-      <view class="section-title"><view class="section-mark"></view><text>二、学历报名</text></view>
-      <view class="form-card education-card">
-        <view class="field-label">是否需要同步报名学历 <text class="required">*</text></view>
+      <view class="section-title"
+        ><view class="section-mark"></view
+        ><text>二、报名选项 <text class="required">*</text></text></view
+      >
+      <view class="form-card registration-options-card">
         <view
-          v-for="item in educationOptions"
+          v-for="item in registrationOptions"
           :key="item.value"
-          class="education-option"
-          :class="{ selected: selectedEducation.indexOf(item.value) !== -1 }"
-          @click="toggleEducation(item.value)"
+          class="registration-option"
+          :class="{ selected: selectedRegistrationOptions.indexOf(item.value) !== -1 }"
+          @click="toggleRegistrationOption(item.value)"
         >
           <view class="checkbox-icon">
             <wd-icon
-              v-if="selectedEducation.indexOf(item.value) !== -1"
+              v-if="selectedRegistrationOptions.indexOf(item.value) !== -1"
               name="check"
               size="26rpx"
               color="#ffffff"
             />
           </view>
-          <text class="education-label">{{ item.label }}</text>
+          <text class="registration-option-label">{{ item.label }}</text>
         </view>
       </view>
 
@@ -283,7 +285,7 @@ const MAX_IMAGE_SIZE = 5 * 1024 * 1024
 
 const steps = ['填写提交', '教务审核', '开通课程', '双证上岗']
 const genderOptions = ['男', '女']
-const educationOptions = [
+const registrationOptions = [
   {
     label: '【专科】药学专业、护理学专业',
     value: '【专科】药学专业、护理学专业',
@@ -292,6 +294,10 @@ const educationOptions = [
     label: '【专科起点本科】药学专业、护理学专业',
     value: '【专科起点本科】药学专业、护理学专业',
   },
+  {
+    label: '医药代表合规培训',
+    value: '医药代表合规培训',
+  },
 ]
 
 const form = reactive({
@@ -306,7 +312,7 @@ const form = reactive({
 
 const region = ref<SelectedRegion>()
 const addressRegion = ref<SelectedRegion>()
-const selectedEducation = ref<string[]>([])
+const selectedRegistrationOptions = ref<string[]>([])
 const images = ref<UploadedImage[]>([])
 const showRegionPicker = ref(false)
 const showAddressPicker = ref(false)
@@ -383,13 +389,13 @@ const onAddressRegionChange = (event: { selectedOptions?: AreaOption[] }) => {
   addressPickerValue.value = items[items.length - 1].value
 }
 
-const toggleEducation = (value: string) => {
-  const index = selectedEducation.value.indexOf(value)
+const toggleRegistrationOption = (value: string) => {
+  const index = selectedRegistrationOptions.value.indexOf(value)
 
   if (index === -1) {
-    selectedEducation.value.push(value)
+    selectedRegistrationOptions.value.push(value)
   } else {
-    selectedEducation.value.splice(index, 1)
+    selectedRegistrationOptions.value.splice(index, 1)
   }
 }
 
@@ -537,7 +543,7 @@ const validate = (): boolean => {
   }
   if (!jobTitle) return showValidationError('请填写职务')
   if (jobTitle.length > 50) return showValidationError('职务最多可填写50个字')
-  if (!selectedEducation.value.length) return showValidationError('请选择需要同步报名的学历')
+  if (!selectedRegistrationOptions.value.length) return showValidationError('请选择报名选项')
   if (!images.value.length) return showValidationError('请至少上传1张照片')
   if (!addressRegion.value) return showValidationError('请选择证书寄送地区')
   if (!addressDetail) return showValidationError('请填写详细地址')
@@ -565,7 +571,7 @@ const submit = async () => {
     region: `${region.value.province}/${region.value.city}`,
     company: form.company.trim(),
     jobTitle: form.jobTitle.trim(),
-    applyEducation: selectedEducation.value.join('、'),
+    applyEducation: selectedRegistrationOptions.value.join('、'),
     certificateImages: images.value.map((item) => item.remoteUrl).join(','),
     address: `${addressRegion.value.province}/${addressRegion.value.city}/${addressRegion.value.area}/${form.addressDetail.trim()}`,
   }
@@ -863,15 +869,14 @@ onLoad((options?: Record<string, string>) => {
   background: #2182f3;
 }
 
-.education-card {
-  padding-bottom: 31rpx;
+.registration-options-card {
+  padding: 10rpx 24rpx;
 }
 
-.education-option {
+.registration-option {
   display: flex;
   align-items: center;
   min-height: 86rpx;
-  margin-top: 22rpx;
   padding: 18rpx 24rpx;
   border: 1rpx solid #eef0f3;
   border-radius: 9rpx;
@@ -884,6 +889,10 @@ onLoad((options?: Record<string, string>) => {
     background: #eef6ff;
     color: #1678e5;
   }
+
+  & + & {
+    margin-top: 18rpx;
+  }
 }
 
 .checkbox-icon {
@@ -899,12 +908,12 @@ onLoad((options?: Record<string, string>) => {
   box-sizing: border-box;
 }
 
-.education-option.selected .checkbox-icon {
+.registration-option.selected .checkbox-icon {
   border-color: #2182f3;
   background: #2182f3;
 }
 
-.education-label {
+.registration-option-label {
   font-size: 26rpx;
   line-height: 38rpx;
 }