请注意,本站并不支持低于IE8的浏览器,为了获得最佳效果,请下载最新的浏览器,推荐下载 Chrome浏览器
欢迎光临。交流群:166852192

给网站添加打赏功能


部件的定义开发流程:

一、定义数据 part
二、持久化数据 datamig
三、数据处理 handler
四、数据的显示 driver


在网上找打赏功能的实现,找到了开源的东东 https://github.com/greedying/tctip  ,觉得很不错,便想把它引入orchard,如此,便有了此文。
一、定义数据 

1、定义系统默认设置
    public class DefaultRewardSettingPart : ContentPart
    {
        public string AlipayQR { get { return this.Retrieve(x=>x.AlipayQR); } set { this.Store(x=>x.AlipayQR, value); } }
        public string WeixinQR { get { return this.Retrieve(x => x.WeixinQR); } set { this.Store(x => x.WeixinQR, value); } }
        public string TenpayQR { get { return this.Retrieve(x => x.TenpayQR); } set { this.Store(x => x.TenpayQR, value); } }
    }
如果用户没有定义自己的打赏信息,就使用的系统的默认设置。
2、定义用户设置,其实数据同上。因为是每一个用户都要有各自的数据,所以最好建个表了,当然也可以使用infoset,那样的话,信息是以xml的形式存储在用户的data中。
    public class MyRewardSettingPart : ContentPart<MyRewardSettingPartRecord>
    {
        public string AlipayQR { get { return this.Retrieve(x=>x.AlipayQR); } set { Store(x=>x.AlipayQR, value); } }
        public string WeixinQR { get { return this.Retrieve(x => x.WeixinQR); } set { Store(x => x.WeixinQR, value); } }
        public string TenpayQR { get { return this.Retrieve(x => x.TenpayQR); } set { Store(x => x.TenpayQR, value); } }
    }
    public class MyRewardSettingPartRecord : ContentPartRecord
    {
        public virtual string AlipayQR { get; set; }
        public virtual string WeixinQR { get; set; }
        public virtual string TenpayQR { get; set; }




    }
3、可附加到内容类型的part,没有数据,它只负责可附加到内容类型,显示的数据来源,来自用户设置。

    public class RewardPart : ContentPart
    { }


二、数据持久化。 
 public int UpdateFrom1()
        {
        //创建用户数据表

            SchemaBuilder.CreateTable("MyRewardSettingPartRecord", table => table
                            .ContentPartRecord()
                            .Column<string>("AlipayQR", c => c.WithLength(150))
                            .Column<string>("WeixinQR", c => c.WithLength(150))
                            .Column<string>("TenpayQR", c => c.WithLength(150))
                        );
        //设置RewardPart可附加到内容类型
            ContentDefinitionManager.AlterPartDefinition("RewardPart", builder => builder.Attachable().WithDescription("打赏"));
            return 2;
        }
三、数据处理 
1、默认设置的数据处理,把它附加到Site,然后通过Group Id来访问
public class DefaultRewardSettingPartHandler : ContentHandler
    {
        public DefaultRewardSettingPartHandler()
        {
            T = NullLocalizer.Instance;
            Filters.Add(new ActivatingFilter<DefaultRewardSettingPart>("Site"));
            OnInitializing<DefaultRewardSettingPart>((context, part) => {
                part.AlipayQR = "";
                part.TenpayQR = "";
                part.WeixinQR = "";
            });
        }
        public Localizer T { get; set; }
        protected override void GetItemMetadata(GetContentItemMetadataContext context)
        {
            if (context.ContentItem.ContentType == "Site")
            { context.Metadata.EditorGroupInfo.Add(new GroupInfo(T("打赏默认设置")) { Id = "DefaultRewardSetting" }); }
        }
    }
2、用户设置数据处理,把这个MyRewardSettingPart附加到User上
 public class MyRewardPartHandler : ContentHandler
    {
        public MyRewardPartHandler(IRepository<MyRewardSettingPartRecord> rep)
        {
            Filters.Add(new ActivatingFilter<MyRewardSettingPart>("User"));
            Filters.Add(StorageFilter.For(rep));
        }
    }


四、数据显示
1、默认设置的Driver,注意代码中加红部分,因为前面设置了 GroupInfo,所以这个地方要用OnGroup
 public class DefaultRewardSettingPartDriver : ContentPartDriver<DefaultRewardSettingPart>
    {
        public Localizer T { set; get; }
        protected readonly IRoleService _roleService;
        public DefaultRewardSettingPartDriver(IRoleService roleService)
        {
            T = NullLocalizer.Instance;
            _roleService = roleService;
        }
        protected override string Prefix
        {
            get
            {
                return "DefaultRewardSetting";
            }
        }
        protected override DriverResult Editor(DefaultRewardSettingPart part, dynamic shapeHelper)
        {
            return ContentShape("Parts_DefaultReward_SiteSetting", () => {
 return shapeHelper.EditorTemplate(TemplateName: "Parts/DefaultReward.SiteSetting", Model: part, Prefix: Prefix);
            }).OnGroup("DefaultRewardSetting");
        }
        protected override DriverResult Editor(DefaultRewardSettingPart part, IUpdateModel updater, dynamic shapeHelper)
        {
            return ContentShape("Parts_DefaultReward_SiteSetting", () => {
                if (updater != null)
                {
                    updater.TryUpdateModel(part, Prefix, null, null);
                    
                }
                return shapeHelper.EditorTemplate(TemplateName: "Parts/DefaultReward.SiteSetting", Model: part, Prefix: Prefix);
            }).OnGroup("DefaultRewardSetting");
        }


    }
视图在EditorTemplates/Parts/DefaultReward.SiteSetting.cshtml
@model Wkong.Users.Models.DefaultRewardSettingPart
<fieldset>
    <div class="editor-label">支付宝二维码图片地址</div>
    <div class="editor-field">@Html.TextBoxFor(x => x.AlipayQR, new { @class = "text large" })</div>
    <div class="editor-label">微信二维码图片地址</div>
    <div class="editor-field">@Html.TextBoxFor(x => x.WeixinQR, new { @class = "text large" })</div>
    <div class="editor-label">财付通帐号 QQ号</div>
    <div class="editor-field">@Html.TextBoxFor(x => x.TenpayQR, new { @class = "text large" })</div>
</fieldset>
要记得配置placement.info
2、用户设置驱动

 public class MyRewardPartDriver : ContentPartDriver<MyRewardSettingPart>
    {
        protected override string Prefix
        {
            get
            {
                return "MyRewardPart";
            }
        }       
        public Localizer T { get; set; }


        public MyRewardPartDriver(
            )
        {
            T = NullLocalizer.Instance;


        }


        protected override DriverResult Editor(MyRewardSettingPart part, dynamic shapeHelper)
        {           


            return ContentShape("Parts_MyReward_Edit",
                                    () => shapeHelper.EditorTemplate(TemplateName: "Parts.MyReward.Edit", Model: part, Prefix: Prefix));
        }
        protected override DriverResult Editor(MyRewardSettingPart part, IUpdateModel updater, dynamic shapeHelper)
        {
            updater.TryUpdateModel(part, Prefix, null, null);
            return Editor(part, shapeHelper);
        }               


视图内容只需将将model改成这个 @model Wkong.Users.Models.MyRewardSettingPart 其它同上,当然加红的命名空间随自己了。
3、显示驱动
 只需要要驱动显示视图即个,显示时优先使用用户设置的个人信息,如果用户没有设置,测使用系统默认信息。
 public class RewardPartDriver : ContentPartDriver<RewardPart>
    {
        protected override string Prefix
        {
            get
            {
                return "RewardPart";
            }
        }       
        public Localizer T { get; set; }
        protected readonly IOrchardServices _orchardServices;
        public RewardPartDriver(
            IOrchardServices orchardService
            )
        {
            T = NullLocalizer.Instance;
            _orchardServices = orchardService;


        }
        protected override DriverResult Display(RewardPart part, string displayType, dynamic shapeHelper)
        {   
            return ContentShape("Parts_Reward", ()=> {
                var userSetting = part.As<CommonPart>().Owner.As<MyRewardSettingPart>();
                var defaultSetting = _orchardServices.WorkContext.CurrentSite.As<DefaultRewardSettingPart>();
                var alipayQr = string.IsNullOrEmpty(userSetting.AlipayQR) ? defaultSetting.AlipayQR : userSetting.AlipayQR;
                var weixinQr = string.IsNullOrEmpty(userSetting.WeixinQR) ? defaultSetting.WeixinQR : userSetting.WeixinQR;
                var tenpayQr = string.IsNullOrEmpty(userSetting.TenpayQR) ? defaultSetting.TenpayQR : userSetting.TenpayQR;
                return shapeHelper.Parts_Reward(AlipayQr:alipayQr,WeixinQr:weixinQr,TenpayQr:tenpayQr);


            });
        }


    }


视图 在Parts/Reward.cshtml中 代码如下:
<hr />
<span class="red">作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。</span>
<script>
    window.tctipConfig = {
        //图片路径前缀,用来修订图片相对路径,默认为""
        imagePrefix: "/modules/wkong.users/styles/",
        //css路径前缀,用来修订css相对路径,默认为""
        cssPrefix: "/modules/wkong.users/styles/",
    //staticPrefix: "http://static.tctip.com",


        //buttonImageId: 5,
        buttonImageId: Math.ceil(Math.random() * 8) + 1,
        buttonTip: "dashang",//或者 zanzhu
list:{
                @if (!string.IsNullOrEmpty(Model.AlipayQr))
                {
                     @Html.Raw("alipay: {qrimg:\"" + Model.AlipayQr + "\"},")
                }
               @if (!string.IsNullOrEmpty(Model.WeixinQr))
               {
                     @Html.Raw("weixin: {qrimg:\"" + Model.WeixinQr + "\" },")
               }
               @if (!string.IsNullOrEmpty(Model.WeixinQr))
               {
                        @Html.Raw("tenpay: {account: \"" + Model.TenpayQr +"\", className:\"myR - on\"  }")
               }
}
};
</script>
@{ 
    Script.Include("tctip.min.js").AtFoot(); 
}
当然别忘了placement.info


需要说明的是 开源代码中的的css和img目录整体放到styles目录下, tctip.min.js放在scripts目录下。


如果有什么不清楚的,可以QQ729853613,效果参考本站。

作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。
更多详情欢迎到QQ群 166852192 交流。