129 lines
2.8 KiB
Vue
129 lines
2.8 KiB
Vue
<template>
|
||
<view class="share-report-btns">
|
||
<!-- 分享按钮 -->
|
||
<view class="action-btn share-btn" @tap="handleShare">
|
||
<image class="btn-icon" src="/static/assetDetail/fenxiang.png" mode="aspectFit"></image>
|
||
<text class="btn-text">分享</text>
|
||
</view>
|
||
<!-- 举报按钮 - 只在不是自己的资产时显示 -->
|
||
<view v-if="showReport" class="action-btn report-btn" @tap="handleReport">
|
||
<image class="btn-icon" src="/static/assetDetail/jubao.png" mode="aspectFit"></image>
|
||
<text class="btn-text">举报</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分享弹窗 -->
|
||
<ShareModal
|
||
:visible="showShareModal"
|
||
:coverUrl="shareCoverUrl"
|
||
:ownerNickname="ownerNickname"
|
||
:qrcodeUrl="shareQrcodeUrl"
|
||
@close="showShareModal = false"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import ShareModal from './ShareModal.vue';
|
||
|
||
const props = defineProps({
|
||
// 资产拥有者的昵称
|
||
ownerNickname: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 资产ID，用于分享
|
||
assetId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 封面图片
|
||
coverUrl: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
});
|
||
|
||
// 当前用户昵称
|
||
const currentNickname = computed(() => {
|
||
try {
|
||
const userStr = uni.getStorageSync('user');
|
||
if (userStr) {
|
||
const userInfo = JSON.parse(userStr);
|
||
return userInfo?.nickname || '';
|
||
}
|
||
} catch (e) {
|
||
console.error('获取用户信息失败:', e);
|
||
}
|
||
return '';
|
||
});
|
||
|
||
// 是否显示举报按钮（不是自己的资产时显示）
|
||
const showReport = computed(() => {
|
||
return props.ownerNickname && currentNickname.value && props.ownerNickname !== currentNickname.value;
|
||
});
|
||
|
||
// 分享弹窗状态
|
||
const showShareModal = ref(false);
|
||
const shareCoverUrl = ref('');
|
||
const shareQrcodeUrl = ref('');
|
||
|
||
// 分享
|
||
const handleShare = () => {
|
||
shareCoverUrl.value = props.coverUrl;
|
||
// TODO: 生成二维码 URL，实际项目中需要调用后端 API 生成
|
||
shareQrcodeUrl.value = '/static/icon/qrcode-placeholder.png';
|
||
showShareModal.value = true;
|
||
};
|
||
|
||
// 举报
|
||
const handleReport = () => {
|
||
uni.showModal({
|
||
title: '举报',
|
||
content: '确定要举报该藏品吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// TODO: 调用举报API
|
||
uni.showToast({ title: '举报成功', icon: 'success' });
|
||
}
|
||
}
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.share-report-btns {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 24rpx;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.action-btn:active {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.btn-icon {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.5));
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
font-family: 'yt', sans-serif;
|
||
text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.6);
|
||
}
|
||
</style> |