cashier-ipad/pagesCreateOrder/index/components/guige.vue

<template>
  <my-model ref="model" borderRadius="12" :title="title" width="50vw">
    <template #desc>
      <scroll-view
        scroll-y="true"
        style="height: 50vh"
        class="u-p-30 guigeModel"
      >
        <view class="u-m-b-40" v-for="(item, index) in skus" :key="index">
          <view class="u-text-left">
            <view class="color-333">{{ item.name }}</view>
          </view>
          <view class="u-flex u-m-t-20 u-flex-wrap">
            <view
              class="item"
              @tap="chooseSkd(index, skd)"
              :class="{ active: item.sel === skd.name, disabled: skd.disabled }"
              v-for="(skd, skdIndex) in item.values"
              :key="skdIndex"
            >
              {{ skd.name }}
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
    <template #btn>
      <view class="u-p-30 border-top">
        <view class="u-flex u-p-b-30 u-row-between">
          <view class="price">
            <template v-if="goods && goods.isGrounding">
              <text v-if="goodsData.is_time_discount">￥{{ returnLimitPrice()  }}</text>
              <text :class="{'old-price':goodsData.is_time_discount}">￥{{ to2(goods.salePrice * number) }}</text>
            </template>
          </view>
          <view class="u-flex">
            <view class="u-flex" @tap="reduce">
              <image
                src="/pagesCreateOrder/static/images/icon-reduce-black.svg"
                class="icon"
                mode=""
              >
              </image>
            </view>
            <view class="u-m-l-30 u-m-r-30 color-333">
              {{ number }}
            </view>
            <view class="u-flex" @tap="add">
              <image
                src="/pagesCreateOrder/static/images/icon-add-black.svg"
                class="icon"
                mode=""
              >
              </image>
            </view>
          </view>
        </view>
        <view class="u-m-t-10">
          <my-button @tap="close" type="cancel" v-if="isDisabled">
            <view class="color-999">已下架/售罄</view>
          </my-button>
          <my-button @tap="confirm" v-else>添加</my-button>
        </view>
      </view>
    </template>
  </my-model>
</template>

<script setup>
import { computed, reactive, ref, watch,inject } from "vue";
import util from "../util.js";
import infobox from "@/commons/utils/infoBox.js";
import myModel from "@/components/my-components/my-model.vue";
import myButton from "@/components/my-components/my-button.vue";
import BigNumber from "bignumber.js";
const yskUtils = inject("yskUtils");
const shopInfo = uni.getStorageSync("shopInfo");

const props = defineProps({
	limitTimeDiscount:{
		type: Object,
		default: () => {
			return {};
		},
	},
  goodsData: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: "",
  },
  skuMap: {
    type: Object,
    default: () => {
      return {};
    },
  },
  skus: {
    type: Array,
    default: () => {
      return [];
    },
  },
  defaultIndex: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

function to2(number) {
  return Number(number).toFixed(2);
}
function returnLimitPrice(){
	const price= yskUtils.limitUtils.returnPrice({
    goods: goods.value,
    shopInfo: shopInfo,
    limitTimeDiscountRes: props.limitTimeDiscount,
    shopUserInfo: null,
    idKey: "id",
  });

  return BigNumber(price).times(number.value).toNumber()
}
const selSku = computed(() => {
  return props.skus
    .reduce((prve, cur) => {
      prve.push(cur.sel);
      return prve;
    }, [])
    .join();
});

const goods = computed(() => {
  return props.skuMap[selSku.value];
});
watch(
  () => goods.value,
  (newval) => {
    console.log(props.goodsData.isStock);
    number.value = newval.suit || 1;
  }
);

const isCanBuy = computed(() => {
  if (!goods.value) {
    return false;
  }
  console.log(
    util.isCanBuy({
      ...goods.value,
      isStock: props.goodsData.isStock,
    })
  );
  return util.isCanBuy({
    ...goods.value,
    isStock: props.goodsData.isStock,
  });
});

//全部规格是否都无法使用
const isAllDisabled = computed(() => {
  console.log(props.skus);
  return props.skus.reduce((prve, cur) => {
    return (
      prve && cur.values.filter((v) => v.disabled).length === cur.values.length
    );
  }, true);
});

const emits = defineEmits(["confirm", "updateSku"]);
let number = ref(1);

function chooseSkd(skusIndex, skd) {
  const { name, disabled } = skd;
  if (disabled) {
    return;
  }
  if (props.skus[skusIndex].sel != name) {
    emits("updateSku", skusIndex, name);
  }
}
const defaultIndex = reactive(new Array(props.skus.length).fill(""));
for (let i in props.defaultIndex) {
  defaultIndex[i] = props.defaultIndex[i];
}
const activeArr = defaultIndex;

const model = ref(null);

function open() {
  model.value.open();
}

function close() {
  model.value.close();
}

const isDisabled = computed(() => {
  return isAllDisabled.value || !isCanBuy.value;
});

function reduce() {
  if (isDisabled.value) {
    return;
  }
  const suit = goods.value.suit || 1;
  const newval = number.value - 1;
  if (newval < suit) {
    return infobox.showToast(suit + "个起售");
  }
  number.value = newval <= 1 ? 1 : newval;
}

function add() {
  if (isDisabled.value) {
    return;
  }
  const newval = number.value + 1;
  number.value = newval;
}

function confirm() {
  close();
  if (isDisabled.value) {
    return;
  }
  emits("confirm", goods.value, number.value);
}
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.border-top {
}

.icon {
  width: 60rpx;
  height: 60rpx;
}

.guigeModel {
  .item {
    color: #666;
    font-size: 28rpx;
    padding: 4rpx 28rpx;
    border: 1px solid #e5e5e5;
    border-radius: 8rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    transition: all 0.2s ease-in-out;

    &.active {
      border-color: $my-main-color;
      color: $my-main-color;
    }

    &.disabled {
      color: #ccc;
      border-color: #eee;
    }
  }
}

.price {
  color: #eb4f4f;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.old-price{
	color: #999;
	text-decoration: line-through;
}
</style>