小程序商城订单支付界面(小程序)

小程序商城订单支付界面(小程序)wxml在此:<!–pages/cart/cart.wxml–><!–当数据为空时–><viewclass=’noData’wx:if=”{{dataList.length==0}}”><viewclass=’noDataImg’><imagesrc=’/images/cart-nodata…

大家好,又见面了,我是你们的朋友全栈君。

wxml在此:

<!--pages/cart/cart.wxml-->
<!-- 当数据为空时 -->
<view class='noData' wx:if="{
  
  {dataList.length == 0}}">
  <view class='noDataImg'>
      <image src='/images/cart-nodata.png'></image>
  </view>
  <view class='noDataText'>您的购物车空空如也,去挑选喜欢的产品吧</view>
  <view class='gotype' catchtap='gotype'>
    去逛逛
  </view>
</view>
<!-- 当数据不为空时 -->
<view wx:else style='margin-bottom:130rpx;'>
    <!-- 商品列表 -->
    <view class='shopList' catchtap='checkThis' data-index='{
  
  {index}}' wx:for="{
  
  {dataList}}" wx:key="shopId">
      <view class="nocheck {
  
  {item.checked?'checkedBox':''}}">
        ✔
      </view>
      <view class='shopInfo'>
        <view class='shopImg'>
            <image src='{
  
  {item.imgUrl}}'></image>
        </view>
        <view class='shopCon'>
          <view class='title'>
            {
  
  {item.title}}
          </view>
          <view class='num'>
            数量{
  
  {item.num}}   {
  
  {item.color}}
          </view>
          <view>
            ¥{
  
  {item.price}}
          </view>
        </view>
      </view>
      <view class='payInfo'>
        <view>
            <view>
              共一件商品 应付 ¥{
  
  {item.money}}
            </view>
            <view class='payBtn' catchtap='signPay'>
              去支付
            </view>
        </view>

      </view>
    </view>
    <!-- 结算栏 -->
    <van-submit-bar
      loading="{
  
  {loading}}"
      price="{
  
  { totalMoney }}"
      button-text="去结算"
      bind:submit="doPay"
      custom-class="payBox"
    >
      <van-tag type="primary" class="checkbox">
        <van-checkbox value="{
  
  { allCheck }}" checked-color="#f44" bind:change="allCheck">全选</van-checkbox>
      </van-tag>
      <!-- <view slot="tip">
        您的收货地址不支持同城送, <text>修改地址</text>
      </view> -->
    </van-submit-bar>
</view>

wxss在此:

/* pages/cart/cart.wxss */
/* 数据为空 */
.noData{
  margin: 200rpx 40rpx 0 40rpx;
  text-align: center
}
.noDataImg{
  width: 100%;
  height: 300rpx;
}
.noDataText{
  font-size: 32rpx;
  margin: 20rpx 0;
  color: #ccc
}
.gotype{
  width: 60%;
  margin:60rpx auto;
  padding: 20rpx 0;
  background: #AE211A;
  color: #f1f1f1
}
/* 数据不为空 */
.nocheck{
  position: absolute;
  top: 80rpx;
  left: 0rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #e3e3e3;
  color:#e3e3e3;
  line-height: 30rpx;
  font-size: 20rpx;  
}
.checkedBox{
  background: #f44;
  color: #fff;
}
.shopList{
  margin:0 20rpx;
  position: relative;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
.shopInfo{
  padding:20rpx 0 20rpx 60rpx;
  display: flex
}
.shopImg{
  width: 160rpx;
  height: 160rpx;
}
.shopCon{
  margin-left: 40rpx;
  font-size: 30rpx;
}
.num{
  padding: 24rpx 0;
  color: #ccc
}
.payInfo{
  padding:20rpx 40rpx;
  border-top: 1px solid #e3e3e3;
  display: flex;
  justify-content: flex-end;
}
.payBtn{  
  width: 100rpx;
  margin-top: 20rpx;
  margin-left: 140rpx;
  text-align: center;
  padding: 10rpx 20rpx;
  color:#f44;
  border: 1px solid #f44
}
.payBox{
  box-shadow: 0 0 10rpx #e3e3e3
}
.checkbox{
  margin-left: 40rpx;
}

js在此:


Page({
  /**
   * 页面的初始数据
   */
  data: {
    allCheck:false,
    loading:false,
    totalMoney:0,
    dataList:[
      { imgUrl:"/images/show.jpg",title:"长袖衬衫春秋新款",num:"1",color:"白色",price:"139.00",money:"500",checked:false},
      { imgUrl: "/images/show.jpg", title: "长袖衬衫春秋新款", num: "1", color: "白色", price: "139.00", money: "500", checked: false },
      { imgUrl: "/images/show.jpg", title: "长袖衬衫春秋新款", num: "1", color: "白色", price: "139.00", money: "500", checked: false },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.isAll()
  },
  gotype(){
    wx.navigateTo({
      url: '/pages/type/type',
    })
  },
  checkThis(e){
    let index = e.currentTarget.dataset.index
    console.log(e)
    let checkIndex = "dataList["+index+"].checked"    
    this.setData({
      [checkIndex]:!this.data.dataList[index].checked
    })
    this.isAll()
  },
  allCheck(e){
    for(let k in this.data.dataList){
      this.data.dataList[k].checked = e.detail
    }
    this.setData({
      allCheck:e.detail,
      dataList:this.data.dataList
    })
    this.isAll()
  },
  // 判断是否全选
  isAll(){
    let checkedNum = 0
    let money = 0
    this.data.dataList.forEach((all) => {
      if (all.checked) {
        checkedNum++
        money += Number(all.money)*100
      }
    })
    if(checkedNum == this.data.dataList.length){
      this.setData({
        allCheck: true,
        totalMoney: money
      })
    }else{
      this.setData({
        allCheck: false,
        totalMoney:money
      })
    }
  },
  signPay(e){
    console.log('支付')
  },
  doPay(e){
    console.log(e)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142898.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • html制作进销存,手把手教你定制属于自己的进销存软件

    html制作进销存,手把手教你定制属于自己的进销存软件接着上一步的继续来更新,上一步设置了入库单和出库单的选择录入问题下面来说一下入库单和出库单的数据保存转移问题在入库单和出库单分别插入两个按钮,然后再模块里写入一下代码Sub入库单录入()a=Sheet3.Range(“a65536”).End(xlUp).RowIfSheet3.Range(“b2”)=””ThenMsgBox”请选择录入供应商名称!”ExitSubEndI…

  • python流程控制

    流程控制概念什么是流程控制?关于声明式编程语言和函数式编程语言详解以上是官方的解释,我们列举一个现实中的实例来具体说明一下Python的条件和循环语句,决定了程序的控制流程,体现结构的多样性。

  • 动态规划经典题目汇总图_离散型动态规划经典题目

    动态规划经典题目汇总图_离散型动态规划经典题目http://www.cppblog.com/doer-xee/archive/2009/12/05/102629.html转载之前先Orz一下:[s:19]Robberies http://acm.hdu.edu.cn/showproblem.php?pid=2955背包;第一次做的时候把概率当做背包(放大100000倍化为整数):在此范围内最多能抢多少钱 最脑残的是把总

    2022年10月28日
  • java时间工具类[通俗易懂]

    java时间工具类[通俗易懂]可以直接复制使用/***字符串转换成日期*根据周数,获取开始日期、结束日期*对日期的【秒】进行加/减*对日期的【分钟】进行加/减*对日期的【小时】进行加/减*对日期的【天】进行加/减*对日期的【周】进行加/减*对日期的【月】进行加/减*对日期的【年】进行加/减*判断字符串是否为日期*今天开始和今天结束时间*/importorg.apache.commons.lang.StringUtils;importorg.joda.time

  • pytest skipif_pytest失败重跑

    pytest skipif_pytest失败重跑前言pytest.mark.skip可以标记无法在某些平台上运行的测试功能,或者您希望失败的测试功能Skip和xfail:处理那些不会成功的测试用例你可以对那些在某些特定平台上不能运行的测试用

  • netty通信框架(socket通信详解)

    个人博客:haichenyi.com。感谢关注  题外话,很多人都把JDK1.4提供的NIO称之为异步非阻塞I/O;其实,并不然,从严格意义上面讲,它只能称为非阻塞I/O。在JDK1.7提供的NIO2.0,新增了异步的套接字通道Channel,它才是真正的异步非阻塞I/O。下表是不同I/O模型的对比:表1-1几种I/O模型和同能对比同步阻塞I/O(BIO)伪异步I/…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号