一个菜鸟的互联网技术分享博客
您的位置： 主页 > 使用vue全家桶高仿小米商城--订单确认页面
advertisement

使用vue全家桶高仿小米商城--订单确认页面

作者：listener_zhang | 时间：2020-02-06 17:50 | 访问数： |

本章主要是改变orderConfirm.vue页面，代码如下：
  1. <template>  
  2.     <div class="order-confirm">  
  3.         <order-header title="订单确认">  
  4.             <template v-slot:tip>  
  5.                 <span>请认真填写收货地址</span>  
  6.             </template>  
  7.         </order-header>  
  8.         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">  
  9.             <defs>  
  10.                 <symbol id="icon-add" viewBox="0 0 31 32">  
  11.                     <title>add</title>  
  12.                     <path d="M30.745 15.152h-14.382v-14.596c0-0.308-0.243-0.557-0.543-0.557s-0.543 0.249-0.543 0.557v14.596h-14.665c-0.3 0-0.543 0.249-0.543 0.557s0.243 0.557 0.543 0.557h14.665v15.177c0 0.307 0.243 0.557 0.543 0.557s0.543-0.249 0.543-0.557v-15.177h14.382c0.3 0 0.543-0.249 0.543-0.557s-0.243-0.557-0.543-0.557z" class="path1"></path>  
  13.                 </symbol>  
  14.                 <symbol id="icon-edit" viewBox="0 0 32 32">  
  15.                     <title>edit</title>  
  16.                     <path d="M28.287 8.51l-4.805-4.806 0.831-0.831c0.472-0.472 1.086-0.777 1.564-0.777 0.248 0 0.452 0.082 0.622 0.253l3.143 3.144c0.539 0.54 0.133 1.529-0.524 2.186l-0.831 0.831zM26.805 9.992l-1.138 1.138-4.805-4.806 1.138-1.138 4.805 4.806zM24.186 12.612l-14.758 14.762-4.805-4.806 14.758-14.762 4.805 4.806zM7.379 28.288l-4.892 1.224 1.223-4.894 3.669 3.67zM31.123 4.011l-3.143-3.144c-0.567-0.567-1.294-0.867-2.103-0.867-1.036 0-2.174 0.52-3.045 1.391l-20.429 20.436c-0.135 0.134-0.23 0.302-0.276 0.487l-2.095 8.385c-0.089 0.355 0.017 0.736 0.276 0.995 0.198 0.198 0.461 0.307 0.741 0.307 0.085 0 0.171-0.010 0.254-0.031l8.381-2.096c0.185-0.047 0.354-0.142 0.487-0.276l20.43-20.436c1.409-1.41 2.042-3.632 0.524-5.15v0z" class="path1"></path>  
  17.                 </symbol>  
  18.                 <symbol id="icon-del" viewBox="0 0 32 32">  
  19.                     <title>delete</title>  
  20.                     <path d="M11.355 4.129v-2.065h9.29v2.065h-9.29zM6.194 29.935v-23.742h19.613v23.742h-19.613zM30.968 4.129h-8.258v-3.097c0-0.569-0.463-1.032-1.032-1.032h-11.355c-0.569 0-1.032 0.463-1.032 1.032v3.097h-8.258c-0.569 0-1.032 0.463-1.032 1.032s0.463 1.032 1.032 1.032h3.097v24.774c0 0.569 0.463 1.032 1.032 1.032h21.677c0.569 0 1.032-0.463 1.032-1.032v-24.774h3.097c0.569 0 1.032-0.463 1.032-1.032s-0.463-1.032-1.032-1.032v0z" class="path1"></path>  
  21.                     <path d="M10.323 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z" class="path2"></path>  
  22.                     <path d="M16 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z" class="path3"></path>  
  23.                     <path d="M21.677 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z" class="path4"></path>  
  24.                 </symbol>  
  25.             </defs>  
  26.         </svg>  
  27.         <div class="wrapper">  
  28.             <div class="container">  
  29.                 <div class="order-box">  
  30.                     <div class="item-address">  
  31.                         <h2 class="addr-title">收货地址</h2>  
  32.                         <div class="addr-list clearfix">  
  33.                             <div class="addr-info" :class="{'checked':index == checkIndex}" @click="checkIndex=index" v-for="(item,index) in list" :key="index">  
  34.                                 <h2>{{item.receiverName}}</h2>  
  35.                                 <div class="phone">{{item.receiverMobile}}</div>  
  36.                                 <div class="street">{{item.receiverProvince + ' ' + item.receiverCity + ' ' + item.receiverDistrict + ' ' + item.receiverAddress}}</div>  
  37.                                 <div class="action">  
  38.                                     <a href="javascript:;" class="fl" @click="delAddress(item)">  
  39.                                         <svg class="icon icon-del">  
  40.                                             <use xlink:href="#icon-del"></use>  
  41.                                         </svg>  
  42.                                     </a>  
  43.                                     <a href="javascript:;" class="fr" @click="editAddressModal(item)">  
  44.                                         <svg class="icon icon-edit">  
  45.                                             <use xlink:href="#icon-edit"></use>  
  46.                                         </svg>  
  47.                                     </a>  
  48.                                 </div>  
  49.                             </div>  
  50.                             <div class="addr-add" @click="openAddressModal">  
  51.                                 <div class="icon-add"></div>  
  52.                                 <div>添加新地址</div>  
  53.                             </div>  
  54.                         </div>  
  55.                     </div>  
  56.                     <div class="item-good">  
  57.                         <h2>商品</h2>  
  58.                         <ul>  
  59.                             <li v-for="(item,index) in cartList" :key="index">  
  60.                                 <div class="good-name">  
  61.                                     <img v-lazy="item.productMainImage" alt="">  
  62.                                     <span>{{item.productName + ' ' + item.productSubtitle}}</span>  
  63.                                 </div>  
  64.                                 <div class="good-price">{{item.productPrice}}元x{{item.quantity}}</div>  
  65.                                 <div class="good-total">{{item.productTotalPrice}}元</div>  
  66.                             </li>  
  67.                         </ul>  
  68.                     </div>  
  69.                     <div class="item-shipping">  
  70.                         <h2>配送方式</h2>  
  71.                         <span>包邮</span>  
  72.                     </div>  
  73.                     <div class="item-invoice">  
  74.                         <h2>发票</h2>  
  75.                         <a href="javascript:;">电子发票</a>  
  76.                         <a href="javascript:;">个人</a>  
  77.                     </div>  
  78.                     <div class="detail">  
  79.                         <div class="item">  
  80.                             <span class="item-name">商品件数：</span>  
  81.                             <span class="item-val">{{count}}件</span>  
  82.                         </div>  
  83.                         <div class="item">  
  84.                             <span class="item-name">商品总价：</span>  
  85.                             <span class="item-val">{{cartTotalPrice}}元</span>  
  86.                         </div>  
  87.                         <div class="item">  
  88.                             <span class="item-name">优惠活动：</span>  
  89.                             <span class="item-val">0元</span>  
  90.                         </div>  
  91.                         <div class="item">  
  92.                             <span class="item-name">运费：</span>  
  93.                             <span class="item-val">0元</span>  
  94.                         </div>  
  95.                         <div class="item-total">  
  96.                             <span class="item-name">应付总额：</span>  
  97.                             <span class="item-val">{{cartTotalPrice}}元</span>  
  98.                         </div>  
  99.                     </div>  
  100.                     <div class="btn-group">  
  101.                         <a href="/#/cart" class="btn btn-default btn-large">返回购物车</a>  
  102.                         <a href="javascript:;" class="btn btn-large" @click="orderSubmit">去结算</a>  
  103.                     </div>  
  104.                 </div>  
  105.             </div>  
  106.         </div>  
  107.         <modal   
  108.             title="新增确认"   
  109.             btnType="1"   
  110.             :showModal="showEditModal"   
  111.             @cancel="showEditModal=false"   
  112.             @submit="submitAddress"  
  113.             >  
  114.             <template v-slot:body>  
  115.                 <div class="edit-wrap">  
  116.                     <div class="item">  
  117.                         <input type="text" class="input" placeholder="姓名" v-model="checkedItem.receiverName">  
  118.                         <input type="text" class="input" placeholder="手机号" v-model="checkedItem.receiverMobile">  
  119.                     </div>  
  120.                     <div class="item">  
  121.                         <select name="province" v-model="checkedItem.receiverProvince">  
  122.                             <option value="北京">北京</option>  
  123.                             <option value="天津">天津</option>  
  124.                             <option value="河北">河北</option>  
  125.                         </select>  
  126.                         <select name="city" v-model="checkedItem.receiverCity">  
  127.                             <option value="北京">北京</option>  
  128.                             <option value="天津">天津</option>  
  129.                             <option value="河北">石家庄</option>  
  130.                         </select>  
  131.                         <select name="district" v-model="checkedItem.receiverDistrict">  
  132.                             <option value="北京">昌平区</option>  
  133.                             <option value="天津">海淀区</option>  
  134.                             <option value="河北">东城区</option>  
  135.                             <option value="天津">西城区</option>  
  136.                             <option value="河北">顺义区</option>  
  137.                             <option value="天津">房山区</option>  
  138.                         </select>  
  139.                     </div>  
  140.                     <div class="item">  
  141.                         <textarea name="street" v-model="checkedItem.receiverAddress"></textarea>  
  142.                     </div>  
  143.                     <div class="item">  
  144.                         <input type="text" class="input" placeholder="邮编" v-model="checkedItem.receiverZip">  
  145.                     </div>  
  146.                 </div>  
  147.             </template>  
  148.         </modal>  
  149.         <modal   
  150.             title="删除确认"   
  151.             btnType="1"   
  152.             :showModal="showDelModal"   
  153.             @cancel="showDelModal=false"   
  154.             @submit="submitAddress">  
  155.             <template v-slot:body>  
  156.                 <p>您确认要删除此地址吗？</p>  
  157.             </template>  
  158.         </modal>  
  159.     </div>  
  160. </template>  
  161. <script>  
  162.     import OrderHeader from './../components/OrderHeader'  
  163.     import Modal from './../components/Modal'  
  164.     import { Message } from 'element-ui';  
  165.     export default {  
  166.         name: 'order-confirm',  
  167.         data() {  
  168.             return {  
  169.                 list: [], //收货地址列表  
  170.                 cartList: [], //购物车中需要结算的商品列表  
  171.                 cartTotalPrice: 0, //商品总金额  
  172.                 count: 0, //商品结算数量  
  173.                 checkedItem: {}, //选中的商品对象  
  174.                 userAction: '', //用户行为 0：新增 1：编辑 2：删除  
  175.                 showDelModal: false, //是否显示删除弹框  
  176.                 showEditModal: false, //是否显示新增或者编辑弹框  
  177.                 checkIndex: 0 //当前收货地址选中索引  
  178.             }  
  179.         },  
  180.         components: {  
  181.             OrderHeader,  
  182.             Modal  
  183.         },  
  184.         mounted() {  
  185.             this.getAddressList();  
  186.             this.getCartList();  
  187.         },  
  188.         methods: {  
  189.             getAddressList() {  
  190.                 this.axios.get('/shippings').then((res) => {  
  191.                     this.list = res.list;  
  192.                 })  
  193.             },  
  194.             // 打开新增地址弹框  
  195.             openAddressModal() {  
  196.                 this.userAction = 0;  
  197.                 this.checkedItem = {};  
  198.                 this.showEditModal = true;  
  199.             },  
  200.             // 打开新增地址弹框  
  201.             editAddressModal(item) {  
  202.                 this.userAction = 1;  
  203.                 this.checkedItem = item;  
  204.                 this.showEditModal = true;  
  205.             },  
  206.             delAddress(item) {  
  207.                 this.checkedItem = item;  
  208.                 this.userAction = 2;  
  209.                 this.showDelModal = true;  
  210.             },  
  211.             // 地址删除、编辑、新增功能  
  212.             submitAddress() {  
  213.                 let {  
  214.                     checkedItem,  
  215.                     userAction  
  216.                 } = this;  
  217.                 let method, url, params = {};  
  218.                 if (userAction == 0) {  
  219.                     method = 'post', url = '/shippings';  
  220.                 } else if (userAction == 1) {  
  221.                     method = 'put', url = `/shippings/${checkedItem.id}`;  
  222.                 } else {  
  223.                     method = 'delete', url = `/shippings/${checkedItem.id}`;  
  224.                 }  
  225.                 if (userAction == 0 || userAction == 1) {  
  226.                     let {  
  227.                         receiverName,  
  228.                         receiverMobile,  
  229.                         receiverProvince,  
  230.                         receiverCity,  
  231.                         receiverDistrict,  
  232.                         receiverAddress,  
  233.                         receiverZip  
  234.                     } = checkedItem;  
  235.                     let errMsg = '';  
  236.                     if (!receiverName) {  
  237.                         errMsg = '请输入收货人名称';  
  238.                     } else if (!receiverMobile || !/\d{11}/.test(receiverMobile)) {  
  239.                         errMsg = '请输入正确格式的手机号';  
  240.                     } else if (!receiverProvince) {  
  241.                         errMsg = '请选择省份';  
  242.                     } else if (!receiverCity) {  
  243.                         errMsg = '请选择对应的城市';  
  244.                     } else if (!receiverAddress || !receiverDistrict) {  
  245.                         errMsg = '请输入收货地址';  
  246.                     } else if (!/\d{6}/.test(receiverZip)) {  
  247.                         errMsg = '请输入六位邮编';  
  248.                     }  
  249.                     if (errMsg) {  
  250.                         Message.error(errMsg);  
  251.                         return;  
  252.                     }  
  253.                     params = {  
  254.                         receiverName,  
  255.                         receiverMobile,  
  256.                         receiverProvince,  
  257.                         receiverCity,  
  258.                         receiverDistrict,  
  259.                         receiverAddress,  
  260.                         receiverZip  
  261.                     }  
  262.                 }  
  263.                 this.axios[method](url, params).then(() => {  
  264.                     this.closeModal();  
  265.                     this.getAddressList();  
  266.                     Message.success('操作成功');  
  267.                 });  
  268.             },  
  269.             closeModal() {  
  270.                 this.checkedItem = {};  
  271.                 this.userAction = '';  
  272.                 this.showDelModal = false;  
  273.                 this.showEditModal = false;  
  274.             },  
  275.             getCartList() {  
  276.                 this.axios.get('/carts').then((res) => {  
  277.                     let list = res.cartProductVoList; //获取购物车中所有商品数据  
  278.                     this.cartTotalPrice = res.cartTotalPrice; //商品总金额  
  279.                     this.cartList = list.filter(item => item.productSelected); //过滤出选中的订单list  
  280.                     this.cartList.map((item) => {  
  281.                         this.count += item.quantity;  
  282.                     })  
  283.                 })  
  284.             },  
  285.             // 订单提交  
  286.             orderSubmit() {  
  287.                 let item = this.list[this.checkIndex];  
  288.                 if (!item) {  
  289.                     Message.error('请选择一个收货地址');  
  290.                     return;  
  291.                 }  
  292.                 this.axios.post('/orders', {  
  293.                     shippingId: item.id  
  294.                 }).then((res) => {  
  295.                     this.$router.push({  
  296.                         path: '/order/pay',  
  297.                         query: {  
  298.                             orderNo: res.orderNo  
  299.                         }  
  300.                     })  
  301.                 })  
  302.             }  
  303.         }  
  304.     }  
  305. </script>  
  306. <style lang="scss">  
  307.     .order-confirm {  
  308.         .wrapper {  
  309.             background-color: #F5F5F5;  
  310.             padding-top: 30px;  
  311.             padding-bottom: 84px;  
  312.   
  313.             .order-box {  
  314.                 background-color: #ffffff;  
  315.                 padding-left: 40px;  
  316.                 padding-bottom: 40px;  
  317.   
  318.                 .addr-title {  
  319.                     font-size: 20px;  
  320.                     color: #333333;  
  321.                     font-weight: 200;  
  322.                     margin-bottom: 21px;  
  323.                 }  
  324.   
  325.                 .item-address {  
  326.                     padding-top: 38px;  
  327.   
  328.                     .addr-list {  
  329.   
  330.                         .addr-info,  
  331.                         .addr-add {  
  332.                             box-sizing: border-box;  
  333.                             float: left;  
  334.                             width: 271px;  
  335.                             height: 180px;  
  336.                             border: 1px solid #E5E5E5;  
  337.                             margin-right: 15px;  
  338.                             padding: 15px 24px;  
  339.                             font-size: 14px;  
  340.                             color: #757575;  
  341.                         }  
  342.   
  343.                         .addr-info {  
  344.                             cursor: pointer;  
  345.   
  346.                             h2 {  
  347.                                 height: 27px;  
  348.                                 font-size: 18px;  
  349.                                 font-weight: 300;  
  350.                                 color: #333;  
  351.                                 margin-bottom: 10px;  
  352.                             }  
  353.   
  354.                             .street {  
  355.                                 height: 50px;  
  356.                             }  
  357.   
  358.                             .action {  
  359.                                 height: 50px;  
  360.                                 line-height: 50px;  
  361.   
  362.                                 .icon {  
  363.                                     width: 20px;  
  364.                                     height: 20px;  
  365.                                     fill: #666666;  
  366.                                     vertical-align: middle;  
  367.   
  368.                                     &:hover {  
  369.                                         fill: #FF6700;  
  370.                                     }  
  371.                                 }  
  372.                             }  
  373.   
  374.                             &.checked {  
  375.                                 border: 1px solid #ff6700;  
  376.                             }  
  377.                         }  
  378.   
  379.                         .addr-add {  
  380.                             text-align: center;  
  381.                             color: #999999;  
  382.                             cursor: pointer;  
  383.   
  384.                             .icon-add {  
  385.                                 width: 30px;  
  386.                                 height: 30px;  
  387.                                 border-radius: 50%;  
  388.                                 background: url('./../../public/images/icon-add.png') #E0E0E0 no-repeat center;  
  389.                                 background-size: 14px;  
  390.                                 margin: 0 auto;  
  391.                                 margin-top: 45px;  
  392.                                 margin-bottom: 10px;  
  393.                             }  
  394.                         }  
  395.                     }  
  396.                 }  
  397.   
  398.                 .item-good {  
  399.                     margin-top: 34px;  
  400.                     border-bottom: 1px solid #E5E5E5;  
  401.                     padding-bottom: 12px;  
  402.   
  403.                     h2 {  
  404.                         border-bottom: 1px solid #E5E5E5;  
  405.                         padding-bottom: 5px;  
  406.                     }  
  407.   
  408.                     li {  
  409.                         display: flex;  
  410.                         align-items: center;  
  411.                         height: 40px;  
  412.                         line-height: 40px;  
  413.                         margin-top: 10px;  
  414.                         font-size: 16px;  
  415.                         color: #333333;  
  416.   
  417.                         .good-name {  
  418.                             flex: 5;  
  419.   
  420.                             img {  
  421.                                 width: 30px;  
  422.                                 height: 30px;  
  423.                                 vertical-align: middle;  
  424.                             }  
  425.                         }  
  426.   
  427.                         .good-price {  
  428.                             flex: 2;  
  429.                         }  
  430.   
  431.                         .good-total {  
  432.                             padding-right: 44px;  
  433.                             color: #FF6600;  
  434.                         }  
  435.                     }  
  436.                 }  
  437.   
  438.                 .item-shipping,  
  439.                 .item-invoice {  
  440.                     margin-top: 31px;  
  441.                     line-height: 20px;  
  442.   
  443.                     h2 {  
  444.                         display: inline-block;  
  445.                         margin-right: 71px;  
  446.                         font-size: 20px;  
  447.                         width: 80px;  
  448.                     }  
  449.   
  450.                     span,  
  451.                     a {  
  452.                         font-size: 16px;  
  453.                         color: #FF6700;  
  454.                         margin-right: 23px;  
  455.                     }  
  456.                 }  
  457.   
  458.                 .detail {  
  459.                     padding: 50px 44px 33px 0;  
  460.                     border-bottom: 1px solid #f5f5f5;  
  461.                     text-align: right;  
  462.                     font-size: 16px;  
  463.                     color: #666666;  
  464.   
  465.                     .item-val {  
  466.                         color: #FF6700;  
  467.                     }  
  468.   
  469.                     .item {  
  470.                         line-height: 15px;  
  471.                         margin-bottom: 12px;  
  472.                     }  
  473.   
  474.                     .item-val {  
  475.                         display: inline-block;  
  476.                         width: 100px;  
  477.                     }  
  478.   
  479.                     .item-total {  
  480.                         .item-val {  
  481.                             font-size: 28px;  
  482.                         }  
  483.                     }  
  484.                 }  
  485.   
  486.                 .btn-group {  
  487.                     margin-top: 37px;  
  488.                     text-align: right;  
  489.                 }  
  490.             }  
  491.         }  
  492.   
  493.         .edit-wrap {  
  494.             font-size: 14px;  
  495.   
  496.             .item {  
  497.                 margin-bottom: 15px;  
  498.   
  499.                 .input {  
  500.                     display: inline-block;  
  501.                     width: 283px;  
  502.                     height: 40px;  
  503.                     line-height: 40px;  
  504.                     padding-left: 15px;  
  505.                     border: 1px solid #E5E5E5;  
  506.   
  507.                     &+.input {  
  508.                         margin-left: 14px;  
  509.                     }  
  510.                 }  
  511.   
  512.                 select {  
  513.                     height: 40px;  
  514.                     line-height: 40px;  
  515.                     border: 1px solid #E5E5E5;  
  516.                     margin-right: 15px;  
  517.                 }  
  518.   
  519.                 textarea {  
  520.                     height: 62px;  
  521.                     width: 100%;  
  522.                     padding: 13px 15px;  
  523.                     box-sizing: border-box;  
  524.                     border: 1px solid #E5E5E5;  
  525.                 }  
  526.             }  
  527.         }  
  528.     }  
  529. </style>
最终实现的效果图如下所示：







标签： vue es6 vue全家桶

zhangren.online
上一篇：使用vue全家桶高仿小米商城--订单父组件结构封装
下一篇：使用vue全家桶高仿小米商城--订单结算

您可能喜欢

​使用vue全家桶高仿小米商城--前端主要的

​使用vue全家桶高仿小米商城--前端主要的

2020年01月29日 查看： 158

​使用vue全家桶高仿小米商城--订单父组件

​使用vue全家桶高仿小米商城--订单父组件

2020年02月06日 查看： 222

​使用vue全家桶高仿小米商城--订单列表

​使用vue全家桶高仿小米商城--订单列表

2020年02月09日 查看： 152

​使用vue全家桶高仿小米商城--首页轮播

​使用vue全家桶高仿小米商城--首页轮播

2020年01月29日 查看： 150

​安装Vue-cli爬坑

​安装Vue-cli爬坑

2019年03月21日 查看： 154

​Vue的生命周期及代码实例

​Vue的生命周期及代码实例

2019年04月11日 查看： 125

备案号：赣ICP备19013339号
回到顶部