bocai_supplyChain_uni/pages/message/index.vue

<template>
	<view>
		<view class="m-search flex_center g_bg_f g_pl_10 g_pr_10">
			<view class="g_flex_row_between g_mb_10" v-if="false">
				<u-search bar-width="0" class="g_flex_1" @btnSearch="getSearch" height="40" v-model="keyword" :placeholder="placeholder" bg-color="#f5f5f5" :show-action="false" @change="getSearch" @clear="getSearch" @custom="getSearch" @search="getSearch" search-icon-color="#999999" :maxlength="20"></u-search>
			</view>
			<u-tabs bg-color="transparent" from="index" :list="tabInfo.list" :is-scroll="false" :current="tabInfo.active" :active-color="appid != 'wxb0c590fd696b79be' ? '#3578f6' : '#ff4400'" bar-width="128" bar-height="6" @change="handleUpdateTab" font-size="34" duration="0.05" height="76"></u-tabs>
		</view>
		<view class="container">
			<view class="" v-if="tabInfo.list[tabInfo.active].classify == -2" hover-class="none" hover-stop-propagation="false">
				11
			</view>
			<!-- <view class="" v-else-if="tabInfo.list[tabInfo.active].classify == -1" hover-class="none" hover-stop-propagation="false">
				<chatPanel type='demo' />
			</view> -->

			<!-- 消息列表 -->
			<view class="" v-else-if="tabInfo.list[tabInfo.active].classify == 2" hover-class="none" hover-stop-propagation="false">
				<view class="g_mb_10 g_radius_8" style="padding: 20px 10px; background-color: #fff" hover-class="thover" :hover-stop-propagation="false" @click="goDetail" :data-id="item.id" data-type="info" v-for="(item, index) in infoList" :key="index">
					<view class="g_fs_16 g_mb_12 g_flex_row_between" style="line-height: 16px">
						<view class="g_flex_row_start flex_center g_fs_18 g_fw_600" hover-class="none" :hover-stop-propagation="false">
							<i v-if="item.readed == 0" class="g_mr_4" style="display: inline-block; width: 8px; height: 8px; background: #f5222d; border-radius: 50%"></i>
							{{ item.title }}
						</view>
						<view class="g_fw_400 g_fs_12 g_c_9" hover-class="none" :hover-stop-propagation="false">{{ item.pubTime || "-" }}</view>
					</view>

					<view class="g_fs_14 g_c_9 g_ell_1" style="width: 100%">{{ item.remark || "[图片]" }}</view>
				</view>
			</view>
			<view class="" v-else-if="tabInfo.list[tabInfo.active].classify == 3" hover-class="none" hover-stop-propagation="false" style="padding-top: 260rpx;">
				<g-empty text="暂无通知" ></g-empty>
			</view>
			<!-- <view class="" hover-class="none" hover-stop-propagation="false">
			<view class="" v-else-if="tabInfo.active == 2" hover-class="none" hover-stop-propagation="false">
				<view class="" style="margin-top: 120px" hover-class="none" hover-stop-propagation="false"> </view>
				<g-empty text="暂无通知"></g-empty>
			</view> -->
			<view class v-if="infoList.length <= 0" style="text-align: center; margin-top: 120px" 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="g_flex_column_center g_fs_14 g_c_045">暂无消息</view> -->
				<g-empty text="暂无消息"></g-empty>
			</view>
		</view>
	</view>
</template>

<script>
// pages/message/index.js
const app = getApp();
import dateUtil from "../../utils/dateUtil";
// import chatPanel from "./child/index.vue";
export default {
	components: {
		// chatPanel,
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			keys: "",
			placeholder: "请输入关键字",
			isLogin: uni.getStorageSync("apply-token") ? true : false,
			infoList: [],
			agencyId: uni.getStorageSync("apply-agencyId"),
			tabInfo: {
				list: [
					{
						name: "站内消息",
						classify: 2,
					},
					{
						name: "职位通知",
						classify: 3,
					},
				],
				active: 0,
			},
			appid: uni.getAccountInfoSync().miniProgram.appId,
		};
	},
	onReady() {
		let that = this;
		if (uni.getAccountInfoSync().miniProgram.appId == "wxe431e0b3abd9ae0b") {
			that.tabInfo.list = [
				{
					name: "对话",
					classify: -2,
				},
				// {
				// 	name: "脚本",
				// 	classify: -1,
				// },
				{
					name: "站内消息",
					classify: 2,
				},
				{
					name: "职位通知",
					classify: 3,
				},
			];
		} else {
			that.tabInfo.list = [
				{
					name: "站内消息",
					classify: 2,
				},
				{
					name: "职位通知",
					classify: 3,
				},
			];
		}
		that.getInfoList();
	},
	onShow() {
		let that = this;
		if (typeof that.$mp.page.getTabBar === "function" && that.$mp.page.getTabBar()) {
			that.$mp.page.getTabBar().setData({
				selected: 1,
				isShow: true,
			});
		}
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {},
	methods: {
		getSearch(e) {
			console.log(e);
			this.keys = e;
			this.getInfoList();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage1() {},

		getInfoList() {
			let that = this;
			that.G.Post(
				that.api.message_list,
				{
					pageSize: 100,
					pageNum: 1,
					keys: that.keys || "",
					agencyId: that.agencyId,
					status: 10,
					category: that.tabInfo.active == 1 ? 100 : "",
				},
				(res) => {
					res.pageBean.recordList.forEach((item) => {
						item["pubTime"] = dateUtil.timeShow(item.publishTime);
						console.log(item);
					});
					that.infoList = res.pageBean.recordList;
				}
			);
		},

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

		goDetail(e) {
			console.log(e);
			uni.navigateTo({
				url: "/root/detail/message?id=" + e.currentTarget.dataset.id,
			});
		},
		handleUpdateTab(e) {
			console.log(e);
			this.tabInfo.active = e;
			this.getInfoList();
		},
	},
};
</script>
<style scoped lang="less">
/* pages/message/index.wxss */
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}
.container {
	padding: 10px;
}
.contact {
	width: 80%;
	height: 350px;
}
.contact .weui-dialog__hd {
	margin-top: 40px;
	padding: 0;
	position: relative;
}
.contact .contact_bottomBtn .v-center {
	width: 80px !important;
}
.contact .contact_bottomBtn .rflex button {
	padding: 0;
	width: 100%;
}
.guanbi {
	position: absolute;
	right: 16px;
	top: -28px;
}
.mb32 {
	margin-bottom: 32px;
}
</style>