<template>
<section class="supplier boxsiz">
<div class="head">
<div class="banner"></div>
<div class="head-form boxsiz">
<dl class="head-form-wrap boxsiz">
<dd class="inp-wrap boxsiz">
<label class="lineBlock va-m">公司名称：</label>
<input type="text" id="com_name" placeholder="请输入公司名称" class="va-m inp" v-model="form.com_name" maxlength="50">
<p class="hint" :class="{'f-orange':firmNum>=max}"><span>{{firmNum}}</span>/50</p>
</dd>
<dd class="inp-wrap boxsiz">
<label class="lineBlock va-m">联 系 人：</label>
<input type="text" placeholder="请输入联系人" class="va-m inp" v-model="form.linkName">
</dd>
<dd class="inp-wrap boxsiz">
<label class="lineBlock va-m"><em>*</em>联系方式：</label>
<input type="number" placeholder="请输入手机或电话号码" class="va-m inp" v-model="form.mobile" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')">
</dd>
<!-- 重新发送3次短信验证码才会显示 -->
<dl class="updateCodeImg " v-show="imgcodestatus">
<dt>图片验证</dt>
<dd>
<p class="code-text fl"><input type="text" id="imgCode" v-model="imgcodeval" ></p>
<a href="javascript:void(0);" class="code fr"><img v-imgCode ></a>
</dd>
</dl>
<dd class="inp-wrap boxsiz" v-if="verifyCodeFlag">
<label class="lineBlock va-m"><em>*</em>短信验证：</label>
<input type="number" placeholder="请输入验证码" class="va-m inp w1" v-model="form.verifyCode">
<input type="button" @click="getCode()" name="codeButton" class="lineBlock va-m code-text" :value="codetext" :class="{'code-text-disabled':codeactive}" :disabled="disabled">
</dd>
<dd class="inp-wrap boxsiz">
<label class="lineBlock va-m"><em>*</em>入驻类型：</label>
<div class="lineBlock va-m inp-wrap-radio boxsiz">
<div @click="supplierActive = index" v-for="(item,index) in itemtext" :key="index" class="lineBlock va-m boxsiz inp-wrap-radio-bb">
<i class="icn" :class="{'icn-curr':supplierActive==index}"></i>
<em class="va-m">{{item}}</em>
<b class="lineBlock emptys"></b>
</div>
</div>
</dd>
<dd class="inp-wrap boxsiz">
<label class="lineBlock va-m"><em></em>主营产品：</label>
<textarea class="lineBlock va-m boxsiz" placeholder="请输入" v-model="form.main_brand" maxlength="50"></textarea>
<p class="hint" :class="{'f-orange':secondNum>=50}"><span>{{secondNum}}</span>/50</p>
</dd>
</dl>
<div class="btn-wrap">
<em class="error" v-if="formError">{{formMsg}}</em>
<a href="javascript:;" class="submit" @click="submit()">立即提交</a>
</div>
</div>
</div>
<div class="content">
<div class="wrap wrap-1">
<p class="tit">
<b></b>
<span>入驻猎芯平台的六大优势</span>
</p>
<van-swipe :autoplay="3000000" indicator-color="#ffffff" class="supplier-slide">
<van-swipe-item>
<div class="lineBlock slide-box slide-box-1 boxsiz">
<i class="iconfont icon-kehuqunti-"></i>
<p class="t1">庞大精准的客户群体</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">13万+精准用户，每月2000+新用户注入</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">上千个元器件采购活跃社群</span></p>
</div>
</div>
<div class="lineBlock slide-box slide-box-2 boxsiz">
<i class="iconfont icon-cangchuwuliufuwu-"></i>
<p class="t1">免费仓储物流服务</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">恒温恒湿，10000+平米超大仓库现货存放</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">自营商品3小时内发货</span></p>
</div>
</div>
</van-swipe-item>
<van-swipe-item>
<div class="lineBlock slide-box slide-box-3 boxsiz">
<i class="iconfont icon-dashuju-"></i>
<p class="t1">大数据分析及营销服务</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">海量物料及价格分析，快速响应采购市场变化</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">订单数据及用户画像分析，精准营销参考</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">超千家知名品牌深度合作，源头了解市场动向</span></p>
</div>
</div>
<div class="lineBlock slide-box slide-box-4 boxsiz">
<i class="iconfont icon-shangcheng-"></i>
<p class="t1">多终端在线商城</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">PC电脑端，满足工作时间采购需求</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">H5端/小程序，8小时之外随时查看</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">微信公众号，热门资讯推送提升用户粘性</span></p>
</div>
</div>
</van-swipe-item>
<van-swipe-item>
<div class="lineBlock slide-box slide-box-5 boxsiz">
<i class="iconfont icon-yunwei-"></i>
<p class="t1">专业运营推广团队</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">SEM高付费投放，成交率超过50%</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">多家专业展会合作方，高曝光高知名度</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">高频度营销活动，持续拉动销量上涨</span></p>
</div>
</div>
<div class="lineBlock slide-box slide-box-6 boxsiz">
<i class="iconfont icon-kehuqunti-"></i>
<p class="t1">一对一专属客服跟进成单</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">从询价到成单，每位客户均有专属客服跟进</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">CRM系统管理，提升客服跟进效率</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">工作日内响应时间不超过半小时</span></p>
</div>
</div>
</van-swipe-item>
</van-swipe>
</div>
<div class="wrap wrap-2">
<p class="tit">
<b></b>
<span>选择适合的入驻方式 </span>
</p>
<ul class="tab boxsiz">
<li @click="tab(index)" :class="{'curr':active==index}" v-for="(item,index) in itemtext" :key="index">
{{item}}
</li>
</ul>
<ul class="tab-wrap boxsiz" :style="{'display':isAvisible}">
<li class="boxsiz">
<i class="lineBlock va-t ico">1</i>
<div class="lineBlock text va-t">
<p class="t1">多种入驻模式</p>
<p class="t2">供应商寄售、猎芯直接购买和型号预售三种模式可选</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">2</i>
<div class="lineBlock text va-t">
<p class="t1">支持预售</p>
<p class="t2">大批量采购支持预售，提交订单后迅速反馈长短交期</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">3</i>
<div class="lineBlock text va-t">
<p class="t1">智能搜索</p>
<p class="t2">支持型号和参数智能搜索，搜索结果最前端展示</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">4</i>
<div class="lineBlock text va-t">
<p class="t1">智能BOM</p>
<p class="t2">一键上传bom单匹配型号，规格书在线展示</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">5</i>
<div class="lineBlock text va-t">
<p class="t1">快速选样</p>
<p class="t2">新用户、老用户新产品均可在线快速选样购买，帮助开拓新客户，打开新市场</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">6</i>
<div class="lineBlock text va-t">
<p class="t1">免费仓储</p>
<p class="t2">10000+平米，恒温恒湿大仓库，商品3小时内发货</p>
</div>
</li>
<li class="boxsiz">
<a href="javascript:;" class="btn" @click="goAnchor(2)" id="zy">
<em class="va-m">成为自营供应商</em>
<i class="lineBlock va-t"></i>
</a>
</li>
</ul>
<ul class="tab-wrap boxsiz" :style="{'display':isBvisible}">
<li class="boxsiz">
<i class="lineBlock va-t ico">1</i>
<div class="lineBlock text va-t">
<p class="t1">多渠道推广</p>
<p class="t2">线上线下多渠道产品推广，提高成交率</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">2</i>
<div class="lineBlock text va-t">
<p class="t1">免费API服务</p>
<p class="t2">免费API对接服务，实现数据自动对接与更新</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">3</i>
<div class="lineBlock text va-t">
<p class="t1">共享行业资源</p>
<p class="t2">加入供应商资源库，与行业专家共同分享优势资源</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">4</i>
<div class="lineBlock text va-t">
<p class="t1">数据对接</p>
<p class="t2">全方位对接产品数据，无需调用实体商品库存</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">5</i>
<div class="lineBlock text va-t">
<p class="t1">优先展示</p>
<p class="t2">可加入猎芯联营专属渠道，搜索结果优先展示</p>
</div>
</li>
<li class="boxsiz">
<i class="lineBlock va-t ico">6</i>
<div class="lineBlock text va-t">
<p class="t1">庞大精准客户</p>
<p class="t2">已有130000+精准用户入驻，每日20000+浏览量</p>
</div>
</li>
<li class="boxsiz">
<a href="javascript:;" class="btn" id="ly" @click="goAnchor(3)">
<em class="va-m">成为联营供应商</em>
<i class="lineBlock va-t"></i>
</a>
</li>
</ul>
</div>
<div class="wrap wrap-3">
<p class="tit">
<b></b>
<span>入驻流程 </span>
</p>
<div class="join-wrap boxsiz">
<div class="bnt-wrap boxsiz">
<a href="javascript:;" class="btn boxsiz" @click="goAnchor(1)" id="join-btn">立即加入</a>
</div>
</div>
</div>
</div>
<van-loading type="spinner" color="#000" class="loading-background" v-if="loading"/>
<Menu :color="color"></Menu>
</section>
</template>
<script>
import Vue from 'vue';
import {mapState} from 'vuex'
import {Swipe, SwipeItem, Loading,Toast} from 'vant';
import Menu from '@/views/common/Menu.vue';
Vue.use(Swipe).use(SwipeItem).use(Loading);
export default {
name: 'supplier',
data() {
return {
color: '#fff',
active: 0,
supplierActive: 0,
itemtext: ['自营供应商', '联营供应商'],
isAvisible: 'block',
isBvisible: 'none',
numberFlag: false,
verifyCodeFlag: false,
codetext: '获取验证码',
disabled: false,
codeactive: false,
firmNum: 0,
secondNum: 0,
max: 50,
formMsg: '',
formError: false,
imgcodestatus:false,
imgcodeval:"",
form: {
com_name: '',
linkName: '',
mobile: '',
verifyCode: '',
supplier_type: '',
main_brand: ''
}
}
},
computed: {
...mapState({
loading: state => state.smt.loading,
formImgShow: state => state.smt.formImgShow,
formCodeStatus:state => state.smt.formCodeStatus,
}),
comName() {
return this.form.com_name;
},
linkName() {
return this.form.linkName;
},
mainBrand() {
return this.form.main_brand;
},
verifyCode() {
return this.form.verifyCode;
},
mobileVal() {
return this.form.mobile;
}
},
watch: {
formImgShow(val){
this.imgcodestatus=val;
},
formCodeStatus(val){
if(val){
this.timeNum();
}
},
mainBrand(val) {
if (val.length > this.max) {
this.secondNum = this.max;
} else {
this.secondNum = val.length;
}
},
linkName(val) {
var reg = /^[\u0391-\uFFE5A-Za-z]+$/;
if (!reg.test(val)) {
this.formError = true;
this.formMsg = '亲,称呼只能为英文和中文';
} else {
this.formError = false
this.formMsg = '';
}
},
verifyCode(val) {
if (val) {
this.formError = false;
}
},
comName(val) {
if (val) {
this.formError = false;
if (val.length > this.max) {
this.firmNum = this.max;
} else {
this.firmNum = val.length;
}
}
},
mobileVal(val) {
if (val.length >= 11) {
this.verifyCodeFlag = true;
this.formError = false;
this.$store.dispatch({
type: 'checkAccountExists',
account: this.form.mobile
})
}
}
},
methods: {
tab(index) {
this.active = index;
this.isAvisible = 'none'
this.isBvisible = 'none'
if (index == 0) {
index == 0 ? this.isAvisible = 'block' : this.isAvisible = 'none'
} else if (index == 1) {
index == 1 ? this.isBvisible = 'block' : this.isBvisible = 'none'
}
},
submit() {
var character_reg = /^[\u0391-\uFFE5A-Za-z]+$/;
var tel_reg = /^1[3456789]\d{9}$/;
// if (!this.form.com_name) {
// this.formError = true;
// this.formMsg = '亲,请输入公司名称';
// return;
// }
//
// if (!this.form.linkName) {
// this.formError = true;
// this.formMsg = '亲,请输入您的称呼';
// return;
// }
//
// if (!character_reg.test(this.form.linkName)) {
// this.formError = true;
// this.formMsg = '亲,称呼只能为英文和中文';
// return;
// }
if (!this.form.mobile) {
this.formError = true;
this.formMsg = '亲,请输入手机';
return;
}
if (!tel_reg.test(this.form.mobile)) {
this.formError = true;
this.formMsg = '亲,手机格式不正确';
return;
}
if (!this.form.verifyCode) {
this.formError = true;
this.formMsg = '亲,请输入验证码';
return;
}
//提交
this.$store.dispatch({
type: 'chainFind',
types: 2,
mobile: this.form.mobile,
linkName: this.form.linkName,
verifyCode: this.form.verifyCode,
com_name: this.form.com_name,
main_brand: this.form.main_brand,
supplier_type: parseInt(this.supplierActive) + 1
})
},
getCode() {
if(this['imgcodestatus']){
if(!this['imgcodeval']){
Toast({
message: "请确认图片验证码",
duration: 3000
});
return;
}
}
if(this.codeactive){
return
}
this.$store.dispatch({
type: 'customSmsVerify',
mobile: this.form.mobile,
verify:this['imgcodeval']
})
},
timeNum() {
var me = this;
var wait = 60;
me.disabled = true;
me.codeactive = true;
me.codetext = wait + '秒后获取';
var clock = setInterval(doLoop, 1000);
function doLoop() {
wait--;
if (wait > 0) {
me.codetext = wait + '秒后获取';
me.codeactive = true;
} else {
clearInterval(clock);
me.disabled = false;
me.codeactive = false;
me.codetext = '重新获取';
wait = 60;
}
}
},
goAnchor(type) {
if (type === 1) {
var anchor = this.$el.querySelector('#join-btn');
document.documentElement.scrollTop = document.body.scrollTop = 0;
this.$el.querySelector('#com_name').focus();
} else if (type === 2) {
this.$el.querySelector('#com_name').focus();
this.supplierActive = 0;
document.documentElement.scrollTop = document.body.scrollTop = 0;
} else if (type === 3) {
this.$el.querySelector('#com_name').focus();
this.supplierActive = 1;
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
}
},
components: {
Menu
}
}
</script>
<style scoped lang="scss">
@import "../../assets/css/supplier/index.min.css";
</style>