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

16
App.vue
View File

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

View File

@ -1,47 +1,66 @@
<template> <template>
<!-- 遮罩层 --> <!-- 遮罩层 -->
<u-popup <u-popup
@close="close" @close="close"
v-model="show" v-model="show"
mode="bottom" mode="bottom"
border-radius="30" border-radius="30"
height="260rpx" height="260rpx"
> >
<view class="share-title"> <view class="share-title">
<span>分享至</span> <span>分享至</span>
</view> </view>
<view class="share-list"> <view class="share-list">
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<view class="share-item"> <view class="share-item">
<button class="share-btn" open-type="share"> <button
<u-icon color="#04BE02" size="80" name="weixin-fill"></u-icon>微信好友 class="share-btn"
</button> open-type="share"
</view> >
<!-- #endif --> <u-icon
<!-- #ifdef APP-PLUS --> color="#04BE02"
<view size="80"
class="share-item" name="weixin-fill"
@click="handleShare(item)" ></u-icon>
v-for="(item, index) in list" 微信好友
:key="index" </button>
> </view>
<u-icon :color="item.color" size="80" :name="item.icon"></u-icon> <!-- #endif -->
<view>{{ item.title }}</view> <!-- #ifdef APP-PLUS -->
</view> <view
<!-- #endif --> class="share-item"
<!-- #ifdef H5 --> @click="handleShare(item)"
<view class="share-item" @click="copyLink()"> v-for="(item, index) in list"
<u-icon color="#b4aee8" size="80" name="share-fill"></u-icon> :key="index"
<view>{{ "复制链接" }}</view> >
</view> <u-icon
<!-- #endif --> :color="item.color"
</view> size="80"
</u-popup> :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>
<!-- #endif -->
</view>
</u-popup>
</template> </template>
<script> <script>
import { h5Copy } from "@/js_sdk/h5-copy/h5-copy.js"; import { h5Copy } from '@/js_sdk/h5-copy/h5-copy.js';
import configs from "@/config/config"; import configs from '@/config/config';
import mpShare from "uview-ui/libs/mixin/mpShare.js"; import mpShare from 'uview-ui/libs/mixin/mpShare.js';
export default { export default {
mixins: [mpShare], mixins: [mpShare],
@ -106,19 +125,19 @@ export default {
}, },
// #endif // #endif
shareTitle() { shareTitle() {
let shareTitle; let shareTitle;
if (this.type == "goods") { if (this.type == 'goods') {
shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`; shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`;
} else if (this.type == "shops") { } else if (this.type == 'shops') {
shareTitle = `我发现了一个${this.goodsName}店铺快来跟我一起看看吧`; shareTitle = `我发现了一个${this.goodsName}店铺快来跟我一起看看吧`;
} else if (this.type == "pintuan") { } else if (this.type == 'pintuan') {
shareTitle = `我拼了一个${this.goodsName}快来跟我一起抢购吧!`; shareTitle = `我拼了一个${this.goodsName}快来跟我一起抢购吧!`;
} else if (this.type == "kanjia") { } else if (this.type == 'kanjia') {
shareTitle = `请快来帮我砍一刀${this.goodsName}`; shareTitle = `请快来帮我砍一刀${this.goodsName}`;
} }
return shareTitle; return shareTitle;
}, },
// #ifdef APP-PLUS // #ifdef APP-PLUS
handleShare(val) { handleShare(val) {
@ -189,36 +208,36 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./mp-share.scss"; @import './mp-share.scss';
.share-title { .share-title {
position: relative; position: relative;
height: 90rpx; height: 90rpx;
font-size: 32rpx; font-size: 32rpx;
line-height: 90rpx; line-height: 90rpx;
text-align: center; text-align: center;
> .share-close { > .share-close {
position: absolute; position: absolute;
right: 0; right: 0;
right: 20rpx; right: 20rpx;
top: 30rpx; top: 30rpx;
} }
} }
button:after { button:after {
border: none; border: none;
} }
.share-list { .share-list {
padding: 0 32rpx; padding: 0 32rpx;
display: flex; display: flex;
text-align: center; text-align: center;
align-items: center; align-items: center;
> .share-item { > .share-item {
width: 25%; width: 25%;
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
> * { > * {
margin: 8rpx 0; margin: 8rpx 0;
} }
} }
} }
</style> </style>

1260
components/vlog/guanzhu.nvue Normal file

File diff suppressed because it is too large Load Diff

1262
components/vlog/local.nvue Normal file

File diff suppressed because it is too large Load Diff

1234
components/vlog/tuijian.nvue Normal file

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

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

View File

@ -113,72 +113,6 @@
} }
} }
}, },
{
"path": "pages/me/me",
"style": {
"app-plus": {
"titleNView": false //
}
}
},
{
"path": "pages/me/myBackImg",
"style": {
"app-plus": {
"titleNView": false //
}
}
},
{
"path": "pages/me/myFace",
"style": {
"app-plus": {
"titleNView": false //
}
}
},
{
"path": "pages/me/myInfo",
"style": {
"navigationBarTitleText": "修改个人资料",
"navigationBarBackgroundColor": "#181b27"
}
},
{
"path": "pages/me/modifyNickname",
"style": {
"navigationBarTitleText": "修改昵称",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#181b27",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "保存",
"color": "#ef274d",
"width": "60px",
"fontSize": "15px",
"fontWeight": "bold"
}]
}
}
}
},
{
"path": "pages/publish/preview",
"style": {
"navigationBarTitleText": "预览视频",
"navigationBarBackgroundColor": "#181b27",
"enablePullDownRefresh": false
}
},
{
"path": "pages/me/vlogerInfo",
"style": {
"app-plus": {
"titleNView": false //
}
}
},
{ {
"path": "pages/me/vlog", "path": "pages/me/vlog",
"style": { "style": {
@ -489,14 +423,6 @@
"navigationBarBackgroundColor": "#181b27" "navigationBarBackgroundColor": "#181b27"
} }
}, },
{
"path": "pages/me/settings",
"style": {
"navigationBarTitleText": "设置",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#181b27"
}
},
{ {
"path": "pages/me/myFans", "path": "pages/me/myFans",
"style": { "style": {
@ -566,13 +492,12 @@
{ {
"root": "pages/mine", "root": "pages/mine",
"pages": [ "pages": [{
{
"path": "mydistribution/index", "path": "mydistribution/index",
"style": { "style": {
"navigationBarTitleText": "我的分销" "navigationBarTitleText": "我的分销"
} }
}, },
{ {
"path": "mydistribution/my/myindex", "path": "mydistribution/my/myindex",
"style": { "style": {
@ -590,43 +515,43 @@
"style": { "style": {
"navigationBarTitleText": "赚钱" "navigationBarTitleText": "赚钱"
} }
}, },
{ {
"path": "invite", "path": "invite",
"style": { "style": {
"navigationBarTitleText": "我的推荐" "navigationBarTitleText": "我的推荐"
} }
}, },
{ {
"path": "inviteinput", "path": "inviteinput",
"style": { "style": {
"navigationBarTitleText": "输入邀请码" "navigationBarTitleText": "输入邀请码"
} }
}, },
{ {
"path": "expert/index", "path": "expert/index",
"style": { "style": {
"navigationBarTitleText": "达人申请" "navigationBarTitleText": "达人申请"
} }
}, },
{ {
"path": "openShop/index", "path": "openShop/index",
"style": { "style": {
"navigationBarTitleText": "店铺申请" "navigationBarTitleText": "店铺申请"
} }
}, },
{ {
"path": "openShop/secon", "path": "openShop/secon",
"style": { "style": {
"navigationBarTitleText": "店铺申请" "navigationBarTitleText": "店铺申请"
} }
}, },
{ {
"path": "openShop/ThirdApply", "path": "openShop/ThirdApply",
"style": { "style": {
"navigationBarTitleText": "店铺申请" "navigationBarTitleText": "店铺申请"
} }
}, },
{ {
"path": "signIn", "path": "signIn",
"style": { "style": {
@ -1389,7 +1314,7 @@
"text": "消息" "text": "消息"
}, },
{ {
"pagePath": "pages/tabbar/user/my", "pagePath": "pages/me/me",
"text": "我的" "text": "我的"
} }
], ],

View File

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

View File

@ -1,92 +1,92 @@
<template> <template>
<view class="page"> <view class="page">
<view class="line"></view> <view class="line"></view>
<scroll-view scroll-y="true"> <scroll-view scroll-y="true">
<view <view
v-for="(item, index) in districtList" v-for="(item, index) in districtList"
class="item" class="item"
:class="{ active: index == activeIndex }" :class="{ active: index == activeIndex }"
:key="index" :key="index"
@click="chooseLocation(item.district_id, item.district_name)" @click="chooseLocation(item.district_id, item.district_name)"
@touchstart="touchstartLocation(index)" @touchstart="touchstartLocation(index)"
@touchend="touchendLocation"> @touchend="touchendLocation"
<text class="item-text"> >
{{ item.district_name }} <text class="item-text">
</text> {{ item.district_name }}
</view> </text>
</scroll-view> </view>
</view> </scroll-view>
</view>
</template> </template>
<script> <script>
import districtList from "@/json/area_district.js"; import districtList from '@/json/area_district.js';
export default { export default {
data() { data() {
return { return {
districtList: [], districtList: [],
activeIndex: -1, activeIndex: -1
}; };
}, },
onLoad(params) { onLoad(params) {
let cityId = params.cityId; let cityId = params.cityId;
let realDistrictList = []; let realDistrictList = [];
for (let i = 0; i < districtList.length; i++) { for (let i = 0; i < districtList.length; i++) {
let tempCityId = districtList[i].city_id; let tempCityId = districtList[i].city_id;
if (tempCityId == cityId) { if (tempCityId == cityId) {
realDistrictList.push(districtList[i]); realDistrictList.push(districtList[i]);
} }
} }
this.districtList = realDistrictList; this.districtList = realDistrictList;
}, },
methods: { methods: {
touchstartLocation(index) { touchstartLocation(index) {
this.activeIndex = index; this.activeIndex = index;
}, },
touchendLocation() { touchendLocation() {
this.activeIndex = -1; this.activeIndex = -1;
}, },
chooseLocation(districtId, districtName) { chooseLocation(districtId, districtName) {
uni.setStorageSync("myLocationDistrict", districtName); uni.setStorageSync('myLocationDistrict', districtName);
uni.navigateBack({ uni.navigateBack({
delta: 3, delta: 3
}); });
}, }
}, }
}; };
</script> </script>
<style lang="scss"> <style scoped>
.line {
height: 1rpx;
background-color: #393a41;
width: 750rpx;
}
.item-text {
color: #ffffff;
align-items: center;
font-size: 30rpx;
}
.item {
padding-left: 30rpx;
padding-right: 30rpx;
width: 750rpx;
height: 120rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.active {
background-color: #4a4c52;
}
.page { .page {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #181b27; background-color: #181b27;
.line {
height: 1rpx;
background-color: #393a41;
width: 750rpx;
}
.item {
padding-left: 30rpx;
padding-right: 30rpx;
width: 750rpx;
height: 120rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
.item-text {
color: #ffffff;
align-self: center;
font-size: 30rpx;
}
}
.active {
background-color: #4a4c52;
}
} }
</style> </style>

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -1,164 +1,162 @@
<template> <template>
<view class="page"> <view class="page">
<view class="line"></view> <view class="line"></view>
<view class="picker-box"> <view class="picker-box">
<picker <picker
class="birthday-item" class="birthday-item"
mode="date" mode="date"
:value="date" :value="date"
:start="startDate" :start="startDate"
:end="endDate" :end="endDate"
@change="bindDateChange"> @change="bindDateChange"
<view class="left-picker-part"> >
<text class="date-lable">{{ date }}</text> <view class="left-picker-part">
</view> <text class="date-lable">{{ date }}</text>
<view class="left-choose"> </view>
<image <view class="left-choose">
src="/static/images/icon-datepicker.png" <image
class="icon-right"></image> src="/static/images/icon-datepicker.png"
class="icon-right"
></image>
</view>
</picker>
</view> </view>
</picker>
</view>
<view class="notice"> <view class="notice">
<text class="tips">*点击即可选择生日噢~</text> <text class="tips">*点击即可选择生日噢~</text>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import storage from "@/utils/storage.js"; // import storage from '@/utils/storage.js'; //
import { import { vlogModifyUserInfo } from '@/api/vlog';
vlogModifyUserInfo import { dateFormat } from '@/utils/tools.js';
} from "@/api/vlog"
import {
dateFormat
} from '@/utils/tools.js'
export default { export default {
data() { data() {
return { return {
date: "", date: '',
startDate: "1970-01-01", startDate: '1970-01-01',
endDate: "2088-08-08", endDate: '2088-08-08'
}; };
}, },
onNavigationBarButtonTap() { onNavigationBarButtonTap() {
this.updateBirthday(); this.updateBirthday();
}, },
onLoad() { onLoad() {
let birthday = storage.getVlogUserInfo().birthday; let birthday = storage.getVlogUserInfo().birthday;
this.date = this.getGraceDateStr(new Date(birthday)); this.date = this.getGraceDateStr(new Date(birthday));
}, },
methods: { methods: {
async updateBirthday() { async updateBirthday() {
let me = this; let me = this;
let userId = storage.getVlogUserInfo().id; let userId = storage.getVlogUserInfo().id;
let birth = this.date; let birth = this.date;
let pendingUserInfo = { let pendingUserInfo = {
id: userId, id: userId,
birthday: birth, birthday: birth,
type:4 type: 4
}; };
var result = await vlogModifyUserInfo(pendingUserInfo,4) var result = await vlogModifyUserInfo(pendingUserInfo, 4);
if (result.data.status == 200) { if (result.data.status == 200) {
let userInfoUpdated = result.data.data; let userInfoUpdated = result.data.data;
// //
storage.setVlogUserInfo(userInfoUpdated); storage.setVlogUserInfo(userInfoUpdated);
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000, duration: 3000
}); });
var timer = setTimeout(() => { var timer = setTimeout(() => {
clearTimeout(timer) clearTimeout(timer);
uni.navigateBack({ uni.navigateBack({
delta: 1, delta: 1,
animationType: "fade-out", animationType: 'fade-out'
}); });
}, 1000); }, 1000);
} else { } else {
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000, duration: 3000
}); });
} }
}, },
bindDateChange: function (e) { bindDateChange: function (e) {
this.date = e.detail.value; this.date = e.detail.value;
}, },
getGraceDateStr(date) { getGraceDateStr(date) {
return dateFormat("YYYY-mm-dd", date); return dateFormat('YYYY-MM-DD', date);
}, }
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.page { .page {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #181b27; background-color: #181b27;
.line { .line {
height: 1rpx; height: 1rpx;
background-color: #393a41; background-color: #393a41;
width: 750rpx; width: 750rpx;
} }
.picker-box { .picker-box {
align-self: center; margin: 50rpx auto 20rpx auto;
margin-top: 50rpx; width: 750rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.birthday-item { .birthday-item {
background-color: #4a4c52; background-color: #4a4c52;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
width:720rpx; width: 750rpx;
height: 140rpx; height: 140rpx;
border-radius: 40rpx; border-radius: 40rpx;
.left-picker-part { .left-picker-part {
align-self: center; align-self: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
width: 280rpx; width: 280rpx;
height: 120rpx; height: 120rpx;
.date-lable { .date-lable {
align-self: center; align-self: center;
color: #ffffff; color: #ffffff;
margin-left: 40rpx; margin-left: 40rpx;
} }
} }
.left-choose { .left-choose {
align-self: center; align-self: center;
width: 80rpx; width: 80rpx;
height: 120rpx; height: 120rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
.icon-right { .icon-right {
align-self: center; align-self: center;
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
} }
} }
} }
} }
.notice { .notice {
margin-left: 30rpx; margin-left: 30rpx;
.tips { .tips {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #bfbfbf; color: #bfbfbf;
width: 700rpx; width: 700rpx;
margin-top: 20rpx; margin-top: 20rpx;
} }
} }
} }
</style> </style>

View File

@ -1,151 +1,150 @@
<template> <template>
<view class="page"> <view class="page">
<view class="line"></view> <view class="line"></view>
<view class="single-line-box"> <view class="single-line-box">
<input <input
class="description-input" class="description-input"
type="text" type="text"
:value="description" :value="description"
:model="description" :model="description"
placeholder="请填入简介~" placeholder="请填入简介~"
maxlength="16" maxlength="16"
@input="typingContent" /> @input="typingContent"
<view class="length-cal"> />
<text class="length-text">{{ wordsLength }}/16</text> <view class="length-cal">
</view> <text class="length-text">{{ wordsLength }}/16</text>
</view> </view>
</view>
<view class="notice"> <view class="notice">
<text class="tips">*请设置0-16字的个人简介</text> <text class="tips">*请设置0-16字的个人简介</text>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import storage from "@/utils/storage.js"; // import storage from '@/utils/storage.js'; //
import { import { vlogModifyUserInfo } from '@/api/vlog';
vlogModifyUserInfo
} from "@/api/vlog"
export default { export default {
data() { data() {
return { return {
description: storage.getVlogUserInfo().description, description: storage.getVlogUserInfo().description,
wordsLength: 0, wordsLength: 0
}; };
}, },
onNavigationBarButtonTap() { onNavigationBarButtonTap() {
this.updateDesc(); this.updateDesc();
}, },
onShow() { onShow() {
this.wordsLength = this.description.length; this.wordsLength = this.description.length;
}, },
methods: { methods: {
async updateDesc() { async updateDesc() {
let me = this; let me = this;
let userId = storage.getVlogUserInfo().id; let userId = storage.getVlogUserInfo().id;
let description = let description = this.description == '' ? '这家伙很懒,什么都没留下~' : this.description;
this.description == "" ? "这家伙很懒,什么都没留下~" : this.description; let pendingUserInfo = {
let pendingUserInfo = { id: userId,
id: userId, description: description,
description: description, type: 6
type:6 };
}; var result = await vlogModifyUserInfo(pendingUserInfo, 6);
var result = await vlogModifyUserInfo(pendingUserInfo,6) if (result.data.status == 200) {
if (result.data.status == 200) { let userInfoUpdated = result.data.data;
let userInfoUpdated = result.data.data; //
// storage.setVlogUserInfo(userInfoUpdated);
storage.setVlogUserInfo(userInfoUpdated); uni.showToast({
uni.showToast({ title: result.data.msg,
title: result.data.msg, icon: 'none',
icon: "none", duration: 3000
duration: 3000, });
}); var timer = setTimeout(() => {
var timer = setTimeout(() => { clearTimeout(timer);
clearTimeout(timer) uni.navigateBack({
uni.navigateBack({ delta: 1,
delta: 1, animationType: 'fade-out'
animationType: "fade-out", });
}); }, 1000);
}, 1000); } else {
} else { uni.showToast({
uni.showToast({ title: result.data.msg,
title: result.data.msg, icon: 'none',
icon: "none", duration: 3000
duration: 3000, });
}); }
} },
},
typingContent(e) { typingContent(e) {
this.description = e.detail.value; this.description = e.detail.value;
this.wordsLength = this.description.length; this.wordsLength = this.description.length;
}, }
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.page { .page {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #181b27; background-color: #181b27;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
overflow: hidden;
.line { .line {
height: 1rpx; height: 1rpx;
background-color: #393a41; background-color: #393a41;
width: 750rpx; width: 750rpx;
} }
.single-line-box { .single-line-box {
align-self: center; align-self: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 30rpx; padding: 30rpx;
margin-top: 20rpx; margin-top: 20rpx;
.description-input { .description-input {
padding-left: 20rpx; padding-left: 20rpx;
padding-top: 30rpx; padding-top: 30rpx;
color: #ffffff; color: #ffffff;
font-size: 32rpx; font-size: 32rpx;
width: 700rpx; width: 700rpx;
height: 100rpx; height: 100rpx;
background-color: #4a4c52; background-color: #4a4c52;
border-top-left-radius: 20rpx; border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx; border-top-right-radius: 20rpx;
} }
.length-cal { .length-cal {
width: 700rpx; width: 100%;
height: 20px; height: 20px;
background-color: #4a4c52; background-color: #4a4c52;
padding-right: 20rpx; padding-right: 20rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 12rpx; padding-bottom: 12rpx;
border-bottom-left-radius: 20rpx; border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx; border-bottom-right-radius: 20rpx;
.length-text { .length-text {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #f1f1f1; color: #f1f1f1;
} }
} }
} }
.notice { .notice {
align-self: center; align-self: center;
.tips { .tips {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #bfbfbf; color: #bfbfbf;
width: 700rpx; width: 700rpx;
} }
} }
} }
</style> </style>

View File

@ -1,179 +1,182 @@
<template> <template>
<view class="page"> <view class="page">
<view class="line"></view> <view class="line"></view>
<view class="single-line-box"> <view class="single-line-box">
<input <input
class="nickname-input" class="nickname-input"
type="text" type="text"
:value="nickname" :value="nickname"
:model="nickname" :model="nickname"
placeholder="请填入昵称~" placeholder="请填入昵称~"
maxlength="16" maxlength="8"
@input="typingContent" /> @input="typingContent"
<view class="length-cal"> />
<text class="length-text">{{ wordsLength }}/16</text> <view class="length-cal">
</view> <text class="length-text">{{ wordsLength }}/8</text>
</view> </view>
</view>
<view class="notice" style="align-self: center"> <view
<text class="tips">*请设置5-16的昵称长度</text> class="notice"
</view> style="align-self: center"
</view> >
<text class="tips">*请设置2-8的昵称长度</text>
</view>
</view>
</template> </template>
<script> <script>
import storage from "@/utils/storage.js"; // import storage from '@/utils/storage.js'; //
import { import { vlogModifyUserInfo } from '@/api/vlog';
vlogModifyUserInfo
} from "@/api/vlog"
export default { export default {
data() { data() {
return { return {
oldNickname: storage.getVlogUserInfo().nickname, oldNickname: storage.getVlogUserInfo().nickname,
nickname: storage.getVlogUserInfo().nickname, nickname: storage.getVlogUserInfo().nickname,
wordsLength: 0, wordsLength: 0
}; };
}, },
onNavigationBarButtonTap() { onNavigationBarButtonTap() {
let nickname = this.nickname; let nickname = this.nickname;
if (nickname.length < 5) { if (nickname.length < 2) {
uni.showToast({ uni.showToast({
icon: "none", icon: 'none',
title: "昵称太短!", title: '昵称太短!'
}); });
return; return;
} }
if (nickname.search(/\s/) != -1) { if (nickname.search(/\s/) != -1) {
uni.showToast({ uni.showToast({
icon: "none", icon: 'none',
title: "不允许包含空格!", title: '不允许包含空格!'
}); });
return; return;
} }
let oldNickname = this.oldNickname; let oldNickname = this.oldNickname;
if (oldNickname == nickname) { if (oldNickname == nickname) {
uni.showToast({ uni.showToast({
icon: "none", icon: 'none',
title: "昵称未改变!", title: '昵称未改变!'
}); });
return; return;
} }
this.updateNickname(); this.updateNickname();
}, },
onShow() { onShow() {
this.wordsLength = this.nickname.length; this.wordsLength = this.nickname.length;
}, },
methods: { methods: {
async updateNickname() { async updateNickname() {
let me = this; let me = this;
let userId = storage.getVlogUserInfo().id; let userId = storage.getVlogUserInfo().id;
let nickname = this.nickname; let nickname = this.nickname;
let pendingUserInfo = { let pendingUserInfo = {
id: userId, id: userId,
nickname: nickname, nickname: nickname,
type:1 type: 1
}; };
// //
var result = await vlogModifyUserInfo(pendingUserInfo,1) var result = await vlogModifyUserInfo(pendingUserInfo, 1);
console.log(result) console.log(result);
if (result.data.status == 200) { if (result.data.status == 200) {
let userInfoUpdated = result.data.data; let userInfoUpdated = result.data.data;
// //
storage.setVlogUserInfo(userInfoUpdated); storage.setVlogUserInfo(userInfoUpdated);
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000, duration: 3000
}); });
var timer = setTimeout(() => { var timer = setTimeout(() => {
clearTimeout(timer) clearTimeout(timer);
uni.navigateBack({ uni.navigateBack({
delta: 1, delta: 1,
animationType: "fade-out", animationType: 'fade-out'
}); });
}, 1000); }, 1000);
} else { } else {
uni.showToast({ uni.showToast({
title: result.data.msg, title: result.data.msg,
icon: "none", icon: 'none',
duration: 3000, duration: 3000
}); });
} }
}, },
typingContent(e) { typingContent(e) {
this.nickname = e.detail.value; this.nickname = e.detail.value;
this.wordsLength = this.nickname.length; this.wordsLength = this.nickname.length;
}, }
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.page { .page {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #181b27; background-color: #181b27;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
overflow: hidden;
.line { .line {
height: 1rpx; height: 1rpx;
background-color: #393a41; background-color: #393a41;
width: 750rpx; width: 750rpx;
} }
.single-line-box { .single-line-box {
align-self: center; align-self: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
padding: 30rpx; padding: 30rpx;
margin-top: 20rpx; margin-top: 20rpx;
.nickname-input { .nickname-input {
padding-left: 20rpx; padding-left: 20rpx;
color: #ffffff; color: #ffffff;
font-size: 28rpx; font-size: 28rpx;
width: 600rpx; width: 600rpx;
height: 100rpx; height: 100rpx;
background-color: #4a4c52; background-color: #4a4c52;
border-top-left-radius: 20rpx; border-top-left-radius: 20rpx;
border-bottom-left-radius: 20rpx; border-bottom-left-radius: 20rpx;
} }
.length-cal { .length-cal {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
background-color: #4a4c52; background-color: #4a4c52;
padding-right: 20rpx; padding-right: 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 12rpx; padding-bottom: 12rpx;
border-top-right-radius: 20rpx; border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx; border-bottom-right-radius: 20rpx;
.length-text { .length-text {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #f1f1f1; color: #f1f1f1;
} }
} }
} }
.notice { .notice {
align-self: center; align-self: center;
.tips { .tips {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #bfbfbf; color: #bfbfbf;
width: 700rpx; width: 700rpx;
} }
} }
} }
</style> </style>

View File

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

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

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

View File

@ -1,238 +1,251 @@
<template> <template>
<view class="mpage"> <view class="mpage">
<view class="line"></view> <view class="line"></view>
<scroll-view scroll-y="true" @scrolltolower="pagingFansList()"> <scroll-view
<view class="user-wrapper" v-for="(f, index) in fansList" :key="f.fanId"> scroll-y="true"
<view class="user-info" @click="goTovlogerInfo(f.fanId)"> @scrolltolower="pagingFansList()"
<image class="face" :src="f.face" /> >
<text class="user-name"> <view
{{ f.nickname }} class="user-wrapper"
</text> v-for="(f, index) in fansList"
</view> :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="!from">
<view v-if="f.bothFriend==0" class="operator-wrapper"> <view
<text class="operator-words" style="color: #ef274d" @click="followMe(f.fanId)"> v-if="f.bothFriend == 0"
class="operator-wrapper"
>
<text
class="operator-words"
style="color: #ef274d"
@click="followMe(f.fanId)"
>
回粉 回粉
</text> </text>
</view> </view>
<view v-if="f.bothFriend==1" class="operator-wrapper"> <view
<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.fanId)"> v-if="f.bothFriend == 1"
class="operator-wrapper"
>
<text
class="operator-words"
style="color: #ffffff"
@click="cancelFollow(f.fanId)"
>
互粉 互粉
</text> </text>
</view> </view>
</view> </view>
</view>
</view> </scroll-view>
</scroll-view> </view>
</view> </template>
</template>
<script>
<script> let system = uni.getSystemInfoSync();
let system = uni.getSystemInfoSync(); import storage from '@/utils/storage.js'; //缓存
import storage from "@/utils/storage.js"; //缓存 import { vlogFansCancel, vlogFansFollow, vlogQueryMyFans } from '@/api/vlog';
import { import { isStrEmpty } from '@/utils/tools.js';
vlogFansCancel, export default {
vlogFansFollow, data() {
vlogQueryMyFans return {
} from "@/api/vlog" userId: '',
import { screenHeight: 0,
isStrEmpty page: 0,
} from '@/utils/tools.js' totalPage: 0,
export default { fansList: [],
data() { from: false
return { };
userId: "", },
screenHeight: 0, onLoad(param) {
page: 0, if (!isStrEmpty(param.userId)) {
totalPage: 0, this.from = true;
fansList: [], this.userId = param.userId;
from:false } else {
}; var uinfo = storage.getVlogUserInfo();
}, this.userId = uinfo.id;
onLoad(param) { }
if(!isStrEmpty(param.userId)){ this.queryMyFansList(0);
this.from = true },
this.userId = param.userId methods: {
}else{ goTovlogerInfo(vlogerId) {
var uinfo = storage.getVlogUserInfo() var id = storage.getVlogUserInfo().id;
this.userId = uinfo.id; // 是否是当前登录的用户
} if (id == vlogerId) {
this.queryMyFansList(0); uni.switchTab({
}, url: 'me'
methods: { });
goTovlogerInfo(vlogerId) { } else {
var id = storage.getVlogUserInfo().id uni.navigateTo({
// 是否是当前登录的用户 url: 'vlogerInfo?userPageId=' + vlogerId
if (id == vlogerId) { });
uni.switchTab({ }
url: "me", },
}); // 关注/取关后的list重新状态刷新设置
} else { reFreshList(vlogerId, status) {
uni.navigateTo({ let me = this;
url: "vlogerInfo?userPageId=" + vlogerId, let fansList = me.fansList;
}); for (let i = 0; i < fansList.length; i++) {
} let fan = fansList[i];
}, if (fan.fanId == vlogerId) {
// 关注/取关后的list重新状态刷新设置 fan.bothFriend = status;
reFreshList(vlogerId, status) { // fansList.splice(i, 1);
let me = this; }
let fansList = me.fansList; }
for (let i = 0; i < fansList.length; i++) { me.fansList = fansList;
let fan = fansList[i]; },
if (fan.fanId == vlogerId) { async cancelFollow(vlogerId) {
fan.bothFriend = status; let me = this;
// fansList.splice(i, 1); let userId = me.userId;
} let data = {
} myId: userId,
me.fansList = fansList; vlogerId
}, };
async cancelFollow(vlogerId) { var result = await vlogFansCancel(data);
let me = this; console.log(result);
let userId = me.userId if (result.data.status == 200) {
let data = { me.reFreshList(vlogerId, 0);
myId: userId, } else {
vlogerId uni.showToast({
} title: result.data.msg,
var result = await vlogFansCancel(data) icon: 'none',
console.log(result) duration: 3000
if (result.data.status == 200) { });
me.reFreshList(vlogerId, 0); }
} else { },
uni.showToast({ async followMe(vlogerId) {
title: result.data.msg, let me = this;
icon: "none", let userId = me.userId;
duration: 3000, let data = {
}); myId: userId,
} vlogerId
}, };
async followMe(vlogerId) { var result = await vlogFansFollow(data);
let me = this; console.log(result);
let userId = me.userId; if (result.data.status == 200) {
let data = { me.reFreshList(vlogerId, 1);
myId: userId, } else {
vlogerId uni.showToast({
} title: result.data.msg,
var result = await vlogFansFollow(data) icon: 'none',
console.log(result) duration: 3000
if (result.data.status == 200) { });
me.reFreshList(vlogerId, 1); }
} else { },
uni.showToast({ async queryMyFansList(page) {
title: result.data.msg, let me = this;
icon: "none", page = page + 1;
duration: 3000, let userId = me.userId;
}); let currentUserId = this.currentUserId;
} var data = {
}, myId: userId,
async queryMyFansList(page) { // vlogerId: userId,
let me = this; // currentUserId: currentUserId,
page = page + 1; page: page,
let userId = me.userId; pageSize: 10
let currentUserId = this.currentUserId; };
var data = { var result = await vlogQueryMyFans(data);
myId:userId, console.log(result);
// vlogerId: userId, if (result.data.status == 200) {
// currentUserId: currentUserId, let fansList = result.data.data.rows;
page: page, let totalPage = result.data.data.total;
pageSize: 10 me.fansList = me.fansList.concat(fansList);
} me.page = page;
var result = await vlogQueryMyFans(data) me.totalPage = totalPage;
console.log(result) }
if (result.data.status == 200) { },
let fansList = result.data.data.rows;
let totalPage = result.data.data.total; // 上滑分页粉丝列表
me.fansList = me.fansList.concat(fansList); pagingFansList() {
me.page = page; if (this.page >= this.totalPage) {
me.totalPage = totalPage; return;
} }
}, this.queryMyFansList(this.page);
}
// 上滑分页粉丝列表 }
pagingFansList() { };
if (this.page >= this.totalPage) { </script>
return;
} <style scoped>
this.queryMyFansList(this.page); .user-info {
}, display: flex;
}, flex-direction: row;
}; justify-content: flex-start;
</script> }
<style scoped> .face {
.user-info { align-items: center;
display: flex; width: 110rpx;
flex-direction: row; height: 110rpx;
justify-content: flex-start; border-radius: 100rpx;
border-width: 2rpx;
} border-color: #f1f1f1;
}
.face {
align-self: center; .user-name {
width: 110rpx; align-items: center;
height: 110rpx; color: #ffffff;
border-radius: 100rpx; font-size: 30rpx;
border-width: 2rpx; margin-left: 20rpx;
border-color: #f1f1f1; }
}
.line {
.user-name { height: 1rpx;
align-self: center; background-color: #393a41;
color: #ffffff; width: 750rpx;
font-size: 30rpx; }
margin-left: 20rpx;
} .mpage {
position: absolute;
.line { left: 0;
height: 1rpx; right: 0;
background-color: #393a41; top: 0;
width: 750rpx; bottom: 0;
} background-color: #181b27;
}
.mpage {
position: absolute; .user-wrapper {
left: 0; padding-left: 30rpx;
right: 0; padding-right: 30rpx;
top: 0; width: 750rpx;
bottom: 0; height: 120rpx;
background-color: #181b27; display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
} margin-top: 20rpx;
margin-bottom: 20rpx;
.user-wrapper { }
padding-left: 30rpx;
padding-right: 30rpx; .operator-wrapper {
width: 750rpx; width: 140rpx;
height: 120rpx; height: 60rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: center;
align-items: center; background-color: #ef274d;
margin-top: 20rpx; border-radius: 20rpx;
margin-bottom: 20rpx; align-items: center;
border-width: 2rpx;
border-color: #ef274d;
} background-color: #181b27;
}
.operator-wrapper {
width: 140rpx; .operator-words {
height: 60rpx; align-items: center;
display: flex; font-size: 28rpx;
flex-direction: row; }
justify-content: center; </style>
background-color: #ef274d;
border-radius: 20rpx;
align-items: center;
border-width: 2rpx;
border-color: #ef274d;
background-color: #181b27;
}
.operator-words {
align-self: center;
font-size: 28rpx;
}
</style>

View File

@ -1,233 +1,248 @@
<template> <template>
<view class="mpage"> <view class="mpage">
<view class="line"></view> <view class="line"></view>
<scroll-view scroll-y="true" @scrolltolower="pagingFollowsList"> <scroll-view
<view class="user-wrapper" v-for="(f, index) in followsList" :key="f.vlogerId"> scroll-y="true"
<view class="user-info" @click="goTovlogerInfo(f.vlogerId)"> @scrolltolower="pagingFollowsList"
<image class="face" :src="f.face" /> >
<text class="user-name"> <view
{{ f.nickname }} class="user-wrapper"
</text> v-for="(f, index) in followsList"
</view> :key="f.vlogerId"
>
<view v-if="!from"> <view
<view v-if="f.bothFriend==0" class="operator-wrapper"> class="user-info"
<text class="operator-words" style="color: #ef274d" @click="cancelFollow(f.vlogerId)"> @click="goTovlogerInfo(f.vlogerId)"
已关注 >
</text> <image
</view> class="face"
<view v-if="f.bothFriend==1" class="operator-wrapper"> :src="f.face"
<text class="operator-words" style="color: #ffffff" @click="cancelFollow(f.vlogerId)"> />
互关 <text class="user-name">
</text> {{ f.nickname }}
</view> </text>
</view> </view>
</view>
</scroll-view> <view v-if="!from">
</view> <view
</template> v-if="f.bothFriend == 0"
class="operator-wrapper"
<script> >
import storage from "@/utils/storage.js"; //缓存 <text
import { class="operator-words"
vlogFansCancel, style="color: #ef274d"
vlogFansFollow, @click="cancelFollow(f.vlogerId)"
vlogQueryMyFollows >
} from "@/api/vlog" 已关注
import { </text>
isStrEmpty </view>
} from '@/utils/tools.js' <view
let system = uni.getSystemInfoSync(); v-if="f.bothFriend == 1"
export default { class="operator-wrapper"
data() { >
return { <text
userId: "", class="operator-words"
screenHeight: 0, style="color: #ffffff"
page: 0, @click="cancelFollow(f.vlogerId)"
totalPage: 0, >
followsList: [], 互关
from: false </text>
}; </view>
}, </view>
onLoad(param) { </view>
if (!isStrEmpty(param.userId)) { </scroll-view>
this.from = true </view>
this.userId = param.userId </template>
} else {
var uinfo = storage.getVlogUserInfo() <script>
this.userId = uinfo.id; import storage from '@/utils/storage.js'; //缓存
} import { vlogFansCancel, vlogFansFollow, vlogQueryMyFollows } from '@/api/vlog';
this.queryMyFollowList(0); import { isStrEmpty } from '@/utils/tools.js';
}, let system = uni.getSystemInfoSync();
methods: { export default {
goTovlogerInfo(vlogerId) { data() {
var id = storage.getVlogUserInfo().id return {
if (id == vlogerId) { userId: '',
uni.switchTab({ screenHeight: 0,
url: "me", page: 0,
}); totalPage: 0,
} else { followsList: [],
uni.navigateTo({ from: false
url: "vlogerInfo?userPageId=" + vlogerId, };
}); },
} onLoad(param) {
}, if (!isStrEmpty(param.userId)) {
// 关注, 取关后的list重新状态刷新设置 this.from = true;
reFreshList(vlogerId, status) { this.userId = param.userId;
let me = this; } else {
let followsList = me.followsList; var uinfo = storage.getVlogUserInfo();
for (let i = 0; i < followsList.length; i++) { this.userId = uinfo.id;
let vloger = followsList[i]; }
if (vloger.vlogerId == vlogerId) { this.queryMyFollowList(0);
vloger.bothFriend = status; },
followsList.splice(i, 1); methods: {
} goTovlogerInfo(vlogerId) {
} var id = storage.getVlogUserInfo().id;
me.followsList = followsList; if (id == vlogerId) {
}, uni.switchTab({
async cancelFollow(vlogerId) { url: 'me'
let me = this; });
let userId = this.userId; } else {
var data = { uni.navigateTo({
myId: userId, url: 'vlogerInfo?userPageId=' + vlogerId
vlogerId });
} }
var result = await vlogFansCancel(data) },
console.log(result) // 关注, 取关后的list重新状态刷新设置
if (result.data.status == 200) { reFreshList(vlogerId, status) {
me.reFreshList(vlogerId, 0); let me = this;
} else { let followsList = me.followsList;
uni.showToast({ for (let i = 0; i < followsList.length; i++) {
title: result.data.msg, let vloger = followsList[i];
icon: "none", if (vloger.vlogerId == vlogerId) {
duration: 3000, vloger.bothFriend = status;
}); followsList.splice(i, 1);
} }
}, }
async followMe(vlogerId) { me.followsList = followsList;
let me = this; },
let userId = this.userId; async cancelFollow(vlogerId) {
let data = { let me = this;
myId: userId, let userId = this.userId;
vlogerId var data = {
} myId: userId,
var result = await vlogFansFollow(data) vlogerId
console.log(result) };
if (result.data.status == 200) { var result = await vlogFansCancel(data);
me.reFreshList(vlogerId, true); console.log(result);
} else { if (result.data.status == 200) {
uni.showToast({ me.reFreshList(vlogerId, 0);
title: result.data.msg, } else {
icon: "none", uni.showToast({
duration: 3000, title: result.data.msg,
}); icon: 'none',
} duration: 3000
}, });
async queryMyFollowList(page) { }
let me = this; },
page = page + 1; async followMe(vlogerId) {
let userId = me.userId; let me = this;
var data = { let userId = this.userId;
myId: userId, let data = {
page: page, myId: userId,
pageSize: 10 vlogerId
} };
var result = await vlogQueryMyFollows(data) var result = await vlogFansFollow(data);
if (result.data.status == 200) { console.log(result);
let followsList = result.data.data.rows; if (result.data.status == 200) {
let totalPage = result.data.data.total; me.reFreshList(vlogerId, true);
me.followsList = me.followsList.concat(followsList); } else {
console.log(me.followsList) uni.showToast({
me.page = page; title: result.data.msg,
me.totalPage = totalPage; icon: 'none',
} duration: 3000
}, });
}
// 上滑分页粉丝列表 },
pagingFollowsList() { async queryMyFollowList(page) {
if (this.page >= this.totalPage) { let me = this;
return; page = page + 1;
} let userId = me.userId;
this.queryMyFollowList(this.page); var data = {
}, myId: userId,
} page: page,
} pageSize: 10
</script> };
var result = await vlogQueryMyFollows(data);
<style scoped> if (result.data.status == 200) {
.face { let followsList = result.data.data.rows;
align-self: center; let totalPage = result.data.data.total;
width: 110rpx; me.followsList = me.followsList.concat(followsList);
height: 110rpx; console.log(me.followsList);
border-radius: 100rpx; me.page = page;
border-width: 2rpx; me.totalPage = totalPage;
border-color: #f1f1f1; }
} },
.user-name { // 上滑分页粉丝列表
align-self: center; pagingFollowsList() {
color: #ffffff; if (this.page >= this.totalPage) {
font-size: 30rpx; return;
margin-left: 20rpx; }
} this.queryMyFollowList(this.page);
}
.mpage { }
position: absolute; };
left: 0; </script>
right: 0;
top: 0; <style scoped>
bottom: 0; .face {
background-color: #181b27; align-items: center;
width: 110rpx;
height: 110rpx;
border-radius: 100rpx;
} border-width: 2rpx;
border-color: #f1f1f1;
.line { }
height: 1rpx;
background-color: #393a41; .user-name {
width: 750rpx; align-items: center;
} color: #ffffff;
font-size: 30rpx;
.user-wrapper { margin-left: 20rpx;
padding-left: 30rpx; }
padding-right: 30rpx;
width: 750rpx; .mpage {
height: 120rpx; position: absolute;
display: flex; left: 0;
flex-direction: row; right: 0;
justify-content: space-between; top: 0;
margin-top: 20rpx; bottom: 0;
margin-bottom: 20rpx; background-color: #181b27;
align-items: center; }
.line {
} height: 1rpx;
background-color: #393a41;
.user-info { width: 750rpx;
display: flex; }
flex-direction: row;
justify-content: flex-start; .user-wrapper {
padding-left: 30rpx;
} padding-right: 30rpx;
width: 750rpx;
.operator-wrapper { height: 120rpx;
width: 140rpx; display: flex;
height: 60rpx; flex-direction: row;
display: flex; justify-content: space-between;
flex-direction: row; margin-top: 20rpx;
justify-content: center; margin-bottom: 20rpx;
background-color: #ef274d; align-items: center;
border-radius: 20rpx; }
align-self: center;
border-width: 2rpx; .user-info {
border-color: #ef274d; display: flex;
background-color: #181b27; flex-direction: row;
justify-content: flex-start;
} align-items: center;
}
.operator-words {
align-self: center; .operator-wrapper {
font-size: 28rpx; width: 140rpx;
} height: 60rpx;
</style> display: flex;
flex-direction: row;
justify-content: center;
background-color: #ef274d;
border-radius: 20rpx;
align-items: center;
border-width: 2rpx;
border-color: #ef274d;
background-color: #181b27;
}
.operator-words {
align-items: center;
font-size: 28rpx;
}
</style>

View File

@ -1,87 +1,126 @@
<template> <template>
<view class="page"> <view class="page">
<view class="line"></view> <view class="line"></view>
<view class="face-box"> <view class="face-box">
<image <image
class="user-face" class="user-face"
mode="aspectFill" mode="aspectFill"
@click="changeMyFace" @click="changeMyFace"
:src="myInfo.face"></image> :src="myInfo.face"
</view> ></image>
<view class="single-line-box"> </view>
<text class="left-lable">昵称</text> <view class="single-line-box">
<view class="right-part" @click="modifyNickname"> <text class="left-lable">昵称</text>
<text class="right-content"> <view
{{ myInfo.nickname }} class="right-part"
</text> @click="modifyNickname"
<image >
class="right-arrow" <text class="right-content">
src="/static/images/icon-right-arrow2.png"></image> {{ myInfo.nickname }}
</view> </text>
</view> <image
class="right-arrow"
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<view class="single-line-box" @click="modifyTiktokNum"> <view
<text class="left-lable">视频号</text> class="single-line-box"
<view class="right-part"> @click="modifyTiktokNum"
<text class="right-content"> >
{{ myInfo.imoocNum }} <text class="left-lable">视频号</text>
</text> <view class="right-part">
<image <text class="right-content">
class="right-arrow" {{ myInfo.imoocNum }}
src="/static/images/icon-right-arrow2.png"></image> </text>
</view> <image
</view> class="right-arrow"
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<view class="single-line-box"> <view class="single-line-box">
<text class="left-lable">性别</text> <text class="left-lable">性别</text>
<view class="right-part" @click="modifySex"> <view
<text v-if="myInfo.sex == 1" class="right-content"></text> class="right-part"
<text v-else-if="myInfo.sex == 0" class="right-content"></text> @click="modifySex"
<text v-else class="right-content">保密</text> >
<image <text
class="right-arrow" v-if="myInfo.sex == 1"
src="/static/images/icon-right-arrow2.png"></image> class="right-content"
</view> >
</view>
</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>
</view>
</view>
<view class="single-line-box"> <view class="single-line-box">
<text class="left-lable">生日</text> <text class="left-lable">生日</text>
<view class="right-part" @click="modifyBirthday"> <view
<text class="right-content"> class="right-part"
{{ getGraceDateStr(new Date(myInfo.birthday)) }} @click="modifyBirthday"
</text> >
<image <text class="right-content">
class="right-arrow" {{ getGraceDateStr(new Date(myInfo.birthday)) }}
src="/static/images/icon-right-arrow2.png"></image> </text>
</view> <image
</view> class="right-arrow"
src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<view class="single-line-box"> <view class="single-line-box">
<text class="left-lable">所在地</text> <text class="left-lable">所在地</text>
<view class="right-part" @click="modifyLocation"> <view
<text class="right-content"> class="right-part"
{{ myInfo.province == myInfo.city ? "" : myInfo.province + "·" @click="modifyLocation"
}}{{ myInfo.city == "" ? "" : myInfo.city >
}}{{ myInfo.district == "" ? "" : "·" + myInfo.district }} <text class="right-content">
</text> {{ myInfo.province == myInfo.city ? '' : myInfo.province + '·' }}{{ myInfo.city == '' ? '' : myInfo.city
<image }}{{ myInfo.district == '' ? '' : '·' + myInfo.district }}
class="right-arrow" </text>
src="/static/images/icon-right-arrow2.png"></image> <image
</view> class="right-arrow"
</view> src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<view class="single-line-box"> <view class="single-line-box">
<text class="left-lable">简介</text> <text class="left-lable">简介</text>
<view class="right-part" @click="modifyDescription"> <view
<text class="right-content"> class="right-part"
{{ myInfo.description }} @click="modifyDescription"
</text> >
<image <text class="right-content">
class="right-arrow" {{ myInfo.description }}
src="/static/images/icon-right-arrow2.png"></image> </text>
</view> <image
</view> class="right-arrow"
<!-- <view class="single-line-box"> src="/static/images/icon-right-arrow2.png"
></image>
</view>
</view>
<!-- <view class="single-line-box">
<text class="left-lable">修改密码</text> <text class="left-lable">修改密码</text>
<view class="right-part" @click="modifyPassword"> <view class="right-part" @click="modifyPassword">
<text class="right-content">我猜你忘记密码了~</text> <text class="right-content">我猜你忘记密码了~</text>
@ -90,159 +129,156 @@
src="/static/images/icon-right-arrow2.png"></image> src="/static/images/icon-right-arrow2.png"></image>
</view> </view>
</view> --> </view> -->
</view> </view>
</template> </template>
<script> <script>
import storage from "@/utils/storage.js"; // import storage from '@/utils/storage.js'; //
import api from "@/config/api.js"; import api from '@/config/api.js';
import { import { isStrEmpty, dateFormat } from '@/utils/tools.js';
isStrEmpty,
dateFormat
} from '@/utils/tools.js'
export default { export default {
data() { data() {
return { return {
myInfo: {}, myInfo: {}
}; };
}, },
onShow() { onShow() {
let myInfo = storage.getVlogUserInfo() let myInfo = storage.getVlogUserInfo();
if (isStrEmpty(myInfo.face)) { if (isStrEmpty(myInfo.face)) {
// //
myInfo.face = ""; myInfo.face = '';
} }
this.myInfo = myInfo; this.myInfo = myInfo;
}, },
methods: { methods: {
getGraceDateStr(date) { getGraceDateStr(date) {
return dateFormat("YYYY-mm-dd", date); return dateFormat('YYYY-MM-DD', date);
}, },
// //
changeMyFace() { changeMyFace() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "myFace", url: 'myFace'
}); });
}, },
// //
modifyNickname() { modifyNickname() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyNickname", url: 'modifyNickname'
}); });
}, },
// // id
modifyTiktokNum() { modifyTiktokNum() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyTioktokNum", url: 'modifyTioktokNum'
}); });
}, },
// //
modifySex() { modifySex() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifySex", url: 'modifySex'
}); });
}, },
// //
modifyBirthday() { modifyBirthday() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyBirthday", url: 'modifyBirthday'
}); });
}, },
// //
modifyLocation() { modifyLocation() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyLocation", url: 'modifyLocation'
}); });
}, },
// //
modifyDescription() { modifyDescription() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyDesc", url: 'modifyDesc'
}); });
}, },
// //
modifyPassword() { modifyPassword() {
uni.navigateTo({ uni.navigateTo({
animationType: "fade-in", animationType: 'fade-in',
url: "modifyPass", url: 'modifyPass'
}); });
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #181b27; background-color: #181b27;
.line { .line {
height: 1rpx; height: 1rpx;
background-color: #393a41; background-color: #393a41;
width: 750rpx; width: 750rpx;
} }
.face-box { .face-box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
margin-top: 80rpx; margin-top: 80rpx;
margin-bottom: 80rpx; margin-bottom: 80rpx;
.user-face { .user-face {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border-radius: 100rpx; border-radius: 100rpx;
border-width: 2rpx; border-width: 2rpx;
border-color: #f1f1f1; border-color: #f1f1f1;
} }
} }
.single-line-box { .single-line-box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding: 30rpx; padding: 30rpx;
.left-lable { .left-lable {
align-self: center; align-self: center;
color: #ffffff; color: #ffffff;
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
} }
.right-part { .right-part {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
.right-content { .right-content {
align-self: center; align-self: center;
color: #bfbfbf; color: #bfbfbf;
font-size: 30rpx; font-size: 30rpx;
font-weight: 300; font-weight: 300;
} }
.right-arrow { .right-arrow {
align-self: center; align-self: center;
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin-left: 20rpx; margin-left: 20rpx;
} }
} }
} }
} }
</style> </style>

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

File diff suppressed because it is too large Load Diff

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

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

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/douyin/atuser.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/douyin/biaoqing.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
static/douyin/cuowu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/douyin/jianpan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/douyin/shangyi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
static/douyin/time.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
static/douyin/xianxing.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
static/douyin/zfxsc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/images/link.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
static/images/more.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

View File

@ -1,27 +1,29 @@
{ {
"minSdkVersion": "21", "minSdkVersion": "21",
"dependencies": [ "dependencies": [
"com.google.android.material:material:1.3.0", "com.google.android.material:material:1.3.0",
"com.google.code.gson:gson:2.9.1", "com.google.code.gson:gson:2.9.1",
"commons-codec:commons-codec:1.15", "commons-codec:commons-codec:1.15",
"com.github.bumptech.glide:glide:4.12.0", "com.github.bumptech.glide:glide:4.12.0",
"com.tencent.timpush:timpush:8.5.6864", "com.tencent.timpush:timpush:8.5.6864",
"com.tencent.liteav.tuikit:tuicore:8.5.6864", "com.tencent.liteav.tuikit:tuicore:8.5.6864",
"com.tencent.timpush:huawei:8.5.6864", "com.tencent.timpush:huawei:8.5.6864",
"com.tencent.timpush:xiaomi:8.5.6864", "com.tencent.timpush:xiaomi:8.5.6864",
"com.tencent.timpush:oppo:8.5.6864", "com.tencent.timpush:oppo:8.5.6864",
"com.tencent.timpush:meizu:8.5.6864", "com.tencent.timpush:meizu:8.5.6864",
"com.tencent.timpush:fcm:8.5.6864" "com.tencent.timpush:fcm:8.5.6864",
], "com.tencent.timpush:honor:8.5.6864",
"project": { "com.tencent.timpush:vivo:8.5.6864"
"plugins": [ ],
"com.huawei.agconnect", "project": {
"com.hihonor.mcs.asplugin" "plugins": [
], "com.huawei.agconnect",
"dependencies": [ "com.hihonor.mcs.asplugin"
"com.huawei.agconnect:agcp:1.9.1.301", ],
"com.google.gms:google-services:4.3.15", "dependencies": [
"com.hihonor.mcs:asplugin:2.0.1.300" "com.huawei.agconnect:agcp:1.9.1.301",
] "com.google.gms:google-services:4.3.15",
} "com.hihonor.mcs:asplugin:2.0.1.300"
]
}
} }

View File

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

View File

@ -1,21 +1,25 @@
import Request from "@/lib/request/index.js"; import Request from "@/lib/request/index.js";
import { refreshTokenFn } from "@/api/login.js"; import {
refreshTokenFn
} from "@/api/login.js";
import storage from "@/utils/storage.js"; import storage from "@/utils/storage.js";
import { md5 } from "@/utils/md5.js"; import {
md5
} from "@/utils/md5.js";
import Foundation from "@/utils/Foundation.js"; import Foundation from "@/utils/Foundation.js";
import api from "@/config/api.js"; import api from "@/config/api.js";
import uuid from "@/utils/uuid.modified.js"; import uuid from "@/utils/uuid.modified.js";
function cleanStorage() { function cleanStorage() {
uni.showToast({ uni.showToast({
title: "你的登录状态已过期,请重新登录", title: "你的登录状态已过期,请重新登录",
icon: "none", icon: "none",
duration: 1500, duration: 1500,
}); });
if (uni.showLoading()) { if (uni.showLoading()) {
uni.hideLoading(); uni.hideLoading();
} }
storage.setHasLogin(false); storage.setHasLogin(false);
storage.setAccessToken(""); storage.setAccessToken("");
@ -47,42 +51,42 @@ function cleanStorage() {
let http = new Request(); let http = new Request();
http.setConfig((config) => { http.setConfig((config) => {
// 没有uuid创建 // 没有uuid创建
if (!storage.getUuid()) { if (!storage.getUuid()) {
storage.setUuid(uuid.v1()); storage.setUuid(uuid.v1());
} }
/* 设置全局配置 */ /* 设置全局配置 */
config.baseURL = api.buyer; config.baseURL = api.buyer;
config.header = { config.header = {
...config.header, ...config.header,
}; };
config.validateStatus = (statusCode) => { config.validateStatus = (statusCode) => {
// 不论什么状态,统一在正确中处理 // 不论什么状态,统一在正确中处理
return true; return true;
}; };
return config; return config;
}); });
http.interceptors.request.use( http.interceptors.request.use(
(config) => { (config) => {
/* 请求之前拦截器。可以使用async await 做异步操作 */ /* 请求之前拦截器。可以使用async await 做异步操作 */
let accessToken = storage.getAccessToken(); let accessToken = storage.getAccessToken();
if (accessToken) { if (accessToken) {
const nonce = Foundation.randomString(6); const nonce = Foundation.randomString(6);
const timestamp = parseInt(new Date().getTime() / 1000); const timestamp = parseInt(new Date().getTime() / 1000);
const sign = md5(nonce + timestamp + accessToken); const sign = md5(nonce + timestamp + accessToken);
const _params = { const _params = {
nonce, nonce,
timestamp, timestamp,
sign, sign,
}; };
let params = config.params || {}; let params = config.params || {};
params = { params = {
...params, ...params,
..._params, ..._params,
}; };
config.params = params; config.params = params;
config.header.accessToken = accessToken; config.header.accessToken = accessToken;
@ -121,50 +125,53 @@ http.interceptors.response.use(
isRefreshing = false; isRefreshing = false;
} }
let token = storage.getAccessToken(); let token = storage.getAccessToken();
if ( if (
(token && response.statusCode === 403) || (token && response.statusCode === 403) ||
response.data.status === 403 response.data.status === 403
) { ) {
if (!isRefreshing) { if (!isRefreshing) {
isRefreshing = true; isRefreshing = true;
//调用刷新token的接口 //调用刷新token的接口
return refreshTokenFn(storage.getRefreshToken()) return refreshTokenFn(storage.getRefreshToken())
.then((res) => { .then((res) => {
let { accessToken, refreshToken } = res.data.result; let {
storage.setAccessToken(accessToken); accessToken,
storage.setRefreshToken(refreshToken); refreshToken
} = res.data.result;
storage.setAccessToken(accessToken);
storage.setRefreshToken(refreshToken);
response.header.accessToken = `${accessToken}`; response.header.accessToken = `${accessToken}`;
// token 刷新后将数组的方法重新执行 // token 刷新后将数组的方法重新执行
requests.forEach((cb) => cb(accessToken)); requests.forEach((cb) => cb(accessToken));
requests = []; // 重新请求完清空 requests = []; // 重新请求完清空
return http.request(response.config); return http.request(response.config);
}) })
.catch((err) => { .catch((err) => {
cleanStorage(); cleanStorage();
return Promise.reject(err); return Promise.reject(err);
}) })
.finally(() => { .finally(() => {
isRefreshing = false; isRefreshing = false;
}); });
} else { } else {
// 返回未执行 resolve 的 Promise // 返回未执行 resolve 的 Promise
return new Promise((resolve) => { return new Promise((resolve) => {
// 用函数形式将 resolve 存入,等待刷新后再执行 // 用函数形式将 resolve 存入,等待刷新后再执行
requests.push((token) => { requests.push((token) => {
response.header.accessToken = `${token}`; response.header.accessToken = `${token}`;
resolve(http.request(response.config)); resolve(http.request(response.config));
}); });
}); });
} }
// 如果当前返回没登录 // 如果当前返回没登录
} else if ( } else if (
(!token && response.statusCode === 403) || (!token && response.statusCode === 403) ||
response.data.code === 403 response.data.code === 403
) { ) {
cleanStorage(); cleanStorage();
// 如果当前状态码为正常但是success为不正常时 // 如果当前状态码为正常但是success为不正常时
} else if ( } else if (
@ -188,11 +195,13 @@ http.interceptors.response.use(
} }
); );
export { http }; export {
http
};
export const Method = { export const Method = {
GET: "GET", GET: "GET",
POST: "POST", POST: "POST",
PUT: "PUT", PUT: "PUT",
DELETE: "DELETE", DELETE: "DELETE",
}; };

View File

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