From 67df3c70de791a2d3afa9151ce6705f3d27abeea Mon Sep 17 00:00:00 2001
From: wanganxp <wanganxp@gmail.com>
Date: Tue, 17 Oct 2023 04:54:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=BC=94=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../element-takesnapshot.uvue                 | 105 +++--
 .../sticky-header/sticky-header.uvue          |   7 +-
 pages/template/list-news/list-news.uvue       | 400 +++++++++---------
 3 files changed, 278 insertions(+), 234 deletions(-)

diff --git a/pages/API/element-takesnapshot/element-takesnapshot.uvue b/pages/API/element-takesnapshot/element-takesnapshot.uvue
index 742b85d2..786be868 100644
--- a/pages/API/element-takesnapshot/element-takesnapshot.uvue
+++ b/pages/API/element-takesnapshot/element-takesnapshot.uvue
@@ -3,9 +3,7 @@
     <page-head id="page-head" title="getElementById"></page-head>
     <view class="uni-padding-wrap" id="snapshot-content">
       <text id="text">this is text</text>
-      <view id="view" class="uni-common-mt" style="border: 1px solid red"
-        >this is view</view
-      >
+      <view id="view" class="uni-common-mt" style="border: 1px solid red">this is view</view>
       <button class="uni-btn" @click="changeViewStyle">
         修改 view 宽高及背景色
       </button>
@@ -14,47 +12,78 @@
         点击截图
       </button>
     </view>
-    <image style="margin-top: 20px;" :src="snapImage" mode="aspectFit"></image>
+    <image style="margin-top: 20px;" :src="snapImage" mode="aspectFit" @longpress="saveToAlbum"></image>
   </view>
 </template>
 
 <script lang="uts">
-export default {
-  data() {
-    return {
-      snapImage:"/static/uni.png"
-    }
-  },
-  methods: {
+  export default {
+    data() {
+      return {
+        snapImage: "/static/uni.png"
+      }
+    },
+    methods: {
 
-    changeViewStyle(){
-      const text = uni.getElementById('text')!
-      text.style.setProperty('color', 'red')
+      changeViewStyle() {
+        const text = uni.getElementById('text')!
+        text.style.setProperty('color', 'red')
 
-      const view = uni.getElementById('view')!
-      view.style.setProperty('width', '90%')
-      view.style.setProperty('height', '50px')
-      view.style.setProperty('backgroundColor', '#007AFF')
-    },
-    takeSnapshotClick(){
-      const view = uni.getElementById('snapshot-content')!
-      view.takeSnapshot({
-        success:function(res:TakeSnapshotSuccess){
-          console.log(res.tempFilePath)
-          this.snapImage = res.tempFilePath
-          uni.showToast({
-            title:'截图成功'
-          })
-        },
-        fail:function(res:TakeSnapshotFail){
-          console.log(res)
-          uni.showToast({
-            icon:'error',
-            title:'截图失败'
-          })
-        }
-      } as TakeSnapshotOptions)
+        const view = uni.getElementById('view')!
+        view.style.setProperty('width', '90%')
+        view.style.setProperty('height', '50px')
+        view.style.setProperty('backgroundColor', '#007AFF')
+      },
+      takeSnapshotClick() {
+        const view = uni.getElementById('snapshot-content')!
+        view.takeSnapshot({
+          success: function (res : TakeSnapshotSuccess) {
+            console.log(res.tempFilePath)
+            this.snapImage = res.tempFilePath
+            uni.showToast({
+              title: '截图成功，路径：' + res.tempFilePath,
+              icon: "none"
+            })
+          },
+          fail: function (res : TakeSnapshotFail) {
+            console.log(res)
+            uni.showToast({
+              icon: 'error',
+              title: '截图失败'
+            })
+          }
+        } as TakeSnapshotOptions)
+      },
+      saveToAlbum(e : TouchEvent) {
+        // console.log(e.currentTarget!.getAttribute("src"));
+        let filePath : string = e.currentTarget!.getAttribute("src") as string
+        uni.showActionSheet({
+          itemList: ["保存"],
+          success: res => {
+            // console.log(res.tapIndex);
+            if (res.tapIndex == 0) {
+              uni.saveImageToPhotosAlbum({
+                filePath: filePath,
+                success() {
+                  uni.showToast({
+                    position: "center",
+                    icon: "none",
+                    title: "图片保存成功，请到手机相册查看"
+                  })
+                },
+                fail(e) {
+                  uni.showModal({
+                    content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
+                    showCancel: false
+                  });
+                }
+              })
+            }
+          },
+          fail: () => { },
+          complete: () => { }
+        });
+      }
     }
   }
-}
 </script>
diff --git a/pages/component/sticky-header/sticky-header.uvue b/pages/component/sticky-header/sticky-header.uvue
index 32dfa72b..0ba8d841 100644
--- a/pages/component/sticky-header/sticky-header.uvue
+++ b/pages/component/sticky-header/sticky-header.uvue
@@ -16,7 +16,7 @@
       <scroll-view style="background-color: #f5f5f5; flex-direction: row;" :scroll-x="true" :scroll-y="false" :show-scrollbar="false">
         <view class="flex-row" style="align-self: flex-start; flex-direction: row;">
           <text ref="swipertab" class="sift-item"
-            v-for="name in sift_item" @click="">
+            v-for="(name,index) in sift_item" @click="clickTH(index)">
             {{name}}
           </text>
         </view>
@@ -57,7 +57,10 @@
 			},
 			confirm_scroll_top_input(value : number) {
 			  this.scroll_top_input = value
-			}
+			},
+      clickTH(index:number){
+        console.log("点击表头：" + index);
+      }
 		}
 	}
 </script>
diff --git a/pages/template/list-news/list-news.uvue b/pages/template/list-news/list-news.uvue
index 2d0f7958..0fbb41bb 100644
--- a/pages/template/list-news/list-news.uvue
+++ b/pages/template/list-news/list-news.uvue
@@ -1,217 +1,229 @@
 <template>
-	<view style="width: 100%;height: 100%;">
-		<view class="banner" @click="bannerClick(banner)">
-			<image class="banner-img" :src="banner.cover"></image>
-			<text class="banner-title">{{ banner.title }}</text>
-		</view>
-		<list-view class="uni-list-content" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
-			:refresher-triggered="refresherTriggered" scroll-y = true>
-			<list-item v-for="(value, index) in listData" :key="index">
-				<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
-					<view class="uni-media-list">
-						<image class="uni-media-list-logo" :src="value.cover"></image>
-						<view class="uni-media-list-body">
-							<text class="uni-media-list-text-top">{{ value.title }}</text>
-							<view class="uni-media-list-text-bottom">
-								<text class="uni-media-list-text">{{ value.author_name }}</text>
-								<text class="uni-media-list-text">{{ value.published_at }}</text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</list-item>
-		</list-view>
-	</view>
+  <list-view style="flex: 1;" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
+    :refresher-triggered="refresherTriggered">
+    <list-item class="banner" @click="bannerClick(banner)">
+      <image class="banner-img" :src="banner.cover"></image>
+      <text class="banner-title">{{ banner.title }}</text>
+    </list-item>
+    <sticky-header>
+      <view style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
+        <button style="height: 40px;font-size: 13px;" v-for="(name,index) in th_item" @click="clickTH(index)">
+          {{name}}
+        </button>
+      </view>
+    </sticky-header>
+    <list-item v-for="(value, index) in listData" :key="index">
+      <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
+        <view class="uni-media-list">
+          <image class="uni-media-list-logo" :src="value.cover"></image>
+          <view class="uni-media-list-body">
+            <text class="uni-media-list-text-top">{{ value.title }}</text>
+            <view class="uni-media-list-text-bottom">
+              <text class="uni-media-list-text">{{ value.author_name }}</text>
+              <text class="uni-media-list-text">{{ value.published_at }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </list-item>
+  </list-view>
 </template>
 
 <script>
-	type Banner = {
-		cover: string | null,
-		title: string | null,
-		post_id: string | null
-	}
-	type Item = {
-		author_name: string,
-		cover: string,
-		id: number,
-		post_id: string,
-		published_at: string,
-		title: string
-	}
+  type Banner = {
+    cover : string | null,
+    title : string | null,
+    post_id : string | null
+  }
+  type Item = {
+    author_name : string,
+    cover : string,
+    id : number,
+    post_id : string,
+    published_at : string,
+    title : string
+  }
 
-	export default {
-		data() {
-			return {
-				refresherTriggered: false,
-				banner: {} as Banner,
-				listData: [] as Item[],
-				last_id: '',
-				pageVisible: false
-			};
-		},
-		onLoad() {
-			this.pageVisible = true; //设这个变量是为了避免联网结束后页面已经关闭，此时还继续执行回调逻辑的问题。不是必须的
-			this.getBanner();
-			this.getList();
-		},
-		onUnload() {
-			this.pageVisible = false;
-		},
-		methods: {
-			getBanner() {
-				let data = {
-					column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
-				};
-				uni.request<Banner>({
-					url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
-					data: data,
-					success: data => {
-						if(this.pageVisible){
-							this.refresherTriggered = false
-							if (data.statusCode == 200) {
+  export default {
+    data() {
+      return {
+        th_item: ["排序", "筛选"],
+        refresherTriggered: false,
+        banner: {} as Banner,
+        listData: [] as Item[],
+        last_id: '',
+        pageVisible: false
+      };
+    },
+    onLoad() {
+      this.pageVisible = true; //设这个变量是为了避免联网结束后页面已经关闭，此时还继续执行回调逻辑的问题。不是必须的
+      this.getBanner();
+      this.getList();
+    },
+    onUnload() {
+      this.pageVisible = false;
+    },
+    methods: {
+      getBanner() {
+        let data = {
+          column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
+        };
+        uni.request<Banner>({
+          url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
+          data: data,
+          success: data => {
+            if (this.pageVisible) {
+              this.refresherTriggered = false
+              if (data.statusCode == 200) {
                 const result = data.data
-                if(result != null){
+                if (result != null) {
                   this.banner = result;
                 }
-							}
-						}
-					},
-					fail: (e) => {
-						console.log('fail', e);
-					}
-				});
-			},
-			getList() {
-				let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
-				/* if (this.last_id != "") {
-					const minId = parseInt((this.last_id))
-					const time = new Date().getTime() + '';
-					const pageSize = 10;
-					url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
-				} */
+              }
+            }
+          },
+          fail: (e) => {
+            console.log('fail', e);
+          }
+        });
+      },
+      getList() {
+        let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
+        /* if (this.last_id != "") {
+          const minId = parseInt((this.last_id))
+          const time = new Date().getTime() + '';
+          const pageSize = 10;
+          url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
+        } */
 
-				uni.request<Item[]>({
-					url: url,
-					method:"GET",
-					success: (res) => {
-						if(this.pageVisible){
-							if (res.statusCode == 200) {
+        uni.request<Item[]>({
+          url: url,
+          method: "GET",
+          success: (res) => {
+            if (this.pageVisible) {
+              if (res.statusCode == 200) {
                 console.log(res);
-								const result = res.data
-								if(result != null){
-									this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
-									// this.listData.push(...result)
-									// this.last_id = this.listData[0].id + "";
-								}
-								this.refresherTriggered = false;
-							}
-						}
-					},
-					fail: (res) => {
-						if(this.pageVisible){
-							console.log('fail', res);
-							this.refresherTriggered = false
-						}
-					}
-				});
-			},
-			goDetail(e: Item) {
-				const detail = e;
-				const post_id = detail.post_id;
-				const cover = detail.cover;
-				const title = detail.title;
-				uni.navigateTo({
-					url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
-				});
-			},
-			bannerClick(e:Banner){
-				const detail = e;
-				const post_id = detail.post_id;
-				const cover = detail.cover;
-				const title = detail.title;
-				uni.navigateTo({
-					url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
-				});
-			},
-			onRefresherrefresh() {
-				if(this.pageVisible){
-					this.refresherTriggered = true
-					this.getBanner();
-					this.getList();
-				}
-			}
-		}
-	};
+                const result = res.data
+                if (result != null) {
+                  this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
+                  // this.listData.push(...result)
+                  // this.last_id = this.listData[0].id + "";
+                }
+                this.refresherTriggered = false;
+              }
+            }
+          },
+          fail: (res) => {
+            if (this.pageVisible) {
+              console.log('fail', res);
+              this.refresherTriggered = false
+            }
+          }
+        });
+      },
+      goDetail(e : Item) {
+        const detail = e;
+        const post_id = detail.post_id;
+        const cover = detail.cover;
+        const title = detail.title;
+        uni.navigateTo({
+          url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
+        });
+      },
+      bannerClick(e : Banner) {
+        const detail = e;
+        const post_id = detail.post_id;
+        const cover = detail.cover;
+        const title = detail.title;
+        uni.navigateTo({
+          url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
+        });
+      },
+      clickTH(index:number){
+        uni.showModal({
+          content: "点击表头项：" + index,
+          showCancel: false
+        });
+      },
+      onRefresherrefresh() {
+        if (this.pageVisible) {
+          this.refresherTriggered = true
+          this.getBanner();
+          this.getList();
+        }
+      }
+    }
+  };
 </script>
 
 <style>
-	.banner {
-		height: 360rpx;
-		overflow: hidden;
-		position: relative;
-		background-color: #ccc;
-	}
+  .banner {
+    height: 360rpx;
+    overflow: hidden;
+    position: relative;
+    background-color: #ccc;
+  }
 
-	.banner-img {
-		width: 100%;
-	}
+  .banner-img {
+    width: 100%;
+  }
 
-	.banner-title {
-		max-height: 84rpx;
-		overflow: hidden;
-		position: absolute;
-		left: 30rpx;
-		bottom: 30rpx;
-		width: 90%;
-		font-size: 32rpx;
-		font-weight: 400;
-		line-height: 42rpx;
-		color: white;
-	}
+  .banner-title {
+    max-height: 84rpx;
+    overflow: hidden;
+    position: absolute;
+    left: 30rpx;
+    bottom: 30rpx;
+    width: 90%;
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 42rpx;
+    color: white;
+  }
 
-	.uni-media-list {
-		padding: 22rpx 30rpx;
-		box-sizing: border-box;
-		display: flex;
-		width: 100%;
-		flex-direction: row;
-	}
+  .uni-media-list {
+    padding: 22rpx 30rpx;
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+  }
 
-	.uni-media-list-logo {
-		width: 180rpx;
-		height: 140rpx;
-	}
+  .uni-media-list-logo {
+    width: 180rpx;
+    height: 140rpx;
+  }
 
-	.uni-media-list-body {
-		flex: 1;
-		padding-left: 15rpx;
-		justify-content: space-around;
-	}
+  .uni-media-list-body {
+    flex: 1;
+    padding-left: 15rpx;
+    justify-content: space-around;
+  }
 
-	.uni-list-content{
-		background-color: #FFFFFF;
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		border-bottom: 1px solid #c8c7cc;
-		flex: 1;
-	}
+  .uni-list-content {
+    background-color: #FFFFFF;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #c8c7cc;
+    flex: 1;
+  }
 
-	.uni-media-list-text-top {
-		/* height: 74rpx; */
-		font-size: 28rpx;
-		lines:2;
-		overflow: hidden;
-	}
+  .uni-media-list-text-top {
+    /* height: 74rpx; */
+    font-size: 28rpx;
+    lines: 2;
+    overflow: hidden;
+  }
 
-	.uni-media-list-text-bottom {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-	}
+  .uni-media-list-text-bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 
-	.uni-media-list-text {
-		color: #9D9D9F;
-		font-size: 25rpx;
-	}
+  .uni-media-list-text {
+    color: #9D9D9F;
+    font-size: 25rpx;
+  }
 </style>
-- 
GitLab