wx2uni/pages/message/index.vue

<template>
    <view>
        <view class="container">
            <!-- wx:if="{{isLogin}}" -->
            <!-- <view class="servicebox br_8">
    <view class="serviceinfo display-flex pb16" hover-class="none">
      <view class="mr10">
        <image wx:if="{{serviceInfo.avatar}}" class="br_8" src="{{serviceInfo.avatar}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror bindload></image>
        <image wx:else class="br_8" src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/service.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror bindload></image>
      </view>
      <view class="servicenamebox">
        <view class="mb2 f18 fw500">客户经理</view>
        <view class="c3 f16">
          {{serviceInfo.userName}}
          <i class="mr4"></i>
          <p class="f14">{{serviceInfo.tel || '0371-6611 3723'}}</p>
        </view>
      </view>
    </view>
    <view class="display-flex bt1 serviceBottom" hover-class="none" hover-stop-propagation="false">
      <view class="display-flex br1 f14" bindtap="makePhoneCall" hover-class="thover">
        <view class hover-stop-propagation="false">
          <i class="iconfont icon-dianhua fw500 c6 mr4"></i>
          拨打电话
        </view>
        <i class="iconfont icon-gengduo11 c9 f12 mr10"></i>
      </view>
      <view class="display-flex pl16 f14" bindtap="showdialog" hover-class="thover">
        <view class hover-stop-propagation="false">
          <i class="iconfont icon-qiyeweixin fw500 c6 mr4"></i>
          加我微信
        </view>
        <i class="iconfont icon-gengduo11 c9 f12"></i>
      </view>
    </view>
  </view>-->
            <view class="servicebox br_8 fsa dn">
                <view class="serviceinfo display-flex" hover-class="none">
                    <view class="mr8">
                        <image v-if="serviceInfo.avatar" class="br_8" :src="serviceInfo.avatar" mode="aspectFit|aspectFill|widthFix" :lazy-load="false"></image>
                        <image
                            v-else
                            class="br_8"
                            src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/service.jpg"
                            mode="aspectFit|aspectFill|widthFix"
                            :lazy-load="false"
                        ></image>
                    </view>
                    <view class="servicenamebox">
                        <view class="mb2 f18 fw500">客户经理</view>
                        <view class="c3 f16">
                            {{ serviceInfo.userName }}
                            <i class="mr4"></i>
                            <p class="f14">{{ serviceInfo.tel || '0371-6611 3723' }}</p>
                        </view>
                    </view>
                </view>
                <view class hover-class="none" :hover-stop-propagation="false">
                    <i class="t-icon t-icon-dianhua6 mr10" @click="makePhoneCall" hover-class="thover" style="width: 40px; height: 40px"></i>
                    <i class="t-icon t-icon-qiyeweixin" @click="showdialog" hover-class="thover" style="width: 40px; height: 40px"></i>
                </view>
            </view>
            <view class="mt10 br_8 dn" style="padding: 20px 10px; background-color: #fff" hover-class="thover" :hover-stop-propagation="false" @tap="goDetail" data-type="wellcome">
                <view class="fw500 f16 mb12" style="line-height: 16px">
                    <i v-if="!messageClick" class="mr4 mb2" style="display: inline-block; width: 8px; height: 8px; background: #f5222d; border-radius: 50%"></i>
                    伯才稻田欢迎您
                </view>
                <view class="f14 c9 oelps" style="width: 100%">伯才稻田（以下简称”稻田“），是一个专门服务代理的平台。</view>
            </view>
            <!-- 消息列表 -->
            <view
                class="mt10 br_8"
                style="padding: 20px 10px; background-color: #fff"
                hover-class="thover"
                :hover-stop-propagation="false"
                @tap="goDetail"
                :data-id="item.id"
                data-type="info"
                v-for="(item, index) in infoList"
                :key="index"
            >
                <view class="fw500 f16 mb12 fsa" style="line-height: 16px">
                    <view class hover-class="none" :hover-stop-propagation="false">
                        <i v-if="item.readed == 0" class="mr4 mb2" style="display: inline-block; width: 8px; height: 8px; background: #f5222d; border-radius: 50%"></i>
                        {{ item.title }}
                    </view>
                    <view class="fw400" hover-class="none" :hover-stop-propagation="false">{{ item.pubTime }}</view>
                </view>

                <view class="f14 c9 oelps" style="width: 100%">{{ item.remark || '[图片]' }}</view>
            </view>
            <view class v-if="infoList.length <= 0" style="text-align: center" hover-class="none" :hover-stop-propagation="false">
                <view class="t-icon t-icon-zanwu" style="width: 80px; height: 80px; margin: 180px auto 20px"></view>
                <view class="tc f14 c045">暂无消息</view>
            </view>
        </view>
        <view aria-role="dialog" :aria-modal="true" class="fadeIn" @touchmove.stop.prevent="modalMove" v-if="iosDialog">
            <view class="weui-mask"></view>
            <view class="weui-dialog contact" style="box-sizing: border-box">
                <view class="weui-dialog__hd">
                    <!-- <strong class="weui-dialog__title">17639080029</strong></view> -->
                    <!-- <view class="weui-dialog__bd">
            <view>现在登录吗?</view>
      </view>-->
                    <!-- <image src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/service.jpg" style="width:56px;height:56px;"></image> -->
                    <!-- <image src="../../assets/Snipaste_2023-06-13_09-25-14.png" show-menu-by-longpress='{{true}}' style="width:56px;height:56px;"></image> -->
                    <i class="iconfont icon-guanbi guanbi c6 biggerSize" @click="closeDialog"></i>
                    <view class="f16 c3 fw500 mb32">加客户经理微信</view>
                    <view
                        v-if="isLoading"
                        class
                        style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"
                        hover-class="none"
                        :hover-stop-propagation="false"
                    >
                        <view aria-role="img" aria-label="加载中" style class="weui-primary-loading">
                            <view class="weui-primary-loading__dot"></view>
                        </view>
                        <view class hover-class="none" :hover-stop-propagation="false">加载中...</view>
                    </view>
                    <image :src="serviceInfo.qrCode" @load="imageLoad" :show-menu-by-longpress="true" style="width: 184px; height: 184px"></image>
                    <!-- <view class="f14 c9">人才经纪人</view> -->
                    <!-- <view class="mt20 f22 c3">{{pmdUserInfo.tel}}</view> -->
                    <view class="f14 c3 mt6">长按识别二维码</view>
                </view>
                <!-- <view class="display-flex contact_bottomBtn pb20" style="padding-top:20px;">
      <view class="flex-1 lflex v-center" bindtap="closeDialog" hover-class="thover">取消</view>
      <view class="rflex">
        <button class="" type="primary" hover-class="thover" bindtap="makePhoneCall">呼叫</button>
      </view>
    </view>-->
            </view>
        </view>
    </view>
</template>

<script>
// pages/message/index.js
const app = getApp();
import dateUtil from '../../utils/dateUtil';
export default {
    data() {
        return {
            isLogin: app.globalData.isLogin,

            serviceInfo: {
                avatar: '',
                tel: '',
                qrCode: ''
            },

            iosDialog: false,
            isLoading: true,
            messageClick: false,
            infoList: [],
            agencyId: app.globalData.agencyId,
            selected: 0,
            loading: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData({
            messageClick: uni.getStorageSync('messageClick' + app.globalData.loginUserInfo.id)
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        console.log(this.agencyId);
        // let serviceInfo =  wx.getStorageSync('ServiceInfo')
        this.getInfoList();
        console.log('messageTab' + typeof this.getTabBar);
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected: 1
            });
        }
        setTimeout(() => {
            this.setData({
                serviceInfo: app.globalData.serviceInfo,
                isLoading: true,
                messageClick: uni.getStorageSync('messageClick' + app.globalData.loginUserInfo.id)
            });
        }, 10);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
        this.setData({
            iosDialog: false
        });
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    methods: {
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage1() {},

        makePhoneCall() {
            console.log(1);
            var that = this;
            uni.makePhoneCall({
                // number: that.data.jobDetail.assistantUserTel + ""
                phoneNumber: that.serviceInfo.workPhone || '0371-6611 3723'
            });
        },

        showdialog() {
            this.setData({
                iosDialog: true,
                loading: true
            });
        },

        closeDialog() {
            this.setData({
                iosDialog: false
            });
        },

        imageLoad() {
            this.setData({
                isLoading: false
            });
        },

        getInfoList() {
            let that = this;
            uni.request({
                url: app.globalData.ip + '/yicai/bocai/cms/list',
                data: {
                    pageSize: 100,
                    pageNum: 1,
                    keys: '',
                    agencyId: that.agencyId,
                    status: 10
                },
                header: app.globalData.headers,
                method: 'post',
                success: function (res) {
                    console.log(res);
                    if (res.data.status == 200) {
                        res.data.data.pageBean.recordList.forEach((item) => {
                            item['pubTime'] = dateUtil.timeShow(item.publishTime);
                            console.log(item);
                        });
                        that.setData({
                            infoList: res.data.data.pageBean.recordList
                        });
                    }
                }
            });
        },

        /**
         * 阻止滑动穿透
         *
         *
         */
        modalMove() {
            return false;
        },

        goDetail(e) {
            console.log(e);
            if (e.currentTarget.dataset.type == 'wellcome') {
                uni.setStorageSync('messageClick' + app.globalData.loginUserInfo.id, true);
                uni.navigateTo({
                    url: '/pages/messageDetail/index?type=1'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/messageDetail/index?id=' + e.currentTarget.dataset.id
                });
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>