關於樣式醜的說法，自行改成好看的就好

<style lang="less">
page {
  background: #f4f4f4;
}

.cart-top {
  background: #fff;
  .receive {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
  }
  .address {
    padding: 0 20rpx 20rpx;
  }
  .address-bar {
    display: block;
    width: 750rpx;
 

    height: 15rpx;
  }
}

.list-title {
  border-top: 20rpx #f4f4f4 solid;
  padding: 20rpx;
  border-bottom: 1px #dddddd solid;
  background: #fff;
}

.ware-list {
  padding-bottom: 80rpx;
  background: #fff;
}
.ware-item {
  display: flex;
  padding: 0 20rpx;
}
.choice-button {
  width: 70rpx;
  display
 
: flex;
  align-items: center;
  flex-shrink: 0;
}
.ware-content {
  display: flex;
  flex: 1;
  padding: 20rpx 0;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #f5f5f5 solid;

  .ware-image {
    margin-right: 20rpx;
    image {
      display: block;
      width: 160rpx;
      height
 
: 160rpx;
    }
  }
  .ware-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 20rpx;
  }

  .ware-info {
    flex: 1;
  }

  .ware-info-btm {
    display: flex;
    justify-content: space-between;
    .ware-price {
      font-size: 18px;
      color: #ff6066;
      span {
        font-size: 12px;
      }
    }
  }
}

.cart-total {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 95rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  .total-button {
    box-sizing: border-box;
    padding-left: 20rpx;
    margin-right: 50rpx;
    display: flex;
    align-items: center;

    icon {
      margin-right: 20rpx;
    }
  }

  .total-center {
    flex: 1;
    .colorRed {
      text {
        font-size: 12px;
      }
    }

    .price-tips {
      color: #999;
      font-size: 12px;
    }
  }

  .accounts {
    flex-shrink: 0;
    width: 230rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff6066;
    color: #fff;
  }
}
.calculate {
  display: flex;
  .rect {
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    border: 1px #666 solid;
    text-align: center;
  }
  .number {
    line-height: 50rpx;
    width: 90rpx;
    padding: 5rpx;
    box-sizing: border-box;
    text-align: center;
  }
}

.cart-empty {
  padding: 20rpx;
  background: #fff;
  text-align: center;
}

.empty{
  display: flex;
  padding:100rpx 0;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  
  image{
    width:120rpx;
    height:120rpx;
    margin-bottom:50rpx;
  }
}
</style>
<template>
  <view class="container">

    <view wx:if="{{cartData.length > 0}}">
      <!-- 收貨人資訊 -->
      <view class="cart-top" wx:if="{{address.addr}}">
        <view class="receive">
          <view class="name">
            收貨人: {{address.userName}}
          </view>
          <view class="phonen-number">
            {{address.telNumber}}
          </view>
        </view>
        <view class="address">
          收貨地址: {{address.addr}}
        </view>
        <image src="../images/[email protected]" class="address-bar">
      </view>

      <view class="cart-empty" wx:if="{{!address.addr}}" bindtap="handleAddress">
        新增地址 
      </view>

      <view class="list-title">
        優購生活館
      </view>

      <!-- 購物車列表 -->
      <view class="ware-list">
        <view wx:for="{{cartData}}" wx:key="{{index}}">
          <view class="ware-item">

          <!-- 左側的按鈕 -->
            <view class="choice-button" @tap="handleSelect({{item}})">
              <icon type="success" color="{{item.checked ? 'red' : '#999'}}" size="18"/>
            </view>

            <view class="ware-content">

                <!-- 左側的圖片 -->
              <navigator class="ware-image" url="/pages/goods_detail?goods_id={{item.goods_id}}">
                <image src="{{item.goods_small_logo}}"/>
              </navigator>

              <!-- 右邊的商品資訊 -->
              <view class="ware-info">
                <navigator url="/pages/goods_detail?goods_id={{item.goods_id}}" class="ware-title">
                  {{item.goods_name}}
                </navigator>
                <view class="ware-info-btm">
                  <view class="ware-price">
                    <span>￥</span>{{item.goods_price}}
                  </view>

                  <!-- 修改商品的數量 -->
                  <view class="calculate">
                    <view class="calculate">
                      <view class="rect" @tap="handleCompouted({{item}}, -1)">-</view>
                      <view class="number">{{item.count}}</view>
                      <view class="rect" @tap="handleCompouted({{item}}, 1)">+</view>
                    </view>
                  </view>
                </view>
              </view>

            </view>
          </view>
        </view>
      </view>

      <!-- 結算 -->
      <view class="cart-total">
        <view class="total-button" @tap="handleAllSelect">
          <icon type="success" color="{{allSelect ? 'red' : '#999'}}" size="18"/>全選
        </view>
        <view class="total-center">
          <view class="total-price">
            合計： 
            <text class="colorRed">
              <text>￥</text>{{allPrice}}
            </text>
          </view>
          <view class="price-tips">
            包含運費
          </view>
        </view>
        <view class="accounts" bindtap="handleSubmit" >
          結算({{allCount}})
        </view>
      </view>
    </view>
    <!-- 購物車數量為空的時候 -->
    <view class="empty" wx:if="{{cartData.length == 0}}" >
      <image src="../images/[email protected]"/>
      購物車為空
    </view>
  </view>
</template>

<script>
import wepy from 'wepy';
import cartManage from '../utils/cartManage';
import request from '../utils/request';
import authManage from '../utils/authManage';

/*
  1. 從商品詳情頁新增到購物車 cartManage.add
  2. 動態修改購物車的總價格  cartManage.updatePrice
  3. 修改購物車商品的選中狀態 cartManage.update
  4. 修改購物車商品全選的狀態 cartManage.updataAllChecked
  5. 修改購物車商品的數量  cartManage.update
*/

export default class Cart extends wepy.page {
  config = {
    navigationBarTitleText: '搜尋'
  };

  data = {
    // 儲存購物車列表，預設是空陣列
    cartData: (cartManage.data && cartManage.data.goods) || [],
    allSelect: true,
    allPrice: 0,
    address: {
      userName: '',
      telNumber: '',
      addr: ''
    },
    allCount: cartManage.data.allCount
  };

  onShow() {

    this.updateData();

    // 頁面開啟時候判斷是否是全選
    this.cartData.forEach(v => {
      if (!v.checked) {
        this.allSelect = false;
      }
    });
  }

  // 判斷是否是全選
  isAllSelelct() {
    const { cartData } = this;

    // 只要有一個商品沒選中， 取消全選狀態
    for (let i = 0, v; (v = cartData[i++]); ) {
      if (!v.checked) {
        this.allSelect = false;
        return;
      }

      this.allSelect = true;
    }
  }

  // 更新data資料
  updateData() {
    // 更新data的資料
    this.cartData = cartManage.data.goods;

    // 更新價格
    this.allPrice = cartManage.data.allPrice;

    // 更新總數
    this.allCount = cartManage.data.allCount;
  }

  methods = {
    handleCompouted: function(item, num) {
      item.count += Number(num);

      if (item.count == 0) {
        //  呼叫對話彈窗 wx.showModal
        wx.showModal({
          content: '確定刪除商品嗎？',
          success: res => {
            if (res.confirm) {
              // 點選確定就刪除商品
              cartManage.remove(item);
              this.updateData();
              this.$apply();
            }
          }
        });
      } else {
        cartManage.update(item);
        this.updateData();
      }
    },

    handleSelect: function(item) {
      item.checked = !item.checked;

      cartManage.update(item);

      this.updateData();

      // 判斷是否是全部選中
      this.isAllSelelct();
    },

    // 點選全選時候觸發
    handleAllSelect: function() {
      const { allSelect } = this;
      this.allSelect = !allSelect;

      cartManage.updataAllChecked(this.allSelect);

      // 更新價格
      this.allPrice = cartManage.data.allPrice;
    },

    // 新增收貨地址
    handleAddress: function() {
      wx.chooseAddress({
        success: res => {
          this.address = {
            userName: res.userName,
            telNumber: res.telNumber,
            addr: `${res.provinceName}${res.cityName}${res.countyName}${
              res.detailInfo
            }`
          };

          // 把收貨地址存到本地
          cartManage.addAddr(this.address);
          this.$apply();
        }
      });
    },

    // 提交整個訂單
    handleSubmit: function() {
      // 提交訂單的引數
      const data = {
        order_price: this.allPrice,
        consignee_addr: this.address.addr,
        goods: this.cartData.map(v => {
          return {
            goods_id: v.goods_id,
            goods_number: v.count,
            goods_price: v.goods_price
          };
        })
      };

      // 判斷是否登入
      if (!authManage.isAuth) {
        wx.navigateTo({
          url: '/pages/login'
        });
        return;
      }

      // 提交訂單
      request({
        url: 'api/public/v1/my/orders/create',
        data,
        method: 'POST',
        header: { Authorization: authManage.getToken() },
        success: res => {
          const {data} = res.data;
          this.pay( { order_number: data.order_number } )
        }
      });
    }
  };


  
            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
微信小程式簡陋購物車(邏輯什麼的都有)
     
  
  
  
 關於樣式醜的說法，自行改成好看的就好 
 <style lang="less">
page {
  background: #f4f4f4;
}

.cart-top {
  background: #fff;
  .receive {
    padding: 20rpx;
  

  
 

    

    
    
微信小程式之購物車和父子元件傳值及calc的注意事項
     
  
 
 
  在做微信小程式時，覺得小組裡對購物車的實現不是很完美，就自己嘗試的寫了下，然後用到了父子元件傳值，父子元件傳值的話，和vue框架上是非常相似的，以及calc這個css函式，calc有個注意點，自己不怎麼用，一時間有差點忘了，這裡記錄下
  
 1.效果圖 
 
  
  
 2.子元件實現 
 

  
 

    

    
    
7個黑科技十足的微信小程式，每一個都能讓你念念不舍！
     
  
 
 微信上最為出名的想必就最為小程式了！基本上與現有的軟體也就相差毫幾，有些人為了免下軟體幾乎都用上了，那為什麼有那麼多人都鍾愛於小程式呢？其關鍵原因就是方便，只要用微信一個軟體，就可以隨意使用任何小程式了！ 
 那麼今天小編在這裡就為大家分享7個非常好用的微信小程式，個個都黑科技十足！讓你念念不舍。  

  
 

    

    
    
5個伴你成長的微信小程式，每一個都是一等一的小能手！
     
  
 
 每個小程式的出現都各有各的用途，而每個小程式也不可能都深受大家的討厭，也不可能大家都會喜歡，各有各的好，用的上就不錯，所以，今天給大家分享5個伴你成長的微信小程式，希望大家能夠喜歡。 
 1.實驗樓 
 一款海量學習課程的工具 
 這款小程式的分類是非常明確的，所包含的課成也是對大家有幫助的，如we 

  
 

    

    
    
微信小程式之購物車--商城系列
     
 // pages/shopcart/shopcart.jsPage({  /**   * 頁面的初始資料   */   data: {    'iscart': false, //控制購物車有沒有資料    'goodList': [      {        'cover': '/assets/image 

  
 

    

    
    
微信小程式實現購物車功能
     
 
                 在我的GitHub上有校園二手交易微信小程式的原始碼，這裡麵包含了購物車的功能，GitHub地址：https://github.com/zhuyuzhu/Secondhand-goods-on-campus，該專案的pages資料夾下的shoppingCart資料夾就是購物 

  
 

    

    
    
微信小程式 前端原始碼邏輯和工作流詳解
     
 
                

看完微信小程式的前端程式碼真的讓我熱血沸騰啊，程式碼邏輯和設計一目瞭然，沒有多餘的東西，真的是大道至簡。

廢話不多說，直接分析前端程式碼。個人觀點，難免有疏漏，僅供參考。

檔案基本結構：



 先看入口app.js，app(obj)註冊一個小程式。接受一個 obje 

  
 

    

    
    
微信小程式實戰專案-邏輯層簡單介紹
     
 
								
								            
						
                邏輯層這邊我主要分為三個模組進行介紹：1.頁面函式的生命週期2.頁面路由介紹3.js模組化一、App()函式的生命週期Page()函式的生命週期二、頁面路由介紹頁面路由幾種方式：頁面路由出發時機和相應的 

  
 

    

    
    
微信小程式，大多數人都搞錯的八個問題
     
 
							
							
							
  宣告：本文為CSDN原創投稿文章。  
  作者：王安，數字天堂DCloud公司創始人兼CEO 
  責編：陳秋歌，關注微信開發等領域，尋求報道或者投稿請發郵件chenqg#csdn.net。研發心得、專案實戰、前沿技術、外文翻譯……，只要是技術乾貨，十分 

  
 

    

    
    
uniapp 開發【微信小程式簡陋登入模組】
     
 
                                        
                                                <script>      export default {     

  
 

    

    
    
使Atom支援微信小程式程式碼格式wxml,wxss有顏色（高亮）
     
 
								
								            
							
							
							在用Atom來瀏覽或者編輯微信小程式時的介面時全灰色文字怎麼辦？！！
如何讓wxml和wxs格式的程式碼像HTML,CSS變成高亮的呢。。
就像這樣  ↓↓↓↓↓↓↓

修改步驟如下
1.在Atom中裝 

  
 

    

    
    
微信小程式-切換tab頁並且有資料攜帶
     
 
                
微信小程式還處於內測階段，最不方便的莫過於官方在不停的更新，前幾天寫的功能隔個幾天忽然發現不能用了_(:зゝ∠)_
功能需求如下：
我在首頁點選“5萬以上”他會把跳轉到買車頁然後同時把“5萬以上”這個篩選條件帶到買車頁。

之前navigator導航是可以跳轉並攜帶資料的， 

  
 

    

    
    
微信小程式（看文件寫例項十）微信小程式課堂寶APP實現我的模組相關介面及邏輯
     
  
 
 繼上篇博文，這篇完成最後一個模組，即我的模組。 
 一、頁面效果 
 這個模組是和使用者型別相關的，因此老師賬號和學生賬號能看的功能不一樣，老師端效果如下： 
  
 點選頭像到達個人資訊如下： 
  
 點選後可以做相應的修改。學生端的介面如下： 
  
 修改密碼的頁面如下： 
  
 &nbs 

  
 

    

    
    
微信小程式（看文件寫例項六）微信小程式課堂寶APP實現簽到邏輯
     
  
 
 繼上篇博文，這篇寫下籤到實現的邏輯。 
 一、實現邏輯 
 發起簽到 
 1、先上傳當前自己的定位經緯度 
 2、學生查詢老師的最後一次簽到記錄，如果發現簽到記錄signComplete為false說明有新的簽到 
 3、得到簽到的第幾次課 
 4、系統獲得學生的定位經緯度 
 5、判斷兩點經緯度轉 

  
 

    

    
    
微信小程式-06 tab選項卡滑動切換與列表Item（scroll 、 swiper）資料的獲取等所用到的都有了
     
  
 
 目錄 
   
 示例圖片 
 WXML 
 js 
 WXSS 
 
 示例圖片 
  
 WXML 
 <view >
    <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}} 

  
 

    

    
    
4個無敵好用的微信小程式，用了你都離不開
     
 
 自從有了微信小程式，平均每天開啟微信的次數在急劇增加，因為微信小程式，無需下載，無需安裝，不佔手機記憶體，卻還有和手機APP同樣強大的功能，讓很多人受益。以下是我手機裡4個無敵好用的微信小程式，用了保證你都離不開。
 
 
 
 1.胖次工具箱
 一個簡潔、無廣告的多功能工具箱
 
 
 這個小程式真的是 

  
 

    

    
    
Atitit 微信小程式的部署流程文件 目錄 1.1. 設定https 參照 Atitit tomcat linux 常用命令 1 1.2. 增加證書 騰訊雲和阿里雲都可申請免費證書，但要一天
     
  
 
 Atitit 微信小程式的部署流程文件 
   
 目錄 
 1.1. 設定https  參照 Atitit tomcat linux 常用命令 1 
 1.2. 增加證書   騰訊雲和阿里雲都可申請免費證書，但要一天稽核  可以淘寶購買證書快速寫  

  
 

    

    
    
微信小程式——學習筆記（二）：邏輯層（1）
     
  
 
 邏輯層將資料進行處理後傳送給檢視層，同時接受檢視層的事件反饋。
 用App()函式註冊一個小程式。
 當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
 當小程式從前臺進入後臺，會觸發 onHide
 當小程式發生指令碼錯 

  
 

    

    
    
4個別人都愛用的微信小程式，快來親自體驗一下啦！
     
  
 
 自從小程式正式啟用後，小程式可以幫我們解決不少難題了，它的最大好處就是不用下載，使用起來方便快速，因此獲得了很多朋友的喜愛，今天為大家整理了5個超棒的微信小程式，還沒用用過的朋友可以使用一下哦！ 
 1.王大嬸冥想 
 這是一個與智慧機器人聊天的冥想小程式，王大嬸兒用聊天對話的形式提供多種服務，有煩 

  
 

    

    
    
微信小程式 自定義單選複選按鈕組的實現(用於實現購物車產品列表功能)
     
   
（一）單選按鈕組 
模型圖如下：  
 
index.js 
 
 Page({
  data: {
    parameter: [{ id: 1, name: '銀色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模擬商