首页/ mobileweb/ 小草二手车平台H5移动端功能演示/ 代码预览

💻 代码预览 · 小草二手车平台H5移动端功能演示

mw_service · 上传者 驰旭教育
← 返回详情
r102/app.js · 约 25273 字符
1/* ===== 小草二手车平台 H5 · 应用逻辑 ===== */2(function ($) {3  'use strict';45  var ROUTES = ['home', 'list', 'detail', 'book', 'sell', 'orders', 'me', 'finance', 'message', 'store'];6  var CUR = 'home';7  var LIST_FILTER = { brand: '全部', price: '全部', sort: '综合' };8  var ORD_TAB = '看车预约';910  // ---- 车源数据 ----11  var CARS = [12    { id:'c1', brand:'大众', emoji:'🚗', model:'朗逸 2019款 1.5L 自动风尚版', year:2019, mile:'3.2', price:'6.88', city:'西安',13      g1:'#2B5CFF', g2:'#7AA0FF', spec:'1.5L / 自动 / 汽油', tags:['准新一手','4S店保养','无重大事故'] },14    { id:'c2', brand:'丰田', emoji:'🚙', model:'卡罗拉 2020款 双擎 精英版', year:2020, mile:'2.1', price:'9.98', city:'西安',15      g1:'#16A34A', g2:'#86EFAC', spec:'1.8L混动 / 自动', tags:['混动省油','个人一手','质保1年'] },16    { id:'c3', brand:'本田', emoji:'🚐', model:'CR-V 2018款 240TURBO 两驱', year:2018, mile:'5.6', price:'11.50', city:'咸阳',17      g1:'#F97316', g2:'#FDBA74', spec:'1.5T / 自动 / SUV', tags:['空间大','准新','天窗'] },18    { id:'c4', brand:'宝马', emoji:'🏎️', model:'3系 2021款 320Li M运动', year:2021, mile:'1.8', price:'21.80', city:'西安',19      g1:'#1E3A8A', g2:'#60A5FA', spec:'2.0T / 自动 / 后驱', tags:['豪华品牌','准新一手','4S店'] },20    { id:'c5', brand:'比亚迪', emoji:'🔋', model:'秦PLUS DM-i 2022款 55KM', year:2022, mile:'1.2', price:'8.68', city:'西安',21      g1:'#0EA5E9', g2:'#7DD3FC', spec:'1.5L插混 / 自动', tags:['插混','绿牌','低油耗'] },22    { id:'c6', brand:'奔驰', emoji:'🚘', model:'C级 2020款 C200L 动感', year:2020, mile:'3.0', price:'19.80', city:'西安',23      g1:'#334155', g2:'#94A3B8', spec:'1.5T / 自动', tags:['豪华','一手','质保'] },24    { id:'c7', brand:'奥迪', emoji:'🚗', model:'A4L 2019款 40 TFSI 时尚', year:2019, mile:'4.5', price:'15.30', city:'宝鸡',25      g1:'#475569', g2:'#CBD5E1', spec:'2.0T / 自动 / 四驱', tags:['德系','四驱','准新'] },26    { id:'c8', brand:'特斯拉', emoji:'⚡', model:'Model 3 2021款 标准续航', year:2021, mile:'2.0', price:'17.50', city:'西安',27      g1:'#0F172A', g2:'#64748B', spec:'纯电 / 自动', tags:['纯电','准新','超充'] }28  ];29  function carById(id) { return CARS.filter(function (c) { return c.id === id; })[0] || CARS[0]; }3031  // ---- 我的预约/订单 ----32  var ORDERS = {33    '看车预约': [34      ['🚗', '预约看车 · 宝马3系 320Li', '周六 14:00 · 小草高新店', '07-29', '待看车', ''],35      ['🚙', '预约看车 · 丰田卡罗拉', '周日 10:30 · 小草雁塔店', '07-27', '已看车', '']36    ],37    '已付定金': [38      ['🚘', '大众朗逸 2019款 已付定金', '定金 ¥2000 · 待过户', '07-26', '交易中', '¥6.88万']39    ],40    '已完成': [41      ['🚐', '本田CR-V 2018款 已完成', '已过户 · 好评 ⭐⭐⭐⭐⭐', '07-20', '已完成', '¥11.50万']42    ],43    '已取消': [44      ['🚗', '预约看车 · 奥迪A4L', '时间冲突已取消', '07-15', '已取消', '']45    ]46  };4748  var MSG = {49    '交易动态': [50      ['🚗', '看车提醒', '您预约的宝马3系 周六 14:00 高新店', '07-29'],51      ['💰', '定金支付成功', '大众朗逸 定金 ¥2000 已到账', '07-26']52    ],53    '平台通知': [54      ['📢', '夏日购车主会场开启', '7月全场最高直降 1.5 万,含质保', '07-28'],55      ['🎉', '新用户专享补贴', '完成首单送 1 年延保', '07-25']56    ],57    '活动推送': [58      ['🔥', '0 首付开新车', '多款车型支持 0 首付分期', '07-24'],59      ['🏆', '免费估价有礼', '估价即送车载空气净化器', '07-22']60    ]61  };6263  // ---- 小工具 ----64  function go(h) { location.hash = h; }65  window.go = go;66  function goAttr(h) { return 'onclick="go(\'' + h + '\')"'; }67  function alertAttr(t) { return 'onclick="alert(\'' + t + '\')"'; }68  function chipTap(el) { $(el).siblings().removeClass('on'); $(el).addClass('on'); }6970  // ---- 顶部栏 ----71  function homeTop() {72    return '<div class="topbar home">'73      + '<div class="loc" ' + goAttr('store') + '>西安<span class="arr">▾</span></div>'74      + '<div class="search" ' + goAttr('list') + '>🔍 搜索品牌 / 车型 / 车系</div>'75      + '<div class="bell" ' + goAttr('message') + '>🔔</div>'76      + '</div>';77  }78  function innTop(title, back) {79    back = back || 'home';80    return '<div class="topbar">'81      + '<div class="back" ' + goAttr(back) + '>‹</div>'82      + '<div class="ttl">' + title + '</div>'83      + '<div class="right"></div>'84      + '</div>';85  }86  function tabbar(active) {87    var items = [['home','🏠','首页'],['list','🚗','车源'],['orders','📋','预约'],['me','👤','我的']];88    var h = '<div class="tabbar">';89    items.forEach(function (it) {90      var on = (it[0] === active) ? ' on' : '';91      h += '<div class="tb' + on + '" ' + goAttr(it[0]) + '><div class="ic">' + it[1] + '</div><div class="lb">' + it[2] + '</div></div>';92    });93    h += '</div>';94    return h;95  }9697  // ---- 首页 ----98  function banner() {99    return '<div class="banner">'100      + '<h3>夏日购车节 · 直降 1.5 万</h3>'101      + '<p>小草二手车 · 259 项检测 · 1 年质保</p>'102      + '<span class="tag">点击领取购车补贴</span>'103      + '</div>';104  }105  function grid() {106    var items = [107      ['🚗','我要买车','list'],['💰','我要卖车','sell'],['📊','免费估价','sell'],108      ['🏦','分期金融','finance'],['🏬','门店地址','store'],['🛡️','质保服务','store'],109      ['📑','车险报价','finance'],['❓','帮助中心','message']110    ];111    var h = '<div class="grid">';112    items.forEach(function (it) {113      h += '<div class="it" ' + goAttr(it[2]) + '><div class="ic">'+it[0]+'</div><div class="lb">'+it[1]+'</div></div>';114    });115    return h + '</div>';116  }117  function brands() {118    var bs = [['大众','🚗'],['丰田','🚙'],['本田','🚐'],['宝马','🏎️'],['奔驰','🚘'],['奥迪','🚗'],['比亚迪','🔋'],['特斯拉','⚡']];119    var h = '<div class="sec-h" style="margin-top:14px"><div class="t">热门品牌</div><div class="more" ' + goAttr('list') + '>全部 ›</div></div><div class="brands">';120    bs.forEach(function (b) {121      h += '<div class="b" ' + goAttr('list') + '><div class="lo">'+b[1]+'</div><div class="nm">'+b[0]+'</div></div>';122    });123    return h + '</div>';124  }125  function carCard(c) {126    var t = c.tags.map(function (x) { return '<span>'+x+'</span>'; }).join('');127    return '<div class="carcard" ' + goAttr('detail?id='+c.id) + '>'128      + '<div class="carimg" style="background:linear-gradient(135deg,'+c.g1+','+c.g2+')"><span class="yr">'+c.year+'</span>'+c.emoji+'</div>'129      + '<div class="carinfo"><div class="nm">'+c.model+'</div>'130      + '<div class="meta">'+c.mile+'万km · '+c.spec+'</div>'131      + '<div class="tags">'+t+'</div>'132      + '<div class="bot"><div class="price"><i>¥</i>'+c.price+'<i>万</i></div><div class="city">'+c.city+'</div></div>'133      + '</div></div>';134  }135  function featured() {136    var h = '<div class="sec-h" style="margin-top:14px"><div class="t">精选好车</div><div class="more" ' + goAttr('list') + '>更多 ›</div></div><div class="cars">';137    CARS.slice(0,3).forEach(function (c) { h += carCard(c); });138    return h + '</div>';139  }140  function guess() {141    var h = '<div class="sec-h" style="margin-top:14px"><div class="t">猜你喜欢</div></div><div class="cars">';142    CARS.slice(3).forEach(function (c) { h += carCard(c); });143    return h + '</div>';144  }145  function homeBody() { return banner() + grid() + brands() + featured() + guess(); }146147  // ---- 车源列表 ----148  function listBody() {149    var brands = ['全部','大众','丰田','本田','宝马','奔驰','奥迪','比亚迪','特斯拉'];150    var prices = ['全部','5万以下','5-10万','10-15万','15-20万','20万以上'];151    var sorts = ['综合','价格低','价格高','车龄新'];152    function chipsRow(keys, cur, kind) {153      var h = '<div class="chips" style="margin:8px 14px 0">';154      keys.forEach(function (k) {155        h += '<div class="chip'+(k===cur?' on':'')+'" onclick="setFilter(\''+kind+'\',\''+k+'\')">'+k+'</div>';156      });157      return h + '</div>';158    }159    var arr = filterCars();160    var list = arr.length ? arr.map(carCard).join('') : '<div class="empty">没有符合条件的车源</div>';161    return '<div style="background:#fff;padding-top:12px">'162      + '<div class="sec-h" style="margin:0 14px"><div class="t">车源筛选</div><div class="more">共 '+arr.length+' 辆</div></div>'163      + chipsRow(brands, LIST_FILTER.brand, 'brand')164      + '<div style="height:8px"></div>' + chipsRow(prices, LIST_FILTER.price, 'price')165      + '<div style="height:8px"></div>' + chipsRow(sorts, LIST_FILTER.sort, 'sort')166      + '</div><div class="cars" style="padding:0 14px">' + list + '</div>';167  }168  function filterCars() {169    var arr = CARS.slice();170    if (LIST_FILTER.brand !== '全部') arr = arr.filter(function (c) { return c.brand === LIST_FILTER.brand; });171    if (LIST_FILTER.price !== '全部') {172      arr = arr.filter(function (c) {173        var p = parseFloat(c.price);174        if (LIST_FILTER.price === '5万以下') return p < 5;175        if (LIST_FILTER.price === '5-10万') return p >= 5 && p < 10;176        if (LIST_FILTER.price === '10-15万') return p >= 10 && p < 15;177        if (LIST_FILTER.price === '15-20万') return p >= 15 && p < 20;178        if (LIST_FILTER.price === '20万以上') return p >= 20;179        return true;180      });181    }182    if (LIST_FILTER.sort === '价格低') arr.sort(function (a,b){return parseFloat(a.price)-parseFloat(b.price);});183    else if (LIST_FILTER.sort === '价格高') arr.sort(function (a,b){return parseFloat(b.price)-parseFloat(a.price);});184    else if (LIST_FILTER.sort === '车龄新') arr.sort(function (a,b){return b.year-a.year;});185    return arr;186  }187  window.setFilter = function (kind, val) {188    LIST_FILTER[kind] = val;189    render();190  };191192  // ---- 车辆详情 ----193  function detailBody(q) {194    var c = carById((q && q.id) || 'c1');195    var steps = ['看车预约','到店看车','支付定金','过户提车'];196    var h = '<div class="detail-img" style="background:linear-gradient(135deg,'+c.g1+','+c.g2+')">'+c.emoji197      + '<div class="price-tag"><span>'+c.brand+' · '+c.year+'年</span><b>¥'+c.price+'</b><i>万</i></div>'198      + '<div class="dot">1 / 6</div></div>';199    h += '<div style="margin:0 14px">';200    h += '<div class="card" style="margin-top:-12px;position:relative">'201      + '<div style="font-size:17px;font-weight:800">'+c.model+'</div>'202      + '<div style="font-size:12px;color:#9aa0ac;margin-top:4px">'+c.city+' · 上牌 '+c.year+' 年 · '+c.mile+' 万km</div>'203      + '<div class="tags" style="margin-top:8px">'+c.tags.map(function(x){return '<span>'+x+'</span>';}).join('')+'</div>'204      + '</div>';205    h += '<div class="detail-specs">'206      + '<div class="s"><b>'+c.year+'</b><span>上牌年份</span></div>'207      + '<div class="s"><b>'+c.mile+'万</b><span>表显里程</span></div>'208      + '<div class="s"><b>国六</b><span>排放标准</span></div>'209      + '<div class="s"><b>自动</b><span>变速箱</span></div>'210      + '<div class="s"><b>'+c.spec.split('/')[0].trim()+'</b><span>排量/动力</span></div>'211      + '<div class="s"><b>良好</b><span>车况评级</span></div>'212      + '</div>';213    h += '<div class="card"><div class="sec-h" style="margin:0"><div class="t" style="font-size:15px">购车流程</div></div><div class="steps">';214    steps.forEach(function (s, idx) {215      h += '<div class="s'+(idx<2?' on':'')+'"><div class="dot">'+(idx<2?'✓':(idx+1))+'</div><div class="lb">'+s+'</div></div>';216    });217    h += '</div></div>';218    h += '<div class="card"><div class="sec-h" style="margin:0"><div class="t" style="font-size:15px">车辆描述</div></div>'219      + '<div class="detail-desc">本车为 <b>'+c.brand+' '+c.model+'</b>,整体车况优秀,<b>无重大事故、无泡水、无火烧</b>,4S 店全程保养记录可查。内饰整洁、轮胎磨损正常,三大件工况良好,支持第三方检测与试驾。购车即享 <b>259 项检测报告 + 1 年或 2 万公里质保</b>。</div></div>';220    h += '<div class="card seller"><div class="av">🧑‍💼</div><div><div class="nm">小草严选顾问 · 李经理</div><div class="meta">从业 8 年 · 已服务 1200+ 客户</div></div><div class="go" ' + alertAttr('已为您接通顾问') + '>咨询</div></div>';221    h += '</div>';222    h += '<div class="btn" ' + goAttr('book?id='+c.id) + '>预约看车</div>';223    h += '<div class="btn orange" ' + alertAttr('已加入收藏') + '>收藏车辆</div>';224    return h;225  }226227  // ---- 预约看车 ----228  function bookBody(q) {229    var c = carById((q && q.id) || 'c1');230    return '<div class="card" style="margin:12px 14px 0;display:flex;gap:12px">'231      + '<div class="carimg" style="width:72px;height:56px;font-size:26px;background:linear-gradient(135deg,'+c.g1+','+c.g2+')">'+c.emoji+'</div>'232      + '<div><div style="font-weight:700;font-size:15px">'+c.model+'</div><div style="font-size:12px;color:#9aa0ac;margin-top:3px">¥'+c.price+'万 · '+c.city+'</div></div></div>'233      + '<div class="frm">'234      + fld('姓名', 'text', '请输入您的称呼')235      + fld('手机号', 'tel', '请输入 11 位手机号')236      + '<div class="fld"><label>期望时间</label><select><option>本周六 上午</option><option>本周六 下午</option><option>本周日 上午</option><option>本周日 下午</option><option>工作日 晚</option></select></div>'237      + '<div class="fld"><label>就近门店</label><select><option>小草高新店(科技路)</option><option>小草雁塔店(小寨)</option><option>小草未央店(凤城)</option></select></div>'238      + fld('备注', 'text', '如:想试驾、看车况细节')239      + '</div>'240      + '<div class="card" style="margin:12px 14px 0;font-size:13px;color:#8a8f9c;line-height:1.7">🛡️ 预约免费,到店由顾问陪同验车,全程透明、无强制消费。提交后顾问将在 30 分钟内电话联系您。</div>'241      + '<div class="btn" ' + alertAttr('预约提交成功,顾问将尽快联系您') + '>提交预约</div>';242  }243244  // ---- 卖车估价 ----245  function sellBody() {246    return '<div class="frm">'247      + fld('品牌车型', 'text', '如:大众 朗逸')248      + '<div class="fld"><label>上牌年份</label><select id="sy"><option>2019</option><option>2020</option><option>2021</option><option>2022</option><option>2018</option><option>2017</option></select></div>'249      + fld('表显里程', 'text', '如:3.2(单位万km)')250      + '<div class="fld"><label>所在城市</label><select><option>西安</option><option>咸阳</option><option>宝鸡</option><option>其他</option></select></div>'251      + '<div class="fld"><label>车况亮点</label><div class="chips" id="hl"><div class="chip" onclick="chipTap(this)">无事故</div><div class="chip" onclick="chipTap(this)">4S保养</div><div class="chip" onclick="chipTap(this)">一手车</div><div class="chip" onclick="chipTap(this)">原版原漆</div></div></div>'252      + '</div>'253      + '<div class="btn" onclick="doValuation()">免费估价</div>'254      + '<div id="valout"></div>';255  }256  window.doValuation = function () {257    var sy = parseInt($('#sy').val(), 10) || 2019;258    var mile = parseFloat($('#hl').closest('.frm').find('input[placeholder*="里程"]').val()) || 4;259    // 演示估价:基准价按年份与里程折旧260    var base = 12;261    var age = 2026 - sy;262    var price = base * Math.pow(0.86, age) - mile * 0.25;263    if (price < 1) price = 1.2;264    var low = (price * 0.92).toFixed(1);265    var high = (price * 1.08).toFixed(1);266    var h = '<div class="result"><div class="lab">根据您的信息,预估回收价</div>'267      + '<div class="rng"><i>¥</i>'+low+' - '+high+'<i> 万</i></div>'268      + '<div class="note">估价为系统参考价,最终以到店 259 项检测为准。提交信息即送 <b>免费上门验车 + 车载空气净化器</b>,成交再享 1 年延保。</div></div>'269      + '<div class="btn orange" onclick="alert(\'已提交,评估师将联系您\')">预约上门收车</div>';270    $('#valout').html(h);271    window.scrollTo(0, document.body.scrollHeight);272  };273274  // ---- 我的预约/订单 ----275  function ordList(tab) {276    var arr = ORDERS[tab] || [];277    if (!arr.length) return '<div class="empty">暂无'+tab+'记录</div>';278    var h = '';279    arr.forEach(function (o) {280      h += '<div class="ord" ' + goAttr('detail?id=c1') + '>'281        + '<div class="oic">'+o[0]+'</div>'282        + '<div class="mid"><div class="ti">'+o[1]+'</div><div class="ln">'+o[2]+'</div><div class="tm">'+o[3]+'</div></div>'283        + '<div class="rt"><div class="st">'+o[4]+'</div>'+(o[5]?'<div class="amt">'+o[5]+'</div>':'')+'</div>'284        + '</div>';285    });286    return h;287  }288  function ordersBody() {289    var keys = ['看车预约','已付定金','已完成','已取消'];290    var t = '<div class="tabs" id="otabs">';291    keys.forEach(function (k) { t += '<div class="tb'+(k===ORD_TAB?' on':'')+'" data-k="'+k+'">'+k+'</div>'; });292    t += '</div><div id="olist">' + ordList(ORD_TAB) + '</div>';293    return t;294  }295  function bindOrders() {296    $('#otabs .tb').off('click').on('click', function () {297      ORD_TAB = $(this).data('k');298      $('#otabs .tb').removeClass('on'); $(this).addClass('on');299      $('#olist').html(ordList(ORD_TAB));300    });301  }302303  // ---- 我的 ----304  function mg(ic, lb, to) { return '<div class="it" ' + goAttr(to) + '><div class="ic">'+ic+'</div><div class="lb">'+lb+'</div></div>'; }305  function meBody() {306    var h = '<div class="me-h"><div class="av">🧑</div><div><div class="nm">小草车友</div><div class="vip">👑 认证会员</div></div></div>';307    h += '<div class="me-grid">'308      + mg('🚗','我的爱车','list') + mg('⭐','我的收藏','list') + mg('📋','预约记录','orders') + mg('💰','我的订单','orders')309      + mg('🏦','金融服务','finance') + mg('🏬','门店地址','store') + mg('🔔','消息中心','message') + mg('⚙️','设置','me')310      + '</div>';311    h += '<div class="invite"><div class="em">🎁</div><div class="tx"><b>推荐卖车赚佣金</b><span>每成功成交 1 台,返现最高 ¥888</span></div><div class="btn2" ' + alertAttr('已复制专属海报') + '>立即推广</div></div>';312    return h;313  }314315  // ---- 分期金融 ----316  function financeBody() {317    var calc = '<div class="calc" id="fcalc">'318      + '<div class="row"><span>车辆总价(万)</span><span class="v" id="cPrice">12.0</span></div>'319      + '<div class="fld" style="padding:6px 0"><label>裸车价</label><input id="price" type="number" value="12" step="0.1" oninput="calcFinance()"></div>'320      + '<div class="fld" style="padding:6px 0"><label>首付比例</label><input id="down" type="number" value="30" step="5" oninput="calcFinance()"><span style="width:18px">%</span></div>'321      + '<div class="fld" style="padding:6px 0"><label>分期期数</label><select id="term" onchange="calcFinance()"><option>12</option><option>24</option><option selected>36</option><option>48</option></select><span style="width:18px">期</span></div>'322      + '<div class="out" id="fout"></div>'323      + '</div>';324    var prods = '<div class="fin">'325      + '<div class="f a"><h4>0 首付方案</h4><span>新人专享 · 先开后付</span></div>'326      + '<div class="f b"><h4>低息分期</h4><span>年化 3.8% 起 · 最长 48 期</span></div>'327      + '</div>';328    var h = calc + '<div class="sec-h" style="margin-top:14px"><div class="t">金融产品</div></div>' + prods329      + '<div class="card" style="margin-top:12px;font-size:13px;color:#8a8f9c;line-height:1.7">📄 申请需提供身份证、驾驶证及收入证明,最快 1 小时审批放款。本平台不收取任何金融服务费。</div>';330    return h;331  }332  window.calcFinance = function () {333    var p = parseFloat($('#price').val()) || 0;334    var dp = (parseFloat($('#down').val()) || 0) / 100;335    var term = parseInt($('#term').val(), 10) || 36;336    var loan = p * (1 - dp);337    var rate = 0.038 / 12;338    var monthly = loan * rate * Math.pow(1 + rate, term) / (Math.pow(1 + rate, term) - 1);339    var downPay = p * dp;340    $('#cPrice').text(p.toFixed(1));341    $('#fout').html(342      '<div class="o"><b>'+downPay.toFixed(2)+'万</b><span>首付</span></div>'343      + '<div class="o"><b>'+monthly.toFixed(2)+'万</b><span>月供('+term+'期)</span></div>'344      + '<div class="o"><b>'+loan.toFixed(2)+'万</b><span>贷款金额</span></div>'345    );346  };347  function bindFinance() { if ($('#fout').length) calcFinance(); }348349  // ---- 消息中心 ----350  function msgList(arr) {351    var h = '';352    arr.forEach(function (m) {353      var cls = m[0] === '📢' ? 'a' : (m[0] === '🚗' || m[0] === '💰' ? 'b' : 'c');354      h += '<div class="msg"><div class="mic '+cls+'">'+m[0]+'</div><div class="mid"><div class="ti">'+m[1]+'<span class="tm">'+m[3]+'</span></div><div class="sn">'+m[2]+'</div></div></div>';355    });356    return h;357  }358  function messageBody() {359    var keys = ['交易动态','平台通知','活动推送'];360    var t = '<div class="tabs" id="mtabs">';361    keys.forEach(function (k, i) { t += '<div class="tb'+(i===0?' on':'')+'" data-k="'+k+'">'+k+'</div>'; });362    t += '</div><div id="mlist">' + msgList(MSG[keys[0]]) + '</div>';363    return t;364  }365  function bindMessage() {366    $('#mtabs .tb').off('click').on('click', function () {367      $('#mtabs .tb').removeClass('on'); $(this).addClass('on');368      var k = $(this).data('k');369      $('#mlist').html(msgList(MSG[k]));370    });371  }372373  // ---- 门店/关于 ----374  function storeBody() {375    var stores = [376      ['🏬','小草高新店','科技路 18 号 高新万达 2 号楼 · 09:00-20:00'],377      ['🏬','小草雁塔店','小寨西路 26 号 赛格国际 8F · 09:30-21:00'],378      ['🏬','小草未央店','凤城二路 9 号 经发大厦 1F · 09:00-20:00']379    ];380    var h = '<div class="sec-h" style="margin-top:14px"><div class="t">门店地址</div><div class="more" ' + alertAttr('已为您导航') + '>导航 ›</div></div>';381    stores.forEach(function (s) {382      h += '<div class="store"><div class="lo">'+s[0]+'</div><div class="mid"><div class="nm">'+s[1]+'</div><div class="ln">'+s[2]+'</div></div><div class="op" ' + alertAttr('已致电门店') + '>电话</div></div>';383    });384    h += '<div class="sec-h" style="margin-top:14px"><div class="t">关于小草二手车</div></div>';385    h += '<div class="card about"><b>小草二手车平台</b> 是西安本地一站式二手车交易服务平台,提供'386      + '<b>免费估价、严选车源、到店验车、分期金融、质保延保</b> 全流程服务。'387      + '所有车辆均经过 <b>259 项专业检测</b>,杜绝重大事故、泡水、火烧车辆,'388      + '让每一位用户都能「放心买好车」。平台已服务超过 <b>10 万+</b> 车主,好评率 98.6%。</div>';389    return h;390  }391392  // ---- 表单通用 ----393  function fld(label, type, ph) {394    return '<div class="fld"><label>'+label+'</label><input type="'+type+'" placeholder="'+ph+'"></div>';395  }396397  // ---- 页面表 ----398  var PAGES = {399    home:    function () { return { top: homeTop(), body: homeBody(), tab: true }; },400    list:    function () { return { top: innTop('车源列表'), body: listBody() }; },401    detail:  function (q) { return { top: innTop('车辆详情'), body: detailBody(q) }; },402    book:    function (q) { return { top: innTop('预约看车'), body: bookBody(q) }; },403    sell:    function () { return { top: innTop('卖车估价'), body: sellBody() }; },404    orders:  function () { return { top: innTop('我的预约'), body: ordersBody(), bind: bindOrders, tab: true }; },405    me:      function () { return { top: innTop('个人中心'), body: meBody(), tab: true }; },406    finance: function () { return { top: innTop('分期金融'), body: financeBody(), bind: bindFinance }; },407    message: function () { return { top: innTop('消息中心'), body: messageBody(), bind: bindMessage, tab: true }; },408    store:   function () { return { top: innTop('门店 / 关于'), body: storeBody() }; }409  };410411  // ---- 路由 ----412  function parseHash() {413    var h = location.hash.replace(/^#/, '');414    if (!h) h = 'home';415    var q = {};416    var qi = h.indexOf('?');417    if (qi >= 0) {418      var qs = h.substr(qi + 1); h = h.substr(0, qi);419      qs.split('&').forEach(function (p) {420        var kv = p.split('=');421        q[decodeURIComponent(kv[0])] = decodeURIComponent(kv[1] || '');422      });423    }424    return { name: h, q: q };425  }426  function render() {427    var p = parseHash();428    var name = ROUTES.indexOf(p.name) >= 0 ? p.name : 'home';429    CUR = name;430    var v = PAGES[name](p.q);431    var html = (v.top || '') + '<div class="page">' + (v.body || '') + '</div>' + (v.tab ? tabbar(name) : '');432    $('#app').html(html);433    if (v.bind) v.bind();434    $('.page').scrollTop(0);435  }436437  $(window).on('hashchange', render);438  $(function () { render(); });439})(jQuery);440