|
|
@@ -1,88 +1,50 @@
|
|
|
<template>
|
|
|
- <div class="merchant">
|
|
|
+ <div class="features">
|
|
|
<div class="container">
|
|
|
<div class="top clearfix">
|
|
|
<div class="title">
|
|
|
- <p>High quality dealer</p>
|
|
|
- <h2>供应商列表</h2>
|
|
|
- <div class="count">
|
|
|
- <img src="/images/supplier/count.png" alt=""/>
|
|
|
- <div class="count_num">
|
|
|
- <span v-for="spCount in all" v-text="spCount"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="search">
|
|
|
- <div class="input-group">
|
|
|
- <input type="search" class="form-control" title="code" placeholder="名称/地址/行业"
|
|
|
- v-model="searchCode" @keyup.13="goodsSearch(searchCode)" @search="goodsSearch(searchCode)"/>
|
|
|
- <span class="input-group-btn">
|
|
|
- <button type="button" class="btn" @click="goodsSearch(searchCode)"> 查 询</button>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="list_info">
|
|
|
- <div class="empty" v-if="!list.content || list.content.length === 0">
|
|
|
- <img src="/images/supplier/icon/empty.png">
|
|
|
- <div class="info">
|
|
|
- <p>暂无供应商信息</p>
|
|
|
- <a href="javascript:history.go(-1)"><i class="fa fa-reply" style="margin-right:5px;"></i>返回上一页</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <ul class="list-inline">
|
|
|
- <li v-for="item in list.content" @click="jumpResource(item.enUU)">
|
|
|
- <div class="has_shop" v-if="item.isStore === 1">已开店</div>
|
|
|
- <div class="enterprise_name" v-text="item.enName">深圳英优软科技有限公司</div>
|
|
|
- <div class="select_btn" v-html="isInFrame ? '添加为<br/>供应商' : '查看<br/>更多'" @mouseleave="hasJump = false" @mouseenter="hasJump = true" @click="addResource(item.enUU)"></div>
|
|
|
- <div class="popups">
|
|
|
- <p>企业执照号：</p><p v-text="item.enBusinesscode ? item.enBusinesscode : '暂无信息'">1</p>
|
|
|
- <p>地址：</p><p v-text="item.enAddress ? item.enAddress : '暂无信息'">1</p>
|
|
|
- <p>邮箱：</p><p v-text="item.enEmail ? item.enEmail : '暂无信息'">h</p>
|
|
|
- <p>电话：</p><p v-text="item.enTel ? item.enTel : '暂无信息'">1</p>
|
|
|
- <p>行业：</p><p v-text="item.enIndustry ? item.enIndustry : '暂无信息'">1</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div style="float: right;">
|
|
|
- <page :total="list.totalElements" :page-size="pageParams.count"
|
|
|
- :current="pageParams.page" v-on:childEvent="handleCurrentChange">
|
|
|
- </page>
|
|
|
+ <p>Five major features</p>
|
|
|
+ <h2>五大特点</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-dialog
|
|
|
- title="提示"
|
|
|
- :visible.sync="hasDialog ">
|
|
|
- <div class="form_dialog">
|
|
|
- <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
|
|
|
- </div>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <a type="button" @click="hasDialog=false">我知道了</a>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
+ <ul class="content clearfix list-unstyled">
|
|
|
+ <li v-for="(data, index) in featureData" @click="openUrl('/')" :class="{'move': hasAnimation }"
|
|
|
+ @mouseenter="hasAnimation = false"
|
|
|
+ @mouseleave="hasAnimation = true">
|
|
|
+ <div><p>{{data.illustrationF}}</p><p class="illustration">{{data.illustrationS}}</p></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import Page from '~components/common/page/pageComponent.vue'
|
|
|
export default {
|
|
|
- name: 'MerchantView',
|
|
|
+ name: 'FiveFeature',
|
|
|
data () {
|
|
|
return {
|
|
|
- hasDialog: false,
|
|
|
- hasJump: false,
|
|
|
- searchCode: '',
|
|
|
- pageParams: {
|
|
|
- count: 20,
|
|
|
- page: 1
|
|
|
- }
|
|
|
+ featureData: [{
|
|
|
+ illustrationF: '颠覆传统ERP及',
|
|
|
+ illustrationS: '管理软件市场模式'
|
|
|
+ }, {
|
|
|
+ illustrationF: '平台用户的链式',
|
|
|
+ illustrationS: '反应式发展'
|
|
|
+ }, {
|
|
|
+ illustrationF: '企业信息化',
|
|
|
+ illustrationS: '全面解决方案'
|
|
|
+ }, {
|
|
|
+ illustrationF: '全过程的移动',
|
|
|
+ illustrationS: '互联解决方案'
|
|
|
+ }, {
|
|
|
+ illustrationF: ' 全智能的',
|
|
|
+ illustrationS: '交易平台'
|
|
|
+ }, {
|
|
|
+ illustrationF: '平台用户的链式',
|
|
|
+ illustrationS: '反应式发展'
|
|
|
+ }],
|
|
|
+ hasAnimation: true
|
|
|
}
|
|
|
},
|
|
|
- components: {
|
|
|
- Page
|
|
|
- },
|
|
|
computed: {
|
|
|
isInFrame () {
|
|
|
if (this.$route.query.type === 'erp') {
|
|
|
@@ -97,316 +59,179 @@
|
|
|
let supplierCount = count.content ? count.totalElements + '' : '00000'
|
|
|
return this.formatNumber(supplierCount, 5)
|
|
|
}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 供应商数字格式转换
|
|
|
- formatNumber (num, key) {
|
|
|
- let count = ('00000' + num).substr(-key)
|
|
|
- let _arr = []
|
|
|
- for (var i = 0; i < count.length; i++) {
|
|
|
- _arr.push(count[i])
|
|
|
- }
|
|
|
- return _arr
|
|
|
- },
|
|
|
- addResource (id) {
|
|
|
- if (this.isInFrame) {
|
|
|
- this.$http.get(`/basic/enterprise /${id}/info`)
|
|
|
- .then(res => {
|
|
|
- if (res.data) {
|
|
|
- window.open(this.$route.query.localPath + this.$route.query.erpPath + '?b2bdata=' + encodeURIComponent(JSON.stringify(res.data)))
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.isVaildSupplier(id)
|
|
|
- }
|
|
|
- },
|
|
|
- jumpResource (id) {
|
|
|
- if (!this.hasJump) {
|
|
|
- this.isVaildSupplier(id)
|
|
|
- }
|
|
|
- },
|
|
|
- // 判断是否有有效物料信息
|
|
|
- isVaildSupplier (id) {
|
|
|
- this.$http.get('vendor/introduction/product/count', {params: {vendUU: id}})
|
|
|
- .then(res => {
|
|
|
- if (res.data.count !== 0) {
|
|
|
- this.$router.push('supplier/' + id)
|
|
|
- } else {
|
|
|
- this.hasDialog = true
|
|
|
- }
|
|
|
- }, err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- },
|
|
|
- goodsSearch (type) {
|
|
|
- this.pageParams.page = 1
|
|
|
- this.$store.dispatch('supplier/loadVendorList', {page: this.pageParams.page, size: this.pageParams.count, keyword: type})
|
|
|
- },
|
|
|
- handleCurrentChange (type) {
|
|
|
- this.pageParams.page = type
|
|
|
- this.$store.dispatch('supplier/loadVendorList', {page: type, size: this.pageParams.count, keyword: this.searchCode})
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style type="text/scss" lang="scss">
|
|
|
- .merchant{
|
|
|
- background: #ecf1f1 url(/images/supplier/banner.jpg)no-repeat;
|
|
|
- border-top:3px solid #000;
|
|
|
- padding-bottom:25px;
|
|
|
- margin-top:-1.5em;
|
|
|
- .el-dialog{
|
|
|
- width: 290px!important;
|
|
|
- .el-dialog__header{
|
|
|
- background: #4290f7;
|
|
|
- line-height: 40px;
|
|
|
- padding: 0 20px 0;
|
|
|
- .el-dialog__title{
|
|
|
- color:#fff;
|
|
|
- }
|
|
|
- .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
|
|
|
- color:#fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-dialog__body{
|
|
|
- padding: 10px 20px;
|
|
|
- }
|
|
|
- .el-dialog__footer{
|
|
|
- text-align: center;
|
|
|
- a{
|
|
|
- display:inline-block;
|
|
|
- background: #3c7cf5;
|
|
|
- color:#fff;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 30px;
|
|
|
- height:30px;
|
|
|
- padding:0 10px;
|
|
|
- border-radius:5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .form_dialog{
|
|
|
- p{
|
|
|
- width:200px;
|
|
|
- font-size: 14px;
|
|
|
- color:#666666;
|
|
|
- margin:0 auto;
|
|
|
- padding-top:5px;
|
|
|
- line-height: 20px;
|
|
|
- span{
|
|
|
- color:#eb6054;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .top{
|
|
|
- padding-top:30px;
|
|
|
- margin-bottom:40px;
|
|
|
- .title{
|
|
|
- margin:0 auto;
|
|
|
- text-align: center;
|
|
|
- width:215px;
|
|
|
- border-bottom:1px solid #ff5151;
|
|
|
- color:#fff;
|
|
|
- p{
|
|
|
- margin:0;
|
|
|
- }
|
|
|
- h2{
|
|
|
- font-size: 32px;
|
|
|
- margin:0;
|
|
|
- line-height: 46px;
|
|
|
- }
|
|
|
- div.count{
|
|
|
- position: relative;
|
|
|
- .count_num {
|
|
|
- position:absolute;
|
|
|
- top:4px;
|
|
|
- left:3px;
|
|
|
- span {
|
|
|
- display:inline-block;
|
|
|
- width:29px;
|
|
|
- text-align: center;
|
|
|
- font-size: 28px;
|
|
|
- color:#4a2f01;
|
|
|
- }
|
|
|
+<style type="text/scss" lang="scss" scoped>
|
|
|
+ @keyframes featureTop {
|
|
|
+ 0%{top: 0;}
|
|
|
+ 50%{top: 40px;}
|
|
|
+ 100%{top: 0px;}
|
|
|
+ }
|
|
|
+ @-webkit-keyframes featureTop {
|
|
|
+ 0%{top: 0;}
|
|
|
+ 50%{top: 40px;}
|
|
|
+ 100%{top: 0px;}
|
|
|
+ }
|
|
|
+ @-moz-keyframes featureTop {
|
|
|
+ 0%{top: 0;}
|
|
|
+ 50%{top: 40px;}
|
|
|
+ 100%{top: 0px;}
|
|
|
+ }
|
|
|
+ @-o-keyframes featureTop {
|
|
|
+ 0%{top: 0;}
|
|
|
+ 50%{top: 40px;}
|
|
|
+ 100%{top: 0px;}
|
|
|
+ }
|
|
|
+ @keyframes featureBottom {
|
|
|
+ 0%{top: 40px;}
|
|
|
+ 50%{top: 0px;}
|
|
|
+ 100%{top: 40px;}
|
|
|
+ }
|
|
|
+ @-webkit-keyframes featureBottom {
|
|
|
+ 0%{top: 40px;}
|
|
|
+ 50%{top: 0px;}
|
|
|
+ 100%{top: 40px;}
|
|
|
+ }
|
|
|
+ @-moz-keyframes featureBottom {
|
|
|
+ 0%{top: 40px;}
|
|
|
+ 50%{top: 0px;}
|
|
|
+ 100%{top: 40px;}
|
|
|
+ }
|
|
|
+ @-o-keyframes featureBottom {
|
|
|
+ 0%{top: 40px;}
|
|
|
+ 50%{top: 0px;}
|
|
|
+ 100%{top: 40px;}
|
|
|
+ }
|
|
|
+ .features{
|
|
|
+ width: 100%;
|
|
|
+ min-width: 1190px;
|
|
|
+ height: 464px;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ .container{
|
|
|
+ width: 1190px;
|
|
|
+ margin: 0 auto;
|
|
|
+ .top{
|
|
|
+ padding-top:30px;
|
|
|
+ margin-bottom:50px;
|
|
|
+ .title{
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ width:215px;
|
|
|
+ border-bottom:1px solid #ff7070;
|
|
|
+ p{
|
|
|
+ margin:0;
|
|
|
+ font-family: FZLTXHK;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
- }
|
|
|
- &:before{
|
|
|
- content: '';
|
|
|
- display:block;
|
|
|
- position:relative;
|
|
|
- left:55px;
|
|
|
- top:61px;
|
|
|
- width:105px;
|
|
|
- height:1px;
|
|
|
- background: #ff8a00;
|
|
|
- }
|
|
|
- &:after{
|
|
|
- content: '';
|
|
|
- display:block;
|
|
|
- position:relative;
|
|
|
- left:55px;
|
|
|
- top:4px;
|
|
|
- width:105px;
|
|
|
- height:1px;
|
|
|
- background: #fff600;
|
|
|
- }
|
|
|
- }
|
|
|
- .search{
|
|
|
- float:right;
|
|
|
- width:310px;
|
|
|
- text-align: right;
|
|
|
- margin-right:10px;
|
|
|
- .btn{
|
|
|
- width:68px;
|
|
|
- background: #ffa200;
|
|
|
- color:#fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list_info{
|
|
|
- padding: 0 10px;
|
|
|
- min-height:300px;
|
|
|
- margin-bottom:100px;
|
|
|
- .empty{
|
|
|
- height:418px;
|
|
|
- border:15px solid #c4e9f9;
|
|
|
- background: #eef9fd;
|
|
|
- padding-top:165px;
|
|
|
- text-align: center;
|
|
|
- img{
|
|
|
- vertical-align: top;
|
|
|
- margin-right:15px;
|
|
|
- }
|
|
|
- .info{
|
|
|
- display: inline-block;
|
|
|
- padding-top:10px;
|
|
|
- }
|
|
|
- }
|
|
|
- > ul{
|
|
|
- margin-left:5px;
|
|
|
- li{
|
|
|
- position:relative;
|
|
|
- vertical-align: top;
|
|
|
- width:267px;
|
|
|
- height:115px;
|
|
|
- border-radius:5px;
|
|
|
- margin-right:32px;
|
|
|
- margin-bottom:60px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0 3px 10px rgba(0,0,0,.8);
|
|
|
- &:nth-child(4n) {
|
|
|
- margin-right:0;
|
|
|
+ h2{
|
|
|
+ font-size: 32px;
|
|
|
+ margin:0;
|
|
|
+ line-height: 46px;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
- &:after{
|
|
|
+ &::before{
|
|
|
content: '';
|
|
|
display:block;
|
|
|
- position:absolute;
|
|
|
- top:99%;
|
|
|
- left:50%;
|
|
|
- z-index:200;
|
|
|
- width:88px;
|
|
|
- height:22px;
|
|
|
- margin-left:-44px;
|
|
|
- background: url(/images/supplier/icon/bottom_center_img.png)no-repeat;
|
|
|
+ position:relative;
|
|
|
+ left:55px;
|
|
|
+ top:61px;
|
|
|
+ width:105px;
|
|
|
+ height:1px;
|
|
|
+ background: #00caff;
|
|
|
}
|
|
|
- .has_shop {
|
|
|
- position:absolute;
|
|
|
- right:0;
|
|
|
- top:0;
|
|
|
- width:68px;
|
|
|
- height:22px;
|
|
|
- background: url(/images/supplier/icon/top_right_img.png)no-repeat;
|
|
|
- color:#fff;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- line-height: 22px;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ display:block;
|
|
|
+ position:relative;
|
|
|
+ left:55px;
|
|
|
+ top:4px;
|
|
|
+ width:105px;
|
|
|
+ height:1px;
|
|
|
+ background: #4391f7;
|
|
|
}
|
|
|
- .enterprise_name{
|
|
|
- padding-top:15px;
|
|
|
- width:98%;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space:nowrap;
|
|
|
- border-bottom:1px solid #b9def7;
|
|
|
- font-weight: bold;
|
|
|
- color:#1891e4;
|
|
|
- font-size: 18px;
|
|
|
- line-height: 48px;
|
|
|
- text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ width: 1140px;
|
|
|
+ height: 228px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-left: 3px;
|
|
|
+ li{
|
|
|
+ float: left;
|
|
|
+ height: 228px;
|
|
|
+ width: 165px;
|
|
|
+ margin-right: 29px;
|
|
|
+ &:nth-child(6){
|
|
|
+ margin-right: 0px;
|
|
|
}
|
|
|
- .select_btn{
|
|
|
- position:absolute;
|
|
|
- bottom:-10px;
|
|
|
- left:50%;
|
|
|
- z-index:250;
|
|
|
- width:56px;
|
|
|
- height:56px;
|
|
|
- padding:10px 0;
|
|
|
- margin-left:-28px;
|
|
|
- text-align: center;
|
|
|
- line-height: 18px;
|
|
|
- background: #1891e4;
|
|
|
- border-radius:50%;
|
|
|
- color:#fff;
|
|
|
+ &:nth-child(2), &:nth-child(4), &:nth-child(6){
|
|
|
+ div{
|
|
|
+ top: 40px;
|
|
|
+ animation: featureTop 3s linear infinite;
|
|
|
+ -moz-animation: featureTop 3s linear infinite;
|
|
|
+ -o-animation: featureTop 3s linear infinite;
|
|
|
+ -webkit-animation: featureTop 3s linear infinite;
|
|
|
+ }
|
|
|
}
|
|
|
- &:hover{
|
|
|
- cursor:pointer;
|
|
|
- .popups{
|
|
|
- top:99%;
|
|
|
- opacity:1;
|
|
|
- z-index:100;
|
|
|
+ &:nth-child(1), &:nth-child(3), &:nth-child(5){
|
|
|
+ div{
|
|
|
+ top: 0px;
|
|
|
+ animation: featureBottom 3s linear infinite;
|
|
|
+ -moz-animation: featureBottom 3s linear infinite;
|
|
|
+ -o-animation: featureBottom 3s linear infinite;
|
|
|
+ -webkit-animation: featureBottom 3s linear infinite;
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- .popups{
|
|
|
- position:absolute;
|
|
|
- top:50px;
|
|
|
- left:0;
|
|
|
- background: #6c6c6c;
|
|
|
- width:267px;
|
|
|
- min-height:20px;
|
|
|
- padding:20px 15px 5px 10px;
|
|
|
- transition: all .5s ease;
|
|
|
- opacity: 0;
|
|
|
- color:#fff;
|
|
|
- overflow: hidden;
|
|
|
- p{
|
|
|
- float:left;
|
|
|
- margin: 0 !important;
|
|
|
- line-height: 18px;
|
|
|
- max-height:18px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- &:nth-child(2n-1){
|
|
|
- width:42px;
|
|
|
- }
|
|
|
- &:first-child{
|
|
|
- width:85px;
|
|
|
- }
|
|
|
- &:nth-child(2n){
|
|
|
- width:200px;
|
|
|
- }
|
|
|
- &:nth-child(2){
|
|
|
- width:155px;
|
|
|
- }
|
|
|
- &:nth-child(4){
|
|
|
- max-height:38px;
|
|
|
- overflow: hidden;
|
|
|
- white-space:pre-wrap;
|
|
|
- word-wrap:break-word;
|
|
|
+ div{
|
|
|
+ width: 163px;
|
|
|
+ height: 186px;
|
|
|
+ padding-top:80px;
|
|
|
+ position: relative;
|
|
|
+ background: url('/images/btbBusiness/feature-bg0.png') no-repeat center;
|
|
|
+ &:hover{
|
|
|
+ background: url('/images/btbBusiness/feature-bg1.png') no-repeat center;
|
|
|
+ p{
|
|
|
+ color: #2d84fd;
|
|
|
}
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 0px;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
&:last-child{
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .hasAnimation{
|
|
|
+ &:nth-child(2), &:nth-child(4), &:nth-child(6){
|
|
|
+ div{
|
|
|
+ top: 40px;
|
|
|
+ animation: featureTop 3s linear infinite;
|
|
|
+ -moz-animation: featureTop 3s linear infinite;
|
|
|
+ -o-animation: featureTop 3s linear infinite;
|
|
|
+ -webkit-animation: featureTop 3s linear infinite;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(1), &:nth-child(3), &:nth-child(5){
|
|
|
+ div{
|
|
|
+ top: 0px;
|
|
|
+ animation: featureBottom 3s linear infinite;
|
|
|
+ -moz-animation: featureBottom 3s linear infinite;
|
|
|
+ -o-animation: featureBottom 3s linear infinite;
|
|
|
+ -webkit-animation: featureBottom 3s linear infinite;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
gaoxm
