abu/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vlog_progress_pause_ios_ad

Browse Source
This commit is contained in:
abu 2025-04-12 17:11:06 +08:00
parent c55d02570e
commit 885503a767
84 changed files with 7603 additions and 3949 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
api/vlog.js
View File

@ -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}
});
}

628
components/vlog/videoComp.vue
View File

@ -1,70 +1,186 @@
<template>
<view style="flex: 1">
<!-- <uni-list @change="onchange" :num="playerList.length"> -->
<list ref="list" :pagingEnabled="true" :show-scrollbar="false" @scroll="listScroll" @scrollend="scroll"
:scrollable="true">
<refresh @pullingdown="onpullingdown" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
<list
ref="list"
:pagingEnabled="true"
:show-scrollbar="false"
@scroll="listScroll"
@scrollend="scroll"
:scrollable="!isDragging"
>
<refresh
@pullingdown="onpullingdown"
@refresh="onrefresh"
:display="refreshing ? 'show' : 'hide'"
>
<text class="refresh-info-txt"></text>
<loading-indicator></loading-indicator>
</refresh>
<cell :recycle="false" v-for="(item, index) in playerList" :key="index" :data-index="index"
:style="{ height: screenHeight + 'px' }">
<!-- <uni-video :src="item.url" :playStatus="playStatus" :screenHeight="screenHeight" v-if="playerCur === index" @play="onplay"></uni-video> -->
<video ref="myVideo" id="myVideo" :object-fit="item.width >= item.height ? 'contain' : 'fill'"
:src="item.url" :controls="false" :enable-progress-gesture="false"
v-if="playerCur === index" loop autoplay show-loading="true" :http-cache="true"
style="width: 750rpx" :style="{ height: screenHeight + 'px' }" @click="playOrPause" @play="onplay"
@error="onerror" @timeupdate="timeupdate"></video>
<image :lazy-load="true" :fade-show="false" v-if="!item.play" :src="item.cover"
<cell
:recycle="false"
:class="isIOS ? 'abs-box-ios' : ''"
v-for="(item, index) in playerList"
:key="index"
:data-index="index"
:style="{ height: screenHeight + 'px' }"
>
<video
ref="myVideo"
id="myVideo"
:object-fit="item.width >= item.height ? 'contain' : 'fill'"
preload="metadata"
:src="item.url"
:controls="false"
:enable-progress-gesture="false"
v-if="playerCur === index"
autoplay
loop
:http-cache="true"
style="width: 750rpx"
:style="{ height: screenHeight + 'px' }"
@click="playOrPause"
@play="onplay"
@error="onerror"
@timeupdate="onTimeUpdate"
></video>
<!-- 首帧图 -->
<image
:fade-show="false"
v-if="!item.play"
:src="item.firstFrameImg"
:mode="item.width >= item.height ? 'aspectFit' : 'scaleToFill'"
style="width: 750rpx; filter: blur(10px)" :style="{ height: screenHeight + 'px' }"></image>
<!--<image :lazy-load="true" :fade-show="false" v-if="!item.play" :src="item.cover" mode="" style="width: 750rpx;position:absolute;left: 0;right: 0;top: 0;bottom: 0; filter: blur(10px);" :style="{height: screenHeight+ 'px'}"></image>-->
style="width: 750rpx; filter: blur(10px)"
:style="{ height: screenHeight + 'px' }"
></image>
<!-- 播放按钮 -->
<view
v-if="!isIOS && !playStatus && item.play"
class="abs-box-ad"
:style="{ height: screenHeight + 'px' }"
>
<image
src="/static/images/playvd.png"
class="play-btn"
></image>
</view>
<image
v-if="isIOS && !playStatus && item.play"
src="/static/images/playvd.png"
class="play-btn"
></image>
<!-- 进度条 -->
<view
class="progress-bar"
@touchstart="startDrag"
@touchmove="onDragging"
@panend="endDrag"
v-if="progressFlag"
>
<view
v-if="progressFlag"
class="progress-background"
></view>
<view
v-if="progressFlag"
class="progress-foreground"
:class="isDragging ? '' : 'anm'"
:style="{ width: progressWidth + 'px' }"
></view>
</view>
<!-- 浮动时间提示 -->
<view
class="float-time"
v-if="isDragging"
:style="{ left: floatLeft + 'px' }"
>
<text style="color: #fff">{{ formatTime(floatTime) }}</text>
</view>
<view class="publish-info-box">
<view class="">
<text class="publish-info-vloger-name">@{{ item.vlogerName }}</text>
<text class="publish-info-content">{{ item.content }}</text>
<view class="publish-info-music-box">
<image src="/static/images/icon-fire.png" class="icon-fire"></image>
<image
src="/static/images/icon-fire.png"
class="icon-fire"
></image>
<text class="muisc-words">{{ item.vlogerName }}的原声创作</text>
</view>
</view>
<view class="" style="flex-direction: row">
<image src="/static/images/cd-play-4.gif" style="width: 150rpx;height: 150rpx;opacity: 0.8;">
</image>
<image v-if="!isIOS" src="/static/images/icon-cd.png" class="play-cd"
style="width: 120rpx; height: 120rpx"></image>
<image v-if="isIOS" :src="
'https://imooc-news.oss-cn-shanghai.aliyuncs.com/image/cd-play-4.gif?time=' +
times
" class="play-cd"></image>
<view
class=""
style="flex-direction: row"
>
<image
src="/static/images/cd-play-4.gif"
style="width: 150rpx; height: 150rpx; opacity: 0.8"
></image>
<image
v-if="!isIOS"
src="/static/images/icon-cd.png"
class="play-cd"
></image>
<image
v-if="isIOS"
:src="'https://imooc-news.oss-cn-shanghai.aliyuncs.com/image/cd-play-4.gif?time=' + times"
class="play-cd"
></image>
</view>
</view>
<!-- 视频展示右侧的操作按钮，头像 - 点赞 - 评论 - 转发 -->
<view class="operation-box">
<view class="operation-face-box">
<image :src="item.vlogerFace" class="user-face" @click="goUserInfoSeeSee(item.vlogerId)">
</image>
<image
:src="item.vlogerFace"
class="user-face"
@click="goUserInfoSeeSee(item.vlogerId)"
></image>
</view>
<image v-if="!item.doIFollowVloger && userId != thisVlogerId" src="/static/images/icon-follow.png"
@click="followMe(item.vlogerId)" class="follow-me"></image>
<image
v-if="!item.doIFollowVloger && userId != thisVlogerId"
src="/static/images/icon-follow.png"
@click="followMe(item.vlogerId)"
class="follow-me"
></image>
<view class="like-box">
<image v-if="!item.doILikeThisVlog" src="/static/images/icon-unlike.png"
@click="likeOrDislikeVlog(1)" class="icon"></image>
<image v-if="item.doILikeThisVlog" src="/static/images/icon-like.png"
@click="likeOrDislikeVlog(0)" class="icon"></image>
<image
v-if="!item.doILikeThisVlog"
src="/static/images/icon-unlike.png"
@click="likeOrDislikeVlog(1)"
class="icon"
></image>
<image
v-if="item.doILikeThisVlog"
src="/static/images/icon-like.png"
@click="likeOrDislikeVlog(0)"
class="icon"
></image>
<text class="some-counts">
{{ getGraceNumber(item.likeCounts) }}
</text>
</view>
<view class="comment-and-share-box">
<image src="/static/images/icon-comments.png" @click="commentToggle" class="icon"></image>
<image
src="/static/images/icon-comments.png"
@click="commentToggle"
class="icon"
></image>
<!-- <text class="some-counts">{{item.commentsCounts}}</text> -->
<text class="some-counts">
{{ getGraceNumber(thisVlogTotalComentCounts) }}
</text>
</view>
<view class="comment-and-share-box">
<image src="/static/images/icon-share.png" @click="shareToggle" class="icon"></image>
<image
src="/static/images/icon-share.png"
@click="shareToggle"
class="icon"
></image>
<text class="some-counts">分享</text>
</view>
</view>
@ -74,50 +190,56 @@
<view>
<!-- 底部窗口popup -->
<uni-popup ref="comment" type="comment">
<uni-popup-comments :thisVlogerId="thisVlogerId" :thisVlogId="thisVlogId"></uni-popup-comments>
<uni-popup
ref="comment"
type="comment"
>
<uni-popup-comments
:thisVlogerId="thisVlogerId"
:thisVlogId="thisVlogId"
></uni-popup-comments>
</uni-popup>
<uni-popup ref="share" background-color="#fff" type="share">
<uni-popup-share :thisVlogerId="thisVlogerId" :thisVlogId="thisVlogId" :vlogUrl="thisVlog.url"
:isPrivate="thisVlog.isPrivate"></uni-popup-share>
<uni-popup
ref="share"
background-color="#fff"
type="share"
>
<uni-popup-share
:thisVlogerId="thisVlogerId"
:thisVlogId="thisVlogId"
:vlogUrl="thisVlog.url"
:isPrivate="thisVlog.isPrivate"
></uni-popup-share>
</uni-popup>
</view>
</view>
</template>
<script>
import storage from "@/utils/storage.js"; //缓存
import {
graceNumber
} from '@/utils/tools.js'
import api from "@/config/api.js";
import {
vlogList,
vlogLike,
vlogUnLike,
vlogComment,
vlogFollow,
vlogTotalLikedCounts
} from "@/api/vlog";
export default {
let system = uni.getSystemInfoSync();
import storage from '@/utils/storage.js'; //缓存
import { graceNumber } from '@/utils/tools.js';
import api from '@/config/api.js';
import { vlogList, vlogLike, vlogUnLike, vlogComment, vlogFollow, vlogTotalLikedCounts } from '@/api/vlog';
export default {
props: {
screenHeight: {
default: 0,
default: 0
},
src: {
default: false,
default: false
},
playStatus: {
default: false,
default: false
},
videoList: {
default: [],
default: []
},
refreshList: {
default: [],
default: []
},
pagingList: {
default: [],
default: []
},
//
pid: {
@ -127,17 +249,20 @@
parentId: {
type: String,
default: ''
},
progressFlag: {
default: false
}
},
data() {
return {
thisVlog: {}, // 当前的短视频对象
thisVlogId: "", // 当前的短视频主键id
thisVlogerId: "", // 当前的短视频博主的主键id
userId: "", // 当前用户id
thisVlogId: '', // 当前的短视频主键id
thisVlogerId: '', // 当前的短视频博主的主键id
userId: '', // 当前用户id
refreshing: false,
showRefreshLoading: "hide",
showRefreshLoading: 'hide',
playerCur: 0,
page: 0,
@ -153,13 +278,22 @@
times: new Date().getTime(),
objectFit: "fill",
isIOS: uni.getSystemInfoSync().platform == "ios",
objectFit: 'fill',
isIOS: uni.getSystemInfoSync().platform == 'ios',
duration: 0,
currentTime: 0,
progressWidth: 0,
floatTime: 0,
floatLeft: 0,
isDragging: false
// progressFlag: false
};
},
created() {
console.log(this.isIOS);
if (!this.isIOS) {
this.objectFit = "cover";
this.objectFit = 'cover';
}
let myUserInfo = storage.getVlogUserInfo();
@ -169,8 +303,8 @@
// 查询首页短视频列表
this.displayVideoPaging(this.page + 1, true);
this.videoContext = uni.createVideoContext("myVideo", this.$refs.myVideo);
console.log(this.videoContext)
this.videoContext = uni.createVideoContext('myVideo', this.$refs.myVideo);
console.log(this.videoContext);
},
onReady() {},
watch: {
@ -189,15 +323,73 @@
playStatus(val) {
var me = this;
console.log(val);
if (!val) {
me.videoContext.pause();
} else {
me.videoContext.play();
}
},
}
},
methods: {
//进度start
formatTime(sec) {
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60);
return `${m}:${s < 10 ? '0' : ''}${s}`;
},
onTimeUpdate(e) {
// console.log(e);
if (e.detail.currentTime > 0.2) {
this.doplay(e.detail.currentTime);
}
if (this.isDragging) return;
this.currentTime = e.detail.currentTime;
this.duration = e.detail.duration;
this.updateProgress();
},
updateProgress() {
const percent = this.currentTime / this.duration;
this.progressWidth = Math.floor(system.screenWidth * percent);
// console.log(this.progressWidth);
},
startDrag(e) {
console.log('触发开始拖动');
this.isDragging = true;
},
onDragging(e) {
console.log(this.isDragging);
console.log('拖动中');
const touchX = e.touches[0].pageX;
const max = system.screenWidth;
const clampedX = Math.max(0, Math.min(touchX, max));
this.progressWidth = clampedX;
const percent = clampedX / max;
this.floatTime = percent * this.duration;
// 浮动提示偏移，避免越界
const floatBoxWidth = 60;
this.floatLeft = Math.max(0, Math.min(clampedX - floatBoxWidth / 2, max - floatBoxWidth));
},
endDrag() {
console.log('拖动结束');
const percent = this.progressWidth / system.screenWidth;
const seekTime = percent * this.duration;
if (!this.duration || isNaN(seekTime)) {
console.warn('duration 未就绪或 seekTime 非法');
this.isDragging = false;
return;
}
// 避免重复 seek
if (Math.abs(seekTime - this.currentTime) > 0.2) {
this.videoContext.seek(seekTime);
}
this.isDragging = false;
},
//进度end
//------------addd
setScrollRef(height) {
if (this.$refs['list'].setSpecialEffects) {
@ -223,10 +415,10 @@
async freshCommentCounts() {
var me = this;
var currentIndex = me.playerCur;
console.log('currentIndex', currentIndex)
console.log('currentIndex', currentIndex);
var vlog = me.playerList[currentIndex];
var vlogId = vlog.vlogId;
var result = await vlogComment(vlogId)
var result = await vlogComment(vlogId);
if (result.data.status == 200) {
me.thisVlogTotalComentCounts = result.data.data;
} else {
@ -235,16 +427,15 @@
},
async likeOrDislikeVlog(isLike) {
var me = this;
var myUserInfo = storage.getVlogUserInfo() || null
var myUserInfo = storage.getVlogUserInfo() || null;
var currentIndex = me.playerCur;
var vlog = me.playerList[currentIndex];
if (isLike == 1) {
// 喜欢/点赞视频
if (myUserInfo == null) {
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom",
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return;
}
@ -253,28 +444,25 @@
userId,
vlogerId: vlog.vlogerId,
vlogId: vlog.vlogId
})
console.log(result)
});
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,
icon: 'none',
duration: 3000
});
}
} else if (isLike == 0) {
// 取消喜欢/点赞视频
var myUserInfo = storage.getVlogUserInfo() || null
var myUserInfo = storage.getVlogUserInfo() || null;
if (myUserInfo == null) {
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom",
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return;
}
@ -284,15 +472,15 @@
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,
icon: 'none',
duration: 3000
});
}
}
@ -363,53 +551,54 @@
// 关注博主
async followMe(vlogerId) {
var me = this;
var myUserInfo = storage.getVlogUserInfo()||null
var myUserInfo = storage.getVlogUserInfo() || null;
if (myUserInfo == null) {
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom",
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return;
}
var userId = myUserInfo.id;
var result = await vlogFollow(userId, vlogerId)
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,
icon: 'none',
duration: 3000
});
}
},
// 查看用户详情
goUserInfoSeeSee(userId) {
uni.setStorageSync("userPageId", userId);
const info = storage.getVlogUserInfo() || null
uni.setStorageSync('userPageId', userId);
const info = storage.getVlogUserInfo() || null;
if (info == null) {
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom",
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return
return;
}
let myUserId = info.id
let myUserId = info.id;
if (myUserId == userId) {
uni.switchTab({
url: "/pages/me/me",
url: '/pages/me/me'
});
} else {
uni.navigateTo({
url: "/pages/me/vlogerInfo?userPageId=" + userId,
url: '/pages/me/vlogerInfo?userPageId=' + userId
});
}
},
listScroll(e) {
// console.log(e.contentOffset.y)
// console.log(e.contentOffset.y);
this.progressFlag = false;
if (e.contentOffset.y > 0) {
this.$emit("showLoading");
this.$emit('showLoading');
}
},
@ -435,7 +624,7 @@
// 下拉刷新的过程中，改变头部tab显示的字样
onpullingdown(e) {
console.log('下拉中')
console.log('下拉中');
},
async onrefresh(e) {
// console.log('开始')
@ -446,32 +635,38 @@
// uni.stopPullDownRefresh()
// this.refreshing = false;
// this.$emit("hideLoading");
console.log('开始')
console.log('开始');
this.refreshing = true;
// 通过list组件的下拉刷新触发当前所在页面的下拉刷新
uni.startPullDownRefresh();
await this.displayVideoPaging(1,true)
uni.stopPullDownRefresh()
await this.displayVideoPaging(1, true);
uni.stopPullDownRefresh();
this.refreshing = false;
this.$emit("hideLoading");
this.$emit('hideLoading');
},
onplay: function(e) {
if (uni.getSystemInfoSync().platform == "ios") {
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);
}
},
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 {
@ -480,7 +675,7 @@
this.playStatus = !playStatus;
},
scroll: function(e) {
scroll: function (e) {
let originalIndex = this.currentIndex;
let isNext = false;
if (e.contentOffset.y < this.contentOffsetY) {
@ -489,13 +684,11 @@
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)
);
var ht = Number(e.contentSize.height);
console.log(ht);
this.currentIndex = Math.round(Math.abs(this.contentOffsetY) / (ht / num));
} else {
this.currentIndex = 0
this.currentIndex = 0;
}
this.onchange(this.currentIndex);
@ -503,8 +696,8 @@
// 判断如果视频列表总长度-当前下标，少于3个，则开始分页查询后续的视频，并且追加到现有list中
if (this.playerList.length - this.currentIndex < 3) {
// 如果要分页的page和总数totalPage相等，则没有更多
if (this.page == this.totalPage|| this.totalPage==0) {
this.$emit('hideLoading')
if (this.page == this.totalPage || this.totalPage == 0) {
this.$emit('hideLoading');
return;
}
this.displayVideoPaging(this.page + 1, false);
@ -514,18 +707,18 @@
// 分页查询新的list, 并且追加到现有list中
async displayVideoPaging(page, needClearList) {
// 查询首页短视频列表
let me = this
let myUserInfo = storage.getVlogUserInfo()
let userId = "";
let me = this;
let myUserInfo = storage.getVlogUserInfo();
let userId = '';
if (myUserInfo != null) {
userId = myUserInfo.id;
this.userId = userId
this.userId = userId;
}
const result = await vlogList(page, 10, userId).catch(err => {
const result = await vlogList(page, 10, userId).catch((err) => {
uni.stopPullDownRefresh();
})
});
uni.stopPullDownRefresh();
console.log(result)
console.log(result);
if (result.data.status == 200) {
let vlogList = result.data.data.rows;
// 缺：该条视频是否被喜欢过
@ -545,26 +738,31 @@
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
doplay: function(time) {
doplay: function (time) {
if (time > 0) {
this.playerList[this.playerCur].play = true;
}
},
onchange: function(index) {
console.log(index)
console.log(this.playerCur)
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();
@ -585,7 +783,7 @@
var me = this;
var currentIndex = me.playerCur;
var vlog = me.playerList[currentIndex];
var result = await vlogTotalLikedCounts(vlog.vlogId)
var result = await vlogTotalLikedCounts(vlog.vlogId);
if (result.data.status == 200) {
var counts = result.data.data;
me.reChangeVlogLikedCountsInPlayList(vlog.vlogId, counts);
@ -610,45 +808,113 @@
commentToggle() {
this.$refs.comment.open();
uni.hideTabBar({
animation: true,
animation: true
});
},
shareToggle() {
this.$refs.share.open();
uni.hideTabBar({
animation: true,
animation: true
});
},
},
};
}
}
};
</script>
<style scoped>
.icon {
.progress-bar {
height: 60rpx;
width: 750rpx;
display: flex;
align-items: center;
position: fixed;
bottom: 0;
z-index: 99999;
}
.progress-background {
position: absolute;
bottom: 0;
width: 750rpx;
height: 2px;
background-color: #ccc;
z-index: 3;
pointer-events: none;
}
.progress-foreground {
z-index: 2;
height: 2px;
background-color: #fff;
position: absolute;
bottom: 0;
left: 0;
pointer-events: none;
}
.anm {
transition: width 0.25s linear;
}
.float-time {
position: fixed;
bottom: 2px;
width: 60px;
height: 30px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
align-items: center;
justify-content: center;
line-height: 30px;
font-size: 12px;
border-radius: 4px;
z-index: 5;
}
.abs-box-ad {
width: 750rpx;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.abs-box-ios {
position: relative;
width: 750rpx;
display: flex;
justify-content: center;
align-items: center;
}
.play-btn {
position: absolute;
width: 120rpx;
height: 120rpx;
}
.icon {
width: 80rpx;
height: 80rpx;
opacity: 0.9;
}
}
.user-face {
.user-face {
width: 100rpx;
height: 100rpx;
border-radius: 100rpx;
}
}
.play-cd {
.play-cd {
width: 150rpx;
height: 150rpx;
opacity: 0.8;
}
}
.refresh-info-txt {
.refresh-info-txt {
color: #f1f1f1;
text-align: center;
font-size: 12px;
}
}
.publish-info-box {
.publish-info-box {
position: absolute;
bottom: 200rpx;
left: 0;
@ -658,21 +924,21 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.publish-info-vloger-name {
.publish-info-vloger-name {
color: #ffffff;
font-size: 40rpx;
font-weight: 600;
padding: 10rpx;
}
}
.publish-info-music-box {
.publish-info-music-box {
flex-direction: row;
align-items: center;
}
}
.publish-info-content {
.publish-info-content {
color: #ffffff;
font-size: 28rpx;
font-weight: 400;
@ -680,29 +946,29 @@
lines: 5;
width: 520rpx;
text-overflow: ellipsis;
}
}
.icon-fire {
.icon-fire {
width: 36rpx;
height: 36rpx;
}
}
.muisc-words {
.muisc-words {
color: #ffffff;
font-size: 28rpx;
padding: 10rpx;
width: 400rpx;
}
}
.some-counts {
.some-counts {
font-size: 24rpx;
font-weight: 500;
text-align: center;
color: #ffffff;
margin-top: 2rpx;
}
}
.operation-box {
.operation-box {
position: absolute;
top: 0;
bottom: 0;
@ -710,31 +976,31 @@
align-items: center;
justify-content: center;
padding-right: 20rpx;
}
}
.operation-face-box {
.operation-face-box {
border-radius: 100rpx;
border-color: #ffffff;
border-width: 3rpx;
}
}
.follow-me {
.follow-me {
width: 40rpx;
height: 40rpx;
border-radius: 10px;
position: relative;
top: -20rpx;
}
}
.like-box {
.like-box {
flex-direction: column;
align-items: center;
margin-top: 30rpx;
}
}
.comment-and-share-box {
.comment-and-share-box {
flex-direction: column;
align-items: center;
margin-top: 45rpx;
}
}
</style>

383
components/vlog/videoDetail.vue
View File

@ -5,13 +5,15 @@
:show-scrollbar="false"
@scroll="listScroll"
@scrollend="scroll"
:scrollable="true">
:scrollable="true"
>
<cell
:recycle="false"
v-for="(item, index) in playerList"
:key="index"
:data-index="index"
:style="{ height: screenHeight + 'px' }">
:style="{ height: screenHeight + 'px' }"
>
<video
ref="videoDetail"
id="videoDetail"
@ -28,15 +30,54 @@
@click="playOrPause"
@play="onplay"
@error="onerror"
@timeupdate="timeupdate"></video>
@timeupdate="timeupdate"
></video>
<image
:lazy-load="true"
:fade-show="false"
v-if="!item.play"
:src="item.cover"
:src="item.firstFrameImg"
:mode="item.width >= item.height ? 'aspectFit' : 'scaleToFill'"
style="width: 750rpx; filter: blur(10px)"
:style="{ height: screenHeight + 'px' }"></image>
:style="{ height: screenHeight + 'px' }"
></image>
<!-- 播放按钮 -->
<view
v-else-if="!playStatus"
class="abs-box"
:style="{ height: screenHeight + 'px' }"
>
<image
:fade-show="true"
src="/static/images/playvd.png"
class="play-btn"
></image>
</view>
<!-- 进度条 -->
<view
v-if="playerCur === index"
class="progress-bar"
@touchstart="startDrag"
@touchmove="onDragging"
@panend="endDrag"
>
<view class="progress-background"></view>
<view
class="progress-foreground"
:class="isDragging ? '' : 'anm'"
:style="{ width: progressWidth + 'px' }"
></view>
</view>
<!-- 浮动时间提示 -->
<view
class="float-time"
v-if="isDragging"
:style="{ left: floatLeft + 'px' }"
>
{{ formatTime(floatTime) }}
</view>
<view class="publish-info-box">
<view class="">
<text class="publish-info-vloger-name">@{{ item.vlogerName }}</text>
@ -44,25 +85,30 @@
<view class="publish-info-music-box">
<image
src="/static/images/icon-fire.png"
class="icon-fire"></image>
class="icon-fire"
></image>
<text class="muisc-words">{{ item.vlogerName }}的原声创作</text>
</view>
</view>
<view class="" style="flex-direction: row">
<image src="/static/images/cd-play-4.gif"
style="width: 150rpx;height: 150rpx;opacity: 0.8;"></image>
<view
class=""
style="flex-direction: row"
>
<image
src="/static/images/cd-play-4.gif"
style="width: 150rpx; height: 150rpx; opacity: 0.8"
></image>
<image
v-if="!isIOS"
src="/static/images/icon-cd.png"
class="play-cd"
style="width: 120rpx; height: 120rpx"></image>
style="width: 120rpx; height: 120rpx"
></image>
<image
v-if="isIOS"
:src="
'https://imooc-news.oss-cn-shanghai.aliyuncs.com/image/cd-play-4.gif?time=' +
times
"
class="play-cd"></image>
:src="'https://imooc-news.oss-cn-shanghai.aliyuncs.com/image/cd-play-4.gif?time=' + times"
class="play-cd"
></image>
</view>
</view>
<!-- 视频展示右侧的操作按钮, 头像 - 点赞 - 评论 - 转发 -->
@ -71,38 +117,44 @@
<image
:src="item.vlogerFace"
class="user-face"
@click="goUserInfoSeeSee(item.vlogerId)"></image>
@click="goUserInfoSeeSee(item.vlogerId)"
></image>
</view>
<image
v-if="!item.doIFollowVloger && userId != item.vlogerId"
src="/static/images/icon-follow.png"
@click="followMe(item.vlogerId)"
class="follow-me"></image>
class="follow-me"
></image>
<view class="like-box">
<image
v-if="!item.doILikeThisVlog"
src="/static/images/icon-unlike.png"
@click="likeOrDislikeVlog(1)"
class="icon"></image>
class="icon"
></image>
<image
v-if="item.doILikeThisVlog"
src="/static/images/icon-like.png"
@click="likeOrDislikeVlog(0)"
class="icon"></image>
class="icon"
></image>
<text class="some-counts">{{ item.likeCounts }}</text>
</view>
<view class="comment-and-share-box">
<image
src="/static/images/icon-comments.png"
@click="commentToggle"
class="icon"></image>
class="icon"
></image>
<text class="some-counts">{{ thisVlogTotalComentCounts }}</text>
</view>
<view class="comment-and-share-box">
<image
src="/static/images/icon-share.png"
@click="shareToggle"
class="icon"></image>
class="icon"
></image>
<text class="some-counts">分享</text>
</view>
</view>
@ -111,64 +163,63 @@
<!-- </uni-list> -->
<view v-if="thisVlog != null && thisVlog != {}">
<uni-popup ref="comment" type="comment">
<uni-popup
ref="comment"
type="comment"
>
<uni-popup-comments
:thisVlogerId="thisVlogerId"
:thisVlogId="thisVlogId"></uni-popup-comments>
:thisVlogId="thisVlogId"
></uni-popup-comments>
</uni-popup>
<uni-popup ref="share" background-color="#fff" type="share">
<uni-popup
ref="share"
background-color="#fff"
type="share"
>
<uni-popup-share
:thisVlogerId="thisVlogerId"
:thisVlogId="thisVlogId"
:vlogUrl="thisVlog.url"
:isPrivate="thisVlog.isPrivate"></uni-popup-share>
:isPrivate="thisVlog.isPrivate"
></uni-popup-share>
</uni-popup>
</view>
</view>
</template>
<script>
import uniPopupComments from "@/uni_modules/uni-popup/components/uni-popup-comments/uni-popup-comments.vue"
import storage from "@/utils/storage.js"; //缓存
import {
graceNumber
} from '@/utils/tools.js'
import api from "@/config/api.js";
import {
vlogDetail,
vlogLike,
vlogUnLike,
vlogComment,
vlogFollow,
vlogTotalLikedCounts
} from "@/api/vlog";
let system = uni.getSystemInfoSync();
import uniPopupComments from '@/uni_modules/uni-popup/components/uni-popup-comments/uni-popup-comments.vue';
import storage from '@/utils/storage.js'; //缓存
import { graceNumber } from '@/utils/tools.js';
import api from '@/config/api.js';
import { vlogDetail, vlogLike, vlogUnLike, vlogComment, vlogFollow, vlogTotalLikedCounts } from '@/api/vlog';
export default {
components: {
uniPopupComments,
uniPopupComments
},
props: {
screenHeight: {
default: 0,
default: 0
},
src: {
default: false,
default: false
},
playStatus: {
default: false,
default: false
},
vlogId: {
default: false,
},
default: false
}
},
data() {
return {
thisVlog: {}, // 当前的短视频对象
thisVlogId: "", // 当前的短视频主键id
thisVlogerId: "", // 当前的短视频博主的主键id
userId: "",
thisVlogId: '', // 当前的短视频主键id
thisVlogerId: '', // 当前的短视频博主的主键id
userId: '',
playerCur: 0,
page: 0,
@ -196,16 +247,23 @@ export default {
currentIndex: 0,
contentOffsetY: 0,
times: new Date().getTime(),
objectFit: "fill",
isIOS: uni.getSystemInfoSync().platform == "ios",
objectFit: 'fill',
isIOS: uni.getSystemInfoSync().platform == 'ios',
duration: 0,
currentTime: 0,
progressWidth: 0,
floatTime: 0,
floatLeft: 0,
isDragging: false
};
},
created() {
if (!this.isIOS) {
this.objectFit = "cover";
this.objectFit = 'cover';
}
let myUserInfo = storage.getVlogUserInfo()||null;
if (myUserInfo!=null) {
let myUserInfo = storage.getVlogUserInfo() || null;
if (myUserInfo != null) {
this.userId = myUserInfo.id;
}
// 查询首页短视频列表
@ -233,9 +291,60 @@ export default {
} else {
me.videoContext.play();
}
},
}
},
methods: {
//进度start
formatTime(sec) {
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60);
return `${m}:${s < 10 ? '0' : ''}${s}`;
},
onTimeUpdate(e) {
// console.log(e);
if (e.detail.currentTime > 0.2) {
this.doplay(e.detail.currentTime);
}
if (this.isDragging) return;
this.currentTime = e.detail.currentTime;
this.duration = e.detail.duration;
this.updateProgress();
},
updateProgress() {
const percent = this.currentTime / this.duration;
this.progressWidth = Math.floor(system.screenWidth * percent);
// console.log(this.progressWidth);
},
startDrag(e) {
this.isDragging = true;
},
onDragging(e) {
const touchX = e.touches[0].pageX;
const max = system.screenWidth;
const clampedX = Math.max(0, Math.min(touchX, max));
this.progressWidth = clampedX;
const percent = clampedX / max;
this.floatTime = percent * this.duration;
// 浮动提示偏移，避免越界
const floatBoxWidth = 60;
this.floatLeft = Math.max(0, Math.min(clampedX - floatBoxWidth / 2, max - floatBoxWidth));
},
endDrag() {
const percent = this.progressWidth / system.screenWidth;
const seekTime = percent * this.duration;
if (!this.duration || isNaN(seekTime)) {
console.warn('duration 未就绪或 seekTime 非法');
this.isDragging = false;
return;
}
// 避免重复 seek
if (Math.abs(seekTime - this.currentTime) > 0.2) {
this.videoContext.seek(seekTime);
}
this.isDragging = false;
},
// 喜欢, 点赞的list重新设置
reLikePlayList(vlogId) {
let me = this;
@ -277,12 +386,12 @@ export default {
async refreshVlogCounts() {
var me = this;
if(me.playerList.length==0){
return
if (me.playerList.length == 0) {
return;
}
var currentIndex = me.playerCur;
var vlog = me.playerList[currentIndex];
var result = await vlogTotalLikedCounts(vlog.vlogId)
var result = await vlogTotalLikedCounts(vlog.vlogId);
if (result.data.status == 200) {
let counts = result.data.data;
me.reChangeVlogLikedCountsInPlayList(vlog.vlogId, counts);
@ -290,20 +399,19 @@ export default {
uni.showToast({
title: result.data.msg,
duration: 3000,
icon: "none",
icon: 'none'
});
}
},
async likeOrDislikeVlog(isLike) {
var me = this;
var myUserInfo = storage.getVlogUserInfo() || null
var myUserInfo = storage.getVlogUserInfo() || null;
var currentIndex = me.playerCur;
var vlog = me.playerList[currentIndex];
if (myUserInfo==null) {
if (myUserInfo == null) {
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom",
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return;
}
@ -315,15 +423,15 @@ export default {
userId,
vlogerId: vlog.vlogerId,
vlogId: vlog.vlogId
})
});
if (result.data.status == 200) {
me.reLikePlayList(vlog.vlogId);
me.refreshVlogCounts();
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
} else if (isLike == 0) {
@ -331,15 +439,15 @@ export default {
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,
icon: 'none',
duration: 3000
});
}
}
@ -373,43 +481,43 @@ export default {
// 关注博主
async followMe(vlogerId) {
let me = this;
let myUserInfo = storage.getVlogUserInfo()||null;
if (myUserInfo==null) {
let myUserInfo = storage.getVlogUserInfo() || null;
if (myUserInfo == null) {
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom"
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return;
}
let userId = myUserInfo.id;
var result = await vlogFollow(userId,vlogerId)
var result = await vlogFollow(userId, vlogerId);
if (result.data.status == 208) {
me.reFollowPlayList(vlogerId);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
goUserInfoSeeSee(userId) {
// 是否是当前登录的用户
let myUserId = "";
var info = storage.getVlogUserInfo()||null
if (info!=null) {
let myUserId = '';
var info = storage.getVlogUserInfo() || null;
if (info != null) {
myUserId = info.id;
}
if (myUserId == userId) {
uni.switchTab({
url: "/pages/me/me",
url: '/pages/me/me'
});
} else {
uni.navigateTo({
url: "/pages/me/vlogerInfo?userPageId=" + userId,
url: '/pages/me/vlogerInfo?userPageId=' + userId
});
}
},
@ -421,7 +529,7 @@ export default {
},
onplay: function (e) {
if (uni.getSystemInfoSync().platform == "ios") {
if (uni.getSystemInfoSync().platform == 'ios') {
this.doplay(0.1);
}
},
@ -447,21 +555,20 @@ export default {
let me = this;
let vlogId = me.vlogId;
let myUserInfo = storage.getVlogUserInfo()||null;
let userId = "";
if ((myUserInfo!=null)) {
let myUserInfo = storage.getVlogUserInfo() || null;
let userId = '';
if (myUserInfo != null) {
userId = myUserInfo.id;
}
var result = await vlogDetail(vlogId,userId)
var result = await vlogDetail(vlogId, userId);
if (result.data.status == 200) {
let vlog = result.data.data;
let playerList = [];
playerList.push(vlog);
me.playerList = playerList;
if(this.videoContext!=null && playerList.length>0){
let videoContext = uni.createVideoContext("videoDetail");
if (this.videoContext != null && playerList.length > 0) {
let videoContext = uni.createVideoContext('videoDetail');
this.videoContext = videoContext;
}
me.freshCommentCounts();
@ -469,8 +576,8 @@ export default {
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
@ -491,11 +598,7 @@ export default {
// 设置当前vlog的信息
setThisVlogInfo() {
let me = this;
if (
me.playerList != null &&
me.playerList != undefined &&
me.playerList.length > 0
) {
if (me.playerList != null && me.playerList != undefined && me.playerList.length > 0) {
let currentIndex = me.playerCur;
let vlog = me.playerList[currentIndex];
this.thisVlog = vlog;
@ -505,21 +608,17 @@ export default {
},
async freshCommentCounts() {
var me = this;
var uinfo = storage.getVlogUserInfo()||null
if(uinfo!=null){
var userId=uinfo.id
var uinfo = storage.getVlogUserInfo() || null;
if (uinfo != null) {
var userId = uinfo.id;
}
if (
me.playerList == null ||
me.playerList == undefined ||
me.playerList.length == 0
) {
if (me.playerList == null || me.playerList == undefined || me.playerList.length == 0) {
return;
}
var currentIndex = me.playerCur;
var vlog = me.playerList[currentIndex];
var vlogId = vlog.vlogId;
var result = await vlogComment(vlogId)
var result = await vlogComment(vlogId);
if (result.data.status == 200) {
me.thisVlogTotalComentCounts = result.data.data;
} else {
@ -529,20 +628,82 @@ export default {
commentToggle() {
this.$refs.comment.open();
uni.hideTabBar({
animation: true,
animation: true
});
},
shareToggle() {
this.$refs.share.open();
uni.hideTabBar({
animation: true,
animation: true
});
},
},
}
}
};
</script>
<style scoped>
.progress-bar {
height: 60rpx;
width: 750rpx;
display: flex;
align-items: center;
position: fixed;
bottom: 0;
z-index: 99999;
}
.progress-background {
position: absolute;
bottom: 0;
width: 750rpx;
height: 2px;
background-color: #ccc;
z-index: 3;
pointer-events: none;
}
.progress-foreground {
z-index: 2;
height: 2px;
background-color: #fff;
position: absolute;
bottom: 0;
left: 0;
pointer-events: none;
}
.anm {
transition: width 0.25s linear;
}
.float-time {
position: absolute;
bottom: 56px;
width: 60px;
height: 30px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
text-align: center;
align-items: center;
justify-content: center;
line-height: 30px;
font-size: 12px;
border-radius: 4px;
z-index: 1;
}
.abs-box {
width: 750rpx;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.play-btn {
position: absolute;
width: 120rpx;
height: 120rpx;
pointer-events: none;
}
.icon {
width: 80rpx;
height: 80rpx;

786
components/vlog/videoFollowComp.vue
View File

File diff suppressed because it is too large Load Diff

1027
components/vlog/videoLocal.vue Normal file
View File

File diff suppressed because it is too large Load Diff

21
manifest.json
View File

@ -1,6 +1,6 @@
{
"name" : "wzj4",
"appid" : "__UNI__1F0975C",
"appid" : "__UNI__6DB512D",
"description" : "admin",
"versionName" : "4.0.0",
"versionCode" : 4000049,
@ -23,14 +23,13 @@
"modules" : {
"Payment" : {},
"Share" : {},
"Fingerprint" : {},
"FaceID" : {},
"Geolocation" : {},
"Maps" : {},
"OAuth" : {},
"Camera" : {},
"Barcode" : {},
"VideoPlayer" : {}
"VideoPlayer" : {},
"Push" : {}
},
"error" : {
/* 404错误页面*/
@ -90,7 +89,7 @@
"payment" : {
"weixin" : {
"__platform__" : [ "ios", "android" ],
"appid" : "wx32788b91bdb614c0",
"appid" : "wxebcdaea31881caab",
"UniversalLinks" : "https://m-b2b2c.pickmall.cn/app/"
},
"alipay" : {
@ -100,14 +99,14 @@
"ad" : {},
"share" : {
"weixin" : {
"appid" : "wx32788b91bdb614c0",
"appid" : "wxebcdaea31881caab",
"UniversalLinks" : "https://m-b2b2c.pickmall.cn/app/"
}
},
"oauth" : {
"weixin" : {
"appid" : "wx32788b91bdb614c0",
"appsecret" : "230233cef7520ee935bbecad372a370e",
"appid" : "wxebcdaea31881caab",
"appsecret" : "71826d76bad096ec5407897c6ed1391f",
"UniversalLinks" : "https://m-b2b2c.pickmall.cn/app/"
},
"apple" : {},
@ -120,6 +119,9 @@
"__platform__" : [ "ios", "android" ],
"appkey_ios" : "f463d3350efe63f8be5d9a62f24d0aab",
"appkey_android" : "fb3f1ccb34616c70f068aa950f3e27df"
},
"system" : {
"__platform__" : [ "ios", "android" ]
}
},
"maps" : {
@ -174,7 +176,8 @@
"xxhdpi" : "CustomStartPage/start-page.9.png"
}
}
}
},
"nativePlugins" : {}
},
"permission" : {
"scope.userLocation" : {

BIN
nativeplugins/JG-JPush/android/HiPushSDK-8.0.12.307.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/agconnect-core-1.7.3.302.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/availableupdate-6.9.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/base-6.9.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/baselegacyapi-6.9.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/com.heytap.msp_3.5.3.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/device-6.9.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/firebase-common-20.3.1.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/firebase-components-17.1.0.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/firebase-datatransport-18.1.7.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/firebase-encoders-json-18.0.0.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/firebase-iid-interop-17.1.0.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/firebase-installations-17.1.3.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/firebase-installations-interop-17.1.0.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/firebase-measurement-connector-19.0.0.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/firebase-messaging-23.1.2.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/hatool-6.9.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/MiPush_SDK_Client_6_0_1-C.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/commons-codec-1.6.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/error_prone_annotations-2.9.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/firebase-annotations-16.2.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/firebase-encoders-17.0.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/firebase-encoders-proto-16.0.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/javax.inject-1.jar Executable file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/jpush-android-5.6.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/jpush-android-plugin-fcm-v5.6.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/jpush-android-plugin-honor-v5.6.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/jpush-android-plugin-huawei-v5.6.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/jpush-android-plugin-meizu-v5.6.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/jpush-android-plugin-nio-v5.6.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/jpush-android-plugin-oppo-v5.6.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/jpush-android-plugin-vivo-v5.6.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/jpush-android-plugin-xiaomi-v5.6.0.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/libs/tasks-1.5.2.206.jar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/log-6.9.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/network-common-6.0.2.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/network-framework-compat-6.0.2.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/network-grs-6.0.2.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/niopush-sdk-v1.0.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/opendevice-6.11.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/play-services-base-18.0.1.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/play-services-basement-18.1.0.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/play-services-cloud-messaging-17.0.1.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/play-services-stats-17.0.2.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/play-services-tasks-18.0.2.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/push-6.11.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/push-internal-5.0.3.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/security-base-1.2.0.307.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/security-encrypt-1.2.0.307.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/security-ssl-1.2.0.307.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/stats-6.9.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/transport-api-3.0.0.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/transport-backend-cct-3.1.8.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/transport-runtime-3.1.8.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/ui-6.9.0.300.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/uniplugin_jpush-release.aar Normal file
View File

Binary file not shown.

BIN
nativeplugins/JG-JPush/android/vivo_pushSDK_v4.0.6.0_506.aar Normal file
View File

Binary file not shown.

17
nativeplugins/JG-JPush/ios/UniPluginJPush.framework/Headers/JPushModule.h Normal file
View File

@ -0,0 +1,17 @@
//
// JPushModule.h
// UniPluginJPush
//
// Created by huangshuni on 2021/1/12.
//
#import <Foundation/Foundation.h>
#import "DCUniModule.h"
NS_ASSUME_NONNULL_BEGIN
@interface JPushModule : DCUniModule
@end
NS_ASSUME_NONNULL_END

BIN
nativeplugins/JG-JPush/ios/UniPluginJPush.framework/Info.plist Normal file
View File

Binary file not shown.

23
nativeplugins/JG-JPush/ios/UniPluginJPush.framework/PrivacyInfo.xcprivacy Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>NSPrivacyTrackingDomains</key>
<array/>
<key>NSPrivacyCollectedDataTypes</key>
<array/>
<key>NSPrivacyTracking</key>
<false/>
<key>NSPrivacyAccessedAPITypes</key>
<array>
<dict>
<key>NSPrivacyAccessedAPITypeReasons</key>
<array>
<string>CA92.1</string>
</array>
<key>NSPrivacyAccessedAPIType</key>
<string>NSPrivacyAccessedAPICategoryUserDefaults</string>
</dict>
</array>
</dict>
</plist>

BIN
nativeplugins/JG-JPush/ios/UniPluginJPush.framework/UniPluginJPush Normal file
View File

Binary file not shown.

169
nativeplugins/JG-JPush/package.json Executable file
View File

@ -0,0 +1,169 @@
{
"name": "JG-JPush",
"id": "JG-JPush",
"version": "1.2.5",
"description": "极光推送Hbuilder插件",
"_dp_type":"nativeplugin",
"_dp_nativeplugin":{
"ios": {
"deploymentTarget": "11.0",
"validArchitectures": [
"arm64"
],
"plugins": [{
"type": "module",
"name": "JG-JPush",
"class": "JPushModule"
}],
"hooksClass": "JPushProxy",
"integrateType": "framework",
"frameworks": [
"CFNetwork.framework",
"CoreFoundation.framework",
"CoreTelephony.framework",
"SystemConfiguration.framework",
"CoreGraphics.framework",
"Foundation.framework",
"UIKit.framework",
"Security.framework",
"libz.tbd",
"AdSupport.framework",
"UserNotifications.framework",
"libresolv.tbd",
"WebKit.framework",
"AppTrackingTransparency.framework",
"StoreKit.framework"
],
"resources": [
],
"capabilities": {
"entitlements": {
"aps-environment":"development"
}
},
"privacies": [
"NSLocationAlwaysAndWhenInUseUsageDescription",
"NSLocationAlwaysUsageDescription",
"NSLocationWhenInUseUsageDescription"
],
"parameters": {
"JPUSH_ISPRODUCTION_IOS": {
"des": "[iOS]是否是生产环境，是填true，不是填false或者不填",
"key": "JPush:ISPRODUCTION"
},
"JPUSH_ADVERTISINGID_IOS": {
"des": "[iOS]广告标识符（IDFA）如果不需要使用IDFA，可不填",
"key": "JPush:ADVERTISINGID"
},
"JPUSH_DEFAULTINITJPUSH_IOS": {
"des": "[iOS]是否默认初始化，是填true，不是填false或者不填",
"key": "JPush:DEFAULTINITJPUSH"
}
}
},
"android": {
"plugins": [
{
"type": "module",
"name": "JG-JPush",
"class": "cn.jiguang.uniplugin_jpush.JPushModule"
}
],
"integrateType": "aar",
"minSdkVersion": "19",
"permissions": [
"${applicationId}.permission.JPUSH_MESSAGE",
"android.permission.INTERNET",
"android.permission.ACCESS_NETWORK_STATE",
"android.permission.POST_NOTIFICATIONS",
"com.huawei.android.launcher.permission.CHANGE_BADGE",
"com.vivo.notification.permission.BADGE_ICON",
"com.hihonor.android.launcher.permission.CHANGE_BADGE",
"android.permission.VIBRATE",
"android.permission.ACCESS_COARSE_LOCATION",
"android.permission.ACCESS_FINE_LOCATION",
"android.permission.ACCESS_BACKGROUND_LOCATION",
"android.permission.READ_PHONE_STATE",
"android.permission.QUERY_ALL_PACKAGES",
"android.permission.GET_TASKS",
"android.permission.ACCESS_WIFI_STATE",
"android.permission.WRITE_EXTERNAL_STORAGE",
"android.permission.READ_EXTERNAL_STORAGE",
"${applicationId}.permission.MIPUSH_RECEIVE",
"com.coloros.mcs.permission.RECIEVE_MCS_MESSAGE",
"com.heytap.mcs.permission.RECIEVE_MCS_MESSAGE"
],
"parameters": {
"JPUSH_OPPO_APPKEY": {
"des": "厂商OPPO-appkey,示例：OP-12345678",
"key": "OPPO_APPKEY"
},
"JPUSH_OPPO_APPID":{
"des": "厂商OPPO-appId,示例：OP-12345678",
"key": "OPPO_APPID"
},
"JPUSH_OPPO_APPSECRET":{
"des": "厂商OPPO-appSecret,示例：OP-12345678",
"key": "OPPO_APPSECRET"
},
"JPUSH_VIVO_APPKEY":{
"des": "厂商VIVO-appkey,示例：12345678",
"key": "com.vivo.push.api_key"
},
"JPUSH_VIVO_APPID":{
"des": "厂商VIVO-appId,示例：12345678",
"key": "com.vivo.push.app_id"
},
"JPUSH_MEIZU_APPKEY":{
"des": "厂商MEIZU-appKey,示例：MZ-12345678",
"key": "MEIZU_APPKEY"
},
"JPUSH_MEIZU_APPID":{
"des": "厂商MEIZU-appId,示例：MZ-12345678",
"key": "MEIZU_APPID"
},
"JPUSH_XIAOMI_APPKEY":{
"des": "厂商XIAOMI-appKey,示例：MI-12345678",
"key": "XIAOMI_APPKEY"
},
"JPUSH_XIAOMI_APPID":{
"des": "厂商XIAOMI-appId,示例：MI-12345678",
"key": "XIAOMI_APPID"
},
"JPUSH_HUAWEI_APPID":{
"des": "厂商HUAWEI-appId,示例：appid=12346578",
"key": "com.huawei.hms.client.appid"
},
"JPUSH_HONOR_APPID" : {
"des" : "厂商HONOR-appId,示例：12346578",
"key" : "com.hihonor.push.app_id"
},
"JPUSH_NIO_APPID" : {
"des" : "厂商nio-appId,示例：12346578",
"key" : "nio_push_app_id"
},
"JPUSH_GOOGLE_API_KEY" : {
"des" : "厂商google api_key,示例:g-12346578",
"key" : "google_api_key"
},
"JPUSH_GOOGLE_APP_ID" : {
"des" : "厂商google mobilesdk_app_id,示例：g-12346578",
"key" : "google_app_id"
},
"JPUSH_GOOGLE_PROJECT_NUMBER" : {
"des" : "厂商google project_number,示例：g-12346578",
"key" : "gcm_defaultSenderId"
},
"JPUSH_GOOGLE_PROJECT_ID" : {
"des" : "厂商google project_id ,示例：g-12346578",
"key" : "project_id"
},
"JPUSH_GOOGLE_STORAGE_BUCKET" : {
"des" : "厂商google storage_bucket,示例：g-12346578",
"key" : "google_storage_bucket"
}
}
}
}
}

39
pages.json
View File

@ -488,14 +488,14 @@
"navigationBarBackgroundColor": "#181b27"
}
},
// {
// "path" : "pages/me/settings",
// "style" : {
// "navigationBarTitleText" : "设置",
// "navigationBarTextStyle" : "white",
// "navigationBarBackgroundColor" : "#181b27"
// }
// },
{
"path": "pages/me/settings",
"style": {
"navigationBarTitleText": "设置",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#181b27"
}
},
{
"path": "pages/me/myFans",
"style": {
@ -542,7 +542,22 @@
"navigationBarTitleText": "消息详情",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#181b27"
}
},
{
"path": "pages/search/search",
"style": {
"app-plus": {
"titleNView": false //禁用原生导航栏
}
}
},
{
"path": "pages/search/searchList",
"style": {
"app-plus": {
"titleNView": false //禁用原生导航栏
}
}
}
],
@ -1205,12 +1220,10 @@
"app-plus": {
"softinputMode": "adjustResize",
"titleNView": {
"buttons": [
{
"buttons": [{
"type": "menu"
// "click": "handleMenuClick" // 绑定点击事件
}
]
}]
}
},
"h5": {

9
pages/me/me.nvue
View File

@ -121,7 +121,7 @@
<view class="vlog-list">
<block v-for="(vlog, index) in vlogList" :key="index">
<image class="vlog-cover" :src="vlog.cover" @click="goToVlog(vlog)" mode="aspectFill"></image>
<image class="vlog-cover" :src="vlog.cover||vlog.firstFrameImg" @click="goToVlog(vlog)" mode="aspectFill"></image>
</block>
</view>
@ -231,7 +231,8 @@
this.pageUserInfo = result.data.data;
storage.setVlogUserInfo(this.pageUserInfo)
// 查询用户信息
this.myList(0, 'myPublicList', true);
this.switchTab(0)
// this.myList(0, 'myPublicList', true);
this.setBasicUserInfo(this.pageUserInfo);
}
},
@ -355,14 +356,14 @@
goMyFans(userId) {
uni.navigateTo({
animationType: "fade-in",
url: "myFans?userId=" + userId,
url: "myFans",
});
},
// 关注列表
goMyFollows(userId) {
uni.navigateTo({
animationType: "fade-in",
url: "myFollows?userId=" + userId,
url: "myFollows",
});
},
},

58
pages/me/myFans.nvue
View File

@ -2,7 +2,7 @@
<view class="mpage">
<view class="line"></view>
<scroll-view scroll-y="true" @scrolltolower="pagingFansList()">
<view class="user-wrapper" v-for="(f, index) in fansList" :key="index">
<view class="user-wrapper" v-for="(f, index) in fansList" :key="f.fanId">
<view class="user-info" @click="goTovlogerInfo(f.fanId)">
<image class="face" :src="f.face" />
<text class="user-name">
@ -10,29 +10,19 @@
</text>
</view>
<view v-if="isLogin && f.me" class="operator-wrapper">
<text class="operator-words" style="color: #ffffff">你</text>
</view>
<view v-else-if="!isLogin || isLogin && !f.follow && !f.fan" class="operator-wrapper">
<text class="operator-words" style="color: #ffffff" @click="followMe(f.fanId)">
关注
</text>
</view>
<view v-else-if="isLogin && !f.follow && f.fan" class="operator-wrapper">
<text class="operator-words" style="color: #ffffff" @click="followMe(f.fanId)">
<view v-if="!from">
<view v-if="f.bothFriend==0" class="operator-wrapper">
<text class="operator-words" style="color: #ef274d" @click="followMe(f.fanId)">
回粉
</text>
</view>
<view v-else-if="isLogin && f.follow && !f.fan" class="operator-wrapper">
<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.fanId)">
已关注
<view v-if="f.bothFriend==1" class="operator-wrapper">
<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.fanId)">
互粉
</text>
</view>
<view v-else-if="isLogin && f.follow && f.fan" class="operator-wrapper">
<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.fanId)">
互关
</text>
</view>
</view>
</scroll-view>
</view>
@ -53,28 +43,28 @@
data() {
return {
userId: "",
currentUserId: "",
isLogin: false,
screenHeight: 0,
page: 0,
totalPage: 0,
fansList: [],
from:false
};
},
onLoad(param) {
if(!isStrEmpty(param.userId)){
this.from = true
this.userId = param.userId
}else{
var uinfo = storage.getVlogUserInfo()
if (uinfo == null) {
return
this.userId = uinfo.id;
}
this.isLogin = true;
this.currentUserId = uinfo.id
this.userId = param.userId;
this.queryMyFansList(0);
},
methods: {
goTovlogerInfo(vlogerId) {
var id = storage.getVlogUserInfo().id
// 是否是当前登录的用户
if (this.currentUserId == vlogerId) {
if (id == vlogerId) {
uni.switchTab({
url: "me",
});
@ -91,15 +81,15 @@
for (let i = 0; i < fansList.length; i++) {
let fan = fansList[i];
if (fan.fanId == vlogerId) {
fan.follow = status;
fansList.splice(i, 1, fan);
fan.bothFriend = status;
// fansList.splice(i, 1);
}
}
me.fansList = fansList;
},
async cancelFollow(vlogerId) {
let me = this;
let userId = storage.getVlogUserInfo().id
let userId = me.userId
let data = {
myId: userId,
vlogerId
@ -107,7 +97,7 @@
var result = await vlogFansCancel(data)
console.log(result)
if (result.data.status == 200) {
me.reFreshList(vlogerId, false);
me.reFreshList(vlogerId, 0);
} else {
uni.showToast({
title: result.data.msg,
@ -118,7 +108,7 @@
},
async followMe(vlogerId) {
let me = this;
let userId = this.currentUserId;
let userId = me.userId;
let data = {
myId: userId,
vlogerId
@ -126,7 +116,7 @@
var result = await vlogFansFollow(data)
console.log(result)
if (result.data.status == 200) {
me.reFreshList(vlogerId, true);
me.reFreshList(vlogerId, 1);
} else {
uni.showToast({
title: result.data.msg,
@ -148,6 +138,7 @@
pageSize: 10
}
var result = await vlogQueryMyFans(data)
console.log(result)
if (result.data.status == 200) {
let fansList = result.data.data.rows;
let totalPage = result.data.data.total;
@ -218,6 +209,7 @@
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
@ -232,7 +224,7 @@
justify-content: center;
background-color: #ef274d;
border-radius: 20rpx;
align-self: center;
align-items: center;
border-width: 2rpx;
border-color: #ef274d;
background-color: #181b27;

57
pages/me/myFollows.nvue
View File

@ -2,7 +2,7 @@
<view class="mpage">
<view class="line"></view>
<scroll-view scroll-y="true" @scrolltolower="pagingFollowsList">
<view class="user-wrapper" v-for="(f, index) in followsList" :key="index">
<view class="user-wrapper" v-for="(f, index) in followsList" :key="f.vlogerId">
<view class="user-info" @click="goTovlogerInfo(f.vlogerId)">
<image class="face" :src="f.face" />
<text class="user-name">
@ -10,25 +10,19 @@
</text>
</view>
<view v-if="f.me" class="operator-wrapper">
<text class="operator-words" style="color: #ffffff">你</text>
</view>
<view v-else-if="!f.follow" class="operator-wrapper">
<text class="operator-words" style="color: #ffffff" @click="followMe(f.vlogerId)">
关注
</text>
</view>
<view v-else-if="f.follow && !f.fan" class="operator-wrapper">
<view v-if="!from">
<view v-if="f.bothFriend==0" class="operator-wrapper">
<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.vlogerId)">
已关注
</text>
</view>
<view v-else-if="f.follow && f.fan" class="operator-wrapper">
<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.vlogerId)">
<view v-if="f.bothFriend==1" class="operator-wrapper">
<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.vlogerId)">
互关
</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
@ -48,26 +42,27 @@
data() {
return {
userId: "",
currentUserId: "",
screenHeight: 0,
page: 0,
totalPage: 0,
followsList: [],
from: false
};
},
onLoad(param) {
if (!isStrEmpty(param.userId)) {
this.from = true
this.userId = param.userId
} else {
var uinfo = storage.getVlogUserInfo()
if (uinfo==null) {
return
this.userId = uinfo.id;
}
this.currentUserId = uinfo.id
this.userId = param.userId;
this.queryMyFollowList(0);
},
methods: {
goTovlogerInfo(vlogerId) {
// 是否是当前登录的用户
if (this.currentUserId == vlogerId) {
var id = storage.getVlogUserInfo().id
if (id == vlogerId) {
uni.switchTab({
url: "me",
});
@ -84,23 +79,23 @@
for (let i = 0; i < followsList.length; i++) {
let vloger = followsList[i];
if (vloger.vlogerId == vlogerId) {
vloger.follow = status;
followsList.splice(i, 1, vloger);
vloger.bothFriend = status;
followsList.splice(i, 1);
}
}
me.followsList = followsList;
},
async cancelFollow(vlogerId) {
let me = this;
let userId = this.currentUserId;
var data ={
let userId = this.userId;
var data = {
myId: userId,
vlogerId
}
var result = await vlogFansCancel(data)
console.log(result)
if (result.data.status == 200) {
me.reFreshList(vlogerId, false);
me.reFreshList(vlogerId, 0);
} else {
uni.showToast({
title: result.data.msg,
@ -111,7 +106,7 @@
},
async followMe(vlogerId) {
let me = this;
let userId = this.currentUserId;
let userId = this.userId;
let data = {
myId: userId,
vlogerId
@ -132,11 +127,8 @@
let me = this;
page = page + 1;
let userId = me.userId;
let currentUserId = this.currentUserId;
var data = {
myId:userId,
// vlogerId: userId,
// currentUserId: currentUserId,
myId: userId,
page: page,
pageSize: 10
}
@ -145,6 +137,7 @@
let followsList = result.data.data.rows;
let totalPage = result.data.data.total;
me.followsList = me.followsList.concat(followsList);
console.log(me.followsList)
me.page = page;
me.totalPage = totalPage;
}
@ -157,8 +150,8 @@
}
this.queryMyFollowList(this.page);
},
},
};
}
}
</script>
<style scoped>
@ -206,7 +199,7 @@
justify-content: space-between;
margin-top: 20rpx;
margin-bottom: 20rpx;
align-items: center;
}

227
pages/me/settings.vue Executable file
View File

@ -0,0 +1,227 @@
<template>
<view class="page">
<!-- <view class="line"></view> -->
<scroll-view scroll-y="true">
<view
style="
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20rpx;
">
<view
style="
display: flex;
flex-direction: column;
justify-content: center;
">
<image
src="/static/imooc/lee.jpeg"
mode="widthFix"
class="fengjianyingyue"
style="align-self: center"></image>
<image
src="/static/imooc/fengjianyingyue.png"
mode="widthFix"
class="fengjianyingyue-name"
style="align-self: center"></image>
</view>
<view>
<text class="introduce">
物流科技公司部门经理，近10年开发和技术管理经验。主要从事后端技术和架构领域，有丰富的电商平台与物流平台核心系统的架构设计和开发经验。
拥有丰富的大型项目开发经验，授课风格诙谐幽默，讲解到位细致。
</text>
<text class="introduce">
近20万的学生学习人数，学生入职公司有：
百度云盘，阿里，腾讯云，字节跳动，金山，网易，OPPO，新浪微博，华为，货拉拉，58同城，海信，蘑菇街，金蝶
等。
</text>
</view>
</view>
<view
style="
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 20rpx;
">
<image
src="/static/imooc/course-javaarchitect.png"
mode="widthFix"
class="course"
style="width: 380rpx"></image>
</view>
<view
style="
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 20rpx;
padding-left: 30rpx;
padding-right: 30rpx;
">
<image
src="/static/imooc/course-pm.png"
mode="widthFix"
class="course"
style=""></image>
<image
src="/static/imooc/course-springcloud.png"
mode="widthFix"
class="course"
style=""></image>
</view>
<view
style="
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 20rpx;
padding-left: 30rpx;
padding-right: 30rpx;
">
<image
src="/static/imooc/course-netty.png"
mode="widthFix"
class="course"
style=""></image>
<image
src="/static/imooc/course-zookeeper.png"
mode="widthFix"
class="course"
style=""></image>
</view>
<!-- <view style="display: flex;flex-direction: row;justify-content: center;margin-top: 20rpx;">
<image src="/static/imooc/lee-qrcode.png" mode="widthFix" class="course" style="width: 380rpx;"></image>
</view> -->
<view
:class="{ logout: !logoutTouched, 'logout-touched': logoutTouched }"
@touchstart="touchstartLogout"
@touchend="touchendLogout"
@click="logout"
style="
margin-top: 20rpx;
padding-left: 30rpx;
padding-right: 30rpx;
width: 750rpx;
height: 120rpx;
display: flex;
flex-direction: row;
justify-content: center;
">
<text style="color: #ffffff; align-self: center; font-size: 15px">
退出登录
</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
logoutTouched: false,
};
},
onLoad() {},
methods: {
touchstartLogout() {
this.logoutTouched = true;
},
touchendLogout() {
this.logoutTouched = false;
},
logout() {
// let userId = getApp().getUserInfoSession().id;
// uni.request({
// method: "GET",
// url: serverUrl + "/passport/logout?userId=" + userId,
// success(result) {
// let status = result.data.status;
// if (status == 211) {
// app.clearUserInfo();
// uni.showToast({
// title: result.data.msg,
// duration: 3000
// })
// // 在登录登出后，都需要重新刷新首页list，目的为了刷新关注点赞状态
// // uni.setStorageSync("needRefreshIndexVlogList", "1");
// // uni.switchTab({
// // url: "../index/index"
// // })
// uni.reLaunch({
// url: "../index/index",
// });
// }
// },
// });
},
},
};
</script>
<style>
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #181b27;
}
.line {
height: 1rpx;
background-color: #393a41;
width: 750rpx;
}
.place-box {
background-color: #4a4c52;
}
.place-box-touched {
background-color: #6d6b6b;
}
.right-arrow {
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
.logout {
background-color: #4a4c52;
}
.logout-touched {
background-color: #6d6b6b;
}
.fengjianyingyue {
width: 250rpx;
border-width: 1rpx;
border-color: #ffffff;
border-radius: 10rpx;
}
.fengjianyingyue-name {
width: 200rpx;
margin-top: 26rpx;
opacity: 0.8;
}
.introduce {
color: #f1f1f1;
font-size: 26rpx;
font-weight: 300;
width: 440rpx;
}
.course {
width: 330rpx;
border-radius: 5px;
}
</style>

0
pages/me/vlog.vue → pages/me/vlog.nvue
View File

687
pages/me/vlogerInfo.nvue Executable file
View File

@ -0,0 +1,687 @@
<template>
<view class="page">
<scroll-view
class="isLogin-info-wrapper"
:style="{ height: screenHeight + 'px' }"
scroll-y="true"
@scrolltolower="loadMore">
<image class="mybg" :src="pageUserInfo.bgImg" mode="aspectFill" />
<view class="header" :style="{ marginTop: statusBarHeight + 'px' }">
<image
class="header-right-search"
src="../../static/images/icon-back.png"
@click="back()" />
</view>
<view class="my-info-wrapper">
<view class="my-info">
<image :src="pageUserInfo.face" mode="aspectFill" class="my-face" />
<view class="info-wrapper">
<text class="nickname">
{{ pageUserInfo.nickname }}
</text>
<view class="tiktok-num-wrapper">
<text class="tiktok-num">视频号：</text>
<text class="tiktok-num">
{{ pageUserInfo.imoocNum }}
</text>
</view>
<view class="location">
<text class="location-text">所在地：</text>
<text class="location-text">
{{ pageUserInfo.city == "" ? "中国" : "" + pageUserInfo.city
}}{{
pageUserInfo.district == "" ? "" : "·" + pageUserInfo.district
}}
</text>
</view>
<view class="sex-wrapper">
<view class="constellation">
<image
class="sex-img"
v-if="pageUserInfo.sex == 1"
src="/static/images/icon-sex-boy.png" />
<image
class="sex-img"
v-if="pageUserInfo.sex == 0"
src="/static/images/icon-sex-girl.png" />
<image
class="sex-img"
v-if="pageUserInfo.sex == 2"
src="/static/images/icon-sex-secret.png" />
<text class="astro">{{ astro }}座</text>
</view>
<view class="animal">
<text class="animal-text">
{{ animal }}
</text>
</view>
</view>
</view>
</view>
</view>
<text class="desc">
{{ pageUserInfo.description }}
</text>
<view class="bottom-wrapper">
<view class="bottom">
<view class="bottom-item" @click="goMyFollows(pageUserInfo.id)">
<text class="item-num">
{{ getGraceNumber(pageUserInfo.myFollowsCounts) }}
</text>
<text class="item-text">关注</text>
</view>
<view class="bottom-item" @click="goMyFans(pageUserInfo.id)">
<text class="item-num">
{{ getGraceNumber(pageUserInfo.myFansCounts) }}
</text>
<text class="item-text">粉丝</text>
</view>
<view class="bottom-item">
<text class="item-num">
{{ getGraceNumber(pageUserInfo.totalLikeMeCounts) }}
</text>
<text class="item-text">获赞</text>
</view>
</view>
<view class="edit">
<view
v-if="isFollow && !isFan"
@click="cancelFollow()"
class="follow-btn">
<text class="follow-text">已关注</text>
</view>
<view
v-if="isFollow && isFan"
@click="cancelFollow()"
class="follow-btn">
<text class="follow-text">相互关注</text>
</view>
<view
v-if="!isFollow"
@click="followMe()"
class="follow-btn"
style="background-color: #ef274d">
<text class="follow-text">关注我</text>
</view>
</view>
</view>
<view class="tab-wrapper">
<view class="tab-item" @click="switchTab(0)">
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 0 }">
作品
</text>
<view v-if="currentTab == 0" class="selected-tab"></view>
</view>
<!-- <view class="tab-item" @click="switchTab(1)">
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }">
私密
</text>
<view v-if="currentTab == 1" class="selected-tab"></view>
</view> -->
<view class="tab-item" @click="switchTab(1)">
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }">
赞过
</text>
<view v-if="currentTab == 1" class="selected-tab"></view>
</view>
</view>
<view class="vlog-list">
<block v-for="(vlog, index) in vlogList" :key="index">
<image
class="vlog-cover"
:src="vlog.cover||vlog.firstFrameImg"
@click="goToVlog(vlog)"
mode="aspectFill"></image>
</block>
</view>
<view v-if="vlogList.length == 0" class="empty">
<text class="empty-text">~ 空空如也 ~</text>
</view>
<view v-if="vlogList.length > 0" class="not-empty">
<text class="not-empty-text">~ 没有更多了 ~</text>
</view>
</scroll-view>
</view>
</template>
<script>
let system = uni.getSystemInfoSync();
import * as filters from "@/utils/filters.js"
import api from "@/config/api.js";
import storage from "@/utils/storage.js"; //缓存
import {
vlogUserInfo,
vlogQueryDoIFollowVloger,
vlogMyPublicList,
vlogMyPrivateList,
vlogMyLikedList,
vlogMeTag,
vlogFansCancel,
vlogFansFollow
} from "@/api/vlog"
import {
getAstro,
getAnimal,
dateFormat,
graceNumber,
isStrEmpty
} from '@/utils/tools.js'
export default {
data() {
return {
pageUserInfo: {
id: "",
mobile: "",
nickname: "",
imoocNum: "",
face: "",
birthday: "1998-12-31T16:00:00.000+0000",
country: "",
province: "",
city: "",
district: "",
description: "",
myFollowsCounts: 0,
myFansCounts: 0,
totalLikeMeCounts: 0
},
userPageId: "",
astro: "",
animal: "",
loginWords: "请登录",
statusBarHeight: 0,
screenHeight: 0,
screenHeightUnLogin: 0,
currentTab: 0,
isFollow: false,
isFan: false,
isAndroid: uni.getSystemInfoSync().platform == "android",
page: 0,
totalpage: 0,
vlogList: [],
};
},
async onLoad(params) {
this.statusBarHeight = system.statusBarHeight;
let screenHeight = system.safeArea.bottom + 50;
this.screenHeight = screenHeight;
let screenHeightUnLogin = system.safeArea.bottom;
this.screenHeightUnLogin = screenHeightUnLogin;
let me = this;
// 从视频页面, 点击用户头像传递过来的id
let userPageId = params.userPageId;
if (isStrEmpty(userPageId)) {
uni.showToast({
title: "出错啦~",
icon: " none",
duration: 2000,
});
settimeout(() => {
uni.navigateBack({
delta: 1,
});
}, 1500);
}
me.userPageId = userPageId;
var result = await vlogUserInfo(userPageId)
console.log(result)
if (result.data.status == 200) {
me.pageUserInfo = result.data.data;
me.setBasicUserInfo(me.pageUserInfo);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
});
}
// this.switchTab(0);
this.myList(0, 'myPublicList', true);
let myUserId = "";
let info = storage.getVlogUserInfo()
if (info!=null) {
myUserId = info.id;
}
if (!isStrEmpty(myUserId)) {
// 查询我是否关注博主
var result = await vlogQueryDoIFollowVloger({myId:myUserId,vlogerId:userPageId})
console.log(result)
if (result.data.status == 200) {
me.isFollow = result.data.data;
// me.isFan = result.data.data;
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
});
}
// 查询博主是否关注我
var result2 = await vlogQueryDoIFollowVloger({myId:userPageId,vlogerId:myUserId})
if (result2.data.status == 200) {
me.isFan = result2.data.data;
} else {
uni.showToast({
title: result2.data.msg,
icon: "none",
duration: 3000,
});
}
}
},
methods: {
setBasicUserInfo(myUserInfo) {
// 根据生日判断星座
let birthday = myUserInfo.birthday;
let birth = dateFormat("YYYY-mm-dd", new Date(birthday));
let birthArr = birth.split("-");
let year = birthArr[0];
let month = birthArr[1];
let day = birthArr[2];
let astro = getAstro(month, day);
this.astro = astro;
// 根据生日判断生肖
let animal = getAnimal(year);
this.animal = animal;
},
switchTab(index) {
this.currentTab = index;
if (index == 0) {
this.page = 0;
this.toalPage = 0;
this.myList(0, 'myPublicList', true);
} else if (index == 1) {
this.page = 0;
this.toalPage = 0;
this.myList(0, 'myLikedList', true);
}
},
loadMore() {
if (this.page >= this.toalPage) {
return;
} else {
this.myList(this.page);
}
},
async myList(page, requrl, init = false) {
let me = this;
page = page + 1;
me.page = page;
let userId = me.userPageId;;
var result = await vlogMeTag(requrl, page, 20, userId)
if (result.data.status == 200) {
let vlogList = result.data.data.rows;
console.log(vlogList)
let toalPage = result.data.data.total;
if (init) {
me.vlogList = vlogList
} else {
me.vlogList = me.vlogList.concat(vlogList);
}
me.page = page;
me.toalPage = toalPage;
}
},
back() {
uni.navigateBack({
delta: 1,
});
},
async cancelFollow() {
let me = this;
let vlogerId = me.userPageId;
let userId = storage.getVlogUserInfo().id;
var result = await vlogFansCancel({myId:userId,vlogerId:vlogerId})
if (result.data.status == 200) {
me.isFollow = false;
// uni.setStorageSync("justCancelVlogerId", vlogerId);
// 刷新当前页的粉丝数
let pendingInfo = me.pageUserInfo;
me.pageUserInfo.myFansCounts = pendingInfo.myFansCounts - 1;
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
});
}
},
async followMe() {
let me = this;
let myUserInfo = storage.getVlogUserInfo();
let vlogerId = me.userPageId;
let userId = myUserInfo.id;
var result = await vlogFansFollow({myId:userId,vlogerId:vlogerId})
if (result.data.status == 200) {
me.isFollow = true;
// uni.setStorageSync("justFollowVlogerId", vlogerId);
// 刷新当前页的粉丝数
let pendingInfo = me.pageUserInfo;
me.pageUserInfo.myFansCounts = pendingInfo.myFansCounts + 1;
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
});
}
},
// 把超过1000或10000的数字调整, 比如1.3k/6.8w
getGraceNumber(num) {
return graceNumber(num);
},
goToVlog(vlog) {
let vlogId = vlog.id ? vlog.id : vlog.vlogId;
// uni.navigateTo({
// url: "../vlog/vlog?type=mine&isNeedPage=1&vlogId=" + vlogId,
// });
uni.navigateTo({
url: "/pages/me/vlog?vlogId=" + vlogId,
});
},
goMyFans(userId) {
uni.navigateTo({
animationType: "fade-in",
url: "myFans?userId=" + userId,
});
},
goMyFollows(userId) {
uni.navigateTo({
animationType: "fade-in",
url: "myFollows?userId=" + userId,
});
},
},
};
</script>
<style lang="scss">
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000000;
.isLogin-info-wrapper {
.header {
position: absolute;
left: 0;
right: 0;
flex-direction: row;
height: 100rpx;
line-height: 100rpx;
align-items: center;
padding-left: 40rpx;
padding-right: 40rpx;
.header-right-search {
width: 40rpx;
height: 40rpx;
opacity: 0.8;
}
}
.mybg {
width: 750rpx;
height: 750rpx;
box-shadow: inset 0 -150px 180px #313030;
}
.my-info-wrapper {
position: relative;
left: 30rpx;
top: -560rpx;
display: flex;
flex-direction: column;
width: 1000rpx;
.my-info {
display: flex;
flex-direction: row;
.my-face {
width: 200rpx;
height: 200rpx;
border-radius: 100rpx;
border-width: 1px;
border-color: #f1f1f1;
}
.info-wrapper {
margin-left: 30rpx;
padding-top: 20rpx;
width: 500rpx;
.nickname {
font-size: 20px;
color: #ffffff;
font-weight: 600;
}
.tiktok-num-wrapper {
display: flex;
flex-direction: row;
.tiktok-num {
font-size: 10px;
color: #ffffff;
font-weight: 300;
}
}
.location {
display: flex;
flex-direction: row;
height: 20px;
margin-top: 2px;
font-size: 1px;
.location-text {
line-height: 20px;
color: #ffffff;
font-size: 10px;
font-weight: 300;
}
}
.sex-wrapper {
display: flex;
flex-direction: row;
margin-top: 10rpx;
.constellation {
display: flex;
flex-direction: row;
justify-content: center;
background-color: #000000;
opacity: 0.5;
width: 130rpx;
height: 40rpx;
border-radius: 10px;
.sex-img {
width: 22rpx;
height: 22rpx;
align-self: center;
}
.astro {
font-size: 10px;
color: #ffffff;
line-height: 20px;
font-weight: bold;
margin-left: 6rpx;
align-self: center;
}
}
.animal {
margin-left: 10rpx;
display: flex;
flex-direction: row;
justify-content: center;
background-color: #000000;
opacity: 0.5;
width: 60rpx;
height: 40rpx;
border-radius: 10px;
.animal-text {
font-size: 10px;
color: #ffffff;
line-height: 20px;
font-weight: bold;
align-self: center;
}
}
}
}
}
}
.desc {
position: relative;
top: -520rpx;
color: #ffffff;
font-size: 14px;
margin: 0 30rpx;
}
.bottom-wrapper {
position: relative;
top: -510rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
.bottom {
display: flex;
flex-direction: row;
.bottom-item {
margin-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
.item-num {
color: #ffffff;
font-size: 14px;
font-weight: bold;
align-self: center;
}
.item-text {
color: #ffffff;
font-size: 12px;
font-weight: 300;
align-self: center;
}
}
}
.edit {
display: flex;
flex-direction: row;
justify-content: center;
margin-right: 30rpx;
.follow-btn {
margin-right: 20rpx;
border-width: 1px;
border-color: #ffffff;
width: 200rpx;
height: 66rpx;
background-color: #545456;
opacity: 0.8;
border-radius: 40rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-self: center;
.follow-text {
font-size: 13px;
color: #ffffff;
font-weight: 500;
align-self: center;
}
}
}
}
.tab-wrapper {
position: relative;
top: -480rpx;
height: 40px;
background-color: #171825;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 3px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
.tab-item {
width: 250rpx;
align-self: center;
.tab-normal {
font-size: 18px;
font-weight: 500;
align-self: center;
color: #808080;
}
.tab-selected {
color: #ffffff;
}
.selected-tab {
margin-top: 5px;
height: 5rpx;
width: 250rpx;
border-radius: 6rpx;
background-color: #ef274d;
}
}
}
.vlog-list {
position: relative;
top: -480rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
background-color: #000000;
.vlog-cover {
align-self: center;
width: 248rpx;
height: 360rpx;
border-width: 1rpx;
}
}
.empty {
background-color: #000000;
width: 750rpx;
height: 300rpx;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
top: -480rpx;
.empty-text {
color: #ffffff;
font-size: 14px;
margin-top: 200rpx;
}
}
.not-empty {
width: 750rpx;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
top: -260rpx;
.not-empty-text {
color: #ffffff;
font-size: 14px;
}
}
}
}
</style>

0
pages/me/vlogerInfo.vue
View File

513
pages/passport/login.vue
View File

@ -1,56 +1,122 @@
<template>
<div class="wrapper">
<div v-if="!wechatLogin">
<u-navbar :is-back="true" :border-bottom="false" :custom-back="customback"></u-navbar>
<u-navbar
:is-back="true"
:border-bottom="false"
:custom-back="customback"
></u-navbar>
<div>
<div class="title">{{ loginTitleWay[current].title }}</div>
<div :class="current == 1 ? 'desc-light' : 'desc'">
{{ loginTitleWay[current].desc
}}<span v-if="current == 1">{{ mobile | secrecyMobile }}</span>
{{ loginTitleWay[current].desc }}
<span v-if="current == 1">{{ mobile | secrecyMobile }}</span>
</div>
</div>
<!-- 手机号 -->
<div v-show="current == 0">
<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入手机号 (11位)"
class="mobile" focus v-model="mobile" type="number" maxlength="11" />
<div :class="!enabuleFetchCode ? 'disable' : 'fetch'" @click="fetchCode" class="btn">
<u-input
:custom-style="inputStyle"
:placeholder-style="placeholderStyle"
placeholder="请输入手机号 (11位)"
class="mobile"
focus
v-model="mobile"
type="number"
maxlength="11"
/>
<div
:class="!enabuleFetchCode ? 'disable' : 'fetch'"
@click="fetchCode"
class="btn"
>
获取验证码
</div>
<div class="flex">
<u-checkbox-group :icon-size="24" width="45rpx">
<u-checkbox shape="circle" v-model="enabulePrivacy" active-color="#FF5E00"></u-checkbox>
<u-checkbox-group
:icon-size="24"
width="45rpx"
>
<u-checkbox
shape="circle"
v-model="enabulePrivacy"
active-color="#FF5E00"
></u-checkbox>
</u-checkbox-group>
<div class="tips">
未注册的手机号验证后将自动创建用户账号，登录即代表您已同意<span @click="navigateToPrivacy('privacy')">《使用条款及隐私协议》</span>
未注册的手机号验证后将自动创建用户账号，登录即代表您已同意
<span @click="navigateToPrivacy('privacy')">《使用条款及隐私协议》</span>
</div>
</div>
</div>
<!-- 输入验证码 -->
<div v-show="current == 1" class="box-code">
<verifyCode type="bottom" @confirm="submit" boxActiveColor="#D8D8D8" v-model="code" isFocus
boxNormalColor="#D8D8D8" cursorColor="#D8D8D8" />
<div
v-show="current == 1"
class="box-code"
>
<verifyCode
type="bottom"
@confirm="submit"
boxActiveColor="#D8D8D8"
v-model="code"
isFocus
boxNormalColor="#D8D8D8"
cursorColor="#D8D8D8"
/>
<div class="fetch-btn">
<u-verification-code change-text="验证码已发送（x）" end-text="重新获取验证码" unique-key="page-login"
:seconds="seconds" @end="end" @start="start" ref="uCode"
@change="codeChange"></u-verification-code>
<span @tap="fetchCode" :style="{ color: codeColor }"> {{ tips }}</span>
<u-verification-code
change-text="验证码已发送（x）"
end-text="重新获取验证码"
unique-key="page-login"
:seconds="seconds"
@end="end"
@start="start"
ref="uCode"
@change="codeChange"
></u-verification-code>
<span
@tap="fetchCode"
:style="{ color: codeColor }"
>
{{ tips }}
</span>
</div>
</div>
<!-- 循环出当前可使用的第三方登录模式 -->
<div class="flex login-list">
<div v-if="item.code" :style="{ background: item.color }" class="login-item"
v-for="(item, index) in loginList" :key="index">
<u-icon v-if="item.title != 'APPLE'" color="#fff" size="42" :name="item.icon"
@click="navigateLogin(item)">
</u-icon>
<u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)"
width="80" height="80" />
<div
v-if="item.code"
:style="{ background: item.color }"
class="login-item"
v-for="(item, index) in loginList"
:key="index"
>
<u-icon
v-if="item.title != 'APPLE'"
color="#fff"
size="42"
:name="item.icon"
@click="navigateLogin(item)"
></u-icon>
<u-image
v-else
src="/static/appleidButton@2x.png"
:lazy-load="false"
@click="navigateLogin(item)"
width="80"
height="80"
/>
</div>
</div>
<myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification"
business="LOGIN" />
<myVerification
v-if="codeFlag"
@send="verification"
class="verification"
ref="verification"
business="LOGIN"
/>
</div>
<view v-else>
<wechatH5Login />
@ -59,30 +125,18 @@
</template>
<script>
import {
openIdLogin,
loginCallback
} from "@/api/connect.js";
import api from "@/config/api.js";
import {
sendMobile,
smsLogin
} from "@/api/login";
import myVerification from "@/components/verification/verification.vue"; //验证码模块
import uuid from "@/utils/uuid.modified.js"; // uuid
import verifyCode from "@/components/verify-code/verify-code";
import {
getUserInfo
} from "@/api/members";
import {
whetherNavigate
} from "@/utils/Foundation"; //登录跳转
import storage from "@/utils/storage.js"; //缓存
import wechatH5Login from "./wechatH5Login.vue";
import {
webConnect
} from "@/api/connect.js";
export default {
import { openIdLogin, loginCallback } from '@/api/connect.js';
import api from '@/config/api.js';
import { sendMobile, smsLogin } from '@/api/login';
import myVerification from '@/components/verification/verification.vue'; //验证码模块
import uuid from '@/utils/uuid.modified.js'; // uuid
import verifyCode from '@/components/verify-code/verify-code';
import { getUserInfo } from '@/api/members';
import { whetherNavigate } from '@/utils/Foundation'; //登录跳转
import storage from '@/utils/storage.js'; //缓存
import wechatH5Login from './wechatH5Login.vue';
import { webConnect } from '@/api/connect.js';
export default {
components: {
myVerification,
verifyCode,
@ -95,56 +149,57 @@
wechatLogin: false, //是否加载微信公众号登录
flage: false, //是否验证码验证
codeFlag: true, //验证开关，用于是否展示验证码
tips: "",
tips: '',
current: 0,
codeColor: "#999", //按钮验证码颜色
codeColor: '#999', //按钮验证码颜色
lightColor: this.$lightColor,
seconds: 60, //默认验证码等待时间
loginTitleWay: [{
title: "欢迎登录",
desc: "登录后更精彩，美好生活即将开始",
loginTitleWay: [
{
title: '欢迎登录',
desc: '登录后更精彩，美好生活即将开始'
},
{
title: "请输入验证码",
desc: "已经发送验证码至",
},
title: '请输入验证码',
desc: '已经发送验证码至'
}
],
showBack: false,
enabuleFetchCode: false,
enabulePrivacy: false, //隐私政策
mobile: "", //手机号
code: "", //验证码
mobile: '', //手机号
code: '', //验证码
inputStyle: {
height: "104rpx",
"border-bottom": "1rpx solid #D8D8D8",
"letter-spacing": "1rpx",
"font-size": "40rpx",
"line-height": "40rpx",
color: "#333",
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;",
placeholderStyle: 'font-size: 32rpx;line-height: 32rpx;color: #999999;',
loginList: [
//第三方登录集合
{
icon: "weixin-fill",
color: "#00a327",
title: "微信",
code: "WECHAT",
icon: 'weixin-fill',
color: '#00a327',
title: '微信',
code: 'WECHAT'
},
{
icon: "qq-fill",
color: "#38ace9",
title: "QQ",
code: "QQ",
icon: 'qq-fill',
color: '#38ace9',
title: 'QQ',
code: 'QQ'
},
{
icon: "apple-fill",
color: "#000000",
title: "Apple",
code: "APPLE",
},
icon: 'apple-fill',
color: '#000000',
title: 'Apple',
code: 'APPLE'
}
],
initurl:false
initurl: false
};
},
@ -152,7 +207,7 @@
//#ifdef H5
let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
if (isWXBrowser) {
webConnect("WECHAT").then((res) => {
webConnect('WECHAT').then((res) => {
let data = res.data;
if (data.success) {
window.location = data.result;
@ -166,7 +221,7 @@
// #ifndef APP-PLUS
//判断是否微信浏览器
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
this.wechatLogin = true;
return;
}
@ -175,45 +230,45 @@
* 条件编译判断当前客户端类型
*/
//#ifdef H5
this.clientType = "H5";
this.clientType = 'H5';
//#endif
//#ifdef APP-PLUS
this.clientType = "APP";
this.clientType = 'APP';
/**如果是app 加载支持的登录方式*/
let _this = this;
uni.getProvider({
service: "oauth",
service: 'oauth',
success: (result) => {
_this.loginList = result.provider.map((value) => {
//展示title
let title = "";
let title = '';
//系统code
let code = "";
let code = '';
//颜色
let color = "#8b8b8b";
let color = '#8b8b8b';
//图标
let icon = "";
let icon = '';
//uni 联合登录 code
let appcode = "";
let appcode = '';
switch (value) {
case "weixin":
icon = "weixin-circle-fill";
color = "#00a327";
title = "微信";
code = "WECHAT";
case 'weixin':
icon = 'weixin-circle-fill';
color = '#00a327';
title = '微信';
code = 'WECHAT';
break;
case "qq":
icon = "qq-circle-fill";
color = "#38ace9";
title = "QQ";
code = "QQ";
case 'qq':
icon = 'qq-circle-fill';
color = '#38ace9';
title = 'QQ';
code = 'QQ';
break;
case "apple":
icon = "apple-fill";
color = "#000000";
title = "Apple";
code = "APPLE";
case 'apple':
icon = 'apple-fill';
color = '#000000';
title = 'Apple';
code = 'APPLE';
break;
}
return {
@ -221,28 +276,28 @@
code: code,
color: color,
icon: icon,
appcode: value,
appcode: value
};
});
},
fail: (error) => {
uni.showToast({
title: "获取登录通道失败" + error,
title: '获取登录通道失败' + error,
duration: 2000,
icon: "none",
icon: 'none'
});
},
}
});
//#endif
//特殊平台，登录方式需要过滤
// #ifdef H5
this.methodFilter(["QQ"]);
this.methodFilter(['QQ']);
// #endif
//微信小程序，只支持微信登录
// #ifdef MP-WEIXIN
this.methodFilter(["WECHAT"]);
this.methodFilter(['WECHAT']);
// #endif
},
watch: {
@ -254,7 +309,7 @@
if (val.length == 11) {
this.enabuleFetchCode = true;
}
},
}
},
async flage(val) {
@ -272,61 +327,60 @@
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
icon: 'none'
});
this.flage = false;
}
} else {
this.$u.toast("请倒计时结束后再发送");
this.$u.toast('请倒计时结束后再发送');
}
} else {
this.$refs.verification.hide();
}
},
}
},
onLoad(options) {
if(options.init=='index'){
this.initurl = true
if (options.init == 'index') {
this.initurl = true;
}
console.log((options))
console.log(options);
if (options && options.state) {
this.stateLogin(options.state);
}
},
methods: {
customback(){
if(this.initurl){
customback() {
if (this.initurl) {
uni.switchTab({
url:'/pages/tabbar/vlog/index?init=ok'
})
}else{
uni.navigateBack()
url: '/pages/tabbar/vlog/index'
});
} else {
uni.navigateBack();
}
},
//联合信息返回登录
stateLogin(state) {
loginCallback(state).then((res) => {
console.log(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",
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/home/index",
getCurrentPages().length > 1
? uni.navigateBack({
delta: getCurrentPages().length - 2
})
: uni.switchTab({
url: '/pages/tabbar/vlog/index'
});
}
});
@ -343,9 +397,9 @@
});
} else {
uni.showToast({
title: "配置有误请联系管理员",
title: '配置有误请联系管理员',
duration: 2000,
icon: "none",
icon: 'none'
});
}
});
@ -353,79 +407,85 @@
},
//非h5 获取openid
async nonH5OpenId(item) {
console.log(item);
let _this = this;
//获取各个openid
await uni.login({
provider: item.appcode,
// #ifdef MP-ALIPAY
scopes: "auth_user", //支付宝小程序需设置授权类型
// #endif
success: function(res) {
uni.setStorageSync("type", item.code);
// scopes: 'snsapi_userinfo',
success: function (res) {
uni.setStorageSync('type', item.code);
//微信小程序意外的其它方式直接在storage中写入openid
// #ifndef MP-WEIXIN
uni.setStorageSync("openid", res.authResult.openid);
uni.setStorageSync('openid', res.authResult.openid);
// #endif
},
fail(e) {
uni.showToast({
title: "第三方登录暂不可用！",
icon: "none",
duration: 3000,
title: '第三方登录暂不可用！',
icon: 'none',
duration: 3000
});
},
complete(e) {
console.log(e);
//获取用户信息
uni.getUserInfo({
provider: item.appcode,
success: function(infoRes) {
success: function (infoRes) {
//写入用户信息
uni.setStorageSync("nickname", infoRes.userInfo.nickName);
uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
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");
_this.goOpenidLogin('WECHAT_MP');
});
// #endif
// #ifndef MP-WEIXIN
_this.goOpenidLogin("APP");
_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
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 = "第三方登录暂不可用";
let errormessage = '第三方登录暂不可用';
uni.showToast({
// title: '未绑定第三方账号',
title: errormessage,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
return;
} else {
storage.setAccessToken(res.data.result.accessToken);
storage.setRefreshToken(res.data.result.refreshToken);
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",
title: '第三方登录成功!',
icon: 'none'
});
// 执行登录
getUserInfo().then((user) => {
@ -444,7 +504,7 @@
whetherNavigate();
} else {
uni.switchTab({
url: "/pages/tabbar/home/index",
url: '/pages/tabbar/vlog/index'
});
}
});
@ -454,7 +514,7 @@
//微信小程序获取openid
async weixinMPOpenID(res) {
await miniProgramLogin(res.code).then((res) => {
uni.setStorageSync("openid", res.data);
uni.setStorageSync('openid', res.data);
});
},
/**跳转到登录页面 */
@ -462,7 +522,7 @@
// #ifdef H5
let code = connectLogin.code;
let buyer = api.buyer;
window.open(buyer + `/passport/connect/connect/login/web/` + code, "_self");
window.open(buyer + `/passport/connect/connect/login/web/` + code, '_self');
// #endif
// #ifdef APP-PLUS
this.nonH5OpenId(connectLogin);
@ -475,28 +535,31 @@
* 清空当前账号信息
*/
storage.setHasLogin(false);
storage.setAccessToken("");
storage.setRefreshToken("");
storage.setAccessToken('');
storage.setRefreshToken('');
storage.setUserInfo({});
// 清理vlog信息
storage.setVlogToken("")
storage.setVlogUserInfo({})
storage.setVlogToken('');
storage.setVlogUserInfo({});
/**
* 执行登录
*/
smsLogin({
smsLogin(
{
mobile: this.mobile,
code: this.code
}, this.clientType).then((res) => {
},
this.clientType
).then((res) => {
// console.log(res)
if (res.data.success) {
const infoData = res.data.result
const vlogInfo = JSON.parse(infoData.tikUser)
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)
storage.setVlogToken(vlogInfo.userToken);
storage.setVlogUserInfo(vlogInfo);
/**
* 登录成功后获取个人信息
@ -511,8 +574,8 @@
storage.setHasLogin(true);
// 登录成功
uni.showToast({
title: "登录成功!",
icon: "none",
title: '登录成功!',
icon: 'none'
});
/**
@ -523,7 +586,7 @@
whetherNavigate();
} else {
uni.switchTab({
url: "/pages/tabbar/home/index",
url: '/pages/tabbar/home/index'
});
}
});
@ -539,13 +602,13 @@
// 跳转
navigateToPrivacy(val) {
uni.navigateTo({
url: "/pages/mine/help/tips?type=" + val,
url: '/pages/mine/help/tips?type=' + val
});
},
// 点击获取验证码
start() {
this.codeColor = "#999";
this.$u.toast("验证码已发送");
this.codeColor = '#999';
this.$u.toast('验证码已发送');
this.flage = false;
this.codeFlag = false;
@ -565,24 +628,24 @@
fetchCode() {
if (!this.enabulePrivacy) {
uni.showToast({
title: "请同意用户隐私",
title: '请同意用户隐私',
duration: 2000,
icon: "none",
icon: 'none'
});
return false;
}
if (!this.$u.test.mobile(this.mobile)) {
uni.showToast({
title: "请填写正确手机号",
title: '请填写正确手机号',
duration: 2000,
icon: "none",
icon: 'none'
});
return false;
}
if (this.tips == "重新获取验证码") {
if (this.tips == '重新获取验证码') {
uni.showLoading({
title: "加载中",
title: '加载中'
});
if (!this.codeFlag) {
let timer = setInterval(() => {
@ -599,67 +662,67 @@
return false;
}
},
},
};
}
}
};
</script>
<style>
page {
page {
background: #fff;
}
}
</style>
<style lang="scss" scoped>
.wrapper {
.wrapper {
padding: 0 80rpx;
}
}
.title {
.title {
padding-top: calc(104rpx);
font-style: normal;
line-height: 1;
font-weight: 500;
font-size: 56rpx;
color: #333;
}
}
.box-code {
.box-code {
margin-top: 78rpx;
}
}
.desc,
.desc-light {
.desc,
.desc-light {
font-size: 32rpx;
line-height: 32rpx;
color: #333333;
margin-top: 40rpx;
}
}
.desc {
.desc {
color: #333;
}
}
.desc-light {
.desc-light {
color: #999999;
>span {
> span {
color: #333;
margin-left: 8rpx;
}
}
}
.mobile {
.mobile {
margin-top: 80rpx;
}
}
.disable {
.disable {
background: linear-gradient(90deg, #ffdcba 2.21%, #ffcfb2 99.86%);
}
}
.fetch {
.fetch {
background: linear-gradient(57.72deg, #ff8a19 18.14%, #ff5e00 98.44%);
}
}
.btn {
.btn {
border-radius: 100px;
width: 590rpx;
margin-top: 97rpx;
@ -668,20 +731,20 @@
line-height: 80rpx;
text-align: center;
color: #ffffff;
}
}
.tips {
.tips {
font-size: 12px;
line-height: 20px;
margin-top: 32rpx;
width: 546rpx;
>span {
> span {
color: $light-color;
}
}
}
.fetch-btn {
.fetch-btn {
width: 370rpx;
height: 80rpx;
line-height: 80rpx;
@ -692,18 +755,18 @@
color: #999;
margin: 71rpx auto 0 auto;
}
}
.login-list {
.login-list {
display: flex;
width: 590rpx;
position: absolute;
bottom: 20px;
align-items: center;
justify-content: center;
}
}
.login-item {
.login-item {
width: 80rpx;
border-radius: 10rpx;
@ -713,5 +776,5 @@
align-items: center;
margin: 0 20rpx;
}
}
</style>

274
pages/search/search.nvue Executable file
View File

@ -0,0 +1,274 @@
<template>
<view class="page">
<!-- 这里是状态栏, 每个页面都需要有, 目的不让页面覆盖状态栏 -->
<view :style="{ height: statusBarHeight + 'px' }"></view>
<view class="big-search-wrapper">
<image
class="header-right-search icon-search"
src="/static/images/icon-back.png"
@click="back" />
<view class="search-box">
<view class="search-box-left">
<image
class="header-right-search search-image"
src="/static/images/icon-search.png" />
</view>
<input
type="text"
:model="searchContent"
:value="searchContent"
@input="typingContent"
placeholder="请输入内容~"
maxlength="10"
class="search-input" />
<view class="search-box-right">
<image
class="scan-image"
src="/static/images/icon-scan-qrcode.png"
@click="scan" />
</view>
</view>
<view class="btn" @click="doSearch">
<text class="search-btn">搜索</text>
</view>
</view>
<view class="history">
<view
v-for="(h, index) in historyList"
:key="index"
class="history-item-wrapper">
<view class="time-and-text" @click="searchByHistory(h)">
<image class="time-image" src="/static/images/icon-time.png" />
<text class="history-text">{{ h }}</text>
</view>
<image
class="delete-image"
src="/static/images/icon-delete.png"
@click="removeHistoryItem(index)" />
</view>
<view
v-if="historyList.length == 0"
class="clear-all-wrapper"
@click="removeAllHistory">
<text class="clear-all"></text>
</view>
<view v-else class="clear-all-wrapper" @click="removeAllHistory">
<text class="clear-all">清除所有搜索记录</text>
</view>
</view>
</view>
</template>
<script>
let system = uni.getSystemInfoSync();
export default {
data() {
return {
searchContent: "",
historyList: [],
};
},
onLoad() {
this.statusBarHeight = system.statusBarHeight;
// 从本地缓存获得搜索的历史记录
let historyListJSON = uni.getStorageSync("historyList");
if (historyListJSON != null && historyListJSON != undefined) {
this.historyList = JSON.parse(historyListJSON);
}
},
methods: {
back() {
uni.navigateBack({
delta: 1,
});
},
scan() {
uni.scanCode({
success: (e) => {
let result = e.result;
let vlogId = JSON.parse(result).content;
uni.navigateTo({
url: "../vlog/vlog?vlogId=" + vlogId,
});
},
});
},
typingContent(e) {
this.searchContent = e.detail.value;
},
searchByHistory(searchContent) {
this.searchContent = searchContent;
this.doSearch();
},
doSearch() {
let me = this;
let searchContent = this.searchContent;
if (getApp().isStrEmpty(searchContent)) {
uni.showToast({
title: "搜索关键字为空!",
icon: "none",
duration: 2000,
});
this.searchContent = "";
return;
}
let tempList = this.historyList;
// 判断搜索内容是否已经存在, 如果存在, 则移除
for (let i = 0; i < tempList.length; i++) {
let old = tempList[i];
if (searchContent === old) {
tempList.splice(i, 1);
break;
}
}
tempList.unshift(searchContent);
// 如果超过10个, 则删除最后一项
if (tempList.length > 10) {
tempList.splice(10, 1);
this.historyList = tempList;
}
// 保存到本地缓存
uni.setStorageSync("historyList", JSON.stringify(this.historyList));
// 跳转页面, 把搜索条件携带过去
uni.navigateTo({
url: "searchList?search=" + searchContent,
});
},
removeHistoryItem(index) {
this.historyList.splice(index, 1);
uni.setStorageSync("historyList", JSON.stringify(this.historyList));
},
removeAllHistory() {
this.historyList = [];
uni.setStorageSync("historyList", JSON.stringify(this.historyList));
},
},
};
</script>
<style lang="scss">
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #181b27;
.big-search-wrapper {
padding: 30rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
.header-right-search {
height: 100rpx;
}
.icon-search {
width: 40rpx;
height: 40rpx;
opacity: 0.8;
align-self: center;
}
.search-box {
display: flex;
flex-direction: row;
.search-box-left {
padding: 0 10rpx;
display: flex;
flex-direction: row;
background-color: #55565e;
border-top-left-radius: 6rpx;
border-bottom-left-radius: 6rpx;
.search-image {
width: 50rpx;
height: 50rpx;
opacity: 0.8;
align-self: center;
}
}
}
.search-input {
width: 360rpx;
background-color: #55565e;
height: 60rpx;
font-size: 28rpx;
color: #ffffff;
}
.search-box-right {
padding: 0 16rpx;
display: flex;
flex-direction: row;
background-color: #55565e;
border-top-right-radius: 6rpx;
border-bottom-right-radius: 6rpx;
.scan-image {
width: 50rpx;
height: 50rpx;
opacity: 0.8;
align-self: center;
}
}
.btn {
align-self: center;
.search-btn {
color: #ffffff;
font-size: 32rpx;
align-self: center;
}
}
}
.history {
.history-item-wrapper {
padding: 16rpx 26rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
.time-and-text {
display: flex;
flex-direction: row;
width: 500rpx;
.time-image {
width: 40rpx;
height: 40rpx;
align-self: center;
}
.history-text {
color: #ffffff;
font-size: 30rpx;
align-self: center;
margin-left: 20rpx;
}
}
.delete-image {
width: 30rpx;
height: 30rpx;
opacity: 0.9;
align-self: center;
}
}
.clear-all-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 40rpx;
.clear-all {
color: #f1f1f1;
font-size: 28rpx;
align-self: center;
}
}
}
}
</style>

260
pages/search/searchList.nvue Executable file
View File

@ -0,0 +1,260 @@
<template>
<view class="page">
<view :style="{ height: statusBarHeight + 'px' }">
<!-- 这里是状态栏, 每个页面都需要有, 目的不让页面覆盖状态栏 -->
</view>
<view class="big-search-wrapper">
<image
class="header-right-search icon-search"
src="/static/images/icon-back.png"
@click="back" />
<view class="search-box">
<view class="search-box-left">
<image
class="header-right-search search-image"
src="/static/images/icon-search.png" />
</view>
<input
type="text"
:model="searchContent"
:value="searchContent"
@input="typingContent"
placeholder="请输入内容~"
maxlength="10"
class="search-input" />
</view>
<view class="btn" @click="doSearch">
<text class="search-btn">搜索</text>
</view>
</view>
<view class="waterfall-wrapper" :style="{ height: screenHeight + 'px' }">
<waterfall
:style="{ height: screenHeight + 'px' }"
column-count="2"
column-width="auto"
column-gap="2rpx"
left-gap="4rpx"
right-gap="4rpx">
<cell v-for="(vlog, index) in waterList" :key="index">
<view class="every-single-video" @appear="appearVlog(index)">
<image
:src="vlog.cover"
mode="aspectFill"
class="half-cover"
@click="goToVlog(vlog.vlogId)" />
</view>
</cell>
</waterfall>
</view>
</view>
</template>
<script>
let system = uni.getSystemInfoSync();
let app = getApp();
export default {
data() {
return {
screenHeight: 0,
statusBarHeight: 0,
waterList: [],
page: 0,
totalPage: 0,
search: "",
searchContent: "",
};
},
onLoad(params) {
uni.showLoading({
title: "正在获取!",
});
this.statusBarHeight = system.statusBarHeight;
let screenHeight = system.safeArea.bottom;
this.screenHeight = screenHeight;
this.searchContent = params.search
// 搜索的关键字
let search = params.search;
this.search = search;
this.fetchList(0);
},
onShow() {},
methods: {
doSearch() {
let me = this;
let searchContent = this.searchContent;
if (getApp().isStrEmpty(searchContent)) {
uni.showToast({
title: "搜索为空!",
icon: "none",
duration: 2000,
});
this.searchContent = "";
return;
}
uni.navigateTo({
url: "searchList?search=" + searchContent,
});
},
typingContent(e) {
this.searchContent = e.detail.value;
},
back() {
uni.navigateBack({
delta: 1,
});
},
loadMore() {
if (this.page >= this.totalPage) {
return;
} else {
this.fetchList(this.page);
}
},
fetchList(page) {
let me = this;
page = page + 1;
let search = me.search;
let userInfo = getApp().getUserInfoSession();
let userId = "";
if (!app.isStrEmpty(userInfo)) {
userId = userInfo.id;
}
let serverUrl = app.globalData.serverUrl;
uni.request({
method: "GET",
url:
serverUrl +
"/vlog/indexList?userId=" +
userId +
"&search=" +
search +
"&page=" +
page +
"&pageSize=10",
success(result) {
if (result.data.status == 206) {
uni.hideLoading();
let waterList = result.data.data.rows;
let totalPage = result.data.data.total;
me.waterList = waterList;
me.page = page;
me.totalPage = totalPage;
if (
waterList == null ||
waterList == undefined ||
waterList.length == 0
) {
uni.showToast({
title: "没有结果~",
icon: "none",
duration: 2000,
});
setTimeout(() => {
uni.navigateBack({
delta: 1,
});
}, 1000);
}
}
},
});
},
goToVlog(vlogId) {
uni.navigateTo({
url: "../vlog/vlog?vlogId=" + vlogId,
});
},
// 每个vlog出现都会触发
appearVlog(index, e) {
let me = this;
// 如果最后一个vlog出现, 则加载更多
if (index == me.waterList.length - 1) {
me.loadMore();
}
},
},
};
</script>
<style lang="scss">
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #181b27;
.big-search-wrapper {
padding: 30rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
.header-right-search {
height: 100rpx;
}
.icon-search {
width: 40rpx;
height: 40rpx;
opacity: 0.8;
align-self: center;
}
.search-box {
display: flex;
flex-direction: row;
.search-box-left {
padding: 0 10rpx;
display: flex;
flex-direction: row;
background-color: #55565e;
border-top-left-radius: 6rpx;
border-bottom-left-radius: 6rpx;
.search-image {
width: 50rpx;
height: 50rpx;
opacity: 0.8;
align-self: center;
}
}
}
.search-input {
width: 440rpx;
background-color: #55565e;
height: 60rpx;
font-size: 28rpx;
color: #ffffff;
border-top-right-radius: 6rpx;
border-bottom-right-radius: 6rpx;
}
.btn {
align-self: center;
.search-btn {
color: #ffffff;
font-size: 32rpx;
align-self: center;
}
}
}
.waterfall-wrapper {
background-color: #181b27;
.every-single-video {
display: flex;
flex-direction: column;
margin-top: 10rpx;
.half-cover {
background-color: #000000;
height: 600rpx;
width: 365rpx;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
}
}
}
</style>

142
pages/tabbar/im/index.vue
View File

@ -1,7 +1,10 @@
<template>
<div style="height: 100%">
<div class="jolkp">
<div class="fan" :style="{ marginRight: statue == 0 ? '50%' : '50%' }">
<div
class="fan"
:style="{ marginRight: statue == 0 ? '50%' : '50%' }"
>
<div
@click="hui(0)"
:style="{ marginTop: '35px', color: '#fff' }"
@ -32,7 +35,11 @@
:style="{ marginTop: '35px' }"
></div>
<!-- 弹出框 -->
<div v-if="isPopupVisible" class="popup" ref="popup">
<div
v-if="isPopupVisible"
class="popup"
ref="popup"
>
<ul>
<li @click="handleAddFriend">添加好友/群聊</li>
<li @click="handleMenu()">发起群聊</li>
@ -41,11 +48,23 @@
</div>
</div>
<!-- 搜索添加 -->
<TUIContactsea v-if="statue == 2" @switchConversation="hui" />
<TUIContactsea
v-if="statue == 2"
@switchConversation="hui"
/>
<!-- 联系人 -->
<TUIContact v-else-if="statue == 1" style="height: 100%" />
<SelectFriend v-else-if="statue == 3" @con="confn" />
<SelectFriendqlioa v-else-if="statue == 4" @concen="concen" />
<TUIContact
v-else-if="statue == 1"
style="height: 100%"
/>
<SelectFriend
v-else-if="statue == 3"
@con="confn"
/>
<SelectFriendqlioa
v-else-if="statue == 4"
@concen="concen"
/>
<!-- 站内信数据 -->
<!-- <div > -->
<scroll-view
@ -78,28 +97,26 @@
<!-- </div> -->
<!-- 会话 -->
<TUIConversation style="height: 100%" v-else />
<TUIConversation
style="height: 100%"
v-else
/>
</div>
</template>
<script>
// 导入组件
import TUIConversation from "@/TUIKit/components/TUIConversation/index";
import TUIContact from "@/TUIKit/components/TUIContact/index";
import TUIContactsea from "@/TUIKit/components/TUIContact/indexsea";
import { TUILogin } from "@tencentcloud/tui-core";
import ContactSearch from "@/TUIKit/components/TUIContact/contact-search/index.vue";
import { TUIChatKit } from "@/TUIKit";
import SelectFriend from "@/TUIKit/components/TUIContact/select-friend/index.vue";
import SelectFriendqlioa from "@/TUIKit/components/TUIGroup/index.vue";
import TUICore, { ExtensionInfo, TUIConstants } from "@tencentcloud/tui-core";
import storage from "@/utils/storage.js";
import {
getUserimInfo,
getMember,
getMemberstate,
getMemberdelete,
} from "@/api/members";
import TUIConversation from '@/TUIKit/components/TUIConversation/index';
import TUIContact from '@/TUIKit/components/TUIContact/index';
import TUIContactsea from '@/TUIKit/components/TUIContact/indexsea';
import { TUILogin } from '@tencentcloud/tui-core';
import ContactSearch from '@/TUIKit/components/TUIContact/contact-search/index.vue';
import { TUIChatKit } from '@/TUIKit';
import SelectFriend from '@/TUIKit/components/TUIContact/select-friend/index.vue';
import SelectFriendqlioa from '@/TUIKit/components/TUIGroup/index.vue';
import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
import storage from '@/utils/storage.js';
import { getUserimInfo, getMember, getMemberstate, getMemberdelete } from '@/api/members';
TUIChatKit.init();
let vueVersion = 2;
// vueVersion = 3;
@ -113,7 +130,7 @@ export default {
ContactSearch,
SelectFriend,
SelectFriendqlioa,
TUIChatKit,
TUIChatKit
},
data() {
return {
@ -129,7 +146,7 @@ export default {
pageSize: 20,
pageNumber: 1,
total: 0,
loadMoreStatus: "more", // 加载更多状态
loadMoreStatus: 'more' // 加载更多状态
};
},
created() {},
@ -145,19 +162,19 @@ export default {
userID: par.userID,
userSig: par.userSig,
useUploadPlugin: true, // If you need to send rich media messages, please set to true.
framework: `vue${vueVersion}`, // framework used vue2 / vue3
framework: `vue${vueVersion}` // framework used vue2 / vue3
});
} else {
// 接口返回非 200 状态码，跳转登录页面
uni.navigateTo({
url: "/pages/passport/login",
url: '/pages/passport/login'
});
}
})
.catch(() => {
// 请求失败，跳转登录页面
uni.navigateTo({
url: "/pages/passport/login",
url: '/pages/passport/login'
});
});
},
@ -165,22 +182,20 @@ export default {
this.getMembermethod();
this.setTime();
// 监听全局点击事件
document.addEventListener("click", (event) =>
this.handleGlobalClick(event)
);
document.addEventListener('click', (event) => this.handleGlobalClick(event));
// 监听滚动事件
},
beforeDestroy() {
// 移除全局点击事件
document.removeEventListener("click", this.handleGlobalClick);
document.removeEventListener('click', this.handleGlobalClick);
// 清除定时器
clearTimeout(this.cleartime);
// 移除滚动事件监听
},
methods: {
lowerBottom() {
if(this.total>=this.meList.length){
this.pageSize+=10;
if (this.total >= this.meList.length) {
this.pageSize += 10;
this.getMembermethod();
}
},
@ -196,7 +211,7 @@ export default {
const itemJson = encodeURIComponent(JSON.stringify(item));
// 使用 uni.navigateTo 方法跳转到详情页，并传递信息
uni.navigateTo({
url: `/pages/tabbar/im/details/index?item=${itemJson}`,
url: `/pages/tabbar/im/details/index?item=${itemJson}`
});
getMemberstate({ messageId: item.messageId }).then((res) => {
this.getMembermethod();
@ -218,7 +233,7 @@ export default {
this.popupRef = this.$refs.popup;
},
handleGlobalClick(event) {
if (this.isPopupVisible && event.target._prevClass != "jolkp_l") {
if (this.isPopupVisible && event.target._prevClass != 'jolkp_l') {
this.isPopupVisible = false;
}
},
@ -226,7 +241,7 @@ export default {
getMembermethod() {
const param = {
pageSize: this.pageSize,
pageNumber: this.pageNumber,
pageNumber: this.pageNumber
};
getMember(param).then((res) => {
this.total = res.data.result.total;
@ -236,23 +251,16 @@ export default {
this.meList = this.meList.concat(res.data.result.records);
}
this.swipeStates = new Array(this.meList.length).fill(0);
this.tole = this.meList.filter(
(item) => item.status === "UN_READY"
).length;
this.tole = this.meList.filter((item) => item.status === 'UN_READY').length;
});
},
handleMenu() {
const fn = [
...TUICore.getExtensionList(
TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID
),
];
const fn = [...TUICore.getExtensionList(TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID)];
const item = fn[1];
const {
listener = {
onClicked: () => {},
},
onClicked: () => {}
}
} = item;
listener?.onClicked?.(item);
this.statue = 3;
@ -266,35 +274,35 @@ export default {
this.isPopupVisible = false;
uni.scanCode({
success: (res) => {
console.log("扫码结果:", res);
this.statue=0
console.log('扫码结果:', res);
this.statue = 0;
// 可以在这里添加处理扫码结果的逻辑
},
fail: (err) => {
console.error("扫码失败:", err);
this.statue=0
},
console.error('扫码失败:', err);
this.statue = 0;
}
});
},
startLongPress(item, index) {
this.longPressTimer = setTimeout(() => {
uni.showModal({
title: "确认删除",
content: "确定要删除这条消息吗？",
title: '确认删除',
content: '确定要删除这条消息吗？',
success: (res) => {
if (res.confirm) {
getMemberdelete({ messageId: item.messageId }).then((res) => {
this.getMembermethod();
});
}
},
}
});
}, 2000);
},
endLongPress() {
clearTimeout(this.longPressTimer);
},
},
}
}
};
</script>
@ -313,7 +321,7 @@ page {
font-size: 15px;
justify-content: end;
/* 设置背景图 */
background-image: url("@/static/im/Rectangle.png");
background-image: url('@/static/im/Rectangle.png');
/* 让背景图覆盖整个元素 */
background-size: cover;
/* 背景图不重复 */
@ -323,7 +331,7 @@ page {
.jolkp_l {
width: 2rem;
height: 2rem;
background-image: url("@/static/im/Frame.png");
background-image: url('@/static/im/Frame.png');
/* 让背景图覆盖整个元素 */
background-size: cover;
/* 背景图不重复 */
@ -335,7 +343,7 @@ page {
.jolkp_h {
width: 2rem;
height: 2rem;
background-image: url("@/static/im/user.png");
background-image: url('@/static/im/user.png');
/* 让背景图覆盖整个元素 */
background-size: cover;
/* 背景图不重复 */
@ -346,7 +354,7 @@ page {
.jolkp_z {
width: 2rem;
height: 1.5rem;
background-image: url("@/static/im/znx.png");
background-image: url('@/static/im/znx.png');
/* 让背景图覆盖整个元素 */
background-size: cover;
/* 背景图不重复 */
@ -390,7 +398,7 @@ page {
.fan {
width: 10%;
height: "100%";
height: '100%';
font-size: 18px;
display: flex;
@ -400,7 +408,7 @@ page {
.fan {
margin-right: 56% !important;
width: 10%;
height: "100%";
height: '100%';
font-size: 18px;
display: flex;
margin-top: 85%;
@ -426,7 +434,7 @@ page {
.three_div1 {
height: 3rem;
width: 40%;
background-image: url("@/static/im/kf.png");
background-image: url('@/static/im/kf.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
@ -437,7 +445,7 @@ page {
.three_div2 {
width: 40%;
height: 3rem;
background-image: url("@/static/im/hy.png");
background-image: url('@/static/im/hy.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 40%;
@ -445,7 +453,7 @@ page {
.three_div3 {
height: 3rem;
background-image: url("@/static/im/da.png");
background-image: url('@/static/im/da.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 40%;

635
pages/tabbar/vlog/index.nvue
View File

@ -1,142 +1,221 @@
<template>
<view class="page" :id="pageId">
<!-- <list :id="pageId" class="page" :bounce="true" isSwiperList="true"> -->
<!-- 左中右的三个页面切换, 依次是: 附近 - 关注 - 推荐 -->
<swiper ref="swiper1" id="tab-bar-view" style="my-swiper" :style="{height: screenHeight + 'px'}"
:current="curIndex" @change="changeTopTab" @transition="onswiperscroll" @animationfinish="animationfinish"
@onAnimationEnd="animationfinish">
<!-- <swiper-item>
<view class="near-by" :style="{height: screenHeight+'px'}">
<text ref="fujin" :pid="0" :parentId="pageId" class="warn-info">暂未开放，敬请期待!</text>
</view>
</swiper-item> -->
<view
class="page"
:id="pageId"
>
<swiper
ref="swiper1"
id="tab-bar-view"
style="my-swiper"
:style="{ height: screenHeight + 'px' }"
:current="curIndex"
@change="changeTopTab"
@transition="onswiperscroll"
@animationfinish="animationfinish"
@onAnimationEnd="animationfinish"
>
<swiper-item>
<view v-if="myUserInfo == null" ref="videoFollowComp" class="my-follow" :style="{height: screenHeight+'px'}">
<text class="warn-info">请登录后查看！</text>
</view>
<video-follow-comp ref="videoFollowComp" :pid="1" :parentId="pageId" :screenHeight="screenHeight"
:playFollowStatus="playFollowStatus" :videoList="videoList" :refreshList="refreshList"
:pagingList="pagingList" @showLoading="showLoading" @hideLoading="hideLoading"
@letFollowVideoPause="letFollowVideoPause"
@displayVideoPaging="displayVideoPaging"></video-follow-comp>
<video-local
ref="videoLocal"
:pid="1"
:parentId="pageId"
:screenHeight="screenHeight"
:progressFlag="isDraw_lo"
:playStatus="playLocalStatus"
:videoList="videoList"
:refreshList="refreshList"
:pagingList="pagingList"
@showLoading="showLoading"
@hideLoading="hideLoading"
@displayVideoPaging="displayVideoPaging"
></video-local>
</swiper-item>
<swiper-item>
<video-comp ref="videoComp" :pid="2" :parentId="pageId" :screenHeight="screenHeight"
:playStatus="playStatus" :videoList="videoList" :refreshList="refreshList" :pagingList="pagingList"
@showLoading="showLoading" @hideLoading="hideLoading"
@displayVideoPaging="displayVideoPaging"></video-comp>
<view
v-if="myUserInfo == null"
ref="videoFollowComp"
class="my-follow"
:style="{ height: screenHeight + 'px' }"
>
<text class="warn-info">请登录后查看！</text>
</view>
<video-follow-comp
ref="videoFollowComp"
:pid="2"
:parentId="pageId"
:screenHeight="screenHeight"
:progressFlag="isDraw_gz"
:playFollowStatus="playFollowStatus"
:videoList="videoList"
:refreshList="refreshList"
:pagingList="pagingList"
@showLoading="showLoading"
@hideLoading="hideLoading"
@letFollowVideoPause="letFollowVideoPause"
@displayVideoPaging="displayVideoPaging"
></video-follow-comp>
</swiper-item>
<swiper-item>
<video-comp
ref="videoComp"
:pid="3"
:parentId="pageId"
:screenHeight="screenHeight"
:progressFlag="isDraw_tj"
:playStatus="playStatus"
:videoList="videoList"
:refreshList="refreshList"
:pagingList="pagingList"
@showLoading="showLoading"
@hideLoading="hideLoading"
@displayVideoPaging="displayVideoPaging"
></video-comp>
</swiper-item>
</swiper>
<view class="header" id="head" :style="{marginTop:statusBarHeight+'px'}" v-if="!isLoading">
<view
class="header"
id="head"
:style="{ marginTop: statusBarHeight + 'px' }"
v-if="!isLoading"
>
<text class="header-left"></text>
<view class="header-center">
<!-- <view class="header-item" @click="tapFollow(0)">
<text class="header-item-title">附近</text>
<view class="header-item-line" :class="{'activate-line': curIndex === 0}"></view>
</view>
<view class="header-item" @click="tapFollow(1)">
<text class="header-item-title">关注</text>
<view class="header-item-line" :class="{'activate-line': curIndex === 1}"></view>
</view>
<view class="header-item" @click="tapFollow(2)">
<text class="header-item-title">推荐</text>
<view class="header-item-line" :class="{'activate-line': curIndex === 2}"></view>
</view> -->
<scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true"
:show-scrollbar="false" :scroll-into-view="scrollInto">
<view style="flex-direction: column;flex: 1;">
<view style="flex-direction: row;flex: 1;justify-content: space-around;">
<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id"
:ref="'tabitem'+index" :data-id="index" :data-current="index" @click="ontabtap">
<text class="uni-tab-item-title scroll-view-animation"
:class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
<scroll-view
ref="tabbar1"
id="tab-bar"
class="tab-bar"
:scroll="false"
:scroll-x="true"
:show-scrollbar="false"
:scroll-into-view="scrollInto"
>
<view style="flex-direction: column; flex: 1">
<view style="flex-direction: row; flex: 1; justify-content: space-around">
<view
class="uni-tab-item"
v-for="(tab, index) in tabList"
:key="tab.id"
:id="tab.id"
:ref="'tabitem' + index"
:data-id="index"
:data-current="index"
@click="ontabtap"
>
<text
class="uni-tab-item-title scroll-view-animation"
:class="tabIndex == index ? 'uni-tab-item-title-active' : ''"
>
{{ tab.name }}
</text>
</view>
</view>
<view class="scroll-view-indicator">
<view ref="underline" class="scroll-view-underline" :class="'scroll-view-animation'"
:style="{left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px'}"></view>
<view
ref="underline"
class="scroll-view-underline"
:class="isTap ? 'scroll-view-animation' : ''"
:style="{ left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px' }"
></view>
</view>
</view>
</scroll-view>
<!-- <view class="tab-bar-line">tab-bar-line</view> -->
</view>
<image class="header-right-search normal-img" src="/static/images/icon-search.png" @click="goSearch">
<image
class="header-right-search normal-img"
src="/static/images/icon-search.png"
@click="goSearch"
/>
</view>
<view class="header" :style="{marginTop:statusBarHeight+'px'}" v-if="isLoading">
<view
class="header"
:style="{ marginTop: statusBarHeight + 'px' }"
v-if="isLoading"
>
<text class="header-left"></text>
<view class="header-center">
<view class="header-item">
<text class="header-refresh-title">下拉刷新视频</text>
</view>
</view>
<image class="header-right-search normal-img" src="/static/images/loading.gif">
<image
class="header-right-search normal-img"
src="/static/images/loading.gif"
/>
</view>
<!-- 顶部切换的导航 end -->
</view>
<!-- </list> -->
</template>
<script>
let animation = weex.requireModule('animation')
let dom = weex.requireModule('dom');
let system = uni.getSystemInfoSync();
// 缓存每页最多
const MAX_CACHE_DATA = 100;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;
const TAB_PRELOAD_OFFSET = 1;
import storage from "@/utils/storage.js"; //缓存
import {
vlogList
} from "@/api/vlog"
import {
isStrEmpty
} from '@/utils/tools.js'
import videoComp from '@/components/vlog/videoComp';
import videoFollowComp from '@/components/vlog/videoFollowComp';
export default {
let animation = weex.requireModule('animation');
let dom = weex.requireModule('dom');
let system = uni.getSystemInfoSync();
console.log(system);
// 缓存每页最多
const MAX_CACHE_DATA = 100;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;
const TAB_PRELOAD_OFFSET = 1;
import storage from '@/utils/storage.js'; //缓存
import { vlogList } from '@/api/vlog';
import { isStrEmpty } from '@/utils/tools.js';
import videoComp from '@/components/vlog/videoComp';
import videoLocal from '@/components/vlog/videoLocal';
import videoFollowComp from '@/components/vlog/videoFollowComp';
import config from '@/config/config';
export default {
components: {
videoLocal,
videoComp,
videoFollowComp
},
data() {
return {
isTap: false,
isLoading: false,
statusBarHeight: system.statusBarHeight,
screenHeight: system.screenHeight,
curIndex: 1,
playStatus: false,
playFollowStatus: false,
curIndex: 2,
cityCode: '',
playStatus: false, // 推荐
playFollowStatus: false, // 关注
playLocalStatus: false, // 同城
videoList: [], // 首页一开始查询所得的默认视频列表
refreshList: [], // 下拉刷新后获得的新的列表
pagingList: [], // 分页list
refresh: 0, // 从me页面传来的refresh，用于退出登录后重新刷新当前页的视频
/////////////////
pageList: ['videoFollowComp', 'videoComp'],
pageList: ['videoLocal', 'videoFollowComp', 'videoComp'],
tabList: [
{
id: "tab" + 0,
name: '关注',
id: 'tab' + 0,
name: '同城',
pageid: 1
},
{
id: "tab" + 1,
name: '推荐',
id: 'tab' + 1,
name: '关注',
pageid: 2
},
{
id: 'tab' + 2,
name: '推荐',
pageid: 3
}
], //tabs内容,'fujin','videoFollowComp','videoComp'
indicatorLineLeft: 0,
indicatorLineWidth: 0,
cacheTab: [],
scrollInto: "",
pageId: "page",
tabIndex: 1,
}
scrollInto: '',
pageId: 'page',
tabIndex: 2,
isDraw_lo: false,
isDraw_tj: false,
isDraw_gz: false
};
},
created() {},
onReady() {
this._lastTabIndex = 0;
this.swiperWidth = 0;
@ -144,31 +223,41 @@
this.tabListSize = {};
this._touchTabIndex = 0;
this._headHeight = 100;
var timer = setTimeout(()=>{
var timer = setTimeout(() => {
this.selectorQuery();
clearTimeout(timer)
},300);
clearTimeout(timer);
}, 300);
},
onTabItemTap: function(e) {
console.log(e)
onTabItemTap: function (e) {
console.log(e);
// let tabIndex = e.index;
// this.playStatus = tabIndex === 0 ? true : false;
// 切换视频要做暂停或播放的判断
// let me = this;
// if (tabIndex == 0) {
// me.playStatus = false;
// me.playFollowStatus = true;
// } else if (tabIndex == 2) {
// me.playStatus = true;
// me.playFollowStatus = false;
// }
let me = this;
let curIndex = me.curIndex;
if (curIndex == 0) {
me.playLocalStatus = true;
me.playFollowStatus = false;
me.playStatus = false;
} else if (curIndex == 1) {
me.playLocalStatus = false;
me.playFollowStatus = true;
me.playStatus = false;
} else if (curIndex == 2) {
me.playLocalStatus = false;
me.playFollowStatus = false;
me.playStatus = true;
}
},
onShow() {
this.getLocation();
let me = this;
if(uni.getStorageSync('refreshVlogIndex')=='1'){
storage.setRefreshVlogIndex('0') //不需要刷新
me.myUserInfo = storage.getVlogUserInfo();
if (uni.getStorageSync('refreshVlogIndex') == '1') {
storage.setRefreshVlogIndex('0'); //不需要刷新
this.$refs.videoComp.displayVideoPaging(1, true);
this.$refs.videoFollowComp.displayVideoPaging(1, true);
this.$refs.videoLocal.displayVideoPaging(1, true);
}
// 如果当前没有list, 则relaunch
@ -179,35 +268,30 @@
}
}
// 判断如果当前是tab为1或2，则播放，否则不播放
if (me.curIndex == 0) {
me.playLocalStatus = true;
}
if (me.curIndex == 1) {
me.playFollowStatus = true;
} else if (me.curIndex == 1) {
}
if (me.curIndex == 2) {
me.playStatus = true;
}
// onShow的时候，关注的话，则重新刷一下list
var justFollowVlogerId = uni.getStorageSync("justFollowVlogerId") || '';
console.log('我是justFollowVlogerId', justFollowVlogerId)
if (!isStrEmpty(justFollowVlogerId)) {
this.$refs.videoComp.reFollowPlayList(justFollowVlogerId);
uni.setStorageSync("justFollowVlogerId", "");
}
// 取消关注也要重新刷一下list
var justCancelVlogerId = uni.getStorageSync("justCancelVlogerId");
if (!isStrEmpty(justCancelVlogerId)) {
this.$refs.videoComp.reCancelPlayList(justCancelVlogerId);
uni.setStorageSync("justCancelVlogerId", "");
}
},
onHide() {
var me = this;
// 显示和隐藏，需要判断根据不同tab做暂停或者隐藏
if (me.curIndex == 0) {
me.playLocalStatus = false;
me.isDraw_lo = false;
}
if (me.curIndex == 1) {
me.playFollowStatus = false;
} else if (me.curIndex == 1) {
me.isDraw_gz = false;
}
if (me.curIndex == 2) {
me.playStatus = false;
me.isDraw_tj = false;
}
},
@ -223,54 +307,140 @@
// },
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"
})
url: '/pages/search/search'
});
},
// ----------头部区域点击tabs
ontabtap(e) {
console.log(e);
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.tapFollow(index)
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() {
uni.createSelectorQuery().in(this).select('#head').boundingClientRect().exec(rect => {
var dm = uni.createSelectorQuery().in(this);
dm.select('#head')
.boundingClientRect()
.exec((rect) => {
this._headHeight = rect[0].height;
});
// 查询 tabbar 宽度
uni.createSelectorQuery().in(this).select('#tab-bar').boundingClientRect().exec(rect => {
dm.in(this)
.select('#tab-bar')
.boundingClientRect()
.exec((rect) => {
this.tabbarWidth = rect[0].width;
console.log(this.tabbarWidth)
console.log(this.tabbarWidth);
});
// 查询 tabview 宽度
uni.createSelectorQuery().in(this).select('#tab-bar-view').boundingClientRect().exec(rect => {
dm.in(this)
.select('#tab-bar-view')
.boundingClientRect()
.exec((rect) => {
this.swiperWidth = rect[0].width;
console.log(this.swiperWidth)
console.log(this.swiperWidth);
});
// 因 nvue 暂不支持 class 查询
var queryTabSize = uni.createSelectorQuery().in(this);
// 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 => {
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);
});
console.log(this.tabListSize[this.tabIndex]);
this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
this.switchTab(this.tabIndex);
});
},
onswiperscroll(e) {
// if(!this.tabListSize[this._lastTabIndex]) return
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) {
@ -278,14 +448,29 @@
} else if (offsetX < -TAB_PRELOAD_OFFSET) {
preloadIndex--;
}
if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) {
let prop = this.pageList[preloadIndex];
let obj = this.$refs[prop];
if (!obj) return;
// 点击切换
if (this.isTap) {
return;
}
let prop = this.pageList[preloadIndex]
let obj = this.$refs[prop]
// 切换失败
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];
@ -296,27 +481,41 @@
},
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{
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]
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){
@ -324,14 +523,9 @@
// }
// }
obj.setScrollRef(this._headHeight);
if (this.tabIndex === index) {
return;
}
console.log(this.cacheTab)
console.log(this.cacheTab);
// 缓存 tabId
if (obj.playerList.length > MAX_CACHE_DATA) {
let isExist = this.cacheTab.indexOf(this.tabIndex);
@ -358,6 +552,7 @@
// });
},
scrollTabTo(index) {
console.log(index);
const el = this.$refs['tabitem' + index][0];
let offset = 0;
// TODO fix ios offset
@ -375,20 +570,16 @@
//----------------------------
// 左滑右滑选项卡改变选中状态
changeTopTab: function(e) {
changeTopTab: function (e) {
var current = e.detail.current;
this.switchTab(current)
this.curIndex = current;
this.tabIndex = current
this.playFollowStatus = this.curIndex === 0 ? true : false;
this.playStatus = this.curIndex === 1 ? true : false;
},
// 点击头部选项卡，切换页面
tapFollow: function(current) {
this.curIndex = current;
this.tabIndex = current
this.playFollowStatus = this.curIndex === 0 ? true : false;
this.playStatus = this.curIndex === 1 ? true : false;
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的字样显示
@ -402,24 +593,24 @@
this.playFollowStatus = false;
}
}
}
};
</script>
<style scoped>
/* index start */
.page {
/* index start */
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000000;
}
}
/* index end */
/* index end */
/* 顶部选项卡 start */
.header {
/* 顶部选项卡 start */
.header {
position: absolute;
left: 0;
right: 0;
@ -429,102 +620,102 @@
align-items: center;
padding-left: 40px;
padding-right: 40px;
}
}
.header-center {
.header-center {
flex: 1;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.header-left,
.header-right {
.header-left,
.header-right {
color: #999;
height: 100rpx;
line-height: 100rpx;
align-items: flex-start;
justify-content: flex-end;
font-family: iconfont;
}
}
.header-right-search {
.header-right-search {
height: 100rpx;
/* align-items: flex-start;
justify-content: flex-end; */
}
}
.header-item {
.header-item {
align-items: center;
margin-left: 6rpx;
margin-right: 6rpx;
}
}
.header-item-title {
.header-item-title {
width: 120rpx;
text-align: center;
height: 60rpx;
line-height: 60rpx;
color: #FFFFFF;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
}
.header-refresh-title {
.header-refresh-title {
width: 300rpx;
text-align: center;
height: 60rpx;
line-height: 60rpx;
color: #FFFFFF;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
}
.header-item-line {
.header-item-line {
height: 5rpx;
line-height: 8rpx;
width: 60rpx;
border-radius: 8rpx;
}
}
/* 顶部选项卡 end */
/* 顶部选项卡 end */
/* 选项卡轮播组件 start */
.my-swiper {
/* 选项卡轮播组件 start */
.my-swiper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
.near-by {
.near-by {
background-color: #000000;
align-items: center;
justify-content: center;
}
}
.my-follow {
.my-follow {
background-color: #000000;
align-items: center;
justify-content: center;
}
}
/* 选项卡轮播组件 end */
.warn-info {
color: #FFFFFF;
/* 选项卡轮播组件 end */
.warn-info {
color: #ffffff;
font-size: 36rpx;
font-weight: 600;
}
}
.normal-img {
.normal-img {
width: 50rpx;
height: 50rpx;
opacity: 0.8;
}
}
/* */
.tab-bar {
/* */
.tab-bar {
/* width: 750upx; */
flex: 1;
height: 84upx;
@ -533,15 +724,15 @@
text-overflow: ellipsis;
justify-content: center;
align-items: center;
}
}
.uni-tab-item {
.uni-tab-item {
flex-wrap: nowrap;
/* padding-left: 25px; */
/* padding-right: 25px; */
}
}
.uni-tab-item-title {
.uni-tab-item-title {
color: #999;
font-size: 30upx;
height: 80upx;
@ -549,34 +740,34 @@
flex-wrap: nowrap;
lines: 1;
text-overflow: ellipsis;
}
}
.uni-tab-item-title-active {
color: #FFFFFF;
}
.uni-tab-item-title-active {
color: #ffffff;
}
.scroll-view-indicator {
.scroll-view-indicator {
position: relative;
height: 2px;
background-color: transparent;
}
}
.scroll-view-underline {
.scroll-view-underline {
position: absolute;
top: 0;
bottom: 0;
width: 0;
/* background-color: #007AFF; */
background-color: #FFFFFF;
}
background-color: #ffffff;
}
.scroll-view-animation {
.scroll-view-animation {
transition-duration: 0.2s;
/* transition-property: transform; */
}
}
.tab-bar-line {
.tab-bar-line {
height: 1upx;
background-color: #cccccc;
}
}
</style>

BIN
static/images/playvd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

6
utils/storage.js
View File

@ -11,6 +11,12 @@ 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 {
setCityCode(val) {
return uni.setStorageSync('cityCode',val)
},
getCityCode(){
return uni.getStorageSync('cityCode')
},
/**
* 写入RefreshVlogIndex
*/

8
vue.config.js
View File

@ -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) {