feat:17届大赛

package-lock.json

@@ -2512,6 +2512,11 @@
       "integrity": "sha1-yz+fdBhp4gzOMw/765JxWQSDiC0=",
       "dev": true
     },
+    "@vant/area-data": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.2.3.tgz",
+      "integrity": "sha512-9bDgEsFnTjdaYXPvsYKRQmxzKDdLCl0c1dOo4JGE6RhaIcq2kR2f5cK0LUdGK+U/SuBz9NfW5ejL1lejcFiP1Q=="
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz",

package.json

@@ -52,6 +52,7 @@
     "@dcloudio/uni-quickapp-native": "^2.0.0-28320200727001",
     "@dcloudio/uni-quickapp-webview": "^2.0.0-28320200727001",
     "@dcloudio/uni-stat": "^2.0.0-28320200727001",
+    "@vant/area-data": "^1.2.3",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
     "flyio": "^0.6.2",

src/pages.json

@@ -139,6 +139,40 @@
 				"navigationStyle": "custom",
 				"disableScroll": true 
 			}
+		},
+		{
+			"path": "pages/competitionRegister/index",
+			"style": {
+				"navigationBarTitleText": "海选报名"
+			}
+		},
+		{
+			"path": "pages/competitionRegister/collectInformation",
+			"style": {
+				"navigationBarTitleText": "海选报名",
+				"usingComponents": {
+					"van-checkbox": "/wxcomponents/checkbox/index",
+					"van-checkbox-group": "/wxcomponents/checkbox-group/index"
+				}
+			}
+		},
+		{
+			"path": "pages/competition/myRegister",
+			"style": {
+				"navigationBarTitleText": "我的报名"
+			}
+		},
+		{
+			"path": "pages/competitionRegister/addSchool",
+			"style": {
+				"navigationBarTitleText": "添加参赛园所"
+			}
+		},
+		{
+			"path": "pages/competitionRegister/schoolInformation",
+			"style": {
+				"navigationBarTitleText": "参加园所信息"
+			}
 		}
 	],
 	"globalStyle": {
@@ -146,14 +180,17 @@
 		"navigationBarTitleText": "代理商",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8",
-	
 		"usingComponents": {
 			"van-icon": "/wxcomponents/icon/index",
 			"van-grid": "/wxcomponents/grid/index",
 			"van-grid-item": "/wxcomponents/grid-item/index",
 			"van-toast": "/wxcomponents/toast/index",
 			"van-field": "/wxcomponents/field/index",
-			"van-overlay": "/wxcomponents/overlay/index"
+			"van-overlay": "/wxcomponents/overlay/index",
+			"van-action-sheet": "/wxcomponents/action-sheet/index",
+			"van-area": "/wxcomponents/area/index",
+			"van-tab": "/wxcomponents/tab/index",
+			"van-tabs": "/wxcomponents/tabs/index"
 		}
 	},
 	"tabBar": {

src/pages/competition/apply.vue

@@ -1,46 +1,63 @@
 <template>
   <view class="competition-apply">
-    <div class="competition-title">
-      <image
-        class="apply-title"
-        mode='aspectFill'
-        :src="require('@/static/activity/apply-title.png')"
-      />
-      <div class="competition-title-text" >
-        <!-- {{name}} -->
-        第17届逻辑狗大赛
-      </div>
-    </div>
-    
-    <view class="competition-list" >
-      <!-- 地区 -->
-      <view
-        class="region"
-        v-for="(item, index) in competitionList"
-        :key="item.id"
+
+    <view class="tabs" >
+      <van-tabs 
+        class="van-tabs" 
+        color="#fff" 
+        :active="tabsActive" 
+        @change="onChangeTabs"
+        title-active-color="#fff"
+        title-inactive-color="rgba(255, 255, 255, 0.5)"
       >
-        <image
-          class="apply1" 
-          :src="require(`@/static/activity/apply${index + 1}.png`)"
-        />
-          <view class="label region-label" >{{item.name}}</view>
-          <view class="date region-date" >{{item.startTime | filterStartTime}}</view>
-          <view
-            :class="[formatDate(item.startTime, item.endTime) ?  'select-button' : 'unselect-button', 'region-button']"
-            :style="{top:  formatDate(item.startTime, item.endTime) ?  '228rpx' : '236rpx'}"
-            @click="goApplySchoolPage(item, index)"
-          >
-            <image 
-              :class="[formatDate(item.startTime, item.endTime) ?  'select-button' : 'unselect-button']" 
-              :src="require(`@/static/activity/${formatDate(item.startTime, item.endTime) ? 'select-button' : 'button'}.png`)"
-              
-            />
-            <text class="button-text" >
-              {{ index + 1 | filterButton }}
-            </text>
-          </view>
-      </view>
+        <van-tab title="活动列表">
+          
+            <view class="competition-title">
+              <image
+                class="apply-title"
+                mode='aspectFill'
+                :src="require('@/static/activity/apply-title.png')"
+              />
+              <view class="competition-title-text" >
+                第17届逻辑狗大赛
+              </view>
+            </view>
+            
+            <view class="competition-list" >
+              <!-- 地区 -->
+              <view
+                class="region"
+                v-for="(item, index) in competitionList"
+                :key="item.id"
+              >
+                <image
+                  class="apply1"
+                  :src="require(`@/static/activity/apply${index + 1}.png`)"
+                />
+                  <view class="label region-label" >{{item.name}}</view>
+                  <view class="date region-date" >{{item.startTime | filterStartTime}}</view>
+                  <view
+                    :class="[formatDate(item.startTime, item.endTime) ?  'select-button' : 'unselect-button', 'region-button']"
+                    :style="{top:  formatDate(item.startTime, item.endTime) ?  '228rpx' : '236rpx'}"
+                    @click="goApplySchoolPage(item, index)"
+                  >
+                    <image 
+                      :class="[formatDate(item.startTime, item.endTime) ?  'select-button' : 'unselect-button']" 
+                      :src="require(`@/static/activity/${formatDate(item.startTime, item.endTime) ? 'select-button' : 'button'}.png`)"
+                    />
+                    <text class="button-text" >
+                      {{ index + 1 | filterButton }}
+                    </text>
+                  </view>
+              </view>
+            </view>
+        </van-tab>
+        <van-tab title="我的报名">
+          <my-register-list /> 
+        </van-tab>
+      </van-tabs>
     </view>
+
     <van-toast id="van-toast" />
   </view>
 </template>
@@ -50,8 +67,12 @@ import { getCompetitionList, getCompetitionId } from '@/api/competition'
 // import Toast from 'path/to/@vant/weapp/dist/toast/toast';
 import Toast from '@/wxcomponents/toast/toast';
 import dayjs from 'dayjs'
+import  MyRegisterList from './components/myRegisterList.vue'
 export default {
   name: 'competition-apply',
+  components: {
+    MyRegisterList
+  },
   filters: {
     filterStartTime (records) {
       const [ dayStr ] = records.split(' ')
@@ -79,12 +100,16 @@ export default {
   },
   data () {
     return {
+      tabsActive: 0,
       competitionList: [],
       name: '',
       competitionId: ''
     }
   },
   methods: {
+    onChangeTabs (e) {
+      console.log(e);
+    },
     // 解析对比时间
     formatDate (startStr, endStr) {
       return dayjs().isBefore(dayjs(endStr)) && dayjs().isAfter(dayjs(startStr))
@@ -265,4 +290,13 @@ export default {
   }
 
 }
+
+
+/deep/ .van-tabs__scroll {
+  background-color: transparent
+}
+
+/deep/ .van-tabs {
+  background-color: transparent !important;
+}
 </style>

src/pages/competition/components/myRegisterList.vue

@@ -0,0 +1,26 @@
+<template>
+  <view class="my-register" >
+    <view class="my-register-item" >
+
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'my-register'
+}
+</script>
+
+<style lang="less" scoped>
+.my-register {
+  .my-register-item {
+    width: 686rpx;
+    height: 352rpx;
+    background: #FFFFFF;
+    border-radius: 20rpx;
+  }
+}
+</style>
+
+

src/pages/competition/myRegister.vue

@@ -0,0 +1,201 @@
+<template>
+  <view class="my-register" >
+    <view class="competiton-title" >
+      <image class="competiton-title-image"  :src="staticImg.competitionTitle" />
+    </view>
+
+    <view class="informtion-list" >
+      <view class="area-information" >
+        <view class="informtion-title" >
+          地区负责人信息
+        </view>
+        <view class="informtion-card" >
+          <view class="informtion-card-item" >
+            <view class="informtion-card-label" >承办人地址</view>
+            <view class="informtion-card-content" >2022/3/4</view>
+          </view>
+          <view class="informtion-card-item" > 
+            <view class="informtion-card-label" >详细地址</view>
+            <view class="informtion-card-content" >北京市朝阳区高碑店西店记忆中德智慧教育6102室</view>
+          </view>
+          <view class="informtion-card-item" >
+            <view class="informtion-card-label" >承办单位</view>
+            <view class="informtion-card-content" >北京欧若拉公司</view>
+          </view>
+          <view class="informtion-card-item" >
+            <view class="informtion-card-label" >承办人</view>
+            <view class="informtion-card-content" >张丽丽</view>
+          </view>
+        </view>
+      </view>
+      <view class="school-infomation" >
+        <view class="informtion-title" >
+          参赛园所信息
+        </view>
+        <view class="school-button" >
+          参赛园所 <text>(33)</text> >
+        </view>
+      </view>
+
+      <view class="pre-matrial-package"  >
+        <view class="informtion-title" >
+          预定材料包数量
+        </view>
+        <view class="informtion-card">
+          <view 
+            class="pre-matrial-package-item" 
+            v-for="item in 3" 
+            :key="item"
+          >
+            <view class="pre-matrial-package-item-label">
+              赛事标准物料包<text>（小班）</text>
+            </view>
+            <view class="pre-matrial-package-item-content" >1000套</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+
+const staticImg = {
+  competitionTitle: require('@/static/competitionRegister/common/competition-title.png')
+}
+
+export default {
+  name: 'my-register',
+  data () {
+    return {
+      staticImg
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.my-register {
+  width: 100%;
+  min-height: 100vh;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding-top: 62rpx;
+  padding-bottom: 250rpx;
+  .competiton-title {
+    width: 552rpx;
+    height: 52rpx;
+    margin-bottom: 10rpx;
+    margin: 0 auto;
+    .competiton-title-image {
+      width: 552rpx;
+      height: 52rpx;
+    }
+  }
+  .informtion-list {
+    .area-information {
+    }  
+    .informtion-card {
+      width: 686rpx;
+      background: #FFFFFF;
+      box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
+      border-radius: 20rpx;
+      padding: 40rpx 30rpx;
+      box-sizing: border-box;
+      .informtion-card-item:first-child {
+        margin-top: 0;
+      }
+      .informtion-card-item {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 28rpx;
+        .informtion-card-label {
+          width: 150rpx;
+          font-size: 30rpx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #777777;
+        }
+        .informtion-card-content {
+          width: 424rpx;
+          font-size: 30rpx;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #353535;
+        } 
+        }
+    }
+
+    .school-infomation {
+      .school-button {
+        width: 686rpx;
+        height: 108rpx;
+        background: #FFFFFF;
+        box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
+        border-radius: 20rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 34rpx;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #4679FF;
+        text {
+          margin: 0 20rpx;
+        }
+      }
+    }
+
+    .pre-matrial-package {
+
+      .informtion-title {
+
+      }
+
+      .pre-matrial-package-item:first-child {
+        margin-top: 0;
+      }
+
+      .pre-matrial-package-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 40rpx;
+        .pre-matrial-package-item-label {
+          font-size: 28rpx;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #666666;
+          text {
+            font-size: 28rpx;
+            font-family: DINAlternate-Bold, DINAlternate;
+            font-weight: bold;
+            color: #4679FF;
+          }
+        }
+        .pre-matrial-package-item-content {
+          font-size: 30rpx;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #4679FF;
+        }
+      }
+
+    }
+
+ 
+    .informtion-title {
+      font-size: 44rpx;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      margin-top: 48rpx;
+      margin-bottom: 40rpx;
+    }
+  }
+}
+</style>
+
+

src/pages/competitionRegister/addSchool.vue

@@ -0,0 +1,273 @@
+<template>
+  <view class="add-school" >
+    <view
+      class="school-card-list"
+    > 
+      <view
+        class="school-card"
+        v-for="item in schoolList"
+        :key="item.index"
+      >
+        <view
+          class="card-header"
+          v-if="isEdit"
+          :style="{marginTop: isEdit ? '-40rpx' : '0'}"
+        >
+          <image class="delete-icon" :src="staticImg.deleteIcon" />
+        </view>
+        <view class="school-information" >
+          <view class="school-information-item" >
+            <view class="school-label" >参赛园所名称</view>
+            <view class="school-content" >
+              <view v-if="!isEdit" class="school-content-input" >{{item.schoolName}}</view>
+              <input
+                v-else
+                class="school-content-input"
+                placeholder="请选择/输入园所名称"
+                :placeholder-style="placeholderStyle"
+                :value="item.schoolName"
+                @input="changeForm($event, item.index, 'schoolName')"
+              />
+              <image
+                class="close-icon"
+                :src="staticImg.closeIcon"
+                v-if="item.schoolName && isEdit"
+                @click="restForm( item.index, 'schoolName')"
+              />
+              <van-icon v-if="!item.schoolName && isEdit" color="#999999" name="arrow-down" />
+            </view>
+          </view>
+          <view class="school-information-item">
+            <view class="school-label" >初赛人数预估</view>
+            <view class="school-content">
+              <view v-if="!isEdit" class="school-content-input" >{{item.numberPeople}}</view>
+              <input
+                v-else
+                class="school-content-input"
+                placeholder="请输入参赛人员数"
+                :placeholder-style="placeholderStyle"
+                :value="item.numberPeople"
+                @input="changeForm($event, item.index, 'numberPeople')"
+              />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="add-school-button"  v-if="isEdit" @click="addSchool" >
+      <view class="school-add-button" >
+        <image class="plus-icon" :src="staticImg.plusIcon" />
+        <text>添加参赛园所</text>
+        <van-icon color="#4679FF" name="arrow" />
+      </view>
+    </view>
+
+    <!-- 编辑与保存按钮 -->
+    <view class="opration-buttons" >
+      <view class="cancel-button" @click="cancelOpration" >取消</view>
+      <view 
+        :class="['opration-button', isEdit ? 'bg-b' : 'bg-r']"
+        @click="changeOprationState"
+      > 
+        {{ isEdit ? '保存' : '编辑'}} 
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+const staticImg = {
+  closeIcon: require('@/static/competitionRegister/common/close-icon.png'),
+  deleteIcon: require('@/static/competitionRegister/common/delete-icon.png'),
+  plusIcon: require('@/static/competitionRegister/common/plus-icon.png')
+}
+export default {
+  name: 'add-school',
+  computed: {
+    placeholderStyle () {
+      return `font-size: 30rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #D1D1D1;`
+    }
+  },
+  data () {
+    return {
+      staticImg,
+      isEdit: false, //是否是编辑状态
+      schoolList: [],
+      form: {
+        schoolName: '',
+        numberPeople: ''
+      }
+    }
+  },
+  methods: {
+    cancelOpration () {
+      this.isEdit = false
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+    changeOprationState () {
+      this.isEdit = !this.isEdit
+    },
+    addSchool () {
+      this.schoolList.push( JSON.parse(JSON.stringify({
+        ...this.form,
+        index: this.schoolList.length 
+      })) )
+    },
+    restForm (index, key) {
+      this.schoolList[index][key] = ''
+    },
+    changeForm (e, index, key) {
+      console.log(e, index, key);
+      const value = e.detail.value
+      this.schoolList[index][key] = value
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.add-school {
+  padding-top: 48rpx;
+  box-sizing: border-box;
+  padding-bottom: 1000rpx;
+  .school-card-list {
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    .school-card {
+      width: 686rpx;
+      background: #FFFFFF;
+      box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
+      border-radius: 20rpx;
+      margin-bottom: 48rpx;
+      box-sizing: border-box;
+      padding: 40rpx 32rpx;
+      .card-header {
+        width: 100%;
+        height: 68rpx;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        border-bottom: 2px solid #EEE;
+        .delete-icon {
+          width: 24rpx;
+          height: 24rpx; 
+        }
+      }
+      .school-information {
+        padding-top: 24rpx;
+        .school-information-item:last-child {
+          margin-bottom: 0;
+        }
+
+        .school-information-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 24rpx;
+          .school-label {
+            font-size: 30rpx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #777777;
+          }
+          .school-content {
+            width: 393rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .school-content-input {
+              width: 286rpx;
+              text-align: left;
+            }
+            .close-icon {
+              width: 26rpx;
+              height: 28rpx;
+              display: block;
+            }
+          }
+          
+        }
+      }
+    }
+  }
+
+  .add-school-button {
+      .school-add-button {
+        width: 686rpx;
+        height: 108rpx;
+        border-radius: 20rpx;
+        border: 4rpx dashed rgba(0, 91, 255, 0.3);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 auto;
+        .plus-icon {
+          width: 42rpx;
+          height: 40rpx;
+        }
+        text {
+          font-size: 34rpx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #4679FF;
+          margin-left: 20rpx;
+          margin-right: 12rpx;
+        }
+      }
+  }
+
+  .opration-buttons {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    bottom: 120rpx;
+    padding: 0 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    .cancel-button {
+      width: 318rpx;
+      height: 90rpx;
+      border-radius: 84rpx;
+      border: 2rpx solid #B4B4B4;
+      background-color: #FBFCFE;;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 32rpx;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #999999;
+    } 
+
+    .opration-button {
+      width: 318rpx;
+      height: 90rpx;
+      border-radius: 84rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 32rpx;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+    }
+
+    .bg-b {
+      background: #507BFC;
+    }
+
+    .bg-r {
+      background: #FF7E8A;
+    }
+
+  }
+}
+</style>

src/pages/competitionRegister/collectInformation.vue

@@ -0,0 +1,381 @@
+<template>
+  <view class="collect-information" >
+    
+    <step-register />
+
+    <!-- 地区负责人信息 （づ￣3￣）づ╭～ -->
+    <view class="area-principal-information" >
+      <view class="information-title" >
+        地区负责人信息（承办人）
+      </view>
+      <view class="information-form" >
+        <view class="information-form-item" >
+          <view class="information-form-label" >承办地区</view>
+          <view class="information-form-filed">
+            <view class="filed-input-view" 
+              @click="selectArea"
+            >
+              <text
+                :class="[form.address.startsWith('请')? `placeholder-class` : 'select-after-text text-Ellipsis']"
+                style="width: 438rpx"
+              >
+                {{form.address}}
+              </text>
+              <van-icon name="arrow-down" />
+            </view>
+          </view>
+        </view>
+        <view class="information-form-item" >
+          <view class="information-form-label" >详细地址 </view>
+          <view class="information-form-filed" >
+            <input
+              class="filed-input" 
+              placeholder="选填"
+              placeholder-class="placeholder-class"
+              :value="form.detailAddress"
+              @input="(e) => changeForm(e, 'detailAddress')"
+            />
+            <image
+              class="close-icon" 
+              :src="staticImg.closeIcon"
+              v-if="form.detailAddress"
+              @click="clearFormItem('detailAddress')"
+            />
+          </view>
+        </view>
+        <view class="information-form-item" >
+          <view class="information-form-label" >承办单位</view>
+          <view class="information-form-filed" >
+            <input 
+              class="filed-input" 
+              placeholder="请输入承办单位" 
+              placeholder-class="placeholder-class"
+              :value="form.organizer"
+              @input="(e) => changeForm(e, 'organizer')"
+            />
+            <image
+              class="close-icon" 
+              :src="staticImg.closeIcon"
+              v-if="form.organizer"
+              @click="clearFormItem('organizer')" 
+            />
+          </view>
+        </view>
+        <view class="information-form-item" >
+          <view class="information-form-label" >承办人</view>
+          <view class="information-form-filed" >
+            <input 
+              class="filed-input" 
+              placeholder="请输入承办人姓名" 
+              placeholder-class="placeholder-class"
+              :value="form.undertaker"
+              @input="(e) => changeForm(e, 'undertaker')" 
+            />
+             <image
+              class="close-icon" 
+              :src="staticImg.closeIcon"
+              v-if="form.undertaker"
+              @click="clearFormItem('undertaker')" 
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 参赛园所信息 -->
+    <view class="school-information" >
+      <view class="information-title" >
+        参赛园所信息
+      </view>
+      <view class="school-add-area" >
+        <view class="school-add-button" >
+          <image class="plus-icon" :src="staticImg.plusIcon" />
+          <text>添加参赛园所</text>
+          <van-icon color="#4679FF" name="arrow" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 预定物料包数量 -->
+    <view class="pre-material-package" >
+      <view class="information-title pre-material-package-title" >
+        预定物料包数量 <view class="tip" >（50套起订） </view>
+      </view>
+      <view class="material-package-information" >
+        <view 
+          class="material-package-item" 
+          v-for="material in form.materialList" 
+          :key="material.name"
+        >
+          <view class="material-package-item-label">
+            <van-checkbox :value="true" shape="square" @change="onChange">
+              <view class="material-package-item-label-left" >
+                <view class="label-prefix" >赛事标准物料包</view><view class="clazz" >({{material.name}})</view>
+              </view>
+            </van-checkbox>
+          </view>
+          <view class="material-count" >
+            <input class="material-input" type="number" :min="50" :value="material.count" /> 套
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <step-tabbar />
+
+    <!-- 地区选择 -->
+    <van-action-sheet
+     class="area-picker"
+     :show="showAreaPicker"
+     @click-overlay="showAreaPicker = false"
+    >
+      <van-area 
+        :area-list="areaList"
+        @confirm="confirmArea"
+        @cancel="cancelArea"
+      />
+    </van-action-sheet>
+
+  </view> 
+</template>
+
+<script>
+import StepRegister from './component/step-register.vue'
+import StepTabbar from './component/step-tabbar.vue'
+import { areaList } from '@vant/area-data'
+
+const staticImg = {
+  closeIcon: require('@/static/competitionRegister/common/close-icon.png'),
+  plusIcon: require('@/static/competitionRegister/common/plus-icon.png')
+}
+
+export default {
+  name: 'collect-information', 
+  components: {
+    StepRegister,
+    StepTabbar
+  },
+  computed: {
+  },
+  data () {
+    return {
+      showAreaPicker: false,
+      staticImg,
+      areaList: Object.freeze(areaList),
+      form: {
+        address: '请选择所在地区',
+        detailAddress: '',
+        organizer: '',
+        undertaker: '',
+        materialList: [
+          {name: "小班", count: 50},
+          {name: "中班", count: 50},
+          {name: "大班", count: 50},
+        ]
+      }
+    }
+  },
+  created () {
+  },
+  methods: {
+    clearFormItem (key) {
+      this.form[key] = ''
+    },
+    changeForm (e, key) {
+      console.log(e, key);
+      const value = e.detail.value
+      this.form[key] = value
+    },
+    cancelArea () {
+      this.showAreaPicker = false
+    },
+    
+    confirmArea (e) {
+      const { values, code } = e.detail
+      this.form.address = values.map( item => item.name ).join('')
+      this.showAreaPicker = false
+    },
+    selectArea () {
+      this.showAreaPicker = !this.showAreaPicker
+    }
+
+  }
+}
+</script>
+
+<style lang="less">
+@import '@/utils/utils.less';
+
+.collect-information {
+  padding-bottom: 200rpx;
+  .area-principal-information {
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    margin-top: 50rpx;
+    .information-form {
+      .information-form-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 28rpx;
+        .information-form-label {
+          font-size: 30rpx;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #666666;
+        }
+        .information-form-filed {
+            width: 530rpx;
+            height: 88rpx;
+            background: #FFFFFF;
+            box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
+            border-radius: 20rpx;
+            padding-left: 32rpx;
+            padding-right: 32rpx;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          .filed-input-view {
+            height: 88rpx;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-right: 28rpx;
+            box-sizing: border-box;
+          }
+          .filed-input {
+            width: 408rpx;
+            height: 88rpx;
+          }
+          .close-icon {
+            width: 26rpx;
+            height: 28rpx;
+            display: block;
+          }
+          .placeholder-class {
+            font-size: 30rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #D1D1D1;
+          }
+          .select-after-text {
+            font-size: 30rpx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+          }
+        }
+      }
+    }
+  }
+
+  .school-information {
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    margin-top: 60rpx;
+    .school-add-area {
+      .school-add-button {
+        width: 686rpx;
+        height: 108rpx;
+        border-radius: 20rpx;
+        border: 4rpx dashed rgba(0, 91, 255, 0.3);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .plus-icon {
+          width: 42rpx;
+          height: 40rpx;
+        }
+        text {
+          font-size: 34rpx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #4679FF;
+          margin-left: 20rpx;
+          margin-right: 12rpx;
+        }
+      }
+    }
+  }
+
+  .pre-material-package {
+    
+    margin-top: 60rpx;
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    .pre-material-package-title {
+      width: 100%;
+      height: 56rpx;
+      display: flex;
+      align-items: center;
+      .tip {
+        font-size: 30rpx;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #FE6573;
+      }
+    }
+    .material-package-information {
+      width: 686rpx;
+      height: 300rpx;
+      background: #FFFFFF;
+      box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
+      border-radius: 20rpx;
+      padding: 34rpx 30rpx;
+      box-sizing: border-box;
+      .material-package-item  {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20rpx;
+        .material-package-item-label {
+          display: flex;
+          .material-package-item-label-left {
+            display: flex;
+            font-size: 28rpx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #666666;
+            .label-prefix {
+              color: #666;
+              margin-right: 10rpx;
+            }
+            .clazz {
+              color: #5F87F0;
+            }
+          }
+        }
+        .material-count {
+          display: flex;
+          align-items: center;
+          .material-input {
+            width: 120rpx;
+            height: 64rpx;
+            border-radius: 10rpx;
+            border: 2rpx solid #E3E3E3;
+            margin-right: 14rpx;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+
+  .information-title {
+      font-size: 44rpx;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      margin-bottom: 40rpx;
+  }
+
+  .area-picker {
+      width: 100vw;
+  }
+
+}
+</style>
+
+

src/pages/competitionRegister/component/step-register.vue

@@ -0,0 +1,134 @@
+<template>
+  <view class="step-register" >
+    <image class="competition-title" :src="staticImg.competitionTitle" />
+    <view  class="step-line" >
+
+      <view class="dashed-line-list" >
+        <view class="dashed-line" style="width: 172rpx" />
+        <view class="dashed-line" style="width: 234rpx" />
+        <view class="dashed-line" style="width: 172rpx" />
+      </view>
+
+      <view class="step-title-list">
+        <view class="step-one" >
+          <view  class="red-circle">
+            <view class="red-dot" />
+          </view>
+          <view class="step-title" >1.签署纲领</view>
+        </view>
+        <view class="step-two" >
+          <view class="red-circle">
+            <view class="red-dot" />
+          </view>
+          <view class="step-title" >2.填写信息</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+const staticImg = {
+  competitionTitle: require('@/static/competitionRegister/common/competition-title.png')
+}
+
+export default {
+  name: 'step-register',
+  data () {
+    return {
+      staticImg
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.step-register {
+  width: 100vw;
+  height: 234rpx;
+  // padding: 42rpx 0rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .competition-title {
+    width: 552rpx;
+    height: 52rpx;
+  }
+  .step-line {
+    width: 100vw;
+    margin-top: 66rpx;
+    .dashed-line-list {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .dashed-line {
+        height: 4rpx;
+        background-image: linear-gradient(to right, red 0%, red 50%, transparent 0%);
+        background-size: 20rpx 1rpx;
+        background-repeat: repeat-x;
+      }
+    }
+    
+    .step-title-list {
+      width: 100vw;
+      position: relative;
+      margin: 0 auto;
+      font-size: 24rpx;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #FF6271;
+      .step-one {
+        width: 112rpx;
+        position: absolute;
+        left: 157rpx;
+        top: -20rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .step-title {
+        white-space:nowrap; 
+        overflow:hidden; 
+        text-overflow:ellipsis; 
+      }
+      .step-two {
+        position: absolute;
+        right: 160rpx;
+        top: -20rpx;
+        // width: 118rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .red-circle {
+          width: 36rpx;
+          height: 36rpx;
+          background: #FFFFFF;
+          border-radius: 50%;
+          border: 2rpx solid #FF7E8A;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-bottom: 10rpx;
+          .red-dot {
+            width: 24rpx;
+            height: 24rpx;
+            border-radius: 50%;
+            background: #FF7E8A;
+          }
+        }
+    }
+  }
+}
+</style>
+
+整个世界都在用
+炽热的永远
+宣称自己在爱上的笨拙
+

src/pages/competitionRegister/component/step-tabbar.vue

@@ -0,0 +1,111 @@
+<template>
+  <view class="step-tabbar">
+    <view class="total-statistics" >
+      <text v-show="!isStepOne" >
+        <view class="total-school" >
+          合计参赛园所: <text class="count" >0</text>
+        </view>
+        <view class="total-people" >
+          合计初赛人数预估: <text class="count" >0</text>
+        </view>
+      </text>
+    </view>
+    <view class="next-button" >
+      <image class="next-icon" :src="staticImg.backIconO"  />
+      <view :class="['button', isStepOne? 'bgc-0': 'bgc']" >
+        {{isStepOne ?  '下一步' : '提交' }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+const staticImg = {
+  backIconO: require('@/static/competitionRegister/common/back-icon-o.png')
+}
+
+export default {
+  name: 'step-tabbar',
+  props: {
+    isStepOne: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      staticImg
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.step-tabbar {
+  width: 750rpx;
+  height: 100rpx;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: calc(116rpx + constant(safe-area-inset-bottom));
+  height: calc(116rpx + env(safe-area-inset-bottom));
+  background: #FFFFFF;
+  box-shadow: 0rpx -14rpx 20rpx 0rpx rgba(152, 152, 152, 0.05);
+  border-radius: 40rpx 40rpx 0rpx 0rpx;
+  display: flex;
+  justify-content: space-between;
+  padding: 32rpx;
+  padding-bottom: 0rpx;
+  box-sizing: border-box;
+  .total-statistics {
+    font-size: 30rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    .total-school {
+
+    }
+    .total-people {
+
+    }
+    .count {
+      font-size: 30rpx;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #4E78FC;
+    }
+  }
+
+  .next-button {
+    display: flex;
+    .next-icon {
+      width: 84rpx;
+      height: 84rpx;
+    }
+    .button {
+      width: 220rpx;
+      height: 84rpx;
+      border-radius: 42rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 34rpx;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      margin-left: 20rpx;
+    }
+
+    .bgc-0 {
+      background: linear-gradient(130deg, #466EFC 0%, #84BDFC 100%);
+    }
+
+    .bgc {
+      background: linear-gradient(130deg, #466EFC 0%, #84BDFC 100%);
+      opacity: 0.4;
+    }
+  }
+}
+</style>
+

src/pages/competitionRegister/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <view class="competition-register">
+
+    <!-- 注册步骤条 -->
+    <step-register />
+
+    <view class="program-text" >
+      <view class="program-title" >
+        签署纲领
+      </view>
+      <view class="program-content" >
+        联系在线客服，下载第17届“逻辑狗杯”全国儿童思维魔法嘉年华《共同行动纲领》，在线下载-打印-签署、盖章-邮寄。
+      </view>
+    </view>
+
+    <!-- 邮寄地址 -->
+    <view class="express-adress" >
+      <view class="express-adress-header" >
+        <view class="express-adress-text" >邮寄地址</view>
+        <view class="copy-button" >
+          <image class="copy-icon" :src="staticImg.copyIcon" />
+          <view class="copy-text" >一键复制</view>
+        </view>
+      </view>
+      <view class="express-adress-content" >
+        <view class="express-adress-content-item">
+          <view class="title" >收件人：</view>
+          <view class="content" >第17届“逻辑狗杯”全国儿童思维魔法嘉年华组委会</view>
+        </view>
+        <view class="express-adress-content-item">
+          <view class="title" >联系电话：</view>
+          <view class="content" >17800151521</view>
+        </view>
+        <view class="express-adress-content-item">
+          <view class="title" >收货地址：</view>
+          <view class="content" >北京市朝阳区高碑店西店记忆中德智慧教育E6102室</view>
+        </view>
+      </view>
+    </view>
+    <view class="customer-service" >
+      在线领取
+    </view>
+
+    <step-tabbar 
+      isStepOne
+    />
+  </view>
+</template>
+
+<script>
+import StepRegister from "./component/step-register.vue"
+import StepTabbar from "./component/step-tabbar.vue";
+const staticImg = {
+  copyIcon: require('@/static/competitionRegister/index/copy-button.png')
+}
+export default {
+  name: 'competition-register',
+  components: {
+    StepRegister,
+    StepTabbar
+  },
+  data () {
+    return {
+      staticImg
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.competition-register {
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(251, 252, 254);
+  .program-text {
+    margin-top: 60rpx;
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    .program-title {
+      font-size: 44rpx;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+    }
+    .program-content {
+      width: 686rpx;
+      height: 144rpx;
+      font-size: 26rpx;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      margin-top: 40rpx;
+      line-height: 48rpx;
+    }
+  }
+
+  .express-adress {
+    width: 686rpx;
+    height: 450rpx;
+    background: #FFFFFF;
+    box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(226, 226, 226, 0.58);
+    border-radius: 20rpx;
+    margin: 0 auto;
+    margin-top: 36rpx;
+    padding: 36rpx 30rpx 40rpx 30rpx;
+    box-sizing: border-box;
+    .express-adress-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .express-adress-text {
+        font-size: 36rpx;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+      }
+      .copy-button {
+        display: flex;
+        align-items: center;
+        .copy-icon {
+          width: 36rpx;
+          height: 36rpx;
+          margin-right: 10rpx;
+        }
+        .copy-text {
+          font-size: 24rpx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #4C75FF;
+        }
+      }
+    }
+    .express-adress-content {
+      margin-top: 32rpx;
+      .express-adress-content-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 24rpx;
+        .title {
+          width: 150rpx;
+          font-size: 30rpx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+        }
+        .content {
+          width: 476rpx;
+          font-size: 30rpx;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333333;
+          line-height: 50rpx;
+        }
+      }
+    }
+  }
+
+  .customer-service {
+    margin: 0 auto;
+    margin-top: 64rpx;
+    width: 586rpx;
+    height: 88rpx;
+    background: #638AFD;
+    border-radius: 44rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 34rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+  }
+  
+}
+</style>  

src/pages/competitionRegister/readme.md

@@ -0,0 +1 @@
+### 第十七届赛事报名活动

src/pages/competitionRegister/schoolInformation.vue

@@ -0,0 +1,60 @@
+<template>
+  <view class="school-information">
+    <view class="school-information-list">
+      <view
+        class="school-information-item"
+        v-for="item in 10"
+        :key="item"
+      >
+        <view class="school-name" >北京市朝阳逻辑狗幼儿园  </view>
+        <view class="school-register-count" >初赛人数预估33人</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'school-information',
+  data () {
+    return {
+      schoolList: []
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.school-information {
+  .school-information-list {
+    width: 100%;
+    padding: 0 32rpx;
+    padding-bottom: 250rpx;
+    box-sizing: border-box;
+    overflow: hidden;
+    .school-information-item {
+      width: 686rpx;
+      height: 198rpx;
+      background: #FFFFFF;
+      box-shadow: 0rpx -4rpx 0rpx 0rpx #FF8E99, 0px 4px 28px 0px rgba(123, 123, 123, 0.14);
+      border-radius: 20rpx;
+      margin-top: 48rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .school-name {
+        font-size: 38rpx;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #333333;
+      }
+      .school-register-count {
+        margin-top: 12rpx;
+      }
+    }
+  }
+}
+</style>
+
+

src/wxcomponents/notify/index.vue

@@ -30,6 +30,7 @@ VantComponent({
     duration: {
       type: Number,
       value: 3000,
+      
     },
     zIndex: {
       type: Number,