微信小程序实战之实现微信支付+购物车功能，还可以在线填写资料哦！寺庙必备小程序功能

我们来看看一下效果图吧！

我是用微信开发工具的，所以到了支付功能会提示用二维码扫描，如果在真机上就是支付弹框输入支付密码的页面了！

 

---

 这个页面的功能如下

1、典型的购物车，勾选价格与物品件数都发生变换

2、在线填写信息，支付的时候回把页面上的信息全部都存储数据库里面

3、微信支付功能

---

这个页面的wxml如下

<view class='header1'>
  <view class='header'>
    <view class='header_con flex_between'>
      <view class='left'>
        共计{
  {items.length}}件商品
      </view>
    </view>
  </view>
</view>

<view class='header2'>
  <view class='header'>
    <view class='header_con flex_between'>
      <input value='牌位列表' disabled='{
  {title_disabled}}' focus="{
  {!title_disabled}}">
      </input>
    </view>
  </view>
</view>

<!-- 以上无标签缺少 -->
<view class='onlinechoose'>
  <view class='hotel_list flex_center' wx:for="{
  {items}}" wx:key="items" wx:for-item="i">
    <view class='list_cons flex_start'>

<!-- 单选 -->
      <view data-id="{
  {index}}" data-variable="{
  {i}}" bindtap='select'>
        <view wx:if="{
  {management_good}}" class='lefts'>
          <block wx-if="{
  {!i.checked}}">
            <view class='icon_none'></view>
          </block>
          <block wx-if="{
  {i.checked}}">
            <icon type="success" size="30" color="red" />
          </block>
        </view>
      </view>
<!-- 单选 -->

      <view class='right'>
    
        <view class='name'>
          <view style="background-color:red;color:white">{
  {i.father}}</view>
          <view class="nb">
            <input value="{
  {i.fname}}" placeholder="请填写姓名" bindblur="eidtfname" data-id="{
  {index}}" class="instyle" />
          </view>
        </view>

        <view class='name'>
          阳上
          <view class="na"> {
  {i.child}} </view>
          <view class="na">
            <input value="{
  {i.cname}}" placeholder="请填写姓名" bindblur="eidtcname" data-id="{
  {index}}" class="instyle" />
          </view>
        </view>

        <view class='name'>
          地址
          <view class="nb">
            <input value="{
  {i.address}}" bindblur="eidtadd" data-id="{
  {index}}" class="instyle" placeholder="请填写地址"></input>
          </view>
        </view>

        <view class='name'>
          牌价{
  {i.price}}
          <view class="sign-setting-border {
  {i.price==50?'selected':''}} " bindtap="selectApply" data-id="50" data-pr="{
  {index}}">大牌位</view>
          <view class="sign-setting-border {
  {i.price==500?'selected':''}}" bindtap="selectApply" data-id="500" data-pr="{
  {index}}">小牌位</view>
          </view>

      </view>
      <!-- right -->
    </view>
    <!-- 一个小的for循环 -->
  </view>
  <!-- 完整的 -->
</view>
<!-- 大封口 -->


<!-- 姓名 -->
<view class="vname"