<!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/supplier-center/shop/preview.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>
<!-- 预览商品 -->
<div class="preview-container" id="previewContainer" v-show="isRequest" :class="isRequest ? 'active' : ''">
    <div class="inner-container">
        <div class="preview-header clear">
            <div class="preview-banner clear">
                <div class="preview-banner-big">
                    <img class="preview-img" :src="previewBigimage">
                    <span class="hover"></span>
                </div>
                <div class="preview-banner-small" id="CM____pic_thumb">
                    <ul class="preview-thumb-ul">
                        <li class="item" v-for="(item, index) in previewThumb" :key="index" :data-src="item.image">
                            <img :src="item.image">
                        </li>
                    </ul>
                </div>
                <div class="preview-box" id="mag">
                    <div class="bigitem">
                        <img id="magnifierImg" :src="previewBigimage"/>
                    </div>
                </div>
            </div>
            <div class="preview-info">
                <div class="preview-info-title">
                    <p class="info-p classly">
                        <span>所属分类:</span>
                        <span>{{shopInfo.firstClassifyName}}</span> >
                        <span>{{shopInfo.twoClassifyName}}</span> >
                        <span>{{shopInfo.threeClassifyName}}</span>
                    </p>
                    <p class="info-p name">{{shopInfo.aliasName}}</p>
                    <p class="info-p label"><span class="label-s" v-for="(item, index) in previewTags" :key="index">{{item.name}}</span></p>
                </div>
                <div class="preview-info-main clear">
                    <div class="info price">
                        <span class="label">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：</span>
                        <p>
                            <span class="fave-tag">优惠价</span>
                            <span class="fave-text">￥<span class="big">{{toFixedFn(shopInfo.price1)}}</span></span>
                            <span class="fave-text-none">￥{{toFixedFn(shopInfo.normalPrice)}}</span>
                        </p>
                    </div>
                    <div class="info bind">
                        <span class="label">品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌：</span>
                        <p>{{shopInfo.brandName}}</p>
                    </div>
                    <div class="info unit">
                        <span class="label">包装规格：</span>
                        <p>{{shopInfo.unit}}</p>
                    </div>
                    <div class="info num">
                        <span class="label">商品编码：</span>
                        <p>{{shopInfo.productCode}}</p>
                    </div>
                    <div class="info price">
                        <span class="label">起&nbsp;批&nbsp;量：</span>
                        <p>{{shopInfo.minBuyNumber}}</p>
                    </div>
                    <div class="info price">
                        <span class="label">库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存：</span>
                        <p>{{shopInfo.stock}}</p>
                    </div>
                    <div class="info">
                        <span class="label">采&nbsp;购&nbsp;量：</span>
                        <div class="num-box">
                            <span>-</span>
                            <span>{{shopInfo.minBuyNumber}}</span>
                            <span>+</span>
                        </div>
                    </div>
                    <div class="info sever">
                        <span class="label">服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务：</span>
                        <p>
                            <span class="text">无忧退货</span>
                            <span class="text">急速退款</span>
                            <span class="text">正品保证</span>
                        </p>
                    </div>
                </div>
                <div class="preview-info-btn">
                    <div class="info-btn cart">加入购物车</div>
                    <div class="info-btn buy">立即购买</div>
                </div>
            </div>
        </div>
        <div class="preview-bottom clear">
            <div class="preview-left">
                <div class="preview-tabs">
                    <div class="preview-tabs-item" :class="{ active: tabIndex === 0 }" @click="changeTab(0)">产品介绍</div>
                    <div class="preview-tabs-item" :class="{ active: tabIndex === 1 }" @click="changeTab(1)" v-show="previewParams.length>0">相关参数</div>
                    <div class="preview-tabs-item" :class="{ active: tabIndex === 2 }" @click="changeTab(2)" v-show="shopInfo.orderInfo !='' || shopInfo.serviceInfo != ''">服务项目</div>
                    <div class="preview-tabs-item" :class="{ active: tabIndex === 3 }" @click="changeTab(3)">评价(0)</div>
                </div>
                <div class="preview-section" v-show="tabIndex === 0">
                    <div class="preview-section-html" v-html="shopInfo.detailInfo"></div>
                </div>
                <div class="preview-section" v-show="tabIndex === 1">
                    <div class="parameter-main clear">
                        <div class="item-tabody clear" v-for="(item, index) in previewParams" :key="index" >
                            <div class="item-td">{{item.paramsName}}</div>
                            <div class="item-tr">{{item.paramsContent}}</div>
                        </div>
                    </div>
                </div>
                <div class="preview-section" v-show="tabIndex === 2">
                    <div class="parameter-text" v-if="shopInfo.orderInfo !=''">
                        <div class="parameter-text-title">订购方案:</div>
                        <div class="parameter-text-p" v-html="shopInfo.orderInfo"></div>
                    </div>
                    <div class="parameter-text" v-if="shopInfo.serviceInfo !=''">
                        <div class="parameter-text-title">服务详情:</div>
                        <div class="parameter-text-p" v-html="shopInfo.serviceInfo"></div>
                    </div>
                </div>
                <div class="preview-section" v-show="tabIndex === 3">
                    <p class="none">该商品暂无评价!</p>
                </div>
            </div>
            <div class="preview-right">
                <div class="preview-shopinfo">
                    <div class="title">供应商信息</div>
                    <div class="shopinfo-main">
                        <div class="name">{{shopData.name}}</div>
                        <div class="shopinfo-text">
                            <h1>经营范围:</h1>
                            <p>{{shopData.businessScope}}</p>
                        </div>
                        <div class="shopinfo-text">
                            <h1>所在地区:</h1>
                            <p>{{shopData.provincialAddress}}</p>
                        </div>
                        <div class="shopinfo-text">
                            <h1><span style="float: left;">满&nbsp;意&nbsp;度:</span><span><i class="star"v-for="i in 5"></i></span></h1>
                        </div>
                        <div class="shopinfo-text">
                            <div class="shopinfo-btn" @click="homePageFn">查看主页</div>
                        </div>
                    </div>
                </div>
                <div class="preview-shopinfo">
                    <div class="title">联系方式</div>
                    <div class="shopinfo-main">
                        <div class="name">采美客服（转接供应商）</div>
                    </div>
                    <div class="shopinfo-main">
                        <div class="tel">
                            <p>电话:</p>
                            <p>0755-22907771</p>
                            <p>153-3885-1365</p>
                        </div>
                        <div class="tel-icon"></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="@{/lib/js/magnifier.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/preview.js(v=${version})}"></script>

</body>
</html>
