153 lines
4.5 KiB
Vue
153 lines
4.5 KiB
Vue
<template>
|
||
<view class="page-wrapper">
|
||
<!-- 自定义导航栏 -->
|
||
<nav-bar :title="$t('order.orderDetails')"></nav-bar>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="order-info">
|
||
<view class="order-status">{{ sysStore.orderStatusMap[order.orderStatus] }}</view>
|
||
<!-- 三种订单类型商品信息 -->
|
||
<ProductInfo v-if="order.orderType === 'order'" size="large" :data="productList[0]" :type="order.orderType" />
|
||
<ProductInfo v-if="order.orderType === 'vip'" size="large" :data="order.vipBuyConfigEntity" :type="order.orderType" />
|
||
<ProductInfo v-if="order.orderType === 'abroadVip'" size="large" :data="order.ebookvipBuyConfig" :type="order.orderType" />
|
||
<!-- 三种订单类型商品信息 end -->
|
||
|
||
<wd-divider class="p-0!" />
|
||
|
||
<!-- 付款信息 -->
|
||
<wd-cell-group>
|
||
<wd-cell title="商品总价" :value="`${order.orderMoney} ${$t('global.coin')}`" />
|
||
<wd-cell v-if="order.districtMoney > 0" title="活动优惠" :value="`- ${order.districtMoney} ${$t('global.coin')}`" />
|
||
<wd-cell v-if="order.vipDiscountAmount > 0" title="VIP专享立减" :value="`- ${order.vipDiscountAmount} ${$t('global.coin')}`" />
|
||
<wd-cell v-if="order.jfDeduction > 0" title="积分抵扣">
|
||
<text class="text-red-500 text-lg font-bold">{{ `- ${order.jfDeduction}` }}</text>
|
||
</wd-cell>
|
||
<wd-cell title="实付金额">
|
||
<text class="text-red-500 text-lg font-bold">{{ `${order.realMoney}` }}</text> {{ $t('global.coin') }}
|
||
</wd-cell>
|
||
</wd-cell-group>
|
||
|
||
<wd-divider class="p-0!" />
|
||
|
||
<!-- 下单信息 -->
|
||
<wd-cell-group>
|
||
<wd-cell title="订单编号" title-width="4em">
|
||
<text class="text-xs">{{ order.orderSn }}</text>
|
||
<wd-icon name="file-copy" size="14px" color="#65A1FA" class="ml-1!" @click="copyToClipboard(order.orderSn)"></wd-icon>
|
||
</wd-cell>
|
||
<wd-cell title="创建时间" :value="order.createTime" />
|
||
<wd-cell title="付款时间" :value="order.paymentDate" />
|
||
</wd-cell-group>
|
||
</view>
|
||
|
||
<view class="text-center">
|
||
<text @click="toWorkOrder" class="text-[cadetblue] text-sm">订单有问题？去申诉</text>
|
||
</view>
|
||
|
||
<view class="contact-customer" @click="makePhoneCall(sysStore.customerServicePhone)">
|
||
<wd-icon name="service" size="30px"></wd-icon>
|
||
<view class="text-sm">联系客服</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { useSysStore } from '@/stores/sys'
|
||
import { orderApi } from '@/api/modules/order'
|
||
import type { IOrderDetail, IOrderGoods } from '@/types/order'
|
||
import ProductInfo from '@/components/order/ProductInfo.vue'
|
||
import { copyToClipboard, makePhoneCall } from '@/utils/index'
|
||
|
||
const sysStore = useSysStore()
|
||
// 订单详情
|
||
const order = ref<IOrderDetail>({
|
||
orderMoney: 0,
|
||
districtMoney: 0,
|
||
vipDiscountAmount: 0,
|
||
jfDeduction: 0,
|
||
realMoney: 0,
|
||
})
|
||
const productList = ref<IOrderGoods[]>([])
|
||
|
||
onLoad(async (options: { orderId: string }) => {
|
||
const orderId = options.orderId
|
||
if (orderId) {
|
||
const res = await orderApi.getOrderDetail(orderId)
|
||
const orderDetails = res.data.buyOrder
|
||
order.value = orderDetails
|
||
switch (orderDetails.orderType) {
|
||
case 'order':
|
||
productList.value = res.data.productInfo
|
||
break
|
||
case 'vip':
|
||
productList.value = orderDetails.vipBuyConfigEntity
|
||
break
|
||
case 'abroadVip':
|
||
productList.value = orderDetails
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
})
|
||
|
||
const toWorkOrder = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/user/feedback/index?orderSn=' + order.value.orderSn
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
body {
|
||
background-color: #F8F9FA;
|
||
}
|
||
.page-wrapper {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.order-info {
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
||
.order-status {
|
||
margin-bottom: 20rpx;
|
||
padding: 10rpx 0;
|
||
width: 6em;
|
||
background-color: #34D19D;
|
||
color: #fff;
|
||
border-radius: 0 10px 10px 0;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
|
||
:deep(.wd-cell-group) {
|
||
padding: 0 !important;
|
||
|
||
.wd-cell__wrapper {
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
|
||
.contact-customer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
width: 80px;
|
||
height: 80px;
|
||
margin: 40rpx auto 0;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
||
line-height: 1;
|
||
}
|
||
</style> |