syy

pages/zhenggaijindu/zhenggaijindu.js

@@ -58,7 +58,9 @@ Page({
         end: '#fff',
         icon: '../../img/process_1.png'
       }
-    ]
+    ],
+     // 期限按钮
+    buttons: [{ id: 1, name: "一天" }, { id: 2, name: "两天" }, { id: 3, name:"三天" }]
 
   },
   //进度条的状态
@@ -88,4 +90,50 @@ Page({
       processData: processArr
     })
   },
+
+  // 期限按钮
+  onLoad: function (options) {
+    this.data.buttons[0].checked = true;
+    this.setData({
+      buttons: this.data.buttons,
+    })
+  },
+  radioButtonTap: function (e) {
+    console.log(e)
+    let id = e.currentTarget.dataset.id
+    console.log(id)
+    for (let i = 0; i < this.data.buttons.length; i++) {
+      if (this.data.buttons[i].id == id) {
+        //当前点击的位置为true即选中
+        this.data.buttons[i].checked = true;
+      }
+      else {
+        //其他的位置为false
+        this.data.buttons[i].checked = false;
+      }
+    }
+    this.setData({
+      buttons: this.data.buttons,
+      msg: "id:"+id
+    })
+  },
+  checkButtonTap:function(e){
+    console.log(e)
+    let id = e.currentTarget.dataset.id
+    console.log(id)
+    for (let i = 0; i < this.data.buttons.length; i++) {
+      if (this.data.buttons[i].id == id) {
+        if (this.data.buttons[i].checked == true) {
+          this.data.buttons[i].checked = false;
+         
+        } else {
+          this.data.buttons[i].checked = true;
+          
+        }
+      }
+    }
+    
+  },
+
+
 })

pages/zhenggaijindu/zhenggaijindu.wxml

@@ -16,4 +16,15 @@
       </view>
     </view>
   </view>
+  <view class="btm_btn">
+    <view class="time_qx">
+      <text>期限：</text>
+      <view class="ttbtn">
+        <block wx:for="{{buttons}}" wx:key="buttons">
+  <button size="mini" class="{{item.checked?'checked_button':'normal_button'}}" data-id="{{item.id}}" bindtap="radioButtonTap">{{item.name}}</button>
+  </block>
+      </view>
+    </view>
+    <button type="primary" class="succ_btn">完成</button>
+  </view>
 </view>

pages/zhenggaijindu/zhenggaijindu.wxss

@@ -95,4 +95,52 @@ margin-top: 40rpx;
   display: flex;
   background: #ccc;
   margin-right: 30rpx;
+}
+
+.btm_btn{
+  display: flex;
+  flex-direction: row;
+  position: fixed;
+  width: 100%;
+  background-color: rgb(255, 255, 255);
+  bottom: 0px;
+  padding: 40rpx 20rpx;
+  left: 0;
+  border-top: 1px solid rgb(233, 233, 233);
+  box-shadow: 0px 0px 10px #ccc;
+}
+.btm_btn text{
+  font-size: 32rpx;
+  color: #444;
+}
+.time_qx{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ttbtn{
+  display: flex;
+  flex-direction: row;
+  
+}
+.ttbtn button{
+padding: 0rpx 30rpx!important;
+font-size: 28rpx!important;
+border-radius: 100rpx!important;
+margin-right: 16rpx;
+font-weight: normal!important;
+border: 1px solid rgb(209, 209, 209);
+}
+.checked_button{
+  background: rgb(248, 89, 41);
+  border: 1px solid #fff!important;
+  color: #fff;
+}
+.normal_button{
+  background: rgb(250, 250, 250);
+}
+.succ_btn{
+  width: auto!important;
+padding: 10rpx 26px!important;
+font-size: 28rpx!important;
 }