shareCheckInUndefined.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  6. <meta name="format-detection" content="telephone=no">
  7. <title>打卡分享</title>
  8. <style>
  9. :root {
  10. --orange: #F58220;
  11. --text: #333333;
  12. --text-secondary: #999999;
  13. --border: #EEEEEE;
  14. --bg: #FFFFFF;
  15. --safe-bottom: env(safe-area-inset-bottom, 0px);
  16. }
  17. * {
  18. margin: 0;
  19. padding: 0;
  20. box-sizing: border-box;
  21. }
  22. html {
  23. font-size: 16px;
  24. -webkit-tap-highlight-color: transparent;
  25. overflow-x: hidden;
  26. }
  27. body {
  28. font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  29. background: var(--bg);
  30. color: var(--text);
  31. padding-bottom: calc(88px + var(--safe-bottom));
  32. min-height: 100vh;
  33. overflow-x: hidden;
  34. }
  35. .hero.hero--empty {
  36. display: flex;
  37. flex-direction: column;
  38. align-items: center;
  39. justify-content: center;
  40. padding: 48px 24px 56px;
  41. min-height: min(52vh, 440px);
  42. background: var(--bg);
  43. }
  44. .hero--empty__illustration {
  45. display: block;
  46. width: 100%;
  47. max-width: 280px;
  48. height: auto;
  49. object-fit: contain;
  50. }
  51. .hero--empty__tip {
  52. padding: 0 16px;
  53. margin-top: 12px;
  54. font-size: 15px;
  55. line-height: 1.5;
  56. color: var(--text-secondary);
  57. text-align: center;
  58. font-weight: 400;
  59. }
  60. .divider {
  61. height: 8px;
  62. background: #F7F7F7;
  63. margin: 0;
  64. }
  65. .more-title {
  66. padding: 8px 15px 12px;
  67. font-size: 16px;
  68. font-weight: 700;
  69. }
  70. .more-scroll {
  71. display: grid;
  72. grid-template-columns: repeat(2, 1fr);
  73. gap: 10px;
  74. padding: 0 15px 20px;
  75. }
  76. #recEmpty {
  77. grid-column: 1 / -1;
  78. }
  79. .rec-card {
  80. min-width: 0;
  81. background: #fff;
  82. border-radius: 10px;
  83. overflow: hidden;
  84. box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  85. }
  86. .rec-card__img {
  87. aspect-ratio: 4 / 3;
  88. background: #eee;
  89. }
  90. .rec-card__img img {
  91. width: 100%;
  92. height: 100%;
  93. object-fit: cover;
  94. display: block;
  95. border-radius: 0;
  96. }
  97. .rec-card__body {
  98. padding: 10px;
  99. }
  100. .rec-card__top {
  101. display: flex;
  102. justify-content: space-between;
  103. align-items: baseline;
  104. gap: 8px;
  105. margin-bottom: 6px;
  106. }
  107. .rec-card__name {
  108. font-size: 15px;
  109. font-weight: 700;
  110. flex: 1;
  111. min-width: 0;
  112. overflow: hidden;
  113. text-overflow: ellipsis;
  114. white-space: nowrap;
  115. }
  116. .rec-card__dist {
  117. font-size: 12px;
  118. color: var(--text-secondary);
  119. flex-shrink: 0;
  120. }
  121. .rec-card__rating {
  122. display: flex;
  123. align-items: center;
  124. flex-wrap: wrap;
  125. gap: 4px 6px;
  126. }
  127. .rec-card__rating .stars {
  128. display: inline-flex;
  129. align-items: center;
  130. gap: 2px;
  131. }
  132. .rec-card__rating .rec-star {
  133. display: block;
  134. flex-shrink: 0;
  135. }
  136. .rec-card__rating .rating-num {
  137. font-size: 12px;
  138. font-weight: 600;
  139. color: var(--orange);
  140. }
  141. .rec-meta {
  142. font-size: 12px;
  143. color: var(--text-secondary);
  144. }
  145. .rec-card__footer {
  146. margin-top: 8px;
  147. font-size: 12px;
  148. color: var(--text-secondary);
  149. overflow: hidden;
  150. text-overflow: ellipsis;
  151. white-space: nowrap;
  152. }
  153. .fab-wrap {
  154. position: fixed;
  155. left: 0;
  156. right: 0;
  157. bottom: 0;
  158. z-index: 200;
  159. padding: 12px 24px calc(12px + var(--safe-bottom));
  160. background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 70%, transparent);
  161. pointer-events: none;
  162. }
  163. .fab-wrap .fab {
  164. pointer-events: auto;
  165. }
  166. .fab {
  167. display: flex;
  168. align-items: center;
  169. justify-content: center;
  170. gap: 10px;
  171. width: 100%;
  172. max-width: 320px;
  173. margin: 0 auto;
  174. height: 48px;
  175. border: none;
  176. border-radius: 24px;
  177. background: var(--orange);
  178. color: #fff;
  179. font-size: 16px;
  180. font-weight: 600;
  181. box-shadow: 0 4px 16px rgba(245, 130, 32, 0.45);
  182. cursor: pointer;
  183. }
  184. .fab img {
  185. flex-shrink: 0;
  186. }
  187. .home-indicator {
  188. height: 5px;
  189. background: #000;
  190. border-radius: 3px;
  191. width: 134px;
  192. margin: 8px auto 4px;
  193. opacity: 0.2;
  194. }
  195. </style>
  196. </head>
  197. <body>
  198. <div class="hero hero--empty" role="status" aria-live="polite">
  199. <img class="hero--empty__illustration" id="heroEmptyIllustration" src="images/empty.png" alt="" decoding="async">
  200. <p class="hero--empty__tip" id="heroEmptyTip">内容已删除</p>
  201. </div>
  202. <div class="divider"></div>
  203. <h3 class="more-title">更多推荐</h3>
  204. <div class="more-scroll" id="recList">
  205. <p id="recEmpty" style="padding:12px;color:#999;font-size:14px;display:none;">暂无推荐</p>
  206. </div>
  207. <div class="fab-wrap">
  208. <button type="button" class="fab" id="openApp">
  209. <img src="images/uBtn.png" alt="APP内打开" decoding="async">
  210. </button>
  211. <div class="home-indicator" aria-hidden="true"></div>
  212. </div>
  213. <script>
  214. (function () {
  215. 'use strict';
  216. /**
  217. * 更多推荐:POST …/dev-life-manager-ai/ai/multimodal-services/api/v1/search/global/store-recommend
  218. * 请求体:page、pageSize、storeId(字符串)、userCity、userLat、userLng;均可由 URL query 覆盖。
  219. */
  220. var API_LIFE_AI_BASE = 'http://124.93.18.180:9100';
  221. var STORE_GLOBAL_RECOMMEND_PATH =
  222. '/ai/multimodal-services/api/v1/search/global/store-recommend';
  223. var DEFAULT_USER_LAT = 38.925747;
  224. var DEFAULT_USER_LNG = 121.662531;
  225. var DEFAULT_USER_CITY = '大连市';
  226. var DEFAULT_STORE_ID = '378';
  227. var APP_ANDROID_PACKAGE = 'com.alien.Udianzaizhe';
  228. var APP_IOS_URL_SCHEME = 'shopro://';
  229. var APP_UNI_STORE_PATH = 'pages/checkIn/index';
  230. function qs() {
  231. return new URLSearchParams(location.search || '');
  232. }
  233. function q(name) {
  234. var v = qs().get(name);
  235. return v == null ? '' : String(v);
  236. }
  237. function showDownloadTip() {
  238. var msg = '请到应用商店下载';
  239. if (typeof uni !== 'undefined' && typeof uni.showToast === 'function') {
  240. uni.showToast({ title: msg, icon: 'none', duration: 2500 });
  241. } else {
  242. window.alert(msg);
  243. }
  244. }
  245. function mergeSearchAndHashParams() {
  246. var params = new URLSearchParams();
  247. function ingest(querySlice) {
  248. if (!querySlice) return;
  249. var p = new URLSearchParams(querySlice);
  250. p.forEach(function (val, key) {
  251. params.append(key, val);
  252. });
  253. }
  254. if (location.search && location.search.length > 1) {
  255. ingest(location.search.slice(1));
  256. }
  257. var hash = location.hash || '';
  258. var qi = hash.indexOf('?');
  259. if (qi >= 0) {
  260. ingest(hash.slice(qi + 1));
  261. }
  262. return params;
  263. }
  264. /** businessStatus=99(商户关闭):插图与文案;否则为「内容已删除」 */
  265. function applyEmptyHeroState() {
  266. var merged = mergeSearchAndHashParams();
  267. var bsRaw = merged.get('businessStatus');
  268. if (bsRaw == null || bsRaw === '') bsRaw = q('businessStatus');
  269. var bs = bsRaw == null ? '' : String(bsRaw).trim();
  270. var isClosed = Number(bs) === 99 || bs === '99';
  271. var img = document.getElementById('heroEmptyIllustration');
  272. var tip = document.getElementById('heroEmptyTip');
  273. if (!img || !tip) return;
  274. if (isClosed) {
  275. img.src = 'images/storeNone.png';
  276. img.alt = '';
  277. tip.textContent = '抱歉商户已关闭,看看别的吧';
  278. } else {
  279. img.src = 'images/empty.png';
  280. img.alt = '';
  281. tip.textContent = '内容已删除';
  282. }
  283. img.onerror = function () {
  284. this.onerror = null;
  285. this.src = 'images/empty.png';
  286. };
  287. }
  288. function buildAppOpenQueryStringMerged() {
  289. var params = mergeSearchAndHashParams();
  290. var sid = params.get('storeId') || params.get('id') || '';
  291. if (sid && !params.has('storeId')) {
  292. params.set('storeId', sid);
  293. }
  294. return params.toString() ? ('?' + params.toString()) : '';
  295. }
  296. function buildAppDeepLink() {
  297. var path = String(APP_UNI_STORE_PATH || 'pages/checkIn/index').replace(/^\//, '');
  298. var s = buildAppOpenQueryStringMerged();
  299. var root = APP_IOS_URL_SCHEME.replace(/\/$/, '');
  300. if (!s) {
  301. return root + '/' + path;
  302. }
  303. return root + '/' + path + s;
  304. }
  305. function launchAppDeepLink(deepLink) {
  306. try {
  307. var a = document.createElement('a');
  308. a.href = deepLink;
  309. a.setAttribute('target', '_self');
  310. document.body.appendChild(a);
  311. a.click();
  312. document.body.removeChild(a);
  313. } catch (e1) {}
  314. try {
  315. window.location.href = deepLink;
  316. } catch (e2) {}
  317. }
  318. function tryOpenHBuilderApp() {
  319. var deepLink = buildAppDeepLink();
  320. if (typeof plus !== 'undefined' && plus.runtime) {
  321. var installed = null;
  322. try {
  323. if (typeof plus.runtime.isApplicationExist === 'function') {
  324. installed = plus.runtime.isApplicationExist({
  325. pname: APP_ANDROID_PACKAGE,
  326. action: APP_IOS_URL_SCHEME
  327. });
  328. }
  329. } catch (e) {
  330. console.warn(e);
  331. }
  332. if (installed === false) {
  333. showDownloadTip();
  334. return;
  335. }
  336. if (installed === true) {
  337. try {
  338. plus.runtime.openURL(deepLink);
  339. } catch (e2) {
  340. console.warn(e2);
  341. showDownloadTip();
  342. }
  343. return;
  344. }
  345. }
  346. var t0 = Date.now();
  347. var done = false;
  348. function finish() {
  349. if (done) return;
  350. done = true;
  351. document.removeEventListener('visibilitychange', onVis);
  352. window.removeEventListener('pagehide', onHide);
  353. }
  354. function onVis() {
  355. if (document.visibilityState === 'hidden') finish();
  356. }
  357. function onHide() {
  358. finish();
  359. }
  360. document.addEventListener('visibilitychange', onVis);
  361. window.addEventListener('pagehide', onHide);
  362. launchAppDeepLink(deepLink);
  363. window.setTimeout(function () {
  364. if (done) return;
  365. if (document.visibilityState === 'visible' && Date.now() - t0 < 3500) {
  366. showDownloadTip();
  367. }
  368. finish();
  369. }, 2600);
  370. }
  371. function isApiOk(res) {
  372. if (!res || typeof res !== 'object') return false;
  373. if (res.success === false) return false;
  374. var c = res.code;
  375. return c === 200 || c === '200' || Number(c) === 200;
  376. }
  377. function fetchStoreGlobalRecommend() {
  378. var latRaw = (q('userLat') || q('latitude') || q('lat') || q('weidu')).trim();
  379. var lngRaw = (q('userLng') || q('longitude') || q('lon') || q('jingdu')).trim();
  380. var userLat =
  381. latRaw !== '' && !isNaN(Number(latRaw)) ? Number(latRaw) : DEFAULT_USER_LAT;
  382. var userLng =
  383. lngRaw !== '' && !isNaN(Number(lngRaw)) ? Number(lngRaw) : DEFAULT_USER_LNG;
  384. var page = parseInt(q('page') || '1', 10);
  385. var pageSize = parseInt(q('pageSize') || '10', 10);
  386. if (isNaN(page) || page < 1) page = 1;
  387. if (isNaN(pageSize) || pageSize < 1) pageSize = 10;
  388. var storeIdRaw = (q('storeId') || q('id') || '').trim();
  389. var storeId = storeIdRaw !== '' ? storeIdRaw : DEFAULT_STORE_ID;
  390. var userCityRaw = (q('userCity') || q('city') || '').trim();
  391. var userCity = userCityRaw !== '' ? userCityRaw : DEFAULT_USER_CITY;
  392. var body = {
  393. page: page,
  394. pageSize: pageSize,
  395. storeId: String(storeId),
  396. userCity: userCity,
  397. userLat: userLat,
  398. userLng: userLng
  399. };
  400. return fetch(API_LIFE_AI_BASE + STORE_GLOBAL_RECOMMEND_PATH, {
  401. method: 'POST',
  402. mode: 'cors',
  403. credentials: 'omit',
  404. headers: {
  405. Accept: 'application/json',
  406. 'Content-Type': 'application/json;charset=UTF-8'
  407. },
  408. body: JSON.stringify(body)
  409. }).then(function (res) {
  410. if (!res.ok) throw new Error('HTTP ' + res.status);
  411. return res.json();
  412. });
  413. }
  414. function normalizeStoreRecommendList(res) {
  415. if (!res || typeof res !== 'object') return [];
  416. var raw = res.data != null ? res.data : res.result;
  417. if (Array.isArray(raw)) return raw;
  418. if (raw && typeof raw === 'object') {
  419. if (Array.isArray(raw.list)) return raw.list;
  420. if (Array.isArray(raw.records)) return raw.records;
  421. if (Array.isArray(raw.rows)) return raw.rows;
  422. if (Array.isArray(raw.content)) return raw.content;
  423. if (Array.isArray(raw.stores)) return raw.stores;
  424. if (Array.isArray(raw.storeList)) return raw.storeList;
  425. if (Array.isArray(raw.storeVos)) return raw.storeVos;
  426. if (Array.isArray(raw.items)) return raw.items;
  427. }
  428. if (Array.isArray(res.list)) return res.list;
  429. if (Array.isArray(res.records)) return res.records;
  430. return [];
  431. }
  432. function formatRecDistance(item) {
  433. /** 后端 distance 为千米,展示为米 */
  434. if (item.distance != null && item.distance !== '') {
  435. var km = Number(item.distance);
  436. if (!isNaN(km) && km >= 0) {
  437. return Math.round(km * 1000) + '米';
  438. }
  439. return String(item.distance).trim();
  440. }
  441. if (item.position != null && String(item.position).trim() !== '') {
  442. return String(item.position).trim();
  443. }
  444. if (item.dist != null && item.dist !== '') {
  445. var dn = Number(item.dist);
  446. if (!isNaN(dn)) {
  447. return dn >= 1 ? dn.toFixed(dn % 1 === 0 ? 0 : 1) + 'km' : Math.round(dn * 1000) + '米';
  448. }
  449. }
  450. return '';
  451. }
  452. function escHtml(s) {
  453. return String(s == null ? '' : s)
  454. .replace(/&/g, '&amp;')
  455. .replace(/</g, '&lt;')
  456. .replace(/>/g, '&gt;')
  457. .replace(/"/g, '&quot;');
  458. }
  459. var STAR_PATH = 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z';
  460. function starsHtml(score) {
  461. var s = Number(score);
  462. if (isNaN(s)) s = 0;
  463. s = Math.max(0, Math.min(5, s));
  464. var rounded = Math.round(s);
  465. var parts = [];
  466. var i;
  467. for (i = 1; i <= 5; i++) {
  468. var fill = i <= rounded ? '#F58220' : '#E5E5E5';
  469. parts.push(
  470. '<svg class="rec-star" width="11" height="11" viewBox="0 0 24 24" aria-hidden="true">' +
  471. '<path fill="' + fill + '" d="' + STAR_PATH + '"/></svg>'
  472. );
  473. }
  474. return '<span class="stars">' + parts.join('') + '</span>';
  475. }
  476. function pickScore(item) {
  477. var x =
  478. item.scoreAvg != null ? Number(item.scoreAvg)
  479. : item.score != null ? Number(item.score)
  480. : item.rating != null ? Number(item.rating)
  481. : item.starScore != null ? Number(item.starScore)
  482. : NaN;
  483. return isNaN(x) ? null : x;
  484. }
  485. function pickReviewCount(item) {
  486. var n =
  487. item.commitCount != null ? Number(item.commitCount)
  488. : item.commentCount != null ? Number(item.commentCount)
  489. : item.reviewCount != null ? Number(item.reviewCount)
  490. : item.evaluateCount != null ? Number(item.evaluateCount)
  491. : NaN;
  492. return isNaN(n) ? 0 : Math.max(0, Math.floor(n));
  493. }
  494. function renderRecommended(list) {
  495. var wrap = document.getElementById('recList');
  496. var empty = document.getElementById('recEmpty');
  497. wrap.querySelectorAll('.rec-card').forEach(function (n) {
  498. n.remove();
  499. });
  500. if (!list || !list.length) {
  501. empty.style.display = 'block';
  502. return;
  503. }
  504. empty.style.display = 'none';
  505. list.forEach(function (item) {
  506. if (!item || typeof item !== 'object') return;
  507. var imgUrlField = item.imgUrl != null ? String(item.imgUrl).trim() : '';
  508. var home = item.homeImage != null ? String(item.homeImage).trim() : '';
  509. if (home && /\.mp4(\?|#|$)/i.test(home)) {
  510. var vf = item.videoFirstFrame != null ? String(item.videoFirstFrame).trim() : '';
  511. if (vf) home = vf;
  512. }
  513. var imgUrl =
  514. imgUrlField ||
  515. home ||
  516. (item.coverUrl != null ? String(item.coverUrl).trim() : '') ||
  517. (item.mainImage != null ? String(item.mainImage).trim() : '') ||
  518. (item.goodsImage != null ? String(item.goodsImage).trim() : '') ||
  519. (item.entranceImage != null ? String(item.entranceImage).trim() : '') ||
  520. (Array.isArray(item.goodsImageList) && item.goodsImageList[0]) ||
  521. (Array.isArray(item.imageList) && item.imageList[0]) ||
  522. (Array.isArray(item.storeAlbumUrlList) && item.storeAlbumUrlList[0]) ||
  523. '';
  524. var name = item.title != null && String(item.title).trim() !== ''
  525. ? String(item.title).replace(/\r?\n/g, ' ').replace(/\s+/g, ' ').trim()
  526. : (item.storeName || item.goodsName || item.secondGoodsTitle || item.name || '推荐');
  527. var dist = formatRecDistance(item);
  528. var scoreVal = pickScore(item);
  529. var displayScore = scoreVal != null ? scoreVal.toFixed(1) : '—';
  530. var starScore = scoreVal != null ? scoreVal : 0;
  531. var rc = pickReviewCount(item);
  532. var reviewLabel = rc > 0 ? rc + '条评价' : '';
  533. var seller =
  534. item.userName != null && String(item.userName).trim() !== ''
  535. ? String(item.userName).trim()
  536. : (item.nickName != null && String(item.nickName).trim() !== ''
  537. ? String(item.nickName).trim()
  538. : '');
  539. var card = document.createElement('article');
  540. card.className = 'rec-card';
  541. card.innerHTML =
  542. '<div class="rec-card__img"><img class="rec-card__cover" src="" alt="" decoding="async"></div>' +
  543. '<div class="rec-card__body">' +
  544. '<div class="rec-card__top">' +
  545. '<span class="rec-card__name">' + escHtml(name) + '</span>' +
  546. (dist ? '<span class="rec-card__dist">' + escHtml(dist) + '</span>' : '') +
  547. '</div>' +
  548. '<div class="rec-card__rating">' +
  549. starsHtml(starScore) +
  550. '<span class="rating-num">' + escHtml(displayScore) + '</span>' +
  551. (reviewLabel ? '<span class="rec-meta">' + escHtml(reviewLabel) + '</span>' : '') +
  552. '</div>' +
  553. (seller ? '<div class="rec-card__footer">' + escHtml(seller) + '</div>' : '') +
  554. '</div>';
  555. var coverIm = card.querySelector('img.rec-card__cover');
  556. if (coverIm) {
  557. coverIm.src = imgUrl;
  558. coverIm.onerror = function () {
  559. this.onerror = null;
  560. this.src = '';
  561. };
  562. }
  563. wrap.appendChild(card);
  564. });
  565. }
  566. function run() {
  567. fetchStoreGlobalRecommend()
  568. .then(function (res) {
  569. var list = normalizeStoreRecommendList(res);
  570. if (!list.length && res && res.msg) {
  571. console.warn('[store-recommend]', res.msg);
  572. }
  573. renderRecommended(list);
  574. })
  575. .catch(function (e) {
  576. console.error(e);
  577. renderRecommended([]);
  578. });
  579. }
  580. function boot() {
  581. applyEmptyHeroState();
  582. run();
  583. var openBtn = document.getElementById('openApp');
  584. if (openBtn) {
  585. openBtn.addEventListener('click', function () {
  586. tryOpenHBuilderApp();
  587. });
  588. }
  589. }
  590. if (document.readyState === 'complete') {
  591. boot();
  592. } else {
  593. window.onload = boot;
  594. }
  595. })();
  596. </script>
  597. </body>
  598. </html>