order订单页

组件一创建，从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-link
        	v-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;// 从路由中获取店铺id
    orderInfo({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">
          	<span
            	class="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组件