79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import Container from "@/components/Container.vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
import { payOrderAPI, cancelOrderListAPI } from "@/apis";
|
||
import { orderStatusNames } from "@/constants";
|
||
|
||
const data = ref({});
|
||
|
||
onMounted(() => {
|
||
const order = uni.getStorageSync("order");
|
||
data.value = order || {};
|
||
});
|
||
|
||
const goPay = async () => {
|
||
const result = await payOrderAPI(data.value.orderId);
|
||
};
|
||
|
||
const cancelOrder = async () => {
|
||
const result = await cancelOrderListAPI(data.value.orderId);
|
||
data.value = result;
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Container title="订单详情">
|
||
<view class="container">
|
||
<view class="order">
|
||
<view>
|
||
<text>商品名：{{ data.vipName }}</text>
|
||
<text>订单号：{{ data.orderId }}</text>
|
||
<text>下单时间：{{ data.vipCreateAt }}</text>
|
||
<text>支付时间：2025-01-31 09:27:34</text>
|
||
<text>金额：{{ data.vipPrice }} 元</text>
|
||
<text>支付方式：微信</text>
|
||
</view>
|
||
<view v-if="data.orderStatus === 1">
|
||
<SButton :onClick="goPay">去支付</SButton>
|
||
<SButton :onClick="cancelOrder">取消订单</SButton>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #e4e4e4;
|
||
padding-top: 10px;
|
||
}
|
||
.order {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.order > view:first-child {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 15px;
|
||
}
|
||
.order > view:first-child > text:first-child {
|
||
color: #000;
|
||
font-size: 16px;
|
||
}
|
||
.order > view:first-child > text {
|
||
color: #666666;
|
||
font-size: 13px;
|
||
margin-top: 5px;
|
||
}
|
||
.order > view:last-child {
|
||
margin-bottom: 20px;
|
||
}
|
||
</style>
|