yunxinwei-uniapp/package/deliver/notice/index.vue

<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption"
			@up="upCallback">

			<!-- tab栏 -->
			<u-tabs :list="tabList" :is-scroll="false" :current="curTab" active-color="#0f80ff" :duration="0.2"
				@change="onChangeTab" />

			<!-- 列表数据 -->
			<view class="widget-list">
				<view class="widget__detail dis-flex flex-x-between" v-for="(item, index) in list.data" :key="index">
					<view class="detail__left dis-flex flex-dir-column flex-x-around">
						<view class="detail__money f-30" @click="onRead(item.id, item.content)">
							<u-avatar size="mini" mode="circle" v-if="item.sendUser" :src="item.sendUser.avatar_url">
							</u-avatar>
							<view class="content">
								<text>{{ item.content }}</text>
								<u-badge :is-dot="true" :offset="[0,0]" type="error" v-if="item.status == 0"></u-badge>
							</view>
						</view>
						<view class="detail__time col-9 f-24">{{ item.create_time }}</view>
					</view>
					<view class="detail__right dis-flex flex-dir-column flex-x-center flex-y-center">
						<view class="detail__status f-28">
							<u-tag v-if="item.status == 0" type="error" text="未读"></u-tag>
							<u-tag v-if="item.status == 1" type="success" text="已读"></u-tag>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'
	import * as Api from '@/api/user/notice.js'
	import SettingModel from '@/common/model/dealer/Setting'
	import {
		ApplyStatusEnum
	} from '@/common/enum/dealer/withdraw'

	const pageSize = 15
	// 提现状态文字
	const ApplyStatusText = [0, 1]

	export default {
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin],
		data() {
			return {
				// 枚举类
				ApplyStatusEnum,
				ApplyStatusText,
				// 选项卡列表
				tabList: [],
				// 当前选项
				curTab: 0,
				// 列表数据
				list: getEmptyPaginateObj(),
				shopId: 0,
				showReasonMsg: false,
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于12条才显示无更多数据
					noMoreSize: 12,
					// 空布局
					empty: {
						tip: '亲，暂无未读消息'
					}
				}
				
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getSetting()
		},

		methods: {

			// 获取分销设置
			getSetting() {
				const app = this
				SettingModel.data()
					.then(setting => {
						const words = setting.words.withdraw_list
						app.setTabList(words.words)
					})
			},

			// 设置选项卡数据
			setTabList(words) {
				const app = this
				app.tabList = [
					{
						value: 0,
						name: '未读'
					},
					{
						value: 1,
						name: '已读'
					}
				]
			},

			triggerReasonMsg() {
				this.showReasonMsg = !this.showReasonMsg
			},

			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
				const app = this
				// 设置列表数据
				app.getList(page.num)
					.then(list => {
						const curPageLen = list.data.length
						const totalSize = list.data.total
						app.mescroll.endBySize(curPageLen, totalSize)
					})
					.catch(() => app.mescroll.endErr())
			},

			// 获取提现列表
			getList(pageNo = 1) {
				const app = this
				return new Promise((resolve, reject) => {
					Api.list({
							status: app.getTabValue(),
							page: pageNo
						})
						.then(result => {
							// 合并新数据
							const newList = result.data.list
							app.list.data = getMoreListData(newList, app.list, pageNo)
							resolve(newList)
						})
				})
			},

			// 获取当前标签项的值
			getTabValue() {
				const app = this
				if (app.tabList.length) {
					return app.tabList[app.curTab].value
				}
				return 0
			},

			// 切换标签项
			onChangeTab(index) {
				const app = this
				// 设置当前选中的标签
				app.curTab = index
				// 刷新订单列表
				app.onRefreshList()
			},

			// 刷新列表数据
			onRefreshList() {
				this.list = getEmptyPaginateObj()
				setTimeout(() => {
					this.mescroll.resetUpScroll()
				}, 120)
			},

			// 设为已读
			onRead(id, content) {
				const app = this
				uni.showModal({
				  title: '查看消息',
				  content,
				  showCancel: false,
				  success({ confirm }) {
				    Api.status({id}).then(res => {
						app.getList()
					})
				  }
				})
			},

		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	// 提现明细列表
	.widget-list {
		padding: 10rpx 20rpx 40rpx 20rpx;
		box-sizing: border-box;
	}

	.widget__detail {
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e7e7e7;
	}

	.widget__detail .detail__money {
		font-size: 30rpx;
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
	}

	.widget__detail .detail__reason {
		margin-top: 15rpx;
		color: #0f80ff;
	}

	.show-reason-msg {
		padding: 20rpx;
		line-height: 2rem;
		color: #ff0000;
	}

	.detail__left {
		.iconfont {
			margin-left: 30rpx;
			font-size: 24rpx;
		}

		.icon-weixin {
			color: #0eaf00;
		}

		.icon-alipay {
			color: #0f80ff;
		}
	}

	.detail__status {
		position: relative;
	}

	.detail__money {
		.content {
			position: relative;
		}
	}
	.modal-content{
		padding: 20rpx;
	}
</style>