warm_man/pages/User/order.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>
  <view class="screen-container">
    <u-tabs
        :list="list"
        u-sticky
        lineWidth="64"
        lineHeight="8"
        :inactiveStyle="{color:'#AFB5BE'}"
        :activeStyle="{color:'#F47210'}"
        lineColor="#F47210"
        :custom-style="{margin:'auto'}"
        :scrollable="false"
        @change="tabsChange"
    ></u-tabs>
    <u-tabs
        v-if="(tabCheck === 'room')"
        :list="listGy"
        u-sticky
        lineWidth="64"
        lineHeight="8"
        :inactiveStyle="{color:'#AFB5BE'}"
        :activeStyle="{color:'#020B18'}"
        lineColor="transparent"
        :custom-style="{margin:'auto'}"
        :scrollable="false"
        @change="tabsGyChange"
    ></u-tabs  >
    <u-tabs
        v-if="(tabCheck === 'shop')"
        :list="listSc"
        u-sticky
        lineWidth="64"
        lineHeight="8"
        :inactiveStyle="{color:'#AFB5BE'}"
        :activeStyle="{color:'#020B18'}"
        lineColor="transparent"
        :custom-style="{margin:'auto'}"
        :scrollable="false"
        @change="tabsScChange"
    ></u-tabs>
  </view>
<view class="lists-group row">
  <view class="lists-container row" v-if="tabCheck === 'shop'">
    <view class="item" v-for="(item,index) in listsSc">
      <view class="item-header row">
        <view class="title">{{ item.create_time }}</view>
        <view class="status" :class="getScStatus(item.status).color">{{getScStatus(item.status).name}}</view>
      </view>
      <view class="item-body row">
        <view class="body-main row">
          <view class="thumb">
            <u-image :src="item.goods_cover" :lazy-load="true" radius="24" width="176" height="176" mode="aspectFill"></u-image>
          </view>
          <view class="info row col">
            <view class="info-left">
              <view class="info-title">{{item.goods_name}}</view>
            </view>
            <view class="info-right">
              <view class="info-price">￥{{item.coin_number}}</view>
              <view class="info-number">x{{item.goods_number}}</view>
            </view>
            <view class="info-ext row">
              <view class="label">暖新币</view>
              <view class="price">{{item.coin_number}}币</view>
            </view>
          </view>
        </view>

      </view>
      <view class="item-footer row">
        <view class="phone">
          <view class="phone-button" @click="callPhone(item.take_phone)">
            <u-icon name="phone-fill" size="45" color="#ffffff"></u-icon>
          </view>
        </view>
        <view class="button-group row col">
<!--          <view class="button">-->
<!--            <u-button text="查看详情" shape="circle" custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button>-->
<!--          </view>-->
          <view class="button">
            <u-button @click="logisticsShow = true" text="查看物流" shape="circle" custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="lists-container row" v-if="tabCheck === 'room'">
    <view class="item" v-for="(item,index) in listsGy">
      <view class="item-header row">
        <view class="title">{{item.create_time}}</view>
        <view class="status" :class="getGyStatus(item.status).color">{{getGyStatus(item.status).name}}</view>
      </view>
      <view class="item-body room row">
        <view class="body-main row">
          <view class="thumb">
            <u-image :src="item.cover" :lazy-load="true" radius="24" width="176" height="176" mode="aspectFill"></u-image>
          </view>
          <view class="info row col">
            <view class="info-left">
              <view class="info-title">{{item.name}}</view>
              <view class="info-desc">{{ item.street }} {{ item.area }}㎡ | 朝{{item.toward}}</view>
            </view>
            <view class="info-ext row">
              <view class="label">租期{{item.month}}个月</view>
              <view class="price">{{item.price}}元/月</view>
            </view>
          </view>
        </view>

      </view>
      <view class="item-footer row">
        <view class="phone">

        </view>
        <view class="button-group row col">
          <view class="button">
            <u-button
                @click="navTo('/pages/Order/detail?id='+item.id+'&type=detail')"
                text="租房详情"
                shape="circle"
                custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button>
          </view>
          <view class="button">
            <u-button text="兑换详情" shape="circle" custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button>
            <!--            <u-button text="我要兑换" shape="circle" custom-style="height:64rpx;border: 2rpx solid #FF9545;padding:0rpx 42rpx; color:#FF9545;"></u-button>-->
          </view>
        </view>
      </view>
    </view>

  </view>
  <u-popup closeOnClickOverlay :show="logisticsShow" @close="closeLogistics" @open="open" mode="center" custom-style="width:80%;padding:30rpx;border-radius:20rpx;">
    <uv-steps current="1" direction="column" dot>
      <uv-steps-item title="已下单" desc="10:30">
      </uv-steps-item>
      <uv-steps-item title="已出库" desc="10:35" ></uv-steps-item>
      <uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
    </uv-steps>
  </u-popup>

  <u-loadmore v-if="(tabCheck==='room')" :status="statusGy" fontSize="28" marginBottom="50" marginTop="30" @loadmore="getRoomOrderList()"/>
  <u-loadmore v-if="(tabCheck==='shop')" :status="statusSc" fontSize="28" marginBottom="50" marginTop="30" @loadmore="getGoodsOrderList()"/>
</view>



</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {goodsOrder, roomOrder, tabCount} from "@/api/user";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      list: [{
        name: '公寓订单',
        id:'room'
      }, {
        name: '商城订单',
        id:'shop'
      }],
      listGy: [{
        name: '全部',
        status:''
      }, {
        name: '租赁中',
        status:2,
      }, {
        name: '已完成',
        status:4
      }],
      listSc: [{
        name: '全部',
        status:''

      }, {
        name: '待发货',
        status:1,
      }, {
        name: '待收货',
        status:2,
      }, {
        name: '已完成',
        status:3
      }],
      tabCheck:'room',
      tabGyCheck:'',
      tabScCheck:'',
      current: 1,
      title: '我的订单',
      loading: true,
      staticImage: {
        bg: imghost + '/static/image/BG.png',
        newIcon: imghost + '/static/image/new-icon.png',
        shopThumb: imghost + '/static/image/new-1.png',
      },
      user: {
        avatar: imghost + '/static/image/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685,
      },
      isTop: false,
      listsGy: [],
      listsSc: [],
      size: {
        height: 500,
      },
      pagesGy:{
        page:1,
        limit:10,
      },
      statusGy:'loadmore',
      pagesSc:{
        page:1,
        limit:10,
      },
      statusSc:'loadmore',
      logisticsShow:false,
    }
  },
  onLoad() {

  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight
    let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight

    let info = uni.createSelectorQuery().in(this).select('.foot-button');
    info.boundingClientRect(function (data) {
      that.size.height = that.size.height = height - headerHeight - data.height - uni.$u.getPx('32rpx');
    }).exec(function (res) {

    });
  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
  },
  methods: {
    closeLogistics(){
      this.logisticsShow = false;
    },
    getGyStatus(status){
      switch(status){
        case 1:
          return {name:'待审核',color:'orange'}
        case 2:
          return {name:'租赁中',color:'blue'}
        case 3:
          return {name:'审核失败',color:'red'}
        case 4:
          return {name:'已完成',color:'green'}
      }
    },
    getScStatus(status){
      switch(status){
        case 1:
          return {name:'待发货',color:'orange'}
        case 2:
          return {name:'待收货',color:'blue'}
        case 3:
          return {name:'已完成',color:'green'}
      }
    },
    chatDetail(item) {
      wx.navigateTo({
        url: '/pages/ChatDetail/index?id=' + item.id
      });
    },
    checkSection(index) {
      this.current = edit;
    },
    scrollToLower() {

    },
    tabsChange(e){
      this.tabCheck = e.id
    },
    tabsGyChange(e){
      this.tabGyCheck = e.status
      this.getRoomOrderList(true);
    },
    tabsScChange(e){
      this.tabScCheck = e.status
      this.getGoodsOrderList(true);
    },
    callPhone(phone){
      uni.makePhoneCall({
        phoneNumber: phone.toString()
      });
    },
    getRoomOrderList(clear = false){
      if(clear){
        this.statusGy = 'loadmore'
        this.pagesGy = {
          page:1,
          limit:10
        }
        this.listsGy = [];
      }
      if(this.statusGy === 'nomore'){
        return false;
      }
      this.statusGy = 'loading';
      let data = this.pagesGy;
      if(this.tabGyCheck){
        data.status = this.tabGyCheck;
      }
      roomOrder(data).then(res => {
        if(res.data.length === 0){
          this.statusGy = 'nomore';
        }else{
          this.statusGy = 'loadmore';
        }
        this.listsGy = this.listsGy.concat(res.data);
      });
      this.pagesGy.page++;
    },
    getGoodsOrderList(clear = false){
      if(clear){
        this.statusSc = 'loadmore'
        this.pagesSc = {
          page:1,
          limit:10
        }
        this.listsSc = [];
      }
      if(this.statusSc === 'nomore'){
        return false;
      }
      this.statusSc = 'loading';
      let data = this.pagesSc;
      if(this.tabScCheck){
        data.status = this.tabScCheck;
      }
      goodsOrder(data).then(res => {
        if(res.data.length === 0){
          this.statusSc = 'nomore';
        }else{
          this.statusSc = 'loadmore';
        }
        this.listsSc = this.listsSc.concat(res.data);
      });
      this.pagesSc.page++;
    },
    getTabCount(){
      tabCount({type:'house'}).then(res => {
        this.listGy.forEach(item => {
          res.data.forEach(row => {
            if(item.status === row.type){
              item.badge = {
                bgColor:'#FF9545',
                color:'#3D3D3D',
              }
              item.badge.value = row.count;
            }
          })
        })
      })
      tabCount({type:'goods'}).then(res => {
        this.listSc.forEach(item => {
          res.data.forEach(row => {
            if(item.status === row.type){
              item.badge = {
                bgColor:'#FF9545',
                color:'#3D3D3D',
              }
              item.badge.value = row.count;
            }
          })
        })
      })
    },
    navTo(url){
      wx.navigateTo({
        url:url
      })
    },
  },
  onReachBottom() {
    if(this.tabCheck === 'room'){
      this.getRoomOrderList();
    }else{
      this.getGoodsOrderList();
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  mounted() {
    this.getRoomOrderList();
    this.getGoodsOrderList();
    this.getTabCount();
  },
  created() {
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  }
}
</script>

<style lang="scss">
::v-deep .u-tabs__wrapper__nav__line{
  left:24rpx;
}
@import './components/order.scss';
</style>