|
|
|
@ -7,30 +7,36 @@ |
|
|
|
<view class="order-item"> |
|
|
|
<view class="i-top b-b"> |
|
|
|
<text class="time">{{ orderInfo.createTime }}</text> |
|
|
|
<text class="state" :style="{ color: orderInfo.stateTipColor }" @click="navToDetailPage(item)">{{ orderInfo.id }}--</text> |
|
|
|
<text class="state" :style="{ color: orderInfo.stateTipColor }">{{ orderInfo.stateTip }}</text> |
|
|
|
<text v-if="orderInfo.status === 9" class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(index)"></text> |
|
|
|
<!-- <text class="state" :style="{ color: orderInfo.stateTipColor }" @click="navToDetailPage(item)">{{ orderInfo.id }}--</text> --> |
|
|
|
<text class="state" |
|
|
|
:style="{ color: orderInfo.stateTipColor }">{{ orderInfo.stateTip }}</text> |
|
|
|
<text v-if="orderInfo.status === 9" class="del-btn yticon icon-iconfontshanchu1" |
|
|
|
@click="deleteOrder(index)"></text> |
|
|
|
</view> |
|
|
|
<view class="i-top b-b"> |
|
|
|
<text class="state" :style="{ color: orderInfo.stateTipColor }">订单商品</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view v-if="goodsItem.type === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in orderInfo.orderItemList" :key="goodsIndex"> |
|
|
|
<view v-if="goodsItem.type === 1" class="goods-box-single" |
|
|
|
v-for="(goodsItem, goodsIndex) in orderInfo.orderItemList" :key="goodsIndex"> |
|
|
|
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill"></img> |
|
|
|
<view class="right"> |
|
|
|
<text class="title clamp">{{ goodsItem.productName }}</text> |
|
|
|
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text> |
|
|
|
<text class="attr-box">{{ goodsItem.productAttr }} x |
|
|
|
{{ goodsItem.productQuantity }}</text> |
|
|
|
<text class="price">{{ goodsItem.productPrice }} </text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="i-top b-b"> |
|
|
|
<text class="state" :style="{ color: orderInfo.stateTipColor }">订单赠品</text> |
|
|
|
</view> |
|
|
|
<view v-if="goodsItem.type === 2" class="goods-box-single" v-for="(goodsItem, goodsIndex) in orderInfo.orderItemList" :key="goodsIndex"> |
|
|
|
<view v-if="goodsItem.type === 2" class="goods-box-single" |
|
|
|
v-for="(goodsItem, goodsIndex) in orderInfo.orderItemList" :key="goodsIndex"> |
|
|
|
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill"></img> |
|
|
|
<view class="right"> |
|
|
|
<text class="title clamp">{{ goodsItem.productName }}</text> |
|
|
|
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text> |
|
|
|
<text class="attr-box">{{ goodsItem.productAttr }} x |
|
|
|
{{ goodsItem.productQuantity }}</text> |
|
|
|
<text class="price">{{ goodsItem.productPrice }} </text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -55,15 +61,16 @@ |
|
|
|
<text class="price">{{ orderInfo.payAmount }}</text> |
|
|
|
</view> |
|
|
|
<view class="action-box b-t"> |
|
|
|
<button v-if="orderInfo.status == 12" class="action-btn" @click="cancelOrder(orderInfo)">取消订单</button> |
|
|
|
<button v-if="orderInfo.status == 12" class="action-btn recom" @click="payOrder(orderInfo)">立即支付</button> |
|
|
|
<button v-if="orderInfo.status <7" class="action-btn recom" @click="applyRefund(orderInfo.id)">申请售后</button> |
|
|
|
<button v-if="orderInfo.status == 3" class="action-btn recom" @click="confimDelivery(orderInfo)">确认收货</button> |
|
|
|
<button class='action-btn recom' |
|
|
|
hover-class="btn-hover" |
|
|
|
v-if="orderInfo.status === 4" |
|
|
|
@click="toEvaluate(orderInfo.id)" |
|
|
|
>立即评价</button> |
|
|
|
<button v-if="orderInfo.status == 12" class="action-btn" |
|
|
|
@click="cancelOrder(orderInfo)">取消订单</button> |
|
|
|
<button v-if="orderInfo.status == 12" class="action-btn recom" |
|
|
|
@click="payOrder(orderInfo)">立即支付</button> |
|
|
|
<button v-if="orderInfo.status <7" class="action-btn recom" |
|
|
|
@click="applyRefund(orderInfo.id)">申请售后</button> |
|
|
|
<button v-if="orderInfo.status == 3" class="action-btn recom" |
|
|
|
@click="confimDelivery(orderInfo)">确认收货</button> |
|
|
|
<button class='action-btn recom' hover-class="btn-hover" v-if="orderInfo.status === 4" |
|
|
|
@click="toEvaluate(orderInfo.id)">立即评价</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
@ -74,13 +81,17 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState } from 'vuex'; |
|
|
|
import { |
|
|
|
mapState |
|
|
|
} from 'vuex'; |
|
|
|
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|
|
|
import Api from '@/common/api'; |
|
|
|
import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue'; |
|
|
|
import empty from '@/components/empty'; |
|
|
|
import Json from '@/Json'; |
|
|
|
import { formatDate } from '@/common/date'; |
|
|
|
import { |
|
|
|
formatDate |
|
|
|
} from '@/common/date'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
mallplusCopyright, |
|
|
|
@ -91,8 +102,7 @@ export default { |
|
|
|
return { |
|
|
|
tabCurrentIndex: 0, |
|
|
|
orderInfo: [], |
|
|
|
navList: [ |
|
|
|
{ |
|
|
|
navList: [{ |
|
|
|
status: 0, |
|
|
|
text: '全部', |
|
|
|
loadingType: 'more', |
|
|
|
@ -127,7 +137,9 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
async onLoad(options) { |
|
|
|
let params = { id: options.id }; |
|
|
|
let params = { |
|
|
|
id: options.id |
|
|
|
}; |
|
|
|
this.orderInfo = await Api.apiCall('get', Api.order.orderDetail, params); |
|
|
|
this.orderInfo = Object.assign(this.orderInfo, this.orderStateExp(this.orderInfo.status)); |
|
|
|
this.orderInfo.createTime = this.dateFormat(this.orderInfo.createTime); |
|
|
|
@ -164,7 +176,9 @@ export default { |
|
|
|
uni.showLoading({ |
|
|
|
title: '请稍后' |
|
|
|
}); |
|
|
|
let params = { orderId: item.id }; |
|
|
|
let params = { |
|
|
|
orderId: item.id |
|
|
|
}; |
|
|
|
let data = await Api.apiCall('post', Api.order.closeOrder, params); |
|
|
|
|
|
|
|
if (data) { |
|
|
|
@ -177,7 +191,9 @@ export default { |
|
|
|
uni.showLoading({ |
|
|
|
title: '请稍后' |
|
|
|
}); |
|
|
|
let params = { id: item.id }; |
|
|
|
let params = { |
|
|
|
id: item.id |
|
|
|
}; |
|
|
|
let data = await Api.apiCall('post', Api.order.confimDelivery, params); |
|
|
|
|
|
|
|
if (data) { |
|
|
|
@ -197,7 +213,9 @@ export default { |
|
|
|
uni.showLoading({ |
|
|
|
title: '请稍后' |
|
|
|
}); |
|
|
|
let params = { id: item.id }; |
|
|
|
let params = { |
|
|
|
id: item.id |
|
|
|
}; |
|
|
|
let data = await Api.apiCall('post', Api.order.applyRefund, params); |
|
|
|
console.log(data); |
|
|
|
if (data) { |
|
|
|
@ -218,10 +236,12 @@ export default { |
|
|
|
if (value === 12) { |
|
|
|
stateTipColor = '#909399'; |
|
|
|
return '待付款'; |
|
|
|
}if (value === 1) { |
|
|
|
} |
|
|
|
if (value === 1) { |
|
|
|
stateTipColor = '#909399'; |
|
|
|
return '支付成功，没有回掉'; |
|
|
|
}if (value === 2) { |
|
|
|
} |
|
|
|
if (value === 2) { |
|
|
|
stateTip = '待发货'; |
|
|
|
} else if (value === 3) { |
|
|
|
stateTip = '待收货'; |
|
|
|
@ -248,7 +268,10 @@ export default { |
|
|
|
stateTip = '待付款'; |
|
|
|
} |
|
|
|
|
|
|
|
return { stateTip, stateTipColor }; |
|
|
|
return { |
|
|
|
stateTip, |
|
|
|
stateTipColor |
|
|
|
}; |
|
|
|
}, |
|
|
|
dateFormat(time) { |
|
|
|
if (time == null || time === '') { |
|
|
|
@ -271,6 +294,7 @@ page, |
|
|
|
.swiper-box { |
|
|
|
height: calc(100% - 40px); |
|
|
|
} |
|
|
|
|
|
|
|
.list-scroll-content { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
@ -283,6 +307,7 @@ page, |
|
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06); |
|
|
|
position: relative; |
|
|
|
z-index: 10; |
|
|
|
|
|
|
|
.nav-item { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
@ -292,8 +317,10 @@ page, |
|
|
|
font-size: 15px; |
|
|
|
color: $font-color-dark; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&.current { |
|
|
|
color: $base-color; |
|
|
|
|
|
|
|
&:after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
@ -311,12 +338,14 @@ page, |
|
|
|
.uni-swiper-item { |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.order-item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding-left: 30upx; |
|
|
|
background: #fff; |
|
|
|
margin-top: 16upx; |
|
|
|
|
|
|
|
.i-top { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -325,17 +354,21 @@ page, |
|
|
|
font-size: $font-base; |
|
|
|
color: $font-color-dark; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.time { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.state { |
|
|
|
color: $base-color; |
|
|
|
} |
|
|
|
|
|
|
|
.del-btn { |
|
|
|
padding: 10upx 0 10upx 36upx; |
|
|
|
font-size: $font-lg; |
|
|
|
color: $font-color-light; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&:after { |
|
|
|
content: ''; |
|
|
|
width: 0; |
|
|
|
@ -348,51 +381,61 @@ page, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 多条商品 */ |
|
|
|
.goods-box { |
|
|
|
height: 160upx; |
|
|
|
padding: 20upx 0; |
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
.goods-item { |
|
|
|
width: 120upx; |
|
|
|
height: 120upx; |
|
|
|
display: inline-block; |
|
|
|
margin-right: 24upx; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-img { |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 单条商品 */ |
|
|
|
.goods-box-single { |
|
|
|
display: flex; |
|
|
|
padding: 20upx 0; |
|
|
|
|
|
|
|
.goods-img { |
|
|
|
display: block; |
|
|
|
width: 120upx; |
|
|
|
height: 120upx; |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding: 0 30upx 0 24upx; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: $font-base + 2upx; |
|
|
|
color: $font-color-dark; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.attr-box { |
|
|
|
font-size: $font-sm + 2upx; |
|
|
|
color: $font-color-light; |
|
|
|
padding: 10upx 12upx; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
font-size: $font-base + 2upx; |
|
|
|
color: $font-color-dark; |
|
|
|
|
|
|
|
&:before { |
|
|
|
content: '￥'; |
|
|
|
font-size: $font-sm; |
|
|
|
@ -409,13 +452,16 @@ page, |
|
|
|
padding: 20upx 30upx; |
|
|
|
font-size: $font-sm + 2upx; |
|
|
|
color: $font-color-light; |
|
|
|
|
|
|
|
.num { |
|
|
|
margin: 0 8upx; |
|
|
|
color: $font-color-dark; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
font-size: $font-lg; |
|
|
|
color: $font-color-dark; |
|
|
|
|
|
|
|
&:before { |
|
|
|
content: '￥'; |
|
|
|
font-size: $font-sm; |
|
|
|
@ -423,6 +469,7 @@ page, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.action-box { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
@ -431,6 +478,7 @@ page, |
|
|
|
position: relative; |
|
|
|
padding-right: 30upx; |
|
|
|
} |
|
|
|
|
|
|
|
.action-btn { |
|
|
|
width: 160upx; |
|
|
|
height: 60upx; |
|
|
|
@ -443,12 +491,15 @@ page, |
|
|
|
color: $font-color-dark; |
|
|
|
background: #fff; |
|
|
|
border-radius: 100px; |
|
|
|
|
|
|
|
&:after { |
|
|
|
border-radius: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
&.recom { |
|
|
|
background: #fff9f9; |
|
|
|
color: $base-color; |
|
|
|
|
|
|
|
&:after { |
|
|
|
border-color: #f7bcc8; |
|
|
|
} |
|
|
|
|
