|
|
@@ -1,95 +1,109 @@
|
|
|
<template>
|
|
|
- <div class="order">
|
|
|
- <div class="top">
|
|
|
- <div class="status">{{ orderStatus[orderInfo.status] }}</div>
|
|
|
- <img :src="imgInfo[orderInfo.status]" alt="" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="addresss">
|
|
|
- <img src="../../assets/dingdan_icon_dizhi.png" alt="" />
|
|
|
- <div class="addresss-content">
|
|
|
- <div>{{ userAddress.name }} {{ userAddress.phone }}</div>
|
|
|
- <div>
|
|
|
- {{ userAddress.province }} {{ userAddress.citry }}
|
|
|
- {{ userAddress.district }} {{ userAddress.address }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product">
|
|
|
- <order-info
|
|
|
- style="padding:0"
|
|
|
- :info="item"
|
|
|
- v-for="item in goodsList"
|
|
|
- :key="item.id"
|
|
|
- ></order-info>
|
|
|
-
|
|
|
- <div class="order-info">
|
|
|
- <div class="name">配送方式</div>
|
|
|
- <div class="val">普通配送</div>
|
|
|
+ <div class="order index">
|
|
|
+ <div class="index-router-view">
|
|
|
+ <div class="top">
|
|
|
+ <div class="status">{{ orderStatus[orderInfo.status] }}</div>
|
|
|
+ <img :src="imgInfo[orderInfo.status]" alt="" />
|
|
|
</div>
|
|
|
|
|
|
- <!-- <div class="order-info">
|
|
|
- <div class="name">订单留言</div>
|
|
|
- <div class="val">麻烦尽快发货,谢谢</div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="order-detail">
|
|
|
- <div class="detail-item">
|
|
|
- <div class="name">商品金额</div>
|
|
|
- <div class="val">¥{{ orderInfo.totalPrice }}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="detail-item">
|
|
|
- <div class="name">运费</div>
|
|
|
- <div class="val">包邮</div>
|
|
|
+ <div class="addresss">
|
|
|
+ <img src="../../assets/dingdan_icon_dizhi.png" alt="" />
|
|
|
+ <div class="addresss-content">
|
|
|
+ <div>{{ userAddress.name }} {{ userAddress.phone }}</div>
|
|
|
+ <div>
|
|
|
+ {{ userAddress.province }} {{ userAddress.citry }}
|
|
|
+ {{ userAddress.district }} {{ userAddress.address }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="detail-item">
|
|
|
- <div class="name">实付款</div>
|
|
|
- <div class="val price">¥{{ orderInfo.totalPrice }}</div>
|
|
|
+ <div class="product">
|
|
|
+ <order-info
|
|
|
+ style="padding:0 0 20px"
|
|
|
+ :info="item"
|
|
|
+ v-for="item in goodsList"
|
|
|
+ :key="item.id"
|
|
|
+ ></order-info>
|
|
|
+
|
|
|
+ <div class="order-info">
|
|
|
+ <div class="name">配送方式</div>
|
|
|
+ <div class="val">普通配送</div>
|
|
|
+ </div>
|
|
|
+ <div class="order-info">
|
|
|
+ <div class="name">订单留言</div>
|
|
|
+ <div class="val">{{ orderInfo.remark || "无" }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="time-content">
|
|
|
+ <div class="order-detail">
|
|
|
<div class="detail-item">
|
|
|
- <div class="name">订单编号</div>
|
|
|
- <div class="val">{{ orderInfo.id }}</div>
|
|
|
+ <div class="name">商品金额</div>
|
|
|
+ <div class="val">
|
|
|
+ ¥{{
|
|
|
+ orderInfo.status == "PAYED"
|
|
|
+ ? 0
|
|
|
+ : orderInfo.totalPrice
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="detail-item">
|
|
|
- <div class="name">创建时间</div>
|
|
|
- <div class="val">{{ orderInfo.createdAt }}</div>
|
|
|
+ <div class="name">运费</div>
|
|
|
+ <div class="val">
|
|
|
+ {{
|
|
|
+ orderInfo.status == "PAYED"
|
|
|
+ ? "¥" + orderInfo.totalPrice
|
|
|
+ : "包邮"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="detail-item" v-if="orderInfo.paidTime">
|
|
|
- <div class="name">付款时间</div>
|
|
|
- <div class="val">{{ orderInfo.paidTime }}</div>
|
|
|
+
|
|
|
+ <div class="detail-item">
|
|
|
+ <div class="name">实付款</div>
|
|
|
+ <div class="val price">¥{{ orderInfo.totalPrice }}</div>
|
|
|
</div>
|
|
|
- <div class="detail-item" v-if="orderInfo.confirmTime">
|
|
|
- <div class="name">成交时间</div>
|
|
|
- <div class="val">{{ orderInfo.confirmTime }}</div>
|
|
|
+
|
|
|
+ <div class="time-content">
|
|
|
+ <div class="detail-item">
|
|
|
+ <div class="name">订单编号</div>
|
|
|
+ <div class="val">{{ orderInfo.id }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <div class="name">创建时间</div>
|
|
|
+ <div class="val">{{ orderInfo.createdAt }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item" v-if="orderInfo.paidTime">
|
|
|
+ <div class="name">付款时间</div>
|
|
|
+ <div class="val">{{ orderInfo.paidTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item" v-if="orderInfo.confirmTime">
|
|
|
+ <div class="name">成交时间</div>
|
|
|
+ <div class="val">{{ orderInfo.confirmTime }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="bottom" style="height:50px;">
|
|
|
- <van-goods-action>
|
|
|
- <div class="order-btn">
|
|
|
- <!-- <van-button
|
|
|
+ <van-goods-action
|
|
|
+ v-if="
|
|
|
+ orderInfo.status === 'CREATED' || orderInfo.status === 'TAKEN'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- <van-button
|
|
|
size="small"
|
|
|
color="#AAACAD"
|
|
|
plain
|
|
|
v-if="info.status === 'CREATED' || info.status === 'PAYED'"
|
|
|
>取消订单</van-button
|
|
|
> -->
|
|
|
- <van-button
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- v-if="orderInfo.status === 'CREATED'"
|
|
|
- @click="goNext('submit', { orderId: orderInfo.id })"
|
|
|
- >立即支付</van-button
|
|
|
- >
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ v-if="orderInfo.status === 'CREATED'"
|
|
|
+ @click="goNext('submit', { orderId: orderInfo.id })"
|
|
|
+ >立即支付</van-button
|
|
|
+ >
|
|
|
|
|
|
- <!-- <van-button
|
|
|
+ <!-- <van-button
|
|
|
size="small"
|
|
|
color="#AAACAD"
|
|
|
plain
|
|
|
@@ -97,22 +111,22 @@
|
|
|
>查看物流</van-button
|
|
|
> -->
|
|
|
|
|
|
- <!-- <van-button
|
|
|
+ <!-- <van-button
|
|
|
type="primary"
|
|
|
size="small"
|
|
|
v-if="info.status === 'SENTED'"
|
|
|
>确认收货</van-button
|
|
|
> -->
|
|
|
|
|
|
- <van-button
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- v-if="orderInfo.status === 'TAKEN'"
|
|
|
- @click="goNext('evaluate', { orderId: orderInfo.id })"
|
|
|
- >立即评价</van-button
|
|
|
- >
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ v-if="orderInfo.status === 'TAKEN'"
|
|
|
+ @click="goNext('evaluate', { orderId: orderInfo.id })"
|
|
|
+ >立即评价</van-button
|
|
|
+ >
|
|
|
|
|
|
- <!-- <van-button
|
|
|
+ <!-- <van-button
|
|
|
size="small"
|
|
|
color="#AAACAD"
|
|
|
plain
|
|
|
@@ -120,15 +134,13 @@
|
|
|
>删除订单</van-button
|
|
|
> -->
|
|
|
|
|
|
- <!-- <van-button
|
|
|
+ <!-- <van-button
|
|
|
type="primary"
|
|
|
size="small"
|
|
|
v-if="info.status === 'COMPETED'"
|
|
|
>再来一单</van-button
|
|
|
> -->
|
|
|
- </div>
|
|
|
- </van-goods-action>
|
|
|
- </div>
|
|
|
+ </van-goods-action>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -218,13 +230,15 @@ export default {
|
|
|
padding: 15px;
|
|
|
margin: 5px 0 0;
|
|
|
|
|
|
+ .goods-info {
|
|
|
+ border-bottom: 1px solid #f2f4f5;
|
|
|
+ }
|
|
|
+
|
|
|
.order-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 20px;
|
|
|
- border-top: 1px solid #f2f4f5;
|
|
|
- padding-top: 20px;
|
|
|
|
|
|
.name {
|
|
|
font-size: 13px;
|
|
|
@@ -285,19 +299,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.order-button {
|
|
|
- height: 50px;
|
|
|
+.van-goods-action {
|
|
|
+ height: 60px;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
padding: 0 15px;
|
|
|
- width: 100%;
|
|
|
+ border-top: 1px solid #F0F2F5;
|
|
|
|
|
|
.van-button {
|
|
|
width: 110px;
|
|
|
- height: 39px;
|
|
|
- line-height: 39px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
|