renshou/office/team/index.vue

<template>
	<view>
		<view class="top-fixed" :style="'height:' + systems.barHeight + 'rpx;'">
			<navigator open-type="navigateBack" hover-class="none" class="back ddflex" :style="'top:' + systems.ktxStatusHeight + 'rpx;height:' + systems.navigationHeight + 'rpx;'">
				<image :src="picUrlss+'lezhan/back_black.png'"></image>
			</navigator>
		</view>
		<view class="top" :style="'padding-top:' + systems.barHeight + 'rpx;'">
			<view class="info ddflex">
				<image :src="teamInfo.url?teamInfo.url:picUrlss+'office_images/team_default.png'" mode="aspectFill" class="team-pic"></image>
				<view class="fflex" style="overflow: visible;">
					<view class="ddflex">
						<view class="title fflex">{{teamInfo.title}}</view>
						<button v-if="userInfo&&teamInfo.isJoin == 1" open-type="share" class="ddflex" style="font-size: 24rpx;color: #999999;margin-top: -30rpx;">
							<image style="width: 30rpx;height: 30rpx;margin-right: 8rpx;margin-left: 8rpx;" src="../static/images/fx.png"></image>
							邀请
						</button>
					</view>
					<view class="sta ddflex">
						<view class="ddflex fflex">
							<view><text>{{teamInfo.memberNum?teamInfo.memberNum:0}}</text>成员</view>
							<view class="sta-line">|</view>
							<view><text>{{totalNum}}</text>帖子</view>
						</view>
						<view class="sta-datas">今日互动{{teamInfo.dayMomentsNum}}</view>
					</view>
				</view>
			</view>
			<view class="bri ddflex" @click="jumpUrl('/office/teamInfo/index?id='+teamInfo.id)">
				<view class="fflex tovers">{{teamInfo.description}}</view>
				<image src="../../static/pages/images/more.png" class="rico"></image>
			</view>
			<view v-if="teamInfo.relationMatch" class="ddflex"
				style="padding: 18rpx 0;margin-top: 20rpx;color: #999;font-size: 24rpx;"
				@click="jumpUrl('/match/activityDetail/activityDetail?id='+teamInfo.relationMatch.id)">
				来自
				<view class="fflex tover" style="color: var(--main);">{{teamInfo.relationMatch.title}}</view>
			</view>
			<view class="leader ddflex" v-if="teamInfo.teamUserDTO">
				<text>队长</text>
				<image :src="teamInfo.teamUserDTO.avatar?teamInfo.teamUserDTO.avatar:'/static/images/def_head.png'" mode="aspectFill"></image>
				<view>{{teamInfo.teamUserDTO.realName?teamInfo.teamUserDTO.realName:teamInfo.teamUserDTO.nickName}}</view>
			</view>
			<view class="join ddflex" v-if="userInfo&&teamInfo.isJoin != 1">
				<view class="fflex">
					<view>hi,{{userInfo.name?userInfo.name:userInfo.nickName}}~</view>
					<text>欢迎关注{{teamInfo.title}}</text>
				</view>
				<view class="join-btn" @click="joinTeam">加入</view>
			</view>
		</view>
		
		<view class="ddflex qunCode" v-if="teamInfo.groupCode">
			<view>
				<view>加入【{{teamInfo.title}}群】</view>
				<view style="margin: 10rpx 0;">一起探讨更多保险知识</view>
				<image style="width: 27rpx;height: 17rpx;" src="/office/static/images/jt.png"></image>
			</view>
			<image class="qunCode-pic" :src="teamInfo.groupCode" show-menu-by-longpress="true" @click="previewImgss([teamInfo.groupCode],0)"></image>
		</view>
			
		<view class="tab ddflex">
			<!-- <view :class="'li ' + (pType == 1 ? 'active' : '')" @click="swiPType(1)">综合</view> -->
			<view :class="'li ' + (pType == 12 ? 'active' : '')" @click="swiPType(12)">最新</view>
			<view :class="'li ' + (pType == 5 ? 'active' : '')" @click="swiPType(5)">热门</view>
		</view>
		<view class="cons-b">
			<view class="list" v-if="officeList && officeList.length > 0">
				<view class="li" v-for="(item, index) in officeList" :key="index">
					<view class="user ddflex" @click="jumpUrl('/topics/home/home?userId=' + item.userDTO.id)">
						<image :src="item.userDTO.avatar" mode="aspectFill" class="userimg"></image>
						<view class="fflex">
							<view class="namea ddflex">
								<view class="name fflex ddflex">{{ item.userDTO.nickName }}
									<!-- <image src="../../static/images/vip_tag.png" class="vip-tag" v-if="item.userDTO.levelGrade > 0"></image> -->
									<image v-if="item.userDTO.isOpenWeRunData" style="width:15rpx;height:20rpx;margin-left: 10rpx;" src="../../static/images/yd.png"></image>
								</view>
								<view class="time">{{ item.time }}</view>
							</view>
							<view class="area" v-if="item.userDTO.cityName">{{ item.userDTO.provinceName }} {{ item.userDTO.cityName }}</view>
						</view>
					</view>
					<view class="des" @click="jumpUrlDetail(item)"><rich-text :nodes="item.content"></rich-text></view>
					<!-- //如果有投票，就不显示图片 -->
					<block v-if="!item.qyPoll">
					<view class="video" v-if="item.isHaveVideo && config.open_community_video == 1">
						<video :src="item.url" :show-center-play-btn="false" :controls="item.isControls" :autoplay="item.isControls" :id="'myVideo'+index" @pause="videoPause(index)" @ended="videoEnded(index)"></video>
						<view class="video-play ddflex" @click="videoPlay(index)" v-if="item.isShowPlayBtn"><image src="../../static/images/play.png"></image></view>
					</view>
					<view class="imgbox ddflex" @click="jumpUrlDetail(item)" v-if="!item.isHaveVideo"><!-- @click="previewImgss(item.url, idx)" -->
						<block v-if="item.url&&item.url.length>0">
							<image mode="aspectFill" v-for="(it, idx) in item.url" :src="it" :key="idx"></image>
						</block>
					</view>
					</block>
					<!-- 话题 -->
					<view class="ddflex" v-if="item.qyDialogu">
						<view class="topic ddflex" @click="jumpUrl('/topics/detail/detail?topicId=' + item.qyDialogu.id)">
							<image src="../../static/images/topic.png"></image>
							{{ item.qyDialogu.title }}
						</view>
					</view>
					<view class="loca ddflex" @click="jumpUrlPoi(item,'/office/poi/index')" v-if="item.poiName"><image :src="picUrlss+'office_images/loca.png'"></image><text v-if="item.poiDistance > 0">{{item.poiDistance ? item.poiDistance < 1000 ? item.poiDistance+'m' : (item.poiDistance/1000).toFixed(1)+'km' : ''}}</text>{{item.poiName}}</view>
					<!-- 投票 -->
					<view :class="'vote-box' + (item.qyPoll.isEnd ? ' ends' : '')" v-if="item.qyPoll">
						<view class="vote-tit">{{ item.qyPoll.title }}</view>
						<block v-if="item.qyPoll.isVote == 1">
							<view class="vote-list end" @click="jumpUrlDetail(item)">
								<view :class="'lis ddflex  ' + (itpy.isVote == 1 ? 'active' : '')" v-for="(itpy, idex) in JSON.parse(item.qyPoll.optionJson)" :key="idex">
									<view class="percent" :style="'width:' + parseFloat(itpy.proportion) + '%;'"></view>
									<view class="fflex">{{ itpy.name }}</view>
									<view>{{ parseFloat(itpy.proportion) + '%' }}</view>
								</view>
							</view>
						</block>
						<block v-else>
							<view class="vote-list">
								<view class="lis" v-for="(itpy, idex) in JSON.parse(item.qyPoll.optionJson)" :key="idex" @click="submitPoll(item, index, idex)">
									{{ itpy.name }}
								</view>
							</view>
						</block>
						<view class="vote-can" v-if="item.qyPoll.isEnd"><text>{{item.qyPoll.voteCount}}人参与</text>投票已结束</view>
					</view>
					<block v-if="item.type==10||item.type==11">
						<view v-if="item.type==10" class="ddflex step-box" style="justify-content: space-between;" @click="jumpUrl('/exercise/record/record?userId=' + item.userId)">
							<view>
								<view class="step-date">{{item.wxRun.step}}</view>
								<view class="step-label">步数</view>
							</view>
							<view>
								<view class="step-date">{{item.wxRun.index}}</view>
								<view class="step-label" style="text-align: right;">名次</view>
							</view>
						</view>
						<view v-if="item.type==11" class="ddflex step-box" style="justify-content: space-between;" @click="jumpUrl('/match/activityDetail/activityDetail?id=' + item.matchContent.id)">
							<image class="step-pic" :src="item.matchContent.pic" mode="aspectFill"></image>
							<view class="fflex">
								<view class="step-title tovers">{{item.matchContent.title}}</view>
								<view class="ddflex" style="justify-content: space-between;margin-top: 10rpx;">
									<view class="step-price">{{item.matchContent.endTime}}</view>
									<view  class="step-btn">查看</view>
								</view>
							</view>
						</view>
					</block>
					<view v-if="item.userGroupId" class="ddflex step-box" style="padding: 25rpx 21rpx;" @click="jumpUrl('/office/team/index?id=' + item.userGroupId)">
						<image style="width: 24rpx;height: 24rpx;margin-right: 13rpx;" src="../../static/images/link.png"></image>
						<view style="font-weight: 500;color: #999999;">Team：</view>
						<view>{{item.userGroupTitle}}</view>
					</view>
					<block v-else>
						<view class="product" v-if="item.products && item.products.length > 0">
							<view scroll-x="true" class="pro-view pro-view1" v-if="item.products.length == 1">
								<view class="lis" v-for="(it, idx) in item.products" :key="idx" @click="toProductDetail(it)">
									<view class="ddflex">
										<image :src="it.pic + '?x-oss-process=style/w375'" mode="aspectFill" class="pic"></image>
										<view class="fflex">
											<view class="title tover">{{ it.title }}</view>
											<view class="opts ddflex">
												<view class="money"><text>￥</text>{{ it.salePrice }}</view>
												<view class="pro-btn"><image src="../../static/pages/images/n_cart.png"></image></view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<scroll-view scroll-x="true" class="pro-view" v-else>
								<view class="lis" v-for="(it, idx) in item.products" :key="idx" @click="toProductDetail(it)">
									<view class="ddflex">
										<image :src="it.pic + '?x-oss-process=style/w375'" mode="aspectFill" class="pic"></image>
										<view class="fflex">
											<view class="title tover">{{ it.title }}</view>
											<view class="opts ddflex">
												<view class="money"><text>￥</text>{{ it.salePrice }}</view>
												<view class="pro-btn"><image src="../../static/pages/images/n_cart.png"></image></view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</block>
					<view class="opt ddflex" v-if="!item.source">
						<view class="fflex" @click="jumpUrlDetail(item)">{{fomatNumbers(item.count.browseCount)}}次浏览</view>
						<view class="ddflex" @click="submitFabulous(2, item.id, index)">
							<image :src="'../../static/images/' + (item.isPraise == 1 ? 'like_h' : 'like') + '.png'"></image>
							{{fomatNumbers(item.count.fabulousCount)}}
						</view>
						<view class="ddflex" @click="jumpUrlDetail(item)" v-if="config.is_show_create_btn == 1">
							<image src="../../static/images/comment.png"></image>
							{{fomatNumbers(item.count.commentCount)}}
						</view>
						<button open-type="share" hover-class="none" class="opt-share ddflex">
							<image src="../../static/images/share.png"></image>
							分享
						</button>
					</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<image :src="picUrlss + 'empty_jl.png'"></image>
				<text>暂无动态</text>
			</view>
		</view>
		<view class="create" @click="createJump('/office/news/news?newsType=1&userGroupId='+opt.id)" v-if="config.is_show_create_btn == 1&&userInfo&&teamInfo.isJoin == 1"><image style="display: block;" src="../../static/images/create.png"></image>发布</view>
	</view>
</template>

<script>
	const app = getApp();
	const api = require('../../utils/api.js');
	const req = require('../../utils/request.js');
	const util = require('../../utils/util.js');
	export default {
		components: {
		},
		data() {
			return {
				systems: {},
				picUrlss: req.public.picUrls,
				opt: {},
				isRefresh: false,
				isShowbtn: false,
				isShowPage: false,
				isLoad: true,
				form: {
					page: 1,
					limit: 10
				},
				pType: 12, //排序： 1综合, 2最新,3浏览最多,4评论最多,5热门
				officeList: [], //聊一聊
				config: {},
				videoCurrent: null,
				videoContext: '',
				teamInfo: {},
				userInfo: {},
				totalNum: 0,
				currentPoi: {},
				teamRank:[],
				myRank:{},
				isOpenWeRunData:false
			}
		},
		async onLoad(options) {
			this.opt = options;
			await req.silenceLogin(options.tjuid?options.tjuid:'', '');
			this.getTeamInfo();
			this.getOfficeList();
			this.userInfo = req.getStorage('userInfo');
			this.isOpenWeRunData = req.getStorage('isOpenWeRunData')
			this.config =req.getStorage('configRes')? JSON.parse(req.getStorage('configRes')):''
		},
		onShow() {
			if(this.isRefresh){
				this.form.page = 1;
				this.isLoad = true;
				this.getOfficeList();
				this.isRefresh = false;
			}
			this.userInfo = req.getStorage('userInfo');
			this.isOpenWeRunData = req.getStorage('isOpenWeRunData')
			this.config =req.getStorage('configRes')? JSON.parse(req.getStorage('configRes')):''
		},
		onHide() {
			this.isShowbtn = false;
		},
		onReachBottom() {
			this.form.page++;
			this.getOfficeList();
		},
		onShareAppMessage(){
			let title = req.getStorage('userInfo').nickName+'邀请您加入'+this.teamInfo.title
			return {
				title: title,
				imageUrl:this.teamInfo.url?this.teamInfo.url:this.picUrlss+'office_images/team_default.png',
				path: '/office/team/index?tjuid=' +req.getStorage('userInfo').id+'&id='+this.opt.id
			};
		},
		methods: {
			getTeamInfo(){
				req.getRequest(api.user_team_info+this.opt.id,{},data=>{
					this.teamInfo = data;
				})
			},
			joinTeam(item,index){
				if(this.teamInfo.relationMatch){
					uni.navigateTo({
						url: '/match/activityDetail/activityDetail?id='+this.teamInfo.relationMatch.id
					})
					return false;
				}
				req.postRequest(api.user_team_follow,{userGroupId: this.teamInfo.id},data=>{
					req.msg('加入团队成功');
					this.teamInfo.isJoin=1
				})
			},
			//聊一聊切换排序类型
			swiPType(type) {
				this.isLoad = true;
				this.form.page = 1;
				this.pType = type;
				this.getOfficeList();
			},
			//预览图片
			previewImgss(picUrls, index) {
				//预览合同图片
				var src = picUrls[index];
				let imgs = picUrls;
				uni.previewImage({
					current: src, // 当前显示图片的http链接
					urls: imgs
				});
			},
	
			showBtn() {
				if (!req.isLogins(true)) {
					return;
				}
				this.isShowbtn = true;
			},
			hideBtn() {
				this.isShowbtn = false;
			},
	
			removeHtml(content) {
				return util.removeHtml(content);
			},
			createJump(url) {
				if (!req.isLogins(true)) {
					return;
				}
				this.jumpUrl(url);
			},
			jumpUrl(url){
				uni.navigateTo({
					url: url
				})
			},
			jumpUrlPoi(item,url){
				this.currentPoi = item;
				uni.navigateTo({
					url: url
				})
			},
			jumpToPractice(item,url){
				let checkCategory = {
					id: item.question.cateId,
					name: item.question.cateName
				}
				req.setStorage('checkCategory',checkCategory)
				this.jumpUrl(url);
			},
			jumpUrlDetail(item) {
				this.jumpUrl('/office/detail/detail?contentId=' + item.id);
			},
			toProductDetail(item) {
				this.jumpUrl('/product/detail/detail?id=' + item.id);
			},
			getHotTopic() {
				var dataPram = {
					page: 1,
					limit: 4,
					attr: 2
				};
				req.getRequest('/api/v3/dialogue/list', dataPram, data => {
					this.hotTopicList = data;
				});
			},
	
			getHotPoll() {
				var dataPram = {
					page: 1,
					limit: 4,
					attr: 2,
					attrType: 0
				};
				req.getRequest('/api/v3/poll/pollList', dataPram, data => {
					this.hotPollList = data;
				});
			},
			getCategory(){
				req.getRequest('/api/v3/unified/tree/list',{type: 1},data=>{
					this.category = data;
				})
			},
			swiTree(item,index){
				if(this.cateIndex == index) return false;
				this.cateIndex = index;
				this.pType = -1;
				this.treeId = item.id;
				this.form.page = 1;
				this.isLoad = true;
				this.getOfficeList()
			},
			sum(arr) {
				var s = 0;
				for (var i=arr.length-1; i>=0; i--) {
					if(arr[i].count){
						s += Number(arr[i].count);
					}
				}
				return s;
			},
			fomatNumbers(num){
				return util.formatNumbers(num)
			},
			getOfficeList() {
				let that = this;
				var pramData = {};
				pramData.page = this.form.page;
				pramData.limit = this.form.limit;
				// pramData.type = 4;
				if (this.pType == 5) {
					//热门
					pramData.isEssence = 2;
					pramData.orderType = 1;
				} else {
					pramData.orderType = this.pType;
				}
				if(this.treeId) {
					pramData.treeId = this.treeId
					pramData.orderType = 1
				}else delete pramData.treeId
				pramData.userGroupId = this.opt.id;
				if (!this.isLoad) return false;
				this.isLoad = false;
				req.getRequest('/api/v3/moments/page', pramData, data => {
					if(data.list&&data.list.length > 0){
						data.list.map(it=>{
							if(it.qyPoll && it.qyPoll.isEnd){
								it.qyPoll.voteCount = that.sum(JSON.parse(it.qyPoll.optionJson))
							}
							if(it.url){
								let h = it.url.substring(it.url.lastIndexOf('.') + 1)
								if(h.indexOf('mp4')<0&&h.indexOf('MP4')<0){
									it.url = it.url.split(',');
								}else{
									it.isHaveVideo = true
									it.isControls = false
									it.isShowPlayBtn = true
								}
							}
							it.content = '<div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;word-break: break-all;">' + it.content + '</div>'
							return it;
						})
					}
					if (data.list && data.list.length >= 10) {
						this.isLoad = true;
					}
					if (this.form.page > 1) {
						data.list = this.officeList.concat(data.list);
					} else {
						this.officeList = [];
					}
					this.officeList = data.list;
					if(this.pType == 12) this.totalNum = data.total;
					this.isShowPage = true;
				});
			},
			//提交点赞、取消点赞；收藏、取消收藏
			submitFabulous(type, id, index) {
				if (!req.isLogins(true)) {
					return;
				}
				var dataP = {};
				dataP.type = type; //1，观看 ，2点赞，3评论，4分享，5收藏
				dataP.momentsId = id;
				req.postRequestLoding('/api/v3/fabulous/save', dataP, data => {
					if (type == 2) {
						//动态点赞
						if (this.officeList[index].isPraise == 1) {
							//已赞
							this.officeList[index].isPraise = 0;
							this.officeList[index].count.fabulousCount--;
						} else {
							this.officeList[index].isPraise = 1;
							this.officeList[index].count.fabulousCount++;
						}
					}
				});
			},
	
			//提交投票
			submitPoll(item, pIndex, pollIndex) {
				if(item.qyPoll.isEnd){
					this.jumpUrlDetail(item)
					return false;
				} 
				var dataP = {};
				// dataP.id = item.id;
				dataP.pollId = item.qyPoll.id;
				var pollObjList = JSON.parse(item.qyPoll.optionJson);
				dataP.pollOptionCode = pollObjList[pollIndex].code;
				req.postRequest('/api/v3/poll/saveDetails', dataP, data => {
					req.msg('投票成功');
					//图片完之后要将该投票的对象返回，便于做渲染%
					this.officeList[pIndex].qyPoll = data;
				});
			},
			goTop: function(e) {
				// 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
					});
				}
			},
			videoPlay(index){
			    var that = this;
			    var curIdx = index;
			    this.officeList[index].isControls = true
			    this.officeList[index].isShowPlayBtn = false
			    // 有播放时先将prev暂停，再播放当前点击的current
			    if (that.videoCurrent != null) {
					var videoContextPrev = uni.createVideoContext('myVideo' + that.videoCurrent)
					if (that.videoCurrent != curIdx) {
						this.officeList[that.videoCurrent].isControls = false
						this.officeList[that.videoCurrent].isShowPlayBtn = true
						
						videoContextPrev.stop()
					}
					that.videoCurrent = curIdx
					var videoContextCurrent = uni.createVideoContext('myVideo' + curIdx)
					videoContextCurrent.play()
			    } else {  
					// 没有播放时播放视频
					that.videoCurrent = curIdx
					var videoContext = uni.createVideoContext('myVideo' + curIdx) // 对应的视频id
					videoContext.play()
			    }
			},
			videoPause(index){
				this.officeList[index].isControls = false
				this.officeList[index].isShowPlayBtn = true
			},
			videoEnded(index){
				this.officeList[index].isControls = false
				this.officeList[index].isShowPlayBtn = true
			}
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
	}
</script>

<style>
	@import "./index.css";
</style>