<scroll-view class='scroll' scroll-y="{{true}}" bindscrolltolower="scrolltolower">
 <view class="tabs">
 <block wx:for="{{ tabs }}" wx:key='{{ index }}'>
 <view bind:tap="changeTab" data-index='{{ index }}' class="tab {{ tabindex === index ? 'active' : '' }}">{{ item }}</view>
 </block>
 </view>
 <view style="height: 80rpx"></view>
 <view>
 <block wx:for="{{ goods }}" wx:key="{{ index }}">
 <view class="content">
 <view class="conbg">
  <view class="con-top">
  <view class="shopname iconfont icon-right ellipsis">{{ item.shopName }}</view>
  <view class="good-status" wx:if="{{item.goodStatus==0}}">賣家未發(fā)貨</view>
  <view class="good-status" wx:if="{{item.goodStatus==1}}">賣家已發(fā)貨</view>
  </view>
  <view class="goodinfo">
  <!-- 商品圖 -->
  <image class="goodimg" src="{{ item.goodImg }}" mode="scaleToFill"></image>
  <!-- 商品信息 -->
  <view class="good-info">
  <view class="good-title ellipsis2">{{ item.goodName }}</view>
  <view class="good-desc ellipsis2">{{ item.goodDesc }}</view>
  <view class="shop-server">
  <text wx:for="{{ item.shopServers }}" wx:key="{{ index }}">{{ item }}</text>
  </view>
  </view>
  <view class="good-price">
  <view class="price">￥ {{ item.goodPrice }}</view>
  <!-- 購買商品個數(shù) -->
  <view class="num">x {{ item.goodNum }}</view>
  </view>
  </view>
  <!-- 商品總計 -->
  <view class="total">
  <!-- <text>共{{ goodNum }}件商品</text> -->
  <text>合計: ￥{{ item.goodTotalPrice }}</text>
  </view>
  <view class="operate">
  <view class="check-delivery">查看物流</view>
  <view>
  <view class="comfirm-delivery">確認(rèn)收貨</view>
  </view>

  </view>
 </view>
 </view>
 </block>
 <block wx:if="{{goods==''}}">
 <view class='goodsmsg'>
 <image class='tab1Img' src="../images/order.png"></image>
 <text>你暫時還沒有商品~</text>
 <text class='buyMore'>去逛逛~</text>
 </view>
 </block>
 </view>
 <view class="no-more" wx:if='{{ hasMore}}'>加載中...</view>
 <view class="no-more" wx:else>已經(jīng)到底了...</view>
</scroll-view>

.tabs {
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 width: 100%;
 height: 80rpx;
 top: 0;
 left: 0;
 background: #f2f2f2;
}
.tabs .tab {
 padding: 0 32rpx;
 font-size: 28rpx;
 height: 76rpx;
 line-height: 76rpx;
 color: #666;
 border-bottom: 4rpx solid transparent;
}
.tabs .tab.active {
 border-bottom-color: #e94a01;
 color: #e94a01;
}
.content {
 padding: 20rpx;
 box-sizing: border-box;
}
.content .conbg {
 background-color: #fff;
 box-sizing: border-box;
 border-radius: 20rpx;
 padding: 0 20rpx 20rpx;
}
.con-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 24rpx;
 height: 76rpx;
 line-height: 76rpx;
}
.shopname {
 font-size: 24rpx;
}
.shopname:after {
 color: #666;
 margin-left: 10rpx;
}
.good-status {
 flex-shrink: 0;
 margin-left: 20rpx;
 color: #e94a01;
}
.goodinfo {
 display: flex;
}
.goodinfo .goodimg {
 width: 188rpx;
 height: 188rpx;
 border-radius: 10rpx;
 flex-shrink: 0;
 margin-right: 20rpx;
}
.goodinfo .good-info {
 font-size: 28rpx;
}
.goodinfo .good-info .good-title {
 font-weight: bold;
}
.goodinfo .good-info .good-desc {
 color: #666;
}
.goodinfo .good-info .shop-server {
 display: flex;
 margin-top: 10rpx;
 flex-wrap: wrap;
}
.goodinfo .good-info .shop-server text {
 padding: 6rpx;
 margin-right: 10rpx;
 background-color: rgba(211, 94, 36, 0.2);
 color: #cc602f;
 font-size: 20rpx;
 margin-bottom: 10rpx;
 border-radius: 6rpx;
}
.goodinfo .good-price {
 flex-shrink: 0;
 font-size: 24rpx;
 display: flex;
 flex-direction: column;
}
.goodinfo .good-price .price {
 font-weight: bold;
 font-size: 28rpx;
}
.goodinfo .good-price .num {
 text-align: right;
 font-size: 28rpx;
 color: #666;
}
.total {
 display: flex;
 justify-content: flex-end;
 height: 80rpx;
 line-height: 80rpx;
 margin-top: 30rpx;
 font-size: 28rpx;
 font-weight: bold;
}
.total text {
 margin-left: 20rpx;
}
.operate {
 display: flex;
 justify-content: flex-end;
 font-size: 28rpx;
}
.operate > view {
 height: 60rpx;
 line-height: 60rpx;
 padding: 0 24rpx;
 border: 1px solid #666;
 margin: 0 10rpx;
 border-radius: 30rpx;
}
.operate > view.comfirm-delivery {
 color: #d64904;
 border-color: #d64904;
}
.no-more {
 height: 80rpx;
 line-height: 80rpx;
 text-align: center;
 font-size: 24rpx;
}
.goodsmsg{
 width: 100%;
 height: 300rpx;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 flex-direction: column;

}

// pages/home/order/order.js
var tool = require("../../../utils/util.js")
Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 idx: 0, //默認(rèn)選中第一項
 hasMore: true,
 indexNum: 0,
 tabs: ['全部', '待付款', '待發(fā)貨', '已付款', '待評價'], // tab欄標(biāo)題
 tabindex: 0, // 控制tab欄切換
 msgPage: 1, //分頁
 washcar: [{
 id: 0,
 tips: "洗車"
 },
 {
 id: 1,
 tips: "違章查詢"
 },
 {
 id: 2,
 tips: "商城訂單"
 },
 {
 id: 3,
 tips: "會員"
 },
 ],
 selecttab: [{
 id: 0,
 tips: "處理中"
 },
 {
 id: 1,
 tips: "已成功"
 },
 {
 id: 2,
 tips: "已撤銷"
 },
 {
 id: 3,
 tips: "全部"
 },

 ],
 

 goods: [
 {
 shopName: '商鋪名稱', // 商鋪名稱
 goodStatus: '賣家已發(fā)貨', // 商品狀態(tài)
 goodImg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1986179278,1118313821&fm=27&gp=0.jpg', // 商品圖片
 goodName: '商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱', // 商品名稱
 goodDesc: '商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述', // 商品描述
 shopServers: ['商鋪服務(wù)', '商鋪服務(wù)', '商鋪服務(wù)'], // 商鋪服務(wù)
 goodPrice: '111.00', // 商品價格
 goodNum: '2', // 購買的商品數(shù)量
 goodTotalPrice: '111.00', // 商品總價格
 status: 0, // 訂單的狀態(tài)， 0表示還未收貨， 1表示已收貨還未評價， 2表示已經(jīng)評價
 }, 
 ],
 },
 //點擊切換
 tabChange: function(e) {
 var navigitionIndex = e.currentTarget.dataset.index;
 this.setData({
 indexNum: navigitionIndex
 })

 },
 //滑動切換
 changeswpier(e) {
 var cur = e.detail.current;
 this.setData({
 indexNum: cur
 })
 },
 //查詢違章選項卡
 checkviolation(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
 idx: index,
 })

 },
 changeTab(e) {
 var page = this.data.mgsPage
 const index = e.currentTarget.dataset.index
 this.setData({
 tabindex: index
 })
 tool.post('/order_list', {
 status: index - 1,
 page: page
 })
 .then((res) => {
 var goods = this.data.goods
 this.setData({
 goods: res.data.goods
 })
 })

 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function(options) {
 var id = options.id;
 this.setData({
 indexNum: id
 })
 var page = this.data.mgsPage
 tool.post('/order_list', {
 page: page
 })
 .then((res) => {
 var goods = this.data.goods
 this.setData({
 goods: res.data.goods
 })
 })
 },
 //下拉刷新數(shù)據(jù)
 scrolltolower() {
 if (this.lock) {
 wx.showToast({
 title: '已經(jīng)到底了！',
 icon: 'none'
 })
 return
 }
 this.data.msgPage++
 wx.showLoading({
 title: '正在加載中...',
 })
 tool.post('/order_list', {
 page: this.data.msgPage
 })
 .then((res) => {
 var goodsList = this.data.goods;
 const newGoods = res.data.goods
 if (newGoods.length <= 0) {
 this.lock = true
 wx.hideLoading()
 wx.showToast({
 title: '已經(jīng)到底了！',
 icon: 'none'
 })
 this.setData({
 hasMore: false
 })
 return
 }
 wx.hideLoading()
 goodsList = [...goodsList, ...newGoods] //取數(shù)組里的每一個值，然后再賦值到一個新數(shù)組里
 this.setData({
 goods: goodsList
 })
 })
 },
})