283 lines
13 KiB
PHP
283 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" >
|
||
<div style="height: 74vh;overflow-y: auto;padding-left: 20px;padding-bottom: 20px;padding-right: 20px;">
|
||
<div class="mt-2 text-center mb-2 form-divider"></div>
|
||
<form class="form-horizontal" action="">
|
||
<div class="form-group row">
|
||
<label class="col-md-1 text-capitalize asterisk control-label" for="">姓名</label>
|
||
<div class="col-md-4">
|
||
<select class="form-control select2" name="" id=""></select>
|
||
</div>
|
||
<label class="col-md-2 text-capitalize asterisk control-label" for="">结算时间</label>
|
||
<div class="col-md-4">
|
||
<select class="form-control select2" name="" id=""></select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group row">
|
||
<label class="col-md-1 text-capitalize asterisk control-label" for="">身份证号</label>
|
||
<div class="col-md-4">
|
||
<input class="form-control" type="text" value="" disabled>
|
||
</div>
|
||
<label class="col-md-2 text-capitalize asterisk control-label" for="">年龄</label>
|
||
<div class="col-md-4">
|
||
<input class="form-control" type="text" value="" disabled>
|
||
</div>
|
||
</div>
|
||
<div class="form-group row">
|
||
<label class="col-md-1 text-capitalize asterisk control-label" for="">委托人</label>
|
||
<div class="col-md-4">
|
||
<input class="form-control" type="text" value="" disabled>
|
||
</div>
|
||
<label class="col-md-2 text-capitalize asterisk control-label" for="">护理等级</label>
|
||
<div class="col-md-4">
|
||
<input class="form-control" type="text" value="" disabled>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-2 text-center mb-2 form-divider">缴费记录</div>
|
||
</form>
|
||
<table class="table custom-data-table" cellspacing="0" cellpadding="0">
|
||
<thead>
|
||
<tr>
|
||
<th width='200px;'>缴费项</th>
|
||
<th>养老费</th>
|
||
<th>其他费用</th>
|
||
<th>保证金</th>
|
||
<th>缴费时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td width='200px;'class="text-wrap text-truncate">入住缴费</td>
|
||
<td>1,000 </td>
|
||
<td>1,000
|
||
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="费用明细：">
|
||
<a href="javascript:void(0);" class="feather icon-help-circle" ></a>
|
||
</span>
|
||
</td>
|
||
<td>1,000
|
||
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="保证金明细：">
|
||
<a href="javascript:void(0);" class="feather icon-help-circle"></a>
|
||
</span>
|
||
</td>
|
||
<td>2023-01-02 00:00:00 </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='100px;'>名称</th>
|
||
<th>明细</th>
|
||
<th>价格</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td width='100px;'rowspan="3" class="text-wrap text-truncate">已交费用</td>
|
||
<td>
|
||
<label style="padding-left: 23.3px;">养老费</label>
|
||
</td>
|
||
<td>1,000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<label>保证金</label>
|
||
</td>
|
||
<td>1,000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<label >暖气费</label>
|
||
</td>
|
||
<td>1,000</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card-footer">
|
||
<span style="float:right;"><h4>合计：￥1000</h4></span>
|
||
<form id="create-order-post" action="" 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> |