小程序模板

最新推荐文章于 2024-03-10 13:08:22 发布

点点关注不迷路

最新推荐文章于 2024-03-10 13:08:22 发布

阅读量137

点赞数

文章标签：小程序微信小程序 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_51526447/article/details/128905659

版权

此代码段展示了在微信小程序中使用wxml和JS实现待缴费和已缴费的列表展示，包括表格数据绑定、事件监听（如缴费按钮点击）、商品选择（使用checkbox-group）以及总价计算。用户可以查看缴费详情并进行缴费操作。

摘要由CSDN通过智能技术生成

wxml

<van-tabs  active="{{ active }}" bind:change="onChange">
  <van-tab title="待缴费">
  <!-- 缴费列表 -->
    <checkbox-group bindchange="changeCound" class="top">
    <view wx:for="{{goods}}" wx:key="id" class="checkbox">
        <view class="Box">
        <!-- 单个消费item -->
    
<view class="pageSapce">
  <!--表格-->
  <view class="table" bindtap="Opendetails" data-item="{{item}}" >
    <view class="table-wrap">
        <view class="tr">
          <view class="td1">id</view>
          <view class="td2">{{item.id}}</view>
        </view>
        <view class="tr">
          <view class="td1">创建时间</view>
          <view class="td2">2022-02-12 16:00:00</view>
        </view>
        <view class="tr">
          <view class="td1">缴费详情</view>
          <view class="td2">{{item.name}}</view>
        </view>
        <view class="tr">
          <view class="td1">金额/元</view>
          <view class="td2">{{item.price}}元</view>
        </view>
    </view>
  </view>
  <!-- 按钮 -->
  <view class="tablebtn" bindtap="tablebtn" data-item="{{item}}">
  <view>
    缴
  </view>
  <view>
  费
  </view>
  </view>
  
</view>
<view class="pageSapce">
  <!--表格-->
  <view class="table" bindtap="Opendetails" data-item="{{item}}" >
    <view class="table-wrap">
        <view class="tr">
          <view class="td1">id</view>
          <view class="td2">{{item.id}}</view>
        </view>
        <view class="tr">
          <view class="td1">创建时间</view>
          <view class="td2">2022-02-12 16:00:00</view>
        </view>
        <view class="tr">
          <view class="td1">缴费详情</view>
          <view class="td2">{{item.name}}</view>
        </view>
        <view class="tr">
          <view class="td1">金额/元</view>
          <view class="td2">{{item.price}}元</view>
        </view>
    </view>
  </view>
  <!-- 按钮 -->
  <view class="tablebtn" bindtap="tablebtn" data-item="{{item}}">
  <view>
    缴
  </view>
  <view>
  费
  </view>
  </view>
  
</view>

        </view>
    </view>
</checkbox-group>
  </van-tab>
  <van-tab title="已缴费">
    <view wx:for="{{tableList}}" wx:key="id" class="checkbox1">
  <!--表格1-->
  <view class="table1">
    <view class="table-wrap">
        <view class="tr">
          <view class="td1">id</view>
          <view class="td2">2</view>
        </view>
        <view class="tr">
          <view class="td1">创建时间</view>
          <view class="td2">2022-02-12 16:00:00</view>
        </view>
        <view class="tr">
          <view class="td1">缴费详情</view>
          <view class="td2">广西蔚蓝信息科技</view>
        </view>
        <view class="tr">
          <view class="td1">金额/元</view>
          <view class="td2">2000元</view>
        </view>
    </view>
  </view>

</view>
  
  
  
  </van-tab>
</van-tabs>

Page({
  data: {
      goods: [
          {
              id: '1',
              name: '广西蔚蓝信息科技',
              num: 1,
              price: 10,
              isChecked: false,
          },
      ],
      tableList:[
        {
          id: '1',
          name: '广西蔚蓝信息科技',
          num: 1,
          price: 10,
          isChecked: false,
      },   {
        id: '1',
        name: '广西蔚蓝信息科技',
        num: 1,
        price: 10,
        isChecked: false,
    },   {
      id: '1',
      name: '广西蔚蓝信息科技',
      num: 1,
      price: 10,
      isChecked: false,
  }
      ],
      isAllChecked: false,
      totalPrice: 0
  },
  onLoad() {
      this.computedTotalPrice()
  },
  // 点击缴费卡片展示缴费详情
  Opendetails(value){
    // let item=value.currentTarget.dataset.item
    let item=JSON.stringify(value.currentTarget.dataset.item);
    wx.navigateTo({
      url:"/pages/logs/logdetails/logdetails?item="+item,
    })

  },
  // 缴费按钮
  tablebtn(value){
    console.log(value.currentTarget.dataset.item);

  },
  onSubmit(e){
    console.log(this.data.totalPrice);
     wx.request({
     url: 'url',
      method:'POST',
      data:{
       id:"id",//订单编号
     price:"price",//订单金额
     openid:"openid"//openid
   },
   header: {
    'content-type': 'application/json'
  },
  success:(res)=>{
    wx.requestPayment({
      timeStamp: '',
      nonceStr: '',
      package: '',
      signType: 'MD5',
      paySign: '',
      success (res) { },
      fail (res) { }
    })
  },
  fail:(err)=>{
    console.log(err);
  }
 })

  },
  // 单选控制全选
  changeCound(e) {
      console.log(e);
      let checkedArr = e.detail.value
      if (checkedArr.length == this.data.goods.length) {
          let goodsList = JSON.parse(JSON.stringify(this.data.goods))
          goodsList.forEach(item => item.isChecked = true)
          this.setData({
              isAllChecked: true,
              goods: goodsList
          })
      } else {
          let goodsList = JSON.parse(JSON.stringify(this.data.goods))
          goodsList.forEach(item => {
              if (checkedArr.includes(item.id)) {
                  item.isChecked = true
              } else {
                  item.isChecked = false
              }
          })
          this.setData({
              isAllChecked: false,
              goods: goodsList
          })
      }
      this.computedTotalPrice()

  },
  // 全选控制单选
  allChecked(e) {
      if (this.data.isAllChecked) {
          let goodsList = JSON.parse(JSON.stringify(this.data.goods))
          goodsList.forEach(item => item.isChecked = false)  //这里是赋值
          this.setData({
              isAllChecked: false,
              goods: goodsList
          })
      } else {
          let goodsList = JSON.parse(JSON.stringify(this.data.goods))
          goodsList.forEach(item => item.isChecked = true)  //这里是赋值
          this.setData({
              isAllChecked: true,
              goods: goodsList
          })
      }
      this.computedTotalPrice()
  },

  // 计算总价
  computedTotalPrice() {
      let totalPrice = this.data.goods.reduce((total, item) => {
          if (item.isChecked) {
              return total + item.num * item.price
          } else {
              return total
          }
      }, 0)
      this.setData({
          totalPrice: totalPrice
      })
  },

  // 加、减、删除
  handle: function (e) {
      let id = e.currentTarget.dataset.id
      console.log(id);
      var index = e.currentTarget.dataset.index
      var val = `goods[${index}].num`
      let oldnum = this.data.goods.find(item => item.id == id).num
      console.log(oldnum);
      if (e.currentTarget.dataset.name == "mulse") {
          let newNum = oldnum - 1
          if (newNum > 0) {
              this.setData({
                  [val]: newNum
              })
          }else if(newNum == 0){
              let goodsList = JSON.parse(JSON.stringify(this.data.goods))
              let newGoodList=goodsList.filter(item=>item.id!==id)
              this.setData({
                  goods:newGoodList
              })
          }
      }else if(e.currentTarget.dataset.name=="add"){
          let newnum=++oldnum
          this.setData({
              [val]:newnum
          })
      }
      this.computedTotalPrice()
  }
})

css


page {
  background-color: #f8f8f8;
}

.pageSapce{
  display: flex;
margin: 0 20rpx 20rpx 20rpx;  
}

.tablebtn{
  margin-left: 20rpx;
  width: 20%;
  border-radius: 20rpx;
  background-color: #008ad3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 40rpx;
color: white;
font-weight: bold;
}
 /* 表格代码   */
 .table {
   width: 80%;
  border-radius: 20rpx;
  background-color: #fff;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 .tr {
   display: flex;
   width: 100%;
   justify-content: center;
   height: 70rpx;
   align-items: center;
 }

 .td1 {
  width: 30%;
   justify-content: center;
   align-items: center;
   color: #4f4f4f;
   display: flex;
   font-size: 25rpx;
   height: 99%;
  
 }
 .td2 {
  width: 70%;
   justify-content: center;
   align-items: center;
   color: #4f4f4f;
   display: flex;
   font-size: 25rpx;
   height: 99%;
 }
 /*
 用于列表隔行的颜色变化
 */
 .tdColor{
   background:#f7f7f7;
 }

 /*
 表头颜色
 */
 .top {
  margin-top: 20rpx;
overflow: auto;
}
.top .checkbox {
  position: relative;
  width: 100vw;
  /* border: 1px solid #eee; */
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;
}
.top .checkbox .chleft {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.top .checkbox .chleft .cleft {
  margin-left: 15rpx;
  margin-right: 15rpx;
  line-height:200rpx;
}
.top .checkbox .Box {
  flex:1;
  height: 100%;
}
/* 已缴费 */
.table1{
  width: 100%;
  border-radius: 20rpx;
  background-color: #fff;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.checkbox1{
 width: 90%;
 margin: auto;
 margin-top: 20rpx;
 margin-bottom: 20rpx;
}