289 lines
7.6 KiB
Vue
289 lines
7.6 KiB
Vue
<script setup>
|
||
// 订单详情
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed,
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onUnload,
|
||
onReachBottom,
|
||
onPullDownRefresh,
|
||
onPageScroll
|
||
} from '@dcloudio/uni-app';
|
||
// 订单方法
|
||
import order from '@/common/js/order.js'
|
||
// api
|
||
import api from '@/api/index.js'
|
||
// util
|
||
import util from '@/common/js/util';
|
||
//
|
||
import productList from '@/components/shop/productList/productList'
|
||
// 物流信息
|
||
import logisticsVue from '@/components/shop/order/logistics';
|
||
// 地址
|
||
import JyCommodityAddress from '@/components/public/jy-commodity-address'
|
||
|
||
// 订单详情
|
||
const detail = reactive({
|
||
createTime: '',
|
||
coutDownTime: '',
|
||
// 订单商品列表信息
|
||
orderDetailList: [],
|
||
// 物流信息
|
||
logistics: {
|
||
info: [],
|
||
},
|
||
})
|
||
// 订单id
|
||
const orderId = ref('')
|
||
// 显示订单详情
|
||
const showOrderDetail = ref(false)
|
||
// 物流信息
|
||
const logistics = computed(() => detail.logistics.info ? detail.logistics.info[0] : {})
|
||
|
||
onLoad((option) => {
|
||
if (option.orderId) orderId.value = option.orderId
|
||
// 获取订单详情
|
||
getDetail()
|
||
// 开启监听
|
||
addListener()
|
||
})
|
||
|
||
onUnload(() => {
|
||
// 移除监听
|
||
removeListener()
|
||
})
|
||
|
||
// 开启监听
|
||
function addListener() {
|
||
uni.$on('updateOrderDetail', () => {
|
||
// 获取订单详情
|
||
getDetail()
|
||
})
|
||
}
|
||
|
||
// 移除监听
|
||
function removeListener() {
|
||
uni.$off('updateOrderDetail')
|
||
}
|
||
|
||
// 获取订单详情
|
||
function getDetail() {
|
||
api.shop.getOrderDetail({
|
||
query: {
|
||
id: orderId.value
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
let result = res.data
|
||
result.status = Number(result.status)
|
||
result.refundStatus = Number(result.refundStatus)
|
||
Object.assign(detail, {}, result)
|
||
return
|
||
}
|
||
util.alert({
|
||
content: res.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 文本复制
|
||
* @param {Object} text
|
||
*/
|
||
function handleCopy(text) {
|
||
util.copyText(text)
|
||
}
|
||
|
||
// 取消订单
|
||
function handleCancel() {
|
||
order.orderCancel({
|
||
orderId: orderId.value
|
||
}).then(res => {
|
||
uni.$emit('updateOrderList')
|
||
// 获取订单详情
|
||
getDetail()
|
||
return
|
||
})
|
||
}
|
||
|
||
// 确认收货
|
||
function handleReceived() {
|
||
order.orderReceived({
|
||
orderId: detail.id,
|
||
}).then(res => {
|
||
// 重载列表
|
||
refreshList()
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 填写退货物流信息
|
||
* @param {Object} param
|
||
*/
|
||
function handleExpressConfirm(param) {
|
||
let data = {
|
||
...param,
|
||
id: detail.id,
|
||
}
|
||
console.log('orderupdateRefund', data)
|
||
|
||
order.orderupdateRefund(data).then(res => {
|
||
// 重载列表
|
||
refreshList()
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app">
|
||
<!-- 物流状态 -->
|
||
<view class="detail">
|
||
<logisticsVue :detail="detail" :logistics="logistics" />
|
||
</view>
|
||
|
||
<!-- 地址详情 -->
|
||
<view class="bfff mtb20 p25">
|
||
<!-- 地址 -->
|
||
<JyCommodityAddress v-model:address="detail.address" :shopEdit="[0,1].includes(detail.status)" />
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="product oh plr30 bfff br20">
|
||
<view class="header line rows ptb20 f28">
|
||
<!-- 店铺 -->
|
||
<view class="store df aic thd f1">
|
||
<image class="wh50 br10" :src="detail.merImg" mode="aspectFill" />
|
||
<view class="name ml10 c333">{{detail.merName}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="goods mtb20 plr10 df" v-for="(item,index) in detail.orderDetailList">
|
||
<!-- 产品图 -->
|
||
<image class="wh180 br10" :src="item.productInfo.sliderImage.split(',')[0]" mode="aspectFill" />
|
||
<!-- 产品信息 -->
|
||
<view class="f1 ml20 mr10">
|
||
<view class="name f30 t2hd">{{item.productName}}</view>
|
||
<view class="spec mt10 c999 f26">升级款 {{item.sku}}</view>
|
||
</view>
|
||
<!-- 其他 -->
|
||
<view class="tar">
|
||
<view class="price">
|
||
<text class="f20">￥</text>
|
||
<text class="f30">{{item.price}}</text>
|
||
</view>
|
||
<view class="c999 f28">x{{item.payNum}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="order mt30 f26 c999">
|
||
<view class="line mtb20 rows">
|
||
<text>订单编号：{{detail.orderNo}}</text>
|
||
<view class="btn ti closeHollow plr20" @click="handleCopy(detail.orderNo)">复制</view>
|
||
</view>
|
||
|
||
<template v-if="showOrderDetail">
|
||
<view class="line mtb20">
|
||
<text>支付方式：微信支付</text>
|
||
</view>
|
||
|
||
<view class="line mtb20">
|
||
<text>物流公司：{{logistics.logisticsCompanyName}}</text>
|
||
</view>
|
||
|
||
<view class="line mtb20 rows">
|
||
<view class="f1">快递单号：{{detail.logistics.orderNo}}</view>
|
||
<view class="btn ti closeHollow plr20" @click="handleCopy(detail.logistics.orderNo)">复制</view>
|
||
</view>
|
||
|
||
<view class="line mtb20">
|
||
<text>下单时间：{{detail.createTime}}</text>
|
||
</view>
|
||
|
||
<view class="line mtb20">
|
||
<text>发货时间：2024-12-10 18:00</text>
|
||
</view>
|
||
|
||
<view class="line mtb20">
|
||
<text>收货时间：2024-12-15 17:00</text>
|
||
</view>
|
||
</template>
|
||
|
||
<view class="mtb30 fmid" @click="showOrderDetail = !showOrderDetail">
|
||
<template v-if="!showOrderDetail">
|
||
<text>查看更多订单信息</text>
|
||
<uni-icons type="bottom" color="" />
|
||
</template>
|
||
<template v-else>
|
||
<text>收起</text>
|
||
<uni-icons type="top" color="" />
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="productList mtb30 mlr20">
|
||
<productList choicenessTitle="true" />
|
||
</view>
|
||
|
||
<view class="fill"></view>
|
||
<view class="footer df jcr plr30 bfff shadow" v-if="[0,1,4,5,6].includes(detail.status)">
|
||
<!-- 售后中 -->
|
||
<template v-if="detail.refundStatus == 1">
|
||
<template v-if="detail.refundStatus == 4">
|
||
<view class="btn bar warmHollow plr30" @click.stop="$refs.expressRef.open()">
|
||
填写退货物流信息</view>
|
||
</template>
|
||
</template>
|
||
<!-- 非售后 -->
|
||
<template v-else-if="detail.refundStatus == 0">
|
||
<!-- 待支付 -->
|
||
<template v-if="detail.status == 0">
|
||
<view class="btn bar closeHollow plr30" @click="handleCancel">取消订单</view>
|
||
<view class="btn bar warmHollow plr30" @click="order.orderPay(detail)">继续付款</view>
|
||
</template>
|
||
<!-- 待发货 -->
|
||
<template v-else-if="detail.status == 1">
|
||
<view class="btn bar closeHollow plr30" @click.stop="handleCancel">取消订单</view>
|
||
</template>
|
||
<!-- 待收货 -->
|
||
<template v-else-if="detail.status == 4">
|
||
<view class="btn bar closeHollow plr30" @click.stop="order.orderAfterSales(detail)">申请退款</view>
|
||
<view class="btn bar closeHollow plr30" v-if="detail.afterSaleStatus === 1">
|
||
申请平台介入</view>
|
||
<view class="btn bar closeHollow plr30" @click.stop="order.logistics(detail)">查看物流
|
||
</view>
|
||
<view class="btn bar warmHollow plr30" @click.stop="handleReceived">确认收货
|
||
</view>
|
||
</template>
|
||
<!-- 已收货 -->
|
||
<template v-else-if="detail.status == 5">
|
||
<view class="btn bar closeHollow plr30" v-if="detail.afterSaleStatus === 1">
|
||
申请平台介入</view>
|
||
<view class="btn bar closeHollow plr30" @click.stop="order.orderAfterSales(detail)">申请退款</view>
|
||
<view class="btn bar warmHollow plr30" @click.stop="order.orderComment(detail)">评价</view>
|
||
</template>
|
||
<!-- 已完成 -->
|
||
<template v-else-if="detail.status == 6">
|
||
<view class="btn bar closeHollow plr30">取消售后</view>
|
||
<!-- <view class="btn bar closeHollow plr30">钱款去向</view> -->
|
||
<view class="btn bar warmHollow plr30" v-if="detail.afterSaleStatus === 1">
|
||
申请平台介入</view>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 物流弹窗 -->
|
||
<expressVue ref="expressRef" @confirm="handleExpressConfirm" />
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
|
||
</style> |