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) { @@ -123,7 +123,8 @@ function handleJsCallReceiveH5Data(data: Message) {
123 height: item.height, 123 height: item.height,
124 picPath: item.pic, 124 picPath: item.pic,
125 picDesc: '', 125 picDesc: '',
126 - itemType:2 126 + itemType:2,
  127 + id:0
127 } 128 }
128 return photo 129 return photo
129 }) 130 })
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 4
5 // 【图文、图集稿件正文图片】图片信息数组 5 // 【图文、图集稿件正文图片】图片信息数组
6 export interface PhotoListBean { 6 export interface PhotoListBean {
  7 + id: number;
7 height: number; 8 height: number;
8 width: number; 9 width: number;
9 picPath: string; 10 picPath: string;
@@ -19,6 +19,7 @@ const TAG = 'FeedBackActivity' @@ -19,6 +19,7 @@ const TAG = 'FeedBackActivity'
19 @Entry 19 @Entry
20 @Component 20 @Component
21 export struct FeedBackActivity { 21 export struct FeedBackActivity {
  22 + @State textNumLabel: string = '0/500';
22 contact: string = ""; 23 contact: string = "";
23 email: string = ""; 24 email: string = "";
24 //UI 25 //UI
@@ -81,67 +82,91 @@ export struct FeedBackActivity { @@ -81,67 +82,91 @@ export struct FeedBackActivity {
81 .fontWeight(FontWeight.Bold) 82 .fontWeight(FontWeight.Bold)
82 .width(CommonConstants.FULL_WIDTH) 83 .width(CommonConstants.FULL_WIDTH)
83 .margin({ left: $r('app.float.vp_16'), top: $r('app.float.vp_12') }) 84 .margin({ left: $r('app.float.vp_16'), top: $r('app.float.vp_12') })
84 - Stack({ alignContent: Alignment.BottomEnd }) {  
85 - TextInput({ placeholder: $r('app.string.feedback_comments') })  
86 - .width(CommonConstants.FULL_WIDTH)  
87 - .height(CommonConstants.FULL_HEIGHT)  
88 - .backgroundColor($r('app.color.color_F5F5F5'))  
89 - .align(Alignment.TopStart)  
90 - .onChange((value) => {  
91 - // Logger.debug(TAG, "onChange" + value + "/" + this.passwordContent)  
92 - this.contact = value  
93 - })  
94 - GridRow({  
95 - columns:3,  
96 - }) { 85 + Stack({ alignContent: Alignment.BottomEnd }) {
  86 + TextArea({ placeholder: $r('app.string.feedback_comments') })
  87 + .width(CommonConstants.FULL_WIDTH)
  88 + .height(CommonConstants.FULL_HEIGHT)
  89 + .padding({bottom:96})
  90 + .backgroundColor($r('app.color.color_F5F5F5'))
  91 + .align(Alignment.TopStart)
  92 + .onChange((value) => {
  93 + // Logger.debug(TAG, "onChange" + value + "/" + this.passwordContent)
  94 + this.contact = value
  95 + this.textNumLabel = value.length+"/500"
  96 + })
  97 + GridRow({
  98 + columns:5,
  99 + }) {
97 100
98 - ForEach(this.pics, (feedbackImageItem: PhotoListBean, index: number) => {  
99 - GridCol({  
100 - }) {  
101 - if(1 == feedbackImageItem.itemType){  
102 - Image($r('app.media.feekback_add'))  
103 - .width(60)  
104 - .height(60)  
105 - .onClick(async (event: ClickEvent) => {  
106 - if(await FastClickUtil.isMinDelayTime()){  
107 - return  
108 - }  
109 - this.callFilePickerSelectImage();  
110 - })  
111 - }else{  
112 - Stack({alignContent: Alignment.TopEnd}) {  
113 - Image(feedbackImageItem.picPath) 101 + ForEach(this.pics, (feedbackImageItem: PhotoListBean, index: number) => {
  102 + GridCol({
  103 + }) {
  104 + if(1 == feedbackImageItem.itemType){
  105 + Image($r('app.media.feekback_add'))
114 .width(60) 106 .width(60)
115 .height(60) 107 .height(60)
116 - .borderRadius($r('app.float.margin_1'))  
117 - Image($r('app.media.icon_feekback_delete'))  
118 - .width(24)  
119 - .height(24)  
120 - .borderRadius($r('app.float.margin_1'))  
121 - }  
122 - .width(60)  
123 - .height(60)  
124 - .onClick(async (event: ClickEvent) => {  
125 - if(await FastClickUtil.isMinDelayTime()){  
126 - return 108 + .onClick(async (event: ClickEvent) => {
  109 + if(await FastClickUtil.isMinDelayTime()){
  110 + return
  111 + }
  112 + this.callFilePickerSelectImage();
  113 + })
  114 + }else{
  115 + Stack({alignContent: Alignment.TopEnd}) {
  116 + Image(feedbackImageItem.picPath)
  117 + .width(60)
  118 + .height(60)
  119 + .borderRadius($r('app.float.margin_1'))
  120 + .onClick(async (event: ClickEvent) => {
  121 + if(await FastClickUtil.isMinDelayTime()){
  122 + return
  123 + }
  124 + //查看图片 fixme 去除添加按钮
  125 + ProcessUtils.gotoMultiPictureListPage(this.pics, index)
  126 + })
  127 + Image($r('app.media.icon_feekback_delete'))
  128 + .width(24)
  129 + .height(24)
  130 + .borderRadius($r('app.float.margin_1'))
  131 + .onClick(async (event: ClickEvent) => {
  132 + if(await FastClickUtil.isMinDelayTime()){
  133 + return
  134 + }
  135 +
  136 + let temp: PhotoListBean[] = [] as PhotoListBean[]
  137 + temp.length = this.pics.length - 1;
  138 + let tempIndex = 0;
  139 + for (let index = 0; index < this.pics.length; index++) {
  140 + const element = this.pics[index];
  141 + if(!StringUtils.isEmpty(element.picPath) && element.id != feedbackImageItem.id){
  142 + temp[tempIndex] = element;
  143 + tempIndex = tempIndex+1
  144 + }
  145 + }
  146 + if(tempIndex < 3){
  147 + temp[tempIndex] = this.addPic
  148 + }
  149 + this.pics = temp
  150 + })
127 } 151 }
128 - //查看图片 fixme 去除添加按钮  
129 - ProcessUtils.gotoMultiPictureListPage(this.pics, index)  
130 - }) 152 + .width(60)
  153 + .height(60)
  154 + }
131 } 155 }
132 - }  
133 - }) 156 + })
  157 + }
  158 + .margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_12'),left: $r('app.float.vp_12')})
  159 + Text(this.textNumLabel)
  160 + .margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_11')})
134 } 161 }
135 - .width(CommonConstants.FULL_WIDTH)  
136 - .margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_12'),left: $r('app.float.vp_12')})  
137 - Text('0/500')  
138 - .margin({bottom: $r('app.float.vp_12'), right: $r('app.float.vp_11')})  
139 - }  
140 - .height(200)  
141 - .width('100%')  
142 - .margin({ left: $r('app.float.vp_16'), top: $r('app.float.vp_12'), right: $r('app.float.vp_16') })  
143 - .backgroundColor($r('app.color.color_F5F5F5'))  
144 - .borderRadius(4) 162 + .height(200)
  163 + .width('90%')
  164 + .margin({ top: $r('app.float.vp_12') })
  165 + .backgroundColor($r('app.color.color_F5F5F5'))
  166 + .borderRadius(4)
  167 +
  168 +
  169 +
145 170
146 Text($r('app.string.feedback_email')) 171 Text($r('app.string.feedback_email'))
147 .fontColor($r('app.color.color_222222')) 172 .fontColor($r('app.color.color_222222'))
@@ -154,7 +179,6 @@ export struct FeedBackActivity { @@ -154,7 +179,6 @@ export struct FeedBackActivity {
154 .fontColor($r('app.color.color_222222')) 179 .fontColor($r('app.color.color_222222'))
155 .fontSize($r('app.float.font_size_14')) 180 .fontSize($r('app.float.font_size_14'))
156 .fontWeight(FontWeight.Bold) 181 .fontWeight(FontWeight.Bold)
157 - .margin({ left: $r('app.float.vp_12') })  
158 TextInput({ placeholder: $r('app.string.feedback_hideemail') }) 182 TextInput({ placeholder: $r('app.string.feedback_hideemail') })
159 .width(CommonConstants.FULL_WIDTH) 183 .width(CommonConstants.FULL_WIDTH)
160 .height(CommonConstants.FULL_HEIGHT) 184 .height(CommonConstants.FULL_HEIGHT)
@@ -165,8 +189,9 @@ export struct FeedBackActivity { @@ -165,8 +189,9 @@ export struct FeedBackActivity {
165 }) 189 })
166 } 190 }
167 .height(44) 191 .height(44)
168 - .margin({ left: $r('app.float.vp_16'), right: $r('app.float.vp_12'), top: $r('app.float.margin_16') }) 192 + .width('90%')
169 .backgroundColor($r('app.color.color_F5F5F5')) 193 .backgroundColor($r('app.color.color_F5F5F5'))
  194 + .margin({top: $r('app.float.margin_16') })
170 .borderRadius(4) 195 .borderRadius(4)
171 Blank().layoutWeight(1) 196 Blank().layoutWeight(1)
172 } 197 }
@@ -225,21 +250,23 @@ export struct FeedBackActivity { @@ -225,21 +250,23 @@ export struct FeedBackActivity {
225 // 其中包含Array<string>类型的photoUris，为返回图库选择后的媒体文件的uri数组；还包含boolean类型的isOriginalPhoto，指示返回图库选择后的媒体文件是否为原图。 250 // 其中包含Array<string>类型的photoUris，为返回图库选择后的媒体文件的uri数组；还包含boolean类型的isOriginalPhoto，指示返回图库选择后的媒体文件是否为原图。
226 // 声明变量array，其取值为PhotoSelectResult中的数组。 251 // 声明变量array，其取值为PhotoSelectResult中的数组。
227 array = PhotoSelectResult['photoUris']; 252 array = PhotoSelectResult['photoUris'];
  253 + let startIndex = this.pics.length-1;
228 let totalLen = this.pics.length+array.length; 254 let totalLen = this.pics.length+array.length;
229 if(totalLen > 3){ 255 if(totalLen > 3){
230 totalLen = 3 256 totalLen = 3
231 } 257 }
232 this.pics.length = totalLen; 258 this.pics.length = totalLen;
233 - let startIndex = this.pics.length-1;  
234 259
235 array.forEach((value) => { 260 array.forEach((value) => {
236 let pic: PhotoListBean = {itemType:2,picPath:value} as PhotoListBean 261 let pic: PhotoListBean = {itemType:2,picPath:value} as PhotoListBean
  262 + pic.id = startIndex
237 this.pics[startIndex] = pic 263 this.pics[startIndex] = pic
238 startIndex = startIndex+1; 264 startIndex = startIndex+1;
239 mediaFlag = true; 265 mediaFlag = true;
240 Logger.info(TAG, `select image/video uri: ${value}`); 266 Logger.info(TAG, `select image/video uri: ${value}`);
241 }) 267 })
242 if(this.pics.length<3){ 268 if(this.pics.length<3){
  269 + this.addPic.id = startIndex
243 this.pics[this.pics.length-1]=this.addPic; 270 this.pics[this.pics.length-1]=this.addPic;
244 } 271 }
245 } 272 }
@@ -41,7 +41,8 @@ export struct Card19Component { @@ -41,7 +41,8 @@ export struct Card19Component {
41 height: item.height, 41 height: item.height,
42 picPath: item.fullUrl, 42 picPath: item.fullUrl,
43 picDesc: '', 43 picDesc: '',
44 - itemType:2 44 + itemType:2,
  45 + id:0
45 } 46 }
46 return photo 47 return photo
47 }) 48 })