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

时间：2024-03-01 18:55:42

1.页面

 

 

 

 

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

 

 

 

3.页面代码：

 

  1 <!--
  2   文件描述：预付费页面
  3   创建时间：2020/1/19 14:37
  4   创建人：Administrator
  5 -->
  6 <template>
  7   <view class="appletPage appletPage-prepayment">
  8     <cu-custom bgColor="bg-gradual-blue" :isBack="true">
  9       <block slot="backText">返回</block>
 10       <block slot="content">预付费页面</block>
 11     </cu-custom>
 12     <view class="cu-modal" :class="modalName==\'Modal\'?\'show\':\'\'" @tap="hideModal">
 13       <view class="cu-dialog">
 14         <view class="cu-bar bg-white justify-end">
 15           <view class="content">提示</view>
 16           <view class="action" @tap="hideModal">
 17             <text class="cuIcon-close text-red"></text>
 18           </view>
 19         </view>
 20         <view class="padding-xl">
 21           {{modalContent}}
 22         </view>
 23       </view>
 24     </view>
 25 
 26     <view class="cu-modal bottom-modal" :class="modalName==\'ChooseModal\'?\'show\':\'\'" @tap="hideModal">
 27       <view class="cu-dialog" @tap.stop="">
 28         <view class="cu-bar bg-white">
 29           <view class="action text-green" @tap="hideModal">确定</view>
 30         </view>
 31         <view class="grid col-3 padding-sm">
 32           <view v-for="(item,index) in checkboxVolumn" class="padding-xs" :key="index">
 33             <button class="cu-btn orange lg block" :class="item.checked?\'bg-orange\':\'line-orange\'" @tap="ChooseCheckbox"
 34                     :data-value="item.value"> {{item.name}}
 35               <view class="cu-tag sm round" :class="item.checked?\'bg-white text-orange\':\'bg-orange\'" v-if="item.hot">
 36                 HOT
 37               </view>
 38             </button>
 39           </view>
 40         </view>
 41       </view>
 42     </view>
 43 
 44     <form>
 45       <view class="cu-form-group">
 46         <view class="title">用户号</view>
 47         <input placeholder="请输入用户号" name="input" v-model="userinfo.usercode" disabled></input>
 48       </view>
 49       <view class="cu-form-group">
 50         <view class="title">用户名</view>
 51         <input name="input" v-model="userinfo.name" disabled></input>
 52       </view>
 53       <view class="cu-form-group">
 54         <view class="title">所属公司</view>
 55         <input name="input" v-model="userinfo.branchname" disabled></input>
 56       </view>
 57       <view class="cu-form-group">
 58         <view class="title">气价</view>
 59         <input name="input" v-model="userinfo.price" disabled></input>
 60       </view>
 61       <view class="cu-form-group">
 62         <view class="title">
 63           {{userinfo.balancename}}
 64         </view>
 65         <input name="input" v-model="userinfo.balance" disabled></input>
 66       </view>
 67       <view class="cu-form-group">
 68         <view class="title">充气量</view>
 69         <input name="input" placeholder="请输入充气量" type="number" v-model="dataForm.volumn" @change="changeVolumn"></input>
 70         <button class=\'cu-btn bg-green shadow\' @click="chooseVolumn">选择</button>
 71       </view>
 72       <view class="cu-form-group">
 73         <view class="title">金额</view>
 74         <input name="input" v-model="dataForm.amount" disabled></input>
 75         <text class=\'cuIcon-refund text-orange\'></text>
 76       </view>
 77     </form>
 78     <view class="margin-tb-sm text-center">
 79       <button class="cu-btn round bg-blue lg" style="margin-right: 15px;" @click="ccbPay(\'qr\')">二维码支付</button>
 80       <button class="cu-btn round bg-cyan lg" @click="ccbPay(\'card\')">建行卡支付</button>
 81     </view>
 82   </view>
 83 </template>
 84 
 85 <script>
 86 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 87 // 例如：import 《组件名称》 from \'《组件路径》\';
 88 // 例如：import uploadFile from \'@/components/uploadFile/uploadFile\'
 89 
 90 export default {
 91   name: \'payment\',
 92   // import引入的组件需要注入到对象中才能使用
 93   components: {},
 94   data () {
 95     // 这里存放数据
 96     return {
 97       modalName: null,
 98       modalContent: \'提示内容\',
 99       userinfo: {
100         usercode: \'\',
101         name: \'\',
102         branchname: \'\',
103         price: \'\',
104         balance: 0,
105         balancename: \'当前余额\',
106         customid: \'\',
107         meterid: \'\'
108       },
109       dataForm: {
110         amount: 0,
111         volumn: \'\'
112       },
113       requestParams: {
114         page: 1,
115         limit: 10
116       },
117       banner: {},
118       checkboxVolumn: [{
119         value: 50,
120         name: \'50m³\',
121         checked: false,
122         hot: false,
123       }, {
124         value: 100,
125         name: \'100m³\',
126         checked: false,
127         hot: false,
128       }, {
129         value: 200,
130         name: \'200m³\',
131         checked: false,
132       }, {
133         value: 300,
134         name: \'300m³\',
135         checked: false
136       }, {
137         value: 500,
138         name: \'500m³\',
139         checked: false
140       }, {
141         value: 1000,
142         name: \'1000m³\',
143         checked: false
144       }]
145     }
146   },
147   // 监听属性 类似于data概念
148   computed: {},
149   // 方法集合
150   methods: {
151     onLoad(event) {
152       // 目前在某些平台参数会被主动 decode，暂时这样处理。
153       try {
154         this.banner = JSON.parse(decodeURIComponent(event.query));
155       } catch (error) {
156         this.banner = JSON.parse(event.query);
157       }
158       this.userinfo.usercode = this.banner.usercode
159       this.getUserInfo()
160     },
161     hideModal(e) {
162       this.modalName = null
163     },
164     getUserInfo () {
165       this.banner.act = \'CESHI_getuserInfo\'
166       uni.request({
167         url: this.$Request,
168         data: this.banner,
169         method: \'GET\',
170         success: (result) => {
171           const data = result.data;
172           console.log(data)
173           if (result.statusCode === 200) {
174             Object.assign(this.userinfo, data.data[0]);
175             if (this.userinfo.balance !== null) {
176               if (this.userinfo.balance > 0) {
177                 this.userinfo.balancename = \'当前欠费\'
178               } else {
179                 this.userinfo.balancename = \'当前余额\'
180                 this.userinfo.balance = -this.userinfo.balance
181               }
182             }
183           } else {
184             this.modalName = \'Modal\'
185             this.modalContent = \'失败\'
186           }
187         },
188         fail: (err) => {
189           console.log(err);
190         },
191         complete: (e) => {
192         }
193       });
194     },
195     chooseVolumn () {
196       this.modalName = \'ChooseModal\'
197     },
198     changeVolumn () {
199       if(Number(this.dataForm.volumn < 0)){
200         this.modalName = \'Modal\'
201         this.modalContent = \'气量不能小于0！\'
202         return
203       }
204       let o = {
205         price: this.userinfo.price,
206         customid: this.userinfo.id,
207         volumn: this.dataForm.volumn,
208         act: \'CESHI_getFeeByVolumn\'
209       }
210       uni.request({
211         url: this.$Request,
212         data: o,
213         method: \'GET\',
214         success: (result) => {
215           const data = result;
216           if (result.statusCode === 200) {
217             let amount = data.data
218             this.dataForm.amount = amount
219           } else {
220             this.modalName = \'Modal\'
221             this.modalContent = \'计算金额失败\'
222           }
223         },
224         fail: (err) => {
225           console.log(err);
226         },
227         complete: (e) => {
228         }
229       });
230     },
231     ChooseCheckbox(e) {
232       let items = this.checkboxVolumn;
233       let values = e.currentTarget.dataset.value;
234       console.log(values)
235       if(this.dataForm.volumn !== values){
236         this.dataForm.volumn = values
237         for (let i = 0, lenI = items.length; i < lenI; ++i) {
238           if (items[i].value == values) {
239             items[i].checked = true;
240           }else{
241             items[i].checked = false
242           }
243         }
244       }else{
245         this.dataForm.volumn = \'\'
246         for (let i = 0, lenI = items.length; i < lenI; ++i) {
247           items[i].checked = false
248         }
249       }
250       if(this.dataForm.volumn !== \'\'){
251         this.changeVolumn()
252       }else{
253         this.dataForm.amount = 0
254       }
255 
256     },
257     ccbPay (paytype) {
258       this.modalName = \'Modal\'
259       this.modalContent = \'调用支付接口返回支付二维码\'
260       return;
261       let o = {
262         customid: this.userinfo.id,
263         volumn: this.dataForm.volumn
264       }
265       uni.request({
266         url: this.$Request + \'/gasuser/custom/getFeeByVolumn\',
267         data: o,
268         method: \'GET\',
269         success: (result) => {
270           const data = result.data;
271           if (data.code === 0) {
272             let amount = data.data
273             let saveDataForm = {
274               customid: this.userinfo.id,
275               meterid: this.userinfo.meterid,
276               branchname: this.userinfo.branchname,
277               amount: amount,
278               paytype: paytype
279             }
280             uni.request({
281               url: this.$Request + \'/wechat/fee/ccbPayOrder\',
282               data: saveDataForm,
283               method: \'POST\',
284               success: (result) => {
285                 const data = result.data;
286                 if (data.code === 0) {
287                   location.replace(data.data)
288                 } else {
289                   this.modalName = \'Modal\'
290                   this.modalContent = data.msg
291                 }
292               },
293               fail: (err) => {
294                 console.log(err);
295               },
296               complete: (e) => {
297               }
298             });
299           } else {
300             this.modalName = \'Modal\'
301             this.modalContent = data.msg
302           }
303         },
304         fail: (err) => {
305           console.log(err);
306         },
307         complete: (e) => {
308         }
309       });
310     }
311   },
312   // 监控data中的数据变化
313   watch: {},
314   // 生命周期 - 创建完成（可以访问当前this实例）
315   created () {
316 
317   },
318   // 生命周期 - 挂载完成（可以访问DOM元素）
319   mounted () {
320 
321   },
322   beforeCreate () {
323   }, // 生命周期 - 创建之前
324   beforeMount () {
325   }, // 生命周期 - 挂载之前
326   beforeUpdate () {
327   }, // 生命周期 - 更新之前
328   updated () {
329   }, // 生命周期 - 更新之后
330   beforeDestroy () {
331   }, // 生命周期 - 销毁之前
332   destroyed () {
333   }, // 生命周期 - 销毁完成
334   activated () {
335   } // 如果页面有keep-alive缓存功能，这个函数会触发
336 }
337 </script>
338 
339 <style scoped  lang="scss">
340   //@import url(); 引入公共css类
341 
342   // 输入框样式
343   .appletPage {
344     .cu-form-group .title {
345       min-width: calc(4em + 15px);
346     }
347 
348     .nodata-demo {
349       img {
350         width: 70vw;
351         margin-left: 15vw;
352       }
353     }
354   }
355 </style>
列表页面代码

 

 

 

4.后台代码：

 

// 计算气价
      case \'CESHI_getFeeByVolumn\':
            $volumn = $_REQUEST[\'volumn\'];
            $price = $_REQUEST[\'price\'];
            echo $volumn*$price;
      break;
        // 获取一个用户信息
        case \'CESHI_getuserInfo\':
            $json_string = file_get_contents(\'E:\www\json\FeHelper-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.页面操做展示

 

相关文章