373 lines
10 KiB
Vue
373 lines
10 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import {
|
|
orderListApi,
|
|
orderStatusApi,
|
|
orderLadingApi,
|
|
cartListApi,
|
|
} from "@/api/store.js";
|
|
import { useUserStore } from "@/store/user.js";
|
|
import { ElMessage } from "element-plus";
|
|
import { useRouter } from "vue-router";
|
|
import mitt from "@/utils/mitt.js";
|
|
import pay from "@/components/pay.vue";
|
|
|
|
const userStore = useUserStore();
|
|
const router = useRouter();
|
|
|
|
const formData = ref({});
|
|
mitt.on("set-order-detail", (res) => {
|
|
formData.value = res;
|
|
});
|
|
|
|
const list = ref([]);
|
|
|
|
const payRef = ref(null);
|
|
|
|
const loading = ref(false);
|
|
const total = ref(0);
|
|
const activeStore = ref(0);
|
|
const activeStoreList = ref(["商品信息", "订单详情"]);
|
|
|
|
const orderLadingSn = ref("");
|
|
const dialogVisible = ref(false);
|
|
const orderLadingComfirm = (order_sn) => {
|
|
orderLadingSn.value = order_sn;
|
|
dialogVisible.value = true;
|
|
};
|
|
const orderLading = () => {
|
|
dialogVisible.value = false;
|
|
orderLadingApi({
|
|
order_sn: orderLadingSn.value,
|
|
}).then((res) => {
|
|
ElMessage({
|
|
message: res.message,
|
|
type: "success",
|
|
});
|
|
router.push({
|
|
name: "home",
|
|
});
|
|
});
|
|
};
|
|
|
|
const rePay = (row) => {
|
|
payRef.value.setRePay({
|
|
price: row.pay_price,
|
|
order_id: row.group_order_id,
|
|
});
|
|
payRef.value.drawer = true;
|
|
};
|
|
|
|
const getOrderStatus = (id) => {
|
|
orderStatusApi({
|
|
order_sn: id,
|
|
})
|
|
.then((res) => {
|
|
if (res.data.paid == 1 || res.message == "支付成功") {
|
|
ElMessage({
|
|
message: res.message,
|
|
type: "success",
|
|
});
|
|
} else {
|
|
ElMessage({
|
|
message: res.message,
|
|
type: "error",
|
|
});
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="my-order">
|
|
<div class="header-nav">
|
|
<div
|
|
v-for="(item, index) in activeStoreList"
|
|
:key="index"
|
|
class="nav-item"
|
|
:class="{
|
|
'nav-item-active': activeStore == index,
|
|
'nav-item-radius1': activeStore == index + 1,
|
|
'nav-item-radius2': activeStore == index - 1,
|
|
}"
|
|
@click="activeStore = index"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
<div
|
|
class="nav-item"
|
|
:class="{
|
|
'nav-item-radius2': activeStore == activeStoreList.length - 1,
|
|
}"
|
|
style="flex: 1"
|
|
></div>
|
|
</div>
|
|
<div class="detail" v-loading="loading">
|
|
<div class="table" v-if="formData.orderProduct && activeStore == 0">
|
|
<div style="font-size: 0.9rem">
|
|
共计
|
|
<span style="color: #ff4a00">{{ formData.total_num }}</span> 件商品
|
|
</div>
|
|
<el-table
|
|
style="height: calc(100vh - 100px - 14rem)"
|
|
:data="formData.orderProduct"
|
|
>
|
|
<el-table-column prop="cart_info.product.store_name" label="商品信息">
|
|
<template #default="{ row }">
|
|
<div style="display: flex; align-items: center">
|
|
<el-image
|
|
style="height: 3rem; width: 3rem"
|
|
:src="
|
|
row.cart_info.productAttr.image ||
|
|
row.cart_info.product.image
|
|
"
|
|
></el-image>
|
|
<span style="margin-left: 0.5rem">{{
|
|
row.cart_info.product.store_name
|
|
}}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="cart_info.productAttr.price"
|
|
label="单价"
|
|
width="150"
|
|
/>
|
|
<el-table-column prop="product_num" label="数量" width="150" />
|
|
<el-table-column prop="total_price" label="总价" width="150" />
|
|
</el-table>
|
|
</div>
|
|
<div class="table" v-if="formData.orderProduct && activeStore == 1">
|
|
<div class="table-title">订单信息</div>
|
|
<div class="table-info">
|
|
<div class="info-item">
|
|
<div class="info-item-title">创建时间:</div>
|
|
<div class="info-item-info">{{ formData.create_time }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-title">商品总数:</div>
|
|
<div class="info-item-info">{{ formData.total_num }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-title">商品总价:</div>
|
|
<div class="info-item-info">¥{{ formData.total_price }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-title">支付时间:</div>
|
|
<div class="info-item-info">{{ formData.pay_time }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-title">优惠抵扣:</div>
|
|
<div class="info-item-info">¥{{ formData.deduction_price }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-title">实际支付:</div>
|
|
<div class="info-item-info">¥{{ formData.pay_price }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-title">支付方式:</div>
|
|
<div class="info-item-info">
|
|
<span v-if="formData.pay_type == 11">微信收款</span>
|
|
<span v-if="formData.pay_type == 12">现金支付</span>
|
|
<span v-if="formData.pay_type == 13">支付宝收款</span>
|
|
<span v-if="formData.pay_type == 0">余额支付</span>
|
|
<span v-if="formData.pay_type == 1">微信支付</span>
|
|
<span v-if="formData.pay_type == 9">商户余额支付</span>
|
|
<span v-if="formData.pay_type == 10">对公转账</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-title" v-if="formData.service_info">收银员信息</div>
|
|
<div
|
|
class="table-info"
|
|
v-if="formData.service_info"
|
|
style="flex-direction: column"
|
|
>
|
|
<div class="info-item">
|
|
<div class="info-item-title">头像:</div>
|
|
<div class="info-item-info">
|
|
<el-image
|
|
style="height: 4rem; width: 4rem; border-radius: 50%"
|
|
:src="formData.service_info.avatar"
|
|
></el-image>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-title">昵称:</div>
|
|
<div class="info-item-info">
|
|
{{ formData.service_info.nickname }}
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-item-title">账号:</div>
|
|
<div class="info-item-info">
|
|
{{ formData.service_info.account }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer" v-if="formData.service_info">
|
|
<div class="info">
|
|
<div class="ser">收银员: {{ formData.service_info.nickname }}</div>
|
|
<div class="price">
|
|
实付: <span>¥{{ formData.pay_price }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="handle" v-if="!formData.pay_time">
|
|
<el-button class="btn" type="primary" @click="rePay(formData)"
|
|
>重新支付</el-button
|
|
>
|
|
<el-button
|
|
class="btn"
|
|
type="primary"
|
|
@click="getOrderStatus(formData.order_sn)"
|
|
>检测状态</el-button
|
|
>
|
|
<el-button
|
|
class="btn"
|
|
type="success"
|
|
@click="orderLadingComfirm(formData.order_sn)"
|
|
>提单</el-button
|
|
>
|
|
</div>
|
|
<div class="handle" v-else>已支付</div>
|
|
</div>
|
|
</div>
|
|
<pay ref="payRef" />
|
|
<el-dialog v-model="dialogVisible" title="提示" width="500">
|
|
<span
|
|
>提单前请清空购物车, 避免提单的商品与购物车商品混合,
|
|
请确保购物车内无数据后再进行提单</span
|
|
>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button v-if="cartCount > 0" @click="goHome">
|
|
前去清空购物车
|
|
</el-button>
|
|
<el-button v-else type="primary" @click="orderLading">
|
|
确认提单
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.my-order {
|
|
border-radius: 1.2rem;
|
|
height: 100%;
|
|
flex: 1;
|
|
background-color: #fff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.header-nav {
|
|
display: flex;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
#f5f5f5 50%,
|
|
#fff 50%
|
|
); /* 创建渐变背景 */
|
|
.nav-item {
|
|
height: 4rem;
|
|
width: 8rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.2rem;
|
|
background-color: #f5f5f5;
|
|
border-radius: 1rem 1rem 0 0;
|
|
}
|
|
.nav-item-active {
|
|
background-color: #fff;
|
|
position: relative;
|
|
transition: 300ms;
|
|
}
|
|
.nav-item-radius1 {
|
|
border-radius: 0 0 1rem 0;
|
|
}
|
|
.nav-item-radius2 {
|
|
border-radius: 0 0 0 1rem;
|
|
}
|
|
}
|
|
.detail {
|
|
height: calc(100vh - 100px - 4rem);
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.table {
|
|
padding: 1rem;
|
|
padding-bottom: 6rem;
|
|
|
|
.table-title {
|
|
font-weight: bold;
|
|
padding-top: 1rem;
|
|
}
|
|
.table-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
color: #777;
|
|
font-size: 0.9rem;
|
|
padding-bottom: 2rem;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-item {
|
|
width: 33%;
|
|
display: flex;
|
|
padding-top: 1rem;
|
|
.info-item-title {
|
|
flex-shrink: 0;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
height: 6rem;
|
|
box-sizing: border-box;
|
|
padding: 0 1.5rem;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
box-shadow: 0 -1px 10px #eee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
.info {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
.ser {
|
|
font-weight: bold;
|
|
margin-right: 1rem;
|
|
}
|
|
.price {
|
|
margin-right: 1rem;
|
|
span {
|
|
color: #ff4a00;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.handle {
|
|
.btn {
|
|
border-radius: 4rem;
|
|
padding: 1.2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|