项目初始化
This commit is contained in:
jerry
86
pages/tabbar/components/home/friend/imgBox.vue
Normal file
86
pages/tabbar/components/home/friend/imgBox.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="img-box" v-if="imgList.length > 0">
|
||||
<block v-for="(img,index) in imgList">
|
||||
<view @click="onPreviewTap(img)" class="img" v-if="index < 3">
|
||||
<u-image border-radius="10" width="70rpx" height="70rpx" :src="img"></u-image>
|
||||
<view class="more" v-if="imgList.length > 3">
|
||||
<text>+{{imgList.length-3}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view>暂未上传相册</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
file: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
imgList() {
|
||||
if(this.file){
|
||||
return this.file.split(',');
|
||||
}else{
|
||||
return [];
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 预览图片
|
||||
onPreviewTap(url) {
|
||||
uni.previewImage({
|
||||
current: url,
|
||||
urls: this.imgList,
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.img-box {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
|
||||
.img {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
bottom: 0;
|
||||
background-color: #333333a6;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
246
pages/tabbar/components/home/friend/rankBox.vue
Normal file
246
pages/tabbar/components/home/friend/rankBox.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<view class="rank-box">
|
||||
<view class="tab-box">
|
||||
<tui-tabs width="200" unlined :tabs="tabList" badgeBgColor="var(--ui-BG-Main)" selectedColor="var(--ui-BG-Main)" sliderBgColor="var(--ui-BG-Main)" :currentTab="current" @change="change"></tui-tabs>
|
||||
</view>
|
||||
<view class="user-box">
|
||||
<view class="avatar-box two" @click="detail(1)">
|
||||
<view class="img-box">
|
||||
<img v-if="list[1]" class="img" :src="list[1].avatar"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
|
||||
<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/03072abb5a8c90a4f457549b8394d3c3db2a652410692d732b5c25f2478e3a85.png"></img>
|
||||
</view>
|
||||
<view class="nickname" v-if="list[1]">{{list[1].nickname}}</view>
|
||||
<view class="nickname" v-else>???</view>
|
||||
</view>
|
||||
<view class="avatar-box one" @click="detail(0)">
|
||||
<view class="img-box">
|
||||
<img v-if="list[0]" class="img" :src="list[0].avatar"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
|
||||
<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d191aec3b3d6e95c1dcb3bace7bffe28834f4fb062a9675aeaa1ae42a9bbc366.png"></img>
|
||||
</view>
|
||||
<view class="nickname" v-if="list[0]">{{list[0].nickname}}</view>
|
||||
<view class="nickname" v-else>???</view>
|
||||
</view>
|
||||
<view class="avatar-box three" @click="detail(2)">
|
||||
<view class="img-box">
|
||||
<img v-if="list[2]" class="img" :src="list[2].avatar"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
|
||||
<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/27209281e1b0e00dcc112bae4d06c14b089ec2f74db14b62eca4cbc0cf741cff.png"></img>
|
||||
</view>
|
||||
<view class="nickname" v-if="list[2]">{{list[2].nickname}}</view>
|
||||
<view class="nickname" v-else>???</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time-box">更新时间: {{updateTime}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
|
||||
import sheep from '@/sheep';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
components: {
|
||||
tuiTabs
|
||||
},
|
||||
props: {
|
||||
maleWeekTopList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
femaleWeekTopList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
current: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
updateTime() {
|
||||
this.list = this.femaleWeekTopList;
|
||||
|
||||
// 获取当前日期和时间
|
||||
const now = dayjs();
|
||||
const nowDays = now.format('MM/DD');
|
||||
const sevenDaysAgo = now.subtract(7, 'day').format('MM/DD');
|
||||
return sevenDaysAgo + '-' + nowDays
|
||||
},
|
||||
tabList() {
|
||||
return [{
|
||||
name: '女神榜',
|
||||
list: this.femaleWeekTopList,
|
||||
},{
|
||||
name: '男神榜',
|
||||
list: this.maleWeekTopList,
|
||||
}];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.index;
|
||||
this.list = this.tabList[e.index].list;
|
||||
},
|
||||
detail(e) {
|
||||
var user = this.list[e];
|
||||
sheep.$router.go('/pages/user/detail/index',{id: user.id});
|
||||
},
|
||||
chat(e) {
|
||||
var user = this.list[e];
|
||||
if(!user){
|
||||
return;
|
||||
}
|
||||
|
||||
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.createMemberConversation({
|
||||
userId: user.id,
|
||||
groupType: 1,
|
||||
lastMessageContentType: 1,
|
||||
}).then(res => {
|
||||
if(res.data){
|
||||
sheep.$router.go('/pages/im/index',{groupId: res.data, receiveUserId: user.id});
|
||||
}
|
||||
});
|
||||
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>
|
||||
.rank-box {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 5px;
|
||||
|
||||
.tab-box {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.nickname {
|
||||
margin-top: 10px;
|
||||
font-size: 28rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 160rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.point {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.two-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.one{
|
||||
color: #fed530;
|
||||
|
||||
.img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border: 2px solid #fed530;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.two {
|
||||
color: #d8d8d8;
|
||||
|
||||
.img {
|
||||
border: 2px solid #d8d8d8;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.three {
|
||||
color: #ef9e3f;
|
||||
|
||||
.img {
|
||||
border: 2px solid #ef9e3f;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.time-box {
|
||||
padding-top: 15px;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
109
pages/tabbar/components/home/friend/stickyBox.vue
Normal file
109
pages/tabbar/components/home/friend/stickyBox.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="tag-box">
|
||||
<view class="title">
|
||||
<view class="icon">
|
||||
<u-icon name="account-fill" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
<text class="text">更多用户</text>
|
||||
</view>
|
||||
<view class="sticky-box">
|
||||
<view class="btn-tag" @click="searchTab">
|
||||
<text class="text">筛选</text>
|
||||
<u-icon name="shaixuan" custom-prefix="iconfont" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import $store from '@/sheep/store';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: uni.upx2px(80),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
searchTab() {
|
||||
const isLogin = sheep.$store('user').isLogin;
|
||||
if(!isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
$store('modal').$patch((state) => {
|
||||
state.search = true;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background-color: #fafafa;
|
||||
height: 100rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
background-color: #ddd;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-box {
|
||||
display: flex;
|
||||
|
||||
.btn-tag {
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
margin-left: 5px;
|
||||
padding: 0px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
height: 48rpx;
|
||||
|
||||
.text {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
210
pages/tabbar/components/home/friend/userCard.vue
Normal file
210
pages/tabbar/components/home/friend/userCard.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="user-card-box">
|
||||
<view class="user-card">
|
||||
<view class="title">
|
||||
<view class="icon">
|
||||
<u-icon name="tuijian" custom-prefix="iconfont" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
<text class="text">新人推荐</text>
|
||||
</view>
|
||||
<scroll-view class="scroll-box" scroll-x>
|
||||
<view class="user-swiper">
|
||||
<view @click="detail(item)" class="user-box" v-for="(item,i) in newList">
|
||||
<view class="avatar-box">
|
||||
<u-avatar mode="square" size="140" :src="item.avatar"></u-avatar>
|
||||
<view v-if="item.onlineStatus" class="badge"></view>
|
||||
</view>
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="user-card">
|
||||
<view class="title">
|
||||
<view class="icon">
|
||||
<u-icon name="huo" custom-prefix="iconfont" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
<text class="text">置顶用户</text>
|
||||
</view>
|
||||
<scroll-view class="scroll-box" scroll-x>
|
||||
<view class="user-swiper">
|
||||
|
||||
<view @click="detail(item)" class="user-box" v-for="(item,i) in orderList">
|
||||
<view class="avatar-box">
|
||||
<u-avatar mode="square" size="140" :src="item.avatar"></u-avatar>
|
||||
<view v-if="item.onlineStatus" class="badge"></view>
|
||||
<view class="count-down">
|
||||
<u-count-down :timestamp="item.timestamp" format="HH时mm分ss秒"></u-count-down>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
newList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
hotList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderList() {
|
||||
this.hotList.forEach((order) => order.timestamp = order.slashedTime ? sheep.$helper.parseTimeData(order.slashedTime) : 0);
|
||||
return this.hotList;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
detail(e) {
|
||||
sheep.$router.go('/pages/user/detail/index',{id: e.id});
|
||||
},
|
||||
chat(e) {
|
||||
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.createMemberConversation({
|
||||
userId: e.id,
|
||||
groupType: 1,
|
||||
lastMessageContentType: 1,
|
||||
}).then(res => {
|
||||
if(res.data){
|
||||
sheep.$router.go('/pages/im/index',{groupId: res.data, receiveUserId: e.id});
|
||||
}
|
||||
});
|
||||
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>
|
||||
.user-card-box {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding: 10px 0;
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 15px;
|
||||
|
||||
.icon {
|
||||
background-color: #ddd;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-swiper {
|
||||
display: flex;
|
||||
|
||||
.avatar-box {
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
|
||||
.badge {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.count-down {
|
||||
font-size: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
|
||||
.nickname {
|
||||
font-size: 28rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 140rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user