支出申请模板

pages/apply/paymentTemplate/paymentTemplate.js

@@ -7,8 +7,15 @@ Page({
    */
   data: {
     isIPX: app.globalData.isIPX,
+    show: false
+  },
+  showPopup() {
+    this.setData({ show: true });
   },
 
+  onClose() {
+    this.setData({ show: false });
+  },
   /**
    * 生命周期函数--监听页面加载
    */

pages/apply/paymentTemplate/paymentTemplate.json

@@ -1,6 +1,8 @@
 {
   "usingComponents": {
     "van-cell": "@vant/weapp/cell/index",
-    "van-cell-group": "@vant/weapp/cell-group/index"
+    "van-cell-group": "@vant/weapp/cell-group/index",
+    "van-icon": "@vant/weapp/icon/index",
+    "van-popup": "@vant/weapp/popup/index"
   }
 }

pages/apply/paymentTemplate/paymentTemplate.wxml

@@ -20,15 +20,43 @@
 <view class="main-box top-box">
   <text>支出金额</text>
   <view class="money_box">￥<input class="input_money" placeholder="金额"/></view>
-  <van-cell-group>
+  <van-cell-group border="{{ false }}">
     <van-cell title="支付联合社办公室12月份租金" border="{{ false }}" >
-      <view slot="icon">事由</view>
+      <view slot="icon" style="width: 15%;">事由：</view>
     </van-cell>
-    <van-cell title="龙华村联合社华" border="{{ false }}" >
-      <view slot="icon"></view>
+    <van-cell title="龙华村联合社华" border="{{ false }}" center >
+      <view slot="icon" style="width: 15%;"><image src="/image/apply/icon_fu.png" style="width: 20px;height: 20px;"></image></view>
     </van-cell>
-    <van-cell title="龙华村联合社龙华村联合社龙华龙华村联合社" border="{{ false }}"  >
-      <view slot="icon"></view>
+    
+    <van-cell title="龙华村联合社龙华村联合社龙华龙华村联合社" center border="{{ false }}"  >
+      <view slot="icon" style="width: 15%;"><image src="/image/apply/icon_shou.png" style="width: 20px;height: 20px;"></image></view>
     </van-cell>
+    <view class="btnBox">
+      <image src="/image/apply/down.png" class="down"></image>
+      <image src="/image/apply/icon_update.png" class="update"></image>
+      <image src="/image/apply/icon_delete.png" class="delete"></image>
+    </view>
   </van-cell-group>
-</view>
+</view>
+
+<view class="bottomBtn">
+  <view bindtap="showPopup">
+    <image src="/image/apply/icon_pres.png"></image>
+    <text>保存模板</text>  
+  </view>
+  <view>
+    <image src="/image/apply/icon_add.png"></image>
+    <text>新增事项</text>  
+  </view>
+</view>
+
+<view class="bottom">
+  <view class="btn1" bindtap="openBox">提交复核</view>
+  <view class="btn2">下一步</view>
+</view>
+
+<van-popup show="{{ show }}" bind:close="onClose">
+  <view>
+    
+  </view>
+</van-popup>

pages/apply/paymentTemplate/paymentTemplate.wxss

@@ -1,5 +1,26 @@
 /* pages/apply/paymentTemplate/paymentTemplate.wxss */
 text{display: block;}
+
+.pure_top {
+  width: 100%;
+  height: 100px;
+  position: relative;
+  z-index: -1;
+  overflow: hidden
+}
+  
+.pure_top::after {
+  content: '';
+  width: 140%;
+  height: 100px;
+  position: absolute;
+  left: -20%;
+  top: 0;
+  z-index: -1;
+  border-radius: 0 0 50% 50%;
+  background: #1496f1
+}
+
 .top{
   height: 64px;
   width: 100%;
@@ -83,4 +104,91 @@ text{display: block;}
   padding: 10px calc(3% + 20px);
   color: #2C8E68;
   font-size: 16px;
+}
+
+.van-cell {
+  padding-left: 0!important;
+  padding-right: 0!important;
+}
+
+.down{
+  width: 15px;
+  height: 8px;
+  margin: 0 auto;
+  margin-top: 18px;
+}
+
+.update{
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  right: 41px;
+}
+.delete{
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  right: 0;
+}
+
+.btnBox{
+  text-align: center;
+  position: relative;
+  height: 26px;
+}
+.bottomBtn{
+  display: flex;
+  width: 94%;
+  margin: 0 auto;
+  margin-top: 25px;
+  justify-content:space-between;
+}
+.bottomBtn view{
+  display: flex;
+  width: 48%;
+  background-color: #ffffff;
+  border-radius: 5px;
+  box-shadow: 0px 5px 9px #DCDCDC;
+  padding: 10px 0px;
+  text-align: center;
+  align-items:center;
+  justify-content:center;
+  font-size: 14px;
+  color: #2C8E68;
+}
+.bottomBtn view image{
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+}
+
+
+.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;
 }