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-button" @click="callPhone(item.take_phone)">
          <view class="button phone  col">
            <u-icon name="phone-fill" size="32" color="#000" custom-style="margin-right:10rpx;"></u-icon>
            <u-text size="32" color="#020B18" text="售后"></u-text>
          </view>
        </view>

        <view class="button-group row col">
          <view class="button">
            <u-button @click="navTo('/pages/Order/info')" text="查看详情" shape="circle" custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button>
          </view>
          <view class="button">
            <u-button @click="openLogistics(item)" 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" v-if="item.status !== 3">
            <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" v-else>
            <u-button
                @click="navTo('/pages/Order/detail?id='+item.id+'&type=edit')"
                text="重新审核"
                shape="circle"
                custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button>
          </view>
          <view class="button">
            <u-button
                @click="navTo('/pages/Order/exchange?id='+item.id+'&type=detail')"
                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>
  <uv-popup ref="logistics" closeOnClickOverlay :show="logisticsShow" @close="closeLogistics" @open="open" mode="center" closeable custom-style="width:80%;padding:30rpx;border-radius:20rpx;">
    <u-cell :title="checkInfo.goods_name">
      <template #icon>
        <u-image custom-style="margin-right:30rpx;" width="100" height="100" lazy-load :src="checkInfo.goods_cover"></u-image>
      </template>
      <template #label>
        <u-text
            :text="'快递单号:'+logisticsInfo.nu"
            @click="copyNu(logisticsInfo.nu)"
            size="28"
            color="#AFB5BE"
            custom-style="margin-top:30rpx;"
        ></u-text>
      </template>
    </u-cell>
    <uv-steps :current="logisticsList.length" direction="column" dot custom-style="max-height:500rpx;overflow-y:auto;">
      <uv-steps-item
          custom-style="padding-bottom:30rpx;"

          :desc="logItem.time"
          v-for="logItem in logisticsList">
        <template #title>
          <u-text
              :text="logItem.context"
              size="28"
              color="#020b18"
              custom-style="margin-top:20rpx;margin-bottom:20rpx;"
              line-height="40"
          ></u-text>
        </template>
      </uv-steps-item>
    </uv-steps>
  </uv-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, orderLogistics, 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 + '/BG.png',
        newIcon: imghost + '/new-icon.png',
        shopThumb: imghost + '/new-1.png',
      },
      isTop: false,
      listsGy: [],
      listsSc: [],
      size: {
        height: 500,
      },
      pagesGy:{
        page:1,
        limit:10,
      },
      statusGy:'loadmore',
      pagesSc:{
        page:1,
        limit:10,
      },
      statusSc:'loadmore',
      logisticsShow:false,
      logisticsInfo:{},
      logisticsList:[],
      checkInfo:{}
    }
  },
  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: {
    openLogistics(item){
      this.checkInfo = item;
      orderLogistics({goods_order_id :23}).then(res => {
        this.logisticsList = res.data.data;
        let info = res.data;
        delete info.data;
        this.logisticsInfo = info;
        this.logisticsShow = true;
        this.$refs.logistics.open();
      })

    },
    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
      })
    },
    copyNu(content) {
      uni.setClipboardData({
        data: content,
        success: function () {
          //调用方法成功
        }
      })
    },
  },
  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>