576 行
25 KiB
HTML
可执行文件
576 行
25 KiB
HTML
可执行文件
<!doctype html>
|
||
<html>
|
||
<!--[1.7.90]-->
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
|
||
<link rel="stylesheet" href="__PUBLIC__/css/system-gallery.css?v=1.0.3">
|
||
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
|
||
<script charset="utf-8" src="__PUBLIC__/js/system-gallery.js?v=1.0.3"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/Retail/common/js/select-goods-category.js"></script>
|
||
<title>添加魔方</title>
|
||
<style>
|
||
html, body {
|
||
background-color: rgb(246, 248, 249);
|
||
font-size: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.box {
|
||
border: 1px solid #eee;
|
||
border-radius: 5px;
|
||
background-color: white;
|
||
padding: 0 20px 20px;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.list > input {
|
||
margin: 10px 0;
|
||
width: 300px;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.list > select {
|
||
width: 322px;
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.small_img_box {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
}
|
||
|
||
.small_img_box-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.small_img_box-right > input, .small_img_box-right > div > input, .searchInput {
|
||
margin-bottom: 5px;
|
||
width: 300px;
|
||
border: 1px solid #ccc;
|
||
padding: 10px 15px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.small_img_box-right > select {
|
||
margin-bottom: 5px;
|
||
width: 322px;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.chooseGoods {
|
||
width: 70px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: #009688;
|
||
color: white;
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
input:disabled {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.list-con {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.el-button {
|
||
width: 100px;
|
||
}
|
||
|
||
.list-con > .el-button {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
#form {
|
||
max-width: 580px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="padding: 50px;background-color: white">
|
||
<div id="app" v-cloak>
|
||
<el-form label-width="150px" id="form">
|
||
<input type="hidden" name="id" value="{$magic['id']}">
|
||
<el-form-item label="模板图">
|
||
<img style="width: 320px;" src="__PUBLIC__/Retail/images/magic_model.png"
|
||
alt="模板图">
|
||
</el-form-item>
|
||
<el-form-item label="魔方标题" required>
|
||
<el-input type="text" name="magic_title" v-model="magic_title" auto-complete="off"
|
||
placeholder="魔方标题"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="魔方主图" required>
|
||
<div class="list" style="display: flex;align-items: center">
|
||
<label class="file_label" style="margin-right: 10px;display: block">
|
||
<input type="hidden" name="child_img_id" v-model="child_img_id"/>
|
||
<input type="file" @change="changeImg(-1)" ref="magic_icon" name="magic_icon" placeholder="选择图片"
|
||
accept="image/png,image/jpeg,image/gif"/>
|
||
<img :src="child_img" onerror="this.error=null;this.src='__PUBLIC__/paper/images/wx_add.png'">
|
||
<input type="hidden" name="child_img" v-model="child_img">
|
||
</label>
|
||
<el-button plain size="small" @click="selectImage('magic_icon',-1)">图库图片
|
||
<el-tooltip class="item" effect="dark" content="点击图片选择本地图片，点击按钮选择图库图片" placement="top-start">
|
||
<i class="el-icon-question"></i>
|
||
</el-tooltip>
|
||
</el-button>
|
||
<span style="font-size: 12px;color: #666;padding-left: 10px">建议尺寸：360X178，或等比例图片</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="主图链接" required>
|
||
<input type="hidden" name="type_url" v-model="type_url">
|
||
<el-select v-model="type_url" size="small" placeholder="请选择链接" filterable
|
||
@change="selectUrlType($event,type_url)">
|
||
<el-option
|
||
v-for="item in classList"
|
||
:value-key="item.id"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-if="type_url==3" label="主图商品" required>
|
||
<div class="list" style="align-items: center">
|
||
<el-input readonly type="text" size="small" v-model="goods_name"></el-input>
|
||
<el-button type="primary" size="small" @click="chooseGoods(-1)">选择商品</el-button>
|
||
<input type="hidden" name="link_id" v-model="link_id">
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="是否添加小图" required>
|
||
<el-radio-group v-model="magic_type">
|
||
<el-radio name="magic_type" :label="1">添加</el-radio>
|
||
<el-radio name="magic_type" :label="2">不添加</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item v-if="magic_type==1" label="魔方小图" required>
|
||
<span style="font-size: 12px;color: #666;padding-left: 30px">小图建议尺寸：117X124，或等比例图片</span>
|
||
<div class="small_img_box" v-for="(item,index) in smallMagic">
|
||
<div class="list-con">
|
||
<label class="file_label" style="margin-right: 0;display: block">
|
||
<input type="hidden" :name="'child_img_id_'+(index+1)" v-model="item.child_img_id"/>
|
||
<input type="file" @change="changeImg(index)" :name="'magic_icon_'+(index+1)"
|
||
:ref="'magic_icon'+(index+1)"
|
||
placeholder="选择图片"
|
||
accept="image/png,image/jpeg,image/gif"/>
|
||
<img :src="item.child_img"
|
||
onerror="this.error=null;this.src='__PUBLIC__/paper/images/wx_add.png'">
|
||
<input type="hidden" :name="'child_img_'+(index+1)" v-model="item.child_img">
|
||
</label>
|
||
<el-button size="small" @click="selectImage('magic_icon_'+(index+1),index)">图库图片
|
||
<el-tooltip class="item" effect="dark" content="点击图片选择本地图片，点击按钮选择图库图片" placement="top-start">
|
||
<i class="el-icon-question"></i>
|
||
</el-tooltip>
|
||
</el-button>
|
||
</div>
|
||
<div class="small_img_box-right">
|
||
<input type="hidden" :name="'type_url_'+(index+1)" v-model="item.type_url">
|
||
<el-select v-model="item.type_url" size="small" placeholder="请选择链接"
|
||
filterable
|
||
@change="selectSmallUrlType($event,index)">
|
||
<el-option
|
||
v-for="item in classList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
<div v-if="item.type_url==3" class="list" style="align-items: center">
|
||
<el-input type="text" readonly size="small" v-model="item.goods_name"></el-input>
|
||
<el-button type="primary" size="small" @click="chooseGoods(index)">选择商品</el-button>
|
||
<input type="hidden" :name="'link_id_'+(index+1)" v-model="item.link_id">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="center" style="margin-top: 50px">
|
||
<el-button type="primary" size="medium" @click="save">创建</el-button>
|
||
</div>
|
||
<el-dialog title="选择商品" :append-to-body="true" :visible.sync="showSelectGoods" custom-class="select-image-el-dialog" :top="'10px'">
|
||
<div style="margin-bottom: 10px">
|
||
<el-input placeholder="品名/货号/条形码"
|
||
style="width: 200px;margin-left: 30px"
|
||
type="text"
|
||
size="small"
|
||
v-model="searchText"
|
||
clearable
|
||
@keydown.enter.exact.native.prevent="getGoodsList"
|
||
></el-input>
|
||
<select-goods-category :user-type="2"
|
||
:store-id="store_id"
|
||
:category-id1.sync="goodsClassId1"
|
||
:category-id2.sync="goodsClassId2"
|
||
:category-id3.sync="goodsClassId3"></select-goods-category>
|
||
<el-button type="primary" style="width: auto" plain @click="currentPage=1;getGoodsList()" size="small">搜索</el-button>
|
||
</div>
|
||
<div style="margin: 0 30px;height: calc(100vh - 180px);">
|
||
<el-table border size="small" :data="goodsList" style="width: 100%;" height="calc(100vh - 180px)">
|
||
<el-table-column type="index" label="序号" width="50"></el-table-column>
|
||
<el-table-column prop="goods_name" label="商品名称" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="good_image" label="轮播图" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
<img style="max-height: 70px" :src="scope.row.good_image">
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="goods_num" label="库存" show-overflow-tooltip></el-table-column>
|
||
<el-table-column fixed="right" label="操作" width="130" style="border-right: none;">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="primary" @click="chooseTheGoods(scope.$index)" plain>选择</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
|
||
:page-size="100"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="len">
|
||
</el-pagination>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog title="选择图片" :modal-append-to-body="false" :visible.sync="showSelectImage" custom-class="select-image-el-dialog" :top="'10px'">
|
||
<template-select-image :can-select-num="1" @selectfile="selectFile"></template-select-image>
|
||
</el-dialog>
|
||
</div>
|
||
</body>
|
||
<script src="__PUBLIC__/js/tips.js"></script>
|
||
<script src="__PUBLIC__/js/common.js"></script>
|
||
<script>
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
return {
|
||
store_id: localStorage.store_id,
|
||
showSelectImage: false,
|
||
showSelectGoods: false,
|
||
actFileName: '',
|
||
classList: {$classList},
|
||
magic_type: "{$magic}" && "{$magic['magic_type']}" == 2 ? 2 : 1,
|
||
magic_title: "{$magic['title']}",
|
||
type_url: "{$magic['mc_id']}",
|
||
goods_name: `{$magic['goods_name']}`,
|
||
link_id: "{$magic['link_id']}",
|
||
child_img: "{$magic['child_img']}",
|
||
child_img_id: "{$magic['child_img_id']}",
|
||
smallMagic: [
|
||
{
|
||
type_url: "{$magic['mc_id_1']}",
|
||
goods_name: `{$magic['goods_name_1']}`,
|
||
link_id: "{$magic['link_id_1']}",
|
||
child_img: "{$magic['child_img_1']}",
|
||
child_img_id: "{$magic['child_img_id_1']}"
|
||
},
|
||
{
|
||
type_url: "{$magic['mc_id_2']}",
|
||
goods_name: `{$magic['goods_name_2']}`,
|
||
link_id: "{$magic['link_id_2']}",
|
||
child_img: "{$magic['child_img_2']}",
|
||
child_img_id: "{$magic['child_img_id_2']}"
|
||
},
|
||
{
|
||
type_url: "{$magic['mc_id_3']}",
|
||
goods_name: `{$magic['goods_name_3']}`,
|
||
link_id: "{$magic['link_id_3']}",
|
||
child_img: "{$magic['child_img_3']}",
|
||
child_img_id: "{$magic['child_img_id_3']}"
|
||
}
|
||
],
|
||
goodsList: [],
|
||
searchKey: '',
|
||
chooseGoodsIndex: -1,
|
||
len: 0,
|
||
currentPage: 1,
|
||
currentLimit: 10,
|
||
searchText:'', //商品名称或者货号
|
||
goodsClassId1: '',
|
||
goodsClassId2: '',
|
||
goodsClassId3: '',
|
||
}
|
||
},
|
||
methods: {
|
||
selectUrlType: function (val, val1) {
|
||
},
|
||
selectSmallUrlType: function (val, index) {
|
||
var smallMagic = JSON.parse(JSON.stringify(this.smallMagic));
|
||
this.smallMagic = [];
|
||
this.smallMagic = smallMagic;
|
||
},
|
||
chooseGoods: function (index) {
|
||
console.log(index);
|
||
this.chooseGoodsIndex = index;
|
||
this.showSelectGoods = true;
|
||
if (!this.goodsList.length) {
|
||
this.getGoodsList();
|
||
}
|
||
},
|
||
chooseTheGoods: function (index) {
|
||
console.log(index);
|
||
if (this.chooseGoodsIndex == -1) {
|
||
this.goods_name = this.goodsList[index].goods_name;
|
||
this.link_id = this.goodsList[index].id;
|
||
if (this.goodsList[index].good_image) {
|
||
this.child_img = this.goodsList[index].good_image;
|
||
}
|
||
if (this.goodsList[index].goods_image_id) {
|
||
this.child_img_id = this.goodsList[index].goods_image_id;
|
||
}
|
||
} else {
|
||
var smallMagic = JSON.parse(JSON.stringify(this.smallMagic));
|
||
smallMagic[this.chooseGoodsIndex].goods_name = this.goodsList[index].goods_name;
|
||
smallMagic[this.chooseGoodsIndex].link_id = this.goodsList[index].id;
|
||
if (this.goodsList[index].good_image) {
|
||
smallMagic[this.chooseGoodsIndex].child_img = this.goodsList[index].good_image;
|
||
}
|
||
if (this.goodsList[index].goods_img_id) {
|
||
smallMagic[this.chooseGoodsIndex].child_img_id = this.goodsList[index].goods_img_id;
|
||
}
|
||
this.smallMagic = [];
|
||
this.smallMagic = smallMagic;
|
||
this.$nextTick(function () {
|
||
for (var num =0; num<this.smallMagic.length; num++) {
|
||
var number=num+1;
|
||
$("input[name='child_img_id_"+number+"']").val(this.smallMagic[num]['child_img_id']);
|
||
}
|
||
}.bind(this))
|
||
|
||
|
||
|
||
}
|
||
this.showSelectGoods = false;
|
||
},
|
||
handleSizeChange(val) {
|
||
this.currentLimit = val;//切换每页数量
|
||
this.currentPage = 1;
|
||
this.getGoodsList();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.currentPage = val;
|
||
this.getGoodsList();//切换页数
|
||
},
|
||
getGoodsList: function () {
|
||
var that = this;
|
||
that.$loading({
|
||
lock: true,
|
||
text: '数据获取中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.post("{:U('getOnlineGoods')}", {
|
||
page: that.currentPage,
|
||
limit: that.currentLimit,
|
||
keyword: that.searchText,
|
||
person1: that.goodsClassId1,
|
||
person2: that.goodsClassId2,
|
||
person3: that.goodsClassId3
|
||
}, function (res) {
|
||
that.$loading().close();
|
||
if (res.status == 1) {
|
||
that.len = res.count;
|
||
that.goodsList = [];
|
||
that.goodsList = res.data;
|
||
} else {
|
||
that.$message({
|
||
type: 'error',
|
||
message: res.msg,
|
||
duration: 1000
|
||
});
|
||
}
|
||
})
|
||
},
|
||
selectFile: function (item) {
|
||
console.log(item);
|
||
this.showSelectImage = false;
|
||
if (item.length) {
|
||
if (this.chooseGoodsIndex == -1) {
|
||
$("input[name='" + this.actFileName + "']").val('');
|
||
this.child_img_id = item[0].id;
|
||
this.child_img = item[0].path;
|
||
} else {
|
||
var smallMagic = JSON.parse(JSON.stringify(this.smallMagic));
|
||
smallMagic[this.chooseGoodsIndex].child_img_id = item[0].id;
|
||
smallMagic[this.chooseGoodsIndex].child_img = item[0].path;
|
||
$("input[name='" + this.actFileName + "']").val('');
|
||
this.smallMagic = [];
|
||
this.smallMagic = smallMagic;
|
||
}
|
||
}
|
||
},
|
||
selectImage: function (actName, index) {
|
||
this.actFileName = actName;
|
||
this.showSelectImage = true;
|
||
this.chooseGoodsIndex = index;
|
||
},
|
||
save: function () {
|
||
if (!this.magic_title) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请输入魔方标题',
|
||
duration: 1000
|
||
});
|
||
return;
|
||
}
|
||
if (!$("input[name='magic_icon']").val() && !this.child_img_id && !this.child_img) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请上传魔方主图',
|
||
duration: 1000
|
||
});
|
||
return;
|
||
}
|
||
if (!this.type_url) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请选择魔方路径',
|
||
duration: 1000
|
||
});
|
||
return;
|
||
} else if (this.type_url == 3 && !this.link_id) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请选择主图的商品',
|
||
duration: 1000
|
||
});
|
||
return;
|
||
}
|
||
if (this.magic_type == 1) {
|
||
//添加小图
|
||
for (var i = 0; i < 3; i++) {
|
||
if (!$("input[name='magic_icon" + (i + 1) + "']").val() && !this.smallMagic[i].child_img_id && !this.smallMagic[i].child_img) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请上传魔方小图' + (i + 1),
|
||
duration: 1000
|
||
});
|
||
return;
|
||
}
|
||
if (!this.smallMagic[i].type_url) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请选择魔方小图' + (i + 1) + '路径',
|
||
duration: 1000
|
||
});
|
||
return;
|
||
} else if (this.smallMagic[i].type_url == 3 && !this.smallMagic[i].link_id) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请选择小图' + (i + 1) + '的商品',
|
||
duration: 1000
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
var that = this;
|
||
var fd = new FormData(document.getElementById('form'));
|
||
that.$loading({
|
||
lock: true,
|
||
text: '提交中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: "{:U('doAddMagic')}",
|
||
type: "POST",
|
||
data: fd,
|
||
dataType: 'JSON',
|
||
cache: false, // 不缓存
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
type: 'success',
|
||
message: res.msg,
|
||
duration: 1000,
|
||
onClose: function () {
|
||
var index = parent.layer.getFrameIndex(window.name);
|
||
parent.layer.close(index);
|
||
}
|
||
});
|
||
} else {
|
||
that.$message({
|
||
type: 'error',
|
||
message: res.msg,
|
||
duration: 1000
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
changeImg: function (index) {
|
||
var that = this;
|
||
if (window.event.target.files.length) {
|
||
var imgObj = window.event.target.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
if (index == -1) {
|
||
that.child_img_id = 0;
|
||
that.child_img = this.result;
|
||
} else {
|
||
var smallMagic = JSON.parse(JSON.stringify(that.smallMagic));
|
||
smallMagic[index].child_img_id = 0;
|
||
smallMagic[index].child_img = this.result;
|
||
that.smallMagic = [];
|
||
that.smallMagic = smallMagic;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
},
|
||
mounted: function () {
|
||
},
|
||
created: function () {
|
||
|
||
}
|
||
});
|
||
|
||
</script>
|
||
</html> |