在网上找了关于记录消费情况的小程序模板,并进行了适当的修改,个人感觉“海星”
图二是套用了微信提供的表单组件中的picker-view,很方便;而图三是用代码写出来的计算器
1 <!--pages/record-expend/record-expend.wxml-->
2 <view class="ui-height-100" bindtap="hiddenCaculator">
3
4
5 <!--用途-->
6 <view class="select-consumption-patterns ui-pt20">
7 <view class="consumption-patterns-item" wx:for="{{consumpPatternsList}}">
8 <view class=" ui-flex-ver ui-flex-center ui-p10" data-index="{{index}}" bindtap="onConsumptionItemClick">
9 <image class="consumption-patterns-item-icon" src="{{item.isSelect ? item.iconSel : item.icon}}"></image>
10 <text>{{item.name}}</text>
11 </view>
12 </view>
13 </view>
14
15 <!--横线-->
16 <view class="line ui-mt20">
17 </view>
18 <view class="pay-money">
19 <image class="money-icon" src="../../pages/img/date.png"></image>
20 <text class="ui-ml20">日期</text>
21 <picker class="date-text" mode="date" value="{{date}}" end="{{todayDate}}" bindchange="onDateChange">
22 <view>{{date}}
23 </view>
24 </picker>
25 </view>
26
27 <!--横线-->
28 <view class="line">
29 </view>
30 <view class="pay-money" catchtap="showCaculator">
31 <image class="money-icon" src="../../pages/img/money.png"></image>
32 <text class="ui-ml20">花费</text>
33 <text class="money-text">{{spendMoney}}</text>
34 </view>
35
36 <!--横线-->
37 <view class="line">
38 </view>
39 <view class="pay-money">
40 <image class="money-icon" src="../../pages/img/remarks.png"></image>
41 <input class="ui-ml20 ui-flex-1" bindinput="onInputRemarks" value="{{remarksText}}" type="text" placeholder="备注:{{selectName}}" />
42 </view>
43
44 <!--横线-->
45 <view class="line">
46 </view>
47 <!--按钮-->
48 <view bindtap="goContinueTap">
49 <button class="blue-button ui-mt20" hover-class="blue-button-p" bindtap="confirmData">完成</button>
50 </view>
51
52
53 <block wx:if="{{isShowCaculator}}">
54 <view class="calculator">
55 <view class="calculator-number">
56 <view class="calculator-number-item">
57 <view hover hover-class="number-hover" class="number" data-num="1" catchtap="touchNum">1</view>
58 <view hover hover-class="number-hover" class="number" data-num="2" catchtap="touchNum">2</view>
59 <view hover hover-class="number-hover" class="number" data-num="3" catchtap="touchNum">3</view>
60 </view>
61 <view class="calculator-number-item">
62 <view hover hover-class="number-hover" class="number" data-num="4" catchtap="touchNum">4</view>
63 <view hover hover-class="number-hover" class="number" data-num="5" catchtap="touchNum">5</view>
64 <view hover hover-class="number-hover" class="number" data-num="6" catchtap="touchNum">6</view>
65 </view>
66 <view class="calculator-number-item">
67 <view hover hover-class="number-hover" class="number" data-num="7" catchtap="touchNum">7</view>
68 <view hover hover-class="number-hover" class="number" data-num="8" catchtap="touchNum">8</view>
69 <view hover hover-class="number-hover" class="number" data-num="9" catchtap="touchNum">9</view>
70 </view>
71 <view class="calculator-number-item">
72 <view hover hover-class="number-hover" class="number" data-num="." catchtap="touchNum">.</view>
73 <view hover hover-class="number-hover" class="number" data-num="0" catchtap="touchNum">0</view>
74 <view hover hover-class="number-hover" class="number" catchtap="touchClear">←</view>
75 </view>
76 </view>
77 <view class="calculator-operator">
78 <view hover hover-class="number-hover" class="operator" data-num="+" catchtap="touchNum">+</view>
79 <view hover hover-class="number-hover" class="operator" catchtap="touchResult">=</view>
80 </view>
81 </view>
82 </block>
83
84 </view>