Commit 928b5bcc authored by 黄媛媛's avatar 黄媛媛

添加优惠券

parent 1a0e4657
......@@ -183,3 +183,102 @@
.brd0{
border-radius: 0;
}
.pfR{
font-family: "PingFangR"
}
.commonF ._choice_box{
height: 19px;
position: absolute;
right: 10px;
bottom: 8px;
display: flex;
align-items: center;
}
.commonF ._choice_box span{
width: 16px;
height: 16px;
border-radius: 50%;
line-height: 16px;
text-align: center;
background-color: white;
display: inline-block;
font-size: 12px !important;
}
.commonF .sawtooth .input{
position: relative;
top: 2px;
}
.commonF .sawtooth {
/* 相对定位,方便让before和after伪元素绝对定位偏移 */
position: relative;
/* 把超出p的部分隐藏起来 */
overflow: hidden;
width:234px;
height:84px;
background: #6776D2;
display: inline-block;
margin-right:26px;
padding-left:20px;
color:#fff;
}
.commonF .sawtooth .kdj{
position: absolute;
display: inline-block;
width:51px;
height:22px;
background:rgba(255,231,27,1);
right:20px;
top:12px;
color:#7C6F01;
font-size: 12px;
text-align: center;
line-height: 22px;
}
.commonF .sawtooth:before, .sawtooth:after {
content: ' ';
width: 0;
height: 100%;
/* 绝对定位进行偏移 */
position: absolute;
top: 10px;
}
.commonF .sawtooth:before {
/* 圆点型的border */
border-right: 10px dotted white;
/* 偏移一个半径,让圆点的一半覆盖p */
left: -5px;
}
.commonF .Yhq{
background: #fff;
padding:20px 0;
}
.commonF .yhqUl{
padding:0 20px;
margin:20px 0;
}
.commonF .icon-xuanzhong2{
color: #31AA21;
}
.commonF .sawtooth:hover {
cursor: pointer;
/* box-shadow: 0px 1px 13px 0px rgb(189, 189, 189);
transition: all linear .5s; */
}
.commonF .yhqUl .blue{
background-color: #8794E2;
}
.commonF .yhqUl .blue:hover{
background-color: #6776D2;
}
.commonF .yhqUl .blue ._time{
color: #4C58A4 !important;
}
.commonF .yhqUl ._active{
background-color: #D9A24D;
}
.commonF .yhqUl .blue._active{
background-color: #6776D2;
}
\ No newline at end of file
......@@ -425,6 +425,7 @@ export default {
freeMsg:{
custom:[],
},
UserCanUseCouponList: [],
CouponList: [],
......@@ -493,6 +494,8 @@ export default {
this.freeMsg.custom=[];
this.freeMsg.pay={};
this.freeMsg.buyer_tel_country_code="86";
this.freeMsg.OrderSource=2;
this.freeMsg.OrderForm=1;
// this.freeMsg.buyer_tel_number="13183813102";
......
<style>
@import '../../assets/css/common.css';
.HotelSure{
width:1200px;
margin:20px auto;
......@@ -234,9 +235,9 @@
}
.HS_RitTop{
width:348px;
height:72px;
/* height:72px; */
background-color: #EDF4FF;
padding:0 20px;
padding:10px 20px;
position: relative;
}
.HS_RitTop_Left{
......@@ -334,11 +335,16 @@
.HotelSure .HS_div3 .el-textarea__inner{
border-radius: 0;
}
.HS_div4{
box-sizing: border-box;
margin-top: 20px;
border: 1px solid #E0E0E0;
}
</style>
<template>
<div class="HotelSure">
<div class="HotelSure commonF">
<div class="HS_LeftInfo">
<div class="HS_div1">
<!-- <div class="HS_divFirst Hs_OneType">
......@@ -540,6 +546,47 @@
</div>
</div>
</div>
<div class="HS_div4">
<div class="HS_bookTitle" style="margin-bottom:20px;box-sizing: border-box;">
优惠信息
</div>
<div style="background:#fff;padding:20px">
<p class="pfR" style="margin-bottom:10px">兑换码</p>
<div>
<el-input size="small" v-model="ActivateCode" placeholder="请输入兑换码" style="width:200px"></el-input>
<el-button @click="GetCode" size="small" style="margin-left:10px">兑换</el-button>
</div>
</div>
<!-- 优惠券 -->
<div class="Yhq">
<p class="pfR" style="color:#000000;padding-left:20px">优惠券使用</p>
<ul class="yhqUl">
<li v-for="(item,index) in UserCanUseCouponList" :class="{'blue':item.couponsType===1,'_active':item.active}" :key="index+5000" class="sawtooth">
<span class="kdj">
<span v-if="item.overlapUse==1">可叠加</span>
<span v-else>不可叠加</span>
</span>
<p style="margin-top:10px">
<span v-if="item.couponsType==1"><span>{{item.denomination}}</span></span>
<span v-else>{{item.denomination}}折</span>
</p>
<p style="font-size:14px">满{{item.useCondition}}使用</p>
<p style="font-size:12px;color:#4C58A4;margin-top:6px">
有效期:{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}
</p>
<div @click="clickCoupon(item)" class="_choice_box">
<span v-if="!item.active"></span>
<span v-else class="iconfont icon-xuanzhong2"></span>
</div>
</li>
<div v-if="UserCanUseCouponList.lenggth==0" class="_no_coupon">
<p>暂无可用优惠券</p>
</div>
</ul>
</div>
</div>
<input type="button" class="HD_payBtn" :class="{'disBtn':isBaoChild}" @click="submitForm('sureMsg')" value="下单" />
</div>
<div class="HS_RightList">
......@@ -603,11 +650,14 @@
</ul>
</div>
<div class="HS_RightBtm">
<div class="HS_RitTop">
<div class="HS_RitTop basefix">
<div style="float:left;margin-top:25px;">订单总额</div>
<div style="margin-top:10px;float:right">
<div class="sureMsgTotalMon"><span>人民币:</span>{{sureMsg.totalChargeableRateInfo}}</div>
<div class="sureMsgTotalMon"><span>日元:</span>{{sureMsg.totalPriceJapanese}}</div>
<div class="sureMsgTotalMon"><span>人民币:</span>{{sureMsg.totalChargeableRateInfo}}</div>
<div class="sureMsgTotalMon"><span>优惠:</span>{{sureMsg.DiscountMoney}}</div>
<div class="sureMsgTotalMon"><span>实付款:</span>{{sureMsg.CustomerPayMoney}}</div>
</div>
<!-- <span class="HS_RitTop_Left">订单总额</span>
<span class="HS_RitPrice">
......@@ -672,7 +722,13 @@ export default {
HotelName:'',
HotelPic:'',
EmployeeIdStr:'',
OldTotalPrice:0
OldTotalPrice:0,
CustomerPayMoney:0,
DiscountMoney:0,
OrderSource:2,
OrderForm:1,
},
//验证规则
rules: {
......@@ -774,6 +830,14 @@ export default {
//选了的儿童数
chekedChildCount:0,
isBaoChild:false,
CouponList:[],
UserCanUseCouponList:[],
CouponIds: '',
SettlementPrice:0,
ActivateCode:'',
price:0,
};
},
mounted() {
......@@ -804,9 +868,134 @@ export default {
}
this.getWeek();
this.getBookInfo();
}
},
methods: {
clickCoupon: function (item) {
let list = [];
if (!item.active) { // 是否选中
if(item.denomination>this.SettlementPrice){
this.Error("该优惠券不满足使用条件!")
return;
}
if (item.overlapUse === 1) { // 1允许叠加使用
this.CouponList.forEach(x=>{
if (x.overlapUse === 1 && x.couponsType === item.couponsType) { // 优惠券列表筛选出允许叠加并且type相同的
list.push(x)
}
})
item.active = !item.active
this.UserCanUseCouponList = list
} else { // 不允许叠加使用
this.CouponList.forEach(x=>{ // 筛选掉其他
if (x.id === item.id) {
list.push(x)
}
})
item.active = !item.active
this.UserCanUseCouponList = list
}
} else {
item.active = !item.active
if (this.UserCanUseCouponList.length===1) { // 取消优惠券选中状态 之前直选择了一个优惠券
this.UserCanUseCouponList = this.CouponList
} else { //... 之前选择了多个优惠券 循环判断是否已全部取消
let num = 0
this.UserCanUseCouponList.forEach(x=>{
if (x.active)
num +=1
})
if (num===0) {
this.CouponList.forEach(x=>{
x.active = false
})
this.UserCanUseCouponList = this.CouponList
}
}
}
if (this.UserCanUseCouponList.length>0) {
let CouponIds = ''
let CouponMoney = 0
let CouponSale = 1
let type = 0
this.UserCanUseCouponList.forEach(x=>{
if (x.active) {
type = x.couponsType
CouponIds = CouponIds + x.id + ','
if (x.couponsType === 1) {
CouponMoney = CouponMoney + x.denomination
} else {
CouponSale = CouponSale * (x.denomination/10)
}
}
})
this.CouponIds = CouponIds
if (type === 1) {
this.SettlementPrice = this.price - CouponMoney
} else if (type === 2) {
this.SettlementPrice = this.price * CouponSale
} else if (type === 0) {
this.SettlementPrice = this.price
}
} else {
this.SettlementPrice = this.price
}
// this.SettlementPrice=parseInt(this.SettlementPrice).toFixed(2);
let allmonney=this.price - this.SettlementPrice;
this.sureMsg.DiscountMoney = (this.price - this.SettlementPrice).toFixed(2);
this.CouponIds=this.CouponIds.substring(0,this.CouponIds.length-1)
this.sureMsg.CouponAllotIds=this.CouponIds;
this.sureMsg.CustomerPayMoney=this.SettlementPrice;
},
filterCoupon() {
let list = []
this.CouponList.forEach(x=>{
if (this.price>x.useCondition) {
x.active = false
list.push(x);
}
})
this.UserCanUseCouponList = list;
},
// 获取优惠券
getUserCanUseCouponList(){
let msg={
lineId:0,
lineteamId:0,
CouponsUseScope:10,
};
this.apiJavaPost("/api/b2b/user/getUserCanUseCouponList",msg,
res => {
if(res.data.resultCode==1){
this.CouponList=res.data.data;
this.CouponList.forEach(item=>{
item.active=false;
})
this.filterCoupon();
}
},
null
);
},
GetCode(){
this.apiJavaPost('/api/b2b/user/updateUseCouponBycode',{ActivateCode:this.ActivateCode},res=>{
if(res.data.resultCode==1){
this.Success("兑换码激活成功!");
this.getUserCanUseCouponList();
}else{
this.Error("该兑换码无效!");
}
},null)
},
//获取房型
getGradeType(type){
let gradeType=''
......@@ -909,11 +1098,14 @@ export default {
this.sureMsg.OldTotalPrice+=parseFloat(oldAount+childAount);
AdultJapanCount+=AdultJapanPrice*x.roomAdultCount;
childJapanCount+=ChildJapanPrice*x.roomChildCount;
this.SettlementPrice=this.sureMsg.totalChargeableRateInfo;
this.price=this.sureMsg.totalChargeableRateInfo;
// AdultJapanCount+=AdultJapanPrice;
// childJapanCount+=ChildJapanPrice;
this.sureMsg.totalPriceJapanese += parseFloat(AdultJapanCount+childJapanCount);
this.getUserCanUseCouponList();
})
} else {
......@@ -981,6 +1173,8 @@ export default {
},
//提交
submitForm(addMsg) {
// console.log("this.sureMsg",this.sureMsg)
// return;
//提交创建、修改表单
if(!this.isBaoChild){
this.$refs[addMsg].validate(valid => {
......@@ -994,6 +1188,7 @@ export default {
},
//点击下单
BuyHoTel(){
if(sessionStorage.getItem('OpenB2BCode')==null && !localStorage.userInfo){
return this.Error('请登录!')
}
......
......@@ -273,13 +273,10 @@ export default {
this.SettlementPrice = this.price
}
// this.SettlementPrice=parseInt(this.SettlementPrice).toFixed(2);
let allmonney=this.price - this.SettlementPrice;
// let allmonney=this.price - this.SettlementPrice;
this.form.discountMoney = (this.price - this.SettlementPrice).toFixed(2);
this.CouponIds=this.CouponIds.substring(0,this.CouponIds.length-1)
this.form.couponAllotIds=this.CouponIds;
},
filterCoupon() {
......
......@@ -206,22 +206,71 @@
<el-form-item label="邮箱" prop="ContactEmail" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
<el-input size="small" v-model="personNum.ContactEmail"></el-input>
</el-form-item>
<el-form-item style="width:99%" label="备注">
<el-input size="small" v-model="personNum.Remarks"></el-input>
<el-form-item style="width:450px" label="备注">
<el-input size="small" type="textarea" v-model="personNum.Remarks"></el-input>
</el-form-item>
</el-form>
</div>
<div v-show="!personnums" style="border:1px solid #E0E0E0">
<div style="background:#fff;padding:20px">
<p class="pfR" style="margin-bottom:10px">兑换码</p>
<div>
<el-input size="small" v-model="ActivateCode" placeholder="请输入兑换码" style="width:200px"></el-input>
<el-button @click="GetCode" size="small" style="margin-left:10px">兑换</el-button>
</div>
</div>
<!-- 优惠券 -->
<div class="Yhq">
<p class="pfR" style="color:#000000;padding-left:20px">优惠券使用</p>
<ul class="yhqUl">
<li v-for="(item,index) in UserCanUseCouponList" :class="{'blue':item.couponsType===1,'_active':item.active}" :key="index+5000" class="sawtooth">
<span class="kdj">
<span v-if="item.overlapUse==1">可叠加</span>
<span v-else>不可叠加</span>
</span>
<p style="margin-top:10px">
<span v-if="item.couponsType==1"><span>{{item.denomination}}</span></span>
<span v-else>{{item.denomination}}</span>
</p>
<p style="font-size:14px">{{item.useCondition}}使用</p>
<p style="font-size:12px;color:#4C58A4;margin-top:6px">
有效期:{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}
</p>
<div @click="clickCoupon(item)" class="_choice_box">
<span v-if="!item.active"></span>
<span v-else class="iconfont icon-xuanzhong2"></span>
</div>
</li>
<div v-if="UserCanUseCouponList.lenggth==0" class="_no_coupon">
<p>暂无可用优惠券</p>
</div>
</ul>
</div>
</div>
</el-row>
<!-- 提交订单 -->
<div class='tjorder' v-show="!personnums">
<div style="width:80%;margin:0 auto;color:#cccccc;position:relative">
<p style="font-size:14px;padding:4px 50px;text-align:right;">条款和限制<span style="color:#49C0A1">《网上购票须知》</span> </p>
<p class="total" style="margin-top:12px">
<p style="font-size:14px;text-align:right;">条款和限制<span style="color:#49C0A1">《网上购票须知》</span> </p>
<p>
<span>总价</span>
<span style="font-size:20px;font-weight:400;color:rgba(255,255,255,1);margin:0 15px;">{{personNum.PreferPrice| priceFormat}}</span>
<span :loading="submitLoad" @click="submitForm('personNum')" style="cursor: pointer;;height:32px;background:rgba(238,68,84,1);border-radius:4px;color:#fff;padding:4px 15px">同意以上协议条款,提交订单</span>
</p>
<p>
<span>优惠券</span>
<span style="font-size:20px;font-weight:400;color:rgba(255,255,255,1);margin:0 15px;">{{personNum.DiscountMoney}}</span>
</p>
<p>
<span>实付款</span>
<span style="font-size:20px;font-weight:400;color:rgba(255,255,255,1);margin:0 15px;">{{personNum.CustomerPayMoney}}</span>
</p>
<p class="total" style="margin-top:12px">
<span :loading="submitLoad" @click="submitForm('personNum')" style="cursor: pointer;;height:32px;background:rgba(238,68,84,1);border-radius:4px;color:#fff;padding:4px 15px">
同意以上协议条款,提交订单
</span>
</p>
</div>
......@@ -252,6 +301,11 @@ export default {
EnterID:0,
OrderForm:1,
OrderSource:2,
CustomerPayMoney:0,
DiscountMoney:0,
},
AirTicketId:this.$route.params.id,
ruleForm:{},
......@@ -261,14 +315,147 @@ export default {
customer:{},
countroylist:[],
SellInfoList:[],
price:0,
CouponList:[],
UserCanUseCouponList:[],
CouponIds: '',
SettlementPrice:0,
ActivateCode:'',
}
},
mounted () {
this.GetDes();
this.GetCountroy()
this.SellInfo();
this.getUserCanUseCouponList();
},
methods: {
clickCoupon: function (item) {
let list = [];
if (!item.active) { // 是否选中
if(item.denomination>this.SettlementPrice){
this.Error("该优惠券不满足使用条件!")
return;
}
if (item.overlapUse === 1) { // 1允许叠加使用
this.CouponList.forEach(x=>{
if (x.overlapUse === 1 && x.couponsType === item.couponsType) { // 优惠券列表筛选出允许叠加并且type相同的
list.push(x)
}
})
item.active = !item.active
this.UserCanUseCouponList = list
} else { // 不允许叠加使用
this.CouponList.forEach(x=>{ // 筛选掉其他
if (x.id === item.id) {
list.push(x)
}
})
item.active = !item.active
this.UserCanUseCouponList = list
}
} else {
item.active = !item.active
if (this.UserCanUseCouponList.length===1) { // 取消优惠券选中状态 之前直选择了一个优惠券
this.UserCanUseCouponList = this.CouponList
} else { //... 之前选择了多个优惠券 循环判断是否已全部取消
let num = 0
this.UserCanUseCouponList.forEach(x=>{
if (x.active)
num +=1
})
if (num===0) {
this.CouponList.forEach(x=>{
x.active = false
})
this.UserCanUseCouponList = this.CouponList
}
}
}
if (this.UserCanUseCouponList.length>0) {
let CouponIds = ''
let CouponMoney = 0
let CouponSale = 1
let type = 0
this.UserCanUseCouponList.forEach(x=>{
if (x.active) {
type = x.couponsType
CouponIds = CouponIds + x.id + ','
if (x.couponsType === 1) {
CouponMoney = CouponMoney + x.denomination
} else {
CouponSale = CouponSale * (x.denomination/10)
}
}
})
this.CouponIds = CouponIds
if (type === 1) {
this.SettlementPrice = this.price - CouponMoney
} else if (type === 2) {
this.SettlementPrice = this.price * CouponSale
} else if (type === 0) {
this.SettlementPrice = this.price
}
} else {
this.SettlementPrice = this.price
}
// this.SettlementPrice=parseInt(this.SettlementPrice).toFixed(2);
let allmonney=this.price - this.SettlementPrice;
this.personNum.DiscountMoney = (this.price - this.SettlementPrice).toFixed(2);
this.CouponIds=this.CouponIds.substring(0,this.CouponIds.length-1)
this.personNum.CouponAllotIds=this.CouponIds;
this.personNum.CustomerPayMoney=this.SettlementPrice;
},
filterCoupon() {
let list = [];
this.CouponList.forEach(x=>{
if (this.price>x.useCondition) {
x.active = false
list.push(x);
}
})
this.UserCanUseCouponList = list;
},
// 获取优惠券
getUserCanUseCouponList(){
let msg={
lineId:0,
lineteamId:0,
CouponsUseScope:4,
};
this.apiJavaPost("/api/b2b/user/getUserCanUseCouponList",msg,
res => {
if(res.data.resultCode==1){
this.CouponList=res.data.data;
this.CouponList.forEach(item=>{
item.active=false;
})
this.filterCoupon();
}
},
null
);
},
GetCode(){
this.apiJavaPost('/api/b2b/user/updateUseCouponBycode',{ActivateCode:this.ActivateCode},res=>{
if(res.data.resultCode==1){
this.Success("兑换码激活成功!");
this.getUserCanUseCouponList();
}else{
this.Error("该兑换码无效!");
}
},null)
},
PersonNumChange(){
if(this.personNum.ManNum+this.personNum.ChirdNum+this.personNum.OldPeopleNum>this.getlistSigel.residue){
this.Error("票数不够!");
......@@ -333,6 +520,10 @@ export default {
this.personNum.GuestNum=this.personNum.ManNum+this.personNum.ChirdNum+this.personNum.OldPeopleNum+this.personNum.BabyNum;
this.personNum.seatNum=this.personNum.ManNum+this.personNum.ChirdNum+this.personNum.OldPeopleNum;
this.personNum.PreferPrice=this.personNum.seatNum*this.getlistSigel.scatterB2BPrice;
this.SettlementPrice=this.personNum.PreferPrice;
this.price=this.personNum.PreferPrice;
this.filterCoupon();
this.personNum.GuestList=[];
// 成年
for(let i=0;i<this.personNum.ManNum;i++){
......@@ -411,7 +602,7 @@ export default {
}
this.personnums=false;
},
submitForm(addMsg) {
submitForm() {
let status1=false;
let status2=false;
this.$refs.personNumList.validate((valid) => {
......@@ -502,6 +693,9 @@ export default {
}
</script>
<style>
.FillItinerary .el-textarea__inner{
border-radius: 0px;
}
.FillItinerary .el-input__inner{
border-radius: 0px;
}
......@@ -595,16 +789,13 @@ export default {
}
.tjorder p{
margin: 0;
text-align: right;
}
.total{
position: absolute;
right: 0;
}
.tjorder{
height:80px;
background:rgba(51,51,51,1);
margin: 20px 0;
padding:10px 0;
}
.lxr_info .el-form-item{
display: inline-block;
......
......@@ -24,7 +24,7 @@
<el-dropdown-item @click.native="dropdownText = '定制游'">定制游</el-dropdown-item>
<el-dropdown-item @click.native="dropdownText = '签证', msg.couponsUseScope = 3, getList(), resetPageIndex()">签证</el-dropdown-item>
<el-dropdown-item @click.native="dropdownText = '机票', msg.couponsUseScope = 4, getList(), resetPageIndex()">机票</el-dropdown-item>
<el-dropdown-item @click.native="dropdownText = '酒店'">酒店</el-dropdown-item>
<el-dropdown-item @click.native="dropdownText = '酒店', msg.couponsUseScope = 10, getList(), resetPageIndex()">酒店</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
......
......@@ -60,12 +60,14 @@
</td>
<td class="money">
<p>总额 ¥{{item.TotalPrice | priceFormat}}</p>
<p v-if="item.DiscountMoney">优惠金额 ¥{{item.DiscountMoney | priceFormat}}</p>
</td>
<td class="color333 font-size14">
<span>{{item.OrderStatus}}</span>
</td>
<td style="text-align:center;">
<el-button size="mini"type="danger" v-if="item.OrderStatus!='已取消'" @click="goPay(item)">立即付款</el-button>
<el-button size="mini" type="danger" v-if="item.OrderStatus!='已取消'" @click="goPay(item)">立即付款</el-button>
<el-button style="margin: 10px 0 0 0;" v-if="item.OrderStatus!='已取消'" size="mini" @click="canCelHotel(item.ThirdOrderNo)">取消订单</el-button>
<el-button style="margin: 10px 0 0 0;" size="mini" @click="goDetail(item.OrderID)">详情</el-button>
</td>
......
......@@ -238,6 +238,7 @@
<p>总额 ¥{{item.totalPrice | priceFormat}}</p>
<!-- <p class="__cp pay_no" v-if="!item.payShow" @click="item.payShow = true">已付总额 ¥{{item.totalPrice | priceFormat}} <i class="iconfont icon-xia"></i></p> -->
<p class="__cp pay_no" @click="item.payShow = false">已付总额 ¥{{item.income | priceFormat}}
<p>优惠金额 ¥{{item.discountMoney | priceFormat}}
<!-- <i class="iconfont icon-xia shang"></i> -->
</p>
<!-- :class="{height_aotu: item.payShow}" -->
......
......@@ -106,6 +106,7 @@
<p>总金额:¥{{scope.row.preferPrice | priceFormat}}</p>
<p>实付金额:¥{{scope.row.customerPayMoney | priceFormat}}</p>
<p>退款金额:¥{{scope.row.refund | priceFormat}}</p>
<p v-if="scope.row.discountMoney>0">优惠金额:¥{{scope.row.discountMoney | priceFormat}}</p>
</template>
</el-table-column>
......@@ -329,6 +330,9 @@ export default {
</script>
<style>
.CustomizedList .el-table thead{
color:#666666;
}
.CustomizedList .clearfix li.__cp._active {
color: #E73828;
}
......
......@@ -426,57 +426,19 @@
@current-change="handleCurrentChange"
></el-pagination>
</el-row>
<!-- <div class="content">
<vue-waterfall-easy ref="waterfall" :enablePullDownEvent='enableEvent' :maxCols='3' :imgWidth="385" :imgsArr="dataList" @scrollReachBottom="getDatatype">
<div class="img-info" slot-scope="props">
<div @click="Gourl(props.value)" class="moreItem">
<div class="itemImg">
<div class="noneData">
<img src="../../assets/img/logo_t.png" alt="">
</div>
</div>
<div class="textDiv">
<p class="text2 pfR" style="padding:16px 0">{{props.value.title}}</p>
<p class="text2 f12 c88">
<span v-html="props.value.descriptions"></span>
</p>
<p style="display:flex;align-item:center;justify-content: flex-end;margin-top:10px">
<span class="f12 cee pfR" style="text-decoration: underline">Read More</span>
<img style="margin-left:10px" src="../../assets/img/juan/more.png" alt="">
</p>
</div>
</div>
</div>
</vue-waterfall-easy>
</div> -->
</div>
<div class="nodataDiv" v-if='dataList.length==0' style='width:100%;margin-top:50px;color: #ccc;'>
<div class="moreItem">
<div class="itemImg">
<div class="noneData">
<img src="../../assets/img/logo_t.png" alt="">
</div>
</div>
<div class="textDiv">
<p class="text2 pfR" style="padding:16px 0">暂无数据</p>
<p class="text2 f12 c88">
<span>暂无数据</span>
</p>
<p style="display:flex;align-item:center;justify-content: flex-end;margin-top:10px">
<span class="f12 cee pfR" style="text-decoration: underline">暂无数据</span>
<img style="margin-left:10px" src="../../assets/img/juan/more.png" alt="">
</p>
</div>
<div class="empty-data">
<i class="iconfont icon-kong"></i>
很抱歉,你想要的信息我们真的找不到了
</div>
</div>
</div>
<div class="GreyDiv">
<p class="f30" style="text-align:center">旅行<span style="color:#EE4454"> . 体验师</span></p>
<p class="f20" style="color:#999999;text-align:center">Hot Destinations</p>
<p class="f20" style="color:#999999;text-align:center">Travel Experiencer</p>
<div class="iconDiv" style="margin-top:40px">
<div class="w1200 basefix">
<div class="iconItem">
......
<template>
<div class="SchedProduct" >
<div class="SchedProduct commonF" >
<el-row :gutter="20">
<el-col :span="16" :offset="4">
<div style="margin:15px 0">
......@@ -242,10 +242,61 @@
</el-form>
</div>
<div style="padding:0 15px;background:#fff;border:1px solid #ECECEC;font-size:12px;height:50px;line-height:50px">
<div v-show="step==2" style="background:#fff;margin:20px 0;padding:20px">
<p class="pfR" style="margin-bottom:10px">兑换码</p>
<div>
<el-input size="small" v-model="ActivateCode" placeholder="请输入兑换码" style="width:200px"></el-input>
<el-button @click="GetCode" size="small" style="margin-left:10px">兑换</el-button>
</div>
</div>
<!-- 优惠券 -->
<div class="Yhq" v-show="step==2">
<p class="pfR" style="color:#000000;padding-left:20px">优惠券使用</p>
<ul class="yhqUl">
<li v-for="(item,index) in UserCanUseCouponList" :class="{'blue':item.couponsType===1,'_active':item.active}" :key="index+5000" class="sawtooth">
<span class="kdj">
<span v-if="item.overlapUse==1">可叠加</span>
<span v-else>不可叠加</span>
</span>
<p style="margin-top:10px">
<span v-if="item.couponsType==1"><span>{{item.denomination}}</span></span>
<span v-else>{{item.denomination}}</span>
</p>
<p style="font-size:14px">{{item.useCondition}}使用</p>
<p style="font-size:12px;color:#4C58A4;margin-top:6px">
有效期:{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}
</p>
<div @click="clickCoupon(item)" class="_choice_box">
<span v-if="!item.active"></span>
<span v-else class="iconfont icon-xuanzhong2"></span>
</div>
</li>
<div v-if="UserCanUseCouponList.lenggth==0" class="_no_coupon">
<p>暂无可用优惠券</p>
</div>
</ul>
</div>
<div class="basefix" style="padding:15px;background:#fff;border:1px solid #ECECEC;font-size:12px;">
<span @click="StepStetus(1)" v-show="step==2" style="color:#5893EB;cursor: pointer;">&lt;返回上一步</span>
<span style="float:right">订单金额:¥
<span style="color:#FF680B;font-size:18px;">{{formInline.TotalPrice | priceFormat}}</span>
<span style="float:right">
<div v-show="step==2">
<p>
<span class="Spanwidth">订单金额:</span>
<span style="color:#FF680B;font-size:18px;">{{formInline.TotalPrice | priceFormat}}</span>
</p>
<p>
<span class="Spanwidth">优惠:</span>
<span style="color:#FF680B;font-size:18px;">{{formInline.DiscountMoney}}</span>
</p>
<p>
<span class="Spanwidth pfR">实付款:</span>
<span style="color:#FF680B;font-size:18px;">{{formInline.CustomerPayMoney}}</span>
</p>
</div>
<el-button @click="StepStetus(2)" v-show="step==1" size="small" class="btn_common">下一步</el-button>
<el-button @click="submitForm('formInline')" v-show="step==2" size="small" class="btn_common">去支付</el-button>
</span>
......@@ -264,10 +315,18 @@
<span>基本团费</span>
<span>{{price | priceFormat}}</span>
</li>
<li style="color:#FF680B;font-weight:600">
<li style="color:#FF680B;font-weight:600;border-bottom:1px solid #FFE7AE;">
<span>总额</span>
<span><span style="font-size:18px;">{{formInline.TotalPrice | priceFormat}}</span></span>
</li>
<li style="color:#FF680B;font-weight:600;border-bottom:1px solid #FFE7AE;">
<span>优惠</span>
<span><span style="font-size:18px;">{{formInline.DiscountMoney}}</span></span>
</li>
<li style="color:#FF680B;font-weight:600">
<span>实付款</span>
<span><span style="font-size:18px;">{{SettlementPrice}}</span></span>
</li>
</ul>
</el-col>
</el-row>
......@@ -304,6 +363,8 @@ export default {
},//联系人
GuestList:[],
DiscountMoney:0,
CustomerPayMoney:0,
},
mode:true,
step:1,
......@@ -313,6 +374,13 @@ export default {
provinceList:[],
cityList:[],
price:0,
CouponList:[],
UserCanUseCouponList:[],
CouponIds: '',
SettlementPrice:0,
ActivateCode:'',
}
},
mounted () {
......@@ -332,8 +400,130 @@ export default {
this.InitPersonnum()
}
this.getProvince();
this.getUserCanUseCouponList();
},
methods: {
clickCoupon: function (item) {
let list = [];
if (!item.active) { // 是否选中
if(item.denomination>this.SettlementPrice){
this.Error("该优惠券不满足使用条件!")
return;
}
if (item.overlapUse === 1) { // 1允许叠加使用
this.CouponList.forEach(x=>{
if (x.overlapUse === 1 && x.couponsType === item.couponsType) { // 优惠券列表筛选出允许叠加并且type相同的
list.push(x)
}
})
item.active = !item.active
this.UserCanUseCouponList = list
} else { // 不允许叠加使用
this.CouponList.forEach(x=>{ // 筛选掉其他
if (x.id === item.id) {
list.push(x)
}
})
item.active = !item.active
this.UserCanUseCouponList = list
}
} else {
item.active = !item.active
if (this.UserCanUseCouponList.length===1) { // 取消优惠券选中状态 之前直选择了一个优惠券
this.UserCanUseCouponList = this.CouponList
} else { //... 之前选择了多个优惠券 循环判断是否已全部取消
let num = 0
this.UserCanUseCouponList.forEach(x=>{
if (x.active)
num +=1
})
if (num===0) {
this.CouponList.forEach(x=>{
x.active = false
})
this.UserCanUseCouponList = this.CouponList
}
}
}
if (this.UserCanUseCouponList.length>0) {
let CouponIds = ''
let CouponMoney = 0
let CouponSale = 1
let type = 0
this.UserCanUseCouponList.forEach(x=>{
if (x.active) {
type = x.couponsType
CouponIds = CouponIds + x.id + ','
if (x.couponsType === 1) {
CouponMoney = CouponMoney + x.denomination
} else {
CouponSale = CouponSale * (x.denomination/10)
}
}
})
this.CouponIds = CouponIds
if (type === 1) {
this.SettlementPrice = this.price - CouponMoney
} else if (type === 2) {
this.SettlementPrice = this.price * CouponSale
} else if (type === 0) {
this.SettlementPrice = this.price
}
} else {
this.SettlementPrice = this.price
}
// this.SettlementPrice=parseInt(this.SettlementPrice).toFixed(2);
let allmonney=this.price - this.SettlementPrice;
this.formInline.DiscountMoney = (this.price - this.SettlementPrice).toFixed(2);
this.CouponIds=this.CouponIds.substring(0,this.CouponIds.length-1)
this.formInline.CouponAllotIds=this.CouponIds;
this.formInline.CustomerPayMoney=this.SettlementPrice;
},
filterCoupon() {
let list = []
this.CouponList.forEach(x=>{
if (this.price>x.useCondition) {
x.active = false
list.push(x);
}
})
this.UserCanUseCouponList = list;
},
// 获取优惠券
getUserCanUseCouponList(){
let msg={
lineId:14,
lineteamId:0,
CouponsUseScope:3,
};
this.apiJavaPost("/api/b2b/user/getUserCanUseCouponList",msg,
res => {
if(res.data.resultCode==1){
this.CouponList=res.data.data;
this.CouponList.forEach(item=>{
item.active=false;
})
this.filterCoupon();
}
},
null
);
},
GetCode(){
this.apiJavaPost('/api/b2b/user/updateUseCouponBycode',{ActivateCode:this.ActivateCode},res=>{
if(res.data.resultCode==1){
this.Success("兑换码激活成功!");
this.getUserCanUseCouponList();
}else{
this.Error("该兑换码无效!");
}
},null)
},
setEngName(type,index, name) {
if (type == 1 && name != "") {
this.formInline.GuestList[index].ESurName = this.$languageUtils.ConvertChineseToPinYin(name);
......@@ -343,7 +533,7 @@ export default {
},
submitForm(formName) {
let that=this;
// console.log("formInline",this.formInline)
console.log("formInline",this.formInline)
this.$refs[formName].validate((valid) => {
if (valid) {
// 开具发票
......@@ -394,6 +584,8 @@ export default {
this.price=res.data.data.visaPrice;
let num=this.formInline.AdultPeopleNum+this.formInline.ChildPeopleNum;
this.formInline.TotalPrice= num * this.price;
this.SettlementPrice=this.formInline.TotalPrice;
this.price=this.formInline.TotalPrice;
} else {
this.Error(res.data.message);
......@@ -451,6 +643,11 @@ export default {
}
</script>
<style>
@import '../../assets/css/common.css';
.SchedProduct .Spanwidth{
display: inline-block;
width: 100px;
}
.SchedProduct .double_form{
margin-left: 0!important;
display: inline-block;
......@@ -463,8 +660,9 @@ export default {
font-weight:bold;
}
.SchedProduct .btn_common{
margin-left:30px;border:none;background:#EE4454;color:#fff;
margin-top:10px;
float: right;
border:none;background:#EE4454;color:#fff;
}
.SchedProduct .color_form{
color: #999999;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment