dl_uniapp/pages/notice/detail.vue

<template>
	<view class="dl-detail-box">
		<navigation-bar-vue title="通告详情" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="notice-detail-last-box">
			<!-- 报名列表 -->
			<view class="info-box notice-detail" v-if="viewMy">
				<view class="detail-title">已报名：{{imageArray.length||0}}人</view>
				<view class="image-box" v-if="imageArray.length>0"
					:style="{height:(imageArray.length*(imageWidth+10)+20)+'rpx'}">
					<view class="image-row" v-for="(row,rowIndex) in imageArray">
						<image v-for="(item,i) in row"
							:style="{ top:(imageWidth+10)*rowIndex+'rpx',left:imageWidth*i+'rpx'}"
							src="@/static/images/profile.jpg" mode="aspectFit">
						</image>
					</view>
				</view>
				<!-- <view class="view-report-button" v-if="imageArray.length>0" @click="goReportList()">查看报名</view> -->
				<view class="view-report-button" @click="goReportList()">查看报名</view>
			</view>
			<!-- 博主信息 -->
			<view class="info-box">
				<image class="image" :src="userDetail.avatar?imageUrl+userDetail.avatar :'/static/images/profile.jpg'"
					mode="aspectFit"></image>
				<view class="name-info">
					<view class="name">{{userDetail.nickName||''}}</view>
					<view class="text">{{userDetail.identityType||''}}</view>
				</view>
				<view class="fork-info">
					<view class="up-box">
						<view class="item-dom-guanzhu" v-if="!isLove" @click="forkUser('1')">关注</view>
						<view class="item-dom-yiguanzhu" v-if="isLove" @click="forkUser('0')">已关注</view>
						<view class="item-dom-zhuye" @click="goMemberIndex()">主页</view>
					</view>
					<view class="down-box" @click="goReportForm()">
						<image src="@/static/detail/jubao.png" mode="aspectFit"></image>举报
					</view>
				</view>
			</view>
			<!-- 通告信息 -->
			<view class="info-box notice-main">
				<view class="dl-notice-title">
					<image class="dl-image" :src="'/static/platform/'+noticeDetail.platformCode+'.png'"
						mode="aspectFit"></image>
					<view class="dl-text">{{noticeDetail.title||''}}</view>
				</view>
				<view class="end-time">截止日期：{{noticeDetail.endDate||''}}</view>
				<view class="field-box">
					<view class="dl-item">
						<view class="dl-label">
							奖励：
						</view>
						<view class="dl-value">
							<text v-if="null==noticeDetail.feeUp">无稿费</text>
							<text v-else>¥{{noticeDetail.feeDown||'0'}}-{{noticeDetail.feeUp||''}}</text>
						</view>
					</view>
					<view class="dl-item">
						<view class="dl-label">
							招募名额：
						</view>
						<view class="dl-value">{{noticeDetail.needNum||'0'}}人 </view>
					</view>
					<view class="dl-item">
						<view class="dl-label">
							产品品牌：
						</view>
						<view class="dl-value">{{noticeDetail.brand||''}} </view>
					</view>
					<view class="dl-item">
						<view class="dl-label">
							粉丝要求：
						</view>
						<view class="dl-value">
							{{formatNumberWithUnits(noticeDetail.fansDown)||'0'}}-{{formatNumberWithUnits(noticeDetail.fansUp)||''}}
						</view>
					</view>
					<view class="dl-item" v-if='noticeDetail.province'>
						<view class="dl-label">
							地区要求：
						</view>
						<view class="dl-value">{{noticeDetail.province+(noticeDetail.city?('-'+noticeDetail.city):'')}}
						</view>
					</view>
					<view class="dl-item" v-if='noticeDetail.bloggerTypes'>
						<view class="dl-label">
							博主类型：
						</view>
						<view class="dl-value">{{noticeDetail.bloggerTypes||''}}</view>
					</view>
				</view>
				<view class="bottom-box">
					<text class="update-text">{{calculateTimeDifference(noticeDetail.updateTime)||''}}更新</text>
					<text class="view-text">{{noticeDetail.viewNum||''}} 阅读</text>
				</view>
			</view>
			<!-- 通告详情 -->
			<view class="info-box notice-detail">
				<view class="detail-title">通告详情</view>
				<view class="detail-content">
					<rich-text style="width: 100%" :nodes="noticeDetail.detail" />
				</view>
				<view class="detail-images">
					<image v-for="(item,index) in noticeDetail.imageArray" @click="preview(noticeDetail.imageArray)"
						:src="imageUrl+item" mode="widthFix"></image>
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="info-box notice-detail">
				<view class="detail-title">联系方式</view>
				<view class="field-box" v-if="passSign">


					<view class="dl-item">
						<view class="dl-label">
							微信群码图片：
						</view>

						<view class="dl-value">
							<image v-if="noticeDetail.groupImage" @click="preview([noticeDetail.groupImage])"
								:src="imageUrl+noticeDetail.groupImage" mode="widthFix"></image>
							<text v-else>未上传，请等待通告主联系</text>
						</view>
					</view>
				</view>
				<view class="field-box" v-else>

					<view class="dl-item">
						<view class="dl-label">
							微信群码图片：
						</view>
						<view class="dl-value">报名后可查看 </view>
					</view>
				</view>
			</view>
			<!-- 报名列表 -->
			<view class="info-box notice-detail" v-if="!viewMy">
				<view class="detail-title">已报名：{{allImgNum}}人</view>
				<view class="image-box" v-if="imageArray.length>0"
					:style="{height:(imageArray.length*(imageWidth+10)+20)+'rpx'}">
					<view class="image-row" v-for="(row,rowIndex) in imageArray">
						<span v-for=" (item,i) in row">
							<image v-if="item" :style="{ top:(imageWidth+10)*rowIndex+'rpx',left:imageWidth*i+'rpx'}"
								:src="item" mode="aspectFit">
							</image>
							<image v-else :style="{ top:(imageWidth+10)*rowIndex+'rpx',left:imageWidth*i+'rpx'}"
								src="@/static/images/profile.jpg" mode="aspectFit">
							</image>
						</span>

					</view>
				</view>
			</view>
			<!-- 去报名，始终浮动下方 -->
			<view class="dl-bottom-box" v-show="showBottom&&type=='common'">
				<!-- 报名 -->
				<view class="report-box">
					<view @click="goHome()">
						<image src="@/static/detail/home.png" mode="aspectFit"></image>
					</view>
					<view @click="shareFun()">
						<image src="@/static/detail/share.png" mode="aspectFit"></image>
					</view>
					<view v-if="null==userInfo" class="join-report">请登录后报名</view>
					<view v-else-if="!isSign && ifBz" @click="goReport()" class="join-report">报名参加</view>
					<view v-else-if="isSign && ifBz" class="join-report">已报名</view>
					<view v-else class="join-report" @click="changeUserType()">切换博主后报名</view>
				</view>
				<!-- 通告发布人能操作的 -->
				<view class="report-box" v-if="null!=userInfo && userInfo.userId==noticeDetail.userId&&ifBz==false">
					<view v-if="'0'==noticeDetail.approvalStatus" class="close-notice">关闭</view>
					<view v-if="'0'==noticeDetail.approvalStatus" class="waiting-approval">
						<view>审核中</view>
						<image @click="useCoupon()" src="@/static/detail/approval.png" mode="aspectFit"></image>
					</view>
					<view v-if="'2'==noticeDetail.approvalStatus" class="waiting-approval">已关闭</view>
					<view v-if="'1'==noticeDetail.approvalStatus" class="waiting-approval" @click="closeNotice('2')">关闭
					</view>
				</view>
			</view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog cancelText="取消" confirmText="创建" iconPath="/static/detail/card.png"
					content="没有符合粉丝要求的名片,无法报名" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
			<!-- 分享示例 -->
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<uni-popup-share @select="selectShare()"></uni-popup-share>
			</uni-popup>
			<!-- 海报 -->
			<shareImages ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :shareTitle="shareTitle"
				:goodsTitle="goodsTitle" :shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl"
				@success="shareSuccess()" />
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import html2canvas from 'html2canvas';
	import shareImages from '@/components/hj-placard/shareImages.vue'
	import constant from '@/utils/constant';
	import {
		changeUserType,
		getUserType,
		formatNumberWithUnits,
		calculateTimeDifference
	} from '@/utils/common.js'
	import {
		getJSONData
	} from '@/utils/auth.js'
	import {
		getNoticeDetail,
		addView,
		closeNotice
	} from '@/api/business/notice';
	import {
		postForkUser
	} from '@/api/business/base.js'
	import config from '@/config'
	import {
		getSignCard
	} from '@/api/business/signCard.js'
	export default {
		components: {
			shareImages,
			navigationBarVue
		},
		data() {
			return {
				//是否是看自己的通告-通告主
				viewMy: false,
				//通告ID
				noticeId: null,
				imageUrl: config.baseUrl,
				//是否显示下方操作按钮--刚开始不显示
				showBottom: false,
				//当前用户
				userInfo: null,
				//报名的头像数组
				imageArray: [

				],
				//所有报名的数组
				allImgNum: 0,
				//每张图片的宽度rpx--堆叠后的宽度
				imageWidth: 70,
				//默认博主
				ifBz: true,
				//当前用户是否关注该博主
				isLove: false,
				//当前用户是否已报名该通告
				passSign: false,
				isSign: true,
				//通告主详情
				userDetail: {
					avatar: '',
					identityType: "未认证",
					nickName: "",
					userId: null
				},
				//通告详情
				noticeDetail: {
					id: "",
					title: "",
					endDate: null,
					feeDown: null,
					feeUp: null,
					needNum: null,
					userId: null,
					brand: null,
					fansDown: null,
					fansUp: null,
					city: null,
					bloggerTypes: null,
					updateTime: null,
					approvalStatus: '0',
					viewNum: 0,
					detail: null,
					platformCode: "",
					platformName: "",
					//通告产品图
					imageArray: []
				},
				canvasImages: '',
				canvasWidth: 375, // 宽度
				canvasHeight: 500, // 高度
				shareTitle: '我是这张图片的标题', // 分享标题
				goodsTitle: '我是这张图片的标题我是这张图片的标题我是这张图片的标', // 商品宣传标题
				shareImage: '/static/bg.jpg', // 背景图片
				qrSize: 100, // 二维码大小
				qrUrl: 'https://ext.dcloud.net.cn/plugin?id=5747', // 生成二维码的链接
				type: 'common'
			}
		},
		onReady() {

			//通知
			this.checkUserType()
			this.showBottom = true
			// this.$refs.alertDialog.open()
		},
		onLoad(params) {
			if (params.viewMy) {
				this.viewMy = true
			}
			if (params.type) {
				this.type = params.type
			}
			this.noticeId = params.id
			if (null != getJSONData(constant.userInfo)) {
				this.userInfo = getJSONData(constant.userInfo)
			}

		},
		onShow() {
			this.getDetail()
			this.viewNotice()
		},
		methods: {
			preview(imageArray) {
				let previewImages = []
				imageArray.forEach(it => {
					previewImages.push(this.imageUrl + it)
				})

				uni.previewImage({
					urls: previewImages, // 需要预览的图片链接列表
				});
			},
			/**
			 * 转换时间单位
			 * @param {Object} time
			 */
			calculateTimeDifference(time) {
				return calculateTimeDifference(time)
			},
			/**
			 * 数值单位转换
			 * @param {Object} number
			 */
			formatNumberWithUnits(number) {
				return formatNumberWithUnits(number)
			},
			/**
			 * 关闭通告
			 */
			closeNotice(status) {
				closeNotice({
					noticeId: this.noticeId,
					publishTakeDown: status
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							duration: 2000,
							title: '操作成功'
						});
						this.getDetail(this.noticeId)
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			/**
			 * 关注、取消关注
			 * @param {Object} isLove
			 */
			forkUser(isLove) {
				postForkUser({
					userId: this.noticeDetail.userId,
					isLove: isLove
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							duration: 2000,
							title: '操作成功'
						});
						this.getDetail(this.noticeId)
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			goReportForm() {
				this.$tab.navigateTo('/pages/mine/set/report-form?userId='+this.userDetail.userId+'&noticeId='+this.noticeId)
			},
			goMemberIndex() {
				this.$tab.navigateTo('/pages/mine/member/member-index')
			},
			/**
			 * 去报名列表
			 */
			goReportList() {
				this.$tab.navigateTo('/pages/notice/report-list')
			},
			/**
			 * 查通告详情
			 */
			getDetail() {
				getNoticeDetail({
					noticeId: this.noticeId
				}).then(res => {
					if (res.code == 200) {
						this.noticeDetail = res.data.noticeDetail
						this.userDetail = res.data.userDetail
						this.isLove = res.data.isLove
						this.passSign = res.data.passSign
						this.isSign = res.data.isSign
						if (this.noticeDetail.images) {
							this.noticeDetail.imageArray = this.noticeDetail.images.split(",")
						}
						this.allImgNum = res.data.signUserAvatarList.length
						this.calculateImagesPerRow(res.data.signUserAvatarList)
					}
				}).catch((e) => {
					this.isTriggered = false
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			/**
			 * 浏览通告
			 */
			viewNotice() {
				let userId = null
				if (null != this.userInfo) {
					userId = this.userInfo.userId
				}
				addView({
					noticeId: this.noticeId,
					userId: userId
				}).then(res => {

				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			// 回调图片地址
			shareSuccess(e) {
				// console.log('地址',e)
				this.canvasImages = e
				uni.previewImage({
					urls: [this.canvasImages],
				});
			},
			/**
			 * 分享点击事件
			 * @param {Object} item
			 * @param {Object} index
			 */
			selectShare(dataObj) {
				if ('hb' == dataObj.item.name) {
					//海报
					this.$refs.canvas.canvasCreate();
				} else if ('wx' == dataObj.item.name) {
					this.onShareAppMessage()
				}
			},
			/**
			 * 微信分享
			 * @param {Object} res
			 */
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: '【' + this.noticeDetail.platformName + '】' + this.noticeDetail.title,
					path: '/pages/notice/detail?id=' + this.noticeDetail.id
				}
			},
			dialogConfirm() {
				console.log('点击确认')
				this.$tab.navigateTo('/pages/mine/card/my-card')
			},
			dialogClose() {
				console.log('点击关闭')
			},
			/**
			 * 去首页
			 */
			goHome() {
				this.$tab.reLaunch('/pages/index')
			},
			/**
			 * 报名
			 */
			goReport() {
				getSignCard({
					noticeId: this.noticeId
				}).then(res => {
					if (res.code == 200) {
						if (res.data.canUserNum > 0) {
							this.$tab.navigateTo('/pages/notice/report?noticeId=' + this.noticeId)
						} else {
							this.$refs.alertDialog.open()
						}
						console.log(res);
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})

			},
			/**
			 * 分享
			 */
			shareFun() {
				this.$refs.share.open()
			},
			/**
			 * 使用通告券加速
			 */
			useCoupon() {

			},
			/**
			 * 计算头像显示区域高度
			 */
			calculateImagesPerRow(imgs) {
				let tempImg = []
				imgs.forEach(it => {
					tempImg.push(this.imageUrl + it)
				})
				console.log(tempImg);
				const systemInfo = uni.getSystemInfoSync();
				//1rpx 转换px 的单位
				let rpxUnit = (systemInfo.screenWidth / 750)
				// 显示头像区域的宽度--去掉多余的空间-px
				let screenWidth = systemInfo.screenWidth - (86 * rpxUnit)
				// 每张图片的宽度px
				let imageWidthPx = this.imageWidth * rpxUnit;
				//每行可以显示多少张图片
				let imagesPerRow = Math.floor(screenWidth / imageWidthPx);
				//设置测试数据
				let thisArray = tempImg
				for (let i = 0; i < thisArray.length; i += imagesPerRow) {
					this.imageArray.push(thisArray.slice(i, i + imagesPerRow));
				}
				console.log(this.imageArray, "imageArray")
			},
			/**
			 * 判断用户类型
			 */
			checkUserType() {
				let userType = getUserType()
				if (constant.bz != userType) {
					//不是博主
					this.ifBz = false
				}
			},
			/**
			 * 切换当前用户类型为博主
			 */
			changeUserType() {
				this.ifBz = true
				changeUserType(constant.bz)
			}
		}
	}
</script>

<style lang="scss">
	.dl-detail-box {
		width: 100%;
		padding-top: calc(90rpx + var(--status-bar-height));
		background-color: white;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.notice-detail-last-box {
			width: 100%;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 90rpx);
			overflow-y: scroll;
			padding: 30rpx 30rpx 115rpx 30rpx;
			background-color: #F6F6F6;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: start;
			position: relative;

			.info-box {
				width: 100%;
				padding: 28rpx;
				display: flex;
				background-color: white;
				border-radius: 30rpx;
				align-items: center;
				justify-content: center;
				margin-bottom: 25rpx;

				.image {
					flex: none;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.name-info {
					width: calc(100% - 350rpx);
					flex: 1;
					padding-left: 30rpx;
					text-align: left;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;

					.name {
						width: 100%;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding-bottom: 10rpx;
					}

					.text {
						font-size: 24rpx;
						color: #929292;
					}
				}

				.fork-info {
					flex: none;
					width: 270rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.up-box {
						padding-bottom: 5rpx;
						display: flex;
						font-size: 28rpx;
						padding-left: 10rpx;
						align-items: center;
						justify-content: center;

						.item-dom-guanzhu {
							padding: 5rpx 22rpx;
							border-radius: 20rpx;
							color: white;
							background-color: #FC1F3E;
						}

						.item-dom-yiguanzhu {
							padding: 5rpx 22rpx;
							border: 1rpx solid #FC1F3E;
							border-radius: 20rpx;
							color: #FC1F3E;
							background-color: white;
						}

						.item-dom-zhuye {
							margin-left: 15rpx;
							padding: 5rpx 22rpx;
							border-radius: 20rpx;
							background-color: #F4F4F4;
						}
					}

					.down-box {
						display: flex;
						align-items: center;
						justify-content: center;
						padding-top: 10rpx;
						font-size: 24rpx;
						color: #929292;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 5rpx;
						}
					}
				}


			}

			.notice-main {
				align-items: flex-start;
				flex-direction: column;

				.dl-notice-title {
					display: flex;
					width: 100%;
					padding-bottom: 10rpx;
					align-items: center;
					justify-content: center;

					.dl-image {
						flex: none;
						width: 70rpx;
						height: 70rpx;
					}

					.dl-text {
						margin-left: 10rpx;
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
						font-weight: bold;

					}
				}

				.end-time {
					border-radius: 15rpx;
					background-color: #FFF4F5;
					padding: 8rpx 20rpx;
					color: #FC1F3E;
				}

				.field-box {
					margin: 20rpx 0;
					padding: 25rpx 20rpx;
					background-color: #FAFAFA;
					border-radius: 15rpx;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;

					.dl-item {
						display: flex;
						justify-content: center;
						align-items: flex-start;
						margin-bottom: 10rpx;

						.dl-label {}

						.dl-value {
							flex: 1;
						}
					}
				}

				.bottom-box {
					width: 100%;
					border-top: 1rpx solid #F7F7F7;
					padding: 25rpx 30rpx 5rpx 30rpx;
					color: #929292;
					font-size: 24rpx;

					.update-text {
						float: left;
					}

					.view-text {
						float: right;
					}
				}
			}

			.notice-detail {
				align-items: flex-start;
				flex-direction: column;

				.detail-title {
					border-left: 8rpx solid #FC1F3E;
					font-weight: bold;
					padding-left: 20rpx;
				}

				.detail-content {
					width: 100%;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #F7F7F7;
				}

				.detail-images {
					width: 100%;

					image {
						width: 100%;
						margin-top: 20rpx;
					}
				}

				.field-box {
					margin-top: 20rpx;
					padding-top: 10rpx;
					border-radius: 15rpx;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;

					.dl-item {
						display: flex;
						justify-content: start;
						align-items: center;
						margin-bottom: 10rpx;

						.dl-label {
							width: 300rpx;
							display: flex;
							justify-content: start;
							align-items: center;
						}

						.dl-value {
							flex: 1;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 200rpx;
								height: 80rpx;
							}
						}
					}
				}

				.image-box {
					width: 100%;
					padding: 20rpx 0;

					.image-row {
						width: 100%;
						position: relative;

						image {
							position: absolute;
							border-radius: 50%;
							width: 90rpx;
							height: 90rpx;
						}
					}
				}

				.view-report-button {
					text-align: center;
					margin: auto;
					border-radius: 40rpx;
					width: 75%;
					background-color: #FC1F3E;
					color: white;
					padding: 15rpx 0;
				}
			}

			.dl-bottom-box {
				border-top: 1rpx solid #F7F7F7;
				color: #363636;
				position: fixed;
				padding-bottom: 20rpx;
				padding-top: 20rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				bottom: 0;
				background-color: #F7F7F7;
				width: 100%;

				.report-box {
					display: flex;
					justify-content: center;
					align-items: center;

					.share-image {
						pointer-events: none;
						background-color: #F7F7F7;
					}


					image {
						margin-right: 25rpx;
						width: 80rpx;
						height: 80rpx;
					}

					.join-report {
						margin-left: 20rpx;
						flex: 1;
						padding: 15rpx;
						text-align: center;
						background-color: #FC1F3E;
						border-radius: 14rpx;
						color: white;
					}

					.close-notice {
						padding: 15rpx 25rpx;
						background-color: #F7F7F7;
						border: 1rpx solid #E2E2E2;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.waiting-approval {
						text-align: center;
						padding: 15rpx 25rpx;
						background-color: #E2E2E2;
						border: 1rpx solid #D1D1D1;
						border-radius: 10rpx;
						position: relative;
						flex: 1;

						image {
							position: absolute;
							top: -30px;
							margin: auto;
							left: 200rpx;
							width: 150rpx;
						}
					}

				}
			}
		}
	}
</style>