‘‘
3 years ago
19 changed files with 774 additions and 26 deletions
@ -0,0 +1,490 @@ |
|||
<template> |
|||
<view class="imgDetail"> |
|||
<image class="main-img" :src="detailMsg.imgUrl" mode=""></image> |
|||
<view class="toolbar"> |
|||
<view class="toolbar-box"> |
|||
<image v-if="detailMsg.isHot ==='0'" src="../../static/hot-not.png" mode=""></image> |
|||
<image v-else src="../../static/hot-yes.png" mode=""></image> |
|||
</view> |
|||
<view class="toolbar-box" @click="download(detailMsg.imgUrl)"> |
|||
<image v-if="isDownload" src="../../static/download-select.png" mode=""></image> |
|||
<image v-else src="../../static/download.png" mode=""></image> |
|||
<text>下载</text> |
|||
</view> |
|||
<view class="toolbar-box" @click="likeCollect('isLike')"> |
|||
<image v-if="isLike" src="../../static/like-select.png" mode=""></image> |
|||
<image v-else src="../../static/like.png" mode=""></image> |
|||
<text>喜欢</text> |
|||
</view> |
|||
<view class="toolbar-box" @click="likeCollect('isCollect')"> |
|||
<image v-if="isCollect" src="../../static/collect-select.png" mode=""></image> |
|||
<image v-else src="../../static/collect.png" mode=""></image> |
|||
<text>收藏</text> |
|||
</view> |
|||
<view class="toolbar-box share-box"> |
|||
<button open-type="share"> |
|||
<image src="../../static/share.png" mode=""></image> |
|||
<text>分享</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
detailsTiktokImg, // 获取图片详情 |
|||
judgeTiktokLike, // 查询是否点赞过 |
|||
judgeTiktokCollect, // 查询是否收藏过 |
|||
tiktokLike, // 点赞 |
|||
tiktokUnLike, // 取消点赞 |
|||
tiktokCollect, // 收藏 |
|||
tiktokUnCollect, // 取消收藏 |
|||
queryCreatorScanCodeById, //获取艺术家搜索码 |
|||
insertOrUpdatePreAdProfit, //新增/更新艺术家即将入账广告收益 |
|||
insertOrUpdatePreInviteProfit, // 新增/更新艺术家即将入账邀请收益 |
|||
checkUserCanDownload // 检查某平台用户当日下载次数是否超标 |
|||
} from '@/api/creator.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
detailMsg: {}, // 图片信息 |
|||
userInfo: {}, // 登录用户信息 |
|||
isDownload: false, // 是否已下载 |
|||
isLike: false, // 是否点赞/喜欢 |
|||
isCollect: false, // 是否收藏, |
|||
scanCode: undefined, //艺术家搜索码 |
|||
canDownload: false //能否下载 false为能下载 |
|||
|
|||
} |
|||
}, |
|||
created() { |
|||
const detailId = uni.getStorageSync('detailId') |
|||
if (detailId) { |
|||
this.getImgDetail(detailId) |
|||
} else { |
|||
this.getImgDetail(detailId) |
|||
} |
|||
}, |
|||
onShareAppMessage(res) { |
|||
if (res.from === 'button') { // 来自页面内分享按钮 |
|||
console.log(res) |
|||
} |
|||
return { |
|||
title: '来看看艺术家[' + this.scanCode + ']精心准备的图片吧~', |
|||
path: `/pages/creator/imgDetail?id=${this.userInfo.id}`, |
|||
bgImgUrl: `${this.detailMsg.imgUrl}` |
|||
} |
|||
uni.showToast({ |
|||
title: '分享成功', |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 图片详情 |
|||
async getImgDetail(id) { |
|||
const res = await detailsTiktokImg(id) |
|||
console.log('res', res) |
|||
if (res.data.code === 200) { |
|||
this.detailMsg = res.data.data |
|||
console.log('图片详情', res) |
|||
const result = await queryCreatorScanCodeById(this.detailMsg.creatorId) |
|||
if (result.data.code === 200) { |
|||
this.scanCode = result.data.data.scanCode |
|||
} else { |
|||
uni.showToast({ |
|||
title: '该艺术家不存在!', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
uni.getStorage({ |
|||
key: 'userInfo', |
|||
success: res => { |
|||
this.userInfo = res.data |
|||
console.log('userInfo', this.userInfo) |
|||
this.searchIsLike() |
|||
this.searchisCollect() |
|||
this.checkUserDownload() |
|||
} |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '请输入艺术家代号', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
// 查询是否点赞 |
|||
async searchIsLike() { |
|||
const params = { |
|||
imgId: this.detailMsg.id, |
|||
userId: this.userInfo.id |
|||
} |
|||
console.log('params', this.detailMsg, params) |
|||
const res = await judgeTiktokLike(params) |
|||
if (res.data.code === 200) { |
|||
this.isLike = res.data.data |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
// 查询是否收藏过 |
|||
async searchisCollect() { |
|||
const params = { |
|||
imgId: this.detailMsg.id, |
|||
userId: this.userInfo.id |
|||
} |
|||
const res = await judgeTiktokCollect(params) |
|||
if (res.data.code === 200) { |
|||
this.isCollect = res.data.data |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
// 点赞/收藏 |
|||
async likeCollect(val) { |
|||
const params = { |
|||
imgId: this.detailMsg.id, |
|||
userId: this.userInfo.id |
|||
} |
|||
if (val === 'isLike') { |
|||
this.isLike = !this.isLike |
|||
console.log('this.isLike', this.isLike) |
|||
if (this.isLike) { |
|||
//点赞 |
|||
console.log('点赞') |
|||
const res = await tiktokLike(params) |
|||
if (res.data.code === 200) {} else { |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} else { |
|||
//取消点赞 |
|||
console.log('取消点赞') |
|||
const res = await tiktokUnLike(params) |
|||
if (res.data.code === 200) {} else { |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
} else if (val === 'isCollect') { |
|||
this.isCollect = !this.isCollect |
|||
if (this.isCollect) { |
|||
//收藏 |
|||
console.log('收藏') |
|||
const res = await tiktokCollect(params) |
|||
if (res.data.code === 200) {} else { |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} else { |
|||
//取消收藏 |
|||
console.log('取消收藏') |
|||
const res = await tiktokUnCollect(params) |
|||
if (res.data.code === 200) {} else { |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
}, |
|||
//写入图片广告收益 |
|||
async insertPreAdProfit() { |
|||
const params = { |
|||
imgId: this.detailMsg.id, |
|||
creatorId: this.detailMsg.creatorId, |
|||
scanCode: this.scanCode, |
|||
userId: this.userInfo.id, |
|||
appType: '0', |
|||
platform: '0' |
|||
} |
|||
const res = await insertOrUpdatePreAdProfit(params); |
|||
if (res.data.code === 200) { |
|||
console.log("写入广告收益成功!") |
|||
this.adResult = res.data.code; |
|||
} else { |
|||
uni.showToast({ |
|||
title: '图片下载失败!', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
//写入图片邀请收益 |
|||
async insertPreInviteProfit() { |
|||
const params = { |
|||
imgId: this.detailMsg.id, |
|||
creatorId: this.detailMsg.creatorId, |
|||
scanCode: this.scanCode, |
|||
appType: '0', |
|||
platform: '0' |
|||
} |
|||
const res = await insertOrUpdatePreInviteProfit(params) |
|||
if (res.data.code === 200) { |
|||
console.log("写入邀请收益成功"); |
|||
this.inviteResult = res.data.code; |
|||
} else { |
|||
uni.showToast({ |
|||
title: '图片下载失败!', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
//检查某平台用户当日下载次数是否超标 |
|||
async checkUserDownload() { |
|||
const params = { |
|||
userId: this.userInfo.id, |
|||
appType: '0', |
|||
platform: '0' |
|||
} |
|||
const res = await checkUserCanDownload(params); |
|||
if (res.data.code === 200) { |
|||
console.log("当日下载结果为", res.data.data) |
|||
this.canDownload = res.data.data; |
|||
} else { |
|||
uni.showToast({ |
|||
title: '检查下载状态失败!', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
// 下载 |
|||
download(url) { |
|||
let that = this; |
|||
if (this.canDownload != true) { |
|||
//满足可下载条件 |
|||
this.isDownload = true |
|||
uni.showLoading({ |
|||
title: '正在保存图片...' |
|||
}); |
|||
//获取用户的当前设置。获取相册权限 |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
//如果没有相册权限 |
|||
if (!res.authSetting["scope.writePhotosAlbum"]) { |
|||
//向用户发起授权请求 |
|||
tt.authorize({ |
|||
scope: "scope.album", |
|||
success: () => { |
|||
//授权成功保存图片到系统相册 |
|||
uni.downloadFile({ |
|||
url, |
|||
success: (res) => { |
|||
console.log('下载路径', res) |
|||
if (res.statusCode === 200) { |
|||
uni.saveImageToPhotosAlbum({ |
|||
//图片路径，不支持网络图片路径 |
|||
filePath: res |
|||
.tempFilePath, |
|||
success: (res) => { |
|||
console.log( |
|||
'success', |
|||
res) |
|||
|
|||
}, |
|||
fail: (res) => { |
|||
console.log( |
|||
'fail', |
|||
res) |
|||
return uni |
|||
.showToast({ |
|||
title: res |
|||
.errMsg, |
|||
icon: 'none' |
|||
}); |
|||
}, |
|||
complete: (res) => { |
|||
uni |
|||
.hideLoading(); |
|||
if (res |
|||
.errMsg !== |
|||
"saveImageToPhotosAlbum:ok" |
|||
) { |
|||
return uni |
|||
.showToast({ |
|||
title: "下载失败！", |
|||
icon: 'none' |
|||
}); |
|||
} else { |
|||
return uni |
|||
.showToast({ |
|||
title: "下载成功！", |
|||
icon: 'none', |
|||
success() { |
|||
that.insertPreAdProfit(); |
|||
that.insertPreInviteProfit(); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
} else { |
|||
uni.showToast({ |
|||
title: "下载失败！", |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
//授权失败 |
|||
fail: () => { |
|||
uni.hideLoading(); |
|||
uni.showModal({ |
|||
title: "您已拒绝获取相册权限", |
|||
content: "是否进入权限管理，调整授权？", |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权） |
|||
uni.openSetting({ |
|||
success: ( |
|||
res) => { |
|||
console |
|||
.log( |
|||
res |
|||
.authSetting |
|||
); |
|||
}, |
|||
}); |
|||
} else if (res.cancel) { |
|||
return uni.showToast({ |
|||
title: "已取消！", |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
}); |
|||
} else { |
|||
//如果已有相册权限，直接保存图片到系统相册 |
|||
uni.saveImageToPhotosAlbum({ |
|||
filePath: url, |
|||
success: (res) => { |
|||
uni.hideLoading(); |
|||
return uni.showToast({ |
|||
title: "保存成功！", |
|||
icon: 'none' |
|||
}); |
|||
}, |
|||
fail: (res) => { |
|||
uni.hideLoading(); |
|||
console.log(res.errMsg); |
|||
return uni.showToast({ |
|||
title: res.errMsg, |
|||
icon: 'none' |
|||
}); |
|||
}, |
|||
//无论成功失败都走的回调 |
|||
complete: (res) => { |
|||
uni.hideLoading(); |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
fail: (res) => {}, |
|||
}); |
|||
} else { |
|||
//不满足可下载条件 canDownload为true状态 |
|||
uni.showToast({ |
|||
title: '当日下载次数已用完,请明日再来!', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
// 分享 |
|||
share() { |
|||
uni.showToast({ |
|||
title: '分享', |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.imgDetail { |
|||
height: 100vh; |
|||
width: 100vw; |
|||
overflow: hidden; |
|||
position: relative; |
|||
|
|||
.main-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.toolbar { |
|||
width: 60px; |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
position: absolute; |
|||
bottom: 76px; |
|||
right: 10px; |
|||
border-radius: 60px; |
|||
padding-top: 40rpx; |
|||
|
|||
.share-box { |
|||
|
|||
>button { |
|||
line-height: 0 !important; |
|||
padding: 0; |
|||
outline: none; |
|||
background: none; |
|||
border: none; |
|||
|
|||
} |
|||
|
|||
>button::after { |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.toolbar-box { |
|||
height: 60px; |
|||
text-align: center; |
|||
margin-bottom: 40rpx; |
|||
|
|||
text { |
|||
display: block; |
|||
text-align: center; |
|||
line-height: 60rpx; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
image { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
.toolbar-box:first-child { |
|||
line-height: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
Loading…
Reference in new issue