merge paulGao commit
						commit
						4ecb41e9a2
					
				| 
						 | 
					@ -142,7 +142,7 @@ service.interceptors.response.use(
 | 
				
			||||||
    const errorResponse = error.response || {};
 | 
					    const errorResponse = error.response || {};
 | 
				
			||||||
    const errorData = errorResponse.data || {};
 | 
					    const errorData = errorResponse.data || {};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    if (errorResponse.status === 403 || error.response.data.code === 20004) {
 | 
					    if (errorResponse.status === 401 || errorResponse.status === 403 || error.response.data.code === 20004) {
 | 
				
			||||||
      isRefreshToken++;
 | 
					      isRefreshToken++;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      if (isRefreshToken === 1) {
 | 
					      if (isRefreshToken === 1) {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -341,6 +341,7 @@ export default {
 | 
				
			||||||
            title: "优惠券",
 | 
					            title: "优惠券",
 | 
				
			||||||
            methodsed: () => {
 | 
					            methodsed: () => {
 | 
				
			||||||
              this.showPromotionList = [];
 | 
					              this.showPromotionList = [];
 | 
				
			||||||
 | 
					              this.activeColumns = this.pintuanColumns;
 | 
				
			||||||
              this.sortGoods("COUPON");
 | 
					              this.sortGoods("COUPON");
 | 
				
			||||||
            },
 | 
					            },
 | 
				
			||||||
          };
 | 
					          };
 | 
				
			||||||
| 
						 | 
					@ -349,6 +350,7 @@ export default {
 | 
				
			||||||
            title: "积分商品",
 | 
					            title: "积分商品",
 | 
				
			||||||
            methodsed: () => {
 | 
					            methodsed: () => {
 | 
				
			||||||
              this.showPromotionList = [];
 | 
					              this.showPromotionList = [];
 | 
				
			||||||
 | 
					              this.activeColumns = this.pintuanColumns;
 | 
				
			||||||
              this.sortGoods("POINTS_GOODS");
 | 
					              this.sortGoods("POINTS_GOODS");
 | 
				
			||||||
            },
 | 
					            },
 | 
				
			||||||
          };
 | 
					          };
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,385 +1,449 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
    <div class="model-form">
 | 
					  <div class="model-form">
 | 
				
			||||||
        <div class="model-content">
 | 
					    <div class="model-content">
 | 
				
			||||||
            <!-- 头部广告,登录信息,不需要拖拽 -->
 | 
					      <!-- 头部广告,登录信息,不需要拖拽 -->
 | 
				
			||||||
            <div class="top-fixed-advert" :style="{backgroundColor:topAdvert.bgColor}">
 | 
					      <div
 | 
				
			||||||
                <img :src="topAdvert.img" width="1200" height="80" alt="">
 | 
					        class="top-fixed-advert"
 | 
				
			||||||
                <div class="setup-box">
 | 
					        :style="{ backgroundColor: topAdvert.bgColor }"
 | 
				
			||||||
                    <Button size="small" @click.stop="handleModel('topAdvert')">编辑</Button>
 | 
					      >
 | 
				
			||||||
                </div>
 | 
					        <img :src="topAdvert.img" width="1200" height="80" alt="" />
 | 
				
			||||||
            </div>
 | 
					        <div class="setup-box">
 | 
				
			||||||
            <div class="header-con">
 | 
					          <Button size="small" @click.stop="handleModel('topAdvert')"
 | 
				
			||||||
                <div></div>
 | 
					            >编辑</Button
 | 
				
			||||||
                <ul class="detail">
 | 
					          >
 | 
				
			||||||
                    <li>立即注册</li>
 | 
					 | 
				
			||||||
                    <li>请登录</li>
 | 
					 | 
				
			||||||
                    <li>我的订单</li>
 | 
					 | 
				
			||||||
                    <li>我的足迹</li>
 | 
					 | 
				
			||||||
                    <li><Icon size="18" type="ios-cart-outline" ></Icon>购物车</li>
 | 
					 | 
				
			||||||
                    <li>店铺入驻</li>
 | 
					 | 
				
			||||||
                </ul>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="search-con">
 | 
					 | 
				
			||||||
                <img :src="require('@/assets/logo.png')" class="logo" alt="">
 | 
					 | 
				
			||||||
                <div class="search">
 | 
					 | 
				
			||||||
                    <i-input  size="large" placeholder="输入你想查找的商品">
 | 
					 | 
				
			||||||
                        <Button slot="append">搜索</Button>
 | 
					 | 
				
			||||||
                    </i-input>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="nav-con">
 | 
					 | 
				
			||||||
                <div class="all-categories">全部商品分类</div>
 | 
					 | 
				
			||||||
                <ul class="nav-item">
 | 
					 | 
				
			||||||
                    <li v-for="(item,index) in navList.list" :key="index">
 | 
					 | 
				
			||||||
                        <a href="#">{{item.name}}</a>
 | 
					 | 
				
			||||||
                    </li>
 | 
					 | 
				
			||||||
                </ul>
 | 
					 | 
				
			||||||
                <div class="setup-box">
 | 
					 | 
				
			||||||
                    <Button size="small" @click.stop="handleModel('quickNav')">编辑</Button>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <!-- 装修主体 -->
 | 
					 | 
				
			||||||
            <div>
 | 
					 | 
				
			||||||
                <draggable class="model-form-list"
 | 
					 | 
				
			||||||
                    v-model="data.list"
 | 
					 | 
				
			||||||
                    v-bind="{group:'model', ghostClass: 'ghost'}"
 | 
					 | 
				
			||||||
                    @end="handleMoveEnd"
 | 
					 | 
				
			||||||
                    @add="handleModelAdd"
 | 
					 | 
				
			||||||
                >
 | 
					 | 
				
			||||||
                    <template v-for="(element, index) in data.list">
 | 
					 | 
				
			||||||
                        <model-form-item v-if="element && element.key" :key="element.key" :element="element" :index="index" :data="data"></model-form-item>
 | 
					 | 
				
			||||||
                    </template>
 | 
					 | 
				
			||||||
                </draggable>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
        <Modal
 | 
					      </div>
 | 
				
			||||||
            v-model="showModal"
 | 
					      <div class="header-con">
 | 
				
			||||||
            title="顶部广告"
 | 
					        <div></div>
 | 
				
			||||||
            draggable
 | 
					        <ul class="detail">
 | 
				
			||||||
            width="800"
 | 
					          <li>立即注册</li>
 | 
				
			||||||
            :z-index="100"
 | 
					          <li>请登录</li>
 | 
				
			||||||
            :mask-closable="false"
 | 
					          <li>我的订单</li>
 | 
				
			||||||
            
 | 
					          <li>我的足迹</li>
 | 
				
			||||||
           
 | 
					          <li><Icon size="18" type="ios-cart-outline"></Icon>购物车</li>
 | 
				
			||||||
            >
 | 
					          <li>店铺入驻</li>
 | 
				
			||||||
            <!-- 顶部广告 -->
 | 
					        </ul>
 | 
				
			||||||
            <div class="modal-top-advert">
 | 
					      </div>
 | 
				
			||||||
                <div>
 | 
					      <div class="search-con">
 | 
				
			||||||
                    <img class="show-image" width="600" height="40" :src="topAdvert.img" alt />
 | 
					        <img :src="require('@/assets/logo.png')" class="logo" alt="" />
 | 
				
			||||||
                </div>
 | 
					        <div class="search">
 | 
				
			||||||
                <div class="tips">
 | 
					          <i-input size="large" placeholder="输入你想查找的商品">
 | 
				
			||||||
                    建议尺寸:<span>{{ topAdvert.size }}</span>
 | 
					            <Button slot="append">搜索</Button>
 | 
				
			||||||
                </div>
 | 
					          </i-input>
 | 
				
			||||||
                <div>
 | 
					        </div>
 | 
				
			||||||
                    图片链接:<span>{{ topAdvert.url }}</span><Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
 | 
					      </div>
 | 
				
			||||||
                </div>
 | 
					      <div class="nav-con">
 | 
				
			||||||
                <div>
 | 
					        <div class="all-categories">全部商品分类</div>
 | 
				
			||||||
                    选择图片:<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button> 
 | 
					        <ul class="nav-item">
 | 
				
			||||||
                </div>
 | 
					          <li v-for="(item, index) in navList.list" :key="index">
 | 
				
			||||||
                <div>
 | 
					            <a href="#">{{ item.name }}</a>
 | 
				
			||||||
                    选择背景色:<ColorPicker v-model="topAdvert.bgColor" />
 | 
					          </li>
 | 
				
			||||||
                </div>
 | 
					        </ul>
 | 
				
			||||||
            </div>
 | 
					        <div class="setup-box">
 | 
				
			||||||
        </Modal>
 | 
					          <Button size="small" @click.stop="handleModel('quickNav')"
 | 
				
			||||||
        <Modal
 | 
					            >编辑</Button
 | 
				
			||||||
            v-model="showModalNav"
 | 
					          >
 | 
				
			||||||
            title="快捷导航"
 | 
					        </div>
 | 
				
			||||||
            draggable
 | 
					      </div>
 | 
				
			||||||
            width="800"
 | 
					      <!-- 装修主体 -->
 | 
				
			||||||
            :z-index="100"
 | 
					      <div>
 | 
				
			||||||
            :mask-closable="false"
 | 
					        <draggable
 | 
				
			||||||
            >
 | 
					          class="model-form-list"
 | 
				
			||||||
            <!-- 分类tab栏 -->
 | 
					          v-model="data.list"
 | 
				
			||||||
            <div class="modal-tab-bar">
 | 
					          v-bind="{ group: 'model', ghostClass: 'ghost' }"
 | 
				
			||||||
                <Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
 | 
					          @end="handleMoveEnd"
 | 
				
			||||||
                <table cellspacing="0">
 | 
					          @add="handleModelAdd"
 | 
				
			||||||
                    <thead>
 | 
					        >
 | 
				
			||||||
                        <tr>
 | 
					          <template v-for="(element, index) in data.list">
 | 
				
			||||||
                            <th width="250">分类名称</th>
 | 
					            <model-form-item
 | 
				
			||||||
                            <th width="250">链接地址</th>
 | 
					              v-if="element && element.key"
 | 
				
			||||||
                            <!-- <th width="150">排序</th> -->
 | 
					              :key="element.key"
 | 
				
			||||||
                            <th width="250">操作</th>
 | 
					              :element="element"
 | 
				
			||||||
                        </tr>
 | 
					              :index="index"
 | 
				
			||||||
                    </thead>
 | 
					              :data="data"
 | 
				
			||||||
                    <tbody>
 | 
					            ></model-form-item>
 | 
				
			||||||
                        <tr v-for="(item, index) in navList.list" :key="index">
 | 
					          </template>
 | 
				
			||||||
                            <td><Input v-model="item.name" /></td>
 | 
					        </draggable>
 | 
				
			||||||
                            <td><Input v-model="item.url" disabled /></td>
 | 
					      </div>
 | 
				
			||||||
                            <!-- <td><Input v-model="item.sort"/></td> -->
 | 
					 | 
				
			||||||
                            <td>
 | 
					 | 
				
			||||||
                                <Button type="primary" size="small" @click="handleSelectLink(item,index)">选择链接</Button> 
 | 
					 | 
				
			||||||
                                <Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
 | 
					 | 
				
			||||||
                            </td>
 | 
					 | 
				
			||||||
                        </tr>
 | 
					 | 
				
			||||||
                    </tbody>
 | 
					 | 
				
			||||||
                </table>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
        </Modal>
 | 
					 | 
				
			||||||
        <!-- 选择商品。链接 -->
 | 
					 | 
				
			||||||
        <liliDialog
 | 
					 | 
				
			||||||
            ref="liliDialog"
 | 
					 | 
				
			||||||
            @selectedLink="selectedLink"
 | 
					 | 
				
			||||||
           
 | 
					 | 
				
			||||||
        ></liliDialog>
 | 
					 | 
				
			||||||
        <!-- 选择图片 -->
 | 
					 | 
				
			||||||
        <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
					 | 
				
			||||||
            <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
 | 
					 | 
				
			||||||
        </Modal>
 | 
					 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					    <Modal
 | 
				
			||||||
 | 
					      v-model="showModal"
 | 
				
			||||||
 | 
					      title="顶部广告"
 | 
				
			||||||
 | 
					      draggable
 | 
				
			||||||
 | 
					      width="800"
 | 
				
			||||||
 | 
					      :z-index="100"
 | 
				
			||||||
 | 
					      :mask-closable="false"
 | 
				
			||||||
 | 
					    >
 | 
				
			||||||
 | 
					      <!-- 顶部广告 -->
 | 
				
			||||||
 | 
					      <div class="modal-top-advert">
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          <img
 | 
				
			||||||
 | 
					            class="show-image"
 | 
				
			||||||
 | 
					            width="600"
 | 
				
			||||||
 | 
					            height="40"
 | 
				
			||||||
 | 
					            :src="topAdvert.img"
 | 
				
			||||||
 | 
					            alt
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="tips">
 | 
				
			||||||
 | 
					          建议尺寸:<span>{{ topAdvert.size }}</span>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          图片链接:<Input
 | 
				
			||||||
 | 
					            class="outsideUrl"
 | 
				
			||||||
 | 
					            v-model="topAdvert.url"
 | 
				
			||||||
 | 
					            :disabled="!!topAdvert.type && topAdvert.type !== 'link'"
 | 
				
			||||||
 | 
					            placeholder="https://"
 | 
				
			||||||
 | 
					          /><Button size="small" type="primary" @click="handleSelectLink"
 | 
				
			||||||
 | 
					            >选择链接</Button
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          选择图片:<Button size="small" type="primary" @click="handleSelectImg"
 | 
				
			||||||
 | 
					            >选择图片</Button
 | 
				
			||||||
 | 
					          > 
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div>选择背景色:<ColorPicker v-model="topAdvert.bgColor" /></div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </Modal>
 | 
				
			||||||
 | 
					    <Modal
 | 
				
			||||||
 | 
					      v-model="showModalNav"
 | 
				
			||||||
 | 
					      title="快捷导航"
 | 
				
			||||||
 | 
					      draggable
 | 
				
			||||||
 | 
					      width="800"
 | 
				
			||||||
 | 
					      :z-index="100"
 | 
				
			||||||
 | 
					      :mask-closable="false"
 | 
				
			||||||
 | 
					    >
 | 
				
			||||||
 | 
					      <!-- 分类tab栏 -->
 | 
				
			||||||
 | 
					      <div class="modal-tab-bar">
 | 
				
			||||||
 | 
					        <Button type="primary" size="small" @click="handleAddNav"
 | 
				
			||||||
 | 
					          >添加分类</Button
 | 
				
			||||||
 | 
					        >
 | 
				
			||||||
 | 
					        <table cellspacing="0">
 | 
				
			||||||
 | 
					          <thead>
 | 
				
			||||||
 | 
					            <tr>
 | 
				
			||||||
 | 
					              <th width="250">分类名称</th>
 | 
				
			||||||
 | 
					              <th width="250">链接地址</th>
 | 
				
			||||||
 | 
					              <!-- <th width="150">排序</th> -->
 | 
				
			||||||
 | 
					              <th width="250">操作</th>
 | 
				
			||||||
 | 
					            </tr>
 | 
				
			||||||
 | 
					          </thead>
 | 
				
			||||||
 | 
					          <tbody>
 | 
				
			||||||
 | 
					            <tr v-for="(item, index) in navList.list" :key="index">
 | 
				
			||||||
 | 
					              <td><Input v-model="item.name" /></td>
 | 
				
			||||||
 | 
					              <td>
 | 
				
			||||||
 | 
					                <Input
 | 
				
			||||||
 | 
					                  v-model="item.url"
 | 
				
			||||||
 | 
					                  :disabled="!!item.type && item.type !== 'link'"
 | 
				
			||||||
 | 
					                />
 | 
				
			||||||
 | 
					              </td>
 | 
				
			||||||
 | 
					              <!-- <td><Input v-model="item.sort"/></td> -->
 | 
				
			||||||
 | 
					              <td>
 | 
				
			||||||
 | 
					                <Button
 | 
				
			||||||
 | 
					                  type="primary"
 | 
				
			||||||
 | 
					                  size="small"
 | 
				
			||||||
 | 
					                  @click="handleSelectLink(item, index)"
 | 
				
			||||||
 | 
					                  >选择链接</Button
 | 
				
			||||||
 | 
					                > 
 | 
				
			||||||
 | 
					                <Button type="error" size="small" @click="handleDelNav(index)"
 | 
				
			||||||
 | 
					                  >删除</Button
 | 
				
			||||||
 | 
					                >
 | 
				
			||||||
 | 
					              </td>
 | 
				
			||||||
 | 
					            </tr>
 | 
				
			||||||
 | 
					          </tbody>
 | 
				
			||||||
 | 
					        </table>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </Modal>
 | 
				
			||||||
 | 
					    <!-- 选择商品。链接 -->
 | 
				
			||||||
 | 
					    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
 | 
				
			||||||
 | 
					    <!-- 选择图片 -->
 | 
				
			||||||
 | 
					    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
				
			||||||
 | 
					      <ossManage
 | 
				
			||||||
 | 
					        @callback="callbackSelected"
 | 
				
			||||||
 | 
					        :isComponent="true"
 | 
				
			||||||
 | 
					        ref="ossManage"
 | 
				
			||||||
 | 
					      />
 | 
				
			||||||
 | 
					    </Modal>
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
import Draggable from 'vuedraggable'
 | 
					import Draggable from "vuedraggable";
 | 
				
			||||||
import ModelFormItem from './modelFormItem.vue'
 | 
					import ModelFormItem from "./modelFormItem.vue";
 | 
				
			||||||
import ossManage from "@/views/sys/oss-manage/ossManage";
 | 
					import ossManage from "@/views/sys/oss-manage/ossManage";
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
    name:'modelForm',
 | 
					  name: "modelForm",
 | 
				
			||||||
    components:{
 | 
					  components: {
 | 
				
			||||||
        Draggable,
 | 
					    Draggable,
 | 
				
			||||||
        ModelFormItem,
 | 
					    ModelFormItem,
 | 
				
			||||||
        ossManage
 | 
					    ossManage,
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  props: ["data"],
 | 
				
			||||||
 | 
					  data() {
 | 
				
			||||||
 | 
					    return {
 | 
				
			||||||
 | 
					      picModelFlag: false, // 选择图片模态框
 | 
				
			||||||
 | 
					      showModal: false, // 顶部广告模态框
 | 
				
			||||||
 | 
					      showModalNav: false, // 分类nav模态框
 | 
				
			||||||
 | 
					      selectedNav: null, //当前已选nav
 | 
				
			||||||
 | 
					      // 模拟搜索框下方数据
 | 
				
			||||||
 | 
					      promotionTags: [
 | 
				
			||||||
 | 
					        "买2免1",
 | 
				
			||||||
 | 
					        "领200神券",
 | 
				
			||||||
 | 
					        "199减100",
 | 
				
			||||||
 | 
					        "母婴5折抢",
 | 
				
			||||||
 | 
					        "充100送20",
 | 
				
			||||||
 | 
					      ], // 热词数据
 | 
				
			||||||
 | 
					      topAdvert: {
 | 
				
			||||||
 | 
					        // 头部广告图数据
 | 
				
			||||||
 | 
					        type: "topAdvert",
 | 
				
			||||||
 | 
					        img: "",
 | 
				
			||||||
 | 
					        url: "",
 | 
				
			||||||
 | 
					        bgColor: "#de000d",
 | 
				
			||||||
 | 
					        size: "1200*80",
 | 
				
			||||||
 | 
					      },
 | 
				
			||||||
 | 
					      navList: {
 | 
				
			||||||
 | 
					        // 分类nav数据
 | 
				
			||||||
 | 
					        type: "navBar",
 | 
				
			||||||
 | 
					        list: [
 | 
				
			||||||
 | 
					          { name: "秒杀", url: "" },
 | 
				
			||||||
 | 
					          { name: "闪购", url: "" },
 | 
				
			||||||
 | 
					          { name: "优惠券", url: "" },
 | 
				
			||||||
 | 
					          { name: "拍卖", url: "" },
 | 
				
			||||||
 | 
					          { name: "服装城", url: "" },
 | 
				
			||||||
 | 
					        ],
 | 
				
			||||||
 | 
					      },
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  mounted() {
 | 
				
			||||||
 | 
					    document.body.ondrop = function (event) {
 | 
				
			||||||
 | 
					      let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
 | 
				
			||||||
 | 
					      if (isFirefox) {
 | 
				
			||||||
 | 
					        event.preventDefault();
 | 
				
			||||||
 | 
					        event.stopPropagation();
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  methods: {
 | 
				
			||||||
 | 
					    handleSelectLink(item, index) {
 | 
				
			||||||
 | 
					      // 调起选择链接弹窗
 | 
				
			||||||
 | 
					      if (item) this.selectedNav = item;
 | 
				
			||||||
 | 
					      this.$refs.liliDialog.open("link");
 | 
				
			||||||
 | 
					      console.log(item);
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    props:['data'],
 | 
					    // 已选链接
 | 
				
			||||||
    data(){
 | 
					    selectedLink(val) {
 | 
				
			||||||
        return{
 | 
					      if (this.showModalNav) {
 | 
				
			||||||
            picModelFlag: false, // 选择图片模态框
 | 
					        this.selectedNav.url = this.$options.filters.formatLinkType(val);
 | 
				
			||||||
            showModal: false, // 顶部广告模态框
 | 
					        this.selectedNav.type =
 | 
				
			||||||
            showModalNav: false, // 分类nav模态框
 | 
					          val.___type === "other" && val.url === "" ? "link" : "other";
 | 
				
			||||||
            selectedNav:null, //当前已选nav
 | 
					      } else {
 | 
				
			||||||
            // 模拟搜索框下方数据
 | 
					        this.topAdvert.url = this.$options.filters.formatLinkType(val);
 | 
				
			||||||
            promotionTags: [ "买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"], // 热词数据
 | 
					        this.topAdvert.type =
 | 
				
			||||||
            topAdvert:{ // 头部广告图数据
 | 
					          val.___type === "other" && val.url === "" ? "link" : "other";
 | 
				
			||||||
                type:'topAdvert',
 | 
					      }
 | 
				
			||||||
                img:'',
 | 
					 | 
				
			||||||
                url:'',
 | 
					 | 
				
			||||||
                bgColor:'#de000d',
 | 
					 | 
				
			||||||
                size:'1200*80'
 | 
					 | 
				
			||||||
            },
 | 
					 | 
				
			||||||
            navList:{ // 分类nav数据
 | 
					 | 
				
			||||||
                type:'navBar',
 | 
					 | 
				
			||||||
                list:[
 | 
					 | 
				
			||||||
                    {name:'秒杀', url:''}, {name:'闪购', url:''}, {name:'优惠券', url:''}, {name:'拍卖', url:''}, {name:'服装城', url:''},
 | 
					 | 
				
			||||||
                ]
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    mounted(){
 | 
					    handleDelNav(index) {
 | 
				
			||||||
        document.body.ondrop = function (event) {
 | 
					      // 删除导航
 | 
				
			||||||
            let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
 | 
					      this.navList.list.splice(index, 1);
 | 
				
			||||||
            if (isFirefox) {
 | 
					 | 
				
			||||||
                event.preventDefault()
 | 
					 | 
				
			||||||
                event.stopPropagation()
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    methods:{
 | 
					    handleAddNav() {
 | 
				
			||||||
        handleSelectLink(item,index) { // 调起选择链接弹窗
 | 
					      // 添加导航
 | 
				
			||||||
            if(item) this.selectedNav = item;
 | 
					      this.navList.list.push({ name: "", url: "" });
 | 
				
			||||||
            this.$refs.liliDialog.open('link')
 | 
					    },
 | 
				
			||||||
        },
 | 
					    // 拖动结束回调
 | 
				
			||||||
        // 已选链接
 | 
					    handleMoveEnd({ newIndex, oldIndex }) {
 | 
				
			||||||
        selectedLink(val) {
 | 
					      console.log("index", newIndex, oldIndex);
 | 
				
			||||||
            console.log(val);
 | 
					    },
 | 
				
			||||||
            if(this.showModalNav){
 | 
					    // 修改顶部广告
 | 
				
			||||||
                this.selectedNav.url = this.$options.filters.formatLinkType(val);
 | 
					    handleModel(type) {
 | 
				
			||||||
            }else {
 | 
					      if (type == "topAdvert") {
 | 
				
			||||||
                this.topAdvert.url = this.$options.filters.formatLinkType(val);
 | 
					        this.showModal = true;
 | 
				
			||||||
            }
 | 
					      } else {
 | 
				
			||||||
        },
 | 
					        this.showModalNav = true;
 | 
				
			||||||
        handleDelNav(index){ // 删除导航
 | 
					      }
 | 
				
			||||||
            this.navList.list.splice(index,1)
 | 
					    },
 | 
				
			||||||
        },
 | 
					    // 选择图片
 | 
				
			||||||
        handleAddNav(){ // 添加导航
 | 
					    handleSelectImg() {
 | 
				
			||||||
            this.navList.list.push(
 | 
					      this.$refs.ossManage.selectImage = true;
 | 
				
			||||||
                {name:'',url:''}
 | 
					      this.picModelFlag = true;
 | 
				
			||||||
            )
 | 
					    },
 | 
				
			||||||
            console.log(this.navList.list)
 | 
					    callbackSelected(item) {
 | 
				
			||||||
        },
 | 
					      // 选择图片回调
 | 
				
			||||||
        // 拖动结束回调
 | 
					      this.picModelFlag = false;
 | 
				
			||||||
        handleMoveEnd ({newIndex, oldIndex}) {
 | 
					      this.topAdvert.img = item.url;
 | 
				
			||||||
            console.log('index', newIndex, oldIndex)
 | 
					    },
 | 
				
			||||||
        },
 | 
					    handleModelAdd(evt) {
 | 
				
			||||||
        // 修改顶部广告
 | 
					      // 拖拽,添加模块
 | 
				
			||||||
        handleModel (type) {
 | 
					      const newIndex = evt.newIndex;
 | 
				
			||||||
            if(type == 'topAdvert'){
 | 
					 | 
				
			||||||
                this.showModal = true;
 | 
					 | 
				
			||||||
            } else {
 | 
					 | 
				
			||||||
                this.showModalNav = true;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        },
 | 
					 | 
				
			||||||
        // 选择图片
 | 
					 | 
				
			||||||
        handleSelectImg() {
 | 
					 | 
				
			||||||
            this.$refs.ossManage.selectImage = true;
 | 
					 | 
				
			||||||
            this.picModelFlag = true;
 | 
					 | 
				
			||||||
        },
 | 
					 | 
				
			||||||
        callbackSelected (item) { // 选择图片回调
 | 
					 | 
				
			||||||
            this.picModelFlag = false;
 | 
					 | 
				
			||||||
            this.topAdvert.img = item.url;
 | 
					 | 
				
			||||||
        },
 | 
					 | 
				
			||||||
        handleModelAdd (evt) { // 拖拽,添加模块
 | 
					 | 
				
			||||||
            const newIndex = evt.newIndex
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
            // 为拖拽到容器的元素添加唯一 key
 | 
					      // 为拖拽到容器的元素添加唯一 key
 | 
				
			||||||
            this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex]))
 | 
					      this.data.list[newIndex] = JSON.parse(
 | 
				
			||||||
            const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
 | 
					        JSON.stringify(this.data.list[newIndex])
 | 
				
			||||||
            this.$set(this.data.list, newIndex, {
 | 
					      );
 | 
				
			||||||
                ...this.data.list[newIndex],
 | 
					      const key =
 | 
				
			||||||
                options: {
 | 
					        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
 | 
				
			||||||
                    ...this.data.list[newIndex].options,
 | 
					      this.$set(this.data.list, newIndex, {
 | 
				
			||||||
                },
 | 
					        ...this.data.list[newIndex],
 | 
				
			||||||
                key,
 | 
					        options: {
 | 
				
			||||||
                // 绑定键值
 | 
					          ...this.data.list[newIndex].options,
 | 
				
			||||||
                model: this.data.list[newIndex].type + '_' + key
 | 
					 | 
				
			||||||
            })
 | 
					 | 
				
			||||||
        },
 | 
					        },
 | 
				
			||||||
    }
 | 
					        key,
 | 
				
			||||||
}
 | 
					        // 绑定键值
 | 
				
			||||||
 | 
					        model: this.data.list[newIndex].type + "_" + key,
 | 
				
			||||||
 | 
					      });
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
<style lang="scss" scoped>
 | 
					<style lang="scss" scoped>
 | 
				
			||||||
    @import './modelList/setup-box.scss';
 | 
					@import "./modelList/setup-box.scss";
 | 
				
			||||||
    .model-form {
 | 
					.model-form {
 | 
				
			||||||
        width: 1500px;
 | 
					  width: 1500px;
 | 
				
			||||||
    }
 | 
					}
 | 
				
			||||||
    .model-content {
 | 
					.model-content {
 | 
				
			||||||
        width: 1200px;
 | 
					  width: 1200px;
 | 
				
			||||||
        margin: 0 auto;
 | 
					  margin: 0 auto;
 | 
				
			||||||
        background: #fff;
 | 
					  background: #fff;
 | 
				
			||||||
        min-height: 1200px;
 | 
					  min-height: 1200px;
 | 
				
			||||||
    }
 | 
					}
 | 
				
			||||||
    .model-form-list{
 | 
					.model-form-list {
 | 
				
			||||||
        min-height: 500px;
 | 
					  min-height: 500px;
 | 
				
			||||||
    }
 | 
					}
 | 
				
			||||||
    /**  顶部广告,头部,搜索框 start */
 | 
					/**  顶部广告,头部,搜索框 start */
 | 
				
			||||||
    .top-fixed-advert{
 | 
					.top-fixed-advert {
 | 
				
			||||||
        display: flex;
 | 
					  display: flex;
 | 
				
			||||||
        width:1500px;
 | 
					  width: 1500px;
 | 
				
			||||||
        margin-left: -150px;
 | 
					  margin-left: -150px;
 | 
				
			||||||
        background: $theme_color;
 | 
					  background: $theme_color;
 | 
				
			||||||
        justify-content: center;
 | 
					  justify-content: center;
 | 
				
			||||||
    }
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    .header-con {
 | 
					.header-con {
 | 
				
			||||||
        display: flex;
 | 
					  display: flex;
 | 
				
			||||||
        justify-content: space-between;
 | 
					  justify-content: space-between;
 | 
				
			||||||
        height: 35px;
 | 
					  height: 35px;
 | 
				
			||||||
        padding: 0 15px;
 | 
					  padding: 0 15px;
 | 
				
			||||||
        line-height: 35px;
 | 
					  line-height: 35px;
 | 
				
			||||||
 | 
					  color: #999;
 | 
				
			||||||
 | 
					  font-weight: bold;
 | 
				
			||||||
 | 
					  div,
 | 
				
			||||||
 | 
					  li {
 | 
				
			||||||
 | 
					    &:hover {
 | 
				
			||||||
 | 
					      color: $theme_color;
 | 
				
			||||||
 | 
					      cursor: pointer;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .detail {
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    > li {
 | 
				
			||||||
 | 
					      margin-left: 10px;
 | 
				
			||||||
 | 
					      &::after {
 | 
				
			||||||
 | 
					        content: "|";
 | 
				
			||||||
 | 
					        padding-left: 10px;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      &:last-child::after {
 | 
				
			||||||
 | 
					        content: "";
 | 
				
			||||||
 | 
					        padding-left: 0;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      &:hover::after {
 | 
				
			||||||
        color: #999;
 | 
					        color: #999;
 | 
				
			||||||
        font-weight: bold;
 | 
					      }
 | 
				
			||||||
        div,li{
 | 
					 | 
				
			||||||
            &:hover{
 | 
					 | 
				
			||||||
                color: $theme_color;
 | 
					 | 
				
			||||||
                cursor: pointer;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        .detail{
 | 
					 | 
				
			||||||
            display: flex;
 | 
					 | 
				
			||||||
            >li{
 | 
					 | 
				
			||||||
                margin-left: 10px;
 | 
					 | 
				
			||||||
                &::after{
 | 
					 | 
				
			||||||
                    content: "|";
 | 
					 | 
				
			||||||
                    padding-left: 10px;
 | 
					 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
                &:last-child::after{
 | 
					 | 
				
			||||||
                    content:'';
 | 
					 | 
				
			||||||
                    padding-left: 0;
 | 
					 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
                &:hover::after{
 | 
					 | 
				
			||||||
                    color: #999;
 | 
					 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    /** 搜索框 */
 | 
					  }
 | 
				
			||||||
    .search-con {
 | 
					}
 | 
				
			||||||
        padding-top: 15px;
 | 
					/** 搜索框 */
 | 
				
			||||||
        margin: 0px auto;
 | 
					.search-con {
 | 
				
			||||||
        margin-bottom: 10px;
 | 
					  padding-top: 15px;
 | 
				
			||||||
        width: 1200px;
 | 
					  margin: 0px auto;
 | 
				
			||||||
        position: relative;
 | 
					  margin-bottom: 10px;
 | 
				
			||||||
        .logo{
 | 
					  width: 1200px;
 | 
				
			||||||
            position: absolute;
 | 
					  position: relative;
 | 
				
			||||||
            top: 10px;
 | 
					  .logo {
 | 
				
			||||||
            left: 10px;
 | 
					    position: absolute;
 | 
				
			||||||
            width: 150px;
 | 
					    top: 10px;
 | 
				
			||||||
            height: 50px;
 | 
					    left: 10px;
 | 
				
			||||||
        }
 | 
					    width: 150px;
 | 
				
			||||||
        .search {
 | 
					    height: 50px;
 | 
				
			||||||
            width: 460px;
 | 
					  }
 | 
				
			||||||
            margin: 0 auto;
 | 
					  .search {
 | 
				
			||||||
            /deep/ .ivu-input.ivu-input-large {
 | 
					    width: 460px;
 | 
				
			||||||
                border: 2px solid $theme_color;
 | 
					    margin: 0 auto;
 | 
				
			||||||
                font-size: 12px;
 | 
					    /deep/ .ivu-input.ivu-input-large {
 | 
				
			||||||
                height: 34px;
 | 
					      border: 2px solid $theme_color;
 | 
				
			||||||
                &:focus {
 | 
					      font-size: 12px;
 | 
				
			||||||
                    box-shadow: none;
 | 
					      height: 34px;
 | 
				
			||||||
                }
 | 
					      &:focus {
 | 
				
			||||||
            }
 | 
					        box-shadow: none;
 | 
				
			||||||
            /deep/ .ivu-input-group-append {
 | 
					      }
 | 
				
			||||||
                border: 1px solid $theme_color;
 | 
					 | 
				
			||||||
                border-left: none;
 | 
					 | 
				
			||||||
                height: 30px;
 | 
					 | 
				
			||||||
                background-color: $theme_color;
 | 
					 | 
				
			||||||
                color: #ffffff;
 | 
					 | 
				
			||||||
                button {
 | 
					 | 
				
			||||||
                    font-size: 14px;
 | 
					 | 
				
			||||||
                    font-weight: 600;
 | 
					 | 
				
			||||||
                    line-height: 1;
 | 
					 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    /** 商品分类 */
 | 
					    /deep/ .ivu-input-group-append {
 | 
				
			||||||
    .nav-con{
 | 
					      border: 1px solid $theme_color;
 | 
				
			||||||
       width:1200px;
 | 
					      border-left: none;
 | 
				
			||||||
       height: 40px;
 | 
					      height: 30px;
 | 
				
			||||||
       background: #eee;
 | 
					      background-color: $theme_color;
 | 
				
			||||||
       display: flex;
 | 
					      color: #ffffff;
 | 
				
			||||||
       .all-categories{
 | 
					      button {
 | 
				
			||||||
           width: 200px;
 | 
					        font-size: 14px;
 | 
				
			||||||
           line-height: 40px;
 | 
					        font-weight: 600;
 | 
				
			||||||
           color: #fff;
 | 
					        line-height: 1;
 | 
				
			||||||
           background-color: $theme_color;
 | 
					      }
 | 
				
			||||||
           text-align: center;
 | 
					 | 
				
			||||||
           font-size: 16px;
 | 
					 | 
				
			||||||
       }
 | 
					 | 
				
			||||||
       .nav-item {
 | 
					 | 
				
			||||||
            width: 1000px;
 | 
					 | 
				
			||||||
            height: 40px;
 | 
					 | 
				
			||||||
            line-height: 40px;
 | 
					 | 
				
			||||||
            overflow: hidden;
 | 
					 | 
				
			||||||
            list-style: none;
 | 
					 | 
				
			||||||
            background-color: #eee;
 | 
					 | 
				
			||||||
            display: flex;
 | 
					 | 
				
			||||||
            li{
 | 
					 | 
				
			||||||
                font-size: 16px;
 | 
					 | 
				
			||||||
                font-weight: bold;
 | 
					 | 
				
			||||||
                margin-left: 20px;
 | 
					 | 
				
			||||||
                a{
 | 
					 | 
				
			||||||
                    color:rgb(89, 88, 88);
 | 
					 | 
				
			||||||
                    font-size: 15px;
 | 
					 | 
				
			||||||
                    &:hover{color:$theme_color}
 | 
					 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    /**  顶部广告,头部,搜索框 end */
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					/** 商品分类 */
 | 
				
			||||||
 | 
					.nav-con {
 | 
				
			||||||
 | 
					  width: 1200px;
 | 
				
			||||||
 | 
					  height: 40px;
 | 
				
			||||||
 | 
					  background: #eee;
 | 
				
			||||||
 | 
					  display: flex;
 | 
				
			||||||
 | 
					  .all-categories {
 | 
				
			||||||
 | 
					    width: 200px;
 | 
				
			||||||
 | 
					    line-height: 40px;
 | 
				
			||||||
 | 
					    color: #fff;
 | 
				
			||||||
 | 
					    background-color: $theme_color;
 | 
				
			||||||
 | 
					    text-align: center;
 | 
				
			||||||
 | 
					    font-size: 16px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .nav-item {
 | 
				
			||||||
 | 
					    width: 1000px;
 | 
				
			||||||
 | 
					    height: 40px;
 | 
				
			||||||
 | 
					    line-height: 40px;
 | 
				
			||||||
 | 
					    overflow: hidden;
 | 
				
			||||||
 | 
					    list-style: none;
 | 
				
			||||||
 | 
					    background-color: #eee;
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    li {
 | 
				
			||||||
 | 
					      font-size: 16px;
 | 
				
			||||||
 | 
					      font-weight: bold;
 | 
				
			||||||
 | 
					      margin-left: 20px;
 | 
				
			||||||
 | 
					      a {
 | 
				
			||||||
 | 
					        color: rgb(89, 88, 88);
 | 
				
			||||||
 | 
					        font-size: 15px;
 | 
				
			||||||
 | 
					        &:hover {
 | 
				
			||||||
 | 
					          color: $theme_color;
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					/**  顶部广告,头部,搜索框 end */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    .top-fixed-advert, .nav-con{
 | 
					.top-fixed-advert,
 | 
				
			||||||
        position: relative;
 | 
					.nav-con {
 | 
				
			||||||
        &:hover{
 | 
					  position: relative;
 | 
				
			||||||
            .setup-box{
 | 
					  &:hover {
 | 
				
			||||||
                display: block;
 | 
					    .setup-box {
 | 
				
			||||||
            }
 | 
					      display: block;
 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    /** 装修模态框 内部样式start */
 | 
					 | 
				
			||||||
    .modal-top-advert{
 | 
					 | 
				
			||||||
        display: flex;
 | 
					 | 
				
			||||||
        justify-content: center;
 | 
					 | 
				
			||||||
        align-items: center;
 | 
					 | 
				
			||||||
        flex-direction: column;
 | 
					 | 
				
			||||||
        >*{
 | 
					 | 
				
			||||||
            margin-bottom: 10px;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					/** 装修模态框 内部样式start */
 | 
				
			||||||
 | 
					.modal-top-advert {
 | 
				
			||||||
 | 
					  display: flex;
 | 
				
			||||||
 | 
					  justify-content: center;
 | 
				
			||||||
 | 
					  align-items: center;
 | 
				
			||||||
 | 
					  flex-direction: column;
 | 
				
			||||||
 | 
					  > * {
 | 
				
			||||||
 | 
					    margin-bottom: 10px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -198,7 +198,12 @@
 | 
				
			||||||
          建议尺寸:<span>{{ selected.size }}</span>
 | 
					          建议尺寸:<span>{{ selected.size }}</span>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
        <div>
 | 
					        <div>
 | 
				
			||||||
          图片链接:<span>{{ selected.url }}</span>
 | 
					          图片链接:<Input
 | 
				
			||||||
 | 
					            class="outsideUrl"
 | 
				
			||||||
 | 
					            v-model="selected.url"
 | 
				
			||||||
 | 
					            :disabled="!!selected.type && selected.type !== 'link'"
 | 
				
			||||||
 | 
					            placeholder="https://"
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
          <Button size="small" type="primary" @click="handleSelectLink"
 | 
					          <Button size="small" type="primary" @click="handleSelectLink"
 | 
				
			||||||
            >选择链接</Button
 | 
					            >选择链接</Button
 | 
				
			||||||
          >
 | 
					          >
 | 
				
			||||||
| 
						 | 
					@ -211,11 +216,7 @@
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    </Modal>
 | 
					    </Modal>
 | 
				
			||||||
    <!-- 选择商品。链接 -->
 | 
					    <!-- 选择商品。链接 -->
 | 
				
			||||||
    <liliDialog
 | 
					    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
 | 
				
			||||||
      ref="liliDialog"
 | 
					 | 
				
			||||||
      @selectedLink="selectedLink"
 | 
					 | 
				
			||||||
  
 | 
					 | 
				
			||||||
    ></liliDialog>
 | 
					 | 
				
			||||||
    <!-- 选择图片 -->
 | 
					    <!-- 选择图片 -->
 | 
				
			||||||
    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
					    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
				
			||||||
      <ossManage
 | 
					      <ossManage
 | 
				
			||||||
| 
						 | 
					@ -229,8 +230,8 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
import ModelCarousel from "./modelList/carousel.vue";
 | 
					import ModelCarousel from "./modelList/carousel.vue";
 | 
				
			||||||
import ModelCarousel1 from './modelList/carousel1.vue';
 | 
					import ModelCarousel1 from "./modelList/carousel1.vue";
 | 
				
			||||||
import ModelCarousel2 from './modelList/carousel2.vue';
 | 
					import ModelCarousel2 from "./modelList/carousel2.vue";
 | 
				
			||||||
import FirstPageAdvert from "./modelList/firstPageAdvert.vue";
 | 
					import FirstPageAdvert from "./modelList/firstPageAdvert.vue";
 | 
				
			||||||
import NewGoodsSort from "./modelList/newGoodsSort.vue";
 | 
					import NewGoodsSort from "./modelList/newGoodsSort.vue";
 | 
				
			||||||
import Recommend from "./modelList/recommend.vue";
 | 
					import Recommend from "./modelList/recommend.vue";
 | 
				
			||||||
| 
						 | 
					@ -284,6 +285,8 @@ export default {
 | 
				
			||||||
    // 确定选择链接
 | 
					    // 确定选择链接
 | 
				
			||||||
    selectedLink(val) {
 | 
					    selectedLink(val) {
 | 
				
			||||||
      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
					      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
				
			||||||
 | 
					      this.selected.type =
 | 
				
			||||||
 | 
					        val.___type === "other" && val.url === "" ? "link" : "other";
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    handleSelectImg() {
 | 
					    handleSelectImg() {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -22,7 +22,9 @@
 | 
				
			||||||
        <div class="person-msg">
 | 
					        <div class="person-msg">
 | 
				
			||||||
          <img :src="userInfo.face" v-if="userInfo.face" alt />
 | 
					          <img :src="userInfo.face" v-if="userInfo.face" alt />
 | 
				
			||||||
          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
 | 
					          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
 | 
				
			||||||
          <div>Hi,{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
 | 
					          <div>
 | 
				
			||||||
 | 
					            Hi,{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
          <div v-if="userInfo.id">
 | 
					          <div v-if="userInfo.id">
 | 
				
			||||||
            <Button type="error" shape="circle">会员中心</Button>
 | 
					            <Button type="error" shape="circle">会员中心</Button>
 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
| 
						 | 
					@ -34,8 +36,13 @@
 | 
				
			||||||
          <div>
 | 
					          <div>
 | 
				
			||||||
            <span>常见问题</span>
 | 
					            <span>常见问题</span>
 | 
				
			||||||
            <ul class="article-list">
 | 
					            <ul class="article-list">
 | 
				
			||||||
              <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
 | 
					              <li
 | 
				
			||||||
                {{article.title}}
 | 
					                class="ellipsis"
 | 
				
			||||||
 | 
					                :alt="article.title"
 | 
				
			||||||
 | 
					                v-for="(article, index) in articleList"
 | 
				
			||||||
 | 
					                :key="index"
 | 
				
			||||||
 | 
					              >
 | 
				
			||||||
 | 
					                {{ article.title }}
 | 
				
			||||||
              </li>
 | 
					              </li>
 | 
				
			||||||
            </ul>
 | 
					            </ul>
 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
| 
						 | 
					@ -49,8 +56,6 @@
 | 
				
			||||||
      width="800"
 | 
					      width="800"
 | 
				
			||||||
      :z-index="100"
 | 
					      :z-index="100"
 | 
				
			||||||
      :mask-closable="false"
 | 
					      :mask-closable="false"
 | 
				
			||||||
      
 | 
					 | 
				
			||||||
      
 | 
					 | 
				
			||||||
    >
 | 
					    >
 | 
				
			||||||
      <div class="modal-tab-bar">
 | 
					      <div class="modal-tab-bar">
 | 
				
			||||||
        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
 | 
					        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
 | 
				
			||||||
| 
						 | 
					@ -78,19 +83,22 @@
 | 
				
			||||||
                  alt=""
 | 
					                  alt=""
 | 
				
			||||||
                />
 | 
					                />
 | 
				
			||||||
              </td>
 | 
					              </td>
 | 
				
			||||||
              <td><Input v-model="item.url" disabled /></td>
 | 
					              <td>
 | 
				
			||||||
 | 
					                <Input
 | 
				
			||||||
 | 
					                  class="outsideUrl"
 | 
				
			||||||
 | 
					                  v-model="item.url"
 | 
				
			||||||
 | 
					                  :disabled="!!item.type && item.type !== 'link'"
 | 
				
			||||||
 | 
					                />
 | 
				
			||||||
 | 
					              </td>
 | 
				
			||||||
              <!-- <td><Input v-model="item.sort"/></td> -->
 | 
					              <!-- <td><Input v-model="item.sort"/></td> -->
 | 
				
			||||||
              <td>
 | 
					              <td>
 | 
				
			||||||
                <Button
 | 
					                <Button
 | 
				
			||||||
                    type="primary"
 | 
					                  type="primary"
 | 
				
			||||||
                    size="small"
 | 
					 | 
				
			||||||
                    @click="handleSelectImg(item)"
 | 
					 | 
				
			||||||
                    >选择图片</Button
 | 
					 | 
				
			||||||
                > 
 | 
					 | 
				
			||||||
                <Button
 | 
					 | 
				
			||||||
                  type="info"
 | 
					 | 
				
			||||||
                  size="small"
 | 
					                  size="small"
 | 
				
			||||||
                  @click="handleSelectLink(item)"
 | 
					                  @click="handleSelectImg(item)"
 | 
				
			||||||
 | 
					                  >选择图片</Button
 | 
				
			||||||
 | 
					                > 
 | 
				
			||||||
 | 
					                <Button type="info" size="small" @click="handleSelectLink(item)"
 | 
				
			||||||
                  >选择链接</Button
 | 
					                  >选择链接</Button
 | 
				
			||||||
                > 
 | 
					                > 
 | 
				
			||||||
                <Button
 | 
					                <Button
 | 
				
			||||||
| 
						 | 
					@ -107,14 +115,14 @@
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    </Modal>
 | 
					    </Modal>
 | 
				
			||||||
    <!-- 选择商品。链接 -->
 | 
					    <!-- 选择商品。链接 -->
 | 
				
			||||||
    <liliDialog
 | 
					    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
 | 
				
			||||||
      ref="liliDialog"
 | 
					 | 
				
			||||||
      @selectedLink="selectedLink"
 | 
					 | 
				
			||||||
    
 | 
					 | 
				
			||||||
    ></liliDialog>
 | 
					 | 
				
			||||||
    <!-- 选择图片 -->
 | 
					    <!-- 选择图片 -->
 | 
				
			||||||
    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
					    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
				
			||||||
      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
 | 
					      <ossManage
 | 
				
			||||||
 | 
					        @callback="callbackSelected"
 | 
				
			||||||
 | 
					        :isComponent="true"
 | 
				
			||||||
 | 
					        ref="ossManage"
 | 
				
			||||||
 | 
					      />
 | 
				
			||||||
    </Modal>
 | 
					    </Modal>
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
| 
						 | 
					@ -125,39 +133,40 @@ export default {
 | 
				
			||||||
  name: "modelCarousel",
 | 
					  name: "modelCarousel",
 | 
				
			||||||
  props: ["data"],
 | 
					  props: ["data"],
 | 
				
			||||||
  components: {
 | 
					  components: {
 | 
				
			||||||
    ossManage
 | 
					    ossManage,
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  data() {
 | 
					  data() {
 | 
				
			||||||
    return {
 | 
					    return {
 | 
				
			||||||
      showModal: false, // modal显隐
 | 
					      showModal: false, // modal显隐
 | 
				
			||||||
      selected: null, // 已选数据
 | 
					      selected: null, // 已选数据
 | 
				
			||||||
      picModelFlag: false, // 选择图片modal
 | 
					      picModelFlag: false, // 选择图片modal
 | 
				
			||||||
      userInfo:{},
 | 
					      userInfo: {},
 | 
				
			||||||
      articleList:[
 | 
					      articleList: [
 | 
				
			||||||
        {title:'促销计算规则'},
 | 
					        { title: "促销计算规则" },
 | 
				
			||||||
        {title:'商家申请开店'},
 | 
					        { title: "商家申请开店" },
 | 
				
			||||||
        {title:'商家账号注册'},
 | 
					        { title: "商家账号注册" },
 | 
				
			||||||
        {title:'促销计算规则'}
 | 
					        { title: "促销计算规则" },
 | 
				
			||||||
      ]
 | 
					      ],
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  methods: {
 | 
					  methods: {
 | 
				
			||||||
    handleSelectModel () {
 | 
					    handleSelectModel() {
 | 
				
			||||||
      // 编辑模块
 | 
					      // 编辑模块
 | 
				
			||||||
      this.showModal = true;
 | 
					      this.showModal = true;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 添加轮播图
 | 
					    // 添加轮播图
 | 
				
			||||||
    handleAdd () {
 | 
					    handleAdd() {
 | 
				
			||||||
      this.data.options.list.push({ img: "", url: "" });
 | 
					      this.data.options.list.push({ img: "", url: "", type: "" });
 | 
				
			||||||
      this.$forceUpdate();
 | 
					      this.$forceUpdate();
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    handleSelectLink (item) {
 | 
					    handleSelectLink(item) {
 | 
				
			||||||
      // 选择链接
 | 
					      // 选择链接
 | 
				
			||||||
      this.$refs.liliDialog.open('link')
 | 
					      this.$refs.liliDialog.open("link");
 | 
				
			||||||
      this.selected = item;
 | 
					      this.selected = item;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    callbackSelected (item) { // 选择图片回调
 | 
					    callbackSelected(item) {
 | 
				
			||||||
 | 
					      // 选择图片回调
 | 
				
			||||||
      this.picModelFlag = false;
 | 
					      this.picModelFlag = false;
 | 
				
			||||||
      this.selected.img = item.url;
 | 
					      this.selected.img = item.url;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
| 
						 | 
					@ -165,10 +174,11 @@ export default {
 | 
				
			||||||
      // 删除图片
 | 
					      // 删除图片
 | 
				
			||||||
      this.data.options.list.splice(index, 1);
 | 
					      this.data.options.list.splice(index, 1);
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    selectedLink(val) { // 选择链接回调
 | 
					    selectedLink(val) {
 | 
				
			||||||
      console.log(val);
 | 
					      // 选择链接回调
 | 
				
			||||||
      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
					      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
				
			||||||
      console.log(this.selected.url);
 | 
					      this.selected.type =
 | 
				
			||||||
 | 
					        val.___type === "other" && val.url === "" ? "link" : "other";
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 选择图片
 | 
					    // 选择图片
 | 
				
			||||||
    handleSelectImg(item) {
 | 
					    handleSelectImg(item) {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,12 +1,12 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
  <div class="model-carousel1" :style="{background: bgColor}">
 | 
					  <div class="model-carousel1" :style="{ background: bgColor }">
 | 
				
			||||||
    <div class="nav-body clearfix">
 | 
					    <div class="nav-body clearfix">
 | 
				
			||||||
      <!-- 侧边导航 -->
 | 
					      <!-- 侧边导航 -->
 | 
				
			||||||
      <div class="nav-side">分类占位区</div>
 | 
					      <div class="nav-side">分类占位区</div>
 | 
				
			||||||
      <div class="nav-content setup-content">
 | 
					      <div class="nav-content setup-content">
 | 
				
			||||||
        <!-- 轮播图 -->
 | 
					        <!-- 轮播图 -->
 | 
				
			||||||
        <Carousel autoplay @on-change="autoChange">
 | 
					        <Carousel autoplay @on-change="autoChange">
 | 
				
			||||||
          <CarouselItem v-for="(item, index) in data.options.list" :key="index" >
 | 
					          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
 | 
				
			||||||
            <div style="overflow: hidden">
 | 
					            <div style="overflow: hidden">
 | 
				
			||||||
              <img :src="item.img" width="1200" height="470" />
 | 
					              <img :src="item.img" width="1200" height="470" />
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
| 
						 | 
					@ -26,14 +26,14 @@
 | 
				
			||||||
      width="800"
 | 
					      width="800"
 | 
				
			||||||
      :z-index="100"
 | 
					      :z-index="100"
 | 
				
			||||||
      :mask-closable="false"
 | 
					      :mask-closable="false"
 | 
				
			||||||
      
 | 
					 | 
				
			||||||
      
 | 
					 | 
				
			||||||
    >
 | 
					    >
 | 
				
			||||||
      <div class="modal-tab-bar">
 | 
					      <div class="modal-tab-bar">
 | 
				
			||||||
        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
 | 
					        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
 | 
				
			||||||
         
 | 
					         
 | 
				
			||||||
        <span class="ml_10">图片尺寸:{{ data.size }}</span>
 | 
					        <span class="ml_10">图片尺寸:{{ data.size }}</span>
 | 
				
			||||||
        <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片、点击颜色选择器选择背景色</span>
 | 
					        <span style="color: red" class="fz_12 ml_10"
 | 
				
			||||||
 | 
					          >点击缩略图替换图片、点击颜色选择器选择背景色</span
 | 
				
			||||||
 | 
					        >
 | 
				
			||||||
        <table cellspacing="0">
 | 
					        <table cellspacing="0">
 | 
				
			||||||
          <thead>
 | 
					          <thead>
 | 
				
			||||||
            <tr>
 | 
					            <tr>
 | 
				
			||||||
| 
						 | 
					@ -54,12 +54,15 @@
 | 
				
			||||||
                  alt=""
 | 
					                  alt=""
 | 
				
			||||||
                />
 | 
					                />
 | 
				
			||||||
              </td>
 | 
					              </td>
 | 
				
			||||||
              <td><Input v-model="item.url" disabled /></td>
 | 
					 | 
				
			||||||
              <td>
 | 
					              <td>
 | 
				
			||||||
                <Button
 | 
					                <Input
 | 
				
			||||||
                  type="info"
 | 
					                  class="outsideUrl"
 | 
				
			||||||
                  size="small"
 | 
					                  v-model="item.url"
 | 
				
			||||||
                  @click="handleSelectLink(item)"
 | 
					                  :disabled="!!item.type && item.type !== 'link'"
 | 
				
			||||||
 | 
					                />
 | 
				
			||||||
 | 
					              </td>
 | 
				
			||||||
 | 
					              <td>
 | 
				
			||||||
 | 
					                <Button type="info" size="small" @click="handleSelectLink(item)"
 | 
				
			||||||
                  >选择链接</Button
 | 
					                  >选择链接</Button
 | 
				
			||||||
                > 
 | 
					                > 
 | 
				
			||||||
                <ColorPicker size="small" v-model="item.bgColor" />
 | 
					                <ColorPicker size="small" v-model="item.bgColor" />
 | 
				
			||||||
| 
						 | 
					@ -78,11 +81,7 @@
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    </Modal>
 | 
					    </Modal>
 | 
				
			||||||
    <!-- 选择商品。链接 -->
 | 
					    <!-- 选择商品。链接 -->
 | 
				
			||||||
    <liliDialog
 | 
					    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
 | 
				
			||||||
      ref="liliDialog"
 | 
					 | 
				
			||||||
      @selectedLink="selectedLink"
 | 
					 | 
				
			||||||
    
 | 
					 | 
				
			||||||
    ></liliDialog>
 | 
					 | 
				
			||||||
    <!-- 选择图片 -->
 | 
					    <!-- 选择图片 -->
 | 
				
			||||||
    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
					    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
				
			||||||
      <ossManage @callback="callbackSelected" ref="ossManage" />
 | 
					      <ossManage @callback="callbackSelected" ref="ossManage" />
 | 
				
			||||||
| 
						 | 
					@ -96,39 +95,40 @@ export default {
 | 
				
			||||||
  name: "modelCarousel",
 | 
					  name: "modelCarousel",
 | 
				
			||||||
  props: ["data"],
 | 
					  props: ["data"],
 | 
				
			||||||
  components: {
 | 
					  components: {
 | 
				
			||||||
    ossManage
 | 
					    ossManage,
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  data() {
 | 
					  data() {
 | 
				
			||||||
    return {
 | 
					    return {
 | 
				
			||||||
      showModal: false, // modal显隐
 | 
					      showModal: false, // modal显隐
 | 
				
			||||||
      selected: null, // 已选数据
 | 
					      selected: null, // 已选数据
 | 
				
			||||||
      picModelFlag: false, // 选择图片modal
 | 
					      picModelFlag: false, // 选择图片modal
 | 
				
			||||||
      bgColor:'#fff'  // 轮播背景色
 | 
					      bgColor: "#fff", // 轮播背景色
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  mounted () {
 | 
					  mounted() {
 | 
				
			||||||
    this.bgColor = this.data.options.list[0].bgColor
 | 
					    this.bgColor = this.data.options.list[0].bgColor;
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  methods: {
 | 
					  methods: {
 | 
				
			||||||
    handleSelectModel () {
 | 
					    handleSelectModel() {
 | 
				
			||||||
      // 编辑模块
 | 
					      // 编辑模块
 | 
				
			||||||
      this.showModal = true;
 | 
					      this.showModal = true;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 自动切换时改变背景色
 | 
					    // 自动切换时改变背景色
 | 
				
			||||||
    autoChange (oVal,val) {
 | 
					    autoChange(oVal, val) {
 | 
				
			||||||
      this.bgColor = this.data.options.list[val].bgColor
 | 
					      this.bgColor = this.data.options.list[val].bgColor;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 添加轮播图片和链接
 | 
					    // 添加轮播图片和链接
 | 
				
			||||||
    handleAdd () {
 | 
					    handleAdd() {
 | 
				
			||||||
      this.data.options.list.push({ img: "", url: "", bgColor: '#fff' });
 | 
					      this.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
 | 
				
			||||||
      this.$forceUpdate();
 | 
					      this.$forceUpdate();
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 打开选择链接modal
 | 
					    // 打开选择链接modal
 | 
				
			||||||
    handleSelectLink (item) {
 | 
					    handleSelectLink(item) {
 | 
				
			||||||
      this.$refs.liliDialog.open('link')
 | 
					      this.$refs.liliDialog.open("link");
 | 
				
			||||||
      this.selected = item;
 | 
					      this.selected = item;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    callbackSelected (item) { // 选择图片回调
 | 
					    callbackSelected(item) {
 | 
				
			||||||
 | 
					      // 选择图片回调
 | 
				
			||||||
      this.picModelFlag = false;
 | 
					      this.picModelFlag = false;
 | 
				
			||||||
      this.selected.img = item.url;
 | 
					      this.selected.img = item.url;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
| 
						 | 
					@ -136,15 +136,18 @@ export default {
 | 
				
			||||||
    handleDel(index) {
 | 
					    handleDel(index) {
 | 
				
			||||||
      this.data.options.list.splice(index, 1);
 | 
					      this.data.options.list.splice(index, 1);
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    selectedLink(val) { // 选择链接回调
 | 
					    selectedLink(val) {
 | 
				
			||||||
 | 
					      // 选择链接回调
 | 
				
			||||||
      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
					      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
				
			||||||
 | 
					      this.selected.type =
 | 
				
			||||||
 | 
					        val.___type === "other" && val.url === "" ? "link" : "other";
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 打开选择图片modal
 | 
					    // 打开选择图片modal
 | 
				
			||||||
    handleSelectImg(item) {
 | 
					    handleSelectImg(item) {
 | 
				
			||||||
      this.selected = item;
 | 
					      this.selected = item;
 | 
				
			||||||
      this.$refs.ossManage.selectImage = true;
 | 
					      this.$refs.ossManage.selectImage = true;
 | 
				
			||||||
      this.picModelFlag = true;
 | 
					      this.picModelFlag = true;
 | 
				
			||||||
    }
 | 
					    },
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
| 
						 | 
					@ -163,14 +166,13 @@ export default {
 | 
				
			||||||
  width: 1200px;
 | 
					  width: 1200px;
 | 
				
			||||||
  height: 470px;
 | 
					  height: 470px;
 | 
				
			||||||
  margin: 0px auto;
 | 
					  margin: 0px auto;
 | 
				
			||||||
  
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
.nav-side {
 | 
					.nav-side {
 | 
				
			||||||
  height: 100%;
 | 
					  height: 100%;
 | 
				
			||||||
  width: 200px;
 | 
					  width: 200px;
 | 
				
			||||||
  padding: 0px;
 | 
					  padding: 0px;
 | 
				
			||||||
  color: #fff;
 | 
					  color: #fff;
 | 
				
			||||||
  background-color:rgba(0,0,0,.5);
 | 
					  background-color: rgba(0, 0, 0, 0.5);
 | 
				
			||||||
  line-height: 470px;
 | 
					  line-height: 470px;
 | 
				
			||||||
  text-align: center;
 | 
					  text-align: center;
 | 
				
			||||||
  position: absolute;
 | 
					  position: absolute;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -21,7 +21,10 @@
 | 
				
			||||||
      <div class="nav-content1 setup-content">
 | 
					      <div class="nav-content1 setup-content">
 | 
				
			||||||
        <!-- 轮播图 -->
 | 
					        <!-- 轮播图 -->
 | 
				
			||||||
        <Carousel autoplay :autoplay-speed="5000">
 | 
					        <Carousel autoplay :autoplay-speed="5000">
 | 
				
			||||||
          <CarouselItem v-for="(item, index) in data.options.listRight" :key="index">
 | 
					          <CarouselItem
 | 
				
			||||||
 | 
					            v-for="(item, index) in data.options.listRight"
 | 
				
			||||||
 | 
					            :key="index"
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
            <div class="mb_10">
 | 
					            <div class="mb_10">
 | 
				
			||||||
              <img :src="item[0].img" width="190" height="150" />
 | 
					              <img :src="item[0].img" width="190" height="150" />
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
| 
						 | 
					@ -43,7 +46,9 @@
 | 
				
			||||||
        <div class="person-msg">
 | 
					        <div class="person-msg">
 | 
				
			||||||
          <img :src="userInfo.face" v-if="userInfo.face" alt />
 | 
					          <img :src="userInfo.face" v-if="userInfo.face" alt />
 | 
				
			||||||
          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
 | 
					          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
 | 
				
			||||||
          <div>Hi,{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
 | 
					          <div>
 | 
				
			||||||
 | 
					            Hi,{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
          <div v-if="userInfo.id">
 | 
					          <div v-if="userInfo.id">
 | 
				
			||||||
            <Button type="error" shape="circle">会员中心</Button>
 | 
					            <Button type="error" shape="circle">会员中心</Button>
 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
| 
						 | 
					@ -55,8 +60,13 @@
 | 
				
			||||||
          <div>
 | 
					          <div>
 | 
				
			||||||
            <span>常见问题</span>
 | 
					            <span>常见问题</span>
 | 
				
			||||||
            <ul class="article-list">
 | 
					            <ul class="article-list">
 | 
				
			||||||
              <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
 | 
					              <li
 | 
				
			||||||
                {{article.title}}
 | 
					                class="ellipsis"
 | 
				
			||||||
 | 
					                :alt="article.title"
 | 
				
			||||||
 | 
					                v-for="(article, index) in articleList"
 | 
				
			||||||
 | 
					                :key="index"
 | 
				
			||||||
 | 
					              >
 | 
				
			||||||
 | 
					                {{ article.title }}
 | 
				
			||||||
              </li>
 | 
					              </li>
 | 
				
			||||||
            </ul>
 | 
					            </ul>
 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
| 
						 | 
					@ -97,13 +107,17 @@
 | 
				
			||||||
                  alt=""
 | 
					                  alt=""
 | 
				
			||||||
                />
 | 
					                />
 | 
				
			||||||
              </td>
 | 
					              </td>
 | 
				
			||||||
              <td><Input v-model="item.url" disabled /></td>
 | 
					 | 
				
			||||||
              <td>
 | 
					              <td>
 | 
				
			||||||
                <Button
 | 
					                <Input
 | 
				
			||||||
                  type="info"
 | 
					                  class="outsideUrl"
 | 
				
			||||||
                  size="small"
 | 
					                  v-model="item.url"
 | 
				
			||||||
                  @click="handleSelectLink(item)"
 | 
					                  :disabled="!!item.type && item.type !== 'link'"
 | 
				
			||||||
                  >选择链接</Button> 
 | 
					                />
 | 
				
			||||||
 | 
					              </td>
 | 
				
			||||||
 | 
					              <td>
 | 
				
			||||||
 | 
					                <Button type="info" size="small" @click="handleSelectLink(item)"
 | 
				
			||||||
 | 
					                  >选择链接</Button
 | 
				
			||||||
 | 
					                > 
 | 
				
			||||||
                <Button
 | 
					                <Button
 | 
				
			||||||
                  type="error"
 | 
					                  type="error"
 | 
				
			||||||
                  ghost
 | 
					                  ghost
 | 
				
			||||||
| 
						 | 
					@ -127,12 +141,23 @@
 | 
				
			||||||
      :mask-closable="false"
 | 
					      :mask-closable="false"
 | 
				
			||||||
    >
 | 
					    >
 | 
				
			||||||
      <div class="modal-tab-bar">
 | 
					      <div class="modal-tab-bar">
 | 
				
			||||||
        <Button type="primary" size="small" @click="handleAddGroup">添加组</Button>
 | 
					        <Button type="primary" size="small" @click="handleAddGroup"
 | 
				
			||||||
 | 
					          >添加组</Button
 | 
				
			||||||
 | 
					        >
 | 
				
			||||||
         
 | 
					         
 | 
				
			||||||
        <span class="ml_10">图片尺寸:{{ data.size }}</span>
 | 
					        <span class="ml_10">图片尺寸:{{ data.size }}</span>
 | 
				
			||||||
        <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
 | 
					        <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
 | 
				
			||||||
        <Tabs type="card" closable @on-tab-remove="handleTabRemove" class="mt_10">
 | 
					        <Tabs
 | 
				
			||||||
          <TabPane :label="'图片组'+(gIndex+1)" v-for="(group, gIndex) in data.options.listRight" :key="gIndex">
 | 
					          type="card"
 | 
				
			||||||
 | 
					          closable
 | 
				
			||||||
 | 
					          @on-tab-remove="handleTabRemove"
 | 
				
			||||||
 | 
					          class="mt_10"
 | 
				
			||||||
 | 
					        >
 | 
				
			||||||
 | 
					          <TabPane
 | 
				
			||||||
 | 
					            :label="'图片组' + (gIndex + 1)"
 | 
				
			||||||
 | 
					            v-for="(group, gIndex) in data.options.listRight"
 | 
				
			||||||
 | 
					            :key="gIndex"
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
            <table cellspacing="0">
 | 
					            <table cellspacing="0">
 | 
				
			||||||
              <thead>
 | 
					              <thead>
 | 
				
			||||||
                <tr>
 | 
					                <tr>
 | 
				
			||||||
| 
						 | 
					@ -153,28 +178,30 @@
 | 
				
			||||||
                      alt=""
 | 
					                      alt=""
 | 
				
			||||||
                    />
 | 
					                    />
 | 
				
			||||||
                  </td>
 | 
					                  </td>
 | 
				
			||||||
                  <td><Input v-model="item.url" disabled /></td>
 | 
					                  <td>
 | 
				
			||||||
 | 
					                    <Input
 | 
				
			||||||
 | 
					                      class="outsideUrl"
 | 
				
			||||||
 | 
					                      v-model="item.url"
 | 
				
			||||||
 | 
					                      :disabled="!!item.type && item.type !== 'link'"
 | 
				
			||||||
 | 
					                    />
 | 
				
			||||||
 | 
					                  </td>
 | 
				
			||||||
                  <td>
 | 
					                  <td>
 | 
				
			||||||
                    <Button
 | 
					                    <Button
 | 
				
			||||||
                      type="info"
 | 
					                      type="info"
 | 
				
			||||||
                      size="small"
 | 
					                      size="small"
 | 
				
			||||||
                      @click="handleSelectLink(item)"
 | 
					                      @click="handleSelectLink(item)"
 | 
				
			||||||
                      >选择链接</Button>
 | 
					                      >选择链接</Button
 | 
				
			||||||
 | 
					                    >
 | 
				
			||||||
                  </td>
 | 
					                  </td>
 | 
				
			||||||
                </tr>
 | 
					                </tr>
 | 
				
			||||||
              </tbody>
 | 
					              </tbody>
 | 
				
			||||||
            </table>
 | 
					            </table>
 | 
				
			||||||
          </TabPane>
 | 
					          </TabPane>
 | 
				
			||||||
        </Tabs>
 | 
					        </Tabs>
 | 
				
			||||||
        
 | 
					 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    </Modal>
 | 
					    </Modal>
 | 
				
			||||||
    <!-- 选择商品。链接 -->
 | 
					    <!-- 选择商品。链接 -->
 | 
				
			||||||
    <liliDialog
 | 
					    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
 | 
				
			||||||
      ref="liliDialog"
 | 
					 | 
				
			||||||
      @selectedLink="selectedLink"
 | 
					 | 
				
			||||||
     
 | 
					 | 
				
			||||||
    ></liliDialog>
 | 
					 | 
				
			||||||
    <!-- 选择图片 -->
 | 
					    <!-- 选择图片 -->
 | 
				
			||||||
    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
					    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
				
			||||||
      <ossManage @callback="callbackSelected" ref="ossManage" />
 | 
					      <ossManage @callback="callbackSelected" ref="ossManage" />
 | 
				
			||||||
| 
						 | 
					@ -188,51 +215,52 @@ export default {
 | 
				
			||||||
  name: "modelCarousel",
 | 
					  name: "modelCarousel",
 | 
				
			||||||
  props: ["data"],
 | 
					  props: ["data"],
 | 
				
			||||||
  components: {
 | 
					  components: {
 | 
				
			||||||
    ossManage
 | 
					    ossManage,
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  data() {
 | 
					  data() {
 | 
				
			||||||
    return {
 | 
					    return {
 | 
				
			||||||
      showModal: false, // modal显隐
 | 
					      showModal: false, // modal显隐
 | 
				
			||||||
      selected: null, // 已选数据
 | 
					      selected: null, // 已选数据
 | 
				
			||||||
      picModelFlag: false, // 选择图片modal
 | 
					      picModelFlag: false, // 选择图片modal
 | 
				
			||||||
      userInfo:{},
 | 
					      userInfo: {},
 | 
				
			||||||
      articleList:[
 | 
					      articleList: [
 | 
				
			||||||
        {title:'促销计算规则'},
 | 
					        { title: "促销计算规则" },
 | 
				
			||||||
        {title:'商家申请开店'},
 | 
					        { title: "商家申请开店" },
 | 
				
			||||||
        {title:'商家账号注册'},
 | 
					        { title: "商家账号注册" },
 | 
				
			||||||
        {title:'促销计算规则'}
 | 
					        { title: "促销计算规则" },
 | 
				
			||||||
      ]
 | 
					      ],
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  methods: {
 | 
					  methods: {
 | 
				
			||||||
    handleSelectModel () {
 | 
					    handleSelectModel() {
 | 
				
			||||||
      // 编辑模块
 | 
					      // 编辑模块
 | 
				
			||||||
      this.showModal = true;
 | 
					      this.showModal = true;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 添加轮播
 | 
					    // 添加轮播
 | 
				
			||||||
    handleAdd () {
 | 
					    handleAdd() {
 | 
				
			||||||
      this.data.options.list.push({ img: "", url: "" });
 | 
					      this.data.options.list.push({ img: "", url: "" });
 | 
				
			||||||
      this.$forceUpdate();
 | 
					      this.$forceUpdate();
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 添加图片组
 | 
					    // 添加图片组
 | 
				
			||||||
    handleAddGroup () {
 | 
					    handleAddGroup() {
 | 
				
			||||||
      this.data.options.listRight.push([
 | 
					      this.data.options.listRight.push([
 | 
				
			||||||
        {img:'',url:''},
 | 
					        { img: "", url: "" },
 | 
				
			||||||
        {img:'',url:''},
 | 
					        { img: "", url: "" },
 | 
				
			||||||
        {img:'',url:''}
 | 
					        { img: "", url: "" },
 | 
				
			||||||
      ])
 | 
					      ]);
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 删除图片组
 | 
					    // 删除图片组
 | 
				
			||||||
    handleTabRemove  (index) {
 | 
					    handleTabRemove(index) {
 | 
				
			||||||
      this.data.options.listRight.splice(index, 1)
 | 
					      this.data.options.listRight.splice(index, 1);
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 打开图片链接
 | 
					    // 打开图片链接
 | 
				
			||||||
    handleSelectLink (item) {
 | 
					    handleSelectLink(item) {
 | 
				
			||||||
      this.$refs.liliDialog.open('link')
 | 
					      this.$refs.liliDialog.open("link");
 | 
				
			||||||
      this.selected = item;
 | 
					      this.selected = item;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    callbackSelected (item) { // 选择图片回调
 | 
					    callbackSelected(item) {
 | 
				
			||||||
 | 
					      // 选择图片回调
 | 
				
			||||||
      this.picModelFlag = false;
 | 
					      this.picModelFlag = false;
 | 
				
			||||||
      this.selected.img = item.url;
 | 
					      this.selected.img = item.url;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
| 
						 | 
					@ -240,10 +268,11 @@ export default {
 | 
				
			||||||
    handleDel(index) {
 | 
					    handleDel(index) {
 | 
				
			||||||
      this.data.options.list.splice(index, 1);
 | 
					      this.data.options.list.splice(index, 1);
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    selectedLink(val) { // 选择链接回调
 | 
					    selectedLink(val) {
 | 
				
			||||||
      console.log(val);
 | 
					      // 选择链接回调
 | 
				
			||||||
      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
					      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
				
			||||||
      console.log(this.selected.url);
 | 
					      this.selected.type =
 | 
				
			||||||
 | 
					        val.___type === "other" && val.url === "" ? "link" : "other";
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 打开选择图片modal
 | 
					    // 打开选择图片modal
 | 
				
			||||||
    handleSelectImg(item) {
 | 
					    handleSelectImg(item) {
 | 
				
			||||||
| 
						 | 
					@ -294,7 +323,8 @@ export default {
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/*导航内容*/
 | 
					/*导航内容*/
 | 
				
			||||||
.nav-content,.nav-content1 {
 | 
					.nav-content,
 | 
				
			||||||
 | 
					.nav-content1 {
 | 
				
			||||||
  width: 590px;
 | 
					  width: 590px;
 | 
				
			||||||
  height: 470px;
 | 
					  height: 470px;
 | 
				
			||||||
  overflow: hidden;
 | 
					  overflow: hidden;
 | 
				
			||||||
| 
						 | 
					@ -302,7 +332,7 @@ export default {
 | 
				
			||||||
  position: relative;
 | 
					  position: relative;
 | 
				
			||||||
  margin-left: 10px;
 | 
					  margin-left: 10px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
.nav-content1{
 | 
					.nav-content1 {
 | 
				
			||||||
  width: 190px;
 | 
					  width: 190px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
.nav-right {
 | 
					.nav-right {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,162 +1,198 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
    <div class="first-page-advert">
 | 
					  <div class="first-page-advert">
 | 
				
			||||||
        <div class="item setup-content" :style="{backgroundImage:`linear-gradient(to right, ${item.fromColor}, ${item.toColor})`}" v-for="(item, index) in options.list" :key="index">
 | 
					    <div
 | 
				
			||||||
            <div>
 | 
					      class="item setup-content"
 | 
				
			||||||
                <span class="line top-line"></span>
 | 
					      :style="{
 | 
				
			||||||
                <p>{{item.name}}</p>
 | 
					        backgroundImage: `linear-gradient(to right, ${item.fromColor}, ${item.toColor})`,
 | 
				
			||||||
                <span class="line btm-line"></span>
 | 
					      }"
 | 
				
			||||||
                <p>{{item.describe}}</p>
 | 
					      v-for="(item, index) in options.list"
 | 
				
			||||||
            </div>
 | 
					      :key="index"
 | 
				
			||||||
            <img :src="item.img" width="170" height="170" alt="">
 | 
					    >
 | 
				
			||||||
            <div class="setup-box">
 | 
					      <div>
 | 
				
			||||||
                <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
 | 
					        <span class="line top-line"></span>
 | 
				
			||||||
            </div>
 | 
					        <p>{{ item.name }}</p>
 | 
				
			||||||
 | 
					        <span class="line btm-line"></span>
 | 
				
			||||||
 | 
					        <p>{{ item.describe }}</p>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					      <img :src="item.img" width="170" height="170" alt="" />
 | 
				
			||||||
 | 
					      <div class="setup-box">
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          <Button size="small" @click.stop="handleSelectModel(item)"
 | 
				
			||||||
 | 
					            >编辑</Button
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
        <Modal
 | 
					      </div>
 | 
				
			||||||
            v-model="showModal"
 | 
					 | 
				
			||||||
            title="装修"
 | 
					 | 
				
			||||||
            draggable
 | 
					 | 
				
			||||||
            width="800"
 | 
					 | 
				
			||||||
            :z-index="100"
 | 
					 | 
				
			||||||
            :mask-closable="false"
 | 
					 | 
				
			||||||
            
 | 
					 | 
				
			||||||
            
 | 
					 | 
				
			||||||
            >
 | 
					 | 
				
			||||||
            <div class="modal-top-advert">
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    <img class="show-image" width="170" height="170"  :src="selected.img" alt />
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    <span>图片主标题:</span><Input v-model="selected.name" />
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    <span>图片描述:</span><Input v-model="selected.describe" />
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div class="tips">
 | 
					 | 
				
			||||||
                    建议尺寸:<span>{{ selected.size }}</span>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    图片链接:<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    <span>渐变背景色:</span><Input v-model="selected.fromColor" /> <ColorPicker v-if="selected.fromColor" v-model="selected.fromColor" />
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    <span>渐变背景色:</span><Input v-model="selected.toColor" /> <ColorPicker v-if="selected.toColor" v-model="selected.toColor" />
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div :style="{backgroundImage:`linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`}" class="exhibition"></div>
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    选择图片:<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button> 
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
        </Modal>
 | 
					 | 
				
			||||||
        <!-- 选择商品。链接 -->
 | 
					 | 
				
			||||||
        <liliDialog
 | 
					 | 
				
			||||||
            ref="liliDialog"
 | 
					 | 
				
			||||||
            @selectedLink="selectedLink"
 | 
					 | 
				
			||||||
          
 | 
					 | 
				
			||||||
        ></liliDialog>
 | 
					 | 
				
			||||||
        <!-- 选择图片 -->
 | 
					 | 
				
			||||||
        <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
					 | 
				
			||||||
            <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
 | 
					 | 
				
			||||||
        </Modal>
 | 
					 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					    <Modal
 | 
				
			||||||
 | 
					      v-model="showModal"
 | 
				
			||||||
 | 
					      title="装修"
 | 
				
			||||||
 | 
					      draggable
 | 
				
			||||||
 | 
					      width="800"
 | 
				
			||||||
 | 
					      :z-index="100"
 | 
				
			||||||
 | 
					      :mask-closable="false"
 | 
				
			||||||
 | 
					    >
 | 
				
			||||||
 | 
					      <div class="modal-top-advert">
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          <img
 | 
				
			||||||
 | 
					            class="show-image"
 | 
				
			||||||
 | 
					            width="170"
 | 
				
			||||||
 | 
					            height="170"
 | 
				
			||||||
 | 
					            :src="selected.img"
 | 
				
			||||||
 | 
					            alt
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div><span>图片主标题:</span><Input v-model="selected.name" /></div>
 | 
				
			||||||
 | 
					        <div><span>图片描述:</span><Input v-model="selected.describe" /></div>
 | 
				
			||||||
 | 
					        <div class="tips">
 | 
				
			||||||
 | 
					          建议尺寸:<span>{{ selected.size }}</span>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          图片链接:<Input
 | 
				
			||||||
 | 
					            class="outsideUrl"
 | 
				
			||||||
 | 
					            v-model="selected.url"
 | 
				
			||||||
 | 
					            :disabled="!!selected.type && selected.type !== 'link'"
 | 
				
			||||||
 | 
					            placeholder="https://"
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
 | 
					          <Button size="small" type="primary" @click="handleSelectLink"
 | 
				
			||||||
 | 
					            >选择链接</Button
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          <span>渐变背景色:</span><Input v-model="selected.fromColor" />
 | 
				
			||||||
 | 
					          <ColorPicker v-if="selected.fromColor" v-model="selected.fromColor" />
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          <span>渐变背景色:</span><Input v-model="selected.toColor" />
 | 
				
			||||||
 | 
					          <ColorPicker v-if="selected.toColor" v-model="selected.toColor" />
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div
 | 
				
			||||||
 | 
					          :style="{
 | 
				
			||||||
 | 
					            backgroundImage: `linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`,
 | 
				
			||||||
 | 
					          }"
 | 
				
			||||||
 | 
					          class="exhibition"
 | 
				
			||||||
 | 
					        ></div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          选择图片:<Button size="small" type="primary" @click="handleSelectImg"
 | 
				
			||||||
 | 
					            >选择图片</Button
 | 
				
			||||||
 | 
					          > 
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </Modal>
 | 
				
			||||||
 | 
					    <!-- 选择商品。链接 -->
 | 
				
			||||||
 | 
					    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
 | 
				
			||||||
 | 
					    <!-- 选择图片 -->
 | 
				
			||||||
 | 
					    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
				
			||||||
 | 
					      <ossManage
 | 
				
			||||||
 | 
					        @callback="callbackSelected"
 | 
				
			||||||
 | 
					        :isComponent="true"
 | 
				
			||||||
 | 
					        ref="ossManage"
 | 
				
			||||||
 | 
					      />
 | 
				
			||||||
 | 
					    </Modal>
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
import ossManage from "@/views/sys/oss-manage/ossManage";
 | 
					import ossManage from "@/views/sys/oss-manage/ossManage";
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
    props:{
 | 
					  props: {
 | 
				
			||||||
        data: {
 | 
					    data: {
 | 
				
			||||||
            type: Object,
 | 
					      type: Object,
 | 
				
			||||||
            default: null
 | 
					      default: null,
 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    components: {ossManage},
 | 
					  },
 | 
				
			||||||
    data() {
 | 
					  components: { ossManage },
 | 
				
			||||||
        return {
 | 
					  data() {
 | 
				
			||||||
            options: this.data.options, // 当前类型数据
 | 
					    return {
 | 
				
			||||||
            showModal: false, // modal显隐
 | 
					      options: this.data.options, // 当前类型数据
 | 
				
			||||||
            selected: {}, // 已选数据
 | 
					      showModal: false, // modal显隐
 | 
				
			||||||
            picModelFlag: false // 图片选择器
 | 
					      selected: {}, // 已选数据
 | 
				
			||||||
        }
 | 
					      picModelFlag: false, // 图片选择器
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  methods: {
 | 
				
			||||||
 | 
					    // 打开装修modal
 | 
				
			||||||
 | 
					    handleSelectModel(item, type) {
 | 
				
			||||||
 | 
					      this.selected = item;
 | 
				
			||||||
 | 
					      this.showModal = true;
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    methods:{
 | 
					    handleSelectLink(item, index) {
 | 
				
			||||||
        // 打开装修modal
 | 
					      // 调起选择链接弹窗
 | 
				
			||||||
        handleSelectModel (item,type) {
 | 
					      this.$refs.liliDialog.open("link");
 | 
				
			||||||
            this.selected = item;
 | 
					    },
 | 
				
			||||||
            this.showModal = true
 | 
					    // 选择链接回调
 | 
				
			||||||
        },
 | 
					    selectedLink(val) {
 | 
				
			||||||
        handleSelectLink(item,index) { // 调起选择链接弹窗
 | 
					      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
				
			||||||
            this.$refs.liliDialog.open('link')
 | 
					      this.selected.type =
 | 
				
			||||||
        },
 | 
					        val.___type === "other" && val.url === "" ? "link" : "other";
 | 
				
			||||||
        // 选择链接回调
 | 
					    },
 | 
				
			||||||
        selectedLink(val) {
 | 
					    handleSelectImg() {
 | 
				
			||||||
            this.selected.url = this.$options.filters.formatLinkType(val);;
 | 
					      // 选择图片
 | 
				
			||||||
        },
 | 
					      this.$refs.ossManage.selectImage = true;
 | 
				
			||||||
        handleSelectImg(){ // 选择图片
 | 
					      this.picModelFlag = true;
 | 
				
			||||||
            this.$refs.ossManage.selectImage = true;
 | 
					    },
 | 
				
			||||||
            this.picModelFlag = true;
 | 
					    // 选择图片回调
 | 
				
			||||||
        },
 | 
					    callbackSelected(val) {
 | 
				
			||||||
        // 选择图片回调
 | 
					      this.picModelFlag = false;
 | 
				
			||||||
        callbackSelected (val) {
 | 
					      this.selected.img = val.url;
 | 
				
			||||||
            this.picModelFlag = false;
 | 
					    },
 | 
				
			||||||
            this.selected.img = val.url;
 | 
					  },
 | 
				
			||||||
        }
 | 
					};
 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
<style lang="scss" scoped>
 | 
					<style lang="scss" scoped>
 | 
				
			||||||
@import './setup-box.scss';
 | 
					@import "./setup-box.scss";
 | 
				
			||||||
.first-page-advert{
 | 
					.first-page-advert {
 | 
				
			||||||
 | 
					  display: flex;
 | 
				
			||||||
 | 
					  flex-wrap: wrap;
 | 
				
			||||||
 | 
					  justify-content: space-between;
 | 
				
			||||||
 | 
					  // margin-top: -10px;
 | 
				
			||||||
 | 
					  .item {
 | 
				
			||||||
 | 
					    width: 393px;
 | 
				
			||||||
 | 
					    height: 170px;
 | 
				
			||||||
 | 
					    margin-top: 10px;
 | 
				
			||||||
    display: flex;
 | 
					    display: flex;
 | 
				
			||||||
    flex-wrap: wrap;
 | 
					    align-items: center;
 | 
				
			||||||
    justify-content: space-between;
 | 
					    justify-content: center;
 | 
				
			||||||
    // margin-top: -10px;
 | 
					    img {
 | 
				
			||||||
    .item{
 | 
					      margin-left: 20px;
 | 
				
			||||||
        width: 393px;
 | 
					 | 
				
			||||||
        height: 170px;
 | 
					 | 
				
			||||||
        margin-top: 10px;
 | 
					 | 
				
			||||||
        display: flex;
 | 
					 | 
				
			||||||
        align-items: center;
 | 
					 | 
				
			||||||
        justify-content: center;
 | 
					 | 
				
			||||||
        img{margin-left: 20px;}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        p:nth-of-type(1){
 | 
					 | 
				
			||||||
            margin: 3px 0;
 | 
					 | 
				
			||||||
            font-size: 18px;
 | 
					 | 
				
			||||||
            color: #fff;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        p:nth-of-type(2){
 | 
					 | 
				
			||||||
            margin-top: 3px;
 | 
					 | 
				
			||||||
            color: #fff;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .line{
 | 
					 | 
				
			||||||
        position: relative;
 | 
					 | 
				
			||||||
        display: block;
 | 
					 | 
				
			||||||
        height: 2px;
 | 
					 | 
				
			||||||
        background: url(../../../assets/festival_icon.png);
 | 
					 | 
				
			||||||
        z-index: 1;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .top-line{
 | 
					 | 
				
			||||||
        width: 78px;
 | 
					 | 
				
			||||||
        background-position: -1px -3px;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .btm-line{
 | 
					 | 
				
			||||||
        background-position: 0 -11px;
 | 
					 | 
				
			||||||
        width: 154px;
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    &:nth-of-type(1),
 | 
				
			||||||
 | 
					    &:nth-of-type(2),
 | 
				
			||||||
 | 
					    &:nth-of-type(3) {
 | 
				
			||||||
 | 
					      margin-top: 0;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    p:nth-of-type(1) {
 | 
				
			||||||
 | 
					      margin: 3px 0;
 | 
				
			||||||
 | 
					      font-size: 18px;
 | 
				
			||||||
 | 
					      color: #fff;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    p:nth-of-type(2) {
 | 
				
			||||||
 | 
					      margin-top: 3px;
 | 
				
			||||||
 | 
					      color: #fff;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .line {
 | 
				
			||||||
 | 
					    position: relative;
 | 
				
			||||||
 | 
					    display: block;
 | 
				
			||||||
 | 
					    height: 2px;
 | 
				
			||||||
 | 
					    background: url(../../../assets/festival_icon.png);
 | 
				
			||||||
 | 
					    z-index: 1;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .top-line {
 | 
				
			||||||
 | 
					    width: 78px;
 | 
				
			||||||
 | 
					    background-position: -1px -3px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .btm-line {
 | 
				
			||||||
 | 
					    background-position: 0 -11px;
 | 
				
			||||||
 | 
					    width: 154px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
.modal-top-advert{
 | 
					.modal-top-advert {
 | 
				
			||||||
    align-items: start;
 | 
					  align-items: start;
 | 
				
			||||||
    padding: 0 30px;
 | 
					  padding: 0 30px;
 | 
				
			||||||
    .exhibition{
 | 
					  .exhibition {
 | 
				
			||||||
        width: 300px;
 | 
					    width: 300px;
 | 
				
			||||||
        height: 50px;
 | 
					    height: 50px;
 | 
				
			||||||
    }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
| 
						 | 
					@ -1,339 +1,446 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
    <div class="new-goods">
 | 
					  <div class="new-goods">
 | 
				
			||||||
 | 
					    <div class="left">
 | 
				
			||||||
        <div class="left">
 | 
					      <div
 | 
				
			||||||
            <div class="top-header setup-content" :style="{background:options.left.bgColor}">
 | 
					        class="top-header setup-content"
 | 
				
			||||||
                <span>{{options.left.title}}</span>
 | 
					        :style="{ background: options.left.bgColor }"
 | 
				
			||||||
                <span>{{options.left.secondTitle}} ></span>
 | 
					      >
 | 
				
			||||||
                <div class="setup-box">
 | 
					        <span>{{ options.left.title }}</span>
 | 
				
			||||||
                    <div><Button size="small" @click.stop="handleSelectModel(options.left,true)">编辑</Button></div>
 | 
					        <span>{{ options.left.secondTitle }} ></span>
 | 
				
			||||||
                </div>
 | 
					        <div class="setup-box">
 | 
				
			||||||
            </div>
 | 
					          <div>
 | 
				
			||||||
            <div class="content">
 | 
					            <Button
 | 
				
			||||||
                <div class="con-item setup-content" v-for="(item, index) in options.left.list" :key="index">
 | 
					              size="small"
 | 
				
			||||||
                    <div>
 | 
					              @click.stop="handleSelectModel(options.left, true)"
 | 
				
			||||||
                        <p>{{item.name}}</p>
 | 
					              >编辑</Button
 | 
				
			||||||
                        <p class="describe">{{item.describe}}</p>
 | 
					 | 
				
			||||||
                    </div>
 | 
					 | 
				
			||||||
                    <img :src="item.img" alt="">
 | 
					 | 
				
			||||||
                    <div class="setup-box">
 | 
					 | 
				
			||||||
                        <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
 | 
					 | 
				
			||||||
                    </div>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <div class="middle">
 | 
					 | 
				
			||||||
            <div class="top-header setup-content" :style="{background:options.middle.bgColor}">
 | 
					 | 
				
			||||||
                <span>{{options.middle.title}}</span>
 | 
					 | 
				
			||||||
                <span>{{options.middle.secondTitle}} ></span>
 | 
					 | 
				
			||||||
                <div class="setup-box">
 | 
					 | 
				
			||||||
                    <div><Button size="small" @click.stop="handleSelectModel(options.middle,true)">编辑</Button></div>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="content">
 | 
					 | 
				
			||||||
                <div class="con-item setup-content" v-for="(item, index) in options.middle.list" :key="index">
 | 
					 | 
				
			||||||
                    <div>
 | 
					 | 
				
			||||||
                        <p>{{item.name}}</p>
 | 
					 | 
				
			||||||
                        <p class="describe">{{item.describe}}</p>
 | 
					 | 
				
			||||||
                    </div>
 | 
					 | 
				
			||||||
                    <img :src="item.img" alt="">
 | 
					 | 
				
			||||||
                    <div class="setup-box">
 | 
					 | 
				
			||||||
                        <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
 | 
					 | 
				
			||||||
                    </div>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <div class="right">
 | 
					 | 
				
			||||||
            <div class="top-header setup-content" :style="{background:options.right.bgColor}">
 | 
					 | 
				
			||||||
                <span>{{options.right.title}}</span>
 | 
					 | 
				
			||||||
                <span>{{options.right.secondTitle}} ></span>
 | 
					 | 
				
			||||||
                <div class="setup-box">
 | 
					 | 
				
			||||||
                    <div><Button size="small" @click.stop="handleSelectModel(options.right,true)">编辑</Button></div>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="content">
 | 
					 | 
				
			||||||
                <div class="setup-content" v-for="(item, index) in options.right.list" :key="index">
 | 
					 | 
				
			||||||
                    <img :src="item.img" alt="">
 | 
					 | 
				
			||||||
                    <p>{{item.name}}</p>
 | 
					 | 
				
			||||||
                    <p>{{item.price | unitPrice('¥')}}</p>
 | 
					 | 
				
			||||||
                    <div class="jiaobiao" :class="'jiaobiao'+(index+1)">{{index+1}}</div>
 | 
					 | 
				
			||||||
                    <div class="setup-box">
 | 
					 | 
				
			||||||
                        <div><Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button></div>
 | 
					 | 
				
			||||||
                    </div>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
        <!-- 装修内容 -->
 | 
					 | 
				
			||||||
        <Modal
 | 
					 | 
				
			||||||
            v-model="showModal"
 | 
					 | 
				
			||||||
            title="装修"
 | 
					 | 
				
			||||||
            draggable
 | 
					 | 
				
			||||||
            width="800"
 | 
					 | 
				
			||||||
            :z-index="100"
 | 
					 | 
				
			||||||
            :mask-closable="false"
 | 
					 | 
				
			||||||
            
 | 
					 | 
				
			||||||
            
 | 
					 | 
				
			||||||
            >
 | 
					            >
 | 
				
			||||||
            <div class="modal-top-advert">
 | 
					          </div>
 | 
				
			||||||
                <div>
 | 
					        </div>
 | 
				
			||||||
                    <img class="show-image" width="160" height="160" v-if="selected.size && selected.size.indexOf('160*160')>=0" :src="selected.img" alt />
 | 
					      </div>
 | 
				
			||||||
                    <img class="show-image" width="80" height="80" v-if="selected.size && selected.size.indexOf('90*90')>=0" :src="selected.img" alt />
 | 
					      <div class="content">
 | 
				
			||||||
                </div>
 | 
					        <div
 | 
				
			||||||
                <div>
 | 
					          class="con-item setup-content"
 | 
				
			||||||
                    <span>图片主标题:</span><Input v-model="selected.name" />
 | 
					          v-for="(item, index) in options.left.list"
 | 
				
			||||||
                </div>
 | 
					          :key="index"
 | 
				
			||||||
                <div>
 | 
					        >
 | 
				
			||||||
                    <span>图片描述:</span><Input v-model="selected.describe" />
 | 
					          <div>
 | 
				
			||||||
                </div>
 | 
					            <p>{{ item.name }}</p>
 | 
				
			||||||
                <div class="tips">
 | 
					            <p class="describe">{{ item.describe }}</p>
 | 
				
			||||||
                    建议尺寸:<span>{{ selected.size }}</span>
 | 
					          </div>
 | 
				
			||||||
                </div>
 | 
					          <img :src="item.img" alt="" />
 | 
				
			||||||
                <div>
 | 
					          <div class="setup-box">
 | 
				
			||||||
                    图片链接:<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
 | 
					            <div>
 | 
				
			||||||
                </div>
 | 
					              <Button size="small" @click.stop="handleSelectModel(item)"
 | 
				
			||||||
                <div>
 | 
					                >编辑</Button
 | 
				
			||||||
                    <Button size="small" type="primary" @click="handleSelectImg">选择图片</Button> 
 | 
					              >
 | 
				
			||||||
                    
 | 
					 | 
				
			||||||
                    <Button size="small" type="primary" @click="handleSelectGoods('')">选择商品</Button>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
        </Modal>
 | 
					          </div>
 | 
				
			||||||
        <!-- 装修标题 -->
 | 
					        </div>
 | 
				
			||||||
        <Modal
 | 
					      </div>
 | 
				
			||||||
            v-model="showModal1"
 | 
					 | 
				
			||||||
            title="装修"
 | 
					 | 
				
			||||||
            draggable
 | 
					 | 
				
			||||||
            width="800"
 | 
					 | 
				
			||||||
            :z-index="100"
 | 
					 | 
				
			||||||
            :mask-closable="false"
 | 
					 | 
				
			||||||
            
 | 
					 | 
				
			||||||
            
 | 
					 | 
				
			||||||
            >
 | 
					 | 
				
			||||||
            <div class="modal-top-advert">
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    <span>主标题:</span><Input v-model="selected.title" />
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    <span>副标题:</span><Input v-model="selected.secondTitle" />
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    <span>副标题链接:{{selected.url}}</span><Button size="small" class="ml_10" type="primary" @click="handleSelectLink">选择链接</Button>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
                <div>
 | 
					 | 
				
			||||||
                    <span>背景色:</span><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
        </Modal>
 | 
					 | 
				
			||||||
        <!-- 选择商品。链接 -->
 | 
					 | 
				
			||||||
        <liliDialog
 | 
					 | 
				
			||||||
            ref="liliDialog"
 | 
					 | 
				
			||||||
            @selectedLink="selectedLink"
 | 
					 | 
				
			||||||
            @selectedGoodsData="selectedGoodsData"
 | 
					 | 
				
			||||||
        ></liliDialog>
 | 
					 | 
				
			||||||
        <!-- 选择图片 -->
 | 
					 | 
				
			||||||
        <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
					 | 
				
			||||||
            <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
 | 
					 | 
				
			||||||
        </Modal>
 | 
					 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <div class="middle">
 | 
				
			||||||
 | 
					      <div
 | 
				
			||||||
 | 
					        class="top-header setup-content"
 | 
				
			||||||
 | 
					        :style="{ background: options.middle.bgColor }"
 | 
				
			||||||
 | 
					      >
 | 
				
			||||||
 | 
					        <span>{{ options.middle.title }}</span>
 | 
				
			||||||
 | 
					        <span>{{ options.middle.secondTitle }} ></span>
 | 
				
			||||||
 | 
					        <div class="setup-box">
 | 
				
			||||||
 | 
					          <div>
 | 
				
			||||||
 | 
					            <Button
 | 
				
			||||||
 | 
					              size="small"
 | 
				
			||||||
 | 
					              @click.stop="handleSelectModel(options.middle, true)"
 | 
				
			||||||
 | 
					              >编辑</Button
 | 
				
			||||||
 | 
					            >
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					      <div class="content">
 | 
				
			||||||
 | 
					        <div
 | 
				
			||||||
 | 
					          class="con-item setup-content"
 | 
				
			||||||
 | 
					          v-for="(item, index) in options.middle.list"
 | 
				
			||||||
 | 
					          :key="index"
 | 
				
			||||||
 | 
					        >
 | 
				
			||||||
 | 
					          <div>
 | 
				
			||||||
 | 
					            <p>{{ item.name }}</p>
 | 
				
			||||||
 | 
					            <p class="describe">{{ item.describe }}</p>
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					          <img :src="item.img" alt="" />
 | 
				
			||||||
 | 
					          <div class="setup-box">
 | 
				
			||||||
 | 
					            <div>
 | 
				
			||||||
 | 
					              <Button size="small" @click.stop="handleSelectModel(item)"
 | 
				
			||||||
 | 
					                >编辑</Button
 | 
				
			||||||
 | 
					              >
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <div class="right">
 | 
				
			||||||
 | 
					      <div
 | 
				
			||||||
 | 
					        class="top-header setup-content"
 | 
				
			||||||
 | 
					        :style="{ background: options.right.bgColor }"
 | 
				
			||||||
 | 
					      >
 | 
				
			||||||
 | 
					        <span>{{ options.right.title }}</span>
 | 
				
			||||||
 | 
					        <span>{{ options.right.secondTitle }} ></span>
 | 
				
			||||||
 | 
					        <div class="setup-box">
 | 
				
			||||||
 | 
					          <div>
 | 
				
			||||||
 | 
					            <Button
 | 
				
			||||||
 | 
					              size="small"
 | 
				
			||||||
 | 
					              @click.stop="handleSelectModel(options.right, true)"
 | 
				
			||||||
 | 
					              >编辑</Button
 | 
				
			||||||
 | 
					            >
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					      <div class="content">
 | 
				
			||||||
 | 
					        <div
 | 
				
			||||||
 | 
					          class="setup-content"
 | 
				
			||||||
 | 
					          v-for="(item, index) in options.right.list"
 | 
				
			||||||
 | 
					          :key="index"
 | 
				
			||||||
 | 
					        >
 | 
				
			||||||
 | 
					          <img :src="item.img" alt="" />
 | 
				
			||||||
 | 
					          <p>{{ item.name }}</p>
 | 
				
			||||||
 | 
					          <p>{{ item.price | unitPrice("¥") }}</p>
 | 
				
			||||||
 | 
					          <div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
 | 
				
			||||||
 | 
					            {{ index + 1 }}
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					          <div class="setup-box">
 | 
				
			||||||
 | 
					            <div>
 | 
				
			||||||
 | 
					              <Button size="small" @click.stop="handleSelectGoods(item)"
 | 
				
			||||||
 | 
					                >编辑</Button
 | 
				
			||||||
 | 
					              >
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					    <!-- 装修内容 -->
 | 
				
			||||||
 | 
					    <Modal
 | 
				
			||||||
 | 
					      v-model="showModal"
 | 
				
			||||||
 | 
					      title="装修"
 | 
				
			||||||
 | 
					      draggable
 | 
				
			||||||
 | 
					      width="800"
 | 
				
			||||||
 | 
					      :z-index="100"
 | 
				
			||||||
 | 
					      :mask-closable="false"
 | 
				
			||||||
 | 
					    >
 | 
				
			||||||
 | 
					      <div class="modal-top-advert">
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          <img
 | 
				
			||||||
 | 
					            class="show-image"
 | 
				
			||||||
 | 
					            width="160"
 | 
				
			||||||
 | 
					            height="160"
 | 
				
			||||||
 | 
					            v-if="selected.size && selected.size.indexOf('160*160') >= 0"
 | 
				
			||||||
 | 
					            :src="selected.img"
 | 
				
			||||||
 | 
					            alt
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
 | 
					          <img
 | 
				
			||||||
 | 
					            class="show-image"
 | 
				
			||||||
 | 
					            width="80"
 | 
				
			||||||
 | 
					            height="80"
 | 
				
			||||||
 | 
					            v-if="selected.size && selected.size.indexOf('90*90') >= 0"
 | 
				
			||||||
 | 
					            :src="selected.img"
 | 
				
			||||||
 | 
					            alt
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div><span>图片主标题:</span><Input v-model="selected.name" /></div>
 | 
				
			||||||
 | 
					        <div><span>图片描述:</span><Input v-model="selected.describe" /></div>
 | 
				
			||||||
 | 
					        <div class="tips">
 | 
				
			||||||
 | 
					          建议尺寸:<span>{{ selected.size }}</span>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          图片链接:<Input
 | 
				
			||||||
 | 
					            class="outsideUrl"
 | 
				
			||||||
 | 
					            v-model="selected.url"
 | 
				
			||||||
 | 
					            :disabled="!!selected.type && selected.type !== 'link'"
 | 
				
			||||||
 | 
					            placeholder="https://"
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
 | 
					          <Button size="small" type="primary" @click="handleSelectLink"
 | 
				
			||||||
 | 
					            >选择链接</Button
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          <Button size="small" type="primary" @click="handleSelectImg"
 | 
				
			||||||
 | 
					            >选择图片</Button
 | 
				
			||||||
 | 
					          > 
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <Button size="small" type="primary" @click="handleSelectGoods('')"
 | 
				
			||||||
 | 
					            >选择商品</Button
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </Modal>
 | 
				
			||||||
 | 
					    <!-- 装修标题 -->
 | 
				
			||||||
 | 
					    <Modal
 | 
				
			||||||
 | 
					      v-model="showModal1"
 | 
				
			||||||
 | 
					      title="装修"
 | 
				
			||||||
 | 
					      draggable
 | 
				
			||||||
 | 
					      width="800"
 | 
				
			||||||
 | 
					      :z-index="100"
 | 
				
			||||||
 | 
					      :mask-closable="false"
 | 
				
			||||||
 | 
					    >
 | 
				
			||||||
 | 
					      <div class="modal-top-advert">
 | 
				
			||||||
 | 
					        <div><span>主标题:</span><Input v-model="selected.title" /></div>
 | 
				
			||||||
 | 
					        <div><span>副标题:</span><Input v-model="selected.secondTitle" /></div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          <span
 | 
				
			||||||
 | 
					            >副标题链接:<Input
 | 
				
			||||||
 | 
					              class="outsideUrl"
 | 
				
			||||||
 | 
					              v-model="selected.url"
 | 
				
			||||||
 | 
					              :disabled="!!selected.type && selected.type !== 'link'"
 | 
				
			||||||
 | 
					              placeholder="https://" /></span
 | 
				
			||||||
 | 
					          ><Button
 | 
				
			||||||
 | 
					            size="small"
 | 
				
			||||||
 | 
					            class="ml_10"
 | 
				
			||||||
 | 
					            type="primary"
 | 
				
			||||||
 | 
					            @click="handleSelectLink"
 | 
				
			||||||
 | 
					            >选择链接</Button
 | 
				
			||||||
 | 
					          >
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					          <span>背景色:</span
 | 
				
			||||||
 | 
					          ><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </Modal>
 | 
				
			||||||
 | 
					    <!-- 选择商品。链接 -->
 | 
				
			||||||
 | 
					    <liliDialog
 | 
				
			||||||
 | 
					      ref="liliDialog"
 | 
				
			||||||
 | 
					      @selectedLink="selectedLink"
 | 
				
			||||||
 | 
					      @selectedGoodsData="selectedGoodsData"
 | 
				
			||||||
 | 
					    ></liliDialog>
 | 
				
			||||||
 | 
					    <!-- 选择图片 -->
 | 
				
			||||||
 | 
					    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
				
			||||||
 | 
					      <ossManage
 | 
				
			||||||
 | 
					        @callback="callbackSelected"
 | 
				
			||||||
 | 
					        :isComponent="true"
 | 
				
			||||||
 | 
					        ref="ossManage"
 | 
				
			||||||
 | 
					      />
 | 
				
			||||||
 | 
					    </Modal>
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
import ossManage from "@/views/sys/oss-manage/ossManage";
 | 
					import ossManage from "@/views/sys/oss-manage/ossManage";
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
    props:{
 | 
					  props: {
 | 
				
			||||||
        data:{
 | 
					    data: {
 | 
				
			||||||
            type:Object,
 | 
					      type: Object,
 | 
				
			||||||
            default:null
 | 
					      default: null,
 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    components:{
 | 
					  },
 | 
				
			||||||
      ossManage
 | 
					  components: {
 | 
				
			||||||
 | 
					    ossManage,
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  data() {
 | 
				
			||||||
 | 
					    return {
 | 
				
			||||||
 | 
					      options: this.data.options, // 当前数据
 | 
				
			||||||
 | 
					      showModal: false, // modal显隐
 | 
				
			||||||
 | 
					      showModal1: false, // modal显隐
 | 
				
			||||||
 | 
					      selected: {}, // 已选数据
 | 
				
			||||||
 | 
					      picModelFlag: false, // 选择图片modal
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  methods: {
 | 
				
			||||||
 | 
					    // 装修modal
 | 
				
			||||||
 | 
					    handleSelectModel(item, type) {
 | 
				
			||||||
 | 
					      this.selected = item;
 | 
				
			||||||
 | 
					      console.warn(item);
 | 
				
			||||||
 | 
					      if (type) {
 | 
				
			||||||
 | 
					        this.showModal1 = true;
 | 
				
			||||||
 | 
					      } else {
 | 
				
			||||||
 | 
					        this.showModal = true;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    data() {
 | 
					    handleSelectLink() {
 | 
				
			||||||
        return {
 | 
					      // 调起选择链接弹窗
 | 
				
			||||||
            options:this.data.options, // 当前数据
 | 
					      this.$refs.liliDialog.open("link");
 | 
				
			||||||
            showModal:false, // modal显隐
 | 
					 | 
				
			||||||
            showModal1:false, // modal显隐
 | 
					 | 
				
			||||||
            selected: {}, // 已选数据
 | 
					 | 
				
			||||||
            picModelFlag: false // 选择图片modal
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    methods:{
 | 
					    handleSelectGoods(item) {
 | 
				
			||||||
        // 装修modal
 | 
					      // 调起选择商品
 | 
				
			||||||
        handleSelectModel (item, type) {
 | 
					      console.warn(item);
 | 
				
			||||||
            this.selected = item;
 | 
					      if (item) this.selected = item;
 | 
				
			||||||
            console.warn(item);
 | 
					      this.$refs.liliDialog.open("goods", "single");
 | 
				
			||||||
            if(type){
 | 
					      setTimeout(() => {
 | 
				
			||||||
                this.showModal1 = true
 | 
					        this.$refs.liliDialog.goodsData = [this.selected];
 | 
				
			||||||
            } else {
 | 
					      }, 500);
 | 
				
			||||||
                this.showModal = true
 | 
					    },
 | 
				
			||||||
            }
 | 
					    // 选择链接回调
 | 
				
			||||||
            
 | 
					    selectedLink(val) {
 | 
				
			||||||
        },
 | 
					      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
				
			||||||
        handleSelectLink() { // 调起选择链接弹窗
 | 
					      this.selected.type =
 | 
				
			||||||
            this.$refs.liliDialog.open('link')
 | 
					        val.___type === "other" && val.url === "" ? "link" : "other";
 | 
				
			||||||
        },
 | 
					    },
 | 
				
			||||||
        handleSelectGoods(item) { // 调起选择商品
 | 
					    // 选择商品回调
 | 
				
			||||||
            console.warn(item);
 | 
					    selectedGoodsData(val) {
 | 
				
			||||||
            if (item) this.selected = item;
 | 
					      let goods = val[0];
 | 
				
			||||||
            this.$refs.liliDialog.open('goods', 'single')
 | 
					      console.log(this.selected);
 | 
				
			||||||
            setTimeout(() => {
 | 
					      this.selected.img = goods.thumbnail;
 | 
				
			||||||
                this.$refs.liliDialog.goodsData = [this.selected]
 | 
					      this.selected.price = goods.price;
 | 
				
			||||||
            }, 500);
 | 
					      this.selected.name = goods.goodsName;
 | 
				
			||||||
        },
 | 
					      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
 | 
				
			||||||
        // 选择链接回调
 | 
					    },
 | 
				
			||||||
        selectedLink (val) {
 | 
					    handleSelectImg() {
 | 
				
			||||||
            this.selected.url = this.$options.filters.formatLinkType(val);
 | 
					      // 选择图片
 | 
				
			||||||
        },
 | 
					      this.$refs.ossManage.selectImage = true;
 | 
				
			||||||
        // 选择商品回调
 | 
					      this.picModelFlag = true;
 | 
				
			||||||
        selectedGoodsData (val) {
 | 
					    },
 | 
				
			||||||
            console.log(val);
 | 
					    // 选择图片回显
 | 
				
			||||||
            let goods = val[0]
 | 
					    callbackSelected(val) {
 | 
				
			||||||
            console.log(this.selected);
 | 
					      this.picModelFlag = false;
 | 
				
			||||||
            this.selected.img = goods.thumbnail
 | 
					      this.selected.img = val.url;
 | 
				
			||||||
            this.selected.price = goods.price
 | 
					    },
 | 
				
			||||||
            this.selected.name = goods.goodsName
 | 
					  },
 | 
				
			||||||
            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
 | 
					};
 | 
				
			||||||
        },
 | 
					 | 
				
			||||||
        handleSelectImg(){ // 选择图片
 | 
					 | 
				
			||||||
            this.$refs.ossManage.selectImage = true;
 | 
					 | 
				
			||||||
            this.picModelFlag = true;
 | 
					 | 
				
			||||||
        },
 | 
					 | 
				
			||||||
        // 选择图片回显
 | 
					 | 
				
			||||||
        callbackSelected (val) {
 | 
					 | 
				
			||||||
            this.picModelFlag = false;
 | 
					 | 
				
			||||||
            this.selected.img = val.url;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
<style lang="scss" scoped>
 | 
					<style lang="scss" scoped>
 | 
				
			||||||
@import './setup-box.scss';
 | 
					@import "./setup-box.scss";
 | 
				
			||||||
.new-goods{
 | 
					.new-goods {
 | 
				
			||||||
 | 
					  display: flex;
 | 
				
			||||||
 | 
					  justify-content: space-between;
 | 
				
			||||||
 | 
					  > div {
 | 
				
			||||||
 | 
					    width: 393px;
 | 
				
			||||||
 | 
					    height: 440px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .left > .content {
 | 
				
			||||||
 | 
					    > div:nth-child(1) {
 | 
				
			||||||
 | 
					      height: 240px;
 | 
				
			||||||
 | 
					      flex-direction: column;
 | 
				
			||||||
 | 
					      border: 1px solid #eee;
 | 
				
			||||||
 | 
					      border-top: none;
 | 
				
			||||||
 | 
					      border-left: none;
 | 
				
			||||||
 | 
					      justify-content: space-between;
 | 
				
			||||||
 | 
					      img {
 | 
				
			||||||
 | 
					        width: 160px;
 | 
				
			||||||
 | 
					        height: 160px;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      .describe {
 | 
				
			||||||
 | 
					        margin-top: 10px;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    > div:nth-child(2) {
 | 
				
			||||||
 | 
					      border-right: 1px solid #eee;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    > div:nth-child(3),
 | 
				
			||||||
 | 
					    > div:nth-child(4) {
 | 
				
			||||||
 | 
					      border-bottom: 1px solid #eee;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .middle > .content {
 | 
				
			||||||
 | 
					    > div {
 | 
				
			||||||
 | 
					      border-style: solid;
 | 
				
			||||||
 | 
					      border-color: #eee;
 | 
				
			||||||
 | 
					      border-width: 0;
 | 
				
			||||||
 | 
					      border-bottom-width: 1px;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    > div:nth-child(1),
 | 
				
			||||||
 | 
					    > div:nth-child(2),
 | 
				
			||||||
 | 
					    > div:nth-child(3) {
 | 
				
			||||||
 | 
					      border-right-width: 1px;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    > div:nth-child(6),
 | 
				
			||||||
 | 
					    > div:nth-child(3) {
 | 
				
			||||||
 | 
					      border-bottom-width: 0;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .right > .content {
 | 
				
			||||||
    display: flex;
 | 
					    display: flex;
 | 
				
			||||||
    justify-content: space-between;
 | 
					    flex-wrap: wrap;
 | 
				
			||||||
    >div{
 | 
					    flex-direction: row;
 | 
				
			||||||
        width: 393px;
 | 
					    font-size: 12px;
 | 
				
			||||||
        height: 440px;
 | 
					    > div {
 | 
				
			||||||
    }
 | 
					      position: relative;
 | 
				
			||||||
 | 
					      width: 120px;
 | 
				
			||||||
    .left>.content{
 | 
					      padding: 5px 10px 0 10px;
 | 
				
			||||||
        >div:nth-child(1){
 | 
					      img {
 | 
				
			||||||
            height: 240px;
 | 
					        width: 100px;
 | 
				
			||||||
            flex-direction: column;
 | 
					        height: 100px;
 | 
				
			||||||
            border: 1px solid #eee;
 | 
					      }
 | 
				
			||||||
            border-top: none;
 | 
					      border-bottom: 1px solid #eee;
 | 
				
			||||||
            border-left: none;
 | 
					      :nth-child(2) {
 | 
				
			||||||
            justify-content: space-between;
 | 
					        height: 38px;
 | 
				
			||||||
            img{
 | 
					        overflow: hidden;
 | 
				
			||||||
                width: 160px;
 | 
					      }
 | 
				
			||||||
                height: 160px;
 | 
					      :nth-child(3) {
 | 
				
			||||||
            }
 | 
					        color: $theme_color;
 | 
				
			||||||
            .describe{margin-top: 10px;}
 | 
					        margin-top: 5px;
 | 
				
			||||||
        }
 | 
					      }
 | 
				
			||||||
        >div:nth-child(2){border-right: 1px solid #eee;}
 | 
					      .jiaobiao {
 | 
				
			||||||
        >div:nth-child(3),>div:nth-child(4){border-bottom: 1px solid #eee;}
 | 
					        position: absolute;
 | 
				
			||||||
    }
 | 
					        width: 23px;
 | 
				
			||||||
 | 
					        height: 23px;
 | 
				
			||||||
    .middle>.content{
 | 
					        top: 10px;
 | 
				
			||||||
        >div{
 | 
					        right: 16px;
 | 
				
			||||||
            border-style:solid;
 | 
					        background: url("../../../assets/festival_icon.png");
 | 
				
			||||||
            border-color: #eee;
 | 
					 | 
				
			||||||
            border-width: 0;
 | 
					 | 
				
			||||||
            border-bottom-width: 1px;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        >div:nth-child(1),>div:nth-child(2),>div:nth-child(3){border-right-width: 1px;}
 | 
					 | 
				
			||||||
        >div:nth-child(6), >div:nth-child(3){border-bottom-width: 0;}
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    .right>.content{
 | 
					 | 
				
			||||||
        display: flex;
 | 
					 | 
				
			||||||
        flex-wrap: wrap;
 | 
					 | 
				
			||||||
        flex-direction: row;
 | 
					 | 
				
			||||||
        font-size: 12px;
 | 
					 | 
				
			||||||
        >div{
 | 
					 | 
				
			||||||
            position: relative;
 | 
					 | 
				
			||||||
            width: 120px;
 | 
					 | 
				
			||||||
            padding: 5px 10px 0 10px;
 | 
					 | 
				
			||||||
            img{
 | 
					 | 
				
			||||||
                width: 100px;
 | 
					 | 
				
			||||||
                height: 100px;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
            border-bottom: 1px solid #eee;
 | 
					 | 
				
			||||||
            :nth-child(2){
 | 
					 | 
				
			||||||
                height: 38px;
 | 
					 | 
				
			||||||
                overflow: hidden;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
            :nth-child(3){
 | 
					 | 
				
			||||||
                color: $theme_color;
 | 
					 | 
				
			||||||
                margin-top: 5px;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
            .jiaobiao{
 | 
					 | 
				
			||||||
                position: absolute;
 | 
					 | 
				
			||||||
                width: 23px;
 | 
					 | 
				
			||||||
                height: 23px;
 | 
					 | 
				
			||||||
                top: 10px;
 | 
					 | 
				
			||||||
                right: 16px;
 | 
					 | 
				
			||||||
                background: url('../../../assets/festival_icon.png');
 | 
					 | 
				
			||||||
                color: #FFF;
 | 
					 | 
				
			||||||
                text-align: center;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
            .jiaobiao1,.jiaobiao4{
 | 
					 | 
				
			||||||
                background-position: -2px -30px;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
            .jiaobiao2,.jiaobiao5{
 | 
					 | 
				
			||||||
                background-position: -31px -30px;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
            .jiaobiao3,.jiaobiao6{
 | 
					 | 
				
			||||||
                background-position: -60px -30px;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        >div:nth-child(4),>div:nth-child(5),>div:nth-child(6){border: none;}
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    .top-header{
 | 
					 | 
				
			||||||
        display: flex;
 | 
					 | 
				
			||||||
        align-items: center;
 | 
					 | 
				
			||||||
        justify-content: space-between;
 | 
					 | 
				
			||||||
        height: 50px;
 | 
					 | 
				
			||||||
        padding: 0 10px;
 | 
					 | 
				
			||||||
        background: #c43d7e;
 | 
					 | 
				
			||||||
        color: #fff;
 | 
					        color: #fff;
 | 
				
			||||||
        span:nth-child(1){
 | 
					        text-align: center;
 | 
				
			||||||
            font-size: 20px;
 | 
					      }
 | 
				
			||||||
        }
 | 
					      .jiaobiao1,
 | 
				
			||||||
        span:nth-child(2){
 | 
					      .jiaobiao4 {
 | 
				
			||||||
            font-size: 12px;
 | 
					        background-position: -2px -30px;
 | 
				
			||||||
        }
 | 
					      }
 | 
				
			||||||
 | 
					      .jiaobiao2,
 | 
				
			||||||
 | 
					      .jiaobiao5 {
 | 
				
			||||||
 | 
					        background-position: -31px -30px;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      .jiaobiao3,
 | 
				
			||||||
 | 
					      .jiaobiao6 {
 | 
				
			||||||
 | 
					        background-position: -60px -30px;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    .content{
 | 
					    > div:nth-child(4),
 | 
				
			||||||
        padding: 10px 12px 0;
 | 
					    > div:nth-child(5),
 | 
				
			||||||
        display: flex;
 | 
					    > div:nth-child(6) {
 | 
				
			||||||
        flex-wrap: wrap;
 | 
					      border: none;
 | 
				
			||||||
        flex-direction: column;
 | 
					 | 
				
			||||||
        height: 370px;
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    .con-item{
 | 
					  }
 | 
				
			||||||
        width: 185px;
 | 
					
 | 
				
			||||||
        height: 120px;
 | 
					  .top-header {
 | 
				
			||||||
        display: flex;
 | 
					    display: flex;
 | 
				
			||||||
        padding-left: 10px;
 | 
					    align-items: center;
 | 
				
			||||||
        padding-top: 10px;
 | 
					    justify-content: space-between;
 | 
				
			||||||
        img{
 | 
					    height: 50px;
 | 
				
			||||||
            width: 90px;
 | 
					    padding: 0 10px;
 | 
				
			||||||
            height: 90px;
 | 
					    background: #c43d7e;
 | 
				
			||||||
            margin-top: 10px;
 | 
					    color: #fff;
 | 
				
			||||||
        }
 | 
					    span:nth-child(1) {
 | 
				
			||||||
 | 
					      font-size: 20px;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    .describe{
 | 
					    span:nth-child(2) {
 | 
				
			||||||
        color: #999;
 | 
					      font-size: 12px;
 | 
				
			||||||
        font-size: 12px;
 | 
					 | 
				
			||||||
        margin-top: 15px;
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .content {
 | 
				
			||||||
 | 
					    padding: 10px 12px 0;
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    flex-wrap: wrap;
 | 
				
			||||||
 | 
					    flex-direction: column;
 | 
				
			||||||
 | 
					    height: 370px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .con-item {
 | 
				
			||||||
 | 
					    width: 185px;
 | 
				
			||||||
 | 
					    height: 120px;
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    padding-left: 10px;
 | 
				
			||||||
 | 
					    padding-top: 10px;
 | 
				
			||||||
 | 
					    img {
 | 
				
			||||||
 | 
					      width: 90px;
 | 
				
			||||||
 | 
					      height: 90px;
 | 
				
			||||||
 | 
					      margin-top: 10px;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .describe {
 | 
				
			||||||
 | 
					    color: #999;
 | 
				
			||||||
 | 
					    font-size: 12px;
 | 
				
			||||||
 | 
					    margin-top: 15px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
.modal-top-advert{
 | 
					.modal-top-advert {
 | 
				
			||||||
    align-items: start;
 | 
					  align-items: start;
 | 
				
			||||||
    padding: 0 30px;
 | 
					  padding: 0 30px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
| 
						 | 
					@ -108,8 +108,6 @@
 | 
				
			||||||
      width="800"
 | 
					      width="800"
 | 
				
			||||||
      :z-index="100"
 | 
					      :z-index="100"
 | 
				
			||||||
      :mask-closable="false"
 | 
					      :mask-closable="false"
 | 
				
			||||||
      
 | 
					 | 
				
			||||||
      
 | 
					 | 
				
			||||||
    >
 | 
					    >
 | 
				
			||||||
      <div class="modal-top-advert">
 | 
					      <div class="modal-top-advert">
 | 
				
			||||||
        <div>
 | 
					        <div>
 | 
				
			||||||
| 
						 | 
					@ -144,7 +142,12 @@
 | 
				
			||||||
          建议尺寸:<span>{{ selected.size }}</span>
 | 
					          建议尺寸:<span>{{ selected.size }}</span>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
        <div>
 | 
					        <div>
 | 
				
			||||||
          图片链接:<span>{{ selected.url }}</span>
 | 
					          图片链接:<Input
 | 
				
			||||||
 | 
					            class="outsideUrl"
 | 
				
			||||||
 | 
					            v-model="selected.url"
 | 
				
			||||||
 | 
					            :disabled="!!selected.type && selected.type !== 'link'"
 | 
				
			||||||
 | 
					            placeholder="https://"
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
          <Button
 | 
					          <Button
 | 
				
			||||||
            size="small"
 | 
					            size="small"
 | 
				
			||||||
            class="ml_10"
 | 
					            class="ml_10"
 | 
				
			||||||
| 
						 | 
					@ -170,14 +173,17 @@
 | 
				
			||||||
      width="800"
 | 
					      width="800"
 | 
				
			||||||
      :z-index="100"
 | 
					      :z-index="100"
 | 
				
			||||||
      :mask-closable="false"
 | 
					      :mask-closable="false"
 | 
				
			||||||
      
 | 
					 | 
				
			||||||
      
 | 
					 | 
				
			||||||
    >
 | 
					    >
 | 
				
			||||||
      <div class="modal-top-advert">
 | 
					      <div class="modal-top-advert">
 | 
				
			||||||
        <div><span>主标题:</span><Input v-model="selected.title" /></div>
 | 
					        <div><span>主标题:</span><Input v-model="selected.title" /></div>
 | 
				
			||||||
        <div><span>副标题:</span><Input v-model="selected.secondTitle" /></div>
 | 
					        <div><span>副标题:</span><Input v-model="selected.secondTitle" /></div>
 | 
				
			||||||
        <div>
 | 
					        <div>
 | 
				
			||||||
          <span>副标题链接:{{ selected.url }}</span
 | 
					          <span
 | 
				
			||||||
 | 
					            >副标题链接:<Input
 | 
				
			||||||
 | 
					              class="outsideUrl"
 | 
				
			||||||
 | 
					              v-model="selected.url"
 | 
				
			||||||
 | 
					              :disabled="!!selected.type && selected.type !== 'link'"
 | 
				
			||||||
 | 
					              placeholder="https://" /></span
 | 
				
			||||||
          ><Button
 | 
					          ><Button
 | 
				
			||||||
            size="small"
 | 
					            size="small"
 | 
				
			||||||
            class="ml_10"
 | 
					            class="ml_10"
 | 
				
			||||||
| 
						 | 
					@ -200,7 +206,11 @@
 | 
				
			||||||
    ></liliDialog>
 | 
					    ></liliDialog>
 | 
				
			||||||
    <!-- 选择图片 -->
 | 
					    <!-- 选择图片 -->
 | 
				
			||||||
    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
					    <Modal width="1200px" v-model="picModelFlag" footer-hide>
 | 
				
			||||||
      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
 | 
					      <ossManage
 | 
				
			||||||
 | 
					        @callback="callbackSelected"
 | 
				
			||||||
 | 
					        :isComponent="true"
 | 
				
			||||||
 | 
					        ref="ossManage"
 | 
				
			||||||
 | 
					      />
 | 
				
			||||||
    </Modal>
 | 
					    </Modal>
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
| 
						 | 
					@ -242,11 +252,13 @@ export default {
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    handleSelectGoods(item) {
 | 
					    handleSelectGoods(item) {
 | 
				
			||||||
      // 调起选择商品
 | 
					      // 调起选择商品
 | 
				
			||||||
      this.$refs.liliDialog.open('goods', 'single')
 | 
					      this.$refs.liliDialog.open("goods", "single");
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 选择链接回调
 | 
					    // 选择链接回调
 | 
				
			||||||
    selectedLink(val) {
 | 
					    selectedLink(val) {
 | 
				
			||||||
      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
					      this.selected.url = this.$options.filters.formatLinkType(val);
 | 
				
			||||||
 | 
					      this.selected.type =
 | 
				
			||||||
 | 
					        val.___type === "other" && val.url === "" ? "link" : "other";
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    // 选择商品回调
 | 
					    // 选择商品回调
 | 
				
			||||||
    selectedGoodsData(val) {
 | 
					    selectedGoodsData(val) {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -52,8 +52,12 @@
 | 
				
			||||||
              />
 | 
					              />
 | 
				
			||||||
              <span class="describe">消费达到当前金额可以参与优惠</span>
 | 
					              <span class="describe">消费达到当前金额可以参与优惠</span>
 | 
				
			||||||
            </FormItem>
 | 
					            </FormItem>
 | 
				
			||||||
            <FormItem label="优惠方式">
 | 
					            <FormItem label="赠送优惠券">
 | 
				
			||||||
              <RadioGroup type="button" button-style="solid" v-model="form.discountType">
 | 
					              <RadioGroup
 | 
				
			||||||
 | 
					                type="button"
 | 
				
			||||||
 | 
					                button-style="solid"
 | 
				
			||||||
 | 
					                v-model="form.discountType"
 | 
				
			||||||
 | 
					              >
 | 
				
			||||||
                <Radio label="fullMinusFlag" disabled>减现金</Radio>
 | 
					                <Radio label="fullMinusFlag" disabled>减现金</Radio>
 | 
				
			||||||
                <Radio label="fullRateFlag" disabled>打折</Radio>
 | 
					                <Radio label="fullRateFlag" disabled>打折</Radio>
 | 
				
			||||||
              </RadioGroup>
 | 
					              </RadioGroup>
 | 
				
			||||||
| 
						 | 
					@ -88,24 +92,29 @@
 | 
				
			||||||
              <span class="describe">优惠折扣为0-10之间数字,可有一位小数</span>
 | 
					              <span class="describe">优惠折扣为0-10之间数字,可有一位小数</span>
 | 
				
			||||||
            </FormItem>
 | 
					            </FormItem>
 | 
				
			||||||
            <FormItem label="额外赠送">
 | 
					            <FormItem label="额外赠送">
 | 
				
			||||||
              <Checkbox v-model="form.freeFreightFlag" disabled>免邮费</Checkbox> 
 | 
					              <Checkbox v-model="form.freeFreightFlag" disabled>免邮费</Checkbox
 | 
				
			||||||
              <Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox> 
 | 
					              > 
 | 
				
			||||||
 | 
					              <Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox
 | 
				
			||||||
 | 
					              > 
 | 
				
			||||||
              <Checkbox v-model="form.giftFlag" disabled>送赠品</Checkbox> 
 | 
					              <Checkbox v-model="form.giftFlag" disabled>送赠品</Checkbox> 
 | 
				
			||||||
              <Checkbox v-model="form.pointFlag" disabled>送积分</Checkbox>
 | 
					              <Checkbox v-model="form.pointFlag" disabled>送积分</Checkbox>
 | 
				
			||||||
            </FormItem>
 | 
					            </FormItem>
 | 
				
			||||||
            <FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
 | 
					            <FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
 | 
				
			||||||
              <Select
 | 
					              <Select
 | 
				
			||||||
                v-model="form.couponId"
 | 
					                v-model="form.couponId"
 | 
				
			||||||
 | 
					                :disabled="form.promotionStatus != 'NEW'"
 | 
				
			||||||
                filterable
 | 
					                filterable
 | 
				
			||||||
                :remote-method="getCouponList"
 | 
					                :remote-method="getCouponList"
 | 
				
			||||||
                placeholder="输入优惠券名称搜索"
 | 
					                placeholder="输入优惠券名称搜索"
 | 
				
			||||||
                disabled
 | 
					 | 
				
			||||||
                :loading="couponLoading"
 | 
					                :loading="couponLoading"
 | 
				
			||||||
                style="width: 260px"
 | 
					                style="width: 280px"
 | 
				
			||||||
              >
 | 
					              >
 | 
				
			||||||
                <Option v-for="item in couponList" :value="item.id" :key="item.id">{{
 | 
					                <Option
 | 
				
			||||||
                  item.couponName
 | 
					                  v-for="item in couponList"
 | 
				
			||||||
                }}</Option>
 | 
					                  :value="item.id"
 | 
				
			||||||
 | 
					                  :key="item.id"
 | 
				
			||||||
 | 
					                  >{{ item.couponName }}</Option
 | 
				
			||||||
 | 
					                >
 | 
				
			||||||
              </Select>
 | 
					              </Select>
 | 
				
			||||||
            </FormItem>
 | 
					            </FormItem>
 | 
				
			||||||
            <FormItem v-if="form.giftFlag" label="赠品" prop="giftId">
 | 
					            <FormItem v-if="form.giftFlag" label="赠品" prop="giftId">
 | 
				
			||||||
| 
						 | 
					@ -118,22 +127,37 @@
 | 
				
			||||||
                :loading="giftLoading"
 | 
					                :loading="giftLoading"
 | 
				
			||||||
                style="width: 260px"
 | 
					                style="width: 260px"
 | 
				
			||||||
              >
 | 
					              >
 | 
				
			||||||
                <Option v-for="item in giftList" :value="item.id" :key="item.id">{{
 | 
					                <Option
 | 
				
			||||||
                  item.goodsName
 | 
					                  v-for="item in giftList"
 | 
				
			||||||
                }}</Option>
 | 
					                  :value="item.id"
 | 
				
			||||||
 | 
					                  :key="item.id"
 | 
				
			||||||
 | 
					                  >{{ item.goodsName }}</Option
 | 
				
			||||||
 | 
					                >
 | 
				
			||||||
              </Select>
 | 
					              </Select>
 | 
				
			||||||
            </FormItem>
 | 
					            </FormItem>
 | 
				
			||||||
            <FormItem v-if="form.pointFlag" label="赠积分" prop="point">
 | 
					            <FormItem v-if="form.pointFlag" label="赠积分" prop="point">
 | 
				
			||||||
              <Input v-model="form.point" type="number" disabled style="width: 260px" />
 | 
					              <Input
 | 
				
			||||||
 | 
					                v-model="form.point"
 | 
				
			||||||
 | 
					                type="number"
 | 
				
			||||||
 | 
					                disabled
 | 
				
			||||||
 | 
					                style="width: 260px"
 | 
				
			||||||
 | 
					              />
 | 
				
			||||||
            </FormItem>
 | 
					            </FormItem>
 | 
				
			||||||
            <FormItem label="使用范围" prop="scopeType">
 | 
					            <FormItem label="使用范围" prop="scopeType">
 | 
				
			||||||
              <RadioGroup type="button" button-style="solid" v-model="form.scopeType">
 | 
					              <RadioGroup
 | 
				
			||||||
 | 
					                type="button"
 | 
				
			||||||
 | 
					                button-style="solid"
 | 
				
			||||||
 | 
					                v-model="form.scopeType"
 | 
				
			||||||
 | 
					              >
 | 
				
			||||||
                <Radio label="ALL" disabled>全品类</Radio>
 | 
					                <Radio label="ALL" disabled>全品类</Radio>
 | 
				
			||||||
                <Radio label="PORTION_GOODS" disabled>指定商品</Radio>
 | 
					                <Radio label="PORTION_GOODS" disabled>指定商品</Radio>
 | 
				
			||||||
              </RadioGroup>
 | 
					              </RadioGroup>
 | 
				
			||||||
            </FormItem>
 | 
					            </FormItem>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            <FormItem style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
 | 
					            <FormItem
 | 
				
			||||||
 | 
					              style="width: 100%"
 | 
				
			||||||
 | 
					              v-if="form.scopeType == 'PORTION_GOODS'"
 | 
				
			||||||
 | 
					            >
 | 
				
			||||||
              <Table border :columns="columns" :data="form.promotionGoodsList">
 | 
					              <Table border :columns="columns" :data="form.promotionGoodsList">
 | 
				
			||||||
                <template slot-scope="{ row }" slot="goodsName">
 | 
					                <template slot-scope="{ row }" slot="goodsName">
 | 
				
			||||||
                  <div>
 | 
					                  <div>
 | 
				
			||||||
| 
						 | 
					@ -165,7 +189,10 @@
 | 
				
			||||||
            </FormItem>
 | 
					            </FormItem>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            <div>
 | 
					            <div>
 | 
				
			||||||
              <Button @click="$router.push({ name: 'promotions/full-discount' })">返回</Button>
 | 
					              <Button
 | 
				
			||||||
 | 
					                @click="$router.push({ name: 'promotions/full-discount' })"
 | 
				
			||||||
 | 
					                >返回</Button
 | 
				
			||||||
 | 
					              >
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
| 
						 | 
					@ -211,7 +238,10 @@ export default {
 | 
				
			||||||
          key: "price",
 | 
					          key: "price",
 | 
				
			||||||
          minWidth: 40,
 | 
					          minWidth: 40,
 | 
				
			||||||
          render: (h, params) => {
 | 
					          render: (h, params) => {
 | 
				
			||||||
            return h("div", this.$options.filters.unitPrice(params.row.price, "¥"));
 | 
					            return h(
 | 
				
			||||||
 | 
					              "div",
 | 
				
			||||||
 | 
					              this.$options.filters.unitPrice(params.row.price, "¥")
 | 
				
			||||||
 | 
					            );
 | 
				
			||||||
          },
 | 
					          },
 | 
				
			||||||
        },
 | 
					        },
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
| 
						 | 
					@ -260,6 +290,8 @@ export default {
 | 
				
			||||||
      let params = {
 | 
					      let params = {
 | 
				
			||||||
        pageSize: 10,
 | 
					        pageSize: 10,
 | 
				
			||||||
        pageNumber: 0,
 | 
					        pageNumber: 0,
 | 
				
			||||||
 | 
					        getType: "ACTIVITY",
 | 
				
			||||||
 | 
					        storeId: "",
 | 
				
			||||||
        couponName: query,
 | 
					        couponName: query,
 | 
				
			||||||
        promotionStatus: "START",
 | 
					        promotionStatus: "START",
 | 
				
			||||||
      };
 | 
					      };
 | 
				
			||||||
| 
						 | 
					@ -276,7 +308,10 @@ export default {
 | 
				
			||||||
      let params = {
 | 
					      let params = {
 | 
				
			||||||
        pageSize: 10,
 | 
					        pageSize: 10,
 | 
				
			||||||
        pageNumber: 1,
 | 
					        pageNumber: 1,
 | 
				
			||||||
        goodsName: query,
 | 
					        id: query === this.form.giftId ? this.form.giftId : null,
 | 
				
			||||||
 | 
					        goodsName: query === this.form.giftId ? null : query,
 | 
				
			||||||
 | 
					        marketEnable: "UPPER",
 | 
				
			||||||
 | 
					        authFlag: "PASS"
 | 
				
			||||||
      };
 | 
					      };
 | 
				
			||||||
      this.giftLoading = true;
 | 
					      this.giftLoading = true;
 | 
				
			||||||
      getGoodsSkuData(params).then((res) => {
 | 
					      getGoodsSkuData(params).then((res) => {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -28,9 +28,14 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <!--      MINIO存储-->
 | 
					      <!--      MINIO存储-->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      <FormItem v-if="formValidate.type==='MINIO'" label="访问地址" prop="m_frontUrl">
 | 
				
			||||||
 | 
					        <Input v-model="formValidate.m_frontUrl"/>
 | 
				
			||||||
 | 
					        <span class="desc">配置MINIO nginx前端访问转发地址,一般为完整域名,例如:https://minio.pickmall.cn</span>
 | 
				
			||||||
 | 
					      </FormItem>
 | 
				
			||||||
      <FormItem v-if="formValidate.type==='MINIO'" label="endpoint" prop="m_endpoint">
 | 
					      <FormItem v-if="formValidate.type==='MINIO'" label="endpoint" prop="m_endpoint">
 | 
				
			||||||
        <Input v-model="formValidate.m_endpoint"/>
 | 
					        <Input v-model="formValidate.m_endpoint"/>
 | 
				
			||||||
      </FormItem>
 | 
					      </FormItem>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <FormItem v-if="formValidate.type==='MINIO'" label="accessKey" class="label-item" prop="m_accessKey">
 | 
					      <FormItem v-if="formValidate.type==='MINIO'" label="accessKey" class="label-item" prop="m_accessKey">
 | 
				
			||||||
        <Input v-model="formValidate.m_accessKey"/>
 | 
					        <Input v-model="formValidate.m_accessKey"/>
 | 
				
			||||||
      </FormItem>
 | 
					      </FormItem>
 | 
				
			||||||
| 
						 | 
					@ -40,6 +45,7 @@
 | 
				
			||||||
      <FormItem v-if="formValidate.type==='MINIO'" label="bucketName" prop="accessKeyId">
 | 
					      <FormItem v-if="formValidate.type==='MINIO'" label="bucketName" prop="accessKeyId">
 | 
				
			||||||
        <Input v-model="formValidate.m_bucketName"/>
 | 
					        <Input v-model="formValidate.m_bucketName"/>
 | 
				
			||||||
      </FormItem>
 | 
					      </FormItem>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <div class="label-btns">
 | 
					      <div class="label-btns">
 | 
				
			||||||
        <Button type="primary" @click="submit('formValidate')">保存</Button>
 | 
					        <Button type="primary" @click="submit('formValidate')">保存</Button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -66,6 +72,7 @@ export default {
 | 
				
			||||||
        m_accessKey: "",
 | 
					        m_accessKey: "",
 | 
				
			||||||
        m_secretKey: "",
 | 
					        m_secretKey: "",
 | 
				
			||||||
        m_bucketName: "",
 | 
					        m_bucketName: "",
 | 
				
			||||||
 | 
					        m_frontUrl: ""
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
| 
						 | 
					@ -126,4 +133,9 @@ export default {
 | 
				
			||||||
  width: 300px;
 | 
					  width: 300px;
 | 
				
			||||||
  margin-right: 10px;
 | 
					  margin-right: 10px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					.desc {
 | 
				
			||||||
 | 
					  margin-left: 5px;
 | 
				
			||||||
 | 
					  font-size: 12px;
 | 
				
			||||||
 | 
					  color: #999;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue