审核流程

app.json

@@ -5,7 +5,8 @@
     "pages/handle/liist",
     "pages/handle/expenditureAudit/expenditureAudit",
     "pages/apply/index",
-    "pages/apply/paymentTemplate/paymentTemplate"
+    "pages/apply/paymentTemplate/paymentTemplate",
+    "pages/apply/approval/approval"
   ],
   "window": {
     "backgroundTextStyle": "light",

app.wxss

@@ -50,6 +50,7 @@ contact-button {
 .ns {
   width: 100%;
   text-align:center;
+  z-index: 999;
   background:linear-gradient(to right, #2C8E68, #B3DB62);
 } 
 .ns image{

pages/apply/approval/approval.js

@@ -0,0 +1,127 @@
+// pages/apply/approval/approval.js
+const app = getApp();
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    isIPX: app.globalData.isIPX,
+    steps: [
+      {
+        assigneeName: '同意',
+        activityName: '测试测试',
+        durationInMillis: '描述信息',
+        endTime: '2022-01-02',
+        comment: '同意',
+        type: '1'
+      },
+      {
+        assigneeName: '申请中',
+        activityName: '测试测试',
+        durationInMillis: '描述信息',
+        endTime: '2022-01-02',
+        comment: '同意',
+        type: '2'
+      },
+      {
+        assigneeName: '驳回',
+        activityName: '测试测试',
+        durationInMillis: '描述信息',
+        endTime: '2022-01-02',
+        comment: '同意',
+        type: '3'
+      },
+      {
+        assigneeName: '步骤四',
+        activityName: '测试测试',
+        durationInMillis: '描述信息',
+        endTime: '2022-01-02',
+        comment: '同意'
+      },
+    ],
+    active:0,
+    result:[],
+    show:false,
+    showPopup:false,
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+  onChange(event) {
+    this.setData({
+      result: event.detail,
+    });
+  },
+  openBox:function(){
+    var that = this ;
+    that.setData({
+      show: true,
+    })
+  },
+  closeBox:function(){
+    var that = this ;
+    that.setData({
+      show: false,
+    })
+  },
+  showPopup() {
+    this.setData({ showPopup: true });
+  },
+
+  onClose() {
+    this.setData({ showPopup: false });
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/apply/approval/approval.json

@@ -0,0 +1,18 @@
+{
+  "usingComponents": {
+    "van-row": "@vant/weapp/row/index",
+    "van-col": "@vant/weapp/col/index",
+    "van-cell": "@vant/weapp/cell/index",
+    "van-cell-group": "@vant/weapp/cell-group/index",
+    "van-tag": "@vant/weapp/tag/index",
+    "van-icon": "@vant/weapp/icon/index",
+    "van-steps": "@vant/weapp/steps/index",
+    "van-button": "@vant/weapp/button/index",
+    "van-checkbox": "@vant/weapp/checkbox/index",
+  "van-checkbox-group": "@vant/weapp/checkbox-group/index",
+  "van-action-sheet": "@vant/weapp/action-sheet/index",
+  "van-swipe-cell": "@vant/weapp/swipe-cell/index",
+  "van-dialog": "@vant/weapp/dialog/index",
+  "van-field": "@vant/weapp/field/index"
+  }
+}

pages/apply/approval/approval.wxml

@@ -0,0 +1,134 @@
+<!--pages/apply/approval/approval.wxml-->
+<view class="ns" style="height:{{isIPX?'88px':'64px'}};">
+  <image src="/image/apply/back.png" style="top:{{isIPX?'54px':'30px'}};" mode="widthFix" bindtap="back"></image>
+  <text style="top:{{isIPX?'54px':'30px'}};">支出申请</text>
+</view>
+<view class="pure_top" style="top:{{isIPX?'88px':'64px'}};"></view>
+<view class="main-box top-box  steps-box" style="margin-top:{{isIPX?'100px':'75px'}};">
+  <text class="box-title">审批事项</text>
+  <van-row wx:for="{{steps}}" wx:key="index">
+    <van-col span="3">
+      <view class="index">{{index+1}}</view>
+      <!-- :class="{'indexCenter':index==0 ? false : true}" -->
+      <block wx:if="{{index==0}}">
+        <view class="indexBorder">
+          <view class="ssT" wx:if="{{index>0}}"></view>
+          <view class="yq"></view>
+          <view class="ss" wx:if="{{steps.length != index+1}}"></view>
+        </view>
+      </block>
+      <block wx:else>
+        <view class="indexBorder indexCenter">
+          <view class="ssT" wx:if="{{index>0}}"></view>
+          <view class="yq"></view>
+          <view class="ss" wx:if="{{steps.length != index+1}}"></view>
+        </view>
+      </block>
+    </van-col>
+    <van-col span="21">
+      <van-cell center="{{true}}" border="{{false}}">
+        <view slot="title">
+          {{item.activityName}}<text style="display: inline-block;margin-left: 10px;">村级主任审批</text>
+        </view>
+        <view style="display: flex;align-items: center;justify-content:flex-end;">
+          <image src="/image/apply/icon_up.png" style="width: 20px;height: 20px;"></image>
+          <image src="/image/apply/icon_down.png" style="width: 20px;height: 20px;margin-left: 10px;"></image>
+        </view>
+      </van-cell>
+    </van-col>
+  </van-row>
+  <view class="check_box">
+    <van-checkbox-group value="{{ result }}" bind:change="onChange">
+      <van-row>
+        <van-col span="12">
+          <van-checkbox name="a" shape="square" checked-color="#2C8E68">董事长：张三</van-checkbox>
+          <van-checkbox name="b" shape="square" checked-color="#2C8E68">董事长：张三</van-checkbox>
+        </van-col>
+        <van-col span="12">
+          <van-checkbox name="c" shape="square" checked-color="#2C8E68">董事长：张三</van-checkbox>
+          <van-checkbox name="d" shape="square" checked-color="#2C8E68">董事长：张三</van-checkbox>
+        </van-col>
+      </van-row>
+      <van-row>
+        <van-col span="12">
+          <van-checkbox name="a" shape="square" checked-color="#2C8E68">村长：张三</van-checkbox>
+          <van-checkbox name="b" shape="square" checked-color="#2C8E68">村书记：张三</van-checkbox>
+        </van-col>
+        <van-col span="12">
+          <van-checkbox name="c" shape="square" checked-color="#2C8E68">村主任：张三</van-checkbox>
+          <van-checkbox name="d" shape="square" checked-color="#2C8E68">村党委：张三</van-checkbox>
+        </van-col>
+      </van-row>
+      <van-row>
+        <van-col span="12">
+          <van-checkbox name="a" shape="square" checked-color="#2C8E68">镇长：张三</van-checkbox>
+          <van-checkbox name="b" shape="square" checked-color="#2C8E68">镇书记：张三</van-checkbox>
+        </van-col>
+        <van-col span="12">
+          <van-checkbox name="c" shape="square" checked-color="#2C8E68">镇主任：张三</van-checkbox>
+          <van-checkbox name="d" shape="square" checked-color="#2C8E68">镇党委：张三</van-checkbox>
+        </van-col>
+      </van-row>
+    </van-checkbox-group>
+  </view> 
+
+  <view class="btn_box">
+    <view bindtap="openBox">选择审批模板</view>
+    <view bindtap="showPopup">保存审批模板</view>
+  </view>
+</view>
+
+<view class="bottom">
+  <view class="btn1" bindtap="openBox">保存</view>
+  <view class="btn2" bindtap="goApproval">保存并提交</view>
+</view>
+
+<van-action-sheet show="{{show}}" title="选择审批模板" bind:close="closeBox">
+  <van-swipe-cell right-width="{{ 65 }}">
+    <van-cell label="支付水电、网费、房租" bindtap="goTemplate" >
+      <view slot="title">
+        <view class="van-cell-text">日常支付水电模板<van-tag plain type="danger" color="#FC9A55" style="margin-left:10px;">默认</van-tag></view>
+      </view>
+      <van-icon slot="icon" name="https://636c-cloud1-8gya17a31667774d-1310628902.tcb.qcloud.la/icon_mrmb.png?sign=5e5df640777f6a7993c45e1a559dd998&t=1648619865" class="custom-icon" size="40" style="margin-right: 10px;" />
+    </van-cell>
+    <view slot="right" class="deleteBox">
+      <image src="/image/apply/icon_delete.png" style="width: 25px;height: 25px;margin: 0 auto;"></image>
+    </view>
+  </van-swipe-cell>
+  <van-swipe-cell right-width="{{ 65 }}">
+      <van-cell title="日常支付水电模板" label="支付水电、网费、房租"  >
+        <van-icon slot="icon" name="https://636c-cloud1-8gya17a31667774d-1310628902.tcb.qcloud.la/icon_mb.png?sign=2a8bbe2cb4d4e0f28a99fddbe042d26c&t=1648620032" class="custom-icon" size="40" style="margin-right: 10px;" />
+      </van-cell>
+    <view slot="right" class="deleteBox">
+      <image src="/image/apply/icon_delete.png" style="width: 25px;height: 25px;margin: 0 auto;"></image>
+    </view>
+  </van-swipe-cell>
+  <van-swipe-cell right-width="{{ 65 }}">
+      <van-cell title="日常支付水电模板" label="支付水电、网费、房租"  >
+        <van-icon slot="icon" name="https://636c-cloud1-8gya17a31667774d-1310628902.tcb.qcloud.la/icon_mb.png?sign=2a8bbe2cb4d4e0f28a99fddbe042d26c&t=1648620032" class="custom-icon" size="40" style="margin-right: 10px;" />
+      </van-cell>
+    <view slot="right" class="deleteBox">
+      <image src="/image/apply/icon_delete.png" style="width: 25px;height: 25px;margin: 0 auto;"></image>
+    </view>
+  </van-swipe-cell>
+  <van-swipe-cell right-width="{{ 65 }}">
+      <van-cell title="日常支付水电模板" label="支付水电、网费、房租"  >
+        <van-icon slot="icon" name="https://636c-cloud1-8gya17a31667774d-1310628902.tcb.qcloud.la/icon_mb.png?sign=2a8bbe2cb4d4e0f28a99fddbe042d26c&t=1648620032" class="custom-icon" size="40" style="margin-right: 10px;" />
+      </van-cell>
+    <view slot="right" class="deleteBox">
+      <image src="/image/apply/icon_delete.png" style="width: 25px;height: 25px;margin: 0 auto;"></image>
+    </view>
+  </van-swipe-cell>
+</van-action-sheet>
+
+<van-dialog
+  use-slot
+  title="审批模板"
+  show="{{ showPopup }}"
+  bind:close="onClose"
+  theme='round-button'
+  confirmButtonText="保存"
+  closeOnClickOverlay="{{ true }}"
+>
+  <input class="input_tit" placeholder="请输入模板名称" style="width: 90%;margin: 0 auto;margin-top: 15px;margin-bottom: 10px;text-align: center;"/> 
+</van-dialog>

pages/apply/approval/approval.wxss

@@ -0,0 +1,237 @@
+/* pages/apply/approval/approval.wxss */
+text{display: block;}
+
+.ns{
+  position: fixed;
+  top: 0;
+  background: linear-gradient(to right, #429a68, #9ecf67);
+}
+
+.pure_top {
+  width: 100%;
+  height: 120px;
+  position: absolute;
+  z-index: -1;
+  overflow: hidden
+}
+  
+.pure_top::after {
+  content: '';
+  width: 140%;
+  height: 120px;
+  position: absolute;
+  left: -20%;
+  top: 0;
+  z-index: -1;
+  border-radius: 0 0 50% 50%;
+  background: linear-gradient(to right, #2C8E68, #B3DB62);
+}
+
+.main-box{
+  background: #ffffff;
+  padding: 20px 0;
+  width: 94%;
+  margin: 0 auto;
+  border-radius: 10px;
+  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16);
+}
+
+.top-box text{
+  margin-bottom: 15px;
+}
+.top-box text:last-child{
+  margin-bottom: 0px;
+}
+.box-title{
+  color: #2C8E68;
+  text-align: center;
+  font-size: 16px;
+}
+
+.steps-box view{
+  margin-bottom: 0;
+}
+.steps-box .van-row{
+  padding: 0 20px;
+}
+.steps-box van-row:nth-child(2n+1) .van-row{
+  background-color: rgba(92, 174, 119, 0.1);
+}
+
+.steps-box  .van-col{
+    position: relative;
+    height: 50px;
+  }
+  .steps-box  .van-col--21{
+    padding: 5PX 0;
+    line-height: 50px;
+  }
+  .steps-box  .van-row:nth-child(2n){
+    background: rgba(29,111,233,0.1);
+  }
+  .steps-box  .van-cell{
+    background: transparent;
+    padding: 0 ;
+    line-height: 40px;
+  }
+  .steps-box  .bq{
+    display: inline-block;
+    padding: 0PX 10PX;
+    line-height: 0.64rem;
+    border-radius: 5PX;
+  }
+  .steps-box  .index{
+    background: #2C8E68;
+    color: #ffffff;
+    text-align: center;
+    width: 20PX;
+    height: 20PX;
+    line-height: 20PX;
+    border-radius: 50%;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(0,-50%);
+  }
+  .steps-box  .indexCenter{
+    top: 0!important;
+  }
+  .steps-box  .van-row:first-child .van-col:first-child .indexBorder{
+    top: calc(50% - 15px);
+  }
+  .steps-box  .indexBorder{
+    width: 10PX;
+    position: absolute;
+    left: 9px;
+    top: 0;
+    height: 100%;
+    
+  }
+  .steps-box  .indexBorder .yq{
+    height: 30PX;
+    width: 30PX;
+    background: transparent;
+    border-radius: 50%;
+  }
+  .steps-box  .indexBorder .ss{
+    height: calc(50% - 15PX);
+    width: 1PX;
+    background: #C9C9C9;
+    position: relative;
+  }
+  .steps-box .indexBorder .ssT{
+    height: calc(50% - 15PX);
+    width: 1PX;
+    background: #C9C9C9;
+    position: relative;
+  }
+
+  .steps-box .van-cell__title{
+    flex: 0.8;
+  }
+  .steps-box .van-cell__value {
+    flex: 0.2;
+  }
+  .check_box{
+    padding: 50px 0;
+  }
+  .check_box .van-row{
+    background-color: rgba(92, 174, 119, 0.1);
+    margin-top: 10px;
+    padding: 15px 20px;
+  }
+  .check_box .van-col{
+    height: auto;
+  }
+  .check_box van-checkbox:nth-child(2n) .van-checkbox {
+    margin-top: 15px;
+  }
+  .van-checkbox__icon-wrap {
+    border-radius: 5px;
+  }
+  .van-checkbox__icon {
+    border-radius: 5px;
+    border: 2px solid #2C8E68!important;
+    background-color: rgba(44, 142, 104, 0.2);
+  }
+
+  .btn_box{
+    display: flex;
+    justify-content: center;
+    padding-bottom: 10px;
+  }
+  .btn_box view:nth-child(1){
+    display: inline-block;
+    padding: 8px 15px;
+    background-color: rgba(252, 154, 85, 0.2);
+    color: #FC9A55;
+    border-radius: 20px;
+    font-size: 16px;
+  }
+  .btn_box view:nth-child(2){
+    display: inline-block;
+    padding: 8px 15px;
+    background-color: rgba(92, 174, 119, 0.2);
+    color: #5CAE77;
+    border-radius: 20px;
+    font-size: 16px;
+    margin-left: 30px;
+  }
+
+  .bottom{
+    width: 84%;
+    margin: 0 auto;
+    text-align: center;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    display: flex;
+  }
+  
+  .bottom view {
+    width: 47%;
+    margin: 0 auto;
+    border-radius: 30px;
+    display: inline-block;
+  }
+  
+  .bottom .btn1{
+    border: 1px solid #2C8E68;
+    padding: 8px 0px;
+    color: #2C8E68;
+  }
+  
+  .bottom .btn2{
+    border: 1px solid transparent;
+    padding: 8px 0px;
+    background-image: linear-gradient(to right, #2C8E68, #5CAE77);
+    margin-left: 6%;
+    color: #fff;
+  }
+  .deleteBox{
+    width: 65px;
+    text-align: center;
+    height: 100%;
+    background: #F6F6F6;
+    align-items: center;
+    display: flex;
+  }
+  .van-action-sheet__header {
+    background: #f2f2f2;
+    color: #2C8E68;
+  }
+
+  .input_tit{
+    border: 1px solid #DCDCDC;
+    padding: 0px 10px;
+    height: 32px;
+    line-height: 32px;
+    border-radius: 5px;
+    margin-bottom: 15px;
+  }
+  .van-dialog__header {
+    color: #2C8E68;
+    font-size: 18px;
+  }
+  .van-button--normal {
+    background: linear-gradient(to right, #2C8E68, #5CAE77)!important;
+  }

pages/apply/paymentTemplate/paymentTemplate.js

@@ -16,6 +16,12 @@ Page({
   onClose() {
     this.setData({ show: false });
   },
+
+  goApproval(){
+    wx.navigateTo({
+      url: '../approval/approval',
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    */

pages/apply/paymentTemplate/paymentTemplate.json

@@ -3,6 +3,7 @@
     "van-cell": "@vant/weapp/cell/index",
     "van-cell-group": "@vant/weapp/cell-group/index",
     "van-icon": "@vant/weapp/icon/index",
-    "van-popup": "@vant/weapp/popup/index"
+    "van-dialog": "@vant/weapp/dialog/index",
+    "van-field": "@vant/weapp/field/index"
   }
 }

pages/apply/paymentTemplate/paymentTemplate.wxml

@@ -1,14 +1,14 @@
-<!--pages/apply/paymentTemplate/paymentTemplate.wxml-->
-<image src="../../../image/expenditureAudit/bgGreen.png" class="bgPage"></image>
-<view class="ns top" style="height:{{isIPX?'88px':'64px'}};background:none;">
+<!--pages/apply/paymentTemplate/paymentTemplate.wxml height:{{isIPX?'88px':'64px'}};-->
+<view class="ns" style="height:{{isIPX?'88px':'64px'}};">
   <image src="/image/apply/back.png" style="top:{{isIPX?'54px':'30px'}};" mode="widthFix" bindtap="back"></image>
   <text style="top:{{isIPX?'54px':'30px'}};">支出申请</text>
 </view>
+<view class="pure_top" style="top:{{isIPX?'88px':'64px'}};"></view>
 <view class="main-box top-box" style="margin-top:{{isIPX?'100px':'75px'}};">
   <text class="box-title">审批事项</text>
   <input class="input_tit" placeholder="房屋出租整年费用"/>
   <text>支出总金额</text>
-  <view class="money_box">￥<input class="input_money" placeholder="总金额"/></view>
+  <view class="money_box">￥<input class="input_money" placeholder="总金额" placeholder-style="color:#E90000;"/></view>
   <text>提交单位：龙华村联合社</text>
   <text>提交日期：2022年1月18日</text>
   <text>提  交  人：报账员</text>
@@ -19,7 +19,7 @@
 
 <view class="main-box top-box">
   <text>支出金额</text>
-  <view class="money_box">￥<input class="input_money" placeholder="金额"/></view>
+  <view class="money_box">￥<input class="input_money" placeholder="金额" placeholder-style="color:#E90000;"/></view>
   <van-cell-group border="{{ false }}">
     <van-cell title="支付联合社办公室12月份租金" border="{{ false }}" >
       <view slot="icon" style="width: 15%;">事由：</view>
@@ -52,11 +52,17 @@
 
 <view class="bottom">
   <view class="btn1" bindtap="openBox">提交复核</view>
-  <view class="btn2">下一步</view>
+  <view class="btn2" bindtap="goApproval">下一步</view>
 </view>
 
-<van-popup show="{{ show }}" bind:close="onClose">
-  <view>
-    
-  </view>
-</van-popup>
+<van-dialog
+  use-slot
+  title="支付模板"
+  show="{{ show }}"
+  bind:close="onClose"
+  theme='round-button'
+  confirmButtonText="保存"
+  closeOnClickOverlay="{{ true }}"
+>
+  <input class="input_tit" placeholder="请输入模板名称" style="width: 90%;margin: 0 auto;margin-top: 15px;margin-bottom: 10px;text-align: center;"/> 
+</van-dialog>

pages/apply/paymentTemplate/paymentTemplate.wxss

@@ -1,10 +1,16 @@
 /* pages/apply/paymentTemplate/paymentTemplate.wxss */
 text{display: block;}
 
+.ns{
+  position: fixed;
+  top: 0;
+  background: linear-gradient(to right, #429a68, #9ecf67);
+}
+
 .pure_top {
   width: 100%;
-  height: 100px;
-  position: relative;
+  height: 120px;
+  position: absolute;
   z-index: -1;
   overflow: hidden
 }
@@ -12,13 +18,13 @@ text{display: block;}
 .pure_top::after {
   content: '';
   width: 140%;
-  height: 100px;
+  height: 120px;
   position: absolute;
   left: -20%;
   top: 0;
   z-index: -1;
   border-radius: 0 0 50% 50%;
-  background: #1496f1
+  background: linear-gradient(to right, #2C8E68, #B3DB62);
 }
 
 .top{
@@ -54,10 +60,7 @@ text{display: block;}
   border-radius: 10px;
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16);
 }
-.top-box{
-  /* margin-top: 20px; */
-  /* margin-bottom: 28px; */
-}
+
 .top-box text{
   margin-bottom: 15px;
 }
@@ -191,4 +194,17 @@ text{display: block;}
   background-image: linear-gradient(to right, #2C8E68, #5CAE77);
   margin-left: 6%;
   color: #fff;
+}
+
+.window{
+  background: #fff;
+  width: 94%;
+}
+
+.van-dialog__header {
+  color: #2C8E68;
+  font-size: 18px;
+}
+.van-button--normal {
+  background: linear-gradient(to right, #2C8E68, #5CAE77)!important;
 }

project.private.config.json

@@ -38,6 +38,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "支出审批流程",
+          "pathName": "pages/apply/approval/approval",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }