zhywpt-sp/applyCard/essential-information.vue

<template>
  <navBar title="九州ETC"></navBar>
  <navBgCar></navBgCar>
  <view class="content-wrap">
    <!-- 车牌输入 -->
    <view class="car-input">
      <view class="title">请输入申办车牌</view>
      <car-number-input @numberInputResult="carNumber"></car-number-input>
    </view>
    <!-- 车牌颜色 -->
    <view class="chepai-lane">
      <view class="title">选择车牌颜色</view>
      <numberplate-color
        :numberplate="state.data.vehiclePlateNumber"
        :numberplateCor="{ id: 0 }"
        @numberplateResult="checkNumberplateColor"
      >
      </numberplate-color>
    </view>
    <!-- 收货地址 -->
    <view v-if="!state.data.address" class="address-lane">
      <view class="title">请选择或新增收货地址</view>
      <view style="margin-top: 30rpx" class="action">
        <button type="default" class="button" @click="state.show = true">
          添加收货地址
        </button>
      </view>
    </view>
    <view v-if="state.data.address" class="address-lane">
      <view class="title">收货地址</view>
      <view
        @click="state.show = true"
        class="address-content"
        style="margin-top: 30rpx"
      >
        <view class="flex">
          <image
            :showLoading="true"
            :src="`${$imgUrl}applyCard/location.png`"
            style="width: 48rpx; height: 48rpx"
          >
          </image>
          <view style="margin-left: 18rpx" class="">
            <view class="address">
              {{ state.data.region + state.data.address }}
            </view>
            <view style="margin-top: 15rpx" class="flex">
              <view class="name">
                {{ state.data.consignee }}
              </view>
              <view class="phone">
                {{ state.data.consigneeTel }}
              </view>
            </view>
          </view>
        </view>
        <view class="arror"> > </view>
      </view>

      <view style="margin-top: 30rpx" class="action">
        <button type="default" class="button" @click="nextAction()">
          下一步
        </button>
      </view>
    </view>
  </view>
  <!-- 地址弹窗 -->
  <u-popup mode="bottom" v-model="state.show">
    <view class="address-line">
      <view
        v-if="state.addressArray"
        v-for="(item, index) in state.addressArray"
        :key="index"
        @click="addressSelected(item)"
        style="margin-bottom: 60rpx"
        class="flex-bettwen"
      >
        <view class="flex">
          <view class="xing">
            {{ item.consignee.charAt(0) }}
          </view>
          <view class="content">
            <view class="flex">
              <view class="name">
                {{ item.consignee }}
              </view>
              <view class="phone">
                {{ item.consigneeTel }}
              </view>
            </view>
            <view class="address">
              {{ item.region + item.address }}
            </view>
          </view>
        </view>
        <view
          @click.stop="editAddress(item)"
          style="margin-left: 80rpx"
          class="picture"
        >
          <image
            :showLoading="true"
            :src="`${$imgUrl}applyCard/edit.png`"
            style="width: 48rpx; height: 48rpx"
          ></image>
        </view>
      </view>
      <view
        :style="state.addressArray ? 'margin-top: 60rpx;' : ''"
        class="action-bottom"
      >
        <button type="default" class="button" @click="goToAddAddress()">
          添加收货地址
        </button>
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
/*导航*/
import navBgCar from "./components/nav-bg-car1";
import carNumberInput from "@/components/car-number-input/car-number-input.vue";
import numberplateColor from "./components/layout-numberplate-color";
import { getItem, StorageKeys } from "@/utils/storage";
import { stringToJson } from "@/utils/network/encryption";
import navBar from "../components/nav-bar/nav-bar2.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  addressQuery,
  etcCreatOrder,
  etcVehiclePlateVer,
  searchOrder,
} from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { reactive } from "vue";
import { msg } from "@/utils/utils";

const state = reactive({
  data: {
    vehiclePlate: undefined, //车牌号
    vehiclePlateNumber: "贵A1234", //车牌号
    vehiclePlateColor: 0, //车盘颜色
    type: "0", //车牌类型
    userType: "1",
    whetherToMail: 0, //是否需要邮寄 小程序默认邮寄
    orderSource: "WECHAT",
    opId: "",
    consignee: "", //收货人
    consigneeTel: "", //收货电话
    region: "",
    address: "",
    postalCode: "",
  },
  show: false,
  addressArray: undefined,
});

/* 选择车牌颜色 */
const checkNumberplateColor = (item: any) => {
  state.data.vehiclePlateColor = item.id;
};

const goToAddAddress = () => {
  uni.navigateTo({
    url: "/applyCard/addAddress",
  });
};
const editAddress = (val) => {
  uni.navigateTo({
    url: `/applyCard/editAddress?content=` + JSON.stringify(val),
  });
};

const carNumber = (val: any) => {
  state.data.vehiclePlate = val;
  state.data.vehiclePlateNumber = val;
};

const addressSelected = (val: any) => {
  state.data = {
    ...state.data,
    ...val,
  };
  state.show = false;
};
const nextAction = () => {
  if (!state.data.vehiclePlate) {
    msg("请输入申办车牌");
    return;
  }
  state.data.vehiclePlate = state.data.vehiclePlate.trim();

  console.log(state.data.vehiclePlate);
  console.log(state.data.vehiclePlate.length);

  if (state.data.vehiclePlate.length < 7) {
    msg("请输入正确的申办车牌");
    return;
  }

  //1.优先车牌校验 2.在进行订单创建
  var vehicleData = {
    vehiclePlate: state.data.vehiclePlate,
    vehiclePlateColor: state.data.vehiclePlateColor,
  };

  const options = {
    type: 2,
    data: vehicleData,
    method: "POST",
    showLoading: true,
  };
  request(etcVehiclePlateVer, options).then((res) => {
    var data = state.data;
    const options = {
      type: 2,
      data: data,
      method: "POST",
      showLoading: true,
    };

    request(etcCreatOrder, options).then((res) => {
      console.log(res);
      if (res.statusCode === 600) {
        orderGoAction();
      } else {
        const data = stringToJson(res.bizContent);
        if (state.data.userType === "1") {
          uni.navigateTo({
            url: `/applyCard/opening-account-people?orderId=${data.orderId}&&vehiclePlateColor=${state.data.vehiclePlateColor}`,
          });
        } else {
          uni.navigateTo({
            url: `/applyCard/opening-account-unit?orderId=${data.orderId}&&vehiclePlateColor=${state.data.vehiclePlateColor}`,
          });
        }
      }
    });
  });
};
//按照订单阶段去跳转
const orderGoAction = () => {
  var orderParmas = {
    vehicleId: state.data.vehiclePlate + "_" + state.data.vehiclePlateColor,
    opId: getItem(StorageKeys.OpenId),
    source: "WECHAT",
  };
  const options = {
    type: 2,
    data: orderParmas,
    method: "POST",
    showLoading: true,
  };
  request(searchOrder, options).then((res) => {
    const data = stringToJson(res.bizContent);
    orderStepGoActon(data);
  });
};
//订单状态舔砖
const orderStepGoActon = (val: any) => {
  //完成填写基本信息
  if (val.orderStep === 1) {
    if (state.data.userType === "1") {
      uni.navigateTo({
        url: `/applyCard/opening-account-people?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
      });
    } else {
      uni.navigateTo({
        url: `/applyCard/opening-account-unit?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
      });
    }
  } else if (val.orderStep === 2) {
    uni.navigateTo({
      url: `/applyCard/car-release?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
    });
  } else if (val.orderStep === 3) {
    uni.navigateTo({
      url: `/applyCard/choice-product?orderId=${val.orderId}`,
    });
  } else if (val.orderStep === 4) {
    uni.navigateTo({
      url: `/applyCard/product-detail?orderId=${val.orderId}&&clientFee=${val.product.clientFee}&&id=${val.productId}`,
    });
  }
};
onLoad((option: any) => {
  state.data.opId = getItem(StorageKeys.OpenId);
  state.data.type = option.type; //客车
  state.data.userType = option.userType;
});
onShow(() => {
  var data = {
    openId: getItem(StorageKeys.OpenId),
  };
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  request(addressQuery, options).then((res) => {
    const data = stringToJson(res.bizContent);
    state.addressArray = data.data;
  });
});
</script>

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

.content-wrap {
  position: relative;
  margin-top: -50rpx;
  padding: 0rpx 30rpx;

  .title {
    font-size: 30rpx;
    font-family: Noto Sans S Chinese;
    font-weight: 400;
    color: #000000;
    line-height: 30rpx;
    margin-bottom: 30rpx;
  }

  .car-input {
  }

  .chepai-lane {
    margin-top: 60rpx;
    margin-bottom: 20rpx;
  }

  .address-lane {
    margin-bottom: 30rpx;

    .title {
      font-size: 30rpx;
      font-weight: 400;
      color: #000000;
      line-height: 30rpx;
    }
  }
}

.address-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #dcdcdc;

  .name {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    font-size: 26rpx;
  }

  .phone {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    line-height: 26rpx;
    margin-left: 20rpx;
  }

  .arror {
    width: 16rpx;
    height: 30rpx;
    color: rgba(153, 153, 153, 1);
  }

  .address {
    font-size: 32rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 32rpx;
  }
}

.address-line {
  padding: 20px;

  .flex-bettwen {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .xing {
    width: 68rpx;
    height: 68rpx;
    background: rgba(0, 179, 139, 0.2);
    border-radius: 50%;
    font-size: 26rpx;
    font-weight: 400;
    color: #00b38b;
    line-height: 68rpx;
    text-align: center;
  }

  .content {
    margin-left: 20px;

    .name {
      font-size: 30rpx;
      font-family: Microsoft YaHei;
      font-weight: 500;
      color: #333333;
    }

    .phone {
      margin-left: 10rpx;
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      line-height: 36rpx;
    }

    .address {
      margin-top: 10rpx;
      font-size: 26rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 36rpx;
    }

    .picture {
      width: 48rpx;
      height: 48rpx;
    }

    .editIcon {
      width: 48rpx;
      height: 48rpx;
    }
  }
}

.action {
  padding-bottom: 100rpx;

  .button {
    height: 80rpx;
    background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 80rpx;
  }
}

.action-bottom {
  padding-bottom: 30rpx;

  .button {
    height: 80rpx;
    background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 80rpx;
  }
}
</style>