|
@@ -0,0 +1,183 @@
|
|
|
|
|
+{!! view_render_event('bagisto.shop.checkout.cart.summary.vip_member_discount.before') !!}
|
|
|
|
|
+
|
|
|
|
|
+<v-member-discount
|
|
|
|
|
+ :cart="cart"
|
|
|
|
|
+ @member-discount-toggled="getCart"
|
|
|
|
|
+>
|
|
|
|
|
+</v-member-discount>
|
|
|
|
|
+
|
|
|
|
|
+@pushOnce('scripts')
|
|
|
|
|
+ <script type="text/x-template" id="v-member-discount-template">
|
|
|
|
|
+ <!-- VIP 用户显示提示信息 -->
|
|
|
|
|
+ <div v-if="isVipUser" class="flex justify-between items-center mt-2 p-3 bg-green-50 border border-green-200 rounded-lg">
|
|
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
|
|
+ <span class="text-green-600 text-xl">✓</span>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <p class="text-base font-medium text-green-800">
|
|
|
|
|
+ @lang('member::app.member.vip_active')
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <p class="text-xs text-green-600">
|
|
|
|
|
+ @{{ vipExpireMessage }}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 非 VIP 或 VIP 已过期用户显示优惠开关 -->
|
|
|
|
|
+ <div v-else class="flex justify-between items-center mt-2">
|
|
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
|
|
+ <p class="text-base">
|
|
|
|
|
+ @lang('member::app.member.discount')
|
|
|
|
|
+ </p>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Toggle Switch -->
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="relative inline-flex items-center cursor-pointer"
|
|
|
|
|
+ @click="toggleSwitch"
|
|
|
|
|
+ :class="{ 'opacity-50 cursor-not-allowed': !canApplyDiscount }"
|
|
|
|
|
+ >
|
|
|
|
|
+ <!-- Background -->
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="w-11 h-6 rounded-full transition-colors duration-200 ease-in-out"
|
|
|
|
|
+ :class="isMemberDiscountApplied ? 'bg-blue-600' : 'bg-gray-300'"
|
|
|
|
|
+ ></div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Knob -->
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-200 ease-in-out border border-gray-300"
|
|
|
|
|
+ :class="isMemberDiscountApplied ? 'transform translate-x-5' : ''"
|
|
|
|
|
+ ></div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Hidden checkbox for form submission -->
|
|
|
|
|
+ <input
|
|
|
|
|
+ type="checkbox"
|
|
|
|
|
+ class="sr-only"
|
|
|
|
|
+ :checked="isMemberDiscountApplied"
|
|
|
|
|
+ :disabled="!canApplyDiscount"
|
|
|
|
|
+ >
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <p class="text-base font-medium" v-if="isMemberDiscountApplied && cart.formatted_vip_plus_amount">
|
|
|
|
|
+ + @{{ cart.formatted_vip_plus_amount }}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </script>
|
|
|
|
|
+
|
|
|
|
|
+ <script type="module">
|
|
|
|
|
+ app.component('v-member-discount', {
|
|
|
|
|
+ template: '#v-member-discount-template',
|
|
|
|
|
+
|
|
|
|
|
+ props: ['cart'],
|
|
|
|
|
+
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ isMemberDiscountApplied: false,
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ isVipUser() {
|
|
|
|
|
+ const isVip = this.cart && this.cart.vip_status && this.cart.vip_status.is_vip;
|
|
|
|
|
+ return isVip;
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ vipExpireMessage() {
|
|
|
|
|
+ if (!this.cart || !this.cart.vip_status) {
|
|
|
|
|
+ return '';
|
|
|
|
|
+ }
|
|
|
|
|
+ const days = this.cart.vip_status.days_remaining;
|
|
|
|
|
+ if (days > 0) {
|
|
|
|
|
+ return `VIP 有效期还剩 ${days} 天`;
|
|
|
|
|
+ }
|
|
|
|
|
+ return 'VIP 已激活';
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ canApplyDiscount() {
|
|
|
|
|
+ return this.cart && parseFloat(this.cart.grand_total) > 19.9;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ cart: {
|
|
|
|
|
+ handler(newCart) {
|
|
|
|
|
+ if (newCart) {
|
|
|
|
|
+ // 只同步状态,不自动应用
|
|
|
|
|
+ this.isMemberDiscountApplied = !!(newCart.vip_plus_amount && parseFloat(newCart.vip_plus_amount) > 0);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ immediate: true,
|
|
|
|
|
+ deep: true
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ toggleSwitch() {
|
|
|
|
|
+ if (this.isMemberDiscountApplied) {
|
|
|
|
|
+ this.removeMemberDiscount();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.applyMemberDiscount();
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ applyMemberDiscount() {
|
|
|
|
|
+ this.$axios.post("{{ route('shop.api.checkout.cart.member.apply') }}", {
|
|
|
|
|
+ _token: "{{ csrf_token() }}"
|
|
|
|
|
+ })
|
|
|
|
|
+ .then((response) => {
|
|
|
|
|
+ if (response.data.success) {
|
|
|
|
|
+ this.isMemberDiscountApplied = true;
|
|
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
|
|
+ type: 'success',
|
|
|
|
|
+ message: response.data.message || '会员优惠已应用'
|
|
|
|
|
+ });
|
|
|
|
|
+ this.$emit('member-discount-toggled');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
|
|
+ type: 'error',
|
|
|
|
|
+ message: response.data.message || '应用会员优惠失败'
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch((error) => {
|
|
|
|
|
+ console.error('Apply member discount error:', error);
|
|
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
|
|
+ type: 'error',
|
|
|
|
|
+ message: error.response?.data?.message || '应用会员优惠失败'
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ removeMemberDiscount() {
|
|
|
|
|
+ this.$axios.post("{{ route('shop.api.checkout.cart.member.remove') }}", {
|
|
|
|
|
+ _token: "{{ csrf_token() }}"
|
|
|
|
|
+ })
|
|
|
|
|
+ .then((response) => {
|
|
|
|
|
+ if (response.data.success) {
|
|
|
|
|
+ this.isMemberDiscountApplied = false;
|
|
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
|
|
+ type: 'success',
|
|
|
|
|
+ message: response.data.message || '会员优惠已移除'
|
|
|
|
|
+ });
|
|
|
|
|
+ this.$emit('member-discount-toggled');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
|
|
+ type: 'error',
|
|
|
|
|
+ message: response.data.message || '移除会员优惠失败'
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch((error) => {
|
|
|
|
|
+ console.error('Remove member discount error:', error);
|
|
|
|
|
+ this.$emitter.emit('add-flash', {
|
|
|
|
|
+ type: 'error',
|
|
|
|
|
+ message: error.response?.data?.message || '移除会员优惠失败'
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ </script>
|
|
|
|
|
+@endPushOnce
|
|
|
|
|
+
|
|
|
|
|
+{!! view_render_event('bagisto.shop.checkout.cart.summary.vip_member_discount.after') !!}
|