detail

.gitignore

+.idea
+spm_modules
\ No newline at end of file

index.css

+@import 'normalize.css';
+
+* {
+
+    padding: 0;
+    margin: 0;
+
+}
+
+.btn {
+
+    border: none;
+    background: none;
+
+}
+
+.price .price-unit {
+
+    font-family: Verdana;
+
+}
+
+.price .figure {
+
+    font-family: Arial;
+
+}
+
+#content {
+
+    padding: 0.5rem 0.7rem;
+    background: #e6e6e6;
+    padding-bottom: 2.45rem;
+
+}
+
+#item-info {
+
+    background: #fff;
+
+}
+
+#pic-carousel {
+
+    width: 14.6rem;
+
+}
+
+#pic-carousel .carousel-outer {
+
+    width: 14.6rem;
+    height: 13.6875rem;
+    overflow: hidden;
+    position: relative;
+    margin: 0 auto;
+
+}
+
+#pic-carousel .carousel-wrap {
+
+    position: absolute;
+
+}
+
+#pic-carousel .carousel-wrap li {
+
+    float: left;
+    width: 14.6rem;
+    height: 13.6875rem;
+
+}
+
+#pic-carousel .carousel-wrap li img {
+
+    width: 14.6rem;
+    height: 13.6875rem;
+
+}
+
+#pic-carousel .carousel-status {
+
+    text-align: center;
+
+}
+
+#pic-carousel .carousel-status {
+
+    text-align: center;
+
+}
+
+#pic-carousel .carousel-status span {
+
+    display: inline-block;
+    width: .35rem;
+    height: .35rem;
+    border-radius: 0.1rem;
+    background: #e7e7e7;
+    margin-left: .25rem;
+
+}
+
+#pic-carousel .carousel-status span:first-child {
+
+    margin-left: 0;
+
+}
+
+#pic-carousel .carousel-status span.sel {
+
+    background: #9cc54e;
+
+}
+
+#price {
+
+    margin-top: .25rem;
+    height: 1.05rem;
+    line-height: 1.05rem;
+    padding: 0 .4rem;
+    overflow: hidden;
+
+}
+
+#price .current-price {
+
+    font-size: .9rem;
+    color: #9cc54e;
+
+}
+
+#price .original-price {
+
+    font-size: .7rem;
+    color: #959595;
+    margin-left: .25rem;
+
+}
+
+#price .sold {
+
+    float: right;
+    font-size: .7rem;
+    color: #9cc54e;
+
+}
+
+#summary h1 {
+
+    border-top: 2px solid #e6e6e6;
+    border-bottom: 2px solid #e6e6e6;
+    margin-top: .5rem;
+    height: 2.4rem;
+    line-height: 2.4rem;
+    font-size: .9rem;
+    color: #666;
+    padding: 0 .7rem;
+
+}
+
+#summary dl {
+
+    padding: 0.425em .7rem;
+    overflow: hidden;
+    font-size: .7rem;
+    line-height: 1.05rem;
+
+}
+
+#summary dt,
+#summary dd {
+
+    float: left;
+    color: #666
+
+}
+
+#summary dt {
+
+    clear: left;
+
+}
+
+#item-desc {
+
+    background: #fff;
+    margin-top: .5rem;
+
+}
+
+#item-desc img {
+
+    margin-top: .5rem;
+    width: 100%;
+    display: block;
+
+}
+
+#item-desc img:first-child {
+
+    margin-top: 0;
+
+}
+
+#toolbar {
+
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: .3rem 0;
+    text-align: center;
+    word-spacing: .35rem;
+    background: #fff;
+    height: 1.85rem;
+
+}
+
+#toolbar button {
+
+    height: 1.85rem;
+    padding: 0 .75rem;
+    border-radius: .2rem;
+    background: #f0642b;
+    border: none;
+    font-size: .8rem;
+    color: #fff;
+
+}
+
+#mask {
+
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .7;
+
+}
+
+#order-popup {
+
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+
+}
+
+#order-popup .popup-wrap {
+
+    padding: .75rem .7rem 0;
+    position: relative;
+
+}
+
+#order-popup .close-btn {
+
+    height: 2.5rem;
+    position: absolute;
+    right: .7rem;
+    top: .75rem;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #ccc;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+
+}
+
+#order-popup .order-info {
+
+    height: 2.5rem;
+
+}
+
+#order-popup .order-info .item-pic {
+
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid #e3e3e3;
+    float: left;
+    margin-right: .5rem;
+
+}
+
+#order-popup .order-info .item-title {
+
+    margin-top: .3rem;
+    font-size: .7rem;
+    line-height: 1rem;
+
+}
+
+#order-popup .order-info .item-price {
+
+    font-size: .6rem;
+    line-height: .9rem;
+    color: #f0642b;
+
+}
+
+#order-popup .order-count {
+
+    margin-top: .75rem;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    height: 3.3rem;
+    overflow: hidden;
+
+}
+
+#order-popup .order-count label {
+
+    line-height: 3.3rem;
+    font-size: .7rem;
+    color: #666;
+    float: left;
+
+}
+
+#order-popup .order-count .form-control {
+
+    float: right;
+    margin-top: .75rem;
+    height: 1.7rem;
+    border: 1px solid #b2b2b2;
+    border-radius: .5rem;
+    position: relative;
+    text-align: center;
+    padding: 0 1.75rem;
+
+}
+
+#order-popup .order-count .form-control input {
+
+    font-size: .6rem;
+    color: #5f5f5f;
+    width: 1.9rem;
+    height: 1.7rem;
+    text-align: center;
+    border: none;
+    border-left: 1px solid #b2b2b2;
+    border-right: 1px solid #b2b2b2;
+
+}
+
+#order-popup .order-count .form-control .minus-btn {
+
+    display: block;
+    width: 1.75rem;
+    height: 1.7rem;
+    font-size: 1.5rem;
+    color: #5f5f5f;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+
+}
+
+#order-popup .order-count .form-control .plus-btn {
+
+    display: block;
+    width: 1.75rem;
+    height: 1.7rem;
+    font-size: 1.5rem;
+    color: #5f5f5f;
+    text-align: center;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+}
+
+#order-popup .popup-footer {
+
+    margin-top: 6.65rem;
+    padding: .25rem 0;
+
+}
+
+#order-popup .popup-footer .confirm-btn {
+
+    height: 1.85rem;
+    width: 100%;
+    text-align: center;
+    border-radius: .2rem;
+    background: #f0642b;
+    font-size: .8rem;
+    color: #fff;
+
+}
\ No newline at end of file

index.handlebars

+<div id="item-info">
+    <div class="carousel" id="pic-carousel">
+        <div class="carousel-outer">
+            <ul class="carousel-wrap">
+            {{#each item_pics}}
+                {{#if @first}}
+                    <li><img src="{{this}}"></li>
+                {{else}}
+                    <li><img class="lazyimg" dataimg="{{this}}" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"></li>
+                {{/if}}
+            {{/each}}
+            </ul>
+        </div>
+        <div class="carousel-status"></div>
+    </div>
+    <div id="price">
+        <span class="current-price price"><span class="price-unit">&yen;</span><span class="figure">{{current_price}}</span></span><del class="original-price price"><span class="figure">{{original_price}}</span></del>
+        <div class="sold">已售<span class="figure">{{sold}}</span></div>
+    </div>
+    <div id="summary">
+        <h1>{{item_title}}{{item_type}}</h1>
+        <dl>
+            {{#each attr_list}}
+            <dt>{{title}}：</dt>
+            <dd>{{content}}</dd>
+            {{/each}}
+        </dl>
+    </div>
+</div>
+<div id="item-desc">
+    {{#each item_desc}}
+        <img data-url="{{this}}" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif">
+    {{/each}}
+</div>
\ No newline at end of file

index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>详情页demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
+</head>
+<body>
+<script>
+
+</script>
+
+<div id="content">
+</div>
+
+<div id="toolbar">
+    <button class="btn" id="cart-btn" type="button" data-type="1">加入购物车</button>
+    <button class="btn" id="buy-btn" type="button" data-type="2">立即购买</button>
+</div>
+
+<script src="index.js"></script>
+
+</body>
+</html>

index.js

+// todo 判断未登录
+
+require('./index.css');
+require('./rem.js');
+var tpl = require('./index.handlebars');
+var orderTpl = require('./order.handlebars');
+var $ = require('anima-yocto-lite');
+var Carousel = require('anima-carousel');
+var Lazyload = require('anima-lazyload');
+require('anima-yocto-touch');
+
+var $mask, $orderPopup, $orderCountInput;
+var itemData;
+
+function createOrderPopup() {
+
+    $mask = $('<div id="mask"></div>');
+    $mask.appendTo(document.body);
+
+    $orderPopup = $(orderTpl(itemData));
+    $orderPopup.appendTo(document.body);
+
+    $orderCountInput = $('#order-count-input');
+
+    $orderCountInput.prev().on('tap', function (ev) {
+
+        var $currentTarget = $(ev.currentTarget);
+        var count;
+
+        count = $orderCountInput.val() * 1;
+        if (count > 1) {
+
+            $orderCountInput.val(--count);
+
+            if (count == 0) {
+
+                $currentTarget
+                    .prop('disabled', true)
+                    .addClass('btn-disabled');
+
+            }
+
+        }
+
+    });
+
+    $orderCountInput.next().on('tap', function (ev) {
+
+        var $currentTarget = $(ev.currentTarget);
+        var count;
+
+        count = $orderCountInput.val() * 1;
+        if (count < 100) {
+
+            $orderCountInput.val(++count);
+
+            if (count == 99) {
+
+                $currentTarget
+                    .prop('disabled', true)
+                    .addClass('btn-disabled');
+
+            }
+
+        }
+
+    });
+
+    $orderPopup.find('.close-btn').on('tap', function (ev) {
+
+        $mask.hide();
+        $orderPopup.hide();
+
+    });
+
+}
+
+function hideOrderPopup() {
+
+    $mask.hide();
+    $orderPopup.hide();
+
+}
+
+function showOrderPopup() {
+
+    $orderPopup.find('input').val(1);
+    $mask.show();
+    $orderPopup.show();
+
+}
+
+function requestDetailData() {
+
+    var search = location.search;
+    var itemId;
+    var data = {
+        "item": {
+            "addr": "杭州",
+            "cateId": 20000011,
+            "detail": "http://welinklife.b0.upaiyun.com/1/LTE=/SVRFTS1QVUJMSVNI/MA==/20141125/vNTT-0-1416917086858.jpg;http://welinklife.b0.upaiyun.com/1/LTE=/SVRFTS1QVUJMSVNI/MA==/20141125/vNTT-0-1416917092979.jpg;http://welinklife.b0.upaiyun.com/1/LTE=/SVRFTS1QVUJMSVNI/MA==/20141125/vNTT-0-1416917089916.jpg;http://welinklife.b0.upaiyun.com/1/LTE=/SVRFTS1QVUJMSVNI/MA==/20141125/vNTT-0-1416917089362.jpg",
+            "endTime": 1417605729247,
+            "features": "{\"口感\":\"酸甜\",\"存储\":\"冷藏\"}",
+            "itemId": 2000,
+            "itemNum": 0,
+            "pics": "http://welinklife.b0.upaiyun.com/1/LTE=/SVRFTS1QVUJMSVNI/MA==/20141125/vNTT-0-1416917061206.jpg",
+            "price": 1000000000000,
+            "refPrice": 100,
+            "soldCnt": 0,
+            "specification": "600g",
+            "title": "商品上传测试"
+        }
+    };
+
+    if (search) {
+
+        search = search.split('&');
+
+        $.each(search, function (index, param) {
+
+            if (/gid=/.test(param)) {
+
+                itemId = param.split('=')[1];
+                return false;
+
+            }
+
+        });
+    }
+
+    if (!itemId) {
+
+        console.log('无法获取itemId');
+        return;
+
+    }
+
+    init(decorateData(data.item));
+    return;
+
+    $.ajax({
+        type: 'GET',
+        url: './api/m/1.0/item.json',
+        data: {
+            itemId: itemId
+        },
+        dataType: 'json',
+        timeout: 300,
+        success: function (data) {
+
+            if (data.status == 1 && data.result && data.result.item) {
+
+                init(decorateDatadata.result.item);
+
+            } else {
+
+                // todo 异常
+
+            }
+
+        },
+        error: function (xhr, type) {
+
+            console.log('商品信息获取失败');
+
+        }
+    });
+
+}
+
+function init(data) {
+
+    itemData = data;
+
+    $('#content').html(tpl(data));
+
+    // 宝贝图片
+    var carousel = new Carousel({
+
+        element: '#pic-carousel',
+        trigger: '.carousel-status',
+        loop: true,
+        play: true,
+        hasTrigger: true
+
+    });
+
+    Lazyload('#item-desc img', {
+
+        container: document.body
+
+    });
+
+    $('#toolbar .btn').click(function (ev) {
+
+        var $target = $(ev.target);
+        var type = $target.attr('data-type') * 1;
+
+        if (!$orderPopup) {
+
+            createOrderPopup();
+
+        } else {
+
+            resetOrderPopup();
+
+        }
+
+
+    });
+
+}
+
+function decorateData (rawData) {
+
+    var data = {};
+    var attr_list = [];
+
+    data['item_pics'] = rawData['pics'].split(';');
+    data['item_desc'] = rawData['detail'].split(';');
+    data['current_price'] = rawData['price'] / 1000;
+    data['original_price'] = rawData['refPrice'] / 1000;
+    data['sold'] = rawData['soldCnt'];
+    data['item_title'] = rawData['title'];
+    data['item_type'] = rawData['specification'];
+
+    $.each($.parseJSON(rawData['features']), function (key, value) {
+
+        attr_list.push({
+
+            title: key,
+            content: value
+
+        });
+
+    });
+
+    data['attr_list'] = attr_list;
+    data['item_thumb'] = rawData['pics'][0];
+
+    return data;
+
+}
+
+requestDetailData();
+
+// module.export = requestDetailData;
\ No newline at end of file

order.handlebars

+<form id="order-popup" class="popup">
+
+    <div class="popup-wrap">
+
+        <div class="popup-body">
+
+            <div class="order-info">
+
+                <img class="item-pic" src="{{item_pic}}">
+
+                <p class="item-title">{{item_title}}{{item_type}}</p>
+                <p class="item-price price"><span class="current-price"><span class="price-unit">&yen;</span><span class="figure">{{current_price}}</span></span></p>
+
+            </div>
+            <div class="order-count">
+
+                <label for="order-count-input">购买数量</label>
+                <div class="form-control">
+                    <button type="button" class="btn minus-btn">-</button>
+                    <input id="order-count-input" type="text" value="1" name="count">
+                    <button type="button" class="btn plus-btn">+</button>
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="popup-footer">
+
+            <button class="btn confirm-btn">确认</button>
+
+        </div>
+
+        <button class="btn close-btn">+</button>
+
+    </div>
+
+</form>
\ No newline at end of file

package.json

+{
+  "name": "detail",
+  "version": "0.0.1",
+  "description": "享当家detail",
+  "keywords": [],
+  "homepage": "",
+  "author": "muyun <muyun1115@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "licenses": "MIT",
+  "spm": {
+    "main": "index.js",
+    "output": [
+      "src/**/*.js",
+      "src/**/*.css"
+    ],
+    "buildArgs": "--include standalone",
+    "dependencies": {
+      "zepto": "1.1.3",
+      "normalize.css": "3.0.1",
+      "seajs": "2.3.0",
+      "handlebars-runtime": "1.3.0",
+      "anima-lazyload": "1.0.1",
+      "anima-yocto": "1.1.5",
+      "anima-carousel": "1.0.1",
+      "anima-yocto-lite": "1.1.1",
+      "anima-yocto-touch": "1.0.6",
+      "import-style": "1.0.0"
+    },
+    "devDependencies": {
+      "expect.js": "0.3.1"
+    }
+  },
+  "devDependencies": {
+    "spm": "3"
+  },
+  "scripts": {
+    "test": "spm test",
+    "build": "spm build"
+  }
+}
\ No newline at end of file

production.html

+<!DOCTYPE html>
+<html style="font-size:20px;">
+<head>
+    <meta charset="utf-8">
+    <title>详情页demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
+</head>
+<body>
+<script>
+
+</script>
+
+<div id="content">
+</div>
+
+<div id="toolbar">
+    <button class="btn" id="cart-btn" type="button" data-type="1">加入购物车</button>
+    <button class="btn" id="buy-btn" type="button" data-type="2">立即购买</button>
+</div>
+
+<script src="./dist/welinklife/0.0.0/index-debug.js"></script>
+
+</body>
+</html>

rem.js

+;(function(win) {
+    var docEl = document.documentElement;
+    var metaEl = document.querySelector('meta[name="viewport"]');
+    var fontEl = document.createElement('style');
+    var dpr;
+    var scale;
+    var tid;
+    var dpr = win.devicePixelRatio || 1;
+    scale = 1 / dpr;
+
+    docEl.setAttribute('data-dpr', dpr);
+    docEl.firstElementChild.appendChild(fontEl);
+
+    var matches = navigator.userAgent.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
+    if(!matches || matches && matches[1] > 534) {
+        //width=空 修复ios 6.1.3的问题 因为默认把width=device-width加上会导致ios6的width=320 scale后就变为一半了
+        metaEl.setAttribute('content', 'target-densitydpi=device-dpi,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no,width=');
+        if (docEl.firstElementChild) {
+            docEl.firstElementChild.appendChild(metaEl);
+        } else {
+            var wrap = document.createElement('div');
+            wrap.appendChild(metaEl);
+            document.write(wrap.innerHTML);
+        }
+        if(docEl.clientWidth == 980) {
+            metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1');
+        }
+    }
+
+    function setUnitA(){
+        var docWidth = docEl.clientWidth;
+        var extraStyle = '}';
+
+        if(!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && docWidth > 1024) {
+            docWidth = 640;
+            extraStyle = ';max-width:'+ docWidth + 'px;margin-right:auto!important;margin-left:auto!important;}';
+        }
+
+        win.rem = docWidth / 16;
+        fontEl.innerHTML = 'html{font-size:' + win.rem + 'px!important;}body{font-size:' + parseInt(12 * (docWidth / 320)) + 'px' + extraStyle;
+    }
+
+    win.dpr = dpr;
+
+    win.addEventListener('resize', function() {
+        clearTimeout(tid);
+        tid = setTimeout(setUnitA, 300);
+    }, false);
+
+    win.addEventListener('pageshow', function(e) {
+        if (e.persisted) {
+            clearTimeout(tid);
+            tid = setTimeout(setUnitA, 300);
+        }
+    }, false);
+
+    setUnitA();
+
+})(window);
\ No newline at end of file