lanan-repair-app/pages-warehouse/home/home.vue

<template>
  <view class="container">
    <!--<VNavigationBar style="position: relative;z-index: 99;" leftTitle="true" backgroundColor="rgba(0,0,0,0)" title-color="#fff" title=" "></VNavigationBar>-->
    <view class="bodyTopBg"></view>
    <view class="body">
      <view class="userInfoBox" @click="showUserDetail">
        <image v-if="''==userInfo.avatar || null == userInfo.avatar"
               :src="defaultAvatar" mode="scaleToFill" style="width: 104rpx;height: 104rpx;border-radius: 50%;"
               @error="avatarErr"></image>
        <image v-else :src="imgUrlPrex+userInfo.avatar" mode="scaleToFill"
               style="width: 104rpx;height: 104rpx;border-radius: 50%;" @error="avatarErr"></image>
        <view class="userInfo">
          <text class="userName">{{ userInfo.nickname }}</text>
          <text class="userType">{{ userInfo.roleNames }}</text>
        </view>
        <image mode="aspectFita" src="/static/icons/more.png" style="width: 48rpx;height: 48rpx"></image>
      </view>
      <view class="body-top">
        <view class="body-top-search">
          <input class="body-top-search-input" placeholder="查询审批单" placeholder-style="font-size: 28rpx"
                 type="text">
          <text>搜索</text>
        </view>
        <view class="body-top-tab">
          <view v-for="(item, index) in tabList" @click="activeTab(index)" :key="index" :class="{ active: active === index }"
                class="body-top-tab-item">
            {{ item.name }}
            <view v-if="index === active" class="activeLine"></view>
          </view>
        </view>
      </view>

      <view class="todoListBox">
        <scroll-view :refresher-triggered="isTriggered" @scrolltolower="onReachBottomCus" class="itemContent"
                     refresher-enabled
                     scroll-y="true" style="height: 100%" @refresherrefresh="onRefresherrefresh">
          <view v-for="(item, index) in ticketWares" :key="index" class="orderItem">
            <view class="order-top">
              <view class="order-top-left">
                <text class="order-top-name">{{ item.repairName+'的配件申请单' }}</text>
                <text class="order-top-date">{{ item.createTimeStr }}</text>
              </view>
              <text class="order-status">{{ item.statusStr }}</text>
            </view>
            <view class="order-content">
              <view>
                申请人：{{ item.repairName }}
              </view>
              <view>
                服务顾问：{{ item.adviserName }}
              </view>
            </view>

            <view class="order-footer">
              <template>
                <view class="order-btn no">拒绝审批</view>
                <view class="order-btn yes">审批出库</view>
              </template>
              <template>
                <view class="order-btn">配件出库</view>
                <view class="order-btn">配件入库</view>
              </template>
            </view>
          </view>
          <view v-if="ticketWares.length==0" style="text-align: center">
            <image class="" src="@/static/images/nothing.png"></image>
          </view>
        </scroll-view>
      </view>
    </view>
    <tabBarVue msg="1"></tabBarVue>
  </view>
</template>

<script>
import tabBarVue from '@/components/tabBar/tabBar.vue'
import VNavigationBar from '@/components/VNavigationBar.vue'
import OrderCard from "@/components/orderCard.vue";
import config from '@/config'
import request from '@/utils/request';
import {builderOrder, formatTimestamp, saveTicketsRecords} from "@/utils/utils";
import {
  getToken,
  getUserInfo,
  getStrData,
  getTenantId
} from '@/utils/auth'
import {getDictTextByCodeAndValue,formatDate} from "@/utils/utils";

export default {
  components: {
    OrderCard,
    tabBarVue,
    VNavigationBar
  },
  data() {
    return {
      tabList: [
        {
          name: '领配件'
        },
        {
          name: '退配件'
        },
      ],
      //配件单查询条件
      queryParams:{
        pageNo: 1,
        pageSize: 10,
        query: null,
        type: "01",
      },
      //配件单列表
      ticketWares:[],
      //数量
      total: 0,
      //下拉刷新状态
      isTriggered: false,

      imgUrlPrex: config.baseImageUrl,
      userInfo: {
        avatar: undefined,
        nickname: ''
      },

      active: 0,

      bannerIndex: 0,
      shopList: [],
      bannerList: [],
      richTextHtml: null,
      pageNo: 1,
      pageSize: 10,


      orderList: [
        {
          orderNo: '1209840149750105501',
          flag: 1, flagStr: '待处理', carNum: '川A 184AO1',
          carModel: '一汽奥迪 2024款 A6L',
          projectList: [
            {name: '清洗内饰', id: 1},
            {name: '内饰精洗除臭', id: 2},
            {name: '烘干底板胶及脚垫', id: 3}
          ],
          userName: '张三',
          userPhone: '157****6879',
          appointDate: '2024-10-20 12:00',
          counselorName: '李相东'
        },
      ],
      defaultAvatar: require('@/static/icons/avatar.png')
    }
  },
  onLoad() {
    if (!getToken()) {
      uni.reLaunch({
        url: '/pages/login/login'
      })
    } else {
      if (!this.$msgSocket) {
        this.$startMsgSocket(getTenantId(), getStrData("userId"))
      }
    }
    this.onRefresherrefresh()
  },
  onShow() {
    if (!getToken()) {
      uni.reLaunch({
        url: '/pages/login/login'
      })
    } else {
      //直接取缓存中的用户信息
      this.userInfo = getUserInfo() || {
        nickname: '用户',
        roleNames: '角色'
      }
      this.onRefresherrefresh()
    }
  },
  methods: {
    activeTab(index){
      this.active = index
      this.queryParams.type = 1==index?'01':'02'
      this.onRefresherrefresh()
    },

    /**
     * 下拉刷新数据
     */
    onRefresherrefresh() {
      this.isTriggered = true
      this.queryParams.pageNo = 1
      this.total = 0
      this.ticketWares = []
      this.getTicketWares()
    },
    /**
     * 配件单查询
     */
    async getTicketWares(){
      request({
        url: '/admin-api/repair/tw/page',
        method: 'get',
        params: this.queryParams
      }).then((res)=>{
        console.log(res,187)
        if (res.code == 200){
          res.rows.map((item) => {
            getDictTextByCodeAndValue("ticket_wares_status",item.status).then(value => {
              item.statusStr = value
            }).catch(error => {
              item.statusStr = "未知"
              console.error(error);
            });
            item.createTimeStr = formatDate(item.createTime)
          })
          this.total = res.total
          if (this.pageNo != 1) {
            this.ticketWares = this.ticketWares.concat(res.rows)
          } else {
            this.ticketWares = res.rows
          }
          this.isTriggered = false
        }
      })
    },


    /**
     * 上滑加载数据
     */
    onReachBottomCus() {
      //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
      if (this.queryParams.pageNo * this.queryParams.pageSize >= this.total) {
        uni.$u.toast('没有更多数据了')
        return
      }
      //页码+1,调用获取数据的方法获取第二页数据
      this.queryParams.pageNo++
      //此处调用自己获取数据列表的方法
      this.getTicketWares()
    },



    gotoPage(menu) {
      uni.navigateTo({
        url: menu.path
      })
    },
    avatarErr(err) {
      console.log('err', err)
      this.userInfo.avatar = this.defaultAvatar
    },
    showUserDetail() {
      uni.navigateTo({
        url: '/pages/my/myInfo'
      })
    }
  }
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}

.container {
  height: 100%;
  //background: linear-gradient(180deg, #0174F6 0%, rgba(1, 116, 246, 0) 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 60rpx;
  background-color: #F3F5F7;


  .bodyTopBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500rpx;
    background-image: url("@/static/bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .body {
    position: relative;
    z-index: 10;
    flex: 1;
    height: 0;
    overflow: auto;
    padding-bottom: 30rpx;
    display: flex;
    flex-direction: column;
  }

  .userInfoBox {
    margin: 0 32rpx 40rpx;

    display: flex;
    column-gap: 20rpx;
    align-items: center;

    .userInfo {
      flex: 1;
      width: 0;

      .userName {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        display: block;
        margin-bottom: 16rpx;
      }

      .userType {
        font-size: 24rpx;
        color: #0174F6;
        display: inline-block;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        border: 1rpx solid #0174F6;
        padding: 8rpx 16rpx;
      }
    }
  }

  .body-top {
    width: 686rpx;
    background: #FFFFFF;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin: 0 auto;
    padding: 30rpx 30rpx 0;

    .body-top-search {
      height: 84rpx;
      background: #F3F5F7;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      margin: 0 auto;
      padding: 0 30rpx;
      font-size: 28rpx;

      display: flex;
      align-items: center;
      column-gap: 10rpx;

      .body-top-search-input {
        flex: 1;
        width: 0;
      }
    }

    .body-top-tab {
      display: flex;
      font-size: 28rpx;

      .body-top-tab-item {
        flex: 1;
        width: 0;
        text-align: center;
        padding: 28rpx 0;
        position: relative;

        &.active {
          color: #0174F6;
        }

        .activeLine {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 96rpx;
          height: 6rpx;
          background: #0174F6;
          border-radius: 4rpx 4rpx 0rpx 0rpx;
        }
      }
    }

  }

  .todoListBox {
    flex: 1;
    height: 0;
    margin: 40rpx 32rpx;
  }

  .body-top-banner {
    text-align: center;
  }

  .banner {
    margin: 24rpx 0 0;
    width: 686rpx;
    height: 100%;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    background-color: #0174F6;
  }

  .menus {
    margin: 30rpx auto 0;
    box-sizing: border-box;
    width: 686rpx;
    padding: 40rpx 38rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 22rpx;
    font-size: 24rpx;

    .menu-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .info {
    width: 686rpx;
    margin: 38rpx auto 0;
    display: flex;
    align-items: center;
    column-gap: 20rpx;

    .info-icon {
      width: 80rpx;
      height: 80rpx;
    }

    .infoList {
      flex: 1;
      width: 0;

      .infoItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 10rpx;
      }

      .infoIndex {
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: #333;
      }

      .infoText {
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 24rpx;
      }
    }

    .more-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .repairShop {
    width: 686rpx;
    margin: 38rpx auto 0;

    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
    }

    .shopList {
      .shopItem {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #DDDDDD;
        display: flex;
        align-items: center;
        column-gap: 20rpx;
      }

      .shopImg {
        width: 160rpx;
        height: 100rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        background-color: #999;
      }

      .shopInfo {
        flex: 1;
        width: 0;
      }

      .shopTitle {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 20rpx;
      }

      .shopDetail {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666666;
        column-gap: 10rpx;
      }

      .shopAddress {
        flex: 1;
        width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .line {
        width: 2rpx;
        height: 24rpx;
        background-color: #858BA0;
      }

      .shopDistance {
        flex-shrink: 0;
      }
    }
  }

  .orderItem {
    background: #FFFFFF;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 0 30rpx 30rpx;

    .order-top {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      column-gap: 10rpx;
      border-bottom: 1rpx solid #DDDDDD;

      .order-top-left {
        flex: 1;
        width: 0;
        display: flex;
        flex-direction: column;
        row-gap: 16rpx;

        .order-top-name {
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
        }

        .order-top-date {
          font-size: 24rpx;
          color: #858BA0;
        }
      }

      .order-status {
        font-size: 24rpx;
        color: #E8A321;
      }
    }

    .order-content {
      font-size: 28rpx;
      color: #858BA0;


      & > view {
        margin-top: 30rpx;
      }

      .todoListBox {

      }
    }

    .order-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      column-gap: 30rpx;
      padding: 30rpx 0 0;

      .order-btn {
        width: 172rpx;
        height: 60rpx;
        border-radius: 30rpx 30rpx 30rpx 30rpx;

        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        border: 2rpx solid #0174F6;
        color: #0174F6;
        &.no {
          color: #333;
          border: 2rpx solid #858BA0;
        }

        &.yes {
          background: #0174F6;
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          color: #FFFFFF;
        }
      }
    }

    .order-remark {
      margin-top: 30rpx;
      background: #FFEFEF;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-size: 28rpx;
      color: #F92C2C;
      padding: 20rpx;
    }
  }
}
</style>