<template>
    <view>
        <view class="codeTitle">
            <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/userGoods_title.png" mode="widthFix"></image>
        </view>
        
        <view class="shareCont">
            <!-- 提示 -->
            <view class="indexNews">
                <image src="/static/icon/news_icon.png"></image>
                <view class="marquee_container" style="--marqueeWidth--:-30em">
                    <view class="marquee_text" :class="{active : noticeText.length > 20}">{{ noticeText }}</view>
                </view>
            </view>
        
            <!-- 列表 -->
            <view class="goods" v-if="goodsArr.length > 0">
                <view class='goodsList-half'>
                    <navigator hover-class="none" v-for="(item, index) in goodsArr" :key="index" :url="'/pages/userGoods/goodsDet?rightid=' + item.right_config_id"
                        class="goodsList" v-if="index%2 == 0">
                        <view class="goodsList-img">
                            <image :src="item.cover" mode="aspectFill"></image>
                        </view>
                        <view class="goodsList-cont">
                            <view class="nowrap goodsList-name" v-if="item.share">[ {{ item.title }} ]{{ item.share.type_name }}</view>
                            <view class="goodsList-text" v-if="item.share">{{ item.share.sub_title }}</view>
                            <view class="goodsList-label" v-if="item.share"><text v-for="(items, index) in item.share.label" :key="index">{{ items }}</text></view>
                            <view class="goodsList-tips" v-if="item.profit"><text>追加激励￥{{ item.profit.stimulate }}</text></view>
                            <view class="goodsList-price">
                                <view class="goodsList-price-number">￥{{ item.price }}<text v-if="item.share">￥{{ item.share.cost }}</text></view>
                                <view class="goodsList-price-btn">
                                    <image src="/static/img/userGoods_icon.png" v-if="item.profit"></image><text>返￥</text>{{ item.profit.value }}
                                </view>
                            </view>
                        </view>
                    </navigator>
                </view>
                <view class='goodsList-half'>
                    <navigator hover-class="none" :url="'/pages/userGoods/goodsDet/goodsDet?rightid=' + item.right_config_id"
                        class="goodsList" v-for="(item, index) in goodsArr" :key="index" v-if="index%2 != 0">
                        <view class="goodsList-img">
                            <image :src="item.cover" mode="aspectFill"></image>
                        </view>
                        <view class="goodsList-cont">
                            <view class="nowrap goodsList-name">[ {{ item.title }} ]{{ item.share.type_name }}</view>
                            <view class="goodsList-text">{{ item.share.sub_title }}</view>
                            <view class="goodsList-label"><text v-for="(items, index) in item.share.label" :key="index">{{ items }}</text></view>
                            <view class="goodsList-tips" v-if="item.profit"><text>追加激励￥{{ item.profit.stimulate }}</text></view>
                            <view class="goodsList-price">
                                <view class="goodsList-price-number">￥{{ item.price }}<text>￥{{ item.share.cost }}</text></view>
                                <view class="goodsList-price-btn">
                                    <image src="/static/img/userGoods_icon.png" v-if="item.profit"></image><text>返￥</text>{{ item.profit.value }}
                                </view>
                            </view>
                        </view>
                    </navigator>
                </view>
                <view class="pagesLoding" v-if="lodingStats">
                    <block v-if="page.has_more">
                        <image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
                    </block>
                    <block v-else>
                        没有更多了~
                    </block>
                </view>
            </view>
        
            <view class="pack-center pages-hint" v-else>
                <image src="/static/img/staff_null.png"></image>
                <view>暂无数据</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { productList } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                noticeText  : '',       // 公告
                goodsArr    : [],       // 产品列表
                page        : {},       // 下一页
                lodingStats : false ,   // 加载状态
    		}
    	},
        onLoad(options) {
            // 获取产品列表
            this.goodsGain();
        },
        methods: {
            // 产品列表
            goodsGain(page){
                productList(page).then(res=>{
                    let listArr = this.goodsArr,
                         newData = []
                     if(page == 1 || page == undefined) listArr = []
                     newData = listArr.concat(res.list.data)
                    this.goodsArr    = newData
                    this.page        = res.list.page
                    this.noticeText  = res.notice
                    this.lodingStats = false
                    uni.stopPullDownRefresh()
                }).catch(err=>{})
            },
            
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    this.profitInfo(pageNumber)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #e4e4e4;
    }
    
    .codeTitle {
        width: 100%;
        background-color: #222222;
        border-radius: 0 0 300rpx 300rpx;
        box-sizing: border-box;
        padding: 30rpx 20rpx 0;
        image {
            text-align: center;
            width: 100%;
            border-radius: 20rpx;
            display: block;
        }
    }
    
    .shareCont {
        padding: 0 20rpx;
        box-sizing: border-box;
        width: 100%;
    }
    
    .indexNews {
        background: #c4c4c4;
        display: flex;
        font-weight: 600;
        line-height: 46rpx;
        border-radius: 50rpx;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        margin: 30rpx 0;
        image {
            width: 42rpx;
            height: 42rpx;
            margin: 4rpx 20rpx 0 0;
        }
    }
    
    .goods {
        display: flex;
        flex-direction: row;
        margin: 0 -10rpx;
    }
    
    .goodsList-half {
        width: 50%;
    }
    
    .goodsList {
        margin: 0 10rpx 20rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        overflow: hidden;
    }
    
    .goodsList-img {
        width: 100%;
        position: relative;
        padding-top: 80%;
        image {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    
    .goodsList-cont {
        padding: 20rpx;
        box-sizing: border-box;
    }
    
    .goodsList-name {
        font-weight: 600;
    }
    
    .goodsList-text {
        margin: 10rpx 0;
        color: #6c6c6c;
        font-size: 26rpx;
        font-weight: 600;
    }
    
    .goodsList-label text {
        display: inline-block;
        font-size: 20rpx;
        background-color: #dedede;
        border-radius: 4rpx;
        padding: 6rpx 10rpx;
        margin: 0 10rpx 5rpx 0;
    }
    
    .goodsList-tips {
        text-align: right;
        margin: 30rpx 0 10rpx;
        text {
            background-color: #ff5c36;
            transform: scale(.8);
            color: #ffffff;
            border-radius: 60rpx;
            font-size: 22rpx;
            padding: 2rpx 10rpx;
        }
    }
    
    .goodsList-price {
        display: flex;
    }
    
    .goodsList-price-number {
        flex: 1;
        line-height: 50rpx;
    }
    
    .goodsList-price-btn {
        background-color: #ff5c36;
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 10rpx;
        color: #ffffff;
        padding: 0 10rpx;
        font-size: 26rpx;
        font-weight: 600;
        image {
            width: 20rpx;
            height: 20rpx;
            margin: 0 10rpx 0 0;
            vertical-align: -2rpx;
        }
        text {
            font-size: 22rpx;
        }
    }
    
    .goodsList-price-number {
        color: #ff5c36;
        font-size: 32rpx;
        font-weight: 600;
        text {
            font-size: 22rpx;
            color: #8f8f8f;
            font-weight: normal;
            text-decoration:line-through;
            padding-right: 10rpx;
        }
    }
    
    /* 滚动  */
    /*首页跑马灯效果*/
    @keyframes around {
        from {
            margin-left: 60rpx;
        }
    
        to {
            /* var接受传入的变量 */
            margin-left: var(--marqueeWidth--);
        }
    }
    
    .marquee_container {
        width: calc(100% - 40rpx);
        overflow: hidden;
    }
    
    .marquee_container:hover {
        /* 不起作用 */
        animation-play-state: paused;
    }
    
    .marquee_text {
        font-size: 30rpx;
        display: inline-block;
        white-space: nowrap;
    }
    
    .marquee_text.active {
        animation-name: around;
        animation-duration: 20s;
        /*过渡时间*/
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
</style>
