任务提醒器样式

client/pages/servant/taskreminder/taskreminder.acss

@@ -1,5 +1,5 @@
 .tasks-page{
-  padding-top: 35rpx;
+  padding:36rpx 0 0;
   background-color: #FFFFFF;
 }
 .tasks-head{
@@ -160,17 +160,23 @@
 }
 .tast-moneybox{
   height: 102rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   background-color: #F3F3F3;
+  padding:26rpx 24rpx 60rpx; 
 }
 .tasks-list-money{
   height: 102rpx;
-  margin-top: 25rpx;
-  border-radius: 18px;
+  line-height: 102rpx;
+  border-radius: 18rpx;
   background: #FFFFFF;
-  margin-left: 23rpx;
   margin-right: 24rpx;
-  width: 60%;
-  float: left;
+  flex:1;
+  display: flex;
+  align-items:center;
+  justify-content: flex-start
+  
 }
 .nogood{
   width: 120rpx;
@@ -183,43 +189,41 @@
   margin-left: 16rpx;
   text-align: center;
 }
-.tasks-set{
-  float: right;
-  width: 27%;
-  margin-right: 24rpx;
-  height: 102rpx;
-  line-height: 102rpx;
-}
 .tasks-set button{
   border-radius: 68rpx;
-  margin-top: 26rpx;
+  background: #09AFFF;
+  height: 68rpx;
+  font-size: 28rpx;
+  line-height: 68rpx;
+  border:none;
+  width:140rpx;
+}
+.active-button{
+   background: #09AFFF;
 }
 .tasks-list-pay{
   font-weight: bold;
   color: #333333;
   font-size: 28rpx;
-  float: left;
-  width: 45%;
-  line-height: 102rpx;
   padding-left: 24rpx;
+  white-space: nowrap;
 }
 .tasks-list-pay-right{
-  float: right;
-  width: 40%;
+ 
   text-align: right;
-  padding-right: 5%;
+  padding-right: 12rpx;
   height: 102rpx;
-  line-height: 102rpx;
   font-weight: bold;
+  display: flex;
+  align-items: center;
 }
 .tasks-list-pay-right input{
   color: #09AFFF;
   font-weight: normal;
-  width: 60%;
-  margin-top: 24rpx;
+  font-size: 28rpx;
+  flex:1;
 }
 .tasks-list-pay-right text{
-  float: right;
 }
 .notasks{
   margin: 21rpx 24rpx 30rpx 24rpx;
@@ -267,4 +271,10 @@
   font-size: 36rpx;
   color: #09AFFF;
   font-weight: bold;
+}
+.radio-wrapper{
+  padding:0 0 0 100rpx;
+  text-align: left;
+  font-size: 30rpx;
+  margin:0 0 30rpx 0;
 }

client/pages/servant/taskreminder/taskreminder.axml

@@ -51,12 +51,13 @@
         <view class="tasks-list-item" a:if="{{item.state == 0}}">
           <text> {{item.itemName}}</text>
           <view class="item-task-wrapper">
+                 <view class="tasks-item-no" onTap="showcancel" data-id="{{item.id}}">
+            <image class="icon-no" mode="scaleToFill" src="/image/icon-no.png"/>
+          </view>
           <view class="tasks-item-yes" onTap="showyes" data-id="{{item.id}}">
             <image class="icon-yes" mode="scaleToFill" src="/image/icon-yes.png"/>
           </view>
-          <view class="tasks-item-no" onTap="showcancel" data-id="{{item.id}}">
-            <image class="icon-no" mode="scaleToFill" src="/image/icon-no.png"/>
-          </view>
+   
           </view>
         </view>
         <view class="tasks-list-item" a:if="{{item.state == 1}}">
@@ -94,7 +95,7 @@
     <!---没有任务花销计算不显示-->
     <view a:if="{{isremindscose}}" class="tast-moneybox">
       <view class="tasks-list-money">
-        <view class="tasks-list-pay">今日花销合计</view>
+        <text class="tasks-list-pay">今日花销合计</text>
         <view class="tasks-list-pay-right">
           <input placeholder="请输入" onInput="bindKeyInput" name="cost" value="{{costvalue}}"/>
           <text>元</text></view>
@@ -109,7 +110,25 @@
     <calendar type="single" onSelect="handleSelect" />
   </modal>
   <!--弹出取消原因-->
-  <modal show="{{showcancelbox}}">
+    <modal
+		show="{{showcancelbox}}"
+    showClose="{{false}}"
+    onButtonClick="onReasonModalClick"
+    buttons="{{buttonsText}}"
+	>
+		<view slot="header">取消原因</view>
+		<radio-group class="radio-group weui-input" onChange="swiperChange">
+        <view a:for="{{cancellist}}" a:key={{value}} class="radio-wrapper">
+           <label>
+          <radio value="{{item.value}}" class="radio" checked="{{item.checked}}" color="#09AFFF"/>
+          <text>
+          {{item.label}}
+          </text>
+         </label>
+        </view>
+      </radio-group>
+	</modal>
+  <!-- <modal show="{{showcancelbox}}">
     <view class="cancel-box">
       <text>取消原因</text>
       <radio-group class="radio-group weui-input" onChange="swiperChange">
@@ -124,5 +143,5 @@
     <view class="am-modal-buttons--vertical" onTap="confirmbox">
       确认选择
     </view>
-  </modal>
+  </modal> -->
 </view>

client/pages/servant/taskreminder/taskreminder.js

@@ -17,7 +17,11 @@ Page({
     servantTypeValue: '',//保姆工种,
     cost: "",
     taskId: "",
-    incompleteReason: 1
+    incompleteReason: 1,
+     buttonsText: [
+      { text: '取消' },
+      { text: '确认选择', extClass: 'buttonBold' },
+    ],
   },
   onLoad() {
     //加载选中的时间
@@ -71,11 +75,7 @@ Page({
       });
     });
   },
-  hidecnacelbox() {
-    this.setData({
-      showcancelbox: false
-    });
-  },
+
   dateAdd: function (startDate, days) {
     startDate = new Date(startDate);
     startDate = +startDate + days * 1000 * 60 * 60 * 24;
@@ -233,24 +233,7 @@ switchList(){
       url: '../myCustomerList/myCustomerList'
     });
   },
-  //确定提交任务
-  confirmbox() {
-    let id = this.data.taskId;
-    let incompleteReason = this.data.incompleteReason;
-    request.httpServicePost(apiUrl1.servantTaskSubmitPath, { id: id, state: 2, incompleteReason: incompleteReason }).then(data => {
-      my.alert({
-        title: '提示',
-        content: '提交完成',
-        buttonText: '确定',
-        success: () => {
-          this.setData({
-            showcancelbox: false
-          });
-          this.selectDayTaskItem();
-        }
-      });
-    });
-  },
+
   //计算家庭数量
   homelist(){
     let params={
@@ -273,4 +256,36 @@ switchList(){
           console.log(e);
       })
   },
+    hidecnacelbox() {
+    this.setData({
+      showcancelbox: false
+    });
+  },
+  //确定提交任务
+  confirmbox() {
+    let id = this.data.taskId;
+    let incompleteReason = this.data.incompleteReason;
+    request.httpServicePost(apiUrl1.servantTaskSubmitPath, { id: id, state: 2, incompleteReason: incompleteReason }).then(data => {
+      my.alert({
+        title: '提示',
+        content: '提交完成',
+        buttonText: '确定',
+        success: () => {
+          this.setData({
+            showcancelbox: false
+          });
+          this.selectDayTaskItem();
+        }
+      });
+    });
+  },
+  onReasonModalClick(e){
+    if(e.target.dataset.index==0){
+       this.setData({
+      showcancelbox: false
+    });
+    }else{
+       this.confirmbox();
+    }
+  }
 });

client/pages/servant/taskreminder/taskreminder.json

@@ -3,5 +3,6 @@
   "usingComponents":{
     "calendar": "mini-antui/es/calendar/index",
     "modal": "mini-ali-ui/es/modal/index"
+
   }
 }