上一篇講解了拼團提醒邏輯功能實現，現在繼續實現頁面功能。 Core項目 打開AbpZeroTemplate-zh-CN.xml語言文件，在末尾添加如下代碼： 文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyNa ...
上一篇講解了拼團提醒邏輯功能實現，現在繼續實現頁面功能。
Core項目
打開AbpZeroTemplate-zh-CN.xml語言文件，在末尾添加如下代碼：
文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyName.AbpZeroTemplate.Core\Localization\AbpZeroTemplate\AbpZeroTemplate-zh-CN.xml
<text name="Pdd" value="拼多多" /> <text name="Pdd.KaiTuan" value="開團提醒" /> <text name="Pdd.MallExist" value="店鋪已存在" />
打開文件AppPermissions.cs，在末尾添加如下代碼：
文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyName.AbpZeroTemplate.Core\Authorization\AppPermissions.cs
public const string Pages_Pdd = "Pages.Pdd";//許可權路徑 public const string Pages_Pdd_KaiTuan = "Pages.Pdd.KaiTuan";//許可權路徑
打開AppAuthorizationProvider.cs文件，在SetPermissions方法最後添加如下代碼：
文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyName.AbpZeroTemplate.Core\Authorization\AppAuthorizationProvider.cs
var pdd = pages.CreateChildPermission(AppPermissions.Pages_Pdd, L("Pdd")); pdd.CreateChildPermission(AppPermissions.Pages_Pdd_KaiTuan, L("Pdd.KaiTuan"));
Web項目
打開文件PageNames.cs，
文件路徑 ：D:\abpweb\PddSellerAssistant\PddSellerAssistant.Web\App_Start\Navigation\PageNames.cs
在Command下添加一個常量：
public const string Pdd = "Pdd";
在32行位置添加如下代碼：
/// <summary> ///拼多多 /// </summary> public static class Pdd { public const string KaiTuan = "KaiTuan"; //開團提醒 }
打開MpaNavigationProvider.cs文件，在末尾添加菜單，代碼如下：
文件路徑：D:\abpweb\PddSellerAssistant\PddSellerAssistant.Web\Areas\Mpa\Startup\MpaNavigationProvider.cs
.AddItem(new MenuItemDefinition( PageNames.App.Common.Pdd,//一個常量，控制菜單是否被選中 L("Pdd"),//菜單顯示名稱，在語言文件中配置 url: "Mpa/Pdd",//菜單路徑 icon: "icon-social-dropbox"//菜單圖標 ).AddItem(new MenuItemDefinition( PageNames.App.Pdd.KaiTuan,//一個常量，控制菜單是否被選中 L("Pdd.KaiTuan"),//菜單顯示名稱，在語言文件中配置 url: "Mpa/KaiTuan",//菜單路徑 icon: "icon-pie-chart",//菜單圖標 requiredPermissionName: AppPermissions.Pages_Pdd_KaiTuan//菜單許可權，登錄用戶所在角色有此許可權才會顯示出來 )) )
以上就把菜單添加好了，生成解決方案，瀏覽器打開網站後臺，以管理員身份登錄，但是並沒有發現剛剛添加的菜單，這是因為加了菜單加許可權的關係，接以下操作即可。
打開角色菜單，分別修改admin、user角色：
切換到許可權選項卡，勾選我們需要顯示的菜單，如下：
保存之後，再次登錄就可以顯示出來菜單了。以下是user角色的菜單：
控制器
我先在Areas\Mpa\Controllers目錄下新建Pdd目錄，用於保存所有跟拼多多相關的控制器。
添加文件 KaiTuanController.cs 代碼如下：
文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Controllers\Pdd\KaiTuanController.cs
/// <summary> /// 開團提醒 /// </summary> public class KaiTuanController : AbpZeroTemplateControllerBase { private readonly IMallAppService _mallAppService; public KaiTuanController(IMallAppService mallAppService) { _mallAppService = mallAppService; } // GET: Mpa/KaiTuan public ActionResult Index() { return View(); } public ActionResult CreateModal() { return PartialView("_CreateModal"); } public ActionResult SharpModal(string title, string link, string img, string timeOut) { ViewBag.title = title; ViewBag.link = link; ViewBag.img = img; ViewBag.timeOut = timeOut; return PartialView("_SharpModal"); } }
視圖
接著再創建對應的視圖文件
添加文件Index.cshtml，代碼如下：
文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\KaiTuan\Index.cshtml
@using Abp.Web.Mvc.Extensions @using MyCompanyName.AbpZeroTemplate.Web.Navigation @{ ViewBag.CurrentPageName = PageNames.App.Pdd.KaiTuan;//作用就是選中菜單時會高亮 } @section Styles{ <style> .jtable-child-table-container { margin-left: 50px; } </style> <link href="~/metronic/assets/global/plugins/bootstrap-toastr/toastr.css" rel="stylesheet" /> } @section Scripts { @Html.IncludeScript("~/metronic/assets/global/plugins/fuelux/js/spinner.min.js") @Html.IncludeScript("~/metronic/assets/global/plugins/bootstrap-toastr/toastr.min.js") @Html.IncludeScript("~/Areas/Mpa/Views/KaiTuan/Index.js") @Html.IncludeScript("~/Areas/Mpa/Common/Scripts/GolbalHelper.js") @Html.IncludeScript("~/Areas/Mpa/Views/KaiTuan/ui-toastr.js") <!--分享功能代碼--> <script type="text/javascript" src="http://v1.jiathis.com/code/jia.js?uid=1575631" charset="utf-8"></script> } <div class="row margin-bottom-5"> <div class="col-xs-6"> <div class="page-head"> <div class="page-title"> <h1> <span>@L("Pdd.KaiTuan")</span> <small></small> </h1> </div> </div> </div> @*這裡是添加的按鈕代碼*@ <div class="col-xs-6 text-right"> <button id="CreateNewMallButton" class="btn btn-primary blue"><i class="fa fa-plus"></i>添加店鋪</button> </div> </div> <div class="portlet light margin-bottom-0"> <div class="portlet-title portlet-title-filter"> <div class="inputs inputs-full-width"> <div class="portlet-input"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label class="control-label">店鋪</label> <select id="mallCombobox" class="form-control"></select> </div> </div> <div class="col-xs-6"> <div class="form-group"> <label class="control-label">提醒間隔(分鐘)</label> <div id="spinner3"> <div class="input-group" style="width: 150px;"> <input type="text" id="interval" class="spinner-input form-control" maxlength="3" readonly> <div class="spinner-buttons input-group-btn"> <button type="button" class="btn spinner-up default"> <i class="fa fa-angle-up"></i> </button> <button type="button" class="btn spinner-down default"> <i class="fa fa-angle-down"></i> </button> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-12 text-right"> <button id="LoginPddButton" class="btn red"><i class="fa fa-user"></i> 登錄拼多多</button> <button id="StartButton" class="btn blue"><i class="fa fa-play"></i> 開始監控</button> <button id="StopButton" class="btn purple"><i class="fa fa-stop"></i> 停止監控</button> </div> </div> </div> </div> </div> <div class="portlet-body"> <div> <div id="Table"></div> </div> </div> </div> <script id="tm" type="template"> <button type="button" class="sharp btn red" data-link="{link}" data-title="{title}" data-img="{img}" data-timeOut="{timeOut}">分享到...</button> </script>
添加對應的JS文件Index.js，代碼如下：
文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\KaiTuan\Index.js
var _$kaituanTable = $('#Table'); var _mallService = abp.services.app.mall; var _productService = abp.services.app.product; var timer;//調用setInterval，返回的數字，用於停止時鐘 var mallId;//記錄店鋪id (function () { $(function () { /** 添加店鋪模態框 */ var _createModal = new app.ModalManager({ viewUrl: abp.appPath + 'Mpa/KaiTuan/CreateModal',//載入視圖 scriptUrl: abp.appPath + 'Areas/Mpa/Views/KaiTuan/_CreateModal.js',//載入對應js modalClass: 'CreateMallModal' }); /** 分享模態框 */ var _sharpModal = new app.ModalManager({ viewUrl: abp.appPath + 'Mpa/KaiTuan/SharpModal', scriptUrl: abp.appPath + 'Areas/Mpa/Views/KaiTuan/_SharpModal.js', modalClass: 'SharpModal' }); _$kaituanTable.jtable({ title: app.localize('Pdd.KaiTuan'), paging: true, //啟用分頁 sorting: true, //啟用排序 pageSize: 500, multiSorting: true, //啟用多列排序 defaultSorting: 'goodId ASC', recordsLoaded: function (e, data) { var count = data.serverResponse.TotalRecordCount; if (count > 0) { SoundHelper.PlaySound(); } }, actions: { listAction: { method: _productService.getKaiTuanProductsAsync, } }, fields: { id: { key: true, list: false }, kaituan: { title: '操作', width: '5%', sorting: false, edit: false, create: false, display: function (product) { //創建一個將用於打開子表的圖像 var $img = $('<img src="/metronic/assets/admin/layout4/img/hor-menu-red-arrow.png" title="打開開團詳細列表" />'); //用戶單擊圖像時打開子表 $img.click(function () { $('#Table').jtable('openChildTable', $img.closest('tr'), { title: '最新開團列表（最後更新時間為：' + DateHelper.CurentTime() + "）", paging: true, //啟用分頁 sorting: true, //啟用排序 recordsLoaded: function (e, data) { console.info(data); var count = data.serverResponse.TotalRecordCount; toastr["info"]("當前開團人數共有（" + count + "）人", "提示"); }, actions: { listAction: { method: _productService.getAllKaiTuansByGoodId } }, fields: { action: { title: '', width: '15%', display: function (kaituan) { //操作按鈕 var a = $("#tm").html(); a = a.replace(new RegExp(/(\{title\})/gm), product.record.name); a = a.replace(new RegExp(/(\{link\})/gm), "http://mobile.yangkeduo.com/group500.html?group_order_id=" + kaituan.record.kaiTuanOrderNum + "&cid=nogroup_expire_mms_" + mallId); a = a.replace(new RegExp(/(\{img\})/gm), product.record.img); a = a.replace(new RegExp(/(\{timeOut\})/gm), kaituan.record.timeLeft); return a; } }, id: { title: '寶貝ID', //defaultValue: product.record.goodId, width: '10%', sorting: false }, nickName: { title: '用戶昵稱', width: '20%', sorting: false }, sku: { title: 'SKU', width: '20%', sorting: false }, orderNum: { title: '訂單編號', width: '20%', sorting: false }, timeLeft: { title: '剩餘時間', width: '20%', }, kaiTuanOrderNum: { title: '開團單號', width: '20%', sorting: false } } }, function (data) { //載入子表數據 data.childTable.jtable('load', { goodId: product.record.goodId, mallId: mallId, username: username }); }); }); //返回圖像顯示在行上 return $img; } }, goodId: { title: "寶貝ID", width: '10%', display: function (product) { var img = "<img src='" + product.record.img + "' style='width: 64px; height: 64px;'/>"; var a = "<a href='http://mobile.yangkeduo.com/goods.html?goods_id=" + product.record.goodId + "' target='_blank'>" + product.record.goodId + "</a>"; return a + img; } }, name: { title: "寶貝名稱", width: '70%' }, kaiTuanCount: { title: "開團人數", width: '20%' }, } }); //頁面載入完執行 getMalls(); $('#spinner3').spinner({ value: 60, min: 30, max: 1000 }); UIToastr.init(); //添加店鋪點擊事件 $('#CreateNewMallButton').click(function () { _createModal.open(); }); //店鋪成功保存後事件註冊 abp.event.on('app.createMallModalSaved', function () { //getCategories(true); getMalls(); }); $("#Table").delegate(".sharp", "click", function () { var t = $(this); _sharpModal.open({ title: $(t).attr("data-title"), link: $(t).attr("data-link"), img: $(t).attr("data-img"), timeOut: $(t).attr("data-timeOut") }); }); //開始監控點擊事件 $("#StartButton").click(function () { mallId = $('#mallCombobox').val(); if (mallId == null) { abp.message.warn('請至少添加一個店鋪！', '警告'); return; } $(this).attr("Disabled", "Disabled"); $(this).text("正在監控中"); getkaituans(); timer = window.setInterval("getkaituans(false)", 1000 * 60 * $("#interval").val()); }); //停止監控點擊事件 $("#StopButton").click(function () { window.clearInterval(timer); $("#StartButton").removeAttr("Disabled"); $("#StartButton").html("<i class='fa fa-play'></i> 開始監控"); }); }); })(); //獲取列表 function getkaituans(reload) { if (reload) { _$kaituanTable.jtable('reload'); } else { $(_$kaituanTable.find(".jtable-title-text")[0]).html(app.localize('Pdd.KaiTuan') + "（最後更新時間為：" + DateHelper.CurentTime() + "）"); _$kaituanTable.jtable('load', { mallId: mallId, interval: $("#interval").val() }); } } function getMalls() { _mallService.getMalls().done(function (result) { var malls = result.items; console.log(result); $("#mallCombobox").html(""); for (var i = 0; i < malls.length; i++) { console.info(1); $("#mallCombobox").append("<option value='" + malls[i].mallId + "'>" + malls[i].mallId + "【" + malls[i].name + "】</option>"); } }); }
添加_CreateModal.cshtml文件，代碼如下：
文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\KaiTuan\_CreateModal.cshtml
@using MyCompanyName.AbpZeroTemplate.Web.Areas.Mpa.Models.Common.Modals @Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel("添加店鋪")) <div class="modal-body"> <form name="MallForm"> <div class="form-group form-md-line-input form-md-floating-label"> <input class="form-control" type="text" name="mallId" required> <label>店鋪ID</label> </div> </form> </div> @Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")
添加_CreateModal.js文件，代碼如下：
文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\KaiTuan\_CreateModal.js
(function ($) { app.modals.CreateMallModal = function () { var _mallService = abp.services.app.mall; var _$mallForm = null; var _modalManager; this.init = function (modalManager) { _modalManager = modalManager; //取出Form表單 _$mallForm = _modalManager.getModal().find('form[name=MallForm]'); }; this.save = function () { //驗證不通過返回 if (!_$mallForm.valid()) { return; } //序列化參數 var mallid = _$mallForm.serializeFormToObject(); _modalManager.setBusy(true); _mallService.createByMallId( mallid ).done(function () { abp.notify.info(app.localize('SavedSuccessfully')); _modalManager.close(); abp.event.trigger('app.createMallModalSaved'); }).always(function () { _modalManager.setBusy(false); }); }; }; })(jQuery);
添加_SharpModal.cshtml文件，代碼如下：
文件路徑：D:\abp version\aspnet-zero-3.4.0\aspnet-zero-3.4.0\src\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\KaiTuan\_SharpModal.cshtml
@using PddSellerAssistant.Web.Areas.Mpa.Models.Common.Modals @Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel("分享拼團連接")) <div class="modal-body"> <ul class="media-list"> <li class="media"> <a class="pull-left" href="javascript:;"> <img class="media-object" src="@ViewBag.img" alt="64x64" style="width: 64px; height: 64px;"> </a> <div class="media-body"> <h4 class="media-heading">還有 @(ViewBag.timeOut) 小時後結束</h4> <p> @ViewBag.title </p> </div> </li> </ul> <!-- JiaThis Button BEGIN --> <div class="jiathis_style_32x32"> <a class="jiathis_button_qzone"></a> <a class="jiathis_button_tsina"></a> <a class="jiathis_button_tqq"></a> <a class="jiathis_button_weixin"></a> <a class="jiathis_button_renren"></a> <a href="http://www.jiathis.com/share?uid=1575631" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a> </div> <script type="text/javascript"> var jiathis_config = { data_track_clickback: 'true', title:'@ViewBag.title', url:'@ViewBag.link' }; </script> <script type="text/javascript" src
