web-africa-h5/pages/notice/index.vue

<template>
	<view>
		<view class="top-tabbar">
			<view :class="state_active == 1 ? 'tab-item active' : 'tab-item'" @click="stateFunc(1)">{{$t("ENU_NOTICE_FUNCTION_TYPE_1")}}</view>
			<!-- <view :class="state_active == 2 ? 'tab-item active' : 'tab-item'" @click="stateFunc(2)">{{$t("ENU_NOTICE_FUNCTION_TYPE_2")}}</view> -->
			<view :class="state_active == 3 ? 'tab-item active' : 'tab-item'" @click="stateFunc(3)">{{$t("MN_F_T_84")}}</view>
		</view>
		<view class="notice-list" v-if="state_active != 3">
			<view class="notice-item" v-for="(item, index) in listData" :key="index">
				<view class="notice-item-top d-b-c">
					<image class="notice-icon" src="/static/icon/notice/notice04.png" mode=""></image>
					<view class="flex-1 f26 gray3">{{ type_name }}</view>
					<view class="f22 gray9">{{ item.creationTime }}</view>
				</view>
				<view class="notice-item-bottom">
					<view class="f28 gray3 mb16">{{ item.title }}</view>
					<u-parse :content="item.content"></u-parse>
					<!-- <view class="f24 gray6 text-ellipsis-2 full-text" style="word-break: break-all;" v-html="item.content"></view> -->
					<!-- 	<view class="f22 gray9 mt20">
							查看详情
							<text class="icon iconfont icon-jiantou"></text>
						</view> -->
				</view>
			</view>
		</view>
		<view class="comment-list" v-if="state_active == 3">
			<view class="item pr" v-for="(item, index) in listData" :key="index">
				<text class="typeVal" :class="'typeVal_'+item.type">{{item.typeVal}}</text>
				<view class="left">
					<image class="photo" :src="item.headPath || defaultImg" mode="aspectFill"></image>
				</view>
				<view class="flex-1">
					<view class="cmt-user">
						<view class="mb20 f26 gray3">{{ item.idea }} </view>
						<text class="f22 gray9" style="white-space: nowrap;">{{ item.creationTime }}</text>
					</view>
					<view class="border-t" v-if="item.feedbackReplyList.length > 0">
						<view class="pt20" v-for="(pitem, pindex) in item.feedbackReplyList" :key="pindex">
							<view class="system-name">{{$t("N_I_269")}}:</view>
							<view class="f22 mb20"><u-parse :content="pitem.replyContent"></u-parse></view>
							<view class="f22 gray9">{{ pitem.creationTime }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">{{$t('w_0405')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					functionType: 1,
					isShowDay: 2
				},
				listData: [],
				/*状态选中*/
				state_active: 1,
				type_name: this.$t("ENU_NOTICE_FUNCTION_TYPE_1"),
				defaultImg:''
			};
		},
		onLoad(e) {
			this.getData();
			this.getUserInfoData();
			this.getCartNum();
		},
		methods: {
			// 获取用户信息
			getUserInfoData() {
				let self = this;
				self.loadding = true;
				self._get('member/api/member/get-info', {}, function(res) {
					if (res.code == 200) {
						self.defaultImg = res.data.countryCircularIcon;
					}
					self.loadding = false;
					uni.hideLoading();
				});
			},
			getCartNum() {
				let self = this;
				self._get('sale/api/shopping/getShoppingCount', {
					specialArea: '',
					pkCountry: ''
				}, res => {
					uni.setTabBarBadge({
						index: 2,
						text: res.data.cont + ''
					})
				})
			},
			/*状态切换*/
			stateFunc(e) {
				let self = this;
				if (self.state_active != e) {
					/*获取数据*/
					this.listData = [];
					if (e == 1) {
						self.type_name = self.$t("ENU_NOTICE_FUNCTION_TYPE_1");
					} else if (e == 2) {
						self.type_name = self.$t("ENU_NOTICE_FUNCTION_TYPE_2");
					} else {
						self.type_name = self.$t("MN_F_T_84");
					}
					self.loading = true;
					self.state_active = e;
					self.form.functionType = e;
					self.getData();
				}
			},
			getData() {
				// return;
				let self = this;
				self.loading = true;
				var formdata = self.form;
				let url = 'system/api/notice/index-list';
				if (self.state_active == 3) {
					url = 'system/api/feedback/index-list';
					formdata = {};
				}
				self._get(url, formdata, function(res) {
					self.loading = false;
					self.listData = self.listData.concat(res.rows);

					self.total = res.total;
					if (self.total < self.form.pageNum * self.form.pageSize) {
						self.no_more = true;
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.tab-item.active {
		font-weight: 400;
	}

	.typeVal {
		min-width: 141rpx;
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		position: absolute;
		left: 0;
		top: 22rpx;
		z-index: 1;
		height: 49rpx;
		line-height: 49rpx;
		border-radius:0 25rpx 25rpx 0;
		padding: 0 12rpx;
		font-size: 22rpx;
	}
	.typeVal_1 {
		background: #1AA90E;
	}
	.typeVal_2 {
		background: #FB3024;
	}
	
	.typeVal_3 {
		background: #fda521;
	}

	.typeVal_4 {
		background: #1b8ddf;
	}

	.notice-list {
		padding: 30rpx 24rpx 60rpx 23rpx;
	}

	.notice-item {
		width: 702rpx;
		// height: 286rpx;
		background: #ffffff;
		box-shadow: 0rpx 5rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 15rpx;
		margin-bottom: 24rpx;
	}

	.notice-item-top {
		padding: 39rpx 28rpx 13rpx 18rpx;
	}

	.notice-item-bottom {
		padding: 0 30rpx 38rpx 74rpx;
	}

	.notice-icon {
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
		display: block;
		margin-right: 12rpx;
		box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
	}

	.icon.icon-jiantou {
		font-size: 26rpx;
		color: #999;
	}

	.comment-list {
		padding-top: 24rpx;
	}

	.comment-list .item {
		padding: 87rpx 18rpx 50rpx 18rpx;
		background: #fff;
		margin-bottom: 26rpx;
		box-shadow: 0px 5rpx 5rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		border: none;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.comment-list .cmt-user {
		display: block;
		padding-bottom: 30rpx;
		border: none;
	}

	.comment-list .photo {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.comment-list .cmt-user .name {
		font-size: 24rpx;
	}

	.comment-list .cmt-user .datetime {
		font-size: 24rpx;
		color: #cccccc;
	}

	.system-name {
		font-size: 26rpx;
		color: #5d6989;
		margin-bottom: 23rpx;
	}

	.full-text {
		p {
			color: red;
		}

		img {
			width: 100%;
		}
	}
</style>