caimei-applets-caimei/pages/second/product/product-list.vue

<template name="secondList">
    <view class="container">
        <view class="good-search-top">
            <view class="search-from name" @click="this.$api.navigateTo(clickPath)">
                <text class="iconfont icon-iconfonticonfontsousuo1"></text>
                <view class="input">请输入关键词</view>
            </view>
        </view>
        <view class="ListImg">
            <image src="https://static.caimei365.com/app/img/bg/banner.png" class="banner-img"></image>
        </view>
        <view class="main-content">
            <view class="secondTitle">
                <view class="ClassA" @click="handle('1')"
                    :class="[currentId == '1' ? 'active':'',currentId == '1' ? 'off':'']">
                    {{ tabTitleName }}
                    <text class="iconfont" :class="mainflag ? 'icon-xiangshangjiantou':'icon-xiangxiajiantou'"></text>
                    <view class="line" v-if="currentId == '1'"></view>
                </view>
                <!-- <view class="ClassA" @click="handle('2')" :class="[currentId == '2' ? 'active':'',currentId == '2' ? 'off':'']">
					临期产品
					<view class="line" v-if="currentId == '2'"></view>
				</view> -->
                <view class="ClassA" @click="handle('3')"
                    :class="[currentId == '3' ? 'active':'',currentId == '3' ? 'off':'']">
                    其他
                    <view class="line" v-if="currentId == '3'"></view>
                </view>
            </view>
        </view>
        <view class="mainTab" v-if="mainflag">
            <view class="li" v-for="(item,index) in tabList" @click='handleChild(item)' :key="index"
                :class="currentID2 ==index?'addstyle':' '">
                {{item.name}}
            </view>
        </view>
        <view class="shopList"
            :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
            <view class="shopList-tips">
                <text>说明：仅限采美会员可查看价格及联系方式</text>
            </view>
            <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y
                v-if="tabchildList.length > 0">
                <view class="Listitem" v-if="isShow" v-for="(item, index) in tabchildList" :key="index"
                    :class="item.sold==1?'activeImg':''" :productid="item.productId"
                    @click.stop="navToDetailPage(item.productId)">
                    <view class="itemImg onhref">
                        <image :src="item.imageList[0]" class="bigImg"></image>
                        <image src="https://static.caimei365.com/app/img/icon/yishou.png" class="yishou_bg"
                            v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0"></image>
                        <view class="infotag news" v-if="item.sold==0&&item.newAdded==1">新</view>    
                    </view>
                    <view class="ItemInfo">
                        <text class="infotag mai" v-if="item.buyFlag === 1">卖</text>    
                        <text class="infotag buy" v-else>买</text>    
                        <view class="productname" href=""
                            style="text-indent:55rpx;">
                            {{item.name}}
                        </view>
                        <view class="targetprice">
                            
                            <text v-if="item.detailTalkFlag ==2 && !hasLogin">￥价格详聊</text>
                            <text v-else-if="!hasLogin" class="priceparam" @click.stop="NavigatorLogin(item)">
                                <text v-if="item.sold==1"></text>								
                                <text v-else>登录查看价格></text>								
                            </text>
                            <text v-else-if="hasLogin && item.detailTalkFlag==2">
                                <text v-if="item.sold == 1"></text>
                                <text v-else>￥价格详聊</text>
                            </text>
                            <text v-else>
                                <text v-if="item.sold == 1"></text>
                                <template v-else>
                                    <text v-if="item.price > 0">￥{{ item.price | NumFormat }}</text>
                                    <text v-else>￥议价</text>
                                </template>
                            </text>
                        </view>
                        <view class="shijian">
                            <text class="iconfont  icon-shijian"></text> {{item.onLineDateStr}}
                        </view>
                        <view class="dizhi">
                            <view class="dizhi_left">
                                <text class="iconfont  icon-dizhi1"></text>
                                {{item.provinceCityDistrict}}
                            </view>
                            <view class="liulan_right">
                                <text class="iconfont  icon-kejian1"></text>
                                {{item.viewingNum ? item.viewingNum : '0'}}
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="showLoading && tabchildList.length > 4">
                    <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text
                            v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
                    <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———
                    </view>
                </view>
            </scroll-view>
            <view class="no-content" v-show="showflag" :class="showflag?'show':''">
                <image src="https://static.caimei365.com/app/img/bg/kong_m.png" />
                <view class="error-message">
                    <view>暂无数据~</view>
                </view>
            </view>
        </view>
        <view class="fabu" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }" v-if="identity == 1">
            <!-- <text  class="intro long" @click.stop="navigator('/pages/second/form/introduce')" >二手市场介绍</text> -->
        </view>
        <view class="fabu" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }" v-else>
            <!-- <text  class="intro"  @click.stop="navigator('/pages/second/form/introduce')" >二手市场介绍</text> -->
            <text class="release" @click.stop="NavigatorRelease">我要发布</text>
        </view>
        <!-- 透明模态层 -->
        <modal-layer v-if='isModallayer' />
    </view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import authorize from '@/common/config/authorize.js'
    import wxLogin from '@/common/config/wxLogin.js'
    import modalLayer from '@/components/modal-layer'
    export default {
        components: {
            modalLayer
        },
        data() {
            return {
                userId: 0,
                isIphoneX: this.$store.state.isIphoneX,
                clickPath: '/pages/search/search-second',
                isShowClose: false,
                isModallayer: false,
                currentId: 1,
                currentID2: 0,
                isShow: false,
                requestFlag: true,
                showflag: false,
                mainflag: false,
                tabTitleName: '二手仪器',
                tabTitle: [
                    { value: '1', name: '二手仪器' },
                    { value: '2', name: '临期产品' },
                    { value: '3', name: '其他' }
                ],
                tabList: [
                    { value: '0', name: '全部' },
                    { value: '1', name: '美容仪器' }
                ],
                pageNum: 1,
                pageSize: 10,
                name: '',
                tabchildList: [],
                productsList: [],
                tabchild: {},
                params: {},
                hasNextPage: false,
                showLoading: false,
                loadingNow: true,
                loadingText: '上拉加载更多',
                pullFlag: true,
                isShowEmpty: false,
                showSkeleton: true,
                windowHeight: '',
                scrollHeight: '',
            }
        },
        created() {
            this.setScrollHeight()
            this.$api.getStorage().then((resolve) => {
                this.userId = resolve.userId ? resolve.userId : ''
                this.gettabList()
            })
        },
        computed: {
            ...mapState(['hasLogin', 'userInfo', 'isWxAuthorize', 'identity'])
        },
        filters: {
            NumFormat: function(text) { //处理金额
                return Number(text).toFixed(2)
            },
        },
        onLoad(option) {
            if (option.type == 'share') {
                wxLogin.wxLoginAuthorize()
            }
        },
        methods: {
            scrolltolower() {
                if (this.hasNextPage && this.pullFlag) {
                    this.gettabList(true)
                }
            },
            setScrollHeight() {
                const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
                this.windowHeight = windowHeight - 1
                this.scrollHeight = windowHeight - 1
            },
            handle: function(index) { //一級分类
                const _this = this
                _this.currentId = index
                _this.tabTitleName = '二手仪器'
                this.pageNum = 1
                if (_this.currentId == '1') {
                    _this.mainflag = !_this.mainflag
                } else {
                    _this.mainflag = false
                    _this.currentID2 = 0
                }
                _this.gettabList()
            },
            handleChild: function(item) { //二级分类
                const _this = this
                _this.currentID2 = item.value
                _this.tabTitleName = item.name
                if (_this.currentID2 == item.value) {
                    _this.mainflag = false
                }
                _this.gettabList()
            },
            navigator(url) {
                this.$api.navigateTo(url)
            },
            navToDetailPage(id) {
                this.isModallayer = true
                this.$api.navigateTo(`/pages/second/product/product-details?id=${id}`)
                this.isModallayer = false
            },
            gettabList: function(loadMore) {
                this.showLoading = true
                this.loadingNow = true
                this.loadingText = '加载中'
                this.isShowEmpty = false
                if (loadMore) { this.pageNum += 1 }
                let params = {
                    userId: this.userId,
                    secondHandType: this.currentId,
                    instrumentType: this.currentID2,
                    name: this.name,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
                this.SecondService.SeconHandProductList(params).then(res => {
                    if (res.code == 0) {
                        const data = res.data
                        if (data.results.length == 0) {
                            this.tabchildList = []
                            this.showflag = true
                            this.listRecord = data.totalRecord
                        } else {
                            this.showflag = false
                            this.isShow = true
                            let results = data.results
                            if (loadMore) {
                                this.tabchildList = [...this.tabchildList, ...results]
                            } else {
                                this.tabchildList = [...results]
                                this.showSkeleton = false
                            }
                            this.hasNextPage = data.hasNextPage
                            this.listRecord = data.totalRecord
                        }
                        // 防上拉暴滑
                        this.pullFlag = false
                        setTimeout(() => { this.pullFlag = true }, 500)
                        // 底部提示文案
                        if (this.hasNextPage) {
                            this.loadingText = '上拉加载更多'
                        } else {
                            this.showLoading = true
                            this.loadingNow = false
                            this.loadingText = '已至底部'
                        }
                    } else {
                        this.$util.msg(error.msg, 2000)
                    }
                    this.requestFlag = true
                })
            },
            NavigatorLogin(pros) { // 登录查看价格
                // 友盟埋点二手市场列表登录查看价格点击事件
                if (process.env.NODE_ENV != 'development') {
                    this.$uma.trackEvent('Um_Event_SecondListLoginSubmit', {
                        Um_Key_ProductId: `${pros.productId}`,
                        Um_Key_PageName: '二手市场登录查看价格',
                        Um_Key_SourcePage: '二手市场列表',
                    })
                }
                this.$api.navigateTo('/pages/login/login')
            },
            NavigatorRelease() { // 我要发布
                // 友盟埋点二手市场列表我要发布点击事件
                if (process.env.NODE_ENV != 'development') {
                    this.$uma.trackEvent('Um_Event_SecondReleaseSubmit', {
                        Um_Key_PageName: '我要发布',
                        Um_Key_SourcePage: '二手市场列表',
                    })
                }
                if(!this.hasLogin){
                    const pages = getCurrentPages()
                    const page = pages[pages.length - 1]
                    uni.setStorageSync('LOGIN_REDIRECT_URL', page.$page.fullPath)
                    this.$api.navigateTo('/pages/login/login')   
                }else{
                    this.$api.navigateTo('/pages/second/form/form')
                }
            }
        },
        onShareAppMessage(res) { //分享转发
            if (res.from === 'button') {
                // 来自页面内转发按钮
            }
            return {
                title: '欢迎来到采美二手市场~',
                path: `pages/search/search-instrument?keyWord=${this.listQuery.keyword}`
            }
        },
        onShow() {

        }
    }
</script>
<style lang="scss">
    .ClassA .iconfont {
        position: absolute;
        right: 20rpx;
    }

    .warp-container {
        width: 100%;
        height: 100%;
    }

    .good-search-top {
        width: 702rpx;
        height: 70rpx;
        flex: 1;
        margin: 20rpx 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: #b2b2b2;
        font-size: 28rpx;
    }

    .icon-iconfonticonfontsousuo1 {
        width: 64rpx;
        height: 66rpx;
        line-height: 66rpx;
        text-align: center;
        display: block;
        font-size: 38rpx;
        float: left;
        color: #999999;
    }

    .icon-shanchu1 {
        font-size: 32rpx;
        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: 265rpx;
        display: none;
    }

    .banner-img {
        width: 100%;
        height: 100%;
    }

    .main-content {
        display: none;
    }

    .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;

        .line {
            width: 10vw;
            margin: 0 auto;
            height: .48vw;
            background-color: #FF5B00;
            display: block;
        }
    }

    .mainTab {
        background: #fff;
        width: 29vw;
        position: absolute;
        z-index: 1;
        border-radius: 6rpx;
        box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.07);
        display: none;

        .li {
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            color: #627386;
            cursor: pointer;

            &.addstyle {
                color: #FF5B00;
            }
        }

        .line {
            width: 75rpx;
            margin: 0 auto;
            height: 4rpx;
            background-color: #FF5B00;
            display: block;
        }
    }

    .no-content {
        width: 100%;
        text-align: center;
        top: 50%;
        position: absolute;

        image {
            width: 306rpx;
            height: 212rpx;
        }

    }

    .error-message {
        font-size: 24rpx;
        color: #b2b2b2;
    }
    .shopList-tips{
        width: 100%;
        height: 40rpx;
        box-sizing: border-box;
        padding: 0 24rpx;
        font-size: 24rpx;
        color: #999999;
    }
    .Listitem {
        height: 202rpx;
        padding: 30rpx 20rpx;
        border-bottom: 2rpx solid #F0F2F4;
    }

    .itemImg {
        width: 180rpx;
        height: 180rpx;
        float: left;
        background: #000;
        position: relative;
        .infotag {
            font-size: 20rpx;
            padding: 4rpx 16rpx;
            background: #f94b4b;
            color: #fff;
            position: absolute;
            border-radius: 0 16rpx 0 16rpx;
            top: 0;
            left: 0;
        }
        .bigImg {
            width: 100%;
            height: 100%;
        }
    }

    .activeImg {
        opacity: 0.5;
    }

    .ItemInfo {
        float: right;
        width: 500rpx;
        .infotag {
            font-size: 22rpx;
            color: #FFFFFF;
            padding: 0;
            border-radius: 18rpx;
            line-height: 40rpx;
            width: 40rpx;
            height: 40rpx;
            text-align: center;
            &.buy{
                background: #31d29d;
            }
            &.mai{
                background: #efb336;
            }
        }
        .dizhi {
            font-size: 24rpx;
            color: #999999;
            margin-top: 10rpx;
        }

        .shijian {
            font-size: 24rpx;
            color: #999999;
            margin-top: 10rpx;
        }
    }

    .infotag {
        font-size: 20rpx;
        padding: 5rpx 15rpx;
        background: #f94b4b;
        color: #fff;
        position: absolute;
        border-radius: 6rpx;
    }

    .productname {
        display: inline-block;
        font-size: 28rpx;
        color: #333333;
        vertical-align: top;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 500rpx;
    }

    .targetprice {
        font-size: 26rpx;
        height: auto;
        color: #f94b4b;
        margin: 15rpx 0;
    }

    .icon-shijian {
        font-size: 30rpx;
        color: #999999;
        margin-right: 10rpx;
    }

    .icon-kejian1 {
        font-size: 30rpx;
        color: #999999;
        margin-right: 10rpx;
    }

    .icon-dizhi1 {
        font-size: 30rpx;
        color: #999999;
        margin-right: 10rpx;
    }

    .dizhi_left {
        float: left;
    }

    .liulan_right {
        float: right;
        margin-right: 25rpx;
    }

    .itemImg {
        .yishou_bg {
            width: 90rpx;
            height: 90rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }
    }

    .fabu {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #fff;
        padding: 20rpx 60rpx;
        box-sizing: border-box;

        text {
            display: inline-block;
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            border-radius: 45rpx;
            font-size: 30rpx;
            &.intro {
                background: #ffe6dc;
                color: #FF5B00;

                &.long {
                    width: 600rpx;
                    display: block;
                    margin: 0 auto;
                }
            }

            &.release {
                background: $btn-confirm;
                color: #ffffff;
            }
        }
    }
</style>