From 9b3adad20e65a539438976c00429c20d8bb4ef7c Mon Sep 17 00:00:00 2001
From: jarvis <2221237281@qq.com>
Date: Sun, 17 Oct 2021 18:37:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E5=91=98=E6=8A=A5=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 74 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 54 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 3bab621..402f783 100644
--- a/index.html
+++ b/index.html
@@ -71,7 +71,7 @@
                     </div>
                     <div class="flex justify-between items-center h-12 pl-8 pr-8">
                       <label class="text-sm text-gray-400" border-b>身份</label>
-                      <div class="flex flex-nowrap rounded-md startBtnBox">
+                      <div class="flex flex-nowrap rounded-md startBtnBox" onclick="show()">
                         <div class="startBtn text-sm">跳绳爱好者</div>
                         <div class="flex flex-nowrap ml-4">
                           <img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
@@ -94,7 +94,7 @@
                   <div class="bg-white pl-4 pr-4">
                     <div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
                       <label class="text-sm text-gray-400">培训目标<span class="text-red-500 ml-1 align-middle">*</span></label>
-                      <div class="flex flex-nowrap rounded-md startBtnBox">
+                      <div class="flex flex-nowrap rounded-md startBtnBox" onclick="show()">
                         <div class="startBtn text-sm">裁判员</div>
                         <div class="flex flex-nowrap ml-4">
                           <img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
@@ -103,7 +103,7 @@
                     </div>
                     <div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
                       <label class="text-sm text-gray-400">培训项目<span class="text-red-500 ml-1 align-middle">*</span></label>
-                      <div class="flex flex-nowrap rounded-md startBtnBox">
+                      <div class="flex flex-nowrap rounded-md startBtnBox" onclick="show()">
                         <div class="startBtn text-sm text-gray-400">请选择培训项目</div>
                         <div class="flex flex-nowrap ml-4">
                           <img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
@@ -111,27 +111,20 @@
                       </div>
                     </div>
                   </div>
-                  <!-- <div class="bg-white pl-4 pr-4">
-                    <div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
-                      <label class="text-sm text-gray-400">选择支付方式</label>
-                      <div class="flex flex-nowrap rounded-md startBtnBox">
-                        <div class="flex flex-nowrap ml-4" onclick="p1432643387798069248.jumpDetails(this)">
-                          <img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
-                        </div>
-                      </div>
-                    </div>
-                    <div class="paymentDocument pl-8">
-                      <p class="text-sm text-gray-400">上传支付凭证（仅支持jpg格式）</p>
-                      <div class="uploadJpg bg-gray-100 border-dashed border-gray-900">
-
-                      </div>
-                    </div>
-                  </div> -->
                   <div class="apply pl-8 pr-8">
                     <button class="bg-blue-500 text-white text-base apply-btn" onclick="immediatelyApply()">立即报名</button>
                   </div>
                 </form>
-
+                <div class="w-screen h-screen fixed z-10 statusChoose bg-black bg-opacity-50" style="display:none;top: 0;left: 0;">
+                  <div class="flex flex-col absolute w-full bg-white" style="bottom: 0;">
+                    <div class="flex flex-row justify-between px-5 py-4">
+                      <span class="text-gray-400" onclick="hide()">取消</span>
+                      <span class="text-blue-500" onclick="choose()">确定</span>
+                    </div>
+                    <div class="bg-gray-200" style="width:100%;height: 1px"></div>
+                    <ul class="flex flex-col text-center" style="height: 240px;overflow-y: auto;"></ul>
+                  </div>
+                </div>
               </div>
             </div>
 
@@ -337,6 +330,32 @@
               //     var ul = this.dom.querySelector('ul');
               //     ul.innerHTML = list
               //   },
+              function show(){
+                  var statusChoose = document.querySelector('.statusChoose');
+                  statusChoose.style.display='block';
+                  var list = ''
+                  for (let i=0;i < this.lists.length; i++) {
+                      list += `<li class="py-3" onclick="p1432643387798069248.chooseItem(${i})">` + this.lists[i].name + '</li>';
+                  }
+                  var ul = this.dom.querySelector('ul');
+                  ul.innerHTML = list
+                }
+
+              //   // 选择
+                function chooseItem(index){
+                  this.currentIndex = index;
+                  var lis = this.dom.querySelectorAll('li');
+                  for (var i = 0; i < lis.length; i++){
+                    var item = lis[i];
+                    if(i === index){
+                      item.classList.add('text-white');
+                      item.style.backgroundColor = '#3b82f6';
+                    }else{
+                      item.classList.remove('text-white');
+                      item.style.backgroundColor = '#fff';
+                    }
+                  }
+                }
 
               //   // 选择
               //   chooseItem(index){
@@ -368,6 +387,21 @@
               //     that.checkerId = that.lists[that.currentIndex].memberId
               //     that.hide()
               //   },
+              function choose(){
+                  // const that = this;
+                  // const { dom } = that;
+                  // var startBtn = document.querySelector('.startBtn');
+                  // startBtn.innerHTML = that.lists[that.currentIndex].name;
+                  // that.checkerId = that.lists[that.currentIndex].memberId
+                  // that.hide()
+                  var statusChoose = document.querySelector('.statusChoose');
+                  statusChoose.style.display='none';
+                }
+              // 取消
+              function hide(){
+                  var statusChoose = document.querySelector('.statusChoose');
+                  statusChoose.style.display='none';
+                }
 
               //   // 界面渲染 0未打卡,1已打卡,2驳回,3审核通过
               //   setDate(morning,morningStatus,night,nightStatus) {