box-client/assets/script/app/view/shop/ShopItem.js

cc.Class({
    extends: cc.Component,

    editor: {
        menu: 'Shop/ShopItem'
    },

    properties: {
        bg: cc.Sprite,
        surfaceBg: cc.Sprite,
        surface: cc.Label,
        itemName: cc.Label,
        cost: cc.Label,
        selfButton: cc.Button,
        icon: cc.Sprite
    },

    reloadData (data) {
        this._data = data;
        this.initUI();
    },

    enabelClick (enable) {
        this.selfButton.interactable = enable;
    },

    initUI () {
        if (!this._data) return;

        let config = this._data.itemConfig;
        let iconPath = cc.js.formatStr("res_image/itemicon/%d", config.id);
        cc.loader.loadRes(iconPath, cc.SpriteFrame, (error, spriteFrame) => {
		    if (!error && cc.isValid(this.node, true)) {
                this.icon.spriteFrame = spriteFrame;
            }
		});

        let quality = this._data.quality;
        let path = cc.js.formatStr("res_image/itemicon/box-djk0%d", quality);
        cc.loader.loadRes(path, cc.SpriteFrame, (error, spriteFrame) => {
		    if (!error && cc.isValid(this.node, true)) {
                this.bg.spriteFrame = spriteFrame;
            }
		});

        let surface = this._data.surface;
        let surfacepath =  cc.js.formatStr("res_image/itemicon/other-tag0%d", surface);
        cc.loader.loadRes(surfacepath, cc.SpriteFrame, (error, spriteFrame) => {
            if (!error && cc.isValid(this.node, true)) {
                this.surfaceBg.spriteFrame = spriteFrame;
            }
        });

        this.surface.string = this._data.surfaceStr;
        this.cost.string = this._data.cost;
        this.itemName.string = this._data.name;
    },

    onClicked () {
        if (!this._data || !this._data.cb) return;

        this._data.cb(this._data);
    }

});