标签：vue return pay skuInfo item 优惠券 products address let
<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>
标签：vue,return,pay,skuInfo,item,优惠券,products,address,let 来源： https://www.cnblogs.com/suanmei/p/11078423.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。