<template>
<div id="pay" class="has-top">
<template v-if="listExist===1">
<router-link :to="{path: '/address/select'}" class="address-selector" tag="div">
<div class="address-item single has-follow" v-if="address">
<div class="base-info">
<div class="contact">收货人：{{address.contact}}</div>
<div class="phone">{{address.phone}}</div>
</div>
<div class="detail">收货地址：{{address.provinceName + address.cityName + address.districtName + address.detail}}</div>
</div>
<div class="address-placeholder has-follow color-red" v-else>请选择收货地址</div>
</router-link>
<div class="identity-card mt10 bordre-top-bottom" v-if="address && isGlobalBuy">
<template v-if="!isEditMode">
<input class="input" maxlength="18" type="text" placeholder="因海关清关需要，请填写收货人的身份证号" v-model="identityCard" />
<div class="btn-clear" v-if="identityCard" @click="identityCard=''"></div>
<div class="btn-save" @click="saveIdentityCard()">保存</div>
</template>
<div class="cell-line" v-else>
<div class="label">身份证号</div>
<div class="value">{{address.identityCard|maskIdCard}}</div>
<div class="icon-edit" @click.stop="isEditMode = true"></div>
</div>
</div>
<div class="order-store mt10" v-for="store in list" :key="store.storeId">
<!--<div class="order-store-header">{{store.storeName}}</div>-->
<div class="order-store-body">
<div class="cart-item-box" v-for="item in store.skuProductList" :key="item.skuId">
<div class="cart-item">
<!-- <div class="discount" v-if="item.discountStatus"></div> -->
<v-image :src="item.thumbUrl" class="thumb" />
<div class="item-detail">
<div class="title">{{item.skuName}}</div>
<div class="desc">{{item.property||item.properties}}</div>
<div class="price" v-if="isGroup">{{item.groupSkuInfo.groupPrice | currency}}<span class="amount">× {{item.quantity}}</span></div>
<div class="price" v-else>
<!-- <template v-if="item.flashSaleFlag==1">¥{{item.flashSaleSkuDTO.activityPrice | currency}}</template> -->
<template>¥{{item.retailPrice | currency}}</template>
<span class="amount">× {{item.quantity}}</span>
</div>
<!-- <div class="price" v-else>{{item.marketPrice | currency}}<span class="amount">× {{item.quantity}}</span></div> --></div>
</div>
<div class="cell-line">
<div class="label"></div>
<div class="value">小计：
<!-- <span class="color-red" v-if="item.flashSaleFlag==1">¥{{item.flashSaleSkuDTO.activityPrice*item.quantity | currency}}</span> -->
<span class="color-red">¥{{item.retailPrice*item.quantity | currency}}</span>
</div>
</div>
<!-- <div class="gift-box" v-if="item.presents.length > 0"> -->
<div class="gift-box">
<div class="label">赠品</div>
<div class="gift-list">
<div class="gift-item" v-for="present in item.presents" :key="present.skuId">
<div class="title">{{present.skuName}}</div>
<div class="amount">× {{present.quantity}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="order-store-footer">
</div>
</div>
<div class="pay-section">
<div class="cell-line">
<div class="label">买家留言：</div>
<div class="value flex999">
<textarea class="mint-field-core remark" placeholder="选填，给商家的留言（50字以内）" v-model="remark" maxlength="50" id="buyer-message"></textarea>
</div>
</div>
</div>
<div class="pay-section">
<div class="cell-line">
<div class="label">运费</div>
<template v-if="address">
<div class="value color-red" v-if="freight>0">{{freight | currency}}</div>
<div class="value" v-else>包邮</div>
</template>
<div class="value color-gray" v-else>运费根据收货地址计算</div>
</div>
<div class="cell-line">
<div class="label">会员折扣</div>
<!-- <div class="value color-red" v-if="discountTotal > 0">¥{{-discountTotal|currency}}</div> -->
<div class="value color-gray">无会员折扣</div>
</div>
<div @click="selectCoupon()" class="cell-line has-follow">
<div class="label">优惠券</div>ii
<div v-if="couponlist.length">
<div class="value color-red" v-if="currentCoup.reducedPrice">-¥{{currentCoup.reducedPrice | currency}}</div>
<div class="value color-red" v-else>请选择优惠券</div>
</div>
<div v-else>''
<div class="value color-red">无可用优惠券</div>
</div>
<!-- <div class="value gray" :class="{'color-red': hasCoupon, 'color-gray': isGroup}" v-if="!coupon || (coupon && !coupon.couponId)">{{couponText}}</div>
<div class="value color-red" v-else>{{-coupon.cost | currency}}</div> -->
</div>
<div class="payway">
<div class="title">选择支付方式</div>
<div class="payway-list">
<div class="item" v-for="item in payways" :key="item.id" @click.stop="selectPayWay(item)" v-show="(item.id==='wepay')">
<img :src="item.icon" class="icon">
<div class="name">{{item.name}}</div>
<div class="selector" :class="{'selected':item.id === payway.id}" ></div>
</div>
</div>
</div>
</div>
<div class="bottom pay-bottom">
<div class="content"> 合计：<span class="color-red">¥{{total| currency}}</span> </div>
<div class="btn" :class="{'disabled': products.length === 0}" @click="payNow()">确认付款</div>
</div>
<mt-popup
v-model="popup"
position="bottom">
<div class="w1125">
<h2>优惠券
<img @click="closeCoup()" src="../../assets/images/coupon/coupon_close.png" alt="" srcset="">
</h2>
<p>金额门槛仅为商品总价，不含运费哦</p>
<div class="coupon-list">
<ul>
<li :class="item.btmFlag ? 'active' : ''" v-for="(item,index) in couponlist" v-bind:key="index">
<div class="top">
<div class="leftBox">
<p class="price">
<span>{{item.reducedPrice | currency}}</span>
<b>元</b>
</p>
<div class="range">
{{item.conditions == 0 ? '无门槛' : `满¥${item.conditions/100}使用`}}
</div>
</div>
<div class="rightArea">
<h2>{{item.title}}</h2>
<div class="tips">
<ul>
<li>{{item.label}}</li>
</ul>
</div>
<p @click="changeCoupon(item.btmFlag,item)">
<span class="icon" v-if="item.btmFlag"><img src="../../assets/images/coupon/icon1.png" alt="" srcset=""></span>
<span class="icon" v-else><img src="../../assets/images/coupon/icon2.png" alt="" srcset=""></span>
有效期至{{item.endDate}}
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</mt-popup>
<div class="pay-shadow" v-show="confirmFlag || tipsFlag" @click="closeAll"></div>
<div class="pay-confirm" v-show="confirmFlag">
<div class="title">
购买跨境商品需实名认证
</div>
<p class="tip" @click="tipsShow">海关要求?</p>
<ul>
<li> <span>姓名</span> <input type="text" placeholder="请输入收货人姓名"></li>
<li> <span>身份证号</span> <input type="text" placeholder="请输入身份证号"></li>
</ul>
<p class="notice">*请填写收货人的真是姓名和身份证号</p>
<div class="btn">提交验证</div>
</div>
<div class="pay-tips" v-show="tipsFlag">
<div class="title">
为什么需要实名认证?
</div>
<ol>
<li>根据海关要求，购买跨境商品需对订购人进行实名认证。</li>
<li>错误的实名信息可能导致无法正常清关，即：无法收到购买的商品。</li>
<li>如您的跨境购个人额度超限，可能导致订单被退回，我们将为您取消订单。</li>
<li>您的身份信息将被加密保管，店多多保证信息安全，绝不对外泄露！</li>
<li>任何身份认证问题可随时联系店多多客服。</li>
</ol>
<div class="btn" @click="know">知道了</div>
</div>
</template>
</div>
</template>
<script type="text/javascript">
import Config from '@/config'
import AddressService from '@/services/AddressService'
import CartService from '@/services/CartService'
import CouponService from '@/services/CouponService'
import FreightService from '@/services/FreightService'
import OrderService from '@/services/OrderService'
import PayService from '@/services/PayService'
import ProductService from '@/services/ProductService'
import UserService from '@/services/UserService'
import PayFactory from '@/pay/PayFactory'
import axios from 'axios'
import qs from 'qs'
// import CouponService from '../../services/CouponService.js';
export default {
data() {
return {
payways: [],
freight: 0,
list: [],
listExist:'',
products: [],
defaultAddress: undefined,
coupon: undefined,
address: undefined,
remark: '',
userProfit: {},
hasCoupon: false,
userInfo: {},
discountLevel: -1,
identityCard: '',
isEditMode: true,
isGroup: false,
hasPassword: false,
orderCode: '',
productType:0,
confirmFlag: false,
tipsFlag: false,
popup: false,
couponlist: [],
currentCoup: {}
}
},
computed: {
//海关
isGlobalBuy() {
return this.list.filter((store) => {
return store.skuProductList.filter(item => item.isCross === 1).length > 0
}).length > 0
},
// 原始产品总价格
orginalProductTotal() {
let sum = 0;
this.list.forEach((store) => {
store.skuProductList.forEach(item => {
console.log(this.isGroup);
//let price = this.isGroup ? item.groupSkuInfo.groupPrice : item.currentVipTypePrice
let price = this.isGroup ? item.groupSkuInfo.groupPrice : item.retailPrice
if (item.productType === 3) {
price = item.retailPrice;
}
console.log(price);
sum += price * item.quantity;
});
});
return sum;
},
storeTotal(){
let sum = 0;
this.list.forEach((store) => {
store.skuProductList.forEach(item => {
//let price = this.isGroup ? item.groupSkuInfo.groupPrice : item.currentVipTypePrice
let price = this.isGroup ? item.groupSkuInfo.groupPrice : item.retailPrice
if (item.productType === 3) {
price = item.retailPrice;
}
// if(item.flashSaleFlag==1){//代表限时抢购得商品
// price=item.flashSaleSkuDTO.activityPrice;
// }
sum += price * item.quantity;
});
});
return sum;
},
//产品总价格
orginalTotal() {
let sum = this.orginalProductTotal;
// if (this.coupon && this.coupon.couponId) {
// sum -= this.coupon.cost;
// }
if (this.currentCoup && this.currentCoup.reducedPrice) {
sum -= this.currentCoup.reducedPrice;
}
return (sum >= 0) ? sum : 0;
},
//产品合计（产品总价+运费）
total() {
return this.orginalTotal + parseFloat(this.freight)
},
//优惠券
couponText() {
if (this.isGroup) {
return '无可用优惠券';
}
return this.hasCoupon ? '有可用优惠券' : '无可用优惠券';
},
//折扣总价
discountTotal (){
let sum = 0;
this.list.forEach((store) => {
store.skuProductList.forEach(item => {
let currentPrice = item.productType == 3 ? item.retailPrice : item.currentVipTypePrice
sum += (item.retailPrice - currentPrice) * item.quantity
// if(item.flashSaleFlag==1){
// let currentPrice = item.currentVipTypePrice
// sum += (item.flashSaleSkuDTO.activityPrice - currentPrice) * item.quantity
// }else{
// let currentPrice = item.productType == 3 ? item.retailPrice : item.currentVipTypePrice
// sum += (item.retailPrice - currentPrice) * item.quantity
// }
})
});
return sum;
}
},
methods: {
/**
*@desc 获取支付方式
*@author zwn
*@date 2018/10/12
*/
getPayTypeList() {
PayService.getPayWays(this, this.userProfit.availableMoney, (payways) => {
this.payways = payways;
if (this.payways.length > 0) {
this.payway = this.payways[0]
}
});
},
onBack() {
this.$destroy();
this.$router.back()
},
/**
*@desc 获取优惠券
*@author zwn
*@date 2018/10/12
*/
getCouponForOrder(products) {
if (!products) {
products = []
}
CouponService.getCouponsForOrder(this, products, (list) => {
this.hasCoupon = list.length > 0
})
},
selectPayWay(item) {
this.payway = item;
this.payway.id=item.id;
this.$set(this.payway,0,item);
},
/**
*@desc 获所有取商品列表信息
*@author zwn
*@date 2018/10/11
*/
getListBySkuIds(skuIds) {
this.products = [];
CartService.getListBySkuIds(this, skuIds, (list) => {
this.list = list;
(this.list.length>0)? this.listExist=1:this.listExist=0;
this.list.forEach(store => {
store.skuProductList.forEach(item => {
let activityType=1;//默认无活动
if(item.flashSaleFlag==0){
activityType=1
}else{
activityType=2
}
this.products.push({ skuId: item.skuId, quantity: item.quantity ,activityType:activityType,flashSaleId:item.flashSaleId});
});
});
this.checkIfHasCoupon(this.products);
})
},
/**
*@desc 获单个取商品列表信息
*@author zwn
*@date 2018/10/11
*/
getListBySkuId(skuId, amount) {
var that=this;
ProductService.getSkuById(this, skuId, (skuInfo) => {
ProductService.getProductInfoById(this, skuInfo.productId, (product) => {
skuInfo.quantity = amount;
skuInfo.productType = product.type;
this.$set(skuInfo, 'flashSaleSkuDTO', {})
this.$set(skuInfo.flashSaleSkuDTO, 'activityPrice', skuInfo.flashSaleSku.activityPrice)
this.productType=product.type
// var nowPrice=skuInfo.retailPrice
// if(skuInfo.flashSaleFlag==1){
// nowPrice=skuInfo.flashSaleSku.activityPrice
// }
let store = {
storeId: skuInfo.storeId,
skuName: skuInfo.storeName,
total: skuInfo.retailPrice * skuInfo.quantity,
//total: nowPrice * skuInfo.quantity,
hasCoupon: skuInfo.hasCoupon,//优惠券
skuProductList: [skuInfo]
};
if (this.isGroup) {
store.total = skuInfo.groupSkuInfo.groupPrice * skuInfo.quantity;
} else {
store.total = (skuInfo.productType == 3 ? skuInfo.retailPrice : skuInfo.currentVipTypePrice) * skuInfo.quantity
//store.total = (skuInfo.productType == 3 ? nowPrice : skuInfo.currentVipTypePrice) * skuInfo.quantity
}
that.list.push(store);
if(that.list.length >0){
this.listExist=1
}else{
that.listExist=0;
}
var activityType=1;//默认是无活动
if(product.flashSaleFlag==0){
activityType=1
}else{
activityType=2
}
this.products = [{ skuId: skuInfo.skuId, quantity: amount,activityType:activityType,flashSaleId:product.flashSaleDetail.flashSaleId}];
this.getCoupon()
})
})
},
checkIfHasCoupon(products) {
// OrderService.setProducts(this, products, () => {
// this.getCouponForOrder(products)
// })
},
/**
*@desc 获取运费
*@author zwn
*@date 2018/10/12
*/
getFreight() {
if (this.address && this.list.length > 0) {
if (this.address.identityCard) {
this.identityCard = this.address.identityCard;
}
FreightService.calculate(this, this.address.addressId, this.products, Number(this.isGroup), (res) => {
if(res.freight){
this.freight =res.freight===0?1:res.freight;
}
})
}
},
closeAll() {
this.confirmFlag = false
this.tipsFlag = false
},
know() {
this.tipsFlag = false
},
tipsShow() {
this.tipsFlag = true
},
payNow() {
if (!this.address) {
this.showError('请选择收货地址');
return
}
if (this.products.length === 0) {
this.showError('没有要购买的产品');
return
}
if (this.isGlobalBuy && (!this.identityCard || this.isEditMode)) {
this.showError('请先填写并保存收件人的身份证信息');
return
}
// 零钱包支付
if (this.payway.id === 'balance') {
this.checkPassword();
if (!this.hasPassword) {
return false
}
if (!this.userInfo.phone) {
this.showError('零钱包支付必须绑定手机号');
return
}
if (this.total > this.userProfit.availableMoney) {
this.showError('零钱不足');
return
}
}
// // 全球购逻辑代码
// if (1==1) {
// this.confirmFlag = true
// return
// }
if (this.isGroup) {
this.mkGroupOrder();
} else {
this.mkOrder();
}
},
checkPassword() {
if (!this.hasPassword) {
let toast = Config.toast.find(item => item.id === 'noLogin')
this.showConfirms(toast.title, toast.message, () => {
this.$router.push({
path: '/find-password',
query: {
redirect: location.pathname + location.search,
set: true
}
})
}, null, '去设置', '取消');
return
}
},
mkGroupOrder() {
let params = {
addressId: this.address.addressId,
products: this.products,
remark: this.remark || '',
couponId: this.coupon ? this.coupon.couponId : '',
score: 0
};
params.groupCode = this.$route.query.groupCode || '';
let productType=this.productType;
OrderService.addGroupOrder(this, params, (res) => {
if (res.orderId) {
this.orderCode = res.orderCode;
PayFactory.pay(this, this.payway, 'pay.normal', this.orderCode, this.total,productType);
}
})
},
//创建订单
mkOrder() {
let params = {
addressId: this.address.addressId,
products: this.products,
orderFrom: 3,
remark: this.remark || '',
couponId: this.coupon ? this.coupon.couponId : '',
score: 0,
};
if(this.$route.query.skuIds){
params.fromCart=1;
}else{
params.fromCart=0;
}
let productType=this.productType;
OrderService.createOrder(this, params,(orderInfo) => {
this.orderCode = orderInfo.orderCode;
PayFactory.pay(this, this.payway, 'pay.normal', this.orderCode, this.total,productType);
});
},
buildParams() {
return {
addressId: this.address.addressId,
products: this.products,
remark: this.remark || '',
couponId: this.coupon ? this.coupon.couponId : '',
score: 0
}
},
init() {
//购物车结算支付
if (this.$route.params.from === 'cart') {
let skuIds = this.$route.query.skuIds;
if (skuIds) {
this.getListBySkuIds(skuIds);
} else {
this.showError('没有要购买的产品')
}
} else {
//商品详情结算支付
if (this.$route.query.skuId) {
this.skuId=this.$route.query.skuId;
this.getListBySkuId(this.$route.query.skuId,this.$route.query.amount)
} else {
this.showError('没有要购买的产品');
}
}
},
/**
*@desc 优惠券
*@author zwn
*@date 2018/10/12
*/
getCoupon() {
CouponService.getUseableList(this,sessionStorage.getItem('memberId'),this.products, data => {
console.log(data);
if (data.data.length) {
for (let i = 0; i < data.data.length; i++) {
this.$set(data.data[i],'btmFlag',false)
}
this.couponlist = data.data;
}
});
},
closeCoup() {
this.popup = false
},
selectCoupon() {
this.popup = true
// if (this.isGroup) {
// return 0
// }else{
// CouponService.getUseableList(this,sessionStorage.getItem('memberId'),this.products, data => {
// console.log(data);
// if (data.data.length) {
// for (let i = 0; i < data.data.length; i++) {
// this.$set(data.data[i],'btmFlag',false)
// }
// this.couponlist = data.data;
// this.popup = true
// }else {
// this.couponlist = {};
// }
// });
// // this.$router.push({ path: '/coupon/select' });
// // OrderService.setProducts(this, this.products, () => {
// // this.$router.push({ path: '/coupon/select' })
// // })
// }
},
changeCoupon(flag,item) {
this.couponlist.forEach((i,v)=> {
i.btmFlag = false
})
this.$set(item,'btmFlag',!flag)
if (flag) {
this.currentCoup = {}
}else {
this.currentCoup = item
}
// this.popup = false
},
/**
*@desc 保存身份证号
*@author zwn
*@date 2018/10/12
*/
saveIdentityCard() {
if (!this.identityCard) {
this.showError('请输入身份证号');
return
}
AddressService.saveIdentityCard(this, this.address.addressId, this.identityCard, () => {
this.showMessage('保存成功');
this.address.identityCard = this.identityCard;
this.isEditMode = false;
})
},
loadAddress() {
/**
*@desc 获取默认地址
*@author sky
*@date 2018/10/12
*/
AddressService.getDefault(this, (address) => {
this.address = address;
this.address = address.addressId ? address : undefined;
this.isEditMode = this.address ? !this.address.identityCard : true;
},error => {});
}
},
watch: {
'address': 'getFreight',
'list': 'getFreight'
},
created() {
this.getPayTypeList();
this.$root.$on('user.info.update', (userInfo) => {
this.userInfo = userInfo;
});
this.$root.$on('user.profit.update', (userProfit) => {
this.userProfit = userProfit;
this.getPayTypeList();
});
this.$root.$on('pay.normal', (status, message) => {
this.$destroy();
this.$router.replace({ path: `/order/detail/${this.orderCode}`})
});
UserService.checkLogin(this, () => {
UserService.getProfit(this,(userProfit)=>{
this.userProfit = userProfit;
});
});
this.address=JSON.parse(sessionStorage.getItem("selectAddress"));
if(!sessionStorage.getItem("selectAddress")){
this.loadAddress();//获取默认收货地址
}
},
activated() {
UserService.checkPassword(this, (res) => {
if (res.code === 1) {
this.hasPassword = true
}
});
if (this.$route.query.action && this.$route.query.action.indexOf('group-buy') > -1) {
this.isGroup = true;
}
CouponService.getSelectedCoupon(this, (coupon) => this.coupon = coupon);
},
mounted() {
this.init();
}
}
</script>