<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网--医疗美容生活美容正品采购平台</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/supplier-center/shop/decoration.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 我的采美 -->
<div id="decoration">
    <div class="navLayout" v-cloak>
        <div class="crumbs" v-if="isPC">
            <span>我的店铺</span>
            <span>&gt;</span>
            <span>装扮主页</span>
        </div>
        <div class="wrap clear">
             <!--左侧面包屑-->
            <template th:replace="supplier-center/components/tableft"></template>
            <div class="right">
                <div class="head-top">
                    <div class="title-text">主页广告设置<span>（主页广告图最多可上传4张图）</span></div>
                    <div class="addHomepage" @click="addpictures" v-if="isPC">添加主页广告图</div>
                </div>
                <template v-if="list.length>0">
                <div class="content" v-if="isPC">
                    <ul class="title-list">
                        <li>图片</li>
                        <li>标题</li>
                        <li>链接</li>
                        <li>说明</li>
                        <li>操作</li>
                    </ul>
                    <div class="shopBanner">
                        <ul v-for="item in list">
                            <li ><img :src="item.image" class="advertisement-pic"/></li>
                            <li><span class="banner-title">{{item.title}}</span></li>
                            <li>{{item.link}}</li>
                            <li>{{item.info}}</li>
                            <li class="operate">
                                <div class="operate-edit" @click="editpictures(item)">编辑</div>
                                <div class="operate-delete" @click="deletepictures(item)">删除</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="content" v-else>
                    <div class="shopBanner">
                        <ul v-for="item in list">
                            <div class="title-list">
                                <span>图片：</span>
                                <span>标题：</span>
                            </div>
                           <li style="width: 25%"><img :src="item.image" class="advertisement-pic"/></li>
                            <li>
                                <p class="banner-title">{{item.title}}</p>
                                <p class="title-color">链接：</p>
                                <p style="color: #1890f9;text-decoration: underline">{{item.link}}</p>
                            </li>
                            <li style="width: 100%">
                                 <p class="title-color" >说明：</p>
                                 <p style="font-weight: bold">{{item.info}}</p>
                            </li>
                            <li class="operate">
                                  <div class="operate-edit" @click="editpictures(item)">编辑</div>
                                  <div class="operate-delete" @click="deletepictures(item)">删除</div>
                            </li>
                        </ul>
                         <div class="addHomepage" @click="addpictures">添加主页广告图</div>
                    </div>
                </div>
             </template>
             <template v-else>
                 <div class="empty">
                    <img src="/img/order/icon-empt.svg">
                    <div class="msg"><p>暂无数据</p></div>
                  </div>
             </template>
            </div>

        </div>
           <div class="bgFrom" :class="bgflag?'show':''" v-if="bgflag">
                <div class="modalForm">
                    <div class="modal-header">
                        <span class="shou-address add-main-image">{{name}}</span>
                        <span class="icon mIcon close" @click="close"></span>
                    </div>
                    <div class="modal-content">
                        <div class="modal-div">
                            <span>标题 ：</span> <input type="text" name="title" v-model="params.title" class="modal-input-common keyword_filter">
                        </div>
                        <div class="modal-div">
                            <span> 链接 ：</span>
                             <input type="text" v-model="params.link" placeholder="例如：http://www.caimei365.com"class="modal-input-common keyword_filter" name="link">
                         </div>
                        <div class="modal-div">
                            <span> 说明 ：</span> <input type="text" v-model="params.info" class="modal-input-common keyword_filter" name="info">
                        </div>
                        <div class="upload-img">
                            <span class="red up">*</span><span class="up">图片：</span>
                            <div class="upimg">
                                <img class="center" :src="params.image" v-if="logoShow">
                                <i class="icon mIcon add" v-if="iconflag"></i>
                                <input type="file" ref="images" class="add-pic"  id="uploadfile" accept="image/*" @change="uploadlogo"/>
                            </div>
                            <div >
                                <p class="Note">注：仅支持<span class="colorstyle">jpg、gif、jpeg、png、emp</span>，文件小于<span class="colorstyle">5M</span></p>
                                <div class="saveBtn" @click="submit" >保存</div>
                             </div>
                        </div>

                    </div>
                </div>
            </div>
    </div>
</div>

<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-center/shop/decoration.js(v=${version})}"></script>
</body>
</html>
