zz-shopify-components 0.0.27 → 0.0.28-beta.2

package/assets/zz-http-request.js

@@ -1,73 +1,73 @@
-(function () {
-  const DEFAULT_BASE_URL = 'https://h130-app-server-us.hoverx1.cn';
-
-  const DEFAULT_TIMEOUT = 60000;
-
-  function getToken() {
-    return localStorage.getItem('token') || '';
-  }
-
-  function buildUrl(url, params = {}) {
-    const queryString = new URLSearchParams(params).toString();
-    return queryString ? `${url}?${queryString}` : url;
-  }
-
-  function timeoutFetch(fetchPromise, timeout = DEFAULT_TIMEOUT) {
-    return Promise.race([
-      fetchPromise,
-      new Promise((_, reject) =>
-        setTimeout(() => reject(new Error('请求超时，请重试')), timeout)
-      ),
-    ]);
-  }
-
-  function request(method, url, params = {}, options = {}) {
-    const baseUrl = options.baseUrl || DEFAULT_BASE_URL;
-
-    const timeout = options.timeout || DEFAULT_TIMEOUT;
-
-    const fullUrl = baseUrl + url;
-
-    let fetchOptions = {
-      method: method.toUpperCase(),
-      headers: {
-        'Content-Type': 'application/json',
-        ...(options.headers || {}),
-      },
-      ...options,
-    };
-
-    if (method.toLowerCase() === 'get') {
-      return timeoutFetch(
-        fetch(buildUrl(fullUrl, params), fetchOptions),
-        timeout
-      ).then(handleResponse);
-    } else {
-      fetchOptions.body = JSON.stringify(params);
-      return timeoutFetch(fetch(fullUrl, fetchOptions), timeout).then(
-        handleResponse
-      );
-    }
-  }
-
-  function handleResponse(response) {
-    if (!response.ok) {
-      if (response.status === 401) {
-        // 未登录或登录过期，即将跳转登录页
-      }
-      return response.json().then((err) => {
-        throw err;
-      });
-    }
-    return response.json();
-  }
-
-  window.httpRequest = {
-    get: function (url, params = {}, options = {}) {
-      return request('get', url, params, options);
-    },
-    post: function (url, params = {}, options = {}) {
-      return request('post', url, params, options);
-    },
-  };
-})();
+(function () {
+  const DEFAULT_BASE_URL = 'https://h130-app-server-us.hoverx1.cn';
+
+  const DEFAULT_TIMEOUT = 60000;
+
+  function getToken() {
+    return localStorage.getItem('token') || '';
+  }
+
+  function buildUrl(url, params = {}) {
+    const queryString = new URLSearchParams(params).toString();
+    return queryString ? `${url}?${queryString}` : url;
+  }
+
+  function timeoutFetch(fetchPromise, timeout = DEFAULT_TIMEOUT) {
+    return Promise.race([
+      fetchPromise,
+      new Promise((_, reject) =>
+        setTimeout(() => reject(new Error('请求超时，请重试')), timeout)
+      ),
+    ]);
+  }
+
+  function request(method, url, params = {}, options = {}) {
+    const baseUrl = options.baseUrl || DEFAULT_BASE_URL;
+
+    const timeout = options.timeout || DEFAULT_TIMEOUT;
+
+    const fullUrl = baseUrl + url;
+
+    let fetchOptions = {
+      method: method.toUpperCase(),
+      headers: {
+        'Content-Type': 'application/json',
+        ...(options.headers || {}),
+      },
+      ...options,
+    };
+
+    if (method.toLowerCase() === 'get') {
+      return timeoutFetch(
+        fetch(buildUrl(fullUrl, params), fetchOptions),
+        timeout
+      ).then(handleResponse);
+    } else {
+      fetchOptions.body = JSON.stringify(params);
+      return timeoutFetch(fetch(fullUrl, fetchOptions), timeout).then(
+        handleResponse
+      );
+    }
+  }
+
+  function handleResponse(response) {
+    if (!response.ok) {
+      if (response.status === 401) {
+        // 未登录或登录过期，即将跳转登录页
+      }
+      return response.json().then((err) => {
+        throw err;
+      });
+    }
+    return response.json();
+  }
+
+  window.httpRequest = {
+    get: function (url, params = {}, options = {}) {
+      return request('get', url, params, options);
+    },
+    post: function (url, params = {}, options = {}) {
+      return request('post', url, params, options);
+    },
+  };
+})();

package/assets/zz-world-video-comments-dialog.js

@@ -1,240 +1,240 @@
-class WorldVideoCommentsDialog extends HTMLElement {
-  isOpen = false;
-  swiper = null; // swiper实例
-  mediaId = '';
-  page = 1;
-
-  pageSize = 15;
-  hasMore = true;
-
-  constructor() {
-    super();
-    this.init();
-  }
-  connectedCallback() {
-    this.baseUrl =
-      this.dataset.requestType === 'prod'
-        ? 'https://h130-app-server-us.hoverx1.cn'
-        : 'https://h130-app-server-test-us.hoverx1.cn';
-  }
-
-  init() {
-    const closeBtn = this.querySelector('.close-modal-btn');
-    closeBtn.addEventListener('click', () => {
-      this.closeModal();
-    });
-
-    this.addSubCommentAction();
-  }
-  addFooterAction() {
-    // 监听 word-video-comments-list-footer 出现在视口上就发送请求第二页数据
-    const videoPageContentFooter = this.querySelector(
-      '.word-video-comments-list-footer'
-    );
-    if (!videoPageContentFooter) {
-      console.warn('Footer element not found');
-      return;
-    }
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          if (this.hasMore) {
-            this.page++;
-            this.getComments();
-          }
-        }
-      });
-    });
-    observer.observe(videoPageContentFooter);
-  }
-  addSubCommentAction() {
-    // 使用事件委托，在父元素上监听点击事件
-    const commentsList = this.querySelector('.word-video-comments-list');
-    if (commentsList) {
-      commentsList.addEventListener('click', (event) => {
-        // 检查点击的元素是否是 .more-comment 或其子元素
-        const moreCommentBtn = event.target.closest('.more-comment');
-        if (moreCommentBtn) {
-          const id = moreCommentBtn.getAttribute('data-id');
-          const total = moreCommentBtn.getAttribute('data-total');
-          const subCommentId = moreCommentBtn.getAttribute(
-            'data-sub-comment-id'
-          );
-          this.getSubComments(id, total, subCommentId, moreCommentBtn);
-        }
-      });
-    }
-  }
-  // 初始化
-  showModal(id) {
-    this.mediaId = id;
-    this.getComments();
-    const modal = this.querySelector('.word-video-comments-modal');
-    const mask = this.querySelector('.world-video-comments-mask');
-    modal.style.display = 'block';
-    if (window.innerWidth < 1024) {
-      mask.style.display = 'block';
-    }
-    setTimeout(() => {
-      modal.classList.add('show');
-    }, 10);
-    const swiperDialog = document.querySelector('world-video-dialog');
-    if (swiperDialog) {
-      swiperDialog.closeTouchMove();
-    }
-  }
-  closeModal() {
-    this.mediaId = '';
-    const modal = this.querySelector('.word-video-comments-modal');
-    const mask = this.querySelector('.world-video-comments-mask');
-
-    modal.classList.remove('show');
-    setTimeout(() => {
-      modal.style.display = 'none';
-      mask.style.display = 'none';
-    }, 300);
-    const swiperDialog = document.querySelector('world-video-dialog');
-    if (swiperDialog) {
-      swiperDialog.openTouchMove();
-    }
-  }
-  getComments() {
-    if (this.hasMore === false || (this.isOpen && this.page === 1)) {
-      return;
-    }
-    httpRequest
-      .get(
-        '/shopify/comment-list',
-        {
-          page: this.page,
-          pageSize: this.pageSize,
-          mediaId: this.mediaId,
-          source: 1,
-        },
-        { baseUrl: this.baseUrl }
-      )
-      .then((res) => {
-        if (res.code === 200) {
-          this.isOpen = true;
-          if (res.data.list.length < this.pageSize) {
-            this.hasMore = false;
-            this.hideFooter();
-          }
-          this.updateComments(res.data.list);
-          this.updateReplyTitleNum(res.data.total);
-        }
-      });
-  }
-  formatTimestamp(ts) {
-    if (!ts) return '';
-    const date = new Date(ts);
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hour = String(date.getHours()).padStart(2, '0');
-    const minute = String(date.getMinutes()).padStart(2, '0');
-    return `${year}/${month}/${day} ${hour}:${minute}`;
-  }
-  hideFooter() {
-    const footer = this.querySelector('.word-video-comments-list-footer');
-    if (footer) {
-      footer.style.display = 'none';
-    }
-  }
-  updateComments(newComments) {
-    const template = $('#video-comment').html();
-    newComments.forEach((item) => {
-      let replacedTemplate = template
-        .replace(new RegExp('{commentId}', 'g'), item.commentId)
-        .replace(new RegExp('{avatar}', 'g'), item.user.avatar)
-        .replace(new RegExp('{nickname}', 'g'), item.user.nickname)
-        .replace(new RegExp('{content}', 'g'), item.content);
-
-      if (item.time) {
-        const time = this.formatTimestamp(item.time);
-        replacedTemplate = replacedTemplate.replace(
-          new RegExp('{time}', 'g'),
-          time
-        );
-      }
-      if (item.subCommentCount == 0) {
-        replacedTemplate = replacedTemplate.replace(
-          new RegExp('{hasReply}', 'g'),
-          'tw-hidden'
-        );
-      } else if (item.subCommentCount == 1) {
-        replacedTemplate = replacedTemplate
-          .replace(new RegExp('{hasReply}', 'g'), 'tw-block')
-          .replace(new RegExp('{hasMore}', 'g'), 'tw-hidden');
-      } else if (item.subCommentCount > 1) {
-        replacedTemplate = replacedTemplate
-          .replace(new RegExp('{hasReply}', 'g'), 'tw-block')
-          .replace(new RegExp('{hasMore}', 'g'), 'tw-block')
-          .replace(new RegExp('{moreNum}', 'g'), item.subCommentCount - 1)
-          .replace(new RegExp('{total}', 'g'), item.subCommentCount);
-      }
-      if (item.subComments.length > 0) {
-        const subComments = item.subComments[0];
-        replacedTemplate = replacedTemplate
-          .replace(new RegExp('{sub-avatar}', 'g'), subComments.user.avatar)
-          .replace(new RegExp('{sub-nickname}', 'g'), subComments.user.nickname)
-          .replace(new RegExp('{sub-content}', 'g'), subComments.content)
-          .replace(
-            new RegExp('{sub-time}', 'g'),
-            this.formatTimestamp(subComments.time)
-          )
-          .replace(new RegExp('{subCommentId}', 'g'), subComments.commentId);
-      }
-      const footer = this.querySelector('.word-video-comments-list-footer');
-      $(footer).before(replacedTemplate);
-      this.addFooterAction();
-    });
-  }
-  updateReplyTitleNum(num) {
-    const replyTitle = this.querySelector('.reply-title-num');
-    if (replyTitle) {
-      replyTitle.textContent = num;
-    }
-  }
-
-  updateSubComments(id, newSubComments) {
-    const template = $('#video-comment').html();
-    newSubComments.forEach((item, index) => {
-      const replacedTemplate = template
-        .replace(new RegExp('{avatar}', 'g'), item.user.avatar)
-        .replace(new RegExp('{nickname}', 'g'), item.user.nickname)
-        .replace(new RegExp('{content}', 'g'), item.content)
-        .replace(new RegExp('{time}', 'g'), this.formatTimestamp(item.time))
-        .replace(new RegExp('{hasReply}', 'g'), 'tw-hidden');
-
-      // 找到 data-comment-id 为 id 的元素
-      const commentItem = this.querySelector(`[data-comment-id="${id}"]`);
-      if (commentItem) {
-        $(commentItem).append(replacedTemplate);
-      }
-    });
-  }
-  getSubComments(id, total, subCommentId, moreCommentBtn) {
-    // 二级评论 展开更多
-    httpRequest
-      .get(
-        '/shopify/sub-comment-list',
-        {
-          page: 1,
-          pageSize: total,
-          mediaId: this.mediaId,
-          commentId: id,
-          source: 1,
-          subTopCommentIds: subCommentId,
-        },
-        { baseUrl: this.baseUrl }
-      )
-      .then((res) => {
-        if (res.code === 200) {
-          this.updateSubComments(id, res.data.list);
-          moreCommentBtn.classList.add('tw-hidden');
-        }
-      });
-  }
-}
-customElements.define('world-video-comments-dialog', WorldVideoCommentsDialog);
+class WorldVideoCommentsDialog extends HTMLElement {
+  isOpen = false;
+  swiper = null; // swiper实例
+  mediaId = '';
+  page = 1;
+
+  pageSize = 15;
+  hasMore = true;
+
+  constructor() {
+    super();
+    this.init();
+  }
+  connectedCallback() {
+    this.baseUrl =
+      this.dataset.requestType === 'prod'
+        ? 'https://h130-app-server-us.hoverx1.cn'
+        : 'https://h130-app-server-test-us.hoverx1.cn';
+  }
+
+  init() {
+    const closeBtn = this.querySelector('.close-modal-btn');
+    closeBtn.addEventListener('click', () => {
+      this.closeModal();
+    });
+
+    this.addSubCommentAction();
+  }
+  addFooterAction() {
+    // 监听 word-video-comments-list-footer 出现在视口上就发送请求第二页数据
+    const videoPageContentFooter = this.querySelector(
+      '.word-video-comments-list-footer'
+    );
+    if (!videoPageContentFooter) {
+      console.warn('Footer element not found');
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (this.hasMore) {
+            this.page++;
+            this.getComments();
+          }
+        }
+      });
+    });
+    observer.observe(videoPageContentFooter);
+  }
+  addSubCommentAction() {
+    // 使用事件委托，在父元素上监听点击事件
+    const commentsList = this.querySelector('.word-video-comments-list');
+    if (commentsList) {
+      commentsList.addEventListener('click', (event) => {
+        // 检查点击的元素是否是 .more-comment 或其子元素
+        const moreCommentBtn = event.target.closest('.more-comment');
+        if (moreCommentBtn) {
+          const id = moreCommentBtn.getAttribute('data-id');
+          const total = moreCommentBtn.getAttribute('data-total');
+          const subCommentId = moreCommentBtn.getAttribute(
+            'data-sub-comment-id'
+          );
+          this.getSubComments(id, total, subCommentId, moreCommentBtn);
+        }
+      });
+    }
+  }
+  // 初始化
+  showModal(id) {
+    this.mediaId = id;
+    this.getComments();
+    const modal = this.querySelector('.word-video-comments-modal');
+    const mask = this.querySelector('.world-video-comments-mask');
+    modal.style.display = 'block';
+    if (window.innerWidth < 1024) {
+      mask.style.display = 'block';
+    }
+    setTimeout(() => {
+      modal.classList.add('show');
+    }, 10);
+    const swiperDialog = document.querySelector('world-video-dialog');
+    if (swiperDialog) {
+      swiperDialog.closeTouchMove();
+    }
+  }
+  closeModal() {
+    this.mediaId = '';
+    const modal = this.querySelector('.word-video-comments-modal');
+    const mask = this.querySelector('.world-video-comments-mask');
+
+    modal.classList.remove('show');
+    setTimeout(() => {
+      modal.style.display = 'none';
+      mask.style.display = 'none';
+    }, 300);
+    const swiperDialog = document.querySelector('world-video-dialog');
+    if (swiperDialog) {
+      swiperDialog.openTouchMove();
+    }
+  }
+  getComments() {
+    if (this.hasMore === false || (this.isOpen && this.page === 1)) {
+      return;
+    }
+    httpRequest
+      .get(
+        '/shopify/comment-list',
+        {
+          page: this.page,
+          pageSize: this.pageSize,
+          mediaId: this.mediaId,
+          source: 1,
+        },
+        { baseUrl: this.baseUrl }
+      )
+      .then((res) => {
+        if (res.code === 200) {
+          this.isOpen = true;
+          if (res.data.list.length < this.pageSize) {
+            this.hasMore = false;
+            this.hideFooter();
+          }
+          this.updateComments(res.data.list);
+          this.updateReplyTitleNum(res.data.total);
+        }
+      });
+  }
+  formatTimestamp(ts) {
+    if (!ts) return '';
+    const date = new Date(ts);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hour = String(date.getHours()).padStart(2, '0');
+    const minute = String(date.getMinutes()).padStart(2, '0');
+    return `${year}/${month}/${day} ${hour}:${minute}`;
+  }
+  hideFooter() {
+    const footer = this.querySelector('.word-video-comments-list-footer');
+    if (footer) {
+      footer.style.display = 'none';
+    }
+  }
+  updateComments(newComments) {
+    const template = $('#video-comment').html();
+    newComments.forEach((item) => {
+      let replacedTemplate = template
+        .replace(new RegExp('{commentId}', 'g'), item.commentId)
+        .replace(new RegExp('{avatar}', 'g'), item.user.avatar)
+        .replace(new RegExp('{nickname}', 'g'), item.user.nickname)
+        .replace(new RegExp('{content}', 'g'), item.content);
+
+      if (item.time) {
+        const time = this.formatTimestamp(item.time);
+        replacedTemplate = replacedTemplate.replace(
+          new RegExp('{time}', 'g'),
+          time
+        );
+      }
+      if (item.subCommentCount == 0) {
+        replacedTemplate = replacedTemplate.replace(
+          new RegExp('{hasReply}', 'g'),
+          'tw-hidden'
+        );
+      } else if (item.subCommentCount == 1) {
+        replacedTemplate = replacedTemplate
+          .replace(new RegExp('{hasReply}', 'g'), 'tw-block')
+          .replace(new RegExp('{hasMore}', 'g'), 'tw-hidden');
+      } else if (item.subCommentCount > 1) {
+        replacedTemplate = replacedTemplate
+          .replace(new RegExp('{hasReply}', 'g'), 'tw-block')
+          .replace(new RegExp('{hasMore}', 'g'), 'tw-block')
+          .replace(new RegExp('{moreNum}', 'g'), item.subCommentCount - 1)
+          .replace(new RegExp('{total}', 'g'), item.subCommentCount);
+      }
+      if (item.subComments.length > 0) {
+        const subComments = item.subComments[0];
+        replacedTemplate = replacedTemplate
+          .replace(new RegExp('{sub-avatar}', 'g'), subComments.user.avatar)
+          .replace(new RegExp('{sub-nickname}', 'g'), subComments.user.nickname)
+          .replace(new RegExp('{sub-content}', 'g'), subComments.content)
+          .replace(
+            new RegExp('{sub-time}', 'g'),
+            this.formatTimestamp(subComments.time)
+          )
+          .replace(new RegExp('{subCommentId}', 'g'), subComments.commentId);
+      }
+      const footer = this.querySelector('.word-video-comments-list-footer');
+      $(footer).before(replacedTemplate);
+      this.addFooterAction();
+    });
+  }
+  updateReplyTitleNum(num) {
+    const replyTitle = this.querySelector('.reply-title-num');
+    if (replyTitle) {
+      replyTitle.textContent = num;
+    }
+  }
+
+  updateSubComments(id, newSubComments) {
+    const template = $('#video-comment').html();
+    newSubComments.forEach((item, index) => {
+      const replacedTemplate = template
+        .replace(new RegExp('{avatar}', 'g'), item.user.avatar)
+        .replace(new RegExp('{nickname}', 'g'), item.user.nickname)
+        .replace(new RegExp('{content}', 'g'), item.content)
+        .replace(new RegExp('{time}', 'g'), this.formatTimestamp(item.time))
+        .replace(new RegExp('{hasReply}', 'g'), 'tw-hidden');
+
+      // 找到 data-comment-id 为 id 的元素
+      const commentItem = this.querySelector(`[data-comment-id="${id}"]`);
+      if (commentItem) {
+        $(commentItem).append(replacedTemplate);
+      }
+    });
+  }
+  getSubComments(id, total, subCommentId, moreCommentBtn) {
+    // 二级评论 展开更多
+    httpRequest
+      .get(
+        '/shopify/sub-comment-list',
+        {
+          page: 1,
+          pageSize: total,
+          mediaId: this.mediaId,
+          commentId: id,
+          source: 1,
+          subTopCommentIds: subCommentId,
+        },
+        { baseUrl: this.baseUrl }
+      )
+      .then((res) => {
+        if (res.code === 200) {
+          this.updateSubComments(id, res.data.list);
+          moreCommentBtn.classList.add('tw-hidden');
+        }
+      });
+  }
+}
+customElements.define('world-video-comments-dialog', WorldVideoCommentsDialog);