|
|
@@ -0,0 +1,279 @@
|
|
|
+{!! view_render_event('bagisto.shop.checkout.cart.summary.giftcard.before') !!}
|
|
|
+
|
|
|
+<v-gift-card
|
|
|
+ :cart="cart"
|
|
|
+ @giftcard-applied="getCart"
|
|
|
+ @giftcard-removed="getCart"
|
|
|
+>
|
|
|
+</v-gift-card>
|
|
|
+@pushOnce('scripts')
|
|
|
+ <script
|
|
|
+ type="text/x-template"
|
|
|
+ id="v-gift-card-template"
|
|
|
+ >
|
|
|
+ <div class="flex justify-between text-right">
|
|
|
+ <p class="text-base max-sm:text-sm max-sm:font-normal">
|
|
|
+ @{{ cart.giftcard_number ? ("@lang('gift::app.giftcard.applied')") : "@lang('gift::app.giftcard.discount')" }}
|
|
|
+ </p>
|
|
|
+
|
|
|
+ {!! view_render_event('bagisto.shop.checkout.cart.gift.before') !!}
|
|
|
+
|
|
|
+ <p class="text-base font-medium max-sm:text-sm">
|
|
|
+ <!-- Apply Giftcard modal -->
|
|
|
+ <x-shop::modal ref="giftCardModel">
|
|
|
+ <!-- Modal Toggler -->
|
|
|
+ <x-slot:toggle>
|
|
|
+ <span
|
|
|
+ class="text-[#0A49A7] cursor-pointer"
|
|
|
+ role="button"
|
|
|
+ tabindex="0"
|
|
|
+ v-if="!cart || !cart.giftcard_number"
|
|
|
+ @click="loadGiftCards"
|
|
|
+ >
|
|
|
+ @lang('gift::app.giftcard.apply')
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-else
|
|
|
+ class="text-green-600 font-semibold"
|
|
|
+ >
|
|
|
+ @{{ cart.giftcard_number }}
|
|
|
+ </span>
|
|
|
+ </x-slot>
|
|
|
+
|
|
|
+ <!-- Modal Header -->
|
|
|
+ <x-slot:header>
|
|
|
+ <h2 class="text-2xl font-medium max-sm:text-xl">
|
|
|
+ @lang('gift::app.giftcard.apply')
|
|
|
+ </h2>
|
|
|
+ </x-slot>
|
|
|
+
|
|
|
+ <!-- Modal Content -->
|
|
|
+ <x-slot:content>
|
|
|
+ <!-- Loading State -->
|
|
|
+ <div v-if="loading" class="text-center py-4">
|
|
|
+ <p class="text-gray-500">加载中...</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Gift Card List -->
|
|
|
+ <div v-else-if="giftCards.length > 0" class="space-y-3 max-h-96 overflow-y-auto">
|
|
|
+ <div
|
|
|
+ v-for="giftCard in giftCards"
|
|
|
+ :key="giftCard.id"
|
|
|
+ class="border rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors"
|
|
|
+ @click="selectGiftCard(giftCard)"
|
|
|
+ :class="{'bg-blue-50 border-blue-500': giftCardNumber === giftCard.giftcard_number}"
|
|
|
+ >
|
|
|
+ <div class="flex justify-between items-start">
|
|
|
+ <div class="flex-1">
|
|
|
+ <p class="font-semibold text-lg text-gray-800">
|
|
|
+ @{{ giftCard.giftcard_number }}
|
|
|
+ </p>
|
|
|
+ <p class="text-sm text-gray-600 mt-1">
|
|
|
+ 余额: <span class="font-bold text-green-600">$@{{ giftCard.remaining_giftcard_amount }}</span>
|
|
|
+ </p>
|
|
|
+ <p class="text-xs text-gray-500 mt-1">
|
|
|
+ 有效期至: @{{ giftCard.expirationdate }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="px-4 py-2 bg-blue-600 text-blue-700 rounded-lg hover:bg-blue-700 text-sm"
|
|
|
+ @click.stop="applySelectedGiftCard(giftCard)"
|
|
|
+ >
|
|
|
+ 使用
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- No Gift Cards -->
|
|
|
+ <div v-else class="text-center py-8">
|
|
|
+ <p class="text-gray-500">您还没有可用的礼品卡</p>
|
|
|
+ </div>
|
|
|
+ </x-slot>
|
|
|
+ </x-shop::modal>
|
|
|
+
|
|
|
+ <!-- Applied Coupon Information Container -->
|
|
|
+ <div
|
|
|
+ class="flex justify-between items-center text-xs font-small ml-4"
|
|
|
+ v-if="cart && cart.giftcard_number"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="icon-cancel text-2xl cursor-pointer text-red-500 hover:text-red-700"
|
|
|
+ title="@lang('gift::app.giftcard.remove')"
|
|
|
+ @click="destroyGiftCard"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ {!! view_render_event('bagisto.shop.checkout.cart.giftcard.after') !!}
|
|
|
+ </div>
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <script type="module">
|
|
|
+ app.component('v-gift-card', {
|
|
|
+ template: '#v-gift-card-template',
|
|
|
+
|
|
|
+ props: ['cart'],
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isStoring: false,
|
|
|
+ loading: false,
|
|
|
+ giftCards: [],
|
|
|
+ giftCardNumber: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 加载用户的礼品卡列表
|
|
|
+ loadGiftCards() {
|
|
|
+ console.log('Loading gift cards...');
|
|
|
+ this.loading = true;
|
|
|
+ this.$axios.get("{{ route('shop.api.checkout.cart.giftcard.list') }}")
|
|
|
+ .then((response) => {
|
|
|
+ console.log('Gift cards response:', response.data);
|
|
|
+ this.loading = false;
|
|
|
+ if (response.data.success) {
|
|
|
+ this.giftCards = response.data.data;
|
|
|
+ console.log('Gift cards loaded:', this.giftCards.length);
|
|
|
+ } else {
|
|
|
+ console.error('Failed to load gift cards:', response.data.message);
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
+ type: 'error',
|
|
|
+ message: response.data.message || '加载礼品卡失败'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error('Failed to load gift cards:', error);
|
|
|
+ this.loading = false;
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
+ type: 'error',
|
|
|
+ message: '加载礼品卡失败,请重试'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择礼品卡(高亮显示)
|
|
|
+ selectGiftCard(giftCard) {
|
|
|
+ this.giftCardNumber = giftCard.giftcard_number;
|
|
|
+ console.log('Selected gift card:', this.giftCardNumber);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 应用选中的礼品卡
|
|
|
+ applySelectedGiftCard(giftCard) {
|
|
|
+ console.log('Applying gift card:', giftCard.giftcard_number);
|
|
|
+ this.giftCardNumber = giftCard.giftcard_number;
|
|
|
+ this.activateGiftCard();
|
|
|
+ },
|
|
|
+
|
|
|
+ activateGiftCard() {
|
|
|
+ if (!this.giftCardNumber) {
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
+ type: 'warning',
|
|
|
+ message: '请选择一个礼品卡'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.isStoring = true;
|
|
|
+ this.$axios.post("{{ route('shop.api.checkout.cart.giftcard.activate') }}", {
|
|
|
+ giftcard_number: this.giftCardNumber,
|
|
|
+ _token: "{{ csrf_token() }}"
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ console.log('Gift card activated:', response.data);
|
|
|
+ this.isStoring = false;
|
|
|
+ this.$refs.giftCardModel.toggle();
|
|
|
+
|
|
|
+ // 发送事件通知父组件刷新
|
|
|
+ this.$emit('giftcard-applied', response.data);
|
|
|
+
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
+ type: 'success',
|
|
|
+ message: response.data.message || '礼品卡应用成功'
|
|
|
+ });
|
|
|
+ this.resetForm();
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error('Activate gift card error:', error);
|
|
|
+ this.isStoring = false;
|
|
|
+ this.$refs.giftCardModel.toggle();
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
+ type: 'error',
|
|
|
+ message: error.response?.data?.message || '应用礼品卡失败'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ resetForm() {
|
|
|
+ this.giftCardNumber = '';
|
|
|
+ this.giftCards = [];
|
|
|
+ },
|
|
|
+
|
|
|
+ destroyGiftCard() {
|
|
|
+ console.log('Removing gift card...');
|
|
|
+ this.$axios.delete("{{ route('shop.api.checkout.cart.giftcard.remove') }}", {
|
|
|
+ headers: {
|
|
|
+ 'X-CSRF-TOKEN': "{{ csrf_token() }}"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ console.log('Gift card removed:', response.data);
|
|
|
+ // Reset form data
|
|
|
+ this.resetForm();
|
|
|
+
|
|
|
+ // 发送事件通知父组件刷新
|
|
|
+ this.$emit('giftcard-removed');
|
|
|
+
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
+ type: 'success',
|
|
|
+ message: response.data.message || '礼品卡已移除'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('Remove gift card error:', error);
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
+ type: 'error',
|
|
|
+ message: error.response?.data?.message || '移除礼品卡失败'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+
|
|
|
+@endPushOnce
|
|
|
+{!! view_render_event('bagisto.shop.checkout.cart.summary.giftcard.after') !!}
|
|
|
+
|
|
|
+<!-- Giftcard Discount -->
|
|
|
+{!! view_render_event('bagisto.shop.checkout.onepage.summary.giftcard_amount.before') !!}
|
|
|
+<div
|
|
|
+ class="flex text-right justify-between mt-2"
|
|
|
+ v-if="cart.giftcard_amount && parseFloat(cart.giftcard_amount) > 0"
|
|
|
+>
|
|
|
+ <p class="text-base">
|
|
|
+ @lang('gift::app.giftcard.giftcard_amount')
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p class="text-base font-medium">
|
|
|
+ - $@{{ cart.giftcard_amount }}
|
|
|
+ </p>
|
|
|
+</div>
|
|
|
+
|
|
|
+{{--<div--}}
|
|
|
+{{-- class="flex text-right justify-between"--}}
|
|
|
+{{-- v-if="cart.giftcard_amount && parseFloat(cart.giftcard_amount) > 0"--}}
|
|
|
+{{-->--}}
|
|
|
+{{-- <p class="text-base">--}}
|
|
|
+{{-- @lang('gift::app.giftcard.remaining_giftcard_amount')--}}
|
|
|
+{{-- </p>--}}
|
|
|
+
|
|
|
+{{-- <p class="text-base font-medium">--}}
|
|
|
+{{-- $@{{ cart.remaining_giftcard_amount }}--}}
|
|
|
+{{-- </p>--}}
|
|
|
+{{--</div>--}}
|
|
|
+{!! view_render_event('bagisto.shop.checkout.onepage.summary.giftcard_amount.after') !!}
|
|
|
+
|