detail copy.vue
3.08 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
<template>
<view class="main">
<view class="" style="padding: 10px;background-color: #fff;margin-bottom: 5px;border-radius: 5px;">
<u-subsection :list="list" :current="current" @change="change"></u-subsection>
</view>
<view class="box">
<view class="box_item" v-if="current == 0">
<view class="f1">设备名：</view>
<view class="f2">安全阀</view>
</view>
<view class="box_item" v-if="current == 0">
<view class="f1">设备编号：</view>
<view class="f2">001</view>
</view>
<view class="box_item" v-if="current == 0">
<view class="f1">故障描述：</view>
<view class="f2">有一些松动</view>
</view>
<view class="box_item" v-if="current == 0">
<view class="f1">图片、图纸：</view>
<view class="f3" @click="cktp">
图片名
</view>
</view>
<view class="box_item" v-if="current == 2">
<view class="f1">视频教程：</view>
<view class="f3" @click="cksp">
视频名
</view>
</view>
<view class="box_item" v-if="current == 1">
<view class="f1">案例分析：</view>
<view class="f3" @click="ylwj">
案例名
</view>
</view>
<view class="" style="margin-top: 20px;" v-if="show">
<video style="width: 100%;"
src="https://jp.lvhenongmu.com/profile/upload/2024/10/08/compress_video_1010982350_20241008194210A019.mp4"
class="my-Video"></video>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
list: ['故障信息', '案件分析', '视频教程'],
// 或者如下，也可以配置keyName参数修改对象键名
// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
current: 0
}
},
methods: {
change(e){
this.current = e
},
cksp() {
this.show = !this.show
},
cktp() {
uni.previewImage({
urls: [
"http://115.29.210.249/tggPic/content/2021-09/1630475389708.jpg"], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
current: '', // 当前显示图片的http链接，默认是第一个
})
},
ylwj() {
uni.downloadFile({
url: 'https://jp.lvhenongmu.com/profile/upload/2024/10/25/竞价成交结果_20241025184648.xlsx',
success: function(res1) {
console.log("res", res1);
var filePath = res1.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function(res2) {
console.log('打开文档成功');
}
});
}
});
},
}
}
</script>
<style scoped lang="scss">
.main {
padding: 7px;
background-color: #F8F8F8;
min-height: 100vh;
.title {
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
background-color: #fff;
}
.box {
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
background-color: #fff;
.box_item {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px dashed #ccc;
align-items: center;
.f1 {}
.f3 {
color: #38beff;
border-bottom: 1px solid #38beff;
}
}
}
}
</style>