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

im_merge

Browse Source
This commit is contained in:
陈浩 2025-04-25 18:27:47 +08:00
commit eaa9f50e7a
68 changed files with 10371 additions and 4407 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
App.vue
View File

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

47
components/m-share/index.vue
View File

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

1260
components/vlog/guanzhu.nvue Normal file
View File

File diff suppressed because it is too large Load Diff

1262
components/vlog/local.nvue Normal file
View File

File diff suppressed because it is too large Load Diff

1234
components/vlog/tuijian.nvue Normal file
View File

File diff suppressed because it is too large Load Diff

7
components/vlog/videoDetail.vue
View File

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

4
config/api.js
View File

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

14
config/config.js
View File

@ -1,5 +1,5 @@
const name = "无终街"; //全局商城name const name = "无终街"; //全局商城name
const schemeName = 'lilishop' //唤醒app需要的schemeName const schemeName = 'wuzhongjie' //唤醒app需要的schemeName
export default { export default {
name: name, name: name,
schemeLink: `${schemeName}://`, //唤起app地址 schemeLink: `${schemeName}://`, //唤起app地址
@ -8,10 +8,10 @@ export default {
appid: "wx6f10f29075dc1b0b", //小程序唯一凭证，即 AppID，可在「微信公众平台 - 设置 - 开发设置」页中获得。（需要已经成为开发者，且帐号没有异常状态） appid: "wx6f10f29075dc1b0b", //小程序唯一凭证，即 AppID，可在「微信公众平台 - 设置 - 开发设置」页中获得。（需要已经成为开发者，且帐号没有异常状态）
appSecret: "6dfbe0c72380dce5d49d65b3c91059b1", //可在 manifest.json 查看 appSecret: "6dfbe0c72380dce5d49d65b3c91059b1", //可在 manifest.json 查看
aMapKey: "AOHBZ-VCEL3-XX73N-O623U-FMTP6-ASBTD", //在腾讯的中申请web端key aMapKey: "AOHBZ-VCEL3-XX73N-O623U-FMTP6-ASBTD", //在腾讯的中申请web端key
scanAuthNavigation:['https://m-b2b2c.pickmall.cn/'], //扫码认证跳转域名配置 会根据此处配置的路由进行跳转 scanAuthNavigation: ['https://m-b2b2c.pickmall.cn/'], //扫码认证跳转域名配置 会根据此处配置的路由进行跳转
iosAppId:"id1564638363", //AppStore的应用地址id 具体在分享->拷贝链接中查看 iosAppId: "id1564638363", //AppStore的应用地址id 具体在分享->拷贝链接中查看
logo:"https://lilishop-oss.oss-cn-beijing.aliyuncs.com/4c864e133c2944efad1f7282ac8a3b9e.png", //logo地址 logo: "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/4c864e133c2944efad1f7282ac8a3b9e.png", //logo地址
customerServiceMobile:"13161366885", //客服电话 customerServiceMobile: "13161366885", //客服电话
customerServiceEmail:"lili@lili.com", //客服邮箱 customerServiceEmail: "lili@lili.com", //客服邮箱
img:'https://wzjbucket.oss-rg-china-mainland.aliyuncs.com', //图片地址,聊天分享的图片地址 img: 'https://wzjbucket.oss-rg-china-mainland.aliyuncs.com', //图片地址,聊天分享的图片地址
}; };

4
manifest.json
View File

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

79
pages.json
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", "path": "pages/me/vlog",
"style": { "style": {
@ -489,14 +423,6 @@
"navigationBarBackgroundColor": "#181b27" "navigationBarBackgroundColor": "#181b27"
} }
}, },
{
"path": "pages/me/settings",
"style": {
"navigationBarTitleText": "设置",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#181b27"
}
},
{ {
"path": "pages/me/myFans", "path": "pages/me/myFans",
"style": { "style": {
@ -566,8 +492,7 @@
{ {
"root": "pages/mine", "root": "pages/mine",
"pages": [ "pages": [{
{
"path": "mydistribution/index", "path": "mydistribution/index",
"style": { "style": {
"navigationBarTitleText": "我的分销" "navigationBarTitleText": "我的分销"
@ -1389,7 +1314,7 @@
"text": "消息" "text": "消息"
}, },
{ {
"pagePath": "pages/tabbar/user/my", "pagePath": "pages/me/me",
"text": "我的" "text": "我的"
} }
], ],

86
pages/me/chooseCity.nvue
View File

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

66
pages/me/chooseDistrict.nvue
View File

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

84
pages/me/chooseProvince.nvue
View File

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

463
pages/me/me.nvue
View File

@ -1,17 +1,31 @@
<template> <template>
<view class="mypage"> <view class="mypage">
<!-- 未登录 --> <!-- 未登录 -->
<view v-if="!userIsLogin" class="login-info-wrapper" :style="{ height: screenHeightUnLogin + 'px' }" <view
@click="goLogin"> v-if="!userIsLogin"
class="login-info-wrapper"
:style="{ height: screenHeightUnLogin + 'px' }"
@click="goLogin"
>
<text class="login-info"> <text class="login-info">
{{ loginWords }} {{ loginWords }}
</text> </text>
</view> </view>
<!-- 已登录 --> <!-- 已登录 -->
<scroll-view v-if="userIsLogin" class="isLogin-info-wrapper" :style="{ height: screenHeight + 'px' }" <scroll-view
scroll-y="true" @scrolltolower="loadMore"> v-if="userIsLogin"
<image class="mybg" :src="pageUserInfo.bgImg" mode="aspectFill" @click="changeMyBg" /> class="isLogin-info-wrapper"
:style="{ height: screenHeight + 'px' }"
scroll-y="true"
@scrolltolower="loadMore"
>
<image
class="mybg"
:src="pageUserInfo.bgImg"
mode="aspectFill"
@click="changeMyBg"
/>
<!-- 安卓下使用一个灰色图片来替代阴影效果, ios支持阴影, 安卓则不支持 --> <!-- 安卓下使用一个灰色图片来替代阴影效果, ios支持阴影, 安卓则不支持 -->
<!-- <image <!-- <image
@ -23,7 +37,12 @@
<view class="my-info-wrapper"> <view class="my-info-wrapper">
<view class="my-info"> <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"> <view class="info-wrapper">
<text class="nickname"> <text class="nickname">
{{ pageUserInfo.nickname }} {{ pageUserInfo.nickname }}
@ -37,20 +56,26 @@
<view class="location"> <view class="location">
<text class="location-text">所在地：</text> <text class="location-text">所在地：</text>
<text class="location-text"> <text class="location-text">
{{ pageUserInfo.city == "" ? "中国" : "" + pageUserInfo.city {{ pageUserInfo.city == '' ? '中国' : '' + pageUserInfo.city }}{{ pageUserInfo.district == '' ? '' : '·' + pageUserInfo.district }}
}}{{
pageUserInfo.district == "" ? "" : "·" + pageUserInfo.district
}}
</text> </text>
</view> </view>
<view class="sex-wrapper"> <view class="sex-wrapper">
<view class="constellation"> <view class="constellation">
<image class="sex-img" v-if="pageUserInfo.sex == 1" <image
src="/static/images/icon-sex-boy.png" /> class="sex-img"
<image class="sex-img" v-if="pageUserInfo.sex == 0" v-if="pageUserInfo.sex == 1"
src="/static/images/icon-sex-girl.png" /> src="/static/images/icon-sex-boy.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 == 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> <text class="astro">{{ astro }}座</text>
</view> </view>
<view class="animal"> <view class="animal">
@ -68,13 +93,19 @@
<view class="bottom-wrapper"> <view class="bottom-wrapper">
<view class="bottom"> <view class="bottom">
<view @click="goMyFollows(pageUserInfo.id)" class="bottom-item"> <view
@click="goMyFollows(pageUserInfo.id)"
class="bottom-item"
>
<text class="item-num"> <text class="item-num">
{{ getGraceNumber(pageUserInfo.myFollowsCounts) }} {{ getGraceNumber(pageUserInfo.myFollowsCounts) }}
</text> </text>
<text class="item-text">关注</text> <text class="item-text">关注</text>
</view> </view>
<view class="bottom-item" @click="goMyFans(pageUserInfo.id)"> <view
class="bottom-item"
@click="goMyFans(pageUserInfo.id)"
>
<text class="item-num"> <text class="item-num">
{{ getGraceNumber(pageUserInfo.myFansCounts) }} {{ getGraceNumber(pageUserInfo.myFansCounts) }}
</text> </text>
@ -89,47 +120,97 @@
</view> </view>
<view class="edit"> <view class="edit">
<view @click="goMyInfo" class="edit-info"> <view
@click="goMyInfo"
class="edit-info"
>
<text class="edit-text">编辑资料</text> <text class="edit-text">编辑资料</text>
</view> </view>
<view @click="goSettings" class="setting"> <view
<image src="/static/images/icon-settings.png" class="setting-img" /> @click="goSettings"
class="setting"
>
<image
src="/static/images/more.png"
class="setting-img"
/>
</view> </view>
</view> </view>
</view> </view>
<view class="tab-wrapper"> <view class="tab-wrapper">
<view class="tab-item" @click="switchTab(0)"> <view
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 0 }"> class="tab-item"
@click="switchTab(0)"
>
<text
class="tab-normal"
:class="{ 'tab-selected': currentTab == 0 }"
>
作品 作品
</text> </text>
<view v-if="currentTab == 0" class="selected-tab"></view> <view
v-if="currentTab == 0"
class="selected-tab"
></view>
</view> </view>
<view class="tab-item" @click="switchTab(1)"> <view
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }"> class="tab-item"
私密 @click="switchTab(1)"
>
<text
class="tab-normal"
:class="{ 'tab-selected': currentTab == 1 }"
>
<!-- 私密 -->
</text> </text>
<view v-if="currentTab == 1" class="selected-tab"></view> <view
v-if="currentTab == 1"
class="selected-tab"
></view>
</view> </view>
<view class="tab-item" @click="switchTab(2)"> <view
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 2 }"> class="tab-item"
@click="switchTab(2)"
>
<text
class="tab-normal"
:class="{ 'tab-selected': currentTab == 2 }"
>
赞过 赞过
</text> </text>
<view v-if="currentTab == 2" class="selected-tab"></view> <view
v-if="currentTab == 2"
class="selected-tab"
></view>
</view> </view>
</view> </view>
<view class="vlog-list"> <view class="vlog-list">
<block v-for="(vlog, index) in vlogList" :key="index"> <block
<image class="vlog-cover" :src="vlog.cover||vlog.firstFrameImg" @click="goToVlog(vlog)" mode="aspectFill"></image> v-for="(vlog, index) in vlogList"
:key="index"
>
<image
class="vlog-cover"
:src="vlog.cover || vlog.firstFrameImg"
@click="goToVlog(vlog)"
mode="aspectFill"
></image>
</block> </block>
</view> </view>
<view v-if="vlogList.length == 0" class="empty"> <view
v-if="vlogList.length == 0"
class="empty"
>
<text class="empty-text">~ 空空如也 ~</text> <text class="empty-text">~ 空空如也 ~</text>
</view> </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> <text class="not-empty-text">~ 没有更多了 ~</text>
</view> </view>
</scroll-view> </scroll-view>
@ -137,58 +218,47 @@
</template> </template>
<script> <script>
let system = uni.getSystemInfoSync(); let system = uni.getSystemInfoSync();
import * as filters from "@/utils/filters.js" import * as filters from '@/utils/filters.js';
import api from "@/config/api.js"; import api from '@/config/api.js';
import storage from "@/utils/storage.js"; //缓存 import storage from '@/utils/storage.js'; //缓存
import { import { vlogUserInfo, vlogMyPublicList, vlogMyPrivateList, vlogMyLikedList, vlogMeTag } from '@/api/vlog';
vlogUserInfo,
vlogMyPublicList,
vlogMyPrivateList,
vlogMyLikedList,
vlogMeTag
} from "@/api/vlog"
import { import { getAstro, getAnimal, dateFormat, graceNumber } from '@/utils/tools.js';
getAstro,
getAnimal,
dateFormat,
graceNumber
} from '@/utils/tools.js'
export default { export default {
data() { data() {
return { return {
userIsLogin: false, userIsLogin: false,
pageUserInfo: { pageUserInfo: {
id: "", id: '',
mobile: "", mobile: '',
nickname: "", nickname: '',
imoocNum: "", imoocNum: '',
face: "", face: '',
birthday: "1998-12-31T16:00:00.000+0000", birthday: '1998-12-31T16:00:00.000+0000',
country: "", country: '',
province: "", province: '',
city: "", city: '',
district: "", district: '',
description: "", description: '',
myFollowsCounts: 0, myFollowsCounts: 0,
myFansCounts: 0, myFansCounts: 0,
totalLikeMeCounts: 0 totalLikeMeCounts: 0
}, // 用户信息 }, // 用户信息
userPageId: "", userPageId: '',
astro: "", // 星座 astro: '', // 星座
animal: "", // 生肖 animal: '', // 生肖
loginWords: "请登录", loginWords: '请登录',
screenHeight: 0, screenHeight: 0,
screenHeightUnLogin: 0, screenHeightUnLogin: 0,
currentTab: 0, currentTab: 0,
isAndroid: uni.getSystemInfoSync().platform == "android", isAndroid: uni.getSystemInfoSync().platform == 'android',
page: 0, page: 0,
toalPage: 0, toalPage: 0,
vlogList: [], vlogList: []
}; };
}, },
onLoad() { onLoad() {
@ -200,19 +270,19 @@
onShow() { onShow() {
let me = this; let me = this;
// 判断我有没有登录 // 判断我有没有登录
this.userIsLogin = filters.isLogin("auth"); this.userIsLogin = filters.isLogin('auth');
console.log(this.userIsLogin) console.log(this.userIsLogin);
if (this.userIsLogin) { if (this.userIsLogin) {
this.getUinfo() this.getUinfo();
} else { } else {
return return;
} }
}, },
onTabItemTap: (e) => { onTabItemTap: (e) => {
console.log(e) console.log(e);
if (!filters.isLogin("auth")) { if (!filters.isLogin('auth')) {
uni.navigateTo({ uni.navigateTo({
url: "/pages/passport/login?init=index" url: '/pages/passport/login?init=index'
}); });
} }
}, },
@ -222,16 +292,16 @@
let myUserId = myUserInfo.id; let myUserId = myUserInfo.id;
uni.showLoading({ uni.showLoading({
title: "正在加载!", title: '正在加载!'
}); });
var result = await vlogUserInfo(myUserId) var result = await vlogUserInfo(myUserId);
uni.hideLoading(); uni.hideLoading();
console.log(result) console.log(result);
if (result.data.status == 200) { if (result.data.status == 200) {
this.pageUserInfo = result.data.data; 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.myList(0, 'myPublicList', true);
this.setBasicUserInfo(this.pageUserInfo); this.setBasicUserInfo(this.pageUserInfo);
} }
@ -247,19 +317,19 @@
// } // }
// 根据生日判断星座 // 根据生日判断星座
let birthday = myUserInfo.birthday; let birthday = myUserInfo.birthday;
let birth = dateFormat("YYYY-mm-dd", new Date(birthday)); let birth = dateFormat('YYYY-MM-DD', new Date(birthday));
console.log(birth) console.log(birth);
let birthArr = birth.split("-"); let birthArr = birth.split('-');
let year = birthArr[0]; let year = birthArr[0];
let month = birthArr[1]; let month = birthArr[1];
let day = birthArr[2]; let day = birthArr[2];
let astro = getAstro(month, day); let astro = getAstro(month, day);
console.log(astro) console.log(astro);
this.astro = astro; this.astro = astro;
// 根据生日判断生肖 // 根据生日判断生肖
this.animal = getAnimal(year); this.animal = getAnimal(year);
console.log(this.animal) console.log(this.animal);
}, },
switchTab(index) { switchTab(index) {
this.currentTab = index; this.currentTab = index;
@ -278,7 +348,7 @@
} }
}, },
loadMore() { loadMore() {
let requestArr = ['myPublicList', 'myPrivateList', 'myLikedList'] let requestArr = ['myPublicList', 'myPrivateList', 'myLikedList'];
if (this.page >= this.toalPage) { if (this.page >= this.toalPage) {
return; return;
} else { } else {
@ -289,16 +359,16 @@
let me = this; let me = this;
page = page + 1; page = page + 1;
me.page = page; me.page = page;
var uinfo = storage.getVlogUserInfo() var uinfo = storage.getVlogUserInfo();
if (uinfo == null) return if (uinfo == null) return;
let userId = uinfo.id; 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) { if (result.data.status == 200) {
let vlogList = result.data.data.rows; let vlogList = result.data.data.rows;
console.log(vlogList) console.log(vlogList);
let toalPage = result.data.data.total; let toalPage = result.data.data.total;
if (init) { if (init) {
me.vlogList = vlogList me.vlogList = vlogList;
} else { } else {
me.vlogList = me.vlogList.concat(vlogList); me.vlogList = me.vlogList.concat(vlogList);
} }
@ -308,8 +378,8 @@
}, },
goLogin() { goLogin() {
uni.navigateTo({ uni.navigateTo({
url: "/pages/passport/login", url: '/pages/passport/login',
animationType: "slide-in-bottom", animationType: 'slide-in-bottom'
}); });
}, },
// 把超过1000或10000的数字调整, 比如1.3k/6.8w // 把超过1000或10000的数字调整, 比如1.3k/6.8w
@ -319,126 +389,126 @@
// 视频详情 // 视频详情
goToVlog(vlog) { goToVlog(vlog) {
let vlogId = vlog.id ? vlog.id : vlog.vlogId; let vlogId = vlog.id ? vlog.id : vlog.vlogId;
console.log(vlogId) console.log(vlogId);
uni.navigateTo({ uni.navigateTo({
url: "/pages/me/vlog?vlogId=" + vlogId, url: '/pages/me/vlog?vlogId=' + vlogId
}); });
}, },
// 修改背景图 // 修改背景图
changeMyBg() { changeMyBg() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "/pages/me/myBackImg", url: '/pages/me/myBackImg'
}); });
}, },
// 更换头像 // 更换头像
changeMyFace() { changeMyFace() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "myFace", url: 'myFace'
}); });
}, },
//编辑资料 //编辑资料
goMyInfo() { goMyInfo() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "myInfo", url: 'myInfo'
}); });
}, },
goSettings() { goSettings() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "settings", // url: 'settings'
url: '/pages/tabbar/user/my'
}); });
}, },
// 粉丝列表 // 粉丝列表
goMyFans(userId) { goMyFans(userId) {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "myFans", url: 'myFans'
}); });
}, },
// 关注列表 // 关注列表
goMyFollows(userId) { goMyFollows(userId) {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "myFollows", url: 'myFollows'
}); });
}, }
}, }
}; };
</script> </script>
<style> <style>
.mypage { .mypage {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #000000; background-color: #000000;
}
} .login-info {
.login-info {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
font-size: 36rpx; font-size: 36rpx;
font-weight: 600; font-weight: 600;
} }
.login-info-wrapper { .login-info-wrapper {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.mybg { .mybg {
width: 750rpx; width: 750rpx;
height: 750rpx; height: 750rpx;
box-shadow: inset 0 -150px 180px #313030; box-shadow: inset 0 -150px 180px #313030;
} }
.desc { .desc {
position: relative; position: relative;
top: -520rpx; top: -520rpx;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
margin: 0 30rpx; margin: 0 30rpx;
} }
.item-text { .item-text {
color: #ffffff; color: #ffffff;
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
align-items: center; align-items: center;
} }
.item-num { .item-num {
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
align-items: center; align-items: center;
} }
.bottom-item { .bottom-item {
margin-left: 30rpx; margin-left: 30rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.edit-text { .edit-text {
font-size: 13px; font-size: 13px;
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
align-items: center; align-items: center;
} }
.edit-info { .edit-info {
margin-left: 20rpx; margin-left: 20rpx;
border-width: 1px; border-width: 1px;
border-color: #ffffff; border-color: #ffffff;
@ -451,15 +521,15 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.setting-img { .setting-img {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
align-items: center; align-items: center;
} }
.setting { .setting {
margin-left: 20rpx; margin-left: 20rpx;
border-width: 1px; border-width: 1px;
border-color: #ffffff; border-color: #ffffff;
@ -472,84 +542,84 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.edit { .edit {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
margin-right: 30rpx; margin-right: 30rpx;
} }
.bottom { .bottom {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.bottom-wrapper { .bottom-wrapper {
position: relative; position: relative;
top: -510rpx; top: -510rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.my-face { .my-face {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border-radius: 100rpx; border-radius: 100rpx;
border-width: 1px; border-width: 1px;
border-color: #f1f1f1; border-color: #f1f1f1;
} }
.nickname { .nickname {
font-size: 20px; font-size: 20px;
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
} }
.tiktok-num { .tiktok-num {
font-size: 10px; font-size: 10px;
color: #ffffff; color: #ffffff;
font-weight: 300; font-weight: 300;
} }
.location-text { .location-text {
line-height: 20px; line-height: 20px;
color: #ffffff; color: #ffffff;
font-size: 10px; font-size: 10px;
font-weight: 300; font-weight: 300;
} }
.location { .location {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 20px; height: 20px;
margin-top: 2px; margin-top: 2px;
font-size: 1px; font-size: 1px;
} }
.tiktok-num-wrapper { .tiktok-num-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.sex-img { .sex-img {
width: 22rpx; width: 22rpx;
height: 22rpx; height: 22rpx;
align-items: center; align-items: center;
} }
.astro { .astro {
font-size: 10px; font-size: 10px;
color: #ffffff; color: #ffffff;
line-height: 20px; line-height: 20px;
font-weight: bold; font-weight: bold;
margin-left: 6rpx; margin-left: 6rpx;
align-items: center; align-items: center;
} }
.constellation { .constellation {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@ -559,17 +629,17 @@
width: 130rpx; width: 130rpx;
height: 40rpx; height: 40rpx;
border-radius: 10px; border-radius: 10px;
} }
.animal-text { .animal-text {
font-size: 10px; font-size: 10px;
color: #ffffff; color: #ffffff;
line-height: 20px; line-height: 20px;
font-weight: bold; font-weight: bold;
align-items: center; align-items: center;
} }
.animal { .animal {
margin-left: 10rpx; margin-left: 10rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -579,59 +649,59 @@
width: 60rpx; width: 60rpx;
height: 40rpx; height: 40rpx;
border-radius: 10px; border-radius: 10px;
} }
.sex-wrapper { .sex-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 10rpx; margin-top: 10rpx;
} }
.info-wrapper { .info-wrapper {
margin-left: 30rpx; margin-left: 30rpx;
padding-top: 20rpx; padding-top: 20rpx;
width: 500rpx; width: 500rpx;
} }
.my-info { .my-info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.my-info-wrapper { .my-info-wrapper {
position: relative; position: relative;
left: 30rpx; left: 30rpx;
top: -560rpx; top: -560rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 1000rpx; width: 1000rpx;
} }
.tab-normal { .tab-normal {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
align-items: center; align-items: center;
color: #808080; color: #808080;
} }
.tab-selected { .tab-selected {
color: #ffffff; color: #ffffff;
} }
.selected-tab { .selected-tab {
margin-top: 5px; margin-top: 5px;
height: 5rpx; height: 5rpx;
width: 250rpx; width: 250rpx;
border-radius: 6rpx; border-radius: 6rpx;
background-color: #ef274d; background-color: #ef274d;
} }
.tab-item { .tab-item {
width: 250rpx; width: 250rpx;
align-items: center; align-items: center;
} }
.tab-wrapper { .tab-wrapper {
position: relative; position: relative;
top: -480rpx; top: -480rpx;
height: 40px; height: 40px;
@ -642,16 +712,16 @@
padding-top: 3px; padding-top: 3px;
border-top-left-radius: 12px; border-top-left-radius: 12px;
border-top-right-radius: 12px; border-top-right-radius: 12px;
} }
.vlog-cover { .vlog-cover {
align-items: center; align-items: center;
width: 248rpx; width: 248rpx;
height: 360rpx; height: 360rpx;
border-width: 1rpx; border-width: 1rpx;
} }
.vlog-list { .vlog-list {
position: relative; position: relative;
top: -480rpx; top: -480rpx;
display: flex; display: flex;
@ -659,15 +729,15 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
background-color: #000000; background-color: #000000;
} }
.empty-text { .empty-text {
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
margin-top: 200rpx; margin-top: 200rpx;
} }
.empty { .empty {
background-color: #000000; background-color: #000000;
width: 750rpx; width: 750rpx;
height: 300rpx; height: 300rpx;
@ -676,21 +746,22 @@
justify-content: center; justify-content: center;
position: relative; position: relative;
top: -480rpx; top: -480rpx;
} }
.not-empty-text { .not-empty-text {
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
} }
.not-empty { .not-empty {
width: 750rpx; width: 750rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
position: relative; position: relative;
top: -260rpx; top: -260rpx;
} }
.isLogin-info-wrapper {} .isLogin-info-wrapper {
}
</style> </style>

50
pages/me/modifyBirthday.vue
View File

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

39
pages/me/modifyDesc.vue
View File

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

59
pages/me/modifyNickname.vue
View File

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

170
pages/me/myBackImg.nvue
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>

161
pages/me/myFans.nvue
View File

@ -1,76 +1,96 @@
<template> <template>
<view class="mpage"> <view class="mpage">
<view class="line"></view> <view class="line"></view>
<scroll-view scroll-y="true" @scrolltolower="pagingFansList()"> <scroll-view
<view class="user-wrapper" v-for="(f, index) in fansList" :key="f.fanId"> scroll-y="true"
<view class="user-info" @click="goTovlogerInfo(f.fanId)"> @scrolltolower="pagingFansList()"
<image class="face" :src="f.face" /> >
<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"> <text class="user-name">
{{ f.nickname }} {{ f.nickname }}
</text> </text>
</view> </view>
<view v-if="!from"> <view v-if="!from">
<view v-if="f.bothFriend==0" class="operator-wrapper"> <view
<text class="operator-words" style="color: #ef274d" @click="followMe(f.fanId)"> v-if="f.bothFriend == 0"
class="operator-wrapper"
>
<text
class="operator-words"
style="color: #ef274d"
@click="followMe(f.fanId)"
>
回粉 回粉
</text> </text>
</view> </view>
<view v-if="f.bothFriend==1" class="operator-wrapper"> <view
<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.fanId)"> v-if="f.bothFriend == 1"
class="operator-wrapper"
>
<text
class="operator-words"
style="color: #ffffff"
@click="cancelFollow(f.fanId)"
>
互粉 互粉
</text> </text>
</view> </view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
<script> <script>
let system = uni.getSystemInfoSync(); let system = uni.getSystemInfoSync();
import storage from "@/utils/storage.js"; //缓存 import storage from '@/utils/storage.js'; //缓存
import { import { vlogFansCancel, vlogFansFollow, vlogQueryMyFans } from '@/api/vlog';
vlogFansCancel, import { isStrEmpty } from '@/utils/tools.js';
vlogFansFollow, export default {
vlogQueryMyFans
} from "@/api/vlog"
import {
isStrEmpty
} from '@/utils/tools.js'
export default {
data() { data() {
return { return {
userId: "", userId: '',
screenHeight: 0, screenHeight: 0,
page: 0, page: 0,
totalPage: 0, totalPage: 0,
fansList: [], fansList: [],
from:false from: false
}; };
}, },
onLoad(param) { onLoad(param) {
if(!isStrEmpty(param.userId)){ if (!isStrEmpty(param.userId)) {
this.from = true this.from = true;
this.userId = param.userId this.userId = param.userId;
}else{ } else {
var uinfo = storage.getVlogUserInfo() var uinfo = storage.getVlogUserInfo();
this.userId = uinfo.id; this.userId = uinfo.id;
} }
this.queryMyFansList(0); this.queryMyFansList(0);
}, },
methods: { methods: {
goTovlogerInfo(vlogerId) { goTovlogerInfo(vlogerId) {
var id = storage.getVlogUserInfo().id var id = storage.getVlogUserInfo().id;
// 是否是当前登录的用户 // 是否是当前登录的用户
if (id == vlogerId) { if (id == vlogerId) {
uni.switchTab({ uni.switchTab({
url: "me", url: 'me'
}); });
} else { } else {
uni.navigateTo({ uni.navigateTo({
url: "vlogerInfo?userPageId=" + vlogerId, url: 'vlogerInfo?userPageId=' + vlogerId
}); });
} }
}, },
@ -89,20 +109,20 @@
}, },
async cancelFollow(vlogerId) { async cancelFollow(vlogerId) {
let me = this; let me = this;
let userId = me.userId let userId = me.userId;
let data = { let data = {
myId: userId, myId: userId,
vlogerId vlogerId
} };
var result = await vlogFansCancel(data) var result = await vlogFansCancel(data);
console.log(result) console.log(result);
if (result.data.status == 200) { if (result.data.status == 200) {
me.reFreshList(vlogerId, 0); me.reFreshList(vlogerId, 0);
} else { } else {
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000, duration: 3000
}); });
} }
}, },
@ -112,16 +132,16 @@
let data = { let data = {
myId: userId, myId: userId,
vlogerId vlogerId
} };
var result = await vlogFansFollow(data) var result = await vlogFansFollow(data);
console.log(result) console.log(result);
if (result.data.status == 200) { if (result.data.status == 200) {
me.reFreshList(vlogerId, 1); me.reFreshList(vlogerId, 1);
} else { } else {
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000, duration: 3000
}); });
} }
}, },
@ -131,14 +151,14 @@
let userId = me.userId; let userId = me.userId;
let currentUserId = this.currentUserId; let currentUserId = this.currentUserId;
var data = { var data = {
myId:userId, myId: userId,
// vlogerId: userId, // vlogerId: userId,
// currentUserId: currentUserId, // currentUserId: currentUserId,
page: page, page: page,
pageSize: 10 pageSize: 10
} };
var result = await vlogQueryMyFans(data) var result = await vlogQueryMyFans(data);
console.log(result) console.log(result);
if (result.data.status == 200) { if (result.data.status == 200) {
let fansList = result.data.data.rows; let fansList = result.data.data.rows;
let totalPage = result.data.data.total; let totalPage = result.data.data.total;
@ -154,54 +174,50 @@
return; return;
} }
this.queryMyFansList(this.page); this.queryMyFansList(this.page);
}, }
}, }
}; };
</script> </script>
<style scoped> <style scoped>
.user-info { .user-info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
}
} .face {
align-items: center;
.face {
align-self: center;
width: 110rpx; width: 110rpx;
height: 110rpx; height: 110rpx;
border-radius: 100rpx; border-radius: 100rpx;
border-width: 2rpx; border-width: 2rpx;
border-color: #f1f1f1; border-color: #f1f1f1;
} }
.user-name { .user-name {
align-self: center; align-items: center;
color: #ffffff; color: #ffffff;
font-size: 30rpx; font-size: 30rpx;
margin-left: 20rpx; margin-left: 20rpx;
} }
.line { .line {
height: 1rpx; height: 1rpx;
background-color: #393a41; background-color: #393a41;
width: 750rpx; width: 750rpx;
} }
.mpage { .mpage {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #181b27; background-color: #181b27;
}
.user-wrapper {
}
.user-wrapper {
padding-left: 30rpx; padding-left: 30rpx;
padding-right: 30rpx; padding-right: 30rpx;
width: 750rpx; width: 750rpx;
@ -212,11 +228,9 @@
align-items: center; align-items: center;
margin-top: 20rpx; margin-top: 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
}
.operator-wrapper {
}
.operator-wrapper {
width: 140rpx; width: 140rpx;
height: 60rpx; height: 60rpx;
display: flex; display: flex;
@ -228,11 +242,10 @@
border-width: 2rpx; border-width: 2rpx;
border-color: #ef274d; border-color: #ef274d;
background-color: #181b27; background-color: #181b27;
}
} .operator-words {
align-items: center;
.operator-words {
align-self: center;
font-size: 28rpx; font-size: 28rpx;
} }
</style> </style>

149
pages/me/myFollows.nvue
View File

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

134
pages/me/myInfo.vue
View File

@ -6,21 +6,29 @@
class="user-face" class="user-face"
mode="aspectFill" mode="aspectFill"
@click="changeMyFace" @click="changeMyFace"
:src="myInfo.face"></image> :src="myInfo.face"
></image>
</view> </view>
<view class="single-line-box"> <view class="single-line-box">
<text class="left-lable">昵称</text> <text class="left-lable">昵称</text>
<view class="right-part" @click="modifyNickname"> <view
class="right-part"
@click="modifyNickname"
>
<text class="right-content"> <text class="right-content">
{{ myInfo.nickname }} {{ myInfo.nickname }}
</text> </text>
<image <image
class="right-arrow" class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image> src="/static/images/icon-right-arrow2.png"
></image>
</view> </view>
</view> </view>
<view class="single-line-box" @click="modifyTiktokNum"> <view
class="single-line-box"
@click="modifyTiktokNum"
>
<text class="left-lable">视频号</text> <text class="left-lable">视频号</text>
<view class="right-part"> <view class="right-part">
<text class="right-content"> <text class="right-content">
@ -28,60 +36,91 @@
</text> </text>
<image <image
class="right-arrow" class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image> src="/static/images/icon-right-arrow2.png"
></image>
</view> </view>
</view> </view>
<view class="single-line-box"> <view class="single-line-box">
<text class="left-lable">性别</text> <text class="left-lable">性别</text>
<view class="right-part" @click="modifySex"> <view
<text v-if="myInfo.sex == 1" class="right-content">男</text> class="right-part"
<text v-else-if="myInfo.sex == 0" class="right-content">女</text> @click="modifySex"
<text v-else class="right-content">保密</text> >
<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 <image
class="right-arrow" class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image> src="/static/images/icon-right-arrow2.png"
></image>
</view> </view>
</view> </view>
<view class="single-line-box"> <view class="single-line-box">
<text class="left-lable">生日</text> <text class="left-lable">生日</text>
<view class="right-part" @click="modifyBirthday"> <view
class="right-part"
@click="modifyBirthday"
>
<text class="right-content"> <text class="right-content">
{{ getGraceDateStr(new Date(myInfo.birthday)) }} {{ getGraceDateStr(new Date(myInfo.birthday)) }}
</text> </text>
<image <image
class="right-arrow" class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image> src="/static/images/icon-right-arrow2.png"
></image>
</view> </view>
</view> </view>
<view class="single-line-box"> <view class="single-line-box">
<text class="left-lable">所在地</text> <text class="left-lable">所在地</text>
<view class="right-part" @click="modifyLocation"> <view
class="right-part"
@click="modifyLocation"
>
<text class="right-content"> <text class="right-content">
{{ myInfo.province == myInfo.city ? "" : myInfo.province + "·" {{ myInfo.province == myInfo.city ? '' : myInfo.province + '·' }}{{ myInfo.city == '' ? '' : myInfo.city
}}{{ myInfo.city == "" ? "" : myInfo.city }}{{ myInfo.district == '' ? '' : '·' + myInfo.district }}
}}{{ myInfo.district == "" ? "" : "·" + myInfo.district }}
</text> </text>
<image <image
class="right-arrow" class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image> src="/static/images/icon-right-arrow2.png"
></image>
</view> </view>
</view> </view>
<view class="single-line-box"> <view class="single-line-box">
<text class="left-lable">简介</text> <text class="left-lable">简介</text>
<view class="right-part" @click="modifyDescription"> <view
class="right-part"
@click="modifyDescription"
>
<text class="right-content"> <text class="right-content">
{{ myInfo.description }} {{ myInfo.description }}
</text> </text>
<image <image
class="right-arrow" class="right-arrow"
src="/static/images/icon-right-arrow2.png"></image> src="/static/images/icon-right-arrow2.png"
></image>
</view> </view>
</view> </view>
<!-- <view class="single-line-box"> <!-- <view class="single-line-box">
<text class="left-lable">修改密码</text> <text class="left-lable">修改密码</text>
<view class="right-part" @click="modifyPassword"> <view class="right-part" @click="modifyPassword">
<text class="right-content">我猜你忘记密码了~</text> <text class="right-content">我猜你忘记密码了~</text>
@ -94,94 +133,91 @@
</template> </template>
<script> <script>
import storage from "@/utils/storage.js"; //缓存 import storage from '@/utils/storage.js'; //缓存
import api from "@/config/api.js"; import api from '@/config/api.js';
import { import { isStrEmpty, dateFormat } from '@/utils/tools.js';
isStrEmpty,
dateFormat
} from '@/utils/tools.js'
export default { export default {
data() { data() {
return { return {
myInfo: {}, myInfo: {}
}; };
}, },
onShow() { onShow() {
let myInfo = storage.getVlogUserInfo() let myInfo = storage.getVlogUserInfo();
if (isStrEmpty(myInfo.face)) { if (isStrEmpty(myInfo.face)) {
// 没头像给一个默认的 // 没头像给一个默认的
myInfo.face = ""; myInfo.face = '';
} }
this.myInfo = myInfo; this.myInfo = myInfo;
}, },
methods: { methods: {
getGraceDateStr(date) { getGraceDateStr(date) {
return dateFormat("YYYY-mm-dd", date); return dateFormat('YYYY-MM-DD', date);
}, },
// 更换头像 // 更换头像
changeMyFace() { changeMyFace() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "myFace", url: 'myFace'
}); });
}, },
// 修改昵称 // 修改昵称
modifyNickname() { modifyNickname() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyNickname", url: 'modifyNickname'
}); });
}, },
// 修改慕课号 // 修改id号
modifyTiktokNum() { modifyTiktokNum() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyTioktokNum", url: 'modifyTioktokNum'
}); });
}, },
// 修改性别 // 修改性别
modifySex() { modifySex() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifySex", url: 'modifySex'
}); });
}, },
// 修改生日 // 修改生日
modifyBirthday() { modifyBirthday() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyBirthday", url: 'modifyBirthday'
}); });
}, },
// 修改所在地 // 修改所在地
modifyLocation() { modifyLocation() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyLocation", url: 'modifyLocation'
}); });
}, },
// 修改简介 // 修改简介
modifyDescription() { modifyDescription() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyDesc", url: 'modifyDesc'
}); });
}, },
// 修改密码 // 修改密码
modifyPassword() { modifyPassword() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyPass", url: 'modifyPass'
}); });
}, }
}, }
}; };
</script> </script>

1282
pages/me/vlog.nvue Executable file → Normal file
View 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>

577
pages/me/vlogerInfo.nvue
View File

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

2
pages/publish/publish.nvue
View File

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

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

@ -4,6 +4,7 @@
:id="pageId" :id="pageId"
> >
<swiper <swiper
:disable-touch="!canSwipe"
ref="swiper1" ref="swiper1"
id="tab-bar-view" id="tab-bar-view"
style="my-swiper" style="my-swiper"
@ -15,61 +16,21 @@
@onAnimationEnd="animationfinish" @onAnimationEnd="animationfinish"
> >
<swiper-item> <swiper-item>
<video-local <video-local ref="videoLocal"></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>
<swiper-item> <swiper-item>
<view <!-- <view
v-if="myUserInfo == null" v-if="myUserInfo == null"
ref="videoFollowComp" ref="videoFollowComp"
class="my-follow" class="my-follow"
:style="{ height: screenHeight + 'px' }" :style="{ height: screenHeight + 'px' }"
> >
<text class="warn-info">请登录后查看！</text> <text class="warn-info">请登录后查看！</text>
</view> </view> -->
<video-follow-comp <video-follow-comp ref="videoFollowComp"></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>
<swiper-item> <swiper-item>
<video-comp <video-comp ref="videoComp"></video-comp>
ref="videoComp"
:pid="3"
:parentId="pageId"
:screenHeight="screenHeight"
:progressFlag="isDraw_tj"
:playStatus="playStatus"
:videoList="videoList"
:refreshList="refreshList"
:pagingList="pagingList"
@showLoading="showLoading"
@hideLoading="hideLoading"
@displayVideoPaging="displayVideoPaging"
></video-comp>
</swiper-item> </swiper-item>
</swiper> </swiper>
@ -159,9 +120,10 @@ const TAB_PRELOAD_OFFSET = 1;
import storage from '@/utils/storage.js'; //缓存 import storage from '@/utils/storage.js'; //缓存
import { vlogList } from '@/api/vlog'; import { vlogList } from '@/api/vlog';
import { isStrEmpty } from '@/utils/tools.js'; import { isStrEmpty } from '@/utils/tools.js';
import videoComp from '@/components/vlog/videoComp'; // import videoComp from '@/components/vlog/videoComp';
import videoLocal from '@/components/vlog/videoLocal'; import videoComp from '@/components/vlog/tuijian.nvue';
import videoFollowComp from '@/components/vlog/videoFollowComp'; import videoLocal from '@/components/vlog/local.nvue';
import videoFollowComp from '@/components/vlog/guanzhu.nvue';
import config from '@/config/config'; import config from '@/config/config';
export default { export default {
@ -172,6 +134,8 @@ export default {
}, },
data() { data() {
return { return {
channel: null,
canSwipe: true,
isTap: false, isTap: false,
isLoading: false, isLoading: false,
statusBarHeight: system.statusBarHeight, statusBarHeight: system.statusBarHeight,
@ -215,7 +179,19 @@ export default {
isDraw_gz: false 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() { onReady() {
this._lastTabIndex = 0; this._lastTabIndex = 0;
this.swiperWidth = 0; this.swiperWidth = 0;
@ -228,71 +204,37 @@ export default {
clearTimeout(timer); clearTimeout(timer);
}, 300); }, 300);
}, },
onTabItemTap: function (e) { onTabItemTap(e) {
// console.log(e); // 点击tab菜单
// let tabIndex = e.index; console.log(e);
// this.playStatus = tabIndex === 0 ? true : false; let tabIndex = e.index;
// 切换视频要做暂停或播放的判断 if (tabIndex == 0) {
let me = this; var prop = this.pageList[this.curIndex];
let curIndex = me.curIndex; this.$refs[prop].showVd();
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() { onShow() {
var prop = this.pageList[this.curIndex];
this.getLocation(); this.getLocation();
let me = this; this.myUserInfo = storage.getVlogUserInfo();
me.myUserInfo = storage.getVlogUserInfo(); if (storage.getRefreshVlogIndex() == '1') {
if (uni.getStorageSync('refreshVlogIndex') == '1') { // 登录后需要刷新数据
storage.setRefreshVlogIndex('0'); //不需要刷新 for (var i = 0; i < this.pageList.length; i++) {
this.$refs.videoComp.displayVideoPaging(1, true); this.$refs[i].dataList = []; //所有数据清空
this.$refs.videoFollowComp.displayVideoPaging(1, true);
this.$refs.videoLocal.displayVideoPaging(1, true);
} }
this.$refs[prop].get(); //只初始化当前所在位置的数据
// 如果当前没有list, 则relaunch storage.setRefreshVlogIndex('0'); //初始完数据修改状态不需要刷新
if (this.$refs.videoComp != undefined) { } else {
let playerList = this.$refs.videoComp.playerList; try {
if (playerList != undefined && playerList.length == 0) { this.$refs[prop].showVd();
this.$refs.videoComp.displayVideoPaging(1, true); } catch {}
}
}
if (me.curIndex == 0) {
me.playLocalStatus = true;
}
if (me.curIndex == 1) {
me.playFollowStatus = true;
}
if (me.curIndex == 2) {
me.playStatus = true;
} }
}, },
onHide() { onHide() {
var me = this; var prop = this.pageList[this.curIndex];
// 显示和隐藏，需要判断根据不同tab做暂停或者隐藏 try {
if (me.curIndex == 0) { this.$refs[prop].hideVd();
me.playLocalStatus = false; } catch {}
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;
}
}, },
// 当前页下拉刷新 // 当前页下拉刷新
@ -340,24 +282,24 @@ export default {
}, 300); }, 300);
} }
}); });
},
fail: (err) => {
console.log(err);
storage.setCityCode('');
uni.showToast({
icon: 'none',
title: '位置信息解析失败'
});
} }
}); });
}, },
fail: (err) => { fail: (err) => {
console.log(err); console.log(err);
storage.setCityCode('');
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '获取位置信息失败' title: '获取位置信息失败'
}); });
// uni.showModal({
// title:'提示',
// content:'获取位置信息失败',
// showCancel:false,
// success: (res) => {
// if(res.confirm){
// }
// }
// })
} }
}); });
}, },
@ -423,16 +365,6 @@ export default {
}, },
onswiperscroll(e) { 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 offsetX = e.detail.dx;
var preloadIndex = this._lastTabIndex; var preloadIndex = this._lastTabIndex;
if (offsetX > TAB_PRELOAD_OFFSET) { if (offsetX > TAB_PRELOAD_OFFSET) {
@ -449,21 +381,8 @@ export default {
} }
// 切换失败 // 切换失败
if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) { 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; return;
} }
// console.log(this.tabListSize)
var percentage = Math.abs(this.swiperWidth / offsetX); var percentage = Math.abs(this.swiperWidth / offsetX);
var currentSize = this.tabListSize[this._lastTabIndex]; var currentSize = this.tabListSize[this._lastTabIndex];
var preloadSize = this.tabListSize[preloadIndex]; var preloadSize = this.tabListSize[preloadIndex];
@ -475,6 +394,23 @@ export default {
let index = e.detail.current; let index = e.detail.current;
console.log('当前索引' + index); console.log('当前索引' + index);
console.log('之前的索引' + this._lastTabIndex); 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; this._lastTabIndex = index;
if (this._touchTabIndex === index) { if (this._touchTabIndex === index) {
this.isTap = false; this.isTap = false;
@ -483,13 +419,6 @@ export default {
if (!this.tabListSize[index]) { if (!this.tabListSize[index]) {
return; return;
} else { } 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); this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width);
} }
}, },
@ -503,45 +432,10 @@ export default {
if (this.tabIndex === index) { if (this.tabIndex === index) {
return; 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.tabIndex = index;
this.curIndex = index; this.curIndex = index;
this.scrollTabTo(index); this.scrollTabTo(index);
this.scrollInto = this.tabList[index].id; 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) { scrollTabTo(index) {
console.log(index); console.log(index);
@ -566,12 +460,6 @@ export default {
var current = e.detail.current; var current = e.detail.current;
this.curIndex = current; this.curIndex = current;
this.tabIndex = 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的字样显示 // 下拉刷新，改变head的字样显示
@ -580,9 +468,6 @@ export default {
}, },
hideLoading() { hideLoading() {
this.isLoading = false; this.isLoading = false;
},
letFollowVideoPause() {
this.playFollowStatus = false;
} }
} }
}; };

771
pages/tabbar/vlog/index_old.nvue Normal file
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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/douyin/atuser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/douyin/biaoqing-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/douyin/biaoqing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
static/douyin/cuowu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/douyin/jianpan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/douyin/shangyi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
static/douyin/time.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
static/douyin/xianxing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
static/douyin/zfxsc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
static/img/index/aixining.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
static/img/index/liaotian-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/img/index/share-fill.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/img/index/voiceclose.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
static/img/index/voiceopen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

4
uni_modules/TencentCloud-Push/utssdk/app-android/config.json
View File

@ -11,7 +11,9 @@
"com.tencent.timpush:xiaomi:8.5.6864", "com.tencent.timpush:xiaomi:8.5.6864",
"com.tencent.timpush:oppo:8.5.6864", "com.tencent.timpush:oppo:8.5.6864",
"com.tencent.timpush:meizu: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": { "project": {
"plugins": [ "plugins": [

467
uni_modules/uni-popup/components/uni-popup-comments/uni-popup-comments.vue
View File

@ -1,11 +1,11 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.uni-popup-share { .uni-popup-share {
background-color: #181717; background-color: #181717;
border-top-left-radius: 16rpx; border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx; border-top-right-radius: 16rpx;
} }
.uni-share-title { .uni-share-title {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
@ -13,15 +13,15 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 40px; height: 40px;
} }
.uni-share-title-text { .uni-share-title-text {
font-size: 12px; font-size: 12px;
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
} }
.uni-share-content { .uni-share-content {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
@ -29,18 +29,18 @@
flex-direction: column; flex-direction: column;
// justify-content: center; // justify-content: center;
// padding-top: 10px; // padding-top: 10px;
} }
.uni-share-content-box { .uni-share-content-box {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
width: 360px; width: 360px;
} }
.uni-share-content-item { .uni-share-content-item {
width: 90px; width: 90px;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
@ -49,137 +49,137 @@
justify-content: center; justify-content: center;
padding: 10px 0; padding: 10px 0;
align-items: center; align-items: center;
} }
.uni-share-content-item:active { .uni-share-content-item:active {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.uni-share-image { .uni-share-image {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.uni-share-text { .uni-share-text {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
color: #3B4144; color: #3b4144;
} }
.uni-share-button-box { .uni-share-button-box {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
padding: 10px 15px; padding: 10px 15px;
} }
.uni-share-button { .uni-share-button {
flex: 1; flex: 1;
border-radius: 50px; border-radius: 50px;
color: #666; color: #666;
font-size: 16px; font-size: 16px;
} }
.uni-share-button::after { .uni-share-button::after {
border-radius: 50px; border-radius: 50px;
} }
.icon-close-left { .icon-close-left {
width: 20rpx; width: 20rpx;
height: 20rpx; height: 20rpx;
margin-left: 30rpx; margin-left: 30rpx;
opacity: 0; opacity: 0;
} }
.icon-close-right { .icon-close-right {
width: 22rpx; width: 22rpx;
height: 22rpx; height: 22rpx;
margin-right: 30rpx; margin-right: 30rpx;
} }
.comment-wrapper { .comment-wrapper {
// height: 40px; // height: 40px;
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
} }
.commentWrapperBlack { .commentWrapperBlack {
background-color: #0e0d0d; background-color: #0e0d0d;
} }
.commentWrapperWhite { .commentWrapperWhite {
background-color: #ffffff; background-color: #ffffff;
} }
.comment-box { .comment-box {
font-size: 15px; font-size: 15px;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
padding: 0 18px 0 18px; padding: 0 18px 0 18px;
} }
.commentBoxBlack { .commentBoxBlack {
color: #FFFFFF; color: #ffffff;
background-color: #151515; background-color: #151515;
} }
.commentBoxWhite { .commentBoxWhite {
color: #000000; color: #000000;
background-color: #f2f2f5; background-color: #f2f2f5;
} }
.comment-box-placeholder { .comment-box-placeholder {
font-size: 15px; font-size: 15px;
} }
.icon-comment { .icon-comment {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.all-comments { .all-comments {
height: 800rpx; height: 800rpx;
// padding: 16rpx 30rpx; // padding: 16rpx 30rpx;
} }
.img-face { .img-face {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
border-radius: 100rpx; border-radius: 100rpx;
} }
.like-or-not { .like-or-not {
margin-top: 16px; margin-top: 16px;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
} }
.comments-wrapper { .comments-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.comments-wrapper-sub-up { .comments-wrapper-sub-up {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.comments-wrapper-sub-down { .comments-wrapper-sub-down {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 2px; margin-top: 2px;
} }
.vlogger-wrapper { .vlogger-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.tag-writer { .tag-writer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -188,140 +188,187 @@
width: 30px; width: 30px;
height: 16px; height: 16px;
margin-left: 2px; margin-left: 2px;
} }
.writer-words { .writer-words {
font-size: 26rpx; font-size: 26rpx;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
} }
.single-comment-box { .single-comment-box {
background-color: #181717; background-color: #181717;
} }
.single-comment-box-touched { .single-comment-box-touched {
background-color: #202020; background-color: #202020;
} }
.active { .active {
background-color: #202020; background-color: #202020;
} }
</style> </style>
<template> <template>
<view class="uni-popup-share"> <view class="uni-popup-share">
<view class="uni-share-title"> <view class="uni-share-title">
<image src="/static/images/icon-close.png" class="icon-close-left"></image> <image
<text class="uni-share-title-text">{{getGraceNumber(thisVlogTotalComentCounts)}}条评论</text> src="/static/images/icon-close.png"
<image src="/static/images/icon-close.png" class="icon-close-right" @click="close"></image> 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>
</view> </view>
<view class="uni-share-content"> <view class="uni-share-content">
<!-- <view class="uni-share-content-box"> --> <!-- <view class="uni-share-content-box"> -->
<view class="" style="height: 800rpx;"> <view
<scroll-view class="all-comments" :style="{width: screenWidth + 'px'}" scroll-y="true" class=""
lower-threshold="150" @scrolltolower="loadMore" :scroll-top="scrollTop"> style="height: 800rpx"
<view v-for="(commentContent, index) in commentList" :key="index" :data-index="index" >
:class="{active : index == activeIndex}" @touchstart="touchstartComment(index)" <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()" @touchend="touchendComment()"
@longpress="deleteComment(commentContent.commentUserId, commentContent.commentId)"> @longpress="deleteComment(commentContent.commentUserId, commentContent.commentId)"
<view class="comments-wrapper" >
style="margin-left: 16rpx;margin-top: 16rpx;margin-right: 16rpx;"> <view
class="comments-wrapper"
style="margin-left: 16rpx; margin-top: 16rpx; margin-right: 16rpx"
>
<view class="comments-wrapper-sub-up"> <view class="comments-wrapper-sub-up">
<view class="vlogger-wrapper"> <view class="vlogger-wrapper">
<image :src="commentContent.commentUserFace" class="img-face"></image> <image
<view style="margin-left: 10px;width: 456rpx;"> :src="commentContent.commentUserFace"
<view style="display: flex;flex-direction: row;"> 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 <text
style="font-size: 30rpx;color: #878585;align-self: center;">{{commentContent.commentUserNickname}}</text> class="writer-words"
<view v-if="commentContent.vlogerId == thisVlogerId" class="tag-writer" style="align-self: center"
style="align-self: center;"> >
<text class="writer-words" style="align-self: center;">作者</text> 作者
</text>
</view> </view>
<image <image
v-if="commentContent.replyedUserNickname != null && commentContent.replyedUserNickname != ''" v-if="commentContent.replyedUserNickname != null && commentContent.replyedUserNickname != ''"
src="/static/images/icon-right-arrow3.png" class="" src="/static/images/icon-right-arrow3.png"
style="opacity: 0.8;width: 40rpx;height: 40rpx;margin-left: 16rpx;margin-right: 10rpx;align-self: center;"> class=""
</image> style="opacity: 0.8; width: 40rpx; height: 40rpx; margin-left: 16rpx; margin-right: 10rpx; align-self: center"
></image>
<text <text
v-if="commentContent.replyedUserNickname != null && commentContent.replyedUserNickname != ''" 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> </view>
<text <text style="font-size: 32rpx; color: #ffffff; margin-top: 2px">{{ commentContent.content }}</text>
style="font-size: 32rpx;color: #FFFFFF;margin-top: 2px;">{{commentContent.content}}</text>
</view> </view>
</view> </view>
<view style="display: flex;flex-direction: column;width: 26px;"> <view style="display: flex; flex-direction: column; width: 26px">
<image v-if="commentContent.isLike == 1" src="/static/images/icon-comment-like.png" <image
class="like-or-not" style="align-self: center;" v-if="commentContent.isLike == 1"
@click="unlike(commentContent.commentUserId, commentContent.commentId, index)"> src="/static/images/icon-comment-like.png"
</image> class="like-or-not"
<image v-if="commentContent.isLike == 0" style="align-self: center"
src="/static/images/icon-comment-unlike.png" class="like-or-not" @click="unlike(commentContent.commentUserId, commentContent.commentId, index)"
style="align-self: center;" ></image>
@click="like(commentContent.commentUserId, commentContent.commentId, index)"> <image
</image> v-if="commentContent.isLike == 0"
<text src="/static/images/icon-comment-unlike.png"
style="font-size: 22rpx;color: #878585;align-self: center;">{{commentContent.likeCounts}}</text> 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> </view>
<view class="comments-wrapper-sub-down"> <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 <text
style="font-size: 30rpx;color: #878585;margin-left: 10px;">{{getGraceDateBeforeNow(commentContent.createTime)}}</text> style="font-size: 30rpx; color: #878585; margin-left: 20px"
<text style="font-size: 30rpx;color: #878585;margin-left: 20px;" @click="replyComment(commentContent.commentId, commentContent.commentUserNickname)"
@click="replyComment(commentContent.commentId, commentContent.commentUserNickname)">回复</text> >
回复
</text>
</view> </view>
</view> </view>
</view> </view>
<!-- TODO: 判断总评论数和当前list中数量是否一致，如果一致，则显然如下 --> <!-- TODO: 判断总评论数和当前list中数量是否一致，如果一致，则显然如下 -->
<view <view style="display: flex; flex-direction: row; justify-content: center; margin-top: 50rpx; height: 100rpx">
style="display: flex;flex-direction: row;justify-content: center;margin-top: 50rpx;height: 100rpx;"> <text style="color: #444446; font-size: 13px">{{ bottomTxt }}</text>
<text style="color: #444446;font-size: 13px;">{{bottomTxt}}</text>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<!-- 评论输入框 --> <!-- 评论输入框 -->
<view class="comment-wrapper" v-if="isLogin" <view
:class="{commentWrapperBlack: commentWrapperBlack, commentWrapperWhite: commentWrapperWhite}"> class="comment-wrapper"
<input class="comment-box" :class="{commentBoxBlack: commentBoxBlack, commentBoxWhite: commentBoxWhite}" v-if="isLogin"
placeholder-class="comment-box-placeholder" :style="{width: screenWidth-70 + 'px'}" :class="{ commentWrapperBlack: commentWrapperBlack, commentWrapperWhite: commentWrapperWhite }"
:placeholder="placeholder" cursor-spacing="10px" v-model="currentComment" confirm-type="done" >
:focus="commentFocus" @focus="typingComment" @blur="noTypingComment"> <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" --> <!-- @confirm="doCommentPublish" -->
<view style="display: flex;flex-direction: column;justify-content: center;"> <view style="display: flex; flex-direction: column; justify-content: center">
<image src="/static/images/icon-comment.png" class="icon-comment" @click="doCommentPublish()"> <image
</image> src="/static/images/icon-comment.png"
class="icon-comment"
@click="doCommentPublish()"
></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import storage from "@/utils/storage.js"; //缓存 import storage from '@/utils/storage.js'; //缓存
import { import { vlogCommentCounts, vlogCommentUnLike, vlogCommentLike, vlogCommentDelete, vlogCommentList, vlogCommentCreate } from '@/api/vlog';
vlogCommentCounts, import { dateFormat, graceNumber, getDateBeforeNow } from '@/utils/tools.js';
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 { export default {
name: 'UniPopupShare', name: 'UniPopupShare',
mixins: [popup], mixins: [popup],
emits: ['select'], emits: ['select'],
@ -341,7 +388,7 @@
thisVlogId: { thisVlogId: {
type: String, type: String,
default: '' default: ''
}, }
}, },
data() { data() {
return { return {
@ -355,7 +402,7 @@
// commentBoxBlack: false, // commentBoxBlack: false,
// commentBoxWhite: true, // commentBoxWhite: true,
screenWidth: uni.getSystemInfoSync().screenWidth, screenWidth: uni.getSystemInfoSync().screenWidth,
currentComment: "", currentComment: '',
scrollTop: 0, scrollTop: 0,
old: { old: {
scrollTop: 0 scrollTop: 0
@ -364,31 +411,29 @@
// commentTouched: false, // commentTouched: false,
activeIndex: -1, activeIndex: -1,
bottomTxt: "到底了哦~", bottomTxt: '到底了哦~',
placeholder: "快发条评论吧~", placeholder: '快发条评论吧~',
commentFocus: false, commentFocus: false,
thisFatherCommentId: "0", // 用于标识当前的回复是否有父id，还是仅仅只是普通评论 thisFatherCommentId: '0', // 用于标识当前的回复是否有父id，还是仅仅只是普通评论
thisVlogTotalComentCounts: 0, thisVlogTotalComentCounts: 0,
loginUserId: "", loginUserId: '',
page: 0, page: 0,
totalPage: 0, totalPage: 0,
commentCounts: 88, commentCounts: 88,
commentList: [], commentList: []
} };
},
onShow() {
}, },
onShow() {},
created() { created() {
var me = this; var me = this;
var myUserInfo = storage.getVlogUserInfo() var myUserInfo = storage.getVlogUserInfo();
var userId = ""; var userId = '';
if (myUserInfo != null) { if (myUserInfo != null) {
userId = myUserInfo.id; userId = myUserInfo.id;
this.isLogin = true this.isLogin = true;
} else { } else {
this.isLogin = false this.isLogin = false;
} }
me.loginUserId = userId; me.loginUserId = userId;
@ -401,29 +446,41 @@
var me = this; var me = this;
var vlogId = me.thisVlogId; var vlogId = me.thisVlogId;
var result = await vlogCommentCounts(vlogId) var result = await vlogCommentCounts(vlogId);
if (result.data.status == 200) { if (result.data.status == 200) {
me.thisVlogTotalComentCounts = result.data.data; me.thisVlogTotalComentCounts = result.data.data;
} else { } else {
me.thisVlogTotalComentCounts = 0; me.thisVlogTotalComentCounts = 0;
} }
if (me.thisVlogTotalComentCounts == 0) { if (me.thisVlogTotalComentCounts == 0) {
me.bottomTxt = "抢一个沙发吧~"; me.bottomTxt = '抢一个沙发吧~';
} else { } else {
me.bottomTxt = "到底了哦~"; me.bottomTxt = '到底了哦~';
} }
}, },
async unlike(commentUserId, commentId, index) { async unlike(commentUserId, commentId, index) {
var me = this; 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) { if (result.data.status == 200) {
me.reLikeCommentList(index, 0); me.reLikeCommentList(index, 0);
me.reCountsCommentList(index, -1); me.reCountsCommentList(index, -1);
} else { } else {
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000 duration: 3000
}); });
} }
@ -437,19 +494,19 @@
animation: false animation: false
}); });
uni.navigateTo({ uni.navigateTo({
url: "/pages/passport/login", url: '/pages/passport/login',
animationType: "slide-in-bottom", animationType: 'slide-in-bottom'
}); });
return; return;
} }
var result = await vlogCommentLike(me.loginUserId, commentId) var result = await vlogCommentLike(me.loginUserId, commentId);
if (result.data.status == 200) { if (result.data.status == 200) {
me.reLikeCommentList(index, 1); me.reLikeCommentList(index, 1);
me.reCountsCommentList(index, 1); me.reCountsCommentList(index, 1);
} else { } else {
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000 duration: 3000
}); });
} }
@ -488,13 +545,13 @@
content: '确认删除评论吗？', content: '确认删除评论吗？',
success: async (res) => { success: async (res) => {
if (res.confirm) { if (res.confirm) {
var result = await vlogCommentDelete(vlogId, commentUserId, commentId) var result = await vlogCommentDelete(vlogId, commentUserId, commentId);
if (result.data.status == 200) { if (result.data.status == 200) {
me.doCommentPagingList(1, true); me.doCommentPagingList(1, true);
} else { } else {
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000 duration: 3000
}); });
} }
@ -502,7 +559,6 @@
} }
} }
}); });
}, },
loadMore() { loadMore() {
if (this.page == this.totalPage) { if (this.page == this.totalPage) {
@ -512,31 +568,29 @@
}, },
// 分页查询评论列表 // 分页查询评论列表
async doCommentPagingList(page, needClearList) { async doCommentPagingList(page, needClearList) {
// 查询首页短视频列表
var me = this; var me = this;
me.page = page; me.page = page;
var vlogId = me.thisVlogId; 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) { if (result.data.status == 200) {
var commentList = result.data.data.rows; var commentList = result.data.data.rows;
console.log(commentList);
var totalPage = result.data.data.total; var totalPage = result.data.data.total;
if (needClearList) { if (needClearList) {
me.commentList = []; me.commentList = [];
} }
me.commentList = me.commentList.concat(commentList); me.commentList = me.commentList.concat(commentList);
me.totalPage = totalPage; me.totalPage = totalPage;
} else { } else {
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000 duration: 3000
}); });
} }
}, },
// 获得焦点，改变底部文本框颜色 // 获得焦点，改变底部文本框颜色
typingComment() { typingComment() {
this.commentWrapperBlack = false; this.commentWrapperBlack = false;
@ -553,70 +607,66 @@
this.commentBoxBlack = true; this.commentBoxBlack = true;
this.commentBoxWhite = false; this.commentBoxWhite = false;
this.thisFatherCommentId = "0"; // 恢复默认的回复fatherId为“0” this.thisFatherCommentId = '0'; // 恢复默认的回复fatherId为“0”
this.commentFocus = false; this.commentFocus = false;
this.placeholder = "爱评论的人都是天使~"; this.placeholder = '爱评论的人都是天使~';
}, },
// 回复他人的评论 // 回复他人的评论
replyComment(commentId, commentUserNickname) { replyComment(commentId, commentUserNickname) {
var me = this; var me = this;
var myUserInfo = storage.getVlogUserInfo() var myUserInfo = storage.getVlogUserInfo();
if (myUserInfo == null) { if (myUserInfo == null) {
uni.showTabBar({ uni.showTabBar({
animation: false animation: false
}); });
uni.navigateTo({ uni.navigateTo({
url: "/pages/passport/login", url: '/pages/passport/login',
animationType: "slide-in-bottom", animationType: 'slide-in-bottom'
}); });
return; return;
} }
this.thisFatherCommentId = commentId; this.thisFatherCommentId = commentId;
this.commentFocus = true; this.commentFocus = true;
this.placeholder = "回复 @" + commentUserNickname; this.placeholder = '回复 @' + commentUserNickname;
// this.typingComment(); // this.typingComment();
}, },
// 发布留言 // 发布留言
async doCommentPublish() { async doCommentPublish() {
console.log('发表评论') console.log('发表评论');
var me = this; var me = this;
var myUserInfo = storage.getVlogUserInfo();
var myUserInfo = storage.getVlogUserInfo()
if (myUserInfo == null) { if (myUserInfo == null) {
uni.showTabBar({ uni.showTabBar({
animation: false animation: false
}); });
uni.navigateTo({ uni.navigateTo({
url: "/pages/passport/login", url: '/pages/passport/login',
animationType: "slide-in-bottom", animationType: 'slide-in-bottom'
}); });
return; return;
} }
if (me.currentComment == null || me.currentComment == '' || me.currentComment == undefined) {
if (me.currentComment == null || me.currentComment == "" || me.currentComment == undefined) {
uni.showToast({ uni.showToast({
title: "请填入您的评论~", title: '请填入您的评论~',
mask: true, mask: true,
position: "bottom" position: 'bottom'
}); });
return; return;
} }
if (me.currentComment.length > 50) { if (me.currentComment.length > 50) {
uni.showToast({ uni.showToast({
title: "评论字数限制50以内噢~", title: '评论字数限制50以内噢~',
mask: true, mask: true,
position: "bottom" position: 'bottom'
}); });
return; return;
} }
var userId = myUserInfo.id; var userId = myUserInfo.id;
var pendingCommentObject = { var pendingCommentObject = {
@ -624,10 +674,10 @@
vlogerId: me.thisVlogerId, vlogerId: me.thisVlogerId,
fatherCommentId: me.thisFatherCommentId, fatherCommentId: me.thisFatherCommentId,
commentUserId: userId, commentUserId: userId,
content: me.currentComment, content: me.currentComment
}; };
var result = await vlogCommentCreate(pendingCommentObject) var result = await vlogCommentCreate(pendingCommentObject);
console.log(result); console.log(result);
if (result.data.status == 200) { if (result.data.status == 200) {
var newCommentObject = result.data.data; var newCommentObject = result.data.data;
@ -635,18 +685,17 @@
newCommentObject.commentUserNickname = myUserInfo.nickname; newCommentObject.commentUserNickname = myUserInfo.nickname;
newCommentObject.commentUserFace = myUserInfo.face; newCommentObject.commentUserFace = myUserInfo.face;
newCommentObject.isLike = 0; newCommentObject.isLike = 0;
newCommentObject.vlogerId = userId newCommentObject.vlogerId = userId;
me.doCommentPagingList(1, true); me.doCommentPagingList(1, true);
// 评论/回复完毕后，回复thisFatherCommentId为“0” // 评论/回复完毕后，回复thisFatherCommentId为“0”
me.thisFatherCommentId = "0"; me.thisFatherCommentId = '0';
// 把新评论添加到第一个位置，弱一致性，不需要从数据库里再去取 // 把新评论添加到第一个位置，弱一致性，不需要从数据库里再去取
me.commentList.unshift(newCommentObject); me.commentList.unshift(newCommentObject);
// 清空文本框 // 清空文本框
me.currentComment = ""; me.currentComment = '';
// 隐藏键盘 // 隐藏键盘
uni.hideKeyboard(); uni.hideKeyboard();
// 底部变色 // 底部变色
@ -655,19 +704,18 @@
// 把滚动list到第一个位置 // 把滚动list到第一个位置
me.scrollTop = me.scrollTop + 1; me.scrollTop = me.scrollTop + 1;
me.$nextTick(() => { me.$nextTick(() => {
me.scrollTop = 0 //赋值为0即代表返回顶部 me.scrollTop = 0; //赋值为0即代表返回顶部
}); });
} else { } else {
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000 duration: 3000
}); });
} }
me.freshCommentCounts(); me.freshCommentCounts();
// uni.request({ // uni.request({
// method: "POST", // method: "POST",
// header: { // header: {
@ -680,7 +728,6 @@
// } // }
// }); // });
}, },
// 把超过1000或10000的数字调整，比如1.3k/6.8w // 把超过1000或10000的数字调整，比如1.3k/6.8w
getGraceNumber(num) { getGraceNumber(num) {
@ -688,11 +735,10 @@
}, },
// 时间显示 刚刚/xx小时前/... // 时间显示 刚刚/xx小时前/...
getGraceDateBeforeNow(dateTimeStr) { getGraceDateBeforeNow(dateTimeStr) {
var date = dateFormat("YYYY-mm-dd", new Date(dateTimeStr)); // var date = dateFormat('YYYY-MM-DD HH:mm:ss', new Date(dateTimeStr));
return getDateBeforeNow(date); return getDateBeforeNow(dateTimeStr);
}, },
/** /**
* 选择内容 * 选择内容
*/ */
@ -700,15 +746,14 @@
this.$emit('select', { this.$emit('select', {
item, item,
index index
}) });
this.close() this.close();
}, },
/** /**
* 关闭窗口 * 关闭窗口
*/ */
close() { close() {
if (this.beforeClose) return if (this.beforeClose) return;
this.popup.close(); this.popup.close();
uni.showTabBar({ uni.showTabBar({
animation: true animation: true
@ -722,7 +767,7 @@
touchendComment() { touchendComment() {
// this.commentTouched = false; // this.commentTouched = false;
this.activeIndex = -1; this.activeIndex = -1;
},
} }
} }
};
</script> </script>

244
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
View File

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

17
utils/request.js
View File

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

8
utils/tools.js
View File

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