This commit is contained in:
陈浩 2025-04-25 18:27:47 +08:00
commit eaa9f50e7a
68 changed files with 10371 additions and 4407 deletions

10
App.vue
View File

@ -92,10 +92,18 @@ export default {
sourceType: ['album'],
compressed: false,
success(e) {
console.log(JSON.stringify(e));
console.log(e);
if (e.duration <= 30) {
uni.navigateTo({
url: '/pages/publish/publish?fileObjectEvent=' + JSON.stringify(e)
});
} else {
uni.showToast({
title: '时长不能超过30秒',
icon: 'none',
duration: 3000
});
}
}
});
});

View File

@ -13,8 +13,16 @@
<view class="share-list">
<!-- #ifdef MP-WEIXIN -->
<view class="share-item">
<button class="share-btn" open-type="share">
<u-icon color="#04BE02" size="80" name="weixin-fill"></u-icon>微信好友
<button
class="share-btn"
open-type="share"
>
<u-icon
color="#04BE02"
size="80"
name="weixin-fill"
></u-icon>
微信好友
</button>
</view>
<!-- #endif -->
@ -25,23 +33,34 @@
v-for="(item, index) in list"
:key="index"
>
<u-icon :color="item.color" size="80" :name="item.icon"></u-icon>
<u-icon
:color="item.color"
size="80"
:name="item.icon"
></u-icon>
<view>{{ item.title }}</view>
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="share-item" @click="copyLink()">
<u-icon color="#b4aee8" size="80" name="share-fill"></u-icon>
<view>{{ "复制链接" }}</view>
<view
class="share-item"
@click="copyLink()"
>
<u-icon
color="#b4aee8"
size="80"
name="share-fill"
></u-icon>
<view>{{ '复制链接' }}</view>
</view>
<!-- #endif -->
</view>
</u-popup>
</template>
<script>
import { h5Copy } from "@/js_sdk/h5-copy/h5-copy.js";
import configs from "@/config/config";
import mpShare from "uview-ui/libs/mixin/mpShare.js";
import { h5Copy } from '@/js_sdk/h5-copy/h5-copy.js';
import configs from '@/config/config';
import mpShare from 'uview-ui/libs/mixin/mpShare.js';
export default {
mixins: [mpShare],
@ -108,13 +127,13 @@ export default {
shareTitle() {
let shareTitle;
if (this.type == "goods") {
if (this.type == 'goods') {
shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`;
} else if (this.type == "shops") {
} else if (this.type == 'shops') {
shareTitle = `我发现了一个${this.goodsName}店铺快来跟我一起看看吧`;
} else if (this.type == "pintuan") {
} else if (this.type == 'pintuan') {
shareTitle = `我拼了一个${this.goodsName}快来跟我一起抢购吧!`;
} else if (this.type == "kanjia") {
} else if (this.type == 'kanjia') {
shareTitle = `请快来帮我砍一刀${this.goodsName}`;
}
return shareTitle;
@ -189,7 +208,7 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "./mp-share.scss";
@import './mp-share.scss';
.share-title {
position: relative;
height: 90rpx;

1260
components/vlog/guanzhu.nvue Normal file

File diff suppressed because it is too large Load Diff

1262
components/vlog/local.nvue Normal file

File diff suppressed because it is too large Load Diff

1234
components/vlog/tuijian.nvue Normal file

File diff suppressed because it is too large Load Diff

View File

@ -49,7 +49,7 @@
>
<image
:fade-show="true"
src="/static/images/playvd.png"
src="@/static/img/index/play.png"
class="play-btn"
></image>
</view>
@ -687,8 +687,9 @@ export default {
}
.play-btn {
position: absolute;
width: 120rpx;
height: 120rpx;
width: 160rpx;
height: 160rpx;
opacity: 0.2;
}
.icon {
width: 80rpx;

View File

@ -8,7 +8,7 @@ const dev = {
// buyer: "https://buyer-api.pickmall.cn",
common: "http://192.168.1.211:8890",
buyer: "http://192.168.1.211:8888",
vlog: "http://192.168.1.211:8099",
vlog: "http://192.168.1.86:8099",
web: "http://192.168.1.211:8099",
};
// 生产环境
@ -17,7 +17,7 @@ const prod = {
// buyer: "https://buyer-api.pickmall.cn",
common: "http://192.168.1.211:8890",
buyer: "http://192.168.1.211:8888",
vlog: "http://192.168.1.211:8099",
vlog: "http://192.168.1.86:8099",
};
//默认生产环境

View File

@ -1,5 +1,5 @@
const name = "无终街"; //全局商城name
const schemeName = 'lilishop' //唤醒app需要的schemeName
const schemeName = 'wuzhongjie' //唤醒app需要的schemeName
export default {
name: name,
schemeLink: `${schemeName}://`, //唤起app地址

View File

@ -68,7 +68,7 @@
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ],
"schemes" : "lilishop",
"schemes" : "wuzhongjie",
"minSdkVersion" : 21
},
"ios" : {
@ -81,7 +81,7 @@
"NSLocationAlwaysAndWhenInUseUsageDescription" : "位置信息将用于高德地图的效果展示",
"NSMicrophoneUsageDescription" : "用户上传视频时需使用音频信息"
},
"urltypes" : "lilishop",
"urltypes" : "wuzhongjie",
"dSYMs" : false
},
/* ios */

View File

@ -113,72 +113,6 @@
}
}
},
{
"path": "pages/me/me",
"style": {
"app-plus": {
"titleNView": false //
}
}
},
{
"path": "pages/me/myBackImg",
"style": {
"app-plus": {
"titleNView": false //
}
}
},
{
"path": "pages/me/myFace",
"style": {
"app-plus": {
"titleNView": false //
}
}
},
{
"path": "pages/me/myInfo",
"style": {
"navigationBarTitleText": "修改个人资料",
"navigationBarBackgroundColor": "#181b27"
}
},
{
"path": "pages/me/modifyNickname",
"style": {
"navigationBarTitleText": "修改昵称",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#181b27",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "保存",
"color": "#ef274d",
"width": "60px",
"fontSize": "15px",
"fontWeight": "bold"
}]
}
}
}
},
{
"path": "pages/publish/preview",
"style": {
"navigationBarTitleText": "预览视频",
"navigationBarBackgroundColor": "#181b27",
"enablePullDownRefresh": false
}
},
{
"path": "pages/me/vlogerInfo",
"style": {
"app-plus": {
"titleNView": false //
}
}
},
{
"path": "pages/me/vlog",
"style": {
@ -489,14 +423,6 @@
"navigationBarBackgroundColor": "#181b27"
}
},
{
"path": "pages/me/settings",
"style": {
"navigationBarTitleText": "设置",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#181b27"
}
},
{
"path": "pages/me/myFans",
"style": {
@ -566,8 +492,7 @@
{
"root": "pages/mine",
"pages": [
{
"pages": [{
"path": "mydistribution/index",
"style": {
"navigationBarTitleText": "我的分销"
@ -1389,7 +1314,7 @@
"text": "消息"
},
{
"pagePath": "pages/tabbar/user/my",
"pagePath": "pages/me/me",
"text": "我的"
}
],

View File

@ -10,7 +10,8 @@
:key="index"
@click="chooseLocation(item.city_id, item.city_name)"
@touchstart="touchstartLocation(index)"
@touchend="touchendLocation">
@touchend="touchendLocation"
>
<text class="item-text">
{{ item.city_name }}
</text>
@ -18,7 +19,8 @@
<view class="right-part">
<image
class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image>
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
</scroll-view>
@ -26,19 +28,19 @@
</template>
<script>
import cityList from "@/json/area_city.js"
import cityList from '@/json/area_city.js';
export default {
data() {
return {
cityList: [],
activeIndex: -1,
activeIndex: -1
};
},
onLoad(params) {
let provinceId = params.provinceId;
console.log(params)
console.log(cityList)
console.log(params);
console.log(cityList);
let realCityList = [];
for (let i = 0; i < cityList.length; i++) {
let tempProvinceId = cityList[i].province_id;
@ -56,24 +58,34 @@ export default {
this.activeIndex = -1;
},
chooseLocation(cityId, cityName) {
uni.setStorageSync("myLocationCity", cityName);
uni.setStorageSync('myLocationCity', cityName);
uni.navigateTo({
url: "chooseDistrict?cityId=" + cityId,
url: 'chooseDistrict?cityId=' + cityId
});
},
},
}
}
};
</script>
<style lang="scss">
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #181b27;
<style scoped>
.right-arrow {
align-items: center;
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
.item-text {
color: #ffffff;
align-items: center;
font-size: 30rpx;
}
.right-part {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.line {
height: 1rpx;
background-color: #393a41;
@ -88,28 +100,18 @@ export default {
display: flex;
flex-direction: row;
justify-content: space-between;
.item-text {
color: #ffffff;
align-self: center;
font-size: 30rpx;
}
.right-part {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
.right-arrow {
align-self: center;
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
}
align-items: center;
}
.active {
background-color: #4a4c52;
}
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #181b27;
}
</style>

View File

@ -9,7 +9,8 @@
:key="index"
@click="chooseLocation(item.district_id, item.district_name)"
@touchstart="touchstartLocation(index)"
@touchend="touchendLocation">
@touchend="touchendLocation"
>
<text class="item-text">
{{ item.district_name }}
</text>
@ -19,12 +20,12 @@
</template>
<script>
import districtList from "@/json/area_district.js";
import districtList from '@/json/area_district.js';
export default {
data() {
return {
districtList: [],
activeIndex: -1,
activeIndex: -1
};
},
onLoad(params) {
@ -46,30 +47,26 @@ export default {
this.activeIndex = -1;
},
chooseLocation(districtId, districtName) {
uni.setStorageSync("myLocationDistrict", districtName);
uni.setStorageSync('myLocationDistrict', districtName);
uni.navigateBack({
delta: 3,
delta: 3
});
},
},
}
}
};
</script>
<style lang="scss">
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #181b27;
<style scoped>
.line {
height: 1rpx;
background-color: #393a41;
width: 750rpx;
}
.item-text {
color: #ffffff;
align-items: center;
font-size: 30rpx;
}
.item {
padding-left: 30rpx;
padding-right: 30rpx;
@ -77,16 +74,19 @@ export default {
height: 120rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.item-text {
color: #ffffff;
align-self: center;
font-size: 30rpx;
}
}
.active {
background-color: #4a4c52;
}
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #181b27;
}
</style>

View File

@ -10,7 +10,8 @@
:key="index"
@click="chooseLocation(item.province_id, item.province_name)"
@touchstart="touchstartLocation(index)"
@touchend="touchendLocation">
@touchend="touchendLocation"
>
<text class="item-text">
{{ item.province_name }}
</text>
@ -18,7 +19,8 @@
<view class="right-part">
<image
class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image>
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
</scroll-view>
@ -26,13 +28,13 @@
</template>
<script>
import storage from "@/utils/storage.js"; //缓存
import provinceList from "@/json/area_province.js";
import storage from '@/utils/storage.js'; //缓存
import provinceList from '@/json/area_province.js';
export default {
data() {
return {
provinceList: [],
activeIndex: -1,
activeIndex: -1
};
},
onLoad() {
@ -47,30 +49,38 @@ export default {
},
chooseLocation(provinceId, provinceName) {
uni.setStorageSync("myLocationProvince", provinceName);
uni.setStorageSync('myLocationProvince', provinceName);
uni.navigateTo({
url: "chooseCity?provinceId=" + provinceId,
url: 'chooseCity?provinceId=' + provinceId
});
},
},
}
}
};
</script>
<style lang="scss">
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #181b27;
<style scoped>
.right-arrow {
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
.line {
height: 1rpx;
background-color: #393a41;
width: 750rpx;
}
.item-text {
color: #ffffff;
align-items: center;
font-size: 30rpx;
}
.right-part {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.item {
padding-left: 30rpx;
padding-right: 30rpx;
@ -79,28 +89,18 @@ export default {
display: flex;
flex-direction: row;
justify-content: space-between;
.item-text {
color: #ffffff;
align-self: center;
font-size: 30rpx;
}
.right-part {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
.right-arrow {
align-self: center;
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
}
align-items: center;
}
.active {
background-color: #4a4c52;
}
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #181b27;
}
</style>

View File

@ -1,17 +1,31 @@
<template>
<view class="mypage">
<!-- 未登录 -->
<view v-if="!userIsLogin" class="login-info-wrapper" :style="{ height: screenHeightUnLogin + 'px' }"
@click="goLogin">
<view
v-if="!userIsLogin"
class="login-info-wrapper"
:style="{ height: screenHeightUnLogin + 'px' }"
@click="goLogin"
>
<text class="login-info">
{{ loginWords }}
</text>
</view>
<!-- 已登录 -->
<scroll-view v-if="userIsLogin" class="isLogin-info-wrapper" :style="{ height: screenHeight + 'px' }"
scroll-y="true" @scrolltolower="loadMore">
<image class="mybg" :src="pageUserInfo.bgImg" mode="aspectFill" @click="changeMyBg" />
<scroll-view
v-if="userIsLogin"
class="isLogin-info-wrapper"
:style="{ height: screenHeight + 'px' }"
scroll-y="true"
@scrolltolower="loadMore"
>
<image
class="mybg"
:src="pageUserInfo.bgImg"
mode="aspectFill"
@click="changeMyBg"
/>
<!-- 安卓下使用一个灰色图片来替代阴影效果, ios支持阴影, 安卓则不支持 -->
<!-- <image
@ -23,7 +37,12 @@
<view class="my-info-wrapper">
<view class="my-info">
<image :src="pageUserInfo.face" mode="aspectFill" class="my-face" @click="changeMyFace" />
<image
:src="pageUserInfo.face"
mode="aspectFill"
class="my-face"
@click="changeMyFace"
/>
<view class="info-wrapper">
<text class="nickname">
{{ pageUserInfo.nickname }}
@ -37,20 +56,26 @@
<view class="location">
<text class="location-text">所在地:</text>
<text class="location-text">
{{ pageUserInfo.city == "" ? "中国" : "" + pageUserInfo.city
}}{{
pageUserInfo.district == "" ? "" : "·" + pageUserInfo.district
}}
{{ 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" />
<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">
@ -68,13 +93,19 @@
<view class="bottom-wrapper">
<view class="bottom">
<view @click="goMyFollows(pageUserInfo.id)" class="bottom-item">
<view
@click="goMyFollows(pageUserInfo.id)"
class="bottom-item"
>
<text class="item-num">
{{ getGraceNumber(pageUserInfo.myFollowsCounts) }}
</text>
<text class="item-text">关注</text>
</view>
<view class="bottom-item" @click="goMyFans(pageUserInfo.id)">
<view
class="bottom-item"
@click="goMyFans(pageUserInfo.id)"
>
<text class="item-num">
{{ getGraceNumber(pageUserInfo.myFansCounts) }}
</text>
@ -89,47 +120,97 @@
</view>
<view class="edit">
<view @click="goMyInfo" class="edit-info">
<view
@click="goMyInfo"
class="edit-info"
>
<text class="edit-text">编辑资料</text>
</view>
<view @click="goSettings" class="setting">
<image src="/static/images/icon-settings.png" class="setting-img" />
<view
@click="goSettings"
class="setting"
>
<image
src="/static/images/more.png"
class="setting-img"
/>
</view>
</view>
</view>
<view class="tab-wrapper">
<view class="tab-item" @click="switchTab(0)">
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 0 }">
<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
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 }">
私密
<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
v-if="currentTab == 1"
class="selected-tab"
></view>
</view>
<view class="tab-item" @click="switchTab(2)">
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 2 }">
<view
class="tab-item"
@click="switchTab(2)"
>
<text
class="tab-normal"
:class="{ 'tab-selected': currentTab == 2 }"
>
赞过
</text>
<view v-if="currentTab == 2" class="selected-tab"></view>
<view
v-if="currentTab == 2"
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
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">
<view
v-if="vlogList.length == 0"
class="empty"
>
<text class="empty-text">~ 空空如也 ~</text>
</view>
<view v-if="vlogList.length > 0" class="not-empty">
<view
v-if="vlogList.length > 0"
class="not-empty"
>
<text class="not-empty-text">~ 没有更多了 ~</text>
</view>
</scroll-view>
@ -138,57 +219,46 @@
<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,
vlogMyPublicList,
vlogMyPrivateList,
vlogMyLikedList,
vlogMeTag
} from "@/api/vlog"
import * as filters from '@/utils/filters.js';
import api from '@/config/api.js';
import storage from '@/utils/storage.js'; //缓存
import { vlogUserInfo, vlogMyPublicList, vlogMyPrivateList, vlogMyLikedList, vlogMeTag } from '@/api/vlog';
import {
getAstro,
getAnimal,
dateFormat,
graceNumber
} from '@/utils/tools.js'
import { getAstro, getAnimal, dateFormat, graceNumber } from '@/utils/tools.js';
export default {
data() {
return {
userIsLogin: false,
pageUserInfo: {
id: "",
mobile: "",
nickname: "",
imoocNum: "",
face: "",
birthday: "1998-12-31T16:00:00.000+0000",
country: "",
province: "",
city: "",
district: "",
description: "",
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: "请登录",
userPageId: '',
astro: '', // 星座
animal: '', // 生肖
loginWords: '请登录',
screenHeight: 0,
screenHeightUnLogin: 0,
currentTab: 0,
isAndroid: uni.getSystemInfoSync().platform == "android",
isAndroid: uni.getSystemInfoSync().platform == 'android',
page: 0,
toalPage: 0,
vlogList: [],
vlogList: []
};
},
onLoad() {
@ -200,19 +270,19 @@
onShow() {
let me = this;
// 判断我有没有登录
this.userIsLogin = filters.isLogin("auth");
console.log(this.userIsLogin)
this.userIsLogin = filters.isLogin('auth');
console.log(this.userIsLogin);
if (this.userIsLogin) {
this.getUinfo()
this.getUinfo();
} else {
return
return;
}
},
onTabItemTap: (e) => {
console.log(e)
if (!filters.isLogin("auth")) {
console.log(e);
if (!filters.isLogin('auth')) {
uni.navigateTo({
url: "/pages/passport/login?init=index"
url: '/pages/passport/login?init=index'
});
}
},
@ -222,16 +292,16 @@
let myUserId = myUserInfo.id;
uni.showLoading({
title: "正在加载!",
title: '正在加载!'
});
var result = await vlogUserInfo(myUserId)
var result = await vlogUserInfo(myUserId);
uni.hideLoading();
console.log(result)
console.log(result);
if (result.data.status == 200) {
this.pageUserInfo = result.data.data;
storage.setVlogUserInfo(this.pageUserInfo)
storage.setVlogUserInfo(this.pageUserInfo);
// 查询用户信息
this.switchTab(0)
this.switchTab(0);
// this.myList(0, 'myPublicList', true);
this.setBasicUserInfo(this.pageUserInfo);
}
@ -247,19 +317,19 @@
// }
// 根据生日判断星座
let birthday = myUserInfo.birthday;
let birth = dateFormat("YYYY-mm-dd", new Date(birthday));
console.log(birth)
let birthArr = birth.split("-");
let birth = dateFormat('YYYY-MM-DD', new Date(birthday));
console.log(birth);
let birthArr = birth.split('-');
let year = birthArr[0];
let month = birthArr[1];
let day = birthArr[2];
let astro = getAstro(month, day);
console.log(astro)
console.log(astro);
this.astro = astro;
// 根据生日判断生肖
this.animal = getAnimal(year);
console.log(this.animal)
console.log(this.animal);
},
switchTab(index) {
this.currentTab = index;
@ -278,7 +348,7 @@
}
},
loadMore() {
let requestArr = ['myPublicList', 'myPrivateList', 'myLikedList']
let requestArr = ['myPublicList', 'myPrivateList', 'myLikedList'];
if (this.page >= this.toalPage) {
return;
} else {
@ -289,16 +359,16 @@
let me = this;
page = page + 1;
me.page = page;
var uinfo = storage.getVlogUserInfo()
if (uinfo == null) return
var uinfo = storage.getVlogUserInfo();
if (uinfo == null) return;
let userId = uinfo.id;
var result = await vlogMeTag(requrl, page, 20, userId)
var result = await vlogMeTag(requrl, page, 20, userId);
if (result.data.status == 200) {
let vlogList = result.data.data.rows;
console.log(vlogList)
console.log(vlogList);
let toalPage = result.data.data.total;
if (init) {
me.vlogList = vlogList
me.vlogList = vlogList;
} else {
me.vlogList = me.vlogList.concat(vlogList);
}
@ -308,8 +378,8 @@
},
goLogin() {
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom",
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
},
// 把超过1000或10000的数字调整, 比如1.3k/6.8w
@ -319,54 +389,55 @@
// 视频详情
goToVlog(vlog) {
let vlogId = vlog.id ? vlog.id : vlog.vlogId;
console.log(vlogId)
console.log(vlogId);
uni.navigateTo({
url: "/pages/me/vlog?vlogId=" + vlogId,
url: '/pages/me/vlog?vlogId=' + vlogId
});
},
// 修改背景图
changeMyBg() {
uni.navigateTo({
animationType: "fade-in",
url: "/pages/me/myBackImg",
animationType: 'fade-in',
url: '/pages/me/myBackImg'
});
},
// 更换头像
changeMyFace() {
uni.navigateTo({
animationType: "fade-in",
url: "myFace",
animationType: 'fade-in',
url: 'myFace'
});
},
//编辑资料
goMyInfo() {
uni.navigateTo({
animationType: "fade-in",
url: "myInfo",
animationType: 'fade-in',
url: 'myInfo'
});
},
goSettings() {
uni.navigateTo({
animationType: "fade-in",
url: "settings",
animationType: 'fade-in',
// url: 'settings'
url: '/pages/tabbar/user/my'
});
},
// 粉丝列表
goMyFans(userId) {
uni.navigateTo({
animationType: "fade-in",
url: "myFans",
animationType: 'fade-in',
url: 'myFans'
});
},
// 关注列表
goMyFollows(userId) {
uni.navigateTo({
animationType: "fade-in",
url: "myFollows",
animationType: 'fade-in',
url: 'myFollows'
});
},
},
}
}
};
</script>
@ -378,7 +449,6 @@
top: 0;
bottom: 0;
background-color: #000000;
}
.login-info {
@ -692,5 +762,6 @@
top: -260rpx;
}
.isLogin-info-wrapper {}
.isLogin-info-wrapper {
}
</style>

View File

@ -8,14 +8,16 @@
:value="date"
:start="startDate"
:end="endDate"
@change="bindDateChange">
@change="bindDateChange"
>
<view class="left-picker-part">
<text class="date-lable">{{ date }}</text>
</view>
<view class="left-choose">
<image
src="/static/images/icon-datepicker.png"
class="icon-right"></image>
class="icon-right"
></image>
</view>
</picker>
</view>
@ -27,19 +29,15 @@
</template>
<script>
import storage from "@/utils/storage.js"; //
import {
vlogModifyUserInfo
} from "@/api/vlog"
import {
dateFormat
} from '@/utils/tools.js'
import storage from '@/utils/storage.js'; //
import { vlogModifyUserInfo } from '@/api/vlog';
import { dateFormat } from '@/utils/tools.js';
export default {
data() {
return {
date: "",
startDate: "1970-01-01",
endDate: "2088-08-08",
date: '',
startDate: '1970-01-01',
endDate: '2088-08-08'
};
},
onNavigationBarButtonTap() {
@ -59,28 +57,28 @@ export default {
birthday: birth,
type: 4
};
var result = await vlogModifyUserInfo(pendingUserInfo,4)
var result = await vlogModifyUserInfo(pendingUserInfo, 4);
if (result.data.status == 200) {
let userInfoUpdated = result.data.data;
//
storage.setVlogUserInfo(userInfoUpdated);
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
var timer = setTimeout(() => {
clearTimeout(timer)
clearTimeout(timer);
uni.navigateBack({
delta: 1,
animationType: "fade-out",
animationType: 'fade-out'
});
}, 1000);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
@ -88,9 +86,9 @@ export default {
this.date = e.detail.value;
},
getGraceDateStr(date) {
return dateFormat("YYYY-mm-dd", date);
},
},
return dateFormat('YYYY-MM-DD', date);
}
}
};
</script>
@ -110,8 +108,8 @@ export default {
}
.picker-box {
align-self: center;
margin-top: 50rpx;
margin: 50rpx auto 20rpx auto;
width: 750rpx;
display: flex;
flex-direction: row;
.birthday-item {
@ -119,7 +117,7 @@ export default {
display: flex;
flex-direction: row;
justify-content: space-between;
width:720rpx;
width: 750rpx;
height: 140rpx;
border-radius: 40rpx;
.left-picker-part {

View File

@ -9,7 +9,8 @@
:model="description"
placeholder="请填入简介~"
maxlength="16"
@input="typingContent" />
@input="typingContent"
/>
<view class="length-cal">
<text class="length-text">{{ wordsLength }}/16</text>
</view>
@ -22,15 +23,13 @@
</template>
<script>
import storage from "@/utils/storage.js"; //
import {
vlogModifyUserInfo
} from "@/api/vlog"
import storage from '@/utils/storage.js'; //
import { vlogModifyUserInfo } from '@/api/vlog';
export default {
data() {
return {
description: storage.getVlogUserInfo().description,
wordsLength: 0,
wordsLength: 0
};
},
onNavigationBarButtonTap() {
@ -43,35 +42,34 @@ export default {
async updateDesc() {
let me = this;
let userId = storage.getVlogUserInfo().id;
let description =
this.description == "" ? "这家伙很懒,什么都没留下~" : this.description;
let description = this.description == '' ? '这家伙很懒,什么都没留下~' : this.description;
let pendingUserInfo = {
id: userId,
description: description,
type: 6
};
var result = await vlogModifyUserInfo(pendingUserInfo,6)
var result = await vlogModifyUserInfo(pendingUserInfo, 6);
if (result.data.status == 200) {
let userInfoUpdated = result.data.data;
//
storage.setVlogUserInfo(userInfoUpdated);
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
var timer = setTimeout(() => {
clearTimeout(timer)
clearTimeout(timer);
uni.navigateBack({
delta: 1,
animationType: "fade-out",
animationType: 'fade-out'
});
}, 1000);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
@ -79,12 +77,12 @@ export default {
typingContent(e) {
this.description = e.detail.value;
this.wordsLength = this.description.length;
},
},
}
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.page {
position: absolute;
left: 0;
@ -95,6 +93,7 @@ export default {
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
.line {
height: 1rpx;
@ -120,7 +119,7 @@ export default {
border-top-right-radius: 20rpx;
}
.length-cal {
width: 700rpx;
width: 100%;
height: 20px;
background-color: #4a4c52;
padding-right: 20rpx;

View File

@ -8,47 +8,49 @@
:value="nickname"
:model="nickname"
placeholder="请填入昵称~"
maxlength="16"
@input="typingContent" />
maxlength="8"
@input="typingContent"
/>
<view class="length-cal">
<text class="length-text">{{ wordsLength }}/16</text>
<text class="length-text">{{ wordsLength }}/8</text>
</view>
</view>
<view class="notice" style="align-self: center">
<text class="tips">*请设置5-16的昵称长度</text>
<view
class="notice"
style="align-self: center"
>
<text class="tips">*请设置2-8的昵称长度</text>
</view>
</view>
</template>
<script>
import storage from "@/utils/storage.js"; //
import storage from '@/utils/storage.js'; //
import {
vlogModifyUserInfo
} from "@/api/vlog"
import { vlogModifyUserInfo } from '@/api/vlog';
export default {
data() {
return {
oldNickname: storage.getVlogUserInfo().nickname,
nickname: storage.getVlogUserInfo().nickname,
wordsLength: 0,
wordsLength: 0
};
},
onNavigationBarButtonTap() {
let nickname = this.nickname;
if (nickname.length < 5) {
if (nickname.length < 2) {
uni.showToast({
icon: "none",
title: "昵称太短!",
icon: 'none',
title: '昵称太短!'
});
return;
}
if (nickname.search(/\s/) != -1) {
uni.showToast({
icon: "none",
title: "不允许包含空格!",
icon: 'none',
title: '不允许包含空格!'
});
return;
}
@ -56,8 +58,8 @@ export default {
let oldNickname = this.oldNickname;
if (oldNickname == nickname) {
uni.showToast({
icon: "none",
title: "昵称未改变!",
icon: 'none',
title: '昵称未改变!'
});
return;
}
@ -78,37 +80,37 @@ export default {
};
//
var result = await vlogModifyUserInfo(pendingUserInfo,1)
console.log(result)
var result = await vlogModifyUserInfo(pendingUserInfo, 1);
console.log(result);
if (result.data.status == 200) {
let userInfoUpdated = result.data.data;
//
storage.setVlogUserInfo(userInfoUpdated);
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
var timer = setTimeout(() => {
clearTimeout(timer)
clearTimeout(timer);
uni.navigateBack({
delta: 1,
animationType: "fade-out",
animationType: 'fade-out'
});
}, 1000);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
typingContent(e) {
this.nickname = e.detail.value;
this.wordsLength = this.nickname.length;
},
},
}
}
};
</script>
@ -123,6 +125,7 @@ export default {
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
.line {
height: 1rpx;

View File

@ -1,170 +0,0 @@
<template>
<view class="mpage">
<view class="mbg-wrapper" :style="{ height: screenHeight + 'px' }">
<image v-if="bgUrl" :src="bgUrl" class="bg-size" mode="aspectFill"></image>
<view
class="mbtn"
:class="{
'button-change-bg': !changeTouched,
'button-change-bg-touched': changeTouched,
}"
@touchstart="touchstartChange"
@touchend="touchendChange"
@click="changeBg">
<text class="btn-text">更换背景</text>
</view>
<view
class="mbtn"
:class="{
'button-change-bg': !closeTouched,
'button-change-bg-touched': closeTouched,
}"
@touchstart="touchstartClose"
@touchend="touchendClose"
@click="close"
style="margin-top: 10rpx">
<text class="btn-text">返回</text>
</view>
</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"; //缓存
export default {
data() {
return {
bgUrl: '',
changeTouched: false,
closeTouched: false,
screenHeight: system.safeArea.bottom,
};
},
onShow() {
if (filters.isLogin("auth")) {
this.bgUrl = storage.getVlogUserInfo().bgImg
console.log(this.bgUrl)
}
},
methods: {
close() {
uni.navigateBack({
delta: 1,
animationType: "slide-out-bottom",
});
},
touchstartClose() {
this.closeTouched = true;
},
touchendClose() {
this.closeTouched = false;
},
touchstartChange() {
this.changeTouched = true;
},
touchendChange() {
this.changeTouched = false;
},
changeBg() {
let me = this;
let info = storage.getVlogUserInfo()
let userId = info.id
uni.chooseImage({
count: 1,
sizeType: ["original"],
// crop: {
// quality: 100,
// width: 400,
// height: 400,
// },
success: (e) => {
let newBg = e.tempFilePaths[0];
me.bgUrl = newBg;
// 上传
let serverUrl = api.vlog
uni.uploadFile({
header: {
headerUserId: userId,
headerUserToken: storage.getVlogToken(),
},
url:
serverUrl + "/userInfo/modifyImage?userId=" + userId + "&type=1",
name: "file",
filePath: newBg,
success(result) {
// console.log(result)
let userInfoUpdated = JSON.parse(result.data);
if ((userInfoUpdated.status = 200)) {
// 重置本地用户信息
storage.setVlogUserInfo(userInfoUpdated.data);
uni.showToast({
title: userInfoUpdated.msg,
icon: "none",
duration: 3000,
});
let timer = setTimeout(() => {
uni.navigateBack({
delta: 1,
animationType: "fade-out",
});
clearTimeout(timer)
}, 1000);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
});
}
},
});
},
});
},
},
};
</script>
<style scoped>
.bg-size {
align-self: center;
width: 750rpx;
height: 750rpx;
}
.btn-text {
color: #ffffff;
align-self: center;
}
.mbtn {
width: 250rpx;
height: 80rpx;
border-radius: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 150rpx;
align-self: center;
}
.button-change-bg {
background-color: #1e1e1e;
}
.button-change-bg-touched {
background-color: #646262;
}
.bg-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
.mpage {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000000;
}
</style>

180
pages/me/myBackImg.vue Executable file
View File

@ -0,0 +1,180 @@
<template>
<view class="mpage">
<view
class="mbg-wrapper"
:style="{ height: screenHeight + 'px' }"
>
<image
v-if="bgUrl"
:src="bgUrl"
class="bg-size"
mode="aspectFill"
></image>
<view
class="mbtn"
:class="{
'button-change-bg': !changeTouched,
'button-change-bg-touched': changeTouched
}"
@touchstart="touchstartChange"
@touchend="touchendChange"
@click="changeBg"
>
<text class="btn-text">更换背景</text>
</view>
<view
class="mbtn"
:class="{
'button-change-bg': !closeTouched,
'button-change-bg-touched': closeTouched
}"
@touchstart="touchstartClose"
@touchend="touchendClose"
@click="close"
style="margin-top: 10rpx"
>
<text class="btn-text">返回</text>
</view>
</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'; //
export default {
data() {
return {
bgUrl: '',
changeTouched: false,
closeTouched: false,
screenHeight: system.safeArea.bottom
};
},
onShow() {
if (filters.isLogin('auth')) {
this.bgUrl = storage.getVlogUserInfo().bgImg;
console.log(this.bgUrl);
}
},
methods: {
close() {
uni.navigateBack({
delta: 1,
animationType: 'slide-out-bottom'
});
},
touchstartClose() {
this.closeTouched = true;
},
touchendClose() {
this.closeTouched = false;
},
touchstartChange() {
this.changeTouched = true;
},
touchendChange() {
this.changeTouched = false;
},
changeBg() {
let me = this;
let info = storage.getVlogUserInfo();
let userId = info.id;
uni.chooseImage({
count: 1,
sizeType: ['original'],
// crop: {
// quality: 100,
// width: 400,
// height: 400,
// },
success: (e) => {
let newBg = e.tempFilePaths[0];
me.bgUrl = newBg;
//
let serverUrl = api.vlog;
uni.uploadFile({
header: {
headerUserId: userId,
headerUserToken: storage.getVlogToken()
},
url: serverUrl + '/userInfo/modifyImage?userId=' + userId + '&type=1',
name: 'file',
filePath: newBg,
success(result) {
// console.log(result)
let userInfoUpdated = JSON.parse(result.data);
if ((userInfoUpdated.status = 200)) {
//
storage.setVlogUserInfo(userInfoUpdated.data);
uni.showToast({
title: userInfoUpdated.msg,
icon: 'none',
duration: 3000
});
let timer = setTimeout(() => {
uni.navigateBack({
delta: 1,
animationType: 'fade-out'
});
clearTimeout(timer);
}, 1000);
} else {
uni.showToast({
title: result.data.msg,
icon: 'none'
});
}
}
});
}
});
}
}
};
</script>
<style scoped>
.bg-size {
align-items: center;
width: 750rpx;
height: 750rpx;
}
.btn-text {
color: #ffffff;
align-items: center;
}
.mbtn {
margin: 0 auto;
width: 250rpx;
height: 80rpx;
border-radius: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 150rpx;
align-items: center;
}
.button-change-bg {
background-color: #1e1e1e;
}
.button-change-bg-touched {
background-color: #646262;
}
.bg-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
.mpage {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000000;
}
</style>

View File

@ -1,28 +1,54 @@
<template>
<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="f.fanId">
<view class="user-info" @click="goTovlogerInfo(f.fanId)">
<image class="face" :src="f.face" />
<scroll-view
scroll-y="true"
@scrolltolower="pagingFansList()"
>
<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">
{{ f.nickname }}
</text>
</view>
<view v-if="!from">
<view v-if="f.bothFriend==0" class="operator-wrapper">
<text class="operator-words" style="color: #ef274d" @click="followMe(f.fanId)">
<view
v-if="f.bothFriend == 0"
class="operator-wrapper"
>
<text
class="operator-words"
style="color: #ef274d"
@click="followMe(f.fanId)"
>
回粉
</text>
</view>
<view v-if="f.bothFriend==1" class="operator-wrapper">
<text class="operator-words" style="color: #ffffff" @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>
</view>
</scroll-view>
</view>
@ -30,19 +56,13 @@
<script>
let system = uni.getSystemInfoSync();
import storage from "@/utils/storage.js"; //缓存
import {
vlogFansCancel,
vlogFansFollow,
vlogQueryMyFans
} from "@/api/vlog"
import {
isStrEmpty
} from '@/utils/tools.js'
import storage from '@/utils/storage.js'; //缓存
import { vlogFansCancel, vlogFansFollow, vlogQueryMyFans } from '@/api/vlog';
import { isStrEmpty } from '@/utils/tools.js';
export default {
data() {
return {
userId: "",
userId: '',
screenHeight: 0,
page: 0,
totalPage: 0,
@ -52,25 +72,25 @@
},
onLoad(param) {
if (!isStrEmpty(param.userId)) {
this.from = true
this.userId = param.userId
this.from = true;
this.userId = param.userId;
} else {
var uinfo = storage.getVlogUserInfo()
var uinfo = storage.getVlogUserInfo();
this.userId = uinfo.id;
}
this.queryMyFansList(0);
},
methods: {
goTovlogerInfo(vlogerId) {
var id = storage.getVlogUserInfo().id
var id = storage.getVlogUserInfo().id;
// 是否是当前登录的用户
if (id == vlogerId) {
uni.switchTab({
url: "me",
url: 'me'
});
} else {
uni.navigateTo({
url: "vlogerInfo?userPageId=" + vlogerId,
url: 'vlogerInfo?userPageId=' + vlogerId
});
}
},
@ -89,20 +109,20 @@
},
async cancelFollow(vlogerId) {
let me = this;
let userId = me.userId
let userId = me.userId;
let data = {
myId: userId,
vlogerId
}
var result = await vlogFansCancel(data)
console.log(result)
};
var result = await vlogFansCancel(data);
console.log(result);
if (result.data.status == 200) {
me.reFreshList(vlogerId, 0);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
@ -112,16 +132,16 @@
let data = {
myId: userId,
vlogerId
}
var result = await vlogFansFollow(data)
console.log(result)
};
var result = await vlogFansFollow(data);
console.log(result);
if (result.data.status == 200) {
me.reFreshList(vlogerId, 1);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
@ -136,9 +156,9 @@
// currentUserId: currentUserId,
page: page,
pageSize: 10
}
var result = await vlogQueryMyFans(data)
console.log(result)
};
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;
@ -154,8 +174,8 @@
return;
}
this.queryMyFansList(this.page);
},
},
}
}
};
</script>
@ -164,11 +184,10 @@
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.face {
align-self: center;
align-items: center;
width: 110rpx;
height: 110rpx;
border-radius: 100rpx;
@ -177,7 +196,7 @@
}
.user-name {
align-self: center;
align-items: center;
color: #ffffff;
font-size: 30rpx;
margin-left: 20rpx;
@ -196,9 +215,6 @@
top: 0;
bottom: 0;
background-color: #181b27;
}
.user-wrapper {
@ -212,8 +228,6 @@
align-items: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.operator-wrapper {
@ -228,11 +242,10 @@
border-width: 2rpx;
border-color: #ef274d;
background-color: #181b27;
}
.operator-words {
align-self: center;
align-items: center;
font-size: 28rpx;
}
</style>

View File

@ -1,23 +1,50 @@
<template>
<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="f.vlogerId">
<view class="user-info" @click="goTovlogerInfo(f.vlogerId)">
<image class="face" :src="f.face" />
<scroll-view
scroll-y="true"
@scrolltolower="pagingFollowsList"
>
<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">
{{ f.nickname }}
</text>
</view>
<view v-if="!from">
<view v-if="f.bothFriend==0" class="operator-wrapper">
<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.vlogerId)">
<view
v-if="f.bothFriend == 0"
class="operator-wrapper"
>
<text
class="operator-words"
style="color: #ef274d"
@click="cancelFollow(f.vlogerId)"
>
已关注
</text>
</view>
<view v-if="f.bothFriend==1" class="operator-wrapper">
<text class="operator-words" style="color: #ffffff" @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>
@ -28,20 +55,14 @@
</template>
<script>
import storage from "@/utils/storage.js"; //缓存
import {
vlogFansCancel,
vlogFansFollow,
vlogQueryMyFollows
} from "@/api/vlog"
import {
isStrEmpty
} from '@/utils/tools.js'
import storage from '@/utils/storage.js'; //缓存
import { vlogFansCancel, vlogFansFollow, vlogQueryMyFollows } from '@/api/vlog';
import { isStrEmpty } from '@/utils/tools.js';
let system = uni.getSystemInfoSync();
export default {
data() {
return {
userId: "",
userId: '',
screenHeight: 0,
page: 0,
totalPage: 0,
@ -51,24 +72,24 @@
},
onLoad(param) {
if (!isStrEmpty(param.userId)) {
this.from = true
this.userId = param.userId
this.from = true;
this.userId = param.userId;
} else {
var uinfo = storage.getVlogUserInfo()
var uinfo = storage.getVlogUserInfo();
this.userId = uinfo.id;
}
this.queryMyFollowList(0);
},
methods: {
goTovlogerInfo(vlogerId) {
var id = storage.getVlogUserInfo().id
var id = storage.getVlogUserInfo().id;
if (id == vlogerId) {
uni.switchTab({
url: "me",
url: 'me'
});
} else {
uni.navigateTo({
url: "vlogerInfo?userPageId=" + vlogerId,
url: 'vlogerInfo?userPageId=' + vlogerId
});
}
},
@ -91,16 +112,16 @@
var data = {
myId: userId,
vlogerId
}
var result = await vlogFansCancel(data)
console.log(result)
};
var result = await vlogFansCancel(data);
console.log(result);
if (result.data.status == 200) {
me.reFreshList(vlogerId, 0);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
@ -110,16 +131,16 @@
let data = {
myId: userId,
vlogerId
}
var result = await vlogFansFollow(data)
console.log(result)
};
var result = await vlogFansFollow(data);
console.log(result);
if (result.data.status == 200) {
me.reFreshList(vlogerId, true);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
@ -131,13 +152,13 @@
myId: userId,
page: page,
pageSize: 10
}
var result = await vlogQueryMyFollows(data)
};
var result = await vlogQueryMyFollows(data);
if (result.data.status == 200) {
let followsList = result.data.data.rows;
let totalPage = result.data.data.total;
me.followsList = me.followsList.concat(followsList);
console.log(me.followsList)
console.log(me.followsList);
me.page = page;
me.totalPage = totalPage;
}
@ -149,14 +170,14 @@
return;
}
this.queryMyFollowList(this.page);
},
}
}
};
</script>
<style scoped>
.face {
align-self: center;
align-items: center;
width: 110rpx;
height: 110rpx;
border-radius: 100rpx;
@ -165,7 +186,7 @@
}
.user-name {
align-self: center;
align-items: center;
color: #ffffff;
font-size: 30rpx;
margin-left: 20rpx;
@ -178,9 +199,6 @@
top: 0;
bottom: 0;
background-color: #181b27;
}
.line {
@ -200,15 +218,13 @@
margin-top: 20rpx;
margin-bottom: 20rpx;
align-items: center;
}
.user-info {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.operator-wrapper {
@ -219,15 +235,14 @@
justify-content: center;
background-color: #ef274d;
border-radius: 20rpx;
align-self: center;
align-items: center;
border-width: 2rpx;
border-color: #ef274d;
background-color: #181b27;
}
.operator-words {
align-self: center;
align-items: center;
font-size: 28rpx;
}
</style>

View File

@ -6,21 +6,29 @@
class="user-face"
mode="aspectFill"
@click="changeMyFace"
:src="myInfo.face"></image>
:src="myInfo.face"
></image>
</view>
<view class="single-line-box">
<text class="left-lable">昵称</text>
<view class="right-part" @click="modifyNickname">
<view
class="right-part"
@click="modifyNickname"
>
<text class="right-content">
{{ myInfo.nickname }}
</text>
<image
class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image>
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<view class="single-line-box" @click="modifyTiktokNum">
<view
class="single-line-box"
@click="modifyTiktokNum"
>
<text class="left-lable">视频号</text>
<view class="right-part">
<text class="right-content">
@ -28,57 +36,88 @@
</text>
<image
class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image>
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<view class="single-line-box">
<text class="left-lable">性别</text>
<view class="right-part" @click="modifySex">
<text v-if="myInfo.sex == 1" class="right-content"></text>
<text v-else-if="myInfo.sex == 0" class="right-content"></text>
<text v-else class="right-content">保密</text>
<view
class="right-part"
@click="modifySex"
>
<text
v-if="myInfo.sex == 1"
class="right-content"
>
</text>
<text
v-else-if="myInfo.sex == 0"
class="right-content"
>
</text>
<text
v-else
class="right-content"
>
保密
</text>
<image
class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image>
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<view class="single-line-box">
<text class="left-lable">生日</text>
<view class="right-part" @click="modifyBirthday">
<view
class="right-part"
@click="modifyBirthday"
>
<text class="right-content">
{{ getGraceDateStr(new Date(myInfo.birthday)) }}
</text>
<image
class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image>
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<view class="single-line-box">
<text class="left-lable">所在地</text>
<view class="right-part" @click="modifyLocation">
<view
class="right-part"
@click="modifyLocation"
>
<text class="right-content">
{{ myInfo.province == myInfo.city ? "" : myInfo.province + "·"
}}{{ myInfo.city == "" ? "" : myInfo.city
}}{{ myInfo.district == "" ? "" : "·" + myInfo.district }}
{{ myInfo.province == myInfo.city ? '' : myInfo.province + '·' }}{{ myInfo.city == '' ? '' : myInfo.city
}}{{ myInfo.district == '' ? '' : '·' + myInfo.district }}
</text>
<image
class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image>
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<view class="single-line-box">
<text class="left-lable">简介</text>
<view class="right-part" @click="modifyDescription">
<view
class="right-part"
@click="modifyDescription"
>
<text class="right-content">
{{ myInfo.description }}
</text>
<image
class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image>
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<!-- <view class="single-line-box">
@ -94,94 +133,91 @@
</template>
<script>
import storage from "@/utils/storage.js"; //
import api from "@/config/api.js";
import {
isStrEmpty,
dateFormat
} from '@/utils/tools.js'
import storage from '@/utils/storage.js'; //
import api from '@/config/api.js';
import { isStrEmpty, dateFormat } from '@/utils/tools.js';
export default {
data() {
return {
myInfo: {},
myInfo: {}
};
},
onShow() {
let myInfo = storage.getVlogUserInfo()
let myInfo = storage.getVlogUserInfo();
if (isStrEmpty(myInfo.face)) {
//
myInfo.face = "";
myInfo.face = '';
}
this.myInfo = myInfo;
},
methods: {
getGraceDateStr(date) {
return dateFormat("YYYY-mm-dd", date);
return dateFormat('YYYY-MM-DD', date);
},
//
changeMyFace() {
uni.navigateTo({
animationType: "fade-in",
url: "myFace",
animationType: 'fade-in',
url: 'myFace'
});
},
//
modifyNickname() {
uni.navigateTo({
animationType: "fade-in",
url: "modifyNickname",
animationType: 'fade-in',
url: 'modifyNickname'
});
},
//
// id
modifyTiktokNum() {
uni.navigateTo({
animationType: "fade-in",
url: "modifyTioktokNum",
animationType: 'fade-in',
url: 'modifyTioktokNum'
});
},
//
modifySex() {
uni.navigateTo({
animationType: "fade-in",
url: "modifySex",
animationType: 'fade-in',
url: 'modifySex'
});
},
//
modifyBirthday() {
uni.navigateTo({
animationType: "fade-in",
url: "modifyBirthday",
animationType: 'fade-in',
url: 'modifyBirthday'
});
},
//
modifyLocation() {
uni.navigateTo({
animationType: "fade-in",
url: "modifyLocation",
animationType: 'fade-in',
url: 'modifyLocation'
});
},
//
modifyDescription() {
uni.navigateTo({
animationType: "fade-in",
url: "modifyDesc",
animationType: 'fade-in',
url: 'modifyDesc'
});
},
//
modifyPassword() {
uni.navigateTo({
animationType: "fade-in",
url: "modifyPass",
animationType: 'fade-in',
url: 'modifyPass'
});
},
},
}
}
};
</script>

1274
pages/me/vlog.nvue Executable file → Normal file

File diff suppressed because it is too large Load Diff

87
pages/me/vlog_old.nvue Executable file
View File

@ -0,0 +1,87 @@
<template>
<view class="mpage">
<swiper style="my-swiper" :style="{ height: screenHeight + 'px' }">
<swiper-item>
<video-detail
:screenHeight="screenHeight"
:playStatus="playStatus"
:vlogId="vlogId"></video-detail>
</swiper-item>
</swiper>
<view class="mheader" :style="{ marginTop: statusBarHeight + 'px' }">
<image
class="header-left"
src="/static/images/icon-back.png"
@click="back()" />
</view>
</view>
</template>
<script>
let system = uni.getSystemInfoSync();
import videoDetail from "@/components/vlog/videoDetail.vue";
export default {
components: {
videoDetail,
},
data() {
return {
vlogId: "",
playStatus: true,
screenHeight: 0,
statusBarHeight: 0,
};
},
onLoad(option) {
this.statusBarHeight = system.statusBarHeight;
let screenHeight = system.safeArea.bottom + 50;
this.screenHeight = screenHeight;
// 获得参数
let vlogId = option.vlogId||1;
this.vlogId = vlogId;
},
onHide() {
// TODO 隐藏的时候暂停播放
},
methods: {
back() {
uni.navigateBack({
delta: 1,
});
},
},
};
</script>
<style scoped>
.mpage {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000000;
}
.mheader {
position: absolute;
left: 0;
right: 0;
flex-direction: row;
height: 100rpx;
line-height: 100rpx;
align-items: center;
padding-left: 40rpx;
padding-right: 40rpx;
}
.header-left {
color: #999;
line-height: 100rpx;
align-items: flex-start;
justify-content: flex-end;
font-family: iconfont;
width: 40rpx;
height: 40rpx;
opacity: 0.8;
}
</style>

View File

@ -4,19 +4,31 @@
class="isLogin-info-wrapper"
:style="{ height: screenHeight + 'px' }"
scroll-y="true"
@scrolltolower="loadMore">
<image class="mybg" :src="pageUserInfo.bgImg" mode="aspectFill" />
@scrolltolower="loadMore"
>
<image
class="mybg"
:src="pageUserInfo.bgImg"
mode="aspectFill"
/>
<view class="header" :style="{ marginTop: statusBarHeight + 'px' }">
<view
class="header"
:style="{ marginTop: statusBarHeight + 'px' }"
>
<image
class="header-right-search"
src="../../static/images/icon-back.png"
@click="back()" />
@click="back()"
/>
</view>
<view class="my-info-wrapper">
<view class="my-info">
<image :src="pageUserInfo.face" mode="aspectFill" class="my-face" />
<image
:src="pageUserInfo.face"
mode="aspectFill"
class="my-face"
/>
<view class="info-wrapper">
<text class="nickname">
{{ pageUserInfo.nickname }}
@ -30,10 +42,7 @@
<view class="location">
<text class="location-text">所在地:</text>
<text class="location-text">
{{ pageUserInfo.city == "" ? "中国" : "" + pageUserInfo.city
}}{{
pageUserInfo.district == "" ? "" : "·" + pageUserInfo.district
}}
{{ pageUserInfo.city == '' ? '中国' : '' + pageUserInfo.city }}{{ pageUserInfo.district == '' ? '' : '·' + pageUserInfo.district }}
</text>
</view>
<view class="sex-wrapper">
@ -41,15 +50,18 @@
<image
class="sex-img"
v-if="pageUserInfo.sex == 1"
src="/static/images/icon-sex-boy.png" />
src="/static/images/icon-sex-boy.png"
/>
<image
class="sex-img"
v-if="pageUserInfo.sex == 0"
src="/static/images/icon-sex-girl.png" />
src="/static/images/icon-sex-girl.png"
/>
<image
class="sex-img"
v-if="pageUserInfo.sex == 2"
src="/static/images/icon-sex-secret.png" />
src="/static/images/icon-sex-secret.png"
/>
<text class="astro">{{ astro }}座</text>
</view>
<view class="animal">
@ -67,13 +79,19 @@
<view class="bottom-wrapper">
<view class="bottom">
<view class="bottom-item" @click="goMyFollows(pageUserInfo.id)">
<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)">
<view
class="bottom-item"
@click="goMyFans(pageUserInfo.id)"
>
<text class="item-num">
{{ getGraceNumber(pageUserInfo.myFansCounts) }}
</text>
@ -91,31 +109,43 @@
<view
v-if="isFollow && !isFan"
@click="cancelFollow()"
class="follow-btn">
class="follow-btn"
>
<text class="follow-text">已关注</text>
</view>
<view
v-if="isFollow && isFan"
@click="cancelFollow()"
class="follow-btn">
class="follow-btn"
>
<text class="follow-text">相互关注</text>
</view>
<view
v-if="!isFollow"
@click="followMe()"
class="follow-btn"
style="background-color: #ef274d">
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 }">
<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
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 }">
@ -123,29 +153,48 @@
</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 }">
<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
v-if="currentTab == 1"
class="selected-tab"
></view>
</view>
</view>
<view class="vlog-list">
<block v-for="(vlog, index) in vlogList" :key="index">
<block
v-for="(vlog, index) in vlogList"
:key="index"
>
<image
class="vlog-cover"
:src="vlog.cover || vlog.firstFrameImg"
@click="goToVlog(vlog)"
mode="aspectFill"></image>
mode="aspectFill"
></image>
</block>
</view>
<view v-if="vlogList.length == 0" class="empty">
<view
v-if="vlogList.length == 0"
class="empty"
>
<text class="empty-text">~ 空空如也 ~</text>
</view>
<view v-if="vlogList.length > 0" class="not-empty">
<view
v-if="vlogList.length > 0"
class="not-empty"
>
<text class="not-empty-text">~ 没有更多了 ~</text>
</view>
</scroll-view>
@ -154,50 +203,35 @@
<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 * 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'
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: "",
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: "请登录",
userPageId: '',
astro: '',
animal: '',
loginWords: '请登录',
statusBarHeight: 0,
screenHeight: 0,
@ -206,11 +240,11 @@ export default {
currentTab: 0,
isFollow: false,
isFan: false,
isAndroid: uni.getSystemInfoSync().platform == "android",
isAndroid: uni.getSystemInfoSync().platform == 'android',
page: 0,
totalpage: 0,
vlogList: [],
vlogList: []
};
},
async onLoad(params) {
@ -225,61 +259,61 @@ export default {
let userPageId = params.userPageId;
if (isStrEmpty(userPageId)) {
uni.showToast({
title: "出错啦~",
icon: " none",
duration: 2000,
title: '出错啦~',
icon: ' none',
duration: 2000
});
settimeout(() => {
uni.navigateBack({
delta: 1,
delta: 1
});
}, 1500);
}
me.userPageId = userPageId;
var result = await vlogUserInfo(userPageId)
console.log(result)
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,
icon: 'none',
duration: 3000
});
}
// this.switchTab(0);
this.myList(0, 'myPublicList', true);
let myUserId = "";
let info = storage.getVlogUserInfo()
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)
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,
icon: 'none',
duration: 3000
});
}
// 查询博主是否关注我
var result2 = await vlogQueryDoIFollowVloger({myId:userPageId,vlogerId:myUserId})
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,
icon: 'none',
duration: 3000
});
}
}
@ -288,8 +322,8 @@ export default {
setBasicUserInfo(myUserInfo) {
// 根据生日判断星座
let birthday = myUserInfo.birthday;
let birth = dateFormat("YYYY-mm-dd", new Date(birthday));
let birthArr = birth.split("-");
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];
@ -323,14 +357,14 @@ export default {
let me = this;
page = page + 1;
me.page = page;
let userId = me.userPageId;;
var result = await vlogMeTag(requrl, page, 20, userId)
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)
console.log(vlogList);
let toalPage = result.data.data.total;
if (init) {
me.vlogList = vlogList
me.vlogList = vlogList;
} else {
me.vlogList = me.vlogList.concat(vlogList);
}
@ -340,14 +374,14 @@ export default {
},
back() {
uni.navigateBack({
delta: 1,
delta: 1
});
},
async cancelFollow() {
let me = this;
let vlogerId = me.userPageId;
let userId = storage.getVlogUserInfo().id;
var result = await vlogFansCancel({myId:userId,vlogerId:vlogerId})
var result = await vlogFansCancel({ myId: userId, vlogerId: vlogerId });
if (result.data.status == 200) {
me.isFollow = false;
// uni.setStorageSync("justCancelVlogerId", vlogerId);
@ -357,8 +391,8 @@ export default {
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
@ -368,7 +402,7 @@ export default {
let vlogerId = me.userPageId;
let userId = myUserInfo.id;
var result = await vlogFansFollow({myId:userId,vlogerId:vlogerId})
var result = await vlogFansFollow({ myId: userId, vlogerId: vlogerId });
if (result.data.status == 200) {
me.isFollow = true;
// uni.setStorageSync("justFollowVlogerId", vlogerId);
@ -378,8 +412,8 @@ export default {
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
duration: 3000,
icon: 'none',
duration: 3000
});
}
},
@ -395,36 +429,32 @@ export default {
// url: "../vlog/vlog?type=mine&isNeedPage=1&vlogId=" + vlogId,
// });
uni.navigateTo({
url: "/pages/me/vlog?vlogId=" + vlogId,
url: '/pages/me/vlog?vlogId=' + vlogId
});
},
goMyFans(userId) {
uni.navigateTo({
animationType: "fade-in",
url: "myFans?userId=" + userId,
animationType: 'fade-in',
url: 'myFans?userId=' + userId
});
},
goMyFollows(userId) {
uni.navigateTo({
animationType: "fade-in",
url: "myFollows?userId=" + userId,
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-right-search {
width: 40rpx;
height: 40rpx;
opacity: 0.8;
}
.header {
position: absolute;
left: 0;
@ -435,28 +465,40 @@ export default {
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 {
.tiktok-num {
font-size: 10px;
color: #ffffff;
font-weight: 300;
}
.tiktok-num-wrapper {
display: flex;
flex-direction: row;
}
.location-text {
line-height: 20px;
color: #ffffff;
font-size: 10px;
font-weight: 300;
}
.nickname {
font-size: 20px;
color: #ffffff;
font-weight: 600;
}
.location {
display: flex;
flex-direction: row;
height: 20px;
margin-top: 2px;
font-size: 1px;
}
.my-face {
width: 200rpx;
height: 200rpx;
@ -464,41 +506,19 @@ export default {
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;
.sex-img {
width: 22rpx;
height: 22rpx;
align-items: center;
}
.tiktok-num-wrapper {
display: flex;
flex-direction: row;
.tiktok-num {
.astro {
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;
font-weight: bold;
margin-left: 6rpx;
align-items: center;
}
}
.sex-wrapper {
display: flex;
flex-direction: row;
margin-top: 10rpx;
.constellation {
display: flex;
flex-direction: row;
@ -508,19 +528,13 @@ export default {
width: 130rpx;
height: 40rpx;
border-radius: 10px;
.sex-img {
width: 22rpx;
height: 22rpx;
align-self: center;
}
.astro {
.animal-text {
font-size: 10px;
color: #ffffff;
line-height: 20px;
font-weight: bold;
margin-left: 6rpx;
align-self: center;
}
align-items: center;
}
.animal {
margin-left: 10rpx;
@ -532,17 +546,28 @@ export default {
width: 60rpx;
height: 40rpx;
border-radius: 10px;
.animal-text {
font-size: 10px;
color: #ffffff;
line-height: 20px;
font-weight: bold;
align-self: center;
}
}
.sex-wrapper {
display: flex;
flex-direction: row;
margin-top: 10rpx;
}
.info-wrapper {
margin-left: 30rpx;
padding-top: 20rpx;
width: 500rpx;
}
.my-info {
display: flex;
flex-direction: row;
}
.my-info-wrapper {
position: relative;
left: 30rpx;
top: -560rpx;
display: flex;
flex-direction: column;
width: 1000rpx;
}
.desc {
position: relative;
@ -551,40 +576,34 @@ export default {
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;
align-items: center;
}
.item-text {
color: #ffffff;
font-size: 12px;
font-weight: 300;
align-self: center;
align-items: center;
}
.bottom-item {
margin-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.edit {
.bottom {
display: flex;
flex-direction: row;
justify-content: center;
margin-right: 30rpx;
}
.follow-text {
font-size: 13px;
color: #ffffff;
font-weight: 500;
align-items: center;
}
.follow-btn {
margin-right: 20rpx;
border-width: 1px;
@ -597,34 +616,25 @@ export default {
display: flex;
flex-direction: row;
justify-content: center;
align-self: center;
.follow-text {
font-size: 13px;
color: #ffffff;
font-weight: 500;
align-self: center;
align-items: center;
}
.edit {
display: flex;
flex-direction: row;
justify-content: center;
margin-right: 30rpx;
}
}
}
.tab-wrapper {
.bottom-wrapper {
position: relative;
top: -480rpx;
height: 40px;
background-color: #171825;
top: -510rpx;
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;
align-items: center;
color: #808080;
}
.tab-selected {
@ -637,7 +647,32 @@ export default {
border-radius: 6rpx;
background-color: #ef274d;
}
.vlog-cover {
align-items: center;
width: 248rpx;
height: 360rpx;
border-width: 1rpx;
}
.tab-item {
width: 250rpx;
align-items: 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;
}
.empty-text {
color: #ffffff;
font-size: 14px;
margin-top: 200rpx;
}
.vlog-list {
position: relative;
@ -647,12 +682,6 @@ export default {
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;
@ -663,13 +692,11 @@ export default {
justify-content: center;
position: relative;
top: -480rpx;
.empty-text {
}
.not-empty-text {
color: #ffffff;
font-size: 14px;
margin-top: 200rpx;
}
}
.not-empty {
width: 750rpx;
display: flex;
@ -677,11 +704,15 @@ export default {
justify-content: center;
position: relative;
top: -260rpx;
.not-empty-text {
color: #ffffff;
font-size: 14px;
}
}
.isLogin-info-wrapper {
}
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000000;
}
</style>

View File

@ -63,7 +63,7 @@
<textarea
class="vlog-content"
placeholder-style="color: #9798a0;"
placeholder="添加合适的描述内容~"
placeholder="添加合适的描述内容~最多60个字符"
:value="title"
:model="title"
maxlength="60"

View File

@ -4,6 +4,7 @@
:id="pageId"
>
<swiper
:disable-touch="!canSwipe"
ref="swiper1"
id="tab-bar-view"
style="my-swiper"
@ -15,61 +16,21 @@
@onAnimationEnd="animationfinish"
>
<swiper-item>
<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>
<video-local ref="videoLocal"></video-local>
</swiper-item>
<swiper-item>
<view
<!-- <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>
</view> -->
<video-follow-comp ref="videoFollowComp"></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>
<video-comp ref="videoComp"></video-comp>
</swiper-item>
</swiper>
@ -159,9 +120,10 @@ 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 videoComp from '@/components/vlog/videoComp';
import videoComp from '@/components/vlog/tuijian.nvue';
import videoLocal from '@/components/vlog/local.nvue';
import videoFollowComp from '@/components/vlog/guanzhu.nvue';
import config from '@/config/config';
export default {
@ -172,6 +134,8 @@ export default {
},
data() {
return {
channel: null,
canSwipe: true,
isTap: false,
isLoading: false,
statusBarHeight: system.statusBarHeight,
@ -215,7 +179,19 @@ export default {
isDraw_gz: false
};
},
created() {},
created() {
this.channel = new BroadcastChannel('video-progress');
this.channel.onmessage = (event) => {
console.log(event);
const { type, data } = event.data;
if (type === 'drag-start') {
this.canSwipe = false;
} else if (type === 'drag-end') {
this.canSwipe = true;
}
};
},
onReady() {
this._lastTabIndex = 0;
this.swiperWidth = 0;
@ -228,71 +204,37 @@ export default {
clearTimeout(timer);
}, 300);
},
onTabItemTap: function (e) {
// console.log(e);
// let tabIndex = e.index;
// this.playStatus = tabIndex === 0 ? true : 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;
onTabItemTap(e) {
// 点击tab菜单
console.log(e);
let tabIndex = e.index;
if (tabIndex == 0) {
var prop = this.pageList[this.curIndex];
this.$refs[prop].showVd();
}
},
onShow() {
var prop = this.pageList[this.curIndex];
this.getLocation();
let me = this;
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);
this.myUserInfo = storage.getVlogUserInfo();
if (storage.getRefreshVlogIndex() == '1') {
// 登录后需要刷新数据
for (var i = 0; i < this.pageList.length; i++) {
this.$refs[i].dataList = []; //所有数据清空
}
// 如果当前没有list, 则relaunch
if (this.$refs.videoComp != undefined) {
let playerList = this.$refs.videoComp.playerList;
if (playerList != undefined && playerList.length == 0) {
this.$refs.videoComp.displayVideoPaging(1, true);
}
}
if (me.curIndex == 0) {
me.playLocalStatus = true;
}
if (me.curIndex == 1) {
me.playFollowStatus = true;
}
if (me.curIndex == 2) {
me.playStatus = true;
this.$refs[prop].get(); //只初始化当前所在位置的数据
storage.setRefreshVlogIndex('0'); //初始完数据修改状态不需要刷新
} else {
try {
this.$refs[prop].showVd();
} catch {}
}
},
onHide() {
var me = this;
// 显示和隐藏需要判断根据不同tab做暂停或者隐藏
if (me.curIndex == 0) {
me.playLocalStatus = false;
me.isDraw_lo = false;
}
if (me.curIndex == 1) {
me.playFollowStatus = false;
me.isDraw_gz = false;
}
if (me.curIndex == 2) {
me.playStatus = false;
me.isDraw_tj = false;
}
var prop = this.pageList[this.curIndex];
try {
this.$refs[prop].hideVd();
} catch {}
},
// 当前页下拉刷新
@ -340,24 +282,24 @@ export default {
}, 300);
}
});
},
fail: (err) => {
console.log(err);
storage.setCityCode('');
uni.showToast({
icon: 'none',
title: '位置信息解析失败'
});
}
});
},
fail: (err) => {
console.log(err);
storage.setCityCode('');
uni.showToast({
icon: 'none',
title: '获取位置信息失败'
});
// uni.showModal({
// title:'提示',
// content:'获取位置信息失败',
// showCancel:false,
// success: (res) => {
// if(res.confirm){
// }
// }
// })
}
});
},
@ -423,16 +365,6 @@ export default {
},
onswiperscroll(e) {
this.isDraw_gz = false;
this.isDraw_lo = false;
this.isDraw_tj = false;
// 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) {
@ -449,21 +381,8 @@ export default {
}
// 切换失败
if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) {
// 是否有视频数据
if (obj.playerList.length === 0) {
// this.loadTabData(preloadIndex);
this.isDraw_gz = false;
this.isDraw_lo = false;
this.isDraw_tj = false;
} else {
this.isDraw_gz = preloadIndex == 1 ? true : false;
this.isDraw_lo = preloadIndex == 0 ? true : false;
this.isDraw_tj = preloadIndex == 2 ? true : false;
}
return;
}
// console.log(this.tabListSize)
var percentage = Math.abs(this.swiperWidth / offsetX);
var currentSize = this.tabListSize[this._lastTabIndex];
var preloadSize = this.tabListSize[preloadIndex];
@ -475,6 +394,23 @@ export default {
let index = e.detail.current;
console.log('当前索引' + index);
console.log('之前的索引' + this._lastTabIndex);
if (index != this._lastTabIndex) {
// 成功切换
var beforeProp = this.pageList[this._lastTabIndex];
var indexProp = this.pageList[index];
if (this.$refs[indexProp].dataList.length == 0) {
// 初始化数据
try {
this.$refs[indexProp].get();
} catch {}
}
try {
this.$refs[beforeProp].hideVd();
} catch {}
try {
this.$refs[indexProp].showVd();
} catch {}
}
this._lastTabIndex = index;
if (this._touchTabIndex === index) {
this.isTap = false;
@ -483,13 +419,6 @@ export default {
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);
}
},
@ -503,45 +432,10 @@ export default {
if (this.tabIndex === index) {
return;
}
// console.dir(this.$refs)
let props = this.pageList[index];
console.log(props);
console.log(index);
let obj = this.$refs[props];
// if (obj.playerList.length === 0) {
// var info = storage.getVlogUserInfo() || null
// if(info!=null&&index==0){
// obj.displayVideoPaging(this.page + 1, true);
// }
// }
obj.setScrollRef(this._headHeight);
console.log(this.cacheTab);
// 缓存 tabId
if (obj.playerList.length > MAX_CACHE_DATA) {
let isExist = this.cacheTab.indexOf(this.tabIndex);
if (isExist < 0) {
this.cacheTab.push(this.tabIndex);
}
}
this.tabIndex = index;
this.curIndex = index;
this.scrollTabTo(index);
this.scrollInto = this.tabList[index].id;
// 释放 tabId
if (this.cacheTab.length > MAX_CACHE_PAGE) {
let cacheIndex = this.cacheTab[0];
this.clearTabData(cacheIndex);
this.cacheTab.splice(0, 1);
}
// const el = this.$refs['tabitem' + index][0];
// animation.transition(el, {
// duration: 3000, //ms
// timingFunction: 'ease',
// delay: 1000 //ms
// });
},
scrollTabTo(index) {
console.log(index);
@ -566,12 +460,6 @@ export default {
var current = e.detail.current;
this.curIndex = current;
this.tabIndex = current;
let timer = setTimeout(() => {
this.playLocalStatus = this.curIndex === 0 ? true : false;
this.playFollowStatus = this.curIndex === 1 ? true : false;
this.playStatus = this.curIndex === 2 ? true : false;
clearTimeout(timer);
}, 10);
},
// 下拉刷新改变head的字样显示
@ -580,9 +468,6 @@ export default {
},
hideLoading() {
this.isLoading = false;
},
letFollowVideoPause() {
this.playFollowStatus = false;
}
}
};

View File

@ -0,0 +1,771 @@
<template>
<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>
<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>
<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>
-->
<video-comp></video-comp>
</swiper-item>
</swiper>
<view
class="header"
id="head"
:style="{ marginTop: statusBarHeight + 'px' }"
v-if="!isLoading"
>
<text class="header-left"></text>
<view class="header-center">
<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="isTap ? 'scroll-view-animation' : ''"
:style="{ left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px' }"
></view>
</view>
</view>
</scroll-view>
</view>
<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"
>
<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"
/>
</view>
</view>
</template>
<script>
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 videoComp from '@/components/vlog/tuijian.nvue';
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: 2,
cityCode: '',
playStatus: false, // 推荐
playFollowStatus: false, // 关注
playLocalStatus: false, // 同城
videoList: [], // 首页一开始查询所得的默认视频列表
refreshList: [], // 下拉刷新后获得的新的列表
pagingList: [], // 分页list
refresh: 0, // 从me页面传来的refresh用于退出登录后重新刷新当前页的视频
/////////////////
pageList: ['videoLocal', 'videoFollowComp', 'videoComp'],
tabList: [
{
id: 'tab' + 0,
name: '同城',
pageid: 1
},
{
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: 2,
isDraw_lo: false,
isDraw_tj: false,
isDraw_gz: false
};
},
created() {},
onReady() {
this._lastTabIndex = 0;
this.swiperWidth = 0;
this.tabbarWidth = 0;
this.tabListSize = {};
this._touchTabIndex = 0;
this._headHeight = 100;
var timer = setTimeout(() => {
this.selectorQuery();
clearTimeout(timer);
}, 300);
},
onTabItemTap: function (e) {
// console.log(e);
// let tabIndex = e.index;
// this.playStatus = tabIndex === 0 ? true : 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;
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
if (this.$refs.videoComp != undefined) {
let playerList = this.$refs.videoComp.playerList;
if (playerList != undefined && playerList.length == 0) {
this.$refs.videoComp.displayVideoPaging(1, true);
}
}
if (me.curIndex == 0) {
me.playLocalStatus = true;
}
if (me.curIndex == 1) {
me.playFollowStatus = true;
}
if (me.curIndex == 2) {
me.playStatus = true;
}
},
onHide() {
var me = this;
// 显示和隐藏需要判断根据不同tab做暂停或者隐藏
if (me.curIndex == 0) {
me.playLocalStatus = false;
me.isDraw_lo = false;
}
if (me.curIndex == 1) {
me.playFollowStatus = false;
me.isDraw_gz = false;
}
if (me.curIndex == 2) {
me.playStatus = false;
me.isDraw_tj = false;
}
},
// 当前页下拉刷新
// onPullDownRefresh() {
// var me = this;
// // 下拉刷新判断如果是不同tab那么组件中刷新的请求也不同
// if (me.curIndex == 0) {
// this.$refs.videoFollowComp.displayVideoPaging(1, true);
// } else if (me.curIndex == 1) {
// this.$refs.videoComp.displayVideoPaging(1, true);
// }
// },
methods: {
getLocation() {
uni.getLocation({
type: 'wg84',
success: (res) => {
console.log(res);
var latitude = res.latitude;
var longitude = res.longitude;
var location = latitude + ',' + longitude;
var key = config.aMapKey;
uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
method: 'GET',
data: {
location,
key
},
success: (address) => {
console.log(address);
var ad_info = address.data.result.ad_info;
var cityCode = ad_info.adcode; // 城市编码cityCode
storage.setCityCode(cityCode);
this.cityCode = cityCode;
var address_name = ad_info.district || ad_info.city;
this.tabList.forEach((i, index) => {
if (index == 0) {
i.name = address_name;
// this.selectorQuery();
var timer = setTimeout(() => {
this.selectorQuery();
clearTimeout(timer);
}, 300);
}
});
}
});
},
fail: (err) => {
console.log(err);
uni.showToast({
icon: 'none',
title: '获取位置信息失败'
});
// uni.showModal({
// title:'提示',
// content:'获取位置信息失败',
// showCancel:false,
// success: (res) => {
// if(res.confirm){
// }
// }
// })
}
});
},
// 前往搜索页面
goSearch() {
uni.navigateTo({
url: '/pages/search/search'
});
},
// ----------头部区域点击tabs
ontabtap(e) {
console.log(e);
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.isTap = true;
var currentSize = this.tabListSize[index];
this.updateIndicator(currentSize.left, currentSize.width);
this._touchTabIndex = index;
this.switchTab(index);
},
//
selectorQuery() {
var dm = uni.createSelectorQuery().in(this);
dm.select('#head')
.boundingClientRect()
.exec((rect) => {
this._headHeight = rect[0].height;
});
// 查询 tabbar 宽度
dm.in(this)
.select('#tab-bar')
.boundingClientRect()
.exec((rect) => {
this.tabbarWidth = rect[0].width;
console.log(this.tabbarWidth);
});
// 查询 tabview 宽度
dm.in(this)
.select('#tab-bar-view')
.boundingClientRect()
.exec((rect) => {
this.swiperWidth = rect[0].width;
console.log(this.swiperWidth);
});
// 因 nvue 暂不支持 class 查询
// var queryTabSize = uni.createSelectorQuery().in(this);
var queryTabSize = dm;
for (var i = 0; i < this.tabList.length; i++) {
queryTabSize.select('#' + this.tabList[i].id).boundingClientRect();
}
queryTabSize.exec((rects) => {
rects.forEach((rect) => {
rect.left = rect.left - 40; //修正 left 值,减去 padding-left: 40px
this.tabListSize[rect.dataset.id] = rect;
});
console.log(this.tabListSize[this.tabIndex]);
this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
this.switchTab(this.tabIndex);
});
},
onswiperscroll(e) {
this.isDraw_gz = false;
this.isDraw_lo = false;
this.isDraw_tj = false;
// if (this.playStatus == true) {
// this.playStatus = this._lastTabIndex == 2 ? false : true;
// }
// this.playFollowStatus = this._lastTabIndex == 1 ? false : true;
// this.playLocalStatus = this._lastTabIndex == 0 ? false : true;
var offsetX = e.detail.dx;
var preloadIndex = this._lastTabIndex;
if (offsetX > TAB_PRELOAD_OFFSET) {
preloadIndex++;
} else if (offsetX < -TAB_PRELOAD_OFFSET) {
preloadIndex--;
}
let prop = this.pageList[preloadIndex];
let obj = this.$refs[prop];
if (!obj) return;
// 点击切换
if (this.isTap) {
return;
}
// 切换失败
if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) {
// 是否有视频数据
if (obj.playerList.length === 0) {
// this.loadTabData(preloadIndex);
this.isDraw_gz = false;
this.isDraw_lo = false;
this.isDraw_tj = false;
} else {
this.isDraw_gz = preloadIndex == 1 ? true : false;
this.isDraw_lo = preloadIndex == 0 ? true : false;
this.isDraw_tj = preloadIndex == 2 ? true : false;
}
return;
}
// console.log(this.tabListSize)
var percentage = Math.abs(this.swiperWidth / offsetX);
var currentSize = this.tabListSize[this._lastTabIndex];
var preloadSize = this.tabListSize[preloadIndex];
var lineL = currentSize.left + (preloadSize.left - currentSize.left) / percentage;
var lineW = currentSize.width + (preloadSize.width - currentSize.width) / percentage;
this.updateIndicator(lineL, lineW);
},
animationfinish(e) {
let index = e.detail.current;
console.log('当前索引' + index);
console.log('之前的索引' + this._lastTabIndex);
this._lastTabIndex = index;
if (this._touchTabIndex === index) {
this.isTap = false;
}
this.switchTab(index);
if (!this.tabListSize[index]) {
return;
} else {
// this.playStatus = index == 2 ? false : true;
// this.playFollowStatus = index == 1 ? true : false;
// this.playLocalStatus = index == 0 ? true : false;
this.isDraw_gz = index == 1 ? true : false;
this.isDraw_lo = index == 0 ? true : false;
this.isDraw_tj = index == 2 ? true : false;
this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width);
}
},
updateIndicator(left, width) {
// console.log(left)
this.indicatorLineLeft = left;
this.indicatorLineWidth = width;
},
switchTab(index) {
if (this.tabIndex === index) {
return;
}
// console.dir(this.$refs)
let props = this.pageList[index];
console.log(props);
console.log(index);
let obj = this.$refs[props];
// if (obj.playerList.length === 0) {
// var info = storage.getVlogUserInfo() || null
// if(info!=null&&index==0){
// obj.displayVideoPaging(this.page + 1, true);
// }
// }
obj.setScrollRef(this._headHeight);
console.log(this.cacheTab);
// 缓存 tabId
if (obj.playerList.length > MAX_CACHE_DATA) {
let isExist = this.cacheTab.indexOf(this.tabIndex);
if (isExist < 0) {
this.cacheTab.push(this.tabIndex);
}
}
this.tabIndex = index;
this.curIndex = index;
this.scrollTabTo(index);
this.scrollInto = this.tabList[index].id;
// 释放 tabId
if (this.cacheTab.length > MAX_CACHE_PAGE) {
let cacheIndex = this.cacheTab[0];
this.clearTabData(cacheIndex);
this.cacheTab.splice(0, 1);
}
// const el = this.$refs['tabitem' + index][0];
// animation.transition(el, {
// duration: 3000, //ms
// timingFunction: 'ease',
// delay: 1000 //ms
// });
},
scrollTabTo(index) {
console.log(index);
const el = this.$refs['tabitem' + index][0];
let offset = 0;
// TODO fix ios offset
if (index > 0) {
offset = this.tabbarWidth / 2 - this.tabListSize[index].width / 2;
if (this.tabListSize[index].right < this.tabbarWidth / 2) {
offset = this.tabListSize[0].width;
}
}
dom.scrollToElement(el, {
offset: -offset
});
},
//----------------------------
// 左滑右滑选项卡改变选中状态
changeTopTab: function (e) {
var current = e.detail.current;
this.curIndex = current;
this.tabIndex = current;
let timer = setTimeout(() => {
this.playLocalStatus = this.curIndex === 0 ? true : false;
this.playFollowStatus = this.curIndex === 1 ? true : false;
this.playStatus = this.curIndex === 2 ? true : false;
clearTimeout(timer);
}, 10);
},
// 下拉刷新改变head的字样显示
showLoading() {
this.isLoading = true;
},
hideLoading() {
this.isLoading = false;
},
letFollowVideoPause() {
this.playFollowStatus = false;
}
}
};
</script>
<style scoped>
/* index start */
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000000;
}
/* index end */
/* 顶部选项卡 start */
.header {
position: absolute;
left: 0;
right: 0;
flex-direction: row;
height: 100rpx;
line-height: 100rpx;
align-items: center;
padding-left: 40px;
padding-right: 40px;
}
.header-center {
flex: 1;
flex-direction: row;
align-items: center;
justify-content: center;
}
.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 {
height: 100rpx;
/* align-items: flex-start;
justify-content: flex-end; */
}
.header-item {
align-items: center;
margin-left: 6rpx;
margin-right: 6rpx;
}
.header-item-title {
width: 120rpx;
text-align: center;
height: 60rpx;
line-height: 60rpx;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.header-refresh-title {
width: 300rpx;
text-align: center;
height: 60rpx;
line-height: 60rpx;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.header-item-line {
height: 5rpx;
line-height: 8rpx;
width: 60rpx;
border-radius: 8rpx;
}
/* 顶部选项卡 end */
/* 选项卡轮播组件 start */
.my-swiper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.near-by {
background-color: #000000;
align-items: center;
justify-content: center;
}
.my-follow {
background-color: #000000;
align-items: center;
justify-content: center;
}
/* 选项卡轮播组件 end */
.warn-info {
color: #ffffff;
font-size: 36rpx;
font-weight: 600;
}
.normal-img {
width: 50rpx;
height: 50rpx;
opacity: 0.8;
}
/* */
.tab-bar {
/* width: 750upx; */
flex: 1;
height: 84upx;
flex-direction: row;
lines: 1;
text-overflow: ellipsis;
justify-content: center;
align-items: center;
}
.uni-tab-item {
flex-wrap: nowrap;
/* padding-left: 25px; */
/* padding-right: 25px; */
}
.uni-tab-item-title {
color: #999;
font-size: 30upx;
height: 80upx;
line-height: 80upx;
flex-wrap: nowrap;
lines: 1;
text-overflow: ellipsis;
}
.uni-tab-item-title-active {
color: #ffffff;
}
.scroll-view-indicator {
position: relative;
height: 2px;
background-color: transparent;
}
.scroll-view-underline {
position: absolute;
top: 0;
bottom: 0;
width: 0;
/* background-color: #007AFF; */
background-color: #ffffff;
}
.scroll-view-animation {
transition-duration: 0.2s;
/* transition-property: transform; */
}
.tab-bar-line {
height: 1upx;
background-color: #cccccc;
}
</style>

BIN
static/douyin/atuser-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/douyin/atuser.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/douyin/biaoqing.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/douyin/chacha-4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
static/douyin/cuowu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
static/douyin/dianzan-6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
static/douyin/dianzan-7.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
static/douyin/gif-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/douyin/jia-9.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/douyin/jianpan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/douyin/shanchu-3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/douyin/shangyi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
static/douyin/sousuo-7.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
static/douyin/time.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
static/douyin/xianxing.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
static/douyin/you-3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
static/douyin/zfxsc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/images/link.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
static/images/more.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

BIN
static/img/index/bfq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
static/img/index/down.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/img/index/layers.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
static/img/index/logins.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
static/img/index/pause.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/img/index/play.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
static/img/index/up.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
static/img/index/xin-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
static/img/index/xin-3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
static/img/index/xin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

View File

@ -11,7 +11,9 @@
"com.tencent.timpush:xiaomi:8.5.6864",
"com.tencent.timpush:oppo:8.5.6864",
"com.tencent.timpush:meizu:8.5.6864",
"com.tencent.timpush:fcm:8.5.6864"
"com.tencent.timpush:fcm:8.5.6864",
"com.tencent.timpush:honor:8.5.6864",
"com.tencent.timpush:vivo:8.5.6864"
],
"project": {
"plugins": [

View File

@ -63,7 +63,7 @@
.uni-share-text {
margin-top: 10px;
font-size: 14px;
color: #3B4144;
color: #3b4144;
}
.uni-share-button-box {
@ -122,7 +122,7 @@
}
.commentBoxBlack {
color: #FFFFFF;
color: #ffffff;
background-color: #151515;
}
@ -192,7 +192,7 @@
.writer-words {
font-size: 26rpx;
color: #FFFFFF;
color: #ffffff;
text-align: center;
}
@ -212,115 +212,162 @@
<template>
<view class="uni-popup-share">
<view class="uni-share-title">
<image src="/static/images/icon-close.png" class="icon-close-left"></image>
<image
src="/static/images/icon-close.png"
class="icon-close-left"
></image>
<text class="uni-share-title-text">{{ getGraceNumber(thisVlogTotalComentCounts) }}条评论</text>
<image src="/static/images/icon-close.png" class="icon-close-right" @click="close"></image>
<image
src="/static/images/icon-close.png"
class="icon-close-right"
@click="close"
></image>
</view>
<view class="uni-share-content">
<!-- <view class="uni-share-content-box"> -->
<view class="" style="height: 800rpx;">
<scroll-view class="all-comments" :style="{width: screenWidth + 'px'}" scroll-y="true"
lower-threshold="150" @scrolltolower="loadMore" :scroll-top="scrollTop">
<view v-for="(commentContent, index) in commentList" :key="index" :data-index="index"
:class="{active : index == activeIndex}" @touchstart="touchstartComment(index)"
<view
class=""
style="height: 800rpx"
>
<scroll-view
class="all-comments"
:style="{ width: screenWidth + 'px' }"
scroll-y="true"
lower-threshold="150"
@scrolltolower="loadMore"
:scroll-top="scrollTop"
>
<view
v-for="(commentContent, index) in commentList"
:key="index"
:data-index="index"
:class="{ active: index == activeIndex }"
@touchstart="touchstartComment(index)"
@touchend="touchendComment()"
@longpress="deleteComment(commentContent.commentUserId, commentContent.commentId)">
<view class="comments-wrapper"
style="margin-left: 16rpx;margin-top: 16rpx;margin-right: 16rpx;">
@longpress="deleteComment(commentContent.commentUserId, commentContent.commentId)"
>
<view
class="comments-wrapper"
style="margin-left: 16rpx; margin-top: 16rpx; margin-right: 16rpx"
>
<view class="comments-wrapper-sub-up">
<view class="vlogger-wrapper">
<image :src="commentContent.commentUserFace" class="img-face"></image>
<view style="margin-left: 10px;width: 456rpx;">
<view style="display: flex;flex-direction: row;">
<image
:src="commentContent.commentUserFace"
class="img-face"
></image>
<view style="margin-left: 10px; width: 456rpx">
<view style="display: flex; flex-direction: row">
<text style="font-size: 30rpx; color: #878585; align-self: center">{{ commentContent.commentUserNickname }}</text>
<view
v-if="commentContent.vlogerId == thisVlogerId"
class="tag-writer"
style="align-self: center"
>
<text
style="font-size: 30rpx;color: #878585;align-self: center;">{{commentContent.commentUserNickname}}</text>
<view v-if="commentContent.vlogerId == thisVlogerId" class="tag-writer"
style="align-self: center;">
<text class="writer-words" style="align-self: center;">作者</text>
class="writer-words"
style="align-self: center"
>
作者
</text>
</view>
<image
v-if="commentContent.replyedUserNickname != null && commentContent.replyedUserNickname != ''"
src="/static/images/icon-right-arrow3.png" class=""
style="opacity: 0.8;width: 40rpx;height: 40rpx;margin-left: 16rpx;margin-right: 10rpx;align-self: center;">
</image>
src="/static/images/icon-right-arrow3.png"
class=""
style="opacity: 0.8; width: 40rpx; height: 40rpx; margin-left: 16rpx; margin-right: 10rpx; align-self: center"
></image>
<text
v-if="commentContent.replyedUserNickname != null && commentContent.replyedUserNickname != ''"
style="font-size: 30rpx;color: #878585;align-self: center;">{{commentContent.replyedUserNickname}}</text>
style="font-size: 30rpx; color: #878585; align-self: center"
>
{{ commentContent.replyedUserNickname }}
</text>
</view>
<text
style="font-size: 32rpx;color: #FFFFFF;margin-top: 2px;">{{commentContent.content}}</text>
<text style="font-size: 32rpx; color: #ffffff; margin-top: 2px">{{ commentContent.content }}</text>
</view>
</view>
<view style="display: flex;flex-direction: column;width: 26px;">
<image v-if="commentContent.isLike == 1" src="/static/images/icon-comment-like.png"
class="like-or-not" style="align-self: center;"
@click="unlike(commentContent.commentUserId, commentContent.commentId, index)">
</image>
<image v-if="commentContent.isLike == 0"
src="/static/images/icon-comment-unlike.png" class="like-or-not"
style="align-self: center;"
@click="like(commentContent.commentUserId, commentContent.commentId, index)">
</image>
<text
style="font-size: 22rpx;color: #878585;align-self: center;">{{commentContent.likeCounts}}</text>
<view style="display: flex; flex-direction: column; width: 26px">
<image
v-if="commentContent.isLike == 1"
src="/static/images/icon-comment-like.png"
class="like-or-not"
style="align-self: center"
@click="unlike(commentContent.commentUserId, commentContent.commentId, index)"
></image>
<image
v-if="commentContent.isLike == 0"
src="/static/images/icon-comment-unlike.png"
class="like-or-not"
style="align-self: center"
@click="like(commentContent.commentUserId, commentContent.commentId, index)"
></image>
<text style="font-size: 22rpx; color: #878585; align-self: center">{{ commentContent.likeCounts }}</text>
</view>
</view>
<view class="comments-wrapper-sub-down">
<image src="/static/face/face-arrow-1.png" class="img-face" style="opacity: 0;"></image>
<image
src="/static/face/face-arrow-1.png"
class="img-face"
style="opacity: 0"
></image>
<text style="font-size: 30rpx; color: #878585; margin-left: 10px">{{ getGraceDateBeforeNow(commentContent.createTime) }}</text>
<text
style="font-size: 30rpx;color: #878585;margin-left: 10px;">{{getGraceDateBeforeNow(commentContent.createTime)}}</text>
<text style="font-size: 30rpx;color: #878585;margin-left: 20px;"
@click="replyComment(commentContent.commentId, commentContent.commentUserNickname)">回复</text>
style="font-size: 30rpx; color: #878585; margin-left: 20px"
@click="replyComment(commentContent.commentId, commentContent.commentUserNickname)"
>
回复
</text>
</view>
</view>
</view>
<!-- TODO: 判断总评论数和当前list中数量是否一致如果一致则显然如下 -->
<view
style="display: flex;flex-direction: row;justify-content: center;margin-top: 50rpx;height: 100rpx;">
<text style="color: #444446;font-size: 13px;">{{bottomTxt}}</text>
<view style="display: flex; flex-direction: row; justify-content: center; margin-top: 50rpx; height: 100rpx">
<text style="color: #444446; font-size: 13px">{{ bottomTxt }}</text>
</view>
</scroll-view>
</view>
<!-- 评论输入框 -->
<view class="comment-wrapper" v-if="isLogin"
:class="{commentWrapperBlack: commentWrapperBlack, commentWrapperWhite: commentWrapperWhite}">
<input class="comment-box" :class="{commentBoxBlack: commentBoxBlack, commentBoxWhite: commentBoxWhite}"
placeholder-class="comment-box-placeholder" :style="{width: screenWidth-70 + 'px'}"
:placeholder="placeholder" cursor-spacing="10px" v-model="currentComment" confirm-type="done"
:focus="commentFocus" @focus="typingComment" @blur="noTypingComment">
<view
class="comment-wrapper"
v-if="isLogin"
:class="{ commentWrapperBlack: commentWrapperBlack, commentWrapperWhite: commentWrapperWhite }"
>
<input
class="comment-box"
:class="{ commentBoxBlack: commentBoxBlack, commentBoxWhite: commentBoxWhite }"
placeholder-class="comment-box-placeholder"
:style="{ width: screenWidth - 70 + 'px' }"
:placeholder="placeholder"
cursor-spacing="10px"
v-model="currentComment"
confirm-type="done"
:focus="commentFocus"
@focus="typingComment"
@blur="noTypingComment"
/>
<!-- @confirm="doCommentPublish" -->
<view style="display: flex;flex-direction: column;justify-content: center;">
<image src="/static/images/icon-comment.png" class="icon-comment" @click="doCommentPublish()">
</image>
<view style="display: flex; flex-direction: column; justify-content: center">
<image
src="/static/images/icon-comment.png"
class="icon-comment"
@click="doCommentPublish()"
></image>
</view>
</view>
</view>
</view>
</template>
<script>
import storage from "@/utils/storage.js"; //
import {
vlogCommentCounts,
vlogCommentUnLike,
vlogCommentLike,
vlogCommentDelete,
vlogCommentList,
vlogCommentCreate
} from "@/api/vlog"
import {
dateFormat,
graceNumber,
getDateBeforeNow
} from '@/utils/tools.js'
import storage from '@/utils/storage.js'; //
import { vlogCommentCounts, vlogCommentUnLike, vlogCommentLike, vlogCommentDelete, vlogCommentList, vlogCommentCreate } from '@/api/vlog';
import { dateFormat, graceNumber, getDateBeforeNow } from '@/utils/tools.js';
import popup from '../uni-popup/popup.js'
import popup from '../uni-popup/popup.js';
export default {
name: 'UniPopupShare',
mixins: [popup],
@ -341,7 +388,7 @@
thisVlogId: {
type: String,
default: ''
},
}
},
data() {
return {
@ -355,7 +402,7 @@
// commentBoxBlack: false,
// commentBoxWhite: true,
screenWidth: uni.getSystemInfoSync().screenWidth,
currentComment: "",
currentComment: '',
scrollTop: 0,
old: {
scrollTop: 0
@ -364,31 +411,29 @@
// commentTouched: false,
activeIndex: -1,
bottomTxt: "到底了哦~",
placeholder: "快发条评论吧~",
bottomTxt: '到底了哦~',
placeholder: '快发条评论吧~',
commentFocus: false,
thisFatherCommentId: "0", // id
thisFatherCommentId: '0', // id
thisVlogTotalComentCounts: 0,
loginUserId: "",
loginUserId: '',
page: 0,
totalPage: 0,
commentCounts: 88,
commentList: [],
}
},
onShow() {
commentList: []
};
},
onShow() {},
created() {
var me = this;
var myUserInfo = storage.getVlogUserInfo()
var userId = "";
var myUserInfo = storage.getVlogUserInfo();
var userId = '';
if (myUserInfo != null) {
userId = myUserInfo.id;
this.isLogin = true
this.isLogin = true;
} else {
this.isLogin = false
this.isLogin = false;
}
me.loginUserId = userId;
@ -401,29 +446,41 @@
var me = this;
var vlogId = me.thisVlogId;
var result = await vlogCommentCounts(vlogId)
var result = await vlogCommentCounts(vlogId);
if (result.data.status == 200) {
me.thisVlogTotalComentCounts = result.data.data;
} else {
me.thisVlogTotalComentCounts = 0;
}
if (me.thisVlogTotalComentCounts == 0) {
me.bottomTxt = "抢一个沙发吧~";
me.bottomTxt = '抢一个沙发吧~';
} else {
me.bottomTxt = "到底了哦~";
me.bottomTxt = '到底了哦~';
}
},
async unlike(commentUserId, commentId, index) {
var me = this;
var result = await vlogCommentUnLike(me.loginUserId, commentId)
var myUserInfo = storage.getVlogUserInfo();
if (myUserInfo == null) {
uni.showTabBar({
animation: false
});
uni.navigateTo({
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return;
}
var me = this;
var result = await vlogCommentUnLike(me.loginUserId, commentId);
if (result.data.status == 200) {
me.reLikeCommentList(index, 0);
me.reCountsCommentList(index, -1);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
icon: 'none',
duration: 3000
});
}
@ -437,19 +494,19 @@
animation: false
});
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom",
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return;
}
var result = await vlogCommentLike(me.loginUserId, commentId)
var result = await vlogCommentLike(me.loginUserId, commentId);
if (result.data.status == 200) {
me.reLikeCommentList(index, 1);
me.reCountsCommentList(index, 1);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
icon: 'none',
duration: 3000
});
}
@ -488,13 +545,13 @@
content: '确认删除评论吗?',
success: async (res) => {
if (res.confirm) {
var result = await vlogCommentDelete(vlogId, commentUserId, commentId)
var result = await vlogCommentDelete(vlogId, commentUserId, commentId);
if (result.data.status == 200) {
me.doCommentPagingList(1, true);
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
icon: 'none',
duration: 3000
});
}
@ -502,7 +559,6 @@
}
}
});
},
loadMore() {
if (this.page == this.totalPage) {
@ -512,31 +568,29 @@
},
//
async doCommentPagingList(page, needClearList) {
//
var me = this;
me.page = page;
var vlogId = me.thisVlogId;
var result = await vlogCommentList(page, 10, vlogId, me.loginUserId)
var result = await vlogCommentList(page, 10, vlogId, me.loginUserId);
if (result.data.status == 200) {
var commentList = result.data.data.rows;
console.log(commentList);
var totalPage = result.data.data.total;
if (needClearList) {
me.commentList = [];
}
me.commentList = me.commentList.concat(commentList);
me.totalPage = totalPage;
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
icon: 'none',
duration: 3000
});
}
},
//
typingComment() {
this.commentWrapperBlack = false;
@ -553,70 +607,66 @@
this.commentBoxBlack = true;
this.commentBoxWhite = false;
this.thisFatherCommentId = "0"; // fatherId0
this.thisFatherCommentId = '0'; // fatherId0
this.commentFocus = false;
this.placeholder = "爱评论的人都是天使~";
this.placeholder = '爱评论的人都是天使~';
},
//
replyComment(commentId, commentUserNickname) {
var me = this;
var myUserInfo = storage.getVlogUserInfo()
var myUserInfo = storage.getVlogUserInfo();
if (myUserInfo == null) {
uni.showTabBar({
animation: false
});
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom",
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return;
}
this.thisFatherCommentId = commentId;
this.commentFocus = true;
this.placeholder = "回复 @" + commentUserNickname;
this.placeholder = '回复 @' + commentUserNickname;
// this.typingComment();
},
//
async doCommentPublish() {
console.log('发表评论')
console.log('发表评论');
var me = this;
var myUserInfo = storage.getVlogUserInfo()
var myUserInfo = storage.getVlogUserInfo();
if (myUserInfo == null) {
uni.showTabBar({
animation: false
});
uni.navigateTo({
url: "/pages/passport/login",
animationType: "slide-in-bottom",
url: '/pages/passport/login',
animationType: 'slide-in-bottom'
});
return;
}
if (me.currentComment == null || me.currentComment == "" || me.currentComment == undefined) {
if (me.currentComment == null || me.currentComment == '' || me.currentComment == undefined) {
uni.showToast({
title: "请填入您的评论~",
title: '请填入您的评论~',
mask: true,
position: "bottom"
position: 'bottom'
});
return;
}
if (me.currentComment.length > 50) {
uni.showToast({
title: "评论字数限制50以内噢~",
title: '评论字数限制50以内噢~',
mask: true,
position: "bottom"
position: 'bottom'
});
return;
}
var userId = myUserInfo.id;
var pendingCommentObject = {
@ -624,10 +674,10 @@
vlogerId: me.thisVlogerId,
fatherCommentId: me.thisFatherCommentId,
commentUserId: userId,
content: me.currentComment,
content: me.currentComment
};
var result = await vlogCommentCreate(pendingCommentObject)
var result = await vlogCommentCreate(pendingCommentObject);
console.log(result);
if (result.data.status == 200) {
var newCommentObject = result.data.data;
@ -635,18 +685,17 @@
newCommentObject.commentUserNickname = myUserInfo.nickname;
newCommentObject.commentUserFace = myUserInfo.face;
newCommentObject.isLike = 0;
newCommentObject.vlogerId = userId
newCommentObject.vlogerId = userId;
me.doCommentPagingList(1, true);
// /thisFatherCommentId0
me.thisFatherCommentId = "0";
me.thisFatherCommentId = '0';
//
me.commentList.unshift(newCommentObject);
//
me.currentComment = "";
me.currentComment = '';
//
uni.hideKeyboard();
//
@ -655,19 +704,18 @@
// list
me.scrollTop = me.scrollTop + 1;
me.$nextTick(() => {
me.scrollTop = 0 //0
me.scrollTop = 0; //0
});
} else {
uni.showToast({
title: result.data.msg,
icon: "none",
icon: 'none',
duration: 3000
});
}
me.freshCommentCounts();
// uni.request({
// method: "POST",
// header: {
@ -680,7 +728,6 @@
// }
// });
},
// 1000100001.3k/6.8w
getGraceNumber(num) {
@ -688,11 +735,10 @@
},
// /xx/...
getGraceDateBeforeNow(dateTimeStr) {
var date = dateFormat("YYYY-mm-dd", new Date(dateTimeStr));
return getDateBeforeNow(date);
// var date = dateFormat('YYYY-MM-DD HH:mm:ss', new Date(dateTimeStr));
return getDateBeforeNow(dateTimeStr);
},
/**
* 选择内容
*/
@ -700,15 +746,14 @@
this.$emit('select', {
item,
index
})
this.close()
});
this.close();
},
/**
* 关闭窗口
*/
close() {
if (this.beforeClose) return
if (this.beforeClose) return;
this.popup.close();
uni.showTabBar({
animation: true
@ -722,7 +767,7 @@
touchendComment() {
// this.commentTouched = false;
this.activeIndex = -1;
},
}
}
};
</script>

View File

@ -38,7 +38,7 @@
height: 60rpx;
}
.icon-tag-text {
color: #FFFFFF;
color: #ffffff;
font-size: 14px;
margin-top: 10rpx;
}
@ -46,73 +46,153 @@
<template>
<view class="page">
<view class="all-box">
<view class="share-item" @click="downloadVlog()">
<view class="icon-wrapper" style="align-self: center;">
<image class="icon-image" src="/static/images/icon-download.png" style="align-self: center;"></image>
<!-- <view
class="share-item"
@click="downloadVlog()"
>
<view
class="icon-wrapper"
style="align-self: center"
>
<image
class="icon-image"
src="/static/images/link.png"
style="align-self: center"
></image>
</view>
<text class="icon-tag-text" style="align-self: center;">保存到相册</text>
<text
class="icon-tag-text"
style="align-self: center"
>
复制口令
</text>
</view> -->
<view
class="share-item"
@click="copyLink()"
>
<view
class="icon-wrapper"
style="align-self: center"
>
<image
class="icon-image"
src="/static/images/link.png"
style="align-self: center"
></image>
</view>
<text
class="icon-tag-text"
style="align-self: center"
>
复制链接
</text>
</view>
<view class="share-item" @click="copyLink()">
<view class="icon-wrapper" style="align-self: center;">
<image class="icon-image" src="/static/images/icon-copy.png" style="align-self: center;"></image>
</view>
<text class="icon-tag-text" style="align-self: center;">复制链接</text>
</view>
<view class="share-item" @click="gotoQRCode()">
<view class="icon-wrapper" style="align-self: center;">
<image class="icon-image" src="/static/images/icon-qrcode.png" style="align-self: center;"></image>
</view>
<text class="icon-tag-text" style="align-self: center;">二维码</text>
<!-- <view
class="share-item"
@click="gotoQRCode()"
>
<view
class="icon-wrapper"
style="align-self: center"
>
<image
class="icon-image"
src="/static/images/icon-qrcode.png"
style="align-self: center"
></image>
</view>
<text
class="icon-tag-text"
style="align-self: center"
>
二维码
</text>
</view> -->
<!-- 判断只有我自己才能显示这个按钮 -->
<view v-if="(thisVlogerId == userId) && (isPrivate == 0)" class="share-item" @click="changeVlogToPrivate()">
<view class="icon-wrapper" style="align-self: center;">
<image class="icon-image" src="/static/images/icon-private.png" style="align-self: center;"></image>
<!-- <view
v-if="thisVlogerId == userId && isPrivate == 0"
class="share-item"
@click="changeVlogToPrivate()"
>
<view
class="icon-wrapper"
style="align-self: center"
>
<image
class="icon-image"
src="/static/images/icon-private.png"
style="align-self: center"
></image>
</view>
<text class="icon-tag-text" style="align-self: center;">转为私密</text>
</view>
<view v-if="(thisVlogerId == userId) && (isPrivate == 1)" class="share-item" @click="changeVlogToPublic()">
<view class="icon-wrapper" style="align-self: center;">
<image class="icon-image" src="/static/images/icon-private.png" style="align-self: center;"></image>
</view>
<text class="icon-tag-text" style="align-self: center;">转为公开</text>
<text
class="icon-tag-text"
style="align-self: center"
>
转为私密
</text>
</view> -->
<!-- <view
v-if="thisVlogerId == userId && isPrivate == 1"
class="share-item"
@click="changeVlogToPublic()"
>
<view
class="icon-wrapper"
style="align-self: center"
>
<image
class="icon-image"
src="/static/images/icon-private.png"
style="align-self: center"
></image>
</view>
<text
class="icon-tag-text"
style="align-self: center"
>
转为公开
</text>
</view> -->
</view>
<view class="" style="padding: 0 20rpx;">
<view
class=""
style="padding: 0 20rpx"
>
<!-- :class="{'btn-preplay':!preplayTouched, 'btn-preplay-touched': preplayTouched}"
@click="preview"
@touchstart="touchstartPreplay"
@touchend="touchendPreplay" -->
<view :class="{'btn-cancel':!cancelTouched, 'btn-cancel-touched': cancelTouched}"
<view
:class="{ 'btn-cancel': !cancelTouched, 'btn-cancel-touched': cancelTouched }"
@click="close"
@touchstart="touchstartCancel"
@touchend="touchendCancel"
style="height: 50px;display: flex;flex-direction: column;justify-content: center;border-width: 1rpx;border-radius: 10px;">
<text class="" style="color: #FFFFFF;font-size: 16px;align-self: center;align-self: center;">取消</text>
style="height: 50px; display: flex; flex-direction: column; justify-content: center; border-width: 1rpx; border-radius: 10px"
>
<text
class=""
style="color: #ffffff; font-size: 16px; align-self: center; align-self: center"
>
取消
</text>
</view>
</view>
</view>
</template>
<script>
import storage from "@/utils/storage.js"; //
import {
vlogChangeToPublic,
vlogChangeToPrivate
} from "@/api/vlog"
import {
dateFormat,
graceNumber,
getDateBeforeNow
} from '@/utils/tools.js'
import popup from '../uni-popup/popup.js'
import storage from '@/utils/storage.js'; //
import { vlogChangeToPublic, vlogChangeToPrivate } from '@/api/vlog';
import { dateFormat, graceNumber, getDateBeforeNow } from '@/utils/tools.js';
import popup from '../uni-popup/popup.js';
export default {
name: 'UniPopupShare',
mixins: [popup],
@ -145,23 +225,16 @@
},
data() {
return {
userId: "",
userId: '',
cancelTouched: false
}
};
},
created() {
var info = storage.getVlogUserInfo()
if(info==null){
// uni.showTabBar({
// animation: false
// });
// uni.navigateTo({
// url: "/pages/passport/login",
// animationType: "slide-in-bottom",
// });
// return;
}else{
this.userId = userId;
mounted() {
console.log('挂载');
var info = storage.getVlogUserInfo();
if (info != null) {
this.userId = info.id;
}
},
methods: {
@ -172,18 +245,18 @@
this.$emit('select', {
item,
index
})
});
this.close();
},
/**
* 关闭窗口
*/
close() {
if(this.beforeClose) return
if (this.beforeClose) return;
this.popup.close();
uni.showTabBar({
animation: true
})
});
},
touchstartCancel() {
@ -195,7 +268,7 @@
},
downloadVlog() {
console.log("downloadVlog...thisVlogId = " + this.vlogUrl);
console.log('downloadVlog...thisVlogId = ' + this.vlogUrl);
uni.showLoading();
uni.downloadFile({
url: this.vlogUrl,
@ -208,61 +281,62 @@
console.log('save success');
uni.hideLoading();
uni.showToast({
title: "保存成功~",
title: '保存成功~',
duration: 5000
})
});
}
});
}
}
});
},
copyLink() {
// this.thisVlogId id
uni.setClipboardData({
data: this.vlogUrl,
success: () => {
uni.showToast({//
uni.showToast({
//
title: '复制成功'
})
});
}
});
},
gotoQRCode() {
uni.navigateTo({
url: "/pages/qrcode/qrcode?vlogId=" + this.thisVlogId
})
url: '/pages/qrcode/qrcode?vlogId=' + this.thisVlogId
});
},
async changeVlogToPublic() {
var vlogId = this.thisVlogId;
var me = this;
var info = storage.getVlogUserInfo()
var info = storage.getVlogUserInfo();
var userId = info.id;
var result = await vlogChangeToPublic(userId,vlogId)
var result = await vlogChangeToPublic(userId, vlogId);
if (result.data.status == 200) {
this.isPrivate = 0;
uni.showToast({
title: "设置完毕~"
})
title: '设置完毕~'
});
}
},
async changeVlogToPrivate() {
var vlogId = this.thisVlogId;
var me = this;
var info = storage.getVlogUserInfo()
var info = storage.getVlogUserInfo();
var userId = info.id;
var result = await vlogChangeToPrivate(userId,vlogId)
var result = await vlogChangeToPrivate(userId, vlogId);
if (result.data.status == 200) {
this.isPrivate = 1;
uni.showToast({
title: "设置完毕~"
})
}
title: '设置完毕~'
});
}
}
}
};
</script>

View File

@ -1,7 +1,11 @@
import Request from "@/lib/request/index.js";
import { refreshTokenFn } from "@/api/login.js";
import {
refreshTokenFn
} from "@/api/login.js";
import storage from "@/utils/storage.js";
import { md5 } from "@/utils/md5.js";
import {
md5
} from "@/utils/md5.js";
import Foundation from "@/utils/Foundation.js";
import api from "@/config/api.js";
@ -131,7 +135,10 @@ http.interceptors.response.use(
//调用刷新token的接口
return refreshTokenFn(storage.getRefreshToken())
.then((res) => {
let { accessToken, refreshToken } = res.data.result;
let {
accessToken,
refreshToken
} = res.data.result;
storage.setAccessToken(accessToken);
storage.setRefreshToken(refreshToken);
@ -188,7 +195,9 @@ http.interceptors.response.use(
}
);
export { http };
export {
http
};
export const Method = {
GET: "GET",

View File

@ -221,11 +221,11 @@ const dateFormat = (fmt, date) => {
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"M+": (date.getMonth() + 1).toString(), // 月
"D+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString(), // 秒
"m+": date.getMinutes().toString(), // 分
"s+": date.getSeconds().toString(), // 秒
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);