客户对象详解

<!-- 客户基本信息 -->
{% if customer %}
  <div class="customer-info" itemscope itemtype="http://schema.org/Person">
    <h2>欢迎回来，<span itemprop="name">{{ customer.first_name }} {{ customer.last_name }}</span>！</h2>
    
    <div class="customer-details">
      <p><strong>邮箱:</strong> <span itemprop="email">{{ customer.email }}</span></p>
      
      {% if customer.phone %}
        <p><strong>电话:</strong> <span itemprop="telephone">{{ customer.phone }}</span></p>
      {% endif %}
      
      <p><strong>账户创建:</strong> {{ customer.created_at | date: '%Y年%m月%d日' }}</p>
      <p><strong>上次登录:</strong> {{ customer.last_login | date: '%Y年%m月%d日' }}</p>
      
      <div class="customer-status">
        {% if customer.email_marketing_consent.state == 'subscribed' %}
          <span class="badge">已订阅邮件营销</span>
        {% endif %}
        
        {% if customer.sms_marketing_consent.state == 'subscribed' %}
          <span class="badge">已订阅短信营销</span>
        {% endif %}
        
        {% if customer.tax_exempt %}
          <span class="badge">免税用户</span>
        {% endif %}
      </div>
    </div>
  </div>
{% else %}
  <div class="guest-notice">
    <p>您当前未登录。<a href="{{ routes.account_login_url }}">登录</a> 或 <a href="{{ routes.account_register_url }}">注册</a> 以获得更好的购物体验。</p>
  </div>
{% endif %}

<!-- 用户认证检查 -->
<div class="auth-status">
  {% if customer %}
    <!-- 已登录用户 -->
    <div class="logged-in-user">
      <span class="user-greeting">您好，{{ customer.first_name }}！</span>
      <nav class="user-menu">
        <a href="{{ routes.account_url }}">我的账户</a>
        <a href="{{ routes.account_orders_url }}">订单历史</a>
        <a href="{{ routes.account_addresses_url }}">地址管理</a>
        <a href="{{ routes.account_logout_url }}">退出登录</a>
      </nav>
    </div>
  {% else %}
    <!-- 未登录用户 -->
    <div class="guest-user">
      <nav class="auth-links">
        <a href="{{ routes.account_login_url }}" class="login-link">登录</a>
        <a href="{{ routes.account_register_url }}" class="register-link">注册</a>
      </nav>
    </div>
  {% endif %}
</div>

<!-- 客户默认地址 -->
{% if customer.default_address %}
  <div class="default-address" itemscope itemtype="http://schema.org/PostalAddress">
    <h3>默认地址</h3>
    <address>
      {% if customer.default_address.company != blank %}
        <div class="company" itemprop="name">{{ customer.default_address.company }}</div>
      {% endif %}
      
      <div class="name">{{ customer.default_address.first_name }} {{ customer.default_address.last_name }}</div>
      
      <div class="street">
        <span itemprop="streetAddress">{{ customer.default_address.address1 }}</span>
        {% if customer.default_address.address2 != blank %}
          <br><span>{{ customer.default_address.address2 }}</span>
        {% endif %}
      </div>
      
      <div class="location">
        <span itemprop="addressLocality">{{ customer.default_address.city }}</span>
        {% if customer.default_address.province != blank %}
          , <span itemprop="addressRegion">{{ customer.default_address.province }}</span>
        {% endif %}
        <span itemprop="postalCode">{{ customer.default_address.zip }}</span>
      </div>
      
      <div class="country" itemprop="addressCountry">{{ customer.default_address.country }}</div>
      
      {% if customer.default_address.phone != blank %}
        <div class="phone">电话: {{ customer.default_address.phone }}</div>
      {% endif %}
    </address>
    
    <div class="address-actions">
      <a href="{{ routes.account_addresses_url }}/{{ customer.default_address.id }}" class="edit-address">编辑</a>
    </div>
  </div>
{% endif %}

<!-- 客户所有地址 -->
{% if customer.addresses.size > 0 %}
  <div class="customer-addresses">
    <h3>地址簿 ({{ customer.addresses.size }})</h3>
    
    <div class="address-grid">
      {% for address in customer.addresses %}
        <div class="address-card {% if address.id == customer.default_address.id %}default{% endif %}">
          {% if address.id == customer.default_address.id %}
            <div class="address-badge">默认地址</div>
          {% endif %}
          
          <address>
            {% if address.company != blank %}
              <div class="company">{{ address.company }}</div>
            {% endif %}
            
            <div class="name">{{ address.first_name }} {{ address.last_name }}</div>
            
            <div class="street">
              {{ address.address1 }}
              {% if address.address2 != blank %}
                <br>{{ address.address2 }}
              {% endif %}
            </div>
            
            <div class="location">
              {{ address.city }}
              {% if address.province != blank %}, {{ address.province }}{% endif %}
              {{ address.zip }}
            </div>
            
            <div class="country">{{ address.country }}</div>
            
            {% if address.phone != blank %}
              <div class="phone">{{ address.phone }}</div>
            {% endif %}
          </address>
          
          <div class="address-actions">
            <a href="{{ routes.account_addresses_url }}/{{ address.id }}" class="btn btn-sm">编辑</a>
            
            {% unless address.id == customer.default_address.id %}
              <form action="{{ routes.account_addresses_url }}/{{ address.id }}" method="post">
                <input type="hidden" name="_method" value="put">
                <button type="submit" name="address[default]" value="1" class="btn btn-sm btn-outline">
                  设为默认
                </button>
              </form>
              
              <form action="{{ routes.account_addresses_url }}/{{ address.id }}" method="post" onsubmit="return confirm('确定要删除这个地址吗？')">
                <input type="hidden" name="_method" value="delete">
                <button type="submit" class="btn btn-sm btn-danger">删除</button>
              </form>
            {% endunless %}
          </div>
        </div>
      {% endfor %}
    </div>
    
    <div class="add-address">
      <a href="{{ routes.account_addresses_url }}/new" class="btn btn-primary">添加新地址</a>
    </div>
  </div>
{% else %}
  <div class="no-addresses">
    <p>您还没有保存任何地址。</p>
    <a href="{{ routes.account_addresses_url }}/new" class="btn btn-primary">添加地址</a>
  </div>
{% endif %}

<!-- 客户订单历史 -->
{% if customer.orders.size > 0 %}
  <div class="order-history">
    <h3>订单历史 ({{ customer.orders.size }})</h3>
    
    <div class="orders-list">
      {% for order in customer.orders %}
        <div class="order-card" data-order-id="{{ order.id }}">
          <div class="order-header">
            <div class="order-number">
              <strong>订单 #{{ order.name }}</strong>
            </div>
            <div class="order-date">
              {{ order.created_at | date: '%Y年%m月%d日' }}
            </div>
            <div class="order-status status-{{ order.financial_status }}">
              {% case order.financial_status %}
                {% when 'paid' %}已付款
                {% when 'pending' %}待付款
                {% when 'refunded' %}已退款
                {% when 'partially_refunded' %}部分退款
                {% else %}{{ order.financial_status }}
              {% endcase %}
            </div>
          </div>
          
          <div class="order-details">
            <div class="order-items">
              {% for line_item in order.line_items limit: 3 %}
                <div class="order-item">
                  <img src="{{ line_item.product.featured_image | img_url: '60x60' }}" 
                       alt="{{ line_item.product.title }}"
                       loading="lazy" />
                  <div class="item-info">
                    <div class="item-title">{{ line_item.title }}</div>
                    <div class="item-quantity">数量: {{ line_item.quantity }}</div>
                    <div class="item-price">{{ line_item.final_price | money }}</div>
                  </div>
                </div>
              {% endfor %}
              
              {% if order.line_items.size > 3 %}
                <div class="more-items">
                  还有 {{ order.line_items.size | minus: 3 }} 件商品...
                </div>
              {% endif %}
            </div>
            
            <div class="order-summary">
              <div class="order-total">
                <strong>总计: {{ order.total_price | money }}</strong>
              </div>
              
              {% if order.shipping_address %}
                <div class="shipping-info">
                  <small>配送至: {{ order.shipping_address.city }}, {{ order.shipping_address.province }}</small>
                </div>
              {% endif %}
            </div>
          </div>
          
          <div class="order-actions">
            <a href="{{ order.customer_url }}" class="btn btn-outline">查看详情</a>
            
            {% if order.financial_status == 'paid' and order.fulfillment_status != 'fulfilled' %}
              <span class="order-status-text">处理中</span>
            {% endif %}
            
            {% comment %} 重新购买按钮 {% endcomment %}
            <form action="/cart/add" method="post" class="reorder-form">
              {% for line_item in order.line_items %}
                <input type="hidden" name="items[{{ forloop.index0 }}][id]" value="{{ line_item.variant_id }}">
                <input type="hidden" name="items[{{ forloop.index0 }}][quantity]" value="{{ line_item.quantity }}">
              {% endfor %}
              <button type="submit" class="btn btn-secondary">重新购买</button>
            </form>
          </div>
        </div>
      {% endfor %}
    </div>
    
    {% comment %} 分页 {% endcomment %}
    {% if customer.orders.size >= 20 %}
      <div class="pagination">
        <p>显示前20个订单。如需查看更多订单，请联系客服。</p>
      </div>
    {% endif %}
  </div>
{% else %}
  <div class="no-orders">
    <p>您还没有任何订单。</p>
    <a href="{{ routes.all_products_collection_url }}" class="btn btn-primary">开始购物</a>
  </div>
{% endif %}

<!-- 单个订单详情 -->
{% if order %}
  <div class="order-detail" itemscope itemtype="http://schema.org/Order">
    <header class="order-header">
      <h1>订单 #{{ order.name }}</h1>
      <meta itemprop="orderNumber" content="{{ order.name }}">
      <meta itemprop="orderDate" content="{{ order.created_at | date: '%Y-%m-%d' }}">
      
      <div class="order-meta">
        <div class="order-date">
          <strong>下单时间:</strong> {{ order.created_at | date: '%Y年%m月%d日 %H:%M' }}
        </div>
        
        <div class="order-status">
          <strong>支付状态:</strong> 
          <span class="status-badge status-{{ order.financial_status }}">
            {% case order.financial_status %}
              {% when 'paid' %}已付款
              {% when 'pending' %}待付款
              {% when 'refunded' %}已退款
              {% when 'partially_refunded' %}部分退款
              {% else %}{{ order.financial_status }}
            {% endcase %}
          </span>
        </div>
        
        <div class="fulfillment-status">
          <strong>配送状态:</strong>
          <span class="status-badge status-{{ order.fulfillment_status }}">
            {% case order.fulfillment_status %}
              {% when 'fulfilled' %}已发货
              {% when 'partial' %}部分发货
              {% when 'unfulfilled' %}未发货
              {% else %}{{ order.fulfillment_status }}
            {% endcase %}
          </span>
        </div>
      </div>
    </header>
    
    <!-- 订单商品 -->
    <div class="order-items">
      <h3>订单商品</h3>
      <table class="items-table">
        <thead>
          <tr>
            <th>商品</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
          </tr>
        </thead>
        <tbody>
          {% for line_item in order.line_items %}
            <tr class="order-item" itemprop="orderedItem" itemscope itemtype="http://schema.org/OrderItem">
              <td class="item-product">
                <div class="product-info">
                  {% if line_item.product.featured_image %}
                    <img src="{{ line_item.product.featured_image | img_url: '80x80' }}" 
                         alt="{{ line_item.product.title }}"
                         loading="lazy" />
                  {% endif %}
                  
                  <div class="product-details">
                    <div class="product-title" itemprop="name">{{ line_item.title }}</div>
                    
                    {% if line_item.variant.title != 'Default Title' %}
                      <div class="variant-title">{{ line_item.variant.title }}</div>
                    {% endif %}
                    
                    {% if line_item.sku != blank %}
                      <div class="sku">SKU: {{ line_item.sku }}</div>
                    {% endif %}
                    
                    {% if line_item.vendor != blank %}
                      <div class="vendor">品牌: {{ line_item.vendor }}</div>
                    {% endif %}
                  </div>
                </div>
              </td>
              
              <td class="item-price">
                <meta itemprop="price" content="{{ line_item.final_price | money_without_currency }}">
                {{ line_item.final_price | money }}
                
                {% if line_item.original_price > line_item.final_price %}
                  <div class="original-price">
                    <s>{{ line_item.original_price | money }}</s>
                  </div>
                {% endif %}
              </td>
              
              <td class="item-quantity">
                <span itemprop="orderQuantity">{{ line_item.quantity }}</span>
              </td>
              
              <td class="item-total">
                {{ line_item.final_line_price | money }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    <!-- 订单摘要 -->
    <div class="order-summary">
      <h3>订单摘要</h3>
      <table class="summary-table">
        <tr>
          <td>商品小计:</td>
          <td>{{ order.line_items_subtotal_price | money }}</td>
        </tr>
        
        {% for discount in order.discounts %}
          <tr class="discount">
            <td>优惠 ({{ discount.code }}):</td>
            <td>-{{ discount.amount | money }}</td>
          </tr>
        {% endfor %}
        
        {% for tax_line in order.tax_lines %}
          <tr>
            <td>{{ tax_line.title }}:</td>
            <td>{{ tax_line.price | money }}</td>
          </tr>
        {% endfor %}
        
        {% for shipping_method in order.shipping_methods %}
          <tr>
            <td>配送费 ({{ shipping_method.title }}):</td>
            <td>{{ shipping_method.price | money }}</td>
          </tr>
        {% endfor %}
        
        <tr class="total">
          <td><strong>订单总计:</strong></td>
          <td><strong itemprop="totalPrice" content="{{ order.total_price | money_without_currency }}">{{ order.total_price | money }}</strong></td>
        </tr>
      </table>
    </div>
    
    <!-- 配送信息 -->
    {% if order.shipping_address %}
      <div class="shipping-info">
        <h3>配送地址</h3>
        <address itemprop="orderDelivery" itemscope itemtype="http://schema.org/ParcelDelivery">
          <div itemprop="deliveryAddress" itemscope itemtype="http://schema.org/PostalAddress">
            {% if order.shipping_address.company != blank %}
              <div class="company">{{ order.shipping_address.company }}</div>
            {% endif %}
            
            <div class="name">{{ order.shipping_address.first_name }} {{ order.shipping_address.last_name }}</div>
            
            <div class="street">
              <span itemprop="streetAddress">{{ order.shipping_address.address1 }}</span>
              {% if order.shipping_address.address2 != blank %}
                <br>{{ order.shipping_address.address2 }}
              {% endif %}
            </div>
            
            <div class="location">
              <span itemprop="addressLocality">{{ order.shipping_address.city }}</span>
              {% if order.shipping_address.province != blank %}
                , <span itemprop="addressRegion">{{ order.shipping_address.province }}</span>
              {% endif %}
              <span itemprop="postalCode">{{ order.shipping_address.zip }}</span>
            </div>
            
            <div class="country" itemprop="addressCountry">{{ order.shipping_address.country }}</div>
            
            {% if order.shipping_address.phone != blank %}
              <div class="phone">电话: {{ order.shipping_address.phone }}</div>
            {% endif %}
          </div>
        </address>
      </div>
    {% endif %}
    
    <!-- 账单地址 -->
    {% if order.billing_address %}
      <div class="billing-info">
        <h3>账单地址</h3>
        <address>
          {% if order.billing_address.company != blank %}
            <div class="company">{{ order.billing_address.company }}</div>
          {% endif %}
          
          <div class="name">{{ order.billing_address.first_name }} {{ order.billing_address.last_name }}</div>
          
          <div class="street">
            {{ order.billing_address.address1 }}
            {% if order.billing_address.address2 != blank %}
              <br>{{ order.billing_address.address2 }}
            {% endif %}
          </div>
          
          <div class="location">
            {{ order.billing_address.city }}
            {% if order.billing_address.province != blank %}, {{ order.billing_address.province }}{% endif %}
            {{ order.billing_address.zip }}
          </div>
          
          <div class="country">{{ order.billing_address.country }}</div>
        </address>
      </div>
    {% endif %}
  </div>
{% endif %}

<!-- 营销偏好设置 -->
<div class="marketing-preferences">
  <h3>营销偏好</h3>
  
  <form action="{{ routes.account_url }}" method="post" class="preferences-form">
    <input type="hidden" name="form_type" value="customer">
    <input type="hidden" name="utf8" value="✓">
    
    <!-- 邮件营销 -->
    <div class="preference-item">
      <label class="checkbox-label">
        <input type="checkbox" 
               name="customer[accepts_marketing]" 
               value="1" 
               {% if customer.accepts_marketing %}checked{% endif %}>
        <span class="checkmark"></span>
        <span class="label-text">
          <strong>邮件营销</strong>
          <small>接收关于新产品、优惠和活动的邮件通知</small>
        </span>
      </label>
      
      {% if customer.email_marketing_consent %}
        <div class="consent-info">
          <small>
            邮件营销状态: {{ customer.email_marketing_consent.state }}
            {% if customer.email_marketing_consent.consent_updated_at %}
              (更新于 {{ customer.email_marketing_consent.consent_updated_at | date: '%Y年%m月%d日' }})
            {% endif %}
          </small>
        </div>
      {% endif %}
    </div>
    
    <!-- 短信营销 -->
    {% if shop.sms_marketing_enabled %}
      <div class="preference-item">
        <label class="checkbox-label">
          <input type="checkbox" 
                 name="customer[sms_marketing_consent]" 
                 value="1" 
                 {% if customer.sms_marketing_consent.state == 'subscribed' %}checked{% endif %}>
          <span class="checkmark"></span>
          <span class="label-text">
            <strong>短信营销</strong>
            <small>接收关于订单状态和特别优惠的短信通知</small>
          </span>
        </label>
        
        {% if customer.sms_marketing_consent %}
          <div class="consent-info">
            <small>
              短信营销状态: {{ customer.sms_marketing_consent.state }}
              {% if customer.sms_marketing_consent.consent_updated_at %}
                (更新于 {{ customer.sms_marketing_consent.consent_updated_at | date: '%Y年%m月%d日' }})
              {% endif %}
            </small>
          </div>
        {% endif %}
      </div>
    {% endif %}
    
    <button type="submit" class="btn btn-primary">保存偏好</button>
  </form>
</div>

<!-- 客户标签展示 -->
{% if customer.tags.size > 0 %}
  <div class="customer-tags">
    <h4>客户标签</h4>
    <div class="tag-list">
      {% for tag in customer.tags %}
        <span class="customer-tag tag-{{ tag | handle }}">{{ tag }}</span>
      {% endfor %}
    </div>
  </div>
{% endif %}
 
<!-- 基于标签的功能 -->
<div class="customer-features">
  {% if customer.tags contains 'VIP' %}
    <div class="vip-benefits">
      <h4>🌟 VIP 专享特权</h4>
      <ul>
        <li>免费配送</li>
        <li>优先客服</li>
        <li>专属优惠</li>
      </ul>
    </div>
  {% endif %}
  
  {% if customer.tags contains 'wholesale' %}
    <div class="wholesale-notice">
      <p>您是批发客户，享受批发价格。</p>
      <a href="/pages/wholesale" class="btn btn-outline">查看批发目录</a>
    </div>
  {% endif %}
  
  {% if customer.tags contains 'loyalty-member' %}
    <div class="loyalty-status">
      <p>💎 您是忠诚会员！继续购物获得更多积分。</p>
    </div>
  {% endif %}
</div>

<!-- 个性化产品推荐 -->
{% if customer and customer.orders.size > 0 %}
  <div class="personalized-recommendations">
    <h3>为您推荐</h3>
    
    {% comment %} 获取客户购买过的产品类型 {% endcomment %}
    {% assign purchased_types = '' %}
    {% assign purchased_vendors = '' %}
    
    {% for order in customer.orders limit: 5 %}
      {% for line_item in order.line_items %}
        {% unless purchased_types contains line_item.product.type %}
          {% assign purchased_types = purchased_types | append: line_item.product.type | append: ',' %}
        {% endunless %}
        
        {% unless purchased_vendors contains line_item.product.vendor %}
          {% assign purchased_vendors = purchased_vendors | append: line_item.product.vendor | append: ',' %}
        {% endunless %}
      {% endfor %}
    {% endfor %}
    
    {% assign type_array = purchased_types | split: ',' %}
    {% assign vendor_array = purchased_vendors | split: ',' %}
    
    {% comment %} 基于购买历史推荐产品 {% endcomment %}
    {% assign recommended_products = collections.all.products | where: 'available' %}
    
    {% if type_array.size > 0 %}
      {% assign recommended_products = recommended_products | where: 'type', type_array[0] %}
    {% endif %}
    
    {% if recommended_products.size > 0 %}
      <div class="recommendation-grid">
        {% for product in recommended_products limit: 4 %}
          <div class="recommendation-card">
            <a href="{{ product.url }}">
              <img src="{{ product.featured_image | img_url: '250x250' }}" 
                   alt="{{ product.title }}"
                   loading="lazy" />
              <h4>{{ product.title }}</h4>
              <p class="price">{{ product.price | money }}</p>
              
              {% if product.compare_at_price > product.price %}
                <span class="sale-badge">特价</span>
              {% endif %}
            </a>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
{% endif %}

<!-- 客户评论历史 -->
{% if customer %}
  <div class="customer-reviews">
    <h3>我的评论</h3>
    
    {% comment %} 这里需要使用第三方评论应用的数据 {% endcomment %}
    {% assign customer_reviews = customer.metafields.reviews.submitted %}
    
    {% if customer_reviews %}
      <div class="reviews-list">
        {% for review in customer_reviews %}
          <div class="review-item">
            <div class="review-product">
              <h4>{{ review.product_title }}</h4>
              <div class="review-rating">
                {% for i in (1..5) %}
                  <span class="star {% if i <= review.rating %}filled{% endif %}">★</span>
                {% endfor %}
                <span class="rating-text">({{ review.rating }}/5)</span>
              </div>
            </div>
            
            <div class="review-content">
              <p>{{ review.body }}</p>
            </div>
            
            <div class="review-meta">
              <time>{{ review.created_at | date: '%Y年%m月%d日' }}</time>
              {% if review.verified_buyer %}
                <span class="verified-badge">已验证购买</span>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="no-reviews">
        <p>您还没有发表任何评论。</p>
        <a href="{{ routes.account_orders_url }}" class="btn btn-outline">查看您的订单并发表评论</a>
      </div>
    {% endif %}
  </div>
{% endif %}

<!-- 客户支持区域 -->
<div class="customer-support">
  <h3>客户支持</h3>
  
  <div class="support-options">
    <div class="support-card">
      <h4>常见问题</h4>
      <p>查找常见问题的答案</p>
      <a href="/pages/faq" class="btn btn-outline">查看FAQ</a>
    </div>
    
    <div class="support-card">
      <h4>联系客服</h4>
      <p>我们的客服团队随时为您服务</p>
      <div class="contact-methods">
        {% if shop.email %}
          <a href="mailto:{{ shop.email }}" class="contact-method">
            <span class="icon">📧</span>
            <span>发送邮件</span>
          </a>
        {% endif %}
        
        {% if shop.phone %}
          <a href="tel:{{ shop.phone }}" class="contact-method">
            <span class="icon">📞</span>
            <span>电话咨询</span>
          </a>
        {% endif %}
        
        <a href="/pages/contact" class="contact-method">
          <span class="icon">💬</span>
          <span>在线留言</span>
        </a>
      </div>
    </div>
    
    <div class="support-card">
      <h4>退换货</h4>
      <p>了解我们的退换货政策</p>
      {% if shop.refund_policy %}
        <a href="{{ shop.refund_policy.url }}" class="btn btn-outline">查看政策</a>
      {% endif %}
    </div>
  </div>
</div>

<!-- 账户安全 -->
<div class="account-security">
  <h3>账户安全</h3>
  
  <div class="security-section">
    <h4>密码设置</h4>
    <p>上次密码更新: {{ customer.updated_at | date: '%Y年%m月%d日' }}</p>
    <a href="{{ routes.account_url }}#change-password" class="btn btn-outline">修改密码</a>
  </div>
  
  <div class="security-section">
    <h4>登录活动</h4>
    <p>上次登录: {{ customer.last_login | date: '%Y年%m月%d日 %H:%M' }}</p>
    <p>注册IP: <code>{{ customer.created_at | date: '%Y年%m月%d日' }}</code></p>
  </div>
  
  <div class="security-section">
    <h4>隐私设置</h4>
    <div class="privacy-options">
      <label class="checkbox-label">
        <input type="checkbox" checked disabled>
        <span class="checkmark"></span>
        <span class="label-text">保护个人信息</span>
      </label>
      
      <label class="checkbox-label">
        <input type="checkbox" 
               {% if customer.email_marketing_consent.state == 'subscribed' %}checked{% endif %}>
        <span class="checkmark"></span>
        <span class="label-text">允许个性化推荐</span>
      </label>
    </div>
  </div>
  
  <div class="security-section danger-zone">
    <h4>危险操作</h4>
    <p>删除账户将无法恢复，请谨慎操作。</p>
    <button type="button" class="btn btn-danger" onclick="showDeleteModal()">删除账户</button>
  </div>
</div>
 
<!-- 删除账户确认模态框 -->
<div id="deleteAccountModal" class="modal" style="display: none;">
  <div class="modal-content">
    <h4>确认删除账户</h4>
    <p>此操作将永久删除您的账户和所有相关数据，包括：</p>
    <ul>
      <li>个人信息和地址</li>
      <li>订单历史</li>
      <li>偏好设置</li>
      <li>评论和评级</li>
    </ul>
    <p><strong>此操作无法撤销！</strong></p>
    
    <div class="modal-actions">
      <button type="button" class="btn btn-outline" onclick="hideDeleteModal()">取消</button>
      <button type="button" class="btn btn-danger" onclick="confirmDeleteAccount()">确认删除</button>
    </div>
  </div>
</div>
 
<script>
function showDeleteModal() {
  document.getElementById('deleteAccountModal').style.display = 'block'
}
 
function hideDeleteModal() {
  document.getElementById('deleteAccountModal').style.display = 'none'
}
 
function confirmDeleteAccount() {
  // 这里需要实现实际的删除逻辑
  alert('请联系客服处理账户删除请求')
  hideDeleteModal()
}
</script>

<!-- 客户数据预加载 -->
{% if customer %}
  <script>
    window.customerData = {
      id: {{ customer.id }},
      email: '{{ customer.email | escape }}',
      firstName: '{{ customer.first_name | escape }}',
      lastName: '{{ customer.last_name | escape }}',
      phone: '{{ customer.phone | escape }}',
      acceptsMarketing: {{ customer.accepts_marketing | json }},
      tags: {{ customer.tags | json }},
      ordersCount: {{ customer.orders_count }},
      totalSpent: {{ customer.total_spent | money_without_currency }},
      defaultAddress: {% if customer.default_address %}{{ customer.default_address | json }}{% else %}null{% endif %},
      hasAccount: true
    }
  </script>
{% else %}
  <script>
    window.customerData = {
      hasAccount: false
    }
  </script>
{% endif %}

<!-- 客户调试信息 -->
{% if request.design_mode and customer %}
  <div class="customer-debug" style="margin-top: 2rem; padding: 1rem; background: #f0f8ff; font-family: monospace; font-size: 12px; border: 1px solid #ccc;">
    <h4>客户调试信息</h4>
    
    <div><strong>基本信息:</strong></div>
    <ul>
      <li>ID: {{ customer.id }}</li>
      <li>Email: {{ customer.email }}</li>
      <li>Name: {{ customer.first_name }} {{ customer.last_name }}</li>
      <li>Phone: {{ customer.phone }}</li>
      <li>Created: {{ customer.created_at | date: '%Y-%m-%d %H:%M' }}</li>
      <li>Updated: {{ customer.updated_at | date: '%Y-%m-%d %H:%M' }}</li>
      <li>Last Login: {{ customer.last_login | date: '%Y-%m-%d %H:%M' }}</li>
    </ul>
    
    <div><strong>状态信息:</strong></div>
    <ul>
      <li>Accepts Marketing: {{ customer.accepts_marketing }}</li>
      <li>Email Marketing Consent: {{ customer.email_marketing_consent.state }}</li>
      <li>SMS Marketing Consent: {{ customer.sms_marketing_consent.state }}</li>
      <li>Tax Exempt: {{ customer.tax_exempt }}</li>
      <li>Verified Email: {{ customer.verified_email }}</li>
    </ul>
    
    <div><strong>统计信息:</strong></div>
    <ul>
      <li>Orders Count: {{ customer.orders_count }}</li>
      <li>Total Spent: {{ customer.total_spent | money }}</li>
      <li>Addresses Count: {{ customer.addresses.size }}</li>
      <li>Tags: {{ customer.tags | join: ', ' }}</li>
    </ul>
    
    <div><strong>默认地址:</strong></div>
    {% if customer.default_address %}
      <ul>
        <li>Company: {{ customer.default_address.company }}</li>
        <li>Name: {{ customer.default_address.first_name }} {{ customer.default_address.last_name }}</li>
        <li>Address: {{ customer.default_address.address1 }} {{ customer.default_address.address2 }}</li>
        <li>City: {{ customer.default_address.city }}</li>
        <li>Province: {{ customer.default_address.province }}</li>
        <li>Country: {{ customer.default_address.country }}</li>
        <li>Zip: {{ customer.default_address.zip }}</li>
        <li>Phone: {{ customer.default_address.phone }}</li>
      </ul>
    {% else %}
      <p>无默认地址</p>
    {% endif %}
  </div>
{% endif %}