JiangNingUmale-h5/subEnterprise/activity/activitydetails.vue

<template>
	<view class="app-container"> class="app-container"
		<u-navbar leftText="返回" title="活动详情" :autoBack="true" :placeholder="true" />
		<view class="list-item active view-global">
			<view class="item-cell">
				<view class="cell-lable">活动名称：</view>
				<view class="cell-value">{{ data.activeName || "-"}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">活动时间：</view>
				<view class="cell-value">{{ data.activeStart || "-"}}至{{data.activeEnd || "-"}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">活动内容：</view>
				<view class="cell-value">{{ data.activeContent  || '-'}}</view>
			</view>
			<view class="item-cell" style="align-items: flex-start">
				<view class="cell-lable">活动地点：</view>
				<view class="cell-value">{{data.activePoint || '-'}}</view>
			</view>
			<view class="item-cell" style="align-items: flex-start">
				<view class="cell-lable">附件：</view>
				<view class="cell-value">{{ data.joinRequire  || '-'}}</view>
			</view>
			<view class="item-cell" style="align-items: flex-start">
				<view class="cell-lable">审核结果：</view>
				<view class="cell-value">{{data.activeState | activeState}}</view>
			</view>
			<view class="item-cell" style="align-items: flex-start">
				<view class="cell-lable">审核意见：</view>
				<view class="cell-value">{{ data.opinion   || '-'}}</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	export default {
		onLoad(opiect) {
			this.data = JSON.parse(opiect.item)
		},
		data() {
			return {
				data: {}
			}
		},

		methods: {

			// 预览文件
			previewAll(res) {


			}
		},
		filters: {
			activeState: function(value) {
				// console.log(value);
				switch (value) {
					case "1":
						return "审核中";
					case "2":
						return "审核通过";
					case "3":
						return "审核驳回";
					case " 4":
						return "已终止";
					case "5":
						return "已结束";
					default:
						return "";
				}
			},
		},

	}
</script>

<style lang="scss" scoped>
	.app-container {
		.list-item {
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 25rpx;
			margin-bottom: 30rpx;

			.item-cell {
				display: flex;
				align-items: center;

				.cell-lable {
					width: 200rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #9da2ab;
				}

				.cell-value {
					width: 500rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #2e2f31;
					white-space: nowrap;
					/* 防止内容换行 */
					overflow: hidden;
					/* 隐藏超出内容 */
					text-overflow: ellipsis;
					/* 显示省略号 */
				}
			}

			.cell-btn {
				display: flex;
				flex-direction: row-reverse;
			}

			&>view:not(.cell-btn) {
				margin-bottom: 20rpx;
			}
		}

		&>.list-item:last-child {
			margin-bottom: 0;
		}
	}
</style>