zhywpt-sp/subpackage/after-sale/renewalContral/car-list.vue

<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="as-layout-horizontal as-gravity-center-start search-layout">
      <view class="search-box">
        <image
          :src="`${$imgUrl}service/icon-search.png`"
          class="icon"
          mode="aspectFill"
          @click="search"
        ></image>
        <input
			type="text"
		  class="search"
		  placeholder="请输入车牌号"
		  v-model="state.vehiclePlate"
		  @confirm="search"
		  confirm-type="search"
        />
      </view>
    </view>
    <scroll-view
      class="selectCar-box"
      scroll-y="true"
      style="height: 80vh"
    >
		<view class="title">待续期处理名单</view>
      <template v-if="state.list.length > 0">
        <view
          class="list"
          @click="choose(i, item)"
          v-for="(item, i) in state.list"
          :key="i"
        >
          <view style="height: 134rpx">
            <image
              class="car"
              :src="`${$imgUrl}issuance/car.png`"
              mode=""
            ></image>
            <text class="yanse" :style="{ background: item.showColor }">{{
              getVehiclePlateColor(item.vehiclePlateColor)
            }}</text>
          </view>
          <view class="content">
            <view class="content-top">
              <text class="vehiclePlate">{{ item.vehiclePlate }}</text>
            </view>
          </view>
          <image
            class="arrow"
            :src="`${$imgUrl}issuance/arrow.png`"
            mode=""
          ></image>
        </view>
      </template>
	  <NoDataView v-else />
	  
	  <view class="title">其他车辆</view>
	  <template v-if="state.otherList.length > 0">
	    <view
	      class="list"
	      @click="choose(i, item)"
	      v-for="(item, i) in state.list"
	      :key="i"
	    >
	      <view style="height: 134rpx">
	        <image
	          class="car"
	          :src="`${$imgUrl}issuance/car.png`"
	          mode=""
	        ></image>
	        <text class="yanse" :style="{ background: item.showColor }">{{
	          getVehiclePlateColor(item.vehiclePlateColor)
	        }}</text>
	      </view>
	      <view class="content">
	        <view class="content-top">
	          <text class="vehiclePlate">{{ item.vehiclePlate }}</text>
	        </view>
	      </view>
	      <image
	        class="arrow"
	        :src="`${$imgUrl}issuance/arrow.png`"
	        mode=""
	      ></image>
	    </view>
	  </template>
	  <NoDataView v-else />
	  
	  <!-- <EmptyView v-else :mode="list" :content="'暂无数据'" /> -->
	  <!-- <view v-else class="flex"> 暂无车辆订单信息 </view> -->
	  <view v-if="state.loading" class="flex">加载中...</view>
	  <view v-if="state.finished && state.otherList.length > 0" class="flex"
	    >没有更多了</view
	  >
    </scroll-view>
    <!-- view class="action">
			<button type="default" class="ui-btn" @click="add()">
				新增车辆
			</button>
		</view> -->
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { navTo } from "@/utils/utils";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { queryVehicleBind, getRenewalContralCarList } from "@/utils/network/api.js";
import { requestNew } from "@/utils/network/request.js";
import { getItem, StorageKeys } from "@/utils/storage";
import { jump } from "@/datas/9901Jump.js";
import { deviceType } from "@/utils/network/difference";
import {
  getVehiclePlateColor,
  vehiclePlateColorPai,
} from "@/datas/vehiclePlateColor";
import { getCodeName } from "@/datas/queryKey.js";
import useOrderListItem from "@/composables/order/useOrderListItem";
import NoDataView from "@/components/no-data-view/no-data-view.vue";
const props = defineProps({
  index: {
    type: Number,
    default() {
      return 0;
    },
  },
  refresh: {
    //是否刷新列表
    type: Boolean,
    default: true,
  },
});
const state = reactive({
  vehiclePlate: "",
  list: [
	  {vehiclePlate: "晋A33623", vehicleId: 666},
	  {vehiclePlate: "晋A33623", vehicleId: 666},
	  {vehiclePlate: "晋A33623", vehicleId: 666},
  ],
  otherList: [
	  {vehiclePlate: "晋A33623", vehicleId: 666},
	  {vehiclePlate: "晋A33623", vehicleId: 666},
	  {vehiclePlate: "晋A33623", vehicleId: 666},
	  {vehiclePlate: "晋A33623", vehicleId: 666},
	  {vehiclePlate: "晋A33623", vehicleId: 666},
  ],
  pageNo: 1,
  pageSize: 10,
  total: 0,
  loading: false,
  finished: false,
});
onLoad((options) => {
  console.log("options", options);
  getList()
});

onShow(() => {
	
});

	
const getList = () => {
	list();
}

const list = (reset = false) => {
	if (reset) {
	  state.pageNo = 1;
	  state.list = [];
	  state.finished = false;
	}
  if (state.loading || state.finished) return;
  state.loading = true;
  // const customerId = getItem('customerObj');
  const options = {
    type: 2,
    data: {
      pageNo: state.pageNo,
      pageSize: state.pageSize,
      // customerId,
      vehicleId: state.vehiclePlate,
    },
    method: "POST",
    showLoading: true,
  };
  
  return requestNew(getRenewalContralCarList, options)
    .then((res) => {
      const data = res?.result || res?.data || [];
      state.total = res.total || 0;
      if (reset) {
        state.list = data;
      } else {
        state.list = state.list.concat(data);
      }
      if (state.list.length >= state.total || data.length < state.pageSize) {
        state.finished = true;
      } else {
        state.pageNo += 1;
      }
      state.loading = false;
    })
    .catch(() => {
      state.loading = false;
    });
};
const quanCheckActionTrue = (vehiclePlate, reset = false) => {
	if (reset) {
	  state.pageNo = 1;
	  state.list = [];
	  state.finished = false;
	}
	if (state.loading || state.finished) return;
	state.loading = true;
  const options = {
    type: 2,
    data: {
      vehiclePlate,
	  pageNo: state.pageNo,
	  pageSize: state.pageSize,
    },
    method: "POST",
    showLoading: true,
  };
  // requestNew(queryVehicleBind, options)
  //   .then((res) => {
  //     const data = res.result;
	 //  state.total = res.totalCount || 0;
  //     for (var i = 0; i < data.length; i++) {
  //       for (var j = 0; j < vehiclePlateColorPai.length; j++) {
  //         if (data[i].vehiclePlateColor == vehiclePlateColorPai[j]["id"]) {
  //           data[i].color = vehiclePlateColorPai[j]["color"];
  //           data[i].showColor = vehiclePlateColorPai[j]["showColor"];
  //         }
  //       }
  //     }
  //     console.log("车辆列表", data);
  //     if (state.type == "32") {
  //       for (var k = 0; k < data.length; k++) {
  //         if (data[k]["orderStatus"] != "99999") {
  //           state.list.push(data[k]);
  //         }
  //       }
  //     } else {
		//   if (reset) {
		// 	state.list = data;
		//   } else {
		// 	state.list = state.list.concat(data);
		//   }
  //     }
	 //  if (state.list.length >= state.total || data.length < state.pageSize) {
	 //    state.finished = true;
	 //  } else {
	 //    state.pageNo += 1;
	 //  }
	 //  state.loading = false;
  //   })
  //   .catch((err) => {
  //     console.log(err);
	 //  state.loading = false;
  //   });
};
const flag = ref("0");

const choose = (i, item) => {
	  // 跳转到车辆详情页面，携带item.vehicleId参数
	uni.navigateTo({
	    url: `/subpackage/after-sale/renewalContral/car-detail?id=${item.vehicleId}`,
	});

};

const add = () => {
  navTo(`/subpackage/after-sale/blacklist-query/addCar`);
};

const search = () => {
	console.log(111, state.type);
    quanCheckActionTrue(state.vehiclePlate, true);
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: center;
}

.selectCar-box {
	width: 93%;
  height: 100%;
  padding: 30rpx;
  padding-top: 0;
  padding-bottom: 50rpx;
}
.message {
  font-size: 26rpx;
  margin-left: 6rpx;
}
.search-layout {
  .search-box {
    margin: 30rpx 30rpx 0rpx 30rpx;
    height: 80rpx;
    background: #ffffff;
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex: 1;
  }

  .search-box .icon {
    width: 48rpx;
    height: 48rpx;
    margin: 0 20rpx;
  }

  .search-box .search {
    flex: 1;
    margin-right: 20rpx;
    height: 100%;
    padding: 0 10rpx;
    font-size: 28rpx;
  }

  .search-btn {
    color: white;
    background-color: #00b38b;
    width: 140rpx;
    height: 75rpx;
    line-height: 75rpx;
    font-size: 32rpx;
    border-radius: 40rpx;
    text-align: center;
    margin-right: 30rpx;
    margin-top: 30rpx;
  }
}
.title {
  font-weight: 400;
  font-size: 34rpx;
  color: #01243a;
  margin: 30rpx 30rpx 0rpx 30rpx;
}
.list {
  background: #ffffff;
  border-radius: 12rpx;
  border: 1px solid #ffffff;
  width: 98%;
  margin: 30rpx auto;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .content {
    font-weight: 400;
    width: 76%;
    margin-left: 20rpx;
    .content-top {
      margin-bottom: 20rpx;
      .vehiclePlate {
        font-size: 30rpx;
        color: #01243a;
      }
    }
    .content-time {
      font-size: 26rpx;
      color: #999999;
    }
  }
  .yanse {
    display: inline-block;
    position: relative;
    width: 64rpx;
    height: 30rpx;
    background: red;
    color: white;
    border-radius: 15rpx 0 15rpx 0;
    text-align: center;
    line-height: 30rpx;
    font-size: 24rpx;
    top: -147rpx;
  }
  .car {
    width: 134rpx;
    height: 134rpx;
  }
  .arrow {
    width: 18rpx;
    height: 34rpx;
  }
}
.action {
  position: fixed;
  bottom: 0rpx;
  left: 0;
  height: 188rpx;
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>