horzi_rai_wxa/pages/reportForm/reportForm.vue

<template>
    <view class="reportForm-container">
        <!-- tabs -->
        <view class="index-fixed">
            <view class="index-header">
                <input type="text" placeholder="搜索您想要的产业资源包" placeholder-class="sea_ipt_placeholder" class="sea_ipt"
                    v-model="searchTxt" disabled @click="goSearch" />
                <icon type="search" size="15" class="search_ico" />
            </view>
            <view class="tab-cont">
                <scroll-view scroll-x="true" @scroll="scrollMove" :scroll-left="scrollLeft" scroll-with-animation
                    class="scroll-tab" :scroll-into-view="'_'+tabIndex">
                    <block v-for="(item, index) in tabBars" :key="item.ChartPermissionId">
                        <view :id="'_'+index" class="scroll-tab-item"
                            :class="{ active: tabAct_id == item.ChartPermissionId }"
                            @click.stop="toggleTab(item,index)">
                            {{item.PermissionName}}
                            <image src="@/static/img/border_act.png" mode="" class="border_act"
                                v-if="tabAct_id == item.ChartPermissionId"></image>
                        </view>
                    </block>
                    <view class="limit-box" v-if="limitIsShow">
                        <image class="limit-img" src="../../static/img/limit_icon.png" mode=""></image>
                    </view>
                </scroll-view>

            </view>
            <view class="lucency" v-if="tabBars.length>6"></view>
        </view>
        <!-- 内容 -->
        <view class="strategy" v-if="strategyIndex==4">
            <view class="tab-cont-two">
                <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab-tow">
                    <block v-for="(item, index) in tabBarsTow" :key="item.CategoryId">
                        <view :id="'__'+index" class="scroll-tab-item"
                            :class="{ active: tabAct_idTwo == item.CategoryId }" @click.stop="toggleTabTwo(item,index)">
                            {{item.MatchTypeName}}
                            <text class="reg-text" v-if="item.IsRed"></text>
                        </view>
                    </block>
                </scroll-view>
            </view>
            <view class="row">

            </view>
            <!-- 子组件 -->
            <strategy :strategyIndexTwo="strategyIndexTwo" :pageNumFather='pageNumFather' :matchTypeName="matchTypeName"
                :tabAct_idTwo="tabAct_idTwo" :isNum="isNum" :isSwitchover="isSwitchover" @hideIsred="hideIsred" />
        </view>
        <view class="" v-else-if="strategyIndex==5">
            <researchChoose :strategyIndex="strategyIndex" :tabAct="tabAct_id" :pageNumFather="pageNumFather"
                :isNum="isNum" />
        </view>
        <!-- </view> -->
        <view class="industrial_eport_one" v-else>
            <!-- 行业报告 -->
            <view class="industry" v-if="tradeList">
                <view style="height: 20rpx;"></view>
                <view class="industry-top">
                    <view class="img-top-box">
                        <image src="@/static/img/industry-ico.png"></image>
                        <text>行业综述</text>
                    </view>
                    <view>

                    </view>
                </view>
                <view class="industry-box" @click="isClickHandle(item.CategoryId)" v-for="item in tradeList"
                    :key="item.CategoryId">
                    <view class="box-left">
                        {{item.MatchTypeName}}
                        <text v-if="item.IsRed"></text>
                    </view>
                    <view class="box-right">
                        <text>{{item.UpdateTime}}更新</text>
                        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
                    </view>
                </view>
            </view>
            <!-- 产业报告 -->
            <view class="industry">
                <view style="height: 12rpx;" v-if="!tradeList"></view>
                <view class="industry-top industry-sticky">
                    <view class="img-top-box">
                        <image src="@/static/img/property_ico.png" style="height: 50rpx;"></image>
                        <text class="text-sub">细分产业</text>
                    </view>
                    <van-dropdown-menu active-color="#333333">
                        <van-dropdown-item id="menuItem" @open="isscroll" :title="overallArrangementName">
                            <view class="menu-items-tow">
                                <view class="items-tow" @click="pitchClick(item,index)" v-for="(item,index) in pitchOn"
                                    :key="item.id">
                                    <view>
                                        <u-icon v-show="pitchOnId==item.id" name="checkbox-mark" color="#2C83FF"
                                            size="24"></u-icon>
                                    </view>
                                    <text :class="pitchOnId==item.id?'items-act':''">{{item.name}}</text>
                                </view>
                            </view>
                            <view style="background-color: #f8f8fa;width: 100%;">
                                <view style="margin: 0 auto;width: 682rpx;border-bottom: 2rpx dashed  #999;">
                                </view>
                            </view>
                            <view class="menu-items">
                                <view class="menu-items-box" @click="overallBtn(index,item)"
                                    v-for="(item,index) in overallArrangement" :key="item.id">
                                    <view class="items-box">
                                        <u-icon v-show="item.isShow" name="checkbox-mark" color="#2C83FF" size="24">
                                        </u-icon>
                                    </view>
                                    <text>{{item.name}}</text>
                                </view>
                            </view>
                            <view class="replacement-box">
                                <view class="replacement">
                                    <text @click="replacementBtn" class="replacement-box">重置</text>
                                    <text @click="replacementConfirm">确定</text>
                                </view>
                            </view>
                        </van-dropdown-item>
                    </van-dropdown-menu>
                </view>
                <!-- 需要循环的地方 -->
                <view class="forindustry" v-for="item in industryList" :key="item.IndustrialManagementId">
                    <!-- 火锅底料这个位置 -->
                    <view class="industry-content">
                        <view class="industry-box-left" @click="reportFllow(item.IndustrialManagementId)">
                            <image src="@/static/img/top_ico.png" v-if="item.IsFollow"></image>
                            <image src="@/static/img/top_no_ico.png" v-else></image>
                        </view>
                        <view class="industry-box-right" @click="goIndustryReport(item.IndustrialManagementId)">
                            <view class="ndustry-box-read">
                                <text>{{item.IndustryName}}</text>
                                <image v-if="item.IsHot" src="../../static/img/ammunition_ico.png" mode=""></image>
                            </view>
                            <view class="ndustry-box-arrow">
                                <text v-if="item.IsRed" class="read"></text>
                                <text class="ndustry-box-text">{{item.UpdateTime}}更新</text>
                                <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
                            </view>
                        </view>
                    </view>
                    <view class="content-box" v-if="item.IndustrialSubjectList.length>6">
                        <u-read-more :toggle="true" :show-height="item.IndustrialSubjectList.length>6 ? 140 :150"
                            :shadow-style="shadowStyle" close-text="展开" color="#D1D1D1">
                            <view class="read-more">
                                <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId"
                                    @click="goIndustryReport(item.IndustrialManagementId)" class="text-box">
                                    {{val.SubjectName}}
                                </view>
                            </view>
                        </u-read-more>
                    </view>
                    <view class="content-box" v-else @click="goIndustryReport(item.IndustrialManagementId)">
                        <view class="read-more">
                            <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId"
                                class="text-box">{{val.SubjectName}}</view>
                        </view>
                    </view>
                </view>
                <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20"
                    v-if="totalPage>1" />
            </view>
        </view>
        <coverGuide :isGuideShow="isGuideShow" />
        <u-modal v-model="goFollowShow" :content-style="{fontSize: '32rpx'}" @confirm="goFollowShowBtn"
            :show-cancel-button="isCancelBtn" :confirm-text="confirmText" @cancel="isCancelBtn=false"
            :show-title="false" :cancel-style="{borderRight:'1rpx solid #EBEBEB'}" :confirm-style="{fontWeight: '700'}">
            <view class="slot-content">
                <rich-text :nodes="accounts"></rich-text>
            </view>
        </u-modal>
        <view class="content-intimate" v-if="reportShow">
            <van-transition :show="showTransition" name="fade-right">
                <view class="content">
                    <view @click="goSecretDetail('1')">
                        <text>报告</text>
                        <text>精选</text>
                    </view>
                    <view class="cont-border" @click="goSecretDetail('2')">
                        <text>本周研</text>
                        <text>究汇总</text>
                    </view>
                    <view @click="goSecretDetail('3')">
                        <text>上周纪</text>
                        <text>要汇总</text>
                    </view>
                </view>
            </van-transition>
            <image @click="showTransition=!showTransition" src="https://hzstatic.hzinsights.com/cygx/czbk/intimate-icon.png" mode=""></image>
        </view>
    </view>
</template>

<script>
    import strategy from "./components/strategy.vue"
    import researchChoose from "./components/researchChoose.vue"
    import coverGuide from "./components/coverGuide.vue"
    import {
        Throttle,
        Debounce
    } from '@/config/util.js'
    import {
        Reports
    } from '@/config/api.js'
    let app = getApp()
    export default {
        components: {
            strategy,
            researchChoose,
            coverGuide
        },
        data() {
            return {
                tabAct_id: '',
                tabAct_idTwo: '',
                tabBars: [],
                pageNumFather: '',
                shadowStyle: {
                    backgroundImage: "none"
                },
                tabBarsTow: [],
                pitchOn: [{
                    name: '按最近更新排序',
                    id: 'NewTime'
                }, {
                    name: '按推荐关注排序',
                    id: 'Recommend',
                }],
                pitchOnId: 'NewTime',
                //pitchOnName: '按最近更新排序',
                isNum: 1,
                strategyIndex: '',
                strategyIndexTwo: 0,
                isSwitchover: 1,
                tradeList: [],
                OrderColumn: '',
                industryList: [],
                loadText: {
                    loadmore: '上拉加载更多',
                    loading: '加载中',
                    nomore: '已经到底了'
                },
                refresh: false, //正在下拉
                page_no: 1,
                pageSize: 10,
                status: 'loadmore',
                haveData: true,
                totalPage: '',
                matchTypeName: '',
                overallArrangement: [{
                    name: '新布局产业',
                    id: '1',
                    isShow: false
                }, {
                    name: '深度研究产业',
                    id: '2',
                    isShow: false
                }, ],
                overallArrangementId: '',
                overallArrangementName: '按最近更新排序',
                isScrollShow: false,
                isGuideShow: false,
                limitIsShow: false, //限免显示隐藏
                goFollowShow: false,
                accounts: '',
                confirmText: '知道了',
                isCancelBtn: false,
                scrollLeft: 0,
                showTransition: false,//点击绝密后的隐现
                reportShow:false,//绝密标签的隐现
            }
        },
        onLoad(option) {
            this.loadList(option)
        },
        watch: {
            //监听tabs的变化
            tabAct_id: {
                handler() {
                    this.initList()
                },
                immediate: true
            }
        },
        methods: {
            //获取一级事件
            getClassify() {
                Reports.getClassify().then(res => {
                    if (res.Ret !== 200) return
                    this.tabBars = res.Data.List || []
                    if (!this.tabAct_id) {
                        this.tabAct_id = res.Data.List[0].ChartPermissionId
                        this.$store.dispatch("statistics", {
                            PageType: 'Report',
                            ChartPermissionId: Number(this.tabAct_id)
                        })
                    }
                    this.limitIsShow = this.tabBars.some(item => item.IsShowSustainable)
                })
            },
            //获取二级事件
            getstrategyAll() {
                Reports.getstrategyAll().then(res => {
                    this.tabBarsTow = res.Data.List
                    if (!this.tabAct_idTwo) {
                        this.tabAct_idTwo = res.Data.List[0].CategoryId
                    }
                    this.matchTypeName = res.Data.List[0].MatchTypeName
                })
            },
            //tabs切换事件
            toggleTab(item, index) {
                this.strategyIndex = index
                if (this.tabAct_id !== item.ChartPermissionId) {
                    this.tabAct_id = item.ChartPermissionId;
                    this.$store.dispatch("statistics", {
                        PageType: 'Report',
                        ChartPermissionId: Number(this.tabAct_id)
                    })
                    this.pageNum = 1;
                    uni.pageScrollTo({
                        scrollTop: 0,
                        duration: 0,
                    });
                }
                this.getRectTab(index)
            },
         async reportIsShow(){
                const res = await Reports.reportIsShow()
                if(res.Ret===200){
                    this.reportShow=res.Data.IsShow
                }
            },
            getRectTab(index) {
                // const query = uni.createSelectorQuery().in(this);
                // query.select(`#_${index}`).boundingClientRect(rect => {
                //          var screen = wx.getSystemInfoSync().windowWidth/2;
                //         //获取点击item的左边坐标
                //         var left = rect.left;
                //         //获取item的宽度de 一半
                //         var subhalfwidth= rect.width/2
                //         //需要scrollview 移动的距离是
                //         var juli = left-screen
                //         var zuizhongjuli = juli+subhalfwidth
                //         this.scrollLeft = this.scrollLeft+=zuizhongjuli
                // }).exec();
            },
            scrollMove(e) {
                this.scrollLeft = e.detail.scrollLeft;
            },
            //tabs切换二级事件
            toggleTabTwo(item, index) {
                this.matchTypeName = item.MatchTypeName
                this.strategyIndexTwo = index
                if (this.tabAct_idTwo !== item.CategoryId) {
                    this.tabAct_idTwo = item.CategoryId;
                    this.pageNum = 1;
                    uni.pageScrollTo({
                        scrollTop: 0,
                        duration: 0,
                    });
                }
            },
            //点击产业报告的筛选条件
            pitchClick(item) {
                this.pitchOnName = item.name
                this.OrderColumn = item.id
                if (this.pitchOnId !== item.id) {
                    this.pitchOnId = item.id;
                }
            },
            //获取报告所有品种接口
            getTradeList() {
                Reports.getTradeList({
                    ChartPermissionId: this.tabAct_id
                }).then(res => {
                    if (res.Ret == 200) {
                        this.tradeList = res.Data.List || []
                    }
                })
            },
            //获取产业报告所有品种接口
            getIndustryList() {
                Reports.getIndustryList({
                    ChartPermissionId: this.tabAct_id,
                    OrderColumn: this.OrderColumn,
                    PageSize: this.pageSize,
                    CurrentIndex: this.page_no,
                    IsNewLabel: this.overallArrangementId.includes(1) ? '1' : '0',
                    IsDeepLabel: this.overallArrangementId.includes(2) ? '1' : '0'
                }).then(res => {
                    // this.industryList=res.Data.List
                    this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
                    this.totalPage = res.Data.Paging.Pages; //总页数
                    if (this.page_no === 1) {
                        this.industryList = res.Data.List || [];
                        this.haveData = this.industryList.length ? true : false
                        if (this.refresh) {
                            uni.stopPullDownRefresh();
                            this.refresh = false;
                        }
                    } else {
                        this.industryList = this.industryList.concat(res.Data.List)
                    }

                })
            },
            //跳转季度策略
            isClickHandle(id) {
                this.public({
                    type: 'show'
                }, true, '/reportPages/industrialReport/industrialReport?id=', id)
            },
            //跳转产业报告
            goIndustryReport(id) {
                this.public({
                    type: 'show'
                }, true, '/reportPages/IndustryReport/IndustryReport?id=', id)
            },
            //点击关注的图标
            reportFllow(id) {
                Reports.reportFllow({
                    IndustrialManagementId: id
                }).then(res => {
                    if (res.Ret === 200) {
                        if (res.Data.Status == 1) {
                            this.goFollowShow = true
                            this.confirmText = res.Data.GoFollow ? '去关注' : '知道了'
                            if (res.Data.GoFollow) {
                                this.accounts = `产业关注成功 <br> 想要及时获取该产业内容的更新推送，请关注【弘则研究】公众号`
                                this.isCancelBtn = true
                            } else {
                                this.accounts = '产业关注成功，产业报告更新时，【弘则研究】公众号会为您推送微信消息提醒'
                            }
                        }
                        this.industryList.forEach(key => {
                            if (key.IndustrialManagementId == id) {
                                if (key.IsFollow == 1) {
                                    key.IsFollow = 0
                                    uni.showToast({
                                        title: '已取消关注',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                } else {
                                    key.IsFollow = 1

                                }
                            }
                        })
                    }
                })
            },
            goFollowShowBtn() {
                if (this.confirmText == '去关注') {
                    uni.navigateTo({
                        url: '/activityPages/accountsOfficial/accountsOfficial'
                    })
                }
                this.goFollowShow = false
            },
            hideIsred(is) {
                this.tabBarsTow[this.strategyIndexTwo].IsRed = is
            },
            /* 新布局产业选项*/
            overallBtn(index, item) {
                this.overallArrangement.forEach(key => {
                    if (key.id == item.id) {
                        key.isShow = !key.isShow
                    }
                })

            },
            /* 新布局产业选项确定按钮 */
            replacementConfirm() {
                const arr = []
                this.overallArrangement.forEach(key => {
                    if (key.isShow) {
                        arr.push(key.id)
                    }
                })
                this.overallArrangementId = arr.join(',')
                this.overallArrangementName = this.pitchOnName
                this.page_no = 1;
                this.status = 'loadmore'
                this.getIndustryList()
                this.selectComponent('#menuItem').toggle();
            },
            /* 新布局产业选项重置按钮 */
            replacementBtn() {
                this.OrderColumn = 'NewTime'
                this.pitchOnId = 'NewTime'
                this.overallArrangement.forEach(key => key.isShow = false)
                this.overallArrangementName = '按最近排序更新'
            },
            /* 判断页面滚动 */
            isscroll: Debounce(function() {
                this.isScrollShow = true
            }),
            /* 搜索 */
            goSearch() {
                this.public({
                    type: 'show'
                }, true, '/reportPages/reportSearch/reportSearch')
            },
            /* 跳转 */
            public(type, flag, purl, price = '') {
                return new Promise((resolve, reject) => {
                    this.$store.dispatch('checkHandle', type).then(res => {
                        app.globalData.isAuth = res.IsAuth;
                        app.globalData.isBind = res.IsBind;
                        if ((!res.IsAuth) && (!res.IsBind)) { //已授权已绑定
                            if (flag) {
                                uni.navigateTo({
                                    url: purl + price,
                                });
                            }
                        } else if (res.IsAuth) { //未授权
                            uni.navigateTo({
                                url: '/pages/authGuide/authGuide'
                            })
                            return
                        } else if (res.IsBind && !res.IsAuth) { //已授权未绑定
                            uni.navigateTo({
                                url: '/pages/login/login'
                            })
                            return
                        }
                    })
                })
            },
            /* 初始 */
            initList() {
                if (this.tabAct_id && (this.strategyIndex !== 4 && this.strategyIndex !== 5)) {
                    this.OrderColumn = 'NewTime'
                    this.pitchOnId = 'NewTime'
                    this.overallArrangementName = '按最近更新排序'
                    this.overallArrangementId = ''
                    this.page_no = 1;
                    this.refresh = true;
                    this.getIndustryList()
                    this.getTradeList()
                    this.overallArrangement.forEach(key => key.isShow = false)
                }
                this.strategyIndex == 4 ? this.getstrategyAll() : this.tabAct_idTwo = ''
                if (this.isScrollShow) {
                    this.selectComponent('#menuItem').toggle(false);
                    this.isScrollShow = false
                }
                this.isNum = 1
            },
            /* 页面加载 */
            loadList(option) {
                if (!this.$db.get('guideSole')) { //新手指引
                    this.isGuideShow = true
                }

                this.$store.dispatch("checkHandle", {
                    type: 'load',
                    val: option
                }).then(res => {
                    app.globalData.isAuth = res.IsAuth;
                    app.globalData.isBind = res.IsBind;
                    app.globalData.isSx = true
                    this.tabAct_id = option.tab || ''
                    if (option.tabs !== '' && option.tabs) {
                        this.strategyIndex = 4
                        this.tabAct_idTwo = option.tabs
                    }
                    if (this.tabAct_id == 31) {
                        this.strategyIndex = 5
                    }
                    this.getClassify()
                    this.reportIsShow()
                })
                this.$db.set('guideSole', 1) //新手指引
            },
            goSecretDetail(type){
                uni.navigateTo({
                    url:'/reportPages/secretDetails/secretDetails?type='+type
                })
            }
        },
        /* 触底 */
        onReachBottom: Throttle(function() {
            if (this.strategyIndex == 4 || this.strategyIndex == 5) {
                this.isNum++
                return
            }
            if (this.status === 'nomore') return;
            this.status = 'loading';
            this.page_no++;
            this.getIndustryList()
        }),
        /* 下拉刷新 */
        onPullDownRefresh: Throttle(function() {
            if (this.strategyIndex == 4 || this.strategyIndex == 5) {
                this.pageNumFather = 1
            } else {
                this.industryList = []
                this.pageNumFather = null
                this.page_no = 1;
                this.refresh = true;
                this.getIndustryList()
                this.getTradeList()
            }
            wx.stopPullDownRefresh();
        }),
        onShow() {
            if (this.tabAct_id) {
                this.$store.dispatch("statistics", {
                    PageType: 'Report',
                    ChartPermissionId: Number(this.tabAct_id)
                })
            }
            if (this.tabAct_id && app.globalData.isSx) {
                this.getTradeList()
            }
        },
        /**
         * 用户点击分享
         */
        onShareAppMessage: function(res) {
            return {
                title: "报告",
                path: '/pages/reportForm/reportForm?tab=' + this.tabAct_id + '&tabs=' + this.tabAct_idTwo,
                success: (res) => {},
                fail: (err) => {}
            }
        },
        /**
         *监听页面滚动
         */
        onPageScroll() {
            if (this.isScrollShow) {
                this.selectComponent('#menuItem').toggle(false);
                this.isScrollShow = false
            }

        },
        onHide() {
          if(  this.showTransition) {
                this.showTransition= false
          }
            if (this.strategyIndex == 4 || this.strategyIndex == 5) return
            this.selectComponent('#menuItem').toggle(false);
        },
    }
</script>

<style scoped lang="scss">
    @import './index.scss';

    .content-intimate {
        position: fixed;
        display: flex;
        align-items: center;
        bottom: 96rpx;
        right: 41rpx;
        height: 156rpx;
        .content {
            width: 432rpx;
            height: 112rpx;
            background-color: #FFF;
            display: flex;
            border-radius: 56rpx;
            overflow: hidden;
            .cont-border {
                margin: 0 2rpx;
            }
            view {
                flex: 1;
                background-color: #3385FF;
                font-size: 30rpx;
                color: #fff;
                padding-top: 15rpx;
                text-align: center;
            }
        }

        image {
            width: 156rpx;
            height: 100%;
            z-index: 99;
        }
    }
</style>