前端

form.js

const app = getApp();
Page({
  data: {
    showPage: 1, // 0已审核通过跳转管理中心 1 显示入驻页面 2 显示审核页面审核中 3 显示审核重新入驻
    reChoose: 0, // 充值卡类型选择
    param: {
      amount:'',
      amount:'',
    },
    show: false,
    must_invitationcode: 0,
    info: {},
    clauseshow: false,
    hasview: false,
    clausecontent: "",
  },
  onLoad(o) {

    this.checkLogin((user) => {
      this.setData({
        user
      })

      this.onLoadData(user);
    }, '/plus/shuhe/form/form', true);

  },
  onLoadData(user) {
    this.data.param.user_id = user.id;
    this.setData({
      show:true
    });
  },
  getTitle(e){
    let title = e.detail.value;
    this.setData({
      ['param.title']: title,
    })
  },
  getAmount(e) {
    let amount = e.detail.value;
    this.setData({
      ['param.amount']: amount,
    })
  },
  onClauseTap(e) {
    let clauseshow = this.data.clauseshow;
    this.setData({
      clauseshow: !clauseshow
    })
  },
  closeclauseshow(e) {
    this.setData({
      clauseshow: false
    })
  },

  taggleHasview: function (e) {
    this.setData({
      hasview: !this.data.hasview
    });
  },
  onApplyTap() {
    let _this = this;
    if (this.data.ajax) return;
    this.data.ajax = true;
    let param = this.data.param;

    if (!param.title || param.title == '') {
      app.tips("工作室名称不能为空");
      _this.setData({
        ajax: false
      })
      return false;
    }

    if (!param.amount || param.amount == '') {
      app.tips("金额不能为空");
      _this.setData({
        ajax: false
      })
      return false;
    }

    if (!param.pay_pic || param.pay_pic == '' || param.pay_pic.length == 0) {
      app.tips("支付凭证不能为空");
      _this.setData({
        ajax: false
      })
      return false;
    }
    param.user_id = this.data.user.id;
    wx.showLoading({
      title: '提交中...',
    })
    app.api.apiShuheworkAddform(param).then(res => {
      wx.hideLoading();
      app.alert('提交成功！', () => {
        wx.navigateBack({
          delta: 1,
        })
      }, 0)
      _this.setData({
        ajax: false
      })
    }).catch(res => {
      wx.hideLoading()
      app.tips(res);
      _this.setData({
        ajax: false
      })
    })
  },
  getPic(e) { // 支付凭证
    this.setData({
      ['param.pay_pic']: e.detail
    })
  },
})

form.json

{
  "navigationBarTitleText": "工作室补贴报单",
  "usingComponents": {
    "upload": "/zhy/component/comUploadImg/comUploadImg",
    "van-popup-gray": "/zhy/vant/popup-gray/index"
  }
}

form.wxml

<import src="../../../zhy/template/wxParse/wxParse.wxml" />
<view style="{{themeColor}}">
  <view class="wrap" wx:if="{{show}}">

    <view>
      <view class="content">
        <view class="item">
          <view class="item-title">工作室名称</view>
          <view class="item-r">
            <input placeholder="请输入工作室名称" value="{{param.title}}" bindinput="getTitle"></input>
          </view>

        </view>
        <view class="item">
          <view class="item-title">金额</view>
          <view class="item-r">
            <input placeholder="请输入金额" value="{{param.amount}}" bindinput="getAmount"></input>
          </view>

        </view>
        <view>
          <upload max-count="1" imagemaxsize="6" title="支付凭证" imglink="{{imgRoot}}" keep-local="1" img-arr="{{param.pay_pic}}" bind:getarr="getPic" prevent="{{false}}" />
        </view>

      </view>

      <view class="check-btn" bindtap="onApplyTap">提交</view>
    </view>

  </view>
</view>
<import src="/zhy/template/temloading/temloading.wxml" />
<template is="temloading" wx:if="{{!show}}" />

form.wxss

@import '../../../zhy/resource/css/form.wxss';
page {
  background: var(--white);
}
.banner {
  width: 750rpx;
  height: 240rpx;
}
.apply-title {
  font-size: 28rpx;
  text-align: center;
  padding: 50rpx 0;
  background: var(--white);
}
.content {
  padding-left: 20rpx;
  background: #fff;
}

.wrap {
  padding-bottom: 40rpx;
}
.enter-title {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.rich {
  padding: 15rpx;
  background: #fff;
}
.fail-reason {
  padding: 15rpx;
  background: #fff;
}
.btn-a {
  width: 400rpx;
  height: 70rpx;
  line-height: 70rpx;
  margin: 20rpx auto;
  text-align: center;
  background: var(--skin);
  color: #fff;
  border-radius: 10rpx;
  font-size: 30rpx;
}

.container {
  margin: 1px 0 0;
  padding-left: 15rpx;
  background: #fff;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1px solid #eee;
  font-size: 30rpx;
}

.item-r {
  flex: 1;
  padding: 0 15rpx;
  text-align: right;
  color: #999;
  background: #fff;
}
.btn {
  flex: 1;
}
.item-rf {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 15rpx;
  text-align: right;
  color: #999;
  background: #fff;
}
.height88 {
  height: 88rpx;
  line-height: 88rpx;
}
.border1 {
  border-bottom: 1px solid #eee;
}
.item button {
  font-size: 30rpx;
}
.unit {
  margin-right: 15rpx;
}
.btn-b {
  width: 400rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 10rpx;
  background: #4BB7D3;
  color: #fff;
  margin: 40rpx auto 20rpx;
}

.items {
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.items-title {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
}

.items-rich {
  width: 690rpx;
  line-height: 36rpx;
  height: 144rpx;
  padding: 15rpx;
  background: #eee;
}

.caption-3 {
  line-height: 32rpx;
  margin-top: 49rpx;
  margin-left: 31rpx;
  color: #363636;
  font-size: 32rpx;
  max-width: 688rpx;
  text-overflow: ellipsis;
 }
 .title-4 {
 line-height: 42rpx;
  margin-left: 32rpx;
  color: #999999;
  font-size: 28rpx;
  max-width: 686rpx;
  text-align: left;
  text-overflow: ellipsis;
  margin-top: 20rpx;
 }
 .num-tip{
   padding: 10rpx;
   color: red;
 }
  .no-pass {
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    padding: 20rpx;
 }
 .flex-row_group_10 {
  flex-direction: row;
  display: flex;
  padding: 0 54rpx 15rpx 54rpx;
 }
 .text_16 {
  line-height: 24rpx;
  margin: 6rpx 0 10rpx 23rpx;
  color: #363636;
  font-size: 24rpx;
 }
 .rule {
  line-height: 24rpx;
  margin: 6rpx 0 10rpx 16rpx;
  color: #3a8df1;
  font-size: 24rpx;
 }

.close{position: absolute; top:30rpx; right: 30rpx; width: 36rpx; height: 36rpx; border-radius: 50%}
.apply_content{color: #333333; max-height: 700rpx;height: 700rpx; overflow-y: scroll; padding: 0 30rpx 30rpx;}
.apply_content .v1{ padding:30rpx 0 20rpx 0; line-height: 46rpx; font-size: 32rpx; font-weight: 600; text-align: center}