diff --git a/common/http.api.js b/common/http.api.js
index c9682b1..6a2c14b 100644
--- a/common/http.api.js
+++ b/common/http.api.js
@@ -6,7 +6,9 @@ let apiApp = {
 	score: '/api/mobile/school/score',
 	middleSchoolIndicatorList: '/api/mobile/school/middle-school-indicator',
 	middleSchoolIndicatorDetail: '/api/mobile/school/middle-school-indicator-detail',
-	independentRecruitmentsSubmit: '/api/mobile/batch/independent-recruitments-submit'
+	independentRecruitmentsSubmit: '/api/mobile/batch/independent-recruitments-submit',
+	batchIndex: '/api/mobile/batch/index',
+	batchDetail: '/api/mobile/batch/detail'
 }
 const apiUser = {
 	appletLogin: '/api/mobile/user/applet-login',
@@ -38,6 +40,8 @@ const install = (Vue, vm) => {
 	const middleSchoolIndicatorList = (params = {}) => vm.$u.get(apiApp.middleSchoolIndicatorList, params)
 	const middleSchoolIndicatorDetail = (params = {}) => vm.$u.get(apiApp.middleSchoolIndicatorDetail, params)
 	const independentRecruitmentsSubmit = (params = {}) => vm.$u.post(apiApp.independentRecruitmentsSubmit, params)
+	const batchIndex = (params = {}) => vm.$u.get(apiApp.batchIndex, params)
+	const batchDetail = (params = {}) => vm.$u.get(apiApp.batchDetail, params)
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
 	vm.$u.api = {
 		// 用户相关
@@ -56,6 +60,8 @@ const install = (Vue, vm) => {
 		middleSchoolIndicatorList,
 		middleSchoolIndicatorDetail,
 		independentRecruitmentsSubmit,
+		batchIndex,
+		batchDetail,
 	};
 }
 
diff --git a/package_sub/pages/BatchForm/BatchForm.vue b/package_sub/pages/BatchForm/BatchForm.vue
new file mode 100644
index 0000000..c28a6ca
--- /dev/null
+++ b/package_sub/pages/BatchForm/BatchForm.vue
@@ -0,0 +1,361 @@
+<template>
+  <view class="container">
+    <image class="bkg" src="~@/static/me/wave.png" mode="widthFix"></image>
+
+    <view class="wrap" v-if="step === 1">
+      <view class="year-picker">
+        <view class="year-picker__title">报考年份</view>
+        <u-input class="year-picker__input"
+                 v-model="form.year"
+                 type="select"
+                 :height="60"
+                 border
+                 border-color="#b2b2b2"
+                 :custom-style="{
+                   color: '#6c6f70'
+                 }"
+                 @click="isShowTime = true"></u-input>
+      </view>
+      <view class="area-pick">
+        <view class="area-pick__title">所在区域</view>
+        <view class="area-pick__panel">
+          <view v-for="item in areaList" :key="item.id" class="area-item" @click="form.area_id = item.id">
+            {{ item.name }}
+            <u-icon class="area-item__tag" v-if="form.area_id === item.id " name="checkmark-circle-fill" color="#fff" :size="64" />
+          </view>
+        </view>
+      </view>
+
+      <u-button
+          shape="circle"
+          ripple
+          :custom-style="{
+            'background-image': 'linear-gradient(263deg, rgba(31,142,247,0.9) 0%, rgba(17,100,247,0.9981153777569027) 78%, rgba(17,100,247,0.9999999999999999) 78%)',
+            height: '76rpx',
+            'line-height': '76rpx',
+            'margin-top': '110rpx',
+            'width': '450rpx',
+            'color': '#fff'
+          }"
+          @click="() => {
+            if (form.area_id) {
+              stepClick('next')
+            } else {
+              $u.toast('请选择区域')
+            }
+          }">下一步</u-button>
+    </view>
+
+    <view class="wrap" v-if="step === 2">
+      <view class="picked-data">
+        <view>{{ form.year }}年</view>
+        <view>{{ formArea }}</view>
+      </view>
+
+      <view class="card" style="margin-top: 28rpx;">
+        <view class="card__title">
+          <scroll-view scroll-x="true" enable-flex style="display: flex;justify-content: center;">
+            <view class="batch-sub">
+              <view class="batch-sub-item" v-for="item in currentBatchSub" :key="item.id">
+                {{ item.name }}
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+
+        <view class="card__body">
+
+        </view>
+      </view>
+    </view>
+
+    <u-picker
+        v-model="isShowTime"
+        mode="time"
+        :params="{
+					year: true,
+					month: false,
+					day: false,
+					hour: false,
+					minute: false,
+					second: false
+				}"
+        @confirm="e => form.year = e.year"></u-picker>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      step: 1,
+      isShowTime: false,
+      areaList: [],
+      form: {
+        area_id: "",
+        year: new Date().getFullYear().toString(),
+        aspiration_id: ""
+      },
+      config: null,
+
+      currentBatchId: "",
+      aspiration: {},
+      batchSub: {}
+    };
+  },
+  methods: {
+    async getBatchSub(batchId) {
+      this.currentBatchId = batchId
+      if (this.batchSub.hasOwnProperty(batchId) && this.batchSub[batchId]) {
+
+      } else {
+        try {
+          const { batchSubs } = await this.$u.api.batchDetail({ id: batchId })
+          this.$set(this.batchSub, batchId, batchSubs)
+        } catch (err) {
+          console.error(err)
+        }
+      }
+    },
+    async getConfig () {
+      try {
+        const { list } = await this.$u.api.batchIndex({
+          area_id: this.form.area_id,
+          year: this.form.year
+        })
+        if (list.length > 0) {
+          this.form.aspiration_id = list[0].id
+
+          this.aspiration = list[0]
+          this.setTitle()
+          if (this.aspiration.batchs[0].id) {
+            this.getBatchSub(this.aspiration.batchs[0].id)
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    stepClick(type='next') {
+      if (type === 'next') {
+        if (true) {
+          this.step = this.step + 1
+
+          if (this.step === 2 && !this.config) {
+            this.getConfig()
+          }
+        }
+      } else if (type === 'prev') {
+        if (this.step > 1) {
+          this.step = this.step - 1
+        }
+      }
+    },
+    setTitle() {
+      uni.setNavigationBarTitle({
+        title: `志愿模拟填报 - Step ${this.step}${ this.step !== 1 ? ('/'+(this.batches.length+1)) : '' }`
+      })
+    },
+    async getArea() {
+      try {
+        const res = await this.$u.api.area()
+        this.areaList = res.list
+      } catch (err) {
+        console.error(err)
+      }
+    },
+  },
+  computed: {
+    formArea() {
+      return this.areaList?.find(i => i.id === this.form.area_id)?.name
+    },
+    batches() {
+      return this.aspiration.batchs || []
+    },
+    currentBatchSub() {
+      console.log(33, this.batchSub, this.currentBatchId, this.batchSub[String(this.currentBatchId)])
+      return this.batchSub[this.currentBatchId]
+    }
+  },
+  watch: {
+    step() {
+      this.setTitle()
+    }
+  },
+  onShow() {
+    this.setTitle()
+  },
+  created() {
+    this.getArea()
+  },
+}
+</script>
+
+<style lang="scss">
+.container {
+  position: relative;
+  min-height: 100vh;
+  width: 100vw;
+  background: #eaf8fe;
+
+  .bkg {
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  .wrap {
+    z-index: 3;
+    position: relative;
+    padding-top: 40rpx;
+
+    .year-picker {
+      background: #fff;
+      display: flex;
+      align-items: center;
+      margin: 0 24rpx;
+      padding: 32rpx 75rpx 32rpx 60rpx;
+      border-radius: 20rpx;
+      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208, 209, 209, 0.3));
+
+      &__title {
+        font-size: 30rpx;
+        text-transform: uppercase;
+        color: #333333;
+        font-weight: 500;
+      }
+
+      &__input {
+        flex: 1;
+        margin-left: 32rpx;
+      }
+    }
+
+    .area-pick {
+      margin: 0 24rpx;
+
+      &__title {
+        font-size: 30rpx;
+        text-transform: uppercase;
+        color: #333333;
+        font-weight: 500;
+        padding: 42rpx 0 38rpx 60rpx;
+      }
+
+      &__panel {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 22rpx 28rpx;
+
+        $colors: linear-gradient(0deg, #309cfe 0%, #58e5ff 100%),
+        linear-gradient(0deg, #309cfe 0%, #58e5ff 100%),
+        linear-gradient(0deg, #2f69fd 0%, #51bcfe 100%),
+        linear-gradient(0deg, #2f69fd 0%, #51bcfe 100%),
+        linear-gradient(0deg, #2941fc 0%, #587bff 100%),
+        linear-gradient(0deg, #2941fc 0%, #587bff 100%),
+        linear-gradient(0deg, #280bb7 0%, #5776fe 100%),
+        linear-gradient(0deg, #280bb7 0%, #5776fe 100%);
+
+        .area-item {
+          border-radius: 15rpx;
+          font-size: 46rpx;
+          text-transform: uppercase;
+          color: #ffffff;
+          font-weight: 500;
+          text-align: center;
+          padding: 60rpx 0;
+          filter: drop-shadow(0 4rpx 2rpx rgba(0, 0, 0, 0.3));
+          position: relative;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            opacity: 0.302;
+            width: 192rpx;
+            height: 192rpx;
+            border-radius: 96rpx;
+            background-image: linear-gradient(0deg, #309cfe 0%, #58c2ff 100%);
+            position: absolute;
+            top: -140rpx;
+            right: -38rpx;
+          }
+
+          &::after {
+            content: '';
+            opacity: 0.149;
+            width: 192rpx;
+            height: 192rpx;
+            border-radius: 96rpx;
+            background-color: #b9e1fd;
+            position: absolute;
+            bottom: -148rpx;
+            left: -44rpx;
+          }
+
+          &__tag {
+            z-index: 4;
+            position: absolute;
+            top: 10rpx;
+            right: 10rpx;
+          }
+        }
+
+        @for $i from 1 through length($colors) {
+          .area-item:nth-child(n + #{$i}) {
+            background: nth($colors, $i);
+          }
+        }
+      }
+    }
+    .picked-data {
+      display: flex;
+      align-items: center;
+      border-radius: 20rpx;
+      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
+      background-color: rgba(255, 255, 255, 0.5);
+      margin: 20rpx 24rpx 0;
+      padding: 26rpx  160rpx;
+
+      & > view {
+        flex: 1;
+        text-align: center;
+        font-size: 32rpx;
+        text-transform: uppercase;
+        color: #333333;
+        font-weight: bold;
+      }
+    }
+
+    .card {
+      margin: 0 24rpx;
+      border-radius: 20rpx;
+      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
+      background-color: #ffffff;
+
+      &__title {
+        background: #fbf1e8;
+        border-radius: 20rpx 20rpx 0 0;
+        padding: 30rpx 16rpx;
+      }
+      &__body {
+        padding: 48rpx 30rpx 70rpx 30rpx;
+      }
+    }
+    .batch-sub {
+      display: flex;
+
+      &-item {
+        text-align: center;
+        font-size: 28rpx;
+        text-transform: uppercase;
+        color: #e77817;
+        font-weight: 500;
+        padding: 0 20rpx;
+        word-break: keep-all;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/package_sub/pages/FormSuccess/FormSuccess.vue b/package_sub/pages/FormSuccess/FormSuccess.vue
index 6f73c4c..3d514a0 100644
--- a/package_sub/pages/FormSuccess/FormSuccess.vue
+++ b/package_sub/pages/FormSuccess/FormSuccess.vue
@@ -6,6 +6,25 @@
       <view class="icon">
         <u-icon name="checkbox-mark" color="#d87d34" :size="120"></u-icon>
       </view>
+      <view class="text">
+        <view>
+          {{ title }} <text style="color: #d87d34;">已完成</text>
+        </view>
+        <view>
+          我们会安排专业的人员和您沟通
+        </view>
+      </view>
+      <u-button ripple
+                shape="circle"
+                :custom-style="{
+                  height: '76rpx',
+                  'line-height': '76rpx',
+                  background: 'linear-gradient(263deg, rgba(31,142,247,0.99) 0%, rgba(17,100,247,0.9981153777569027) 78%, rgba(17,100,247,0.9999999999999999) 78%)',
+                  'font-size': '33rpx',
+                  'letter-spacing': '3rpx',
+                  color: '#fff',
+                  'margin-top': '10vh'
+                }">返回列表</u-button>
     </view>
   </view>
 </template>
@@ -21,9 +40,13 @@ export default {
   onLoad(options) {
     if (options.title) {
       this.title = options.title
+    } else {
+      this.title = "填报"
     }
     if (options.redirect) {
-      this.title = options.redirect
+      this.redirect = options.redirect
+    } else {
+      this.redirect = '/pages/index/index'
     }
   }
 }
@@ -48,6 +71,28 @@ export default {
     align-items: center;
     justify-content: center;
   }
+
+  .wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;;
+    z-index: 4;
+
+    .text {
+      font-size: 36rpx;
+      line-height: 66rpx;
+      text-transform: uppercase;
+      color: #333333;
+      text-align: center;
+      margin-top: 10.5vh;
+
+      & > view:nth-child(2) {
+        font-size: 28rpx;
+      }
+    }
+  }
 }
 .bkg {
   position: fixed;
diff --git a/package_sub/pages/IndependentRecruitment/IndependentRecruitment.vue b/package_sub/pages/IndependentRecruitment/IndependentRecruitment.vue
index 6453912..7916e95 100644
--- a/package_sub/pages/IndependentRecruitment/IndependentRecruitment.vue
+++ b/package_sub/pages/IndependentRecruitment/IndependentRecruitment.vue
@@ -359,7 +359,6 @@ export default {
           this.step = this.step - 1
         }
       }
-      this.setTitle()
     },
     async getArea() {
       try {
@@ -372,7 +371,12 @@ export default {
     async submit() {
       try {
         const res = await this.$u.api.independentRecruitmentsSubmit(this.form)
-        this.$u.toast("提交成功")
+        this.$u.route({
+          url: '/package_sub/pages/FormSuccess/FormSuccess',
+          params: {
+            title: "自主招生志愿填报"
+          }
+        })
       } catch (err) {
         console.error(err)
       }
@@ -388,6 +392,11 @@ export default {
       return this.areaList?.find(i => i.id === this.form.area_id)?.name
     }
   },
+  watch: {
+    step(newVal) {
+      this.setTitle()
+    }
+  },
   onShow() {
     this.setTitle()
   },
diff --git a/pages.json b/pages.json
index e049d80..73b2b84 100644
--- a/pages.json
+++ b/pages.json
@@ -95,6 +95,13 @@
             "navigationBarTitleText": "提交成功",
             "enablePullDownRefresh": true
           }
+        },
+        {
+          "path": "pages/BatchForm/BatchForm",
+          "style": {
+            "navigationBarTitleText": "志愿填报",
+            "enablePullDownRefresh": false
+          }
         }
       ]
     }
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4df43b3..ef59a05 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -11,7 +11,7 @@
           <view class="grid-item__name">智能推荐</view>
           <view class="grid-item__subname">冲、稳、保学校</view>
         </view>
-        <view class="grid2 grid-item">
+        <view class="grid2 grid-item" @click="$u.route({ url: '/package_sub/pages/BatchForm/BatchForm' })">
           <image class="grid-item__icon" src="~@/static/index/monitianbao.png" mode="aspectFit"></image>
           <view class="grid-item__name">苏州中考志愿<br>模拟填报</view>
         </view>