太阳成游戏网站

JS逻辑

// SKU组件定义
    const SkuComponent = {
      props: ['skuData'],
      data() {
        return {
          groups: [],
          options: [],
          selectedOptions: [],
          selectedSku: null,
          quantity: 1 // 添加数量属性
        };
      },
      mounted() {
        this.initSkuData();
      },
      methods: {
        initSkuData() {
          this.groups = this.skuData.group;
          this.options = this.skuData.name;
          this.selectedOptions = new Array(this.groups.length).fill(0);
          this.updateSelection();
        },
        updateSelection() {
          const skuKey = this.selectedSkuKey;

          this.selectedSku = this.skuData.value[skuKey];
        },
        incrementQuantity() {
          this.quantity++;
        },
        decrementQuantity() {
          if (this.quantity > 1) {
            this.quantity--;
          }
        },
        redirectToABC() {
          const url = `http://www.abc.com?quantity=${this.quantity}?abc=${this.selectedSkuKey}`;
          window.location.href = url;
        }
      },
      computed: {
        totalPrice() {
          if (this.selectedSku) {
            const price = parseFloat(this.selectedSku.price);
            return (price * this.quantity).toFixed(2);
          }
          return 0;
        },
        selectedSkuKey() {
         return this.selectedOptions
         .map((optionIndex, groupIndex) => `${groupIndex}_${optionIndex}`)
         .join('_');
        }
      },
      template: `
        

          
            
{{ group }}
            
              
                
                {{ name }}
              
            
          
          
            
SKU Details
            
Selected SKU: {{ selectedSkuKey }}
            
Image: {{ selectedSku.image }}
            
Price: {{ totalPrice }}
            
Quantity:
              -
              
              +
            
            
SN: {{ selectedSku.sn }}
            提交
          
        
      `
    };

    // 创建Vue实例，将SKU组件作为全局组件注册
    new Vue({
      el: '#app',
      components: {
        SkuComponent
      },
      data() {
        return {
          skuData: {
             group: [{loop $price_sku['group'] $gid $gname}{if $gname}'{$gname}',{/if}{/loop}],
                        name: [{loop $price_sku['group'] $gid $gname}{if $gname}[{php $i=0;}{loop $price_sku['name'][$gid] $vid $vname}'{$vname}',{php $i=1;}{/loop}],{/if}{/loop}],
                        value: {{if $price_sku}{loop $price_sku['value'] $i $v}'{$i}': {image: '{dr_thumb($v.image, 100, 100)}',price: '{intval($v.price)}',quantity: '{$v.quantity}',sn: '{$v.sn}',yprice: '{$v.yprice}',},{/loop}{/if}},
                        }
          }
        };
      }
    });