VAVABUY/pagesBuyer/shop/components/quantity_popup.vue

<template>
  <popup
    @close="close"
    ref="popupRef"
    isClose
    iconSize="16px"
    zIndex="998"
    iconColor="var(--text)"
  >
    <template #title>
      <view class="product_info">
        <image
          :src="detail.picurl"
          class="cur_img"
          @click="previewImage(1, detail.picurl)"
        ></image>
        <view class="product_price">
          <rich-text
            class="texts"
            :nodes="MoneyAbouthtml(detail.price, true)"
          ></rich-text>
        </view>
      </view>
    </template>
    <template #content>
      <scroll-view class="sku_info" scroll-y>
        <view class="prop_wrapper">
          <view class="spec_title"><trans _t="数量" /></view>
          <view class="spec_items decrease">
            <up-number-box
              v-model="total"
              :min="1"
              @change="totalChange"
            ></up-number-box>
            <view class="inventory">
              <trans _t="库存" />:{{ detail.total }}
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
    <template #footer>
      <view class="footer_btn" @click="btnClick">
        <trans :_t="btnText == 'add' ? '加入购物车' : '立即购买'" />
      </view>
    </template>
  </popup>
</template>

<script setup>
import popup from "@/components/popup";
import { ref, computed } from "vue";
import { useSystemStore } from "@/store";
import { MoneyAbouthtml, Toast } from "@/utils";
import { SELLER_ADD_CART, SHOP_CART_CONFIRM } from "@/api";
import { useShopStore } from "@/store";

const useShop = useShopStore();
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["open", "close"]);

const total = ref(1);
const btnText = ref("add");
const useSystem = useSystemStore();
const popupRef = ref(null);
const symbol = computed(() => useSystem.getSymbol);

const totalChange = (e) => {};

const btnClick = () => {
  addCart();
};

const close = () => {
  popupRef.value && popupRef.value.close();
  emit("close");
};

const open = (value = "add") => {
  btnText.value = value;
  total.value = 1; // 重置数量
  popupRef.value && popupRef.value.open();
};

const addCart = async () => {
  try {
    const res = await SELLER_ADD_CART({
      id: props.detail.id,
      total: total.value,
    });
    useShop.setSellerNum(res.data.cartCount);
    Toast(res.msg);
    if (btnText.value == "buy") {
      uni.navigateTo({
        url: `/pagesBuyer/shop/shopConfirm?comfirmId=${res.data.cartids}`,
      });
    } else {
      close();
    }
  } catch (error) {
    Toast(error.msg);
  }
};

function previewImage(index, urls) {
  uni.previewImage({
    current: index,
    urls: [urls],
    success() {},
  });
}

defineExpose({
  open,
  close,
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

/deep/ .pop {
  .top {
    align-items: unset;
    padding-bottom: 24rpx;
  }

  .conts {
    padding-top: 0;
  }
}

.uni-preview-container {
  z-index: 99999 !important;
  /* 确保高于其他元素 */
}

.product_info {
  .flex();

  .cur_img {
    width: 144rpx;
    height: 144rpx;
    border-radius: 8rpx;
    margin-right: 24rpx;
  }

  .product_price {
    color: var(--red);
    .size(40rpx);
    font-weight: 700;
    .flex();

    .texts {
      margin-left: 8rpx;

      /deep/ div {
        .ver(baseline);

        .decimal {
          .size(24rpx);
        }
      }
    }
  }
}

.sku_info {
  .prop_wrapper {
    margin-top: 8rpx;

    .spec_title {
      .ver();
      color: var(--text);
      .size(28rpx);
      font-weight: 700;
      line-height: 40rpx;
      min-height: 60rpx;
    }

    .spec_items {
      .flex();
      flex-wrap: wrap;
      gap: 16rpx;
      margin-top: 24rpx;

      .decrease {
        .ver();

        /deep/ .u-number-box {
          border: 1px solid #dcdfe6;
          border-radius: 16rpx;

          .u-number-box__minus,
          .u-number-box__plus {
            width: 76rpx !important;
            height: 76rpx !important;
            background-color: transparent !important;

            .u-icon__icon {
              .size(26rpx) !important;
              color: var(--text) !important;
            }

            &--hover {
              .u-icon__icon {
                color: var(--primary) !important;
              }
            }
          }

          .u-number-box__input {
            margin: 0;
            border-left: 1px solid #dcdfe6;
            border-right: 1px solid #dcdfe6;
            height: 76rpx !important;
            width: 160rpx !important;
            background-color: transparent !important;
          }
        }

        .inventory {
          color: var(--text);
          margin-left: 8rpx;
          .size(28rpx);
          line-height: 60rpx;
        }
      }
    }
  }
}

.footer_btn {
  background-color: var(--black);
  color: var(--light);
  border-radius: 20rpx;
  padding: 16rpx 30rpx;
  .flex_center();
  .size();
  font-weight: bold;
  height: 100rpx;
}
</style>