pco/app/pages/onely-disinfect/car-manager.vue

<template>
  <view>
    <view class="box">
      <view class="top">
        <text class="title">业务车辆</text>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;">*</text>
          车牌号：
        </view>
        <view class="r">
          <u-input placeholder="输入车牌号" v-model="form.carNo">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">
          <text style="color: red;" v-if="needCarSize==1">*</text>
          规格(米)：
        </view>
        <view class="r">
          <u-input placeholder="输入规格" type="number" v-model="form.carSize">
          </u-input>
        </view>
      </view>
      <view class="item">
        <view class="l">车辆类型：</view>
        <view class="r" style="flex: 12;">
          <picker v-if="carType.list.length>0" class="p-picker" @change="carTypeChange($event)"
                  :value="carType.index" :range="carType.list" range-key="name">
            <text class="p-text">{{ carType.list[carType.index].name }}</text>
          </picker>
        </view>
      </view>
      <view class="item" v-if="carType.index==1">
        <view class="l">
          <text style="color: red;">*</text>
          载重(kg)：
        </view>
        <view class="r">
          <u-input placeholder="车辆载重" v-model="form.netWeight">
          </u-input>
        </view>
      </view>
    </view>
    <view style="margin-top: 50px;">
      <u-button type="primary" text="确定" @click="saveFn"></u-button>
      <u-button type="info" text="返回" @click="backFn" style="margin-top: 20rpx;"></u-button>
    </view>
    <!-- ---------------------------------------------------------- -->
    <view class="bottom-safety"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      carType: {
        index: 0,
        list: []
      },
      needCarSize: 0,
      needWeight: 0,
      form: {
        carNo: '',
        carType: '',
        netWeight: '',
        carSize: ''
      }
    }
  },
  onLoad(options) {
    this.form = JSON.parse(options.carJson);

    this.needCarSize = options.needCarSize;
    this.needWeight = options.needWeight;
    this.getCarType();
  },
  methods: {
    getCarType() {
      this.$api.getCarType().then(resp => {
        let list = resp.data;
        this.carType.list = list;
        let form = this.form;
        let carType = this.form.carType;
        if (carType) {
          this.carType.index = this.carType.list.map(obj => obj.name).indexOf(carType);
        }
      })
    },
    carTypeChange(e) {
      var value = e.detail.value; //当前picker选中的值
      this.carType.index = value;
    },
    backFn() {
      this.$common.back();
    },
    saveFn() {
      let data = this.form;
      if (!data.carNo) {
        this.$common.toast('请填写车牌号')
        return false;
      }
      let needCarSize = this.needCarSize;
      if (!data.carSize && needCarSize == 1) {
        this.$common.toast('请填写车辆规格')
        return false;
      }
      let needWeight = this.needWeight;
      if (this.carType.index == 1 && (!data.netWeight || data.netWeight <= 0)) {
        this.$common.toast('请填写车辆载重')
        return false;
      }
      if (this.carType.index == 0) {
        data.netWeight = 0;
      }
      data.carType = this.carType.list[this.carType.index].name;
      data.carNo = data.carNo.toUpperCase();
      uni.navigateBack({
        delta: 1,
        success: function (resp) {
          uni.$emit('getCar', data) //触发事件
        }
      })
    }
  },
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.save-btn {
  background-color: #ff4200;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60rpx;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 10rpx;
}

@import '@/common/common.scss'
</style>