cashier-web/src/views/tool/Instead/components/popup-weight-goods.vue

<template>
  <div class="select_desk">
    <el-dialog width="410px" :title="title" v-model="show">
      <div class="u-flex" v-if="min">
        <span>起售数量</span>
        <span class="u-m-l-10">{{ min }}</span>
        <span class="u-m-l-2">{{ item.unitName }}</span>
      </div>
      <div class="select_desk_dialog u-p-b-20">
        <key-board isCanEmpty v-model="number" isFloat @clear="clear">
          <template #clear>
            <div>.</div>
          </template>
          <template #input>
            <div class="u-font-14 u-row-between u-flex w-full u-text-left u-p-b-1">
              <div class="">
                <div>单价</div>
                <div class="u-m-t-10">
                  <el-tag type="primary">￥{{ price }}/{{ item.unitName }}</el-tag>
                </div>
              </div>
              <div>
                <div class="u-font-14">重量</div>
                <div class="u-m-t-10">
                  <el-input
                    placeholder="请输入重量"
                    v-model="number"
                    @input="inputNumber"
                    @change="inputChange"
                    @focus="inputFocus"
                    @blur="inputBlur"
                    :type="focus ? 'number' : 'text'"
                  >
                    <template #append>
                      {{ item.unitName }}
                    </template>
                  </el-input>
                </div>
              </div>
            </div>
          </template>
        </key-board>
        <div class="price u-text-left w-full">￥ {{ allPrice }}</div>

        <div class="confirm_btns u-flex u-m-t-20">
          <el-button style="width: 100%" type="primary" @click="confirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import keyBoard from "./keyboard.vue";
const props = defineProps({
  payMoney: {
    type: [Number, String],
    default: 0,
  },
  isShowVipPrice: {
    type: Boolean,
    default: false,
  },
});

const state = reactive({
  guazhangRen: "",
  number: "",
  show: false,
  hasOpen: false,
  loading: false,
  tips: "",
  focus: false,
  data: {},
  item: "",
});
const { guazhangRen, number, show, hasOpen, loading, tips, focus, data, item } = toRefs(state);
const title = ref("称重商品");
let min = ref(0);
const price = computed(() => {
  if (!item.value) {
    return 0;
  }
  return item.value.lowPrice;
});
const allPrice = computed(() => {
  return (price.value * number.value).toFixed(2);
});
function inputFocus() {
  focus.value = true;
}
function inputBlur() {
  focus.value = false;
}
function inputNumber(e) {
  console.log(e);
}
function inputChange(e) {
  console.log(e);
}
function clear(e) {
  console.log(e);
  number.value = "";
  item.value = "";
}
const emits = defineEmits(["confirm"]);
function confirm() {
  if (number.value * 1 <= 0) {
    return ElMessage.error("请输入重量");
  }
  if (number.value * 1 < min.value) {
    return ElMessage.error("最小起售数量为" + min.value + item.value.unitName);
  }
  emits("confirm", item.value, (number.value * 1).toFixed(2));
  close();
}
function open(data) {
  item.value = data;
  min.value = data.skuList[0].suitNum || 0;
  title.value = data.name;
  show.value = true;
}
function close() {
  show.value = false;
  number.value = "";
  item.value = "";
}
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
:deep(.el-button) {
  padding: 12px 20px;
}

:deep(.carts .box_status) {
  border: none;
}

:deep(.el-input__inner::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

:deep(.el-input__inner::-webkit-outer-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

:deep(.el-button--success) {
  border-color: #22bf64;
  background-color: #22bf64;
}

.select_desk .btn {
  height: 34px;
}

.tags {
  font-size: 16px;

  &.using {
    color: rgb(234, 64, 37);
  }

  &.wait {
    color: rgb(252, 236, 79);
  }

  &.idle {
    color: rgb(137, 234, 71);
  }

  &.closed {
    color: rgb(221, 221, 221);
    filter: grayscale(1);
  }
}

:deep(.inputs .el-input__inner) {
  border-color: transparent !important;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1.25px;
  font-size: 20px;
}

.select_desk .select_desk_dialog {
  display: flex;

  flex-direction: column;

  align-items: center;
}

.select_desk .select_desk_dialog .nav {
  width: 286px;
  height: 38px;
  background: #dcf0e8;

  justify-content: space-around;
}

.select_desk .select_desk_dialog .nav .li,
.select_desk .select_desk_dialog .nav {
  border-radius: 4px;

  display: flex;

  align-items: center;
}

.select_desk .select_desk_dialog .nav .li {
  width: 140px;
  height: 34px;
  color: #0fc161;

  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

.select_desk .select_desk_dialog .nav .lion {
  background: #0fc161;
  color: #fff;
}

.select_desk .select_desk_dialog .inputs {
  width: 370px;
  line-height: 54px;
  margin-top: 24px;
  height: 54px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1.25px;
  text-align: center;
  font-size: 20px;
  position: relative;
}

.price {
  font-size: 18px;
  text-align: left;
  color: rgb(255, 81, 82);
  font-weight: 600;
}

.select_desk .select_desk_dialog .inputs .close {
  color: #aaa;
  position: absolute;
  right: 10px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  top: 50%;
  margin-top: -15px;
  cursor: pointer;
}

.guazhangren {
  padding: 12px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-top: 20px;
  min-height: 58px;
  color: #999;
  cursor: pointer;

  .name {
    color: #3f9eff;
  }
}

.select_desk .select_desk_dialog .keyboard {
  display: flex;

  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}

.select_desk .select_desk_dialog .keyboard .li {
  height: 60px;
  width: 33.333%;

  display: flex;

  justify-content: center;

  align-items: center;
  font-size: 24px;
  color: #212121;
  cursor: pointer;

  user-select: none;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;

  transition: all 0.1s;
}

.select_desk .select_desk_dialog .keyboard .li:hover {
  background: #dcdfe6;
}

.select_desk .select_desk_dialog .keyboard .li .icon {
  font-size: 1.3em;
}

.select_desk .select_desk_dialog .keyboard .confirm {
  height: 140px;
  background: #ff9f2e;
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: none;
}

.select_desk .select_desk_dialog .keyboard .confirm:hover {
  background: #f88502;
}

.confirm_btns {
  display: flex;

  justify-content: space-between;
  width: 100%;
}

.confirm_btns .el-button {
  width: 175px;
}
</style>