Skip to content

J
jiaxiu-miniapp
Commit 92cf4a33 authored by 彭佳妮（贵阳日报）'s avatar 彭佳妮（贵阳日报）
Browse files
Options

下载

parent 5185efb8
Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 25 deletions
src/pages/classify/detail.vue
View file @ 92cf4a33
......@@ -19,7 +19,7 @@
<img src="@/static/image/info.png" class="icon" />
<span class="title">信息</span>
</div>
<div class="iconbox">
<div class="iconbox" @click="handleDownload">
<img src="@/static/image/download.png" class="icon" />
<span class="title">{{ convertSize(catalog.enclosureList[index].fileSize) }}</span>
</div>
......@@ -35,13 +35,40 @@
<div class="content">
<div class="item">
<span class="label">图片名称:</span>
<span class="value">图片描述图片描述图片描述图片描述图片描述图片描述图片描述</span>
<span class="value">{{ catalog.enclosureList[index].enclosureDesc }}</span>
</div>
<div class="item">
<span class="label">图片名称</span>
<span class="label">标签信息:</span>
<div class="tagbox">
<div class="tag">动物</div>
<div class="tag">田园猫</div>
<div class="tag" v-for="(tagName, index) in catalog.tagName.split(',')" :key="index">{{ tagName
}}
</div>
</div>
</div>
</div>
<div class="bottom">
<span class="title">图组信息:</span>
<div class="card">
<div class="top">
<div class="userbox">
<img class="image" src="@/static/image/avatar.png" mode="aspectFill" />
<span class="name">{{ catalog.author }}</span>
</div>
<van-button icon="plus" type="primary" size="small">收藏</van-button>
</div>
<div class="detail">
<div class="item">
<span class="label">图组标题:</span>
<span class="value">{{ catalog.materialTitle }}</span>
</div>
<div class="item">
<span class="label">图组描述:</span>
<span class="value">{{ catalog.materialIntro }}</span>
</div>
<div class="item">
<span class="label">图组数量:</span>
<span class="value">{{ catalog.fileNum }}张</span>
</div>
</div>
</div>
</div>
......@@ -52,6 +79,9 @@
<script setup>
import { showImagePreview } from 'vant';
import { selectPictureById } from '@/api/publish'
import { useInitScroll } from '@/hooks/useScroll'
useInitScroll()
const fileDomain = import.meta.env.VITE_APP_FILE_URL
const previewImages = ref([])
......@@ -97,15 +127,103 @@ const handleViewDetail = () => {
showPop.value = true
}
// 单位转换
const convertSize = (sizeInKB) => {
if (sizeInKB < 1024) {
return sizeInKB + " K";
} else if (sizeInKB < 1024 * 1024) {
return (sizeInKB / 1024).toFixed(1) + " M";
} else if (sizeInKB < 1024 * 1024 * 1024) {
return (sizeInKB / (1024 * 1024)).toFixed(1) + " G";
} else {
return (sizeInKB / (1024 * 1024 * 1024)).toFixed(1) + " T"; }
if (sizeInKB == null || sizeInKB == undefined || sizeInKB == '') {
return '下载'
}
if (sizeInKB < 1024) {
return sizeInKB + " K";
} else if (sizeInKB < 1024 * 1024) {
return (sizeInKB / 1024).toFixed(1) + " M";
} else if (sizeInKB < 1024 * 1024 * 1024) {
return (sizeInKB / (1024 * 1024)).toFixed(1) + " G";
} else {
return (sizeInKB / (1024 * 1024 * 1024)).toFixed(1) + " T";
}
}
// 下载图片
const handleDownload = () => {
uni.downloadFile({
url: previewImages.value[index.value],
success: (res) => {
if (res.statusCode === 200) {
// 保存图片到相册
plus.gallery.save(res.tempFilePath, () => {
uni.showToast({
title: '图片保存成功',
icon: 'success'
});
}, (err) => {
console.error('保存图片失败', err);
uni.showToast({
title: '图片保存失败',
icon: 'none'
});
});
} else {
console.error('图片下载失败');
}
}, fail: (err) => {
console.error('图片下载失败', err);
}
});
// xma.downloadFile({
// url: previewImages.value[index.value], // 替换为你要下载的图片URL
// success: (res) => {
// if (res.statusCode === 200) {
// // 下载成功后保存图片到相册
// saveImage(res.tempFilePath);
// } else {
// console.error('下载图片失败');
// }
// },
// fail: (err) => {
// console.error('下载图片失败', err);
// }
// });
}
// function saveImage(filePath) {
// // 创建一个<a>元素
// const link = document.createElement('a');
// link.href = filePath;
// // 设置下载的文件名
// link.download = catalog.value.enclosureList[index.value].enclosureDesc + '.jpg';
// // 触发点击事件
// document.body.appendChild(link); link.click();
// // 移除该元素
// document.body.removeChild(link);
// }
function saveImage(url) {
fetch(url)
.then(response => response.blob())
.then(blob => {
// 创建一个下载链接
const link = document.createElement('a');
const objectUrl = URL.createObjectURL(blob);
link.href = objectUrl;
// 设置下载的文件名和后缀
link.download = catalog.value.enclosureList[index.value].enclosureDesc + '.jpg';
// 触发点击事件
document.body.appendChild(link);
link.click();
// 移除下载链接
document.body.removeChild(link);
URL.revokeObjectURL(objectUrl);
uni.showoast({
title: '下载成功',
icon: 'success'
})
})
.catch(error => {
uni.showoast({
title: '下载失败',
icon: 'none'
})
console.log('下载图片失败', error)
});
}
</script>
......@@ -200,15 +318,100 @@ const convertSize = (sizeInKB) => {
gap: 20rpx;
.label {
width: 130rpx;
font-size: 28rpx;
color: #707070;
}
.value {
max-width: 530rpx;
font-size: 28rpx;
color: #232524;
}
.tagbox {
max-width: 530rpx;
display: flex;
flex-wrap: wrap;
gap: 14rpx;
.tag {
background-color: #F3F8FE;
padding: 10rpx 12rpx;
border-radius: 6rpx;
color: #4C70AC;
font-size: 22rpx;
text-align: center;
}
}
}
}
.bottom {
display: flex;
flex-direction: column;
gap: 20rpx;
.title {
font-size: 28rpx;
color: #707070;
}
.card {
background-color: #F7F8FA;
border-radius: 10rpx;
padding: 30rpx 20rpx;
display: flex;
flex-direction: column;
gap: 30rpx;
.top {
display: flex;
align-items: center;
justify-content: space-between;
.userbox {
display: flex;
align-items: center;
gap: 20rpx;
.image {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
}
.name {
font-size: 28rpx;
color: #232524;
}
}
}
.detail {
display: flex;
flex-direction: column;
gap: 20rpx;
.item {
display: flex;
gap: 20rpx;
.label {
width: 130rpx;
font-size: 28rpx;
color: #707070;
}
.value {
max-width: 480rpx;
font-size: 28rpx;
color: #232524;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/pages/classify/list.vue
View file @ 92cf4a33
......@@ -14,16 +14,16 @@
v-if="dataList.length">
<div class="list">
<div class="item" v-for="(item, index) in dataList" :key="index"
@click="router.push({ name: 'home-content', params: { id: item.materialId } })">
@click="router.push({ name: 'classify-detail', params: { id: item.materialId } })">
<img :src="fileDomain + item.coverpicture">
<div class="desc">
<span class="title">
<van-text-ellipsis :content="item.materialTitle" />
</span>
<div class="tag">
<!-- <div class="tag">
<span v-for="(tagName, index) in item.tagName.split(',')" :key="index">{{ tagName
}}</span>
</div>
</div> -->
<div class="info">
<div class="user">
<img src="../../static/image/avatar.png">
......
src/utils/test.json
View file @ 92cf4a33
// {
// "uIdCardNo": "042301C037638FD0B0DC2C7E686103340DBFD84737E9E4E881641B38533B751CF13A2DE635C0C3E4C16DB80C2635857106D416748FDE4915DF4960F95D75E219EAFDF34BE8F6052649678978164A2E44898C6108E9188ABBEABA16D576B9A9C2C4660BC190F73E4CB9921A6034F2E437F1F087",
// "uMobile": "04E2B06A5932C633264C4E3460529C7884CBF1011FB544D7E5699C9D829ECA72209667C1A9652C79D342D37EDF42758CC228B3CE0F13C829205D83D33411BAD92126F684690B90D4CBBCE469D70720D535A2B1AD0113CD5F3039763B87BCA11D5856F496283F0626C0F0924A",
// "uName": "0452A3DEF6FB3C45F07705C062BC59A3F3FCD1769BAE16A9F75D7FE597AC6688DC3CFCCAF523518568F474600EC34991695E9C3857094CC4CB32850FF112F9960B9D0CF7D293C39591A22C77F16D2E670754D647E3B363440887239A6870C288BEE266C3A561EEA93881",
// "uNickname": "041C4CC7295ACC5012A29DC19F7E3643E897B8025A9D464B3C6B9A0FEA6BA10DF11AC8F91F7EC4B4D954DEE77CCB21B7A2C28F67A496121663183038E5D4C99BA8FD10F45563030F1936100FE19CB4553358172E5B1F5E3E9F300F97D086DB17C5D7B9C244C2503D9D7E2DC5DC0528E43025B2134CF48E2C1279EA8473B434C495DF06",
// "uid": "049322D0BAD3EC033D477CCB9A10A2B031F87E38B59B6E8E104F91AD7C8973BAD23AE3941F81F2401C1E21C862933E10245EC0F0452AB133431F2006986FCEBDA6179119555D46CCFF1752654C3DA85EA68E3A125B4B46FF6F9030064F0E26179F0E3B5BAC5116205DA7B1E8852EFDB78DA54F38A36D0DE5A3EE31F2A24030AFE1"
// }
{
"uIdCardNo": "042301C037638FD0B0DC2C7E686103340DBFD84737E9E4E881641B38533B751CF13A2DE635C0C3E4C16DB80C2635857106D416748FDE4915DF4960F95D75E219EAFDF34BE8F6052649678978164A2E44898C6108E9188ABBEABA16D576B9A9C2C4660BC190F73E4CB9921A6034F2E437F1F087",
"uMobile": "04E2B06A5932C633264C4E3460529C7884CBF1011FB544D7E5699C9D829ECA72209667C1A9652C79D342D37EDF42758CC228B3CE0F13C829205D83D33411BAD92126F684690B90D4CBBCE469D70720D535A2B1AD0113CD5F3039763B87BCA11D5856F496283F0626C0F0924A",
"uName": "0452A3DEF6FB3C45F07705C062BC59A3F3FCD1769BAE16A9F75D7FE597AC6688DC3CFCCAF523518568F474600EC34991695E9C3857094CC4CB32850FF112F9960B9D0CF7D293C39591A22C77F16D2E670754D647E3B363440887239A6870C288BEE266C3A561EEA93881",
"uNickname": "041C4CC7295ACC5012A29DC19F7E3643E897B8025A9D464B3C6B9A0FEA6BA10DF11AC8F91F7EC4B4D954DEE77CCB21B7A2C28F67A496121663183038E5D4C99BA8FD10F45563030F1936100FE19CB4553358172E5B1F5E3E9F300F97D086DB17C5D7B9C244C2503D9D7E2DC5DC0528E43025B2134CF48E2C1279EA8473B434C495DF06",
"uid": "049322D0BAD3EC033D477CCB9A10A2B031F87E38B59B6E8E104F91AD7C8973BAD23AE3941F81F2401C1E21C862933E10245EC0F0452AB133431F2006986FCEBDA6179119555D46CCFF1752654C3DA85EA68E3A125B4B46FF6F9030064F0E26179F0E3B5BAC5116205DA7B1E8852EFDB78DA54F38A36D0DE5A3EE31F2A24030AFE1"
}
{"uIdCardNo": "04F4E8F9DE07335FB719CC656B62F5B473F35742F0F8D90C1DB352BD96FB9B3CB1C2AB2E44CCA9BC05CDAE2FF763D3F178BEA7D8F7437E2920CBB2C4E8C225CBDC839FC729F3097C567B5643902ADDB57AFADFCE1FEE11A6F2599B3ABDDA69F3D21B51EEAB3E379D125CA469E6A4BC09A374D8", "uMobile": "0436C870C37A666DB60C04EE44EBCB19411F64CC8F9FCBAE5CA5211ACF95AD82A34D1FBB16CA7F845CA28056F330F56259F0FE3024BADB4CEB8D3655A3967973E3E54D27309C036C515090DCC3D3A4796C111CAC72DD7B333CAFBDA50A48ECE5C6DBF69D1268D9C722ED827E", "uName": "04B38B8655808328AF4DE335BE7EEA02C15BA66A802236D8FD7813EB59E2133B325443C8DA5EAC7CBD226B0B8616AFE2720934D73A5D70507FC72DB9B38B1DB73EAF75EEA7920FBEB453EB1281DFDCBF3F3097609A0F316C64FFF4BA844BBAA43FCAF5B4AABCA6567E3B", "uNickname": "047B772E4223FAC4E7928E1AA8907A85A4E35F73B5F56FC415D48E2E98A90F755BB126A06CBC7D8B0079BA2F4240E5802E92C455AED55F08BEB764FAD81D4512E9852AC23D1B72D9563763097CD5AC0AC859737014B052D96D6A7D2E7077D77525993735BA7B30379ED98902697FAD2FA3", "uid": "049C70D1191E39AC8538B61D2975A655A188E8E31DB84321B49D10FB5D3319A89F794892CD92753EAD25E59E8AD4D7016AA1D2017B943DE2549D2E89D6DE1C4FE77F961FDD3C377815394F6FAE5472FC2B95936C546CCC0A42EFC91B88CE9CFE1D46F8658A14B4CC0D887D34291FB3DDA14944A225FA6840D02F1AD8395D347C72"}
\ No newline at end of file
// {"uIdCardNo": "04F4E8F9DE07335FB719CC656B62F5B473F35742F0F8D90C1DB352BD96FB9B3CB1C2AB2E44CCA9BC05CDAE2FF763D3F178BEA7D8F7437E2920CBB2C4E8C225CBDC839FC729F3097C567B5643902ADDB57AFADFCE1FEE11A6F2599B3ABDDA69F3D21B51EEAB3E379D125CA469E6A4BC09A374D8", "uMobile": "0436C870C37A666DB60C04EE44EBCB19411F64CC8F9FCBAE5CA5211ACF95AD82A34D1FBB16CA7F845CA28056F330F56259F0FE3024BADB4CEB8D3655A3967973E3E54D27309C036C515090DCC3D3A4796C111CAC72DD7B333CAFBDA50A48ECE5C6DBF69D1268D9C722ED827E", "uName": "04B38B8655808328AF4DE335BE7EEA02C15BA66A802236D8FD7813EB59E2133B325443C8DA5EAC7CBD226B0B8616AFE2720934D73A5D70507FC72DB9B38B1DB73EAF75EEA7920FBEB453EB1281DFDCBF3F3097609A0F316C64FFF4BA844BBAA43FCAF5B4AABCA6567E3B", "uNickname": "047B772E4223FAC4E7928E1AA8907A85A4E35F73B5F56FC415D48E2E98A90F755BB126A06CBC7D8B0079BA2F4240E5802E92C455AED55F08BEB764FAD81D4512E9852AC23D1B72D9563763097CD5AC0AC859737014B052D96D6A7D2E7077D77525993735BA7B30379ED98902697FAD2FA3", "uid": "049C70D1191E39AC8538B61D2975A655A188E8E31DB84321B49D10FB5D3319A89F794892CD92753EAD25E59E8AD4D7016AA1D2017B943DE2549D2E89D6DE1C4FE77F961FDD3C377815394F6FAE5472FC2B95936C546CCC0A42EFC91B88CE9CFE1D46F8658A14B4CC0D887D34291FB3DDA14944A225FA6840D02F1AD8395D347C72"}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment