AstraZeneca_uniapp/pages/subPackages/sj_yy/index.vue

<template>
  <div class="qy_yy">
    <div class="form bd_bottom">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>供应商</span>
      </div>
      <div>
        <input type="text" placeholder="请输入" v-model="formData.userName" />
      </div>
    </div>
    <div class="form bd_bottom pdt32 pdb32" style="display: block">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>车牌号</span>
      </div>
      <div>
        <car-number v-model="carNumber"></car-number>
      </div>
      <div class="historyList">
        <div class="historyList-item mt32">
          <div>苏B51WK7</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
        <div class="historyList-item mt32">
          <div>苏B51WK7</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
        <div class="historyList-item mt32">
          <div>苏B51WK7</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
        <div class="historyList-item mt32">
          <div>苏B51WK7</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
      </div>
    </div>
    <div class="form bd_bottom">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>车辆类型</span>
      </div>
      <div class="form-value">
        <input
          type="text"
          :readonly="true"
          placeholder="请选择"
          v-model="formData.userName"
        />
      </div>
      <van-icon name="arrow" />
    </div>
    <div class="form bd_bottom" style="display: block">
      <div style="display: flex">
        <div class="form-label">
          <span class="form-requird">*</span>
          <span>司机姓名</span>
        </div>
        <div class="form-value">
          <input
            type="text"
            readonly
            placeholder="请选择"
            v-model="formData.userName"
          />
        </div>
      </div>
      <div class="historyList">
        <div class="historyList-item mt32">
          <div>宣师傅</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
        <div class="historyList-item mt32">
          <div>陈师傅</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
        <div class="historyList-item mt32">
          <div>刘师傅</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
        <div class="historyList-item mt32">
          <div>于师傅</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
      </div>
    </div>
    <div class="form bd_bottom" style="display: block">
      <div style="display: flex">
        <div class="form-label">
          <span class="form-requird">*</span>
          <span>手机号</span>
        </div>
        <div class="form-value">
          <input
            type="text"
            readonly
            placeholder="请选择"
            v-model="formData.userName"
          />
        </div>
      </div>
      <div class="historyList">
        <div class="historyList-item mt32">
          <div>13921516068</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
        <div class="historyList-item mt32">
          <div>13921516068</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
        <div class="historyList-item mt32">
          <div>13921516068</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
        <div class="historyList-item mt32">
          <div>13921516068</div>
          <div class="btn">
            <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
          </div>
        </div>
      </div>
    </div>
    <div class="form bd_bottom mt32">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>装卸类型：</span>
      </div>
      <div>
        <input type="text" placeholder="请输入" v-model="formData.userName" />
      </div>
    </div>
    <div class="form bd_bottom">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>件数/托盘数：</span>
      </div>
      <div>
        <input type="text" placeholder="请输入" v-model="formData.userName" />
      </div>
    </div>
    <div class="form bd_bottom">
      <div class="form-label">
        <span class="form-requird">*</span>
        <span>预约日期：</span>
      </div>
      <div>
        <input
          style="width: 400rpx"
          type="text"
          placeholder="请输入"
          v-model="formData.userName"
        />
      </div>
      <van-icon name="arrow" />
    </div>

    <div class="bottom-form mt32">
      <div class="mt-select">
        <div class="select-item">1号码头</div>
        <div class="select-item">1号码头</div>
        <div class="select-item">1号码头</div>
        <div class="select-item">1号码头</div>
        <div class="select-item">1号码头</div>
        <div class="select-item">1号码头</div>
        <div class="select-item">1号码头</div>
        <div class="select-item">1号码头</div>
      </div>
      <div class="sj-select-title">
        <div class="sj-label">
          <span style="color: red">*</span>
          可选时间
        </div>
        <div class="legend">
          <div class="white-legend"></div>
          <div>可选</div>
        </div>
        <div class="legend">
          <div class="purple-legend"></div>
          <div>已占用</div>
        </div>
      </div>
      <div class="sj-select">
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
        <div class="select-item">9:00</div>
      </div>

      <div class="foot-btn">
        <van-button color="rgba(0, 0, 0, 0.05)" type="default" class="cancel">
          取消
        </van-button>
        <van-button color="rgba(138, 5, 84, 1)" type="primary">
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import CarNumber from "@/components/codecook-carnumber/codecook-carnumber.vue";

export default {
  data() {
    return {
      formData: {},
      carNumber: "",
    };
  },
  components: {
    CarNumber,
  },
  mounted() {
    // demo();
  },
  methods: {},
};
</script>

<style lang="scss">
.qy_yy {
  .foot-btn {
    margin-top: 32rpx;
    margin-bottom: 32rpx;
    display: flex;
    justify-content: space-around;
    .cancel {
      button {
        color: rgba(138, 5, 84, 1) !important;
      }
    }
  }
  .form-value {
    width: 435rpx;
    input {
      width: 100%;
    }
  }
  .sj-select {
    display: flex;
    flex-wrap: wrap;
    margin-top: 32rpx;
    .select-item {
      text-align: center;
      line-height: 80rpx;
      width: 225rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #eaeff6;
    }
    .iselected {
      background: #ededed;
    }
    .isuse {
      background: rgba(142, 139, 228, 1);
    }
  }
  .sj-select-title {
    display: flex;
    align-items: center;
    .legend {
      display: flex;
      align-items: center;
      margin-right: 32rpx;
    }
    .sj-label {
      margin-right: 64rpx;
    }
    .white-legend {
      margin-right: 16rpx;
      width: 28rpx;
      height: 28rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #e9e9e9;
    }
    .purple-legend {
      margin-right: 16rpx;
      width: 28rpx;
      height: 28rpx;
      background: #8e8be4;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
  }
  .bottom-form {
    background: #ffffff;
    padding: 32rpx;
    box-sizing: border-box;
    .mt-select {
      display: flex;
      flex-wrap: wrap;
      .select-item {
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 12rpx 30rpx;
        margin-left: 5rpx;
        margin-right: 5rpx;
        margin-bottom: 32rpx;
        background: rgba(245, 247, 250, 1);
      }
    }
  }
  .historyList {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .historyList-item {
      padding: 10rpx 15rpx;
      display: flex;
      text-align: center;
      font-weight: 400;
      color: #666666;
      background: #f5f7fa;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin-left: 5rpx;
      margin-right: 5rpx;
      .btn {
        margin-left: 15rpx;
      }
    }
  }

  .form {
    padding: 32rpx 32rpx;
    display: flex;
    background: #ffffff;
    min-height: 112rpx;
    align-items: center;
    box-sizing: border-box;
    .form-label {
      font-weight: 400;
      font-size: 32rpx;
      color: #333333;
      margin-right: 64rpx;
      .form-requird {
        color: red;
      }
    }
  }
  .pdt32 {
    padding-top: 32rpx;
  }
  .pdb32 {
    padding-bottom: 32rpx;
  }
  .mb32 {
    margin-bottom: 32rpx;
  }
  .mt32 {
    margin-top: 32rpx;
  }
  .bd_bottom {
    border-bottom: 2rpx #e6e6e6 solid;
  }
}
</style>