lolbox.duowan.com/mbox/page/equip/info.vue

<style>
    
</style>

<template>
    <div class="equip-info-wrap">
        <div class="equip-info-head">
            <section class="equip-info-icon">
                <img :src="`http://static.lolbox.duowan.com/images/items/${equip.id}.png`" />
            </section>
            <section class="equip-name-price">
                <h3 class="equip-info-name">{{equip.name}}</h3>
                <p>
                    <label class="equip-for-price">
                        价格
                    </label>
                    <span class="equip-price">
                        {{equip.gold}}
                    </span>
                </p>
            </section>
        </div>
        <div class="equip-info-describe">
                <h3>物品描述</h3>
                <ul>
                    <li v-for="item in equip.description">{{item}}</li>
                </ul>
        </div>
        <div class="equip-info-parts">
                <h3>合成所需</h3>
                <ul>
                    <li v-for="item in equip.from">
                        <img :src="`http://static.lolbox.duowan.com/images/items/${item}_40x40.jpg`"  />
                </ul>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import lib from 'lib';
import BDY from '../../depend/BDY/BDY';

    export default {
        data () {
            return {
                equip_id : lib.getLocalData("equip_id"),
                equip : {} ,
                from :'',
                fromImgUrl : []
            }
        },
        mounted () {
            this.getData();
        },
        beforeDestroy () {
        },
        methods: {
            getData(){
                let self = this,
                    url = `${lib.apiUrl}/v2/champion/item/search/?id_list=`;

                lib.get(url + self.equip_id,ret => {

                    if(ret.champion_item_list&&ret.champion_item_list[0]){

                        self.equip = ret.champion_item_list[0];
                        self.formatData(self.equip);
                    }
                })
            },
            formatData(data){
                data.description = data.description.split("  ");
            }
        }
    }
</script>