diff --git a/api/vlog.js b/api/vlog.js index 9fafbee3..cba7cc96 100644 --- a/api/vlog.js +++ b/api/vlog.js @@ -43,11 +43,12 @@ export function vlogFollowList(page, pageSize,myId) { /** * 短视频列表-true */ -export function vlogList(page, pageSize,userId='',search='') { +export function vlogList(page, pageSize,userId='',cityCode='',search='') { let data = { page, pageSize, userId, + cityCode, search } return http.request({ @@ -338,3 +339,15 @@ export function vlogQueryMyFollows({myId,page,pageSize}) { params:{myId,page,pageSize} }); } + +/** + * 我的关注 + */ +export function vlogQueryDoIFollowVloger({myId,vlogerId}) { + return http.request({ + url: api.vlog + "/fans/queryDoIFollowVloger", + method: Method.GET, + needToken: true, + params:{myId,vlogerId} + }); +} \ No newline at end of file diff --git a/components/vlog/videoComp.vue b/components/vlog/videoComp.vue index 70961ba2..53bb1ed1 100755 --- a/components/vlog/videoComp.vue +++ b/components/vlog/videoComp.vue @@ -1,740 +1,1006 @@ - - + + - - \ No newline at end of file + var userId = myUserInfo.id; + var result = await vlogLike({ + userId, + vlogerId: vlog.vlogerId, + vlogId: vlog.vlogId + }); + console.log(result); + if (result.data.status == 200) { + me.reLikePlayList(vlog.vlogId); + me.refreshVlogCounts(); + } else { + uni.showToast({ + title: result.data.msg, + icon: 'none', + duration: 3000 + }); + } + } else if (isLike == 0) { + // 取消喜欢/点赞视频 + var myUserInfo = storage.getVlogUserInfo() || null; + if (myUserInfo == null) { + uni.navigateTo({ + url: '/pages/passport/login', + animationType: 'slide-in-bottom' + }); + return; + } + var userId = myUserInfo.id; + + var result = await vlogUnLike({ + userId, + vlogerId: vlog.vlogerId, + vlogId: vlog.vlogId + }); + if (result.data.status == 200) { + me.reDislikePlayList(vlog.vlogId); + me.refreshVlogCounts(); + } else { + uni.showToast({ + title: result.data.msg, + icon: 'none', + duration: 3000 + }); + } + } + }, + + // 喜欢/点赞的list重新设置 + reLikePlayList(vlogId) { + var me = this; + var playerList = me.playerList; + + // 关注以后，循环当前playerList，修改对应粉丝关系的doIFollowVloger改为true + for (var i = 0; i < playerList.length; i++) { + var vlog = playerList[i]; + if (vlog.vlogId == vlogId) { + vlog.doILikeThisVlog = true; + playerList.splice(i, 1, vlog); + } + } + me.playerList = playerList; + }, + reDislikePlayList(vlogId) { + var me = this; + var playerList = me.playerList; + + // 关注以后，循环当前playerList，修改对应粉丝关系的doIFollowVloger改为true + for (var i = 0; i < playerList.length; i++) { + var vlog = playerList[i]; + if (vlog.vlogId == vlogId) { + vlog.doILikeThisVlog = false; + playerList.splice(i, 1, vlog); + } + } + me.playerList = playerList; + }, + + // 关注后的list重新设置 + reFollowPlayList(vlogerId) { + var me = this; + var playerList = me.playerList; + + // 关注以后，循环当前playerList，修改对应粉丝关系的doIFollowVloger改为true + for (var i = 0; i < playerList.length; i++) { + var vlog = playerList[i]; + if (vlog.vlogerId == vlogerId) { + vlog.doIFollowVloger = true; + + playerList.splice(i, 1, vlog); + } + } + me.playerList = playerList; + }, + // 取关后的list重新设置 + reCancelPlayList(vlogerId) { + var me = this; + var playerList = me.playerList; + + // 关注以后，循环当前playerList，修改对应粉丝关系的doIFollowVloger改为true + for (var i = 0; i < playerList.length; i++) { + var vlog = playerList[i]; + if (vlog.vlogerId == vlogerId) { + vlog.doIFollowVloger = false; + playerList.splice(i, 1, vlog); + } + } + me.playerList = playerList; + }, + + // 关注博主 + async followMe(vlogerId) { + var me = this; + var myUserInfo = storage.getVlogUserInfo() || null; + if (myUserInfo == null) { + uni.navigateTo({ + url: '/pages/passport/login', + animationType: 'slide-in-bottom' + }); + return; + } + var userId = myUserInfo.id; + var result = await vlogFollow(userId, vlogerId); + if (result.data.status == 200) { + me.reFollowPlayList(vlogerId); + } else { + uni.showToast({ + title: result.data.msg, + icon: 'none', + duration: 3000 + }); + } + }, + // 查看用户详情 + goUserInfoSeeSee(userId) { + uni.setStorageSync('userPageId', userId); + const info = storage.getVlogUserInfo() || null; + if (info == null) { + uni.navigateTo({ + url: '/pages/passport/login', + animationType: 'slide-in-bottom' + }); + return; + } + let myUserId = info.id; + if (myUserId == userId) { + uni.switchTab({ + url: '/pages/me/me' + }); + } else { + uni.navigateTo({ + url: '/pages/me/vlogerInfo?userPageId=' + userId + }); + } + }, + + listScroll(e) { + // console.log(e.contentOffset.y); + this.progressFlag = false; + if (e.contentOffset.y > 0) { + this.$emit('showLoading'); + } + }, + + downloadVlog() { + var me = this; + var serverUrl = app.globalData.serverUrl; + var currentIndex = me.playerCur; + var vlog = me.playerList[currentIndex]; + var pendingLength = vlog.url; + }, + + copyLink() { + var me = me; + }, + + showQRCode() { + var me = me; + }, + + changeVlogToPrivate() { + var me = me; + }, + + // 下拉刷新的过程中，改变头部tab显示的字样 + onpullingdown(e) { + console.log('下拉中'); + }, + async onrefresh(e) { + // console.log('开始') + // this.refreshing = true; + // // 通过list组件的下拉刷新触发当前所在页面的下拉刷新 + // uni.startPullDownRefresh(); + // await this.displayVideoPaging(1,true) + // uni.stopPullDownRefresh() + // this.refreshing = false; + // this.$emit("hideLoading"); + console.log('开始'); + this.refreshing = true; + // 通过list组件的下拉刷新触发当前所在页面的下拉刷新 + uni.startPullDownRefresh(); + await this.displayVideoPaging(1, true); + uni.stopPullDownRefresh(); + this.refreshing = false; + this.$emit('hideLoading'); + }, + + onplay: function (e) { + // console.log('开始播放'); + // let timer = setTimeout(() => { + // this.progressFlag = true; + // clearTimeout(timer); + // }, 10); + this.progressFlag = true; + if (uni.getSystemInfoSync().platform == 'ios') { + this.doplay(0.1); + } + }, + onerror: function (err) {}, + // timeupdate: function (e) { + // if (e.detail.currentTime > 0.2) { + // this.doplay(e.detail.currentTime); + // } + // }, + + playOrPause() { + var me = this; + var playStatus = this.playStatus; + console.log(playStatus); + if (!playStatus) { + me.videoContext.pause(); + } else { + me.videoContext.play(); + } + this.playStatus = !playStatus; + }, + + scroll: function (e) { + let originalIndex = this.currentIndex; + let isNext = false; + if (e.contentOffset.y < this.contentOffsetY) { + isNext = true; + } + this.contentOffsetY = Number(e.contentOffset.y); + var num = this.playerList.length; + if (num > 0) { + var ht = Number(e.contentSize.height); + console.log(ht); + this.currentIndex = Math.round(Math.abs(this.contentOffsetY) / (ht / num)); + } else { + this.currentIndex = 0; + } + this.onchange(this.currentIndex); + + this.times = new Date().getTime(); + // 判断如果视频列表总长度-当前下标，少于3个，则开始分页查询后续的视频，并且追加到现有list中 + if (this.playerList.length - this.currentIndex < 3) { + // 如果要分页的page和总数totalPage相等，则没有更多 + if (this.page == this.totalPage || this.totalPage == 0) { + this.$emit('hideLoading'); + return; + } + this.displayVideoPaging(this.page + 1, false); + } + }, + + // 分页查询新的list, 并且追加到现有list中 + async displayVideoPaging(page, needClearList) { + // 查询首页短视频列表 + let me = this; + let myUserInfo = storage.getVlogUserInfo(); + let userId = ''; + if (myUserInfo != null) { + userId = myUserInfo.id; + this.userId = userId; + } + const result = await vlogList(page, 10, userId).catch((err) => { + uni.stopPullDownRefresh(); + }); + uni.stopPullDownRefresh(); + console.log(result); + if (result.data.status == 200) { + let vlogList = result.data.data.rows; + // 缺：该条视频是否被喜欢过 + let totalPage = result.data.data.total; + // me.playerList = vlogList; + if (needClearList) { + me.playerList = []; + } + me.playerList = me.playerList.concat(vlogList); + me.page = page; + me.totalPage = totalPage; + + if (needClearList) { + me.setThisVlogInfo(); + me.freshCommentCounts(); + } + } else { + uni.showToast({ + title: result.data.msg, + icon: 'none', + duration: 3000 + }); + } + }, + + doplay: function (time) { + if (time > 0) { + this.playerList[this.playerCur].play = true; + } + }, + onchange: function (index) { + console.log(index); + console.log(this.playerCur); + if (index != this.playerCur) { + this.playerList[this.playerCur].play = false; + this.playerCur = index; + this.playStatus = true; + this.progressWidth = 0; + } + this.progressFlag = true; + // let timer = setTimeout(() => { + // this.progressFlag = true; + // clearTimeout(timer); + // }, 20); + this.refreshVlogCounts(); + this.setThisVlogInfo(); + this.freshCommentCounts(); + }, + + // 设置当前vlog的信息 + setThisVlogInfo() { + var me = this; + var currentIndex = me.playerCur; + var vlog = me.playerList[currentIndex]; + this.thisVlog = vlog; + this.thisVlogId = vlog.vlogId; + this.thisVlogerId = vlog.vlogerId; + }, + + async refreshVlogCounts() { + // 查询当前点赞数，重新赋值给当前视频 + var me = this; + var currentIndex = me.playerCur; + var vlog = me.playerList[currentIndex]; + var result = await vlogTotalLikedCounts(vlog.vlogId); + if (result.data.status == 200) { + var counts = result.data.data; + me.reChangeVlogLikedCountsInPlayList(vlog.vlogId, counts); + } + }, + + reChangeVlogLikedCountsInPlayList(vlogId, counts) { + var me = this; + var playerList = me.playerList; + + // 关注以后，循环当前playerList，修改对应粉丝关系的doIFollowVloger改为true + for (var i = 0; i < playerList.length; i++) { + var vlog = playerList[i]; + if (vlog.vlogId == vlogId) { + vlog.likeCounts = counts; + playerList.splice(i, 1, vlog); + } + } + me.playerList = playerList; + }, + + commentToggle() { + this.$refs.comment.open(); + uni.hideTabBar({ + animation: true + }); + }, + shareToggle() { + this.$refs.share.open(); + uni.hideTabBar({ + animation: true + }); + } + } +}; + + + diff --git a/components/vlog/videoDetail.vue b/components/vlog/videoDetail.vue index e57d1775..341fedae 100755 --- a/components/vlog/videoDetail.vue +++ b/components/vlog/videoDetail.vue @@ -1,184 +1,235 @@ diff --git a/components/vlog/videoFollowComp.vue b/components/vlog/videoFollowComp.vue index b6a97f7a..c5b6c046 100755 --- a/components/vlog/videoFollowComp.vue +++ b/components/vlog/videoFollowComp.vue @@ -1,739 +1,999 @@ - - - - diff --git a/pages/me/vlog.vue b/pages/me/vlog.nvue similarity index 100% rename from pages/me/vlog.vue rename to pages/me/vlog.nvue diff --git a/pages/me/vlogerInfo.nvue b/pages/me/vlogerInfo.nvue new file mode 100755 index 00000000..2322906e --- /dev/null +++ b/pages/me/vlogerInfo.nvue @@ -0,0 +1,687 @@ + + + + + diff --git a/pages/me/vlogerInfo.vue b/pages/me/vlogerInfo.vue deleted file mode 100755 index e69de29b..00000000 diff --git a/pages/passport/login.vue b/pages/passport/login.vue index 059f4c4c..ab0d8f4b 100644 --- a/pages/passport/login.vue +++ b/pages/passport/login.vue @@ -1,717 +1,780 @@ - - - - - \ No newline at end of file + ], + showBack: false, + enabuleFetchCode: false, + enabulePrivacy: false, //隐私政策 + mobile: '', //手机号 + code: '', //验证码 + inputStyle: { + height: '104rpx', + 'border-bottom': '1rpx solid #D8D8D8', + 'letter-spacing': '1rpx', + 'font-size': '40rpx', + 'line-height': '40rpx', + color: '#333' + }, + placeholderStyle: 'font-size: 32rpx;line-height: 32rpx;color: #999999;', + loginList: [ + //第三方登录集合 + { + icon: 'weixin-fill', + color: '#00a327', + title: '微信', + code: 'WECHAT' + }, + { + icon: 'qq-fill', + color: '#38ace9', + title: 'QQ', + code: 'QQ' + }, + { + icon: 'apple-fill', + color: '#000000', + title: 'Apple', + code: 'APPLE' + } + ], + initurl: false + }; + }, + + onShow() { + //#ifdef H5 + let isWXBrowser = /micromessenger/i.test(navigator.userAgent); + if (isWXBrowser) { + webConnect('WECHAT').then((res) => { + let data = res.data; + if (data.success) { + window.location = data.result; + } + }); + } + //#endif + }, + + mounted() { + // #ifndef APP-PLUS + //判断是否微信浏览器 + var ua = window.navigator.userAgent.toLowerCase(); + if (ua.match(/MicroMessenger/i) == 'micromessenger') { + this.wechatLogin = true; + return; + } + // #endif + /** + * 条件编译判断当前客户端类型 + */ + //#ifdef H5 + this.clientType = 'H5'; + //#endif + + //#ifdef APP-PLUS + this.clientType = 'APP'; + /**如果是app 加载支持的登录方式*/ + let _this = this; + uni.getProvider({ + service: 'oauth', + success: (result) => { + _this.loginList = result.provider.map((value) => { + //展示title + let title = ''; + //系统code + let code = ''; + //颜色 + let color = '#8b8b8b'; + //图标 + let icon = ''; + //uni 联合登录 code + let appcode = ''; + switch (value) { + case 'weixin': + icon = 'weixin-circle-fill'; + color = '#00a327'; + title = '微信'; + code = 'WECHAT'; + break; + case 'qq': + icon = 'qq-circle-fill'; + color = '#38ace9'; + title = 'QQ'; + code = 'QQ'; + break; + case 'apple': + icon = 'apple-fill'; + color = '#000000'; + title = 'Apple'; + code = 'APPLE'; + break; + } + return { + title: title, + code: code, + color: color, + icon: icon, + appcode: value + }; + }); + }, + fail: (error) => { + uni.showToast({ + title: '获取登录通道失败' + error, + duration: 2000, + icon: 'none' + }); + } + }); + //#endif + + //特殊平台，登录方式需要过滤 + // #ifdef H5 + this.methodFilter(['QQ']); + // #endif + + //微信小程序，只支持微信登录 + // #ifdef MP-WEIXIN + this.methodFilter(['WECHAT']); + // #endif + }, + watch: { + current(val) { + val ? (this.showBack = true) : (this.showBack = false); + }, + mobile: { + handler(val) { + if (val.length == 11) { + this.enabuleFetchCode = true; + } + } + }, + + async flage(val) { + if (val) { + if (this.$refs.uCode.canGetCode) { + // 向后端请求验证码 + uni.showLoading({}); + let res = await sendMobile(this.mobile); + uni.hideLoading(); + // 这里此提示会被this.start()方法中的提示覆盖 + if (res.data.success) { + this.current = 1; + this.$refs.uCode.start(); + } else { + uni.showToast({ + title: res.data.message, + duration: 2000, + icon: 'none' + }); + this.flage = false; + } + } else { + this.$u.toast('请倒计时结束后再发送'); + } + } else { + this.$refs.verification.hide(); + } + } + }, + onLoad(options) { + if (options.init == 'index') { + this.initurl = true; + } + console.log(options); + if (options && options.state) { + this.stateLogin(options.state); + } + }, + methods: { + customback() { + if (this.initurl) { + uni.switchTab({ + url: '/pages/tabbar/vlog/index' + }); + } else { + uni.navigateBack(); + } + }, + //联合信息返回登录 + stateLogin(state) { + loginCallback(state).then((res) => { + console.log(res); + let data = res.data; + if (data.success) { + storage.setAccessToken(data.result.accessToken); + storage.setRefreshToken(data.result.refreshToken); + // 登录成功 + uni.showToast({ + title: '登录成功!', + icon: 'none' + }); + getUserInfo().then((user) => { + storage.setUserInfo(user.data.result); + storage.setHasLogin(true); + }); + getCurrentPages().length > 1 + ? uni.navigateBack({ + delta: getCurrentPages().length - 2 + }) + : uni.switchTab({ + url: '/pages/tabbar/vlog/index' + }); + } + }); + }, + /** 根据参数显示登录模块 */ + methodFilter(code) { + let way = []; + this.loginList.forEach((item) => { + if (code.length != 0) { + code.forEach((val) => { + if (item.code == val) { + way.push(item); + } + }); + } else { + uni.showToast({ + title: '配置有误请联系管理员', + duration: 2000, + icon: 'none' + }); + } + }); + this.loginList = way; + }, + //非h5 获取openid + async nonH5OpenId(item) { + console.log(item); + let _this = this; + //获取各个openid + await uni.login({ + provider: item.appcode, + // scopes: 'snsapi_userinfo', + success: function (res) { + uni.setStorageSync('type', item.code); + //微信小程序意外的其它方式直接在storage中写入openid + // #ifndef MP-WEIXIN + uni.setStorageSync('openid', res.authResult.openid); + // #endif + }, + fail(e) { + uni.showToast({ + title: '第三方登录暂不可用！', + icon: 'none', + duration: 3000 + }); + }, + complete(e) { + console.log(e); + //获取用户信息 + uni.getUserInfo({ + provider: item.appcode, + success: function (infoRes) { + //写入用户信息 + uni.setStorageSync('nickname', infoRes.userInfo.nickName); + uni.setStorageSync('avatar', infoRes.userInfo.avatarUrl); + + // #ifdef MP-WEIXIN + //微信小程序获取openid 需要特殊处理 如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id + _this.weixinMPOpenID(res).then((res) => { + //这里需要先行获得openid，再使用openid登录，小程序登录需要两步，所以这里特殊编译 + _this.goOpenidLogin('WECHAT_MP'); + }); + // #endif + + // #ifndef MP-WEIXIN + _this.goOpenidLogin('APP'); + //#endif + } + }); + } + }); + }, + //openid 登录 + goOpenidLogin(clientType) { + // 获取准备好的参数，进行登录系统 + let params = { + uuid: uni.getStorageSync('openid'), //联合登陆id + source: uni.getStorageSync('type'), //联合登陆类型 + nickname: uni.getStorageSync('nickname'), // 昵称 + avatar: uni.getStorageSync('avatar'), // 头像 + uniAccessToken: uni.getStorageSync('uni_access_token') //第三方token + }; + openIdLogin(params, clientType).then((res) => { + console.log(res); + if (!res.data.success) { + let errormessage = '第三方登录暂不可用'; + uni.showToast({ + // title: '未绑定第三方账号', + title: errormessage, + icon: 'none', + duration: 3000 + }); + return; + } else { + var infoData = res.data.result; + storage.setAccessToken(infoData.accessToken); + storage.setRefreshToken(infoData.refreshToken); + const vlogInfo = JSON.parse(infoData.tikUser); + // 将vlog的token和vlog用户信息放入缓存 + storage.setVlogToken(vlogInfo.userToken); + storage.setVlogUserInfo(vlogInfo); + // 登录成功 + uni.showToast({ + title: '第三方登录成功!', + icon: 'none' + }); + // 执行登录 + getUserInfo().then((user) => { + if (user.data.success) { + /** + * 个人信息存储到缓存userInfo中 + */ + storage.setUserInfo(user.data.result); + storage.setHasLogin(true); + + /** + * 计算出当前router路径 + * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页 + * 2.都不满足返回跳转页面 + */ + whetherNavigate(); + } else { + uni.switchTab({ + url: '/pages/tabbar/vlog/index' + }); + } + }); + } + }); + }, + //微信小程序获取openid + async weixinMPOpenID(res) { + await miniProgramLogin(res.code).then((res) => { + uni.setStorageSync('openid', res.data); + }); + }, + /**跳转到登录页面 */ + navigateLogin(connectLogin) { + // #ifdef H5 + let code = connectLogin.code; + let buyer = api.buyer; + window.open(buyer + `/passport/connect/connect/login/web/` + code, '_self'); + // #endif + // #ifdef APP-PLUS + this.nonH5OpenId(connectLogin); + // #endif + }, + + // 提交 + submit() { + /** + * 清空当前账号信息 + */ + storage.setHasLogin(false); + storage.setAccessToken(''); + storage.setRefreshToken(''); + storage.setUserInfo({}); + // 清理vlog信息 + storage.setVlogToken(''); + storage.setVlogUserInfo({}); + /** + * 执行登录 + */ + smsLogin( + { + mobile: this.mobile, + code: this.code + }, + this.clientType + ).then((res) => { + // console.log(res) + if (res.data.success) { + const infoData = res.data.result; + const vlogInfo = JSON.parse(infoData.tikUser); + storage.setAccessToken(infoData.accessToken); + storage.setRefreshToken(infoData.refreshToken); + // 将vlog的token和vlog用户信息放入缓存 + storage.setVlogToken(vlogInfo.userToken); + storage.setVlogUserInfo(vlogInfo); + + /** + * 登录成功后获取个人信息 + */ + getUserInfo().then((user) => { + // console.log(user) + if (user.data.success) { + /** + * 个人信息存储到缓存userInfo中 + */ + storage.setUserInfo(user.data.result); + storage.setHasLogin(true); + // 登录成功 + uni.showToast({ + title: '登录成功!', + icon: 'none' + }); + + /** + * 计算出当前router路径 + * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页 + * 2.都不满足返回跳转页面 + */ + whetherNavigate(); + } else { + uni.switchTab({ + url: '/pages/tabbar/home/index' + }); + } + }); + } + }); + }, + // 验证码验证 + verification(val) { + // console.log(val) + this.flage = val == this.$store.state.verificationKey ? true : false; + // console.log(this.flage) + }, + // 跳转 + navigateToPrivacy(val) { + uni.navigateTo({ + url: '/pages/mine/help/tips?type=' + val + }); + }, + // 点击获取验证码 + start() { + this.codeColor = '#999'; + this.$u.toast('验证码已发送'); + this.flage = false; + this.codeFlag = false; + + this.$refs.verification.hide(); + }, + /**点击验证码*/ + codeChange(text) { + this.tips = text; + }, + /** 结束验证码后执行 */ + end() { + this.codeColor = this.lightColor; + this.codeFlag = true; + console.log(this.codeColor); + }, + // 发送验证码 + fetchCode() { + if (!this.enabulePrivacy) { + uni.showToast({ + title: '请同意用户隐私', + duration: 2000, + icon: 'none' + }); + return false; + } + + if (!this.$u.test.mobile(this.mobile)) { + uni.showToast({ + title: '请填写正确手机号', + duration: 2000, + icon: 'none' + }); + return false; + } + if (this.tips == '重新获取验证码') { + uni.showLoading({ + title: '加载中' + }); + if (!this.codeFlag) { + let timer = setInterval(() => { + if (this.$refs.verification) { + this.$refs.verification.error(); //发送 + } + clearInterval(timer); + }, 100); + } + uni.hideLoading(); + } + if (!this.flage) { + this.$refs.verification.error(); //发送 + + return false; + } + } + } +}; + + + diff --git a/pages/search/search.nvue b/pages/search/search.nvue new file mode 100755 index 00000000..13f3d456 --- /dev/null +++ b/pages/search/search.nvue @@ -0,0 +1,274 @@ + + + + + diff --git a/pages/search/searchList.nvue b/pages/search/searchList.nvue new file mode 100755 index 00000000..7b82b210 --- /dev/null +++ b/pages/search/searchList.nvue @@ -0,0 +1,260 @@ + + + + + diff --git a/pages/tabbar/im/index.vue b/pages/tabbar/im/index.vue index bb7f34db..bf034508 100644 --- a/pages/tabbar/im/index.vue +++ b/pages/tabbar/im/index.vue @@ -1,300 +1,308 @@ @@ -303,199 +311,199 @@ uni-page-body, html, body, page { - width: 100% !important; - height: 100% !important; - overflow: hidden; + width: 100% !important; + height: 100% !important; + overflow: hidden; } .jolkp { - height: 66px; - display: flex; - font-size: 15px; - justify-content: end; - /* 设置背景图 */ - background-image: url("@/static/im/Rectangle.png"); - /* 让背景图覆盖整个元素 */ - background-size: cover; - /* 背景图不重复 */ - background-repeat: no-repeat; + height: 66px; + display: flex; + font-size: 15px; + justify-content: end; + /* 设置背景图 */ + background-image: url('@/static/im/Rectangle.png'); + /* 让背景图覆盖整个元素 */ + background-size: cover; + /* 背景图不重复 */ + background-repeat: no-repeat; } .jolkp_l { - width: 2rem; - height: 2rem; - background-image: url("@/static/im/Frame.png"); - /* 让背景图覆盖整个元素 */ - background-size: cover; - /* 背景图不重复 */ - background-repeat: no-repeat; - margin-top: 35px; - margin-right: 10px; + width: 2rem; + height: 2rem; + background-image: url('@/static/im/Frame.png'); + /* 让背景图覆盖整个元素 */ + background-size: cover; + /* 背景图不重复 */ + background-repeat: no-repeat; + margin-top: 35px; + margin-right: 10px; } .jolkp_h { - width: 2rem; - height: 2rem; - background-image: url("@/static/im/user.png"); - /* 让背景图覆盖整个元素 */ - background-size: cover; - /* 背景图不重复 */ - background-repeat: no-repeat; - margin-top: 35px; - margin-right: 20px; + width: 2rem; + height: 2rem; + background-image: url('@/static/im/user.png'); + /* 让背景图覆盖整个元素 */ + background-size: cover; + /* 背景图不重复 */ + background-repeat: no-repeat; + margin-top: 35px; + margin-right: 20px; } .jolkp_z { - width: 2rem; - height: 1.5rem; - background-image: url("@/static/im/znx.png"); - /* 让背景图覆盖整个元素 */ - background-size: cover; - /* 背景图不重复 */ - background-size: 100% 100%; + width: 2rem; + height: 1.5rem; + background-image: url('@/static/im/znx.png'); + /* 让背景图覆盖整个元素 */ + background-size: cover; + /* 背景图不重复 */ + background-size: 100% 100%; - margin-top: 35px; - margin-right: 20px; + margin-top: 35px; + margin-right: 20px; } .tiole { - margin-top: -10px; - margin-left: 105%; - color: #fff; - font-size: 14px; + margin-top: -10px; + margin-left: 105%; + color: #fff; + font-size: 14px; } .popup { - position: absolute; - top: 65px; - /* 调整弹出框的位置 */ - right: 5px; - background-color: #fff; - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - z-index: 3; + position: absolute; + top: 65px; + /* 调整弹出框的位置 */ + right: 5px; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + z-index: 3; } .popup ul { - list-style-type: none; - padding: 0; - margin: 0; + list-style-type: none; + padding: 0; + margin: 0; } .popup li { - padding: 10px 20px; - cursor: pointer; + padding: 10px 20px; + cursor: pointer; } .popup li:hover { - background-color: #f0f0f0; + background-color: #f0f0f0; } .fan { - width: 10%; - height: "100%"; - font-size: 18px; - display: flex; + width: 10%; + height: '100%'; + font-size: 18px; + display: flex; - padding: 5px; + padding: 5px; } @media screen and (device-width: 393px) and (device-height: 851px) and (-webkit-device-pixel-ratio: 3) { - .fan { - margin-right: 56% !important; - width: 10%; - height: "100%"; - font-size: 18px; - display: flex; - margin-top: 85%; - padding: 5px; - } + .fan { + margin-right: 56% !important; + width: 10%; + height: '100%'; + font-size: 18px; + display: flex; + margin-top: 85%; + padding: 5px; + } } .three { - width: 100%; - height: 10%; - display: flex; - justify-content: space-around; - align-items: center; - background: rgb(255, 255, 255); + width: 100%; + height: 10%; + display: flex; + justify-content: space-around; + align-items: center; + background: rgb(255, 255, 255); } .con { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .three_div1 { - height: 3rem; - width: 40%; - background-image: url("@/static/im/kf.png"); - background-size: 100% 100%; - background-repeat: no-repeat; - display: flex; - align-items: center; - justify-content: end; + height: 3rem; + width: 40%; + background-image: url('@/static/im/kf.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + display: flex; + align-items: center; + justify-content: end; } .three_div2 { - width: 40%; - height: 3rem; - background-image: url("@/static/im/hy.png"); - background-size: 100% 100%; - background-repeat: no-repeat; - width: 40%; + width: 40%; + height: 3rem; + background-image: url('@/static/im/hy.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + width: 40%; } .three_div3 { - height: 3rem; - background-image: url("@/static/im/da.png"); - background-size: 100% 100%; - background-repeat: no-repeat; - width: 40%; + height: 3rem; + background-image: url('@/static/im/da.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + width: 40%; } .tui-conversation-item { - /* height: 10%; */ - padding: 12px; - display: flex; - align-items: center; - cursor: pointer; - box-sizing: border-box; - overflow: hidden; - border: 1px solid #d9d9d9; - width: 98%; - margin-top: 10px; - position: relative; + /* height: 10%; */ + padding: 12px; + display: flex; + align-items: center; + cursor: pointer; + box-sizing: border-box; + overflow: hidden; + border: 1px solid #d9d9d9; + width: 98%; + margin-top: 10px; + position: relative; } .content { - display: flex; - flex: 1; - padding-left: 8px; - justify-content: end; - box-sizing: border-box; - overflow: hidden; + display: flex; + flex: 1; + padding-left: 8px; + justify-content: end; + box-sizing: border-box; + overflow: hidden; } .left { - position: relative; - width: 36px; - height: 36px; + position: relative; + width: 36px; + height: 36px; } .znx { - max-height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - overflow-y: auto; + max-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow-y: auto; } .delete-button { - position: absolute; - right: 0; - top: 0; - bottom: 0; - width: 100px; - background-color: red; - color: white; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 100px; + background-color: red; + color: white; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; } diff --git a/pages/tabbar/vlog/index.nvue b/pages/tabbar/vlog/index.nvue index f6ff22b1..a59236cc 100644 --- a/pages/tabbar/vlog/index.nvue +++ b/pages/tabbar/vlog/index.nvue @@ -1,582 +1,773 @@ - - - - \ No newline at end of file + } + } + + if (me.curIndex == 0) { + me.playLocalStatus = true; + } + if (me.curIndex == 1) { + me.playFollowStatus = true; + } + if (me.curIndex == 2) { + me.playStatus = true; + } + }, + onHide() { + var me = this; + // 显示和隐藏，需要判断根据不同tab做暂停或者隐藏 + if (me.curIndex == 0) { + me.playLocalStatus = false; + me.isDraw_lo = false; + } + if (me.curIndex == 1) { + me.playFollowStatus = false; + me.isDraw_gz = false; + } + if (me.curIndex == 2) { + me.playStatus = false; + me.isDraw_tj = false; + } + }, + + // 当前页下拉刷新 + // onPullDownRefresh() { + // var me = this; + // // 下拉刷新判断，如果是不同tab，那么组件中刷新的请求也不同 + // if (me.curIndex == 0) { + // this.$refs.videoFollowComp.displayVideoPaging(1, true); + // } else if (me.curIndex == 1) { + // this.$refs.videoComp.displayVideoPaging(1, true); + // } + + // }, + methods: { + getLocation() { + uni.getLocation({ + type: 'wg84', + success: (res) => { + console.log(res); + var latitude = res.latitude; + var longitude = res.longitude; + var location = latitude + ',' + longitude; + var key = config.aMapKey; + uni.request({ + url: 'https://apis.map.qq.com/ws/geocoder/v1/', + method: 'GET', + data: { + location, + key + }, + success: (address) => { + console.log(address); + var ad_info = address.data.result.ad_info; + var cityCode = ad_info.adcode; // 城市编码cityCode + storage.setCityCode(cityCode); + this.cityCode = cityCode; + var address_name = ad_info.district || ad_info.city; + this.tabList.forEach((i, index) => { + if (index == 0) { + i.name = address_name; + // this.selectorQuery(); + var timer = setTimeout(() => { + this.selectorQuery(); + clearTimeout(timer); + }, 300); + } + }); + } + }); + }, + fail: () => { + uni.showToast({ + icon: 'none', + title: '获取位置信息失败' + }); + // uni.showModal({ + // title:'提示', + // content:'获取位置信息失败', + // showCancel:false, + // success: (res) => { + // if(res.confirm){ + // } + // } + // }) + } + }); + }, + + // 前往搜索页面 + goSearch() { + uni.navigateTo({ + url: '/pages/search/search' + }); + }, + // ----------头部区域点击tabs + ontabtap(e) { + console.log(e); + let index = e.target.dataset.current || e.currentTarget.dataset.current; + this.isTap = true; + var currentSize = this.tabListSize[index]; + // if (obj.playerList.length === 0) { + // this.isDraw_gz = false; + // this.isDraw_lo = false; + // this.isDraw_tj = false; + // } else { + // this.isDraw_gz = preloadIndex == 1 ? true : false; + // this.isDraw_lo = preloadIndex == 0 ? true : false; + // this.isDraw_tj = preloadIndex == 2 ? true : false; + // } + this.updateIndicator(currentSize.left, currentSize.width); + this._touchTabIndex = index; + this.switchTab(index); + }, + // + selectorQuery() { + var dm = uni.createSelectorQuery().in(this); + dm.select('#head') + .boundingClientRect() + .exec((rect) => { + this._headHeight = rect[0].height; + }); + + // 查询 tabbar 宽度 + dm.in(this) + .select('#tab-bar') + .boundingClientRect() + .exec((rect) => { + this.tabbarWidth = rect[0].width; + console.log(this.tabbarWidth); + }); + // 查询 tabview 宽度 + dm.in(this) + .select('#tab-bar-view') + .boundingClientRect() + .exec((rect) => { + this.swiperWidth = rect[0].width; + console.log(this.swiperWidth); + }); + + // 因 nvue 暂不支持 class 查询 + // var queryTabSize = uni.createSelectorQuery().in(this); + var queryTabSize = dm; + for (var i = 0; i < this.tabList.length; i++) { + queryTabSize.select('#' + this.tabList[i].id).boundingClientRect(); + } + queryTabSize.exec((rects) => { + rects.forEach((rect) => { + rect.left = rect.left - 40; //修正 left 值，减去 padding-left: 40px + this.tabListSize[rect.dataset.id] = rect; + }); + console.log(this.tabListSize[this.tabIndex]); + this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width); + this.switchTab(this.tabIndex); + }); + }, + + onswiperscroll(e) { + this.isDraw_gz = false; + this.isDraw_lo = false; + this.isDraw_tj = false; + console.log(this.playStatus); + // if (this.playStatus == true) { + // this.playStatus = this._lastTabIndex == 2 ? false : true; + // } + + // this.playFollowStatus = this._lastTabIndex == 1 ? false : true; + // this.playLocalStatus = this._lastTabIndex == 0 ? false : true; + + var offsetX = e.detail.dx; + var preloadIndex = this._lastTabIndex; + if (offsetX > TAB_PRELOAD_OFFSET) { + preloadIndex++; + } else if (offsetX < -TAB_PRELOAD_OFFSET) { + preloadIndex--; + } + let prop = this.pageList[preloadIndex]; + let obj = this.$refs[prop]; + if (!obj) return; + // 点击切换 + if (this.isTap) { + return; + } + // 切换失败 + if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) { + // 是否有视频数据 + if (obj.playerList.length === 0) { + // this.loadTabData(preloadIndex); + this.isDraw_gz = false; + this.isDraw_lo = false; + this.isDraw_tj = false; + } else { + this.isDraw_gz = preloadIndex == 1 ? true : false; + this.isDraw_lo = preloadIndex == 0 ? true : false; + this.isDraw_tj = preloadIndex == 2 ? true : false; + } + return; + } + + // console.log(this.tabListSize) + var percentage = Math.abs(this.swiperWidth / offsetX); + var currentSize = this.tabListSize[this._lastTabIndex]; + var preloadSize = this.tabListSize[preloadIndex]; + var lineL = currentSize.left + (preloadSize.left - currentSize.left) / percentage; + var lineW = currentSize.width + (preloadSize.width - currentSize.width) / percentage; + this.updateIndicator(lineL, lineW); + }, + animationfinish(e) { + let index = e.detail.current; + console.log('当前索引' + index); + console.log('之前的索引' + this._lastTabIndex); + this._lastTabIndex = index; + if (this._touchTabIndex === index) { + this.isTap = false; + } + this.switchTab(index); + if (!this.tabListSize[index]) { + return; + } else { + // this.playStatus = index == 2 ? false : true; + // this.playFollowStatus = index == 1 ? true : false; + // this.playLocalStatus = index == 0 ? true : false; + this.isDraw_gz = index == 1 ? true : false; + this.isDraw_lo = index == 0 ? true : false; + this.isDraw_tj = index == 2 ? true : false; + + this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width); + } + }, + updateIndicator(left, width) { + // console.log(left) + this.indicatorLineLeft = left; + this.indicatorLineWidth = width; + }, + + switchTab(index) { + if (this.tabIndex === index) { + return; + } + // console.dir(this.$refs) + let props = this.pageList[index]; + console.log(props); + console.log(index); + let obj = this.$refs[props]; + // if (obj.playerList.length === 0) { + // var info = storage.getVlogUserInfo() || null + // if(info!=null&&index==0){ + // obj.displayVideoPaging(this.page + 1, true); + // } + // } + + obj.setScrollRef(this._headHeight); + + console.log(this.cacheTab); + // 缓存 tabId + if (obj.playerList.length > MAX_CACHE_DATA) { + let isExist = this.cacheTab.indexOf(this.tabIndex); + if (isExist < 0) { + this.cacheTab.push(this.tabIndex); + } + } + this.tabIndex = index; + this.curIndex = index; + this.scrollTabTo(index); + this.scrollInto = this.tabList[index].id; + + // 释放 tabId + if (this.cacheTab.length > MAX_CACHE_PAGE) { + let cacheIndex = this.cacheTab[0]; + this.clearTabData(cacheIndex); + this.cacheTab.splice(0, 1); + } + // const el = this.$refs['tabitem' + index][0]; + // animation.transition(el, { + // duration: 3000, //ms + // timingFunction: 'ease', + // delay: 1000 //ms + // }); + }, + scrollTabTo(index) { + console.log(index); + const el = this.$refs['tabitem' + index][0]; + let offset = 0; + // TODO fix ios offset + if (index > 0) { + offset = this.tabbarWidth / 2 - this.tabListSize[index].width / 2; + if (this.tabListSize[index].right < this.tabbarWidth / 2) { + offset = this.tabListSize[0].width; + } + } + dom.scrollToElement(el, { + offset: -offset + }); + }, + + //---------------------------- + + // 左滑右滑选项卡改变选中状态 + changeTopTab: function (e) { + var current = e.detail.current; + this.curIndex = current; + this.tabIndex = current; + let timer = setTimeout(() => { + this.playLocalStatus = this.curIndex === 0 ? true : false; + this.playFollowStatus = this.curIndex === 1 ? true : false; + this.playStatus = this.curIndex === 2 ? true : false; + clearTimeout(timer); + }, 10); + }, + + // 下拉刷新，改变head的字样显示 + showLoading() { + this.isLoading = true; + }, + hideLoading() { + this.isLoading = false; + }, + letFollowVideoPause() { + this.playFollowStatus = false; + } + } +}; + + + diff --git a/static/images/playvd.png b/static/images/playvd.png new file mode 100644 index 00000000..4dba79b4 Binary files /dev/null and b/static/images/playvd.png differ diff --git a/utils/storage.js b/utils/storage.js index b2a14228..ba5ce864 100644 --- a/utils/storage.js +++ b/utils/storage.js @@ -10,7 +10,13 @@ const FACE_LOGIN = isDev ? "face_login_dev" : "face_login"; const FINGER_LOGIN = isDev ? "finger_login_dev" : "finger_login"; const CART_BACKBTN = isDev ? "cart_backbtn_dev" : "cart_backbtn"; const AFTERSALE_DATA = isDev ? "aftersale_data_dev" : "aftersale_data"; -export default { +export default { + setCityCode(val) { + return uni.setStorageSync('cityCode',val) + }, + getCityCode(){ + return uni.getStorageSync('cityCode') + }, /** * 写入RefreshVlogIndex */ diff --git a/vue.config.js b/vue.config.js index 904355d0..0b0be2f1 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,12 +1,12 @@ -const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default; +// const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default; module.exports = { parallel: false, configureWebpack: { plugins: [ - ScriptSetup({ - /* options */ - }), + // ScriptSetup({ + // /* options */ + // }), ], }, chainWebpack(config) {