order订单页
目錄
- 頂部導航條:復用head組件
- 未登錄
- 用戶沒有訂單
- 有訂單
- order-detail訂單詳情頁
- 頂部導航條:復用head組件
- 訂單狀態
- 商店信息、食物信息
- 其他組件:復用alertTip組件
- comment評論組件
- 頂部導航條:復用head組件
- 配送信息展示
- 星級評分組件star
- 底部導航欄:復用Bottom組件
組件一創建,從cookie中獲取用戶信息,如果有用戶信息,帶著用戶信息去獲取該用戶的所有訂單,將該用戶的所有訂單信息保存在ordersList
頂部導航條:復用head組件
<v-head goBack="true" title="訂單"></v-head>未登錄
沒有獲取到用戶信息 沒有登錄,展示一個圖標一行字,一個router-link包裹的字,點擊后跳轉到登錄頁面
用戶沒有訂單
能獲取到用戶信息 但是該用戶沒有訂單 展示“訂單空空如也,快去購物吧!”
<div class="no-order" v-else-if="noOrder"><span>訂單空空如也,快去購物吧!</span> </div>有訂單
遍歷ordersList取出一條條訂單,展示商家,點擊商家后使用動態路由跳轉到店鋪,再遍歷每個訂單,取出食物并展示。
<!--點擊后跳轉到訂單詳情頁--> <router-link v-for="item in ordersList" :key="item.id" tag="section" :to="'/order_detail?id='+ item.id"><div class="title"><!--展示餐館圖片--><span class="restaurant-picture"><img :src="item.restaurant.pic_url"></span><!--展示餐館名稱 點擊后 跳轉到相應的餐館點菜頁面--><router-link :to="'/store/menu?id='+ item.restaurant.id" class="restaurant_name">{{item.restaurant.name}} <strong> > </strong></router-link><span class="order-status">訂單已完成</span></div><!--遍歷訂單中的食物并展示食物名稱、食物數量、食物總數量、食物總價出來--><div class="info-container" v-for="food in item.foods" :key="food._id"><div><span class="foods-name">{{food.name}}</span><span class="num">x{{food.num}}</span></div></div><div class="price-container"><span>共{{item.foods.length}}件商品,實付</span><span>¥{{item.total_price}}</span></div><div class="footer"><!--點擊再來一單 跳轉到相應的商店--><router-link :to="{path:'/store',query:{id:item.restaurant.id}}" tag="span">再來一單</router-link><!--如果沒有評價,點擊跳轉到用戶評價頁面--><router-linkv-if="!item.has_comment"class="make_comment":to="{path:'/order/comment',query:{order_id:item.id}}">評價</router-link></div> </router-link>order-detail訂單詳情頁
組件一創建,就從路由中獲取店鋪id,通過店鋪id獲取訂單信息,根據返回信息的status判斷訂單是否獲取成功,不成功則orderStatus、statusDesc中的內容如下:
this.orderStatus = '訂單已取消' this.statusDesc = '支付超時,訂單已取消'成功的話繼續判斷返回信息的code是否為200,若是,代表訂單已完成,否則代表訂單已被取消。訂單信息保存在數據庫中,訂單信息有個code屬性,若支付成功,則狀態為200,否則支付失敗,訂單被取消了
created() {let id = this.$route.query.id;// 從路由中獲取店鋪idorderInfo({order_id: id}).then((response) => {// 通過店鋪id獲取訂單信息let res = response.data;if (res.status === -1) {// 若返回的數據的status為-1,表示獲取訂單失敗this.alertText = '獲取訂單失敗';this.showTip = true;return;}let data = this.orderData = res.data;// 訂單信息保存在數據庫中,訂單信息有個code屬性,若支付成功,則狀態為200,否則支付失敗,訂單被取消了if (data.code === 200) {// 若返回的數據的status為200,表示獲取訂單成功this.orderStatus = '訂單已完成'this.statusDesc = '感謝您對美團外賣的支持,歡迎再次光臨'} else {this.orderStatus = '訂單已取消'this.statusDesc = '支付超時,訂單已取消'}// 保存返回的數據this.restaurantInfo = data.restaurant;this.foods = data.foods;this.address = data.address;}) }頂部導航條:復用head組件
<v-head goBack="true" title="訂單詳情"></v-head>訂單狀態
展示訂單狀態:訂單已取消/訂單已完成/獲取訂單失敗。點擊“再來一單”跳轉到相應的店鋪
<section class="tip"><h3>{{orderStatus}}</h3><h4>{{statusDesc}}</h4><router-link class="buy-again" :to="{path:'/store',query:{id:restaurantInfo.id}}" tag="span">再來一單</router-link> </section>商店信息、食物信息
展示商店信息、食物信息
<section class="foods-info-container"><div class="title"><!--展示商店圖片--><span class="restaurant-picture"><img :src="restaurantInfo.pic_url"></span><!--展示商店名稱--><span class="restaurant-name">{{restaurantInfo.name}}</span><span class="icon"><i class="iconfont"></i></span></div><!--展示食物-->{{restaurantInfo.foods}}<div class="foods-container" v-for="(item,index) in foods" :key="index"><!--展示食物的圖片--><span class="foods-picture"><img :src="item.pic_url"></span><div class="main-container"><div><!--展示食物名稱--><span class="foods-name">{{item.name}}</span><!--展示食物總價--><span class="price">¥{{Number(item.price * item.num).toFixed(2)}}</span></div><!--<span>正常</span>--><!--展示食物數量--><span class="num">x{{item.num}}</span></div></div><div class="other-fee"><!--展示餐盒費--><div class="food-container-fee"><span class="fee-name">餐盒費</span><span class="price">¥0</span></div><!--展示配送費--><div class="delivery-fee"><span class="fee-name">配送費</span><span class="price">¥{{restaurantInfo.shipping_fee}}</span></div></div><div class="total-price border-top"><!--展示食物總價 優惠價格 實付價格--><span class="total-price ">總計¥{{orderData.total_price.toFixed(2)}} </span><span class="discount-price">優惠¥0</span><span class="pay-price"> 實付 <strong>¥{{orderData.total_price.toFixed(2)}}</strong></span></div><div class="call-seller-container border-top"><span>聯系商家</span></div> </section> <section class="delivery-info-container"><div class="expect-delivery-time"><span class="item-name">期望時間</span><span class="item-value">立即配送</span></div><div class="delivery-address"><div><span class="item-name">配送地址</span><span class="item-value" style="display: block;"> </span></div><!--展示地址信息,用戶名,性別,電話--><div class="address-info"><spanclass="person-info item-value">{{address.name}}({{address.gender === 'male' ? '先生' : '女士'}}){{address.phone}}</span><span class="address item-value">{{address.address}}</span></div></div><div class="delivery-service"><span class="item-name">配送服務</span><span class="item-value">由 商家 提供配送服務</span></div> </section> <section class="order-info-container"><!--展示訂單號碼--><div class="order-number"><span class="item-name">訂單號碼</span><span class="item-value">{{orderData.id}}</span><span class="copy-order-number">復制</span></div><!--展示下單事件--><div class="order-time"><span class="item-name">訂單時間</span><span class="item-value">{{orderData.create_time}}</span></div><!--展示支付方式--><div class="delivery-way"><span class="item-name">支付方式</span><span class="item-value">在線支付</span></div> </section>其他組件:復用alertTip組件
<alert-tip :text="alertText" :showTip.sync="showTip"></alert-tip>comment評論組件
組件一創建就從路由中獲取訂單編號,如果沒有獲取到,彈出"參數有誤",1s后跳轉到首頁,如果獲取到了則保存訂單信息在res中,否則彈出錯誤信息
頂部導航條:復用head組件
<v-head title="評論" goBack="true" bgColor="#f4f4f4"></v-head>配送信息展示
<div class="deliver-comment"><div class="deliver-info"><!--展示圖片--><div class="avatar"><img src="http://5b0988e595225.cdn.sohucs.com/images/20190706/b4b3e0f0244849a59c2ef114308fae2c.jpeg"></div><div class="info-container"><span class="deliver-type">美團快送</span><div class="deliver-time"><span>今天19:10左右送達</span><span class="time-error">時間不準 <i class="iconfont"></i></span></div></div></div> <star @makeScore="setDeliveryScore"></star> </div>星級評分組件star
底部導航欄:復用Bottom組件
總結
- 上一篇: 怎样和控制欲很强的家人相处-不受他人影响
- 下一篇: 【情暖寒冬 让爱同行】中创算力开展“寒冬