272 lines
11 KiB
Plaintext
272 lines
11 KiB
Plaintext
@using Hncore.Infrastructure.Data
|
|
@using Hncore.Pass.Vpn.Domain
|
|
@using Hncore.Infrastructure.Extension
|
|
@using ViewComponents
|
|
@model PageData<ProductOrderEntity>
|
|
@{
|
|
Layout = "_UserLayout";
|
|
}
|
|
|
|
<div id="app">
|
|
<form asp-action="myorders" asp-controller="user" method="get">
|
|
<div class="chaxun2">
|
|
<input type="text" v-model="searchModel.KeyWord" /><button type="button" class="btnOrange" v-on:click="search">查询</button>
|
|
</div>
|
|
<div class="row riqi">
|
|
<div class="col-sm-4 col-xs-4">
|
|
日期查询：
|
|
</div>
|
|
<div class="col-sm-4 col-xs-4">
|
|
<input type="text" name="start_date" id="start_date" v-model="searchModel.BTime" placeholder="选择开始日期" readonly="readonly" />
|
|
</div>
|
|
<div class="col-sm-4 col-xs-4">
|
|
<input type="text" name="end_date" id="end_date" v-model="searchModel.ETime" placeholder="选择结束日期" readonly="readonly" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row shaixuan">
|
|
<div class="col-sm-4 col-xs-4">
|
|
<select v-model="searchModel.OrderType">
|
|
<option value="0">全部类型</option>
|
|
<option value="1">新开</option>
|
|
<option value="2">续费</option>
|
|
<option value="3">批量新开</option>
|
|
<option value="4">批量续费</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-4 col-xs-4">
|
|
<select v-model="searchModel.ProductId">
|
|
<option value="0">全部产品</option>
|
|
<option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-4 col-xs-4">
|
|
<select v-model="searchModel.PackageId">
|
|
<option value="0">全部套餐</option>
|
|
<option v-for="item in packages" :value="item.Id">{{item.Name}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<table border="0" cellspacing="0" cellpadding="0" class="orderTable">
|
|
<tr><th>类型</th><th>产品</th><th>套餐</th><th>详情</th></tr>
|
|
@foreach (var item in Model.List)
|
|
{
|
|
<tr>
|
|
<td>@item.OrderType.GetEnumDisplayName()</td>
|
|
<td>@item.ProductName</td>
|
|
<td>@item.PackageName</td>
|
|
<td>
|
|
<button type="button" class="btnXq toDetail" onclick="showDetail(this)"
|
|
a-date="@item.CreateTime.ToString("yyyy.MM.dd")"
|
|
a-orderno="@item.OrderNo"
|
|
a-ordertype="@item.OrderType.GetEnumDisplayName()"
|
|
a-product="@item.ProductName"
|
|
a-package="@item.PackageName"
|
|
a-price="@item.DayPrice"
|
|
a-dayprice="@item.DayPrice"
|
|
a-conncount="@(item.AccountCount*item.ConnectCount)"
|
|
a-account="@item.Accounts"
|
|
a-orderamount="@item.OrderAmount"
|
|
a-refundamount="@item.RefundAmount"
|
|
a-payamount="@item.PaymentAmount"
|
|
a-refundresttime="@item.RefundRestTime">
|
|
详情
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</table>
|
|
<div class="fenye">
|
|
@await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
|
|
</div>
|
|
<!-- 弹窗详情 -->
|
|
<div class="layerTable">
|
|
<table border="0" cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<td>日期：</td>
|
|
<td>{{currentOrder.date}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>订单编号：</td>
|
|
<td>{{currentOrder.orderno}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>类型：</td>
|
|
<td>{{currentOrder.ordertype}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>产品：</td>
|
|
<td>{{currentOrder.product}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>套餐：</td>
|
|
<td>{{currentOrder.package}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>总连接数：</td>
|
|
<td>{{currentOrder.conncount}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>账号：</td>
|
|
<td>{{currentOrder.account}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>退款单价：</td>
|
|
<td>{{currentOrder.dayprice}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>退款时长：</td>
|
|
<td>{{currentOrder.refundresttime}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>实付金额：</td>
|
|
<td>{{currentOrder.paymentamount}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>退款金额：</td>
|
|
<td>{{currentOrder.refundamount}}</td>
|
|
</tr>
|
|
</table>
|
|
<div class="back">
|
|
<img src="~/m/img/arrowback.png"> 返回列表
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="~/m/js/LCalendar.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript">
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
productWithPackage: [],
|
|
packages: [],
|
|
searchModel: {
|
|
OrderType:0,
|
|
ProductId:@this.Context.Request.GetInt("ProductId"),
|
|
PackageId:@this.Context.Request.GetInt("PackageId"),
|
|
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
|
|
},
|
|
currentOrder: {
|
|
date:"",
|
|
orderno:"",
|
|
ordertype:"",
|
|
product:"",
|
|
package:"",
|
|
price:"",
|
|
conncount:"",
|
|
account:"",
|
|
orderamount:"",
|
|
couponamount:"",
|
|
payamount:""
|
|
}
|
|
},
|
|
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("&");
|
|
},
|
|
setOrderInfo(info) {
|
|
this.currentOrder = info;
|
|
}
|
|
}
|
|
})
|
|
|
|
function showDetail(_self) {
|
|
var currentOrder = {
|
|
date: $(_self).attr('a-date'),
|
|
orderno: $(_self).attr('a-orderno'),
|
|
ordertype: $(_self).attr('a-ordertype'),
|
|
product: $(_self).attr('a-product'),
|
|
package: $(_self).attr('a-package'),
|
|
dayprice: $(_self).attr('a-dayprice'),
|
|
conncount: $(_self).attr('a-conncount'),
|
|
account: $(_self).attr('a-account'),
|
|
orderamount: $(_self).attr('a-orderamount'),
|
|
couponamount: $(_self).attr('a-couponamount'),
|
|
payamount: $(_self).attr('a-payamount'),
|
|
refundresttime: $(_self).attr('a-refundresttime'),
|
|
payamount: $(_self).attr('a-payamount'),
|
|
}
|
|
app.setOrderInfo(currentOrder);
|
|
$(_self).show();
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
var calendar = new LCalendar();
|
|
calendar.init({
|
|
'trigger': '#start_date', //标签id
|
|
'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
|
|
'minDate': (new Date().getFullYear() - 3) + '-' + 1 + '-' + 1, //最小日期
|
|
'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
|
|
});
|
|
var calendar = new LCalendar();
|
|
calendar.init({
|
|
'trigger': '#end_date', //标签id
|
|
'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
|
|
'minDate': (new Date().getFullYear() - 3) + '-' + 1 + '-' + 1, //最小日期
|
|
'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
|
|
});
|
|
$(".toDetail").click(function () {
|
|
showDetail($(this))
|
|
$(".layerTable").show();
|
|
});
|
|
$(".back").click(function () {
|
|
$(".layerTable").hide();
|
|
})
|
|
</script>
|
|
|