378 行
16 KiB
HTML
可执行文件
378 行
16 KiB
HTML
可执行文件
<!doctype html>
|
||
<html>
|
||
<!--[1.8.20]-->
|
||
<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/common.js?v=1.0.3"></script>
|
||
<script src="/Public/Retail/common/js/select-goods-category.js?v=1.0.2"></script>
|
||
<script charset="utf-8" src="__PUBLIC__/js/system-gallery.js?v=1.0.3"></script>
|
||
<title>设置导航栏</title>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
|
||
html, body {
|
||
background-color: rgb(246, 248, 249);
|
||
font-size: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.backgroup_set {
|
||
padding: 50px 0px 50px 100px;
|
||
background-color: white;
|
||
}
|
||
|
||
.suggest {
|
||
font-size: 12px;
|
||
color: #666;
|
||
padding-top: 5px;
|
||
margin: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="backgroup_set">
|
||
<div id="app" v-cloak>
|
||
<el-form :model="data" label-width="120px" size="medium" id="form">
|
||
<el-form-item label="导航栏标题：">
|
||
<el-input v-model="data.title" placeholder="请输入导航栏标题" clearable style="width:300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="导航栏图片：">
|
||
<choose-one-file :file-url.sync="data.icon" :file-id.sync="data.icon_id"></choose-one-file>
|
||
<span class="suggest">建议尺寸：60 x 60，或等比例图片</span>
|
||
</el-form-item>
|
||
<el-form-item label="导航栏类型：">
|
||
<el-select name="navigation_type" v-model="data.navigation_type" clearable placeholder="请选择"
|
||
@change="closeType" style="width:300px;">
|
||
<el-option label="其他链接" value="1"></el-option>
|
||
<el-option label="商品分类" value="2"></el-option>
|
||
<el-option label="功能入口" value="3"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="其他链接地址：" v-if="data.navigation_type == 1">
|
||
<el-input v-model="data.other_url" placeholder="请输入其他网页链接地址" clearable style="width:300px;"></el-input>
|
||
<span class="suggest">需要到小程序后台添加域名白名单</span>
|
||
</el-form-item>
|
||
<el-form-item label="商品分类：" v-if="data.navigation_type == 2">
|
||
<select-goods-category :user-type="2"
|
||
:store-id="store_id"
|
||
:get-child="false"
|
||
:unit-data="data.unitClassData"
|
||
@change="chooseGoodsClass"></select-goods-category>
|
||
</el-form-item>
|
||
<el-form-item label="功能入口：" v-if="data.navigation_type == 3">
|
||
<el-select v-model="data.magic_cube_id" clearable placeholder="请选择" @change="closeMagicCube"
|
||
style="width:300px;">
|
||
<el-option v-for="(val,index) in magic_cube" :label="val.name" :value="val.id" :key="index"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="关联商品：" v-if="data.navigation_type == 3 && show_close_goods">
|
||
<el-input v-model="data.goods_name" placeholder="请选择商品" readonly style="width:200px;"></el-input>
|
||
<el-button type="primary" size="medium" @click="getGoodsList">选择商品</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="排序：">
|
||
<el-input v-model="data.rank" clearable style="width:300px;"></el-input>
|
||
<span class="suggest">用于导航列排序,按正序排列,默认为1</span>
|
||
</el-form-item>
|
||
<el-form-item label="是否启用：">
|
||
<el-switch v-model="data.status" active-value="1" inactive-value="2"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="saveSet">保存设置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 选择商品 -->
|
||
<el-dialog title="选择商品" :append-to-body="true" :visible.sync="show_goods_list"
|
||
custom-class="select-image-el-dialog" :top="'10px'">
|
||
<div style="border: 1px solid #e6e6e6;margin: 0 30px;height: calc(100vh - 180px);">
|
||
<el-table border :data="goods_list" style="width: 100%;border: none;" 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 @click="close_goods(scope.row)" plain>选择</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="page"
|
||
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
|
||
:page-size="limit"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total">
|
||
</el-pagination>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</body>
|
||
<script src="__PUBLIC__/js/tips.js"></script>
|
||
<script>
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
return {
|
||
store_id: localStorage.store_id,
|
||
data: {
|
||
id: '',
|
||
title: '', // 标题
|
||
icon: '', // 图片路径
|
||
icon_id: '', // 云储存对应id
|
||
navigation_type: '', // 导航栏类型
|
||
other_url: '', // 其他链接地址
|
||
goods_class_id: '', // 分类id
|
||
magic_cube_id: '', // 功能id
|
||
goods_id: '', // 商品id
|
||
goods_name: '', // 商品名称
|
||
rank: '1', // 排序
|
||
status: '1', // 状态 1. 开启 2. 关闭
|
||
unitClassData: [],
|
||
},
|
||
magic_cube: [], // 功能
|
||
show_close_goods: false, // 显示商品详情
|
||
show_goods_list: false, // 商品列表
|
||
goods_list: [], // 商品列表
|
||
page: 1, // 分页
|
||
limit: 10, // 每页数量
|
||
total: 0, // 数量
|
||
}
|
||
},
|
||
methods: {
|
||
/* 选择导航栏类型 */
|
||
closeType(type) {
|
||
if (type == 3) { // 获取功能
|
||
this.getMagicCube();
|
||
}
|
||
},
|
||
//选择商品分类
|
||
chooseGoodsClass(data) {
|
||
this.data.goods_class_id = data.category_id ? data.category_id : (data.category[2] ? data.category[2] : (data.category[1] ? data.category[1] : (data.category[0] ? data.category[0] : '')))
|
||
},
|
||
/* 获取功能 */
|
||
getMagicCube() {
|
||
var that = this;
|
||
$.ajax({
|
||
url: "{:U('get_magic_cube')}",
|
||
type: "post",
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
that.magic_cube = res.magic_cube;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
/* 选择功能 */
|
||
closeMagicCube() {
|
||
var magic_cube = this.magic_cube;
|
||
var item = this.data.magic_cube_id;
|
||
for (var i = 0; i < magic_cube.length; i++) {
|
||
if (magic_cube[i].id == item) {
|
||
this.show_close_goods = magic_cube[i].url == '/pages/details/details' ? true : false;
|
||
}
|
||
}
|
||
},
|
||
|
||
/* 选择商品 */
|
||
getGoodsList() {
|
||
var that = this;
|
||
$.post("{:U('getOnlineGoods')}", {
|
||
page: that.page,
|
||
limit: that.limit,
|
||
}, function (res) {
|
||
if (res.status == 1) {
|
||
that.total = res.count;
|
||
that.goods_list = res.data;
|
||
that.show_goods_list = true;
|
||
} else {
|
||
that.$message({
|
||
type: 'error',
|
||
message: res.msg,
|
||
duration: 1000
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
/* 切换每页数量 */
|
||
handleSizeChange(val) {
|
||
this.limit = val;
|
||
this.page = 1;
|
||
this.getGoodsList();
|
||
},
|
||
/* 切换页数 */
|
||
handleCurrentChange(val) {
|
||
this.page = val;
|
||
this.getGoodsList();
|
||
},
|
||
|
||
/* 选择商品 */
|
||
close_goods(data) {
|
||
this.data.goods_id = data.id;
|
||
this.data.goods_name = data.goods_name;
|
||
this.show_goods_list = false;
|
||
},
|
||
|
||
/* 保存设置 */
|
||
saveSet() {
|
||
var that = this;
|
||
var data = that.data;
|
||
if (!data.title) {
|
||
this.$message({
|
||
message: '请输入导航栏标题',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
if (!data.icon) {
|
||
this.$message({
|
||
message: '请选择图片',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
if (!data.navigation_type) {
|
||
this.$message({
|
||
message: '请选择导航栏类型',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
if (data.navigation_type == 1) {
|
||
if (!data.other_url) {
|
||
this.$message({
|
||
message: '请输入其他链接地址',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
} else if (data.navigation_type == 2) {
|
||
if (!data.goods_class_id) {
|
||
this.$message({
|
||
message: '请选择商品分类',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
} else if (data.navigation_type == 3) {
|
||
if (!data.magic_cube_id) {
|
||
this.$message({
|
||
message: '请选择功能入口',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
var magic_cube = that.magic_cube;
|
||
var item = data.magic_cube_id;
|
||
for (var i = 0; i < magic_cube.length; i++) {
|
||
if (magic_cube[i].id == item) {
|
||
if (magic_cube[i].url == '/pages/details/details' && !data.goods_id) {
|
||
this.$message({
|
||
message: '请选择关联的商品',
|
||
type: 'warning'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
that.$loading({
|
||
lock: true,
|
||
text: '保存中......',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
var form_data = new FormData(document.getElementById('form'));
|
||
form_data.append("data", JSON.stringify(data)); // 压入data数据
|
||
|
||
$.ajax({
|
||
url: "{:U('save_set_navigation')}",
|
||
type: "post",
|
||
data: form_data,
|
||
dataType: 'JSON',
|
||
cache: false, // 不缓存
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (res) {
|
||
that.$loading().close();
|
||
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
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
that.$loading().close();
|
||
}
|
||
})
|
||
|
||
},
|
||
},
|
||
|
||
created: function () {
|
||
var that = this;
|
||
var id = {$id};
|
||
if (id && id != '') {
|
||
that.$loading({
|
||
lock: true,
|
||
text: '拼命加载中......',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: "{:U('get_navigation')}",
|
||
type: "post",
|
||
data: {id: id},
|
||
success: function (res) {
|
||
that.$loading().close();
|
||
if (res.status == 1) {
|
||
that.data = res.data;
|
||
that.closeType(res.data.navigation_type);
|
||
if (res.mark == 1) {
|
||
that.show_close_goods = true;
|
||
}
|
||
} else {
|
||
that.$message({
|
||
type: 'error',
|
||
message: res.msg,
|
||
duration: 1000
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
});
|
||
|
||
</script>
|
||
</html> |