版本更新（视频）

zengh

2021-11-03 f55c6af89e056bdd12caa626f351cc6119264346

版本更新（视频）

 pages.json

@@ -52,6 +52,14 @@
            }
        },
        {
            "path": "pages/myself/childen/collect",
            "style": {
                "navigationBarTitleText": "我的收藏",
                "navigationBarBackgroundColor": "#103289",
                "navigationBarTextStyle": "white"
            }
        },
        {
            "path": "pages/myself/myself",
            "name": "myself",
            "style": {
@@ -228,7 +236,8 @@
            "style": {
                "navigationBarTitleText": "资讯",
                "navigationBarBackgroundColor": "#103289",
                "navigationBarTextStyle": "white"
                "navigationBarTextStyle": "white",
                "onReachBottomDistance": 0
            }
        },
        {

 pages/article/article.vue

@@ -70,7 +70,7 @@
                // pathUrl:"http://localhost:89/",
                pathUrl: this.$store.state.piAPI + "",
                page: 1,
                pagesize: 10,
                pagesize: 99999,
                status: 'loadmore',
                // loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                isLoadMore: false, //是否加载中
@@ -184,11 +184,12 @@

        //上拉加载更多
        onReachBottom() {
            console.log(2323232)
            if (this.status == 'nomore') return;
            this.page = ++this.page;
            setTimeout(() => {
                this.getArtcilePageList(this.tabInfo);
            }, 1000);
            }, 100);
        },
        methods: {
            goTabDetail(index) {
@@ -237,24 +238,23 @@
                    }
                }
                uni.request({
                    url: this.$store.state.piAPI + '/article/article/pageDate',
                    url: that.$store.state.piAPI + '/article/article/pageDate',
                    method: 'GET',
                    data: paramData,
                    success: (res) => {
                        if (res.data.code == 200) {
							
                            if (res.data.data.records) {
                                //如果总数小于pageSize,不做其他操作
                                if (res.data.data.total < this.pagesize) {
                                if (res.data.data.total < that.pagesize) {
                                    that.data = res.data.data.records;
                                    that.status = 'nomore';
                                } else {
                                    if (res.data.data.records.length < this.pagesize) {
                                    if (res.data.data.records.length < that.pagesize) {
                                        //如果数量小于分页数量，则为最后一页
                                        this.status = 'nomore'
                                    } else {
                                        that.status = 'nomore'
                                    } else {	
                                        //否则继续加载更多数据
                                        this.status = 'loading';
                                        that.status = 'loading';
                                    }
                                    res.data.data.records.forEach((item) => {
                                        that.data.push(item);
@@ -274,7 +274,6 @@
                this.getArtcilePageList(e);
            },
            refreshing() {

                if (this.isRefreshing) {
                    return;
                }
@@ -283,10 +282,6 @@
                if (!this.triggered) {
                    this.triggered = true;
                }

                this.dataListP = [];
                this.dataListQZ = [];
                this.dataListTXL = [];

                this.getArtcilePageList();
            },

 pages/article/article_detail.vue

@@ -87,13 +87,16 @@
    .banner-title {
        position: relative;
        left: 20rpx;
        max-height: 84upx;
        overflow: hidden;
        width: 90%;
        color: #000000;
        font-weight: 400;
        line-height: 42upx;
        z-index: 11;
		
        font-size: 40rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        line-height: 47rpx;
		
    }

    .article-meta {

 pages/article/article_video.nvue

@@ -1,13 +1,16 @@
<template>
    <div class="page">
        <div class="cover-view-center" v-if="distanceX==0">
            <div :style="{ height: `${sysheight-60}px`,width: width }" ref="touch" @click="clickVideo(index)" @touchstart="ListTouchStart" @touchmove="ListTouchMove">
            <div :style="{ height: `${sysheight-60}px`,width: width }" ref="touch" @click="clickVideo(index)"
                @touchstart="ListTouchStart" @touchmove="ListTouchMove">
                <div class="cover-view-right" v-if="distanceX==0">
                    <image class="img" @click.stop="tapAvater"></image>
                    <text class="right-text"> </text>
                    <image class="img" @click.stop="tapLove"></image>
                    <text class="right-text"> </text>
                    <image class="img" @click.stop="tapMsg"></image>
                    <text class="right-text"> </text>
                    <image class="img" @click.stop="tapCollect"></image>
                    <text class="right-text"> </text>
                    <image class="img" @click.stop="tapShare"></image>
                    <text class="right-text"> </text>
@@ -18,11 +21,10 @@
            <block v-for="(item, idx) in videoList" :key="idx">
                <div class="video-box" :style="{ height: height }">
                    <!-- 视频渲染数预加载数影响性能 -->
                    <block v-if="Math.abs(index-idx)<=1"> 
                        <chunlei-video class="video" :src="item.src"  :height="height" :width="width" 
                            :play="item.flag" :gDuration="item.duration" :objectFit="item.objectFit"
                            :initialTime="item.initialTime" @pause="pauseVideo" :rotateImg="`//static/avatar.png`" :danmuList="danmuList"
                        >
                    <block v-if="Math.abs(index-idx)<=1">
                        <chunlei-video class="video" :src="item.src" :height="height" :width="width" :play="item.flag"
                            :gDuration="item.duration" :objectFit="item.objectFit" :initialTime="item.initialTime"
                            @pause="pauseVideo" :rotateImg="`//static/avatar.png`" :danmuList="danmuList">
                        </chunlei-video>
                        <cover-view class="cover-view-left">
                            <text class="left-text">@{{item.at}}</text>
@@ -32,27 +34,34 @@
                            <cover-image :src="item.avater" class="avater img" @click.stop="tapAvater"></cover-image>
                            <text class="right-text-avater">+</text>
                            <text class="right-text"></text>
                            <cover-image :src="item.check?'../../static/aixinRed.png':'../../static/aixin.png'" class="img" @click.stop="tapLove"></cover-image>
                            <cover-image :src="item.check?'../../static/aixinRed.png':'../../static/aixin.png'"
                                class="img" @click.stop="tapLove"></cover-image>
                            <text class="right-text">{{item.like}}</text>
                            <cover-image src="../../static/xiaoxi.png" class="img" @click.stop="tapMsg"></cover-image>
                            <text class="right-text">{{item.comment}}</text>
                            <cover-image src="../../static/share-fill.png" class="img" @click.stop="tapShare"></cover-image>
                            <cover-image v-if="item.iscomment == '1'" src="../../static/xiaoxi.png" class="img" @click.stop="tapMsg"></cover-image>
                            <text v-if="item.iscomment == '1'" class="right-text">{{item.comment}}</text>
                            <cover-image :src="item.iscollect?'../../static/collectred.png':'../../static/collect.png'"
                                class="img" @click.stop="tapCollect"></cover-image>
                            <text class="right-text">{{item.collect}}</text>
                            <cover-image src="../../static/share-fill.png" class="img" @click.stop="tapShare">
                            </cover-image>
                            <text class="right-text">分享</text>
                        </cover-view>
						

                    </block>
                </div>
				

            </block>
        </div>
		
        <div class="left-div" :style="{ height: height,width: width,left:`${-parseInt(width)}px` }" ref="left"  @touchstart="ListTouchStart" @touchmove="ListTouchMove">

        <div class="left-div" :style="{ height: height,width: width,left:`${-parseInt(width)}px` }" ref="left"
            @touchstart="ListTouchStart" @touchmove="ListTouchMove">
            <text class="title-text" @click="clickbt">{{videoList[index].at}}</text>
        </div>
        <div class="right-div" :style="{ height: height,width: width,right:`${-parseInt(width)}px` }" ref="right"  @touchstart="ListTouchStart" @touchmove="ListTouchMove">
        <div class="right-div" :style="{ height: height,width: width,right:`${-parseInt(width)}px` }" ref="right"
            @touchstart="ListTouchStart" @touchmove="ListTouchMove">
            <text class="title-text">{{videoList[index].content}}</text>
        </div>
		

    </div>
</template>

@@ -63,61 +72,80 @@
    const animation = weex.requireModule('animation');
    const modal = weex.requireModule('modal');

    export default { 
        mixins:[scrollMixins],
        components:{
    export default {
        mixins: [scrollMixins],
        components: {
            chunleiVideo
        },
        data(){
            return{
                danmuList:[
                    {text: '发条弹幕0',color: '#fff',time: 2,avatar:'../../static/avatar.png'},
                    {text: '发条弹幕1',color: '#fff',time: 3,avatar:'../../static/avatar.png'},
                    {text: '发条弹幕2',color: '#fff',time: 5,avatar:'../../static/avatar.png'},
                    {text: '发条弹幕3',color: '#fff',time: 6,avatar:'../../static/avatar.png'},
        data() {
            return {
                danmuList: [
                    // {
                    //     text: '发条弹幕0',
                    //     color: '#fff',
                    //     time: 2,
                    //     avatar: '../../static/avatar.png'
                    // },
                    // {
                    //     text: '发条弹幕1',
                    //     color: '#fff',
                    //     time: 3,
                    //     avatar: '../../static/avatar.png'
                    // },
                    // {
                    //     text: '发条弹幕2',
                    //     color: '#fff',
                    //     time: 5,
                    //     avatar: '../../static/avatar.png'
                    // },
                    // {
                    //     text: '发条弹幕3',
                    //     color: '#fff',
                    //     time: 6,
                    //     avatar: '../../static/avatar.png'
                    // },
                ],
                videoList:[
                    {
                        src:'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164015&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
                        content:'为什么要选择uni-app？',
                        flag:true,
                        check:false,
                        like:'10w',
                        comment:'1045',
                        avater:'../../static/logo.png',
                        initialTime:20,
                        at:'Dcloud',
                        duration:841,
                        objectFit:'fill'
                videoList: [{
                        src: 'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164015&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
                        content: '为什么要选择uni-app？',
                        flag: true,
                        check: false,
                        like: '10w',
                        comment: '1045',
                        avater: '../../static/logo.png',
                        initialTime: 20,
                        at: 'Dcloud',
                        duration: 841,
                        objectFit: 'fill'
                    },
                    {
                        src:'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=129764&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
                        content:'广告有反转：危机感十足！一辆车都比你靠谱',
                        flag:false,
                        check:true,
                        like:'7w',
                        comment:'1045',
                        avater:'http://img.kaiyanapp.com/e44ed5fcfa424ba35761ce5f1339bc16.jpeg?imageMogr2/quality/60/format/jpg',
                        initialTime:0,
                        at:'欧美广告精选',
                        duration:149
                        src: 'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=129764&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
                        content: '广告有反转：危机感十足！一辆车都比你靠谱',
                        flag: false,
                        check: true,
                        like: '7w',
                        comment: '1045',
                        avater: 'http://img.kaiyanapp.com/e44ed5fcfa424ba35761ce5f1339bc16.jpeg?imageMogr2/quality/60/format/jpg',
                        initialTime: 0,
                        at: '欧美广告精选',
                        duration: 149
                    },
                    {
                        src:'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164111&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
                        content:'无辣不欢，你没见过小龙虾的大场面',
                        flag:false,
                        check:false,
                        like:'7w',
                        comment:'1045',
                        avater:'http://img.kaiyanapp.com/7af2bb1bc134fb1115d48f05e9d317f0.jpeg?imageMogr2/quality/60/format/jpg',
                        initialTime:0,
                        at:'世界美食荟萃',
                        duration:1162
                        src: 'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164111&resourceType=video&editionType=default&source=aliyun&playUrlType=url_oss',
                        content: '无辣不欢，你没见过小龙虾的大场面',
                        flag: false,
                        check: false,
                        like: '7w',
                        comment: '1045',
                        avater: 'http://img.kaiyanapp.com/7af2bb1bc134fb1115d48f05e9d317f0.jpeg?imageMogr2/quality/60/format/jpg',
                        initialTime: 0,
                        at: '世界美食荟萃',
                        duration: 1162
                    },
                ]
            }
        },
        created(){
        created() {
            this.init()
            //隐藏subnvue
            uni.getSubNVueById('comment').hide()
@@ -125,105 +153,216 @@
        },
        async mounted() {
            //this.videoPlay(this.index)
            await this.pushVideoList()
            this.$nextTick(()=>{
            // await this.pushVideoList()
            this.$nextTick(() => {
                this.videoPlay(this.index)
            })
        },
        onLoad(e){
        onLoad(e) {
            var that = this;
            var dataForm = JSON.parse((e.detailData));
            this.videoList = [
                {
                    src: dataForm.videoUrl,
                    content:dataForm.title,
                    flag:false,
                    check:false,
                    like:'10w',
                    comment:'1045',
                    avater:'../../static/logo.png',
                    initialTime:0,
                    at:dataForm.sourceName,
                    duration:5,
                }];
            console.log("ccccc"+ dataForm)
            that.videoList = []
            //获取新闻数据
            this.rolename = this.$store.state.UserData.role_name;
            this.userid = this.$store.state.UserData.user_id;
            var url = that.$store.state.piAPI + '/article/article/pageLikes';
            if(dataForm.collectTo){
                url = that.$store.state.piAPI + '/article/article/pageCollect';
            }
			
            uni.request({
                url: url,
                method: 'GET',
                data: {
                    rolename: that.rolename, //帐号角色
                    userid: that.userid,
                    current: 1,
                    size: 99999,
                    articleType: "ksp"
                },
                success: (res) => {
                    if (res.data.code == 200) {
                        var data = res.data.data.records;
                        var x = 0;
                        for (var i = 0; i < data.length; i++) {
                            var flag = false;
                            var check = data[i].islikes == "1"?true:false;
                            var like = data[i].count == null?0:Number(data[i].count);
                            var iscollect = data[i].iscollect == "1"?true:false;
                            var collect = data[i].collectcount == null?0:Number(data[i].collectcount);
                            var comment = data[i].comments == null?0:Number(data[i].comments);
                            if (data[i].id == dataForm.id) {
                                x = 1;
                                flag = true;
                            }
                            if (x == 1) {
                                that.videoList.push({
                                    id: data[i].id,
                                    iscomment:data[i].iscomment,
                                    userid: that.userid,
                                    src: data[i].videoUrl,
                                    content: data[i].title,
                                    flag: flag,
                                    check: check,
                                    like: like,
                                    iscollect: iscollect,
                                    collect: collect,
                                    comment: comment,
                                    avater: '../../static/logo.png',
                                    initialTime: 0,
                                    at: data[i].sourceName,
                                    duration: 5,
                                });
                                flag = false;
                            }
                        }
                    }
                }
            });
        },
        onShow(){
        onShow() {
            this.videoPlay(this.index)
        },
        onHide(){
        onHide() {
            for (let item of this.videoList) {
                item.flag = false
            }
        },
        methods:{
            clickbt(){
        methods: {
            clickbt() {
                console.log(11)
            },
            //设置参数
            init(){
            init() {
                this.typeX = true //开启左右滑动
                this.playCount = 2 //剩余多少视频加载视频列表
                this.startDistance = 5 //判断左右上下拖动的启动距离 px
                this.minTime = 300 //判断快速滑动的时间,该时间内无视回弹距离判断
                this.backDistance = 200 //判断上下滑动的回弹距离 px
            },
            pushVideoList(){
                let promise = new Promise((resolve,reject)=>{
                    uni.request({
                        url: 'https://api.apiopen.top/videoRecommend?id=127397',
                        success: (res) => {
                            let videoGroup = []
                            for (let item of res.data.result) {
                                if(item.type == 'videoSmallCard'){
                                    videoGroup.push({
                                        src:item.data.playUrl,
                                        content:item.data.title,
                                        flag:false,
                                        check:false,
                                        like:'7w',
                                        comment:'1045',
                                        at:item.data.author.name,
                                        avater:item.data.author.icon,
                                        initialTime:0,
                                        duration:item.data.duration
                                    })
                                }
                            }
                            this.videoList = [...this.videoList,...videoGroup]
							
                            resolve()
                        }
                    })
                }) 
                return promise
            },
            tapLove(e){
            // pushVideoList() {
            //     let promise = new Promise((resolve, reject) => {
            //         uni.request({
            //             url: 'https://api.apiopen.top/videoRecommend?id=127397',
            //             success: (res) => {
            //                 let videoGroup = []
            //                 for (let item of res.data.result) {
            //                     if (item.type == 'videoSmallCard') {
            //                         videoGroup.push({
            //                             src: item.data.playUrl,
            //                             content: item.data.title,
            //                             flag: false,
            //                             check: false,
            //                             like: '7w',
            //                             comment: '1045',
            //                             at: item.data.author.name,
            //                             avater: item.data.author.icon,
            //                             initialTime: 0,
            //                             duration: item.data.duration
            //                         })
            //                     }
            //                 }
            //                 this.videoList = [...this.videoList, ...videoGroup]

            //                 resolve()
            //             }
            //         })
            //     })
            //     return promise
            // },
            tapLove(e) {
                var that = this;
                e.stopPropagation();
                if(this.distanceX!=0) return
                if (this.distanceX != 0) return
                if(this.videoList[this.index].check){
                    this.videoList[this.index].like = this.videoList[this.index].like - 1;
                    uni.request({
                        url: that.$store.state.piAPI + 'likes/likes/removelikes',
                        method: 'POST',
                        data: {
                            likesUser: that.userid,
                            likesArticle: that.videoList[that.index].id
                        },
                        success: (res) => {
							
                        }
                    });
					
                }else{
                    this.videoList[this.index].like = this.videoList[this.index].like + 1;
                    uni.request({
                        url: that.$store.state.piAPI + 'likes/likes/submit',
                        method: 'POST',
                        data: {
                            likesUser: that.userid,
                            likesArticle: that.videoList[that.index].id
                        },
                        success: (res) => {
							
                        }
                    });
                }
				
                this.videoList[this.index].check = !this.videoList[this.index].check
                this.videoList = [...this.videoList]
            },
            tapAvater(e){
            tapCollect(e) {
                var that = this;
                e.stopPropagation();
                if(this.distanceX!=0) return
                if (this.distanceX != 0) return
                if(this.videoList[this.index].iscollect){
                    this.videoList[this.index].collect = this.videoList[this.index].collect - 1;
                    uni.request({
                        url: that.$store.state.piAPI + 'collect/collect/removecollect',
                        method: 'POST',
                        data: {
                            collectUser: that.userid,
                            collectArticle: that.videoList[that.index].id
                        },
                        success: (res) => {
							
                        }
                    });
					
                }else{
                    this.videoList[this.index].collect = this.videoList[this.index].collect + 1;
                    uni.request({
                        url: that.$store.state.piAPI + 'collect/collect/submit',
                        method: 'POST',
                        data: {
                            collectUser: that.userid,
                            collectArticle: that.videoList[that.index].id
                        },
                        success: (res) => {
							
                        }
                    });
                }
				
                this.videoList[this.index].iscollect = !this.videoList[this.index].iscollect
                this.videoList = [...this.videoList]
            },
            tapAvater(e) {
                e.stopPropagation();
                if (this.distanceX != 0) return
                uni.showToast({
                    icon:'none',
                    title:`点击索引为${this.index}的头像`
                    icon: 'none',
                    title: `点击索引为${this.index}的头像`
                })
            },
            tapMsg(e){
            tapMsg(e) {
                e.stopPropagation();
                if(this.distanceX!=0) return
                uni.getSubNVueById('comment').show('none',0,()=>{
                    uni.$emit('showComment',this.videoList[this.index].content)
                if (this.distanceX != 0) return
                uni.getSubNVueById('comment').show('none', 0, () => {
                    uni.$emit('showComment', this.videoList[this.index])
                });
            },
            tapShare(e){
            tapShare(e) {
                e.stopPropagation();
                if(this.distanceX!=0) return
                if (this.distanceX != 0) return
                uni.showToast({
                    icon:'none',
                    title:`分享索引为${this.index}的视频`
                    icon: 'none',
                    title: `分享索引为${this.index}的视频`
                })
            },
        }
@@ -231,50 +370,58 @@
</script>

<style lang="scss" scoped>
    .page{
    .page {
        flex: 1;
        overflow: hidden;
        position: relative;
    }
    .swiper{

    .swiper {
        position: relative;
        background-color: #000;
    }
    .left-div{

    .left-div {
        position: absolute;
        top: 0;
        justify-content: center;
        align-items: center;
    }
    .right-div{

    .right-div {
        position: absolute;
        top: 0;
        justify-content: center;
        align-items: center;
    }
    .title-text{

    .title-text {
        font-size: 16px;
        color: #000000;
    }
    .video-box{

    .video-box {
        position: relative;
        background-color: #000;
    }
    .cover-view-center{
		

    .cover-view-center {

        position: fixed;
        justify-content: center;
        align-items: center;
		

        z-index: 999;
    }
    .cover-view-top{

    .cover-view-top {
        position: fixed;
        width: 750rpx;
        height: 150px;
        overflow: hidden;
    }
    .cover-view-left{

    .cover-view-left {
        position: absolute;
        margin-left: 10upx;
        width: 500upx;
@@ -283,25 +430,28 @@
        font-size: 16px;
        color: #FFFFFF;
    }
    .left-text{

    .left-text {
        font-size: 16px;
        color: #FFFFFF;
        margin-bottom: 20upx;
    }
    .avater{

    .avater {
        border-radius: 50upx;
        border-color: #fff;
        border-style: solid;
        border-width: 2px;
    }
	
    .cover-view-right{

    .cover-view-right {
        position: absolute;
        top: 400upx;
        right: 20upx;
        z-index: 9999;
    }
    .right-text-avater{

    .right-text-avater {
        position: absolute;
        font-size: 14px;
        top: 50upx;
@@ -315,27 +465,28 @@
        line-height: 40upx;
        z-index: 999;
    }
	
    .avater-icon{

    .avater-icon {
        height: 40upx;
        width: 40upx;
		

        color: #fff;
        background-color: #DD524D;
        border-radius: 50%;
        position: absolute;
        left: 30upx;
        top:-20upx;
        top: -20upx;
    }
	
    .right-text{

    .right-text {
        text-align: center;
        font-size: 14px;
        color: #FFFFFF;
        margin-bottom: 50upx;
        height: 20px;
    }
    .img{

    .img {
        height: 74upx;
        width: 74upx;
        opacity: 0.9;

 pages/article/scrollMixins.js

@@ -199,7 +199,7 @@
                            this.videoList[this.index].flag = true
                            //加载视频
                            if(this.videoList.length - this.index - 1 <= this.playCount){
                                await this.pushVideoList()
                                // await this.pushVideoList()
                            }
                        }else if(Math.abs(Y)<=this.backDistance&&!quickMove){
                            this.videoList[this.index].flag = true
@@ -283,11 +283,10 @@
                            item.flag = false
                        }
                        this.videoList[this.index].flag = true

                        
                        //加载视频
                        if(this.videoList.length - this.index - 1 <= this.playCount){
                            await this.pushVideoList()
                            // await this.pushVideoList()
                        }
                        
                        

 pages/home/home.vue

@@ -86,7 +86,7 @@
        <!-- 新闻模块 start -->
        <view class="news">
            <navigator hover-class="none" url="/pages/news/list" class="cell">
                <view class="ctitle">温馨提示</view>
                <view class="ctitle">关注</view>
                <view hover-class="bg-light" class="more" @click="goArticle()">
                    更多
                    <u-icon name="arrow-right" color="#A6ABB5" size="16"></u-icon>
@@ -190,10 +190,18 @@
                let detail = {
                    id: e.id
                };
                //去跳转
                uni.navigateTo({
                    url:'../article/article_detail?detailData='+ JSON.stringify(detail)
                });
				
                if(e.articleType.indexOf("ksp") != -1){
                    //去跳转
                    uni.navigateTo({
                        url: '../article/article_video?detailData=' + (JSON.stringify(e))
                    });
                }else{
                    //去跳转
                    uni.navigateTo({
                        url: '../article/article_detail?detailData=' + JSON.stringify(detail)
                    });
                }
            },
            changePicker(e) {
                console.log(this.pickerArr[e.detail.value].name);

 pages/myself/childen/collect.vue

New file
@@ -0,0 +1,505 @@
<template>
    <view class="advisory-big">
        <!-- 自定义顶部导航栏 -->
        <!-- <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}">
            <view class="title" @click="goTabDetail(index)" v-for="(item,index) in titleList"
                :style="titleNum==index? 'color:#000000':'color:#808080'">{{item}}</view>
        </view> -->
        <view>
            <u-dropdown style="height:0rpx">
                <u-dropdown-item v-model="value1" title="看新闻" @change="change" :options="options1"></u-dropdown-item>
                <u-dropdown-item v-model="value1" title="看视频" @change="change" :options="options2"></u-dropdown-item>
                <u-dropdown-item v-model="value1" title="行业圈" @change="change" :options="options3"></u-dropdown-item>
                <u-dropdown-item v-model="value1" title="看现场" @change="change" :options="options4"></u-dropdown-item>
            </u-dropdown>
        </view>
		
        <view>
            <view class="search-block" style="height: 35px">
                <view class="search-ico-wapper">
                    <image src="../../../static/images/search/search.png" class="search-ico" mode=""></image>
                </view>
                <input type="text" v-on:input="getKeyword" v-model="keyword" placeholder="搜索" class="search-text"
                    maxlength="10" focus />
                <!-- <view class="search-ico-wapper1">
                    <image src="../../static/images/article/microphone.png" class="search-ico-1" mode=""></image>
                </view> -->
            </view>
        </view>
		

		

        <scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
            style="width: 100%; margin-top: 100rpx;" :refresher-enabled="refresherFlag" :refresher-threshold="threshold"
            :refresher-triggered="triggered" @refresherrefresh="refreshing" @refresherrestore="refresherrestore">
            <view v-for="i in data" class="advisory-model" @click="goDetail(i)">
                <view class="advisory-left">
                    <view class="advisory-title-top">
                        <view class="advisory-title">{{i.title}}</view>
                    </view>
                    <view class="advisory-title-down">
                        <view class="advisory-title-name">{{i.sourceName}}</view>
                        <view class="advisory-title-time">{{i.createTime.substring(0,11)}}</view>
                    </view>
                </view>
                <view class="advisory-right">
                    <image :src="i.url"></image>
                </view>
            </view>
            <u-loadmore :status="status" />
        </scroll-view>

        <!-- <view class="article-content">
			
        </view> -->

        <!-- 底部导航条 -->
        <u-tabbar :list="tabbar" :mid-button="false"></u-tabbar>
    </view>
</template>

<script>
    import navBarTop from '../../../components/nav-bar-top/nav-bar-top.vue';
    export default {
        components: {
            navBarTop
        },
        data() {
            return {
                // pathUrl:"http://localhost:89/",
                pathUrl: this.$store.state.piAPI + "",
                page: 1,
                pagesize: 99999,
                status: 'loadmore',
                // loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                isLoadMore: false, //是否加载中
                isFlash: false, //是否刷新
                data: [],
                titleNum: 0,
                articleTabArr: [],
                articleTabNum: 0,
                navbarTopHeight: "10px",
                tabbar: this.$store.state.tabbar,
                tabInfo: "0",
                keyword: '',
                value1: "",
                rolename: "",
                threshold: 50,
                triggered: false,
                isRefreshing: false, // 是否在刷新中
                refresherFlag: true,
                options1: [{
                        label: '全部',
                        value: 'kxw',
                    }, {
                        label: '热议',
                        value: 'kxw001',
                    },
                    {
                        label: '通知',
                        value: 'kxw002',
                    },
                    {
                        label: '警闻',
                        value: 'kxw003',
                    },
                    {
                        label: '民生',
                        value: 'kxw004',
                    }
                ],
                options2: [{
                        label: '全部',
                        value: 'ksp',
                    }, {
                        label: '通告',
                        value: 'ksp001',
                    },
                    {
                        label: '微视',
                        value: 'ksp002',
                    },
                    {
                        label: '动态',
                        value: 'ksp003',
                    }
                ],
                options3: [{
                        label: '全部',
                        value: 'hyq',
                    }, {
                        label: '消息发布',
                        value: 'hyq001',
                    },
                    {
                        label: '知识竞答',
                        value: 'hyq002',
                    },
                    {
                        label: '知识讨论',
                        value: 'hyq003',
                    }
                ],
                options4: [{
                    label: '全部',
                    value: 'kxc',
                }],
                swiperHeight: 0
            }
        },
        mounted() {
            // this.getArtcilePageList();
        },
        onLoad() {
            //获取新闻数据
            this.rolename = this.$store.state.UserData.role_name;
            this.getArtcilePageList("0");
            uni.startPullDownRefresh();

        },

        onReady() {
            let that = this;
            uni.getSystemInfo({
                success(e) {
                    console.log(e);
                    let {
                        windowWidth,
                        windowHeight,
                        safeArea
                    } = e;
                    const query = uni.createSelectorQuery().in(that);
                    query
                        .select('#articleBox')
                        .boundingClientRect(data => {

                            that.swiperHeight = (safeArea.bottom - data.top - 50);

                        })
                        .exec();
                }
            });
        },

        //上拉加载更多
        onReachBottom() {
            if (this.status == 'nomore') return;
            this.page = ++this.page;
            setTimeout(() => {
                this.getArtcilePageList(this.tabInfo);
            }, 100);
        },
        methods: {
            goTabDetail(index) {
                this.titleNum = index;
            },
            //去跳转详情页面
            goDetail(e) {
                let detail = {
                    id: e.id
                };
                if(e.articleType.indexOf("ksp") != -1){
                    //去跳转
                    e.collectTo = 1;
                    uni.navigateTo({
                        url: '../../article/article_video?detailData=' + (JSON.stringify(e))
                    });
                }else{
                    //去跳转
                    uni.navigateTo({
                        url: '../../article/article_detail?detailData=' + JSON.stringify(detail)
                    });
                }
				
            },
            //on input 通过 keyword 关键字查询
            getKeyword() {
                this.getArtcilePageList(this.tabInfo);
            },
            //获取资讯信息
            getArtcilePageList(tab) {
                var that = this;
                var paramData = null;
                var userid = this.$store.state.UserData.user_id;
                if (Number(tab) == "") {
                    paramData = {
                        rolename: this.rolename, //帐号角色
                        current: this.page,
                        size: this.pagesize,
                        keyword: this.keyword,
                        userid: userid
                    }
                } else {
                    paramData = {
                        rolename: this.rolename, //帐号角色
                        current: this.page,
                        size: this.pagesize,
                        keyword: this.keyword,
                        articleType: tab,
                        userid: userid
                    }
                }
                uni.request({
                    url: that.$store.state.piAPI + '/article/article/pageCollectList',
                    method: 'GET',
                    data: paramData,
                    success: (res) => {
                        if (res.data.code == 200) {
                            if (res.data.data.records) {
                                //如果总数小于pageSize,不做其他操作
                                if (res.data.data.total < that.pagesize) {
                                    that.data = res.data.data.records;
                                    that.status = 'nomore';
                                } else {
                                    if (res.data.data.records.length < that.pagesize) {
                                        //如果数量小于分页数量，则为最后一页
                                        that.status = 'nomore'
                                    } else {
                                        //否则继续加载更多数据
                                        that.status = 'loading';
                                    }
                                    res.data.data.records.forEach((item) => {
                                        that.data.push(item);
                                    })
                                }
                            }
                            setTimeout(() => {
                                that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
                                that.isRefreshing = false;
                            }, 1000)
                        }
                    }
                });
            },
            change(e) {
                this.page = 1;
                this.getArtcilePageList(e);
            },
            refreshing() {
                if (this.isRefreshing) {
                    return;
                }
                this.isRefreshing = true;
                //界面下拉触发，triggered可能不是true，要设为true
                if (!this.triggered) {
                    this.triggered = true;
                }

                this.getArtcilePageList();
            },

            refresherrestore() {

            },
        }
    }
</script>

<style>
    page {
        width: 100%;
        height: 100%;
        background-color: #f7f7f7;
    }
</style>

<style lang="scss" scoped>
    .advisory-big {
        width: 100%;
        height: 100%;
        background-color: #f7f7f7;

        .uni-nav-bar-info {
            display: flex;
            align-items: center;
            height: 50px;

            .title {
                font-size: 1.2rem;
                color: #808080;
                margin-left: 1rem;
            }
        }


        .article-tab {
            background-color: #fff;
            width: 100%;
            height: 2.5rem;
            border-bottom: 2px solid #D7D7D7;
            z-index: 999;
            position: fixed;

            .article-tab-title {
                // text-align: center;
                width: 14%;
                float: left;
                margin-left: 1rem;
                margin-top: 0.5rem;
                // border-bottom: 4px solid #000000;
            }

            image {
                margin-top: 0.35rem;
                width: 1.5rem;
                height: 1.5rem;
            }
        }

        .article-content {
            // margin-top: 3.5rem;
            width: 100%;
            // background-color: #00FF00;

            .advisory-model {
                width: 94%;
                margin: 0 auto;
                height: 6rem;
                background-color: #FFF;
                border-radius: 8px;
                margin-top: 0.5rem;


                .advisory-left {
                    width: 64%;
                    height: 80%;
                    float: left;
                    position: relative;
                    // background-color: #00FFFF;
                    position: relative;
                    left: 3%;
                    top: 10%;


                    .advisory-title-top {
                        // background-color: #2692FD;
                        width: 100%;
                        height: 75%;

                        .advisory-title {
                            width: 92%;
                            font-size: 15px;
                            font-weight: 550;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }


                    }

                    .advisory-title-down {
                        // background-color: #0078A8;
                        width: 100%;
                        height: 25%;
                        font-size: 12px;
                        font-weight: 550;
                        color: #808080;

                        .advisory-title-name {
                            width: 250rpx;
                            float: left;
                            letter-spacing: 1px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                            // background-color:#0078A8;
                        }

                        .advisory-title-time {
                            position: relative;
                            left: 15rpx;
                        }
                    }

                }

                .advisory-right {
                    // background-color: #222222;
                    width: 33%;
                    height: 80%;
                    left: 65%;
                    position: relative;
                    top: 10%;

                    image {
                        position: relative;
                        left: 0px;
                        top: -100%;
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                    }
                }
            }
        }
    }

    .cccc {
        position: relative;
        top: -5px;
    }

    .cccc::before {
        position: relative;
        top: 25px;
        content: '';
        width: 30px;
        display: block;
        height: 3.5px;
        background-color: #0BB9C8;
    }



    /* 搜索框 */
    .search-ico,
    .search-ico-1 {
        width: 40upx;
        height: 40upx;
    }

    .search-block {
        width: 94%;
        margin: 0 auto;
        // background-color: #007AFF;
        display: flex;
        flex-direction: row;
        position: relative;
        top: 2.85rem;

        .search-ico-wapper {
            background-color: #F1F1F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0upx 0upx 0upx 15upx;
            border-bottom-left-radius: 7px;
            border-top-left-radius: 7px;
        }

        .search-text {
            font-size: 14px;
            background-color: #F1F1F1;
            height: 70upx;
            width: 100%;
            padding-left: 0.5rem;
        }


        .search-ico-wapper1 {
            background-color: #F1F1F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0upx 15upx 0upx 0upx;
            border-bottom-right-radius: 7px;
            border-top-right-radius: 7px;
        }
    }
</style>

 pages/myself/myself.vue

@@ -73,6 +73,11 @@
                    //     open: 'yijian'
                    // },
                    {
                        title: '我的收藏',
                        imgSrc: '../../static/myself/souc.png',
                        open: 'collect'
                    },
                    {
                        title: '能量树',
                        imgSrc: '../../static/myself/shu.png',
                        open: 'chenzs'
@@ -139,34 +144,39 @@
            openThere(fn) {
                this[fn]();
            },
            collect(){
                uni.navigateTo({
                    url: './childen/collect',
                })
            },
            chenzs(){
                wx.navigateTo({
                uni.navigateTo({
                    url: '../shengzs/index',
                })
            },
            aboutUs() {
                // console.log('aboutus')
                wx.navigateTo({
                uni.navigateTo({
                    url: './childen/aboutUs',
                })
            },
            shezhi() {
                wx.navigateTo({
                uni.navigateTo({
                    url: './childen/shezhi',
                })
            },
            yijian() {
                wx.navigateTo({
                uni.navigateTo({
                    url: './childen/yijian',
                })
            },
            genxin() {
                wx.navigateTo({
                uni.navigateTo({
                    url: './childen/genxin',
                })
            },
            xinxi() {
                wx.navigateTo({
                uni.navigateTo({
                    url: './childen/xinxi',
                })
            },
@@ -398,7 +408,7 @@
        .bomBut {
            width: 88%;
            margin: 0 auto;
            height: 21rem;
            height: 24rem;
            z-index: 999;
            border-radius: 2px;
            margin-top: -2.5rem;

 pages/subnvue/comment.nvue

@@ -1,54 +1,56 @@
<template>
    <div class="subnvue flex" @click.stop="">
    <div class="subnvue flex" @click.stop="">
        <div class="mask" @click="hide()"></div>
        <div class="content flex" ref="content">
            <div class="top flex">
                <div class="title">评论</div>
                <div class="title">{{comment}}</div>
                <div @click="hide()" class="hideBtn flex">
                    <text class="iconfont">&#xe628;</text>
                </div>
            </div>
            <scroll-view scroll-y class="srcoll-view">
				
                    <div v-for="(item,index) in dataList" class="card" :key="index">
                        <div class="card-left">
                            <image class="card-image" src="../../static/logo.png"></image>
                            <div class="card-content">
                                <div class="card-top">
                                    <text class="card-name size-14" @click="replyName(item.name)">{{item.name}}</text>
                                    <text class="color-grey">{{item.time}}</text>
                                </div>
                                <div class="card-message">
                                    <text class="margin-right size-14" v-if="item.reply">回复</text>
                                    <text class="color-bule margin-right size-14" v-if="item.reply" @click="replyName(item.reply)">{{item.reply}}:</text>
                                    <text class="card-text size-14" :style="{height:`${Math.ceil(item.message.length/15)*30}upx`}">{{item.message}}</text>
                                </div>
                                <!-- <div class="card-bottom">

                <div v-for="(item,index) in dataList" class="card" :key="index">
                    <div class="card-left">
                        <image class="card-image" src="../../static/logo.png"></image>
                        <div class="card-content">
                            <div class="card-top">
                                <text class="card-name size-14" @click="replyName(item.name)">{{item.name}}</text>
                                <text class="color-grey">{{item.time}}</text>
                            </div>
                            <div class="card-message">
                                <text class="margin-right size-14" v-if="item.reply">回复</text>
                                <text class="color-bule margin-right size-14" v-if="item.reply"
                                    @click="replyName(item.reply)">{{item.reply}}:</text>
                                <text class="card-text size-14"
                                    :style="{height:`${Math.ceil(item.message.length/15)*30}upx`}">{{item.message}}</text>
                            </div>
                            <!-- <div class="card-bottom">
                                    <text class="color-grey">查看7条回复></text>
                                </div> -->
                            </div>
							
                        </div>
						
                        <div class="card-right">
                            <text class="iconfont card-icon color-gray">&#xe603;</text>
                            <text class="color-gray">赞</text>
                            <text class="iconfont card-icon color-gray">&#xe67f;</text>
                            <text class="color-gray">踩</text>
                        </div>

                    </div>
				

                    <div class="card-right">
                        <text class="iconfont card-icon color-gray">&#xe603;</text>
                        <text class="color-gray">赞</text>
                        <text class="iconfont card-icon color-gray">&#xe67f;</text>
                        <text class="color-gray">踩</text>
                    </div>
                </div>

            </scroll-view>
            <div class="bottom flex"  @click="showInput">
            <div class="bottom flex" @click="showInput">
                <div class="input" v-if="flag">
                    <text class="color-gray" style="color: #9C9C9C;">{{placeholder}}</text>
                </div>
                <!-- <input v-if="flag" class="input" @click="showInput" disabled v-model="message" :placeholder="placeholder"/>
                 -->
            </div>
			

        </div>
    </div>
    </div>
</template>

<script>
@@ -56,17 +58,28 @@
    const animation = weex.requireModule('animation')
    const modal = weex.requireModule('modal');
    //#endif
    export default {
    export default {
        data() {
            return {
                flag:true,
                canHide:false,
                message:'',
                placeholder:'来聊聊天把',
                reply:'',
                dataList:[
                    {name:'张三',time:'04-03',message:'下载来试试喀喀喀喀喀喀喀喀喀酷酷酷酷酷酷酷酷',reply:'春雷'},
                    {name:'张三',time:'04-03',message:'下载来试试',reply:'春雷'}
                flag: true,
                canHide: false,
                message: '',
                comment: '评论',
                placeholder: '发表评论',
                reply: '',
                article: '',
                dataList: [{
                        name: '张三',
                        time: '04-03',
                        message: '下载来试试喀喀喀喀喀喀喀喀喀酷酷酷酷酷酷酷酷',
                        reply: ''
                    },
                    {
                        name: '张三',
                        time: '04-03',
                        message: '下载来试试',
                        reply: ''
                    }
                ]
            }
        },
@@ -80,107 +93,169 @@
            // #endif
        },
        created() {
            uni.$on('showComment', this.showComment)  
            uni.$on('sendComment', this.sendComment)  
            uni.$on('showComment', this.showComment)
            uni.$on('sendComment', this.sendComment)
        },
        destroyed() {
            uni.$off('showComment')
            uni.$off('sendComment')
        },
        methods: {
            replyName(name){
        methods: {
            replyName(name) {
                this.reply = name
                this.placeholder = `回复 ${name} :`
            },
            //发送评论
            sendComment(val){
                console.log(val)
                this.dataList.push({
                    name:'春雷',
                    time:'04-03',
                    message:val,
                    reply:this.reply,
                })
            sendComment(val) {
                var that = this;
                var userid = this.$store.state.UserData.user_id;
                var name = this.$store.state.UserData.real_name;
                uni.request({
                    url: that.$store.state.piAPI + '/comment/comment/submit',
                    method: 'POST',
                    data: {
                        article: that.article,
                        content: val,
                        userId: userid,
                    },
                    success: (res) => {
                        uni.showToast({
                            title: '评论成功，请等待审核',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });

                // this.dataList.push({
                //     name: '春雷',
                //     time: '04-03',
                //     message: val,
                //     reply: this.reply,
                // })
                this.reply = ''
            },
            //显示评论
            showComment(val){
            showComment(val) {
                // console.log(val.userid)
                var that = this;
                if (typeof val != "undefined") {
                    that.article = val.id; //保存新闻id
                    uni.request({
                        url: that.$store.state.piAPI + '/comment/comment/page',
                        method: 'GET',
                        data: {
                            article: val.id,
                            current: 1,
                            size: 99999,
                        },
                        success: (res) => {
                            var data = res.data.data.records;
                            that.dataList = [];
                            if (data.length == 0) {
                                that.comment = "暂无评论";
                            } else {
                                that.comment = "评论";
                                for (var i = 0; i < data.length; i++) {
                                    that.dataList.push({
                                        name: data[i].name,
                                        time: data[i].time,
                                        message: data[i].content,
                                        reply: ''
                                    });
                                }
                            }
                        }
                    });
                }

                this.flag = true
                this.canHide = false
                let content = this.$refs.content;
                animation.transition(content, {
                    styles: {transform: `translate(0px, 0px)`,},
                    styles: {
                        transform: `translate(0px, 0px)`,
                    },
                    duration: 200, //ms
                    timingFunction: 'ease-in-out',
                    delay: 0 //ms
                },()=>{
                }, () => {
                    this.canHide = true
                })
            },
            hide() {
                if(!this.canHide) return
            hide() {
                if (!this.canHide) return
                let content = this.$refs.content;
                animation.transition(content, {
                    styles: {transform: `translate(0px, 1000rpx)`,},
                    styles: {
                        transform: `translate(0px, 1000rpx)`,
                    },
                    duration: 200, //ms
                    timingFunction: 'ease-in-out',
                    delay: 0 //ms
                },()=>{
                }, () => {
                    uni.getSubNVueById('comment').hide()
                })
            },
            showInput(){
                uni.getSubNVueById('input-box').show('none',0,()=>{
            showInput() {
                uni.getSubNVueById('input-box').show('none', 0, () => {
                    this.flag = false
                    uni.$emit('showInput')
                    uni.$emit('showInput', "2222")
                });
            }
        }
    }
        }
    }
</script>

<style  lang="scss" scoped>
<style lang="scss" scoped>
    /* #ifndef APP-PLUS-NVUE */
    @font-face {
        font-family: "iconfont";
        src: url('~@/static/subnvue/iconfont.ttf') format('truetype');
    }

    /* #endif*/
    .iconfont{
    .iconfont {
        font-family: "iconfont";
        font-family: iconfont;
        font-size: 16px;
    }
    .color-gray{

    .color-gray {
        color: #515352;
        font-size: 14px;
    }
    .color-grey{

    .color-grey {
        color: #A8ACAF;
        font-size: 12px;
    }
    .color-bule{

    .color-bule {
        color: #55ADDF;
		

    }
    .margin-right{

    .margin-right {
        margin-right: 20rpx;
    }
	
	


    .subnvue {
        flex-direction: column;
        flex: 1;
        background-color: transparent;
        position: relative;
    }
    .mask{

    .mask {
        flex-direction: column;
        background-color:#000 ;
        background-color: #000;
        opacity: 0.4;
        flex: 1;
    }
    .content{

    .content {
        position: absolute;
        background-color: #fff;
        width: 750rpx;
@@ -189,36 +264,41 @@
        transform: translateY(1000rpx);
        flex-direction: column;
        justify-content: space-between;
        border-top-left-radius:30rpx;
        border-top-right-radius:30rpx; 
        border-top-left-radius: 30rpx;
        border-top-right-radius: 30rpx;
    }
    .top{

    .top {
        padding: 20rpx;
        flex-direction: row;
        justify-content: space-between;
    }
    .size-14{

    .size-14 {
        font-size: 14px;
    }
    .title{

    .title {
        flex: 1;
        align-items: center;
    }
    .hideBtn{

    .hideBtn {
        padding: 10rpx;
        justify-content: center;
        align-items: center;
    }
	

    /* 底部输入框 */
    .bottom{
    .bottom {
        align-items: center;
        flex-direction: row;
        background-color: red;
        justify-content: space-between;
    }
    .input{
        box-shadow: 0 -1px 4px 1px rgba(0,0,0,0.1);

    .input {
        box-shadow: 0 -1px 4px 1px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        flex-direction: row;
        align-items: center;
@@ -227,66 +307,74 @@
        padding: 30rpx;
        background-color: #fff;
    }
    .bottomBtn{

    .bottomBtn {
        padding: 5rpx 15rpx;
        border-radius:10rpx;
        border-radius: 10rpx;
        margin-left: 30rpx;
    }
    .bottom-text{

    .bottom-text {
        color: #fff;
    }
	

    /* 评论滚动区 */
    .srcoll-view{
    .srcoll-view {
        flex: 1;
    }
    .card{

    .card {
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        padding: 30rpx;
    }
	
    .card-left{

    .card-left {
        flex-direction: row;
    }
	

    /* 中 */
    .card-content{
    .card-content {
        flex: 1;
		

    }
    .card-image{

    .card-image {
        height: 70rpx;
        width: 70rpx;
        border-radius: 50%;
        margin-right: 35rpx;
    }
    .card-top{

    .card-top {
        height: 80rpx;
        justify-content: space-between;
    }
    .card-message{
		

    .card-message {

        padding: 20rpx 0;
        flex-direction: row;
        width: 600rpx;
		

    }
    .card-text{

    .card-text {
        flex: 1;
    }


    /* 右 */
    .card-right{
    .card-right {
        position: absolute;
        right:30rpx;
        top:30rpx;
        right: 30rpx;
        top: 30rpx;
        flex-direction: row;
		

    }
    .card-icon{

    .card-icon {
        margin-left: 40rpx;
        margin-right: 20rpx;
    }

 pages/subnvue/input-box.nvue

@@ -33,8 +33,9 @@
                    if(e.platform=='ios') this.space = -50
                }
            })
            uni.$on('showInput', () => {
            uni.$on('showInput', (e) => {
                this.flag = true
                console.log(e)
                this.$nextTick(()=>{
                    this.$refs.input.focus()
                })

 static/collect.png

 static/collectred.png

 static/myself/souc.png

 store/state.js

@@ -6,7 +6,7 @@
    logPath: '',
    piAPI: 'http://223.82.109.183:2082/api/',
    //piAPI: 'http://s16s652780.51mypc.cn/api/',
    // piAPI: 'http://localhost:83/',
    //piAPI: 'http://192.168.0.113:83/',
    //piAPI: 'http://192.168.0.111:83/',
    puserName: '',
    puserID: '',