345 lines
15 KiB
Plaintext
345 lines
15 KiB
Plaintext
@using Hncore.Pass.Vpn.Response.Product
|
||
@using Hncore.Infrastructure.Extension
|
||
@using Hncore.Pass.BaseInfo.Response
|
||
@using Hncore.Infrastructure.Serializer;
|
||
@using Hncore.Pass.BaseInfo.Service
|
||
@model PackageInfoResponse
|
||
@inject UserService m_UserService
|
||
@{
|
||
ViewData["Title"] = "购买产品";
|
||
UserLoginModel user = null;
|
||
Hncore.Pass.BaseInfo.Models.User userEntity = new Hncore.Pass.BaseInfo.Models.User();
|
||
if (this.Context.Request.Cookies.TryGetValue("userInfo", out string userCookie))
|
||
{
|
||
user = userCookie.FromJsonTo<UserLoginModel>();
|
||
userEntity = await m_UserService.GetById(user.Id);
|
||
}
|
||
}
|
||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
|
||
<vc:redirecct-login></vc:redirecct-login>
|
||
<vc:pay-wait></vc:pay-wait>
|
||
<div id="app">
|
||
<div class="cpTop">
|
||
<p class="choose">当前已选产品：</p>
|
||
<div class="kArea">
|
||
<div class="cpKuang">
|
||
<div class="item">
|
||
<p><img src="~/@Model.Product.Image"></p>
|
||
<p>@Model.Product.Name</p>
|
||
</div>
|
||
<div class="item">
|
||
<p class="kaci">@Model.Package.Name</p>
|
||
<p class="grayText">@(Model.Package.DayPrice)元/天</p>
|
||
<p class="grayText">@Model.Package.Profile</p>
|
||
</div>
|
||
<div class="item">
|
||
¥ <span class="price">@Model.Package.Price</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chongxin">
|
||
<div class="item redText">
|
||
*请确认好所需产品，买错产品换货将产生费用
|
||
</div>
|
||
<div class="item">
|
||
<button type="button" class="btnBlue" onclick="history.go(-1)">返回重新选择</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- con -->
|
||
<div class="container zhuce">
|
||
<div class="reg_tab">
|
||
<div class="item dan active_dan">
|
||
续费
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="conDan">
|
||
<div class="row">
|
||
<div class="col-sm-5 col-xs-5">
|
||
PPTP产品账号：
|
||
</div>
|
||
<div class="col-sm-7 col-xs-7 shuru">
|
||
<input type="text" v-model="OneBuyModel.Account" disabled />
|
||
</div>
|
||
</div>
|
||
@*<div class="row">
|
||
<div class="col-sm-5 col-xs-5">
|
||
PPTP账号密码：
|
||
</div>
|
||
<div class="col-sm-7 col-xs-7 shuru">
|
||
<input type="text" v-model="OneBuyModel.Pwd" />
|
||
</div>
|
||
</div>*@
|
||
<div class="row">
|
||
<div class="col-sm-5 col-xs-5">
|
||
连接数：
|
||
</div>
|
||
<div class="col-sm-7 col-xs-7">
|
||
<div class="jiajian">
|
||
<div class="item">
|
||
|
||
</div>
|
||
<div class="item">
|
||
<span>{{OneBuyModel.ConnectCount}}</span>
|
||
</div>
|
||
<div class="item">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-5 col-xs-5">
|
||
选择优惠券：
|
||
</div>
|
||
<div class="col-sm-7 col-xs-7 select">
|
||
<select class="chooseYhq" v-model="OneBuyModel.CouponId">
|
||
<option value="0">请选择优惠券</option>
|
||
<option v-for="item in Coupons" :value="item.Id">{{item.Name}}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-5 col-xs-5">
|
||
余额：
|
||
</div>
|
||
<div class="col-sm-7 col-xs-7">
|
||
<div class="">
|
||
当前账户余额<span class="blueText">@(userEntity.RestAmount)</span>元
|
||
<a href="/User/Index">前往充值</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row" v-if="showPayType">
|
||
<div class="col-sm-5 col-xs-5">
|
||
支付方式：
|
||
</div>
|
||
<div class="col-sm-7 col-xs-7 pay">
|
||
<div class="radio" v-on:click="OneBuyModel.OPayType=100">
|
||
<input id="zhifubaopay_s1" name="OPayType" type="radio" v-model="OneBuyModel.OPayType" value="100">
|
||
<label for="zhifubaopay_s1" class="radio-label"><img src="~/m/img/zfb.png"> 支付宝支付</label>
|
||
</div>
|
||
<div class="radio" v-on:click="OneBuyModel.OPayType=70">
|
||
<input id="weixinpay_s1" name="OPayType" type="radio" v-model="OneBuyModel.OPayType" value="70">
|
||
<label for="weixinpay_s1" class="radio-label"><img src="~/m/img/wx.png"> 微信支付</label>
|
||
</div>
|
||
<div class="radio" >
|
||
<input id="UseAccountAmount" name="OPayType" type="radio" v-model="OneBuyModel.UseAccountAmount" value="1">
|
||
<label for="UseAccountAmount" class="radio-label" style="line-height:150%"> 余额支付</label>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-5 col-xs-5">
|
||
总金额：
|
||
</div>
|
||
<div class="col-sm-7 col-xs-7">
|
||
<span>{{TotalAmount}}</span>元
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-5 col-xs-5">
|
||
应付款：
|
||
</div>
|
||
<div class="col-sm-7 col-xs-7">
|
||
<span class="yingfu" style="font-size: 35px;font-weight: bold;">{{PayAmount}}</span>元
|
||
</div>
|
||
</div>
|
||
<p class="grayText songquan">每隔30天淘宝下单可获得一张优惠券</p>
|
||
<p class="grayText songquan" style="color:red">{{Tip}}</p>
|
||
<div class="ok">
|
||
<button type="button" class="pay-botton btnPay" v-on:click="onePay">确认支付</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="aliPayBox" style="display:none"></div>
|
||
@section Scripts{
|
||
<script>
|
||
var productId =@(Model.Product.Id);
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
showPayType: true,
|
||
Tip:'',
|
||
RestAmount: @(userEntity.RestAmount),
|
||
Coupons: [],
|
||
SelectCoupon: {},
|
||
OrderInfo: {},
|
||
OneBuyModel: {
|
||
Price:@(Model.Package.Price),
|
||
PackageId:@(Model.Package.Id),
|
||
OrderType: @ViewBag.orderType,
|
||
Account: '@ViewBag.accounts',
|
||
CouponAmount: 0,
|
||
Pwd: '',
|
||
ConnectCount: @(ViewBag.ConnectCount),
|
||
CouponId: 0,
|
||
UseAccountAmount: 0,
|
||
OPayType: 100,
|
||
PayChannel:40,
|
||
}
|
||
},
|
||
computed: {
|
||
TotalAmount: function () {
|
||
var count = this.OneBuyModel.Account.split(',').length;
|
||
var total = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount * count;
|
||
return total.toFixed(2);
|
||
},
|
||
PayAmount: function () {
|
||
var count = this.OneBuyModel.Account.split(',').length;
|
||
var restAmout = this.OneBuyModel.UseAccountAmount == 1 ? this.RestAmount : 0;
|
||
var total = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount * count - this.OneBuyModel.CouponAmount ;
|
||
total= total < 0 ? 0 : total;
|
||
return total.toFixed(2);
|
||
}
|
||
},
|
||
watch: {
|
||
'OneBuyModel.CouponId': { //加引号监听对象里的属性
|
||
handler: function (newValue, oldValue) {
|
||
var totalAmount = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount;
|
||
for (var i = 0; i < this.Coupons.length; i++) {
|
||
var item = this.Coupons[i];
|
||
if (totalAmount < item.AllowMinAmount) {
|
||
continue;
|
||
}
|
||
if (item.Id == newValue) {
|
||
if (item.CouponType == 1) {//满减
|
||
this.OneBuyModel.CouponAmount = item.CouponValue;
|
||
} else {
|
||
//亲 请勿非法操作呦^.^ 请按照正常的流程操作 我们后台是有记录滴
|
||
if($(".kaci").text() == '天卡'){
|
||
this.OneBuyModel.CouponAmount = totalAmount * item.CouponValue * 0.1;
|
||
} else {
|
||
alert('非天卡无效');
|
||
this.OneBuyModel.CouponId = '0';
|
||
}
|
||
}
|
||
return;
|
||
} else {
|
||
this.OneBuyModel.CouponAmount = 0;
|
||
}
|
||
}
|
||
},
|
||
immediate: true
|
||
},
|
||
'OneBuyModel.OPayType': { //加引号监听对象里的属性
|
||
handler: function (newValue, oldValue) {
|
||
var wx = 10;
|
||
if (isWeiXin()) wx = 20;
|
||
this.OneBuyModel.PayChannel = newValue == 70 ? wx : 40;
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
mounted: function () {
|
||
if (isWeiXin()) {
|
||
this.OneBuyModel.PayChannel = 20;
|
||
this.OneBuyModel.OPayType = 70;
|
||
this.showPayType = false;
|
||
}
|
||
this.getCoupons();
|
||
},
|
||
methods: {
|
||
getCoupons: function () {
|
||
var that = this;
|
||
var url = '/api/sells/v1/coupon/GetAvailableCoupon';
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: url,
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.Code == 10000) {
|
||
that.Coupons = res.Data.map(m => m.Coupon);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onePay: function () {
|
||
$(".pay-botton").hide();
|
||
if (this.OneBuyModel.UseAccountAmount) {
|
||
if (this.RestAmount < this.PayAmount){
|
||
alert('余额不足，请充值。您也可以使用微信、支付宝支付。');return;
|
||
} else {
|
||
this.RestAmount = this.RestAmount - this.PayAmount;
|
||
}
|
||
}
|
||
var that = this;
|
||
if (this.OneBuyModel.UseAccountAmount === true) this.OneBuyModel.UseAccountAmount = 1;
|
||
if (this.OneBuyModel.UseAccountAmount === false) this.OneBuyModel.UseAccountAmount = 0;
|
||
var that = this;
|
||
showPayWait();
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: '/product/CreateOrder',
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(this.OneBuyModel),
|
||
success: function (res) {
|
||
console.log(res);
|
||
if (res.Code == 10000) {
|
||
hidePayWait();
|
||
that.payCallback(res.Data)
|
||
//that.isPay(res.Data.OrderInfo.OrderNo);
|
||
} else {
|
||
//that.Tip = res.Message;
|
||
tipPayWait(res.Message);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
payCallback: function (data) {
|
||
this.OrderInfo = data.OrderInfo;
|
||
if (!data.PayData) { alert("下单失败"); return; }
|
||
var payChannel = this.OrderInfo.PayChannel;
|
||
if (payChannel == 10) {
|
||
this.h5WxPay(data.PayData)
|
||
} else if (payChannel == 20) {
|
||
this.jsWxPay(data.PayData);
|
||
} else if (payChannel == 40) {
|
||
this.aliPay(data.PayData);
|
||
}
|
||
},
|
||
h5WxPay(payData) {
|
||
window.location.href = payData;
|
||
},
|
||
jsWxPay(payData) {
|
||
WeixinJSBridge.invoke(
|
||
'getBrandWCPayRequest',
|
||
JSON.parse(payData),
|
||
function (res) {
|
||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||
window.location.href = "/User/MyAccounts";
|
||
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
|
||
|
||
} else {
|
||
alert("支付失败" + res.err_msg);
|
||
}
|
||
});
|
||
},
|
||
aliPay(payData) {
|
||
$("#aliPayBox").html(payData);
|
||
},
|
||
isPay: function (orderNo) {
|
||
var handler = setInterval(function () {
|
||
var url = '/product/IsPay?orderNo=' + orderNo;
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: url,
|
||
success: function (res) {
|
||
if (res.Code == 10000 && res.Data == 1) {
|
||
clearInterval(handler);
|
||
// $(".payMask").hide();
|
||
window.location.href = "/user/myaccounts";
|
||
}
|
||
}
|
||
})
|
||
}, 3000)
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
} |