diancan_uni/pages/feedback/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <scroll-view :scroll-y="true" :style="'height: ' + scrollH + 'px'" :scroll-into-view="toView" scroll-with-animation @scrolltoupper="bindUpper">
            <view class="wrap_nr">
                <view class="tips">您好，在线客服很高兴为您服务</view>
                <view class="section_w" :id="'item' + item.id" v-for="(item, index) in dataList" :key="index">
                    <view class="sec_time" v-if="index == 0">{{ item.created_at }}</view>

                    <view class="section from_user" v-if="item.type == 1">
                        <view class="item">
                            <view class="item_wenzi">{{ item.content }}</view>
                            <image class="icon" :src="userThumb"></image>
                        </view>
                    </view>

                    <view class="section from_plat" v-if="item.type == 2">
                        <view class="item">
                            <image class="icon" :src="kfThumb"></image>
                            <view class="item_wenzi">{{ item.content }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- <view class="tips">您好，在线客服很高兴为您服务</view>
<view id="scrollView" style="height:{{ scrollH }}px;">
	<view class="section_w" wx:for="{{ dataList }}" wx:key="index">
		<view class="sec_time" wx:if="{{ index == 0 }}">{{ item.created_at }}</view>
		<view class="section from_user" wx:if="{{ item.type == 1 }}">
			<view class="item">
				<view class="item_wenzi">{{ item.content }}</view>
				<image class="icon" src="{{ userThumb }}"></image>
			</view>
		</view>
		<view class="section from_plat" wx:if="{{ item.type == 2 }}">
			<view class="item">
				<image class="icon" src="{{ kfThumb }}"></image>
				<view class="item_wenzi">{{ item.content }}</view>
			</view>
		</view>
	</view>
</view> -->
        <view class="wrap_pub" :style="'bottom:' + keybordH + 'px'">
            <view class="pub_l">
                <van-field :value="content" placeholder="" @input="getContent" />
                <!-- bind:input="getContent" -->
                <!-- adjust-position="{{ false }}" -->
                <!-- bind:focus="bindFocus" -->
                <!-- bind:blur= "bindBlur" -->
            </view>
            <image class="icon_send" src="/static/statics/img/icon_send.png" @tap="bindSendContent"></image>
        </view>
        <!-- loading -->
        <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
    </view>
</template>

<script>
// index.js
let myPro = require('../../utils/wxRequest.js');

let util = require('../../utils/util.js');

export default {
    data() {
        return {
            page: 1,
            size: 10,
            dataList: [],
            loading: false,
            finished: false,
            content: '',
            userThumb: '',

            // 用户头像
            kfThumb: '',

            // 客服头像
            latestId: '',

            // 最新的一条
            openToView: true,

            toView: '',
            scrollH: '',
            initScrollH: '',
            init: false,
            keybordH: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;
        that.setData({
            userThumb: getApp().globalData.userInfo.thumb,
            kfThumb: getApp().globalData.logoTu
        }); // console.log("用户头像",getApp().globalData.userInfo.thumb)
    },
    onShow: function () {
        // Do something when page show.
        let that = this; // 滚动区域高度计算

        uni.getSystemInfo({
            success: function (res) {
                let height = res.windowHeight; // that.setData({
                // 	scrollH: height + 160,
                // });

                console.log('总height', height);
                const query = uni.createSelectorQuery(); // query.select('.tips').boundingClientRect();

                query.select('.wrap_pub').boundingClientRect();
                query.exec((res) => {
                    // 分别取出节点的高度
                    let tipsH = res[0].height; // 发布框的高度 px

                    let pubH = res[0].height; // 发布框的高度 px

                    let scrollH = height - pubH;
                    that.setData({
                        scrollH: scrollH,
                        initScrollH: scrollH
                    }); // wx.pageScrollTo({
                    // 	scrollTop: scrollH,
                    // 	duration: 100
                    // })

                    console.log('setBgHeight', getApp().globalData.setBgHeight); // console.log('pubH',pubH)

                    console.log('scrollH', scrollH);
                });
            }
        }); // 验证登录

        getApp().globalData.verifyLogin(function (loginStatus) {
            if (loginStatus) {
                that.setData({
                    page: 1,
                    openToView: true,
                    dataList: [],
                    init: true,
                    finished: false
                });
                that.getDataList();
            }
        });
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
        // let that = this;
        // that.getDataList();
        // //停止当前页面下拉刷新
        // wx.stopPullDownRefresh();
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取数据列表
        getDataList() {
            let that = this;
            let params = {
                page: that.page,
                size: that.size
            };
            myPro
                .wxRequest('user/v2/suggestionList', 'GET', params)
                .then((res) => {
                    let list = res.result;

                    if (list.length != 0) {
                        if (that.page == 1) {
                            that.setData({
                                dataList: list,
                                page: that.page + 1,
                                init: false
                            });
                            console.log('openToView', that.openToView);
                            setTimeout(function () {
                                if (that.openToView) {
                                    that.setData({
                                        toView: 'item' + list[list.length - 1].id
                                    });
                                }
                            }, 100);
                        } else {
                            list = list.concat(that.dataList);
                            that.setData({
                                dataList: list,
                                page: that.page + 1,
                                init: false
                            });
                        }
                    } else {
                        uni.showToast({
                            title: '暂无更多数据',
                            icon: 'none'
                        });
                    }
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 获取输入内容
        getContent(event) {
            let that = this;
            that.setData({
                content: event.detail
            });
        },

        // 实现得不好, 还是使用自带的
        // 聚焦
        bindFocus(event) {
            let that = this; // console.log('focus',event);

            that.setData({
                content: event.detail.value,
                keybordH: event.detail.height,
                // 键盘高度
                scrollH: that.scrollH - event.detail.height
            });
        },

        // 失去焦点
        bindBlur(event) {
            let that = this;
            that.setData({
                content: event.detail.value,
                keybordH: 0,
                // 键盘高度
                scrollH: that.initScrollH
            });
        },

        // 发布消息
        bindSendContent() {
            let that = this;

            if (!that.content) {
                uni.showToast({
                    title: '请输入内容',
                    icon: 'none'
                });
                return;
            }

            let params = {
                content: that.content
            };
            myPro
                .wxRequest('user/v2/suggestionApply', 'POST', params)
                .then((res) => {
                    that.setData({
                        content: '',
                        init: true
                    });
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    }); // 重新拉取

                    that.setData({
                        page: 1,
                        dataList: [],
                        openToView: true,
                        finished: false
                    });
                    that.getDataList();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 滚动到顶部
        bindUpper() {
            let that = this; // console.log('触发了吗=====')

            if (!that.init) {
                that.setData({
                    openToView: false
                });
                that.getDataList();
            }
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap_nr {
    padding-bottom: 48rpx;
}
.tips {
    width: 444rpx;
    height: 58rpx;
    margin: 20rpx auto 0;
    background: #f3f4f9;
    border-radius: 29rpx;
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.54);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec_time {
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.54);
    text-align: center;
    margin-top: 40rpx;
}
.section {
    padding: 0 30rpx;
}
.section .item {
    display: flex;
    /* align-items: center; */
    margin-top: 48rpx;
}
/* .latest{
	margin-bottom: 48rpx;
} */
.section .item .icon {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
}
.section .item .item_wenzi {
    max-width: 427rpx;
    padding: 30rpx;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.87);
    margin-left: 12rpx;
    background: #d54c43;
    border-radius: 0 15rpx 15rpx 15rpx;
}
.section.from_user .item {
    justify-content: flex-end;
}
.section.from_user .item .item_wenzi {
    background: #f3f4f9;
    border-radius: 15rpx 0rpx 15rpx 15rpx;
    margin-left: 0rpx;
    margin-right: 18rpx;
    color: rgba(0, 0, 0, 0.87);
}
.wrap_pub {
    width: 100%;
    padding: 0 30rpx 0;
    height: 160rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wrap_pub .pub_l {
    width: 617rpx;
    border-radius: 35rpx;
}
.wrap_pub .icon_send {
    width: 42rpx;
    height: 42rpx;
}
.wrap_pub .van-cell {
    border-radius: 35rpx;
    height: 70rpx;
    padding: 0 20rpx !important;
}
.wrap_pub .van-field__body {
    height: 100%;
}
</style>