index.vue
3.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!--
* @Date: 2024-07-23 18:31:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-24 11:00:42
* @FilePath: /temple_material_request/src/components/materialDetail/index.vue
* @Description: 物资详情页面
-->
<template>
<div class="material-detail-page">
<van-popup
v-model:show="showRight"
position="right"
closeable
@close="onClose"
:style="{ height: '100%', width: '100%' }"
>
<div style="margin-top: 3rem; background-color: white;">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="padding: 2rem 5rem; padding-bottom: 2rem; border: 1px solid #F2EDE6; background-color: #FFFDF6; text-align: center;">
<van-image
width="6rem"
height="6rem"
fit="contain"
src="https://cdn.ipadbiz.cn/oa/pic/%E7%89%A9%E8%B5%84%E5%9B%BE@2x.png"
/>
<div style="color: #e0d0ba; margin-top: 1rem;">物资图正在整理中</div>
</div>
</div>
<div style="text-align: center; font-weight: bold; color: #A67939; font-size: 1.15rem; margin: 1.5rem auto;">口袋义工服T恤（绿）</div>
<div style="color: #1C1C1C; background-color: #F2F2F2; font-size: 1rem; font-weight: bold; padding: 0.5rem 1.5rem;">基本信息</div>
<div style="padding: 1rem;">
<van-row style="margin-bottom: 0.5rem;">
<van-col span="8" style="color: #AFAFAF;">编码</van-col>
<van-col span="16">XFZ0021004</van-col>
</van-row>
<van-row style="margin-bottom: 0.5rem;">
<van-col span="8" style="color: #AFAFAF;">规格</van-col>
<van-col span="16">XXL</van-col>
</van-row>
<van-row style="margin-bottom: 0.5rem;">
<van-col span="8" style="color: #AFAFAF;">单位</van-col>
<van-col span="16">件</van-col>
</van-row>
<van-row style="margin-bottom: 0.5rem;">
<van-col span="8" style="color: #AFAFAF;">分类</van-col>
<van-col span="16">新服装</van-col>
</van-row>
<van-row style="margin-bottom: 0.5rem;">
<van-col span="8" style="color: #AFAFAF;">描述</van-col>
<van-col span="16">/</van-col>
</van-row>
<van-row style="margin-bottom: 0.5rem;">
<van-col span="8" style="color: #AFAFAF;">条码</van-col>
<van-col span="16">/</van-col>
</van-row>
<van-row style="margin-bottom: 0.5rem;">
<van-col span="8" style="color: #AFAFAF;">价格</van-col>
<van-col span="16">/</van-col>
</van-row>
<van-row style="margin-bottom: 0.5rem;">
<van-col span="8" style="color: #AFAFAF;">是否可定</van-col>
<van-col span="16">可定</van-col>
</van-row>
<van-row style="margin-bottom: 0.5rem;">
<van-col span="8" style="color: #AFAFAF;">状态</van-col>
<van-col span="16">上架</van-col>
</van-row>
</div>
</div>
</van-popup>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const props = defineProps({
show: Boolean,
});
const emit = defineEmits(['close']);
const showRight = ref(false);
const onClose = () => {
emit('close');
}
// 监听字段变化
watch(
() => props.show,
(v) => {
showRight.value = v;
}
);
</script>
<style lang="less" scoped>
.material-detail-page {}
</style>