im_merge
10
App.vue
@ -92,10 +92,18 @@ export default {
|
||||
sourceType: ['album'],
|
||||
compressed: false,
|
||||
success(e) {
|
||||
console.log(JSON.stringify(e));
|
||||
console.log(e);
|
||||
if (e.duration <= 30) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/publish/publish?fileObjectEvent=' + JSON.stringify(e)
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '时长不能超过30秒',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
@ -13,8 +13,16 @@
|
||||
<view class="share-list">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="share-item">
|
||||
<button class="share-btn" open-type="share">
|
||||
<u-icon color="#04BE02" size="80" name="weixin-fill"></u-icon>微信好友
|
||||
<button
|
||||
class="share-btn"
|
||||
open-type="share"
|
||||
>
|
||||
<u-icon
|
||||
color="#04BE02"
|
||||
size="80"
|
||||
name="weixin-fill"
|
||||
></u-icon>
|
||||
微信好友
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
@ -25,23 +33,34 @@
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<u-icon :color="item.color" size="80" :name="item.icon"></u-icon>
|
||||
<u-icon
|
||||
:color="item.color"
|
||||
size="80"
|
||||
:name="item.icon"
|
||||
></u-icon>
|
||||
<view>{{ item.title }}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="share-item" @click="copyLink()">
|
||||
<u-icon color="#b4aee8" size="80" name="share-fill"></u-icon>
|
||||
<view>{{ "复制链接" }}</view>
|
||||
<view
|
||||
class="share-item"
|
||||
@click="copyLink()"
|
||||
>
|
||||
<u-icon
|
||||
color="#b4aee8"
|
||||
size="80"
|
||||
name="share-fill"
|
||||
></u-icon>
|
||||
<view>{{ '复制链接' }}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
<script>
|
||||
import { h5Copy } from "@/js_sdk/h5-copy/h5-copy.js";
|
||||
import configs from "@/config/config";
|
||||
import mpShare from "uview-ui/libs/mixin/mpShare.js";
|
||||
import { h5Copy } from '@/js_sdk/h5-copy/h5-copy.js';
|
||||
import configs from '@/config/config';
|
||||
import mpShare from 'uview-ui/libs/mixin/mpShare.js';
|
||||
|
||||
export default {
|
||||
mixins: [mpShare],
|
||||
@ -108,13 +127,13 @@ export default {
|
||||
|
||||
shareTitle() {
|
||||
let shareTitle;
|
||||
if (this.type == "goods") {
|
||||
if (this.type == 'goods') {
|
||||
shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`;
|
||||
} else if (this.type == "shops") {
|
||||
} else if (this.type == 'shops') {
|
||||
shareTitle = `我发现了一个${this.goodsName}店铺快来跟我一起看看吧`;
|
||||
} else if (this.type == "pintuan") {
|
||||
} else if (this.type == 'pintuan') {
|
||||
shareTitle = `我拼了一个${this.goodsName}快来跟我一起抢购吧!`;
|
||||
} else if (this.type == "kanjia") {
|
||||
} else if (this.type == 'kanjia') {
|
||||
shareTitle = `请快来帮我砍一刀${this.goodsName}`;
|
||||
}
|
||||
return shareTitle;
|
||||
@ -189,7 +208,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./mp-share.scss";
|
||||
@import './mp-share.scss';
|
||||
.share-title {
|
||||
position: relative;
|
||||
height: 90rpx;
|
||||
|
1260
components/vlog/guanzhu.nvue
Normal file
1262
components/vlog/local.nvue
Normal file
1234
components/vlog/tuijian.nvue
Normal file
@ -49,7 +49,7 @@
|
||||
>
|
||||
<image
|
||||
:fade-show="true"
|
||||
src="/static/images/playvd.png"
|
||||
src="@/static/img/index/play.png"
|
||||
class="play-btn"
|
||||
></image>
|
||||
</view>
|
||||
@ -687,8 +687,9 @@ export default {
|
||||
}
|
||||
.play-btn {
|
||||
position: absolute;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
|
@ -8,7 +8,7 @@ const dev = {
|
||||
// buyer: "https://buyer-api.pickmall.cn",
|
||||
common: "http://192.168.1.211:8890",
|
||||
buyer: "http://192.168.1.211:8888",
|
||||
vlog: "http://192.168.1.211:8099",
|
||||
vlog: "http://192.168.1.86:8099",
|
||||
web: "http://192.168.1.211:8099",
|
||||
};
|
||||
// 生产环境
|
||||
@ -17,7 +17,7 @@ const prod = {
|
||||
// buyer: "https://buyer-api.pickmall.cn",
|
||||
common: "http://192.168.1.211:8890",
|
||||
buyer: "http://192.168.1.211:8888",
|
||||
vlog: "http://192.168.1.211:8099",
|
||||
vlog: "http://192.168.1.86:8099",
|
||||
};
|
||||
|
||||
//默认生产环境
|
||||
|
@ -1,5 +1,5 @@
|
||||
const name = "无终街"; //全局商城name
|
||||
const schemeName = 'lilishop' //唤醒app需要的schemeName
|
||||
const schemeName = 'wuzhongjie' //唤醒app需要的schemeName
|
||||
export default {
|
||||
name: name,
|
||||
schemeLink: `${schemeName}://`, //唤起app地址
|
||||
|
@ -68,7 +68,7 @@
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ],
|
||||
"schemes" : "lilishop",
|
||||
"schemes" : "wuzhongjie",
|
||||
"minSdkVersion" : 21
|
||||
},
|
||||
"ios" : {
|
||||
@ -81,7 +81,7 @@
|
||||
"NSLocationAlwaysAndWhenInUseUsageDescription" : "位置信息将用于高德地图的效果展示",
|
||||
"NSMicrophoneUsageDescription" : "用户上传视频时需使用音频信息"
|
||||
},
|
||||
"urltypes" : "lilishop",
|
||||
"urltypes" : "wuzhongjie",
|
||||
"dSYMs" : false
|
||||
},
|
||||
/* ios打包配置 */
|
||||
|
79
pages.json
@ -113,72 +113,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/me",
|
||||
"style": {
|
||||
"app-plus": {
|
||||
"titleNView": false //禁用原生导航栏
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/myBackImg",
|
||||
"style": {
|
||||
"app-plus": {
|
||||
"titleNView": false //禁用原生导航栏
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/myFace",
|
||||
"style": {
|
||||
"app-plus": {
|
||||
"titleNView": false //禁用原生导航栏
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/myInfo",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改个人资料",
|
||||
"navigationBarBackgroundColor": "#181b27"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/modifyNickname",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改昵称",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#181b27",
|
||||
"app-plus": {
|
||||
"titleNView": {
|
||||
"buttons": [{
|
||||
"text": "保存",
|
||||
"color": "#ef274d",
|
||||
"width": "60px",
|
||||
"fontSize": "15px",
|
||||
"fontWeight": "bold"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/publish/preview",
|
||||
"style": {
|
||||
"navigationBarTitleText": "预览视频",
|
||||
"navigationBarBackgroundColor": "#181b27",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/vlogerInfo",
|
||||
"style": {
|
||||
"app-plus": {
|
||||
"titleNView": false //禁用原生导航栏
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/vlog",
|
||||
"style": {
|
||||
@ -489,14 +423,6 @@
|
||||
"navigationBarBackgroundColor": "#181b27"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/settings",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#181b27"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/myFans",
|
||||
"style": {
|
||||
@ -566,8 +492,7 @@
|
||||
|
||||
{
|
||||
"root": "pages/mine",
|
||||
"pages": [
|
||||
{
|
||||
"pages": [{
|
||||
"path": "mydistribution/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的分销"
|
||||
@ -1389,7 +1314,7 @@
|
||||
"text": "消息"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/tabbar/user/my",
|
||||
"pagePath": "pages/me/me",
|
||||
"text": "我的"
|
||||
}
|
||||
],
|
||||
|
@ -10,7 +10,8 @@
|
||||
:key="index"
|
||||
@click="chooseLocation(item.city_id, item.city_name)"
|
||||
@touchstart="touchstartLocation(index)"
|
||||
@touchend="touchendLocation">
|
||||
@touchend="touchendLocation"
|
||||
>
|
||||
<text class="item-text">
|
||||
{{ item.city_name }}
|
||||
</text>
|
||||
@ -18,7 +19,8 @@
|
||||
<view class="right-part">
|
||||
<image
|
||||
class="right-arrow"
|
||||
src="/static/images/icon-right-arrow2.png"></image>
|
||||
src="/static/images/icon-right-arrow2.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -26,19 +28,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cityList from "@/json/area_city.js"
|
||||
import cityList from '@/json/area_city.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cityList: [],
|
||||
activeIndex: -1,
|
||||
activeIndex: -1
|
||||
};
|
||||
},
|
||||
onLoad(params) {
|
||||
let provinceId = params.provinceId;
|
||||
console.log(params)
|
||||
console.log(cityList)
|
||||
console.log(params);
|
||||
console.log(cityList);
|
||||
let realCityList = [];
|
||||
for (let i = 0; i < cityList.length; i++) {
|
||||
let tempProvinceId = cityList[i].province_id;
|
||||
@ -56,24 +58,34 @@ export default {
|
||||
this.activeIndex = -1;
|
||||
},
|
||||
chooseLocation(cityId, cityName) {
|
||||
uni.setStorageSync("myLocationCity", cityName);
|
||||
uni.setStorageSync('myLocationCity', cityName);
|
||||
uni.navigateTo({
|
||||
url: "chooseDistrict?cityId=" + cityId,
|
||||
url: 'chooseDistrict?cityId=' + cityId
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #181b27;
|
||||
<style scoped>
|
||||
.right-arrow {
|
||||
align-items: center;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.item-text {
|
||||
color: #ffffff;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.right-part {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.line {
|
||||
height: 1rpx;
|
||||
background-color: #393a41;
|
||||
@ -88,28 +100,18 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.item-text {
|
||||
color: #ffffff;
|
||||
align-self: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.right-part {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-self: center;
|
||||
.right-arrow {
|
||||
align-self: center;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #4a4c52;
|
||||
}
|
||||
.page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #181b27;
|
||||
}
|
||||
</style>
|
||||
|
@ -9,7 +9,8 @@
|
||||
:key="index"
|
||||
@click="chooseLocation(item.district_id, item.district_name)"
|
||||
@touchstart="touchstartLocation(index)"
|
||||
@touchend="touchendLocation">
|
||||
@touchend="touchendLocation"
|
||||
>
|
||||
<text class="item-text">
|
||||
{{ item.district_name }}
|
||||
</text>
|
||||
@ -19,12 +20,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import districtList from "@/json/area_district.js";
|
||||
import districtList from '@/json/area_district.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
districtList: [],
|
||||
activeIndex: -1,
|
||||
activeIndex: -1
|
||||
};
|
||||
},
|
||||
onLoad(params) {
|
||||
@ -46,30 +47,26 @@ export default {
|
||||
this.activeIndex = -1;
|
||||
},
|
||||
chooseLocation(districtId, districtName) {
|
||||
uni.setStorageSync("myLocationDistrict", districtName);
|
||||
uni.setStorageSync('myLocationDistrict', districtName);
|
||||
uni.navigateBack({
|
||||
delta: 3,
|
||||
delta: 3
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #181b27;
|
||||
|
||||
<style scoped>
|
||||
.line {
|
||||
height: 1rpx;
|
||||
background-color: #393a41;
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
color: #ffffff;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.item {
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
@ -77,16 +74,19 @@ export default {
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.item-text {
|
||||
color: #ffffff;
|
||||
align-self: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #4a4c52;
|
||||
}
|
||||
.page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #181b27;
|
||||
}
|
||||
</style>
|
||||
|
@ -10,7 +10,8 @@
|
||||
:key="index"
|
||||
@click="chooseLocation(item.province_id, item.province_name)"
|
||||
@touchstart="touchstartLocation(index)"
|
||||
@touchend="touchendLocation">
|
||||
@touchend="touchendLocation"
|
||||
>
|
||||
<text class="item-text">
|
||||
{{ item.province_name }}
|
||||
</text>
|
||||
@ -18,7 +19,8 @@
|
||||
<view class="right-part">
|
||||
<image
|
||||
class="right-arrow"
|
||||
src="/static/images/icon-right-arrow2.png"></image>
|
||||
src="/static/images/icon-right-arrow2.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -26,13 +28,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import provinceList from "@/json/area_province.js";
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import provinceList from '@/json/area_province.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
provinceList: [],
|
||||
activeIndex: -1,
|
||||
activeIndex: -1
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
@ -47,30 +49,38 @@ export default {
|
||||
},
|
||||
|
||||
chooseLocation(provinceId, provinceName) {
|
||||
uni.setStorageSync("myLocationProvince", provinceName);
|
||||
uni.setStorageSync('myLocationProvince', provinceName);
|
||||
uni.navigateTo({
|
||||
url: "chooseCity?provinceId=" + provinceId,
|
||||
url: 'chooseCity?provinceId=' + provinceId
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #181b27;
|
||||
|
||||
<style scoped>
|
||||
.right-arrow {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.line {
|
||||
height: 1rpx;
|
||||
background-color: #393a41;
|
||||
width: 750rpx;
|
||||
}
|
||||
.item-text {
|
||||
color: #ffffff;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.right-part {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.item {
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
@ -79,28 +89,18 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.item-text {
|
||||
color: #ffffff;
|
||||
align-self: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.right-part {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-self: center;
|
||||
.right-arrow {
|
||||
align-self: center;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #4a4c52;
|
||||
}
|
||||
.page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #181b27;
|
||||
}
|
||||
</style>
|
||||
|
293
pages/me/me.nvue
@ -1,17 +1,31 @@
|
||||
<template>
|
||||
<view class="mypage">
|
||||
<!-- 未登录 -->
|
||||
<view v-if="!userIsLogin" class="login-info-wrapper" :style="{ height: screenHeightUnLogin + 'px' }"
|
||||
@click="goLogin">
|
||||
<view
|
||||
v-if="!userIsLogin"
|
||||
class="login-info-wrapper"
|
||||
:style="{ height: screenHeightUnLogin + 'px' }"
|
||||
@click="goLogin"
|
||||
>
|
||||
<text class="login-info">
|
||||
{{ loginWords }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 已登录 -->
|
||||
<scroll-view v-if="userIsLogin" class="isLogin-info-wrapper" :style="{ height: screenHeight + 'px' }"
|
||||
scroll-y="true" @scrolltolower="loadMore">
|
||||
<image class="mybg" :src="pageUserInfo.bgImg" mode="aspectFill" @click="changeMyBg" />
|
||||
<scroll-view
|
||||
v-if="userIsLogin"
|
||||
class="isLogin-info-wrapper"
|
||||
:style="{ height: screenHeight + 'px' }"
|
||||
scroll-y="true"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<image
|
||||
class="mybg"
|
||||
:src="pageUserInfo.bgImg"
|
||||
mode="aspectFill"
|
||||
@click="changeMyBg"
|
||||
/>
|
||||
|
||||
<!-- 安卓下使用一个灰色图片来替代阴影效果, ios支持阴影, 安卓则不支持 -->
|
||||
<!-- <image
|
||||
@ -23,7 +37,12 @@
|
||||
|
||||
<view class="my-info-wrapper">
|
||||
<view class="my-info">
|
||||
<image :src="pageUserInfo.face" mode="aspectFill" class="my-face" @click="changeMyFace" />
|
||||
<image
|
||||
:src="pageUserInfo.face"
|
||||
mode="aspectFill"
|
||||
class="my-face"
|
||||
@click="changeMyFace"
|
||||
/>
|
||||
<view class="info-wrapper">
|
||||
<text class="nickname">
|
||||
{{ pageUserInfo.nickname }}
|
||||
@ -37,20 +56,26 @@
|
||||
<view class="location">
|
||||
<text class="location-text">所在地:</text>
|
||||
<text class="location-text">
|
||||
{{ pageUserInfo.city == "" ? "中国" : "" + pageUserInfo.city
|
||||
}}{{
|
||||
pageUserInfo.district == "" ? "" : "·" + pageUserInfo.district
|
||||
}}
|
||||
{{ pageUserInfo.city == '' ? '中国' : '' + pageUserInfo.city }}{{ pageUserInfo.district == '' ? '' : '·' + pageUserInfo.district }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="sex-wrapper">
|
||||
<view class="constellation">
|
||||
<image class="sex-img" v-if="pageUserInfo.sex == 1"
|
||||
src="/static/images/icon-sex-boy.png" />
|
||||
<image class="sex-img" v-if="pageUserInfo.sex == 0"
|
||||
src="/static/images/icon-sex-girl.png" />
|
||||
<image class="sex-img" v-if="pageUserInfo.sex == 2"
|
||||
src="/static/images/icon-sex-secret.png" />
|
||||
<image
|
||||
class="sex-img"
|
||||
v-if="pageUserInfo.sex == 1"
|
||||
src="/static/images/icon-sex-boy.png"
|
||||
/>
|
||||
<image
|
||||
class="sex-img"
|
||||
v-if="pageUserInfo.sex == 0"
|
||||
src="/static/images/icon-sex-girl.png"
|
||||
/>
|
||||
<image
|
||||
class="sex-img"
|
||||
v-if="pageUserInfo.sex == 2"
|
||||
src="/static/images/icon-sex-secret.png"
|
||||
/>
|
||||
<text class="astro">{{ astro }}座</text>
|
||||
</view>
|
||||
<view class="animal">
|
||||
@ -68,13 +93,19 @@
|
||||
|
||||
<view class="bottom-wrapper">
|
||||
<view class="bottom">
|
||||
<view @click="goMyFollows(pageUserInfo.id)" class="bottom-item">
|
||||
<view
|
||||
@click="goMyFollows(pageUserInfo.id)"
|
||||
class="bottom-item"
|
||||
>
|
||||
<text class="item-num">
|
||||
{{ getGraceNumber(pageUserInfo.myFollowsCounts) }}
|
||||
</text>
|
||||
<text class="item-text">关注</text>
|
||||
</view>
|
||||
<view class="bottom-item" @click="goMyFans(pageUserInfo.id)">
|
||||
<view
|
||||
class="bottom-item"
|
||||
@click="goMyFans(pageUserInfo.id)"
|
||||
>
|
||||
<text class="item-num">
|
||||
{{ getGraceNumber(pageUserInfo.myFansCounts) }}
|
||||
</text>
|
||||
@ -89,47 +120,97 @@
|
||||
</view>
|
||||
|
||||
<view class="edit">
|
||||
<view @click="goMyInfo" class="edit-info">
|
||||
<view
|
||||
@click="goMyInfo"
|
||||
class="edit-info"
|
||||
>
|
||||
<text class="edit-text">编辑资料</text>
|
||||
</view>
|
||||
<view @click="goSettings" class="setting">
|
||||
<image src="/static/images/icon-settings.png" class="setting-img" />
|
||||
<view
|
||||
@click="goSettings"
|
||||
class="setting"
|
||||
>
|
||||
<image
|
||||
src="/static/images/more.png"
|
||||
class="setting-img"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tab-wrapper">
|
||||
<view class="tab-item" @click="switchTab(0)">
|
||||
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 0 }">
|
||||
<view
|
||||
class="tab-item"
|
||||
@click="switchTab(0)"
|
||||
>
|
||||
<text
|
||||
class="tab-normal"
|
||||
:class="{ 'tab-selected': currentTab == 0 }"
|
||||
>
|
||||
作品
|
||||
</text>
|
||||
<view v-if="currentTab == 0" class="selected-tab"></view>
|
||||
<view
|
||||
v-if="currentTab == 0"
|
||||
class="selected-tab"
|
||||
></view>
|
||||
</view>
|
||||
<view class="tab-item" @click="switchTab(1)">
|
||||
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }">
|
||||
私密
|
||||
<view
|
||||
class="tab-item"
|
||||
@click="switchTab(1)"
|
||||
>
|
||||
<text
|
||||
class="tab-normal"
|
||||
:class="{ 'tab-selected': currentTab == 1 }"
|
||||
>
|
||||
<!-- 私密 -->
|
||||
</text>
|
||||
<view v-if="currentTab == 1" class="selected-tab"></view>
|
||||
<view
|
||||
v-if="currentTab == 1"
|
||||
class="selected-tab"
|
||||
></view>
|
||||
</view>
|
||||
<view class="tab-item" @click="switchTab(2)">
|
||||
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 2 }">
|
||||
<view
|
||||
class="tab-item"
|
||||
@click="switchTab(2)"
|
||||
>
|
||||
<text
|
||||
class="tab-normal"
|
||||
:class="{ 'tab-selected': currentTab == 2 }"
|
||||
>
|
||||
赞过
|
||||
</text>
|
||||
<view v-if="currentTab == 2" class="selected-tab"></view>
|
||||
<view
|
||||
v-if="currentTab == 2"
|
||||
class="selected-tab"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="vlog-list">
|
||||
<block v-for="(vlog, index) in vlogList" :key="index">
|
||||
<image class="vlog-cover" :src="vlog.cover||vlog.firstFrameImg" @click="goToVlog(vlog)" mode="aspectFill"></image>
|
||||
<block
|
||||
v-for="(vlog, index) in vlogList"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
class="vlog-cover"
|
||||
:src="vlog.cover || vlog.firstFrameImg"
|
||||
@click="goToVlog(vlog)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view v-if="vlogList.length == 0" class="empty">
|
||||
<view
|
||||
v-if="vlogList.length == 0"
|
||||
class="empty"
|
||||
>
|
||||
<text class="empty-text">~ 空空如也 ~</text>
|
||||
</view>
|
||||
|
||||
<view v-if="vlogList.length > 0" class="not-empty">
|
||||
<view
|
||||
v-if="vlogList.length > 0"
|
||||
class="not-empty"
|
||||
>
|
||||
<text class="not-empty-text">~ 没有更多了 ~</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -138,57 +219,46 @@
|
||||
|
||||
<script>
|
||||
let system = uni.getSystemInfoSync();
|
||||
import * as filters from "@/utils/filters.js"
|
||||
import api from "@/config/api.js";
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import {
|
||||
vlogUserInfo,
|
||||
vlogMyPublicList,
|
||||
vlogMyPrivateList,
|
||||
vlogMyLikedList,
|
||||
vlogMeTag
|
||||
} from "@/api/vlog"
|
||||
import * as filters from '@/utils/filters.js';
|
||||
import api from '@/config/api.js';
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import { vlogUserInfo, vlogMyPublicList, vlogMyPrivateList, vlogMyLikedList, vlogMeTag } from '@/api/vlog';
|
||||
|
||||
import {
|
||||
getAstro,
|
||||
getAnimal,
|
||||
dateFormat,
|
||||
graceNumber
|
||||
} from '@/utils/tools.js'
|
||||
import { getAstro, getAnimal, dateFormat, graceNumber } from '@/utils/tools.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userIsLogin: false,
|
||||
pageUserInfo: {
|
||||
id: "",
|
||||
mobile: "",
|
||||
nickname: "",
|
||||
imoocNum: "",
|
||||
face: "",
|
||||
birthday: "1998-12-31T16:00:00.000+0000",
|
||||
country: "",
|
||||
province: "",
|
||||
city: "",
|
||||
district: "",
|
||||
description: "",
|
||||
id: '',
|
||||
mobile: '',
|
||||
nickname: '',
|
||||
imoocNum: '',
|
||||
face: '',
|
||||
birthday: '1998-12-31T16:00:00.000+0000',
|
||||
country: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
description: '',
|
||||
myFollowsCounts: 0,
|
||||
myFansCounts: 0,
|
||||
totalLikeMeCounts: 0
|
||||
}, // 用户信息
|
||||
userPageId: "",
|
||||
astro: "", // 星座
|
||||
animal: "", // 生肖
|
||||
loginWords: "请登录",
|
||||
userPageId: '',
|
||||
astro: '', // 星座
|
||||
animal: '', // 生肖
|
||||
loginWords: '请登录',
|
||||
|
||||
screenHeight: 0,
|
||||
screenHeightUnLogin: 0,
|
||||
currentTab: 0,
|
||||
isAndroid: uni.getSystemInfoSync().platform == "android",
|
||||
isAndroid: uni.getSystemInfoSync().platform == 'android',
|
||||
|
||||
page: 0,
|
||||
toalPage: 0,
|
||||
vlogList: [],
|
||||
vlogList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
@ -200,19 +270,19 @@
|
||||
onShow() {
|
||||
let me = this;
|
||||
// 判断我有没有登录
|
||||
this.userIsLogin = filters.isLogin("auth");
|
||||
console.log(this.userIsLogin)
|
||||
this.userIsLogin = filters.isLogin('auth');
|
||||
console.log(this.userIsLogin);
|
||||
if (this.userIsLogin) {
|
||||
this.getUinfo()
|
||||
this.getUinfo();
|
||||
} else {
|
||||
return
|
||||
return;
|
||||
}
|
||||
},
|
||||
onTabItemTap: (e) => {
|
||||
console.log(e)
|
||||
if (!filters.isLogin("auth")) {
|
||||
console.log(e);
|
||||
if (!filters.isLogin('auth')) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/passport/login?init=index"
|
||||
url: '/pages/passport/login?init=index'
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -222,16 +292,16 @@
|
||||
|
||||
let myUserId = myUserInfo.id;
|
||||
uni.showLoading({
|
||||
title: "正在加载!",
|
||||
title: '正在加载!'
|
||||
});
|
||||
var result = await vlogUserInfo(myUserId)
|
||||
var result = await vlogUserInfo(myUserId);
|
||||
uni.hideLoading();
|
||||
console.log(result)
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
this.pageUserInfo = result.data.data;
|
||||
storage.setVlogUserInfo(this.pageUserInfo)
|
||||
storage.setVlogUserInfo(this.pageUserInfo);
|
||||
// 查询用户信息
|
||||
this.switchTab(0)
|
||||
this.switchTab(0);
|
||||
// this.myList(0, 'myPublicList', true);
|
||||
this.setBasicUserInfo(this.pageUserInfo);
|
||||
}
|
||||
@ -247,19 +317,19 @@
|
||||
// }
|
||||
// 根据生日判断星座
|
||||
let birthday = myUserInfo.birthday;
|
||||
let birth = dateFormat("YYYY-mm-dd", new Date(birthday));
|
||||
console.log(birth)
|
||||
let birthArr = birth.split("-");
|
||||
let birth = dateFormat('YYYY-MM-DD', new Date(birthday));
|
||||
console.log(birth);
|
||||
let birthArr = birth.split('-');
|
||||
let year = birthArr[0];
|
||||
let month = birthArr[1];
|
||||
let day = birthArr[2];
|
||||
let astro = getAstro(month, day);
|
||||
console.log(astro)
|
||||
console.log(astro);
|
||||
this.astro = astro;
|
||||
|
||||
// 根据生日判断生肖
|
||||
this.animal = getAnimal(year);
|
||||
console.log(this.animal)
|
||||
console.log(this.animal);
|
||||
},
|
||||
switchTab(index) {
|
||||
this.currentTab = index;
|
||||
@ -278,7 +348,7 @@
|
||||
}
|
||||
},
|
||||
loadMore() {
|
||||
let requestArr = ['myPublicList', 'myPrivateList', 'myLikedList']
|
||||
let requestArr = ['myPublicList', 'myPrivateList', 'myLikedList'];
|
||||
if (this.page >= this.toalPage) {
|
||||
return;
|
||||
} else {
|
||||
@ -289,16 +359,16 @@
|
||||
let me = this;
|
||||
page = page + 1;
|
||||
me.page = page;
|
||||
var uinfo = storage.getVlogUserInfo()
|
||||
if (uinfo == null) return
|
||||
var uinfo = storage.getVlogUserInfo();
|
||||
if (uinfo == null) return;
|
||||
let userId = uinfo.id;
|
||||
var result = await vlogMeTag(requrl, page, 20, userId)
|
||||
var result = await vlogMeTag(requrl, page, 20, userId);
|
||||
if (result.data.status == 200) {
|
||||
let vlogList = result.data.data.rows;
|
||||
console.log(vlogList)
|
||||
console.log(vlogList);
|
||||
let toalPage = result.data.data.total;
|
||||
if (init) {
|
||||
me.vlogList = vlogList
|
||||
me.vlogList = vlogList;
|
||||
} else {
|
||||
me.vlogList = me.vlogList.concat(vlogList);
|
||||
}
|
||||
@ -308,8 +378,8 @@
|
||||
},
|
||||
goLogin() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/passport/login",
|
||||
animationType: "slide-in-bottom",
|
||||
url: '/pages/passport/login',
|
||||
animationType: 'slide-in-bottom'
|
||||
});
|
||||
},
|
||||
// 把超过1000或10000的数字调整, 比如1.3k/6.8w
|
||||
@ -319,54 +389,55 @@
|
||||
// 视频详情
|
||||
goToVlog(vlog) {
|
||||
let vlogId = vlog.id ? vlog.id : vlog.vlogId;
|
||||
console.log(vlogId)
|
||||
console.log(vlogId);
|
||||
uni.navigateTo({
|
||||
url: "/pages/me/vlog?vlogId=" + vlogId,
|
||||
url: '/pages/me/vlog?vlogId=' + vlogId
|
||||
});
|
||||
},
|
||||
// 修改背景图
|
||||
changeMyBg() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "/pages/me/myBackImg",
|
||||
animationType: 'fade-in',
|
||||
url: '/pages/me/myBackImg'
|
||||
});
|
||||
},
|
||||
// 更换头像
|
||||
changeMyFace() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "myFace",
|
||||
animationType: 'fade-in',
|
||||
url: 'myFace'
|
||||
});
|
||||
},
|
||||
//编辑资料
|
||||
goMyInfo() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "myInfo",
|
||||
animationType: 'fade-in',
|
||||
url: 'myInfo'
|
||||
});
|
||||
},
|
||||
|
||||
goSettings() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "settings",
|
||||
animationType: 'fade-in',
|
||||
// url: 'settings'
|
||||
url: '/pages/tabbar/user/my'
|
||||
});
|
||||
},
|
||||
// 粉丝列表
|
||||
goMyFans(userId) {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "myFans",
|
||||
animationType: 'fade-in',
|
||||
url: 'myFans'
|
||||
});
|
||||
},
|
||||
// 关注列表
|
||||
goMyFollows(userId) {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "myFollows",
|
||||
animationType: 'fade-in',
|
||||
url: 'myFollows'
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -378,7 +449,6 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #000000;
|
||||
|
||||
}
|
||||
|
||||
.login-info {
|
||||
@ -692,5 +762,6 @@
|
||||
top: -260rpx;
|
||||
}
|
||||
|
||||
.isLogin-info-wrapper {}
|
||||
.isLogin-info-wrapper {
|
||||
}
|
||||
</style>
|
@ -8,14 +8,16 @@
|
||||
:value="date"
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
@change="bindDateChange">
|
||||
@change="bindDateChange"
|
||||
>
|
||||
<view class="left-picker-part">
|
||||
<text class="date-lable">{{ date }}</text>
|
||||
</view>
|
||||
<view class="left-choose">
|
||||
<image
|
||||
src="/static/images/icon-datepicker.png"
|
||||
class="icon-right"></image>
|
||||
class="icon-right"
|
||||
></image>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
@ -27,19 +29,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import {
|
||||
vlogModifyUserInfo
|
||||
} from "@/api/vlog"
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/tools.js'
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import { vlogModifyUserInfo } from '@/api/vlog';
|
||||
import { dateFormat } from '@/utils/tools.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: "",
|
||||
startDate: "1970-01-01",
|
||||
endDate: "2088-08-08",
|
||||
date: '',
|
||||
startDate: '1970-01-01',
|
||||
endDate: '2088-08-08'
|
||||
};
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
@ -59,28 +57,28 @@ export default {
|
||||
birthday: birth,
|
||||
type: 4
|
||||
};
|
||||
var result = await vlogModifyUserInfo(pendingUserInfo,4)
|
||||
var result = await vlogModifyUserInfo(pendingUserInfo, 4);
|
||||
if (result.data.status == 200) {
|
||||
let userInfoUpdated = result.data.data;
|
||||
// 重置本地用户信息
|
||||
storage.setVlogUserInfo(userInfoUpdated);
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
var timer = setTimeout(() => {
|
||||
clearTimeout(timer)
|
||||
clearTimeout(timer);
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
animationType: "fade-out",
|
||||
animationType: 'fade-out'
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -88,9 +86,9 @@ export default {
|
||||
this.date = e.detail.value;
|
||||
},
|
||||
getGraceDateStr(date) {
|
||||
return dateFormat("YYYY-mm-dd", date);
|
||||
},
|
||||
},
|
||||
return dateFormat('YYYY-MM-DD', date);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -110,8 +108,8 @@ export default {
|
||||
}
|
||||
|
||||
.picker-box {
|
||||
align-self: center;
|
||||
margin-top: 50rpx;
|
||||
margin: 50rpx auto 20rpx auto;
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.birthday-item {
|
||||
@ -119,7 +117,7 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width:720rpx;
|
||||
width: 750rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 40rpx;
|
||||
.left-picker-part {
|
||||
|
@ -9,7 +9,8 @@
|
||||
:model="description"
|
||||
placeholder="请填入简介~"
|
||||
maxlength="16"
|
||||
@input="typingContent" />
|
||||
@input="typingContent"
|
||||
/>
|
||||
<view class="length-cal">
|
||||
<text class="length-text">{{ wordsLength }}/16</text>
|
||||
</view>
|
||||
@ -22,15 +23,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import {
|
||||
vlogModifyUserInfo
|
||||
} from "@/api/vlog"
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import { vlogModifyUserInfo } from '@/api/vlog';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
description: storage.getVlogUserInfo().description,
|
||||
wordsLength: 0,
|
||||
wordsLength: 0
|
||||
};
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
@ -43,35 +42,34 @@ export default {
|
||||
async updateDesc() {
|
||||
let me = this;
|
||||
let userId = storage.getVlogUserInfo().id;
|
||||
let description =
|
||||
this.description == "" ? "这家伙很懒,什么都没留下~" : this.description;
|
||||
let description = this.description == '' ? '这家伙很懒,什么都没留下~' : this.description;
|
||||
let pendingUserInfo = {
|
||||
id: userId,
|
||||
description: description,
|
||||
type: 6
|
||||
};
|
||||
var result = await vlogModifyUserInfo(pendingUserInfo,6)
|
||||
var result = await vlogModifyUserInfo(pendingUserInfo, 6);
|
||||
if (result.data.status == 200) {
|
||||
let userInfoUpdated = result.data.data;
|
||||
// 重置本地用户信息
|
||||
storage.setVlogUserInfo(userInfoUpdated);
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
var timer = setTimeout(() => {
|
||||
clearTimeout(timer)
|
||||
clearTimeout(timer);
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
animationType: "fade-out",
|
||||
animationType: 'fade-out'
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -79,12 +77,12 @@ export default {
|
||||
typingContent(e) {
|
||||
this.description = e.detail.value;
|
||||
this.wordsLength = this.description.length;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -95,6 +93,7 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
.line {
|
||||
height: 1rpx;
|
||||
@ -120,7 +119,7 @@ export default {
|
||||
border-top-right-radius: 20rpx;
|
||||
}
|
||||
.length-cal {
|
||||
width: 700rpx;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: #4a4c52;
|
||||
padding-right: 20rpx;
|
||||
|
@ -8,47 +8,49 @@
|
||||
:value="nickname"
|
||||
:model="nickname"
|
||||
placeholder="请填入昵称~"
|
||||
maxlength="16"
|
||||
@input="typingContent" />
|
||||
maxlength="8"
|
||||
@input="typingContent"
|
||||
/>
|
||||
<view class="length-cal">
|
||||
<text class="length-text">{{ wordsLength }}/16</text>
|
||||
<text class="length-text">{{ wordsLength }}/8</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="notice" style="align-self: center">
|
||||
<text class="tips">*注:请设置5-16的昵称长度</text>
|
||||
<view
|
||||
class="notice"
|
||||
style="align-self: center"
|
||||
>
|
||||
<text class="tips">*注:请设置2-8的昵称长度</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
|
||||
import {
|
||||
vlogModifyUserInfo
|
||||
} from "@/api/vlog"
|
||||
import { vlogModifyUserInfo } from '@/api/vlog';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
oldNickname: storage.getVlogUserInfo().nickname,
|
||||
nickname: storage.getVlogUserInfo().nickname,
|
||||
wordsLength: 0,
|
||||
wordsLength: 0
|
||||
};
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
let nickname = this.nickname;
|
||||
if (nickname.length < 5) {
|
||||
if (nickname.length < 2) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "昵称太短!",
|
||||
icon: 'none',
|
||||
title: '昵称太短!'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (nickname.search(/\s/) != -1) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "不允许包含空格!",
|
||||
icon: 'none',
|
||||
title: '不允许包含空格!'
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -56,8 +58,8 @@ export default {
|
||||
let oldNickname = this.oldNickname;
|
||||
if (oldNickname == nickname) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "昵称未改变!",
|
||||
icon: 'none',
|
||||
title: '昵称未改变!'
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -78,37 +80,37 @@ export default {
|
||||
};
|
||||
|
||||
// 修改昵称
|
||||
var result = await vlogModifyUserInfo(pendingUserInfo,1)
|
||||
console.log(result)
|
||||
var result = await vlogModifyUserInfo(pendingUserInfo, 1);
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
let userInfoUpdated = result.data.data;
|
||||
// 重置本地用户信息
|
||||
storage.setVlogUserInfo(userInfoUpdated);
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
var timer = setTimeout(() => {
|
||||
clearTimeout(timer)
|
||||
clearTimeout(timer);
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
animationType: "fade-out",
|
||||
animationType: 'fade-out'
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
typingContent(e) {
|
||||
this.nickname = e.detail.value;
|
||||
this.wordsLength = this.nickname.length;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -123,6 +125,7 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
.line {
|
||||
height: 1rpx;
|
||||
|
@ -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
@ -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>
|
@ -1,28 +1,54 @@
|
||||
<template>
|
||||
<view class="mpage">
|
||||
<view class="line"></view>
|
||||
<scroll-view scroll-y="true" @scrolltolower="pagingFansList()">
|
||||
<view class="user-wrapper" v-for="(f, index) in fansList" :key="f.fanId">
|
||||
<view class="user-info" @click="goTovlogerInfo(f.fanId)">
|
||||
<image class="face" :src="f.face" />
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
@scrolltolower="pagingFansList()"
|
||||
>
|
||||
<view
|
||||
class="user-wrapper"
|
||||
v-for="(f, index) in fansList"
|
||||
:key="f.fanId"
|
||||
>
|
||||
<view
|
||||
class="user-info"
|
||||
@click="goTovlogerInfo(f.fanId)"
|
||||
>
|
||||
<image
|
||||
class="face"
|
||||
:src="f.face"
|
||||
/>
|
||||
<text class="user-name">
|
||||
{{ f.nickname }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view v-if="!from">
|
||||
<view v-if="f.bothFriend==0" class="operator-wrapper">
|
||||
<text class="operator-words" style="color: #ef274d" @click="followMe(f.fanId)">
|
||||
<view
|
||||
v-if="f.bothFriend == 0"
|
||||
class="operator-wrapper"
|
||||
>
|
||||
<text
|
||||
class="operator-words"
|
||||
style="color: #ef274d"
|
||||
@click="followMe(f.fanId)"
|
||||
>
|
||||
回粉
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="f.bothFriend==1" class="operator-wrapper">
|
||||
<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.fanId)">
|
||||
<view
|
||||
v-if="f.bothFriend == 1"
|
||||
class="operator-wrapper"
|
||||
>
|
||||
<text
|
||||
class="operator-words"
|
||||
style="color: #ffffff"
|
||||
@click="cancelFollow(f.fanId)"
|
||||
>
|
||||
互粉
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@ -30,19 +56,13 @@
|
||||
|
||||
<script>
|
||||
let system = uni.getSystemInfoSync();
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import {
|
||||
vlogFansCancel,
|
||||
vlogFansFollow,
|
||||
vlogQueryMyFans
|
||||
} from "@/api/vlog"
|
||||
import {
|
||||
isStrEmpty
|
||||
} from '@/utils/tools.js'
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import { vlogFansCancel, vlogFansFollow, vlogQueryMyFans } from '@/api/vlog';
|
||||
import { isStrEmpty } from '@/utils/tools.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userId: "",
|
||||
userId: '',
|
||||
screenHeight: 0,
|
||||
page: 0,
|
||||
totalPage: 0,
|
||||
@ -52,25 +72,25 @@
|
||||
},
|
||||
onLoad(param) {
|
||||
if (!isStrEmpty(param.userId)) {
|
||||
this.from = true
|
||||
this.userId = param.userId
|
||||
this.from = true;
|
||||
this.userId = param.userId;
|
||||
} else {
|
||||
var uinfo = storage.getVlogUserInfo()
|
||||
var uinfo = storage.getVlogUserInfo();
|
||||
this.userId = uinfo.id;
|
||||
}
|
||||
this.queryMyFansList(0);
|
||||
},
|
||||
methods: {
|
||||
goTovlogerInfo(vlogerId) {
|
||||
var id = storage.getVlogUserInfo().id
|
||||
var id = storage.getVlogUserInfo().id;
|
||||
// 是否是当前登录的用户
|
||||
if (id == vlogerId) {
|
||||
uni.switchTab({
|
||||
url: "me",
|
||||
url: 'me'
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "vlogerInfo?userPageId=" + vlogerId,
|
||||
url: 'vlogerInfo?userPageId=' + vlogerId
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -89,20 +109,20 @@
|
||||
},
|
||||
async cancelFollow(vlogerId) {
|
||||
let me = this;
|
||||
let userId = me.userId
|
||||
let userId = me.userId;
|
||||
let data = {
|
||||
myId: userId,
|
||||
vlogerId
|
||||
}
|
||||
var result = await vlogFansCancel(data)
|
||||
console.log(result)
|
||||
};
|
||||
var result = await vlogFansCancel(data);
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
me.reFreshList(vlogerId, 0);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -112,16 +132,16 @@
|
||||
let data = {
|
||||
myId: userId,
|
||||
vlogerId
|
||||
}
|
||||
var result = await vlogFansFollow(data)
|
||||
console.log(result)
|
||||
};
|
||||
var result = await vlogFansFollow(data);
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
me.reFreshList(vlogerId, 1);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -136,9 +156,9 @@
|
||||
// currentUserId: currentUserId,
|
||||
page: page,
|
||||
pageSize: 10
|
||||
}
|
||||
var result = await vlogQueryMyFans(data)
|
||||
console.log(result)
|
||||
};
|
||||
var result = await vlogQueryMyFans(data);
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
let fansList = result.data.data.rows;
|
||||
let totalPage = result.data.data.total;
|
||||
@ -154,8 +174,8 @@
|
||||
return;
|
||||
}
|
||||
this.queryMyFansList(this.page);
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -164,11 +184,10 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.face {
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 100rpx;
|
||||
@ -177,7 +196,7 @@
|
||||
}
|
||||
|
||||
.user-name {
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
@ -196,9 +215,6 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #181b27;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.user-wrapper {
|
||||
@ -212,8 +228,6 @@
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.operator-wrapper {
|
||||
@ -228,11 +242,10 @@
|
||||
border-width: 2rpx;
|
||||
border-color: #ef274d;
|
||||
background-color: #181b27;
|
||||
|
||||
}
|
||||
|
||||
.operator-words {
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
@ -1,23 +1,50 @@
|
||||
<template>
|
||||
<view class="mpage">
|
||||
<view class="line"></view>
|
||||
<scroll-view scroll-y="true" @scrolltolower="pagingFollowsList">
|
||||
<view class="user-wrapper" v-for="(f, index) in followsList" :key="f.vlogerId">
|
||||
<view class="user-info" @click="goTovlogerInfo(f.vlogerId)">
|
||||
<image class="face" :src="f.face" />
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
@scrolltolower="pagingFollowsList"
|
||||
>
|
||||
<view
|
||||
class="user-wrapper"
|
||||
v-for="(f, index) in followsList"
|
||||
:key="f.vlogerId"
|
||||
>
|
||||
<view
|
||||
class="user-info"
|
||||
@click="goTovlogerInfo(f.vlogerId)"
|
||||
>
|
||||
<image
|
||||
class="face"
|
||||
:src="f.face"
|
||||
/>
|
||||
<text class="user-name">
|
||||
{{ f.nickname }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view v-if="!from">
|
||||
<view v-if="f.bothFriend==0" class="operator-wrapper">
|
||||
<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.vlogerId)">
|
||||
<view
|
||||
v-if="f.bothFriend == 0"
|
||||
class="operator-wrapper"
|
||||
>
|
||||
<text
|
||||
class="operator-words"
|
||||
style="color: #ef274d"
|
||||
@click="cancelFollow(f.vlogerId)"
|
||||
>
|
||||
已关注
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="f.bothFriend==1" class="operator-wrapper">
|
||||
<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.vlogerId)">
|
||||
<view
|
||||
v-if="f.bothFriend == 1"
|
||||
class="operator-wrapper"
|
||||
>
|
||||
<text
|
||||
class="operator-words"
|
||||
style="color: #ffffff"
|
||||
@click="cancelFollow(f.vlogerId)"
|
||||
>
|
||||
互关
|
||||
</text>
|
||||
</view>
|
||||
@ -28,20 +55,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import {
|
||||
vlogFansCancel,
|
||||
vlogFansFollow,
|
||||
vlogQueryMyFollows
|
||||
} from "@/api/vlog"
|
||||
import {
|
||||
isStrEmpty
|
||||
} from '@/utils/tools.js'
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import { vlogFansCancel, vlogFansFollow, vlogQueryMyFollows } from '@/api/vlog';
|
||||
import { isStrEmpty } from '@/utils/tools.js';
|
||||
let system = uni.getSystemInfoSync();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userId: "",
|
||||
userId: '',
|
||||
screenHeight: 0,
|
||||
page: 0,
|
||||
totalPage: 0,
|
||||
@ -51,24 +72,24 @@
|
||||
},
|
||||
onLoad(param) {
|
||||
if (!isStrEmpty(param.userId)) {
|
||||
this.from = true
|
||||
this.userId = param.userId
|
||||
this.from = true;
|
||||
this.userId = param.userId;
|
||||
} else {
|
||||
var uinfo = storage.getVlogUserInfo()
|
||||
var uinfo = storage.getVlogUserInfo();
|
||||
this.userId = uinfo.id;
|
||||
}
|
||||
this.queryMyFollowList(0);
|
||||
},
|
||||
methods: {
|
||||
goTovlogerInfo(vlogerId) {
|
||||
var id = storage.getVlogUserInfo().id
|
||||
var id = storage.getVlogUserInfo().id;
|
||||
if (id == vlogerId) {
|
||||
uni.switchTab({
|
||||
url: "me",
|
||||
url: 'me'
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "vlogerInfo?userPageId=" + vlogerId,
|
||||
url: 'vlogerInfo?userPageId=' + vlogerId
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -91,16 +112,16 @@
|
||||
var data = {
|
||||
myId: userId,
|
||||
vlogerId
|
||||
}
|
||||
var result = await vlogFansCancel(data)
|
||||
console.log(result)
|
||||
};
|
||||
var result = await vlogFansCancel(data);
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
me.reFreshList(vlogerId, 0);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -110,16 +131,16 @@
|
||||
let data = {
|
||||
myId: userId,
|
||||
vlogerId
|
||||
}
|
||||
var result = await vlogFansFollow(data)
|
||||
console.log(result)
|
||||
};
|
||||
var result = await vlogFansFollow(data);
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
me.reFreshList(vlogerId, true);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -131,13 +152,13 @@
|
||||
myId: userId,
|
||||
page: page,
|
||||
pageSize: 10
|
||||
}
|
||||
var result = await vlogQueryMyFollows(data)
|
||||
};
|
||||
var result = await vlogQueryMyFollows(data);
|
||||
if (result.data.status == 200) {
|
||||
let followsList = result.data.data.rows;
|
||||
let totalPage = result.data.data.total;
|
||||
me.followsList = me.followsList.concat(followsList);
|
||||
console.log(me.followsList)
|
||||
console.log(me.followsList);
|
||||
me.page = page;
|
||||
me.totalPage = totalPage;
|
||||
}
|
||||
@ -149,14 +170,14 @@
|
||||
return;
|
||||
}
|
||||
this.queryMyFollowList(this.page);
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.face {
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 100rpx;
|
||||
@ -165,7 +186,7 @@
|
||||
}
|
||||
|
||||
.user-name {
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
@ -178,9 +199,6 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #181b27;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line {
|
||||
@ -200,15 +218,13 @@
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.operator-wrapper {
|
||||
@ -219,15 +235,14 @@
|
||||
justify-content: center;
|
||||
background-color: #ef274d;
|
||||
border-radius: 20rpx;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
border-width: 2rpx;
|
||||
border-color: #ef274d;
|
||||
background-color: #181b27;
|
||||
|
||||
}
|
||||
|
||||
.operator-words {
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
@ -6,21 +6,29 @@
|
||||
class="user-face"
|
||||
mode="aspectFill"
|
||||
@click="changeMyFace"
|
||||
:src="myInfo.face"></image>
|
||||
:src="myInfo.face"
|
||||
></image>
|
||||
</view>
|
||||
<view class="single-line-box">
|
||||
<text class="left-lable">昵称</text>
|
||||
<view class="right-part" @click="modifyNickname">
|
||||
<view
|
||||
class="right-part"
|
||||
@click="modifyNickname"
|
||||
>
|
||||
<text class="right-content">
|
||||
{{ myInfo.nickname }}
|
||||
</text>
|
||||
<image
|
||||
class="right-arrow"
|
||||
src="/static/images/icon-right-arrow2.png"></image>
|
||||
src="/static/images/icon-right-arrow2.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="single-line-box" @click="modifyTiktokNum">
|
||||
<view
|
||||
class="single-line-box"
|
||||
@click="modifyTiktokNum"
|
||||
>
|
||||
<text class="left-lable">视频号</text>
|
||||
<view class="right-part">
|
||||
<text class="right-content">
|
||||
@ -28,57 +36,88 @@
|
||||
</text>
|
||||
<image
|
||||
class="right-arrow"
|
||||
src="/static/images/icon-right-arrow2.png"></image>
|
||||
src="/static/images/icon-right-arrow2.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="single-line-box">
|
||||
<text class="left-lable">性别</text>
|
||||
<view class="right-part" @click="modifySex">
|
||||
<text v-if="myInfo.sex == 1" class="right-content">男</text>
|
||||
<text v-else-if="myInfo.sex == 0" class="right-content">女</text>
|
||||
<text v-else class="right-content">保密</text>
|
||||
<view
|
||||
class="right-part"
|
||||
@click="modifySex"
|
||||
>
|
||||
<text
|
||||
v-if="myInfo.sex == 1"
|
||||
class="right-content"
|
||||
>
|
||||
男
|
||||
</text>
|
||||
<text
|
||||
v-else-if="myInfo.sex == 0"
|
||||
class="right-content"
|
||||
>
|
||||
女
|
||||
</text>
|
||||
<text
|
||||
v-else
|
||||
class="right-content"
|
||||
>
|
||||
保密
|
||||
</text>
|
||||
<image
|
||||
class="right-arrow"
|
||||
src="/static/images/icon-right-arrow2.png"></image>
|
||||
src="/static/images/icon-right-arrow2.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="single-line-box">
|
||||
<text class="left-lable">生日</text>
|
||||
<view class="right-part" @click="modifyBirthday">
|
||||
<view
|
||||
class="right-part"
|
||||
@click="modifyBirthday"
|
||||
>
|
||||
<text class="right-content">
|
||||
{{ getGraceDateStr(new Date(myInfo.birthday)) }}
|
||||
</text>
|
||||
<image
|
||||
class="right-arrow"
|
||||
src="/static/images/icon-right-arrow2.png"></image>
|
||||
src="/static/images/icon-right-arrow2.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="single-line-box">
|
||||
<text class="left-lable">所在地</text>
|
||||
<view class="right-part" @click="modifyLocation">
|
||||
<view
|
||||
class="right-part"
|
||||
@click="modifyLocation"
|
||||
>
|
||||
<text class="right-content">
|
||||
{{ myInfo.province == myInfo.city ? "" : myInfo.province + "·"
|
||||
}}{{ myInfo.city == "" ? "" : myInfo.city
|
||||
}}{{ myInfo.district == "" ? "" : "·" + myInfo.district }}
|
||||
{{ myInfo.province == myInfo.city ? '' : myInfo.province + '·' }}{{ myInfo.city == '' ? '' : myInfo.city
|
||||
}}{{ myInfo.district == '' ? '' : '·' + myInfo.district }}
|
||||
</text>
|
||||
<image
|
||||
class="right-arrow"
|
||||
src="/static/images/icon-right-arrow2.png"></image>
|
||||
src="/static/images/icon-right-arrow2.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="single-line-box">
|
||||
<text class="left-lable">简介</text>
|
||||
<view class="right-part" @click="modifyDescription">
|
||||
<view
|
||||
class="right-part"
|
||||
@click="modifyDescription"
|
||||
>
|
||||
<text class="right-content">
|
||||
{{ myInfo.description }}
|
||||
</text>
|
||||
<image
|
||||
class="right-arrow"
|
||||
src="/static/images/icon-right-arrow2.png"></image>
|
||||
src="/static/images/icon-right-arrow2.png"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="single-line-box">
|
||||
@ -94,94 +133,91 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import api from "@/config/api.js";
|
||||
import {
|
||||
isStrEmpty,
|
||||
dateFormat
|
||||
} from '@/utils/tools.js'
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import api from '@/config/api.js';
|
||||
import { isStrEmpty, dateFormat } from '@/utils/tools.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
myInfo: {},
|
||||
myInfo: {}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
let myInfo = storage.getVlogUserInfo()
|
||||
let myInfo = storage.getVlogUserInfo();
|
||||
if (isStrEmpty(myInfo.face)) {
|
||||
// 没头像给一个默认的
|
||||
myInfo.face = "";
|
||||
myInfo.face = '';
|
||||
}
|
||||
this.myInfo = myInfo;
|
||||
},
|
||||
methods: {
|
||||
getGraceDateStr(date) {
|
||||
return dateFormat("YYYY-mm-dd", date);
|
||||
return dateFormat('YYYY-MM-DD', date);
|
||||
},
|
||||
// 更换头像
|
||||
changeMyFace() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "myFace",
|
||||
animationType: 'fade-in',
|
||||
url: 'myFace'
|
||||
});
|
||||
},
|
||||
|
||||
// 修改昵称
|
||||
modifyNickname() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "modifyNickname",
|
||||
animationType: 'fade-in',
|
||||
url: 'modifyNickname'
|
||||
});
|
||||
},
|
||||
|
||||
// 修改慕课号
|
||||
// 修改id号
|
||||
modifyTiktokNum() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "modifyTioktokNum",
|
||||
animationType: 'fade-in',
|
||||
url: 'modifyTioktokNum'
|
||||
});
|
||||
},
|
||||
|
||||
// 修改性别
|
||||
modifySex() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "modifySex",
|
||||
animationType: 'fade-in',
|
||||
url: 'modifySex'
|
||||
});
|
||||
},
|
||||
|
||||
// 修改生日
|
||||
modifyBirthday() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "modifyBirthday",
|
||||
animationType: 'fade-in',
|
||||
url: 'modifyBirthday'
|
||||
});
|
||||
},
|
||||
|
||||
// 修改所在地
|
||||
modifyLocation() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "modifyLocation",
|
||||
animationType: 'fade-in',
|
||||
url: 'modifyLocation'
|
||||
});
|
||||
},
|
||||
|
||||
// 修改简介
|
||||
modifyDescription() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "modifyDesc",
|
||||
animationType: 'fade-in',
|
||||
url: 'modifyDesc'
|
||||
});
|
||||
},
|
||||
|
||||
// 修改密码
|
||||
modifyPassword() {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "modifyPass",
|
||||
animationType: 'fade-in',
|
||||
url: 'modifyPass'
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
1274
pages/me/vlog.nvue
Executable file → Normal file
87
pages/me/vlog_old.nvue
Executable 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>
|
@ -4,19 +4,31 @@
|
||||
class="isLogin-info-wrapper"
|
||||
:style="{ height: screenHeight + 'px' }"
|
||||
scroll-y="true"
|
||||
@scrolltolower="loadMore">
|
||||
<image class="mybg" :src="pageUserInfo.bgImg" mode="aspectFill" />
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<image
|
||||
class="mybg"
|
||||
:src="pageUserInfo.bgImg"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
|
||||
|
||||
<view class="header" :style="{ marginTop: statusBarHeight + 'px' }">
|
||||
<view
|
||||
class="header"
|
||||
:style="{ marginTop: statusBarHeight + 'px' }"
|
||||
>
|
||||
<image
|
||||
class="header-right-search"
|
||||
src="../../static/images/icon-back.png"
|
||||
@click="back()" />
|
||||
@click="back()"
|
||||
/>
|
||||
</view>
|
||||
<view class="my-info-wrapper">
|
||||
<view class="my-info">
|
||||
<image :src="pageUserInfo.face" mode="aspectFill" class="my-face" />
|
||||
<image
|
||||
:src="pageUserInfo.face"
|
||||
mode="aspectFill"
|
||||
class="my-face"
|
||||
/>
|
||||
<view class="info-wrapper">
|
||||
<text class="nickname">
|
||||
{{ pageUserInfo.nickname }}
|
||||
@ -30,10 +42,7 @@
|
||||
<view class="location">
|
||||
<text class="location-text">所在地:</text>
|
||||
<text class="location-text">
|
||||
{{ pageUserInfo.city == "" ? "中国" : "" + pageUserInfo.city
|
||||
}}{{
|
||||
pageUserInfo.district == "" ? "" : "·" + pageUserInfo.district
|
||||
}}
|
||||
{{ pageUserInfo.city == '' ? '中国' : '' + pageUserInfo.city }}{{ pageUserInfo.district == '' ? '' : '·' + pageUserInfo.district }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="sex-wrapper">
|
||||
@ -41,15 +50,18 @@
|
||||
<image
|
||||
class="sex-img"
|
||||
v-if="pageUserInfo.sex == 1"
|
||||
src="/static/images/icon-sex-boy.png" />
|
||||
src="/static/images/icon-sex-boy.png"
|
||||
/>
|
||||
<image
|
||||
class="sex-img"
|
||||
v-if="pageUserInfo.sex == 0"
|
||||
src="/static/images/icon-sex-girl.png" />
|
||||
src="/static/images/icon-sex-girl.png"
|
||||
/>
|
||||
<image
|
||||
class="sex-img"
|
||||
v-if="pageUserInfo.sex == 2"
|
||||
src="/static/images/icon-sex-secret.png" />
|
||||
src="/static/images/icon-sex-secret.png"
|
||||
/>
|
||||
<text class="astro">{{ astro }}座</text>
|
||||
</view>
|
||||
<view class="animal">
|
||||
@ -67,13 +79,19 @@
|
||||
|
||||
<view class="bottom-wrapper">
|
||||
<view class="bottom">
|
||||
<view class="bottom-item" @click="goMyFollows(pageUserInfo.id)">
|
||||
<view
|
||||
class="bottom-item"
|
||||
@click="goMyFollows(pageUserInfo.id)"
|
||||
>
|
||||
<text class="item-num">
|
||||
{{ getGraceNumber(pageUserInfo.myFollowsCounts) }}
|
||||
</text>
|
||||
<text class="item-text">关注</text>
|
||||
</view>
|
||||
<view class="bottom-item" @click="goMyFans(pageUserInfo.id)">
|
||||
<view
|
||||
class="bottom-item"
|
||||
@click="goMyFans(pageUserInfo.id)"
|
||||
>
|
||||
<text class="item-num">
|
||||
{{ getGraceNumber(pageUserInfo.myFansCounts) }}
|
||||
</text>
|
||||
@ -91,31 +109,43 @@
|
||||
<view
|
||||
v-if="isFollow && !isFan"
|
||||
@click="cancelFollow()"
|
||||
class="follow-btn">
|
||||
class="follow-btn"
|
||||
>
|
||||
<text class="follow-text">已关注</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="isFollow && isFan"
|
||||
@click="cancelFollow()"
|
||||
class="follow-btn">
|
||||
class="follow-btn"
|
||||
>
|
||||
<text class="follow-text">相互关注</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="!isFollow"
|
||||
@click="followMe()"
|
||||
class="follow-btn"
|
||||
style="background-color: #ef274d">
|
||||
style="background-color: #ef274d"
|
||||
>
|
||||
<text class="follow-text">关注我</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tab-wrapper">
|
||||
<view class="tab-item" @click="switchTab(0)">
|
||||
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 0 }">
|
||||
<view
|
||||
class="tab-item"
|
||||
@click="switchTab(0)"
|
||||
>
|
||||
<text
|
||||
class="tab-normal"
|
||||
:class="{ 'tab-selected': currentTab == 0 }"
|
||||
>
|
||||
作品
|
||||
</text>
|
||||
<view v-if="currentTab == 0" class="selected-tab"></view>
|
||||
<view
|
||||
v-if="currentTab == 0"
|
||||
class="selected-tab"
|
||||
></view>
|
||||
</view>
|
||||
<!-- <view class="tab-item" @click="switchTab(1)">
|
||||
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }">
|
||||
@ -123,29 +153,48 @@
|
||||
</text>
|
||||
<view v-if="currentTab == 1" class="selected-tab"></view>
|
||||
</view> -->
|
||||
<view class="tab-item" @click="switchTab(1)">
|
||||
<text class="tab-normal" :class="{ 'tab-selected': currentTab == 1 }">
|
||||
<view
|
||||
class="tab-item"
|
||||
@click="switchTab(1)"
|
||||
>
|
||||
<text
|
||||
class="tab-normal"
|
||||
:class="{ 'tab-selected': currentTab == 1 }"
|
||||
>
|
||||
赞过
|
||||
</text>
|
||||
<view v-if="currentTab == 1" class="selected-tab"></view>
|
||||
<view
|
||||
v-if="currentTab == 1"
|
||||
class="selected-tab"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="vlog-list">
|
||||
<block v-for="(vlog, index) in vlogList" :key="index">
|
||||
<block
|
||||
v-for="(vlog, index) in vlogList"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
class="vlog-cover"
|
||||
:src="vlog.cover || vlog.firstFrameImg"
|
||||
@click="goToVlog(vlog)"
|
||||
mode="aspectFill"></image>
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view v-if="vlogList.length == 0" class="empty">
|
||||
<view
|
||||
v-if="vlogList.length == 0"
|
||||
class="empty"
|
||||
>
|
||||
<text class="empty-text">~ 空空如也 ~</text>
|
||||
</view>
|
||||
|
||||
<view v-if="vlogList.length > 0" class="not-empty">
|
||||
<view
|
||||
v-if="vlogList.length > 0"
|
||||
class="not-empty"
|
||||
>
|
||||
<text class="not-empty-text">~ 没有更多了 ~</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -154,50 +203,35 @@
|
||||
|
||||
<script>
|
||||
let system = uni.getSystemInfoSync();
|
||||
import * as filters from "@/utils/filters.js"
|
||||
import api from "@/config/api.js";
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import {
|
||||
vlogUserInfo,
|
||||
vlogQueryDoIFollowVloger,
|
||||
vlogMyPublicList,
|
||||
vlogMyPrivateList,
|
||||
vlogMyLikedList,
|
||||
vlogMeTag,
|
||||
vlogFansCancel,
|
||||
vlogFansFollow
|
||||
} from "@/api/vlog"
|
||||
import * as filters from '@/utils/filters.js';
|
||||
import api from '@/config/api.js';
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import { vlogUserInfo, vlogQueryDoIFollowVloger, vlogMyPublicList, vlogMyPrivateList, vlogMyLikedList, vlogMeTag, vlogFansCancel, vlogFansFollow } from '@/api/vlog';
|
||||
|
||||
import {
|
||||
getAstro,
|
||||
getAnimal,
|
||||
dateFormat,
|
||||
graceNumber,
|
||||
isStrEmpty
|
||||
} from '@/utils/tools.js'
|
||||
import { getAstro, getAnimal, dateFormat, graceNumber, isStrEmpty } from '@/utils/tools.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageUserInfo: {
|
||||
id: "",
|
||||
mobile: "",
|
||||
nickname: "",
|
||||
imoocNum: "",
|
||||
face: "",
|
||||
birthday: "1998-12-31T16:00:00.000+0000",
|
||||
country: "",
|
||||
province: "",
|
||||
city: "",
|
||||
district: "",
|
||||
description: "",
|
||||
id: '',
|
||||
mobile: '',
|
||||
nickname: '',
|
||||
imoocNum: '',
|
||||
face: '',
|
||||
birthday: '1998-12-31T16:00:00.000+0000',
|
||||
country: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
description: '',
|
||||
myFollowsCounts: 0,
|
||||
myFansCounts: 0,
|
||||
totalLikeMeCounts: 0
|
||||
},
|
||||
userPageId: "",
|
||||
astro: "",
|
||||
animal: "",
|
||||
loginWords: "请登录",
|
||||
userPageId: '',
|
||||
astro: '',
|
||||
animal: '',
|
||||
loginWords: '请登录',
|
||||
|
||||
statusBarHeight: 0,
|
||||
screenHeight: 0,
|
||||
@ -206,11 +240,11 @@ export default {
|
||||
currentTab: 0,
|
||||
isFollow: false,
|
||||
isFan: false,
|
||||
isAndroid: uni.getSystemInfoSync().platform == "android",
|
||||
isAndroid: uni.getSystemInfoSync().platform == 'android',
|
||||
|
||||
page: 0,
|
||||
totalpage: 0,
|
||||
vlogList: [],
|
||||
vlogList: []
|
||||
};
|
||||
},
|
||||
async onLoad(params) {
|
||||
@ -225,61 +259,61 @@ export default {
|
||||
let userPageId = params.userPageId;
|
||||
if (isStrEmpty(userPageId)) {
|
||||
uni.showToast({
|
||||
title: "出错啦~",
|
||||
icon: " none",
|
||||
duration: 2000,
|
||||
title: '出错啦~',
|
||||
icon: ' none',
|
||||
duration: 2000
|
||||
});
|
||||
settimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
delta: 1
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
me.userPageId = userPageId;
|
||||
var result = await vlogUserInfo(userPageId)
|
||||
console.log(result)
|
||||
var result = await vlogUserInfo(userPageId);
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
me.pageUserInfo = result.data.data;
|
||||
me.setBasicUserInfo(me.pageUserInfo);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
// this.switchTab(0);
|
||||
this.myList(0, 'myPublicList', true);
|
||||
let myUserId = "";
|
||||
let info = storage.getVlogUserInfo()
|
||||
let myUserId = '';
|
||||
let info = storage.getVlogUserInfo();
|
||||
if (info != null) {
|
||||
myUserId = info.id;
|
||||
}
|
||||
|
||||
if (!isStrEmpty(myUserId)) {
|
||||
// 查询我是否关注博主
|
||||
var result = await vlogQueryDoIFollowVloger({myId:myUserId,vlogerId:userPageId})
|
||||
console.log(result)
|
||||
var result = await vlogQueryDoIFollowVloger({ myId: myUserId, vlogerId: userPageId });
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
me.isFollow = result.data.data;
|
||||
// me.isFan = result.data.data;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
// 查询博主是否关注我
|
||||
var result2 = await vlogQueryDoIFollowVloger({myId:userPageId,vlogerId:myUserId})
|
||||
var result2 = await vlogQueryDoIFollowVloger({ myId: userPageId, vlogerId: myUserId });
|
||||
if (result2.data.status == 200) {
|
||||
me.isFan = result2.data.data;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result2.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -288,8 +322,8 @@ export default {
|
||||
setBasicUserInfo(myUserInfo) {
|
||||
// 根据生日判断星座
|
||||
let birthday = myUserInfo.birthday;
|
||||
let birth = dateFormat("YYYY-mm-dd", new Date(birthday));
|
||||
let birthArr = birth.split("-");
|
||||
let birth = dateFormat('YYYY-MM-DD', new Date(birthday));
|
||||
let birthArr = birth.split('-');
|
||||
let year = birthArr[0];
|
||||
let month = birthArr[1];
|
||||
let day = birthArr[2];
|
||||
@ -323,14 +357,14 @@ export default {
|
||||
let me = this;
|
||||
page = page + 1;
|
||||
me.page = page;
|
||||
let userId = me.userPageId;;
|
||||
var result = await vlogMeTag(requrl, page, 20, userId)
|
||||
let userId = me.userPageId;
|
||||
var result = await vlogMeTag(requrl, page, 20, userId);
|
||||
if (result.data.status == 200) {
|
||||
let vlogList = result.data.data.rows;
|
||||
console.log(vlogList)
|
||||
console.log(vlogList);
|
||||
let toalPage = result.data.data.total;
|
||||
if (init) {
|
||||
me.vlogList = vlogList
|
||||
me.vlogList = vlogList;
|
||||
} else {
|
||||
me.vlogList = me.vlogList.concat(vlogList);
|
||||
}
|
||||
@ -340,14 +374,14 @@ export default {
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
async cancelFollow() {
|
||||
let me = this;
|
||||
let vlogerId = me.userPageId;
|
||||
let userId = storage.getVlogUserInfo().id;
|
||||
var result = await vlogFansCancel({myId:userId,vlogerId:vlogerId})
|
||||
var result = await vlogFansCancel({ myId: userId, vlogerId: vlogerId });
|
||||
if (result.data.status == 200) {
|
||||
me.isFollow = false;
|
||||
// uni.setStorageSync("justCancelVlogerId", vlogerId);
|
||||
@ -357,8 +391,8 @@ export default {
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -368,7 +402,7 @@ export default {
|
||||
|
||||
let vlogerId = me.userPageId;
|
||||
let userId = myUserInfo.id;
|
||||
var result = await vlogFansFollow({myId:userId,vlogerId:vlogerId})
|
||||
var result = await vlogFansFollow({ myId: userId, vlogerId: vlogerId });
|
||||
if (result.data.status == 200) {
|
||||
me.isFollow = true;
|
||||
// uni.setStorageSync("justFollowVlogerId", vlogerId);
|
||||
@ -378,8 +412,8 @@ export default {
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -395,36 +429,32 @@ export default {
|
||||
// url: "../vlog/vlog?type=mine&isNeedPage=1&vlogId=" + vlogId,
|
||||
// });
|
||||
uni.navigateTo({
|
||||
url: "/pages/me/vlog?vlogId=" + vlogId,
|
||||
url: '/pages/me/vlog?vlogId=' + vlogId
|
||||
});
|
||||
},
|
||||
goMyFans(userId) {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "myFans?userId=" + userId,
|
||||
animationType: 'fade-in',
|
||||
url: 'myFans?userId=' + userId
|
||||
});
|
||||
},
|
||||
|
||||
goMyFollows(userId) {
|
||||
uni.navigateTo({
|
||||
animationType: "fade-in",
|
||||
url: "myFollows?userId=" + userId,
|
||||
animationType: 'fade-in',
|
||||
url: 'myFollows?userId=' + userId
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #000000;
|
||||
|
||||
.isLogin-info-wrapper {
|
||||
.header-right-search {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -435,28 +465,40 @@ export default {
|
||||
align-items: center;
|
||||
padding-left: 40rpx;
|
||||
padding-right: 40rpx;
|
||||
.header-right-search {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.mybg {
|
||||
width: 750rpx;
|
||||
height: 750rpx;
|
||||
box-shadow: inset 0 -150px 180px #313030;
|
||||
}
|
||||
|
||||
.my-info-wrapper {
|
||||
position: relative;
|
||||
left: 30rpx;
|
||||
top: -560rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1000rpx;
|
||||
.my-info {
|
||||
.tiktok-num {
|
||||
font-size: 10px;
|
||||
color: #ffffff;
|
||||
font-weight: 300;
|
||||
}
|
||||
.tiktok-num-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.location-text {
|
||||
line-height: 20px;
|
||||
color: #ffffff;
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.nickname {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.location {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 20px;
|
||||
margin-top: 2px;
|
||||
font-size: 1px;
|
||||
}
|
||||
.my-face {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
@ -464,41 +506,19 @@ export default {
|
||||
border-width: 1px;
|
||||
border-color: #f1f1f1;
|
||||
}
|
||||
.info-wrapper {
|
||||
margin-left: 30rpx;
|
||||
padding-top: 20rpx;
|
||||
width: 500rpx;
|
||||
.nickname {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
.sex-img {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.tiktok-num-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.tiktok-num {
|
||||
.astro {
|
||||
font-size: 10px;
|
||||
color: #ffffff;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.location {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 20px;
|
||||
margin-top: 2px;
|
||||
font-size: 1px;
|
||||
.location-text {
|
||||
line-height: 20px;
|
||||
color: #ffffff;
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
font-weight: bold;
|
||||
margin-left: 6rpx;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.sex-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 10rpx;
|
||||
.constellation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -508,19 +528,13 @@ export default {
|
||||
width: 130rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 10px;
|
||||
.sex-img {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
align-self: center;
|
||||
}
|
||||
.astro {
|
||||
.animal-text {
|
||||
font-size: 10px;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
margin-left: 6rpx;
|
||||
align-self: center;
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
.animal {
|
||||
margin-left: 10rpx;
|
||||
@ -532,17 +546,28 @@ export default {
|
||||
width: 60rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 10px;
|
||||
.animal-text {
|
||||
font-size: 10px;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
.sex-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.info-wrapper {
|
||||
margin-left: 30rpx;
|
||||
padding-top: 20rpx;
|
||||
width: 500rpx;
|
||||
}
|
||||
.my-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.my-info-wrapper {
|
||||
position: relative;
|
||||
left: 30rpx;
|
||||
top: -560rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1000rpx;
|
||||
}
|
||||
.desc {
|
||||
position: relative;
|
||||
@ -551,40 +576,34 @@ export default {
|
||||
font-size: 14px;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.bottom-wrapper {
|
||||
position: relative;
|
||||
top: -510rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.bottom-item {
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.item-num {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
}
|
||||
.item-text {
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
}
|
||||
.bottom-item {
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.edit {
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.follow-text {
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
align-items: center;
|
||||
}
|
||||
.follow-btn {
|
||||
margin-right: 20rpx;
|
||||
border-width: 1px;
|
||||
@ -597,34 +616,25 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
.follow-text {
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
}
|
||||
.edit {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-wrapper {
|
||||
.bottom-wrapper {
|
||||
position: relative;
|
||||
top: -480rpx;
|
||||
height: 40px;
|
||||
background-color: #171825;
|
||||
top: -510rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-top: 3px;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
.tab-item {
|
||||
width: 250rpx;
|
||||
align-self: center;
|
||||
}
|
||||
.tab-normal {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
color: #808080;
|
||||
}
|
||||
.tab-selected {
|
||||
@ -637,7 +647,32 @@ export default {
|
||||
border-radius: 6rpx;
|
||||
background-color: #ef274d;
|
||||
}
|
||||
.vlog-cover {
|
||||
align-items: center;
|
||||
width: 248rpx;
|
||||
height: 360rpx;
|
||||
border-width: 1rpx;
|
||||
}
|
||||
.tab-item {
|
||||
width: 250rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.tab-wrapper {
|
||||
position: relative;
|
||||
top: -480rpx;
|
||||
height: 40px;
|
||||
background-color: #171825;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-top: 3px;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
.empty-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
.vlog-list {
|
||||
position: relative;
|
||||
@ -647,12 +682,6 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
background-color: #000000;
|
||||
.vlog-cover {
|
||||
align-self: center;
|
||||
width: 248rpx;
|
||||
height: 360rpx;
|
||||
border-width: 1rpx;
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
background-color: #000000;
|
||||
@ -663,13 +692,11 @@ export default {
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: -480rpx;
|
||||
.empty-text {
|
||||
}
|
||||
.not-empty-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.not-empty {
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
@ -677,11 +704,15 @@ export default {
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: -260rpx;
|
||||
.not-empty-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.isLogin-info-wrapper {
|
||||
}
|
||||
.page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
@ -63,7 +63,7 @@
|
||||
<textarea
|
||||
class="vlog-content"
|
||||
placeholder-style="color: #9798a0;"
|
||||
placeholder="添加合适的描述内容~"
|
||||
placeholder="添加合适的描述内容~最多60个字符"
|
||||
:value="title"
|
||||
:model="title"
|
||||
maxlength="60"
|
||||
|
@ -4,6 +4,7 @@
|
||||
:id="pageId"
|
||||
>
|
||||
<swiper
|
||||
:disable-touch="!canSwipe"
|
||||
ref="swiper1"
|
||||
id="tab-bar-view"
|
||||
style="my-swiper"
|
||||
@ -15,61 +16,21 @@
|
||||
@onAnimationEnd="animationfinish"
|
||||
>
|
||||
<swiper-item>
|
||||
<video-local
|
||||
ref="videoLocal"
|
||||
:pid="1"
|
||||
:parentId="pageId"
|
||||
:screenHeight="screenHeight"
|
||||
:progressFlag="isDraw_lo"
|
||||
:playStatus="playLocalStatus"
|
||||
:videoList="videoList"
|
||||
:refreshList="refreshList"
|
||||
:pagingList="pagingList"
|
||||
@showLoading="showLoading"
|
||||
@hideLoading="hideLoading"
|
||||
@displayVideoPaging="displayVideoPaging"
|
||||
></video-local>
|
||||
<video-local ref="videoLocal"></video-local>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view
|
||||
<!-- <view
|
||||
v-if="myUserInfo == null"
|
||||
ref="videoFollowComp"
|
||||
class="my-follow"
|
||||
:style="{ height: screenHeight + 'px' }"
|
||||
>
|
||||
<text class="warn-info">请登录后查看!</text>
|
||||
</view>
|
||||
<video-follow-comp
|
||||
ref="videoFollowComp"
|
||||
:pid="2"
|
||||
:parentId="pageId"
|
||||
:screenHeight="screenHeight"
|
||||
:progressFlag="isDraw_gz"
|
||||
:playFollowStatus="playFollowStatus"
|
||||
:videoList="videoList"
|
||||
:refreshList="refreshList"
|
||||
:pagingList="pagingList"
|
||||
@showLoading="showLoading"
|
||||
@hideLoading="hideLoading"
|
||||
@letFollowVideoPause="letFollowVideoPause"
|
||||
@displayVideoPaging="displayVideoPaging"
|
||||
></video-follow-comp>
|
||||
</view> -->
|
||||
<video-follow-comp ref="videoFollowComp"></video-follow-comp>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<video-comp
|
||||
ref="videoComp"
|
||||
:pid="3"
|
||||
:parentId="pageId"
|
||||
:screenHeight="screenHeight"
|
||||
:progressFlag="isDraw_tj"
|
||||
:playStatus="playStatus"
|
||||
:videoList="videoList"
|
||||
:refreshList="refreshList"
|
||||
:pagingList="pagingList"
|
||||
@showLoading="showLoading"
|
||||
@hideLoading="hideLoading"
|
||||
@displayVideoPaging="displayVideoPaging"
|
||||
></video-comp>
|
||||
<video-comp ref="videoComp"></video-comp>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
@ -159,9 +120,10 @@ const TAB_PRELOAD_OFFSET = 1;
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import { vlogList } from '@/api/vlog';
|
||||
import { isStrEmpty } from '@/utils/tools.js';
|
||||
import videoComp from '@/components/vlog/videoComp';
|
||||
import videoLocal from '@/components/vlog/videoLocal';
|
||||
import videoFollowComp from '@/components/vlog/videoFollowComp';
|
||||
// import videoComp from '@/components/vlog/videoComp';
|
||||
import videoComp from '@/components/vlog/tuijian.nvue';
|
||||
import videoLocal from '@/components/vlog/local.nvue';
|
||||
import videoFollowComp from '@/components/vlog/guanzhu.nvue';
|
||||
import config from '@/config/config';
|
||||
|
||||
export default {
|
||||
@ -172,6 +134,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
channel: null,
|
||||
canSwipe: true,
|
||||
isTap: false,
|
||||
isLoading: false,
|
||||
statusBarHeight: system.statusBarHeight,
|
||||
@ -215,7 +179,19 @@ export default {
|
||||
isDraw_gz: false
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() {
|
||||
this.channel = new BroadcastChannel('video-progress');
|
||||
|
||||
this.channel.onmessage = (event) => {
|
||||
console.log(event);
|
||||
const { type, data } = event.data;
|
||||
if (type === 'drag-start') {
|
||||
this.canSwipe = false;
|
||||
} else if (type === 'drag-end') {
|
||||
this.canSwipe = true;
|
||||
}
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
this._lastTabIndex = 0;
|
||||
this.swiperWidth = 0;
|
||||
@ -228,71 +204,37 @@ export default {
|
||||
clearTimeout(timer);
|
||||
}, 300);
|
||||
},
|
||||
onTabItemTap: function (e) {
|
||||
// console.log(e);
|
||||
// let tabIndex = e.index;
|
||||
// this.playStatus = tabIndex === 0 ? true : false;
|
||||
// 切换视频要做暂停或播放的判断
|
||||
let me = this;
|
||||
let curIndex = me.curIndex;
|
||||
if (curIndex == 0) {
|
||||
me.playLocalStatus = true;
|
||||
me.playFollowStatus = false;
|
||||
me.playStatus = false;
|
||||
} else if (curIndex == 1) {
|
||||
me.playLocalStatus = false;
|
||||
me.playFollowStatus = true;
|
||||
me.playStatus = false;
|
||||
} else if (curIndex == 2) {
|
||||
me.playLocalStatus = false;
|
||||
me.playFollowStatus = false;
|
||||
me.playStatus = true;
|
||||
onTabItemTap(e) {
|
||||
// 点击tab菜单
|
||||
console.log(e);
|
||||
let tabIndex = e.index;
|
||||
if (tabIndex == 0) {
|
||||
var prop = this.pageList[this.curIndex];
|
||||
this.$refs[prop].showVd();
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
var prop = this.pageList[this.curIndex];
|
||||
this.getLocation();
|
||||
let me = this;
|
||||
me.myUserInfo = storage.getVlogUserInfo();
|
||||
if (uni.getStorageSync('refreshVlogIndex') == '1') {
|
||||
storage.setRefreshVlogIndex('0'); //不需要刷新
|
||||
this.$refs.videoComp.displayVideoPaging(1, true);
|
||||
this.$refs.videoFollowComp.displayVideoPaging(1, true);
|
||||
this.$refs.videoLocal.displayVideoPaging(1, true);
|
||||
this.myUserInfo = storage.getVlogUserInfo();
|
||||
if (storage.getRefreshVlogIndex() == '1') {
|
||||
// 登录后需要刷新数据
|
||||
for (var i = 0; i < this.pageList.length; i++) {
|
||||
this.$refs[i].dataList = []; //所有数据清空
|
||||
}
|
||||
|
||||
// 如果当前没有list, 则relaunch
|
||||
if (this.$refs.videoComp != undefined) {
|
||||
let playerList = this.$refs.videoComp.playerList;
|
||||
if (playerList != undefined && playerList.length == 0) {
|
||||
this.$refs.videoComp.displayVideoPaging(1, true);
|
||||
}
|
||||
}
|
||||
|
||||
if (me.curIndex == 0) {
|
||||
me.playLocalStatus = true;
|
||||
}
|
||||
if (me.curIndex == 1) {
|
||||
me.playFollowStatus = true;
|
||||
}
|
||||
if (me.curIndex == 2) {
|
||||
me.playStatus = true;
|
||||
this.$refs[prop].get(); //只初始化当前所在位置的数据
|
||||
storage.setRefreshVlogIndex('0'); //初始完数据修改状态不需要刷新
|
||||
} else {
|
||||
try {
|
||||
this.$refs[prop].showVd();
|
||||
} catch {}
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
var me = this;
|
||||
// 显示和隐藏,需要判断根据不同tab做暂停或者隐藏
|
||||
if (me.curIndex == 0) {
|
||||
me.playLocalStatus = false;
|
||||
me.isDraw_lo = false;
|
||||
}
|
||||
if (me.curIndex == 1) {
|
||||
me.playFollowStatus = false;
|
||||
me.isDraw_gz = false;
|
||||
}
|
||||
if (me.curIndex == 2) {
|
||||
me.playStatus = false;
|
||||
me.isDraw_tj = false;
|
||||
}
|
||||
var prop = this.pageList[this.curIndex];
|
||||
try {
|
||||
this.$refs[prop].hideVd();
|
||||
} catch {}
|
||||
},
|
||||
|
||||
// 当前页下拉刷新
|
||||
@ -340,24 +282,24 @@ export default {
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
storage.setCityCode('');
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '位置信息解析失败'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
storage.setCityCode('');
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '获取位置信息失败'
|
||||
});
|
||||
// uni.showModal({
|
||||
// title:'提示',
|
||||
// content:'获取位置信息失败',
|
||||
// showCancel:false,
|
||||
// success: (res) => {
|
||||
// if(res.confirm){
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -423,16 +365,6 @@ export default {
|
||||
},
|
||||
|
||||
onswiperscroll(e) {
|
||||
this.isDraw_gz = false;
|
||||
this.isDraw_lo = false;
|
||||
this.isDraw_tj = false;
|
||||
// if (this.playStatus == true) {
|
||||
// this.playStatus = this._lastTabIndex == 2 ? false : true;
|
||||
// }
|
||||
|
||||
// this.playFollowStatus = this._lastTabIndex == 1 ? false : true;
|
||||
// this.playLocalStatus = this._lastTabIndex == 0 ? false : true;
|
||||
|
||||
var offsetX = e.detail.dx;
|
||||
var preloadIndex = this._lastTabIndex;
|
||||
if (offsetX > TAB_PRELOAD_OFFSET) {
|
||||
@ -449,21 +381,8 @@ export default {
|
||||
}
|
||||
// 切换失败
|
||||
if (preloadIndex === this._lastTabIndex || preloadIndex < 0 || preloadIndex > this.pageList.length - 1) {
|
||||
// 是否有视频数据
|
||||
if (obj.playerList.length === 0) {
|
||||
// this.loadTabData(preloadIndex);
|
||||
this.isDraw_gz = false;
|
||||
this.isDraw_lo = false;
|
||||
this.isDraw_tj = false;
|
||||
} else {
|
||||
this.isDraw_gz = preloadIndex == 1 ? true : false;
|
||||
this.isDraw_lo = preloadIndex == 0 ? true : false;
|
||||
this.isDraw_tj = preloadIndex == 2 ? true : false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// console.log(this.tabListSize)
|
||||
var percentage = Math.abs(this.swiperWidth / offsetX);
|
||||
var currentSize = this.tabListSize[this._lastTabIndex];
|
||||
var preloadSize = this.tabListSize[preloadIndex];
|
||||
@ -475,6 +394,23 @@ export default {
|
||||
let index = e.detail.current;
|
||||
console.log('当前索引' + index);
|
||||
console.log('之前的索引' + this._lastTabIndex);
|
||||
if (index != this._lastTabIndex) {
|
||||
// 成功切换
|
||||
var beforeProp = this.pageList[this._lastTabIndex];
|
||||
var indexProp = this.pageList[index];
|
||||
if (this.$refs[indexProp].dataList.length == 0) {
|
||||
// 初始化数据
|
||||
try {
|
||||
this.$refs[indexProp].get();
|
||||
} catch {}
|
||||
}
|
||||
try {
|
||||
this.$refs[beforeProp].hideVd();
|
||||
} catch {}
|
||||
try {
|
||||
this.$refs[indexProp].showVd();
|
||||
} catch {}
|
||||
}
|
||||
this._lastTabIndex = index;
|
||||
if (this._touchTabIndex === index) {
|
||||
this.isTap = false;
|
||||
@ -483,13 +419,6 @@ export default {
|
||||
if (!this.tabListSize[index]) {
|
||||
return;
|
||||
} else {
|
||||
// this.playStatus = index == 2 ? false : true;
|
||||
// this.playFollowStatus = index == 1 ? true : false;
|
||||
// this.playLocalStatus = index == 0 ? true : false;
|
||||
this.isDraw_gz = index == 1 ? true : false;
|
||||
this.isDraw_lo = index == 0 ? true : false;
|
||||
this.isDraw_tj = index == 2 ? true : false;
|
||||
|
||||
this.updateIndicator(this.tabListSize[index].left, this.tabListSize[index].width);
|
||||
}
|
||||
},
|
||||
@ -503,45 +432,10 @@ export default {
|
||||
if (this.tabIndex === index) {
|
||||
return;
|
||||
}
|
||||
// console.dir(this.$refs)
|
||||
let props = this.pageList[index];
|
||||
console.log(props);
|
||||
console.log(index);
|
||||
let obj = this.$refs[props];
|
||||
// if (obj.playerList.length === 0) {
|
||||
// var info = storage.getVlogUserInfo() || null
|
||||
// if(info!=null&&index==0){
|
||||
// obj.displayVideoPaging(this.page + 1, true);
|
||||
// }
|
||||
// }
|
||||
|
||||
obj.setScrollRef(this._headHeight);
|
||||
|
||||
console.log(this.cacheTab);
|
||||
// 缓存 tabId
|
||||
if (obj.playerList.length > MAX_CACHE_DATA) {
|
||||
let isExist = this.cacheTab.indexOf(this.tabIndex);
|
||||
if (isExist < 0) {
|
||||
this.cacheTab.push(this.tabIndex);
|
||||
}
|
||||
}
|
||||
this.tabIndex = index;
|
||||
this.curIndex = index;
|
||||
this.scrollTabTo(index);
|
||||
this.scrollInto = this.tabList[index].id;
|
||||
|
||||
// 释放 tabId
|
||||
if (this.cacheTab.length > MAX_CACHE_PAGE) {
|
||||
let cacheIndex = this.cacheTab[0];
|
||||
this.clearTabData(cacheIndex);
|
||||
this.cacheTab.splice(0, 1);
|
||||
}
|
||||
// const el = this.$refs['tabitem' + index][0];
|
||||
// animation.transition(el, {
|
||||
// duration: 3000, //ms
|
||||
// timingFunction: 'ease',
|
||||
// delay: 1000 //ms
|
||||
// });
|
||||
},
|
||||
scrollTabTo(index) {
|
||||
console.log(index);
|
||||
@ -566,12 +460,6 @@ export default {
|
||||
var current = e.detail.current;
|
||||
this.curIndex = current;
|
||||
this.tabIndex = current;
|
||||
let timer = setTimeout(() => {
|
||||
this.playLocalStatus = this.curIndex === 0 ? true : false;
|
||||
this.playFollowStatus = this.curIndex === 1 ? true : false;
|
||||
this.playStatus = this.curIndex === 2 ? true : false;
|
||||
clearTimeout(timer);
|
||||
}, 10);
|
||||
},
|
||||
|
||||
// 下拉刷新,改变head的字样显示
|
||||
@ -580,9 +468,6 @@ export default {
|
||||
},
|
||||
hideLoading() {
|
||||
this.isLoading = false;
|
||||
},
|
||||
letFollowVideoPause() {
|
||||
this.playFollowStatus = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
771
pages/tabbar/vlog/index_old.nvue
Normal 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
After Width: | Height: | Size: 12 KiB |
BIN
static/douyin/atuser.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
static/douyin/biaoqing-2.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
static/douyin/biaoqing.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
static/douyin/chacha-4.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
BIN
static/douyin/cuowu.png
Normal file
After Width: | Height: | Size: 5.9 KiB |
BIN
static/douyin/dianzan-6.png
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
static/douyin/dianzan-7.png
Normal file
After Width: | Height: | Size: 6.1 KiB |
BIN
static/douyin/gif-2.png
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
static/douyin/jia-9.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
static/douyin/jianpan.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
static/douyin/shanchu-3.png
Normal file
After Width: | Height: | Size: 2.6 KiB |
BIN
static/douyin/shangyi.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
static/douyin/sousuo-7.png
Normal file
After Width: | Height: | Size: 4.1 KiB |
BIN
static/douyin/time.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
static/douyin/xianxing.png
Normal file
After Width: | Height: | Size: 3.6 KiB |
BIN
static/douyin/you-3.png
Normal file
After Width: | Height: | Size: 4.5 KiB |
BIN
static/douyin/zfxsc.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
static/images/link.png
Normal file
After Width: | Height: | Size: 3.5 KiB |
BIN
static/images/more.png
Normal file
After Width: | Height: | Size: 3.5 KiB |
BIN
static/img/index/aixining.png
Normal file
After Width: | Height: | Size: 130 KiB |
BIN
static/img/index/bfq.png
Normal file
After Width: | Height: | Size: 7.9 KiB |
BIN
static/img/index/down.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
static/img/index/layers.png
Normal file
After Width: | Height: | Size: 8.7 KiB |
BIN
static/img/index/liaotian-2.png
Normal file
After Width: | Height: | Size: 6.2 KiB |
BIN
static/img/index/logins.gif
Normal file
After Width: | Height: | Size: 43 KiB |
BIN
static/img/index/pause.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
static/img/index/play.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
static/img/index/share-fill.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
static/img/index/up.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
static/img/index/voiceclose.png
Normal file
After Width: | Height: | Size: 5.1 KiB |
BIN
static/img/index/voiceopen.png
Normal file
After Width: | Height: | Size: 5.8 KiB |
BIN
static/img/index/xin-2.png
Normal file
After Width: | Height: | Size: 4.7 KiB |
BIN
static/img/index/xin-3.png
Normal file
After Width: | Height: | Size: 7.4 KiB |
BIN
static/img/index/xin.png
Normal file
After Width: | Height: | Size: 7.4 KiB |
@ -11,7 +11,9 @@
|
||||
"com.tencent.timpush:xiaomi:8.5.6864",
|
||||
"com.tencent.timpush:oppo:8.5.6864",
|
||||
"com.tencent.timpush:meizu:8.5.6864",
|
||||
"com.tencent.timpush:fcm:8.5.6864"
|
||||
"com.tencent.timpush:fcm:8.5.6864",
|
||||
"com.tencent.timpush:honor:8.5.6864",
|
||||
"com.tencent.timpush:vivo:8.5.6864"
|
||||
],
|
||||
"project": {
|
||||
"plugins": [
|
||||
|
@ -63,7 +63,7 @@
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
color: #3b4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
@ -122,7 +122,7 @@
|
||||
}
|
||||
|
||||
.commentBoxBlack {
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
background-color: #151515;
|
||||
}
|
||||
|
||||
@ -192,7 +192,7 @@
|
||||
|
||||
.writer-words {
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -212,115 +212,162 @@
|
||||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title">
|
||||
<image src="/static/images/icon-close.png" class="icon-close-left"></image>
|
||||
<image
|
||||
src="/static/images/icon-close.png"
|
||||
class="icon-close-left"
|
||||
></image>
|
||||
<text class="uni-share-title-text">{{ getGraceNumber(thisVlogTotalComentCounts) }}条评论</text>
|
||||
<image src="/static/images/icon-close.png" class="icon-close-right" @click="close"></image>
|
||||
<image
|
||||
src="/static/images/icon-close.png"
|
||||
class="icon-close-right"
|
||||
@click="close"
|
||||
></image>
|
||||
</view>
|
||||
<view class="uni-share-content">
|
||||
<!-- <view class="uni-share-content-box"> -->
|
||||
<view class="" style="height: 800rpx;">
|
||||
<scroll-view class="all-comments" :style="{width: screenWidth + 'px'}" scroll-y="true"
|
||||
lower-threshold="150" @scrolltolower="loadMore" :scroll-top="scrollTop">
|
||||
<view v-for="(commentContent, index) in commentList" :key="index" :data-index="index"
|
||||
:class="{active : index == activeIndex}" @touchstart="touchstartComment(index)"
|
||||
<view
|
||||
class=""
|
||||
style="height: 800rpx"
|
||||
>
|
||||
<scroll-view
|
||||
class="all-comments"
|
||||
:style="{ width: screenWidth + 'px' }"
|
||||
scroll-y="true"
|
||||
lower-threshold="150"
|
||||
@scrolltolower="loadMore"
|
||||
:scroll-top="scrollTop"
|
||||
>
|
||||
<view
|
||||
v-for="(commentContent, index) in commentList"
|
||||
:key="index"
|
||||
:data-index="index"
|
||||
:class="{ active: index == activeIndex }"
|
||||
@touchstart="touchstartComment(index)"
|
||||
@touchend="touchendComment()"
|
||||
@longpress="deleteComment(commentContent.commentUserId, commentContent.commentId)">
|
||||
<view class="comments-wrapper"
|
||||
style="margin-left: 16rpx;margin-top: 16rpx;margin-right: 16rpx;">
|
||||
@longpress="deleteComment(commentContent.commentUserId, commentContent.commentId)"
|
||||
>
|
||||
<view
|
||||
class="comments-wrapper"
|
||||
style="margin-left: 16rpx; margin-top: 16rpx; margin-right: 16rpx"
|
||||
>
|
||||
<view class="comments-wrapper-sub-up">
|
||||
<view class="vlogger-wrapper">
|
||||
<image :src="commentContent.commentUserFace" class="img-face"></image>
|
||||
<view style="margin-left: 10px;width: 456rpx;">
|
||||
<view style="display: flex;flex-direction: row;">
|
||||
<image
|
||||
:src="commentContent.commentUserFace"
|
||||
class="img-face"
|
||||
></image>
|
||||
<view style="margin-left: 10px; width: 456rpx">
|
||||
<view style="display: flex; flex-direction: row">
|
||||
<text style="font-size: 30rpx; color: #878585; align-self: center">{{ commentContent.commentUserNickname }}</text>
|
||||
<view
|
||||
v-if="commentContent.vlogerId == thisVlogerId"
|
||||
class="tag-writer"
|
||||
style="align-self: center"
|
||||
>
|
||||
<text
|
||||
style="font-size: 30rpx;color: #878585;align-self: center;">{{commentContent.commentUserNickname}}</text>
|
||||
<view v-if="commentContent.vlogerId == thisVlogerId" class="tag-writer"
|
||||
style="align-self: center;">
|
||||
<text class="writer-words" style="align-self: center;">作者</text>
|
||||
class="writer-words"
|
||||
style="align-self: center"
|
||||
>
|
||||
作者
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<image
|
||||
v-if="commentContent.replyedUserNickname != null && commentContent.replyedUserNickname != ''"
|
||||
src="/static/images/icon-right-arrow3.png" class=""
|
||||
style="opacity: 0.8;width: 40rpx;height: 40rpx;margin-left: 16rpx;margin-right: 10rpx;align-self: center;">
|
||||
</image>
|
||||
src="/static/images/icon-right-arrow3.png"
|
||||
class=""
|
||||
style="opacity: 0.8; width: 40rpx; height: 40rpx; margin-left: 16rpx; margin-right: 10rpx; align-self: center"
|
||||
></image>
|
||||
<text
|
||||
v-if="commentContent.replyedUserNickname != null && commentContent.replyedUserNickname != ''"
|
||||
style="font-size: 30rpx;color: #878585;align-self: center;">{{commentContent.replyedUserNickname}}</text>
|
||||
style="font-size: 30rpx; color: #878585; align-self: center"
|
||||
>
|
||||
{{ commentContent.replyedUserNickname }}
|
||||
</text>
|
||||
</view>
|
||||
<text
|
||||
style="font-size: 32rpx;color: #FFFFFF;margin-top: 2px;">{{commentContent.content}}</text>
|
||||
<text style="font-size: 32rpx; color: #ffffff; margin-top: 2px">{{ commentContent.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;flex-direction: column;width: 26px;">
|
||||
<image v-if="commentContent.isLike == 1" src="/static/images/icon-comment-like.png"
|
||||
class="like-or-not" style="align-self: center;"
|
||||
@click="unlike(commentContent.commentUserId, commentContent.commentId, index)">
|
||||
</image>
|
||||
<image v-if="commentContent.isLike == 0"
|
||||
src="/static/images/icon-comment-unlike.png" class="like-or-not"
|
||||
style="align-self: center;"
|
||||
@click="like(commentContent.commentUserId, commentContent.commentId, index)">
|
||||
</image>
|
||||
<text
|
||||
style="font-size: 22rpx;color: #878585;align-self: center;">{{commentContent.likeCounts}}</text>
|
||||
<view style="display: flex; flex-direction: column; width: 26px">
|
||||
<image
|
||||
v-if="commentContent.isLike == 1"
|
||||
src="/static/images/icon-comment-like.png"
|
||||
class="like-or-not"
|
||||
style="align-self: center"
|
||||
@click="unlike(commentContent.commentUserId, commentContent.commentId, index)"
|
||||
></image>
|
||||
<image
|
||||
v-if="commentContent.isLike == 0"
|
||||
src="/static/images/icon-comment-unlike.png"
|
||||
class="like-or-not"
|
||||
style="align-self: center"
|
||||
@click="like(commentContent.commentUserId, commentContent.commentId, index)"
|
||||
></image>
|
||||
<text style="font-size: 22rpx; color: #878585; align-self: center">{{ commentContent.likeCounts }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comments-wrapper-sub-down">
|
||||
<image src="/static/face/face-arrow-1.png" class="img-face" style="opacity: 0;"></image>
|
||||
<image
|
||||
src="/static/face/face-arrow-1.png"
|
||||
class="img-face"
|
||||
style="opacity: 0"
|
||||
></image>
|
||||
<text style="font-size: 30rpx; color: #878585; margin-left: 10px">{{ getGraceDateBeforeNow(commentContent.createTime) }}</text>
|
||||
<text
|
||||
style="font-size: 30rpx;color: #878585;margin-left: 10px;">{{getGraceDateBeforeNow(commentContent.createTime)}}</text>
|
||||
<text style="font-size: 30rpx;color: #878585;margin-left: 20px;"
|
||||
@click="replyComment(commentContent.commentId, commentContent.commentUserNickname)">回复</text>
|
||||
style="font-size: 30rpx; color: #878585; margin-left: 20px"
|
||||
@click="replyComment(commentContent.commentId, commentContent.commentUserNickname)"
|
||||
>
|
||||
回复
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- TODO: 判断总评论数和当前list中数量是否一致,如果一致,则显然如下 -->
|
||||
<view
|
||||
style="display: flex;flex-direction: row;justify-content: center;margin-top: 50rpx;height: 100rpx;">
|
||||
<text style="color: #444446;font-size: 13px;">{{bottomTxt}}</text>
|
||||
<view style="display: flex; flex-direction: row; justify-content: center; margin-top: 50rpx; height: 100rpx">
|
||||
<text style="color: #444446; font-size: 13px">{{ bottomTxt }}</text>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 评论输入框 -->
|
||||
<view class="comment-wrapper" v-if="isLogin"
|
||||
:class="{commentWrapperBlack: commentWrapperBlack, commentWrapperWhite: commentWrapperWhite}">
|
||||
<input class="comment-box" :class="{commentBoxBlack: commentBoxBlack, commentBoxWhite: commentBoxWhite}"
|
||||
placeholder-class="comment-box-placeholder" :style="{width: screenWidth-70 + 'px'}"
|
||||
:placeholder="placeholder" cursor-spacing="10px" v-model="currentComment" confirm-type="done"
|
||||
:focus="commentFocus" @focus="typingComment" @blur="noTypingComment">
|
||||
<view
|
||||
class="comment-wrapper"
|
||||
v-if="isLogin"
|
||||
:class="{ commentWrapperBlack: commentWrapperBlack, commentWrapperWhite: commentWrapperWhite }"
|
||||
>
|
||||
<input
|
||||
class="comment-box"
|
||||
:class="{ commentBoxBlack: commentBoxBlack, commentBoxWhite: commentBoxWhite }"
|
||||
placeholder-class="comment-box-placeholder"
|
||||
:style="{ width: screenWidth - 70 + 'px' }"
|
||||
:placeholder="placeholder"
|
||||
cursor-spacing="10px"
|
||||
v-model="currentComment"
|
||||
confirm-type="done"
|
||||
:focus="commentFocus"
|
||||
@focus="typingComment"
|
||||
@blur="noTypingComment"
|
||||
/>
|
||||
<!-- @confirm="doCommentPublish" -->
|
||||
<view style="display: flex;flex-direction: column;justify-content: center;">
|
||||
<image src="/static/images/icon-comment.png" class="icon-comment" @click="doCommentPublish()">
|
||||
</image>
|
||||
<view style="display: flex; flex-direction: column; justify-content: center">
|
||||
<image
|
||||
src="/static/images/icon-comment.png"
|
||||
class="icon-comment"
|
||||
@click="doCommentPublish()"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import {
|
||||
vlogCommentCounts,
|
||||
vlogCommentUnLike,
|
||||
vlogCommentLike,
|
||||
vlogCommentDelete,
|
||||
vlogCommentList,
|
||||
vlogCommentCreate
|
||||
} from "@/api/vlog"
|
||||
import {
|
||||
dateFormat,
|
||||
graceNumber,
|
||||
getDateBeforeNow
|
||||
} from '@/utils/tools.js'
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import { vlogCommentCounts, vlogCommentUnLike, vlogCommentLike, vlogCommentDelete, vlogCommentList, vlogCommentCreate } from '@/api/vlog';
|
||||
import { dateFormat, graceNumber, getDateBeforeNow } from '@/utils/tools.js';
|
||||
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import popup from '../uni-popup/popup.js';
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
mixins: [popup],
|
||||
@ -341,7 +388,7 @@
|
||||
thisVlogId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -355,7 +402,7 @@
|
||||
// commentBoxBlack: false,
|
||||
// commentBoxWhite: true,
|
||||
screenWidth: uni.getSystemInfoSync().screenWidth,
|
||||
currentComment: "",
|
||||
currentComment: '',
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
@ -364,31 +411,29 @@
|
||||
// commentTouched: false,
|
||||
activeIndex: -1,
|
||||
|
||||
bottomTxt: "到底了哦~",
|
||||
placeholder: "快发条评论吧~",
|
||||
bottomTxt: '到底了哦~',
|
||||
placeholder: '快发条评论吧~',
|
||||
commentFocus: false,
|
||||
thisFatherCommentId: "0", // 用于标识当前的回复是否有父id,还是仅仅只是普通评论
|
||||
thisFatherCommentId: '0', // 用于标识当前的回复是否有父id,还是仅仅只是普通评论
|
||||
|
||||
thisVlogTotalComentCounts: 0,
|
||||
loginUserId: "",
|
||||
loginUserId: '',
|
||||
page: 0,
|
||||
totalPage: 0,
|
||||
commentCounts: 88,
|
||||
commentList: [],
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
commentList: []
|
||||
};
|
||||
},
|
||||
onShow() {},
|
||||
created() {
|
||||
var me = this;
|
||||
var myUserInfo = storage.getVlogUserInfo()
|
||||
var userId = "";
|
||||
var myUserInfo = storage.getVlogUserInfo();
|
||||
var userId = '';
|
||||
if (myUserInfo != null) {
|
||||
userId = myUserInfo.id;
|
||||
this.isLogin = true
|
||||
this.isLogin = true;
|
||||
} else {
|
||||
this.isLogin = false
|
||||
this.isLogin = false;
|
||||
}
|
||||
me.loginUserId = userId;
|
||||
|
||||
@ -401,29 +446,41 @@
|
||||
var me = this;
|
||||
var vlogId = me.thisVlogId;
|
||||
|
||||
var result = await vlogCommentCounts(vlogId)
|
||||
var result = await vlogCommentCounts(vlogId);
|
||||
if (result.data.status == 200) {
|
||||
me.thisVlogTotalComentCounts = result.data.data;
|
||||
} else {
|
||||
me.thisVlogTotalComentCounts = 0;
|
||||
}
|
||||
if (me.thisVlogTotalComentCounts == 0) {
|
||||
me.bottomTxt = "抢一个沙发吧~";
|
||||
me.bottomTxt = '抢一个沙发吧~';
|
||||
} else {
|
||||
me.bottomTxt = "到底了哦~";
|
||||
me.bottomTxt = '到底了哦~';
|
||||
}
|
||||
},
|
||||
|
||||
async unlike(commentUserId, commentId, index) {
|
||||
var me = this;
|
||||
var result = await vlogCommentUnLike(me.loginUserId, commentId)
|
||||
var myUserInfo = storage.getVlogUserInfo();
|
||||
if (myUserInfo == null) {
|
||||
uni.showTabBar({
|
||||
animation: false
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: '/pages/passport/login',
|
||||
animationType: 'slide-in-bottom'
|
||||
});
|
||||
return;
|
||||
}
|
||||
var me = this;
|
||||
var result = await vlogCommentUnLike(me.loginUserId, commentId);
|
||||
if (result.data.status == 200) {
|
||||
me.reLikeCommentList(index, 0);
|
||||
me.reCountsCommentList(index, -1);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
@ -437,19 +494,19 @@
|
||||
animation: false
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/passport/login",
|
||||
animationType: "slide-in-bottom",
|
||||
url: '/pages/passport/login',
|
||||
animationType: 'slide-in-bottom'
|
||||
});
|
||||
return;
|
||||
}
|
||||
var result = await vlogCommentLike(me.loginUserId, commentId)
|
||||
var result = await vlogCommentLike(me.loginUserId, commentId);
|
||||
if (result.data.status == 200) {
|
||||
me.reLikeCommentList(index, 1);
|
||||
me.reCountsCommentList(index, 1);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
@ -488,13 +545,13 @@
|
||||
content: '确认删除评论吗?',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
var result = await vlogCommentDelete(vlogId, commentUserId, commentId)
|
||||
var result = await vlogCommentDelete(vlogId, commentUserId, commentId);
|
||||
if (result.data.status == 200) {
|
||||
me.doCommentPagingList(1, true);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
@ -502,7 +559,6 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
loadMore() {
|
||||
if (this.page == this.totalPage) {
|
||||
@ -512,31 +568,29 @@
|
||||
},
|
||||
// 分页查询评论列表
|
||||
async doCommentPagingList(page, needClearList) {
|
||||
// 查询首页短视频列表
|
||||
var me = this;
|
||||
me.page = page;
|
||||
var vlogId = me.thisVlogId;
|
||||
|
||||
var result = await vlogCommentList(page, 10, vlogId, me.loginUserId)
|
||||
var result = await vlogCommentList(page, 10, vlogId, me.loginUserId);
|
||||
if (result.data.status == 200) {
|
||||
var commentList = result.data.data.rows;
|
||||
console.log(commentList);
|
||||
var totalPage = result.data.data.total;
|
||||
if (needClearList) {
|
||||
me.commentList = [];
|
||||
}
|
||||
me.commentList = me.commentList.concat(commentList);
|
||||
me.totalPage = totalPage;
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 获得焦点,改变底部文本框颜色
|
||||
typingComment() {
|
||||
this.commentWrapperBlack = false;
|
||||
@ -553,70 +607,66 @@
|
||||
this.commentBoxBlack = true;
|
||||
this.commentBoxWhite = false;
|
||||
|
||||
this.thisFatherCommentId = "0"; // 恢复默认的回复fatherId为“0”
|
||||
this.thisFatherCommentId = '0'; // 恢复默认的回复fatherId为“0”
|
||||
this.commentFocus = false;
|
||||
this.placeholder = "爱评论的人都是天使~";
|
||||
this.placeholder = '爱评论的人都是天使~';
|
||||
},
|
||||
|
||||
// 回复他人的评论
|
||||
replyComment(commentId, commentUserNickname) {
|
||||
var me = this;
|
||||
var myUserInfo = storage.getVlogUserInfo()
|
||||
var myUserInfo = storage.getVlogUserInfo();
|
||||
if (myUserInfo == null) {
|
||||
uni.showTabBar({
|
||||
animation: false
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/passport/login",
|
||||
animationType: "slide-in-bottom",
|
||||
url: '/pages/passport/login',
|
||||
animationType: 'slide-in-bottom'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.thisFatherCommentId = commentId;
|
||||
this.commentFocus = true;
|
||||
this.placeholder = "回复 @" + commentUserNickname;
|
||||
this.placeholder = '回复 @' + commentUserNickname;
|
||||
// this.typingComment();
|
||||
},
|
||||
|
||||
// 发布留言
|
||||
async doCommentPublish() {
|
||||
console.log('发表评论')
|
||||
console.log('发表评论');
|
||||
var me = this;
|
||||
|
||||
|
||||
var myUserInfo = storage.getVlogUserInfo()
|
||||
var myUserInfo = storage.getVlogUserInfo();
|
||||
if (myUserInfo == null) {
|
||||
uni.showTabBar({
|
||||
animation: false
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: "/pages/passport/login",
|
||||
animationType: "slide-in-bottom",
|
||||
url: '/pages/passport/login',
|
||||
animationType: 'slide-in-bottom'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (me.currentComment == null || me.currentComment == "" || me.currentComment == undefined) {
|
||||
if (me.currentComment == null || me.currentComment == '' || me.currentComment == undefined) {
|
||||
uni.showToast({
|
||||
title: "请填入您的评论~",
|
||||
title: '请填入您的评论~',
|
||||
mask: true,
|
||||
position: "bottom"
|
||||
position: 'bottom'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (me.currentComment.length > 50) {
|
||||
uni.showToast({
|
||||
title: "评论字数限制50以内噢~",
|
||||
title: '评论字数限制50以内噢~',
|
||||
mask: true,
|
||||
position: "bottom"
|
||||
position: 'bottom'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
var userId = myUserInfo.id;
|
||||
|
||||
var pendingCommentObject = {
|
||||
@ -624,10 +674,10 @@
|
||||
vlogerId: me.thisVlogerId,
|
||||
fatherCommentId: me.thisFatherCommentId,
|
||||
commentUserId: userId,
|
||||
content: me.currentComment,
|
||||
content: me.currentComment
|
||||
};
|
||||
|
||||
var result = await vlogCommentCreate(pendingCommentObject)
|
||||
var result = await vlogCommentCreate(pendingCommentObject);
|
||||
console.log(result);
|
||||
if (result.data.status == 200) {
|
||||
var newCommentObject = result.data.data;
|
||||
@ -635,18 +685,17 @@
|
||||
newCommentObject.commentUserNickname = myUserInfo.nickname;
|
||||
newCommentObject.commentUserFace = myUserInfo.face;
|
||||
newCommentObject.isLike = 0;
|
||||
newCommentObject.vlogerId = userId
|
||||
|
||||
newCommentObject.vlogerId = userId;
|
||||
|
||||
me.doCommentPagingList(1, true);
|
||||
|
||||
// 评论/回复完毕后,回复thisFatherCommentId为“0”
|
||||
me.thisFatherCommentId = "0";
|
||||
me.thisFatherCommentId = '0';
|
||||
|
||||
// 把新评论添加到第一个位置,弱一致性,不需要从数据库里再去取
|
||||
me.commentList.unshift(newCommentObject);
|
||||
// 清空文本框
|
||||
me.currentComment = "";
|
||||
me.currentComment = '';
|
||||
// 隐藏键盘
|
||||
uni.hideKeyboard();
|
||||
// 底部变色
|
||||
@ -655,19 +704,18 @@
|
||||
// 把滚动list到第一个位置
|
||||
me.scrollTop = me.scrollTop + 1;
|
||||
me.$nextTick(() => {
|
||||
me.scrollTop = 0 //赋值为0即代表返回顶部
|
||||
me.scrollTop = 0; //赋值为0即代表返回顶部
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.data.msg,
|
||||
icon: "none",
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
|
||||
me.freshCommentCounts();
|
||||
|
||||
|
||||
// uni.request({
|
||||
// method: "POST",
|
||||
// header: {
|
||||
@ -680,7 +728,6 @@
|
||||
|
||||
// }
|
||||
// });
|
||||
|
||||
},
|
||||
// 把超过1000或10000的数字调整,比如1.3k/6.8w
|
||||
getGraceNumber(num) {
|
||||
@ -688,11 +735,10 @@
|
||||
},
|
||||
// 时间显示 刚刚/xx小时前/...
|
||||
getGraceDateBeforeNow(dateTimeStr) {
|
||||
var date = dateFormat("YYYY-mm-dd", new Date(dateTimeStr));
|
||||
return getDateBeforeNow(date);
|
||||
// var date = dateFormat('YYYY-MM-DD HH:mm:ss', new Date(dateTimeStr));
|
||||
return getDateBeforeNow(dateTimeStr);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
@ -700,15 +746,14 @@
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
})
|
||||
this.close()
|
||||
|
||||
});
|
||||
this.close();
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
if (this.beforeClose) return
|
||||
if (this.beforeClose) return;
|
||||
this.popup.close();
|
||||
uni.showTabBar({
|
||||
animation: true
|
||||
@ -722,7 +767,7 @@
|
||||
touchendComment() {
|
||||
// this.commentTouched = false;
|
||||
this.activeIndex = -1;
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -38,7 +38,7 @@
|
||||
height: 60rpx;
|
||||
}
|
||||
.icon-tag-text {
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
@ -46,73 +46,153 @@
|
||||
|
||||
<template>
|
||||
<view class="page">
|
||||
|
||||
<view class="all-box">
|
||||
<view class="share-item" @click="downloadVlog()">
|
||||
<view class="icon-wrapper" style="align-self: center;">
|
||||
<image class="icon-image" src="/static/images/icon-download.png" style="align-self: center;"></image>
|
||||
<!-- <view
|
||||
class="share-item"
|
||||
@click="downloadVlog()"
|
||||
>
|
||||
<view
|
||||
class="icon-wrapper"
|
||||
style="align-self: center"
|
||||
>
|
||||
<image
|
||||
class="icon-image"
|
||||
src="/static/images/link.png"
|
||||
style="align-self: center"
|
||||
></image>
|
||||
</view>
|
||||
<text class="icon-tag-text" style="align-self: center;">保存到相册</text>
|
||||
<text
|
||||
class="icon-tag-text"
|
||||
style="align-self: center"
|
||||
>
|
||||
复制口令
|
||||
</text>
|
||||
</view> -->
|
||||
|
||||
<view
|
||||
class="share-item"
|
||||
@click="copyLink()"
|
||||
>
|
||||
<view
|
||||
class="icon-wrapper"
|
||||
style="align-self: center"
|
||||
>
|
||||
<image
|
||||
class="icon-image"
|
||||
src="/static/images/link.png"
|
||||
style="align-self: center"
|
||||
></image>
|
||||
</view>
|
||||
<text
|
||||
class="icon-tag-text"
|
||||
style="align-self: center"
|
||||
>
|
||||
复制链接
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="share-item" @click="copyLink()">
|
||||
<view class="icon-wrapper" style="align-self: center;">
|
||||
<image class="icon-image" src="/static/images/icon-copy.png" style="align-self: center;"></image>
|
||||
</view>
|
||||
<text class="icon-tag-text" style="align-self: center;">复制链接</text>
|
||||
</view>
|
||||
|
||||
<view class="share-item" @click="gotoQRCode()">
|
||||
<view class="icon-wrapper" style="align-self: center;">
|
||||
<image class="icon-image" src="/static/images/icon-qrcode.png" style="align-self: center;"></image>
|
||||
</view>
|
||||
<text class="icon-tag-text" style="align-self: center;">二维码</text>
|
||||
<!-- <view
|
||||
class="share-item"
|
||||
@click="gotoQRCode()"
|
||||
>
|
||||
<view
|
||||
class="icon-wrapper"
|
||||
style="align-self: center"
|
||||
>
|
||||
<image
|
||||
class="icon-image"
|
||||
src="/static/images/icon-qrcode.png"
|
||||
style="align-self: center"
|
||||
></image>
|
||||
</view>
|
||||
<text
|
||||
class="icon-tag-text"
|
||||
style="align-self: center"
|
||||
>
|
||||
二维码
|
||||
</text>
|
||||
</view> -->
|
||||
|
||||
<!-- 判断只有我自己才能显示这个按钮 -->
|
||||
<view v-if="(thisVlogerId == userId) && (isPrivate == 0)" class="share-item" @click="changeVlogToPrivate()">
|
||||
<view class="icon-wrapper" style="align-self: center;">
|
||||
<image class="icon-image" src="/static/images/icon-private.png" style="align-self: center;"></image>
|
||||
<!-- <view
|
||||
v-if="thisVlogerId == userId && isPrivate == 0"
|
||||
class="share-item"
|
||||
@click="changeVlogToPrivate()"
|
||||
>
|
||||
<view
|
||||
class="icon-wrapper"
|
||||
style="align-self: center"
|
||||
>
|
||||
<image
|
||||
class="icon-image"
|
||||
src="/static/images/icon-private.png"
|
||||
style="align-self: center"
|
||||
></image>
|
||||
</view>
|
||||
<text class="icon-tag-text" style="align-self: center;">转为私密</text>
|
||||
</view>
|
||||
<view v-if="(thisVlogerId == userId) && (isPrivate == 1)" class="share-item" @click="changeVlogToPublic()">
|
||||
<view class="icon-wrapper" style="align-self: center;">
|
||||
<image class="icon-image" src="/static/images/icon-private.png" style="align-self: center;"></image>
|
||||
</view>
|
||||
<text class="icon-tag-text" style="align-self: center;">转为公开</text>
|
||||
<text
|
||||
class="icon-tag-text"
|
||||
style="align-self: center"
|
||||
>
|
||||
转为私密
|
||||
</text>
|
||||
</view> -->
|
||||
|
||||
<!-- <view
|
||||
v-if="thisVlogerId == userId && isPrivate == 1"
|
||||
class="share-item"
|
||||
@click="changeVlogToPublic()"
|
||||
>
|
||||
<view
|
||||
class="icon-wrapper"
|
||||
style="align-self: center"
|
||||
>
|
||||
<image
|
||||
class="icon-image"
|
||||
src="/static/images/icon-private.png"
|
||||
style="align-self: center"
|
||||
></image>
|
||||
</view>
|
||||
<text
|
||||
class="icon-tag-text"
|
||||
style="align-self: center"
|
||||
>
|
||||
转为公开
|
||||
</text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="" style="padding: 0 20rpx;">
|
||||
<view
|
||||
class=""
|
||||
style="padding: 0 20rpx"
|
||||
>
|
||||
<!-- :class="{'btn-preplay':!preplayTouched, 'btn-preplay-touched': preplayTouched}"
|
||||
@click="preview"
|
||||
@touchstart="touchstartPreplay"
|
||||
@touchend="touchendPreplay" -->
|
||||
|
||||
<view :class="{'btn-cancel':!cancelTouched, 'btn-cancel-touched': cancelTouched}"
|
||||
<view
|
||||
:class="{ 'btn-cancel': !cancelTouched, 'btn-cancel-touched': cancelTouched }"
|
||||
@click="close"
|
||||
@touchstart="touchstartCancel"
|
||||
@touchend="touchendCancel"
|
||||
style="height: 50px;display: flex;flex-direction: column;justify-content: center;border-width: 1rpx;border-radius: 10px;">
|
||||
<text class="" style="color: #FFFFFF;font-size: 16px;align-self: center;align-self: center;">取消</text>
|
||||
style="height: 50px; display: flex; flex-direction: column; justify-content: center; border-width: 1rpx; border-radius: 10px"
|
||||
>
|
||||
<text
|
||||
class=""
|
||||
style="color: #ffffff; font-size: 16px; align-self: center; align-self: center"
|
||||
>
|
||||
取消
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import {
|
||||
vlogChangeToPublic,
|
||||
vlogChangeToPrivate
|
||||
} from "@/api/vlog"
|
||||
import {
|
||||
dateFormat,
|
||||
graceNumber,
|
||||
getDateBeforeNow
|
||||
} from '@/utils/tools.js'
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import storage from '@/utils/storage.js'; //缓存
|
||||
import { vlogChangeToPublic, vlogChangeToPrivate } from '@/api/vlog';
|
||||
import { dateFormat, graceNumber, getDateBeforeNow } from '@/utils/tools.js';
|
||||
import popup from '../uni-popup/popup.js';
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
mixins: [popup],
|
||||
@ -145,23 +225,16 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userId: "",
|
||||
userId: '',
|
||||
cancelTouched: false
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var info = storage.getVlogUserInfo()
|
||||
if(info==null){
|
||||
// uni.showTabBar({
|
||||
// animation: false
|
||||
// });
|
||||
// uni.navigateTo({
|
||||
// url: "/pages/passport/login",
|
||||
// animationType: "slide-in-bottom",
|
||||
// });
|
||||
// return;
|
||||
}else{
|
||||
this.userId = userId;
|
||||
|
||||
mounted() {
|
||||
console.log('挂载');
|
||||
var info = storage.getVlogUserInfo();
|
||||
if (info != null) {
|
||||
this.userId = info.id;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -172,18 +245,18 @@
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
})
|
||||
});
|
||||
this.close();
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
if(this.beforeClose) return
|
||||
if (this.beforeClose) return;
|
||||
this.popup.close();
|
||||
uni.showTabBar({
|
||||
animation: true
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
touchstartCancel() {
|
||||
@ -195,7 +268,7 @@
|
||||
},
|
||||
|
||||
downloadVlog() {
|
||||
console.log("downloadVlog...thisVlogId = " + this.vlogUrl);
|
||||
console.log('downloadVlog...thisVlogId = ' + this.vlogUrl);
|
||||
uni.showLoading();
|
||||
uni.downloadFile({
|
||||
url: this.vlogUrl,
|
||||
@ -208,61 +281,62 @@
|
||||
console.log('save success');
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: "保存成功~!",
|
||||
title: '保存成功~!',
|
||||
duration: 5000
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
copyLink() {
|
||||
// this.thisVlogId 视频id
|
||||
uni.setClipboardData({
|
||||
data: this.vlogUrl,
|
||||
success: () => {
|
||||
uni.showToast({//提示
|
||||
uni.showToast({
|
||||
//提示
|
||||
title: '复制成功'
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
gotoQRCode() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/qrcode/qrcode?vlogId=" + this.thisVlogId
|
||||
})
|
||||
url: '/pages/qrcode/qrcode?vlogId=' + this.thisVlogId
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
async changeVlogToPublic() {
|
||||
var vlogId = this.thisVlogId;
|
||||
var me = this;
|
||||
var info = storage.getVlogUserInfo()
|
||||
var info = storage.getVlogUserInfo();
|
||||
var userId = info.id;
|
||||
var result = await vlogChangeToPublic(userId,vlogId)
|
||||
var result = await vlogChangeToPublic(userId, vlogId);
|
||||
if (result.data.status == 200) {
|
||||
this.isPrivate = 0;
|
||||
uni.showToast({
|
||||
title: "设置完毕~"
|
||||
})
|
||||
title: '设置完毕~'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async changeVlogToPrivate() {
|
||||
var vlogId = this.thisVlogId;
|
||||
var me = this;
|
||||
var info = storage.getVlogUserInfo()
|
||||
var info = storage.getVlogUserInfo();
|
||||
var userId = info.id;
|
||||
var result = await vlogChangeToPrivate(userId,vlogId)
|
||||
var result = await vlogChangeToPrivate(userId, vlogId);
|
||||
if (result.data.status == 200) {
|
||||
this.isPrivate = 1;
|
||||
uni.showToast({
|
||||
title: "设置完毕~"
|
||||
})
|
||||
}
|
||||
title: '设置完毕~'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@ -1,7 +1,11 @@
|
||||
import Request from "@/lib/request/index.js";
|
||||
import { refreshTokenFn } from "@/api/login.js";
|
||||
import {
|
||||
refreshTokenFn
|
||||
} from "@/api/login.js";
|
||||
import storage from "@/utils/storage.js";
|
||||
import { md5 } from "@/utils/md5.js";
|
||||
import {
|
||||
md5
|
||||
} from "@/utils/md5.js";
|
||||
import Foundation from "@/utils/Foundation.js";
|
||||
import api from "@/config/api.js";
|
||||
|
||||
@ -131,7 +135,10 @@ http.interceptors.response.use(
|
||||
//调用刷新token的接口
|
||||
return refreshTokenFn(storage.getRefreshToken())
|
||||
.then((res) => {
|
||||
let { accessToken, refreshToken } = res.data.result;
|
||||
let {
|
||||
accessToken,
|
||||
refreshToken
|
||||
} = res.data.result;
|
||||
storage.setAccessToken(accessToken);
|
||||
storage.setRefreshToken(refreshToken);
|
||||
|
||||
@ -188,7 +195,9 @@ http.interceptors.response.use(
|
||||
}
|
||||
);
|
||||
|
||||
export { http };
|
||||
export {
|
||||
http
|
||||
};
|
||||
|
||||
export const Method = {
|
||||
GET: "GET",
|
||||
|
@ -221,11 +221,11 @@ const dateFormat = (fmt, date) => {
|
||||
let ret;
|
||||
const opt = {
|
||||
"Y+": date.getFullYear().toString(), // 年
|
||||
"m+": (date.getMonth() + 1).toString(), // 月
|
||||
"d+": date.getDate().toString(), // 日
|
||||
"M+": (date.getMonth() + 1).toString(), // 月
|
||||
"D+": date.getDate().toString(), // 日
|
||||
"H+": date.getHours().toString(), // 时
|
||||
"M+": date.getMinutes().toString(), // 分
|
||||
"S+": date.getSeconds().toString(), // 秒
|
||||
"m+": date.getMinutes().toString(), // 分
|
||||
"s+": date.getSeconds().toString(), // 秒
|
||||
};
|
||||
for (let k in opt) {
|
||||
ret = new RegExp("(" + k + ")").exec(fmt);
|
||||
|