<!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 th:text="'采美365网-'+${product.name}">采美365网-商品详情</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/product/detail.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
    <link th:href="@{/css/product/detail.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 商品详情 -->
<div id="productDetail">
    <div class="wrap">
        <div class="productBox clear">
            <div class="imageBox" id="imgShown">
                <div v-if="isPC" class="bigImage">
                    <img :src="images[0]">
                    <span class="mask"></span>
                </div>
                <div id="swiperImage" class="smallImage swiper-container">
                    <ul class="swiper-wrapper clear">
                        <li class="swiper-slide mfc" v-for="img in images">
                            <img :src="img">
                        </li>
                    </ul>
                    <div class="swiper-pagination mfc"></div>
                </div>
                <div v-if="isPC" class="zoomImage">
                    <div class="zoom">
                        <img :src="images[0]">
                    </div>
                </div>
            </div>
            <div class="detailBox" th:object="${product}">
                <div class="crumbs">
                    <span>所属分类：</span>
                    <a th:href="@{'/product/list.html?category=' + *{bigTypeId} + '-0-0'}" th:text="*{bigTypeText}"></a>
                    <span>&gt;</span>
                    <a th:href="@{'/product/list.html?category=' + *{bigTypeId} + '-' + *{smallTypeId} + '-0'}" th:text="*{smallTypeText}"></a>
                    <span>&gt;</span>
                    <a th:href="@{'/product/list.html?category=' + *{bigTypeId} + '-' + *{smallTypeId} + '-' + *{tinyTypeId}}" th:text="*{tinyTypeText}"></a>
                </div>
                <h1 class="title" th:text="*{name}">商品名称</h1>
                <p class="tags">
                    <span th:each="tag: *{tagList}" th:text="${tag}"></span>
                </p>
                <div class="detail">
                    <p class="row"><span class="l">采美价</span><i>：</i>
                    <template v-if="userId && userId>0">
                       <em v-if="priceFlag==1" class="pricedeail">￥价格未公开</em>
                       <template v-else>
                            <template v-if="priceFlag==2 && userIdentity!=2">
                                <em style="font-weight: bold" class="pricedeail">￥会员可见</em>
                            </template>
                            <em v-else class="price pricedeail" :class="promotions.type==1&&promotions.mode==1?'original-price':''">￥{{buyRetailPrice}}</em>
                        </template>
                    </template>
                    <template v-else>
                        <em class="price">
                        <span class="priceicon">￥</span>
                            <i class="icon mIcon">
                                <i th:if="*{priceGrade}==1" class="icon mIcon one"></i>
                                <i th:if="*{priceGrade}==2" class="icon mIcon two"></i>
                                <i th:if="*{priceGrade}==3" class="icon mIcon three"></i>
                                <i th:if="*{priceGrade}==4" class="icon mIcon four"></i>
                                <i th:if="*{priceGrade}==5" class="icon mIcon five"></i>
                            </i>
                        </em>
                    </template>
                    </p>
                    <template  v-if="priceFlag!=2  && userIdentity!=2 ">
                        <p class="row"> <span class="l">市场价</span><i>：</i>
                             <em class="pricedeail" :class="deailData.actStatus==1?'original-price':''">￥{{buyRetailPrice}}</em>
                        </p>
                    </template>
                    <p class="row" style="position:relative;" v-if="deailData.actStatus==1||deailData.ladderPriceFlag==1" ><span class="l">促销</span><i>：</i>
                      <span class="activity" @click="activity" :class="isShow?'activitystyle':''" v-if="deailData.ladderPriceFlag==1">阶梯价格<i class="icon" :class="isShow?'activeicon':''"></i> </span>
                      <span class="activity" @click="activity" :class="isShow?'activitystyle':''" v-if="deailData.actStatus==1">{{promotions.name}}：{{promotions.touchPrice.toFixed(2)}}<i class="icon" :class="isShow?'activeicon':''"></i> </span>


                    <template v-if="userId && userId>0">
                        <!-- 已登录 会员可见   -->
                        <template v-if="priceFlag==2 && userIdentity !=2">
                            <div class="activityBox" v-show="isShow">
                              <p>
                                <a style="color: #E15616" href="javascript:0" @click="clubupgrade" class="loginWithParam">升级会员</a>，参与{{promotions.name}}促销活动
                              </p>
                              <button class="activeBtn" @click="activeBtn">了解</button>
                         </div>
                        </template>
                        <template v-else>
                        <div class="activityBox" v-show="isShow" v-if="promotions.type==3&&promotions.mode==2">
                            <!--  店铺满减-->
                               <p class="Boxtext">
                                  <a style="color: #E15616" href="javascript:0" class="loginWithParam">全店铺满减：满1000.00，减500.00</a>
                                    </br>促销时间：不限时
                                </p>
                                <button class="activeBtn" @click="activeBtn" v-show="isShow">了解</button>
                         </div>
                         <div class="activityBox" v-show="isShow"  v-if="promotions.type==1&&promotions.mode==3">
                               <!-- 店铺满赠 -->
                                <p class="Boxtext">
                                    <a style="color: #E15616" href="javascript:0" class="loginWithParam">全店铺，满1000.00，赠送商品：</a>
                                    </br>促销时间：{{promotions.beginTime}}~{{promotions.endTime}}
                                </p>
                                   <div class="activepro" v-for="promotions in giftData">
                                      <a :href="'/product-'+promotions.productId+'.html'" target="_blank">
                                           <div class="activeimg">
                                               <img :src="promotions.image">
                                           </div>
                                           <div class="activeright">
                                               <p>{{promotions.name}}</p>
                                               <p>x1</p>
                                           </div>
                                       </a>
                                   </div>
                              <button class="activeBtn" @click="activeBtn" v-show="isShow">了解</button>
                        </div>
                         <div class="activityBox" v-show="isShow"  v-if="promotions.type==1&&promotions.mode==1">
                           <!--单品优惠 -->
                               <p class="Boxtext">
                                  <a style="color: #E15616" href="javascript:0" class="loginWithParam">促销时间:{{promotions.beginTime}}~{{promotions.endTime}}</a>
                               </p>
                               <button class="activeBtn" @click="activeBtn" v-show="isShow">了解</button>
                         </div>
                          <div class="activityBox" v-show="isShow" v-if="promotions.type==1&&promotions.mode==2">
                           <!--单品满减 -->
                               <p class="Boxtext">
                                  <a style="color: #E15616" href="javascript:0" class="loginWithParam">购买此商品，满1000.00，减500.00</a>
                                </br>促销时间：不限时
                               </p>
                               <button class="activeBtn" @click="activeBtn" v-show="isShow">了解</button>
                         </div>
                          <div class="activityBox" v-show="isShow"  v-if="promotions.type==1&&promotions.mode==3">
                               <!-- 单品满赠 -->
                                <p class="Boxtext">
                                    <a style="color: #E15616" href="javascript:0" class="loginWithParam">购买此商品，满1000.00，赠送商品：</a>
                                    </br>促销时间：{{promotions.beginTime}}~{{promotions.endTime}}
                                </p>
                                   <div class="activepro" v-for="promotions in giftData">
                                      <a :href="'/product/detail.shtml?id='+promotions.productId" target="_blank">
                                           <div class="activeimg">
                                               <img :src="promotions.image">
                                           </div>
                                           <div class="activeright">
                                               <p>{{promotions.name}}</p>
                                               <p>x1</p>
                                           </div>
                                       </a>
                                   </div>
                              <button class="activeBtn" @click="activeBtn" v-show="isShow">了解</button>
                        </div>
                        <!--阶梯价-->
                        <div class="item-tips activityBox" v-show="isShow"  v-if="deailData.ladderPriceFlag==1">
                           <div class="tips-content">
                                 <div class="tip-tr">
                                    <div class="tip-td">起订量</div>
                                    <div class="tip-td">价格</div>
                                 </div>
                           <div class="tip-ul">
                                 <ul class="tip-ul">
                                    <li class="tip-tr ladderPriceList"  v-for="(item,index) in ladderList">
                                        <div class="tip-td buyNumRangeShow">{{item.numRange}}</div>
                                        <div class="tip-td buyPrice">￥{{item.buyPrice}}</div>
                                    </li>
                                 </ul>
                           </div>
                         </div>
                          <button class="activeBtn" @click="activeBtn" v-show="isShow">了解</button>
                       </div>
                       <div class="activityBox" v-show="isShow"  v-if="promotions.type==2&&promotions.mode==2">
                               <!-- 凑单满减 -->
                                <p class="Boxtext">
                                    <a style="color: #E15616" href="javascript:0" class="loginWithParam">购买下列商品，满1000.00，减500.00</a>
                                    </br>促销时间：{{promotions.beginTime}}~{{promotions.endTime}}
                                </p>
                              <button class="activeBtn" @click="activeBtn" v-show="isShow">了解</button>
                        </div>
                        <div class="activityBox" v-show="isShow"  v-if="promotions.type==2&&promotions.mode==3">
                               <!-- 凑单满赠 -->
                                <p class="Boxtext">
                                    <a style="color: #E15616" href="javascript:0" class="loginWithParam">购买此商品，满1000.00</a>
                                    </br>促销时间：{{promotions.beginTime}}~{{promotions.endTime}}
                                </p>
                                 <p  href="javascript:0" class="loginWithParam">赠送商品：</p>
                                   <div class="activepro" v-for="promotions in giftData">
                                      <a :href="'/product-'+promotions.productId+'.html'" target="_blank">
                                           <div class="activeimg">
                                               <img :src="promotions.image">
                                           </div>
                                           <div class="activeright">
                                               <p>{{promotions.name}}</p>
                                               <p>x1</p>
                                           </div>
                                       </a>
                                   </div>
                              <button class="activeBtn" @click="activeBtn" v-show="isShow">了解</button>
                        </div>

                       </template>
                    </template>
                    <template v-else>
                        <!--   未登录      -->
                        <div class="activityBox" v-show="isShow" v-if="deailData.ladderPriceFlag==1">
                              <p>
                                <a style="color: #E15616" href="javascript:0" @click="toLogin">登录</a>，享受阶梯价格优惠
                              </p>
                              <button class="activeBtn" @click="activeBtn">了解</button>
                         </div>
                        <div class="activityBox" v-show="isShow" v-else>
                              <p>
                                <a style="color: #E15616" href="javascript:0" @click="toLogin">登录</a>，参与{{promotions.name}}促销活动
                              </p>
                              <button class="activeBtn" @click="activeBtn">了解</button>
                         </div>
                    </template>
                    </p>
                    <p class="row"><span class="l">品牌</span><i>：</i><em th:text="*{brandName}"></em></p>
                    <p class="row"><span class="l">包装规格</span><i>：</i><em th:text="*{unit}"></em></p>
                    <p class="row"><span class="l">商品编码</span><i>：</i><em th:text="*{productCode}"></em></p>
                    <p class="row"><span class="l">库存</span><i>：</i><em th:text="*{stock}"></em></p>
                    <p class="row"><span class="l">起批量</span><i>：</i><em th:text="*{minBuyNumber}"></em></p>
                    <p class="row" v-if="priceFlag== 0 && userIdentity !=2"><span class="l" >采购量</span><i>：</i>
                        <span class="number">
                            <em class="sub" @click="changeCountSub" :class="[isQuantity==true?'disabled':'']">-</em>
                            <input type="number" v-model="number" maxlength='6' @blur="changeNumber($event)" >
                            <em class="add" @click="changeCountAdd" :class="[isStock==true?'disabled':'']">+</em>
                        </span>
                        <input type="hidden" th:value="*{step}">
                    </p>
                    <hr>
                    <p class="row"><span class="l">服务</span><i>：</i>
                           <img src="/img/base/fuwu.png" alt="selected"><span class="fuwu">无忧退货</span>
                           <img src="/img/base/fuwu.png" alt="selected"><span class="fuwu">快速退款</span>
                           <img src="/img/base/fuwu.png" alt="selected"><span class="fuwu">正品保证</span>
                    </p>
                    <span class="icon mIcon flag"></span>
                </div>
               <template v-if="userId && userId>0">
                <a v-if="priceFlag==2 && userIdentity!=2" class="upgrade" @click="clubupgrade" href="javascript:0">升级会员查看价格</a>
                    <div class="btnBox" v-if="priceFlag==0">
                        <a href="javascript:void(0);" class="cart icon" @click='addShopCart'>加入购物车</a>
                        <a href="javascript:void(0);" class="buy" @click="buyShopCart">立即购买</a>
                    </div>
                </template>
                <template v-else>
                    <a href="javascript:void(0);" class="member-detail " @click="toLogin">登录查看价格</a>
                </template>
            </div>
        </div>

        <div class="recommendBox">
            <div class="hd">相关推荐</div>
            <div id="productRecommend" class="swiper-container">
                <ul class="swiper-wrapper" v-cloak>
                    <li class="swiper-slide" v-for="p in recommends">
                        <div class="item">
                            <a class="image" :href="'/product-'+p.id+'.html'" target="_blank">
                                <img :src="p.image" :alt="p.name">
                                <span v-html="p.name"></span>
                            </a>
                        </div>
                    </li>
                    <li class="swiper-slide  defaulImg" v-for="(item,index) in recommdeindex">
                       <div class="item">
                            <a href="javascript:0" class="image">
                                <img src="/img/base/placeholder.png" alt="">
                            </a>
                     </div>
                </li>
                </ul>
                <div v-show="recommendPage>1" class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
            </div>
        </div>
    </div>
    <div class="wrap clear">
        <div v-if="!isPC" class="mShopBox">
            <a th:href="@{'/shop/home.html?sid=' + ${product.shopId}}">
                <span class="name"><em th:text="${product.shopTitle}"></em><i class="mIcon shop"></i></span>
                <span>经营范围：<em th:text="${product.businessScope}"></em></span>
                <span>所在地区：<em th:text="${product.shopAddress}"></em></span>
                <span>满意度：<em><i th:each="i:${#numbers.sequence(1,5)}" class="mIcon heart"></i></em></span>
            </a>
        </div>
        <div class="productInfo">
            <div class="tabTit">
                <span class="on">产品介绍</span>
                <span>相关参数</span>
                <span>服务项目</span>
                <span>评价</span>
            </div>
            <div class="tabCon">
                <div class="item">
                    <div th:utext="${product.detailInfo}"></div>
                    <div th:utext="${product.orderInfo}"></div>
                </div>
                <div class="item">
                    <table>
                        <tr v-for="pa in parameters">
                            <td v-text="pa.paramsName"></td>
                            <td v-text="pa.paramsContent"></td>
                        </tr>
                    </table>
                </div>
                <div class="item">
                    <div class="item" th:utext="${product.serviceInfo}"></div>
                </div>
                <div class="item">
                    <p class="comment">该商品暂无评价!</p>
                </div>
            </div>
        </div>
        <div v-if="isPC" class="rgt">
            <div class="shopBox">
                <div class="hd">供应商信息</div>
                <div class="bd">
                    <div class="name"><span th:text="${product.shopTitle}"></span><i class="icon shop"></i></div>
                    <div class="tit">经营范围：</div>
                    <div class="con" th:text="${product.businessScope}"></div>
                    <div class="tit">所在地区：</div>
                    <div class="con" th:text="${product.shopAddress}"></div>
                    <div class="tit">满意度：<i th:each="i:${#numbers.sequence(1,5)}" class="icon heart"></i></div>
                    <a th:href="@{'/shop/home.html?sid=' + ${product.shopId}}" class="btn">查看主页</a>
                </div>
            </div>
            <div class="contact">
                <div class="hd">联系方式</div>
                <div class="bd">
                    <div>采美客服（转接供应商）</div>
                    <div>电话：</div>
                    <div>0755-22907771</div>
                    <div>153-3885-1365</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" src="/lib/magnifier.js"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/product/detail.js(v=${version})}"></script>
</body>
</html>
