mirror of
https://github.com/crmeb/CRMEB.git
synced 2025-12-27 14:10:35 +00:00
245 lines
13 KiB
HTML
245 lines
13 KiB
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">￥{$storeInfo.price|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.ficti+$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="pro-attributes" @click="cardUp" v-show="productAttr && productAttr.length > 0" v-cloak="">选择
|
|
{{productAttrCate}}
|
|
</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>
|
|
{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="conut">已售{$store.ficti}</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.$urlShare = "{$urlShare}";
|
|
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_PATH}crmeb/module/store/shop-card.js'], 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;
|
|
// console.log(values);
|
|
// console.log(checkedAttr);
|
|
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) {
|
|
console.log(values);
|
|
//console.log(values.sort());
|
|
//console.log(values.sort().join(','));
|
|
var checkedAttr = this.productValue[values.sort().join(',')];
|
|
//console.log(values);console.log(checkedAttr);
|
|
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,
|
|
imgUrl: $product.image,
|
|
link: $urlShare || "{:url('store/detail',array('id'=>$storeInfo['id'],'spuid'=>$userInfo['uid']))}"
|
|
});
|
|
});
|
|
this.$nextTick(function () {
|
|
this.$refs.store_desc.innerHTML = this.$refs.store_desc_temp.innerHTML;
|
|
});
|
|
this.getCartNum();
|
|
this.init();
|
|
this.setProductCardInfo();
|
|
}
|
|
});
|
|
});</script>{/block} |