Skip to content

Commit

Permalink
保存图片、替换封面
Browse files Browse the repository at this point in the history
保存图片、替换封面
  • Loading branch information
MaoXiaoone committed May 27, 2024
1 parent e97eb66 commit d37a634
Show file tree
Hide file tree
Showing 9 changed files with 354 additions and 95 deletions.
27 changes: 27 additions & 0 deletions entry/src/main/ets/common/utils/photoViewPicker.ets
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/**
* @author 2008
* @datetime 2024/5/27 0:09
* @className: photoViewPicker
* 图片选择工具
*/
import picker from '@ohos.file.picker';


export const pickerAvatar = async () => {
// 实例化选项对象
const options = new picker.PhotoSelectOptions()
// 过滤选择媒体文件类型为IMAGE——只能选择图片类型的资源
options.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE
// 只能选择一张系统相册中的照片
options.maxSelectNumber = 1

// 利用PhotoViewPicker对象实例中的select自动获取到用户选择的那张图片的地址
const pickerView = new picker.PhotoViewPicker()
let urls = await pickerView.select(options)
if (urls.photoUris.length <= 0) {
return
}
return urls
}


135 changes: 135 additions & 0 deletions entry/src/main/ets/pages/view/coverInfoImageShow.ets
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
/**
* @author 2008
* @datetime 2024/5/27 16:09
* @className: coverInfoImageShow
*/
import CommonConstants from '../../common/constants/CommonConstants'
import BookOverlay from '../../componets/bookDetail/BookOverlay'

@Component
export default struct coverInfoImageShow {
@Prop coverCount:number
@Prop image:Resource
@Prop imageString:string
build() {
if (this.coverCount === 1){
this.coverImageOne(this.image)
} else if (this.coverCount === 2){
this.coverImageTwo()
} else if (this.coverCount === 3){
this.coverImageThree()
}
}

@Builder coverImageOne(bookImage:Resource){
Column(){
BookOverlay({
bookImage:bookImage,
// isTop:this.folderList.isTop
})
Row().width(86).height(20).backgroundColor(Color.White).borderRadius(2)
.shadow({ radius: 5, color: 'rgba(0, 0, 0, 0.10)' })
// .border({width:1,color:'rgba(255, 255, 255, 0.10)'})
Row({
space:12
}){
Text('默认样式')
.fontWeight(400).fontSize(14).fontColor($r('app.string.color_black_45')).lineHeight(22)
Radio({value:'default',group:'radioGroup'})
.radioStyle({
checkedBackgroundColor: $r('app.color.theme_color')
})
.border({width:2,color:'rgba(255, 255, 255, 0.10)'})
.width(20).height(20)
}

.padding({top:8})
}
}

@Builder coverImageTwo(){
Column(){
Stack(){
Flex({
alignItems: ItemAlign.End,
}){
if (this.imageString) {
Image(this.imageString)
} else {
Column(){
Image($r('app.media.add_image')).width(24).height(24)
Text('添加图片或gif').fontColor(Color.White).fontWeight(400).fontSize(10).lineHeight(18)
}
.padding({top:19,bottom:19,left:17,right:17})
}
}
.borderRadius(5)
.backgroundColor($r('app.string.color_black_65'))
.align(Alignment.Start)
.width(CommonConstants.NOVEL_IMG_WIDTH).height(CommonConstants.NOVEL_IMG_HEIGHT)
.zIndex(2)

Row(){
Image($r('app.media.occlusion1'))
}
.zIndex(1)
.width(CommonConstants.NOVEL_IMG_WIDTH + 5).height(CommonConstants.NOVEL_IMG_HEIGHT - 5)

Row(){
Image($r('app.media.occlusion2'))
}.zIndex(0)
.width(CommonConstants.NOVEL_IMG_WIDTH + 10).height(CommonConstants.NOVEL_IMG_HEIGHT - 10)
}
.align(Alignment.BottomStart)
Row().width(86).height(20).backgroundColor(Color.White).borderRadius(2)
.shadow({ radius: 5, color: 'rgba(0, 0, 0, 0.10)' })
Row({
space:12
}){
Text('自定义')
.fontWeight(400).fontSize(14).fontColor($r('app.string.color_black_45')).lineHeight(22)
Radio({value:'customize',group:'radioGroup'})
.radioStyle({
checkedBackgroundColor: $r('app.color.theme_color')
})
.border({width:2,color:'rgba(255, 255, 255, 0.10)'})
.width(20).height(20)
}
.padding({top:8})
}
}

@Builder coverImageThree(){
Column(){
Flex({
alignItems: ItemAlign.End,
}){
if (this.imageString) {
Image(this.imageString)
} else {
Column(){
Image($r('app.media.add_image')).width(24).height(24)
Text('添加图片或gif').fontColor(Color.White).fontWeight(400).fontSize(10).lineHeight(18)
}.padding({top:37,bottom:37,left:14,right:13})
}
}
.borderRadius(5)
.backgroundColor($r('app.string.color_black_65'))
.align(Alignment.Start)
.width(CommonConstants.NOVEL_IMG_WIDTH + 14).height(CommonConstants.NOVEL_IMG_HEIGHT + 18)
Row({
space:12
}){
Text('全图样式')
.fontWeight(400).fontSize(14).fontColor($r('app.string.color_black_45')).lineHeight(22)
Radio({value:'allStyle',group:'radioGroup'})
.radioStyle({
checkedBackgroundColor: $r('app.color.theme_color')
})
.border({width:2,color:'rgba(255, 255, 255, 0.10)'})
.width(20).height(20)
}
.padding({top:8})
}
}
}
1 change: 1 addition & 0 deletions entry/src/main/ets/pages/view/dialog/FolderInfoDialog.ets
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,7 @@ export default struct FolderInfoDialog{

coverDialog: CustomDialogController | null = new CustomDialogController({
builder: coverInfoDialog({
itemData:this.itemData,
cancel:()=>{
this.coverCancel()
}
Expand Down
51 changes: 25 additions & 26 deletions entry/src/main/ets/pages/view/dialog/coverInfoDialog.ets
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import BookOverlay from '../../../componets/bookDetail/BookOverlay'
import commonInputDialog from '../../../componets/common/commonInputDialog'
import confirmDialogExample from '../../../componets/common/confirmDialog'
import InsideCircleIcon from '../../../componets/common/InsideCircleIcon'
import { showMessage } from '../../../componets/common/promptShow'
import TitleContentDialog from '../../../componets/common/TitleContentDialog'
import { buttonList } from '../../../componets/dataList/buttonList'
import { folderList } from '../../../componets/dataList/folderList'
import { updateBookListData } from '../../../storage/bookListData'
import { delGroupById } from '../../../storage/groupData'
import { pickerAvatar } from '../../../common/utils/photoViewPicker'
import coverInfoImageShow from '../coverInfoImageShow'

@CustomDialog
/**
Expand All @@ -17,8 +10,8 @@ import { delGroupById } from '../../../storage/groupData'
export default struct coverInfoDialog{
controller?: CustomDialogController
//推送提醒
// @Link itemData:folderList

@Link itemData:folderList
@State coverImages:string = ''
cancel: () => void = () => {
}
@State coverFolder:boolean = false
Expand All @@ -29,8 +22,8 @@ export default struct coverInfoDialog{
alignItems:ItemAlign.Center
}){
Column(){
Text('游戏').fontColor('rgba(0, 0, 0, 0.88)').fontSize(16).fontWeight(500).lineHeight(24)
Text(`共${12}本`).fontColor('rgba(0, 0, 0, 0.45)').fontWeight(400).lineHeight(20).fontSize(12)
Text(this.itemData.title).fontColor('rgba(0, 0, 0, 0.88)').fontSize(16).fontWeight(500).lineHeight(24)
Text(`共${this.itemData.countNumber}本`).fontColor('rgba(0, 0, 0, 0.45)').fontWeight(400).lineHeight(20).fontSize(12)
}
Row(){
Text('仅用于当前分组')
Expand All @@ -46,9 +39,22 @@ export default struct coverInfoDialog{
direction: FlexDirection.Row,
justifyContent:FlexAlign.SpaceBetween
}){
this.coverImage($r('app.media.cover_list'))
this.coverImage($r('app.media.cover_list'))
this.coverImage($r('app.media.cover_list'))
coverInfoImageShow({
coverCount:1,
image:this.itemData.bookImage
})
coverInfoImageShow({
coverCount:2,
imageString:this.coverImages
}).onClick(()=>{
this.setCoverImages()
})
coverInfoImageShow({
coverCount:3,
imageString:this.coverImages
}).onClick(()=>{
this.setCoverImages()
})
}.padding(20)
Divider().strokeWidth(0.5).padding({bottom:16})
Column(){
Expand Down Expand Up @@ -86,15 +92,8 @@ export default struct coverInfoDialog{
.width('100%')
}

@Builder coverImage(bookImage:Resource){
Column(){
BookOverlay({
bookImage:bookImage,
// isTop:this.folderList.isTop
})
Row().width(86).height(20).backgroundColor(Color.White).borderRadius(2)
.shadow({ radius: 5, color: 'rgba(0, 0, 0, 0.10)' })
// .border({width:1,color:'rgba(255, 255, 255, 0.10)'})
}
async setCoverImages(){
let imageUrl = await pickerAvatar();
this.coverImages = imageUrl?.photoUris[0] || ''
}
}
Loading

0 comments on commit d37a634

Please sign in to comment.