195 lines
4.1 KiB
Vue
195 lines
4.1 KiB
Vue
<script setup>
|
||
//
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed,
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onUnload,
|
||
} from '@dcloudio/uni-app';
|
||
// 工具库
|
||
import util from '@/common/js/util.js'
|
||
// api
|
||
import api from '@/api/index.js'
|
||
// 产品列表
|
||
import productList from '@/components/shop/productList/productList.vue';
|
||
// 地址
|
||
import JyCommodityAddress from '@/components/public/jy-commodity-address'
|
||
|
||
// 订单详情
|
||
const detail = reactive({
|
||
createTime: '',
|
||
coutDownTime: '',
|
||
// 订单商品列表信息
|
||
orderDetailList: [],
|
||
// 物流信息
|
||
logistics: {},
|
||
})
|
||
// 物流信息
|
||
const logistics = computed(() => detail.logistics.info ? detail.logistics.info[0] : {
|
||
logisticsTraceDetailList: []
|
||
})
|
||
// 订单id
|
||
const orderId = ref('')
|
||
// 查看更多订单信息
|
||
const showMore = ref(false)
|
||
|
||
// 物流状态
|
||
const flow = computed(() => {
|
||
return []
|
||
})
|
||
// 物流状态
|
||
const formatFlow = computed(() => {
|
||
let result = [...logistics.value.logisticsTraceDetailList]
|
||
if (!showMore.value) result.length = Math.min(logistics.value.logisticsTraceDetailList.length, 2)
|
||
return result
|
||
})
|
||
|
||
onLoad((option) => {
|
||
if (option.orderId) orderId.value = option.orderId
|
||
// 获取订单详情
|
||
getDetail()
|
||
})
|
||
|
||
// 获取订单详情
|
||
function getDetail() {
|
||
api.shop.getOrderDetail({
|
||
query: {
|
||
id: orderId.value
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
let result = res.data
|
||
result.status = Number(result.status)
|
||
Object.assign(detail, {}, result)
|
||
return
|
||
}
|
||
util.alert({
|
||
content: res.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 文本复制
|
||
* @param {Object} text
|
||
*/
|
||
function handleCopy(text) {
|
||
util.copyText(text)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app">
|
||
<!-- 地址详情 -->
|
||
<view class="bfff mtb20 p25">
|
||
<!-- 地址 -->
|
||
<JyCommodityAddress v-model:address="detail.address" :shopEdit="false" />
|
||
</view>
|
||
|
||
<!-- 快递公司 -->
|
||
<view class="container rows ptb20 f28">
|
||
<image class="wh70" src="/static/shop-logistics.png" mode="aspectFit" />
|
||
<view class="value f1 mlr20">快递公司：{{logistics.logisticsCompanyName}}</view>
|
||
<view class="btn sm closeHollow plr20" @click="handleCopy(logistics.logisticsCompanyName)">复制</view>
|
||
</view>
|
||
|
||
<!-- 订单编号 -->
|
||
<view class="container rows ptb20 f28">
|
||
<image class="wh70" src="/static/shop-document.png" mode="aspectFit" />
|
||
<view class="value f1 mlr20">订单编号：{{detail.logistics.orderNo}}</view>
|
||
<view class="btn sm closeHollow plr20" @click="handleCopy(detail.logistics.orderNo)">复制</view>
|
||
</view>
|
||
|
||
<!-- 订单流程 -->
|
||
<view class="container">
|
||
<view class="flow mtb30">
|
||
<view class="item df" v-for="(item,index) in formatFlow" :key="index">
|
||
<view class="rank ver">
|
||
<view class="line first"></view>
|
||
<view class="circle cir"></view>
|
||
<view class="line f1"></view>
|
||
</view>
|
||
<view class="content f1 ml20 pb20">
|
||
<view class="f30">{{item.desc}}</view>
|
||
<view class="mt10 f28">2024-03-05 13:24:00</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mtb30 fmid c999" @click="showMore = !showMore">
|
||
<template v-if="!showMore">
|
||
<text>查看更多订单信息</text>
|
||
<uni-icons type="bottom" color="" />
|
||
</template>
|
||
<template v-else>
|
||
<text>收起</text>
|
||
<uni-icons type="top" color="" />
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 推荐产品列表 -->
|
||
<view class="productList mtb30 mlr30">
|
||
<productList choicenessTitle="true" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
//
|
||
.container {
|
||
overflow: hidden;
|
||
margin: 20rpx 0;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
color: #333;
|
||
background-color: #fff;
|
||
}
|
||
|
||
// 流程
|
||
.flow {
|
||
.item {
|
||
color: #999;
|
||
|
||
&:nth-child(1) {
|
||
color: #37B111;
|
||
|
||
.circle {
|
||
background-color: #37B111;
|
||
}
|
||
|
||
.line.first {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
//
|
||
&:nth-last-child(1) {
|
||
.line:nth-last-child(1) {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
//
|
||
.circle {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #ccc;
|
||
}
|
||
|
||
//
|
||
.line {
|
||
border-left: 2rpx solid #ccc;
|
||
|
||
//
|
||
&.first {
|
||
height: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |