forked from natuka/web.puabadge.com
Initial commit
This commit is contained in:
natuka committed
commit
84061c9a18
243 files changed
+63148
No files matched your search
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="my-order">
|
||||
<div class="header" @click="goBack">
|
||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" /> 返回</span>
|
||||
</div>
|
||||
<div class="order-status">
|
||||
<div class="avatar-wrapper">
|
||||
<img class="avatar-img" src="@/assets/badge/suiji.png" alt="生产中" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<div class="status-title">生产中</div>
|
||||
<div class="status-desc">
|
||||
下单后预计需要7天完成生产发货。如对产品有疑问，可以联系客服咨询。
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 16px;">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-title">产品信息</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">产品名称</span>
|
||||
<span class="product-value">立体徽章</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">尺寸</span>
|
||||
<span class="product-value">5cm</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">购买数量</span>
|
||||
<span class="product-value">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 16px;">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="address-info" style="padding: 0 16px;">
|
||||
<div class="address-title">收货信息</div>
|
||||
<div class="address-row">
|
||||
<img class="address-img" src="@/assets/badge/location.png" alt="" >
|
||||
<span class="address-name">张先生</span>
|
||||
<span class="address-phone">136****0731</span>
|
||||
</div>
|
||||
<div class="address-detail">
|
||||
详细地址详细地址详细地址详细地址详细地址详细地址
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 16px;">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-title">订单信息</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">购买订单id</span>
|
||||
<span class="product-value">O98462</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">购买时间</span>
|
||||
<span class="product-value">2025-03-24 16:12:46</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 30px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
function goBack() {
|
||||
router.push('/badge/myOrder');
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
.back-icon {
|
||||
margin-right: 8px;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.order-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.avatar-wrapper {
|
||||
width: 85vw;
|
||||
height: 85vw;
|
||||
border-radius: 50%;
|
||||
box-shadow: 2px 2px 4px #00000042,inset -2px -2px 4px #00000048,inset 2px 2px 4px #ffffffb4;
|
||||
margin-bottom: 24px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.status-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.status-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-desc {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
.product-info {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.product-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-label {
|
||||
color: #bdbdbd;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-value {
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.address-title {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.address-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.address-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.address-name {
|
||||
margin-right: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.address-phone {
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.address-detail {
|
||||
font-size: 12px;
|
||||
color: #bdbdbd;
|
||||
margin-left: 24px;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user