<!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/flea-market/form.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 二手商品发布 -->
<div id="fleaMarketForm">
     <div class="bannerimg"><img src="/img/flea-market/banner@2x.png" v-if="isPC"><img src="/img/flea-market/banner3.png " v-else></div>
      <div class="my-maintenance" id="secondHandrelease">
            <div class="mt-top" >
                <span class="mt-title">发布信息</span>
            </div>
            <div class="newsTitle">
                <p>欢迎您来到采美365网二手商品市场，您可以在这里发布二手设备、产品信息，每个商品需要收取您100元的展示费，展示期为6个月；
                   为了完整展示您的商品，请您认真填写以下内容，谢谢合作。</p>
             </div>
          <div class="mt-bottom">
            <form id="mt-form" method="post" enctype="multipart/form-data" class="login-form common-form">
                <div class="unlogin-label spacing" style="letter-spacing: 1px;margin-right: 0"><span class="red-color">*</span>分类：</div>
                      <div class="secondradio" >
                          <div v-for="(item,index) in fenlei"  v-model="secondParams.secondHandType"  @click="secondHandRidio(item)"
                              :class="currentId==item.value?'select active':''" class="icon mIcon ">
                              {{item.name}}
                          </div>
                          <span class="release-tips  errTips icon mIcon" v-show="vShow_secondHandType">{{fromMessage}}</span>
                      </div>
                      <div class="secondradio"  v-if="isShow" >
                        <div v-for="(item ,index) in radioList" :key="index" :class="item.isChecked ? 'select active':''"
                                @click="secondHandType(item)" class="icon mIcon ">
                               {{item.name}}
                        </div>
                         <span class="release-tips errTips icon mIcon" v-show="vShow_instrumentType">{{fromMessage}}</span>
                    </div>
                    <div class="linqi_text" v-show="secondParams.secondHandType==2">
                        <div class="jiaobiao"></div>
                        <p>临期产品是指临近保质期的产品，距离到期日最好在6个月以上</p>
                    </div>
                    <div class="unlogin-item input-item shrink-spacing">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品品牌：</div>
                        <i class="icon selected"></i>
                        <div class="select" @click="showBrand">
                            <span class="placeholder" >{{brandname}}</span>
                            <ul v-show="selectBrand">
                                <li  v-for="(item,index) in BrandList"   :key="index" :value='item.id' @click="ChangeBrand(item)">{{item.name}}</li>
                            </ul>
                        </div>
                        <input type="text" v-show="shoplogoTwo" v-model="secondParams.brandName" maxlength="20" id="shoplogoTwo" placeholder="请输入商品品牌">
                         <div class="release-tips errTips icon mIcon" v-show="vShow_BrandID">{{fromMessage}}</div>
                    </div>
                    <div class="unlogin-item input-item shrink-spacing">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品名称：</div>
                        <input type="text" maxlength="40"  id="shopname"  v-model="secondParams.name" placeholder="请输入商品名称，不超过40个汉字">
                        <div class="release-tips errTips icon mIcon" v-show="vShow_Name">{{fromMessage}}</div>
                    </div>
                     <div class="unlogin-item input-item shrink-spacing">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;">出厂日期：</div>
                        <input type="text"  v-model="secondParams.fixedYears" id="shopyear" maxlength="10" placeholder="请输入出厂日期 如：2020年06月">
                    </div>
                     <div class="unlogin-item input-item shrink-spacing"  v-show="secondParams.secondHandType==2">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>产品到期日：</div>
                        <input type="text"  v-model="secondParams.maturityYears" id="expire" maxlength="10" placeholder="请输入产品到期日，如：2020年12月">
                        <span class="release-tips errTips icon mIcon" v-show="vShow_expire">{{fromMessage}}</span>
                    </div>
                    <div class="unlogin-item input-item shrink-spacing">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;">公司名称：</div>
                        <input type="text"  v-model="secondParams.companyName" id="mechanismname" maxlength="30" placeholder="请输入公司名称，不超过30个汉字">
                    </div>
                     <div class="unlogin-item input-item shrink-spacing" >
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>交易价：</div>
                        <input type="text" style="width: 288px;" maxlength="20" id="shopprice"   oninput="value=value.replace(/[^\d]/g, '')"
                           v-model="secondParams.price1"  placeholder="请输入交易价">
                        <label class="xiangliao" style="color: #E15616;;margin-left: 15px;position: relative;font-size: 14px">
                        <input type="checkbox" name="Detailed_chat" v-model="secondParams.detailTalkFlags" @click="Detailed($event)" id="Detailed"><label for="Detailed" class="transactionbox"></label>价格详聊</label>
                        <span class="showflag" v-show="vShow_detailTalkFlag">(勾选代表同意不显示交易价)</span>
                        <span class="release-tips errTips icon mIcon" v-show="vShow_Price">{{fromMessage}}</span>
                    </div>
                     <div class="unlogin-item input-item shrink-spacing" v-show="secondParams.secondHandType==2">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>市场价：</div>
                        <input type="text"  v-model="secondParams.normalPrice" id="market" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')"   placeholder="请输入市场价">
                        <span class="release-tips errTips icon mIcon" v-show="vShow_Market">{{fromMessage}}</span>
                    </div>
                    <div class="unlogin-item input-item shrink-spacing" v-show="secondParams.secondHandType==2">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>采购价/原价：</div>
                        <input type="text"  v-model="secondParams.originalPrice" id="original_price" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')" placeholder="请输入采购价/原价"/>
                        <span class="release-tips errTips icon mIcon" v-show="vShow_original">{{fromMessage}}</span>
                    </div>
                     <div class="unlogin-item input-item shrink-spacing" v-show="secondParams.secondHandType==2">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>数量：</div>
                        <input type="text"  id="number" v-model="secondParams.stock" maxlength="30" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数量">
                       <span class="release-tips errTips icon mIcon" v-show="vShow_Number">{{fromMessage}}</span>
                    </div>
                    <div class="unlogin-item input-item shrink-spacing">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品成色：</div>
                        <input type="text" maxlength="10" id="shopcolor"v-model="secondParams.productQuality"  placeholder="请输入商品成色，如“9成新”">
                        <span class="release-tips errTips icon mIcon" v-show="vShow_shopColor">{{fromMessage}}</span>
                    </div>
                    <div class="unlogin-item input-item shrink-spacing">
                        <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>联系人：</div>
                        <input type="text" maxlength="6" v-model="secondParams.contactName" id="linkman"  placeholder="请输入联系人姓名">
                        <span class="release-tips errTips icon mIcon" v-show="vShow_contactName">{{fromMessage}}</span>
                    </div>
                    <div class="unlogin-item input-item shrink-spacing">
                        <div class="unlogin-label spacing"><span class="red-color">*</span>联系方式：</div>
                        <input type="text"  v-model="secondParams.contactMobile"  oninput="value=value.replace(/[^\d]/g,'')"  id="phoneNum" maxlength="11" placeholder="请输入联系人手机号 / 固话">
                        <span class="release-tips errTips icon mIcon" v-show="vShow_contactMobile">{{fromMessage}}</span>
                    </div>
                    <div class="unlogin-item input-item shrink-spacing">
                        <div class="unlogin-label spacing">商品类型：</div>
                        <div class="secondradio">
                            <div class="buy icon mIcon" v-for="(item ,index) in beauty" :key='index' value="item.value" @click="getProductType(item.value)" :class="secondType==item.value?'select active':''">
                               {{item.name}}
                            </div>
                        </div>
                    </div>
                    <div class="unlogin-item input-item address-item shrink-spacing" id="Address">
                        <div class="unlogin-label spacing"><span class="red-color">*</span>联系地址：</div>
                        <i class="province icon mIcon selected"></i>
                    <select class="address-input reg-select province" name="provinceID" id="cProvince" @change="province" >
                        <option value="" >请选择</option>
                        <option v-for="(item ,index) in provinceArray" :key="index" :value='item.provinceID' >{{item.name}}</option>
                    </select>
                    <i class="cCity icon mIcon selected"></i>
                    <select class="address-input reg-select city" name="cityID" id="cCity" @change="getcity($event)" >
                        <option value="" >请选择</option>
                        <option v-for="(item ,index) in cityArray" :key="index" :value="item.cityID" >{{item.name}}</option>
                    </select>
                    <i class="cTown icon mIcon selected"></i>
                    <select class="address-input reg-select town" name="townID" id="cTown" @change="getcTown($event)">
                        <option value="" >请选择</option>
                        <option v-for="(item ,index) in townArray" :key="index" :value="item.townID"  >{{item.name}}</option>
                    </select>
                    <span class="release-tips errTips icon mIcon" v-show="vShow_TownId">{{fromMessage}}</span>
                        <textarea type="text" id="addressDetails" class="border-grey address-details" v-model="secondParams.address" maxlength="50" placeholder="请填写详细地址，如街道/小区/门牌等" /></textarea>
                       <span class="release-tips errTips icon mIcon" v-show="vShow_Address">{{fromMessage}}</span>
                    </div>
                    <div class="release-main-container">
                        <div class="release-from unlogin-label">
                            <div class="release-label"><span class="red-color" >*</span>营业执照图片:</div>
                            <div class="release-input upload image"  id="uploadGoodsImages">
                                <div class="upload-file"  v-for="(item, index) in GoodsImagesList" :key="index">
                                    <img :data-original='item' :src="item" :data-image="item" alt="" class="upload-img" >
                                    <i class="icon mIcon del" @click="removeGoodsImagesFn(index)"></i>
                                </div>
                                <div class="upload-file" v-show="GoodsImagesList.length<5">
                                    <i class="icon mIcon add"></i>
                                    <p class="add-text">营业执照</p>
                                    <input ref="goodsImages" type="file" name="file" value="" class="input-file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadGoodsImagesFn">
                                </div>
                                <div class="form-upload-tips">
                                    <i class="icon mIcon icon-wen"></i>
                                    <div class="wen-tips">最多上传5张二手商品图片，请尽量全部上传，单张图片不能超过5M</div>
                                </div>
                            </div>
                    </div>
                     <span class="release-tips errTips icon mIcon" v-show="vShow_GoodsImages">{{fromMessage}}</span>
                    </div>
                     <div class="unlogin-item">
                        <div class="unlogin-label spacing">商品详细信息：</div>
                        <div class="textarea-wrapper">
                            <textarea class="border-grey" maxlength="200" v-model="secondParams.productDetails"  cols="70" id="description" rows="6"  placeholder="请填写商品详细信息，对商品进行更详细的描述"></textarea>
                            <span id="word-limit">不超过200字</span>
                        </div>
                    </div>
                    <div class="unlogin-item">
                        <div class="unlogin-label spacing" ><span class="red-color">*</span>免责声明：</div>
                        <div class="textarea-wrapper" style="letter-spacing: 1.5px">
                            鉴于本网站提供的二手版块信息包括但不限于公司名称，商品的简介、性能、描述与说明，相关图片、视频等均由卖家自行提供，
                            由卖家对其提供的信息承担相应法律责任。买家应自行甄别商品信息并查验商品性状。
                            本网站对二手版块中买卖双方的交易不提供任何形式的担保与保证，特此声明！
                        </div>
                    </div>
                     <div class="BtnAll" >
                            <button type="button" class="Read" ><input type="checkbox" @click="changeBox"/>已阅读</button>
                            <button type="button"  @click="submitBtn" id="btn-submit">发布</button>
                      </div>
                      <span class="release-tips errTips icon mIcon" v-show="vShow_checkBox">{{fromMessage}}</span>
            </form>
          </div>

             <div class="secondBj thebj"   v-show="vShow_secondBj" :class="vShow_secondBj?'show':''">
                    <div class="bjmain theresult">
                        <span>提示</span>
                        <p>发布二手商品，采美需要收取您每个商品100元的展示费，展示期为6个月</br>
                            支付完成后，商品会在1-2个工作日内进行审核，审核通过后，商品会立即上线</p>
                        <div class="paybtn">
                            <span class="cancel closebtn" @click="gopay">去支付</span>
                            <span class="thegopay gozhofubao" @click="quxiao">取消，不发布了</span>
                        </div>
                        <div class="close closebtn" @click="quxiao">×</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/common/serviceapi/second.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/flea-market/form.js(v=${version})}"></script>
</body>
</html>
