forked from natuka/web.puabadge.com
319 lines
8.9 KiB
Vue
319 lines
8.9 KiB
Vue
<template>
|
|
<div class="my-order">
|
|
<div class="header" @click="goBack">
|
|
<span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> {{ toValueWithout("订单详情") }}</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" v-if="order.type_id != 6">
|
|
<img class="avatar-font-img" :src="imageUrl" :alt="order.kind_name" />
|
|
</div>
|
|
<div class="avatar-front-box-double" v-if="order.type_id == 6">
|
|
<img class="avatar-font-img" :src="imageUrl" />
|
|
<img class="avatar-font-img" :src="backImageUrl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="status-info">
|
|
<div class="status-title">{{ getStatus(order.status) }}</div>
|
|
<div class="status-desc">
|
|
{{ toValueWithout("下单后预计需要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">{{ toValueWithout("收货信息") }}</div>
|
|
<div class="product-details">
|
|
<div class="product-row">
|
|
<span class="product-label">{{ toValueWithout("收货人信息") }}</span>
|
|
<span class="product-value">{{order.contact_name}} {{order.contact_mobile}}</span>
|
|
</div>
|
|
<div class="product-row">
|
|
<span class="product-label">{{ toValueWithout("收货地址") }}</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">{{ toValueWithout("产品信息") }}</div>
|
|
<div class="product-details">
|
|
<div class="product-row">
|
|
<span class="product-label">{{ toValueWithout("产品名称") }}</span>
|
|
<span class="product-value" v-if="order.type_id == 1">{{ order.prod_id == 7 ? toValueWithout('人物立体徽章') : toValueWithout('宠物立体徽章') }}</span>
|
|
<span class="product-value" v-if="order.type_id == 2">{{ order.prod_id == 7 ? toValueWithout('人物浮雕相框') : toValueWithout('宠物浮雕相框') }}</span>
|
|
<span class="product-value" v-if="order.type_id == 3">{{ order.prod_id == 7 ? toValueWithout('人物冰箱贴') : toValueWithout('宠物冰箱贴') }}</span>
|
|
<span class="product-value" v-if="order.type_id == 4">{{ order.prod_id == 1 ? toValueWithout('人物卡通手办') : toValueWithout('宠物卡通手办') }}</span>
|
|
<span class="product-value" v-if="order.type_id == 6">{{ order.prod_id == 25 ? toValueWithout('人物浮雕挂饰') : toValueWithout('宠物浮雕挂饰') }}</span>
|
|
</div>
|
|
<div class="product-row">
|
|
<span class="product-label">{{ toValueWithout("尺寸") }}</span>
|
|
<span class="product-value">{{order.model_size}}</span>
|
|
</div>
|
|
<div class="product-row" v-if="shape_name && order.type_id != 6">
|
|
<span class="product-label">{{ toValueWithout("形状") }}</span>
|
|
<span class="product-value">{{ toValueWithout(shape_name) }}</span>
|
|
</div>
|
|
<div class="product-row">
|
|
<span class="product-label">{{ toValueWithout("购买数量") }}</span>
|
|
<span class="product-value">{{order.count}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 0 16px;">
|
|
<van-divider />
|
|
</div>
|
|
<div class="product-info">
|
|
<div class="product-title">{{ toValueWithout("订单信息") }}</div>
|
|
<div class="product-details">
|
|
<div class="product-row">
|
|
<span class="product-label">{{ toValueWithout("购买订单id") }}</span>
|
|
<span class="product-value">{{order.sw_oid}}</span>
|
|
</div>
|
|
<div class="product-row">
|
|
<span class="product-label">{{ toValueWithout("购买时间") }}</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';
|
|
import { toValueWithout } from '@/lang/utils';
|
|
|
|
const route = useRoute();
|
|
const order = ref({})
|
|
const id = ref(0)
|
|
onMounted(() => {
|
|
id.value = route.query.id
|
|
getOrderDetail()
|
|
})
|
|
|
|
const shapeImage = ref('')
|
|
const imageUrl = ref('')
|
|
const backImageUrl = ref('')
|
|
const getStyle = ref('')
|
|
const shape_name = ref('')
|
|
const imageList = ref([])
|
|
|
|
function getOrderDetail() {
|
|
badgeApi.getOrderDetail({
|
|
id: id.value,
|
|
}).then(res => {
|
|
order.value = res;
|
|
imageUrl.value = res.path;
|
|
backImageUrl.value = res.back_path;
|
|
shapeImage.value = res.shape_details.frame_path;
|
|
shape_name.value = res.shape_details.name;
|
|
imageList.value = [
|
|
res.path,
|
|
res.back_path,
|
|
];
|
|
// 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 toValueWithout('待支付')
|
|
} else if(status == 2) {
|
|
return toValueWithout('已取消')
|
|
} else if(status == 100) {
|
|
return toValueWithout('生产中')
|
|
} else if(status == 200) {
|
|
return toValueWithout('待收货')
|
|
} else if(status == 300) {
|
|
return toValueWithout('已完成')
|
|
}
|
|
}
|
|
</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;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.avatar-back-img {
|
|
position: absolute;
|
|
width: 320px;
|
|
height: 320px;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
.avatar-front-box {
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
.avatar-font-img {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 320px;
|
|
border-radius: 10px;
|
|
}
|
|
.avatar-front-box-double {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.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> |