初始上传
This commit is contained in:
28
addon/fenxiao/component/controller/FenxiaoGoodsList.php
Executable file
28
addon/fenxiao/component/controller/FenxiaoGoodsList.php
Executable file
@@ -0,0 +1,28 @@
|
||||
<?php
|
||||
|
||||
namespace addon\fenxiao\component\controller;
|
||||
|
||||
use app\component\controller\BaseDiyView;
|
||||
use app\model\goods\GoodsCategory;
|
||||
|
||||
/**
|
||||
* 分销商品·组件
|
||||
*
|
||||
*/
|
||||
class FenxiaoGoodsList extends BaseDiyView
|
||||
{
|
||||
|
||||
/**
|
||||
* 设计界面
|
||||
*/
|
||||
public function design()
|
||||
{
|
||||
$site_id = request()->siteid();
|
||||
$goods_category_model = new GoodsCategory();
|
||||
$category_condition[] = [ 'site_id', '=', $site_id ];
|
||||
$category_list = $goods_category_model->getCategoryTree($category_condition)[ 'data' ];
|
||||
$this->assign('category_list', $category_list);
|
||||
|
||||
return $this->fetch('goods_list/design.html');
|
||||
}
|
||||
}
|
||||
38
addon/fenxiao/component/view/goods_list/css/design.css
Executable file
38
addon/fenxiao/component/view/goods_list/css/design.css
Executable file
@@ -0,0 +1,38 @@
|
||||
/* 选择商品分类弹出框 */
|
||||
.goods-category-layer {display: none;}
|
||||
.layui-layer-content .category-wrap .category-item, .layui-layer-content .category-head {height: 30px;line-height: 30px;border: 1px solid #ededed;border-radius: 5px;padding: 0 15px;margin: 0 15px 10px 0;box-sizing: border-box;color: #666;font-size: 12px;}
|
||||
.layui-layer-content .category-head {background: #eee;height: 40px;line-height: 40px;}
|
||||
.layui-layer-content .category-wrap {overflow-y: scroll;height: calc(100% - 45px);}
|
||||
.layui-layer-content .category-wrap::-webkit-scrollbar {display: none;}
|
||||
.layui-layer-content .category-wrap .category-item {cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
|
||||
|
||||
/* 样式：单列（一行一列） */
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item{overflow: hidden;display: flex;margin-bottom: 10px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item:last-of-type{margin-bottom: 0;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .goods-img{width: 130px;height: 130px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .goods-img img{max-width: 100%;max-height: 100%;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .info-wrap{width: calc(100% - 130px);padding: 10px;flex: 1;display: flex;flex-direction: column;box-sizing: border-box;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .info-wrap .pro-info{display: flex;justify-content: space-between;align-items: center;margin-top:auto;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .info-wrap .pro-info .sale{margin-top: 5px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .info-wrap .pro-info .discount-price{display: flex;justify-content: space-between;flex-direction: column;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .info-wrap .pro-info .discount-price .price-wrap{margin-bottom: 5px;font-weight: bold;font-size: 0;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item .info-wrap .pro-info .delete-price{text-decoration: line-through;flex: 1;line-height: 14px;font-size: 12px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of1 .goods-item button{height: 25px;line-height: 25px;}
|
||||
|
||||
/* 样式：两列（一行两列） */
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2{display: flex;flex-wrap: wrap;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item{overflow: hidden;margin-right: 10px;margin-top: 10px;width: calc(50% - 5px);display: flex;flex-direction: column;box-sizing: border-box;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item:nth-child(2n){margin-right: 0;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item:nth-of-type(1), .component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item:nth-of-type(2){margin-top: 0;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item .goods-img{width: calc(100% + 2px);height: 160px;text-align: center;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item .goods-img img{width: 100%;height: 100%;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item .info-wrap .goods-name{margin-bottom: 5px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item .info-wrap{display: flex;flex-direction: column;flex: 1;padding: 10px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item .info-wrap .pro-info{margin-top: auto;display: flex;justify-content: space-between;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item .info-wrap .pro-info .discount-price .price-wrap{margin-bottom: 5px;font-size: 0;font-weight: bold;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item .info-wrap .pro-info .discount-price .price-wrap .unit{font-size: 12px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item .info-wrap .pro-info .discount-price .price-wrap .price{font-size: 16px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item .info-wrap .pro-info .delete-price{text-decoration: line-through;flex: 1;line-height: 14px;font-size: 12px;}
|
||||
.component-fenxiao-goods .fenxiao-list.row1-of2 .goods-item button{height: 25px;line-height: 25px;}
|
||||
363
addon/fenxiao/component/view/goods_list/design.html
Executable file
363
addon/fenxiao/component/view/goods_list/design.html
Executable file
@@ -0,0 +1,363 @@
|
||||
<nc-component :data="data[index]" class="component-fenxiao-goods">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
|
||||
<div :class="['fenxiao-list',nc.template,nc.style]" :style="{ backgroundColor: nc.componentBgColor,
|
||||
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0)
|
||||
}">
|
||||
<template v-if="nc.tempData.previewList && Object.keys(nc.tempData.previewList).length">
|
||||
<div class="goods-item" v-for="(item, previewIndex) in nc.tempData.previewList" :key="previewIndex"
|
||||
:style="{
|
||||
borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
|
||||
borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
|
||||
borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
|
||||
borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
|
||||
backgroundColor: nc.elementBgColor,
|
||||
boxShadow: nc.ornament.type == 'shadow' ? ('0 0 5px ' + nc.ornament.color) : '',
|
||||
border: nc.ornament.type == 'stroke' ? '1px solid ' + nc.ornament.color : ''}">
|
||||
<div class="goods-img" :style="{ borderRadius: nc.imgAroundRadius + 'px' }">
|
||||
<img :style="{ borderRadius: nc.imgAroundRadius + 'px' }" :src="changeImgUrl('public/static/img/default_img/square.png')"/>
|
||||
</div>
|
||||
|
||||
<div class="info-wrap" v-if="nc.goodsNameStyle.control || nc.priceStyle.mainControl || nc.priceStyle.lineControl || nc.btnStyle.control">
|
||||
|
||||
<div class="goods-name" v-if="nc.goodsNameStyle.control" :style="{ color : nc.goodsNameStyle.color,fontWeight : nc.goodsNameStyle.fontWeight ? 'bold' : '' }" :class="[{'using-hidden' : nc.nameLineMode == 'single'},{'multi-hidden' : nc.nameLineMode == 'multiple'}]">{{ item.goods_name }}</div>
|
||||
|
||||
<div class="pro-info">
|
||||
<div class="discount-price">
|
||||
<div class="price-wrap" v-if="nc.priceStyle.mainControl">
|
||||
<span class="unit" :style="{ color : nc.priceStyle.mainColor }">赚 ¥</span>
|
||||
<span class="price" :style="{ color : nc.priceStyle.mainColor }">{{item.fenxiao_price}}</span>
|
||||
</div>
|
||||
<div class="delete-price" v-if="nc.priceStyle.lineControl" :style="{ color : nc.priceStyle.lineColor }">¥{{item.discount_price}}</div>
|
||||
</div>
|
||||
|
||||
<button v-if="nc.btnStyle.control" class="layui-btn" :style="{ background : 'linear-gradient(to right,' + nc.btnStyle.bgColorStart + ',' + nc.btnStyle.bgColorEnd + ')', color : nc.btnStyle.textColor,borderRadius : nc.btnStyle.aroundRadius + 'px' }">{{ nc.btnStyle.text }}</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<fenxiao-goods-list-sources></fenxiao-goods-list-sources>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>商品风格</h3>
|
||||
<div class="layui-form-item list-style" v-if="nc.tempData.templateList">
|
||||
<label class="layui-form-label sm">风格</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="source">{{ nc.tempData.templateList[nc.template].text }}</div>
|
||||
<div class="template-selected">
|
||||
<div v-for="(item,templateKey) in nc.tempData.templateList" :key="templateKey" class="source-item" :title="item.text"
|
||||
@click="nc.tempData.methods.selectTemplate(templateKey)"
|
||||
:class="[(nc.template == templateKey) ? 'text-color border-color' : '' ]">
|
||||
<i class='iconfont' :class='item.icon'></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 暂时只有一种样式，先隐藏 -->
|
||||
<!-- <div class="style-selected">-->
|
||||
<!-- <div v-for="(item,styleIndex) in nc.tempData.templateList[nc.template].styleList" :key="styleIndex" @click="nc.tempData.methods.selectTemplate('',item)" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.style==item.value) }">-->
|
||||
<!-- <i class="layui-anim layui-icon">{{ nc.style == item.value ? "" : "" }}</i>-->
|
||||
<!-- <div>{{item.text}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>商品数据</h3>
|
||||
<div class="layui-form-item" v-if="nc.tempData.goodsSources">
|
||||
<label class="layui-form-label sm">数据来源</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="source-selected">
|
||||
<div class="source">{{ nc.tempData.goodsSources[nc.sources].text }}</div>
|
||||
<div v-for="(item,sourcesKey) in nc.tempData.goodsSources" :key="sourcesKey" class="source-item" :title="item.text" @click="nc.sources=sourcesKey" :class="{ 'text-color border-color' : (nc.sources == sourcesKey) }">
|
||||
<i class='iconfont' :class='item.icon'></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" v-if="nc.sources == 'category'">
|
||||
<label class="layui-form-label sm">商品分类</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="selected-style" @click="nc.tempData.methods.selectCategory()">
|
||||
<span :class="{ 'text-color' : nc.categoryId > 0 }">{{ nc.categoryName }}</span>
|
||||
<i class="iconfont iconyoujiantou"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" v-if="nc.sources == 'diy'">
|
||||
<label class="layui-form-label sm">手动选择</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="selected-style" @click="nc.tempData.methods.addGoods()">
|
||||
<span v-if="nc.goodsId.length == 0">请选择</span>
|
||||
<span v-if="nc.goodsId.length > 0" class="text-color">已选{{ nc.goodsId.length }}个</span>
|
||||
<i class="iconfont iconyoujiantou"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slide :data="{ field : 'count', label: '商品数量', min:1, max: 50}" v-if="nc.sources != 'diy'"></slide>
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title" v-show="nc.btnStyle.support">
|
||||
<h3>购买按钮</h3>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">是否显示</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.btnStyle.control = !nc.btnStyle.control" :class="{ 'layui-form-checked' : nc.btnStyle.control }">
|
||||
<span>{{ nc.btnStyle.control ? '显示' : '隐藏' }}</span>
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" v-if="nc.btnStyle.control">
|
||||
<label class="layui-form-label sm">文字</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" v-model="nc.btnStyle.text" maxlength="6" placeholder="请输入按钮文字" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>显示内容</h3>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">商品名称</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.goodsNameStyle.control = !nc.goodsNameStyle.control" :class="{ 'layui-form-checked' : nc.goodsNameStyle.control }">
|
||||
<span>{{ nc.goodsNameStyle.control ? '显示' : '隐藏' }}</span>
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">佣金</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.priceStyle.mainControl = !nc.priceStyle.mainControl" :class="{ 'layui-form-checked' : nc.priceStyle.mainControl }">
|
||||
<span>{{ nc.priceStyle.mainControl ? '显示' : '隐藏' }}</span>
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" v-show="nc.priceStyle.lineSupport">
|
||||
<label class="layui-form-label sm">划线价</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.priceStyle.lineControl = !nc.priceStyle.lineControl" :class="{ 'layui-form-checked' : nc.priceStyle.lineControl }">
|
||||
<span>{{ nc.priceStyle.lineControl ? '显示' : '隐藏' }}</span>
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 商品分类选择弹框 -->
|
||||
<script type="text/html" class="goods-category-layer">
|
||||
<div class="goods-category-list layui-form">
|
||||
<table class="layui-table pithy-table">
|
||||
<colgroup>
|
||||
<col width="5%">
|
||||
<col width="3%">
|
||||
<col width="37%">
|
||||
<col width="25%">
|
||||
<col width="30%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th>分类名称</th>
|
||||
<th>简称</th>
|
||||
<th>图片</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{if condition="$category_list"}
|
||||
{foreach name="$category_list" item="vo"}
|
||||
<tr class='category-line'>
|
||||
<td><input type="checkbox" name="category_select_id" data-category_select_id = "{$vo['category_id']}" lay-skin="primary" value='{:json_encode($vo)}' lay-filter="category_select_id" {if !empty($link_array.category_id) && $link_array.category_id == $v['category_id']}checked{/if}></td>
|
||||
<td>
|
||||
{notempty name="$vo['child_list']"}
|
||||
<span class="switch text-color js-switch" data-category-id="{$vo['category_id']}" data-level="{$vo['level']}" data-open="0">+</span>
|
||||
{/notempty}
|
||||
</td>
|
||||
<td class="category-name">{$vo['category_name']}</td>
|
||||
<td>{$vo['short_name']}</td>
|
||||
<td>
|
||||
{notempty name="$vo['image']"}
|
||||
<div class="img-box">
|
||||
<img layer-src src="{:img($vo['image'])}"/>
|
||||
</div>
|
||||
{/notempty}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{notempty name="$vo['child_list']"}
|
||||
{foreach name="$vo['child_list']" item="second"}
|
||||
<tr class='category-line' data-category-id-1="{$second['category_id_1']}" style="display:none;">
|
||||
<td><input type="checkbox" name="category_select_id" lay-skin="primary"data-category_select_id = "{$second['category_id']}" value='{:json_encode($second)}' lay-filter="category_select_id"{if !empty($link_array.category_id) && $link_array.category_id == $second['category_id']}checked{/if}></td>
|
||||
<td></td>
|
||||
<td style="padding-left: 20px;">
|
||||
<span class="switch text-color js-switch" data-category-id="{$second['category_id']}" data-level="{$second['level']}" data-open="1" style="padding-right: 20px;">-</span>
|
||||
<span class="category-name">{$second['category_name']}</span>
|
||||
</td>
|
||||
<td>{$second['short_name']}</td>
|
||||
<td>
|
||||
{notempty name="$second['image']"}
|
||||
<img layer-src src="{:img($second['image'])}"/>
|
||||
{/notempty}
|
||||
</td>
|
||||
</tr>
|
||||
{notempty name="$second['child_list']"}
|
||||
{foreach name="$second['child_list']" item="third"}
|
||||
<tr class='category-line'data-category-id-1="{$third['category_id_1']}" data-category-id-2="{$third['category_id_2']}" style="display:none;">
|
||||
<td><input type="checkbox" name="category_select_id" lay-skin="primary" value='{:json_encode($third)}' data-category_select_id = '{$third['category_id']}'lay-filter="category_select_id"{if !empty($link_array.category_id) && $link_array.category_id == $third['category_id']}checked{/if}></td>
|
||||
<td></td>
|
||||
<td style="padding-left: 80px;">
|
||||
<span class="category-name">{$third['category_name']}</span>
|
||||
</td>
|
||||
<td>{$third['short_name']}</td>
|
||||
<td>
|
||||
{notempty name="$third['image']"}
|
||||
<img layer-src src="{:img($third['image'])}"/>
|
||||
{/notempty}
|
||||
</td>
|
||||
</tr>
|
||||
{/foreach}
|
||||
{/notempty}
|
||||
{/foreach}
|
||||
{/notempty}
|
||||
{/foreach}
|
||||
{else/}
|
||||
<tr>
|
||||
<td colspan="9" style="text-align: center">无数据</td>
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</script>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title">
|
||||
<h3>商品样式</h3>
|
||||
|
||||
<div class="layui-form-item tag-wrap">
|
||||
<label class="layui-form-label sm">边框</label>
|
||||
<div class="layui-input-block">
|
||||
<div v-for="(item,ornamentIndex) in nc.tempData.ornamentList" :key="ornamentIndex" @click="nc.ornament.type=item.type" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.ornament.type==item.type) }">
|
||||
<i class="layui-anim layui-icon">{{ nc.ornament.type == item.type ? "" : "" }}</i>
|
||||
<div>{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<color v-if="nc.ornament.type != 'default'" :data="{ field : 'color', 'label' : '边框颜色', parent : 'ornament', defaultColor : '#EDEDED' }"></color>
|
||||
|
||||
<slide :data="{ field : 'imgAroundRadius', label: '图片圆角', min:0, max: 50 }"></slide>
|
||||
|
||||
<div class="layui-form-item" v-show="nc.goodsNameStyle.control">
|
||||
<label class="layui-form-label sm">商品名称</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.goodsNameStyle.fontWeight = !nc.goodsNameStyle.fontWeight" :class="{ 'layui-form-checked' : nc.goodsNameStyle.fontWeight }">
|
||||
<span>加粗</span>
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
<div v-for="(item,nameLineIndex) in nc.tempData.nameLineModeList" :key="nameLineIndex" @click="nc.nameLineMode=item.value" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.nameLineMode==item.value) }">
|
||||
<i class="layui-anim layui-icon">{{ nc.nameLineMode == item.value ? "" : "" }}</i>
|
||||
<div>{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<color :data="{ field : 'elementBgColor', 'label' : '商品背景' }"></color>
|
||||
|
||||
<slide v-show="nc.elementAngle == 'round'" :data="{ field : 'topElementAroundRadius', label : '上圆角', max : 50 }"></slide>
|
||||
<slide v-show="nc.elementAngle == 'round'" :data="{ field : 'bottomElementAroundRadius', label : '下圆角', max : 50 }"></slide>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">色调</label>
|
||||
<div class="layui-input-block">
|
||||
<div @click="nc.theme='default'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.theme == 'default') }">
|
||||
<i class="layui-anim layui-icon">{{ nc.theme == 'default' ? "" : "" }}</i>
|
||||
<div>跟随主题风格</div>
|
||||
</div>
|
||||
<div @click="nc.theme='diy'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.theme == 'diy') }">
|
||||
<i class="layui-anim layui-icon">{{ nc.theme == 'diy' ? "" : "" }}</i>
|
||||
<div>自定义</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="nc.theme == 'diy'">
|
||||
<color :data="{ field : 'color', 'label' : '商品名称', parent : 'goodsNameStyle', defaultColor : '#303133' }"></color>
|
||||
<color :data="{ field : 'mainColor', 'label' : '佣金', parent : 'priceStyle', defaultColor : '#FF6A00' }"></color>
|
||||
<div v-show="nc.priceStyle.lineSupport">
|
||||
<color :data="{ field : 'lineColor', 'label' : '划线价', parent : 'priceStyle', defaultColor : '#999CA7' }"></color>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title" v-show="nc.btnStyle.support && nc.btnStyle.control">
|
||||
<h3>购买按钮</h3>
|
||||
|
||||
<slide :data="{ field : 'aroundRadius', label: '圆角', min:0, max: 50, parent: 'btnStyle' }"></slide>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">色调</label>
|
||||
<div class="layui-input-block">
|
||||
<div @click="nc.btnStyle.theme='default'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.btnStyle.theme == 'default') }">
|
||||
<i class="layui-anim layui-icon">{{ nc.btnStyle.theme == 'default' ? "" : "" }}</i>
|
||||
<div>跟随主题风格</div>
|
||||
</div>
|
||||
<div @click="nc.btnStyle.theme='diy'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.btnStyle.theme == 'diy') }">
|
||||
<i class="layui-anim layui-icon">{{ nc.btnStyle.theme == 'diy' ? "" : "" }}</i>
|
||||
<div>自定义</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="nc.btnStyle.theme == 'diy'">
|
||||
<color :data="{ field : 'bgColorStart,bgColorEnd', 'label' : '背景颜色', parent : 'btnStyle', defaultColor : '#FF7B1D,#FF1544' }"></color>
|
||||
<color :data="{ field : 'textColor', 'label' : '文字颜色', parent : 'btnStyle', defaultColor : '#FFFFFF' }"></color>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var fenxiaoResourcePath = "{$resource_path}"; // http路径
|
||||
var fenxiaoRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
BIN
addon/fenxiao/component/view/goods_list/img/style1.png
Executable file
BIN
addon/fenxiao/component/view/goods_list/img/style1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
BIN
addon/fenxiao/component/view/goods_list/img/style2.png
Executable file
BIN
addon/fenxiao/component/view/goods_list/img/style2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
addon/fenxiao/component/view/goods_list/img/style3.png
Executable file
BIN
addon/fenxiao/component/view/goods_list/img/style3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
185
addon/fenxiao/component/view/goods_list/js/design.js
Executable file
185
addon/fenxiao/component/view/goods_list/js/design.js
Executable file
@@ -0,0 +1,185 @@
|
||||
var fenxiaoListHtml = '<div style="display:none;"></div>';
|
||||
|
||||
Vue.component("fenxiao-goods-list-sources", {
|
||||
template: fenxiaoListHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
goodsSources: {
|
||||
initial: {
|
||||
text: "默认",
|
||||
icon: "iconmofang"
|
||||
},
|
||||
category: {
|
||||
text: "商品分类",
|
||||
icon: "iconshangpinfenlei"
|
||||
},
|
||||
diy: {
|
||||
text: "手动选择",
|
||||
icon: "iconshoudongxuanze"
|
||||
},
|
||||
},
|
||||
templateList: {
|
||||
"row1-of1": {
|
||||
text: "单列",
|
||||
icon: "iconiPhone86",
|
||||
styleList: [
|
||||
{
|
||||
text: "样式1",
|
||||
value: "style-1",
|
||||
cartSupport: true, // 是否支持按钮
|
||||
lineSupport:true, // 是否支持划线价
|
||||
},
|
||||
],
|
||||
},
|
||||
"row1-of2": {
|
||||
text: "两列",
|
||||
icon: "iconyihanglianglie",
|
||||
styleList: [
|
||||
{
|
||||
text: "样式1",
|
||||
value: "style-1",
|
||||
cartSupport: true, // 是否支持按钮
|
||||
lineSupport:true, // 是否支持划线价
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
ornamentList: [
|
||||
{
|
||||
type: 'default',
|
||||
text: '默认',
|
||||
},
|
||||
{
|
||||
type: 'shadow',
|
||||
text: '投影',
|
||||
},
|
||||
{
|
||||
type: 'stroke',
|
||||
text: '描边',
|
||||
},
|
||||
],
|
||||
nameLineModeList: [
|
||||
{
|
||||
text: "单行",
|
||||
value: "single"
|
||||
},
|
||||
{
|
||||
text: "多行",
|
||||
value: "multiple"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created:function() {
|
||||
if(!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||
|
||||
this.$parent.data.ignore = ['textColor']; //加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
var previewList = {};
|
||||
for (var i = 1; i < 5; i++) {
|
||||
previewList["goods_id_" + ns.gen_non_duplicate(i)] = {
|
||||
goods_name: "分销商品",
|
||||
discount_price: (Math.random() * 100 * i + 10).toFixed(2), // 随机价格
|
||||
fenxiao_price: (Math.random() * 10 * i + 10).toFixed(0), // 随机价格
|
||||
};
|
||||
}
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
goodsSources: this.goodsSources,
|
||||
templateList: this.templateList,
|
||||
ornamentList: this.ornamentList,
|
||||
nameLineModeList: this.nameLineModeList,
|
||||
previewList: previewList,
|
||||
methods: {
|
||||
addGoods: this.addGoods,
|
||||
selectCategory: this.selectCategory,
|
||||
selectTemplate: this.selectTemplate
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
verify : function (index) {
|
||||
var res = { code : true, message : "" };
|
||||
if (vue.data[index].sources == 'category' && vue.data[index].categoryId == 0){
|
||||
res.code = false;
|
||||
res.message = "请选择商品分类";
|
||||
}
|
||||
return res;
|
||||
},
|
||||
addGoods: function () {
|
||||
var self = this;
|
||||
goodsSelect(function (res) {
|
||||
self.$parent.data.goodsId = res;
|
||||
}, self.$parent.data.goodsId, {mode: "spu", promotion: "fenxiao", disabled: 0, post: ns.appModule});
|
||||
},
|
||||
selectCategory() {
|
||||
var self = this;
|
||||
layui.use(['form'], function () {
|
||||
var form = layui.form;
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '选择分类',
|
||||
area: ['630px', '430px'],
|
||||
btn: ['确定', '返回'],
|
||||
content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .goods-category-layer").html(),
|
||||
success: function (layero, index) {
|
||||
$(".js-switch").click(function () {
|
||||
var category_id = $(this).attr("data-category-id");
|
||||
var level = $(this).attr("data-level");
|
||||
var open = parseInt($(this).attr("data-open").toString());
|
||||
|
||||
if (open) {
|
||||
$(".goods-category-list .layui-table tr[data-category-id-" + level + "='" + category_id + "']").hide();
|
||||
$(this).text("+");
|
||||
} else {
|
||||
$(".goods-category-list .layui-table tr[data-category-id-" + level + "='" + category_id + "']").show();
|
||||
$(this).text("-");
|
||||
}
|
||||
$(this).attr("data-open", (open ? 0 : 1));
|
||||
});
|
||||
|
||||
form.on('checkbox(category_select_id)', function (data) {
|
||||
if (data.elem.checked) {
|
||||
$("input[name='category_select_id']:checked").prop("checked", false);
|
||||
$(data.elem).prop("checked", true);
|
||||
form.render();
|
||||
}
|
||||
});
|
||||
|
||||
$("input[name='category_select_id']:checked").prop("checked", false);
|
||||
if (self.data.categoryId) {
|
||||
$('.layui-layer-content [data-category_select_id="' + self.data.categoryId + '"]').prop("checked", true);
|
||||
}
|
||||
|
||||
form.render();
|
||||
},
|
||||
yes: function (index, layero) {
|
||||
var selected = $(".layui-layer-content input[name='category_select_id']:checked");
|
||||
if (selected.length === 0) {
|
||||
layer.msg('请选择商品分类');
|
||||
return;
|
||||
}
|
||||
self.data.categoryName = selected.parents('tr').find('.category-name').text();
|
||||
self.data.categoryId = selected.attr('data-category_select_id');
|
||||
layer.closeAll()
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
selectTemplate(template, item) {
|
||||
if (template) {
|
||||
this.$parent.data.template = template;
|
||||
item = this.templateList[template].styleList[0];
|
||||
}
|
||||
this.$parent.data.style = item.value;
|
||||
this.$parent.data.btnStyle.support = item.cartSupport;
|
||||
this.$parent.data.btnStyle.control = item.cartSupport;
|
||||
this.$parent.data.priceStyle.lineSupport = item.lineSupport;
|
||||
this.$parent.data.priceStyle.lineControl = item.lineSupport;
|
||||
},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user