393 lines
10 KiB
Vue
393 lines
10 KiB
Vue
<template>
|
|
<view class="notice">
|
|
<view class="user-list">
|
|
<view class="head">
|
|
<view class="search-wrapper">
|
|
<!-- <block v-for="(item,index) in menus" :key="index">
|
|
<view class="box" @click="$push(item.path,item)">
|
|
<view class="btn">
|
|
<image :src="item.icon" mode="widthFix"></image>
|
|
</view>
|
|
<text>{{ item.title }}</text>
|
|
<u-badge max="99" absolute :offset="[-2,-5]" :value="item.value"></u-badge>
|
|
</view>
|
|
</block> -->
|
|
<view class="box" @click="$push(menus[0].path,menus[0])">
|
|
<view class="btn">
|
|
<image src="@/static/icon/notice-01.png" mode="widthFix"></image>
|
|
</view>
|
|
<text>喜欢我</text>
|
|
<u-badge max="99" absolute :offset="[-2,-5]" :value="unReadLikeMeNumber"></u-badge>
|
|
</view>
|
|
<view class="box" @click="$push(menus[1].path,menus[1])">
|
|
<view class="btn">
|
|
<image src="@/static/icon/notice-02.png" mode="widthFix"></image>
|
|
</view>
|
|
<text>我喜欢</text>
|
|
</view>
|
|
<view class="box" @click="$push(menus[2].path,menus[2])">
|
|
<view class="btn">
|
|
<image src="@/static/icon/notice-03.png" mode="widthFix"></image>
|
|
</view>
|
|
<text>评论</text>
|
|
<u-badge max="99" absolute :offset="[-2,-5]" :value="unReadCommentNumber"></u-badge>
|
|
</view>
|
|
<view class="box" @click="$push(menus[3].path,menus[3])">
|
|
<view class="btn">
|
|
<image src="@/static/icon/notice-04.png" mode="widthFix"></image>
|
|
</view>
|
|
<text>看过我</text>
|
|
<u-badge max="99" absolute :offset="[-2,-5]" :value="unReadLookNumber"></u-badge>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-list height="88vh" v-if="isLogin">
|
|
<view class="list">
|
|
<u-swipe-action auto-close>
|
|
<u-list-item v-for="(item, index) in conversationArr" :key="item.id">
|
|
<u-swipe-action-item
|
|
closeAfterClick
|
|
:index="item.id"
|
|
:options="options"
|
|
@click="RemoveFriend(item.friendId)"
|
|
:key="item.id"
|
|
autoClose
|
|
>
|
|
<u-cell isLink @click="onUserDetail(item)">
|
|
<view slot="title" class="nickname">
|
|
{{ item.friendInfo.nickname }}
|
|
</view>
|
|
<view slot="icon" :iconStyle="iconStyle" class="head avatar2">
|
|
<u-avatar size="50" :src="item.friendInfo.avatar" shape="square" mode="aspectFill"
|
|
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
|
<view>
|
|
<u-badge type="error" max="99" shape="circle" :absolute="true" :offset="[-8,-2]" :value="item.unRead"></u-badge>
|
|
</view>
|
|
</view>
|
|
<view slot="label">
|
|
<rich-text class="content" :nodes="item.content"></rich-text>
|
|
</view>
|
|
<view slot="right-icon">
|
|
|
|
<view class="fans">{{ new Date(item.updateTime).getTime() | timeFrom }}</view>
|
|
</view>
|
|
</u-cell>
|
|
</u-swipe-action-item>
|
|
|
|
</u-list-item>
|
|
</u-swipe-action>
|
|
<u-empty v-if="conversationArr.length == 0" mode="message" text="暂无消息"
|
|
icon="http://cdn.uviewui.com/uview/empty/message.png">
|
|
</u-empty>
|
|
</view>
|
|
</u-list>
|
|
<u-empty :marginTop="180" v-if="!isLogin" mode="permission" text="暂时还没有人和你打招呼哦!"
|
|
icon="https://file.wsdns.cn/empty/data.png">
|
|
</u-empty>
|
|
</view>
|
|
<!-- <view class="wechat-auth agree" v-if="!isLogin" >
|
|
<button class="btn-normal" @click="$push('pages/login/index')">
|
|
<view class="wechat-auth-container">
|
|
<image class="icon" src="@/static/channel/wechat.png"></image>
|
|
<text class="title">立即登录</text>
|
|
</view>
|
|
</button>
|
|
</view> -->
|
|
<u-modal showCancelButton @cancel="showIdCardModal = false" @confirm="doAuth" :show="showIdCardModal" title="完成认证我们才能开始配对聊天哦" cancelText="稍后认证" confirm-text="立即认证"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store from '@/store/index.js'
|
|
import storage from '../../utils/storage'
|
|
import mixin from '@/core/mixins/tabbar'
|
|
import {
|
|
ACCESS_TOKEN,
|
|
USER_ID
|
|
} from '@/store/mutation-types'
|
|
import {
|
|
navTo
|
|
} from '@/core/app.js'
|
|
import {
|
|
mapGetters,
|
|
mapMutations,
|
|
mapActions
|
|
} from 'vuex'
|
|
|
|
const menus = [
|
|
{
|
|
index: 0,
|
|
title: '喜欢我',
|
|
icon: '../../static/icon/notice-01.png',
|
|
path: 'sub_pages/notice/fans',
|
|
value: 41,
|
|
show: false
|
|
},
|
|
{
|
|
index: 1,
|
|
title: '我喜欢',
|
|
icon: '../../static/icon/notice-02.png',
|
|
path: 'sub_pages/notice/like',
|
|
value: 0,
|
|
show: false
|
|
},
|
|
{
|
|
index: 2,
|
|
title: '评论',
|
|
icon: '../../static/icon/notice-03.png',
|
|
path: 'sub_pages/notice/comment',
|
|
value: 12,
|
|
show: false
|
|
},
|
|
{
|
|
index: 3,
|
|
title: '看过我',
|
|
icon: '../../static/icon/notice-04.png',
|
|
path: 'sub_pages/notice/look',
|
|
value: 8,
|
|
show: false
|
|
}
|
|
]
|
|
|
|
export default {
|
|
mixins: [mixin],
|
|
data() {
|
|
return {
|
|
menus,
|
|
title: '国内馆',
|
|
// 正在加载中
|
|
isLoading: false,
|
|
// 是否授权了定位权限
|
|
isAuthor: true,
|
|
// 当前选择的门店ID
|
|
selectedId: null,
|
|
// 订单列表数据
|
|
list: [],
|
|
navTo,
|
|
isLogin: true,
|
|
options: [{text: '删除',style: {backgroundColor: '#fa3534'}}],
|
|
showIdCardModal: false
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
const userId = uni.getStorageSync('userId')
|
|
if (userId == 1101) {
|
|
this.$push('pages/login/index')
|
|
return false
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations(['ADD_FRIEND']),
|
|
...mapActions(['RemoveFriend', 'GetUserInfo']),
|
|
onUserDetail(item) {
|
|
if(this.$store.getters.userInfo.certification != 1){
|
|
this.showIdCardModal = true
|
|
return false
|
|
}
|
|
this.ADD_FRIEND(item.friendInfo)
|
|
uni.navigateTo({
|
|
url: '/pages/chat/chat?friendId=' + item.friendInfo.userId
|
|
})
|
|
},
|
|
changeCity() {
|
|
this.$toast('切换区域')
|
|
},
|
|
doAuth(){
|
|
uni.navigateTo({
|
|
url: '/sub_pages/certification/id-card/id-card',
|
|
events: {
|
|
reload: () => {
|
|
this.GetUserInfo()
|
|
this.showIdCardModal = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
filters: {
|
|
formatTime(val) {
|
|
const date = new Date(val);
|
|
let today = new Date().setHours(0, 0, 0, 0);
|
|
let d = new Date(val).setHours(0, 0, 0, 0);
|
|
if (d === today) {
|
|
return uni.$u.timeFormat(date, 'hh:MM')
|
|
} else {
|
|
return uni.$u.timeFormat(date)
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
page{
|
|
background-color: #ffffff !important;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.notice {
|
|
}
|
|
.head{
|
|
display: flex;
|
|
align-items: center;
|
|
.search-wrapper {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 750rpx;
|
|
padding: 25rpx 0;
|
|
border-bottom: 1rpx solid #e9ebf1;
|
|
.box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
line-height: 30rpx;
|
|
position: relative;
|
|
|
|
.btn {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
image {
|
|
width: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.user-list {
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nickname {
|
|
color: #999999;
|
|
}
|
|
|
|
.avatar2 {
|
|
display: flex;
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.unread {
|
|
position: absolute;
|
|
min-width: 35rpx;
|
|
min-height: 35rpx;
|
|
border-radius: 35rpx;
|
|
background-color: #f56c6c;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
top: -14rpx;
|
|
right: 0;
|
|
}
|
|
|
|
.content {
|
|
padding: 20rpx 0;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.fans {
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
// 搜索按钮
|
|
.search-button {
|
|
width: 25%;
|
|
box-sizing: border-box;
|
|
|
|
.button {
|
|
height: 64rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 0 5px 5px 0;
|
|
background: #2C71C7
|
|
}
|
|
}
|
|
.u-body-item {
|
|
align-items: stretch !important
|
|
}
|
|
.agree {
|
|
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
|
}
|
|
|
|
// 微信授权登录
|
|
.wechat-auth {
|
|
width: 600rpx;
|
|
height: 86rpx;
|
|
margin: 100rpx auto 50rpx auto;
|
|
color: $main-text;
|
|
border-radius: 80rpx;
|
|
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
|
letter-spacing: 5rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.btn-normal {
|
|
width: 580rpx;
|
|
}
|
|
|
|
.btn-normal-no {
|
|
width: 580rpx;
|
|
}
|
|
|
|
button {
|
|
background: none !important;
|
|
}
|
|
|
|
.wechat-auth-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
color: $main-text;
|
|
background: none !important;
|
|
|
|
.title {
|
|
color: #f3f3f3;
|
|
}
|
|
}
|
|
|
|
// 登录按钮
|
|
.login-button {
|
|
width: 100%;
|
|
height: 86rpx;
|
|
margin-top: 80rpx;
|
|
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
|
color: $main-text;
|
|
border-radius: 80rpx;
|
|
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
|
letter-spacing: 5rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
</style> |