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

767 lines
18 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"}
<style type="text/css">
.limit .layui-input{
display: inline-block;
}
.limit .layui-form-mid{
float: none;margin-right: 0
}
.limit .layui-form-radio{
padding: 0;margin: 0;
}
.limit .layui-input[disabled]{
background: #eee;cursor:not-allowed
}
.layui-form-item .layui-input-inline {
width: 140px !important;
}
.ns-len-mid {
width: 440px !important;
}
.input-required {
margin-bottom: 8px;
}
.ns-menber-detail {
display: flex;
}
.checked-peo {
width: 200px;
border: 1px solid #ff700b;
border-radius: 3px;
padding: 12px 10px;
margin: 10px 0;
}
.nickname {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ns-title {
font-size: 14px;
font-weight: 600;
color: #333;
margin-left: 8px;
}
.ns-title::before {
content: "";
display: inline-block;
width: 3px;
height: 14px;
background-color: #FF6A00;
position: absolute;
left: 0;
top: 29%;
border-radius: 5px;
transform: translateY(-50%);
}
.ns-address-list {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
}
.ns-good-box {
width: 280px;
padding: 10px;
border: 1px solid #e8e8e8;
margin:0 15px 15px 0;
cursor: pointer;
}
.ns-null-good .ns-null-font {
line-height: 90px;
margin-right: 20px;
}
.add-address {
width: 105px;
height: 102px;
border: 1px solid #e8e8e8;
display: flex;
flex-direction: column;
text-align: center;
cursor: pointer;
margin-bottom: 10px;
}
.add-address .span1 {
margin-top: 20px;
font-size: 35px;
color: #949596;
}
.layui-table-view {
width: 1200px;
margin-left: 200px;
}
.bargain-title {
display: flex;
}
.title-icon {
width: 60px;
height: 60px;
margin-right: 20px;
}
.title-icon img {
width: 60px;
}
.title-right {
width: 200px;
}
.title-name {
width: 200px;
}
.store-list {
width: 200px;
position: absolute;
left: 160px;
top: 35px;
}
.layui-card-bottom .layui-form-label {
width: 100px;
line-height: 28px;
}
.jiesuan {
margin-top: 10px;
padding-left: 47px;
}
.jiesuan p {
margin-bottom: 10px;
}
.mingxi {
position: absolute;
top: 137px;
left: 110px;
}
.mingxi p {
margin-bottom: 10px;
}
.good-name {
margin-bottom: 5px;
}
.store-stock {
margin-bottom: 5px;
}
.good-price {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 260px;
}
.addclass {
border: 1px solid #ff700b;
}
.ns-sellte-block {
height: 200px;
}
.ns-new-footer {
position: fixed;
bottom: 0px;
left: 180px;
width: 89%;
height: 50px;
}
.ns-new-footer .layui-btn1 {
position: absolute;
bottom: 20px;
left: 790px;
}
.ns-new-footer .layui-btn2 {
position: absolute;
bottom: 20px;
left: 870px;
}
.ns-title-content {
margin-right: 10px !important;
}
</style>
{/block}
{block name="main"}
<div class="ns-member">
<div class="layui-header" style="height: 35px;">
<span class="ns-title">正在为该会员下单</span>
</div>
</div>
<div style="background-color: #f8f8f8; height: 20px; width: 100%; position: absolute; left: 0;"></div>
<!-- 会员详情 -->
<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">{{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>
</div>
</script>
<div class="">
<div class="layui-header" style="height: 35px; margin-top: 40px;">
<span class="ns-title">会员信息</span>
</div>
<div class="layui-form ns-address-list"></div>
</div>
<div style="background-color: #f8f8f8; height: 20px; width: 100%; position: absolute; left: 0;"></div>
<div class="">
<div class="layui-header" style="height: 35px; margin-top: 40px;">
<span class="ns-title">商品价格明细</span>
</div>
<div class="layui-card-body">
<!-- 列表 -->
<table id="attr_class_list" lay-filter="attr_class_list">
<p class="store-list">商品:</p>
</table>
</div>
<div class="layui-card-body">
<div class="price_detailed"></div>
</div>
</div>
<!-- 结算页面 -->
<script type="text/html" id="settle_page">
<div class="ns-form ns-money ns-sellte-block">
<div class="ns-money-block ns-money-left">
<div class="ns-settle-accounts ns-money-box">
</div>
</div>
<div class="ns-money-block ns-money-middle"></div>
<div class="ns-money-block ns-money-right">
<div class="ns-money-box">
<div class="ns-cash-settle layui-form">
<div class="ns-card-bottom">
<div class="layui-card-bottom">
<label class="layui-form-label">物流方式</label>
<div class="layui-input-inline" style="display: inline-block">
<input type="radio" name="is_limit" value="1" title="快递配送" lay-filter="is_limit" checked>
</div>
<div class="layui-form-item">
<label class="layui-form-label">使用余额</label>
<div class="layui-input-inline">
<input type="radio" name="is_balance" value="1" title="是">
<input type="radio" name="is_balance" value="0" title="否" checked>
</div>
</div>
{if $is_use == 0}
<span style="color:red">配送方式未开启</span>
{/if}
<input type="hidden" value="{$is_use}" id="is_use">
<div class="jiesuan">
<p>
<span class="ns-settle-sum">运费</span>
<span class="ns-order-settle ns-settle-sum">{{d.delivery_money}}</span>
</p>
<p style="position: relative;">
<span class="ns-settle-sum">明细</span>
<div class="mingxi">
<p>
<span class="ns-settle-sum">商品金额</span>
<span class="ns-order-settle ns-settle-sum">{{d.goods_money}}</span>
</p>
<p>
<span class="ns-settle-sum">运费</span>
<span class="ns-order-settle ns-settle-sum">{{d.delivery_money}}</span>
</p>
<p>
<span class="ns-settle-sum">合计</span>
<span class="ns-total-sum ns-text-color"><span class="ns-total-money ns-real-money">{{d.pay_money}}</span></span>
</p>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<!-- 渲染购物车 -->
<script type="text/html" id="render_cart">
{{# if(d.length == 0){ }}
<div class="ns-null-good">
<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-title-pic">
<img layer-srcc="{{ns.img(item.sku_image,'big')}}" src="{{ns.img(item.sku_image,'small')}}" />
</div>
<span>{{item.sku_price}}</span>
<div class="ns-good-seleted-name">
<p class="ns-line-hiding" title="{{item.sku_name}}">{{item.sku_name}}</p>
</div>
<div class="ns-good-seleted-info">
{{# if(item.spec_name){ }}
<span>商品规格{{item.spec_name}}</span>
{{# }else{ }}
<span>商品规格</span>
{{# } }}
<span>库存{{item.stock}}</span>
<div class="ns-align-right ns-selected-num">
<span>数量{{item.num}}</span>
</div>
<span class="ns-basic-color">成交价{{(parseFloat(item.sku_price) * parseInt(item.num)).toFixed(2)}}</span>
</div>
</div>
{{# }) }}
{{# } }}
</script>
<!-- 地址列表 -->
<script type="text/html" id="address_list">
{{# if (d.length == 0) { }}
<div class="ns-null-good">
<p class="ns-null-font">暂无地址</p>
</div>
{{# } else { }}
{{# layui.each(d, function(index, item) { }}
<div class="ns-good-box {{item.id == address_id ? 'addclass' : ''}}" data-address-id="{{item.id}}" onclick="choiceAddress({{item.id}})">
<div class="ns-table-title">
<div class="ns-title-content">
<p class="ns-multi-line-hiding good-name" title="{{item.name}}">收货人{{item.name}}</p>
<div class="ns-good-price">
<p class="ns-line-hideing store-stock" title="{{item.mobile}}">联系电话{{item.mobile}}</p>
<p class="ns-basic-color good-price">联系地址{{item.full_address}}{{item.address}}</p>
</div>
</div>
</div>
</div>
{{# }) }}
{{# } }}
<div class="add-address" onclick="addAddress()"><span class="span1">+</span><span></span></div>
</script>
<script type="text/html" id="addLabel">
<div class="layui-form ns-form">
<div class="layui-form-item">
<label class="layui-form-label mid">收货人</label>
<div class="layui-input-block input-required">
<input name="name" type="text" placeholder="请输入姓名" lay-verify="required" class="layui-input ns-len-mid">
</div>
<label class="layui-form-label mid">联系电话</label>
<div class="layui-input-block input-required">
<input name="mobile" type="text" placeholder="请输入联系电话" lay-verify="mobile" class="layui-input ns-len-mid">
</div>
<div class="" style="display: flex;">
<label class="layui-form-label mid">地区</label>
<div class="layui-form-item" style="display: flex; margin-right: -20px;">
<div class="layui-input-inline area-select">
<select name="province_id" lay-filter="province_id" lay-verify="province_id">
<option value="">请选择省份</option>
{foreach $province_list as $k => $v}
<option value="{$v.id}">{$v.name}</option>
{/foreach}
</select>
</div>
<div class="layui-input-inline area-select">
<select name="city_id" lay-filter="city_id" lay-verify="city_id">
<option value="">请选择城市</option>
</select>
</div>
<div class="layui-input-inline area-select">
<select name="district_id" lay-filter="district_id" lay-verify="district_id">
<option value="">请选择区/</option>
</select>
</div>
</div>
</div>
<label class="layui-form-label mid">详细地址</label>
<div class="layui-input-block">
<input name="address" type="text" placeholder="请输入收货人地址" lay-verify="required" class="layui-input ns-len-mid">
</div>
</div>
<div class="ns-form-row mid">
<button class="layui-btn ns-bg-color member-search" lay-submit lay-filter="save" lay-submit>确定</button>
<button class="layui-btn layui-btn-primary" onclick="closeAttrLayer()">返回</button>
</div>
</div>
</script>
<input id="member_id" type="hidden" value="" />
<div class="layui-form ns-form ns-new-footer">
<div class="ns-form-row">
<button class="layui-btn layui-btn1 layui-btn-primary" onclick="back()">返回</button>
<button class="layui-btn layui-btn2 ns-bg-color" lay-submit lay-filter="save_order">提交订单</button>
</div>
</div>
{/block}
{block name="script" }
<script type="text/javascript" src="SHOP_JS/address.js"></script>
<script>
var buyer_info = {:json_encode($buyer_info, JSON_UNESCAPED_UNICODE)};
var cart = JSON.parse('{:json_encode($cart, JSON_UNESCAPED_UNICODE)}');
var address_id = JSON.parse('{:json_encode($address_id, JSON_UNESCAPED_UNICODE)}');
var laytpl,add_attr_index = -1,repeat_flag,form,table;
console.log(address_id)
layui.use(['form', 'laytpl','laypage'], function() {
laytpl = layui.laytpl;
form = layui.form;
repeat_flag = false;//防重复标识
memberDetail(buyer_info);
cartList(cart); // 初始化购物车
settleList();
addressList();
// syncData();
form.render();
table = new Table({
elem: '#attr_class_list',
cols: [
[ {
field: 'sku_name',
title: '商品信息',
unresize: 'false',
width: '20%',
templet: function(data) {
var html = ""
html += `<div class="bargain-title">
<div class="title-icon">
<img src="${ns.img(data.sku_image)}" alt="">
</div>
<div class="title-right">
<p class="title-name ns-multi-line-hiding">${data.sku_name}</p>
<span>¥${data.sku_price}</span>
</div>
</div>`;
return html;
},
}, {
templet: function(data) {
if(data.spec_name != '') {
return data.spec_name
} else {
return '无'
}
},
title: '商品规格',
width:'10%'
}, {
unresize: 'false',
title: '库存',
field:'stock',
width:'10%'
}, {
unresize:'false',
title: '数量',
width: '10%',
field:'num'
}, {
title: '成交价',
width: '10%',
unresize: 'false',
templet: function(data) {
return '¥' + data.sku_price;
}
}]
],
data: cart
});
/**
* 验证
*/
form.verify({
required : function(value, item){
var msg = $(item).attr("placeholder") != undefined ? $(item).attr("placeholder") : '';
if(value == '') return msg;
},
mobile : function(value, item) {
if(value == '') return '请输入手机号码';
var tel = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/; //固定电话
var phone = /^1[345678]\d{9}$/; //手机
if (value != '') {
if (!(tel.test(value)) && !(phone.test(value))) {
return '请输入正确的电话号码或手机号!';
}
}
},
province_id : function(value, item){
if(value == ''){
return '请选择省份';
}
},
city_id : function(value, item){
if(value == ''){
return '请选择城市';
}
},
district_id : function(value, item){
if(value == ''){
return '请选择区/县';
}
}
});
/**
* 监听新增地址提交
*/
form.on('submit(save)', function(data){
if(repeat_flag) return;
repeat_flag = true;
var full_address = [];
full_address.push($("select[name=province_id] option:selected").text());
full_address.push($("select[name=city_id] option:selected").text());
full_address.push($("select[name=district_id] option:selected").text());
data.field.full_address = full_address.join('-');
$.ajax({
type : "POST",
dataType: 'JSON',
url : ns.url("replacebuy://shop/replacebuy/addAddress"),
async : true,
data : data.field,
success : function(res) {
if (res.code == 0) {
address_id = res.data;
syncData();
addressList();
settleList();
layer.msg('添加成功');
layer.close(add_attr_index);
setTimeout(function(){
repeat_flag = false;
},200)
} else {
layer.msg(res.message);
repeat_flag = false;
}
}
})
});
/**
* 监听订单提交
*/
form.on('submit(save_order)', function(data){
if(address_id == '' || address_id == 0){
layer.msg('请选择地址!');
return;
}
var is_use = $("#is_use").val()
if (is_use == 0){
layer.msg('物流配送方式未开启!');
return;
}
if(repeat_flag) return;
repeat_flag = true;
var is_balance = $("input[name='is_balance']:checked").val();
$.ajax({
type : "POST",
dataType: 'JSON',
url : ns.url("replacebuy://shop/ordercreate/create"),
async : true,
data : {"cart": JSON.stringify(cart), "is_balance" : is_balance},
success : function(res) {
repeat_flag = false;
if (res.code == 0) {
cart = [];
address_id = 0;
syncData();
syncCart();
syncUser();
layer.msg('提交成功!');
location.href = ns.url("replacebuy://shop/replacebuy/index");
} else {
layer.msg(res.message);
}
}
})
});
});
// 选中地址
function choiceAddress(id) {
$(`.ns-good-box[data-address-id=${id}]`).addClass('addclass').siblings().removeClass('addclass');
address_id = id;
syncData();
settleList();
}
// 会员详情页面渲染
function memberDetail(data) {
laytpl($("#member_detail").html()).render(data, function(html) {
$(".ns-member").append(html);
$("#member_id").val(data.member_id);
})
}
// 同步购物车数据
function syncCart() {
$.ajax({
url: ns.url("replacebuy://shop/replacebuy/cart"),
type: "POST",
dataType: "JSON",
async: false,
data: {"cart_json": JSON.stringify(cart)}
})
}
//注销会员
function syncUser() {
$.ajax({
url: ns.url("replacebuy://shop/replacebuy/logoutBuyer"),
type: "POST",
dataType: "JSON",
async: false
})
}
// 结算
function settleList() {
$.ajax({
url: ns.url("replacebuy://shop/ordercreate/payment"),
type: "POST",
dataType: "JSON",
async: false,
data: {"cart": JSON.stringify(cart)},
success: function(res) {
if (res.code == 0) {
var data = res.data;
laytpl($("#settle_page").html()).render(data, function(html) {
$(".price_detailed").html(html);
});
form.render();
} else {
layer.msg(res.message);
}
}
})
}
// 渲染购物车
function cartList(cart) {
var data = cart;
laytpl($("#render_cart").html()).render(data, function(html) {
$(".ns-order-list").html(html);
});
}
// 地址列表渲染
function addressList() {
$.ajax({
url: ns.url("replacebuy://shop/replacebuy/addressPage"),
async: false,
type: "POST",
dataType: "JSON",
data:{type: 1},
success: function(res) {
if (res.code == 0) {
var data = res.data;
laytpl($("#address_list").html()).render(data, function(html) {
$(".ns-address-list").html(html);
});
} else {
layer.msg(res.message);
}
}
});
}
//新增地址
function addAddress(){
var add_attr = $("#addLabel").html();
laytpl(add_attr).render({}, function(html) {
add_attr_index = layer.open({
title: '添加收货地址',
skin: 'layer-tips-class',
type: 1,
area: ['650px', '350px'],
content: html,
success: function (){
form.render();
}
});
});
$(document).keydown(function (event) {
if (event.keyCode == 13) {
$(".member-search").trigger("click");
}
});
}
// 同步数据
function syncData() {
$.ajax({
url: ns.url("replacebuy://shop/replacebuy/choiceAddress"),
type: "POST",
dataType: "JSON",
async: false,
data: {"address_id": address_id}
})
}
function back() {
location.href = ns.url("replacebuy://shop/replacebuy/index");
}
function closeAttrLayer() {
layer.close(add_attr_index);
}
</script>
{/block}