Browse Source

chore(sku): 区分 taro/vue

eiinu 3 years ago
parent
commit
0aa707b790

src/packages/__VUE/sku/components/SkuHeaderTaro.vue → src/packages/__VUE/sku/components/SkuHeader.taro.vue


+ 106 - 0
src/packages/__VUE/sku/components/SkuStepper.taro.vue

@@ -0,0 +1,106 @@
+<template>
+  <view class="nut-sku-stepper">
+    <view class="nut-sku-stepper-title">{{ stepperTitle }}</view>
+    <view class="nut-sku-stepper-limit" v-html="getExtraText()"></view>
+    <view class="nut-sku-stepper-count">
+      <nut-input-number
+        v-model="goodsCount"
+        :min="stepperMin"
+        :max="stepperMax"
+        @add="add"
+        @reduce="reduce"
+        @overlimit="overlimit"
+        @change="changeStepper"
+      />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+import { ref, onMounted } from 'vue';
+import { TypeOfFun } from '@/packages/utils/util';
+import { createComponent } from '@/packages/utils/create';
+import InputNumber from '../../inputnumber/index.taro.vue';
+const { componentName, create } = createComponent('sku-stepper');
+
+export default create({
+  props: {
+    // 购买数量最大值
+    stepperMax: {
+      type: [Number, String],
+      default: 99999
+    },
+
+    stepperMin: {
+      type: [Number, String],
+      default: 1
+    },
+
+    // stepper 前文案提示
+    stepperExtraText: {
+      type: [Function, Boolean],
+      default: false
+    },
+
+    // 数量选择左侧文案
+    stepperTitle: {
+      type: String,
+      default: '购买数量'
+    }
+  },
+  emits: ['click', 'changeSku', 'changeStepper', 'clickBtnOptions', 'overLimit', 'reduce', 'add'],
+
+  components: {
+    [InputNumber.name]: InputNumber
+  },
+
+  setup(props: any, { emit }) {
+    const goodsCount = ref(props.stepperMin);
+
+    onMounted(() => {
+      goodsCount.value = props.stepperMin;
+    });
+
+    const getExtraText = () => {
+      const { stepperExtraText } = props;
+
+      if (stepperExtraText && TypeOfFun(stepperExtraText) == 'function') {
+        return stepperExtraText();
+      } else {
+        return '';
+      }
+    };
+
+    // 修改购买数量 add 加  reduce 减
+    const add = (value: number) => {
+      emit('add', value);
+    };
+
+    const reduce = (value: number) => {
+      emit('reduce', value);
+    };
+
+    // stepper 极限值
+    const overlimit = (e: Event, action: string) => {
+      emit('overLimit', {
+        action,
+        value: parseInt(goodsCount.value + '')
+      });
+    };
+    // stepper 发生了改变
+    const changeStepper = (value: number) => {
+      goodsCount.value = value;
+
+      emit('changeStepper', value);
+    };
+
+    return {
+      goodsCount,
+      add,
+      reduce,
+      overlimit,
+      getExtraText,
+      changeStepper
+    };
+  }
+});
+</script>

+ 3 - 7
src/packages/__VUE/sku/index.taro.vue

@@ -63,13 +63,11 @@
 </template>
 <script lang="ts">
 import { ref, watch, PropType } from 'vue';
-import SkuHeader from './components/SkuHeaderTaro.vue';
+import SkuHeader from './components/SkuHeader.taro.vue';
 import SkuSelect from './components/SkuSelect.vue';
-import SkuStepper from './components/SkuStepper.vue';
+import SkuStepper from './components/SkuStepper.taro.vue';
 import SkuOperate from './components/SkuOperate.vue';
 import Popup from '../popup/index.taro.vue';
-import Price from '../price/index.taro.vue';
-import InputNumber from '../inputnumber/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('sku');
 
@@ -185,9 +183,7 @@ export default create({
     SkuSelect,
     SkuStepper,
     SkuOperate,
-    [Popup.name]: Popup,
-    [Price.name]: Price,
-    [InputNumber.name]: InputNumber
+    [Popup.name]: Popup
   },
 
   setup(props: any, { emit, slots }) {

+ 1 - 5
src/packages/__VUE/sku/index.vue

@@ -70,8 +70,6 @@ import SkuOperate from './components/SkuOperate.vue';
 import { createComponent } from '@/packages/utils/create';
 import { popupProps } from '../popup/props';
 import Popup from '../popup/index.vue';
-import Price from '../price/index.vue';
-import InputNumber from '../inputnumber/index.vue';
 const { componentName, create, translate } = createComponent('sku');
 
 export default create({
@@ -159,9 +157,7 @@ export default create({
     SkuSelect,
     SkuStepper,
     SkuOperate,
-    [Popup.name]: Popup,
-    [Price.name]: Price,
-    [InputNumber.name]: InputNumber
+    [Popup.name]: Popup
   },
 
   setup(props: any, { emit, slots }) {