You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/order/detail/index.vue

99 lines
3.0 KiB

<!--
* @Author: ch
* @Date: 2022-03-31 14:26:09
* @LastEditors: ch
* @LastEditTime: 2022-05-13 15:04:20
* @Description: file content
-->
<template>
<view>
<StatusTips :orderInfo="orderInfo" @close="timerCloseOrder"></StatusTips>
<UiWhiteBox>
<UiGoodsInfo :class="index === orderInfo.products.length - 1 && 'goods-info__last'"
v-for="(item, index) in orderInfo.products" :data="item" :key="index">
<template slot="operation">
<view class="goods-info-operation" v-if="item.afterSaleApplyFlag || [2,3,4].includes(item.detailStatus)">
<UiButton size="min" type="primaryLine" v-if="item.afterSaleApplyFlag"
@click="$Router.push(`/saleAfterSelect?id=${item.orderProductId}`)">申请售后</UiButton>
<template v-else>
<UiButton size="min" type="line"
@click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">
{{ item.detailStatus === 2 ? '退款中' : item.detailStatus === 3 ? '已退款' : '退款关闭'}}
</UiButton>
<!-- <UiButton size="min" type="line" v-if="item.detailStatus === 3"
@click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">已退款</UiButton>
<UiButton size="min" type="line" v-if="item.detailStatus === 4"
@click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">退款关闭</UiButton> -->
</template>
</view>
</template>
</UiGoodsInfo>
</UiWhiteBox>
<LogisitcsInfo :logisitcsInfo="orderInfo.logistics" :orderId="orderInfo.orderId"/>
<OrderInfo :orderInfo="orderInfo" />
<Operation :orderInfo="orderInfo" v-if="orderInfo.orderStatus !== 3"></Operation>
</view>
</template>
<script>
import UiGoodsInfo from '@/components/UiGoodsInfo.vue';
import UiWhiteBox from '@/components/UiWhiteBox.vue';
import UiButton from '@/components/UiButton.vue';
import {ApiGetOrderDetail, ApiPutCancelOrder} from '@/common/api/order';
import StatusTips from './components/StatusTips.vue';
import OrderInfo from './components/OrderInfo.vue';
import LogisitcsInfo from './components/LogisitcsInfo.vue';
import Operation from './components/Operation.vue';
export default {
components: { UiGoodsInfo, UiWhiteBox, UiButton, StatusTips, OrderInfo, LogisitcsInfo, Operation },
data(){
return {
orderInfo : {
products:[],
logistics:{}
},
}
},
onLoad(){
this.getOrderInfo();
},
methods : {
/**
* 获取订单最新信息
*/
async getOrderInfo(){
const {error, result} = await ApiGetOrderDetail(this.$Route.query.id);
if(error){
uni.$u.toast(error.message);
return false;
}
this.orderInfo = {...result};
},
/**
* 超时自动关闭订单
*/
timerCloseOrder(){
this.orderInfo = {...this.orderInfo, orderStatus : 2, cancelReason:'超时未支付'};
this.getOrderInfo();
}
}
}
</script>
<style lang="scss">
page {
background: $color-grey1;
padding-bottom: 138rpx;
}
</style>>
<style lang="scss" scoped>
.goods-info-operation{
padding-top: 30rpx;
text-align: right;
}
.goods-info__last{
border: 0;
}
</style>