supplier-dispatch-h5/src/views/index/driverAdd.vue

<template>
<div class="wrap">
  <cell-group label="司机姓名" placeholder="请输入司机姓名" @input="getName(name)" v-model="name"/>
  <cell-group label="手机号码" placeholder="请输入手机号" @input="getPhone(phone)" v-model="phone"/>
  <cell-group label="身份证号" placeholder="请输入身份证号" @input="getCarId(carId)" v-model="carId"/>
<!--  <div class="itemContent">-->
<!--    <div class="titleType">-->
<!--      <img class="startImg" src="@/assets/start.png" />-->
<!--      <span>司机姓名</span>-->
<!--    </div>-->
<!--    <div class="checkContent">-->
<!--      <input placeholder="请输入司机姓名" />-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="lineBot"></div>-->
<!--  <div class="itemContent">-->
<!--    <div class="titleType">-->
<!--      <img class="startImg" src="@/assets/start.png" />-->
<!--      <span>手机号码</span>-->
<!--    </div>-->
<!--    <div class="checkContent">-->
<!--      <input placeholder="请输入手机号码" />-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="lineBot"></div>-->
<!--  <div class="itemContent">-->
<!--    <div class="titleType">-->
<!--      <img class="startImg" src="@/assets/start.png" />-->
<!--      <span>身份证号</span>-->
<!--    </div>-->
<!--    <div class="checkContent">-->
<!--      <input placeholder="请输入身份证号" />-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="lineBot"></div>-->
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>准驾车型</span>
    </div>
    <select id="mySelect"  class="chosen-select" style="width: 44px">
      <option value="C1">C1</option>
      <option value="C2">C2</option>
      <option value="C3">C3</option>
    </select>
  </div>
  <div class="lineBot"></div>
  <div class="itemContent">
    <div class="titleType">
      <img class="startImg" src="@/assets/start.png" />
      <span>司机状态</span>
    </div>
    <div class="isJoin">
      <van-radio-group v-model="radio" @change="isUse"  class="joinWrap">
        <van-radio name="启用" style="margin-right: 26px" class="item">
          启用
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
        <van-radio name="停用" class="item">
          停用
          <img
              slot="icon"
              slot-scope="props"
              :src="props.checked ? activeIcon : inactiveIcon"
          >
        </van-radio>
      </van-radio-group>
    </div>
  </div>
  <div class="lineBot"></div>
  <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
</div>
</template>

<script>
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
import CellGroup  from "@/components/cellGroup.vue"
export default {
  name: "driverAdd",
  data(){
    return{
      name:"",
      phone:"",
      carId:"",
      radio:'启用',
      activeIcon: require('@/assets/check.png'),
      inactiveIcon: require('@/assets/uncheck.png')
    }
  },
  mounted() {
    console.log("radio",this.radio)
      const selectElement = document.getElementById('mySelect');
      selectElement.addEventListener('change', function() {
        const selectedValue = selectElement.value;
        console.log('Selected value:', selectedValue);
      });
  },
  methods:{
    isUse(e){
      console.log("是否启用",e)
    },
    cancelBtn(){
      console.log("取消司机")
    },
    submitBtn(){
      console.log("提交司机")
    },
    getName(e){
      console.log("NAME",e);
    },
    getPhone(e){
      console.log("phone",e);
    },
    getCarId(e){
      console.log("car",e);
    }
  },
  components:{
    TwoCommonBtn,
    CellGroup
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";

.wrap{
  @include wh(100%,100%);
  box-sizing: border-box;
  padding-left: 16px;
}
.itemContent{
  @include flexColBet;
  line-height: 56px;
  box-sizing: border-box;
  padding-right: 25px;
  .titleType{
    @include fontWeightSize(500,14px);
    color: #323643;
  }
  .isJoin{
    display: flex;
    .joinWrap, .item{
      @include flexCenter;
    }
    img{
      @include widHeiMar(16px,16px,6px)
    }
  }
  .startImg{
    @include widHeiMar(6px,6px,3px);
    vertical-align: super;
  }
  input{
    border: none;
    text-align: right;
    @include fontWeightSize(500,13px);
    opacity: .5;
  }

}
.lineBot{
  @include wh(100%,1px);
  background: #E9E9EA;
  opacity: 0.6;
}
.btn{
  margin-left: 8px;
  width: 91%;
  position: fixed;
  bottom: 30px;
}
</style>