account/contacts#

Danh sách yêu cầu hỗ trợ của khách.

• Tệp giao diện: account/contacts.html
• Đường dẫn: /tai-khoan/lien-he
• Controller: App\Modules\Account\AccountController::contactsPage

Ngoài những biến dưới đây, slot này còn nhận toàn bộ biến toàn cục.

Biến của trang#

Mã đầy đủ#

Toàn bộ tệp account/contacts.html của bộ giao diện mặc định. Chép về templates/<bộ giao diện của bạn>/account/contacts.html rồi sửa theo ý muốn.

<div class="container page-content">
  <h1 class="page-title">Liên hệ & Hỗ trợ</h1>
  <div class="account-layout">
    {% assign active_page = 'contacts' %}
    {% include 'account/_sidebar' %}
    <div class="account-main">
      {% if error %}<div class="alert alert--error">{{ error }}</div>{% endif %}

      <section class="account-section">
        <h2 class="account-section__title">Gửi yêu cầu mới</h2>
        <form method="POST" action="/tai-khoan/lien-he" class="form">
          <input type="text" name="_hp" style="display:none" tabindex="-1" autocomplete="off">
          <div class="form__field">
            <label class="form__label" for="title">Tiêu đề</label>
            <input class="form__input" type="text" id="title" name="title" required maxlength="255">
          </div>
          <div class="form__field">
            <label class="form__label" for="body">Nội dung</label>
            <textarea class="form__textarea" id="body" name="body" rows="5" required maxlength="2000"></textarea>
          </div>
          <button class="btn btn--primary" type="submit">Gửi yêu cầu</button>
        </form>
      </section>

      <section class="account-section">
        <h2 class="account-section__title">Yêu cầu của tôi</h2>
        {% if contacts %}
          <ul class="contact-list">
            {% for c in contacts %}
              <li class="contact-list__item">
                <a href="/tai-khoan/lien-he/{{ c.id }}" class="contact-list__link">
                  <span class="contact-list__subject">{{ c.title | escape }}</span>
                  <span class="contact-list__meta">
                    <span class="badge badge--{{ c.status }}">{% if c.status == 'handled' %}Đã xử lý{% elsif c.status == 'new' %}Mới{% else %}{{ c.status | escape }}{% endif %}</span>
                    <span>{{ c.created_at | date: '%d/%m/%Y' }}</span>
                  </span>
                </a>
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <p class="empty-state">Bạn chưa có yêu cầu nào.</p>
        {% endif %}
      </section>
    </div>
  </div>
</div>