merge
This commit is contained in:
唐明明
@@ -4,7 +4,7 @@
|
||||
"configurations": [{
|
||||
"app-plus" :
|
||||
{
|
||||
"launchtype" : "remote"
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"default" :
|
||||
{
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
/**
|
||||
* Web唐明明
|
||||
* 匆匆数载恍如梦，岁月迢迢华发增。
|
||||
@@ -6,7 +5,9 @@
|
||||
* moduleName: 聊聊
|
||||
*/
|
||||
|
||||
import { request } from '../index'
|
||||
import {
|
||||
request
|
||||
} from '../index'
|
||||
|
||||
// 获取好友列表
|
||||
const getFriends = () => {
|
||||
@@ -38,9 +39,40 @@ const getPedings = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const resolveFriend = (targetId) => {
|
||||
return request({
|
||||
method: 'POST',
|
||||
url: 'im/friends/accept/' + targetId
|
||||
})
|
||||
}
|
||||
|
||||
const rejectFriend = (targetId) => {
|
||||
return request({
|
||||
method: 'DELETE',
|
||||
url: 'im/friends/accept/' + targetId
|
||||
})
|
||||
}
|
||||
|
||||
const searchFriend = (mobile) => {
|
||||
return request({
|
||||
url: 'im/search?mobile=' + mobile
|
||||
})
|
||||
}
|
||||
|
||||
const pedingFriend = (recipient) => {
|
||||
return request({
|
||||
method: 'POST',
|
||||
url: 'im/friends/' + recipient
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
getImToken,
|
||||
getFriends,
|
||||
getUserInfo,
|
||||
getPedings
|
||||
getPedings,
|
||||
resolveFriend,
|
||||
rejectFriend,
|
||||
searchFriend,
|
||||
pedingFriend
|
||||
}
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
"name" : "ZH-HEALTH",
|
||||
"appid" : "__UNI__C29473D",
|
||||
"description" : "ZH-HEALTH，您手上的健康管理专家",
|
||||
"versionName" : "1.0.3",
|
||||
"versionCode" : 103,
|
||||
"versionName" : "1.0.5",
|
||||
"versionCode" : 105,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
|
||||
@@ -372,7 +372,7 @@
|
||||
"name": "imPrivate",
|
||||
"style": {
|
||||
"navigationBarTitleText": "聊天",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationBarBackgroundColor": "#F3F6FB",
|
||||
"disableScroll": true,
|
||||
"app-plus": {
|
||||
"titleNView": {
|
||||
@@ -420,8 +420,8 @@
|
||||
"path": "pages/im/friends/pending",
|
||||
"name": "imFriendsPending",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新的朋友",
|
||||
"navigationBarBackgroundColor":"#FFFFFF"
|
||||
"navigationBarTitleText": "新朋友",
|
||||
"navigationBarBackgroundColor":"#F3F6FB"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -429,7 +429,7 @@
|
||||
"name": "imFriendsInfo",
|
||||
"style": {
|
||||
"navigationBarTitleText": "好友资料",
|
||||
"navigationBarBackgroundColor":"#FFFFFF"
|
||||
"navigationBarBackgroundColor":"#F3F6FB"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,125 +1,84 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="list">
|
||||
<view class="list__item" @click="toPending">
|
||||
<u-avatar size="35" icon="plus-people-fill" fontSize="26" bg-color="#f0ad4e"></u-avatar>
|
||||
<text class="list__item__user-name">新的朋友</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="list__item" @click="showToast">
|
||||
<u-avatar size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar>
|
||||
<text class="list__item__user-name">我的群聊</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
<block v-if="friendsArr.length > 0">
|
||||
<u-index-list activeColor="#34CE98">
|
||||
<template v-for="(item, index) in friendsArr">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<u-index-anchor bgColor="#F3F6FB" color="#666" :text="indexList[index]" :key="index"></u-index-anchor>
|
||||
<!-- #endif -->
|
||||
<u-index-item :key="index">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<u-index-anchor :text="indexList[index]" bgColor="#F3F6FB" color="#666"></u-index-anchor>
|
||||
<!-- #endif -->
|
||||
<view class="list" v-for="(item1, index1) in item" :key="index1">
|
||||
<view class="list__item" @click="toInfo(10047)">
|
||||
<image class="list__item__avatar" :src="item1.url"></image>
|
||||
<!-- <u-avatar size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> -->
|
||||
<text class="list__item__user-name">{{item1.name}}</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
</u-index-item>
|
||||
</template>
|
||||
<view slot="footer" class="u-safe-area-inset--bottom">
|
||||
<text class="list__footer">共305位好友</text>
|
||||
</view>
|
||||
</u-index-list>
|
||||
</block>
|
||||
<block v-else>
|
||||
<u-empty
|
||||
class="pages-null"
|
||||
mode="data"
|
||||
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
||||
text="暂未添加好友"
|
||||
>
|
||||
</u-empty>
|
||||
</block>
|
||||
<u-list height="auto">
|
||||
<u-list-item>
|
||||
<u-cell title="新的朋友" @click="toPending">
|
||||
<u-avatar slot="icon" size="35" font-size="24" icon="plus-people-fill" shape="square"
|
||||
bg-color="#f0ad4e"></u-avatar>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<u-list-item>
|
||||
<u-cell title="我的群聊" @click="showToast">
|
||||
<u-avatar slot="icon" size="35" font-size="24" icon="account-fill" shape="square"
|
||||
bg-color="#4cd964"></u-avatar>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
|
||||
<block v-if="friends.length > 0">
|
||||
<u-list height="auto">
|
||||
<u-list-item v-for="(item, index) in friends" :key="index">
|
||||
<u-cell :title="item.name + item.userId" @click="toInfo(item.userId)">
|
||||
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</block>
|
||||
<block v-else>
|
||||
<u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
|
||||
</u-empty>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getFriends } from '@/apis/interfaces/im'
|
||||
import {
|
||||
getFriends
|
||||
} from '@/apis/interfaces/im'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
friendsArr: []
|
||||
friends: []
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
getFriends().then(res => {
|
||||
this.friendsArr = res
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
getFriends().then(res => {
|
||||
this.friends = res
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 扫码提示
|
||||
showToast(){
|
||||
uni.showToast({
|
||||
title: "群聊功能暂未开放，敬请期待",
|
||||
icon : "none"
|
||||
})
|
||||
},
|
||||
// 新朋友
|
||||
// 扫码提示
|
||||
showToast() {
|
||||
uni.showToast({
|
||||
title: "群聊功能暂未开放，敬请期待",
|
||||
icon: "none"
|
||||
})
|
||||
},
|
||||
// 新朋友
|
||||
toPending() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/pending'
|
||||
})
|
||||
},
|
||||
// 用户资料
|
||||
// 用户资料
|
||||
toInfo(targetId) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/info?targeId=' + targetId
|
||||
url: '/pages/im/friends/info?targetId=' + targetId
|
||||
})
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
this.toPending()
|
||||
}
|
||||
onNavigationBarButtonTap(e) {
|
||||
this.toPending()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
&__item {
|
||||
@include flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
&__avatar {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&__user-name {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
color: $u-main-color;
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
color: $u-tips-color;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
// 页面空
|
||||
.pages-null {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
// 页面空
|
||||
.pages-null{
|
||||
height: 70vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,28 +1,29 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-info">
|
||||
<u-avatar
|
||||
src="https://cdn.uviewui.com/uview/album/1.jpg"
|
||||
size="58"
|
||||
></u-avatar>
|
||||
<view class="nickname">{{ userInfo.name }}</view>
|
||||
<view class="sex">
|
||||
<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
|
||||
<!-- <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-lists">
|
||||
<view class="content">
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-info">
|
||||
<u-avatar :src="userInfo.portraitUrl" size="100"></u-avatar>
|
||||
|
||||
<view class="nickname">{{ userInfo.name }}</view>
|
||||
<!-- <view class="sex">
|
||||
<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
|
||||
<u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag>
|
||||
</view> -->
|
||||
<view class="address">
|
||||
{{ userInfo.address}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="user-lists">
|
||||
<view class="user-lists-item">
|
||||
<label>地区</label>
|
||||
<text>黑龙江 哈尔滨</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 发送消息 -->
|
||||
<view class="info-footer">
|
||||
<button class="open-btn" @click="toPrivate">发送消息</button>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 发送消息 -->
|
||||
<view class="info-footer">
|
||||
<button class="open-btn" @click="toPrivate">发送消息</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -33,18 +34,25 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
targetId: '',
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.targetId = e.targetId
|
||||
console.log('获取资料',e.targetId);
|
||||
getUserInfo(e.targetId).then(res => {
|
||||
this.userInfo = res
|
||||
console.log('获取资料', res);
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.name
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toPrivate() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/private/index?targetId=10047&conversationType=1'
|
||||
uni.redirectTo({
|
||||
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -52,71 +60,87 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
min-height: 100vh;
|
||||
background: $window-color;
|
||||
}
|
||||
// 用户信息
|
||||
.user-info{
|
||||
padding: $padding*3 $padding;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
.nickname{
|
||||
font-size: 42rpx;
|
||||
padding-top: $padding;
|
||||
color: $text-color;
|
||||
}
|
||||
.sex{
|
||||
padding-top: $padding/2;
|
||||
text{
|
||||
font-size: $title-size-sm;
|
||||
background: #303133;
|
||||
padding: 0 10rpx;
|
||||
color: white;
|
||||
border-radius: $radius-m;
|
||||
line-height: 30rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-lists{
|
||||
margin-top: $margin;
|
||||
background: white;
|
||||
.user-lists-item{
|
||||
padding: 0 $padding;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size-lg;
|
||||
label{
|
||||
color: $text-color;
|
||||
}
|
||||
text{
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 发送消息
|
||||
.info-footer{
|
||||
padding: $padding;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.open-btn{
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: $main-color;
|
||||
border-radius: $radius-lg;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: $title-size;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
min-height: 100vh;
|
||||
background: $window-color;
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
.user-info {
|
||||
padding: $padding*3 $padding;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: white;
|
||||
|
||||
.nickname {
|
||||
font-size: 42rpx;
|
||||
padding-top: $padding;
|
||||
}
|
||||
|
||||
.address {
|
||||
line-height: 64rpx;
|
||||
font-size: 26rpx;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
.sex {
|
||||
padding-top: $padding/2;
|
||||
|
||||
text {
|
||||
font-size: $title-size-sm;
|
||||
background: #303133;
|
||||
padding: 0 10rpx;
|
||||
color: white;
|
||||
border-radius: $radius-m;
|
||||
line-height: 30rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-lists {
|
||||
margin-top: $margin;
|
||||
background: white;
|
||||
|
||||
.user-lists-item {
|
||||
padding: 0 $padding;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size-lg;
|
||||
|
||||
label {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
text {
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
.info-footer {
|
||||
padding: $padding;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.open-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: $main-color;
|
||||
border-radius: $radius-lg;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: $title-size;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,69 +1,119 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 搜索 -->
|
||||
<view class="header-search">
|
||||
<u-search placeholder="输入手机号码搜索" v-model="searchValue"></u-search>
|
||||
</view>
|
||||
<!-- 新朋友 -->
|
||||
<view class="lists">
|
||||
<view class="lists-item" v-for="(item, index) in 10" :key="index">
|
||||
<image class="lists-item-cover" src="" mode="aspectFill"></image>
|
||||
<view class="">好友</view>
|
||||
<view class="">
|
||||
<text>通过</text>
|
||||
<text>拒绝</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 空列表 -->
|
||||
<view class="">
|
||||
空列表
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<!-- 搜索 -->
|
||||
<u-sticky>
|
||||
<view class="header-search">
|
||||
<u-search placeholder="输入手机号码搜索" bgColor="white" @custom="search" @search="search"
|
||||
v-model="searchValue"></u-search>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<u-list height="auto">
|
||||
<u-list-item v-for="(item, index) in searchResult" :key="index">
|
||||
<u-cell :title="item.name">
|
||||
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
|
||||
|
||||
<div style="width: 50px;" slot="value">
|
||||
<u-button type="success" size="small" @click="pending(item.userId)">申请</u-button>
|
||||
</div>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
<!-- 新朋友 -->
|
||||
<u-divider text="好友申请"></u-divider>
|
||||
<u-list height="auto">
|
||||
<u-swipe-action>
|
||||
<u-list-item v-for="(item, index) in pedings" :key="index">
|
||||
<u-swipe-action-item autoClose :options="options" @click="action($event, item)">
|
||||
<u-cell :title="item.name">
|
||||
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
|
||||
</u-cell>
|
||||
</u-swipe-action-item>
|
||||
</u-list-item>
|
||||
</u-swipe-action>
|
||||
</u-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
searchValue: "",
|
||||
listsArr: []
|
||||
}
|
||||
}
|
||||
}
|
||||
import {
|
||||
getPedings,
|
||||
resolveFriend,
|
||||
rejectFriend,
|
||||
searchFriend,
|
||||
pedingFriend
|
||||
} from '@/apis/interfaces/im.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchResult: [],
|
||||
searchValue: '',
|
||||
pedings: [],
|
||||
options: [{
|
||||
text: '通过',
|
||||
style: {
|
||||
backgroundColor: '#3c9cff'
|
||||
}
|
||||
}, {
|
||||
text: '拒绝',
|
||||
style: {
|
||||
backgroundColor: '#f56c6c'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getPeddingList()
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
console.log('sousuo');
|
||||
searchFriend(this.searchValue).then(res => {
|
||||
console.log(res);
|
||||
this.searchResult = res
|
||||
}).catch(err => {
|
||||
console.log('err', err);
|
||||
})
|
||||
},
|
||||
action(e, item) {
|
||||
if (e.index == 0) {
|
||||
resolveFriend(item.userId).then(res => {
|
||||
this.getPeddingList()
|
||||
})
|
||||
} else {
|
||||
rejectFriend(item.userId).then(res => {
|
||||
this.getPeddingList()
|
||||
})
|
||||
}
|
||||
},
|
||||
getPeddingList() {
|
||||
getPedings().then(res => {
|
||||
this.pedings = res
|
||||
})
|
||||
},
|
||||
pending(userId) {
|
||||
uni.showLoading()
|
||||
pedingFriend(userId).then(res => {
|
||||
uni.showToast({
|
||||
title: '申请成功',
|
||||
success: () => {
|
||||
this.searchResult = []
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-search{
|
||||
padding: $padding/2 $padding;
|
||||
background: white;
|
||||
}
|
||||
// 好友列表
|
||||
.lists{
|
||||
.lists-item{
|
||||
padding: 20rpx $padding;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::after{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: $margin;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1rpx;
|
||||
background-color: $border-color;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
.lists-item-cover{
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
border-radius: 50%;
|
||||
background: $window-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-search {
|
||||
padding: $padding/2 $padding;
|
||||
background: $window-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -24,28 +24,39 @@
|
||||
<block v-if="conversations.length < 1">
|
||||
<view class="vertical null-list">
|
||||
<u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
|
||||
<template>
|
||||
<!-- <template>
|
||||
<view class="null-list-btn">开启聊天</view>
|
||||
</template>
|
||||
</template> -->
|
||||
</u-empty>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
|
||||
<view class="mssage-action">
|
||||
<block v-if="!friend(item.targetId).portraitUrl">
|
||||
<u-avatar clsss="mssage-action-cover" size="44" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" font-size="14" randomBgColor></u-avatar>
|
||||
</block>
|
||||
<block v-else>
|
||||
<u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
|
||||
</u-avatar>
|
||||
</block>
|
||||
<view class="mssage-action-content">
|
||||
<view class="mssage-header">
|
||||
<view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view>
|
||||
<view class="header-time">{{ item.sentTime|timeCustomCN }}</view>
|
||||
</view>
|
||||
<view class="mssage-msg">{{ item.latestMessage.content }}</view>
|
||||
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
|
||||
<view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
|
||||
@tap="toDetail(item)" @longpress="onLongPress" :data-item="item">
|
||||
<view class="avatar">
|
||||
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
|
||||
:value="item.unreadMessageCount" />
|
||||
<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl"
|
||||
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
|
||||
font-size="14" randomBgColor></u-avatar>
|
||||
<u-avatar v-else :src="friend(item.targetId).portraitUrl" size="44">
|
||||
</u-avatar>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
|
||||
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
|
||||
</view>
|
||||
<view class="preview">{{ item.latestMessage.content || ' ' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="shade" @tap="hidePop">
|
||||
<view class="pop" :style="popStyle" :class="{'show':showPop}">
|
||||
<view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -75,7 +86,16 @@
|
||||
return {
|
||||
isShown: true, // 当前页面显示状态
|
||||
conversations: [], // 会话列表
|
||||
isImToken: '', // 是否已鉴权
|
||||
connection: 0,
|
||||
/* 窗口尺寸 */
|
||||
winSize: {},
|
||||
/* 显示操作弹窗 */
|
||||
showPop: false,
|
||||
/* 弹窗按钮列表 */
|
||||
popButton: ['置顶聊天', '删除该聊天'],
|
||||
/* 弹窗定位样式 */
|
||||
popStyle: "",
|
||||
pickedItem: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -87,16 +107,14 @@
|
||||
},
|
||||
onShow() {
|
||||
if (this.$store.state.token !== '') {
|
||||
if (this.isImToken === '') {
|
||||
getImToken().then(res => {
|
||||
im.connect(res.token, res.userInfo)
|
||||
this.isImToken = res.token
|
||||
getImToken().then(res => {
|
||||
console.log("IMTOKEN", res);
|
||||
im.connect(res.token, res.userInfo, () => {
|
||||
this.getConversationList()
|
||||
})
|
||||
}
|
||||
this.getConversationList()
|
||||
this.isShown = true
|
||||
})
|
||||
}
|
||||
this.isShown = true
|
||||
},
|
||||
onHide() {
|
||||
this.isShown = false
|
||||
@@ -109,11 +127,11 @@
|
||||
})
|
||||
}
|
||||
if (e.index == 1) {
|
||||
if(this.toLogin()){
|
||||
this.$Router.push({
|
||||
name: 'imFriends'
|
||||
})
|
||||
}
|
||||
if (this.toLogin()) {
|
||||
this.$Router.push({
|
||||
name: 'imFriends'
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -121,9 +139,54 @@
|
||||
if (this.isShown) {
|
||||
this.getConversationList()
|
||||
}
|
||||
},
|
||||
'$store.getters.connection': function(n, o) {
|
||||
this.connection = n
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hidePop() {
|
||||
this.showPop = false
|
||||
this.pickedItem = {}
|
||||
setTimeout(() => {
|
||||
this.showShade = false
|
||||
}, 250)
|
||||
},
|
||||
pickerMenu(e) {
|
||||
const index = Number(e.currentTarget.dataset.index)
|
||||
|
||||
if (index == 0) {
|
||||
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
|
||||
.pickedItem.isTop)
|
||||
} else {
|
||||
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
|
||||
}
|
||||
this.getConversationList()
|
||||
this.hidePop()
|
||||
},
|
||||
onLongPress(e) {
|
||||
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
|
||||
|
||||
if (touches.clientY > (this.winSize.height / 2)) {
|
||||
style = `bottom:${this.winSize.height-touches.clientY}px;`
|
||||
} else {
|
||||
style = `top:${touches.clientY}px;`
|
||||
}
|
||||
if (touches.clientX > (this.winSize.witdh / 2)) {
|
||||
style += `right:${this.winSize.witdh-touches.clientX}px`
|
||||
} else {
|
||||
style += `left:${touches.clientX}px`
|
||||
}
|
||||
|
||||
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
|
||||
this.popStyle = style
|
||||
this.pickedItem = item
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showPop = true;
|
||||
}, 10)
|
||||
})
|
||||
},
|
||||
// 检查登录
|
||||
toLogin() {
|
||||
if (this.$store.state.token === '') {
|
||||
@@ -133,13 +196,11 @@
|
||||
}
|
||||
return true
|
||||
},
|
||||
getFriend(targetId) {
|
||||
return this.$store.getters.userInfo(targetId)
|
||||
},
|
||||
getConversationList() {
|
||||
const count = 1000
|
||||
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
|
||||
const timestamp = 0
|
||||
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
|
||||
console.log('获取列表', res);
|
||||
if (res.code === 0 && res.conversations.length > 0) {
|
||||
this.conversations = res.conversations
|
||||
}
|
||||
@@ -147,6 +208,7 @@
|
||||
},
|
||||
// 进入聊天的详情页面，清理未读消息数量
|
||||
toDetail(item) {
|
||||
this.hidePop()
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
|
||||
.conversationType
|
||||
@@ -220,62 +282,98 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mssage-box {
|
||||
.message {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background: white;
|
||||
padding: 24rpx 24rpx 20rpx 24rpx;
|
||||
|
||||
.mssage-action {
|
||||
&.is-top {
|
||||
background: $window-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
padding: 20rpx $padding;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: $padding + 108;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: " ";
|
||||
height: 1rpx;
|
||||
background: $border-color;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
height: 44px;
|
||||
left: $padding + 108;
|
||||
right: $margin;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mssage-header {
|
||||
display: flex;
|
||||
font-size: $title-size;
|
||||
line-height: 40rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
.header-name {
|
||||
flex: 1;
|
||||
@extend .nowrap;
|
||||
}
|
||||
|
||||
.header-time {
|
||||
padding-left: $padding;
|
||||
font-size: $title-size-sm - 2;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.mssage-msg {
|
||||
font-size: $title-size-sm - 2;
|
||||
color: $text-gray;
|
||||
@extend .nowrap;
|
||||
}
|
||||
.u-badge {
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
|
||||
&-item:last-child {
|
||||
.mssage-action::after {
|
||||
display: none;
|
||||
.content {
|
||||
margin-left: 16rpx;
|
||||
flex: 1;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 36rpx
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 520rpx;
|
||||
word-break: break-all;
|
||||
color: $text-gray;
|
||||
font-size: 26rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message:not(:last-child) {
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: $padding + 108;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: " ";
|
||||
height: 1rpx;
|
||||
background: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.shade {
|
||||
|
||||
.pop {
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
width: 200rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
line-height: 80rpx;
|
||||
transition: transform 0.15s ease-in-out 0s;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
transform: scale(0, 0);
|
||||
|
||||
&.show {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
&>view {
|
||||
padding: 0 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
&:active {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<view class="chat-content">
|
||||
<scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID" :scroll-with-animation="false">
|
||||
<scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID"
|
||||
:scroll-with-animation="false">
|
||||
<!-- 聊天窗口 -->
|
||||
<view class="chat-item" v-for="(item,index) in messages" :key="index" :id="'chatId_'+index">
|
||||
<view class="chat-item-time">
|
||||
<text>{{ item.sentTime|timeCustomCN }}</text>
|
||||
</view>
|
||||
<view class="chat-item" v-for="(item,index) in messages" :key="index">
|
||||
<view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<view class="chat-msg">
|
||||
<view class="chat-msg-text">{{ item.content.content }}</view>
|
||||
@@ -14,18 +12,22 @@
|
||||
<view class="chat-status" :class="{'hide': item.sentStatus == 50}"
|
||||
v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
|
||||
<view class="chat-avatar">
|
||||
<!-- <u-avatar :src="userInfo.portraitUrl" @click="showFriend"></u-avatar> -->
|
||||
<u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"></u-avatar>
|
||||
<u-avatar v-else :src="$store.getters.sender.portraitUrl"/>
|
||||
<u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl"
|
||||
@click="showFriend(targetId)"></u-avatar>
|
||||
<u-avatar v-else @click="showMine" bg-color="#ffffff"
|
||||
:src="$store.getters.sender.portraitUrl" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="chat-item-time" :id="'chatId_'+index">
|
||||
<text>{{ item.sentTime|timeCustomCN }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="chat-footer">
|
||||
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
|
||||
cursor-spacing="10" />
|
||||
<button class="chat-push" size="mini" @click="send">发送</button>
|
||||
<button class="chat-push" :disabled="disabled" size="mini" @click="send">发送</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -85,8 +87,8 @@
|
||||
RongIMLib.clearReadReceiptReceivedListener()
|
||||
},
|
||||
computed: {
|
||||
showSendButton() {
|
||||
return this.inputTxt.length > 0
|
||||
disabled() {
|
||||
return this.inputTxt.length == 0
|
||||
},
|
||||
friend() {
|
||||
return function(targetId) {
|
||||
@@ -98,7 +100,13 @@
|
||||
if (e.index == 0) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/private/setting?targetId=' + this.targetId +
|
||||
'&conversationType=' + this.conversationType
|
||||
'&conversationType=' + this.conversationType,
|
||||
events: {
|
||||
messageClear: () => {
|
||||
this.getMessageList()
|
||||
console.log('聊天消息被清空');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -151,15 +159,15 @@
|
||||
this.inputTxt = ''
|
||||
})
|
||||
},
|
||||
showFriend() {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/im/friends/info?targetId=' + this.targetId
|
||||
// })
|
||||
showFriend(targetId) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/info?targetId=' + targetId
|
||||
})
|
||||
},
|
||||
showMine() {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/im/friends/mine'
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/mine'
|
||||
})
|
||||
},
|
||||
scrollBottom() {
|
||||
this.$nextTick(function() {
|
||||
@@ -310,6 +318,10 @@
|
||||
font-size: $title-size-m;
|
||||
font-weight: bold;
|
||||
|
||||
&[disabled] {
|
||||
background: $uni-bg-color-grey;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,46 +1,56 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 聊天信息 -->
|
||||
<view class="set-user">
|
||||
<u-avatar
|
||||
src="https://cdn.uviewui.com/uview/album/1.jpg"
|
||||
size="48"
|
||||
></u-avatar>
|
||||
<view class="set-user-nickname">唐明明</view>
|
||||
</view>
|
||||
<!-- 聊天设置 -->
|
||||
<view class="set-group">
|
||||
<view class="group-flex">
|
||||
<label>消息免打扰</label>
|
||||
<u-switch activeColor="#34CE98" size="22"></u-switch>
|
||||
</view>
|
||||
<view class="group-flex">
|
||||
<label>置顶会话</label>
|
||||
<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="set-group">
|
||||
<view class="group-flex" @click="cleanConversation">
|
||||
<label>清空聊天记录</label>
|
||||
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<!-- 聊天信息 -->
|
||||
<view class="set-user" @click="showFriend">
|
||||
<u-avatar :src="friend(targetId).portraitUrl" size="48"></u-avatar>
|
||||
<view class="set-user-nickname">{{ friend(targetId).name }}</view>
|
||||
</view>
|
||||
<!-- 聊天设置 -->
|
||||
<view class="set-group">
|
||||
<view class="group-flex">
|
||||
<label>消息免打扰</label>
|
||||
<u-switch v-model="status" activeColor="#34CE98" size="22" @change="setStatus"></u-switch>
|
||||
</view>
|
||||
<view class="group-flex">
|
||||
<label>消息置顶</label>
|
||||
<u-switch v-model="isTop" activeColor="#34CE98" size="22" @change="setTop"></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="set-group">
|
||||
<view class="group-flex" @click="cleanConversation">
|
||||
<label>清空聊天记录</label>
|
||||
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@rongcloud/imlib-uni'
|
||||
import {
|
||||
getUserInfo
|
||||
} from '@/apis/interfaces/im.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventChannel: null,
|
||||
targetId: '',
|
||||
conversationType: 1,
|
||||
isTop: false,
|
||||
status: 0 // 0 是免打扰，1是正常通知
|
||||
status: false // 0 是免打扰，1是正常通知
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
friend() {
|
||||
return function(targetId) {
|
||||
return this.$store.getters.userInfo(targetId)
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.eventChannel = this.$scope.eventChannel
|
||||
|
||||
this.targetId = e.targetId
|
||||
this.conversationType = e.conversationType
|
||||
|
||||
@@ -53,33 +63,48 @@
|
||||
RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
|
||||
status
|
||||
}) => {
|
||||
this.status = status
|
||||
this.status = !Boolean(status)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
showFriend() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/info?targetId=' + this.targetId
|
||||
})
|
||||
},
|
||||
setStatus() {
|
||||
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
|
||||
status
|
||||
}) => {
|
||||
this.status = status
|
||||
this.status = !Boolean(status)
|
||||
})
|
||||
},
|
||||
setTop() {
|
||||
RongIMLib.setConversationToTop(this.conversationType, this.targetId, !this.isTop, (res) => {
|
||||
console.log(res);
|
||||
RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
|
||||
RongIMLib.getConversation(this.conversationType, this.targetId, ({
|
||||
conversation
|
||||
}) => {
|
||||
console.log(conversation.isTop);
|
||||
this.isTop = conversation.isTop
|
||||
})
|
||||
})
|
||||
},
|
||||
// 清空聊天记录
|
||||
cleanConversation() {
|
||||
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({code}) => {
|
||||
if (code === 0) {
|
||||
console.log('chenggong ');
|
||||
uni.showModal({
|
||||
title: '清空聊天记录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({
|
||||
code
|
||||
}) => {
|
||||
if (code === 0) {
|
||||
this.eventChannel.emit('messageClear')
|
||||
uni.showToast({
|
||||
title: '聊天记录已清空'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -88,48 +113,54 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
min-height: 100vh;
|
||||
background: $window-color;
|
||||
// 用户信息
|
||||
.set-user{
|
||||
background: white;
|
||||
padding: $padding;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.set-user-nickname{
|
||||
padding-left: $padding;
|
||||
flex: 1;
|
||||
line-height: 70rpx;
|
||||
font-size: $title-size + 6;
|
||||
}
|
||||
}
|
||||
// 聊天设置
|
||||
.set-group{
|
||||
margin: $margin 0;
|
||||
background: white;
|
||||
.group-flex{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0 $padding;
|
||||
font-size: $title-size;
|
||||
align-items: center;
|
||||
&::after{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: $margin;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1rpx;
|
||||
background-color: $border-color;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
min-height: 100vh;
|
||||
background: $window-color;
|
||||
|
||||
// 用户信息
|
||||
.set-user {
|
||||
background: white;
|
||||
padding: $padding;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.set-user-nickname {
|
||||
padding-left: $padding;
|
||||
flex: 1;
|
||||
line-height: 70rpx;
|
||||
font-size: $title-size + 6;
|
||||
}
|
||||
}
|
||||
|
||||
// 聊天设置
|
||||
.set-group {
|
||||
margin: $margin 0;
|
||||
background: white;
|
||||
|
||||
.group-flex {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0 $padding;
|
||||
font-size: $title-size;
|
||||
align-items: center;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: $margin;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1rpx;
|
||||
background-color: $border-color;
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<view class="backCont">
|
||||
<image class="img" :src="topicData.cover" mode="aspectFill"></image>
|
||||
<view class="head">
|
||||
<view class="ios-top"></view>
|
||||
<view class="ios-top"></view>
|
||||
<view class="ellipsis title">
|
||||
{{ topicData.name }}
|
||||
</view>
|
||||
@@ -19,7 +19,8 @@
|
||||
<text>{{ topicData.favorites }} 人点赞</text>
|
||||
</view>
|
||||
<view class="tool-btn" :class="{active : isFavorite}" @click="thumbClick(topicData.topic_id)">
|
||||
<u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17" style="margin-right: 5rpx;"></u-icon>
|
||||
<u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17"
|
||||
style="margin-right: 5rpx;"></u-icon>
|
||||
{{ isFavorite ? '已赞' : '点赞' }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -44,8 +45,10 @@
|
||||
相关商品
|
||||
</view>
|
||||
<view class="item" v-for="(item, index) in goodsArr" :key="index">
|
||||
<image class="item-cover" src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png" mode="aspectFill"></image>
|
||||
<view class="item-title">
|
||||
<image class="item-cover"
|
||||
src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="item-title">
|
||||
<view class="nowrap item-name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
@@ -53,7 +56,8 @@
|
||||
￥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-btn" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
|
||||
<view class="item-btn"
|
||||
@click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
|
||||
查看商品
|
||||
</view>
|
||||
</view>
|
||||
@@ -64,15 +68,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { topicDet, topicThumb } from '@/apis/interfaces/topic'
|
||||
import userAuth from '@/public/userAuth'
|
||||
import {
|
||||
topicDet,
|
||||
topicThumb
|
||||
} from '@/apis/interfaces/topic'
|
||||
import userAuth from '@/public/userAuth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
topicData : '',
|
||||
goodsArr : [],
|
||||
topicData: '',
|
||||
goodsArr: [],
|
||||
topicContent: '',
|
||||
isFavorite : ''
|
||||
isFavorite: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -80,27 +87,29 @@
|
||||
},
|
||||
methods: {
|
||||
// 详情
|
||||
getRank(){
|
||||
topicDet(this.$Route.query.id).then(res => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.name
|
||||
})
|
||||
this.topicData = res
|
||||
this.goodsArr = res.goods
|
||||
this.isFavorite = res.is_favorite
|
||||
this.topicContent = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||||
})
|
||||
getRank() {
|
||||
topicDet(this.$Route.query.id).then(res => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.name
|
||||
})
|
||||
this.topicData = res
|
||||
this.goodsArr = res.goods
|
||||
this.isFavorite = res.is_favorite
|
||||
this.topicContent = res.content.replace(/\<img/gi,
|
||||
'<img style="max-width:100%;height:auto;display:block;"')
|
||||
})
|
||||
},
|
||||
|
||||
// 点赞
|
||||
thumbClick(id) {
|
||||
if(this.$store.state.token === ''){
|
||||
const Auth = new userAuth()
|
||||
Auth.Login()
|
||||
return
|
||||
}
|
||||
if (this.$store.state.token === '') {
|
||||
const Auth = new userAuth()
|
||||
Auth.Login()
|
||||
return
|
||||
}
|
||||
topicThumb(id).then(res => {
|
||||
this.isFavorite = !this.isFavorite
|
||||
|
||||
this.topicData.favorites = res
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -116,6 +125,7 @@
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
padding-top: 90%;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
@@ -126,6 +136,7 @@
|
||||
z-index: 2;
|
||||
background-color: rgba($color: #000000, $alpha: .35);
|
||||
}
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -136,6 +147,7 @@
|
||||
filter: blur(10rpx);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.head {
|
||||
padding: $padding * 3 $padding + 30 0;
|
||||
color: white;
|
||||
@@ -145,32 +157,39 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
|
||||
.title {
|
||||
font-size: $title-size + 8;
|
||||
margin-bottom: $margin - 10;
|
||||
height: 100rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-bottom: $margin + 20;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: $margin 0 $margin + 10;
|
||||
line-height: 48rpx;
|
||||
height: 100rpx;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
|
||||
.tool {
|
||||
width: 100%;
|
||||
font-size: $title-size-m;
|
||||
display: flex;
|
||||
line-height: 48rpx;
|
||||
|
||||
.tool-see {
|
||||
flex: 1;
|
||||
|
||||
text {
|
||||
padding-right: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
border: 2rpx solid white;
|
||||
border-radius: $radius * 2;
|
||||
@@ -178,6 +197,7 @@
|
||||
padding: 0 $padding - 5;
|
||||
line-height: 48rpx;
|
||||
display: flex;
|
||||
|
||||
&.active {
|
||||
background-color: white;
|
||||
color: $text-color;
|
||||
@@ -196,6 +216,7 @@
|
||||
border-radius: $radius * 3 $radius * 3 0 0;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
|
||||
.brief-text {
|
||||
margin: $margin 0;
|
||||
line-height: 48rpx;
|
||||
@@ -204,14 +225,17 @@
|
||||
padding: 0 $padding - 20;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.source {
|
||||
position: relative;
|
||||
|
||||
.source-logo {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: $margin - 24;
|
||||
}
|
||||
|
||||
.source-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -220,10 +244,12 @@
|
||||
padding-left: 90rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
|
||||
.source-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: $margin - 25;
|
||||
}
|
||||
|
||||
.source-text {
|
||||
line-height: 48rpx;
|
||||
font-size: $title-size-m;
|
||||
@@ -235,37 +261,43 @@
|
||||
|
||||
.goods {
|
||||
margin-top: $margin;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
margin-top: $margin - 10;
|
||||
background: #f5fdfa;
|
||||
border-radius: $radius;
|
||||
padding: $padding;
|
||||
position: relative;
|
||||
margin-top: $margin - 10;
|
||||
background: #f5fdfa;
|
||||
border-radius: $radius;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
.item-cover {
|
||||
width: 120rpx;
|
||||
height: 90rpx;
|
||||
border-radius: $radius-m;
|
||||
}
|
||||
.item-title {
|
||||
|
||||
.item-cover {
|
||||
width: 120rpx;
|
||||
height: 90rpx;
|
||||
border-radius: $radius-m;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: calc(100% - 180rpx);
|
||||
box-sizing: border-box;
|
||||
padding: $padding $padding 0 180rpx;
|
||||
font-size: $title-size-lg;
|
||||
margin-bottom: 10px;
|
||||
color: $text-color;
|
||||
padding: $padding $padding 0 180rpx;
|
||||
font-size: $title-size-lg;
|
||||
margin-bottom: 10px;
|
||||
color: $text-color;
|
||||
|
||||
.item-price {
|
||||
color: $text-price;
|
||||
margin-top: $margin - 20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
position: absolute;
|
||||
right: $padding;
|
||||
|
||||
@@ -4,12 +4,17 @@ export default {
|
||||
state: {
|
||||
newMsg: {},
|
||||
friends: {},
|
||||
sender: {}
|
||||
sender: {},
|
||||
// IM连接状态，0是正常
|
||||
connection: 0
|
||||
},
|
||||
getters: {
|
||||
newMessage(state) {
|
||||
return state.newMsg
|
||||
},
|
||||
connection(state) {
|
||||
return state.connection
|
||||
},
|
||||
friends(state) {
|
||||
return state.friends
|
||||
},
|
||||
@@ -17,8 +22,8 @@ export default {
|
||||
if (state.friends[targetId]) {
|
||||
return state.friends[targetId]
|
||||
} else {
|
||||
console.log('没找到,， 死循环了，得处理 todo', targetId);
|
||||
im.syncUserInfo(targetId)
|
||||
console.log('没找到,死循环了，得处理 todo', targetId);
|
||||
// im.syncUserInfo(targetId)
|
||||
return {
|
||||
name: '',
|
||||
address: '',
|
||||
@@ -43,9 +48,15 @@ export default {
|
||||
},
|
||||
SET_state_sender(state, userInfo) {
|
||||
state.sender = userInfo
|
||||
},
|
||||
SET_connection_status(state, status) {
|
||||
state.connection = status
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
updateConnectionStatus({commit}, status) {
|
||||
commit('SET_connection_status', status)
|
||||
},
|
||||
newMessage({
|
||||
commit
|
||||
}, msg) {
|
||||
@@ -63,7 +74,6 @@ export default {
|
||||
const model = uni.model.friendModel
|
||||
model.find('userId=' + userInfo.userId, (err, user) => {
|
||||
if (!err && user.length == 0) {
|
||||
console.log('哪里更新的 ', 1);
|
||||
saveAvatar(userInfo, (savedFilePath) => {
|
||||
model.insert({
|
||||
userId: userInfo.userId,
|
||||
@@ -76,7 +86,6 @@ export default {
|
||||
commit('updateFriends', userInfo)
|
||||
})
|
||||
} else if (!err && user[0].hash != userInfo.hash) {
|
||||
console.log('哪里更新的 ', 2);
|
||||
saveAvatar(userInfo, (savedFilePath) => {
|
||||
model.update('userId=' + userInfo.userId, {
|
||||
name: userInfo.name,
|
||||
@@ -98,7 +107,7 @@ export default {
|
||||
commit('updateFriends', userInfo)
|
||||
})
|
||||
} else {
|
||||
console.log('不需要有动作', user[0]);
|
||||
console.log('不用操作', user[0]);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
2
uni.scss
2
uni.scss
@@ -44,7 +44,7 @@ $uni-border-color:#c8c7cc;
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16;
|
||||
$uni-font-size-lg:16px;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
|
||||
@@ -36,9 +36,11 @@ const setNotifyBadge = (count) => {
|
||||
* @param {string} token token
|
||||
* @param {object} userInfo {userId: string, name: string, portraitUrl: string}
|
||||
*/
|
||||
const connect = (token, userInfo) => {
|
||||
const connect = (token, userInfo, callback) => {
|
||||
RongIMLib.connect(token, res => {
|
||||
console.log('连接结果', res);
|
||||
|
||||
callback(res)
|
||||
})
|
||||
|
||||
store.dispatch('setSenderInfo', userInfo)
|
||||
@@ -62,6 +64,7 @@ const addListeners = () => {
|
||||
// 添加连接状态监听函数
|
||||
RongIMLib.addConnectionStatusListener((res) => {
|
||||
console.log('连接状态监', res.data.status);
|
||||
store.dispatch('updateConnectionStatus', res.data.status)
|
||||
})
|
||||
// 添加消息监听函数
|
||||
RongIMLib.addReceiveMessageListener((res) => {
|
||||
|
||||
Reference in New Issue
Block a user