yy

pages/zhenggaijindu/zhenggaijindu.js

@@ -21,6 +21,13 @@ Page({
     })
   },
 
+  bindPickerChange: function(e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      index: e.detail.value
+    })
+  },
+
   /**
    * 页面的初始数据
    */
@@ -59,9 +66,8 @@ Page({
         icon: '../../img/process_1.png'
       }
     ],
-     // 期限按钮
-    buttons: [{ id: 1, name: "一天" }, { id: 2, name: "两天" }, { id: 3, name:"三天" }]
-
+    array: ['1', '2', '3', '4', '5', '6', '7'],
+    index: 0,
   },
   //进度条的状态
   setPeocessIcon: function () {
@@ -91,49 +97,7 @@ Page({
     })
   },
 
-  // 期限按钮
-  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

@@ -18,13 +18,16 @@
   </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 class="section__title">期限：</view>
+        <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
+        <view class="picker">
+          <text>{{array[index]}}</text> 天
+        </view>
+  </picker>
       </view>
     </view>
-    <button type="primary" class="succ_btn">完成</button>
+    <button type="primary" class="succ_btn" size="mini">整改完成</button>
   </view>
 </view>

pages/zhenggaijindu/zhenggaijindu.wxss

@@ -101,46 +101,42 @@ margin-top: 40rpx;
   display: flex;
   flex-direction: row;
   position: fixed;
-  width: 100%;
+  width: 80%;
   background-color: rgb(255, 255, 255);
   bottom: 0px;
-  padding: 40rpx 20rpx;
+  padding: 40rpx 10%;
   left: 0;
   border-top: 1px solid rgb(233, 233, 233);
   box-shadow: 0px 0px 10px #ccc;
-}
-.btm_btn text{
-  font-size: 32rpx;
-  color: #444;
+  justify-content:space-between ;
+  
 }
 .time_qx{
   display: flex;
   flex-direction: row;
   align-items: center;
+ 
+}
+.section__title{
+  padding-right: 4rpx;
 }
 .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);
+  border: 1px solid rgb(230, 230, 230);
+  padding: 16rpx 30rpx;
+  border-radius: 100rpx;
+  background: rgb(230, 230, 230);
+  color: #444;
 }
 .succ_btn{
   width: auto!important;
 padding: 10rpx 26px!important;
-font-size: 28rpx!important;
+font-size: 30rpx!important;
+font-weight: normal!important;
+margin: 0!important;
+}
+picker text{
+  font-weight: 500;
+  color: rgb(235, 98, 19)!important;
 }