admin/plugins/help-user-buying/views/buying/goods.blade.php

614 lines
28 KiB
PHP
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.

@extends('layouts.base')
@section('title', "代客下单")
@section('content')
<style>
.rightlist #app .rightlist-head{line-height:50px;padding:15px 0;}
.rightlist #app{margin-left:30px;}
.rightlist #app .el-breadcrumb{padding:30px 0;font-size:16px;}
/* .el-form-item__label{padding-right:30px;} */
.tip{font-size:12px;color:#999;font-weight:500}
.rightlist-head-con{padding-right:20px;font-size:16px;color:#888;}
/* .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;} */
.el-tag{font-weight:700;font-size:15px;margin-bottom:30px;}
.el-icon-edit{font-size:16px;padding:0 15px;color:#409EFF;cursor: pointer;}
/* 滑块选择小白点 */
.el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
.el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
.tip1{font-size:12px;color:red;font-weight:500}
[v-cloak]{
display:none;
}
/* 计数器样式 */
.el-input-number__decrease, .el-input-number__increase {width: 25px;}
.el-input-number .el-input__inner {padding-left: 0px;padding-right: 0px;}
</style>
<div class="rightlist">
<div id="app" v-cloak v-loading="loading">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item><a href="{{ yzWebFullUrl('plugin.help-user-buying.admin.index.index') }}">返回选择</a></el-breadcrumb-item>
{{--<el-breadcrumb-item>[[store.id==0?'平台自营':store.store_name]]</el-breadcrumb-item>--}}
<el-breadcrumb-item v-html="title"></el-breadcrumb-item>
</el-breadcrumb>
<el-form :inline="true" :model="search_form" ref="search_form">
<el-form-item>
<el-input v-model="search_form.goods_name" placeholder="请输入商品名称"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="search_form.id_v1" placeholder="请选择一级分类" clearable @change="changeV1()">
<el-option v-for="item in category_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="search_form.id_v2" placeholder="请选择二级分类" clearable @change="changeV2()">
<el-option v-for="item in category_list_v2" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="search_form.id_v3" placeholder="请选择三级分类" clearable v-if="category_level==3">
<el-option v-for="item in category_list_v3" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item style="float:right;text-align:right;">
<el-button type="success" icon="el-icon-search" @click="search(1)">搜索</el-button>
</el-form-item>
</el-form>
<el-row :gutter="50">
<!-- left -->
<el-col :span="12">
<!-- 表格start -->
<el-table :data="list" style="width: 100%" max-height="500" v-loading="all_loading">
<el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
<el-table-column label="商品" min-width="180">
<template slot-scope="scope">
<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
<img :src="scope.row.thumb" style="width:40px;height:40px;">
[[scope.row.title]]
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="价格" max-width="120" align="center"></el-table-column>
<el-table-column label="库存" prop="stock" max-width="120" align="center"></el-table-column>
<el-table-column label="选择" width="80" align="center">
<template slot-scope="scope">
<el-button size="mini" @click="choose(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
<el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="total"
:page-size="per_size" :current-page="current_page"></el-pagination>
</el-col>
<!-- 表格end -->
</el-col>
<!-- right -->
<el-col :span="12">
<div style="background:#f9f9f9;padding:15px 10px;font-weight:900;border:1px solid #e9e9e9;">
订单信息
<el-button type="danger" size="small" style="margin-left:20px" @click="delAll">清空购物车</el-button>
</div>
<!-- 表格start -->
<el-table :data="cart_list" style="width: 100%;border:1px solid #e9e9e9" v-loading="loading" max-height="500">
<el-table-column prop="id" label="商品名称" min-width="150" align="center">
<template slot-scope="scope">
<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
<div>[[scope.row.title]]</div>
<div v-if="scope.row.option_title" style="color:#999;font-size:12px;">[ [[scope.row.option_title]] ]</div>
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="价格" max-width="120" align="center"></el-table-column>
<el-table-column prop="digitization_name" label="数量" width="120" align="center">
<template slot-scope="scope">
<el-input-number v-model="scope.row.num" :step="1" :min="0" style="width:110px;" @change="changeNum(scope.$index)"></el-input-number>
</template>
</el-table-column>
<el-table-column label="金额" prop="total" max-width="120" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger" width="80" @click="del(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 表格end -->
<div style="background:#f9f9f9;padding:15px 10px;font-weight:900;border:1px solid #e9e9e9;">
<span>(不包含运费)</span>
<span>合计:<span style="color:red">[[total_money]]</span></span>
<el-button type="primary" size="small" style="margin-left:20px" @click="openMember">结算</el-button>
</div>
</el-col>
</el-row>
<!-- 选择会员弹出框 -->
<el-dialog title="选择会员" :visible.sync="is_choose_member" width="60%">
<div>
<div v-if="member.uid" style="font-weight:900;margin-bottom:30px;">
<div>已选会员:</div>
<div style="float:left;width:120px">
<img :src="member.avatar_image" alt="" style="width:100px;height:100px">
</div>
<div style="display:inline-block;">
<div>[[member.nickname]]</div>
<div>[[member.mobile]]</div>
<el-button type="danger" size="small" @click="delMember">清除选择</el-button>
</div>
</div>
<el-form>
<el-form-item label="" prop="">
<el-input v-model="member_info" placeholder="请输入粉丝昵称/姓名/手机号" style="width:90%;"></el-input>
<el-button type="success" icon="el-icon-search" @click="searchMember()" v-loading="table_loading">搜索</el-button>
</el-form-item>
</el-form>
<template>
<!-- 表格start -->
<el-table :data="member_list" style="width: 100%;" max-height="500" v-if="member_list.length>0" v-loading="table_loading">
<el-table-column label="头像" align="center">
<template slot-scope="scope">
<img :src="scope.row.avatar_image" alt="" style="width:30px;height:30px;">
</template>
</el-table-column>
<el-table-column prop="nickname" label="姓名" min-width="120" align="center"></el-table-column>
<el-table-column prop="mobile" label="手机号" min-width="120" align="center"></el-table-column>
<el-table-column label="操作" min-width="80" align="center">
<template slot-scope="scope">
<el-button @click="chooseMember(scope.row)" size="small">选择</el-button>
</template>
</el-table-column>
</el-table>
<!-- 表格end -->
</template>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="is_choose_member = false"> </el-button>
<el-button type="primary" @click="confirm"> </el-button>
</span>
</el-dialog>
<!-- 选择规格弹出框 -->
<el-dialog title="选择商品规格" :visible.sync="is_option" width="60%">
<div>
<div v-for="(item,index) in option_list" :key="index">
<h5 style="border-bottom:1px solid #ddd;font-weight:900;">
[[item.title]]
</h5>
<div style="display:inline-block;margin:5px;" >
<el-radio-group v-model="status[index]" v-for="(item1,index1) in item.specitem" :key="index1" style="margin-bottom: 30px;">
<el-radio-button :label="item1.id">[[item1.title]]</el-radio-button>
</el-radio-group>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="is_option = false"> </el-button>
<el-button type="primary" @click="confirmOption"> </el-button>
</span>
</el-dialog>
</div>
<script>
var app = new Vue({
el:"#app",
delimiters: ['[[', ']]'],
data() {
let goods_url = '{!! $goods_url !!}';
let category_level = {!! $category_level !!};
console.log(category_level)
let category_list = {!! $category_list !!};
console.log(category_list)
let owner_id = {!! $owner_id !!};
let order_type = {!! $order_type !!};
let title = '{!! $title!!}';
// console.log(store);
return{
title:title,
type:1,
loading:false,
table_loading:false,
all_loading:false,
order_type:order_type,
owner_id:owner_id,//门店数据
total_money:"0",//总金额
is_exist:0,//商品是否已存在购物车
is_choose_member:false,//选择会员弹出框
is_option:false,//选择规格弹出框
option_list:[],//规格列表
choose_row:{},//选择商品的信息
status:[],//选择的商品规格的值
goods_url:goods_url,//搜索商品接口
member_info:"",
member:{},//选择的会员信息回显
member_list:[],//会员列表
search_form:{
id_v1:"",
id_v2:"",
id_v3:"",
},
category_level:category_level,//分类等级
category_list:category_list,
category_list_v2:[],
category_list_v3:[],
list:[],
cart_list:[],
rules:{},
//分页
total:0,
per_size:0,
current_page:0,
rules:{},
}
},
created() {
document.onkeydown = function(){
if(window.event.keyCode == 13) {
window.event.keyCode = 0;
window.event.returnValue = false;
}
};
let json = {search:{owner_id:this.owner_id}};
this.getGoodsList(json);
},
methods: {
// 获得商品列表
getGoodsList(json) {
var that = this;
that.all_loading = true;
that.$http.post(this.goods_url,json).then(response => {
console.log(response);
if(response.data.result==1){
console.log(response);
this.list = response.data.data.data;
this.total = response.data.data.total;
this.current_page = response.data.data.current_page;
this.per_size = response.data.data.per_page;
that.all_loading = false;
}
else{
that.$message.error(response.data.msg);
that.all_loading = false;
}
}),function(res){
console.log(res);
that.all_loading = false;
};
},
// 选择商品
choose(row) {
this.is_exist = 0;
this.choose_row = row;
// 如果商品有规格
if(row.has_option == 1){
this.status = [];//初始化规格选择状态
this.is_option = true;
this.option_list = row.has_many_specs;
}
else {
this.cart_list.some((item,index) =>{
if(item.id == row.id){
this.is_exist = 1;
item.num++;
this.changeNum(index);
this.countTotalPrice();
return true;
}
})
if(this.is_exist==1){//如果购物车已存在此商品或商品规格
return false;
}
this.pushCart(row)
console.log(this.cart_list)
this.countTotalPrice();
}
},
// 加入购物车
pushCart(row) {
this.cart_list.push(
{
id:row.id,
num:1,
total:row.price,
price:row.price,
thumb:row.thumb,
title:row.title,
option_id:0,//规格id
}
);
},
// 改变数量
changeNum(index) {
var that = this;
console.log(index)
if(this.cart_list[index].num < 1) {
this.del(index);
return false;
}
that.$http.post("{!! yzWebUrl('plugin.help-user-buying.admin.index.goods-increase') !!}",{'id':this.cart_list[index].id, 'num':this.cart_list[index].num,'option_id':this.cart_list[index].option_id}).then(response => {
console.log(response);
if(response.data.result==1){
console.log(response);
that.all_loading = false;
if(response.data.data.code==1){
that.$message.error("超过库存");
this.cart_list[index].num = response.data.data.num;
}
}
else{
that.$message.error(response.data.msg);
that.all_loading = false;
this.cart_list[index].num--;
}
}),function(res){
console.log(res);
that.all_loading = false;
};
this.cart_list[index].total = this.cart_list[index].num * this.cart_list[index].price;
this.countTotalPrice();
},
// 删除
del(index) {
this.$confirm('确定删除吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
// this.delGoods(index);
this.cart_list.splice(index,1);
this.countTotalPrice();
}).catch(() => {
this.cart_list[index].num++;
this.$message({type: 'info',message: '已取消删除'});
});
},
// 清空购物车
delAll() {
this.$confirm('确定清空购物车吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
// this.delGoods(index);
this.cart_list = []
this.countTotalPrice();
}).catch(() => {
this.$message({type: 'info',message: '已取消操作'});
});
},
// 打开会员弹出框
openMember(json) {
var that = this;
if(this.cart_list.length<=0) {
this.$message.error("请选择下单商品!");
return false;
}
that.is_choose_member = true;
// that.searchMember('{}');
},
// 搜索会员
searchMember(json) {
var that = this;
that.is_choose_member = true;
that.table_loading = true;
that.$http.post("{!! yzWebFullUrl('plugin.help-user-buying.admin.index.getSearchMember') !!}",{keyword:this.member_info}).then(response => {
console.log(response);
if(response.data.result==1){
console.log(response);
this.member_list = response.data.data;
that.table_loading = false;
}
else{
that.$message.error(response.data);
that.table_loading = false;
}
}),function(res){
console.log(res);
that.table_loading = false;
};
},
// 选择会员
chooseMember(row) {
this.member = row;
},
// 确认选择会员
confirm() {
// 判断是否选择了会员
if(!this.member.uid){
this.$message.error("请选择会员")
return false;
}
console.log(this.cart_list);
let new_arr = [];
// let dispatch_type_id: 1
this.cart_list.forEach((item,index) => {
new_arr.push({
goods_id:item.id,
total:item.num,
option_id:item.option_id,
})
});
console.log()
// let store_name = ""
// if(this.title){
// store_name = this.store.store_name
// }
let data = {
uid:this.member.uid,
goods:new_arr,
owner_id:this.owner_id,
order_type:this.order_type,
title:this.title,
}
console.log(data)
{{--window.location.href="{!! yzWebFullUrl('plugin.help-user-buying.admin.index.set-member-id',['data' => '']) !!}"+JSON.stringify(data);--}}
this.$http.post("{!! yzWebFullUrl('plugin.help-user-buying.admin.index.set-member-id') !!}",{data:JSON.stringify(data)}).then(response => {
console.log(response,123);
if(response.data.msg == "该类型订单无配送方式,无法正常下单"){
this.$message({
message: response.data.msg,
type: 'error'
});
location.reload();
return
}
window.location.href="{!! yzWebFullUrl('plugin.help-user-buying.admin.index.set-member-id',['data' => '']) !!}"+JSON.stringify(data);
}),function(res){
console.log(res);
};
this.is_choose_member = false;
},
// 清除选择会员
delMember() {
this.member = {};
},
// 确认选择规格
confirmOption() {
// 判断是否所有规格都已经选择
for(let i=0;i<this.option_list.length;i++) {
if(!this.status[i]){
this.$message.error("请选择完整规格信息")
return false;
}
}
// 拼接id
let id = this.status.join("_");
//重新排序处理后台返回的规格拼接id没规律问题
console.log(this.permute(this.status));
let arr_ids = this.permute(this.status);
let str_ids = [];
for(let i=0;i<arr_ids.length;i++) {
str_ids[i] = arr_ids[i].join("_");
}
// 判断选中的规格是否已存在购物车
for(let i=0;i<str_ids.length;i++) {
this.cart_list.some((item,index) =>{
if(item.specs == str_ids[i]){
console.log(id)
this.is_exist = 1;
item.num++;
this.changeNum(index);
this.countTotalPrice();
return true;
}
})
}
if(this.is_exist == 1) {
this.is_option = false;
return false;
}
// 加入购物车
for(let i=0;i<this.choose_row.has_many_options.length;i++){
for(let j=0;j<str_ids.length;j++) {
if(str_ids[j]==this.choose_row.has_many_options[i].specs){
this.cart_list.push({
id:this.choose_row.has_many_options[i].goods_id,
specs:this.choose_row.has_many_options[i].specs,
option_id:this.choose_row.has_many_options[i].id,//规格id
title:this.choose_row.title,
option_title:this.choose_row.has_many_options[i].title,
thumb:this.choose_row.thumb,
num:1,
total:this.choose_row.has_many_options[i].product_price,
price:this.choose_row.has_many_options[i].product_price,
})
this.is_option = false;
break;
}
}
}
this.countTotalPrice();
console.log(this.cart_list)
},
// 分页
currentChange(page) {
var that = this;
// let json = {page:page};
that.search(page);
},
// 一级分类改变
changeV1(){
this.search_form.id_v2 = "";
this.search_form.id_v3 = "";
this.category_list_v2 = [];
this.category_list_v3 = [];
this.category_list.find(item => {
if(item.id == this.search_form.id_v1) {
this.category_list_v2 = item.childrens;
}
});
},
// 二级分类改变
changeV2(){
this.search_form.id_v3 = "";
this.category_list_v3 = [];
if(this.category_level==3) {
this.category_list_v2.find(item => {
if(item.id == this.search_form.id_v2) {
this.category_list_v3 = item.childrens;
}
})
}
},
// 搜索
search(page) {
var that = this;
console.log(that.search_form)
var arr = [];
if(this.search_form.id_v1){
arr.push(this.search_form.id_v1)
}
if(this.search_form.id_v2){
arr.push(this.search_form.id_v2)
}
if(this.search_form.id_v3){
arr.push(this.search_form.id_v3)
}
let str;
let json;
if(arr.length<=0) {
str = "";
json = {page:page,search:{keyword:this.search_form.goods_name,owner_id:this.owner_id}};
}
else{
str = arr.join(",");
json = {page:page,search:{category:str,keyword:this.search_form.goods_name,owner_id:this.owner_id}};
}
that.getGoodsList(json);
},
//计算总价格&总数
countTotalPrice() {
this.total_money = 0.0; //初始化
for (var i = 0; i < this.cart_list.length; i++) {
this.total_money += this.cart_list[i].price * this.cart_list[i].num;
}
this.total_money = Number(this.total_money.toString().match(/^\d+(?:\.\d{0,2})?/));
},
// 数组全排序
permute(arr){
var rst=[],cur=[]
function fn(arr){
var ch
for(var i=0;i<arr.length;i++){
ch=arr.splice(i,1)[0]
cur.push(ch)
if(arr.length==0){
rst.push(cur.slice())
}
fn(arr)
arr.splice(i,0,ch)
cur.pop()
}
return rst
}
return fn(arr)
}
},
})
</script>
@endsection