Files
juipnet/Host/Views/User/MyOrders.cshtml

243 lines
8.7 KiB
Plaintext

@using Hncore.Infrastructure.Data
@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Extension
@using ViewComponents
@model PageData<ProductOrderEntity>
@{
Layout = "_UserLayout";
Func<string, string> cut = word =>
{
if (word.Length > 15)
return word.Substring(0, 15) + "...";
return word;
};
}
<style>
.tipBox {
position: absolute;
padding:10px;
border: 1px solid #ccc;
background: #fff;
width: 260px;
min-height:100px;
white-space: normal;
word-break: break-all;
word-wrap: break-word;
display: none;
}
</style>
<form asp-action="myorders" asp-controller="user" method="get">
<div class="toolsBar" id="app">
<div class="item">
日期筛选:
</div>
<div class="item">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<!--指定 date标记-->
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" v-model="searchModel.BTime" placeholder="选择开始时间" id="BTime" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<!--指定 date标记-->
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" v-model="searchModel.ETime" placeholder="选择结束时间" id="ETime" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="btn-group">
<select @@change="search" v-model="searchModel.OrderType" style="height:35px;">
<option value="0">全部类型</option>
<option value="1">新开</option>
<option value="2">续费</option>
<option value="3">批量新开</option>
<option value="4">批量续费</option>
</select>
</div>
</div>
<div class="item">
<div class="btn-group">
<select @@change="search" v-model="searchModel.ProductId" style="height:35px;">
<option value="0">全部产品</option>
<option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
</select>
</div>
</div>
<div class="item">
<div class="btn-group">
<select @@change="search" v-model="searchModel.PackageId" style="height:35px;">
<option value="0">全部套餐</option>
<option value="测试卡">测试卡</option>
<option value="天卡">天卡</option>
<option value="周卡">周卡</option>
<option value="月卡">月卡</option>
<option value="月卡(活动)">月卡(活动)</option>
<option value="双月卡(活动)">双月卡(活动)</option>
<option value="季卡">季卡</option>
<option value="季卡(活动)">季卡(活动)</option>
<option value="年卡">年卡</option>
</select>
</div>
</div>
<div class="item">
<input type="text" v-model="searchModel.KeyWord" placeholder="账号" class="bianhao" /><button type="button" class="btn btn-primary" v-on:click="search">查询</button>
</div>
</div>
</form>
<table class="table table-striped table_person">
<tr>
<th>日期</th>
<th>订单编号</th>
<th>类型</th>
<th>产品</th>
<th>套餐</th>
<th>单价</th>
<th>总连接数</th>
<th>账号</th>
<th>订单金额</th>
<th>优惠券</th>
<th>实付金额</th>
</tr>
@foreach (var item in Model.List)
{
<tr>
<td>@item.CreateTime.ToString("yyyy.MM.dd")</td>
<td>@item.OrderNo</td>
<td>@item.OrderType.GetEnumDisplayName()</td>
<td>@item.ProductName</td>
<td>@item.PackageName</td>
<td>@item.DayPrice</td>
<td>@(item.ConnectCount*item.AccountCount)</td>
<td class="@(item.Accounts.Length>15?"cutTip":"")">
@cut(item.Accounts)
<div class="tipBox">@item.Accounts</div>
</td>
<td>@item.OrderAmount</td>
<td>@item.CouponAmount</td>
<td>@item.PaymentAmount</td>
</tr>
}
</table>
<div class="fenye">
@await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
</div>
<script type="text/javascript">
$(function () {
var picker1 = $('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn'),
//minDate: '2016-7-1'
});
var picker2 = $('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
});
//动态设置最小值
picker1.on('dp.change', function (e) {
picker2.data('DateTimePicker').minDate(e.date);
});
//动态设置最大值
picker2.on('dp.change', function (e) {
picker1.data('DateTimePicker').maxDate(e.date);
});
$(".cutTip").mouseover(function () {
$(this).children().last().show();
}).mouseleave(function () {
$(this).children().last().hide();
})
});</script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
productWithPackage: [],
packages: [],
searchModel: {
OrderType:0,
ProductId:@this.Context.Request.GetInt("ProductId"),
PackageId:"0",
KeyWord:'',
BTime: '@this.Context.Request.Get("BTime")',
ETime: '@this.Context.Request.Get("ETime")',
},
oneAuthModel: {
ProductId: 0,
Account: "",
Pwd:""
},
mutilAuthModel: {
ProductId: 0,
Account: "",
Pwd: "",
StartNum: 0,
Count:0
}
},
computed: {
},
watch: {
'searchModel.ProductId': { //加引号监听对象里的属性
handler: function (newValue, oldValue) {
for (var i = 0; i < this.productWithPackage.length; i++) {
var item = this.productWithPackage[i];
if (item.Product.Id == newValue) {
this.packages = item.Packages
return;
}
}
},
immediate: true
}
},
created: function () {
this.getProducts();
},
methods: {
getProducts() {
var that = this;
$.ajax({
type: 'GET',
url: '/api/course/v1/product/ProductWithPackage',
success: function (res) {
if (res.Code == 10000) {
that.productWithPackage = res.Data;
}
}
});
},
search() {
var ps = [];
this.searchModel.BTime = $("#BTime").val();
this.searchModel.ETime = $("#ETime").val();
for (var item in this.searchModel) {
var p = item + "=" + this.searchModel[item];
ps.push(p);
}
window.location.href = "?" + ps.join("&");
},
}
})
</script>