github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/near/near_update.html (about) 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="copyright" content="www.apicloud.com" /> 6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> 7 <title>附近动态</title> 8 <link rel="stylesheet" type="text/css" href="../../css/api.css" /> 9 <link rel="stylesheet" type="text/css" href="../../css/idangerous.swiper.css"> 10 <style> 11 html,body {min-height: 100%;} 12 .fr {float: right;} 13 .fl {float: left;} 14 .mt5 {margin-top: 5px;} 15 .mt10 {margin-top: 10px;} 16 .mt15 {margin-top: 15px;} 17 .mt20 {margin-top: 20px;} 18 .ml5 {margin-left: 0.5em;} 19 .mr5 {margin-right: 0.5em;} 20 .hdivider {width: 100%; height: 1px;background-color: #e0e0e0;} 21 22 .row {display: -webkit-box;display: -webkit-flex;} 23 .col {-webkit-box-flex:1; -webkit-flex:1; flex:1;margin: 0 5px; position: relative;} 24 25 .swiper-container img {width: 100%;} 26 27 /* 标题 */ 28 .sectionTitle {height: 2em; line-height: 2em; font-size: 1.12em;} 29 .sectionTitle .titleDivider {display: inline-block; height: 1.12em; width: 3px; vertical-align: top; background-color: #D43C33; margin-top: 0.44em; margin-left: 0.7em; margin-right: 0.3em;} 30 /* */ 31 .col .listcoverbar {position: absolute; top: 0; background-color: rgba(0,0,0,0.4); width: 100%;height: 1.2em;} 32 .col .listcoverbar span {color: #fff;} 33 .col .listcoverbar .earphone {width: 1em; margin-top: 0.2em; margin-right: 0.3em;} 34 .col .listcover {width: 100%;} 35 .col .listtitle {height: 2.4em; font-size: 1em; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} 36 37 /* item样式 */ 38 .egret-item {height: 4em;} 39 .egret-item .egret-item-box-cover-center {display: table; height: inherit;} 40 .egret-item .egret-item-box-cover-center .egret-item-box-abtc {display: table-cell; vertical-align: middle;} 41 .egret-item .egret-item-box-cover-center .egret-item-box-abtc img {width: 3em; vertical-align: top;} 42 /* 右侧箭头样式 */ 43 .egret-item .egret-item-arrow {display: table; height: inherit;} 44 .egret-item .egret-item-arrow .egret-item-box-abtc {display: table-cell; vertical-align: middle;} 45 .egret-item .egret-item-arrow .egret-item-box-abtc img {width: 0.8em; vertical-align: top;} 46 /* 中间shelf 两个条目*/ 47 .egret-item .egret-item-shelf {height: inherit; } 48 .egret-item .egret-item-shelf .egret-item-shelf-title {font-size: 1.1em; margin-top: 0.6em;} 49 .egret-item .egret-item-shelf .egret-item-shelf-subtitle {font-size: 0.6em; color: #666; margin-top: 0.6em;} 50 /* 中间shelf 一个条目 */ 51 .egret-item .egret-item-shelf-single {height: inherit; line-height: 4em;font-size: 1.1em;} 52 .egret-item .egret-item-shelf-redclassify {color: #E03F40; border:1px solid #E03F40; font-size: inherit;padding: 0.1em;border-radius: 1px;margin-right: 5px;} 53 54 55 /* 用flex重写框架 */ 56 .egret-flex-item {display: -webkit-box;-webkit-box-align:center;height: 4em;} 57 /* 左部logo */ 58 .egret-flex-item-logo {max-width: 50px; min-width: 50px; margin-left: 0.5em; margin-right: 0.2em;-webkit-box-flex: 1; -webkit-box-align: center;} 59 .egret-flex-item-logo img {height: 3em; width: 3em; -webkit-box-align: center;vertical-align: top;/*否则图片不会居中，底部仍然是会有空白*/} 60 /* 中间文本信息 */ 61 .egret-flex-item-shelf {overflow: hidden; -webkit-box-flex:2; -webkit-box-align: center;} 62 .egret-flex-item-shelf div {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} 63 .egret-flex-item-shelf .egret-flex-item-shelf01 {font-size: 1.1em;} 64 .egret-flex-item-shelf .egret-flex-item-shelf02 {font-size: 0.6em; color: #666; margin-top: 0.6em;} 65 .egret-flex-item-shelf .egret-flex-item-redclassify {color: #E03F40; border: 1px solid #E03F40; font-size: inherit; padding: 0 0.1em; border-radius: 1px; margin-right: 5px;box-sizing: border-box;} 66 67 /* 右部箭头 */ 68 .egret-flex-item-arrow {-webkit-box-flex: 1;max-width: 10px; min-width: 10px; margin-right: 5px;} 69 .egret-flex-item-arrow img {width: 100%; max-width: 10px;} 70 71 72 /* 关注card */ 73 .sharecard {display: -webkit-box;margin-left: 10px;margin-right: 10px;margin-top: 10px;padding: 10px 10px 15px 10px;border: 1px solid #e0e0e0;background-color: #fff;} 74 .sharecard .userlogo {margin-right: 10px;} 75 .sharecard .userlogo img {width: 40px;vertical-align: top;border-radius: 20px;} 76 .sharecard .rightcol {-webkit-box-flex: 1;} 77 .sharecard .rightcol .usertitle {font-size: 0.9em; color: #666;} 78 .sharecard .rightcol .usertitle .username{font-size: 1em; color: #507DAF; margin-right: 5px;} 79 .sharecard .rightcol .usertitle .sharetime{float: right; font-size: 0.6em; color: #999;} 80 .sharecard .rightcol .sharecontent {font-size: 1em; line-height: 1.3em;padding-top: 5px;} 81 .sharecard .rightcol .sharemusic{display: -webkit-box;margin-top: 15px;border: 1px solid #e0e0e0;-webkit-box-align: center;} 82 .sharecard .rightcol .sharemusic .musiclogo {padding: 5px;} 83 .sharecard .rightcol .sharemusic .musiclogo img {vertical-align: top;width: 60px;} 84 .sharecard .rightcol .sharemusic .musictitle {} 85 .sharecard .rightcol .sharemusic .musictitle .title02 {font-size: 0.8em;color: #666;margin-top: 10px;} 86 .sharetool {display: -webkit-box; height: 30px; line-height: 30px; margin: 0 10px 10px 10px;border: 1px solid #e0e0e0; border-top: 0;background-color: #fff;} 87 .sharetool .tool {-webkit-box-flex:1;text-align: center;} 88 .sharetool .tool span {font-size: 0.8em; color: #666;} 89 .sharetool .tool img {width: 16px;vertical-align: top;padding: 7px;} 90 91 /* 悬浮 */ 92 .fmbtnhover {background: #D8D9DA ;} 93 .fmbtnhoverinside {background: #D8D9DA ;} 94 95 </style> 96 </head> 97 98 <body> 99 100 101 <!--D:\srccode\zuohaoshi\client\demo\wangyimusic20141207\html\third_frame\frame0301.html--> 102 103 <div class="sectionTitle mt20" id="data_div"></div> 104 105 <script id="mytmpl" type="text/x-dot-template"> 106 {{ if(it && it.length > 0){ }} 107 {{ for(var i=0;i<it.length;i++){ }} 108 {{ if(it[i].postid){ }} 109 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail('near','update',{{=it[i].postid}})"> 110 {{ }else{ }} 111 <div class="sharecard" tapmode="fmbtnhover" onclick="openDetail('near','update','1111111111')"> 112 {{ } }} 113 <div class="userlogo"><img src="../../image/test/frame0103cover02.jpg" alt=""></div> 114 <div class="rightcol"> 115 <div class="usertitle"> 116 {{ if(it[i].name){ }} 117 <span class="username">{{=it[i].name}}</span>24 学生<span class="sharetime">昨天17:23</span> 118 {{ }else{ }} 119 <span class="username">路人甲</span>24 学生<span class="sharetime">昨天17:23</span> 120 {{ } }} 121 </div> 122 {{ if(it[i].content){ }} 123 <p class="sharecontent">{{=it[i].content}}</p> 124 {{ }else{ }} 125 <p class="sharecontent">三十年来寻剑客，几回落叶又抽枝。 自从一见桃花后，直至如今更不疑。沩山览偈，诘其所悟，与之符契。嘱曰：从缘悟达，永无退失，善自护持。</p> 126 {{ } }} 127 128 {{ if(it[i].postid){ }} 129 <div class="sharemusic" tapmode="fmbtnhoverinside" onclick="openDetailImg('near','update',{{=it[i].postid}})"> 130 {{ }else{ }} 131 <div class="sharemusic" tapmode="fmbtnhoverinside" onclick="openDetailImg('near','update','1111111')"> 132 {{ } }} 133 134 {{ if(it[i].img_urls){ }} 135 136 {{ if(it[i].img_urls[0]){ }} 137 <div class="musiclogo"><img src="{{=it[i].img_urls[0]}}" alt=""></div> 138 {{ } }} 139 {{ if(it[i].img_urls[1]){ }} 140 <div class="musiclogo"><img src={{=it[i].img_urls[1]}} alt=""></div> 141 {{ } }} 142 {{ if(it[i].img_urls[2]){ }} 143 <div class="musiclogo"><img src={{=it[i].img_urls[2]}} alt=""></div> 144 {{ } }} 145 {{ if(it[i].img_urls[3]){ }} 146 <div class="musiclogo"><img src={{=it[i].img_urls[3]}} alt=""></div> 147 {{ } }} 148 {{ } }} 149 <!--<div class="musictitle"> 150 <div class="title01">「December」</div> 151 <div class="title02"> 有你有我</div> 152 </div> --> 153 </div> 154 </div> 155 </div> 156 157 {{ if(it[i].postid){ }} 158 <div class="sharetool" tapmode="fmbtnhoverinside" onclick="doComment('near','update',{{=it[i].postid}})"> 159 {{ }else{ }} 160 <div class="sharetool" tapmode="fmbtnhoverinside" onclick="doComment('near','update','1111111')"> 161 {{ } }} 162 163 <div class="tool01 tool"><img src="../../image/near/read.png" alt=""><span class="tool01num">175</span></div> 164 <div class="tool02 tool"><img src="../../image/near/zan.jpg" alt=""><span class="tool02num">199</span></div> 165 <div class="tool03 tool"><img src="../../image/near/faq.png" alt=""><span class="tool03num">198</span></div> 166 </div> 167 {{ } }} 168 169 {{ }else{ }} 170 <li>没有数据</li> 171 {{ } }} 172 </script> 173 174 175 176 177 <script type="text/javascript" src="../../script/api.js"></script> 178 <script type="text/javascript" src="../../script/idangerous.swiper.js"></script> 179 <script type="text/javascript" src="../../script/doT.min.js" charset="utf-8"></script> 180 <script type="text/javascript" src="../../script/app.js"></script> 181 182 <script type="text/javascript" charset="utf-8"> 183 184 function openDetail(grouptype,type,did) { 185 winName = grouptype + "_" + type + "_detail" 186 winUrl = winName + "_win.html" 187 api.openWin({ 188 name: winName, 189 url: winUrl, 190 pageParam: {dataId: did} 191 }); 192 } 193 194 function openDetailImg(grouptype,type,did) { 195 alert("应该弹出来个图片"); 196 } 197 198 function doComment(grouptype,type,did) { 199 alert("应该评论或赞++"); 200 } 201 202 203 var headerPos; 204 205 window.onload = function() { 206 } 207 208 apiready = function () { 209 console.log("come setFrameGroupIndex:win name:" + api.winName + " framename:" + api.frameName); 210 211 var pageSize=10; // 页容量 212 var totalData=0; // 定义一个变量存储第一次加载返回来的总记录数 213 var totalPages=0; // 定义一个变量存储第一次加载返回来的总页数 214 var tmp_html = ""; 215 $api.setStorage("currentPage", 1); // 默认设置为第一页 216 217 // 加载数据 218 // @currentPage:当前页码 219 // @isReload：是否为刷新操作 220 function loadData(currentPage,isReload){ 221 currentPage=isReload?1:currentPage; 222 223 user_id = $api.getStorage("user_id"); 224 //token = $api.getStorage("token"); 225 url = "/ay/search/update" 226 227 //url = "/u/" + "/users/search?loc_x=116&loc_y=40" + "&limit=" + pageSize + "&offset=" + currentPage; 228 myajax(url,'POST','', function(ret,err){ 229 if (ret) { 230 console.log("ret body = " + JSON.stringify(ret.body)); 231 //totalData=ret.totalCount; 232 //totalPages=ret.totalPages; 233 //var data=ret.data; 234 /* 235 { 236 pageSize:10, // 页码 237 currentPage:1, // 当前页 238 totalCount:100, // 总记录数 239 totalPages:10, // 总页数 240 data:[ // 当前页查询的记录 241 {id:1,name:'新生帝',age:22}, 242 {id:2,name:'流浪男',age:28} 243 ] 244 } 245 */ 246 totalData = 10; 247 totalPages = 8; 248 if(isReload){ 249 $api.setStorage("currentPage", 1); // 重新设置为1 250 tmp_html = ""; 251 } 252 253 // 渲染HTML 254 //get data from server 255 var obj1 = [ {"name":"test1_" + currentPage,"content":"this is test1 content"}, 256 {"name":"test2_" + currentPage,"content":"this is test2 content"}, 257 {"name":"test3_" + currentPage,"content":"this is test3 content"}, 258 {"name":"test4_" + currentPage,"content":"this is test4 content"} ]; 259 var obj = new Array(); 260 261 for(var i = 0; i < ret.body.posts.length; i++) { 262 console.log(ret.body.posts[i].uid); 263 console.log(ret.body.posts[i].content); 264 if(ret.body.posts[i].img_urls){ 265 obj.push({"name":ret.body.posts[i].uid,"content":ret.body.posts[i].content,"img_urls":ret.body.posts[i].img_urls}); 266 }else{ 267 obj.push({"name":ret.body.posts[i].uid,"content":ret.body.posts[i].content}); 268 } 269 } 270 obj = obj.concat(obj1); 271 //console.log(obj); 272 273 var data_div = $api.byId('data_div'); 274 var tpl = $api.byId('mytmpl').text; 275 var tempFn = doT.template(tpl); 276 data_div.innerHTML = tmp_html + tempFn(obj); //current html + cache html 277 tmp_html += tempFn(obj); 278 }else { 279 api.alert({ 280 msg:('错误码：'+err.code+'；错误信息：'+err.msg+'；网络状态码：'+err.statusCode) 281 }); 282 } 283 }); 284 } 285 286 // 结合下拉刷新 287 api.setRefreshHeaderInfo({ 288 visible: true, 289 loadingImg: 'widget://image/near/refresh.png', 290 bgColor: '#ccc', 291 textColor: '#fff', 292 textDown: '下拉刷新...', 293 textUp: '松开刷新...', 294 showTime: true 295 }, function(ret, err){ 296 297 loadData(1,true); // 第一次加载 298 api.refreshHeaderLoadDone(); 299 }); 300 301 // 默认第一次打开页面就下拉加载数据 302 api.refreshHeaderLoading(); 303 304 305 // 结合上拉刷新： 306 api.addEventListener({ 307 name:'scrolltobottom', 308 extra:{ 309 threshold:0 //设置距离底部多少距离时触发，默认值为0，数字类型 310 } 311 },function(ret,err){ 312 var _page=parseInt($api.getStorage("currentPage")); 313 if(_page+1<=totalPages){ 314 loadData(_page+1,false); 315 $api.setStorage("currentPage", _page+1); // 页码+1 316 } 317 else{ 318 alert("没有更多数据了！"); 319 } 320 }); 321 322 } 323 </script> 324 </html>