271 lines
13 KiB
PHP
271 lines
13 KiB
PHP
|
||
<div class="row create-order">
|
||
<div class="col-md-8">
|
||
<div class="card">
|
||
<div class="card-header d-flex justify-content-between align-items-start pb-0">
|
||
<div class="card-title">商品列表</div>
|
||
</div>
|
||
<div class="metric-content">
|
||
<div class="card-content" >
|
||
<table class="table custom-data-table" cellspacing="0" cellpadding="0">
|
||
<thead>
|
||
<tr>
|
||
<th width="200px">#</th>
|
||
<th width="200px">商品名称</th>
|
||
<th width="400px">规格</th>
|
||
<th>价格</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
<div style="height: 70vh;overflow-y: auto;">
|
||
<table class="table custom-data-table" cellspacing="0" cellpadding="0">
|
||
<tbody>
|
||
<tr v-for="(item, index) in goods_list">
|
||
<td width="200px">
|
||
<img data-action="preview-img" :src="goods[index].goods_cover" style="max-width:100px;max-height:100px;cursor:pointer" class="img img-thumbnail">
|
||
</td>
|
||
<td width="200px">@{{goods[index].goods_name}}</td>
|
||
<td width="400px">
|
||
<template v-for="(attrs, specIndex) in item.goods_attrs">
|
||
<label >@{{specIndex}}：</label>
|
||
<div class="d-flex flex-wrap">
|
||
<template v-for="(attr, toSpecIndex) in goods[index].goods_attrs[specIndex]">
|
||
<div class="vs-radio-con vs-radio-successprimary" style="margin-right: 16px">
|
||
<input class="field_award_1 _normal_ Dcat_Admin_Widgets_Radio" :name="goodsAttr(index, specIndex)" :value="attr.value_id" type="radio" v-on:click="editGoodsAttr(index,specIndex,attr.value_id)">
|
||
<span class="vs-radio vs-radio-">
|
||
<span class="vs-radio--border"></span>
|
||
<span class="vs-radio--circle"></span>
|
||
</span>
|
||
<span>@{{attr.attr_values}}</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</td>
|
||
<th>@{{item.goods_price}}</th>
|
||
<td>
|
||
<button type="button" class="btn btn-primary btn-sm btn-outline" v-on:click="addToCart(index)">添加</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card">
|
||
<div class="card-header d-flex justify-content-between align-items-start pb-0">
|
||
<div class="card-title">购物车</div>
|
||
</div>
|
||
<div class="metric-content">
|
||
<div class="card-content" style="height: 68vh;overflow-y: auto;">
|
||
<table class="table custom-data-table" cellspacing="0" cellpadding="0">
|
||
<thead>
|
||
<tr>
|
||
<th width='60px;'>#</th>
|
||
<th width='100px;'>名称</th>
|
||
<th>规格</th>
|
||
<th width='100px;'>数量</th>
|
||
<th>价格</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in goods_carts">
|
||
<td width='60px;'>
|
||
<img data-action="preview-img" :src="goods[item.goods_index].goods_cover" style="max-width:50px;max-height:50px;cursor:pointer" class="img img-thumbnail">
|
||
</td>
|
||
<td width='100px;' class="text-wrap text-truncate" style="display: block">@{{goods[item.goods_index].goods_name}}</td>
|
||
<td>
|
||
<template v-for="(attrs, specIndex) in item.goods_attr">
|
||
<label >@{{specIndex}}：@{{all_goods_attrs[attrs].attr_values}}</label>
|
||
</template>
|
||
</td>
|
||
<td>
|
||
<button type="button" class="btn btn-primary btn-sm" v-on:click="reduceOne(index)">
|
||
<i class="fa fa-caret-left"></i>
|
||
</button>
|
||
@{{item.goods_num}}
|
||
<button type="button" class="btn btn-primary btn-sm" v-on:click="addOne(index)" >
|
||
<i class="fa fa-caret-right"></i>
|
||
</button>
|
||
|
||
</td>
|
||
<td>@{{item.goods_price}}</td>
|
||
<td>
|
||
<button type="button" class="btn btn-danger btn-sm" v-on:click="removeToCart(index)">
|
||
<i class="fa fa-remove"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card-footer">
|
||
<span style="float:right;"><h4>合计：￥@{{totalCartsPrice()}}</h4></span>
|
||
<form id="create-order-post" action="{{admin_route('order.sotre')}}" method="POST" onsubmit="return false">
|
||
{{ csrf_field() }}
|
||
<input type="hidden" name="goods_info" :value="getGoods">
|
||
<button type="submit" v-on:click="postOrder();" class="btn btn-primary btn-sm submit" >确认下单</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{!! admin_js(['/vendor/vue/vue.js']) !!}
|
||
<script init=".create-order">
|
||
// js代码也可以放在模板里面
|
||
console.log('所有JS脚本都加载完了!!!');
|
||
|
||
function copy(obj){
|
||
return Object.assign({}, obj);
|
||
}
|
||
|
||
var vm = new Vue({
|
||
el: '#' + id,
|
||
data: {
|
||
goods: {!! $goods !!},
|
||
goods_list: [],
|
||
all_goods_attrs: [],
|
||
goods_carts:{},
|
||
},
|
||
computed: {
|
||
getGoods() {
|
||
return JSON.stringify(this.goods_carts)
|
||
},
|
||
totalCartsPrice(){
|
||
return function(){
|
||
let cart_price = 0;
|
||
for(var key in this.goods_carts){
|
||
cart_price += parseFloat(this.goods_carts[key].goods_price * this.goods_carts[key].goods_num)
|
||
}
|
||
return cart_price.toFixed(2)
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.createData();
|
||
},
|
||
methods: {
|
||
postOrder(){
|
||
// return false;
|
||
let _form = $('#create-order-post');
|
||
let _self = this;
|
||
Dcat.confirm('确认该订单已支付？', null, function () {
|
||
Dcat.Form({
|
||
form: _form,
|
||
success: function (response) {
|
||
console.log(response);
|
||
if (! response.status) {
|
||
Dcat.error(response.data.message);
|
||
return false;
|
||
}
|
||
Dcat.success(response.data.message);
|
||
//清空购物车;
|
||
_self.cleanCart();
|
||
// location.href = response.data.value;
|
||
return false;
|
||
},
|
||
error: function () {
|
||
console.log(response);
|
||
// 非200状态码响应错误
|
||
}
|
||
});
|
||
});
|
||
},
|
||
createData(){
|
||
for (let i = 0; i < this.goods.length; i++) {
|
||
this.addGoods()
|
||
this.goods_list[i].goods_id = this.goods[i].goods_id
|
||
this.goods_list[i].goods_price = this.goods[i].goods_price
|
||
this.addGoodsAttr(i)
|
||
}
|
||
},
|
||
// 添加规格项目
|
||
addGoods () {
|
||
this.goods_list.push({
|
||
goods_id: 0,
|
||
goods_attrs: {},
|
||
goods_price: 0
|
||
})
|
||
},
|
||
addGoodsAttr(index){
|
||
for(var key in this.goods[index].goods_attrs){
|
||
this.goods_list[index].goods_attrs[key] = '';
|
||
//将所有可用属性单独放在一个数组，好计算商品价格
|
||
for (let i = 0; i < this.goods[index].goods_attrs[key].length; i++) {
|
||
this.all_goods_attrs[this.goods[index].goods_attrs[key][i].value_id] = this.goods[index].goods_attrs[key][i]
|
||
}
|
||
}
|
||
},
|
||
addToCart(index){
|
||
let key = ""+index
|
||
for(var attr_name in this.goods_list[index].goods_attrs){
|
||
if(this.goods_list[index].goods_attrs[attr_name] == ''){
|
||
Dcat.error('请选择属性')
|
||
return
|
||
}
|
||
key+=""+ this.goods_list[index].goods_attrs[attr_name]
|
||
}
|
||
//查询当前是否有这个商品，有则商品数+1
|
||
if( typeof(this.goods_carts[key]) != "undefined"){
|
||
let _goods_num = this.goods_carts[key].goods_num + 1
|
||
// console.log(this.goods_carts[key].goods_num);
|
||
this.$set(this.goods_carts[key], 'goods_num', _goods_num)
|
||
}else{
|
||
let _goods_attrs = copy(this.goods_list[index].goods_attrs)
|
||
let _goods_price = this.goods_list[index].goods_price
|
||
let _goods = {
|
||
'goods_name':this.goods[index].goods_name,
|
||
'goods_index':index,
|
||
'goods_id':this.goods[index].goods_id,
|
||
'goods_attr':_goods_attrs,
|
||
'goods_price':_goods_price,
|
||
'goods_num':1
|
||
}
|
||
this.$set(this.goods_carts, key, _goods)
|
||
}
|
||
console.log(this.goods_carts);
|
||
console.log(this.all_goods_attrs);
|
||
},
|
||
removeToCart(index){
|
||
let _goods_carts = copy(this.goods_carts)
|
||
delete _goods_carts[index];
|
||
this.goods_carts = _goods_carts;
|
||
},
|
||
editGoodsAttr(index, attr_name, attr_id){
|
||
this.$set(this.goods_list[index].goods_attrs, attr_name, attr_id);
|
||
//改变商品价格
|
||
let goods_price = parseFloat(this.goods[index].goods_price)
|
||
for(var attr_name in this.goods_list[index].goods_attrs){
|
||
if(this.goods_list[index].goods_attrs[attr_name]){
|
||
goods_price += parseFloat(this.all_goods_attrs[this.goods_list[index].goods_attrs[attr_name]].value_price)
|
||
}
|
||
}
|
||
this.$set(this.goods_list[index], 'goods_price', goods_price.toFixed(2))
|
||
},
|
||
goodsAttr(index, attr_name){
|
||
return index+attr_name
|
||
},
|
||
addOne(index){
|
||
let _goods_num = this.goods_carts[index].goods_num + 1
|
||
this.$set(this.goods_carts[index], 'goods_num', _goods_num)
|
||
},
|
||
reduceOne(index){
|
||
let _goods_num = this.goods_carts[index].goods_num - 1
|
||
if(_goods_num == 0){
|
||
this.removeToCart(index)
|
||
}
|
||
this.$set(this.goods_carts[index], 'goods_num', _goods_num)
|
||
},
|
||
cleanCart(){
|
||
this.goods_carts = {};
|
||
}
|
||
}
|
||
});
|
||
|
||
</script> |