微信小程序增加查看消息

qingyiay

2023-04-12 1ef0e393913961c11ea05f868a537015572d7b7c

微信小程序增加查看消息

 api/globalApi.js

@@ -2,7 +2,7 @@
    // 绑定微信
    wxBind: {
        url: '/wrzs/social/bind',
        method: "POST"
        method: 'POST'
    },

    //    提煤单
@@ -27,8 +27,8 @@

    // 客户领取
    customerGet: {
        url: "/wrzs/wx/customerGet",
        method: "POST"
        url: '/wrzs/wx/customerGet',
        method: 'POST'
    },
    //    转发
    // forward: {
@@ -39,29 +39,29 @@
     * @description 转发修改
     */
    forward: {
        url: "/wrzs/userOperation/forwardList",
        method: "POST"
        url: '/wrzs/userOperation/forwardList',
        method: 'POST'
    },
    /**
     * @description 转发修改回显
     */
    forwardList: {
        url: "/wrzs/userOperation/forwardListData",
        method: "GET"
        url: '/wrzs/userOperation/forwardListData',
        method: 'GET'
    },
    /**
     * @description 删除一组转发
     */
    deleteForward: {
        url: "/wrzs/userOperation/deleteForward",
        method: "POST"
        url: '/wrzs/userOperation/deleteForward',
        method: 'POST'
    },
    /**
     * @description 获取历史提煤单
     */
    getJhOrderPlanDataPage: {
        url: '/wrzs/userOperation/getJhOrderPlanDataPage',
        method: "GET"
        method: 'GET'
    },
    // 货代首页列表
    // huoDaiList: {
@@ -72,8 +72,8 @@
     * @货代首页列表修改
     */
    huoDaiList: {
        url: "/wrzs/userOperation/huoDaiList    ",
        method: "GET"
        url: '/wrzs/userOperation/huoDaiList    ',
        method: 'GET'
    },

    //司机首页列表
@@ -85,8 +85,8 @@
     * @司机首页列表修改
     */
    qiangDanList: {
        url: "/wrzs/userOperation/qiangDanList",
        method: "GET"
        url: '/wrzs/userOperation/qiangDanList',
        method: 'GET'
    },

    //抢单
@@ -98,14 +98,14 @@
     * @抢单修改
     */
    qiangDan: {
        url: "/wrzs/userOperation/qiangDan",
        method: "POST"
        url: '/wrzs/userOperation/qiangDan',
        method: 'POST'
    },

    //取消抢单
    quXiaoQiangDan: {
        url: "/wrzs/wx/quXiaoQiangDan",
        method: "POST"
        url: '/wrzs/wx/quXiaoQiangDan',
        method: 'POST'
    },
    //预约列表
    // yuYueList: {
@@ -116,8 +116,8 @@
     * @预约列表修改
     */
    yuYueList: {
        url: "/wrzs/userOperation/yuYueList",
        method: "GET"
        url: '/wrzs/userOperation/yuYueList',
        method: 'GET'
    },

    //预约
@@ -129,8 +129,8 @@
     * @预约修改
     */
    yuYue: {
        url: "/wrzs/userOperation/yuYue",
        method: "POST"
        url: '/wrzs/userOperation/yuYue',
        method: 'POST'
    },

    //获取提煤单详情
@@ -142,8 +142,8 @@
     * @获取提煤单详情修改后
     */
    getTakeCoal: {
        url: "/wrzs/userOperation/getTakeCoal",
        method: "GET"
        url: '/wrzs/userOperation/getTakeCoal',
        method: 'GET'
    },

    //    用户
@@ -154,8 +154,8 @@
    },
    // 修改用户信息
    updateUser: {
        url: "/wrzs/wx/updateUser",
        method: "POST"
        url: '/wrzs/wx/updateUser',
        method: 'POST'
    },
    // 获取用户信息
    getUserById: {
@@ -164,56 +164,56 @@
    },
    //获取货代列表
    getAllHuoDaiByCustomerId: {
        url: "/wrzs/wx/getAllHuoDaiByCustomerId",
        method: "GET"
        url: '/wrzs/wx/getAllHuoDaiByCustomerId',
        method: 'GET'
    },
    //邀请货代
    bindHuoDai: {
        url: "/wrzs/wx/bindHuoDai",
        method: "POST"
        url: '/wrzs/wx/bindHuoDai',
        method: 'POST'
    },
    //删除货代
    deleteHuoDai: {
        url: "/wrzs/wx/deleteHuoDai",
        method: "POST"
        url: '/wrzs/wx/deleteHuoDai',
        method: 'POST'
    },
    //获取货代详情
    getHuoDaiDetail: {
        url: "/wrzs/wx/getHuoDaiDetail",
        method: "GET"
        url: '/wrzs/wx/getHuoDaiDetail',
        method: 'GET'
    },
    //获取司机列表
    GetUserFleet: {
        url: "/wrzs/wx/getUserFleet",
        method: "GET"
        url: '/wrzs/wx/getUserFleet',
        method: 'GET'
    },
    //邀请司机
    bindUserFleet: {
        url: "/wrzs/wx/bindUserFleet",
        method: "POST"
        url: '/wrzs/wx/bindUserFleet',
        method: 'POST'
    },
    //删除司机
    deleteSiJi: {
        url: "/wrzs/wx/deleteSiJi",
        method: "POST",
        url: '/wrzs/wx/deleteSiJi',
        method: 'POST',
    },


    //    车辆
    // 获取车队列表
    getFleet: {
        url: "/wrzs/wx/getFleet",
        method: "GET"
        url: '/wrzs/wx/getFleet',
        method: 'GET'
    },
    //新增车队
    saveFleet: {
        url: "/wrzs/wx/saveFleet",
        method: "POST"
        url: '/wrzs/wx/saveFleet',
        method: 'POST'
    },
    // 删除车队
    deleteFleet: {
        url: "/wrzs/wx/deleteFleet",
        method: "POST"
        url: '/wrzs/wx/deleteFleet',
        method: 'POST'
    },

    /**
@@ -228,17 +228,17 @@
     */
    // 新增
    saveRCSQ: {
        url: "/wrzs/tminapply/save",
        url: '/wrzs/tminapply/save',
        method: 'POST'
    },
    // 修改
    updateByIdRCSQ: {
        url: "/wrzs/tminapply/updateById",
        url: '/wrzs/tminapply/updateById',
        method: 'PUT'
    },
    // 查询
    pageRCSQ: {
        url: "/wrzs/tminapply/page",
        url: '/wrzs/tminapply/page',
        method: 'GET'
    },

@@ -246,14 +246,14 @@
     * @description 第一次放空
     */
    getOneEvacuation: {
        url: "/wrzs/userOperation/getOneEvacuation",
        url: '/wrzs/userOperation/getOneEvacuation',
        method: 'POST'
    },
    /**
     * @description 第二次放空
     */
    getTwoEvacuation: {
        url: "/wrzs/userOperation/getTwoEvacuation",
        url: '/wrzs/userOperation/getTwoEvacuation',
        method: 'POST'
    },
    /**
@@ -265,7 +265,7 @@
    },
    // 获取称重信息
    weighList: {
        url: "/wrzs/userOperation/weighList",
        url: '/wrzs/userOperation/weighList',
        method: 'GET'
    },
    // 加减煤
@@ -275,13 +275,13 @@
    },
    // 获取所在磅房
    getWeighHouse: {
        url: "/wrzs/jccoalweighhouse/getWeighHouse",
        url: '/wrzs/jccoalweighhouse/getWeighHouse',
        method: 'GET'
    },

    // 提煤单日志查询
    coalDayPage: {
        url: "/wrzs/tmtaskcoallog/getTmId",
        url: '/wrzs/tmtaskcoallog/getTmId',
        method: 'GET'
    },

@@ -289,5 +289,12 @@
    getCallOutList: {
        url: '/wrzs/callout/getCallOutList',
        method: 'GET'
    }
    },
    // 获取消息列表
    getMessageByUser: {
        url: '/wrzs/appMessage/getMessageByUser',
        method: 'GET'
    },
    readMessage: { url: '/wrzs/appMessage/readMessage' },
    delteMessage: { url: '/wrzs/appMessage/deleteMessage', method: 'GET' }
}

 api/index.js

@@ -1,60 +1,61 @@
import {
    fetch
} from '@/api/request.js';
import { fetch } from '@/api/request.js'

const typeObj = {
    headerGET: {
        "Content-type": 'application/x-www-from-urlencoded'
    },
    headerPOST: {
        "Content-type": 'application/x-www-from-urlencoded'
    },
    jsonPOST: {
        "Content-type": 'application/json'
    },
    utfPOSt: {
        'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
    headerGET: { 'Content-type': 'application/x-www-from-urlencoded' },
    headerPOST: { 'Content-type': 'application/x-www-from-urlencoded' },
    jsonPOST: { 'Content-type': 'application/json' },
    utfPOSt: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' }
}

// 通用接口请求
export const reqAll = (url, params, opt = {}) => {
    opt.data = params;
    opt.header = typeObj['headerPOST'];
    opt.data = params
    opt.header = typeObj['headerPOST']
    return fetch(url, opt)
}

export const reqAllJson = (url, params, opt = {}) => {
    opt.data = params
    opt.header = typeObj['jsonPOST']
    return fetch(url, opt)
}
// deltete请求
export const reqDelete = (url, params, opt = {}) => {
    opt.header = typeObj['jsonPOST']
    opt.method = 'DELETE'
    opt.data = params
    return fetch(url, opt)
}
// get请求
// urlParam是拼接路径的参数
export const reqGet = (url, params, opt = {}) => {
    opt.header = typeObj['headerGET'];
    opt.method = "GET";
    opt.data = params;
    opt.header = typeObj['headerGET']
    opt.method = 'GET'
    opt.data = params
    return fetch(url, opt)
}

// post请求
// urlType是指定拼接路径还是传json格式参数
export const reqPost = (url, params, urlType, opt = {}) => {
    opt.method = "POST";
    opt.method = 'POST'
    if (urlType == 'params') {
        Object.keys(params).map(item => {
            // 这里面不能用params.item，点运算符加标识符的形式取值，因为item是Object.keys生成的每一项键都是字符串，不是标识符，可以用[]的形式访问
            if (params[item] == null) {
                params[item] = '';
                params[item] = ''
            }
        })
        opt.params = params;
        opt.header = typeObj['headerPOST'];
        opt.params = params
        opt.header = typeObj['headerPOST']
    } else if (urlType == 'json') {
        opt.header = typeObj['jsonPOST'];
        opt.data = params;
        opt.header = typeObj['jsonPOST']
        opt.data = params
    } else if (urlType == 'utf8') {
        opt.header = typeObj['utfPOSt'];
        opt.data = params;
        opt.header = typeObj['utfPOSt']
        opt.data = params
    } else {
        opt.data = params;
        opt.header = typeObj['headerPOST'];
        opt.data = params
        opt.header = typeObj['headerPOST']
    }
    return fetch(url, opt, urlType)
}

 api/publicInterface.js

@@ -3,9 +3,9 @@


import { BaseUrl as wrBaseUrl } from '@/api/request.js'
const BaseUrl = 'http://192.168.31.14:9999'
// const BaseUrl = 'http://192.168.31.14:9999'
// const BaseUrl = "http://hesuancj.cn:9999"
// const BaseUrl = 'https://mx.jzeg.cn:9095'
const BaseUrl = 'https://mx.jzeg.cn:9095'
// const BaseUrl = 'http://192.168.31.18:9999'

// 登录

 api/request.js

@@ -81,14 +81,14 @@
// const BaseUrl = "http://192.168.31.18:9997"
// const webSocketUrl = "ws://192.168.31.18:9997/wrzs/ws/info"

const BaseUrl = "http://192.168.31.14:9997";
const webSocketUrl = "ws://192.168.31.14:9997/wrzs/ws/info"
// const BaseUrl = "http://192.168.31.14:9997";
// const webSocketUrl = "ws://192.168.31.14:9997/wrzs/ws/info"
// // 线上开发
// const BaseUrl = "http://hesuancj.cn:9997";
// const webSocketUrl = "ws://hesuancj.cn:9997/wrzs/ws/info"
// // 线上生产
// const BaseUrl = "https://mx.jzeg.cn:9095";
// const webSocketUrl = "wss://mx.jzeg.cn:9095/wrzs/ws/info"
const BaseUrl = "https://mx.jzeg.cn:9095";
const webSocketUrl = "wss://mx.jzeg.cn:9095/wrzs/ws/info"


// 请求拦截

 components/card/card.vue

@@ -4,10 +4,10 @@
        :style="{
            background:
                backgroundType == 0
                    ? 'url(https://hesuancj.cn:9095/appimg/image/background/customer-blue.png) no-repeat'
                    ? 'url(https://mx.jzeg.cn:9095/appimg/image/background/customer-blue.png) no-repeat'
                    : backgroundType == 1
                    ? 'url(https://hesuancj.cn:9095/appimg/image/background/huoDai.png) no-repeat'
                    : 'url(https://hesuancj.cn:9095/appimg/image/background/driver.png) no-repeat',
                    ? 'url(https://mx.jzeg.cn:9095/appimg/image/background/huoDai.png) no-repeat'
                    : 'url(https://mx.jzeg.cn:9095/appimg/image/background/driver.png) no-repeat',
            backgroundSize: '100% 100%'
        }"
    >

 main.js

@@ -6,7 +6,7 @@

App.mpType = 'app'
uni.$u.config.unit = 'rpx'
Vue.use('tab-bar', tabbar);
Vue.use('tab-bar', tabbar)

// 引入全局 uView 框架
import uView from '@/uni_modules/uview-ui'
@@ -20,12 +20,16 @@
import {
    reqAll,
    reqGet,
    reqPost
} from '@/api/index.js';
Vue.prototype.$reqAll = reqAll;
Vue.prototype.$reqGet = reqGet;
Vue.prototype.$reqPost = reqPost;
Vue.prototype.$store = store;
    reqPost,
    reqAllJson,
    reqDelete
} from '@/api/index.js'
Vue.prototype.$reqAll = reqAll
Vue.prototype.$reqAllJson = reqAllJson
Vue.prototype.$reqGet = reqGet
Vue.prototype.$reqPost = reqPost
Vue.prototype.$reqDelete = reqDelete
Vue.prototype.$store = store
// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
const app = new Vue({
    store,

 pages.json

@@ -186,7 +186,23 @@
                    "navigationBarTitleText": "转发",
                    "enablePullDownRefresh": false
                }
            }]
            }, {
                "path": "message/message",
                "style": {
                    "navigationBarTitleText": "消息",
                    "enablePullDownRefresh": true
                }

            }    ,{
                    "path" : "messageDetails/messageDetails",
                    "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": false
                }
                
                }
            ]
        }, {
            "root": "pages/driver-page/appointment",
            "pages": [{

 pages/customer-page/customer-index/customer-index.vue

@@ -10,7 +10,7 @@
                    </view>
                    <view class="card-left__utils">
                        <u-button @tap.stop="receiveClick(item)" text="领取" type="primary" v-if="item.carNum - item.cars2 != 0" shape="circle"></u-button>
                        <u-button text="转发" type="primary" @tap.stop="forwardClick(item)" shape="circle" v-if="item.carNumSurplus1 != 0"></u-button>
                        <u-button text="转发" type="primary" @tap.stop="forwardClick(item)" shape="circle"></u-button>
                    </view>
                </template>
                <template v-slot:right-top>
@@ -154,6 +154,7 @@
            this.loading = true;
            this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => {
                if (res.data.records) {
                    this.total = res.data.total;
                    if (this.pageCurrent > 1) {
                        this.historyCoalData = this.historyCoalData.concat(res.data.records);
                        this.loading = false;

 pages/public-page/message/message.vue

New file
@@ -0,0 +1,146 @@
<template>
    <view class="message-body">
        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="messageList.length == 0" width="400" height="400" textSize="18"></u-empty>
        <u-list @scrolltolower="scrolltolower" :height="1400">
            <u-list-item>
                <u-swipe-action>
                    <u-swipe-action-item :options="options1" v-for="(item, index) in messageList" :key="item.id" @click="deleteMsg(item, index)">
                        <u-badge :isDot="true" type="error" v-if="item.status === 0"></u-badge>
                        <u-cell size="large" :title="item.title" :label="item.content" @click="messageDetails(item, index)">
                            <view class="prepose" slot="icon"><u-icon name="file-text" color="#a299a0" size="80"></u-icon></view>
                        </u-cell>
                    </u-swipe-action-item>
                </u-swipe-action>
            </u-list-item>
            <view class="more-text" v-if="showMoreData && messageList.length !== 0">没有数据了...</view>
        </u-list>
        <u-modal :show="show" :content="content" :showCancelButton="true" @confirm="confirm" @cancel="cancel"></u-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            total: '',
            messageList: [],
            showMoreData: false,
            options1: [
                {
                    text: '删除'
                }
            ],
            show: false,
            content: '是否确认删除',
            id: '',
            index: ''
        };
    },
    onShow() {
        this.messageReq();
    },
    methods: {
        // 触底加载
        scrolltolower() {
            if (this.pageNum * this.pageSize >= this.total) return (this.showMoreData = true);
            this.pageNum++;
            this.messageReq();
        },
        // 获取消息列表
        messageReq() {
            uni.showLoading({
                title: '加载中'
            });
            this.$reqGet('getMessageByUser', { current: this.pageNum, size: this.pageSize }).then(res => {
                if (res.code == 0) {
                    uni.hideLoading();
                    this.total = res.data.total;
                    if (this.pageNum > 1) {
                        this.messageList = this.messageList.concat(res.data.records);
                    } else if (this.pageNum == 1) {
                        this.messageList = res.data.records;
                    }
                } else {
                    this.$u.toast('加载失败');
                }
            });
        },
        // 已读消息
        messageDetails(value, index) {
            if (value.status == 0) {
                this.$reqAllJson('readMessage', { id: value.id, status: value.status }, { method: 'PUT', 'Content-Type': 'application/json' }).then(res => {
                    if (res.code == 0) {
                        uni.navigateTo({
                            url: `/pages/public-page/messageDetails/messageDetails?index=${index}`
                        });
                        // uni.showLoading({
                        //     title: '加载中'
                        // });
                        // this.$reqGet('getMessageByUser', { current: 1, size: this.pageSize }).then(res => {
                        //     uni.hideLoading();
                        //     this.total = res.data.total;
                        //     this.messageList = res.data.records;
                        // });
                    }
                });
            } else {
                uni.navigateTo({
                    url: `/pages/public-page/messageDetails/messageDetails?index=${index}`
                });
            }
        },
        // 删除消息
        deleteMsg(value, index) {
            this.show = true;
            this.id = value.id;
        },
        // 确认删除
        confirm() {
            this.show = false;
            this.$reqGet('delteMessage', { id: this.id }).then(res => {
                if (res.code == 0) {
                    this.$u.toast('删除成功');
                    setTimeout(() => {
                        uni.showLoading({
                            title: '加载中'
                        });
                        this.$reqGet('getMessageByUser', { current: 1, size: this.pageSize }).then(res => {
                            uni.hideLoading();
                            this.total = res.data.total;
                            this.messageList = res.data.records;
                        });
                    }, 800);
                } else {
                    this.$u.toast('删除失败');
                }
            });
        },
        cancel() {
            this.show = false;
        }
    }
};
</script>

<style lang="scss">
::v-deep .u-list-item- {
    position: relative;
    .u-badge {
        position: absolute;
        right: vww(10);
        top: vww(10);
    }
}
.message-body {
    width: 100%;
    height: 100%;

    .more-text {
        color: #999;
        font-size: 24rpx;
        text-align: center;
    }
}
</style>

 pages/public-page/messageDetails/messageDetails.vue

New file
@@ -0,0 +1,55 @@
<template>
    <view>
        <combined-title title="消息详情"></combined-title>
        <view class="compDetails" v-for="(item, index) in detail" :key="index">
            <uni-table border stripe emptyText="暂无更多数据">
                <uni-tr>
                    <uni-th align="left">消息标题</uni-th>
                    <uni-td align="left">{{ item.title || '' }}</uni-td>
                </uni-tr>
                <uni-tr>
                    <uni-th align="left">消息内容</uni-th>
                    <uni-td align="left">{{ item.content || '' }}</uni-td>
                </uni-tr>
                <uni-tr>
                    <uni-th align="left">创建时间</uni-th>
                    <uni-td align="left">{{ item.createTime || '' }}</uni-td>
                </uni-tr>
            </uni-table>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            index: '',
            detail: []
        };
    },
    onLoad(v) {
        this.index = v.index;
    },
    onShow() {
        this.messageReq();
    },
    methods: {
        messageReq() {
            uni.showLoading({
                title: '加载中'
            });
            this.$reqGet('getMessageByUser', { current: 1, size: 10 }).then(res => {
                if (res.code == 0) {
                    uni.hideLoading();
                    this.detail = res.data.records.filter((v, i) => i == this.index);
                } else {
                    this.$u.toast('加载失败');
                }
            });
        }
    }
};
</script>

<style></style>

 pages/tabbar-page/index-tabbar/index-tabbar.vue

@@ -1,5 +1,8 @@
<template>
    <view>
        <view class="search-bar">
            <view class="icon-box" @click="messagePage"><u-icon name="chat" color="#000" size="50"></u-icon></view>
        </view>
        <customer-index v-if="roleType == 1" ref="customerIndexRef" :orderPlanDataStore="orderPlanDataStore"></customer-index>
        <freight-forwarder-index
            v-if="roleType == 2"
@@ -106,6 +109,11 @@
        this.userAuthorization();
    },
    methods: {
        messagePage() {
            uni.navigateTo({
                url: '/pages/public-page/message/message'
            });
        },
        init() {
            this.roleType = uni.getStorageSync('roleType');
            switch (this.roleType) {
@@ -172,4 +180,22 @@
};
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.search-bar {
    height: vww(20);
    width: 96%;
    margin: vww(3) auto;
    position: relative;
    .icon-box {
        width: vww(30);
        height: vww(30);
        background-color: #eee;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: vww(-3);
    }
}
</style>