developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
ac5ee8e3 2 parents cbb93e25 8c355927

Merge branch 'main' of http://192.168.1.42/developOne/harmonyPool into main 

* 'main' of http://192.168.1.42/developOne/harmonyPool:
  desc:fix bug
  图集替换缺省图为通用组件
  屏蔽音频详情和活动入口
  jdesc:getXToken没有不返回
  feat:启动引导页和兴趣选择页问题修复
  图片缩放及下载
  屏蔽活动和音频组件
  图集swiperItem细节优化
Inline Side-by-side
Showing 32 changed files with 513 additions and 159 deletions
import { Action } from './Action';
interface dataObject {
dataSource: number
operateType?: string
webViewHeight?: string
dataJson?: string
... ...
... ... @@ -3,15 +3,15 @@
{
"name": "shared_desc",
"value": "全局工具包"
} ,
},
{
"name": "net_core_no_network",
"value": "当前无网络，请重试"
} ,
},
{
"name": "net_core_weak_network",
"value": "当前无网络，请重试"
} ,
},
{
"name": "net_core_page_error_network",
"value": "网络出小差了，请检查下网络"
... ... @@ -47,6 +47,10 @@
{
"name": "auditing_core_error",
"value": "内容已下线"
},
{
"name": "image_request_fail",
"value": "图片加载失败，请检查网络"
}
]
}
\ No newline at end of file
... ...
... ... @@ -397,7 +397,8 @@ export class HttpUrlUtils {
if (StringUtils.isNotEmpty(HttpUrlUtils.token)) {
return HttpUrlUtils.token
}
return 'eyJhbGciOiJIUzI1NiIsImtpZCI6ImQ4WkI2QkhxSEZrdjJ2U25BNlRwZEdKRjBHcjItVzBvS2FaYzdLOUUycmcifQ.eyJpc3MiOiJwZW9wbGVzLWRhaWx5LWZvdXJhIiwic3ViIjoicGVvcGxlcy1kYWlseS1mb3VyYSIsImV4cCI6MTcwMzY0OTYwNiwidXNlcklkIjo0NTk3NzYyOTc0NzQ5NDksInVzZXJWZXJzaW9uIjoiNDU5Nzc2Mjk3NDc0OTQ5XzIiLCJ1c2VyTmFtZSI6IkJ1bGlraWtpMTgxIiwidXNlclR5cGUiOjIsImNyZWF0b3JJZCI6NDI2NTM5MH0.jhQ9kylcm3FxWf0-lBMZuLkdtIQ6XpFnAi0AFZJNwfc';
// return 'eyJhbGciOiJIUzI1NiIsImtpZCI6ImQ4WkI2QkhxSEZrdjJ2U25BNlRwZEdKRjBHcjItVzBvS2FaYzdLOUUycmcifQ.eyJpc3MiOiJwZW9wbGVzLWRhaWx5LWZvdXJhIiwic3ViIjoicGVvcGxlcy1kYWlseS1mb3VyYSIsImV4cCI6MTcwMzY0OTYwNiwidXNlcklkIjo0NTk3NzYyOTc0NzQ5NDksInVzZXJWZXJzaW9uIjoiNDU5Nzc2Mjk3NDc0OTQ5XzIiLCJ1c2VyTmFtZSI6IkJ1bGlraWtpMTgxIiwidXNlclR5cGUiOjIsImNyZWF0b3JJZCI6NDI2NTM5MH0.jhQ9kylcm3FxWf0-lBMZuLkdtIQ6XpFnAi0AFZJNwfc';
return ''
}
static getRefreshToken() {
... ...
... ... @@ -19,7 +19,7 @@ export interface CompDTO {
name: string;
objectId: string; // 跳转页面id?
objectTitle: string; // comp标题
// objectType?: any; // 跳转类型，枚举：
objectType?: string; // 跳转类型，枚举：
operDataList: ContentDTO[]; // 运营数据列表【正常运营配置的强运营数据，部分推荐场景的配置（自动源兜底数据）】
// pageId?: any;
posterSize: string;
... ...
... ... @@ -31,14 +31,14 @@ export struct CompParser {
compIndex: number = 0;
build() {
Column(){
Column() {
this.componentBuilder(this.compDTO, this.compIndex);
Divider().strokeWidth(1).color('#f5f5f5').padding({left:16,right:16})
}
}
@Builder
componentBuilder(compDTO: CompDTO, compIndex: number) {
if (compDTO.objectType !== '3' && compDTO.objectType !== '13') { //暂时屏蔽活动和音频详情入口
if (compDTO.compStyle === CompStyle.Label_03) {
LabelComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Zh_Carousel_Layout_01) {
... ... @@ -76,15 +76,13 @@ export struct CompParser {
Text(compDTO.compStyle)
.width(CommonConstants.FULL_PARENT)
.padding(10)
.onClick(()=>{
if (compDTO.compStyle === CompStyle.Zh_Single_Row_06) {//精选评论
.onClick(() => {
if (compDTO.compStyle === CompStyle.Zh_Single_Row_06) { //精选评论
WDRouterRule.jumpWithPage(WDRouterPage.QualityCommentsPage)
}
})
// Text(compDTO.compStyle)
// .width(CommonConstants.FULL_PARENT)
// .padding(10)
// .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
}
Divider().strokeWidth(1).color('#f5f5f5').padding({ left: 16, right: 16 })
}
}
}
... ...
import { PhotoListBean } from 'wdBean/Index';
import { Logger } from 'wdKit/Index';
import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
import { display, router } from '@kit.ArkUI';
import { ImageDownloadComponent } from './ImageDownloadComponent';
import { ImageItemView } from './view/ImageItemView';
const TAG = 'ImageSwiperComponent';
... ... @@ -17,6 +17,9 @@ export struct ImageSwiperComponent {
private screenWidth: number = 0
private picWidth: number = 0
@State picHeight: number = 0
@State isEnableSwipe: boolean = true;
// @Provide bgc: Color = Color.White;
//watch监听页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -53,7 +56,8 @@ export struct ImageSwiperComponent {
if (this.photoList && this.photoList?.length > 0) {
Swiper(this.swiperController) {
ForEach(this.photoList, (item: PhotoListBean) => {
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
// MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
ImageItemView({ MultiPictureDetailItem: item, isEnableSwipe: this.isEnableSwipe })
})
}
.index(this.swiperIndex)
... ...
import { CommonConstants } from 'wdConstant';
import { Logger } from 'wdKit';
const TAG = 'EmptyComponent';
/**
* WDViewDefaultType 缺省页
*/
export const enum WDViewDefaultType {
///无网
WDViewDefaultType_NoNetwork,
///网络失败 请稍后重试-倒计时
WDViewDefaultType_NetworkFailed,
///内容获取失败
WDViewDefaultType_ContentFailed,
}
/**
* 空数据/无数据
*/
@Preview
@Component
export struct MultiPictureDetailEmptyComponent {
// private emptySize: SizeOptions = {};
@State emptyWidth: string | number = CommonConstants.FULL_PARENT;
@State emptyHeight: string | number = CommonConstants.FULL_PARENT;
@State emptyType: number = WDViewDefaultType.WDViewDefaultType_ContentFailed
/**
* The empty image width percentage setting.
*/
readonly EMPTY_IMAGE_WIDTH: string = '15%';
/**
* The empty image height percentage setting.
*/
readonly EMPTY_IMAGE_HEIGHT: string = '15%';
/**
* The empty data text component margin top.
*/
readonly EMPTY_TIP_TEXT_MARGIN_TOP: string = '10';
/**
* The empty data text opacity.
*/
readonly TEXT_OPACITY: number = 1;
build() {
this.noProgrammeData();
}
/**
* 无数据，空白view组件
*/
@Builder
noProgrammeData() {
Column() {
Image(this.buildNoDataTipImage())
.width('this.EMPTY_IMAGE_WIDTH')
.height(this.EMPTY_IMAGE_HEIGHT)
.objectFit(ImageFit.Contain)
// .border({ width: 1, color: Color.Red, radius: 6 })
Text(this.buildNoDataTip())
.fontSize($r('app.float.font_size_14'))
.fontColor('#999999')
.fontWeight(FontWeight.Normal)
.opacity(this.TEXT_OPACITY)
.margin({ top: this.EMPTY_TIP_TEXT_MARGIN_TOP })
.onClick((event: ClickEvent) => {
Logger.info(TAG, `noProgrammeData onClick event?.source: ${event.source}`);
})
Button('点击重试', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(4)
.margin(16)
.height(28)
.fontSize(12)
.fontColor('#CCCCCC')
.fontFamily('PingFang SC-Medium')
.border({ width: 1, color: '#545454' })
.backgroundColor(Color.Black)
}
.justifyContent(FlexAlign.Center)
.width(this.emptyWidth)
.height(this.emptyHeight)
.backgroundColor(Color.Black)
}
buildNoDataTip(): string {
Logger.info(TAG, "buildNoDataTip");
let contentString: string = '获取内容失败请重试'
if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) {
contentString = '网络出小差了，请检查网络后重试'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) {
contentString = '获取内容失败请重试'
}
return contentString
}
buildNoDataTipImage(): Resource | string {
Logger.info(TAG, "buildNoDataTip");
let imageString: Resource | string = $r('app.media.icon_no_content')
if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) {
imageString = $r('app.media.icon_no_net')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) {
imageString = $r('app.media.icon_no_content')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NetworkFailed) {
imageString = $r('app.media.icon_no_net')
}
return imageString
}
}
\ No newline at end of file
import { PhotoListBean } from 'wdBean';
import { Logger } from 'wdKit';
import router from '@ohos.router';
import display from '@ohos.display';
const TAG = 'MultiPictureDetailPageComponent';
@Component
export struct MultiPictureDetailItemComponent {
private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
//alt app.media.picture_loading 设计稿尺寸
@State imageWidth:string | number = 167
@State ratio:number = 167/60
private scroller: Scroller = new Scroller()
private displayTool = display.getDefaultDisplaySync()
@State picHeight: number = 0
async aboutToAppear() {
Logger.info(TAG, 'pictures preview')
this.picHeight = this.displayTool.width * 578 / 375
}
build() {
Stack({ alignContent: Alignment.BottomStart }) {
Row() {
Image(this.MultiPictureDetailItem.picPath)
.alt($r('app.media.picture_loading'))
.width('100%')
.aspectRatio(this.MultiPictureDetailItem.width / this.MultiPictureDetailItem.height)
.width(this.imageWidth)
.aspectRatio(this.ratio)
.objectFit(ImageFit.Fill)
.interpolation(ImageInterpolation.High)
.onComplete(event => {
this.imageWidth = '100%'
this.ratio = this.MultiPictureDetailItem.width / this.MultiPictureDetailItem.height
})
/*.onDrop(event => {
router.back();
})
.draggable(true)*/
/*Scroll(this.scroller) {
}
.scrollable(ScrollDirection.Vertical)
.scrollBarWidth(0)
.height(px2vp(this.picHeight))*/
}
.height('100%')
.width('100%')
}
.backgroundColor(Color.Black)
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
\ No newline at end of file
... ...
import { Logger } from 'wdKit';
import { Logger, SPHelper } from 'wdKit';
import { ResponseDTO } from 'wdNetwork';
import {
ContentDetailDTO,
... ... @@ -12,11 +12,12 @@ import display from '@ohos.display';
import font from '@ohos.font';
import { OperRowListView } from './view/OperRowListView';
import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
import { MultiPictureDetailEmptyComponent } from './MultiPictureDetailEmptyComponent';
import { EmptyComponent } from './view/EmptyComponent';
import { DateTimeUtils } from 'wdKit/Index';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { PageRepository } from '../repository/PageRepository';
import { SpConstants } from 'wdConstant/Index';
const TAG = 'MultiPictureDetailPageComponent';
... ... @@ -36,7 +37,7 @@ export struct MultiPictureDetailPageComponent {
@State swiperIndex: number = 0;
@Provide followStatus: string = '0' // 关注状态
private scroller: Scroller = new Scroller()
@State netStatus: number = 0 // 存储网络状态用来展示缺省图
@State netStatus: number | undefined = undefined // 存储网络状态用来展示缺省图
//watch监听页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -238,8 +239,8 @@ export struct MultiPictureDetailPageComponent {
.height(px2vp(this.titleHeight) + 64)
} else {
if (this.netStatus === 1) {
MultiPictureDetailEmptyComponent({ emptyType: 2})
if(this.netStatus !== undefined) {
EmptyComponent({ emptyType: this.netStatus})
.id('e_empty_content')
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
... ... @@ -289,6 +290,9 @@ export struct MultiPictureDetailPageComponent {
return
}
this.contentDetailData = resDTO.data?.[0];
if(this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length === 0) {
this.netStatus = 0
}
Logger.info(TAG, `contentDetailData：${JSON.stringify(this.contentDetailData)}`)
if (HttpUrlUtils.getUserId()) {
this.getInteractBrowsOperate()
... ... @@ -350,9 +354,10 @@ export struct MultiPictureDetailPageComponent {
/**
* 关注号主
*/
handleAccention() {
async handleAccention() {
// 未登录，跳转登录
if (!HttpUrlUtils.getUserId()) {
const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
if (!user_id) {
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
... ...
... ... @@ -19,7 +19,6 @@ export default struct MinePagePersonFunctionUI {
.interpolation(ImageInterpolation.High)
Text(`${item.msg}`)
.margin({top:'8lpx'})
.width('50lpx')
.height('23lpx')
.fontColor($r('app.color.color_222222'))
.fontSize('23lpx')
... ...
import { Params } from 'wdBean';
import { DateTimeUtils, LazyDataSource, StringUtils, UserDataLocal } from 'wdKit';
import { HttpUrlUtils } from 'wdNetwork';
import { DateTimeUtils, LazyDataSource,UserDataLocal } from 'wdKit';
import { WDRouterPage, WDRouterRule } from 'wdRouter';
import MinePageDatasModel from '../../../model/MinePageDatasModel';
import { CommentListItem } from '../../../viewmodel/CommentListItem';
import { FollowListDetailItem } from '../../../viewmodel/FollowListDetailItem';
import { FollowListDetailRequestItem } from '../../../viewmodel/FollowListDetailRequestItem';
import { FollowOperationRequestItem } from '../../../viewmodel/FollowOperationRequestItem';
import { ListHasNoMoreDataUI } from '../../reusable/ListHasNoMoreDataUI';
import { FollowChildComponent } from '../follow/FollowChildComponent';
... ... @@ -22,6 +20,7 @@ export struct HomePageBottomComponent{
@State count:number = 0;
@State isMineAccount:boolean = true;
@State userId:string = "";
@Link commentNum:number
aboutToAppear(){
this.getNewPageData()
... ... @@ -36,6 +35,7 @@ export struct HomePageBottomComponent{
if(this.count === 0){
if(this.style === 1){
Column(){
Row(){
Text("关注更多人民号")
.fontWeight('400lpx')
... ... @@ -60,6 +60,8 @@ export struct HomePageBottomComponent{
}
WDRouterRule.jumpWithPage(WDRouterPage.followListPage,params)
})
}.layoutWeight(1)
.justifyContent(FlexAlign.Start)
}else{
ListHasNoMoreDataUI({style:2})
.layoutWeight(1)
... ... @@ -211,7 +213,8 @@ export struct HomePageBottomComponent{
this.hasMore = false
}else{
value.list.forEach((value)=>{
this.data_comment.push(new CommentListItem(value.fromUserHeader,value.fromUserName,value.targetTitle,value.createTime,value.commentContent,value.likeNum,0,value.id,value.targetId,value.targetType))
let publishTime = DateTimeUtils.getCommentTime(DateTimeUtils.parseDate(value.createTime,DateTimeUtils.PATTERN_DATE_TIME_HYPHEN))
this.data_comment.push(new CommentListItem(value.fromUserHeader,value.fromUserName,value.targetTitle,publishTime,value.commentContent,value.likeNum,0,value.id,value.targetId,value.targetType))
})
this.data_comment.notifyDataReload()
this.count = this.data_comment.totalCount()
... ... @@ -222,6 +225,7 @@ export struct HomePageBottomComponent{
}
}
this.isLoading = false
this.commentNum = value.totalCount
}).catch((err:Error)=>{
console.log(TAG,"请求失败")
this.isLoading = false
... ...
import { image } from '@kit.ImageKit';
import { matrix4, promptAction, window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { ScaleModel } from '../../model/ScaleModel';
import { OffsetModel } from '../../model/OffsetModel';
import { windowSizeManager } from '../../utils/Managers';
import { runWithAnimation } from '../../utils/FuncUtils';
import { PhotoListBean } from 'wdBean/Index';
import { http } from '@kit.NetworkKit';
// TODO：知识点：组件复用
@Reusable
@Component
export struct ImageItemView {
@Consume private bgc: Color;
@Link isEnableSwipe: boolean; // TODO：需求：多图切换
@State isEnableOffset: boolean = false;
@State imageScaleInfo: ScaleModel = new ScaleModel(1.0, 1.0, 1.5, 0.3);
@State imageOffsetInfo: OffsetModel = new OffsetModel(0, 0);
@State matrix: matrix4.Matrix4Transit = matrix4.identity().copy();
@State imagePixelMap: image.PixelMap | null = null; // 当前图片pixelMap，用于Image组件显示
@State fitWH: "width" | "height" | undefined = undefined; // 表示当前图片是根据宽度适配还是高度适配
@State imageDefaultSize: image.Size = { width: 0, height: 0 }; // 图片默认大小，即，与屏幕大小最适配的显示大小
imageUri: string = ""; // 当前图片uri
imageWHRatio: number = 0; // 图片原始宽高比
private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
@State imageBuffer: ArrayBuffer | undefined = undefined; // 图片ArrayBuffer
aboutToAppear(): void {
this.imageUri = this.MultiPictureDetailItem.picPath
this.getPicture()
}
/**
* 通过http的request方法从网络下载图片资源
*/
async getPicture() {
console.info(`cj2024 getPicture`)
http.createHttp()
.request(this.imageUri,
(error: BusinessError, data: http.HttpResponse) => {
if (error) {
// 下载失败时弹窗提示检查网络，不执行后续逻辑
promptAction.showToast({
message: $r('app.string.image_request_fail'),
duration: 2000
})
return;
}
this.transcodePixelMap(data);
// 判断网络获取到的资源是否为ArrayBuffer类型
console.info(`cj2024 getPicture ${data.result}`)
if (data.result instanceof ArrayBuffer) {
console.info(`cj2024 getPicture 222`)
this.imageBuffer = data.result as ArrayBuffer;
}
}
)
}
/**
* 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型
* @param data：网络获取到的资源
*/
transcodePixelMap(data: http.HttpResponse) {
console.info(`cj2024 transcodePixelMap ${data.responseCode}`)
if (http.ResponseCode.OK === data.responseCode) {
const imageData: ArrayBuffer = data.result as ArrayBuffer;
// 通过ArrayBuffer创建图片源实例。
const imageSource: image.ImageSource = image.createImageSource(imageData);
this.initCurrentImageInfo(imageSource);
}
}
/**
* 根据图片宽高比及窗口大小计算图片的默认宽高，即，图片最适配屏幕的大小
* @param imageWHRatio：图片原始宽高比
* @param size：窗口大小{with:number,height:number}
* @returns image.Size
*/
calcImageDefaultSize(imageWHRatio: number, size: window.Size): image.Size {
let width = 0
let height = 0;
if (imageWHRatio > size.width / size.height) {
// 图片宽高比大于屏幕宽高比，图片默认以屏幕宽度进行显示
width = size.width;
height = size.width / imageWHRatio;
} else {
height = size.height;
width = size.height * imageWHRatio;
}
return { width: width, height: height };
}
/**
* TODO：知识点：根据图片大小（宽高<=屏幕宽高）和屏幕大小计算图片放大适配屏幕进行显示的缩放倍率
* @param imageSize：图片当前大小
* @param windowSize：窗口大小
* @returns：缩放倍率
*/
calcFitScaleRatio(imageSize: image.Size, windowSize: window.Size): number {
let ratio: number = 1.0;
if (windowSize.width > imageSize.width) {
ratio = windowSize.width / imageSize.width;
} else {
ratio = windowSize.height / imageSize.height;
}
return ratio;
}
/**
* 设置当前图片的相关信息：uri、whRatio、pixelMap、fitWH、defaultSize、maxScaleValue
* TODO：知识点：提前获取图片的信息，以进行Image组件的尺寸设置及后续的相关计算
*/
initCurrentImageInfo(imageSource: image.ImageSource): void {
this.matrix = matrix4.identity().copy();
// const imageSource: image.ImageSource = image.createImageSource(this.imageUri);
imageSource.getImageInfo(0).then((data: image.ImageInfo) => {
this.imageWHRatio = data.size.width / data.size.height;
this.imageDefaultSize = this.calcImageDefaultSize(this.imageWHRatio, windowSizeManager.get());
if (this.imageDefaultSize.width === windowSizeManager.get().width) {
this.fitWH = "width";
} else {
this.fitWH = "height";
}
this.imageScaleInfo.maxScaleValue += this.fitWH === "width" ?
(windowSizeManager.get().height / this.imageDefaultSize.height) :
(windowSizeManager.get().width / this.imageDefaultSize.width);
}).catch((err: BusinessError) => {
console.error(`[error][getImageInfo]${err.message}`);
});
imageSource.createPixelMap().then((data: image.PixelMap) => {
this.imagePixelMap = data;
}).catch((err: BusinessError) => {
console.error(`[error][createPixelMap]${err.message}`);
});
this.isEnableOffset = false;
this.imageScaleInfo.reset();
this.imageOffsetInfo.reset();
}
/**
* 在图片消失时，将当前图片的信息设置为默认值
*/
resetCurrentImageInfo(): void {
this.imageScaleInfo.reset();
this.imageOffsetInfo.reset();
this.matrix = matrix4.identity().copy();
}
/**
* TODO：需求：在偏移时评估是否到达边界，以便进行位移限制与图片的切换
* @returns：长度为4的boolean数组，表示上下左右是否到达边界
*/
evaluateBound(): boolean[] {
return [false, false, false, false];
}
build() {
Stack() {
Image(this.imagePixelMap)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
.width(this.fitWH === "width" ? "100%" : undefined)
.height(this.fitWH === "height" ? "100%" : undefined)
.aspectRatio(this.imageWHRatio)
.objectFit(ImageFit.Cover)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
.autoResize(false)
.transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
.defaultFocus(true)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.offset({
// TODO：知识点：通过offset控制图片的偏移
x: this.imageOffsetInfo.currentX,
y: this.imageOffsetInfo.currentY
})
}
.onBlur(() => {
this.resetCurrentImageInfo();
})
// .backgroundColor(this.bgc)
.alignContent(Alignment.Center)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.width("100%")
.height("100%")
.gesture(
GestureGroup(
GestureMode.Exclusive,
// TODO：知识点：双击切换图片大小
TapGesture({ count: 2 })
.onAction(() => {
let fn: Function;
// 已经是放大状态下，双击缩小
if (this.imageScaleInfo.scaleValue > this.imageScaleInfo.defaultScaleValue) {
fn = () => {
this.isEnableSwipe = true;
this.imageScaleInfo.reset();
this.imageOffsetInfo.reset();
this.matrix = matrix4.identity().copy();
};
} else {
// 已经是缩小状态，双击放大
fn = () => {
this.isEnableSwipe = false;
const ratio: number = this.calcFitScaleRatio(this.imageDefaultSize, windowSizeManager.get());
this.imageScaleInfo.scaleValue = ratio;
this.imageOffsetInfo.reset();
this.matrix = matrix4.identity().scale({
x: ratio,
y: ratio,
}).copy();
this.imageScaleInfo.stash();
}
}
runWithAnimation(fn);
}),
// 单击切换背景色
// TapGesture({ count: 1 }).onAction(() => {
// runWithAnimation(() => {
// this.bgc = this.bgc === Color.White ? Color.Black : Color.White;
// });
// }),
// TODO：知识点：双指捏合缩放图片
PinchGesture({ fingers: 2, distance: 1 })
.onActionUpdate((event: GestureEvent) => {
this.imageScaleInfo.scaleValue = this.imageScaleInfo.lastValue * event.scale;
// TODO：知识点：缩放时不允许大于最大缩放因子+额外缩放因子，不允许小于默认大小-额外缩放因子，额外缩放因子用于提升用户体验
if (this.imageScaleInfo.scaleValue > this.imageScaleInfo.maxScaleValue *
(1 + this.imageScaleInfo.extraScaleValue)
) {
this.imageScaleInfo.scaleValue = this.imageScaleInfo.maxScaleValue *
(1 + this.imageScaleInfo.extraScaleValue);
}
if (this.imageScaleInfo.scaleValue < this.imageScaleInfo.defaultScaleValue *
(1 - this.imageScaleInfo.extraScaleValue)) {
this.imageScaleInfo.scaleValue = this.imageScaleInfo.defaultScaleValue *
(1 - this.imageScaleInfo.extraScaleValue);
}
// TODO：知识点：matrix默认缩放中心为组件中心
this.matrix = matrix4.identity().scale({
x: this.imageScaleInfo.scaleValue,
y: this.imageScaleInfo.scaleValue,
}).copy();
console.debug(this.imageScaleInfo.toString());
})
.onActionEnd((event: GestureEvent) => {
/**
* TODO：知识点：当小于默认大小时，恢复为默认大小
*/
if (this.imageScaleInfo.scaleValue < this.imageScaleInfo.defaultScaleValue) {
runWithAnimation(() => {
this.imageScaleInfo.reset();
this.imageOffsetInfo.reset();
this.matrix = matrix4.identity().copy();
})
}
// TODO：知识点：当大于最大缩放因子时，恢复到最大
if (this.imageScaleInfo.scaleValue > this.imageScaleInfo.maxScaleValue) {
runWithAnimation(() => {
this.imageScaleInfo.scaleValue = this.imageScaleInfo.maxScaleValue;
this.matrix = matrix4.identity()
.scale({
x: this.imageScaleInfo.maxScaleValue,
y: this.imageScaleInfo.maxScaleValue
});
})
}
this.imageScaleInfo.stash();
}),
// // TODO：知识点：滑动图片
// PanGesture({ fingers: 1 })// TODO：需求：默认大小下左右滑动应当是切换图片
// .onActionUpdate((event: GestureEvent) => {
// if (this.imageScaleInfo.scaleValue === this.imageScaleInfo.defaultScaleValue) {
// // 默认大小下不允许移动
// return;
// }
// this.imageOffsetInfo.currentX = this.imageOffsetInfo.lastX + event.offsetX;
// this.imageOffsetInfo.currentY = this.imageOffsetInfo.lastY + event.offsetY;
// })
// .onActionEnd((event: GestureEvent) => {
// this.imageOffsetInfo.stash();
// })
),
)
}
}
\ No newline at end of file
... ...
import { ToastUtils, Logger, NumberFormatterUtils } from 'wdKit';
import { ToastUtils, Logger, NumberFormatterUtils, SPHelper } from 'wdKit';
import {
InputMethodProperty,
batchLikeAndCollectResult,
... ... @@ -15,6 +15,7 @@ import { MultiPictureDetailViewModel } from '../../viewmodel/MultiPictureDetailV
import { HttpUrlUtils } from 'wdNetwork/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { PageRepository } from '../../repository/PageRepository';
import { SpConstants } from 'wdConstant/Index';
export interface OperationItem {
icon: Resource;
... ... @@ -53,8 +54,9 @@ export struct OperRowListView {
}
]
aboutToAppear() {
if (HttpUrlUtils.getUserId()) {
async aboutToAppear() {
const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
if (user_id) {
this.getInteractDataStatus()
}
this.queryContentInteractCount()
... ... @@ -338,9 +340,10 @@ export struct OperRowListView {
/**
* 点赞、取消点赞
*/
toggleLikeStatus() {
async toggleLikeStatus() {
// 未登录，跳转登录
if (!HttpUrlUtils.getUserId()) {
const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
if (!user_id) {
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
... ... @@ -361,9 +364,10 @@ export struct OperRowListView {
/**
* 收藏、取消收藏
*/
toggleCollectStatus() {
async toggleCollectStatus() {
// 未登录，跳转登录
if (!HttpUrlUtils.getUserId()) {
const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
if (!user_id) {
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
... ...
export class ImageViewerConstants {
// 缩放动画的持续时间
static readonly ANIMATE_DURATION: number = 300;
// swiper中缓存图片的数量
static readonly SWIPER_CACHE_COUNT: number = 2;
}
... ...
... ... @@ -60,7 +60,7 @@ class MinePageDatasModel{
return this.personalData
}
this.personalData.push(new MinePagePersonalFunctionsItem("评论",$r('app.media.mine_comment_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("关注",$r('app.media.mine_order_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("关注",$r('app.media.mine_follow_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("收藏",$r('app.media.mine_collect_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("历史",$r('app.media.mine_history_icon')))
this.personalData.push(new MinePagePersonalFunctionsItem("消息",$r('app.media.mine_msg_icon')))
... ...
@Observed
export class OffsetModel {
public currentX: number;
public currentY: number;
public lastX: number = 0;
public lastY: number = 0;
constructor(currentX: number = 0, currentY: number = 0) {
this.currentX = currentX;
this.currentY = currentY;
}
reset(): void {
this.currentX = 0;
this.currentY = 0;
this.lastX = 0;
this.lastY = 0;
}
stash(): void {
this.lastX = this.currentX;
this.lastY = this.currentY;
}
toString(): string {
return `[currentX: ${this.currentX} currentY: ${this.currentY} lastX: ${this.lastX} lastY: ${this.lastY}]`;
}
}
\ No newline at end of file
... ...
@Observed
export class ScaleModel {
/**
* scaleValue: 本次缩放因子，用于控制图片的大小显示
* lastValue：记录上次缩放完后的缩放因子
* defaultMaxScaleValue：默认的最大放大值
* defaultScaleValue：默认缩放值，1
*/
public scaleValue: number;
public lastValue: number;
public maxScaleValue: number;
public extraScaleValue: number;
public readonly defaultScaleValue: number = 1;
constructor(scaleValue: number = 1.0, lastValue: number = 1.0,
maxScaleValue: number = 1.5, extraScaleValue: number = 0.2) {
this.scaleValue = scaleValue;
this.lastValue = lastValue;
this.maxScaleValue = maxScaleValue;
this.extraScaleValue = extraScaleValue;
}
reset(): void {
this.scaleValue = this.defaultScaleValue;
this.lastValue = this.scaleValue;
}
stash(): void {
this.lastValue = this.scaleValue;
}
toString(): string {
return `[scaleValue: ${this.scaleValue} lastValue: ${this.lastValue}]`;
}
}
\ No newline at end of file
... ...
... ... @@ -185,10 +185,10 @@ struct MineHomePage {
//tab 页面
Tabs({controller: this.controller}) {
TabContent() {
HomePageBottomComponent({style:0})
HomePageBottomComponent({style:0,commentNum:$commentNum})
}.tabBar(this.TabBuilder(0,"评论"))
TabContent() {
HomePageBottomComponent({style:1})
HomePageBottomComponent({style:1,commentNum:$commentNum})
}.tabBar(this.TabBuilder(1,"关注"))
}
.backgroundColor($r('app.color.white'))
... ...
/**
* 给函数的执行加上动画
* @param fn：要在动画内执行的回调函数，通常fn里面会改变状态变量
* @param duration：动画持续时长
* @param curve：动画区线
*/
import { ImageViewerConstants } from '../constants/ImageViewerConstants';
export function runWithAnimation(
fn: Function,
duration: number = ImageViewerConstants.ANIMATE_DURATION,
curve: Curve = Curve.Smooth): void {
animateTo({ duration: duration, curve: curve }, () => {
fn();
})
}
\ No newline at end of file
... ...
import { window } from '@kit.ArkUI';
class WindowSizeManager {
private size: window.Size = { width: 0, height: 0 };
constructor() {
window.getLastWindow(getContext()).then((value: window.Window) => {
const rect: window.Rect = value.getWindowProperties().windowRect;
this.size.width = px2vp(rect.width);
this.size.height = px2vp(rect.height);
console.log(`[windowWidth]${this.size.width} [windowHeight]${this.size.height}`);
})
}
get(): window.Size {
return this.size;
}
}
export const windowSizeManager: WindowSizeManager = new WindowSizeManager();
\ No newline at end of file
... ...
... ... @@ -39,6 +39,14 @@
{
"name": "image_request_fail",
"value": "图片加载失败，请检查网络"
},
{
"name": "EntryAbility_desc",
"value": "$string:app_desc"
},
{
"name": "reason_read_write_media",
"value": "user_grant"
}
]
}
\ No newline at end of file
... ...
... ... @@ -31,6 +31,10 @@
{
"name": "refresh_fail_text",
"value": "刷新失败"
},
{
"name": "reason_read_write_media",
"value": "user_grant"
}
]
}
\ No newline at end of file
... ...
... ... @@ -4,9 +4,9 @@ import { WDRouterPage } from 'wdRouter';
@Entry
@Component
struct GuidePages {
guideImage = [$r('app.media.guide_static1'), $r('app.media.guide_static2'), $r('app.media.guide_static3'), $r('app.media.guide_static4')]
guideTitle = [$r('app.media.guide_title1'), $r('app.media.guide_title2'), $r('app.media.guide_title3'), $r('app.media.guide_title4')]
guideIndex = [$r('app.media.guide_index1'), $r('app.media.guide_index2'), $r('app.media.guide_index3'), $r('app.media.guide_button')]
guideImage = [$r('app.media.guide_static1'), $r('app.media.guide_static2'), $r('app.media.guide_static3'), $r('app.media.guide_static4'),$r('app.media.guide_static5')]
guideTitle = [$r('app.media.guide_title1'), $r('app.media.guide_title2'), $r('app.media.guide_title3'), $r('app.media.guide_title4'),$r('app.media.guide_title5')]
guideIndex = [$r('app.media.guide_index1'), $r('app.media.guide_index2'), $r('app.media.guide_index3'),$r('app.media.guide_index4'), $r('app.media.guide_button')]
build() {
Column() {
... ... @@ -57,7 +57,7 @@ struct GuidePages {
.margin({ bottom: 85 })
.height(40)
.onClick(() => {
if (index == 3) {
if (index == 4) {
// 跳转到首页
//WDRouterRule.jumpWithReplacePage(WDRouterPage.mainPage)
//跳转到兴趣偏好选择页
... ...
... ... @@ -3,6 +3,7 @@ import { WDRouterRule } from 'wdRouter';
import { WDRouterPage } from 'wdRouter';
import { SPHelper } from 'wdKit/Index';
import { SpConstants } from 'wdConstant/Index';
import { ButtonOptions, promptAction } from '@kit.ArkUI';
@Entry
@Component
... ... @@ -79,6 +80,11 @@ struct LaunchInterestsHobbiesPage {
.margin({top:'2lpx',left:'19lpx'})
.width('100%')
.height('31lpx')
Image(item.choose ? $r('app.media.interestsSelected') : $r('app.media.interestsSelectNot'))
.height('32lpx')
.width('32lpx')
.margin({top:'80lpx',left:'110lpx'})
}.justifyContent(FlexAlign.Start)
}
... ... @@ -87,7 +93,7 @@ struct LaunchInterestsHobbiesPage {
.width('100%')
.height('100%')
.backgroundColor(Color.White)
.opacity(item.choose?0:0.7)
.opacity(item.choose?0:0.6)
.borderRadius(5)
}
}
... ... @@ -122,7 +128,21 @@ struct LaunchInterestsHobbiesPage {
.borderRadius('10lpx')
.width('662lpx')
.height('84lpx')
Image('')
.width('662lpx')
.height('84lpx')
.backgroundColor(Color.White)
.opacity(this.selectCount == 0 ? 0.6 : 0)
.borderRadius('10lpx')
.onClick(()=>{
if (this.selectCount == 0) {
promptAction.showToast({
message : '请先选择您感兴趣的内容哦',
duration: 2000,
bottom: 50
})
return
}
this.saveTagIds()
//跳转首页
WDRouterRule.jumpWithReplacePage(WDRouterPage.mainPage)
... ...
... ... @@ -43,7 +43,10 @@
{
"name": "privacy_text_title_protocol",
"value": "《用户协议》"
},
{
"name": "reason_read_write_media",
"value": "user_grant"
}
]
}
\ No newline at end of file
... ...