解决乐优商城关于提交购物订单价格渲染的问题

这里说一下乐优商城的提交订单价格渲染问题，关于订单这个模块是乐优商城的最后一个版块，当然有的版本乐优视频是有讲到这个问题的，实现的代码不同，但大体的思想是差不多的。

上图中，我们在订单页面提交跳转到付款页面是没有渲染价格的，仅仅只是渲染了订单号，在跳转链接中携带了订单号。代码如下：

submit(){
ly.verify().then(({data})=>{
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
};
const orderDetail = {orderDetails:this.carts};
Object.assign(this.order,addr,orderDetail,{totalPay:this.totalPrice,
actualPay:this.actualPrice,buyerMessage:null,buyerNick:data.username});
ly.http.post("/order/order",this.order,{
transformResponse:[
function(data,){
return data;
}
],
}).then(({data})=>{
window.location=“http://www.leyou.com/pay.html?orderId=”+data;
console.log(this.actualPrice);
})
}).catch(()=>{
window.location=“http://www.leyou.com/login.html?returnUrl=http://www.leyou.com/cart.html”;
})
}

可以看到跳转链接中携带了订单号（data），控制台输出的是订单价格（console.log(this.actualPrice)）而渲染订单价格（actualPrice）则需要我们传递这个参数到pay.html页面中。
解决方法如下：
当时这个项目在common.js中封装了两个方法，即通过set和get进行传值和取值

store: {
set(key, value) {
localStorage.setItem(key, JSON.stringify(value));
},
get(key) {
return JSON.parse(localStorage.getItem(key));
}
},

在订单页面可以通过ly.store调用set方法将actualPrice传到key中，代码如下：

ly.store.set(“actualPay”,this.actualPrice);

此时我们在支付页面就可以进行接收了，在数据里面进行定义

data:{
ly,
actualPay:0
},

我们在**create（）**方法里面进行接收就好了，渲染价格的添加代码如下

this.actualPay = ly.store.get(“actualPay”);

此时我们就可以在页面进行价格渲染了。

可以看到，我们在支付页面接收价格参数成功以后是可以使用vue-dev-tools 观察到的，并且使用**￥{{ly.formatPrice(actualPay)}}**就可以渲染价格成功。