forked from natuka/web.puabadge.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
8.0 KiB
309 lines
8.0 KiB
<template> |
|
<div class="my-order"> |
|
<div class="header" @click="goBack"> |
|
<span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> 订单详情</span> |
|
</div> |
|
<div class="order-status"> |
|
<div class="avatar-wrapper"> |
|
<!-- <img v-if="shapeImage" class="avatar-back-img" :src="shapeImage" alt=""> --> |
|
<div class="avatar-front-box"> |
|
<img class="avatar-font-img" :src="imageUrl" :alt="order.kind_name" /> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="status-info"> |
|
<div class="status-title">{{ getStatus(order.status) }}</div> |
|
<div class="status-desc"> |
|
下单后预计需要10天完成生产发货。如对产品有疑问，可以联系客服咨询。 |
|
</div> |
|
</div> |
|
<div style="padding: 0 16px;"> |
|
<van-divider /> |
|
</div> |
|
<div class="product-info" v-if="order.use_type == 2"> |
|
<div class="product-title">收货信息</div> |
|
<div class="product-details"> |
|
<div class="product-row"> |
|
<span class="product-label">收货人信息</span> |
|
<span class="product-value">{{order.contact_name}} {{order.contact_mobile}}</span> |
|
</div> |
|
<div class="product-row"> |
|
<span class="product-label">收货地址</span> |
|
<span class="product-value">{{order.province_name}} {{order.city_name}} {{order.county_name}} {{order.address}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="padding: 0 16px;" v-if="order.use_type == 2"> |
|
<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" v-if="order.type_id == 1">{{ order.prod_id == 7 ? '人物立体徽章' : '宠物立体徽章' }}</span> |
|
<span class="product-value" v-if="order.type_id == 2">{{ order.prod_id == 7 ? '人物浮雕相框' : '宠物浮雕相框' }}</span> |
|
<span class="product-value" v-if="order.type_id == 3">{{ order.prod_id == 7 ? '人物冰箱贴' : '宠物冰箱贴' }}</span> |
|
</div> |
|
<div class="product-row"> |
|
<span class="product-label">尺寸</span> |
|
<span class="product-value">{{order.model_size}}</span> |
|
</div> |
|
<div class="product-row" v-if="shape_name"> |
|
<span class="product-label">形状</span> |
|
<span class="product-value">{{shape_name}}</span> |
|
</div> |
|
<div class="product-row"> |
|
<span class="product-label">购买数量</span> |
|
<span class="product-value">{{order.count}}</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">{{order.sw_oid}}</span> |
|
</div> |
|
<div class="product-row"> |
|
<span class="product-label">购买时间</span> |
|
<span class="product-value">{{order.pay_at}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="height: 30px;"></div> |
|
</div> |
|
</template> |
|
<script setup lang="ts"> |
|
import { useRouter } from 'vue-router'; |
|
import * as badgeApi from '@/api/badge'; |
|
import { onMounted, ref } from 'vue'; |
|
import { useRoute } from 'vue-router'; |
|
const route = useRoute(); |
|
const order = ref({}) |
|
const id = ref(0) |
|
onMounted(() => { |
|
id.value = route.query.id |
|
getOrderDetail() |
|
}) |
|
|
|
const shapeImage = ref('') |
|
const imageUrl = ref('') |
|
const getStyle = ref('') |
|
const shape_name = ref('') |
|
|
|
function getOrderDetail() { |
|
badgeApi.getOrderDetail({ |
|
id: id.value, |
|
}).then(res => { |
|
order.value = res |
|
imageUrl.value = res.path |
|
shapeImage.value = res.shape_details.frame_path |
|
shape_name.value = res.shape_details.name |
|
// if (res.shape_details) { |
|
// ImageShow(res.shape_details) |
|
// } |
|
}) |
|
} |
|
|
|
const ImageShow = (item: any) => { |
|
const scale = 0.6 |
|
const img = new Image() |
|
img.src = item.frame_path |
|
img.onload = () => { |
|
console.log('img', img) |
|
const ratioWidth = 320 / img.width; |
|
const ratioHeight = 320 / img.height; |
|
const x = item.axisx * ratioWidth * scale; |
|
const y = item.axisy * ratioHeight * scale; |
|
const path_width = item.width * ratioWidth * scale; |
|
const path_height = item.height * ratioHeight * scale; |
|
getStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;transform: rotate3D(1, 1, 0, 0deg)` |
|
} |
|
} |
|
|
|
const router = useRouter(); |
|
function goBack() { |
|
router.back() |
|
} |
|
function getStatus(status: number) { |
|
if(status == 1) { |
|
return '待支付' |
|
} else if(status == 2) { |
|
return '已取消' |
|
} else if(status == 100) { |
|
return '生产中' |
|
} else if(status == 200) { |
|
return '待收货' |
|
} else if(status == 300) { |
|
return '已完成' |
|
} |
|
} |
|
</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 { |
|
margin: 0 auto; |
|
width: 100vw; |
|
height: 100vw; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
flex-direction: column; |
|
} |
|
.avatar-wrapper { |
|
position: relative; |
|
width: 320px; |
|
height: 320px; |
|
} |
|
.avatar-back-img { |
|
position: absolute; |
|
width: 320px; |
|
height: 320px; |
|
top: 0; |
|
left: 0; |
|
z-index: 2; |
|
} |
|
.avatar-front-box { |
|
width: 320px; |
|
height: 320px; |
|
position: absolute; |
|
z-index: 1; |
|
} |
|
.avatar-font-img { |
|
width: 100%; |
|
height: auto; |
|
border-radius: 10px; |
|
} |
|
.progress-image-item-shadow { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5),inset -2px -2px 4px rgba(0, 0, 0, 0.2); |
|
border-radius: 50%; |
|
} |
|
.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> |