作者 何书鹏

轮播图

... ... @@ -3,6 +3,10 @@
namespace app\admin\controller;
use app\common\controller\Backend;
use Exception;
use think\Db;
use think\exception\PDOException;
use think\exception\ValidateException;
/**
* 轮播图管理
... ... @@ -22,6 +26,7 @@ class Banner extends Backend
{
parent::_initialize();
$this->model = new \app\admin\model\Banner;
$this->view->assign("typeList", $this->model->getTypeList());
}
... ... @@ -71,4 +76,113 @@ class Banner extends Backend
return $this->view->fetch();
}
/**
* 添加
*/
public function add()
{
if ($this->request->isPost()) {
$params = $this->request->post("row/a");
if ($params) {
$params = $this->preExcludeFields($params);
if ($this->dataLimit && $this->dataLimitFieldAutoFill) {
$params[$this->dataLimitField] = $this->auth->id;
}
if($params['type'] == 2 && !$params['goods_id']){
$this->error('请选择商品');
}
$result = false;
Db::startTrans();
try {
//是否采用模型验证
if ($this->modelValidate) {
$name = str_replace("\\model\\", "\\validate\\", get_class($this->model));
$validate = is_bool($this->modelValidate) ? ($this->modelSceneValidate ? $name . '.add' : $name) : $this->modelValidate;
$this->model->validateFailException(true)->validate($validate);
}
$result = $this->model->allowField(true)->save($params);
Db::commit();
} catch (ValidateException $e) {
Db::rollback();
$this->error($e->getMessage());
} catch (PDOException $e) {
Db::rollback();
$this->error($e->getMessage());
} catch (Exception $e) {
Db::rollback();
$this->error($e->getMessage());
}
if ($result !== false) {
$this->success();
} else {
$this->error(__('No rows were inserted'));
}
}
$this->error(__('Parameter %s can not be empty', ''));
}
return $this->view->fetch();
}
/**
* 编辑
*/
public function edit($ids = null)
{
$row = $this->model->get($ids);
if (!$row) {
$this->error(__('No Results were found'));
}
$adminIds = $this->getDataLimitAdminIds();
if (is_array($adminIds)) {
if (!in_array($row[$this->dataLimitField], $adminIds)) {
$this->error(__('You have no permission'));
}
}
if ($this->request->isPost()) {
$params = $this->request->post("row/a");
if ($params) {
$params = $this->preExcludeFields($params);
if($params['type'] == 2 && !$params['goods_id']){
$this->error('请选择商品');
}
$result = false;
Db::startTrans();
try {
//是否采用模型验证
if ($this->modelValidate) {
$name = str_replace("\\model\\", "\\validate\\", get_class($this->model));
$validate = is_bool($this->modelValidate) ? ($this->modelSceneValidate ? $name . '.edit' : $name) : $this->modelValidate;
$row->validateFailException(true)->validate($validate);
}
$result = $row->allowField(true)->save($params);
Db::commit();
} catch (ValidateException $e) {
Db::rollback();
$this->error($e->getMessage());
} catch (PDOException $e) {
Db::rollback();
$this->error($e->getMessage());
} catch (Exception $e) {
Db::rollback();
$this->error($e->getMessage());
}
if ($result !== false) {
$this->success();
} else {
$this->error(__('No rows were updated'));
}
}
$this->error(__('Parameter %s can not be empty', ''));
}
$goodsList[] = \app\admin\model\shopro\goods\Goods::field('id,title,image')->where('id', $row['goods_id'])->find();
$this->assignconfig('goodsList',$goodsList);
$this->view->assign("row", $row);
return $this->view->fetch();
}
}
... ...
... ... @@ -3,6 +3,10 @@
return [
'Id' => 'ID',
'Image' => '轮播图',
'Type 1' => '无跳转',
'Type 2' => '商品',
'Type 3' => '开通会员',
'Goods_id' => '商品',
'Weigh' => '权重',
'Createtime' => '创建时间',
'Updatetime' => '更新时间'
... ...
... ... @@ -25,7 +25,7 @@ class Banner extends Model
// 追加属性
protected $append = [
'type_text',
];
... ... @@ -37,11 +37,17 @@ class Banner extends Model
});
}
public function getTypeList()
{
return [1 => __('Type 1'),2 => __('Type 2'),3 => __('Type 3')];
}
public function getTypeTextAttr($value, $data)
{
$value = $value ? $value : (isset($data['type']) ? $data['type'] : '');
$list = $this->getTypeList();
return isset($list[$value]) ? $list[$value] : '';
}
... ...
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<style>
.goodsListTable tr {
display: flex;
border-bottom: 1px solid #eee;
}
.goodsListTable tr img {
width: 46px;
height: 46px;
}
.table>thead>tr>th {
border: none;
border-bottom: 1px solid #eee;
}
.goodsListTable td {
border: none;
padding: 15px 0 !important;
border: none !important;
}
[v-cloak] {
display: none
}
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group">
... ... @@ -15,6 +43,63 @@
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
<div class="col-xs-12 col-sm-8">
<div class="radio">
{foreach name="typeList" item="vo"}
<label for="row[type]-{$key}"><input id="row[type]-{$key}" name="row[type]" type="radio" value="{$key}" {in name="key" value="1"}checked{/in} /> {$vo}</label>
{/foreach}
</div>
</div>
</div>
<div class="form-group goods_id" style="display: none;">
<label class="control-label col-xs-12 col-sm-2">选择商品:</label>
<input type="hidden" id="goods_id" name="row[goods_id]" value="">
<div class="col-xs-12 col-sm-8 row-flex">
<div class="input-group-addon no-border no-padding">
<button type="button" class="btn-primary btn chooseGoods" data-multiple="false" data-type="banner">
选择
</button>
</div>
</div>
</div>
<div class="form-group goods_id" style="display: none;">
<label class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8 row-flex">
<div id="bannerData" style="width: 100%;">
<div v-show="goodsList.length>0" v-cloak style="width: 100%;">
<table class="table goodsListTable" cellpadding="0" cellspacing="0">
<thead style="background: #eee;
align-items: center;">
<tr>
<th style=" width: 45px;
padding-left: 10px;">商品</th>
<th style="width: 65%;padding:15px 10px !important;"></th>
<th>设置</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) in goodsList" :key="i">
<td>
<img :src="Fast.api.cdnurl(item.image)">
</td>
<td style="width: 65%;padding:15px 10px !important;">
<span>{{item.title}}</span>
</td>
<td>
<span class="status statusDelete" @click="selectDelete(i)">移除</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="0">
... ...
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<style>
.goodsListTable tr {
display: flex;
border-bottom: 1px solid #eee;
}
.goodsListTable tr img {
width: 46px;
height: 46px;
}
.table>thead>tr>th {
border: none;
border-bottom: 1px solid #eee;
}
.goodsListTable td {
border: none;
padding: 15px 0 !important;
border: none !important;
}
[v-cloak] {
display: none
}
</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group">
... ... @@ -15,6 +43,63 @@
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
<div class="col-xs-12 col-sm-8">
<div class="radio">
{foreach name="typeList" item="vo"}
<label for="row[type]-{$key}"><input id="row[type]-{$key}" name="row[type]" type="radio" value="{$key}" {in name="key" value="$row.type"}checked{/in} /> {$vo}</label>
{/foreach}
</div>
</div>
</div>
<div class="form-group goods_id" style="display: none;">
<label class="control-label col-xs-12 col-sm-2">选择商品:</label>
<input type="hidden" id="goods_id" name="row[goods_id]" value="">
<div class="col-xs-12 col-sm-8 row-flex">
<div class="input-group-addon no-border no-padding">
<button type="button" class="btn-primary btn chooseGoods" data-multiple="false" data-type="banner">
选择
</button>
</div>
</div>
</div>
<div class="form-group goods_id" style="display: none;">
<label class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8 row-flex">
<div id="bannerData" style="width: 100%;">
<div v-show="goodsList.length>0" v-cloak style="width: 100%;">
<table class="table goodsListTable" cellpadding="0" cellspacing="0">
<thead style="background: #eee;
align-items: center;">
<tr>
<th style=" width: 45px;
padding-left: 10px;">商品</th>
<th style="width: 65%;padding:15px 10px !important;"></th>
<th>设置</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) in goodsList" :key="i">
<td>
<img :src="Fast.api.cdnurl(item.image)">
</td>
<td style="width: 65%;padding:15px 10px !important;">
<span>{{item.title}}</span>
</td>
<td>
<span class="status statusDelete" @click="selectDelete(i)">移除</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}">
... ...
... ... @@ -37,14 +37,134 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
Table.api.bindevent(table);
},
add: function () {
var goods = new Vue({
el: "#bannerData",
data() {
return {
goodsList: Config.goodsList ? Config.goodsList : [],
}
},
mounted() {
},
methods: {
selectDelete(i) {
this.goodsList.splice(i, 1)
}
},
watch: {
goodsList: {
handler: function (newVal) {
let goods_ids = []
newVal.forEach(i => {
goods_ids.push(i.id)
})
goods_ids = goods_ids.join(",")
$("#goods_id").val(goods_ids)
},
deep: true
},
}
})
//添加商品
$(document).on("click", ".chooseGoods", function () {
var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
parent.Fast.api.open("shopro/goods/goods/select?multiple=" + multiple, "选择商品", {
callback: function (data) {
let obj = {
dispatch_type_text: data.data.dispatch_type_text,
id: data.data.id,
image: data.data.image,
opt: 0,
status_text: data.data.status_text,
title: data.data.title,
type_text: data.data.type_text,
}
goods.$data.goodsList = [];
goods.$data.goodsList.push(obj);
}
});
return false;
})
Controller.api.bindevent();
},
edit: function () {
var goods = new Vue({
el: "#bannerData",
data() {
return {
goodsList: Config.goodsList,
}
},
mounted() {
let goods_ids = []
this.goodsList.forEach(i => {
goods_ids.push(i.id)
})
goods_ids = goods_ids.join(",")
$("#goods_id").val(goods_ids)
$("#goodsList").val(JSON.stringify(this.goodsList))
},
methods: {
selectDelete(i) {
this.goodsList.splice(i, 1)
}
},
watch: {
goodsList: {
handler: function (newVal) {
let goods_ids = []
newVal.forEach(i => {
goods_ids.push(i.id)
})
goods_ids = goods_ids.join(",")
$("#goods_id").val(goods_ids)
$("#goodsList").val(JSON.stringify(newVal))
},
deep: true
},
}
})
$(document).on("click", ".chooseGoods", function () {
var type = $(this).data("type") ? $(this).data("type") : null
var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
parent.Fast.api.open("shopro/goods/goods/select?multiple=" + multiple + "&type=" + type, "选择商品", {
callback: function (data) {
let obj = {
dispatch_type_text: data.data.dispatch_type_text,
id: data.data.id,
image: data.data.image,
opt: 0,
status_text: data.data.status_text,
title: data.data.title,
type_text: data.data.type_text,
}
goods.$data.goodsList = [];
goods.$data.goodsList.push(obj)
}
});
return false;
})
Controller.api.bindevent();
setTimeout(function () {
$('input[name="row[type]"]').trigger("change");
}, 100);
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
// 链接类型
$('input[name="row[type]"]').change(function () {
var type = $('input[name="row[type]"]:checked').val();
console.log(type);
if(type == 1) {
$('.goods_id').hide();
} else if(type == 2) {
$('.goods_id').show();
} else {
$('.goods_id').hide();
}
})
}
}
};
... ...