基于ColorUi-uniapp的一个表单实例

1.页面

2.新建一个uniapp项目，导入ColorUi-nuiapp模板（https://ext.dcloud.net.cn/plugin?id=239）

 

3.页面代码：

<!--
  文件描述：预付费页面
  创建时间：2020/1/19 14:37
  创建人：Administrator
-->
<template>
  <view class="appletPage appletPage-prepayment">
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">预付费页面</block>
    </cu-custom>
    <view class="cu-modal" :class="modalName=='Modal'?'show':''" @tap="hideModal">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">提示</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl">
          {{modalContent}}
        </view>
      </view>
    </view>

    <view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
      <view class="cu-dialog" @tap.stop="">
        <view class="cu-bar bg-white">
          <view class="action text-green" @tap="hideModal">确定</view>
        </view>
        <view class="grid col-3 padding-sm">
          <view v-for="(item,index) in checkboxVolumn" class="padding-xs" :key="index">
            <button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
                    :data-value="item.value"> {{item.name}}
              <view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">
                HOT
              </view>
            </button>
          </view>
        </view>
      </view>
    </view>

    <form>
      <view class="cu-form-group">
        <view class="title">用户号</view>
        <input placeholder="请输入用户号" name="input" v-model="userinfo.usercode" disabled></input>
      </view>
      <view class="cu-form-group">
        <view class="title">用户名</view>
        <input name="input" v-model="userinfo.name" disabled></input>
      </view>
      <view class="cu-form-group">
        <view class="title">所属公司</view>
        <input name="input" v-model="userinfo.branchname" disabled></input>
      </view>
      <view class="cu-form-group">
        <view class="title">气价</view>
        <input name="input" v-model="userinfo.price" disabled></input>
      </view>
      <view class="cu-form-group">
        <view class="title">
          {{userinfo.balancename}}
        </view>
        <input name="input" v-model="userinfo.balance" disabled></input>
      </view>
      <view class="cu-form-group">
        <view class="title">充气量</view>
        <input name="input" placeholder="请输入充气量" type="number" v-model="dataForm.volumn" @change="changeVolumn"></input>
        <button class='cu-btn bg-green shadow' @click="chooseVolumn">选择</button>
      </view>
      <view class="cu-form-group">
        <view class="title">金额</view>
        <input name="input" v-model="dataForm.amount" disabled></input>
        <text class='cuIcon-refund text-orange'></text>
      </view>
    </form>
    <view class="margin-tb-sm text-center">
      <button class="cu-btn round bg-blue lg" style="margin-right: 15px;" @click="ccbPay('qr')">二维码支付</button>
      <button class="cu-btn round bg-cyan lg" @click="ccbPay('card')">建行卡支付</button>
    </view>
  </view>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 例如：import uploadFile from '@/components/uploadFile/uploadFile'

export default {
  name: 'payment',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      modalName: null,
      modalContent: '提示内容',
      userinfo: {
        usercode: '',
        name: '',
        branchname: '',
        price: '',
        balance: 0,
        balancename: '当前余额',
        customid: '',
        meterid: ''
      },
      dataForm: {
        amount: 0,
        volumn: ''
      },
      requestParams: {
        page: 1,
        limit: 10
      },
      banner: {},
      checkboxVolumn: [{
        value: 50,
        name: '50m³',
        checked: false,
        hot: false,
      }, {
        value: 100,
        name: '100m³',
        checked: false,
        hot: false,
      }, {
        value: 200,
        name: '200m³',
        checked: false,
      }, {
        value: 300,
        name: '300m³',
        checked: false
      }, {
        value: 500,
        name: '500m³',
        checked: false
      }, {
        value: 1000,
        name: '1000m³',
        checked: false
      }]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 方法集合
  methods: {
    onLoad(event) {
      // 目前在某些平台参数会被主动 decode，暂时这样处理。
      try {
        this.banner = JSON.parse(decodeURIComponent(event.query));
      } catch (error) {
        this.banner = JSON.parse(event.query);
      }
      this.userinfo.usercode = this.banner.usercode
      this.getUserInfo()
    },
    hideModal(e) {
      this.modalName = null
    },
    getUserInfo () {
      this.banner.act = 'CESHI_getuserInfo'
      uni.request({
        url: this.$Request,
        data: this.banner,
        method: 'GET',
        success: (result) => {
          const data = result.data;
          console.log(data)
          if (result.statusCode === 200) {
            Object.assign(this.userinfo, data.data[0]);
            if (this.userinfo.balance !== null) {
              if (this.userinfo.balance > 0) {
                this.userinfo.balancename = '当前欠费'
              } else {
                this.userinfo.balancename = '当前余额'
                this.userinfo.balance = -this.userinfo.balance
              }
            }
          } else {
            this.modalName = 'Modal'
            this.modalContent = '失败'
          }
        },
        fail: (err) => {
          console.log(err);
        },
        complete: (e) => {
        }
      });
    },
    chooseVolumn () {
      this.modalName = 'ChooseModal'
    },
    changeVolumn () {
      if(Number(this.dataForm.volumn < 0)){
        this.modalName = 'Modal'
        this.modalContent = '气量不能小于0！'
        return
      }
      let o = {
        price: this.userinfo.price,
        customid: this.userinfo.id,
        volumn: this.dataForm.volumn,
        act: 'CESHI_getFeeByVolumn'
      }
      uni.request({
        url: this.$Request,
        data: o,
        method: 'GET',
        success: (result) => {
          const data = result;
          if (result.statusCode === 200) {
            let amount = data.data
            this.dataForm.amount = amount
          } else {
            this.modalName = 'Modal'
            this.modalContent = '计算金额失败'
          }
        },
        fail: (err) => {
          console.log(err);
        },
        complete: (e) => {
        }
      });
    },
    ChooseCheckbox(e) {
      let items = this.checkboxVolumn;
      let values = e.currentTarget.dataset.value;
      console.log(values)
      if(this.dataForm.volumn !== values){
        this.dataForm.volumn = values
        for (let i = 0, lenI = items.length; i < lenI; ++i) {
          if (items[i].value == values) {
            items[i].checked = true;
          }else{
            items[i].checked = false
          }
        }
      }else{
        this.dataForm.volumn = ''
        for (let i = 0, lenI = items.length; i < lenI; ++i) {
          items[i].checked = false
        }
      }
      if(this.dataForm.volumn !== ''){
        this.changeVolumn()
      }else{
        this.dataForm.amount = 0
      }

    },
    ccbPay (paytype) {
      this.modalName = 'Modal'
      this.modalContent = '调用支付接口返回支付二维码'
      return;
      let o = {
        customid: this.userinfo.id,
        volumn: this.dataForm.volumn
      }
      uni.request({
        url: this.$Request + '/gasuser/custom/getFeeByVolumn',
        data: o,
        method: 'GET',
        success: (result) => {
          const data = result.data;
          if (data.code === 0) {
            let amount = data.data
            let saveDataForm = {
              customid: this.userinfo.id,
              meterid: this.userinfo.meterid,
              branchname: this.userinfo.branchname,
              amount: amount,
              paytype: paytype
            }
            uni.request({
              url: this.$Request + '/wechat/fee/ccbPayOrder',
              data: saveDataForm,
              method: 'POST',
              success: (result) => {
                const data = result.data;
                if (data.code === 0) {
                  location.replace(data.data)
                } else {
                  this.modalName = 'Modal'
                  this.modalContent = data.msg
                }
              },
              fail: (err) => {
                console.log(err);
              },
              complete: (e) => {
              }
            });
          } else {
            this.modalName = 'Modal'
            this.modalContent = data.msg
          }
        },
        fail: (err) => {
          console.log(err);
        },
        complete: (e) => {
        }
      });
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {
  }, // 生命周期 - 创建之前
  beforeMount () {
  }, // 生命周期 - 挂载之前
  beforeUpdate () {
  }, // 生命周期 - 更新之前
  updated () {
  }, // 生命周期 - 更新之后
  beforeDestroy () {
  }, // 生命周期 - 销毁之前
  destroyed () {
  }, // 生命周期 - 销毁完成
  activated () {
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped  lang="scss">
  //@import url(); 引入公共css类

  // 输入框样式
  .appletPage {
    .cu-form-group .title {
      min-width: calc(4em + 15px);
    }

    .nodata-demo {
      img {
        width: 70vw;
        margin-left: 15vw;
      }
    }
  }
</style>

4.后台代码：

// 计算气价
      case 'CESHI_getFeeByVolumn':
            $volumn = $_REQUEST['volumn'];
            $price = $_REQUEST['price'];
            echo $volumn*$price;
      break;
        // 获取一个用户信息
        case 'CESHI_getuserInfo':
            $json_string = file_get_contents('E:wwwjsonFeHelper-20200119163146.json');
            $j= json_decode($json_string);
            echo $json_string;
        break;

5.用户信息数据格式：

{
    "data": [
        {
            "id": "1209690283472470017",
            "customtype": "residenttype",
            "usercode": "1020016985",
            "name": "曹**",
            "branchname": "XXX市收费有限公司",
            "price": 2.95,
            "priceid": "1169134547270692865",
            "balance": 0,
            "metertype": "2",
            "meterid": "1209690283480858625",
            "metercode": "10017343",
            "pricemode": "2",
            "ladderprice": "0,2.95,360,3.1,1080,3.8",
            "totalamount": "null",
            "scrapped": "0"
        }
    ]
}

6.页面操做展示