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

小程序商城订单支付界面(小程序)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)


相关推荐

  • 计算机病毒的活性,计算机病毒的特性

    计算机病毒的活性,计算机病毒的特性计算机病毒一般具有以下特性:1.计算机病毒的程序性(可执行性)计算机病毒与其他合法程序一样,是一段可执行程序,但它不是一个完整的程序,而是寄生在其他可执行程序上,因此它享有一切程序所能得到的权力。在病毒运行时,与合法程序争夺系统的控制权。计算机病毒只有当它在计算机内得以运行时,才具有传染性和破坏性等活性。也就是说计算机CPU的控制权是关键问题。若计算机在正常程序控制下运行,而不运行带病毒的程序,…

  • 音频编辑大师 3.3 注册名称 许可证

    音频编辑大师 3.3 注册名称 许可证

    2021年12月31日
  • Redis Sentinel 与 Redis Cluster

    Redis Sentinel 与 Redis Cluster一、前言互联网高速发展的今天,对应用系统的抗压能力要求越来越高,传统的应用层+数据库已经不能满足当前的需要。所以一大批内存式数据库和Nosql数据库应运而生,其中redis,memcache,mongodb,hbase等被广泛的使用来提高系统的吞吐性,所以如何正确使用cache是作为开发的一项基技能。本文主要介绍RedisSentinel及RedisCluster的区别及用法,Redi…

    2022年10月26日
  • Python 一行代码输出心形图案

    Python 一行代码输出心形图案Python3pythonprint('\n'.join([''.join([('Love'[(xy)%4]if((x0.05)2+(y0.

  • Apache日志分析_shell命令行

    Apache日志分析_shell命令行

  • Mutex的lock(), tryLock()区别[通俗易懂]

    Mutex的lock(), tryLock()区别[通俗易懂]lock函数和tryLock函数都是用于锁定对象,但他们之间有一定的区别:lock函数是阻塞的,因为它调用WaitForSingleObject函数时传递的第二个参数是INFINITE,表示无限等待下去,所以是阻塞的。tryLock函数时非阻塞的,调用后立即返回。因为它调用WaitForSingleObject函数时传递的第二个参数是0,表示不等待,立即返回。调用lock或者tryLoc

    2022年10月16日

发表回复

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

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