template/store/web/tpl/tplbalancelist.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<style type="text/css">
  .user-box{height: 60px;position: relative;border-bottom:1px solid #f1f1f1;}
  .status-box{padding: 2px 5px;font-size: 12px;background-color: #38f;color: #fff;margin-right:10px;}
  .common-span{color:#000;font-size:13px;margin-right: 5px;}
  .user-box img{width:38px;height: 38px;border-radius:38px;}
  .card-box{padding:10px;width:29%;border-radius:8px;box-shadow:0 1px 5px #ddd; position: relative;margin:8px;}
  .card-span{padding:1px 5px;color:#fff;background-color:#F44336;margin-right:5px;border-radius:3px;}
  .card-content-box{margin:5px 0;border-radius:8px;height:88px;}
  .card-content-box p{color:#fff;}
  .card-a{position: absolute;padding:0 10px;border-radius:3px;top:10px;right:10px;background-color: #38f;color:#fff;}
  .card-a:hover{color:#fff;}
</style>
{notempty name="arr"}
  {foreach $arr as $value}
  <div style="margin:20px;box-shadow: 0 1px 5px #ddd;">
    {if $memberInfo[$value]}
    <div class="user-box">
      <div style="position: absolute;top:10px;left:10px;">
          <img src="{if !empty($memberInfo[$value]['avatar'])}{$memberInfo[$value]['avatar']}{else}resource/images/noavatar_middle.gif{/if}"  style="" />  
          <span class="" style="color:#c18975;">{$memberInfo[$value]['name']}</span>
          <span class="status-box" style="">{if $memberInfo[$value]['status'] == 1}<span>正常</span>{else}<span>锁定</span>{/if}</span>
          <span class="common-span">积分：{$memberInfo[$value]['credits']} 个</span>
          <span class="common-span">优惠券：<span>{php} echo count($memberCouponList);{/php}</span> 张</span>
          <span class="common-span">手机号：{$memberInfo[$value]['mobile']}</span>
          <span style="color:#000;font-size:13px;">注册时间：{$memberInfo[$value][create_time]|date='Y-m-d H:i:s'}</span>
      </div>
    </div>
    {/if}
    {if $memberBalanceList[$value]}
    <div class="layui-card-body" style="padding:15px;">
        <div class="user_list" style="display: flex;flex-wrap: wrap;">
          {volist name="memberBalanceList[$value]" id="val"}
            <div class="card-box" style="background:url('__PUBLIC__{$val['img_url']}') no-repeat;background-size:100%;">
              <p>
                {if $val['uid'] == $value}
                <span class="card-span" style="">主</span>
                {else}
                <span class="card-span" style="">副</span>
                {/if}
                <span style="color:#fff;">{$val['balance_name']}</span>
                <span style="float: right;color:#fff;font-size:20px;">{$val['amount']} / <span style="font-size:16px;">{$val['value']} 元</span></span>
              </p>
              <div class="card-content-box">
                <p style="position: absolute;top: 28px;">{$val['balance_number']}</p>
                  <p style="position: absolute;bottom:8px;">{$val['expire_time']}</p>  
                  <p style="text-align: right;">
                    {if floatval($val['value']) <= 0}
                      <button type="button" class="layui-btn layui-btn-md balance-consum" style="position: absolute;bottom: 8px;right: 8px;background-color: #999;">余额不足</button>
                    {else}
                      <button type="button" class="layui-btn layui-btn-md balance-consum btn1" style="position: absolute;bottom: 8px;right: 8px;background-color: rgba(0, 0, 0, 0.56);" data-uid={$value} data-id="{$val['id']}" data-balanceid="{$val['balance_id']}">消费</button>
                    {/if}
                  </p>
              </div>
            </div>
          {/volist}
        </div>
    </div>
    {/if}
  </div>