v1.0
This commit is contained in:
hupeng
350
components/order/order.vue
Normal file
350
components/order/order.vue
Normal file
@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<view>
|
||||
<view
|
||||
:class="['order', className]"
|
||||
v-if="data"
|
||||
>
|
||||
|
||||
<view
|
||||
class="order-header"
|
||||
@tap="toOrderInfo"
|
||||
>
|
||||
<view class="order-logo">
|
||||
<!-- <image :src="data." alt=""> -->
|
||||
</view>
|
||||
<view class="order-status status-1">
|
||||
{{ data._status._msg }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-goods"
|
||||
@tap="toOrderInfo"
|
||||
>
|
||||
<goods
|
||||
list
|
||||
interval
|
||||
desc="3"
|
||||
showAction
|
||||
model
|
||||
purchase="x3"
|
||||
:data="item.productInfo"
|
||||
v-for="(item, index) in data.cartInfo"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="order-info"
|
||||
@tap="toOrderInfo"
|
||||
>
|
||||
<text>总价：¥{{ payPrice }}</text>
|
||||
<text>优惠：¥{{ deductionPrice }}</text>
|
||||
<text>运费：-¥{{ freightPrice }}</text>
|
||||
<text>总计：¥{{ totalPrice }}</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="order-actions"
|
||||
v-if="data._status._type == 0"
|
||||
>
|
||||
<!-- 未支付 -->
|
||||
<view class="order-actions-left">
|
||||
</view>
|
||||
<view class="order-actions-btns">
|
||||
<view
|
||||
class="order-actions-delete"
|
||||
@tap="handleCancel"
|
||||
>
|
||||
取消订单
|
||||
</view>
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="handlePay"
|
||||
>
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view
|
||||
class="order-actions"
|
||||
v-if="data._status._type == 1"
|
||||
>
|
||||
<!-- 待发货 -->
|
||||
<view class="order-actions-left">
|
||||
</view>
|
||||
|
||||
<view class="order-actions-btns">
|
||||
<view
|
||||
class="order-actions-delete"
|
||||
@tap="toSelectRefundGood"
|
||||
>
|
||||
申请退款
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="order-actions"
|
||||
v-if="data._status._type == 2"
|
||||
>
|
||||
<!-- 待收货 -->
|
||||
<view class="order-actions-left">
|
||||
</view>
|
||||
<view class="order-actions-btns">
|
||||
|
||||
<view
|
||||
class="order-actions-delete"
|
||||
@tap="toOrderInfo"
|
||||
>
|
||||
查看物流
|
||||
</view>
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="handleOrderTake"
|
||||
>
|
||||
确认收货
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-actions"
|
||||
v-if="data._status._type == 3"
|
||||
>
|
||||
<!-- 待评价 -->
|
||||
<view class="order-actions-left">
|
||||
</view>
|
||||
<view class="order-actions-btns">
|
||||
<view
|
||||
class="order-actions-delete"
|
||||
@tap="handleDelete"
|
||||
>
|
||||
删除订单
|
||||
</view>
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="toOrderInfo"
|
||||
>
|
||||
去评价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="order-actions"
|
||||
v-if="data._status._type == 4"
|
||||
>
|
||||
<!-- 已完成 -->
|
||||
<view class="order-actions-left">
|
||||
</view>
|
||||
<view class="order-actions-btns">
|
||||
<view
|
||||
class="order-actions-delete"
|
||||
@tap="handleDelete"
|
||||
>
|
||||
删除订单
|
||||
</view>
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="toOrderInfo"
|
||||
>
|
||||
查看订单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="order-actions"
|
||||
v-if="data._status._type == 5"
|
||||
>
|
||||
<!-- 退款中 -->
|
||||
<view class="order-actions-left">
|
||||
</view>
|
||||
<view class="order-actions-btns">
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="toOrderInfo"
|
||||
>
|
||||
查看订单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="order-actions"
|
||||
v-if="data._status._type == 6"
|
||||
>
|
||||
<!-- 已退款 -->
|
||||
<view class="order-actions-left">
|
||||
</view>
|
||||
<view class="order-actions-btns">
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="toOrderInfo"
|
||||
>
|
||||
查看订单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="order-actions"
|
||||
v-if="data._status._type == 7"
|
||||
>
|
||||
<!-- 退款 -->
|
||||
<view class="order-actions-left">
|
||||
</view>
|
||||
<view class="order-actions-btns">
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="toOrderInfo"
|
||||
>
|
||||
查看订单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { orderCancel, orderInfo, orderDelete, orderTake } from '@/api/order'
|
||||
|
||||
import { navigateTo, back } from '@/utils/router'
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const props = defineProps(['class', 'data'])
|
||||
|
||||
const data = ref(props.data)
|
||||
|
||||
// 运费金额
|
||||
const freightPrice = ref(props.data.freightPrice)
|
||||
// 实际支付金额
|
||||
const payPrice = ref(props.data.payPrice)
|
||||
// 优惠券金额
|
||||
const couponPrice = ref(props.data.couponPrice)
|
||||
// 抵扣金额
|
||||
const deductionPrice = ref(props.data.deductionPrice)
|
||||
// 订单总价
|
||||
const totalPrice = ref(props.data.totalPrice)
|
||||
|
||||
const handleCancel = async () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认取消订单',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await orderCancel({
|
||||
id: data.value.orderId
|
||||
})
|
||||
data.value = null
|
||||
uni.showToast({
|
||||
title: '已取消',
|
||||
duration: 2000
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const toSelectRefundGood = () => {
|
||||
navigateTo({
|
||||
url: '/pages/selectRefundGood/selectRefundGood',
|
||||
query: {
|
||||
orderId: data.value.orderId,
|
||||
id: data.value.id,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handlePay = () => {
|
||||
|
||||
navigateTo({
|
||||
url: '/pages/selectPlay/selectPlay',
|
||||
query: {
|
||||
key: data.value.unique,
|
||||
orderId: data.value.orderId,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const toOrderInfo = () => {
|
||||
navigateTo({
|
||||
url: '/pages/orderInfo/orderInfo',
|
||||
query: {
|
||||
key: data.value.unique,
|
||||
orderId: data.value.orderId,
|
||||
// id: data.value.id,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const toEvaluate = () => {
|
||||
navigateTo({
|
||||
url: '/pages/evaluate/evaluate',
|
||||
query: {
|
||||
unique: data.value.unique,
|
||||
orderId: data.value.orderId,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const handleDelete = async () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认取消订单',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await orderDelete({
|
||||
id: data.value.orderId
|
||||
})
|
||||
data.value = null
|
||||
uni.showToast({
|
||||
title: '已删除',
|
||||
duration: 2000
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleOrderTake = async () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认收货',
|
||||
success: async (res) => {
|
||||
console.log("gxs --> % success: % res:\n", res)
|
||||
if (res.confirm) {
|
||||
let option = {
|
||||
uni: data.value.orderId,
|
||||
}
|
||||
const res = await orderTake(option)
|
||||
|
||||
emit('refresh')
|
||||
} else if (res.cancel) {
|
||||
// console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
</style>
|
||||
Reference in New Issue
Block a user