admin/addon/replacebuy/shop/view/replacebuy/index.html

727 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="REPLACEBUY_CSS/index.css"/>
<style type="text/css">
.sku-name{overflow: hidden; text-overflow: ellipsis;width: 300px;}
</style>
{/block}
{block name="main"}
<div style="margin-bottom: 20px;">
<div class="layui-card-header title">
<span class="ns-card-title">选择会员和商品</span>
</div>
<div class="layui-card ns-card-common ns-card-brief ns-member">
<button class="layui-btn ns-bg-color" onclick="addLabel()">选择下单会员</button>
</div>
</div>
<div style="background-color: #f8f8f8; height: 20px; width: 100%; position: absolute; left: 0;"></div>
<div class="ns-cash">
<div class="ns-form ns-money">
<div class="ns-money-block ns-money-left">
<div class="ns-money-box">
<div class="layui-card-header" style="border: none; padding: 0;">
<span class="ns-card-title tips-color">全部商品</span>
</div>
<div class="layui-tab ns-table-tab ns-cash-member" lay-filter="goods_list_tab">
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="ns-goods-block">
<div class="ns-good-left layui-form">
<div class="border-border">
<div class="layui-inline">
<div class="layui-input-inline search-input">
{include file="replacebuy/category_select" /}
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline search-input">
<select name="label_id" lay-filter="goods_grouping" id="goods_grouping">
<option value="">选择商品分组</option>
{foreach name="$label_list" item="vo"}
<option value="{$vo['id']}">{$vo['label_name']}</option>
{/foreach}
</select>
</div>
</div>
<div class="ns-single-filter-box">
<div class="layui-form">
<div class="layui-input-block search-input">
<input type="text" name="search_text" placeholder="搜索商品名称" autocomplete="off" class="layui-input ">
<button type="button" class="layui-btn layui-btn-primary" lay-filter="goods_search" lay-submit>
<i class="layui-icon">&#xe615;</i>
</button>
</div>
</div>
</div>
</div>
<!-- 商品列表 -->
<div class="layui-form ns-goods-list"></div>
<div id="page"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ns-money-block ns-money-middle"></div>
<div class="ns-money-block ns-money-right">
<div class="ns-settle-accounts ns-money-box">
<div class="layui-card ns-card-common">
<div class="layui-card-header">
<span class="ns-card-title tips-color">已选择(<span class="goods-total">0</span></span>
</div>
<div class="layui-card-body">
<div class="ns-order-list"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form ns-form ns-new-footer" >
<button class="layui-btn ns-bg-color" lay-submit lay-filter="settle">去结算</button>
</div>
<script type="text/html" id="addLabel">
<div class="layui-form">
<div class="layui-input-inline" style="width:300px;">
<input type="text" style="width:300px;" name="member_search" placeholder="请输入会员名称、用户名、手机号" autocomplete="off" class="layui-input ">
<button type="button" class="layui-btn layui-btn-primary member-search" style="height: 32px; line-height: 32px; position: absolute; right: 1px; top: 1px; border-width: 0; border-left-width: 1px;" lay-filter="search" lay-submit>
<i class="layui-icon"></i>
</button>
</div>
<table id="selected_goods_list" lay-filter="selected_goods_list"></table>
</div>
</script>
<!-- 会员详情 -->
<script type="text/html" id="member_detail">
<div class="ns-menber-detail">
<div class="ns-table-title checked-peo">
<div class="ns-title-pic">
<img src="{{ns.img(d.headimg)}}" onerror=src="REPLACEBUY_IMG/default_headimg.png" />
</div>
<div class="ns-title-content">
<div class="ns-member-con-first">
<h3 class="nickname" title="{{d.nickname}}">{{d.nickname}}</h3>
</div>
<div class="ns-member-con-second">
<p class="ns-text-color-gray"><span class="member-mobile">{{d.mobile == "" ? '--' : d.mobile}}</span></p>
</div>
</div>
</div>
<button class="layui-btn ns-bg-color check-btn" lay-submit lay-filter="logout_member">重新选择</button>
</div>
</script>
<!-- 会员查询 -->
<script type="text/html" id="search_member">
<div class="layui-card ns-card-common ns-card-brief ns-member">
<button class="layui-btn ns-bg-color" onclick="addLabel()">选择下单会员</button>
</div>
</script>
<input id="member_id" type="hidden" value="" />
<!-- 商品渲染 -->
<script type="text/html" id="goods_list">
{{# if (d.list.length == 0) { }}
<div class="ns-null-good">
<img class="ns-null-img" src="REPLACEBUY_IMG/no_goods.png">
<p class="ns-null-font">暂无商品</p>
</div>
{{# } else { }}
{{# layui.each(d.list, function(index, item) { }}
{{# if(item.stock == 0){ }}
<div class="ns-good-box disabled all-goods" data-sku-id="{{item.sku_id}}" data-sku-name="{{item.sku_name}}" data--stock="{{item.stock}}" data-sku-price="{{item.discount_price}}">
{{# } else { }}
<div class="ns-good-box all-goods" data-sku-id="{{item.sku_id}}" data-sku-name="{{item.sku_name}}" data-stock="{{item.stock}}" data-sku-price="{{item.discount_price}}">
{{# } }}
<div class="ns-table-title">
<div class="ns-title-pic">
<img layer-src="{{ns.img(item.sku_image,'big')}}" src="{{ns.img(item.sku_image,'small')}}" />
</div>
<div class="ns-title-content">
<p class="ns-multi-line-hiding good-name" title="{{item.sku_name}}">{{item.sku_name}}</p>
<div class="ns-good-price">
<p class="ns-basic-color store-price"><span class="good-price">{{item.discount_price}}</span></p>
<p class="ns-line-hideing store-stoce" title="{{item.stock}}">库存<span class="store-stock">{{item.stock}}</span></p>
</div>
</div>
<button class="layui-btn y-stock" data-sku-id="{{item.sku_id}}" data-sku-name="{{item.sku_name}}" data-stock="{{item.stock}}" data-sku-price="{{item.discount_price}}" data-sku-image="{{item.sku_image}}" data-spec-name="{{item.spec_name}}" onclick="addGoods(this)">选择</button>
<button class="layui-btn ns-bg-color-grey n-stock" readonly="readonly">选择</button>
</div>
</div>
{{# }) }}
<div id="paged" class="page"></div>
{{# } }}
</script>
<!-- 渲染购物车 -->
<script type="text/html" id="render_cart">
{{# if(d.length == 0){ }}
<div class="ns-null-good">
<img class="ns-null-img" src="REPLACEBUY_IMG/no_goods.png">
<p class="ns-null-font">未添加任何商品</p>
</div>
{{# }else{ }}
{{# layui.each(d, function(index, item){ }}
<div class="ns-good-seleted" data-id="{{item.sku_id}}">
<div class="ns-table-title">
<div class="ns-title-pic checked-pic">
<img layer-src="{{ns.img(item.sku_image,'big')}}" src="{{ns.img(item.sku_image,'small')}}" />
</div>
<div class="ns-title-content">
<p class="ns-multi-line-hiding good-name sku-name" title="{{item.sku_name}}">{{item.sku_name}}</p>
<div class="ns-good-price new-price">
<p class="ns-basic-color store-price"><span class="good-price">{{item.sku_price}}</span></p>
<!-- <div class="ns-align-right ns-selected-num">
<p class="num-btn" onclick="decrease({{item.sku_id}})">-</p>
<input type="number" value="{{item.num}}" onchange="changeCart({{item.sku_id}}, this)" class="layui-input num-input" />
<p class="num-btn" onclick="increase({{item.sku_id}})">+</p>
</div> -->
</div>
<div class="ns-align-right ns-selected-num">
<p class="num-btn" onclick="decrease({{item.sku_id}})">-</p>
<input type="number" value="{{item.num}}" onchange="changeCart({{item.sku_id}}, this)" class="layui-input num-input" />
<p class="num-btn" onclick="increase({{item.sku_id}})">+</p>
</div>
</div>
<button class="layui-btn ns-bg-color" onclick="delRow({{index}})">移除</button>
</div>
</div>
{{# }) }}
{{# } }}
</script>
<script src="SHOP_JS/category_select.js"></script>
{/block}
{block name="script" }
<script>
var buyer_info = {:json_encode($buyer_info, JSON_UNESCAPED_UNICODE)};
var cart = JSON.parse('{:json_encode($cart, JSON_UNESCAPED_UNICODE)}');
var laytpl,form,add_attr_index = -1,category_id,limit = 10,page = 1,laypage;
//扫码相关判断
var is_scan = false;
var is_scan_on_ready = false;
var input_start_time = 0;
function categorySelectCallBack(){
goodsList(page,limit);
}
var table;
layui.use(['form', 'laytpl','table','laypage'], function() {
laytpl = layui.laytpl;
form = layui.form;
laypage = layui.laypage;
table = layui.table;
form.render();
goodsList(page,limit); // 初始化商品列表
cartList(cart); // 初始化购物车
syncData();//初始化用户地址
{if condition="$buyer_info"}
memberDetail(buyer_info);
{else/}
searchMember();
{/if}
/**
* 商品搜索
*/
form.on('submit(goods_search)', function(data) {
goodsList(page,limit);
});
// //选择会员
// form.on('submit(save)', function(data) {
// if (repeat_flag) return false;
// repeat_flag = true;
// $.ajax({
// url: ns.url("replacebuy://shop/replacebuy/loginBuyer"),
// data: data.field,
// dataType: 'JSON',
// type: 'POST',
// success: function(res) {
// repeat_flag = false;
// if (res.code == 0) {
// memberDetail(res.data);
// layer.close(add_attr_index);
// } else {
// layer.msg(res.message);
// }
// }
// });
// return false;
// });
/**
* 更换会员
*/
form.on('submit(logout_member)', function(data) {
// $.ajax({
// url: ns.url("replacebuy://shop/replacebuy/logoutBuyer"),
// type: "POST",
// dataType: "JSON",
// data: data.field,
// success: function(res) {
// console.log(res)
// if (res.code == 0) {
// searchMember();
// $("#member_id").val("");
// } else {
// layer.msg(res.message);
// }
// }
// })
addLabel()
});
//选择分组
form.on('select(goods_grouping)', function(data){
// console.log(data.value)
goodsList(page,limit);
})
//去结算
form.on('submit(settle)', function(data) {
if (!$("#member_id").val()) {
layer.msg('请选择会员');
} else if (cart.length == 0) {
layer.msg('请选择商品');
} else {
// window.open(ns.url("replacebuy://shop/replacebuy/order", {"cart": cart}))
location.href = ns.url("replacebuy://shop/replacebuy/order");
}
});
});
function closeAttrLayer() {
layer.close(add_attr_index);
}
// 商品列表渲染
function goodsList(page,limit) {
$.ajax({
url: ns.url("replacebuy://shop/replacebuy/getGoodsSkuList"),
async: false,
data: {
"page" : page,
"page_size" : limit,
"search_text" : $("input[name='search_text']").val(),
"category_id" : $("input[name='category_id']").val(),
"label_id" : $("#goods_grouping option:selected").val()
},
type: "POST",
dataType: "JSON",
success: function(res) {
if (res.code == 0) {
var data = res.data;
laytpl($("#goods_list").html()).render(data, function(html) {
$(".ns-goods-list").html(html);
//如果是扫码则自动添加商品并恢复初始化 便于用户继续扫码
if(data.list.length === 1 && is_scan){
$(".ns-goods-list .layui-btn[data-sku-id='"+ data.list[0].sku_id +"']").click();
$("input[name='search_text']").val('').blur().focus();
}
});
isNull();
//分页
$("#paged").empty();
if (res.data.count > 0) {
//调用分页
laypage.render({
elem: "paged",
count: res.data.count,
curr: page, //当前页
limit: limit,
jump: function(obj, first) {
if (!first) {
goodsList(obj.curr, obj.limit);
}
form.render('checkbox');
}
})
}
} else {
layer.msg(res.message);
}
}
});
}
// 商品是否售空
function isNull() {
$(".ns-good-box").each(function() {
var _this = this;
var stock = $(this).attr("data-stock");
var id = $(this).attr("data-sku-id");
if (stock != 0) {
$.each(cart, function(index, item) {
if (item.sku_id == id) {
if (item.num == stock) {
$(_this).addClass("disabled");
} else {
$(_this).removeClass("disabled");
}
}
});
}
});
}
function addLabel() {
var add_attr = $("#addLabel").html();
var new_member_id
form.on('radio(laymemberid)', function(obj){
new_member_id = obj.value
})
laytpl(add_attr).render({}, function(html) {
add_attr_index = layer.open({
title: '选择会员',
skin: 'layer-tips-class',
type: 1,
area: ['1000px', '800px'],
content: html,
btn:["保存","返回"],
yes: function(){
$.ajax({
url: ns.url("replacebuy://shop/replacebuy/loginBuyer"),
data:{member_id: new_member_id},
dataType: 'JSON',
type: 'POST',
success: function(res) {
if (res.code == 0) {
memberDetail(res.data);
layer.close(add_attr_index);
} else {
layer.msg(res.message);
}
}
});
}
});
});
//展示已知数据
table = new Table({
elem: '#selected_goods_list',
url: ns.url("replacebuy://shop/replacebuy/getMemberList"),
cols: [
[{
width: "8%",
title: '选择',
unresize: 'false',
templet: function(data) {
var html = '';
html += `
<div>
<input type="radio" name="layTableRadioc" value="${data.member_id}" lay-type="layTableRadio" lay-filter="laymemberid">
</div>
`;
return html;
}
},{
title: '会员名称',
width: '28%',
unresize: 'false',
templet: function(data) {
var html = '';
html += `
<div>
<img style="width:40px; height:40px; margin-right:20px;" layer-src src="${ns.img(data.headimg)}" onerror="this.src = 'SHOP_IMG/default_headimg.png' "><span>${data.nickname}</span>
</div>
`;
return html;
}
}, {
field: 'username',
title: '用户名',
unresize: 'false',
align: 'center',
width: '16%',
}, {
field: 'mobile',
title: '手机号',
unresize: 'false',
align: 'center',
width: '16%',
}, {
// field: 'balance',
title: '余额',
unresize: 'false',
align: 'center',
width: '12%',
templet: function (data) {
return parseFloat(data.balance)+parseFloat(data.balance_money);
}
}, {
field: 'point',
title: '积分',
unresize: 'false',
align: 'center',
width: '19%',
templet: function (data) {
return parseInt(data.point);
}
},
]
],
});
/**
* 会员搜索
*/
form.on('submit(search)', function (data) {
table.reload({
page: {
curr: 1
},
where: data.field
});
});
$(document).keydown(function (event) {
if (event.keyCode == 13) {
$(".member-search").trigger("click");
}
});
}
// 会员详情页面渲染
function memberDetail(data) {
laytpl($("#member_detail").html()).render(data, function(html) {
$(".ns-member").html(html);
$("#member_id").val(data.member_id);
})
}
// 会员查询页面渲染
function searchMember() {
laytpl($("#search_member").html()).render([], function(html) {
$(".ns-member").html(html);
});
}
// 添加商品
function addGoods(e) {
var sku_id = $(e).attr("data-sku-id"),
sku_name = $(e).attr("data-sku-name"),
stock = $(e).attr("data-stock"),
sku_price = $(e).attr("data-sku-price"),
sku_image = $(e).attr("data-sku-image"),
spec_name = $(e).attr("data-spec-name");
var sku_json = {sku_id: sku_id, sku_name: sku_name, stock: stock, sku_price: sku_price, sku_image: sku_image, spec_name: spec_name, num: 1};
if (stock != 0) {
addCart(sku_json);
}
}
// 购物车
function addCart(json) {
var is_exit = false;
var null_stock = false;
$.each(cart, function(index, item) {
if (item.sku_id == json.sku_id) { // 购物车中已存在该商品
var item_num = parseInt(item.num) + 1;
if (item_num > parseInt(item.store_stock)) {
null_stock = true;
item_num = parseInt(item.store_stock)
}
item.num = item_num;
is_exit = true;
}
});
if (!is_exit) {
cart.push(json);
}
isNull();
syncCart();
cartList(cart);
}
// 渲染购物车
function cartList(cart) {
var data = cart;
laytpl($("#render_cart").html()).render(data, function(html) {
$(".ns-order-list").html(html);
});
var total_num = 0, total_price = 0;
$.each(cart, function(index, item) {
total_num += Number(item.num);
var id = item.sku_id;
});
$(".goods-total").text(total_num);
}
// 同步购物车数据
function syncCart() {
$.ajax({
url: ns.url("replacebuy://shop/replacebuy/cart"),
type: "POST",
dataType: "JSON",
async: false,
data: {"cart_json": JSON.stringify(cart)}
})
}
// 加
function increase(sku_id) {
$.each(cart, function(index, item) {
if (item.sku_id == sku_id) {
var item_num = parseInt(item.num) + 1;
if(item_num > parseInt(item.stock)){
item_num = parseInt(item.stock)
}
item.num = item_num;
}
});
isNull();
syncCart();
cartList(cart);
}
// 减
function decrease(sku_id) {
$.each(cart, function(index, item) {
if (item.sku_id == sku_id) {
var item_num = parseInt(item.num) - 1;
if(item_num < 1){
layer.msg('已经是最小值了,不能再减少了', {icon: 5, anim: 6});
item_num = 1
}
item.num = item_num;
}
});
isNull();
syncCart();
cartList(cart);
}
// 改变购物车数量
function changeCart(sku_id, obj){
var num = $(obj).val();
$.each(cart, function(index, item) {
if(item.sku_id == sku_id){
if(num < 1){
layer.msg('已经是最小值了,不能再减少了', {icon: 5, anim: 6});
num = 1;
}
if(num > parseInt(item.stock)){
num = parseInt(item.stock);
}
item.num = num;
}
});
isNull();
syncCart();
cartList(cart);
}
// 删除整行
function delRow(key) {
$.each(cart, function(index, item) {
if (index == key) {
$(".ns-good-box").each(function() {
if ($(this).attr("data-sku-id") == item.sku_id) {
$(this).removeClass("disabled");
}
});
}
});
cart.splice(key, 1);
syncCart();
cartList(cart);
}
// 同步数据
function syncData() {
$.ajax({
url: ns.url("replacebuy://shop/replacebuy/choiceAddress"),
type: "POST",
dataType: "JSON",
async: false,
data: {"address_id": 0}
})
}
$(function(){
//输入框聚焦 判断是否准备扫码
$("input[name='search_text']").on('focus', function(){
if($(this).val() === ''){
is_scan_on_ready = true;
}
})
//输入框失焦 清空所有判断参数
$("input[name='search_text']").on('blur', function(){
is_scan = false;
is_scan_on_ready = false;
input_start_time = 0;
})
$(document).keydown(function (event) {
var goods_search = $("input[name='search_text']").val();
if(is_scan_on_ready && input_start_time === 0){
input_start_time = (new Date()).getTime();
}
if (event.keyCode == 13 && goods_search) {
//根据输入时间怕判断是否是扫码操作
if((new Date()).getTime() - input_start_time <= 200){
is_scan = true;
}
goodsList(1, 10);
}
});
})
</script>
{/block}