项目初始化
This commit is contained in:
jerry
260
pages/tabbar/components/home/friend/topBox.vue
Normal file
260
pages/tabbar/components/home/friend/topBox.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view class="main-box">
|
||||
<view class="notice-box">
|
||||
<notice-bar></notice-bar>
|
||||
</view>
|
||||
|
||||
<!-- <view class="blind-box">
|
||||
<view class="blind-card">
|
||||
<view class="icon">
|
||||
<image style="width: 88rpx;height: 88rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/1d291d514fe8833f941924f273a5deb8f2cc8c06680fd49b6c08c58b16338c93.png"></image>
|
||||
</view>
|
||||
<view class="avatar-box">
|
||||
<image style="width: 320rpx;height: 64rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/41888275859ee7d4663bfcbd322a55ac3da9bbfc3621ca8a1137f39b2fde47bd.png"></image>
|
||||
<view @click="blindOrder" class="btn">快速匹配</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view>
|
||||
<rank-box :femaleWeekTopList="femaleWeekTopList" :maleWeekTopList="maleWeekTopList"></rank-box>
|
||||
</view> -->
|
||||
|
||||
<view class="card-box">
|
||||
<user-card :newList="newList" :hotList="hotList"></user-card>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<sticky-box @tabClick="tabClick" :scrollTop="scrollTop" :stickyTop="stickyTop"></sticky-box>
|
||||
</view>
|
||||
|
||||
<view class="menu-btn">
|
||||
<view class="icon" @click="slashed">
|
||||
<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/097d1fd05a1176fe93df9de64e416e771ff8ccba72330d90d905783dff66c376.png"></image>
|
||||
</view>
|
||||
|
||||
<!-- <view class="icon" @click="blindOrder">
|
||||
<image class="img" src="http://cos.duopei.feiniaowangluo.com/2065/shop/navbar/1727183771735mx5tNxqRg6.jpg"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NoticeBar from '@/pages/tabbar/components/home/noticeBar.vue';
|
||||
import StickyBox from '@/pages/tabbar/components/home/friend/stickyBox.vue';
|
||||
import RankBox from '@/pages/tabbar/components/home/friend/rankBox.vue';
|
||||
import UserCard from '@/pages/tabbar/components/home/friend/userCard.vue';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
NoticeBar,
|
||||
RankBox,
|
||||
StickyBox,
|
||||
UserCard,
|
||||
},
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: uni.upx2px(80),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actionStyle: {
|
||||
backgroundColor: 'var(--ui-BG-Main)',
|
||||
borderRadius: '40px',
|
||||
padding: '7px',
|
||||
color: '#fff',
|
||||
fontSize: '28rpx',
|
||||
width: '80px',
|
||||
},
|
||||
keyword: '',
|
||||
categoryList: [],
|
||||
newList: [],
|
||||
hotList: [],
|
||||
maleWeekTopList: [],
|
||||
femaleWeekTopList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getInitData();
|
||||
},
|
||||
methods: {
|
||||
tabClick(e) {
|
||||
this.$emit('tabClick', e);
|
||||
},
|
||||
getInitData() {
|
||||
this.getHomeData();
|
||||
|
||||
UserApi.getWeekTopList().then(res => {
|
||||
this.maleWeekTopList = res.data.maleWeekTopList;
|
||||
this.femaleWeekTopList = res.data.femaleWeekTopList;
|
||||
});
|
||||
|
||||
},
|
||||
search() {
|
||||
this.$emit('search', this.keyword);
|
||||
},
|
||||
blindOrder() {
|
||||
this.chat();
|
||||
},
|
||||
slashed() {
|
||||
var that = this;
|
||||
uni.showModal({
|
||||
title: '首页置顶',
|
||||
content: '每次置顶3小时，可以累计置顶时间。累计时间越多，排名越靠前',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
that.submitSlashed();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
getHomeData() {
|
||||
UserApi.getHomeData().then(res => {
|
||||
this.newList = res.data.memberNewList;
|
||||
this.hotList = res.data.memberHotList;
|
||||
});
|
||||
},
|
||||
submitSlashed() {
|
||||
UserApi.slashed().then(res => {
|
||||
if(res.data){
|
||||
this.getHomeData();
|
||||
}
|
||||
});
|
||||
},
|
||||
chat() {
|
||||
const isLogin = sheep.$store('user').isLogin;
|
||||
if(!isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
// 如果用户已经有头像和昵称,不要每次登录都要重新上传头像。
|
||||
if(userInfo.visible) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.subscribeMessage();
|
||||
// #endif
|
||||
ImConversationApi.getRandomMemberConversation().then(res => {
|
||||
if(res.data){
|
||||
sheep.$router.go('/pages/im/index',{groupId: res.data.groupId, receiveUserId: res.data.userId});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 触发小程序授权信息弹框
|
||||
// #ifdef MP-WEIXIN
|
||||
showAuthModal('mpAuthorization');
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
showAuthModal('h5Authorization');
|
||||
// #endif
|
||||
},
|
||||
subscribeMessage() {
|
||||
const event = [WxaSubscribeTemplate.UNREAD_MESSAGE];
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
|
||||
// 订阅后记录一下订阅状态
|
||||
uni.removeStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE);
|
||||
uni.setStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE, '已订阅');
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-box {
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
padding: 3px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.notice-box {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.category-box {
|
||||
padding: 15px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.blind-box {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.blind-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40px;
|
||||
padding: 5px 10px;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-btn {
|
||||
position: fixed;
|
||||
bottom: 220rpx;
|
||||
right: 25rpx;
|
||||
z-index: 1;
|
||||
|
||||
.icon {
|
||||
background-color: #ffff;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 10px #cccccc;
|
||||
margin-top: 70rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 80rpx;
|
||||
width: 80rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user