index.vue
2.8 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
<div class="book-item van-hairline--bottom" @click="handle">
<van-row>
<van-col span="8">
<van-image width="7rem" height="7rem" :src="item.cover" fit="contain" lazy-load style="text-align: center;">
<template #:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
</van-col>
<van-col class="wrapper" span="16">
<p class="title van-multi-ellipsis--l2">{{ item.name }}</p>
<div v-if="type === 'C'" class="van-multi-ellipsis--l2 content">{{ item.note }}</div>
<div class="sub">
<van-icon :name="icon_video" /> <span>{{ item.prod_num }}个作品</span>
</div>
<div v-if="type === 'B'" class="upload" @click="onUpload(item)">上传视频</div>
</van-col>
</van-row>
</div>
<van-overlay :show="show" z-index="9999">
<div class="overlay-wrapper" @click.stop>
<van-loading size="24px">跳转中...</van-loading>
</div>
</van-overlay>
</template>
<script setup>
import icon_video from '@images/video.png'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { JSJ_FORM_B } from '@/constant'
const props = defineProps({
item: Object,
type: String,
user_id: Number
})
const emit = defineEmits(['on-click']);
const handle = () => {
if (props.type === 'C') { // 类型是客户端时，才能查看
emit('on-click', props.item)
}
}
// 上传视频
const show = ref(false);
const onUpload = (v) => {
show.value = true;
// x_field_1是金数据表单传入的参数，老师上传的格式为：user_id-book_id-perf_id，perf_id 为 0
let str = `${props.user_id}-${v.id}-0`;
location.href = `${JSJ_FORM_B}?x_field_1=${str}`;
// BUG: 关闭loading临时处理
setTimeout(() => {
show.value = false;
}, 2000);
}
onBeforeRouteLeave(() => {
})
</script>
<script>
export default {
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.book-item {
// margin: 1rem;
padding: 1rem;
.wrapper {
padding-left: 1rem;
.title {
font-size: 1.15rem;
color: #222222;
font-weight: bold;
margin: 0.5rem 0;
}
.content {
font-size: 0.85rem;
color: #999999;
margin: 0.5rem 0;
}
.sub {
font-size: 0.85rem;
color: #999999;
margin-top: 0.5rem;
}
.upload {
color: @base-font-color;
background-color: @base-color;
border-radius: 15px;
width: 4rem;
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
text-align: center;
margin-top: 1rem;
}
}
}
.overlay-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: auto;
text-align: center;
}
</style>