目錄

• 頂部導航條：復用head組件
• 未登錄
• 用戶沒有訂單
• 有訂單
• • order-detail訂單詳情頁
  • • 頂部導航條：復用head組件
    • 訂單狀態
    • 商店信息、食物信息
    • 其他組件：復用alertTip組件
  • comment評論組件
  • • 頂部導航條：復用head組件
    • 配送信息展示
    • • 星級評分組件star
• 底部導航欄：復用Bottom組件

組件一創建，從cookie中獲取用戶信息，如果有用戶信息，帶著用戶信息去獲取該用戶的所有訂單，將該用戶的所有訂單信息保存在ordersList

created() {this.username = getInfo()// 從cookie中獲取用戶信息if (this.username) {// 如果有用戶信息 帶著用戶信息去獲取該用戶的所有訂單orders().then((response) => {if (response.data.status === 200) {this.ordersList = response.data.data;// 該用戶的所有訂單this.noOrder = !this.ordersList.length;// true：該用戶沒有訂單this.$nextTick(() => {new BScroll(this.$refs.orderWrapper, {click: true, probeType: 3,});})}})} } orders = (data) => {let req = {data,url: 'v1/orders'}return _get(req); } _get = req => axios.get(req.url, {params: req.data})

頂部導航條：復用head組件

<v-head goBack="true" title="訂單"></v-head>

未登錄

沒有獲取到用戶信息 沒有登錄，展示一個圖標一行字，一個router-link包裹的字，點擊后跳轉到登錄頁面

<div class="to-login-container" v-if="!username"><div class="avatar"><i class="iconfont icon">&#xe623;</i></div><span class="tip">您還沒有登錄，請登錄后查看訂單</span><router-link to="/login"><span class="to-login">登錄/注冊</span></router-link> </div>

用戶沒有訂單

能獲取到用戶信息 但是該用戶沒有訂單 展示“訂單空空如也，快去購物吧！”

<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;">&nbsp;</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中，否則彈出錯誤信息

created() {let order_id = this.order_id = this.$route.query.order_id;// 從路由中獲取訂單編號if (!order_id) {// 如果沒有獲取到,彈出"參數有誤",1s后跳轉到首頁this.alertText = '參數有誤';this.showTip = true;setTimeout(() => {this.$router.push('/index');}, 1000);return;}orderInfo({order_id}).then((response) => {// 獲取訂單信息let res = response.data;if (res.status === 200) {// 若返回信息的status為200,獲取成功并保存,否則彈出錯誤信息并返回上一頁this.restaurant_info = res.data.restaurant;} else {this.alertText = res.message;this.showTip = true;setTimeout(() => {this.$router.go(-1)}, 500)}}) }

頂部導航條：復用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">&#xe6d7;</i></span></div></div></div> <star @makeScore="setDeliveryScore"></star> </div>

星級評分組件star

底部導航欄：復用Bottom組件

總結

以上是生活随笔為你收集整理的order订单页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。