disinfection_high_front_end/src/components/dialogs/LogPicker.vue

<template>
  <div class="log_picker_dialog_container">
    <div class="modal_content">
      <p class="title">设置消毒等级</p>
      <div class="log_select">
        <van-picker
          :columns="columns"
          :show-toolbar="false"
          visible-option-num="3"
          option-height="42"
          v-model="selectedValues"
        />
      </div>
      <div class="ok_btn style-btn" @click="chooseLog">确定</div>
      <svg
        class="close"
        @click="handleClickClose"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="13.06049919128418"
        height="13.062000274658203"
        viewBox="0 0 13.06049919128418 13.062000274658203"
      >
        <g>
          <path
            d="M6.531,7.5915L12,13.062L13.0605,12.0015L7.5915,6.531L13.0605,1.062L12,3.57628e-7L6.531,5.4705L1.062,0L0,1.062L5.4705,6.531L0,12L1.062,13.062L6.531,7.5915Z"
            fill="#323233"
            fill-opacity="1"
          />
        </g>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  changeLogVal: {
    type: Function,
  },
  logVal: {
    type: String,
  },
  hiddenLogVisible: {
    type: Function,
  },
})

const columns = ref([
  { text: '1 Log', value: '1' },
  { text: '2 Log', value: '2' },
  { text: '3 Log', value: '3' },
  { text: '4 Log', value: '4' },
  { text: '5 Log', value: '5' },
  { text: '6 Log', value: '6' },
  { text: '7 Log', value: '7' },
  { text: '8 Log', value: '8' },
  { text: '9 Log', value: '9' },
  { text: '10 Log', value: '10' },
  { text: '11 Log', value: '11' },
  { text: '12 Log', value: '12' },
])

const chooseLog = () => {
  props.changeLogVal(selectedValues.value[0])
}

const handleClickClose = () => {
  props.hiddenLogVisible()
}

const selectedValues = ref([localStorage.getItem('logVal') || '6'] || ['6'])

watch(() => {
  selectedValues.value = [props.logVal]
})
</script>

<style lang="scss" scoped>
.log_picker_dialog_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .modal_content {
    width: 476px;
    height: 407px;
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 45px 68px 62px 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .close {
      position: absolute;
      right: 24px;
      top: 18px;
    }
    .title {
      font-family: Source Han Sans CN;
      font-size: 22px;
      font-weight: normal;
      letter-spacing: 0.04em;
      color: #000000;
      margin-bottom: 39px;
    }
    .log_select {
      width: 340px;
      height: 113px;
      overflow: hidden;
      margin-bottom: 48px;
    }
    .ok_btn {
      width: 340px;
      height: 68px;
      border-radius: 8px;
      background: #06518b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Source Han Sans CN;
      font-size: 23px;
      font-weight: 350;
      letter-spacing: 0em;
      color: #ffffff;
    }
  }
}
</style>