403 lines
20 KiB
PHP
403 lines
20 KiB
PHP
@extends('layouts.base')
|
|
|
|
@section('content')
|
|
@section('title', trans('公众号导入商品'))
|
|
<style>
|
|
body{background-color: #F2F2F2;}
|
|
.transition{transition: all .5s;}
|
|
.modular{padding: 10px;border-radius: 10px;background-color: #fff;margin: 10px 0;}
|
|
.tips{margin-top: 10px;line-height: 30px;height: 230px;min-width: 920px;overflow-y: hidden;}
|
|
.close-tips{height: 48px;}
|
|
.isShow{height: 30px;overflow-y: hidden;cursor:pointer}
|
|
.put-away{transform: translateY(-30px);}
|
|
.open{transform: translateY(0);}
|
|
.major-tips{color: #F25353;}
|
|
.tips-title{display: flex;align-items: center;width: 100%;}
|
|
.tips-title .el-icon-arrow-down{transform: rotate(-180deg);margin: 0 2px;cursor:pointer}
|
|
.tips .arrow-down{transform: rotate(0deg);}
|
|
.el-collapse{padding: 10px;border-radius: 10px;}
|
|
.search-box{display: flex;flex-wrap: wrap;}
|
|
.search-box>div{max-width: 240px;margin: 10px 10px 0 0;}
|
|
.list-title{display: flex;}
|
|
.list-title .icon-box{display: flex;flex-wrap: wrap;width: 14px;}
|
|
.list-title .icon-box i{font-size: 14px;}
|
|
.list-title .el-icon-caret-bottom{margin-top: -12px;}
|
|
.list{display: flex;grid-gap: 10px;text-align: justify;justify-items: center;flex-wrap: wrap;}
|
|
.list-item{width: 220px;height: 330px;border: 1px solid #ccc;}
|
|
.list-item:hover{border-color: #F25353;}
|
|
.img-box,.list-item img{width: 100%;height: 230px;position: relative;}
|
|
.checkbox{position: absolute;left: 4px;top: -8px;opacity: 0;}
|
|
.isImport{position: absolute;width: 100%;height: 30px;line-height: 30px;color: #fff;background-color: #F25353;text-align: center;opacity: 0;bottom: 0;}
|
|
.list-item:hover .isImport,.list-item:hover .checkbox{opacity: 1;}
|
|
.product-title{text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;margin: 6px;line-height: 20px;height: 40px;text-indent: 2rem;word-wrap:keep-all;}
|
|
.price-box{width: 100%;height: calc(100% - 52px - 230px);display: flex;justify-content: space-around;align-items: center;text-align: center;line-height: 20px;}
|
|
.foort{position: fixed;width: calc(100vw - 295px);height: 80px;background-color: #fff;bottom: 0;border-radius: 10px 10px 0 0;box-shadow: 0px -1px 10px rgb(0 0 0 / 10%);padding: 10px;}
|
|
.foort-top,.foort-buttom{display: flex;align-items: center;}
|
|
.--mb--rich-text{flex: 1;color: #F25353;}
|
|
.foort-buttom>div{margin-right: 10px;}
|
|
</style>
|
|
<div class="all">
|
|
<div id="app">
|
|
<div class="tips modular transition" :class="{'close-tips':!isShow}">
|
|
<div class="tips-title">
|
|
<span style="flex: 1;">功能介绍</span>
|
|
<span class="major-tips isShow" @click="setIsShow">
|
|
<!-- [[isShow?"收起":"展开"]] -->
|
|
<div class="put-away transition" :class="{'open':!isShow}">
|
|
<div>展开</div>
|
|
<div>收起</div>
|
|
</div>
|
|
</span>
|
|
<span class="el-icon-arrow-down major-tips transition" :class="{'arrow-down':!isShow}" @click="setIsShow"></span>
|
|
</div>
|
|
<div>1. 选择公众号快速导入商品</div>
|
|
<div>2. <span class="major-tips">导入公众号后点击导入后请不要关闭页面，或者重新刷新页面，这样会导致程序崩溃，造成不可预计的错误</span></div>
|
|
<div>3. 导入会把导入公众号的商品信息:商品基本信息，分类，品牌，视频，属性，规格等导入当前公众号。<span class="major-tips">（先导入分类/品牌可增加导入的成功率)</span> </div>
|
|
<div>
|
|
<span>4. 如果数据你的商品描述中添加了大量的文字样式等,导入时需要更改mysql配置,步骤如下:</span>
|
|
<div style="text-indent: 2rem;">1. 找到服务器my.conf文件,针对宝塔用户</div>
|
|
<div style="text-indent: 2rem;">2. 查找max_allowed_packet,把max_allowed_packet值改为500M,值根据情况来定</div>
|
|
</div>
|
|
</div>
|
|
<div class="modular">
|
|
选择公众号：
|
|
<el-select v-model="search.uniacid" placeholder="请选择" size="small" @change="changeuniacid">
|
|
<el-option v-for="(item,i) in PublicNumber" :key="i" :label="item.name" :value="item.uniacid"></el-option>
|
|
</el-select>
|
|
<div class="search-box">
|
|
<el-select v-model="search.category.parentid" placeholder="请选择一级分类" size="small" @change="changeCategory(search.category.parentid,'category','category1')" clearable>
|
|
<el-option v-for="(item,i) in category" :key="i" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
<el-select v-model="search.category.childid" placeholder="请选择二级分类" size="small" @change="changeCategory(search.category.childid,'category1','category2')" clearable>
|
|
<el-option v-for="(item,i) in category1" :key="i" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
<el-select v-model="search.category.thirdid" placeholder="请选择三级分类" size="small" v-if="cat_level == 3">
|
|
<el-option v-for="(item,i) in category2" :key="i" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
<div style="display: flex;align-items: center;max-width:400px;">
|
|
<div style="margin-right:4px;">价格区间</div>
|
|
<el-input v-model="search.min_price" placeholder="商品最低价" size="small" clearable style="flex: 1;"></el-input>
|
|
<div style="margin:0 2px;">至</div>
|
|
<el-input v-model="search.max_price" placeholder="商品最高价" size="small" clearable style="flex: 1;"></el-input>
|
|
</div>
|
|
<el-select v-model="search.is_presence" placeholder="是否已导入" size="small" clearable>
|
|
<el-option label="已导入" value="1"></el-option>
|
|
<el-option label="未导入" value="0"></el-option>
|
|
</el-select>
|
|
<el-select v-model="search.brand_id" placeholder="请选择品牌名称" size="small" clearable>
|
|
<el-option v-for="(item,i) in brandList" :key="i" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
<!-- <el-input v-model="form.keyword" placeholder="请输入商品ID或关键字" size="small"></el-input>
|
|
<el-input v-model="form.brank" placeholder="请输入品牌名称" size="small"></el-input> -->
|
|
<div style="display: flex;max-width: 370px;min-width: 370px;align-items: center;">
|
|
<div style="margin-right:8px;">商品类型</div>
|
|
<el-checkbox-group v-model="search.product_attr" style="margin-top:6px;">
|
|
<el-checkbox label="is_new">新品</el-checkbox>
|
|
<el-checkbox label="is_hot">热卖</el-checkbox>
|
|
<el-checkbox label="is_recommand">推荐</el-checkbox>
|
|
<el-checkbox label="is_discount">促销</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
<div>
|
|
<el-button size="small" style="width: 80px;" @click="initFrom">重置</el-button>
|
|
<el-button size="small" type="primary" style="width: 80px;" @click="searchList">搜索</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modular">
|
|
<div class="list-title">
|
|
<el-checkbox v-model="change" @change="changeAll"></el-checkbox>
|
|
<span class="" style="margin: 0 10px 0 4px;" @click="changeAll(!change)">全选</span>
|
|
<span @click="setreal_sales">销量</span>
|
|
<div class="icon-box" @click="setreal_sales">
|
|
<i class="el-icon-caret-top transition" :class="{'major-tips':search.real_sales == '0'}"></i>
|
|
<i class="el-icon-caret-bottom transition" :class="{'major-tips':search.real_sales == '1'}"></i>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="list-item transition" v-for="(item,i) in listData">
|
|
<div class="img-box">
|
|
<img :src="item.thumb" alt="">
|
|
<div class="isImport transition" v-if="item.is_presence == 1">已导入</div>
|
|
<el-checkbox class="checkbox transition" v-model="item.change" v-else></el-checkbox>
|
|
</div>
|
|
<div class="product-title">[[item.title]]</div>
|
|
<div class="price-box">
|
|
<div>
|
|
<div>现价</div>
|
|
<div class="major-tips">￥[[item.price]]</div>
|
|
</div>
|
|
<div>
|
|
<div>成本</div>
|
|
<div class="major-tips">￥[[item.cost_price]]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="height: 100px;"></div>
|
|
<div class="foort" style="height: 120px">
|
|
<div class="foort-top" style="margin-bottom: 20px">
|
|
<div class="--mb--rich-text">如不选择导入分类则自动匹配或创建分类！</div>
|
|
<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="per_page" v-if="total > 0" layout="total, prev, pager, next, jumper" :total="total" background>
|
|
</el-pagination>
|
|
</div>
|
|
<div class="foort-buttom">
|
|
选择导入的分类：
|
|
<el-select v-model="importForm.parentid" placeholder="请选择一级分类" size="small" @change="changeCategory(importForm.parentid,'importcategory','importcategory1')" clearable>
|
|
<el-option v-for="(item,i) in importcategory" :key="i" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
<el-select v-model="importForm.childid" placeholder="请选择二级分类" size="small" @change="changeCategory(importForm.childid,'importcategory1','importcategory2')" clearable>
|
|
<el-option v-for="(item,i) in importcategory1" :key="i" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
<el-select v-model="importForm.thirdid" placeholder="请选择三级分类" size="small" clearable v-if="import_cat_level == 3">
|
|
<el-option v-for="(item,i) in importcategory2" :key="i" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
<div style="flex: 1;">
|
|
<el-button size="small" type="primary" @click="importGoods">导入商品</el-button>
|
|
<el-button size="small" type="primary" @click="importAllGoods">导入全部筛选商品</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let vm = new Vue({
|
|
el:"#app",
|
|
delimiters: ['[[', ']]'],
|
|
data(){
|
|
return{
|
|
search:{
|
|
uniacid:"",
|
|
category:{
|
|
parentid:"",
|
|
childid:"",
|
|
thirdid:"",
|
|
},
|
|
real_sales:"0",
|
|
brand_id:"",
|
|
is_presence:"",
|
|
max_price:"",
|
|
min_price:"",
|
|
product_attr:[]
|
|
},
|
|
category:[],
|
|
category1:[],
|
|
category2:[],
|
|
importcategory:[],
|
|
importcategory1:[],
|
|
importcategory2:[],
|
|
importForm:{
|
|
parentid:"",
|
|
childid:"",
|
|
thirdid:""
|
|
},
|
|
isShow:true,
|
|
form:{},
|
|
currentPage:1,
|
|
total:0,
|
|
listData:[],
|
|
PublicNumber:[],//公众号列表
|
|
value: '',
|
|
isChange:false,
|
|
change:false,
|
|
brandList:[],
|
|
per_page:20,
|
|
cat_level:"2",
|
|
import_cat_level:"2",
|
|
}
|
|
},
|
|
created(){
|
|
this.initFrom();
|
|
this.getPublicNumber();
|
|
},
|
|
methods:{
|
|
changeuniacid(){
|
|
this.getBrand();
|
|
this.getCategory();
|
|
this.getImportCategory();
|
|
setTimeout(this.getList,0);
|
|
},
|
|
changeAll(change){
|
|
this.change = change;
|
|
this.listData.forEach(item=>{
|
|
item.change = change;
|
|
})
|
|
},
|
|
changeCategory(value,key,ckildKey){
|
|
for (let i = 0; i < this[key].length; i++) {
|
|
let item = this[key][i];
|
|
if (item.id == value) {
|
|
this[ckildKey] = item.childrens;
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
setIsShow(){
|
|
this.isShow = !this.isShow;
|
|
},
|
|
initFrom(){
|
|
this.search = {
|
|
category:{
|
|
parentid:"",
|
|
childid:"",
|
|
thirdid:""
|
|
},
|
|
brand_id:"",
|
|
is_presence:"",
|
|
max_price:"",
|
|
min_price:"",
|
|
product_attr:[],
|
|
real_sales:"0"
|
|
}
|
|
},
|
|
loading(text){
|
|
return this.$loading({
|
|
lock: true,
|
|
text,
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
},
|
|
getBrand(){
|
|
this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getBrand') !!}",{uniacids:this.search.uniacid}).then(({data:{result,msg,data}})=>{
|
|
if (result == 1) this.brandList = data || [];
|
|
})
|
|
},
|
|
getPublicNumber(){
|
|
let loading = this.loading("加载公众号中...");
|
|
this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getPublicNumber') !!}").then(({data:{result,data,msg}})=>{
|
|
loading.close();
|
|
if(result == 1){
|
|
if(!data || data.length<=0){
|
|
this.$message.error("公众号列表为空");
|
|
this.PublicNumber = [];
|
|
return false;
|
|
}
|
|
this.PublicNumber = data;
|
|
this.search.uniacid = data[0].uniacid;
|
|
this.getBrand();
|
|
this.getCategory();
|
|
this.getImportCategory();
|
|
setTimeout(this.getList,0);
|
|
}else this.$message.error(msg);
|
|
})
|
|
},
|
|
getjson(){
|
|
//后端需要为空或者不选择的不需要传key过去
|
|
let {search} = this;
|
|
let json = {};
|
|
for (let key in search) {
|
|
let item = search[key];
|
|
if(key == "category"){
|
|
for (const key1 in item) {
|
|
let items = item[key1];
|
|
if(items !=""){
|
|
if(!json.category) json.category = {};
|
|
json.category[key1] = items;
|
|
}
|
|
}
|
|
}else if(key == "product_attr"){
|
|
if(item.length>0) json.product_attr = item;
|
|
}else{
|
|
if(item != "") json[key] = item;
|
|
}
|
|
}
|
|
return json;
|
|
},
|
|
getList(){
|
|
let loading = this.loading("加载数据中...");
|
|
let json = this.getjson();
|
|
this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getGoodsData') !!}",{search:json,page:this.currentPage},"加载数据中...").then(({data:{result,data,msg}})=>{
|
|
loading.close();
|
|
if(result == 1){
|
|
this.listData = data.data;
|
|
this.total = data.total;
|
|
this.per_page = data.per_page;
|
|
}else this.$message.error(msg);
|
|
|
|
})
|
|
},
|
|
getCategory(){
|
|
this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getCategory') !!}",{uniacids:this.search.uniacid}).then(({data:{result,data,msg}})=>{
|
|
if(result == 1){
|
|
this.import_cat_level = data.cat_level;
|
|
this.importcategory = data.category;
|
|
}
|
|
// this.category = data.category || [];
|
|
})
|
|
},
|
|
getImportCategory(){
|
|
this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.getImportCategory') !!}",{uniacids:this.search.uniacid}).then(({data:{result,data,msg}})=>{
|
|
if(result == 1){
|
|
this.cat_level = data.cat_level;
|
|
this.category = data.category || [];
|
|
}
|
|
//this.category = data.category || [];
|
|
console.log(data);
|
|
})
|
|
},
|
|
importGoods(){
|
|
let goods_ids = this.listData.map(item=>{
|
|
if(item.change) return item.id;
|
|
})
|
|
if(!goods_ids || goods_ids.length<=0) return this.$message.error("请选择导入商品");
|
|
let loading = this.loading("正在导入中...");
|
|
this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.isImport') !!}",{uniacids:this.search.uniacid,goods_ids,import_category:this.importForm}).then(({data:{result,msg}})=>{
|
|
loading.close();
|
|
this.$message[result==1?"success":"error"](msg);
|
|
if(result==1) {
|
|
this.change = false;
|
|
setTimeout(this.getList,500);
|
|
}
|
|
})
|
|
},
|
|
importAllGoods(){
|
|
let loading = this.loading("正在导入中...");
|
|
let json = this.getjson();
|
|
json.page = this.currentPage;
|
|
let import_category = false;
|
|
for (let key in this.importForm) {
|
|
if(this.importForm[key]!==""){
|
|
if(!import_category)import_category = {};
|
|
import_category[key] = this.importForm[key];
|
|
}
|
|
}
|
|
this.$http.post("{!! yzWebFullUrl('plugin.goods-assistant.admin.ImportUniacid.screenImport') !!}",{search:json,import_category}).then(({data:{result,msg}})=>{
|
|
loading.close();
|
|
this.$message[result==1?"success":"error"](msg);
|
|
if(result==1) {
|
|
this.change = false;
|
|
setTimeout(this.getList,500);
|
|
}
|
|
})
|
|
},
|
|
searchList(){
|
|
this.currentPage = 1;
|
|
this.getList();
|
|
},
|
|
handleCurrentChange(){
|
|
this.getList();
|
|
},
|
|
setreal_sales(){
|
|
this.search.real_sales = this.search.real_sales == 1?"0":"1";
|
|
this.getList();
|
|
}
|
|
},
|
|
watch:{
|
|
"search.category.parentid"(value){
|
|
if(value === "") this.$set(this.search.category,"childid","");
|
|
},
|
|
"search.category.childid"(value){
|
|
if(value === "") this.$set(this.search.category,"thirdid","");
|
|
},
|
|
"importForm.parentid"(value){
|
|
if(value === "") this.$set(this.importForm,"childid","");
|
|
},
|
|
"importForm.childid"(value){
|
|
if(value === "") this.$set(this.importForm,"thirdid","");
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
@endsection('content') |