代码拉取完成，页面将自动刷新
<!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"/>
<link rel="stylesheet" type="text/css" href="./css/orderInfo.css"/>
</head>
<body>
<!--head-->
<div class="top">
<div class="py-container">
<div class="shortcut">
<ul class="fl">
<li class="f-item">黑马欢迎您！</li>
<li class="f-item">请登录 <span><a href="#">免费注册</a></span></li>
</ul>
<ul class="fr">
<li class="f-item">我的订单</li>
<li class="f-item space"></li>
<li class="f-item">我的黑马</li>
<li class="f-item space"></li>
<li class="f-item">黑马会员</li>
<li class="f-item space"></li>
<li class="f-item">企业采购</li>
<li class="f-item space"></li>
<li class="f-item">关注黑马</li>
<li class="f-item space"></li>
<li class="f-item">客户服务</li>
<li class="f-item space"></li>
<li class="f-item">网站导航</li>
</ul>
</div>
</div>
</div>
<div id="app" class="cart py-container">
<!--主内容-->
<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 class="newadd">新增收货地址</a></span></h5>
</div>
<div class="step-cont">
<div class="addressInfo">
<ul class="addr-detail">
<li class="addr-item">
<div v-for="addr in addressList" :key="addr.id" @click="params.addressId = addr.id">
<div :class="{con:true, name:true, selected: addr.id === params.addressId}">
<a href="javascript:;">{{addr.contact}}</a>
</div>
<div class="con address">
{{addr.contact}}{{addr.province}}{{addr.city}}{{addr.town}}{{addr.street}}
<span>{{handleMobile(addr.mobile)}}</span>
<span v-if="addr.isDefault" class="base">默认地址</span>
</div>
<div class="clearfix"></div>
</div>
</li>
</ul>
</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 v-for="(pt, i) in paymentTypes" @click="params.paymentType=i+1"
:class="{selected: i === params.paymentType-1}">
{{pt}} <span v-show="i === params.paymentType-1" 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">
<li class="yui3-u-1-6">
<span><img :src="item.image" width="100" height="100"/></span>
</li>
<li class="yui3-u-7-12">
<div class="desc">{{item.name}}</div>
<div class="seven">
<div v-for="(v,k) in parseJson(item.spec)">
<span style="color: #504f4f">{{k}}</span> : {{v}}
</div>
</div>
</li>
<li class="yui3-u-1-12">
<div> </div>
<div class="price">￥{{util.formatPrice(item.price)}}</div>
</li>
<li class="yui3-u-1-12">
<div style="width: 60px; text-align: right">
<button class="num-btn" @click="incNum">+</button>
<div class="num">
<span>×</span> <input style="width: 22px" type="text" v-model="params.num">
</div>
<button class="num-btn" @click="decNum">-</button>
</div>
</li>
<li class="yui3-u-1-12">
<div class="exit">有货</div>
</li>
</ul>
</div>
</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<div class="order-summary">
<div class="static fr">
<div class="list">
<span><i class="number">1</i>件商品，总商品金额</span>
<em class="allprice">¥{{totalPrice}}</em>
</div>
<div class="list">
<span>优惠券：</span>
<em class="money">0.00</em>
</div>
<div class="list">
<span>运费：</span>
<em class="transport">0.00</em>
</div>
</div>
</div>
<div class="clearfix trade">
<div class="fc-price">应付金额: <span class="price">¥{{totalPrice}}</span></div>
<div class="fc-receiverInfo">寄送至: {{address}}</div>
</div>
<div class="submit">
<a class="sui-btn btn-danger btn-xlarge" href="javascript:void(0)" @click="toPay">提交订单</a>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="js/common.js"></script>
<script>
let app = new Vue({
el: "#app",
data() {
return {
util,
paymentTypes: ["支付宝支付", "微信支付", "扣减余额"],
addressList: [ // 地址列表
{ "id": 61, "userId": 2, "contact": "李佳星", "mobile": "13301212233", "province": "上海", "city": "上海", "town": "浦东新区", "street": "航头镇航头路", "isDefault": true}, {"id": 63, "userId": 2, "contact": "李小龙", "mobile": "13301212233", "province": "广东", "city": "佛山", "town": "永春", "street": "永春武馆", "isDefault": false}
],
item: {}, // 商品信息
params: {
num: 1, // 商品购买数量
paymentType: 3, // 支付方式
addressId: 61, // 收货地址的id
itemId: 0, // 商品id
},
}
},
created() {
// 查询商品
this.getItem();
// 根据userId查询地址，这里userId写死为 2
this.getAddress(2);
},
methods: {
getItem() {
// 获取url路径中的id
let itemId = this.util.getUrlParam("id");
// 根据id查询商品
axios.get("/item/" + itemId)
.then(resp => {
this.item = resp.data
this.params.itemId = resp.data.id;
})
.catch(err => console.log("err"))
},
getAddress(userId) {
// 根据用户id查询地址列表
axios.get("/address/uid/" + userId)
.then(resp => this.addressList = resp.data)
.catch(err => console.log("err"))
},
toPay() {
// 发送ajax请求到微服务执行：下单、扣库存
axios.post("/order", this.params)
.then(resp => {
// 获取订单id
let orderId = resp.data;
// 跳转到支付页面
location.href = "/pay.html?id=" + orderId
})
.catch(err => {
alert("下单失败，请重试！")
console.log(err)
});
},
handleMobile(mobile) {
return mobile.substring(0, 4) + "****" + mobile.substring(8, 11)
},
incNum() {
if (this.params.num < this.item.stock) {
this.params.num++
}
},
decNum() {
if (this.params.num > 1) {
this.params.num--
}
},
parseJson(str) {
if (!str) {
return "";
}
return JSON.parse(str);
}
},
computed:{
address(){
const address = this.addressList.find(addr => addr.id === this.params.addressId);
return address.province + address.city
+ address.town + address.street + " 收件人："
+ address.contact + " " + this.handleMobile(address.mobile);
},
totalPrice(){
return util.formatPrice(this.item.price * this.params.num);
}
}
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手