|
|
@@ -1,9 +1,237 @@
|
|
|
-<template>
|
|
|
- <text>二手列表</text>
|
|
|
+<template name="secondList">
|
|
|
+ <view class="container">
|
|
|
+ <view class="good-search-top">
|
|
|
+ <view class="search-from name">
|
|
|
+ <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
+ <input class="input"
|
|
|
+ type="text"
|
|
|
+ :focus="isFocus"
|
|
|
+ confirm-type="search"
|
|
|
+ v-model="searchKeyword"
|
|
|
+ placeholder="请输入商品关键词"
|
|
|
+ @input="onShowClose"
|
|
|
+ @confirm="searchOpertor"
|
|
|
+ maxlength="20"/>
|
|
|
+ <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="ListImg">
|
|
|
+ <img src="/static/second/banner.png"/>
|
|
|
+ </view>
|
|
|
+ <view class="main-content">
|
|
|
+ <ul class="secondTitle">
|
|
|
+ <li class="ClassA mIcon off" @click="handle('1')" :class="currentId == '1' ? 'active':''">
|
|
|
+ {{ tabTitleName }}
|
|
|
+ <span class="line" v-if="currentId == '1'"></span>
|
|
|
+ </li>
|
|
|
+ <li class="ClassA" @click="handle('2')" :class="[currentId == '2' ? 'active':'',currentId == '2' ? 'off':'']">
|
|
|
+ 临期产品
|
|
|
+ <span class="line" v-if="currentId == '2'"></span>
|
|
|
+ </li>
|
|
|
+ <li class="ClassA" @click="handle('3')" :class="[currentId == '3' ? 'active':'',currentId == '3' ? 'off':'']">
|
|
|
+ 其他
|
|
|
+ <span class="line" v-if="currentId == '3'"></span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </view>
|
|
|
+ <ul class="mainTab" v-if="mainflag">
|
|
|
+ <li v-for="(item,index) in tabList" @click='handleChild(item)' :class="currentID2 ==index?'addstyle':' '">{{item.name}}</li>
|
|
|
+ </ul>
|
|
|
+ <view class="shopList">
|
|
|
+ <!-- <view class="Listitem" v-if="isShow" v-for="(item, index) in tabchildList"> -->
|
|
|
+<!-- <a class="itemImg onhref" href=''>
|
|
|
+ <img :src="item.imageList[0]" :class="item.sold==1?'activeImg':''" class="bigImg">
|
|
|
+ </a>
|
|
|
+ <view class="ItemInfo">
|
|
|
+ <view class="tag">
|
|
|
+ <span class="infotag news" v-if="item.sold==0&&item.newAdded==1">最新</span>
|
|
|
+ <span class="infotag brand" v-if="item.brandName!=null&&item.brandName!=''&&item.brandID!=161">{{item.brandName}}</span>
|
|
|
+ <span class="infotag sold" v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0">已售</span>
|
|
|
+ <span class="infotag other" v-if="item.brandID==161&&item.brandName!=''&&item.brandName!=null">{{item.brandName}}</span>
|
|
|
+ </view>
|
|
|
+ <a class="productname" :href="'/flea-market-'+item.productID+'.html'">
|
|
|
+ {{item.name}}
|
|
|
+ </a>
|
|
|
+ <view class="targetprice">
|
|
|
+ <span v-if="item.detailTalkFlag ==2 && userID==null">价格详聊</span>
|
|
|
+ <span v-else-if="userID==null" class="priceparam" @click="toLogin">登录查看价格></span>
|
|
|
+ <span v-else-if="userID!=null && item.detailTalkFlag==2">价格详聊</span>
|
|
|
+ <span v-else>￥{{item.price1Str}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="shijian">
|
|
|
+ <view>
|
|
|
+ <i class="icon mIcon liulanliang"></i> {{item.viewingNum}}
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <i class="icon mIcon shijian"></i> {{item.onLineDateStr}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="dizhi">
|
|
|
+ <i class="icon mIcon dizhi"></i>
|
|
|
+ {{item.provinceCityDistrict}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="no-content" v-show="showflag" :class="showflag?'show':''">
|
|
|
+ <img src="/img/flea-market/nologo.png" v-if="isPC" />
|
|
|
+ <img src="/img/flea-market/kong_m.png" v-else />
|
|
|
+ <view class="error-message">
|
|
|
+ <p>此分类下面没有商品，换其它分类瞅瞅</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ --> </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import { mapState,mapMutations } from 'vuex';
|
|
|
+ export default{
|
|
|
+ name:'secondList',
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ isShowClose:false,
|
|
|
+ isFocus:false,
|
|
|
+ searchKeyword:'',//搜索关键字
|
|
|
+ currentId:1,
|
|
|
+ currentID2:0,
|
|
|
+ mainflag:false,
|
|
|
+ tabTitleName:'二手仪器',
|
|
|
+ tabTitle: [
|
|
|
+ {value:'1',name:'二手仪器'},
|
|
|
+ {value:'2',name:'临期产品'},
|
|
|
+ {value:'3',name:'其他'}
|
|
|
+ ],
|
|
|
+ tabList : [
|
|
|
+ {value:'0',name:'全部'},
|
|
|
+ {value:'1',name:'轻光电'},
|
|
|
+ {value:'2',name:'重光电'},
|
|
|
+ {value:'3',name:'耗材配件'},
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ handle: function (index) {//一級分类
|
|
|
+ var _this = this;
|
|
|
+ _this.currentId = index;
|
|
|
+ _this.tabTitleName = '二手仪器';
|
|
|
+ if ( _this.currentId == '1'){
|
|
|
+ _this.mainflag = true;
|
|
|
+ }else {
|
|
|
+ _this.mainflag=false;
|
|
|
+ _this.currentID2 = 0;
|
|
|
+ }
|
|
|
+ // _this.gettabList();
|
|
|
+ },
|
|
|
+ handleChild:function(item){ //二级分类
|
|
|
+ var _this = this;
|
|
|
+ _this.currentID2 = item.value;
|
|
|
+ if(!isPC){
|
|
|
+ _this.tabTitleName = item.name;
|
|
|
+ if (_this.currentID2==item.value){
|
|
|
+ _this.mainflag=false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // _this.gettabList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
</script>
|
|
|
-
|
|
|
<style>
|
|
|
+ .warp-container{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .good-search-top{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ flex: 1;
|
|
|
+ margin: 32rpx auto;
|
|
|
+ }
|
|
|
+ .search-from{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .input{
|
|
|
+ width: 340rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 66rpx;
|
|
|
+ color: $text-color;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .icon-iconfonticonfontsousuo1{
|
|
|
+ width: 64rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ font-size: $font-size-38;
|
|
|
+ float: left;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .icon-shanchu1{
|
|
|
+ font-size: $font-size-32;
|
|
|
+ color: #999999;
|
|
|
+ position: absolute;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .ListImg{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 266rpx;
|
|
|
+ }
|
|
|
+ .ListImg>img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .secondTitle {
|
|
|
+ width: 100%;
|
|
|
+ height:90rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 2rpx solid #F0F2F4;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .ClassA.active {
|
|
|
+ color: #E15621;
|
|
|
+ }
|
|
|
+ .ClassA {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 90rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #666666;
|
|
|
+ border: 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .mainTab {
|
|
|
+ background: #fff;
|
|
|
+ width: 29vw;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .mainTab li.addstyle {
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ .mainTab li {
|
|
|
+ height: 9.6vw;
|
|
|
+ line-height: 9.6vw;
|
|
|
+ text-align: center;
|
|
|
+ color: #627386;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
</style>
|
Administrator