kym
/
haha


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI智能零售柜 - 微信支付分场景交互流程</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}
.flow-container {
  max-width: 1200px;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.flow-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.flow-subtitle {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-bottom: 40px;
}

/* 流程图 */
.pipeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.step-group {
  display: flex;
  align-items: flex-start;
}
.step-card {
  width: 185px;
  background: #fafafa;
  border-radius: 12px;
  border: 2px solid #e8e8e8;
  padding: 16px 12px;
  text-align: center;
  position: relative;
  transition: all 0.2s;
}
.step-card.current {
  border-color: #07C160;
  background: #f0fdf4;
  box-shadow: 0 0 0 4px rgba(7,193,96,0.08);
}
.step-num {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background: #07C160;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.step-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.step-desc {
  font-size: 11px;
  color: #999;
  line-height: 1.5;
}
.step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  color: #ccc;
  font-size: 20px;
  padding-top: 30px;
}

/* 手机预览区 */
.phones-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.phone-frame {
  width: 280px;
  background: #fff;
  border-radius: 28px;
  border: 3px solid #e0e0e0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.phone-statusbar {
  height: 32px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 11px;
  color: #333;
  font-weight: 600;
}
.phone-nav {
  height: 40px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}
.phone-nav .back {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: #333;
}
.phone-body {
  height: 460px;
  overflow-y: auto;
  background: #f7f7f7;
  padding: 16px;
}
.phone-label {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 14px;
  margin-bottom: 4px;
  font-weight: 500;
}

/* 各页面内部样式 */
.scan-btn {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD54F, #FFC107);
  margin: 40px auto 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255,193,7,0.4);
}
.scan-btn .icon { font-size: 40px; margin-bottom: 4px; }
.scan-btn .text { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.brand { text-align: center; padding: 20px 0 10px; }
.brand .name { font-size: 22px; font-weight: 300; color: #333; letter-spacing: 4px; }
.brand .slogan { font-size: 11px; color: #aaa; margin-top: 4px; }
.quick-actions { display: flex; justify-content: center; gap: 24px; margin: 20px 0; }
.qa-item { text-align: center; }
.qa-item .icon-box { width: 48px; height: 48px; background: #fff; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 4px; }
.qa-item .label { font-size: 11px; color: #666; }
.info-tip { background: #fff; border-radius: 10px; padding: 12px; margin-top: 20px;
  text-align: center; font-size: 11px; color: #999; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.info-tip .ps-icon { color: #07C160; font-weight: 600; }

/* 商品陈列页 */
.product-header { background: #fff; border-radius: 10px; padding: 12px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px; font-size: 12px; }
.floor-card { background: #fff; border-radius: 10px; margin-bottom: 10px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05); }
.floor-header { display: flex; align-items: center; padding: 10px 12px;
  border-bottom: 1px solid #f5f5f5; font-size: 12px; }
.floor-badge { width: 22px; height: 22px; line-height: 22px; text-align: center;
  background: #FFD700; border-radius: 6px; font-size: 12px; font-weight: 700; margin-right: 8px; }
.goods-item { display: flex; padding: 10px 12px; align-items: center; }
.goods-img { width: 52px; height: 52px; background: #f5f5f5; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 26px; margin-right: 10px; }
.goods-info { flex: 1; }
.goods-name { font-size: 13px; color: #333; font-weight: 500; }
.goods-price { font-size: 16px; color: #ff4d4f; font-weight: 700; }
.bottom-bar { display: flex; gap: 8px; padding: 10px 12px; background: #fff;
  border-top: 1px solid #f0f0f0; margin: -16px; margin-top: 8px; }
.btn-back { flex:1; text-align:center; padding:10px; background:#f0f0f0; border-radius:22px;
  font-size:13px; color:#666; font-weight:600; }
.btn-open { flex:2; text-align:center; padding:10px; background:linear-gradient(135deg,#FFD700,#FFC107);
  border-radius:22px; font-size:13px; color:#333; font-weight:700;
  box-shadow:0 4px 12px rgba(255,215,0,0.4); }

/* 开门购物页 */
.countdown-big { font-size: 62px; font-weight: 700; text-align: center; margin: 16px 0; }
.status-msg { text-align: center; font-size: 14px; color: #333; font-weight: 600; }
.status-sub { text-align: center; font-size: 12px; color: #999; margin-top: 4px; }
.order-items { background: #fff; border-radius: 10px; padding: 14px; margin-top: 12px; }
.order-item { display: flex; justify-content: space-between; padding: 8px 0; font-size: 12px; }
.order-total { display: flex; justify-content: space-between; padding: 10px 0;
  border-top: 2px solid #f0f0f0; margin-top: 6px; font-weight: 700; font-size: 14px; }
.pay-badge { display: inline-block; background: #07C160; color: #fff; padding: 3px 10px;
  border-radius: 10px; font-size: 10px; margin-left: 4px; }

/* 支付分开通页 */
.ps-score { text-align: center; padding: 16px 0; }
.ps-score .num { font-size: 64px; font-weight: 700; color: #07C160; }
.ps-score .unit { font-size: 16px; color: #999; }
.ps-badge { display: inline-block; background: #fa5555; color: #fff; padding: 4px 12px;
  border-radius: 12px; font-size: 11px; }
.benefits { display: flex; gap: 8px; margin: 14px 0; }
.benefit { flex:1; background:#fff; border-radius:10px; padding:12px 8px; text-align:center;
  box-shadow:0 1px 6px rgba(0,0,0,0.05); }
.benefit .icon { font-size: 28px; margin-bottom: 4px; }
.benefit .title { font-size: 11px; font-weight: 600; color: #333; }
.ps-enable-btn { width: 100%; padding: 12px; background: #07C160; border-radius: 22px;
  text-align: center; color: #fff; font-size: 14px; font-weight: 600; margin-top: 8px; }

/* 订单完成页 */
.success-icon { text-align: center; padding: 16px 0; font-size: 48px; }

.footer-note {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  margin-top: 40px;
}
</style>
</head>
<body>

<div class="flow-container">
  <div class="flow-title">AI智能零售柜 · 微信支付分场景交互流程</div>
  <div class="flow-subtitle">完整用户购物路径 — 从扫码开门到自动扣款完成</div>

  <!-- 流程步骤条 -->
  <div class="pipeline">
    <div class="step-group">
      <div class="step-card">
        <div class="step-num">1</div>
        <div class="step-title">扫码进入小程序</div>
        <div class="step-desc">用户扫描柜体二维码<br>进入AI零售柜小程序</div>
      </div>
      <div class="step-arrow">→</div>
    </div>
    <div class="step-group">
      <div class="step-card">
        <div class="step-num">2</div>
        <div class="step-title">商品展示页</div>
        <div class="step-desc">查看柜内商品陈列<br>含价格、库存信息</div>
      </div>
      <div class="step-arrow">→</div>
    </div>
    <div class="step-group">
      <div class="step-card">
        <div class="step-num">3</div>
        <div class="step-title">支付分开通</div>
        <div class="step-desc">检查微信支付分<br>未开通引导授权</div>
      </div>
      <div class="step-arrow">→</div>
    </div>
    <div class="step-group">
      <div class="step-card">
        <div class="step-num">4</div>
        <div class="step-title">开门选购</div>
        <div class="step-desc">远程开柜门<br>自由选购商品</div>
      </div>
      <div class="step-arrow">→</div>
    </div>
    <div class="step-group">
      <div class="step-card current">
        <div class="step-num">5</div>
        <div class="step-title">AI识别扣款</div>
        <div class="step-desc">关门自动识别商品<br>支付分自动扣款</div>
      </div>
      <div class="step-arrow">→</div>
    </div>
    <div class="step-group">
      <div class="step-card">
        <div class="step-num">6</div>
        <div class="step-title">订单完成</div>
        <div class="step-desc">查看订单详情<br>支持7天无理由退款</div>
      </div>
    </div>
  </div>

  <!-- 手机页面展示 -->
  <div class="phones-row">

    <!-- 页面1: 首页 / 扫码入口 -->
    <div>
      <div class="phone-frame">
        <div class="phone-statusbar">9:41 &nbsp;&nbsp; 100%</div>
        <div class="phone-nav">AI零售柜</div>
        <div class="phone-body">
          <div class="brand">
            <div class="name">AI零售柜</div>
            <div class="slogan">智能视觉 · 即拿即走</div>
          </div>
          <div class="scan-btn">
            <div class="icon">📷</div>
            <div class="text">扫码开门</div>
          </div>
          <div class="quick-actions">
            <div class="qa-item">
              <div class="icon-box">👤</div>
              <div class="label">我的</div>
            </div>
            <div class="qa-item">
              <div class="icon-box">📋</div>
              <div class="label">订单</div>
            </div>
            <div class="qa-item">
              <div class="icon-box">🎫</div>
              <div class="label">优惠券</div>
            </div>
          </div>
          <div class="info-tip">
            <span class="ps-icon">◆ 微信支付分</span> 550分及以上优享
          </div>
          <div class="info-tip" style="margin-top:8px;">
            💬 在线客服 &nbsp; 400-0755-315
          </div>
        </div>
      </div>
      <div class="phone-label">① 首页 - 扫码入口</div>
    </div>

    <!-- 页面2: 商品陈列页 -->
    <div>
      <div class="phone-frame">
        <div class="phone-statusbar">9:42 &nbsp;&nbsp; 100%</div>
        <div class="phone-nav"><span class="back">←</span>柜内商品</div>
        <div class="phone-body">
          <div class="product-header">
            📱 单门柜 · 共3层商品
          </div>
          <div class="floor-card">
            <div class="floor-header">
              <div class="floor-badge">1</div>
              <span style="font-weight:600;">第1层</span>
              <span style="color:#999;margin-left:auto;">3件</span>
            </div>
            <div class="goods-item">
              <div class="goods-img">🥤</div>
              <div class="goods-info">
                <div class="goods-name">可口可乐 330ml</div>
                <div class="goods-price">¥3.50</div>
              </div>
            </div>
            <div class="goods-item">
              <div class="goods-img">🧃</div>
              <div class="goods-info">
                <div class="goods-name">农夫山泉 550ml</div>
                <div class="goods-price">¥2.00</div>
              </div>
            </div>
          </div>
          <div class="floor-card">
            <div class="floor-header">
              <div class="floor-badge">2</div>
              <span style="font-weight:600;">第2层</span>
              <span style="color:#999;margin-left:auto;">2件</span>
            </div>
            <div class="goods-item">
              <div class="goods-img">🍪</div>
              <div class="goods-info">
                <div class="goods-name">奥利奥饼干 97g</div>
                <div class="goods-price">¥8.90</div>
              </div>
            </div>
          </div>
          <div class="bottom-bar">
            <div class="btn-back">返回</div>
            <div class="btn-open">开门购物</div>
          </div>
        </div>
      </div>
      <div class="phone-label">② 商品展示页 - 含价格信息</div>
    </div>

    <!-- 页面3: 支付分开通页 -->
    <div>
      <div class="phone-frame">
        <div class="phone-statusbar">9:41 &nbsp;&nbsp; 100%</div>
        <div class="phone-nav" style="color:#07C160;">微信支付分</div>
        <div class="phone-body">
          <div class="ps-score">
            <div style="margin-bottom: 8px;"><span class="ps-badge">必需条件</span></div>
            <div class="num">550</div>
            <div class="unit">分及以上</div>
            <div style="font-size: 11px; color: #999; margin-top: 8px;">
              ℹ 分数越高，可享受的信用服务越多
            </div>
          </div>
          <div style="font-size: 13px; font-weight: 600; margin-bottom: 8px;">核心权益</div>
          <div class="benefits">
            <div class="benefit">
              <div class="icon">💳</div>
              <div class="title">先享后付</div>
              <div style="font-size:10px;color:#aaa;">开门后付款</div>
            </div>
            <div class="benefit">
              <div class="icon">🛡️</div>
              <div class="title">免密支付</div>
              <div style="font-size:10px;color:#aaa;">小额自动扣款</div>
            </div>
            <div class="benefit">
              <div class="icon">⚡</div>
              <div class="title">免押金</div>
              <div style="font-size:10px;color:#aaa;">无需预付押金</div>
            </div>
          </div>
          <div style="background:#fff;border-radius:10px;padding:12px;font-size:11px;color:#666;line-height:1.8;">
            <div style="font-weight:600;color:#333;margin-bottom:6px;">什么是微信支付分？</div>
            微信支付分是微信支付基于历史行为作出的综合评分。开通后可享受先享后付、免押金等便捷服务。
          </div>
          <div class="ps-enable-btn">立即开通</div>
          <div style="text-align:center;margin-top:8px;font-size:10px;color:#aaa;">
            如有疑问，请联系客服 400-0755-315
          </div>
        </div>
      </div>
      <div class="phone-label">③ 提交订单页 - 支付分开通</div>
    </div>

    <!-- 页面4: 购物中 / AI识别扣款 -->
    <div>
      <div class="phone-frame">
        <div class="phone-statusbar">9:43 &nbsp;&nbsp; 100%</div>
        <div class="phone-nav">购物进行中</div>
        <div class="phone-body">
          <div style="text-align:center;padding:20px 0 8px;">
            <div style="font-size:48px;">🚪</div>
          </div>
          <div class="status-msg">门已开，请选购商品</div>
          <div class="status-sub">请在60秒内完成选购并关门</div>
          <div class="countdown-big" style="color:#333;">45<span style="font-size:20px;color:#999;">秒</span></div>

          <div style="border-top:2px dashed #e0e0e0;margin:16px 0;position:relative;">
            <span style="position:absolute;top:-10px;left:50%;transform:translateX(-50%);
              background:#f7f7f7;padding:0 12px;font-size:10px;color:#aaa;">关门后</span>
          </div>

          <div style="background:#fff;border-radius:10px;padding:14px;text-align:center;">
            <div style="font-size:36px;margin-bottom:4px;">🤖</div>
            <div style="font-size:13px;font-weight:600;">AI智能识别中...</div>
            <div style="font-size:11px;color:#999;">正在识别您选购的商品</div>
          </div>

          <div class="order-items" style="margin-top:12px;">
            <div style="font-size:12px;font-weight:600;margin-bottom:8px;">识别结果</div>
            <div class="order-item">
              <span>可口可乐 ×1</span><span style="color:#ff4d4f;">¥3.50</span>
            </div>
            <div class="order-item">
              <span>奥利奥饼干 ×1</span><span style="color:#ff4d4f;">¥8.90</span>
            </div>
            <div class="order-item" style="color:#10B981;">
              <span>优惠券抵扣</span><span>-¥2.00</span>
            </div>
            <div class="order-total">
              <span>合计 <span class="pay-badge">支付分扣款</span></span>
              <span style="color:#ff4d4f;">¥10.40</span>
            </div>
          </div>
        </div>
      </div>
      <div class="phone-label">④ 扣款成功 - 支付分自动扣款</div>
    </div>

    <!-- 页面5: 订单完成页 -->
    <div>
      <div class="phone-frame">
        <div class="phone-statusbar">9:43 &nbsp;&nbsp; 100%</div>
        <div class="phone-nav">订单详情</div>
        <div class="phone-body">
          <div class="success-icon">✅</div>
          <div style="text-align:center;font-size:16px;font-weight:700;color:#333;">支付成功</div>
          <div style="text-align:center;font-size:12px;color:#999;margin-top:4px;">
            微信支付分自动扣款
          </div>

          <div class="order-items" style="margin-top:16px;">
            <div style="font-size:12px;font-weight:600;margin-bottom:8px;">订单明细</div>
            <div class="order-item">
              <span>可口可乐 330ml</span>
              <span>×1 &nbsp; ¥3.50</span>
            </div>
            <div class="order-item">
              <span>奥利奥饼干 97g</span>
              <span>×1 &nbsp; ¥8.90</span>
            </div>
            <div class="order-item" style="color:#10B981;">
              <span>优惠金额</span>
              <span>-¥2.00</span>
            </div>
            <div class="order-total">
              <span>实付款</span>
              <span style="color:#ff4d4f;font-size:18px;">¥10.40</span>
            </div>
          </div>

          <div style="background:#fff;border-radius:10px;padding:12px;margin-top:12px;font-size:11px;color:#666;line-height:2;">
            <div style="font-weight:600;color:#333;margin-bottom:4px;">订单信息</div>
            <div style="display:flex;justify-content:space-between;"><span>订单编号</span><span>HH20260511...</span></div>
            <div style="display:flex;justify-content:space-between;"><span>支付方式</span><span style="color:#07C160;">微信支付分</span></div>
            <div style="display:flex;justify-content:space-between;"><span>支付时间</span><span>2026-05-11 09:43</span></div>
          </div>

          <div style="text-align:center;margin-top:12px;">
            <div style="display:inline-block;padding:6px 20px;border:1px solid #e0e0e0;
              border-radius:16px;font-size:11px;color:#666;margin-right:8px;">申请退款</div>
            <div style="display:inline-block;padding:6px 20px;background:#FFC107;
              border-radius:16px;font-size:11px;color:#333;font-weight:600;">回到首页</div>
          </div>
          <div style="text-align:center;margin-top:8px;font-size:10px;color:#aaa;">
            7天内可申请退款
          </div>
        </div>
      </div>
      <div class="phone-label">⑤ 订单完成页 - 含退款入口</div>
    </div>

  </div>

  <!-- 底部说明 -->
  <div class="footer-note">
    流程说明：①扫码进入小程序 → ②查看商品/价格 → ③开通微信支付分（≥550分）→ ④开门选购、AI识别、支付分自动扣款 → ⑤订单完成<br>
    接入渠道：微信小程序 | 计费规则：按商品零售价计费，免押金，先享后付，支持优惠券抵扣 | 退款规则：7天内可申请退款
  </div>
</div>

</body>
</html>