zhywpt-sp/subpackage/after-sale/activation-once-again/select-car.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>
    <view class="title">车辆列表</view>
    <scroll-view
      class="selectCar-box"
      scroll-y="true"
      style="height: 80vh"
      @scrolltolower="getList"
    >
      <template v-if="state.list.length > 0">
        <view
          class="list"
          @click="choose(i, item)"
          v-for="(item, i) in state.list"
          :key="i"
        >
          <view class="yanse-out">
            <image class="car" :src="`${$imgUrl}issuance/car.png`" mode=""></image>
            <text
				class="yanse">
				{{ getVehiclePlateColorPai(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.list.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, objectToQueryString } from "@/utils/utils";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { queryVehicleBind, rePage } 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 {
  vehiclePlateColorPai,
  getVehiclePlateColorPai,
  getVehiclePlateStyle
} 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: [],
  type: "",
  pageNo: 1,
  pageSize: 10,
  total: 0,
  loading: false,
  finished: false,
});

const titleMap = [
	{name: 'ETC注销-选择车辆', key: '2', router: ''},
	{name: '更换ETC设备-选择车辆', key: '3', router: ''},
	{name: '卡签续期-选择车辆', key: '4', router: '/subpackage/after-sale/renewalContral/car-detail'},
	{name: '卡签挂失/解除挂失-选择车辆', key: '5', router: '/subpackage/after-sale/reportLossCard/detail'},
	{name: '增补设备-选择车辆', key: '6', router: ''},
	{name: '补卡补签-选择车辆', key: '7', router: ''},
	{name: '解除挂起-选择车辆', key: '8', router: ''},
	{name: '储值卡转记账卡-选择车辆', key: '30', router: ''},
	{name: '卡pin码解锁-选择车辆', key: '31', router: ''},
	{name: 'ETC车牌过户-选择车辆', key: '32', router: ''},
	{name: '卡签停用/卡签启用-选择车辆', key: '33', router: ''},
	{name: '月结单查询-选择车辆', key: '34', router: ''},
	{name: 'ETC通行流水-选择车辆', key: '35', router: ''},
	{name: '黑名单查询', key: '36', router: '/subpackage/after-sale/blacklist-query/list'},
	{name: '恢复签约-选择车辆', key: '37', router: '/subpackage/orders/sign-up'},
]

onLoad((options) => {
  console.log("options", options);
  state.type = options.type;
  
  serTitle() // 设置页面标题
});
onShow(() => {
  if (state.type == "37") {
    list(true);
  } else {
    quanCheckActionTrue(state.vehiclePlate, true);
  }
});

	
const getList = () => {
	if (state.type == "37") {
		list();
	} else {
		quanCheckActionTrue(state.vehiclePlate);
	}
}
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,
      vehiclePlate: state.vehiclePlate,
    },
    method: "POST",
    showLoading: true,
  };
  return requestNew(rePage, 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;
    });
};

// 设置页面title
const serTitle = () => {
	let titleInfo = titleMap.find(item => item.key == state.type)
	uni.setNavigationBarTitle({
	  title: titleInfo ? titleInfo.name : '选择车辆'
	});
}

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) => {
  console.log(item);
  // 4 卡签续签  5： 挂失解挂  36：黑名单查询 37：回复签约
  
  let pageInfo = titleMap.find(item => item.key == state.type)
  
  let routerParams = {
	  vehicleId: item.vehicleId
  }
  
  if (state.type === '37') {
	  routerParams = Object.assign(routerParams, {channelSing: 1, from: 37})
  }
  
  let paramsStr = objectToQueryString(routerParams)
  
  if (pageInfo && pageInfo.router) {
	  navTo(`${pageInfo.router}?${paramsStr}`)
  } else {
	  navTo(`/subpackage/after-sale/activation-once-again/vehicle-details?${paramsStr}`)
  }

};
const add = () => {
  navTo(`/subpackage/after-sale/blacklist-query/addCar`);
};
const search = () => {
  if (state.type == "37") {
    list(true);
  } else {
    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-out{
	  position: relative;
  }
  .yanse {
    position: absolute;
    background: red;
    color: white;
    border-radius: 15rpx 0 15rpx 0;
    text-align: center;
    font-size: 24rpx;
    top: 0;
	left: 0;
	padding: 2rpx 6rpx;
	background-color: rgb(56,139,252);
  }
  .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>