vk-data-goods-sku-popup uniapp vue3示例-优快云博客

效果图

组件简介

vk-data-goods-sku-popup是一个uniapp上面方便好用的sku组件，使用场景包括但不限于商品详情页、购物车页面、订单结算页、搜索结果页

下面就上代码了，完整vue页面的代码如下

<script setup>
import {ref,defineEmits,defineProps,computed} from 'vue'

// 显示toast
const showToast = ({ title, icon, duration }) => {
  uni.showToast({
    title: title || '提示',
    icon: icon || 'none',
    duration: duration || 2000
  });
}

const props = defineProps({
  goodsInfo: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

// 定义事件
const emits = defineEmits(['selectOk']);
// 弹窗状态
const skuPopIsShow = ref(false);
// 弹窗实例
const skuPopupRef = ref();
// 商品数据
const localdata = ref({
  "_id":"002",
  "name": "迪奥香水",
  "goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
  "sku_list": [
    {
      "_id": "004",
      "goods_id": "002",
      "goods_name": "迪奥香水",
      "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      "price": 19800,
      "sku_name_arr": ["50ml/瓶"],
      "stock": 100
    },
    {
      "_id": "005",
      "goods_id": "002",
      "goods_name": "迪奥香水",
      "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      "price": 9800,
      "sku_name_arr": ["70ml/瓶"],
      "stock": 100
    }
  ],
  "spec_list": [
    {
      "list": [
        {
          "name": "20ml/瓶"
        },
        {
          "name": "50ml/瓶"
        },
        {
          "name": "70ml/瓶"
        }
      ],
      "name": "规格"
    }
  ]
});

// pop显示的数据
const skuData = computed(() => {
  if (!props.goodsInfo?.id) {
    return localdata;
  }
  return props.goodsInfo;
});
// 弹窗模式
const skuPopupMode = computed(() => {
  // 先判断缺货

  // 再判断商品类型
  return props.goodsInfo?.goods_type === 1 ? 1 : 3;
});
// 弹窗显示
const showSkuPopup = () => {
  skuPopIsShow.value = true;
};
// 获取商品详情数据
const getGoodsInfoData = async (goodsId) => {
  const res = {
    goods:[]
  }
  console.log('getGoodsInfoData res', res);
  localdata.value = res.goods;

  console.log('getGoodsInfoData skuData', skuData.value);
};
// 弹窗显示并获取商品详情数据
const showSkuPopupAndGetData = async (goodsId) => {
  console.log('showSkuPopupAndGetData', goodsId);
  await getGoodsInfoData(goodsId);
  skuPopIsShow.value = true;
};
// 关闭弹窗
const selectOk = (obj) => {
  emits('selectOk', obj);
};
// 加入购物车
const addCart = async (obj) => {
  console.log('监听 - 加入购物车', obj);
  uni.showLoading({});
  // TODO 调用API，加入购物车
  skuPopIsShow.value = false;
  if (err) {
    console.log(err);
    showToast({
      title: err.message,
      icon: 'none'
    });
    return;
  }
  showToast({
    title: '加入购物车成功',
    icon: 'success'
  });
};
// 立即购买
const buyNow = (obj) => {
  console.log('监听 - 立即购买', obj);
  skuPopIsShow.value = false;
  // TODO 路由到预下单页
};
</script>

<template>
  <button @click="showSkuPopup">显示popup</button>
  <vk-data-goods-sku-popup
      ref="skuPopupRef"
      v-model="skuPopIsShow"
      border-radius="20"
      :localdata="skuData"
      :mode="skuPopupMode"
      goods-thumb-name="cover"
      goods-id-name="id"
      sku-id-name="option_id"
      add-cart-background-color="rgba(255, 96, 0, 0.5)"
      @add-cart="addCart"
      @buy-now="buyNow"
      @selectOk="selectOk"
  ></vk-data-goods-sku-popup>
</template>

<style scoped lang="scss"></style>