223 lines
12 KiB
HTML
223 lines
12 KiB
HTML
{extend name="base"/}
|
||
{block name="resources"}
|
||
<style>
|
||
.body-content {min-height: 630px;}
|
||
.combo-box{width: 1000px;text-align: center;padding-top: 50px;padding-bottom: 50px;margin: 0 auto;}
|
||
.combo-template{display: flex;flex-wrap: wrap;margin: 50px auto 0; }
|
||
.combo-template li{width: 227px;height: 500px;padding: 30px 0 20px;margin: 0 10px 20px;text-align: center;border: 1px solid #f2f2f2;position: relative;}
|
||
.combo-template .item-title{margin-top: 3px;font-size: 20px;color: #000;line-height: 1;}
|
||
.combo-template .item-price{color: #999;font-size: 14px;width: 227px;height: 45px;line-height: 45px;cursor: pointer;}
|
||
.combo-template .item-price span{font-size: 30px;}
|
||
.combo-template .item-content{display: flex;align-items: end;flex-direction: column;border-top: 1px solid rgb(242, 242, 242);margin: 0 10px;padding: 26px 18px 0;height: 275px;overflow: hidden;}
|
||
.combo-template .item-content > .title{color: #777;margin-bottom: 10px;line-height: 22px;}
|
||
.combo-template .item-content span{font-size: 12px;color: #999;line-height: 22px;}
|
||
.combo-template .item-content .exist-addon{color: #646566;}
|
||
.combo-template .item-content .unselected{color: #ccc;}
|
||
.combo-template .item-content span i{font-style: normal;margin-right: 5px;}
|
||
.combo-template .item-btn{display: inline-block;width: 95px;border: 1px solid transparent;height: 32px;line-height: 32px;margin-top: 20px;cursor: pointer;}
|
||
.combo-template .item-detail{border-color: transparent;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);width: 160px;height: 40px;line-height: 40px !important;font-size: 16px;}
|
||
.item-desc{font-size: 12px;color: #646566;padding: 0 20px;margin: 15px 0;line-height: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;white-space: normal;word-break: break-all;height: 60px !important;}
|
||
.iconiconangledown, .iconiconangledown-copy{font-size: 30px;color: #999999;cursor: pointer;}
|
||
.purchase-page{display: flex;width: 615px;margin: 35px auto;color: #333;}
|
||
.purchase-page .purchase-img{display: flex;justify-content: center;align-items: center;width: 85px;height: 85px;margin-right: 20px;}
|
||
.purchase-page .purchase-img img{max-width: 100%;max-height: 100%;}
|
||
.purchase-page .purchase-content{flex: 1;}
|
||
.purchase-page .purchas-title{font-size: 18px;color: #323233;line-height: 24px;margin-bottom: 8px;}
|
||
.purchase-page .purchas-desc{color: #969799;line-height: 20px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
|
||
.purchase-page .purchas-price span:nth-of-type(2){}
|
||
.purchase-page .purchas-period, .purchase-page .purchas-shop{margin-top: 20px;}
|
||
.purchase-page .purchas-period .period-title, .purchase-page .purchas-shop .shop-title{font-size: 16px;}
|
||
.purchase-page .purchas-period .period-content{display: flex;margin-top: 10px;}
|
||
.purchase-page .purchas-period .period-content li{width: 122px;height: 36px;line-height: 36px;text-align: center;border: 1px solid #e5e5e5;cursor: pointer;}
|
||
.purchase-page .purchas-period .period-content li + li{margin-left: 5px;}
|
||
.purchase-page .purchas-shop .shop-content{display: flex;flex-direction: column;margin-top: 10px;padding: 20px;border: 1px solid #e5e5e5;box-sizing: border-box;}
|
||
.purchase-page .purchas-shop .shop-content input{padding-left: 10px;border: 1px solid #e5e5e5;height: 30px;line-height: 30px;width: 140px;}
|
||
.purchase-page .purchas-shop .shop-content-between{display: flex;align-items: center;justify-content: space-between;height: 45px;}
|
||
.purchase-page .purchas-shop .shop-content-between .content{display: flex;align-items: center;justify-content: space-between;width: 170px;}
|
||
.purchase-page .purchas-shop .shop-content-between .content span{display: inline-block;width: 80px;text-align: center;}
|
||
.purchase-page .purchas-shop .shop-content-state{margin-top: 10px;color: #9f9fa1;}
|
||
.purchase-page .detail-operation{margin-top: 50px;display: flex;justify-content: flex-end;align-items: center;}
|
||
.purchase-page .detail-operation .total{margin-right: 10px;}
|
||
.purchase-page .detail-operation .total span{font-size: 18px;}
|
||
.package-empty {text-align: center;}
|
||
.package-empty img {width: 260px;margin-top:150px;}
|
||
.package-empty .text {font-size: 14px;margin-top: 30px;color: #666}
|
||
</style>
|
||
{/block}
|
||
{block name="main"}
|
||
{if $shop_status neq 1}
|
||
{notempty name="$addon_list"}
|
||
<div class="combo-box">
|
||
<h1>店铺套餐</h1>
|
||
<ul class="combo-template">
|
||
{foreach $addon_list as $addon_item}
|
||
<li class="combo-item">
|
||
<div class="item-title">{$addon_item.group_name}</div>
|
||
<p class="item-desc">{$addon_item.desc}</p>
|
||
<div class="item-content">
|
||
<p class="title">营销应用：</p>
|
||
{foreach $addon_item.exist_addon_list as $addon_name}
|
||
<span class="exist-addon"><i class="text-color">√</i>{$addon_name}</span>
|
||
{/foreach}
|
||
{foreach $addon_item.noexist_addon_list as $addon_name}
|
||
<span><i class="red-color">×</i>{$addon_name}</span>
|
||
{/foreach}
|
||
</div>
|
||
{if count($addon_item.exist_addon_list) + count($addon_item.noexist_addon_list) > 11}
|
||
<span class="click-show" onclick="allShow(this)"><i class="iconfont iconiconangledown"></i></span>
|
||
<span class="click-hide layui-hide" onclick="allHide(this)"><i class="iconfont iconiconangledown-copy"></i></span>
|
||
{/if}
|
||
<button {if $shop_info.group_id==$addon_item.group_id} disabled {/if} class="layui-btn layui-btn-primary text-color border-color item-buy item-detail" data-group-fee="{$addon_item.fee}" data-group-id="{$addon_item.group_id}">￥<span class="">{$addon_item.fee}</span>/{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {elseif $addon_item.unit == 'permanent'}永久{/if}</button>
|
||
</li>
|
||
{/foreach}
|
||
</ul>
|
||
</div>
|
||
<div class="purchase-plan">
|
||
{foreach $addon_list as $addon_item}
|
||
<div class="purchase-page layui-form layui-hide" id="detail_group_id_{$addon_item.group_id}">
|
||
<div class="purchase-img">
|
||
<img src="{:img($addon_item.image)}" onerror=src="SHOP_IMG/shop.png" />
|
||
</div>
|
||
<div class="purchase-content">
|
||
<h2 class="purchas-title"><span class="purchas-price text-color">{$addon_item.fee}元/{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {/if}</span></h2>
|
||
<p class="purchas-desc">{$addon_item.desc}</p>
|
||
<div class="purchas-shop">
|
||
<div class="shop-title">设置套餐</div>
|
||
<div class="shop-content">
|
||
<div class="shop-content-between opening-hours">
|
||
<span><span class="required">*</span>套餐时长</span>
|
||
<span class="content"><input type="number" name="num" value="1" />{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {elseif $addon_item.unit == 'permanent'}永久{/if}<input type="hidden" name="unit" value="{$addon_item.unit}" /></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-operation">
|
||
<div class="total">
|
||
合计：<span class="red-color">￥{$addon_item.fee}</span>
|
||
</div>
|
||
<button class="layui-btn bg-color" lay-submit lay-filter="submit-order-{$addon_item.group_id}" >提交订单</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
{else/}
|
||
<div class="package-empty">
|
||
<img src="SHOP_IMG/package-empty.png" alt="">
|
||
<p class="text">暂无套餐</p>
|
||
</div>
|
||
{/notempty}
|
||
{else/}
|
||
<div class="package-empty">
|
||
<img src="SHOP_IMG/package-empty.png" alt="">
|
||
<p class="text">当前店铺无需进行续费</p>
|
||
</div>
|
||
{/if}
|
||
{/block}
|
||
{block name="script"}
|
||
<script>
|
||
var groupId,groupFee;
|
||
//鼠标移出
|
||
$("body").on("mouseleave", ".combo-item", function () {
|
||
$(this).removeClass("border-color");
|
||
$(this).find("button").removeClass("bg-color");
|
||
$(this).find("button").addClass("layui-btn-primary");
|
||
$(this).find("button").addClass("text-color");
|
||
});
|
||
//鼠标移入
|
||
$("body").on("mouseenter ", ".combo-item", function () {
|
||
$(this).addClass("border-color");
|
||
$(this).find("button").addClass("bg-color");
|
||
$(this).find("button").removeClass("layui-btn-primary");
|
||
$(this).find("button").removeClass("text-color");
|
||
});
|
||
// 展开全部
|
||
function allShow(obj) {
|
||
var len = $(obj).siblings(".item-content").find("span").length;
|
||
var h = $(obj).siblings(".item-content").find("span").height(); // 每一个span的高度
|
||
var hDiv = $(obj).siblings(".item-content").height(); // 外层div的高度
|
||
var _hDiv = $(obj).parents(".combo-item").height(); // 父元素的高度
|
||
var _h = h * (len - 11);
|
||
$(obj).siblings(".item-content").animate({
|
||
height: hDiv + _h + 'px',
|
||
});
|
||
$(obj).parents(".combo-item").animate({
|
||
height: _hDiv + _h + 'px',
|
||
});
|
||
$(obj).addClass("layui-hide");
|
||
$(obj).siblings(".click-hide").removeClass("layui-hide");
|
||
}
|
||
|
||
// 收起
|
||
function allHide(obj) {
|
||
var len = $(obj).siblings(".item-content").find("span").length;
|
||
var h = $(obj).siblings(".item-content").find("span").height(); // 每一个span的高度
|
||
var hDiv = $(obj).siblings(".item-content").height(); // 外层div的高度
|
||
var _hDiv = $(obj).parents(".combo-item").height(); // 父元素的高度
|
||
var _h = h * (len - 11);
|
||
console.log(_hDiv);
|
||
$(obj).siblings(".item-content").animate({
|
||
height: hDiv - _h + 'px',
|
||
});
|
||
$(obj).parents(".combo-item").animate({
|
||
height: _hDiv - _h + 'px',
|
||
});
|
||
$(obj).addClass("layui-hide");
|
||
$(obj).siblings(".click-show").removeClass("layui-hide");
|
||
}
|
||
|
||
layui.use('form', function(){
|
||
var form = layui.form;
|
||
/* 立即购买 */
|
||
$("body").on("click",".item-buy",function(){
|
||
groupId = $(this).attr('data-group-id');
|
||
groupFee = $(this).attr('data-group-fee');
|
||
detailOrder();
|
||
});
|
||
function detailOrder(){
|
||
$(".combo-box").addClass("layui-hide");
|
||
$("#detail_group_id_"+ groupId).removeClass("layui-hide").siblings().addClass("layui-hide");
|
||
form.on('submit(submit-order-'+groupId+')', function(data){
|
||
data.field.group_id = groupId;
|
||
var _unit = "";
|
||
if (data.field.unit == 'week') {
|
||
_unit = "周";
|
||
} else if (data.field.unit == "month") {
|
||
_unit = "月";
|
||
} else if (data.field.unit == "year") {
|
||
_unit = "年";
|
||
}else if (data.field.unit == "permanent") {
|
||
_unit = "永久";
|
||
}
|
||
if (data.field.num < 1) {
|
||
layer.msg("套餐使用时长不能小于1"+ _unit);
|
||
return;
|
||
}
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: ns.url("shop/index/renewexpiretime"),
|
||
data: data.field,
|
||
dataType: 'JSON',
|
||
success: function(res) {
|
||
if (res.code >= 0) {
|
||
location.href = ns.url('shop/index/orderconfirm', {out_trade_no:res.data});
|
||
}else{
|
||
layui.msg(res.message);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
|
||
//监听开店时长
|
||
$(".opening-hours input").on("input propertychange",function(){
|
||
var shopNum = $(this).val() ? $(this).val() : 0;
|
||
shopNum = parseInt(shopNum);
|
||
$(this).val(shopNum);
|
||
|
||
var fee = (shopNum * groupFee).toFixed(2);
|
||
|
||
$("#detail_group_id_"+groupId +" .total span").text("￥"+fee);
|
||
});
|
||
</script>
|
||
{/block} |