Mall - single - page order settlement

2. order settlement page

2.1 page jump

In the bottom of the shopping cart page, there is a button to the settlement:

When clicking settlement, we should jump to the page order settlement, namely:getOrderInfo.html

View shopping cart 结算button:

You can see, the address is correct. But users can only log on to the settlement payment, so we can not jump directly, but in the jump before the user's login status check, if found to be logged in, should be redirected to the login page!

We bind the click event to the button:

Event judgment login state, the page jump:

toOrderInfo() {
    // 判断是否登录
    ly.verifyUser().then(() => {
        // 已登录
        window.location.href = "/getOrderInfo.html"
    }).catch(() => {
        // 未登录
        window.location.href = "/login.html?returnUrl=" + window.location.href;
    })
}

After logging tests:

Page content to be rendered here mainly includes three parts:

• recipient information
• payment method
• Product information

2.2. Consignee information (job)

Here consignee information must be currently logged on user's shipping address. So it is necessary according to the current logged-on user to query, now we are writing false data in the page:

In the background we can offer additions and deletions to change search address of the interface, and then query the current logged-on user when the page is loaded, you can then assign addresses.

2.3. Payment

There are two ways to pay:

• Micro-channel pay
• Cash on delivery

Order data in our paymentTypeassociation:

So we can define a property in Vue instance to record the payment:

This variable is then associated with the page rendering:

2.4. Product List

Renderings:

Here's a list of delivery, in fact, the user selects a shopping cart to the payment of goods

Therefore, we need to jump over the car while shopping, carry information to select the shopping cart

2.4.1. Cart access to information

We modify cart.htmlthe page jump logic, the user selects the cart transmission of information over:

Then createdget the hook function in the shopping cart data, save it to a local property, pay attention to is that we should get the check data before the user logged in, if found not logged in, directly redirected to the login page:

Then reload the page to see the console:

2.4.2. Page rendering

To modify the page location: Every piece of merchandise is a li

We amended as follows:

<ul class="send-detail">
    <li v-for="(cart,index) in carts" :key="index">
        <div class="sendGoods">
            <ul class="yui3-g">
                <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">
                        <span v-for="(v) in JSON.parse(cart.ownSpec)">{{v + "  "}} </span>
                    </div>
                </li>
                <li class="yui3-u-1-12">
                    <div class="price">￥{{ly.formatPrice(cart.price * cart.num)}}</div>
                </li>
                <li class="yui3-u-1-12">
                    <div class="num">{{cart.num}}</div>
                </li>
                <li class="yui3-u-1-12">
                    <div class="exit">有货</div>
                </li>
            </ul>
        </div>
    </li>
</ul>

2.5. The total amount

Also in the following commodities, as well as a calculation of the total amount of the list:

Here it can be seen that there are four data:

• Total amount: totalPay
• Offer cashback: discount
• Freight: postFee
• Amount actually paid: actualPay

But we did not do promotions, requires a combination of additional freight logistics system to calculate the time being we are set to 0, the dead in order to write properties:

We obtained by calculating the properties totalPayand actualPayvalues:

computed: {
    totalNum(){
        return this.carts.reduce((c1, c2) => c1 + c2.num, 0)
    },
    totalPay(){
        return this.carts.reduce((c1, c2) => c1 + c2.price * c2.num, 0);
    },
    actualPay(){
        return this.totalPay + this.order.postFee - this.order.discount;
    }
},

Then in page rendering:

effect:

2.6 submit the order.

2.6.1 The page submission

Look at the data required to interface the order:

It is divided into three parts, namely

• Basic information about the order itself

  • total amount
  • The amount actually paid
  • Payment Types
  • Buyer is the current user

• order details

  • Is in the cart of goods, but the shopping cart data will be more of a userId, we can remove:
    

• Logistics Information

  • Current address information selected by the user Logistics

Button to submit the binding events:

Then write method, data organization and submit:

methods: {
    submit() {
        // 把购物车数据处理成订单详情
        const orderDetails = this.carts.map(({userId, ...rest}) => rest);
        // 处理物流信息
        const addr = this.addresses[this.selectedAddress];
        const obj = {
            receiver: addr.name,
            receiverState: addr.state,
            receiverCity: addr.city,
            receiverAddress: addr.address,
            receiverDistrict: addr.district,
            receiverMobile: addr.phone,
            receiverZip: addr.zipCode
        };
        // 复制到订单对象
        Object.assign(this.order, obj, {
            orderDetails,
            totalPay: this.totalPay,
            actualPay: this.actualPay,
        });
        // 提交订单
        ly.http.post("/order", this.order).then(({data}) => {
            // 在线支付，需要到付款页
            window.location = "pay.html?orderId=" + data;
        }).catch((resp) => {
            alert("订单提交失败，可能是缺货!")
        })
    }
},

2.6.2. Loss of accuracy problems

Click Submit test page:

Success generate orders!

Then look at page jump:

As if there is something wrong? Order number of the last two incorrect ah!

In fact, this is because of the limited length of the integer precision JS, java data type of Long out of range, so there are a loss of precision.

Our background is returned Json string will automatically call JSON.parse internally axios () method to json string to JS data, progress will be lost. If no translation is still used as a string, there would be no problem.

Therefore, we rewrite axios response processing callbacks:

Test again, OK.

Then we turn to pay.