AyaoJies-boot/AyaoJies-app/source-mall-master/source-mall/pages/order/order.vue

<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper ref="tabs" :current="current" :is-scroll="false" :list="list" activeColor="#ff536f"
                       swiperWidth="750" @change="change"></u-tabs-swiper>
      </view>
      <swiper :current="swiperCurrent" class="swiper-box" @animationfinish="animationfinish" @transition="transition">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view class="page-box">
              <view v-for="(res, index) in orderList[0]" :key="res.id" class="order">
                <view class="top">
                  <view class="left">
                    <view class="store">{{ res.orderCode }}</view>
                    <u-icon :size="26" color="rgb(203,203,203)" name="arrow-right"></u-icon>
                  </view>
                  <view class="right">{{ res.deal }}</view>
                </view>
                <view v-for="(item, index) in res.goodsList" :key="index" class="item">
                  <view class="left">
                    <image :src="item.goodsUrl" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ item.title }}</view>
                    <view class="type">{{ item.type }}</view>
                    <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{ priceInt(item.price) }}
                      <text class="decimal">.{{ priceDecimal(item.price) }}</text>
                    </view>
                    <view class="number">x{{ item.number }}</view>
                  </view>
                </view>
                <view class="total">
                  共{{ totalNum(res.goodsList) }}件商品 合计:
                  <text class="total-price">
                    ￥{{ priceInt(totalPrice(res.goodsList)) }}.
                    <text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
                  </text>
                </view>
                <view class="bottom">
                  <view class="logistics btn" @lick="cancle">取消订单</view>
                  <view class="exchange btn" @contact="handleContact">联系客服</view>
                  <view class="evaluate btn" @lick="pay">立即支付</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view class="page-box">
              <view>
                <view class="centre">
                  <image :src="empty" mode=""></image>
                  <view class="explain">
                    您还没有相关的订单
                    <view class="tips">可以去看看有那些想买的</view>
                  </view>
                  <view class="btn">随便逛逛</view>
                </view>
              </view>
              <view v-for="(res, index) in  orderList[1]" :key="res.id" class="order">
                <view class="top">
                  <view class="left">
                    <view class="store">{{ res.store }}</view>
                    <u-icon :size="26" color="rgb(203,203,203)" name="arrow-right"></u-icon>
                  </view>
                  <view class="right">{{ res.deal }}</view>
                </view>
                <view v-for="(item, index) in res.goodsList" :key="index" class="item">
                  <view class="left">
                    <image :src="item.goodsUrl" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ item.title }}</view>
                    <view class="type">{{ item.type }}</view>
                    <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{ priceInt(item.price) }}
                      <text class="decimal">.{{ priceDecimal(item.price) }}</text>
                    </view>
                    <view class="number">x{{ item.number }}</view>
                  </view>
                </view>
                <view class="total">
                  共{{ totalNum(res.goodsList) }}件商品 合计:
                  <text class="total-price">
                    ￥{{ priceInt(totalPrice(res.goodsList)) }}.
                    <text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
                  </text>
                </view>
                <view class="bottom">
                  <view class="exchange btn" @contact="handleContact">联系客服</view>
                  <view class="evaluate btn">提醒发货</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
            <view class="page-box">
              <view>
                <view class="centre">
                  <image :src="empty" mode=""></image>
                  <view class="explain">
                    您还没有相关的订单
                    <view class="tips">可以去看看有那些想买的</view>
                  </view>
                  <view class="btn">随便逛逛</view>
                </view>
              </view>
              <view v-for="(res, index) in  orderList[2]" :key="res.id" class="order">
                <view class="top">
                  <view class="left">
                    <view class="store">{{ res.store }}</view>
                    <u-icon :size="26" color="rgb(203,203,203)" name="arrow-right"></u-icon>
                  </view>
                  <view class="right">{{ res.deal }}</view>
                </view>
                <view v-for="(item, index) in res.goodsList" :key="index" class="item">
                  <view class="left">
                    <image :src="item.goodsUrl" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ item.title }}</view>
                    <view class="type">{{ item.type }}</view>
                    <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{ priceInt(item.price) }}
                      <text class="decimal">.{{ priceDecimal(item.price) }}</text>
                    </view>
                    <view class="number">x{{ item.number }}</view>
                  </view>
                </view>
                <view class="total">
                  共{{ totalNum(res.goodsList) }}件商品 合计:
                  <text class="total-price">
                    ￥{{ priceInt(totalPrice(res.goodsList)) }}.
                    <text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
                  </text>
                </view>
                <view class="bottom">
                  <view class="exchange btn" @contact="handleContact">联系客服</view>
                  <view class="evaluate btn">查看物流</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view class="page-box">
              <view>
                <view class="centre">
                  <image :src="empty" mode=""></image>
                  <view class="explain">
                    您还没有相关的订单
                    <view class="tips">可以去看看有那些想买的</view>
                  </view>
                  <view class="btn">随便逛逛</view>
                </view>
              </view>
              <view v-for="(res, index) in  orderList[3]" :key="res.id" class="order">
                <view class="top">
                  <view class="left">
                    <view class="store">{{ res.store }}</view>
                    <u-icon :size="26" color="rgb(203,203,203)" name="arrow-right"></u-icon>
                  </view>
                  <view class="right">{{ res.deal }}</view>
                </view>
                <view v-for="(item, index) in res.goodsList" :key="index" class="item">
                  <view class="left">
                    <image :src="item.goodsUrl" mode="aspectFill"></image>
                  </view>
                  <view class="content">
                    <view class="title u-line-2">{{ item.title }}</view>
                    <view class="type">{{ item.type }}</view>
                    <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{ priceInt(item.price) }}
                      <text class="decimal">.{{ priceDecimal(item.price) }}</text>
                    </view>
                    <view class="number">x{{ item.number }}</view>
                  </view>
                </view>
                <view class="total">
                  共{{ totalNum(res.goodsList) }}件商品 合计:
                  <text class="total-price">
                    ￥{{ priceInt(totalPrice(res.goodsList)) }}.
                    <text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
                  </text>
                </view>
                <view class="bottom">
                  <view class="exchange btn" @contact="handleContact">联系客服</view>
                  <view class="evaluate btn">去评价</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      empty: '/static/empty/default.png',
      orderList: [[], [], [], []],
      dataList: [
        {
          id: 1,
          orderCode: '20220814145211952128',
          deal: '待付款',
          goodsList: [
            {
              goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
              title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
              type: '灰色;M',
              deliveryTime: '付款后30天内发货',
              price: '348.58',
              number: 2
            },
            {
              goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
              title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
              type: '灰色;M',
              deliveryTime: '付款后30天内发货',
              price: '348.58',
              number: 2
            },
          ]
        },
      ],
      list: [
        {
          name: '待付款',
          count: 1
        },
        {
          name: '待发货'
        },
        {
          name: '待收货'
        },
        {
          name: '待评价'
        }
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
    };
  },
  onLoad() {
    this.getOrderList(0);
  },
  computed: {
    // 价格小数
    priceDecimal() {
      return val => {
        if (val !== parseInt(val)) return val.slice(-2);
        else return '00';
      };
    },
    // 价格整数
    priceInt() {
      return val => {
        if (val !== parseInt(val)) return val.split('.')[0];
        else return val;
      };
    }
  },
  methods: {
    login() {
      this.$u.route('/pages/login/login')
    },
    reachBottom() {
      // 此tab为空数据
      // if(this.current != 2) {
      // 	this.loadStatus.splice(this.current,1,"loading")
      // 	setTimeout(() => {
      // 		this.getOrderList(this.current);
      // 	}, 1200);
      // }
    },
    // 页面数据
    getOrderList(idx) {
      for (let i = 0; i < 1; i++) {
        let index = this.$u.random(0, this.dataList.length - 1);
        let data = JSON.parse(JSON.stringify(this.dataList[index]));
        data.id = this.$u.guid();
        this.orderList[idx].push(data);
      }
      this.loadStatus.splice(this.current, 1, "loadmore")
    },
    // 总价
    totalPrice(item) {
      let price = 0;
      item.map(val => {
        price += parseFloat(val.price);
      });
      return price.toFixed(2);
    },
    // 总件数
    totalNum(item) {
      let num = 0;
      item.map(val => {
        num += val.number;
      });
      return num;
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
      this.getOrderList(index);
    },
    transition({detail: {dx}}) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({detail: {current}}) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    cancle() {
      this.$mytip.toast('取消订单')
    },
    pay() {
      this.$mytip.toast('支付')
    }
  }
};
</script>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}

/* #endif */
</style>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  .empty {
    overflow: hidden;

    .tip {
      color: #909399;
    }

    .btn {
      color: #fff;
      background-color: $base-color;
      width: 200 rpx;
      padding: 15 rpx 28 rpx;
      border-radius: 130 rpx;
      margin: 30 rpx 0 0 100 rpx;
    }
  }
}

.order {
  width: 710 rpx;
  background-color: #ffffff;
  margin: 20 rpx auto;
  border-radius: 20 rpx;
  box-sizing: border-box;
  padding: 20 rpx;
  font-size: 28 rpx;

  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .store {
        margin: 0 10 rpx;
        font-size: 32 rpx;
        font-weight: bold;
      }
    }

    .right {
      color: $base-color;
    }
  }

  .item {
    display: flex;
    margin: 20 rpx 0 0;

    .left {
      margin-right: 20 rpx;

      image {
        width: 200 rpx;
        height: 200 rpx;
        border-radius: 10 rpx;
      }
    }

    .content {
      .title {
        font-size: 28 rpx;
        line-height: 50 rpx;
      }

      .type {
        margin: 10 rpx 0;
        font-size: 24 rpx;
        color: $u-tips-color;
      }

      .delivery-time {
        color: $base-color;
        font-size: 24 rpx;
      }
    }

    .right {
      margin-left: 10 rpx;
      padding-top: 20 rpx;
      text-align: right;

      .decimal {
        font-size: 24 rpx;
        margin-top: 4 rpx;
      }

      .number {
        color: $u-tips-color;
        font-size: 24 rpx;
      }
    }
  }

  .total {
    margin-top: 20 rpx;
    text-align: right;
    font-size: 24 rpx;

    .total-price {
      font-size: 32 rpx;
    }
  }

  .bottom {
    display: flex;
    margin-top: 40 rpx;
    padding: 0 10 rpx;
    justify-content: flex-end;
    align-items: center;

    .btn {
      margin-left: 20 rpx;
      line-height: 52 rpx;
      width: 160 rpx;
      border-radius: 26 rpx;
      border: 2 rpx solid $u-border-color;
      font-size: 26 rpx;
      text-align: center;
      color: $u-type-info-dark;
    }

    .evaluate {
      color: $base-color;
      border-color: $base-color;
    }
  }
}

.centre {
  text-align: center;
  margin: 200 rpx auto;
  font-size: 32 rpx;

  image {
    width: 164 rpx;
    height: 164 rpx;
    border-radius: 50%;
    margin-bottom: 20 rpx;
  }

  .tips {
    font-size: 24 rpx;
    color: #999999;
    margin-top: 20 rpx;
  }

  .btn {
    margin: 80 rpx auto;
    width: 200 rpx;
    border-radius: 32 rpx;
    line-height: 64 rpx;
    color: #ffffff;
    font-size: 26 rpx;
    background-image: linear-gradient(to left, #ff536f, rgba(#ff536f, 0.6));
  }
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}
</style>