|
|
@@ -0,0 +1,330 @@
|
|
|
+<template>
|
|
|
+ <div class="mobile-center">
|
|
|
+ <div class="com-mobile-header mobile-center-header">
|
|
|
+ <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
|
|
|
+ <p>器件收藏</p>
|
|
|
+ <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="mobile-fix-content mobile-centerfix-content" id="mobileFixContent">
|
|
|
+ <div class="search-content search-content2" style="position: relative">
|
|
|
+ <input type="text" placeholder="请输入您要查找的型号" @input="onBrandChange" v-model="keyword" @keyup.13="searchComplist">
|
|
|
+ <span @click.stop="searchComplist" >
|
|
|
+ <i class="iconfont icon-sousuo"></i>
|
|
|
+ </span>
|
|
|
+ <ul class="similar brand-similar-list" v-show="showSimilarCodeList && keyword">
|
|
|
+ <li v-for="sBrand in similarBrand" :key="sBrand.code" @click.stop="setBrand(sBrand.code)">{{sBrand.code}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <template v-if="compList && compList.length">
|
|
|
+ <div class="lock_count" v-if="keyword">
|
|
|
+ <p>搜索“<span>{{keyword}}</span>”，为您找到{{compCollectList.data.total}}条信息</p>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li class="clearfix" :key="comp.componentid" v-for="comp in compList" @click="goUrl('/mobile/brand/componentDetail/' + comp.componentinfo.uuid)">
|
|
|
+ <div class="fl">
|
|
|
+ <p>品牌：<span v-text="comp.brand || '-'"></span></p>
|
|
|
+ <p>物料名称：<span v-text="comp.kind || '-'"></span></p>
|
|
|
+ <p>型号：<span v-text="comp.cmpCode || '-'"></span></p>
|
|
|
+ <p>规格：<span v-text="comp.spec || '-'"></span></p>
|
|
|
+ <p>产品描述：<span v-text="comp.description || '-'"></span></p>
|
|
|
+ </div>
|
|
|
+ <div class="vir"></div>
|
|
|
+ <div class="fr">
|
|
|
+ <i class="iconfont icon-shoucang" :style="comp.isFocus === 'true'?'color:#ff7800':'color: #ddd'" @click="cancelFocus(comp, $event)"></i>
|
|
|
+ <a class="sa-pub" @click="compInquiry(comp, $event)">立即询价</a>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </template>
|
|
|
+ <empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'" v-else></empty-status>
|
|
|
+ </div>
|
|
|
+ <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
|
|
|
+ <pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
|
|
|
+ <publish-supplier-seek :product="componentSeekObj" :showPublishBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="onRemind"></publish-supplier-seek>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
|
|
|
+ import { PublishSupplierSeek } from '~components/mobile/applyPurchase'
|
|
|
+ export default {
|
|
|
+ middleware: 'authenticated',
|
|
|
+ layout: 'mobileNoHeader',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ keyword: '',
|
|
|
+ showSimilarCodeList: false,
|
|
|
+ similarBrand: '',
|
|
|
+ remindText: '',
|
|
|
+ timeoutCount: 0,
|
|
|
+ page: 1,
|
|
|
+ count: 10,
|
|
|
+ isChange: false,
|
|
|
+ compList: [],
|
|
|
+ componentSeekObj: {
|
|
|
+ standard: 1,
|
|
|
+ cmpCode: '',
|
|
|
+ pbranden: '',
|
|
|
+ spec: null,
|
|
|
+ kind: ''
|
|
|
+ },
|
|
|
+ showPublishBox: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'compCollectList.data': {
|
|
|
+ handler: function (val) {
|
|
|
+ if (val.content) {
|
|
|
+ if (this.isChange) {
|
|
|
+ this.compList = val.content
|
|
|
+ this.isChange = false
|
|
|
+ } else {
|
|
|
+ this.compList = [...this.compList, ...val.content]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.keyword = this.$route.params.key
|
|
|
+ this.$store.dispatch('searchData/searchForListInMobile', { page: 1, count: 10, type: 'component', keyword: this.$route.params.key })
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ compCollectList () {
|
|
|
+ return this.$store.state.searchData.searchList.lists
|
|
|
+ },
|
|
|
+ fetching () {
|
|
|
+ return this.compCollectList.fetching
|
|
|
+ },
|
|
|
+ allPage () {
|
|
|
+ return Math.floor(this.compCollectList.data.total / this.compCollectList.data.size) + Math.floor(this.compCollectList.data.total % this.compCollectList.data.size > 0 ? 1 : 0)
|
|
|
+ },
|
|
|
+ colList () {
|
|
|
+ return this.$store.state.product.common.collectList.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ RemindBox,
|
|
|
+ PullUp,
|
|
|
+ PublishSupplierSeek,
|
|
|
+ EmptyStatus
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onBrandChange: function () {
|
|
|
+ this.keyword = this.keyword.trim()
|
|
|
+ if ((/[^\x00-\xff]/g).test(this.keyword)) {
|
|
|
+ let chineseIndex = -1
|
|
|
+ for (let i = 0; i < this.keyword.length; i++) {
|
|
|
+ if ((/[^\x00-\xff]/g).test(this.keyword.charAt(i)) && !(/[\u4e00-\u9fa5]/).test(this.keyword.charAt(i))) {
|
|
|
+ chineseIndex = i
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (chineseIndex > -1) {
|
|
|
+ this.keyword = this.keyword.substring(0, chineseIndex)
|
|
|
+ }
|
|
|
+ } else if (this.keyword && this.baseUtils.getRealLen(this.keyword) > 50) {
|
|
|
+ this.keyword = this.baseUtils.cutOutString(this.keyword, 50)
|
|
|
+ } else {
|
|
|
+ this.getSimilarBrand()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSimilarBrand: function () {
|
|
|
+ if (this.keyword) {
|
|
|
+ this.$http.get('/search/similarKeywords', {params: {keyword: this.keyword, type: 'component'}})
|
|
|
+ .then(response => {
|
|
|
+ this.similarBrand = response.data.result
|
|
|
+ this.showSimilarCodeList = response.data.result.length > 0
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.showSimilarCodeList = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setBrand: function (brand) {
|
|
|
+ this.keyword = brand
|
|
|
+ this.showSimilarCodeList = false
|
|
|
+ this.searchComplist()
|
|
|
+ },
|
|
|
+ searchComplist () {
|
|
|
+ if (this.keyword !== '') {
|
|
|
+ this.showSimilarCodeList = false
|
|
|
+ this.reloadList()
|
|
|
+ this.showPublishBox = false
|
|
|
+ this.page = 1
|
|
|
+ this.isChange = true
|
|
|
+ } else {
|
|
|
+ this.remindText = '请输入您要查找的型号'
|
|
|
+ this.timeoutCount++
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onRemind: function (str) {
|
|
|
+ this.remindText = str
|
|
|
+ this.timeoutCount++
|
|
|
+ },
|
|
|
+ cancelFocus: function (item, event) {
|
|
|
+ event.stopPropagation()
|
|
|
+ if (item.standard === 1) {
|
|
|
+ if (!item.isFocus) {
|
|
|
+ this.$http.post('/trade/collection/save', {cmpuuid: item.cmpUuId, kind: 2})
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code === 1) {
|
|
|
+ this.onRemind('收藏成功')
|
|
|
+ } else {
|
|
|
+ this.onRemind(res.data.data || '收藏失败')
|
|
|
+ }
|
|
|
+ }, err => {
|
|
|
+ this.onRemind(err.response.data || '收藏失败')
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$http.post('/trade/collection/delete', [item.focusId]).then(response => {
|
|
|
+ if (response.data === 'success') {
|
|
|
+ this.onRemind('取消收藏成功')
|
|
|
+ } else {
|
|
|
+ this.onRemind('取消收藏失败')
|
|
|
+ }
|
|
|
+ }, err => {
|
|
|
+ console.log(err)
|
|
|
+ this.onRemind(err.response.data || '取消收藏失败')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.onRemind('非标物料暂不可收藏')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reloadList: function () {
|
|
|
+ this.$store.dispatch('searchData/searchForListInMobile', { page: this.page, count: this.count, type: 'component', keyword: this.keyword })
|
|
|
+ },
|
|
|
+ onPullUpAction: function () {
|
|
|
+ this.page++
|
|
|
+ this.reloadList()
|
|
|
+ },
|
|
|
+ compInquiry: function (item, e) {
|
|
|
+ if (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ }
|
|
|
+ this.componentSeekObj.cmpCode = item.cmpCode ? item.cmpCode : ''
|
|
|
+ this.componentSeekObj.pbranden = item.brand ? item.brand : ''
|
|
|
+ this.componentSeekObj.spec = item.spec ? item.spec : ''
|
|
|
+ this.componentSeekObj.kind = item.kind ? item.kind : ''
|
|
|
+ this.componentSeekObj = JSON.parse(JSON.stringify(this.componentSeekObj))
|
|
|
+ this.showPublishBox = true
|
|
|
+ },
|
|
|
+ goUrl: function (url) {
|
|
|
+ this.$router.push(url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .mobile-fix-content {
|
|
|
+ .similar {
|
|
|
+ position: absolute;
|
|
|
+ width: 6.5rem;
|
|
|
+ max-height: 2.5rem;
|
|
|
+ overflow-y: auto;
|
|
|
+ z-index: 12;
|
|
|
+ border: 1px solid #7e7e7e;
|
|
|
+ border-radius: .05rem;
|
|
|
+ top: .7rem;
|
|
|
+ background: #fff;
|
|
|
+ left: 0.1rem;
|
|
|
+ right: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ li {
|
|
|
+ height: .5rem;
|
|
|
+ line-height: .5rem;
|
|
|
+ font-size: .26rem;
|
|
|
+ color: #999;
|
|
|
+ padding-left: .19rem;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ &:focus, &:active, &:hover {
|
|
|
+ background: #999;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-content {
|
|
|
+ text-align: center;
|
|
|
+ input {
|
|
|
+ border: 1px solid #376ff3;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ top:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .lock_count{
|
|
|
+ padding: .2rem;
|
|
|
+ text-align: center;
|
|
|
+ p{
|
|
|
+ color:#666;
|
|
|
+ span{
|
|
|
+ color:#376ff3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > ul {
|
|
|
+ width: 7.1rem;
|
|
|
+ margin: 0 auto;
|
|
|
+ li {
|
|
|
+ border-radius: .05rem;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin: .25rem 0 0 0;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ .fl {
|
|
|
+ width: 4.71rem;
|
|
|
+ color: #666;
|
|
|
+ padding: .25rem .1rem .25rem .23rem;
|
|
|
+ p {
|
|
|
+ font-size: .3rem;
|
|
|
+ line-height: .42rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ span {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vir {
|
|
|
+ position: absolute;
|
|
|
+ top: .28rem;
|
|
|
+ bottom: .28rem;
|
|
|
+ right: 2.36rem;
|
|
|
+ border-right: .01rem dashed #9f9f9f;
|
|
|
+ }
|
|
|
+ .fr {
|
|
|
+ width: 2.34rem;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: .3rem;
|
|
|
+ i {
|
|
|
+ display: block;
|
|
|
+ color: #ff7800;
|
|
|
+ font-size: .5rem;
|
|
|
+ width: .6rem;
|
|
|
+ height: .6rem;
|
|
|
+ line-height: .6rem;
|
|
|
+ text-align: center;
|
|
|
+ margin: .29rem auto .1rem;
|
|
|
+ }
|
|
|
+ .sa-pub {
|
|
|
+ display: block;
|
|
|
+ width: 1.7rem;
|
|
|
+ height: .47rem;
|
|
|
+ line-height: .47rem;
|
|
|
+ text-align: center;
|
|
|
+ font-size: .26rem;
|
|
|
+ color: #fff;
|
|
|
+ background: #008bf7;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: .05rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
Administrator