Magicodes.WeiChat——媒体资源选择组件之media-choice（开源）

media-choice为媒体资源选择组件，基于KnockoutJs。支持图片、语音、视频、图文的选择以及预览，支持默认选择类型，支持是否禁用选择类型的更改。

使用示例：

<script id="media_idTemplate" type="text/html">

<media-choice-button params="value: media_id"></media-choice-button>

</script>

<script id="newsTemplate" type="text/html">

<media-choice-button params="value: media_id,mediaType:5,disabledChoice:true"></media-choice-button>

</script>

参数说明：

value：微信公众号媒体Id

mediaType：默认选择的媒体类型，其中（0：图片；1，语音；2，视频；5，图文）

disabledChoice：是否禁用选择

效果：

全部代码：

var instance = function (params, componentInfo) {
    var self = this;
    this.Name = ko.observable('请选择素材');
    this.Url = ko.observable('/Content/patterns/congruent_pentagon.png');
    this.Id = ko.observable('');
    //默认选择的类型
    this.MediaType = ko.observable('1');
    //是否禁用选择框
    this.DisabledChoice = ko.observable(false);
    //订阅 
    self.MediaType.subscribe(function (newValue) {
        console.debug(newValue);
        self.Name('请选择素材');
        self.Url('/Content/patterns/congruent_pentagon.png');
        self.Id('');
    });
    this.ShowChoiceWindow = function (data) {
        var type = self.MediaType();
        var url = '';
        switch (type) {
            //图文
            case "5":
                url = '/Site_News?resourceType=5&lightLayout=1';
                break;
                //图片
            case "0":
                url = '/Site_Resources?resourceType=0&lightLayout=1';
                break;
                //语音
            case "1":
                url = '/Site_Resources?resourceType=1&lightLayout=1';
                break;
                //视频
            case "2":
                url = '/Site_Resources?resourceType=2&lightLayout=1';
                break;
        }
        mwc.window.show('选择素材', url);
    }

    if (params && typeof (params.value()) == 'string') {
        params.value.subscribe(function (newValue) {
            self.Id(newValue);
        });
        if (params.value().length > 0) {
            self.Id(params.value());
            mwc.restApi.get({
                //请求地址
                url: '/Site_Resources/GetJsonDataByMediaId/' + self.Id(),
                //是否锁定UI
                isBlockUI: true,
                //可选，锁定元素
                blockUI: componentInfo.element,
                //成功函数
                success: function (model) {
                    console.debug(model);
                    var data = model.FileBase;
                    if (data == null) {
                        return;
                    }
                    self.MediaType(model.ResourceType);
                    //一定要放后面，不然因为触发了订阅事件而导致相关数据被清空
                    self.Name(data.Name);
                    if (data.FrontCoverImageUrl)
                        self.Url(data.FrontCoverImageUrl);
                    else
                        self.Url(data.Url == null ? data.SiteUrl : data.Url);
                    self.Id(data.MediaId);
                    console.debug(ko.toJS(self));
                }
            });
        }
        if (params.mediaType) {
            self.MediaType(params.mediaType);
        }
        if (params.disabledChoice) {
            self.DisabledChoice(params.disabledChoice);
        }
    }
    window.choice = function (data) {
        params.value(data.MediaId);
        self.Id(data.MediaId);
        self.Name(data.Name);
        if (data.FrontCoverImageUrl) {
            self.Url(data.FrontCoverImageUrl);
        } else
            self.Url(data.Url == null ? data.SiteUrl : data.Url);
    }
};
var newschoiceViewModelInstance = {
    createViewModel: function (params, componentInfo) {
        return new instance(params, componentInfo);
    }
};
//资源选择
ko.components.register('media-choice-button', {
    viewModel: newschoiceViewModelInstance,
    template: '' +
         '<div class="form-group">' +
            '<label class="col-sm-2 control-label">类型：</label>' +
            '<div class="col-sm-10">' +
                '<select class="form-control" data-bind="value:MediaType,disable:DisabledChoice" data-val="true" data-val-required="类型 字段是必需的。">' +
                    '<option value="0">图片</option>' +
                    '<option value="1">语音</option>' +
                    '<option value="2">视频</option>' +
                    '<option value="5">图文</option>' +
                '</select>' +
            '</div>' +
        '</div>' +
        '<div class="form-group">' +
            '<div class="col-sm-12">' +
                '<div>' +
                    '<div class="panel panel-default" data-bind="click:ShowChoiceWindow">' +
                        '<div class="panel-body" id="content">' +
                            '<p data-bind="if:MediaType()==0">' +
                                '<img style="width:150px;height:100px" data-bind="attr:{src:Url}" />' +
                            '</p>' +
                            '<p data-bind="if:MediaType()==1 && Id()!=\'\'">' +
                                '<audio style="width:250px;height:100px" controls="controls" data-bind="attr:{src:Url}" />' +
                            '</p>' +
                            '<p data-bind="if:MediaType()==2 && Id()!=\'\'">' +
                                '<video style="height:100px !important;width:250px !important" controls="controls" data-bind="attr:{src:Url}" />' +
                            '</p>' +
                            '<p data-bind="if:MediaType()==5">' +
                                '<img style="width:150px;height:100px" data-bind="attr:{src:Url}" />' +
                            '</p>' +
                            '<div>' +
                                '<p data-bind="text:Name">' + '</p>' +
                            '</div>' +
                            '<!-- ko if:Id()==\"\" && "1,2".indexOf(MediaType())!=-1 -->' +
                            '<p>' +
                                '<a class="btn btn-primary btn-block m-t" data-bind="click:$root.ShowChoiceWindow">'
                                    + '<i class="fa fa-plus">' + '</i>选择素材</a>' +
                            '</p>' +
                            '<!-- /ko -->' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>'
});