代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>乐优商城--结算页</title>
<link rel="stylesheet" type="text/css" href="css/webbase.css"/>
<link rel="stylesheet" type="text/css" href="css/pages-getOrderInfo.css"/>
</head>
<body>
<!--head-->
<div id="orderInfoApp">
<div class="top">
<shortcut/>
</div>
<div class="cart py-container">
<!--logoArea-->
<div class="logoArea">
<div class="fl logo"><span class="title">结算页</span></div>
</div>
<!--主内容-->
<div class="checkout py-container">
<div class="checkout-tit">
<h4 class="tit-txt">填写并核对订单信息</h4>
</div>
<div class="checkout-steps">
<!--收件人信息-->
<div class="step-tit">
<h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd">新增收货地址</a></span>
</h5>
</div>
<div class="step-cont">
<div class="addressInfo">
<ul class="addr-detail">
<li class="addr-item" v-for="(a,i) in addresses" :key="i">
<div>
<div :class="{con:true,name:true,selected:i === selectedAddress}">
<a href="javascript:;" @click.stop="selectedAddress=i">
{{a.name}}<span title="点击取消选择"></span>
</a>
</div>
<div class="con address">{{a.state + a.city + a.district + a.address}} <span>{{a.phone}}</span>
<span class="base" v-if="a.defaultAddress">默认地址</span>
<span class="edittext">
<a data-toggle="modal" @click="editAddress(a.id)" data-target=".edit"
data-keyboard="false">编辑</a>
<a href="javascript:;" @click="deleteAddress(a.id)">删除</a>
</span>
</div>
<div class="clearfix"></div>
</div>
</li>
</ul>
<!--添加地址-->
<div tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">
×
</button>
<h4 id="myModalLabel" class="modal-title">添加收货地址</h4>
</div>
<div class="modal-body">
<form action="" class="sui-form form-horizontal">
<div class="control-group">
<label class="control-label">收货人：</label>
<div class="controls">
<input type="text" class="input-medium">
</div>
</div>
<div class="control-group">
<label class="control-label">详细地址：</label>
<div class="controls">
<input type="text" class="input-large">
</div>
</div>
<div class="control-group">
<label class="control-label">联系电话：</label>
<div class="controls">
<input type="text" class="input-medium">
</div>
</div>
<div class="control-group">
<label class="control-label">邮箱：</label>
<div class="controls">
<input type="text" class="input-medium">
</div>
</div>
<div class="control-group">
<label class="control-label">地址别名：</label>
<div class="controls">
<input type="text" class="input-medium">
</div>
<div class="othername">
建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a> <a href="#"
class="sui-btn btn-default">父母家</a> <a
href="#" class="sui-btn btn-default">公司</a>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-ok="modal" class="sui-btn btn-primary btn-large">确定
</button>
<button type="button" data-dismiss="modal"
class="sui-btn btn-default btn-large">取消
</button>
</div>
</div>
</div>
</div>
<!--确认地址-->
</div>
<div class="hr"></div>
</div>
<div class="hr"></div>
<!--支付和送货-->
<div class="payshipInfo">
<div class="step-tit">
<h5>支付方式</h5>
</div>
<div class="step-cont">
<ul class="payType">
<li :class="{selected: order.paymentType == 1}" @click="order.paymentType=1">
微信付款<span title="点击取消选择"></span>
</li>
<li :class="{selected: order.paymentType == 2}" @click="order.paymentType=2">
货到付款<span title="点击取消选择"></span>
</li>
</ul>
</div>
<div class="hr"></div>
<div class="step-tit">
<h5>送货清单</h5>
</div>
<div class="step-cont">
<ul class="send-detail">
<li>
<div class="sendGoods">
<ul class="yui3-g" v-for="cart in carts" :key="cart.skuId">
<li class="yui3-u-1-6">
<span><img width="70px" height="70px" :src="cart.image"/></span>
</li>
<li class="yui3-u-7-12">
<div class="desc">{{cart.title}}</div>
<div class="seven">7天无理由退货</div>
</li>
<li class="yui3-u-1-12">
<div class="price">￥{{ly.formatPrice(cart.price)}}</div>
</li>
<li class="yui3-u-1-12">
<div class="num">X{{cart.num}}</div>
</li>
<li class="yui3-u-1-12">
<div class="exit">有货</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="hr"></div>
</div>
<div class="linkInfo">
<div class="step-tit">
<h5>发票信息</h5>
</div>
<div class="step-cont">
<span>普通发票（电子）</span>
<span>个人</span>
<span>明细</span>
</div>
</div>
<div class="cardInfo">
<div class="step-tit">
<h5>使用优惠/抵用</h5>
</div>
</div>
</div>
</div>
<div class="order-summary">
<div class="static fr">
<div class="list">
<span><i class="number">{{totalNum}}</i>件商品，总商品金额</span>
<em class="allprice">¥{{ly.formatPrice(totalPrice)}}</em>
</div>
<div class="list">
<span>返现：</span>
<em class="money">{{ly.formatPrice(fanxian)}}</em>
</div>
<div class="list">
<span>运费：</span>
<em class="transport">{{ly.formatPrice(this.order.postFee)}}</em>
</div>
</div>
</div>
<div class="clearfix trade">
<div class="fc-price">应付金额: <span class="price">¥{{ly.formatPrice(actualPay)}}</span></div>
<div class="fc-receiverInfo">
寄送至:{{addresses[selectedAddress].address}}
收货人：{{addresses[selectedAddress].name}} {{addresses[selectedAddress].phone}}
</div>
</div>
<div class="submit">
<a class="sui-btn btn-danger btn-xlarge" href="javascript:void(0)" @click="submit()">提交订单</a>
</div>
</div>
</div>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
var orderInfoVm = new Vue({
el: "#orderInfoApp",
data: {
ly,
addresses: [ // 可选地址列表,假数据，需要从后台查询
{
name: "锋哥",// 收件人姓名
phone: "15800000000",// 电话
state: "上海",// 省份
city: "上海",// 城市
district: "浦东新区",// 区
address: "航头镇航头路18号传智播客 3号楼",// 街道地址
zipCode: "210000", // 邮编
default: true
},
{
name: "张三",// 收件人姓名
phone: "13600000000",// 电话
state: "北京",// 省份
city: "北京",// 城市
district: "朝阳区",// 区
address: "天堂路 3号楼",// 街道地址
zipCode: "100000", // 邮编
default: false
}
],
selectedAddress: 0, // 选中的快递地址下标
order: {
paymentType: 1, // 付款方式，默认为：1-微信支付
postFee: 1000, // 邮费
},
carts: [], // 购物车数据
fanxian: 5000, // 返现
},
methods: {
// 提交订单
submit() {
// 判断是否登录
ly.verifyUser().then(({data}) => {
// 已登录
// 把购物车数据处理成订单详情
const orderDetails = this.carts.map(({userId, ...rest}) => rest);
// 处理物流信息
const address = this.addresses[this.selectedAddress];
let addr = {
receiver: address.name,
receiverMobile: address.phone,
receiverState: address.state,
receiverCity: address.city,
receiverDistrict: address.district,
receiverAddress: address.address,
receiverZip: address.zipCode,
invoiceType: 0,
sourceType: 2
};
// 复制到订单对象
Object.assign(this.order, addr,
{
orderDetails,
totalPay: this.totalPrice,
actualPay: this.actualPay,
buyerNick: data.username
}
);
// 提交订单
ly.http.post("/order", this.order,
{
transformResponse: [ // 对响应进行处理的回调
function (data) {
// 不对data做任何处理，直接返回
return data;
}
]
}
)
.then(({data}) => {
// 在线支付，需要到付款页
window.location = "http://www.leyou.com/pay.html?orderId=" + data;
}).catch((resp) => {
alert("订单提交失败，可能是缺货!")
});
}).catch(() => {
// 未登录
window.location.href = "http://www.leyou.com/login.html?returnUrl=" + window.location.href;
})
}
},
created() {
// 判断是否登录
ly.verifyUser().then(() => {
// 已登录
// 保存已选购物车记录放到localStorage
this.carts = ly.store.get("LY_SELECTED");
}).catch(() => {
// 未登录
window.location.href = "http://www.leyou.com/login.html?returnUrl=" + window.location.href;
})
},
computed: {
// 总件数
totalNum() {
return this.carts.reduce((c1, c2) => c1 + c2.num, 0);
},
// 总价格
totalPrice() {
return this.carts.reduce((c1, c2) => c1 + c2.num * c2.price, 0);
},
// 应付金额 = 商品总金额 + 运费 - 返现
actualPay() {
return this.totalPrice + this.order.postFee - this.fanxian;
}
},
components: {
shortcut: () => import("/js/pages/shortcut.js")
}
})
;
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/pages/getOrderInfo.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手