developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
张善主
ad1b5e13 1 parent ffeec0e5

feat(意见反馈)：UI调整3

Inline Side-by-side
Showing 4 changed files with 90 additions and 60 deletions
... ... @@ -123,7 +123,8 @@ function handleJsCallReceiveH5Data(data: Message) {
height: item.height,
picPath: item.pic,
picDesc: '',
itemType:2
itemType:2,
id:0
}
return photo
})
... ...
... ... @@ -4,6 +4,7 @@
// 【图文、图集稿件正文图片】图片信息数组
export interface PhotoListBean {
id: number;
height: number;
width: number;
picPath: string;
... ...
... ... @@ -19,6 +19,7 @@ const TAG = 'FeedBackActivity'
@Entry
@Component
export struct FeedBackActivity {
@State textNumLabel: string = '0/500';
contact: string = "";
email: string = "";
//UI
... ... @@ -81,67 +82,91 @@ export struct FeedBackActivity {
.fontWeight(FontWeight.Bold)
.width(CommonConstants.FULL_WIDTH)
.margin({ left: $r('app.float.vp_16'), top: $r('app.float.vp_12') })
Stack({ alignContent: Alignment.BottomEnd }) {
TextInput({ placeholder: $r('app.string.feedback_comments') })
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.backgroundColor($r('app.color.color_F5F5F5'))
.align(Alignment.TopStart)
.onChange((value) => {
// Logger.debug(TAG, "onChange" + value + "/" + this.passwordContent)
this.contact = value
})
GridRow({
columns:3,
}) {
Stack({ alignContent: Alignment.BottomEnd }) {
TextArea({ placeholder: $r('app.string.feedback_comments') })
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.padding({bottom:96})
.backgroundColor($r('app.color.color_F5F5F5'))
.align(Alignment.TopStart)
.onChange((value) => {
// Logger.debug(TAG, "onChange" + value + "/" + this.passwordContent)
this.contact = value
this.textNumLabel = value.length+"/500"
})
GridRow({
columns:5,
}) {
ForEach(this.pics, (feedbackImageItem: PhotoListBean, index: number) => {
GridCol({
}) {
if(1 == feedbackImageItem.itemType){
Image($r('app.media.feekback_add'))
.width(60)
.height(60)
.onClick(async (event: ClickEvent) => {
if(await FastClickUtil.isMinDelayTime()){
return
}
this.callFilePickerSelectImage();
})
}else{
Stack({alignContent: Alignment.TopEnd}) {
Image(feedbackImageItem.picPath)
ForEach(this.pics, (feedbackImageItem: PhotoListBean, index: number) => {
GridCol({
}) {
if(1 == feedbackImageItem.itemType){
Image($r('app.media.feekback_add'))
.width(60)
.height(60)
.borderRadius($r('app.float.margin_1'))
Image($r('app.media.icon_feekback_delete'))
.width(24)
.height(24)
.borderRadius($r('app.float.margin_1'))
}
.width(60)
.height(60)
.onClick(async (event: ClickEvent) => {
if(await FastClickUtil.isMinDelayTime()){
return
.onClick(async (event: ClickEvent) => {
if(await FastClickUtil.isMinDelayTime()){
return
}
this.callFilePickerSelectImage();
})
}else{
Stack({alignContent: Alignment.TopEnd}) {
Image(feedbackImageItem.picPath)
.width(60)
.height(60)
.borderRadius($r('app.float.margin_1'))
.onClick(async (event: ClickEvent) => {
if(await FastClickUtil.isMinDelayTime()){
return
}
//查看图片 fixme 去除添加按钮
ProcessUtils.gotoMultiPictureListPage(this.pics, index)
})
Image($r('app.media.icon_feekback_delete'))
.width(24)
.height(24)
.borderRadius($r('app.float.margin_1'))
.onClick(async (event: ClickEvent) => {
if(await FastClickUtil.isMinDelayTime()){
return
}
let temp: PhotoListBean[] = [] as PhotoListBean[]
temp.length = this.pics.length - 1;
let tempIndex = 0;
for (let index = 0; index < this.pics.length; index++) {
const element = this.pics[index];
if(!StringUtils.isEmpty(element.picPath) && element.id != feedbackImageItem.id){
temp[tempIndex] = element;
tempIndex = tempIndex+1
}
}
if(tempIndex < 3){
temp[tempIndex] = this.addPic
}
this.pics = temp
})
}
//查看图片 fixme 去除添加按钮
ProcessUtils.gotoMultiPictureListPage(this.pics, index)
})
.width(60)
.height(60)
}
}
}
})
})
}
.margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_12'),left: $r('app.float.vp_12')})
Text(this.textNumLabel)
.margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_11')})
}
.width(CommonConstants.FULL_WIDTH)
.margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_12'),left: $r('app.float.vp_12')})
Text('0/500')
.margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_11')})
}
.height(200)
.width('100%')
.margin({ left: $r('app.float.vp_16'), top: $r('app.float.vp_12'), right: $r('app.float.vp_16') })
.backgroundColor($r('app.color.color_F5F5F5'))
.borderRadius(4)
.height(200)
.width('90%')
.margin({ top: $r('app.float.vp_12') })
.backgroundColor($r('app.color.color_F5F5F5'))
.borderRadius(4)
Text($r('app.string.feedback_email'))
.fontColor($r('app.color.color_222222'))
... ... @@ -154,7 +179,6 @@ export struct FeedBackActivity {
.fontColor($r('app.color.color_222222'))
.fontSize($r('app.float.font_size_14'))
.fontWeight(FontWeight.Bold)
.margin({ left: $r('app.float.vp_12') })
TextInput({ placeholder: $r('app.string.feedback_hideemail') })
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
... ... @@ -165,8 +189,9 @@ export struct FeedBackActivity {
})
}
.height(44)
.margin({ left: $r('app.float.vp_16'), right: $r('app.float.vp_12'), top: $r('app.float.margin_16') })
.width('90%')
.backgroundColor($r('app.color.color_F5F5F5'))
.margin({top: $r('app.float.margin_16') })
.borderRadius(4)
Blank().layoutWeight(1)
}
... ... @@ -225,21 +250,23 @@ export struct FeedBackActivity {
// 其中包含Array<string>类型的photoUris，为返回图库选择后的媒体文件的uri数组；还包含boolean类型的isOriginalPhoto，指示返回图库选择后的媒体文件是否为原图。
// 声明变量array，其取值为PhotoSelectResult中的数组。
array = PhotoSelectResult['photoUris'];
let startIndex = this.pics.length-1;
let totalLen = this.pics.length+array.length;
if(totalLen > 3){
totalLen = 3
}
this.pics.length = totalLen;
let startIndex = this.pics.length-1;
array.forEach((value) => {
let pic: PhotoListBean = {itemType:2,picPath:value} as PhotoListBean
pic.id = startIndex
this.pics[startIndex] = pic
startIndex = startIndex+1;
mediaFlag = true;
Logger.info(TAG, `select image/video uri: ${value}`);
})
if(this.pics.length<3){
this.addPic.id = startIndex
this.pics[this.pics.length-1]=this.addPic;
}
}
... ...
... ... @@ -41,7 +41,8 @@ export struct Card19Component {
height: item.height,
picPath: item.fullUrl,
picDesc: '',
itemType:2
itemType:2,
id:0
}
return photo
})
... ...