crmeb_shop/application/wap/view/first/store/detail.html

{extend name="public/container"}{block name="head_top"}
<link rel="stylesheet" href="{__PLUG_PATH}swiper/swiper-3.4.1.min.css">
<script type="text/javascript" src="{__PLUG_PATH}swiper/swiper-3.4.1.jquery.min.js"></script>
<script type="text/javascript"
        src="{__WAP_PATH}crmeb/js/car-model.js"></script>{/block}{block name="title"}{$storeInfo.store_name}{/block}{block name="content"}
<div id="store_detail" class="wrapper product-con">
    <section>
        <div class="banner">
            <ul class="swiper-wrapper"> {volist name="storeInfo.slider_image" id="vo"}
                <li class="swiper-slide"><img src="{$vo}"/></li>
                {/volist}
            </ul>
        </div>
        <div class="product-info">
            <div class="title">{$storeInfo.store_name}</div>
            <div class="price">￥{$minprice|floatval}</div>
            <div class="oldprice">原价:￥{$storeInfo.ot_price|floatval}</div>
            <div class="info-amount flex"><span class="current">商品编号：{$storeInfo.id}</span> <span class="">库存:{$storeInfo.stock}{$storeInfo.unit_name}</span>
                <span class="fr">销量:{$storeInfo.sales}{$storeInfo.unit_name}</span></div>
            {gt name="storeInfo['give_integral']" value="0"}
            <div class="integral">积分:{$storeInfo.give_integral|floatval} <span>赠送</span></div>
            {/gt}
        </div>
        <div class="like-it" v-cloak=""><i class="zan-btn iconfont icon-thumbsup"
                                           :class="{'icon-thumbsup110':product.userLike == true}" @click="like"></i> 点赞
            <span v-text="product.like_num"></span>次
        </div>
        <div class="pro-attributes" @click="cardUp" v-show="productAttr && productAttr.length > 0" v-cloak="">选择
            {{productAttrCate}}
        </div>
        {notempty name="reply"}
        <div class="item-box">
            <div class="item-tit"><i class="line"></i><i class="iconfont icon-pinglun1"></i><span>评价</span><i
                    class="line"></i></div>
            <div class="assess-hot"><p class="title">宝贝评价({$replyCount})</p>
                <div class="assess-hot-con">
                    <div class="user-info flex">
                        <div class="avatar"><img src="{$reply.avatar}"/></div>
                        <div class="name">{$reply.nickname}</div>
                        <div class="star{$reply.star} all"><span class="num"></span></div>
                    </div>
                    <div class="txt-info">{$reply.comment}</div>
                    <div class="pro-parameter"><span>{$reply.add_time}</span> <span>{$reply.suk}</span></div>
                    {gt name="replyCount" value="1"} <a class="more"
                                                        href="{:url('reply_list',['productId'=>$storeInfo['id']])}">查看全部评价</a>
                    {/gt}
                </div>
            </div>
        </div>
        {/notempty}
        <div class="item-box">
            <div class="item-tit"><i class="line"></i><i class="iconfont icon-icon-tupian"></i><span>详情</span><i
                    class="line"></i></div>
            <div class="con-box" ref="store_desc"></div>
        </div>
        <div class="footer-bar flex"><a href="{:Url('Service/service_list',array('mer_id'=>$mer_id))}"> <span
                    class="iconfont icon-kefu"></span>
                <p>客服</p></a> <a class="collect-btn iconfont icon-xing1"
                                 :class="{'icon-xing2':product.userCollect == true}" @click="collect"
                                 href="javascript:void(0)"><p>收藏</p></a> <a href="{:Url('store/cart')}"> <span
                    class="iconfont icon-icon-shoppingcart-02"></span>
                <p>购物车</p>                <span class="cart_num" v-show="cartNum > 0" v-cloak=""
                                                v-text="cartNum"></span> </a>
            <div class="big-btn buy-car" @click="cardUp">加入购物车</div>
            <div class="big-btn confirm" @click="cardUp">立即购买</div>
        </div>
    </section>
    {notempty name="similarity"}
    <section class="template-piclist">
        <div class="template-prolist">
            <div class="title-like flex"><span class="title-line left"></span> <span class="icon"></span> <span>新品推荐</span> <span class="title-line right"></span></div>
        </div>
        <ul class="flex"> {volist name="similarity" id="store"}
            <li><a href="{:url('store/detail',array('id'=>$store['id']))}">
                    <div class="picture"><img src="{$store.image}"/></div>
                    <div class="pro-info"><p class="title">{$store.store_name}</p>
                        <p class="conut">已售{$store.sales}</p>
                        <p class="price">￥{$store.price|floatval}</p></div>
                    <div class="buy-car-btn"><i class="iconfont icon-gouwuche"></i></div>
                </a></li>
            {/volist}
        </ul>
    </section>
    {/notempty}
    <shop-card ref="shopCard" :show="cardShow" :product="productCardInfo" :attr-list="productAttr"
               :on-change="changeAttr" :on-close="cardClose" :on-cart="goCart" :on-buy="goBuy"></shop-card>
    <script ref="store_desc_temp" type="text/template">{$storeInfo.description}</script>
    <div style="height:1rem;"></div>
</div>
<script>    window.$product = <?php unset($storeInfo['description']); echo json_encode($storeInfo);?>;
    window.$productAttr = <?php echo json_encode($productAttr) ?: '[]'; ?>;
    window.$productValue = <?php echo json_encode($productValue) ?: '{}'; ?>;</script>
<script
    type="text/javascript">    requirejs(['vue', 'axios', 'helper', 'store', 'wap/crmeb/module/store/shop-card'], function (Vue, axios, $h, storeApi, shopCard) {
        new Vue({
            el: "#store_detail",
            components: {'shop-card': shopCard},
            data: {
                cardShow: false,
                product: $product,
                productAttr: $productAttr || [],
                productValue: $productValue || {},
                productCardInfo: {},
                status: {like: false, collect: false},
                cartNum: 0
            },
            computed: {
                productAttrCate: function () {
                    return this.productAttr.map(function (attr) {
                        return attr.attr_name;
                    }).join(',');
                }
            },
            methods: {
                cardClose: function () {
                    this.cardShow = false;
                }, cardUp: function () {
                    this.cardShow = true;
                }, goCart: function (values, cartNum) {
                    var checkedAttr = this.productValue[values.sort().join(',')], that = this;
                    storeApi.setCart({
                        cartNum: cartNum,
                        uniqueId: checkedAttr === undefined ? 0 : checkedAttr.unique,
                        productId: this.product.id
                    }, function () {
                        that.getCartNum();
                        $h.pushMsg('加入购物车成功!');
                    });
                    that.cardClose();
                }, goBuy: function (values, cartNum) {
                    var checkedAttr = this.productValue[values.sort().join(',')];
                    storeApi.goBuy({
                        cartNum: cartNum,
                        uniqueId: checkedAttr === undefined ? 0 : checkedAttr.unique,
                        productId: this.product.id
                    }, function (cartId) {
                        location.href = $h.U({c: 'store', a: 'confirm_order', p: {cartId: cartId}});
                    });
                    this.cardClose();
                }, changeAttr: function (values) {
                    var checkedAttr = this.productValue[values.sort().join(',')];
                    if (!checkedAttr) {
                        this.setProductCardInfo({stock: 0});
                    } else {
                        this.setProductCardInfo({
                            stock: checkedAttr.stock,
                            price: checkedAttr.price,
                            image: checkedAttr.image
                        });
                    }
                }, setProductCardInfo: function (info) {
                    info || (info = {});
                    this.$set(this, 'productCardInfo', {
                        image: info.image !== undefined ? info.image : this.product.image,
                        price: info.price !== undefined ? info.price : this.product.price,
                        stock: info.stock !== undefined ? info.stock : this.product.stock
                    });
                }, like: function () {
                    var that = this;
                    if (that.status.like) return false;
                    that.status.like = true;
                    if (this.product.userLike) {
                        storeApi.unlikeProduct(this.product.id, 'product', function () {
                            setTimeout(function () {
                                that.product.like_num -= 1;
                                that.product.userLike = false;
                                that.status.like = false;
                            }, 300);
                        }, function (err) {
                            that.status.like = false;
                        });
                    } else {
                        storeApi.likeProduct(this.product.id, 'product', function () {
                            setTimeout(function () {
                                that.product.like_num += 1;
                                that.product.userLike = true;
                                that.status.like = false;
                            }, 300);
                        }, function (err) {
                            that.status.like = false;
                        });
                    }
                }, collect: function () {
                    var that = this;
                    if (that.status.collect) return false;
                    that.status.collect = true;
                    if (this.product.userCollect) {
                        storeApi.unCollectProduct(this.product.id, 'product', function () {
                            setTimeout(function () {
                                that.product.userCollect = false;
                                that.status.collect = false;
                            }, 300);
                        }, function (err) {
                            that.status.collect = false;
                        });
                    } else {
                        storeApi.collectProduct(this.product.id, 'product', function () {
                            setTimeout(function () {
                                that.product.userCollect = true;
                                that.status.collect = false;
                            }, 300);
                        }, function (err) {
                            that.status.collect = false;
                        });
                    }
                }, pushMsg: function (msg, fn) {
                    $h.pushMsg(msg, fn)
                }, init: function () {
                    new Swiper('.banner', {
                        paginationClickable: false,
                        autoplay: 3000,
                        loop: false,
                        speed: 1000,
                        autoplayDisableOnInteraction: false,
                        pagination: '.swiper-pagination',
                    });
                }, getCartNum: function () {
                    var that = this;
                    storeApi.getCartNum(function (cartNum) {
                        that.cartNum = cartNum;
                    });
                }
            },
            mounted: function () {
                var wxApi = mapleWx($jssdk(), function () {
                    this.onMenuShareAll({
                        title: $product.store_name,
                        desc: $product.store_info || $product.store_name,
                        imgUrl: location.origin + $product.image,
                        link: location.href
                    });
                });
                this.$nextTick(function () {
                    this.$refs.store_desc.innerHTML = this.$refs.store_desc_temp.innerHTML;
                });
                this.getCartNum();
                this.init();
                this.setProductCardInfo();
            }
        });
    });</script>{/block}