目錄

• 頂部導(dǎo)航條：復(fù)用head組件
• 未登錄
• 用戶沒有訂單
• 有訂單
• • order-detail訂單詳情頁(yè)
  • • 頂部導(dǎo)航條：復(fù)用head組件
    • 訂單狀態(tài)
    • 商店信息、食物信息
    • 其他組件：復(fù)用alertTip組件
  • comment評(píng)論組件
  • • 頂部導(dǎo)航條：復(fù)用head組件
    • 配送信息展示
    • • 星級(jí)評(píng)分組件star
• 底部導(dǎo)航欄：復(fù)用Bottom組件

組件一創(chuàng)建，從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})

頂部導(dǎo)航條：復(fù)用head組件

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

未登錄

沒有獲取到用戶信息 沒有登錄，展示一個(gè)圖標(biāo)一行字，一個(gè)router-link包裹的字，點(diǎn)擊后跳轉(zhuǎn)到登錄頁(yè)面

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

用戶沒有訂單

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

<div class="no-order" v-else-if="noOrder"><span>訂單空空如也，快去購(gòu)物吧！</span> </div>

有訂單

遍歷ordersList取出一條條訂單，展示商家，點(diǎn)擊商家后使用動(dòng)態(tài)路由跳轉(zhuǎn)到店鋪，再遍歷每個(gè)訂單，取出食物并展示。

<!--點(diǎn)擊后跳轉(zhuǎn)到訂單詳情頁(yè)--> <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><!--展示餐館名稱 點(diǎn)擊后 跳轉(zhuǎn)到相應(yīng)的餐館點(diǎn)菜頁(yè)面--><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><!--遍歷訂單中的食物并展示食物名稱、食物數(shù)量、食物總數(shù)量、食物總價(jià)出來--><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}}件商品，實(shí)付</span><span>￥{{item.total_price}}</span></div><div class="footer"><!--點(diǎn)擊再來一單 跳轉(zhuǎn)到相應(yīng)的商店--><router-link :to="{path:'/store',query:{id:item.restaurant.id}}" tag="span">再來一單</router-link><!--如果沒有評(píng)價(jià)，點(diǎn)擊跳轉(zhuǎn)到用戶評(píng)價(jià)頁(yè)面--><router-linkv-if="!item.has_comment"class="make_comment":to="{path:'/order/comment',query:{order_id:item.id}}">評(píng)價(jià)</router-link></div> </router-link>

order-detail訂單詳情頁(yè)

組件一創(chuàng)建，就從路由中獲取店鋪id，通過店鋪id獲取訂單信息，根據(jù)返回信息的status判斷訂單是否獲取成功，不成功則orderStatus、statusDesc中的內(nèi)容如下：

this.orderStatus = '訂單已取消' this.statusDesc = '支付超時(shí)，訂單已取消'

成功的話繼續(xù)判斷返回信息的code是否為200，若是，代表訂單已完成，否則代表訂單已被取消。訂單信息保存在數(shù)據(jù)庫(kù)中，訂單信息有個(gè)code屬性，若支付成功，則狀態(tài)為200，否則支付失敗，訂單被取消了

created() {let id = this.$route.query.id;// 從路由中獲取店鋪idorderInfo({order_id: id}).then((response) => {// 通過店鋪id獲取訂單信息let res = response.data;if (res.status === -1) {// 若返回的數(shù)據(jù)的status為-1，表示獲取訂單失敗this.alertText = '獲取訂單失敗';this.showTip = true;return;}let data = this.orderData = res.data;// 訂單信息保存在數(shù)據(jù)庫(kù)中，訂單信息有個(gè)code屬性，若支付成功，則狀態(tài)為200，否則支付失敗，訂單被取消了if (data.code === 200) {// 若返回的數(shù)據(jù)的status為200，表示獲取訂單成功this.orderStatus = '訂單已完成'this.statusDesc = '感謝您對(duì)美團(tuán)外賣的支持，歡迎再次光臨'} else {this.orderStatus = '訂單已取消'this.statusDesc = '支付超時(shí)，訂單已取消'}// 保存返回的數(shù)據(jù)this.restaurantInfo = data.restaurant;this.foods = data.foods;this.address = data.address;}) }

頂部導(dǎo)航條：復(fù)用head組件

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

訂單狀態(tài)

展示訂單狀態(tài)：訂單已取消/訂單已完成/獲取訂單失敗。點(diǎn)擊“再來一單”跳轉(zhuǎn)到相應(yīng)的店鋪

<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><!--展示食物總價(jià)--><span class="price">￥{{Number(item.price * item.num).toFixed(2)}}</span></div><!--<span>正常</span>--><!--展示食物數(shù)量--><span class="num">x{{item.num}}</span></div></div><div class="other-fee"><!--展示餐盒費(fèi)--><div class="food-container-fee"><span class="fee-name">餐盒費(fèi)</span><span class="price">￥0</span></div><!--展示配送費(fèi)--><div class="delivery-fee"><span class="fee-name">配送費(fèi)</span><span class="price">￥{{restaurantInfo.shipping_fee}}</span></div></div><div class="total-price border-top"><!--展示食物總價(jià) 優(yōu)惠價(jià)格 實(shí)付價(jià)格--><span class="total-price ">總計(jì)￥{{orderData.total_price.toFixed(2)}} </span><span class="discount-price">優(yōu)惠￥0</span><span class="pay-price"> 實(shí)付 <strong>￥{{orderData.total_price.toFixed(2)}}</strong></span></div><div class="call-seller-container border-top"><span>聯(lián)系商家</span></div> </section> <section class="delivery-info-container"><div class="expect-delivery-time"><span class="item-name">期望時(shí)間</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">配送服務(wù)</span><span class="item-value">由 商家 提供配送服務(wù)</span></div> </section> <section class="order-info-container"><!--展示訂單號(hào)碼--><div class="order-number"><span class="item-name">訂單號(hào)碼</span><span class="item-value">{{orderData.id}}</span><span class="copy-order-number">復(fù)制</span></div><!--展示下單事件--><div class="order-time"><span class="item-name">訂單時(shí)間</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>

其他組件：復(fù)用alertTip組件

<alert-tip :text="alertText" :showTip.sync="showTip"></alert-tip>

comment評(píng)論組件

組件一創(chuàng)建就從路由中獲取訂單編號(hào)，如果沒有獲取到，彈出"參數(shù)有誤"，1s后跳轉(zhuǎn)到首頁(yè)，如果獲取到了則保存訂單信息在res中，否則彈出錯(cuò)誤信息

created() {let order_id = this.order_id = this.$route.query.order_id;// 從路由中獲取訂單編號(hào)if (!order_id) {// 如果沒有獲取到,彈出"參數(shù)有誤",1s后跳轉(zhuǎn)到首頁(yè)this.alertText = '參數(shù)有誤';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,獲取成功并保存,否則彈出錯(cuò)誤信息并返回上一頁(yè)this.restaurant_info = res.data.restaurant;} else {this.alertText = res.message;this.showTip = true;setTimeout(() => {this.$router.go(-1)}, 500)}}) }

頂部導(dǎo)航條：復(fù)用head組件

<v-head title="評(píng)論" 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">美團(tuán)快送</span><div class="deliver-time"><span>今天19：10左右送達(dá)</span><span class="time-error">時(shí)間不準(zhǔn) <i class="iconfont">&#xe6d7;</i></span></div></div></div> <star @makeScore="setDeliveryScore"></star> </div>

星級(jí)評(píng)分組件star

底部導(dǎo)航欄：復(fù)用Bottom組件

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。