94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { PropType } from 'vue'
|
|
import { defineComponent } from 'vue'
|
|
import { CLICK_EVENT, PREFIX } from '../_constants'
|
|
|
|
const props = defineProps({
|
|
// 底部按钮配置 confirm cart buy
|
|
btnOptions: {
|
|
type: Array as PropType<string[]>,
|
|
default: () => ['confirm'],
|
|
},
|
|
btnExtraText: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
// 立即购买文案
|
|
buyText: {
|
|
type: String,
|
|
default: '立即购买',
|
|
},
|
|
// 加入购物车文案
|
|
addCartText: {
|
|
type: String,
|
|
default: '加入购物车',
|
|
},
|
|
|
|
confirmText: {
|
|
type: String,
|
|
default: '确定',
|
|
},
|
|
|
|
showDefaultOperate: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits([CLICK_EVENT, 'changeSku', 'changeBuyCount', 'clickBtnOperate'])
|
|
|
|
function getBtnDesc(type: string) {
|
|
const mapD: { [props: string]: string } = {
|
|
confirm: props.confirmText,
|
|
cart: props.addCartText,
|
|
buy: props.buyText,
|
|
}
|
|
|
|
return mapD[type]
|
|
}
|
|
|
|
function clickBtnOperate(btn: string) {
|
|
emit('clickBtnOperate', btn)
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const componentName = `${PREFIX}-sku-operate`
|
|
|
|
export default defineComponent ({
|
|
name: componentName,
|
|
options: {
|
|
virtualHost: true,
|
|
addGlobalClass: true,
|
|
styleIsolation: 'shared',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view v-if="btnOptions.length > 0" class="nut-sku-operate">
|
|
<view v-if="btnExtraText" class="nut-sku-operate-desc">
|
|
{{ btnExtraText }}
|
|
</view>
|
|
|
|
<slot name="operateBtn" />
|
|
|
|
<view v-if="showDefaultOperate" class="nut-sku-operate-btn">
|
|
<view
|
|
v-for="(btn, i) in btnOptions"
|
|
:key="i"
|
|
class="nut-sku-operate-btn-item"
|
|
:class="[`nut-sku-operate-btn-${btn}`]"
|
|
@click="clickBtnOperate(btn)"
|
|
>
|
|
{{ getBtnDesc(btn) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import './index';
|
|
</style>
|