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
          class="search"
          placeholder="请输入车牌号"
          v-model="state.vehiclePlate"
        />
      </view>
    </view>
    <view class="title">车辆列表</view>
    <scroll-view
      class="selectCar-box"
      scroll-y="true"
      style="height: 60vh"
      @scrolltolower="list"
    >
      <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>
      <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 } 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 {
  getVehiclePlateColor,
  vehiclePlateColorPai,
} from "@/datas/vehiclePlateColor";
import { getCodeName } from "@/datas/queryKey.js";
import useOrderListItem from "@/composables/order/useOrderListItem";
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,
});
onLoad((options) => {
  console.log("options", options);
  state.type = options.type;
  if (options.type == "2") {
    uni.setNavigationBarTitle({
      title: "ETC注销-选择车辆",
    });
  } else if (options.type == "3") {
    uni.setNavigationBarTitle({
      title: "更换ETC设备-选择车辆",
    });
  } else if (options.type == "4") {
    uni.setNavigationBarTitle({
      title: "卡签续期-选择车辆",
    });
  } else if (options.type == "5") {
    uni.setNavigationBarTitle({
      title: "卡签挂失/解除挂失-选择车辆",
    });
  } else if (options.type == "6") {
    uni.setNavigationBarTitle({
      title: "增补设备-选择车辆",
    });
  } else if (options.type == "7") {
    uni.setNavigationBarTitle({
      title: "补卡补签-选择车辆",
    });
  } else if (options.type == "8") {
    uni.setNavigationBarTitle({
      title: "解除挂起-选择车辆",
    });
  } else if (options.type == "30") {
    uni.setNavigationBarTitle({
      title: "储值卡转记账卡-选择车辆",
    });
  } else if (options.type == "31") {
    uni.setNavigationBarTitle({
      title: "卡pin码解锁-选择车辆",
    });
  } else if (options.type == "32") {
    uni.setNavigationBarTitle({
      title: "ETC车牌过户-选择车辆",
    });
  } else if (options.type == "33") {
    uni.setNavigationBarTitle({
      title: "卡签停用/卡签启用-选择车辆",
    });
  } else if (options.type == "34") {
    uni.setNavigationBarTitle({
      title: "月结单查询-选择车辆",
    });
  } else if (options.type == "35") {
    uni.setNavigationBarTitle({
      title: "ETC通行流水-选择车辆",
    });
  } else if (options.type == "36") {
    uni.setNavigationBarTitle({
      title: "黑名单查询",
    });
  } else if (options.type == "37") {
    uni.setNavigationBarTitle({
      title: "恢复签约-选择车辆",
    });
  } else if (options.type == "38") {
    uni.setNavigationBarTitle({
      title: "车辆列表",
    });
  }
});
onShow(() => {
  if (state.type == "37") {
    list(true);
  } else {
    quanCheckActionTrue(state.vehiclePlate);
  }
});
const list = (reset = false) => {
  if (state.loading || state.finished) return;
  state.loading = true;
  if (reset) {
    state.pageNo = 1;
    state.list = [];
    state.finished = false;
  }
  // 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;
    });
};
const quanCheckActionTrue = (vehiclePlate) => {
  const options = {
    type: 2,
    data: {
      vehiclePlate,
    },
    method: "POST",
    showLoading: true,
  };
  requestNew(queryVehicleBind, options)
    .then((res) => {
      const data = res.result;
      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 {
        state.list = data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const flag = ref("0");

const choose = (i, item) => {
  console.log(item);
  if (state.type === '37') {
	  uni.navigateTo({
	    url: `/subpackage/orders/sign-up?vehicleId=${item.vehicleId}&channelSing=1&from=37`,
	  });
  } else {
	  // 跳转到车辆详情页面，携带item.id参数
	  uni.navigateTo({
	    url: `/subpackage/after-sale/activation-once-again/vehicle-details?id=${item.id}`,
	  });
  }

};
const add = () => {
  navTo(`/subpackage/after-sale/blacklist-query/addCar`);
};
const search = () => {
  list(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: 200rpx;
}
.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>