108 lines
2.1 KiB
Vue
108 lines
2.1 KiB
Vue
<template>
|
||
<view class="private-image">
|
||
<image v-if="signedUrl" :src="signedUrl" :mode="mode" :style="{ width: width, height: height }"
|
||
@click="onClick" @error="onError" />
|
||
<view v-else-if="loading" class="ph">加载中…</view>
|
||
<view v-else-if="error" class="ph err">{{ error }}</view>
|
||
<view v-else-if="!path" class="ph">未上传</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// PrivateImage —— 私密文件查看（小程序，商家本人）
|
||
//
|
||
// 用法：
|
||
// <PrivateImage :path="form.id_card_front" width="200rpx" height="120rpx" />
|
||
//
|
||
// 不传 targetUserId —— 服务端会校验 object key 必须属于当前登录用户
|
||
import {
|
||
signPrivateView
|
||
} from '@/utils/uploadOSS.js'
|
||
|
||
export default {
|
||
name: 'PrivateImage',
|
||
props: {
|
||
path: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '200rpx'
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: '120rpx'
|
||
},
|
||
mode: {
|
||
type: String,
|
||
default: 'aspectFill'
|
||
},
|
||
// mount 立即签发；click 点击才签
|
||
trigger: {
|
||
type: String,
|
||
default: 'mount'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
signedUrl: '',
|
||
loading: false,
|
||
error: ''
|
||
}
|
||
},
|
||
watch: {
|
||
path: {
|
||
immediate: true,
|
||
handler(v) {
|
||
if (v && this.trigger === 'mount') this.fetch()
|
||
else this.signedUrl = ''
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
async fetch() {
|
||
if (!this.path) return
|
||
this.loading = true
|
||
this.error = ''
|
||
try {
|
||
const res = await signPrivateView(this.path)
|
||
this.signedUrl = res.url
|
||
} catch (e) {
|
||
this.error = e.message || '加载失败'
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
onClick() {
|
||
if (this.signedUrl) {
|
||
uni.previewImage({
|
||
urls: [this.signedUrl]
|
||
})
|
||
} else if (this.trigger === 'click') {
|
||
this.fetch()
|
||
}
|
||
},
|
||
onError() {
|
||
this.error = '图片加载失败'
|
||
this.signedUrl = ''
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.private-image .ph {
|
||
display: inline-block;
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 22rpx;
|
||
padding: 16rpx;
|
||
border: 2rpx dashed #ccc;
|
||
}
|
||
|
||
.private-image .ph.err {
|
||
color: #f56c6c;
|
||
}
|
||
</style>
|