欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)購(gòu)物車完整版

 更新時(shí)間：2021年07月26日 14:58:29   作者：皮皮灬蝦  
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)購(gòu)物車完整版，實(shí)現(xiàn)加減計(jì)算數(shù)量跟金額，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

小程序?qū)崿F(xiàn)完整購(gòu)物車[全選/反選計(jì)算金額/加減計(jì)算數(shù)量跟金額]，供大家參考，具體內(nèi)容如下

一、wxml頁(yè)面代碼模塊

<view wx:if="{{hasList}}">
  <view class="order_list">
    <view class="order" wx:for="{{list}}" wx:key="{{index}}">
      <view class="xuanze" wx:if="{{item.selected}}" catchtap="selectList" data-index="{{index}}">
        <image src="/images/serch/xuanze.png" />
      </view>
      <view class="xuanze" catchtap="selectList" data-index="{{index}}" wx:else>
        <image src="/images/serch/gouxuan.png" />
      </view>
      <!--列表商品圖片-->
      <view class="order_img">
        <image src="{{item.image}}" />
      </view>
      <view class="order_text">
        <view class="text_top">
          <!--列表標(biāo)題-->
          <view class="title">{{item.title}}</view>
          <view class="detel" catchtap="deletes" data-index="{{index}}">
            <image src="/images/serch/detel.png" />
          </view>
        </view>
        <!--規(guī)格-->
        <view class="size">規(guī)格：{{item.pro_name}}</view>
        <view class="text_bottom">
          <!--價(jià)格-->
          <view class="money">￥{{item.price}}</view>
          <!--商品數(shù)量加減-->
          <view class="number">
            <!--減按鈕-->
            <view class="reduce" catchtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">
              <!--按鈕圖片-->
              <image src="/images/serch/jian-1.png" />
            </view>
            <!--數(shù)量-->
            <view class="numb">{{item.num}}</view>
            <!--加按鈕-->
            <view class="add" catchtap="btn_add" data-index="{{index}}">
              <!--按鈕圖片-->
              <image src="/images/serch/add-1.png" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!--固定底部-->
  <view class="buy">
    <view class="buy_top">
      <view class="top_left">
        <view class="left_img" catchtap="selectAll" wx:if="{{selectAllStatus}}">
          <image src="/images/serch/gouxuan.png" />
        </view>
        <view class="left_img" catchtap="selectAll" wx:else>
          <image src="/images/serch/gouxuan.png" />
        </view>
        <view class="left_name">全選</view>
      </view>
      <view class="top_left">
        <view class="left_img">
          <image src="/images/serch/fenxiang.png" />
        </view>
        <view class="left_name">分享</view>
      </view>
    </view>
    <view class="buy_bottom">
      <view class="buy_left">
        <view class="heji">合計(jì)：￥{{totalPrice}}</view>
      </view>
      <view class="buy_right">
        <!--提交訂單-->
        <view class="liji " catchtap="btn_submit_order">立即購(gòu)買</view>
        <view class="liji two active">預(yù)約試衣</view>
      </view>
    </view>
  </view>
</view>
<!--購(gòu)物車沒(méi)訂單-->
<view wx:else>
  <view class="list_none">購(gòu)物車是空的哦~</view>
</view>

二、樣式代碼

page {
  background-color: rgba(238, 238, 238, 0.5);
}

.order {
  height: 238rpx;
  background-color: #fefeff;
  margin: 27rpx;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
}

.xuanze {
  width: 40rpx;
  height: 40rpx;
  /* background-color: darkgoldenrod; */
  border-radius: 50%;
  margin: 0 11rpx;
}

.xuanze image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.order_img {
  width: 180rpx;
  height: 180rpx;
}

.order_img image {
  width: 100%;
  height: 100%;
  display: block;
}

.order_text {
  margin-left: 20rpx;
  width: 58%;
  height: 180rpx;
}

.text_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  width: 70%;
  font-size: 28rpx;
  color: #4b5248;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.detel {
  width: 30rpx;
  height: 30rpx;
}

.detel image {
  width: 100%;
  height: 100%;
  display: block;
}

.size {
  font-size: 24rpx;
  color: #a8ada6;
}

.text_bottom {
  display: flex;
  margin-top: 50rpx;
  align-items: center;
  justify-content: space-between;
}

.money {
  font-size: 30rpx;
  color: #a5937f;
}

.number {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 170rpx;
}

.reduce {
  width: 46rpx;
  height: 46rpx;
}

.reduce image {
  width: 100%;
  height: 100%;
  display: block;
}

.numb {
  font-size: 30rpx;
  color: #a5937f;
}

.add {
  width: 46rpx;
  height: 46rpx;
}

.add image {
  width: 100%;
  height: 100%;
  display: block;
}

/*購(gòu)買按鈕*/

.buy {
  height: 180rpx;
  width: 696rpx;
  position: fixed;
  left: 27rpx;
  bottom: 41rpx;
  background-color: #555555f3;
  border-radius: 4rpx;
}

.buy_top {
  border-bottom: 1px solid rgb(98, 98, 99);
  height: 75rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top_left {
  display: flex;
  align-items: center;
}

.left_img {
  width: 37rpx;
  height: 37rpx;
  margin: 11rpx;
}

.left_img image {
  width: 100%;
  height: 100%;
  display: block;
}

.left_name {
  font-size: 24rpx;
  color: #fefeff;
  margin-right: 29rpx;
}

.buy_bottom {
  display: flex;
  height: 104rpx;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 30rpx 0rpx 12rpx;
}

.buy_left {
  font-size: 26rpx;
  color: #fff;
}

.buy_right {
  display: flex;
  align-items: center;
}

.liji {
  width: 180rpx;
  height: 70rpx;
  border: 2rpx solid rgba(248, 248, 248, 1);
  box-sizing: border-box;
  border-radius: 4rpx;
  line-height: 70rpx;
  text-align: center;
  font-size: 26rpx;
  color: #FEFEFF;
}
.two{
  margin-left: 12rpx;
}
.active{
  background-color: #A5937F;
  border: none;
}

三、js代碼模塊

Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    hasList: true, //默認(rèn)展示列表數(shù)據(jù)
    //商品列表數(shù)據(jù)
    list: [{
        id: 1,
        title: '園藝大師抗皺精華露',
        image: '/images/serch/2.png',
        pro_name: "30ml",
        num: 1,
        price: 180,
        selected: true
      },
      {
        id: 2,
        title: '伊芙琳玫瑰護(hù)手霜',
        image: '/images/serch/1.png',
        pro_name: "25g",
        num: 1,
        price: 62,
        selected: true
      },
      {
        id: 2,
        title: '燕麥山羊乳舒緩護(hù)手霜',
        image: '/images/serch/2.png',
        pro_name: "75ml",
        num: 1,
        price: 175,
        selected: true
      }
    ],
    //金額
    totalPrice: 0, //總價(jià)，初始為0
    //全選狀態(tài)
    selectAllStatus: true, // 全選狀態(tài)，默認(rèn)全選
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   */
  onShow: function() {
    wx.showToast({
      title: '加載中',
      icon: "loading",
      duration: 1000
    })
    // 價(jià)格方法
    this.count_price();

  },

  /** 當(dāng)前商品選中事件 */
  selectList(e) {
    var that = this;
    //獲取選中的 radio索引
    var index = e.currentTarget.dataset.index;
    //獲取到商品列表數(shù)據(jù)
    var list = that.data.list;
    //默認(rèn)全選
    that.data.selectAllStatus = true;
    //循環(huán)數(shù)組數(shù)據(jù)，判斷--選中/未選中[selected]
    list[index].selected = !list[index].selected;
    //如果數(shù)組數(shù)據(jù)全部為selected[true],全選
    for (var i = list.length - 1; i >= 0; i--) {
      if (!list[i].selected) {
        that.data.selectAllStatus = false;
        break;
      }
    }
    // 重新渲染數(shù)據(jù)
    that.setData({
      list: list,
      selectAllStatus: that.data.selectAllStatus
    })
    // 調(diào)用計(jì)算金額方法
    that.count_price();
  },

  // 刪除
  deletes(e) {
    var that = this;
    // 獲取索引
    const index = e.currentTarget.dataset.index;
    // 獲取商品列表數(shù)據(jù)
    let list = this.data.list;
    wx.showModal({
      title: '提示',
      content: '確認(rèn)刪除嗎',
      success: function(res) {
        if (res.confirm) {
          // 刪除索引從1
          list.splice(index, 1);
          // 頁(yè)面渲染數(shù)據(jù)
          that.setData({
            list: list
          });
          // 如果數(shù)據(jù)為空
          if (!list.length) {
            that.setData({
              hasList: false
            });
          } else {
            // 調(diào)用金額渲染數(shù)據(jù)
            that.count_price();
          }
        } else {
          console.log(res);
        }
      },
      fail: function(res) {
        console.log(res);
      }
    })
  },

  /** 購(gòu)物車全選事件 */
  selectAll(e) {
    // 全選ICON默認(rèn)選中
    let selectAllStatus = this.data.selectAllStatus;
    // true  -----   false
    selectAllStatus = !selectAllStatus;
    // 獲取商品數(shù)據(jù)
    let list = this.data.list;
    // 循環(huán)遍歷判斷列表中的數(shù)據(jù)是否選中
    for (let i = 0; i < list.length; i++) {
      list[i].selected = selectAllStatus;
    }
    // 頁(yè)面重新渲染
    this.setData({
      selectAllStatus: selectAllStatus,
      list: list
    });
    // 計(jì)算金額方法
    this.count_price();
  },

  /** 綁定加數(shù)量事件 */
  btn_add(e) {
    // 獲取點(diǎn)擊的索引
    const index = e.currentTarget.dataset.index;
    // 獲取商品數(shù)據(jù)
    let list = this.data.list;
    // 獲取商品數(shù)量
    let num = list[index].num;
    // 點(diǎn)擊遞增
    num = num + 1;
    list[index].num = num;
    // 重新渲染 ---顯示新的數(shù)量
    this.setData({
      list: list
    });
    // 計(jì)算金額方法
    this.count_price();
  },

  /**
   * 綁定減數(shù)量事件
   */
  btn_minus(e) {
    //   // 獲取點(diǎn)擊的索引
    const index = e.currentTarget.dataset.index;
    // const obj = e.currentTarget.dataset.obj;
    // console.log(obj);
    // 獲取商品數(shù)據(jù)
    let list = this.data.list;
    // 獲取商品數(shù)量
    let num = list[index].num;
    // 判斷num小于等于1  return; 點(diǎn)擊無(wú)效
    if (num <= 1) {
      return false;
    }
    // else  num大于1  點(diǎn)擊減按鈕  數(shù)量--
    num = num - 1;
    list[index].num = num;
    // 渲染頁(yè)面
    this.setData({
      list: list
    });
    // 調(diào)用計(jì)算金額方法
    this.count_price();
  },

  // 提交訂單
  btn_submit_order() {
    var that = this;
    console.log(that.data.totalPrice);

    // 調(diào)起支付
    // wx.requestPayment(
    //   {
    //     'timeStamp': '',
    //     'nonceStr': '',
    //     'package': '',
    //     'signType': 'MD5',
    //     'paySign': '',
    //     'success': function (res) { },
    //     'fail': function (res) { },
    //     'complete': function (res) { }
    //   })
    wx.showModal({
      title: '提示',
      content: '合計(jì)金額-' + that.data.totalPrice + "暫未開發(fā)",
    })
  },

  /**
   * 計(jì)算總價(jià)
   */
  count_price() {
    // 獲取商品列表數(shù)據(jù)
    let list = this.data.list;
    // 聲明一個(gè)變量接收數(shù)組列表price
    let total = 0;
    // 循環(huán)列表得到每個(gè)數(shù)據(jù)
    for (let i = 0; i < list.length; i++) {
      // 判斷選中計(jì)算價(jià)格
      if (list[i].selected) {
        // 所有價(jià)格加起來(lái) count_money
        total += list[i].num * list[i].price;
      }
    }
    // 最后賦值到data中渲染到頁(yè)面
    this.setData({
      list: list,
      totalPrice: total.toFixed(2)
    });
  },

})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JS中的作用域鏈

    JS中的作用域鏈

    本文主要介紹了JS中的作用域鏈的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
    2017-03-03
  • js獲取url參數(shù)代碼實(shí)例分享(JS操作URL)

    js獲取url參數(shù)代碼實(shí)例分享(JS操作URL)

    這篇文章主要介紹了js分析url獲取url參數(shù)，可以獲取?前面部分、#及后面部分，大家看代碼吧
    2013-12-12
  • 如何基于javascript實(shí)現(xiàn)貪吃蛇游戲

    如何基于javascript實(shí)現(xiàn)貪吃蛇游戲

    這篇文章主要介紹了如何基于javascript實(shí)現(xiàn)貪吃蛇游戲,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-02-02
  • 梳理總結(jié)JavaScript的23個(gè)String方法

    梳理總結(jié)JavaScript的23個(gè)String方法

    文章主要介紹了梳理總結(jié)JavaScript的23個(gè)String方法,JavaScript?中的String類型用于表示文本型的數(shù)據(jù)。它是由無(wú)符號(hào)整數(shù)值作為元素而組成的集合,更多詳細(xì)內(nèi)容需要的朋友可以參考一下
    2022-07-07
  • JavaScript事件的委托(代理)的用法示例詳解

    JavaScript事件的委托(代理)的用法示例詳解

    事件委托，也叫事件代理，是JavaScript中綁定事件的一種常用技巧。就是將原本需要綁定在子元素的響應(yīng)事件委托給父元素或更外層元素，讓外層元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)。本文將詳細(xì)為大家介紹JavaScript事件委托的用法，需要的可以參考一下
    2022-01-01
  • 圖片懶加載imgLazyLoading.js使用詳解

    圖片懶加載imgLazyLoading.js使用詳解

    這篇文章主要為大家詳細(xì)介紹了圖片懶加載imgLazyLoading.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-01-01
  • 實(shí)現(xiàn)JavaScript中數(shù)據(jù)響應(yīng)的方法總結(jié)

    實(shí)現(xiàn)JavaScript中數(shù)據(jù)響應(yīng)的方法總結(jié)

    JavaScript 數(shù)據(jù)響應(yīng)是一種重要的前端開發(fā)概念,是指在應(yīng)用程序中的數(shù)據(jù)發(fā)生變化時(shí),能夠自動(dòng)更新與這些數(shù)據(jù)相關(guān)的用戶界面（UI）部分的能力,本文我們來(lái)總結(jié)一下目前可以簡(jiǎn)單實(shí)現(xiàn) JavaScript 中的數(shù)據(jù)響應(yīng)的方法,需要的朋友可以參考下
    2023-09-09
  • JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼

    JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼

    這篇文章主要為大家詳細(xì)介紹了JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-08-08
  • uni-app 自定義底部導(dǎo)航欄的實(shí)現(xiàn)

    uni-app 自定義底部導(dǎo)航欄的實(shí)現(xiàn)

    這篇文章主要介紹了uni-app 自定義底部導(dǎo)航欄的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • fullPage.js和CSS3實(shí)現(xiàn)全屏滾動(dòng)效果

    fullPage.js和CSS3實(shí)現(xiàn)全屏滾動(dòng)效果

    這篇文章主要為大家詳細(xì)介紹了fullPage.js和CSS3實(shí)現(xiàn)全屏滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-05-05

最新評(píng)論