product.vue

<template>
<div>
    <ul :class="'cap-goods-list__container cap-goods-list__container--'+data.classname+' cap-goods-list__container--'+data.ParameterDictionary.showtype+'   '+(data.ParameterDictionary.type=='6'?'nowrap':'')" >
        <li v-if="productlist.length==0" style="width:100%;height:150px;border:0px;">
            <div style="width:100%;height:150px;"></div>
        </li>
        <li v-for="(item,index) in productlist" :key="index" :class="'cap-goods-list__wrapper  '+(data.ParameterDictionary.type=='3'?(index%3==0?'cap-goods-list__wrapper--hybrid-big ':'cap-goods-list__wrapper--hybrid-small '):'')">
            <router-link :class="'cap-goods-list__item cap-goods-list__item--'+data.classname+' '+data.ParameterDictionary.showtype+' '+data.aclass" :to="'/product/'+item.id">
                <div class="cap-goods-list__photo">
                    <img class="cap-goods-list__img lazy lazyload" v-lazy="item.imageURL+'?w='+((data.ParameterDictionary.type=='1'||data.ParameterDictionary.type=='3')?'750':'375')" />
                </div>
                <div :class="'cap-goods-list__info has-title has-price '+(data.ParameterDictionary.showtype == 'card'?'has-btn':'')">
                    <h3 class="title">{{item.title}}</h3>
                    <p class="sale-info">
                        <span class="sale-price">¥ {{item.price}}</span>
                    </p>
                </div>
                <div v-if="data.ParameterDictionary.showtype == 'card'" class="cap-goods-list__buy-btn-wrapper cap-goods-list__buy-btn-wrapper--4">
                    <button class="cap-goods-list__buy-btn-4 van-button van-button--default van-button--small">{{data.ParameterDictionary.buttonvalue}}</button>
                </div>
            </router-link>
        </li>
    </ul>
    <div style="clear:both;"></div>
    </div>
</template>

<script>
import {getProduct} from "../../api/page.js";

export default {
    name:'product',
    data () {
       return {
           productlist: []
       }
     },
    props:{
        data:Object
    }, 
    created:function(){
        var id=this.data.PageSectionId;
        var data=this.data;
        var classname = "big";
        var aclass = "";
        switch (data.ParameterDictionary.type) {
            case "1":
                aclass = "cap-goods-list__item--btn1 cap-goods-list__item--ratio-3-2 cap-goods-list__item--whitespace";
                break;
            case "2":
                classname = "small";
                aclass = "cap-goods-list__item--btn1 cap-goods-list__item--padding";
                break;
            case "3":
                classname = "hybrid";
                aclass = "cap-goods-list__item--big cap-goods-list__item--hybrid-big cap-goods-list__item--btn1 cap-goods-list__item--padding";
                break;
            case "4":
                classname = "list";
                aclass = "cap-goods-list__item--btn4 cap-goods-list__item--padding";
                break;
            case "5":
                classname = "three";
                aclass = "cap-goods-list__item--btn4 cap-goods-list__item--padding";
                break;
            case "6":
                classname = "three";
                break;
        }
        data.classname=classname;
        data.aclass=aclass;
        getProduct(id).then(response => {
            this.productlist=response;
        })
    }
}
</script>

<style>

</style>