TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

IM的链接和断开时机调整，APP打开自动判断登录，链接。退出登录后断开链接

Browse Source 
新朋友数量提醒
This commit is contained in:
Jason.Chen
2022-01-28 11:24:10 +08:00
parent 8e047408e2
commit f9e2819cc7
7 changed files with 728 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apis/interfaces/im.js
View File

@@ -22,14 +22,14 @@ const getImToken = () => {
url: 'im/token', url: 'im/token',
}, true) }, true)
} }
// 删除好友 // 删除好友
const deleteFriend = (targetId) => { const deleteFriend = (targetId) => {
return request({ return request({
method: 'DELETE', method: 'DELETE',
url: 'im/friends/' + targetId, url: 'im/friends/' + targetId,
}) })
} }
// 获取用户信息 // 获取用户信息
const getUserInfo = (targetId) => { const getUserInfo = (targetId) => {
@@ -37,9 +37,9 @@ const getUserInfo = (targetId) => {
url: 'im/userInfo/' + targetId, url: 'im/userInfo/' + targetId,
}) })
} }
/** /**
* 查看好友资料，附带好友关系 * 查看好友资料，附带好友关系
*/ */
const getFriendInfo = (userId) => { const getFriendInfo = (userId) => {
return request({ return request({
@@ -84,16 +84,26 @@ const pedingFriend = (recipient) => {
url: 'im/friends/' + recipient url: 'im/friends/' + recipient
}) })
} }
/**
* 好友申请数量
*/
const getPendingCount = () => {
return request({
url: 'im/friends/pending/count'
})
}
export { export {
getImToken, getImToken,
deleteFriend, deleteFriend,
getFriends, getFriends,
getUserInfo, getUserInfo,
getFriendInfo, getFriendInfo,
getPedings, getPedings,
resolveFriend, resolveFriend,
rejectFriend, rejectFriend,
searchFriend, searchFriend,
pedingFriend pedingFriend,
getPendingCount
} }

1
manifest.json
View File

@@ -32,6 +32,7 @@
"<uses-feature android:name=\"android.hardware.camera\"/>", "<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>", "<uses-permission android:name=\"android.permission.CAMERA\"/>",

26
pages/im/friends/index.vue
View File

@@ -4,7 +4,9 @@
<view> <view>
<view class="friend-flex u-border-bottom" @click="toPending"> <view class="friend-flex u-border-bottom" @click="toPending">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar> <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
<view class="name">新的朋友</view> <view class="name">
新的朋友 ({{ pendingCount }})
</view>
</view> </view>
<view class="friend-flex" @click="showToast"> <view class="friend-flex" @click="showToast">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar> <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
@@ -22,7 +24,8 @@
<u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666"> <u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666">
</u-index-anchor> </u-index-anchor>
<!-- #endif --> <!-- #endif -->
<view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex u-border-bottom" <view v-for="(friendItem, index) in item" :key="friendItem.userId"
class="friend-flex u-border-bottom"
@click="$Router.push({ name: 'imFriendsInfo', params: { targetId: friendItem.userId } })"> @click="$Router.push({ name: 'imFriendsInfo', params: { targetId: friendItem.userId } })">
<block v-if="friendItem.portraitUrl != ''"> <block v-if="friendItem.portraitUrl != ''">
<u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''" <u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''"
@@ -47,24 +50,29 @@
<script> <script>
import { import {
getFriends getFriends,
getPendingCount
} from '@/apis/interfaces/im'; } from '@/apis/interfaces/im';
export default { export default {
data() { data() {
return { return {
indexs: [], indexs: [],
friends: [] friends: [],
pendingCount: 0
}; };
}, },
onShow() { onShow() {
getFriends().then(res => { getFriends().then(res => {
this.indexs = res.indexList; this.indexs = res.indexList
this.friends = res.itemArr; this.friends = res.itemArr
}); })
getPendingCount().then(res => {
console.log(res);
this.pendingCount = res
})
}, },
computed: {},
methods: { methods: {
// 扫码提示
showToast() { showToast() {
uni.showToast({ uni.showToast({
title: '群聊功能暂未开放，敬请期待', title: '群聊功能暂未开放，敬请期待',

8
pages/im/index.vue
View File

@@ -102,12 +102,8 @@
} }
}, },
onShow() { onShow() {
if (this.$store.state.token !== '') { if (this.$store.state.token !== '') {
getImToken().then(res => { this.getConversationList()
im.connect(res.token, res.userInfo, () => {
this.getConversationList()
})
})
} }
this.isShown = true this.isShown = true
}, },

993
pages/user/index.vue
View File

@@ -1,472 +1,531 @@
<template> <template>
<view class="content"> <view class="content">
<!-- 用户信息 --> <!-- 用户信息 -->
<view class="info-box"> <view class="info-box">
<image src="@/static/user/user_back.png" mode="aspectFill" /> <image src="@/static/user/user_back.png" mode="aspectFill" />
<view class="user-flex"> <view class="user-flex">
<image class="cover" @click="$Router.push({ name: 'Setting' })" :src="userInfo.avatar || require('@/static/user/cover.png')" mode="aspectFill" /> <image class="cover" @click="$Router.push({ name: 'Setting' })"
<view class="user-content"> :src="userInfo.avatar || require('@/static/user/cover.png')" mode="aspectFill" />
<block v-if="$store.state.token != ''"> <view class="user-content">
<view class="name">{{ userInfo.nickname }}</view> <block v-if="$store.state.token != ''">
<view class="tabs" v-if="userInfo.identity.length !== 0"> <view class="name">{{ userInfo.nickname }}</view>
<view class="tabs-item"> <view class="tabs" v-if="userInfo.identity.length !== 0">
<image src="@/static/user/icon_07.png" /> <view class="tabs-item">
VIP会员 <image src="@/static/user/icon_07.png" />
</view> VIP会员
</view> </view>
<view class="tabs" v-else> </view>
<view class="tabs-item"> <view class="tabs" v-else>
<image src="@/static/user/icon_07.png" /> <view class="tabs-item">
普通用户 <image src="@/static/user/icon_07.png" />
</view> 普通用户
</view> </view>
<view class="chainAddress" v-if="userInfo.chain_address"> </view>
<u-icon labelPos="left" @click="copy(userInfo.chain_address)" labelSize="14" labelColor="#fff" :label="userInfo.chain_address.substr(0, 20)+'...'" space="10" :name="require('@/static/imgs/copy.png')" size="16" /> <view class="chainAddress" v-if="userInfo.chain_address">
</view> <u-icon labelPos="left" @click="copy(userInfo.chain_address)" labelSize="14"
</block> labelColor="#fff" :label="userInfo.chain_address.substr(0, 20)+'...'" space="10"
<block v-else><view class="name" @click="isLogin()">未登录</view></block> :name="require('@/static/imgs/copy.png')" size="16" />
</view> </view>
</view> </block>
<block v-else>
<view class="name" @click="isLogin()">未登录</view>
</block>
</view>
</view>
</view> </view>
<!-- 会员卡 --> <!-- 会员卡 -->
<view class="vip-card"> <view class="vip-card">
<view class="title"> <view class="title">
<image src="@/static/user/icon_06.png" mode="widthFix" /> <image src="@/static/user/icon_06.png" mode="widthFix" />
ZH会员 ZH会员
</view> </view>
<view class="subtitle"><u-notice-bar :text="cardText" icon="" bgColor="" duration="3000" color="#fcc692" direction="column"></u-notice-bar></view> <view class="subtitle">
<view class="btn" @click="openVip" v-if="userInfo.identity.length === 0">开通</view> <u-notice-bar :text="cardText" icon="" bgColor="" duration="3000" color="#fcc692" direction="column">
</u-notice-bar>
</view>
<view class="btn" @click="openVip" v-if="userInfo.identity.length === 0">开通</view>
</view> </view>
<!-- 健康数据 --> <!-- 健康数据 -->
<view class="health-flex" v-if="userInfo.has_record"> <view class="health-flex" v-if="userInfo.has_record">
<view class="health-flex-item"> <view class="health-flex-item">
<view class="title"> <view class="title">
体脂率 体脂率
<image class="icon" src="@/static/user/icon_04.png" mode="widthFix" /> <image class="icon" src="@/static/user/icon_04.png" mode="widthFix" />
</view> </view>
<view class="num"> <view class="num">
{{ userInfo.record.fat.fat }} {{ userInfo.record.fat.fat }}
<text>%</text> <text>%</text>
</view> </view>
<view class="hith">{{ userInfo.record.fat.text }}</view> <view class="hith">{{ userInfo.record.fat.text }}</view>
</view> </view>
<view class="health-flex-item"> <view class="health-flex-item">
<view class="title"> <view class="title">
体重 体重
<image class="icon" src="@/static/user/icon_05.png" mode="widthFix" /> <image class="icon" src="@/static/user/icon_05.png" mode="widthFix" />
</view> </view>
<view class="num"> <view class="num">
{{ userInfo.record.weight.weight }} {{ userInfo.record.weight.weight }}
<text>KG</text> <text>KG</text>
</view> </view>
<view class="hith">{{ userInfo.record.weight.text }}</view> <view class="hith">{{ userInfo.record.weight.text }}</view>
</view> </view>
</view> </view>
<!-- 订单 --> <!-- 订单 -->
<view class="order-box"> <view class="order-box">
<view class="order-box-item" @click="onBtn('Order', { index: 0 })"> <view class="order-box-item" @click="onBtn('Order', { index: 0 })">
<image class="icon" src="@/static/user/order_icon_00.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_00.png" mode="widthFix" />
<view class="title">全部订单</view> <view class="title">全部订单</view>
</view> </view>
<view class="order-box-item" @click="onBtn('Order', { index: 1 })"> <view class="order-box-item" @click="onBtn('Order', { index: 1 })">
<image class="icon" src="@/static/user/order_icon_01.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_01.png" mode="widthFix" />
<view class="title">待付款</view> <view class="title">待付款</view>
</view> </view>
<view class="order-box-item" @click="onBtn('Order', { index: 2 })"> <view class="order-box-item" @click="onBtn('Order', { index: 2 })">
<image class="icon" src="@/static/user/order_icon_02.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_02.png" mode="widthFix" />
<view class="title">待发货</view> <view class="title">待发货</view>
</view> </view>
<view class="order-box-item" @click="onBtn('Order', { index: 3 })"> <view class="order-box-item" @click="onBtn('Order', { index: 3 })">
<image class="icon" src="@/static/user/order_icon_03.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_03.png" mode="widthFix" />
<view class="title">待收货</view> <view class="title">待收货</view>
</view> </view>
<view class="order-box-item" @click="onBtn('Order', { index: 4 })"> <view class="order-box-item" @click="onBtn('Order', { index: 4 })">
<image class="icon" src="@/static/user/order_icon_04.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_04.png" mode="widthFix" />
<view class="title">已完成</view> <view class="title">已完成</view>
</view> </view>
</view> </view>
<!-- 功能块 --> <!-- 功能块 -->
<view class="btns-box"> <view class="btns-box">
<view class="btns-box-item" @click="onWallet"> <view class="btns-box-item" @click="onWallet">
<image class="icon" src="@/static/user/userIcon_00.png" mode="widthFix" /> <image class="icon" src="@/static/user/userIcon_00.png" mode="widthFix" />
ZH钱包 ZH钱包
<uni-icons class="forward" type="forward" color="#999" /> <uni-icons class="forward" type="forward" color="#999" />
</view> </view>
<view class="btns-box-item" @click="onFiles"> <view class="btns-box-item" @click="onFiles">
<image class="icon" src="@/static/user/userIcon_02.png" mode="widthFix" /> <image class="icon" src="@/static/user/userIcon_02.png" mode="widthFix" />
健康档案 健康档案
<uni-icons class="forward" type="forward" color="#999" /> <uni-icons class="forward" type="forward" color="#999" />
</view> </view>
<view class="btns-box-item" @click="onBtn('Address', { type: 'edit' })"> <view class="btns-box-item" @click="onBtn('Address', { type: 'edit' })">
<image class="icon" src="@/static/user/userIcon_03.png" mode="widthFix" /> <image class="icon" src="@/static/user/userIcon_03.png" mode="widthFix" />
地址管理 地址管理
<uni-icons class="forward" type="forward" color="#999" /> <uni-icons class="forward" type="forward" color="#999" />
</view> </view>
</view> </view>
<view class="btns-box" v-if="$store.state.token != ''"> <view class="btns-box" v-if="$store.state.token != ''">
<view class="btns-box-item" @click="logOut"> <view class="btns-box-item" @click="logOut">
<image class="icon" src="@/static/user/userIcon_05.png" mode="widthFix" /> <image class="icon" src="@/static/user/userIcon_05.png" mode="widthFix" />
退出登录 退出登录
<uni-icons class="forward" type="forward" color="#999" /> <uni-icons class="forward" type="forward" color="#999" />
</view> </view>
</view> </view>
<view class="footer-text"> <view class="footer-text">
<view>ZH生态俱乐部</view> <view>ZH生态俱乐部</view>
<view>All Rights Reserved. ZH Eco Club</view> <view>All Rights Reserved. ZH Eco Club</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { info } from '@/apis/interfaces/user'; import {
import userAuth from '@/public/userAuth'; info
export default { } from '@/apis/interfaces/user';
data() { import userAuth from '@/public/userAuth';
return { import im from '@/utils/im/index.js'
cardText: ['新用户首单即赠会员', '老用户专属验证开通会员'],
userInfo: { export default {
nickname: '', data() {
avatar: '', return {
identity: [] cardText: ['新用户首单即赠会员', '老用户专属验证开通会员'],
} userInfo: {
}; nickname: '',
}, avatar: '',
onShow() { identity: []
this.getInfo();
},
methods: {
// 用户信息
getInfo() {
if (this.$store.state.token === '') return;
info()
.then(res => {
console.log(res);
uni.setNavigationBarTitle({
title: res.nickname
});
this.userInfo = res;
console.log(res);
})
.catch(err => {
uni.showToast({
title: err.message,
icon: 'none'
});
});
},
// 开通会员
openVip() {
if (this.isLogin()) {
uni.showActionSheet({
itemList: ['我是新用户', '我是老用户'],
success: res => {
switch (res.tapIndex) {
case 0:
uni.showModal({
title: '开通提示',
content: '平台新用户完成首笔订单，即可获赠ZH健康会员',
showCancel: false,
cancelText: '去完成',
success: res => {
console.log(res);
this.$Router.pushTab({ name: 'Store' });
}
});
break;
case 1:
uni.showToast({
title: '老用户渠道暂未开放',
icon: 'none'
});
break;
}
}
});
}
},
// 开通钱包
onWallet() {
if (this.isLogin()) {
if (this.userInfo.is_wallet) this.$Router.push({ name: 'WalletProperty' });
else this.$Router.push({ name: 'WalletAdd' });
}
},
// 个人档案
onFiles() {
if (this.isLogin()) {
if (!this.userInfo.has_record) {
this.$Router.push({ name: 'EssentialInfo' });
return;
}
// this.$Router.push({ name: 'UserFiles',params:{id:this.userInfo.record_id} });
uni.navigateTo({
url: `/pages/user/files?id=${this.userInfo.record.record_id}`
});
}
},
// 按钮导航
onBtn(name, params) {
if (this.isLogin()) {
this.$Router.push({ name, params });
}
},
// 检查登录
isLogin() {
if (this.$store.state.token === '') {
const Auth = new userAuth();
Auth.Login();
return false;
}
return true;
},
// 退出登录
logOut() {
this.userInfo = {
nickname: '',
avatar: '',
identity: []
};
this.$store.commit('setToken', '');
},
copy(data){
uni.setClipboardData({
data: data,
success: function () {
uni.showToast({
title:'复制成功',
icon:'none'
})
} }
}); };
} },
} onShow() {
}; this.getInfo();
</script> },
methods: {
<style lang="scss" scoped> // 用户信息
.content { getInfo() {
background: $window-color; if (this.$store.state.token === '') return;
min-height: 100vh; info()
} .then(res => {
// 版权信息 console.log(res);
.footer-text { uni.setNavigationBarTitle({
text-align: center; title: res.nickname
font-size: $title-size-sm; });
padding: $padding $padding $padding * 2; this.userInfo = res;
color: $text-gray-m; console.log(res);
} })
// 用户信息 .catch(err => {
.info-box { uni.showToast({
position: relative; title: err.message,
background: linear-gradient(to right, #34ce98, #22aa98); icon: 'none'
color: white; });
@extend .ios-top; });
& > image { },
position: absolute; // 开通会员
top: 0; openVip() {
right: 0; if (this.isLogin()) {
width: 100%; uni.showActionSheet({
height: 100%; itemList: ['我是新用户', '我是老用户'],
// z-index: 100; success: res => {
} switch (res.tapIndex) {
.user-flex { case 0:
position: relative; uni.showModal({
padding: $padding * 2 $padding ($padding * 2 + 60); title: '开通提示',
height: 128rpx; content: '平台新用户完成首笔订单，即可获赠ZH健康会员',
.cover { showCancel: false,
position: absolute; cancelText: '去完成',
width: 128rpx; success: res => {
height: 128rpx; console.log(res);
border-radius: 50%; this.$Router.pushTab({
border: solid 6rpx white; name: 'Store'
box-sizing: border-box; });
z-index: 100; }
} });
.user-content { break;
padding-left: 158rpx; case 1:
height: 128rpx; uni.showToast({
display: flex; title: '老用户渠道暂未开放',
flex-direction: column; icon: 'none'
justify-content: center; });
position: relative; break;
.chainAddress { }
overflow: hidden; }
white-space: nowrap; });
text-overflow: ellipsis; }
font-size: $title-size-m; },
padding-top: 10rpx; // 开通钱包
display: flex; onWallet() {
flex-direction: row; if (this.isLogin()) {
align-items: center; if (this.userInfo.is_wallet) this.$Router.push({
justify-content: flex-start; name: 'WalletProperty'
});
else this.$Router.push({
name: 'WalletAdd'
});
}
},
// 个人档案
onFiles() {
if (this.isLogin()) {
if (!this.userInfo.has_record) {
this.$Router.push({
name: 'EssentialInfo'
});
return;
}
// this.$Router.push({ name: 'UserFiles',params:{id:this.userInfo.record_id} });
uni.navigateTo({
url: `/pages/user/files?id=${this.userInfo.record.record_id}`
});
}
},
// 按钮导航
onBtn(name, params) {
if (this.isLogin()) {
this.$Router.push({
name,
params
});
}
},
// 检查登录
isLogin() {
if (this.$store.state.token === '') {
const Auth = new userAuth();
Auth.Login();
return false;
}
return true;
},
// 退出登录
logOut() {
this.userInfo = {
nickname: '',
avatar: '',
identity: []
};
this.$store.commit('setToken', '');
// 断开IM链接
im.disconnect()
},
copy(data) {
uni.setClipboardData({
data: data,
success: function() {
uni.showToast({
title: '复制成功',
icon: 'none'
})
}
});
}
}
};
</script>
<style lang="scss" scoped>
.content {
background: $window-color;
min-height: 100vh;
}
// 版权信息
.footer-text {
text-align: center;
font-size: $title-size-sm;
padding: $padding $padding $padding * 2;
color: $text-gray-m;
}
// 用户信息
.info-box {
position: relative;
background: linear-gradient(to right, #34ce98, #22aa98);
color: white;
@extend .ios-top;
&>image {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
// z-index: 100;
}
.user-flex {
position: relative;
padding: $padding * 2 $padding ($padding * 2 + 60);
height: 128rpx;
.cover {
position: absolute;
width: 128rpx;
height: 128rpx;
border-radius: 50%;
border: solid 6rpx white;
box-sizing: border-box;
z-index: 100;
}
.user-content {
padding-left: 158rpx;
height: 128rpx;
display: flex;
flex-direction: column;
justify-content: center;
position: relative; position: relative;
z-index: 200;
} .chainAddress {
.name { overflow: hidden;
line-height: 40rpx; white-space: nowrap;
font-weight: bold; text-overflow: ellipsis;
font-size: $title-size + 8; font-size: $title-size-m;
@extend .nowrap; padding-top: 10rpx;
} display: flex;
.tabs { flex-direction: row;
padding-top: 10rpx; align-items: center;
&-item { justify-content: flex-start;
background: rgba($color: #000000, $alpha: 0.3); position: relative;
font-size: $title-size-sm - 4; z-index: 200;
display: inline-block; }
line-height: 36rpx;
padding: 0 20rpx; .name {
border-radius: 20rpx; line-height: 40rpx;
image { font-weight: bold;
width: 26rpx; font-size: $title-size + 8;
height: 26rpx; @extend .nowrap;
vertical-align: middle; }
margin-bottom: 2rpx;
margin-right: 8rpx; .tabs {
} padding-top: 10rpx;
}
} &-item {
} background: rgba($color: #000000, $alpha: 0.3);
} font-size: $title-size-sm - 4;
} display: inline-block;
// 会员卡 line-height: 36rpx;
.vip-card { padding: 0 20rpx;
position: relative; border-radius: 20rpx;
margin: -60rpx $margin $margin;
background: linear-gradient(to right bottom, #3e5364, #31364a); image {
border-radius: $radius; width: 26rpx;
box-sizing: border-box; height: 26rpx;
color: #fcc692; vertical-align: middle;
padding: $padding ($padding + 170) $padding $padding; margin-bottom: 2rpx;
.title { margin-right: 8rpx;
font-weight: bold; }
font-size: $title-size-lg; }
line-height: 40rpx; }
image { }
width: 32rpx; }
height: 32rpx; }
margin-right: 10rpx;
vertical-align: middle; // 会员卡
margin-bottom: 4rpx; .vip-card {
} position: relative;
} margin: -60rpx $margin $margin;
.subtitle { background: linear-gradient(to right bottom, #3e5364, #31364a);
font-size: $title-size-sm; border-radius: $radius;
margin-top: 10rpx; box-sizing: border-box;
.u-notice-bar { color: #fcc692;
padding: 0; padding: $padding ($padding + 170) $padding $padding;
}
} .title {
.btn { font-weight: bold;
position: absolute; font-size: $title-size-lg;
right: $margin; line-height: 40rpx;
margin-top: -30rpx;
top: 50%; image {
height: 60rpx; width: 32rpx;
line-height: 60rpx; height: 32rpx;
background: linear-gradient(to right, #fce3c5, #fcc590); margin-right: 10rpx;
color: #31364a; vertical-align: middle;
font-weight: bold; margin-bottom: 4rpx;
width: 150rpx; }
text-align: center; }
font-size: $title-size-m;
border-radius: 30rpx; .subtitle {
} font-size: $title-size-sm;
} margin-top: 10rpx;
// 订单信息
.order-box { .u-notice-bar {
margin: $margin; padding: 0;
background: white; }
border-radius: $radius; }
display: flex;
justify-content: space-between; .btn {
&-item { position: absolute;
width: 25%; right: $margin;
padding: $padding $padding/2; margin-top: -30rpx;
text-align: center; top: 50%;
.icon { height: 60rpx;
width: 48rpx; line-height: 60rpx;
height: 48rpx; background: linear-gradient(to right, #fce3c5, #fcc590);
vertical-align: top; color: #31364a;
} font-weight: bold;
.title { width: 150rpx;
font-size: $title-size-sm; text-align: center;
margin-top: $margin/3; font-size: $title-size-m;
} border-radius: 30rpx;
} }
} }
// 健康数据
.health-flex { // 订单信息
display: flex; .order-box {
margin: $margin ($margin - 10); margin: $margin;
&-item { background: white;
margin: 0 10rpx; border-radius: $radius;
background: white; display: flex;
width: calc(50% - 20rpx); justify-content: space-between;
border-radius: $radius;
padding: $padding; &-item {
box-sizing: border-box; width: 25%;
.title { padding: $padding $padding/2;
font-size: $title-size-lg; text-align: center;
.icon {
width: 32rpx; .icon {
height: 32rpx; width: 48rpx;
vertical-align: middle; height: 48rpx;
margin-left: 10rpx; vertical-align: top;
margin-bottom: 2rpx; }
}
} .title {
.num { font-size: $title-size-sm;
font-weight: bold; margin-top: $margin/3;
font-size: $title-size + 10; }
padding: $padding/3 0; }
text { }
font-size: 70%;
padding-left: 10rpx; // 健康数据
} .health-flex {
} display: flex;
.hith { margin: $margin ($margin - 10);
font-size: $title-size-sm;
color: $text-gray; &-item {
} margin: 0 10rpx;
} background: white;
} width: calc(50% - 20rpx);
// 模块 border-radius: $radius;
.btns-box { padding: $padding;
background: white; box-sizing: border-box;
margin: $margin;
border-radius: $radius; .title {
&-item { font-size: $title-size-lg;
position: relative;
line-height: 90rpx; .icon {
padding: $padding * 0.6 $padding; width: 32rpx;
font-size: $title-size-lg; height: 32rpx;
&::after { vertical-align: middle;
position: absolute; margin-left: 10rpx;
height: 1rpx; margin-bottom: 2rpx;
content: ' '; }
left: $margin; }
right: $margin;
bottom: 0; .num {
background-color: #f9f9f9; font-weight: bold;
} font-size: $title-size + 10;
&:last-child::after { padding: $padding/3 0;
display: none;
} text {
.forward { font-size: 70%;
position: absolute; padding-left: 10rpx;
right: $margin; }
} }
.icon {
width: 44rpx; .hith {
height: 44rpx; font-size: $title-size-sm;
vertical-align: middle; color: $text-gray;
margin-right: $margin/2; }
margin-bottom: 8rpx; }
} }
}
} // 模块
.btns-box {
background: white;
margin: $margin;
border-radius: $radius;
&-item {
position: relative;
line-height: 90rpx;
padding: $padding * 0.6 $padding;
font-size: $title-size-lg;
&::after {
position: absolute;
height: 1rpx;
content: ' ';
left: $margin;
right: $margin;
bottom: 0;
background-color: #f9f9f9;
}
&:last-child::after {
display: none;
}
.forward {
position: absolute;
right: $margin;
}
.icon {
width: 44rpx;
height: 44rpx;
vertical-align: middle;
margin-right: $margin/2;
margin-bottom: 8rpx;
}
}
}
</style> </style>

249
public/userAuth.js
View File

@@ -1,115 +1,136 @@
/** /**
* Web唐明明 * Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。 * 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。 * 碌碌无为枉半生，一朝惊醒万事空。
* moduleName: 登录 * moduleName: 登录
*/ */
import { router } from '../router' import {
import { keyAuth } from '../apis/interfaces/auth' router
import store from '../store' } from '../router'
import {
class userAuth { keyAuth
constructor() { } from '../apis/interfaces/auth'
this.univerfyConfig = { import store from '../store'
fullScreen: true, import {
authButton: { getImToken
'title': '一键登录', } from '@/apis/interfaces/im.js'
'normalColor': '#34CE98', import im from '@/utils/im/index.js'
'highlightColor': '#16b17a',
'disabledColor': '#aae4cc', class userAuth {
}, constructor() {
otherLoginButton: { this.univerfyConfig = {
'title': '其他手机号码', fullScreen: true,
'borderColor': '#34CE98', authButton: {
'textColor': '#34CE98' 'title': '一键登录',
}, 'normalColor': '#34CE98',
privacyTerms: { 'highlightColor': '#16b17a',
'checkedImage': '/static/icon/checked-icon.png', 'disabledColor': '#aae4cc',
'uncheckedImage': '/static/icon/unchecked-icon.png', },
'textColor': '#999', otherLoginButton: {
'termsColor': '#34CE98', 'title': '其他手机号码',
'suffix': '并使用本机号码登录/注册', 'borderColor': '#34CE98',
'privacyItems': [{ 'textColor': '#34CE98'
'url': 'https://www.baidu.com', },
'title': '隐私协议' privacyTerms: {
}, { 'checkedImage': '/static/icon/checked-icon.png',
'url': 'https://www.baidu.com', 'uncheckedImage': '/static/icon/unchecked-icon.png',
'title': '服务协议' 'textColor': '#999',
}] 'termsColor': '#34CE98',
}, 'suffix': '并使用本机号码登录/注册',
buttons: { 'privacyItems': [{
'iconWidth': '45px', 'url': 'https://www.baidu.com',
'list': [{ 'title': '隐私协议'
"provider": '微信登录', }, {
"iconPath": '/static/icons/wechat.png', 'url': 'https://www.baidu.com',
}] 'title': '服务协议'
} }]
} },
} buttons: {
// 预登录 'iconWidth': '45px',
Login() { 'list': [{
//#ifdef H5 "provider": '微信登录',
router.push({ name: 'Auth' }) "iconPath": '/static/icons/wechat.png',
return }]
//#endif }
}
return new Promise((resolve, reject) => { }
uni.showLoading({ // 预登录
title: '加载中', Login() {
mask: true //#ifdef H5
}) router.push({
uni.preLogin({ name: 'Auth'
provider: 'univerify', })
success: res => { return
this.keyLogin().then(() => { //#endif
resolve({
auth: true return new Promise((resolve, reject) => {
}) uni.showLoading({
}).catch(errMsg => { title: '加载中',
reject(errMsg) mask: true
}) })
}, uni.preLogin({
fail: err => { provider: 'univerify',
router.push({ name: 'Auth' }) success: res => {
}, this.keyLogin().then(() => {
complete() { resolve({
uni.hideLoading() auth: true
} })
}) }).catch(errMsg => {
}) reject(errMsg)
} })
// 一键登录 },
keyLogin() { fail: err => {
return new Promise((resolve, reject) => { router.push({
uni.login({ name: 'Auth'
provider: 'univerify', })
univerifyStyle: { },
...this.univerfyConfig complete() {
}, uni.hideLoading()
success: authResult => { }
keyAuth({ })
access_token: authResult.authResult.access_token, })
openid: authResult.authResult.openid }
}).then(res => { // 一键登录
uni.closeAuthView() keyLogin() {
store.commit('setToken', res.token_type + ' ' + res.access_token) return new Promise((resolve, reject) => {
resolve() uni.login({
}).catch(err => { provider: 'univerify',
reject(err) univerifyStyle: {
}) ...this.univerfyConfig
}, },
fail: err => { success: authResult => {
uni.closeAuthView() keyAuth({
switch (err.code) { access_token: authResult.authResult.access_token,
case 30002: openid: authResult.authResult.openid
router.push({ name: 'Auth', params: { keyPhone: 1 }}) }).then(res => {
break uni.closeAuthView()
} store.commit('setToken', res.token_type + ' ' + res.access_token)
} // 在这里，登录成功，链接IM服务
}) getImToken().then(res => {
}) im.connect(res.token, res.userInfo)
} })
} resolve()
}).catch(err => {
reject(err)
})
},
fail: err => {
uni.closeAuthView()
switch (err.code) {
case 30002:
router.push({
name: 'Auth',
params: {
keyPhone: 1
}
})
break
}
}
})
})
}
}
export default userAuth export default userAuth

28
utils/im/index.js
View File

@@ -3,13 +3,20 @@ import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import store from '@/store/index.js' import store from '@/store/index.js'
import { import {
getFriends, getFriends,
getUserInfo getUserInfo,
getImToken
} from '@/apis/interfaces/im.js' } from '@/apis/interfaces/im.js'
const initIm = (KEY) => { const initIm = (KEY) => {
RongIMLib.init(KEY) RongIMLib.init(KEY)
CallLib.init() CallLib.init()
addListeners() addListeners()
// 初始化的时候 自动链接
if (store.getters.getToken !== '') {
getImToken().then(res => {
connect(res.token, res.userInfo, () => {})
})
}
} }
const setNotifyBadge = () => { const setNotifyBadge = () => {
@@ -19,6 +26,9 @@ const setNotifyBadge = () => {
count count
}) => { }) => {
if (code === 0) { if (code === 0) {
// #ifdef APP-PLUS
plus.runtime.setBadgeNumber(count)
// #endif
if (count > 0) { if (count > 0) {
uni.setTabBarBadge({ uni.setTabBarBadge({
index: 3, index: 3,
@@ -31,6 +41,7 @@ const setNotifyBadge = () => {
} }
} }
}) })
} }
/** /**
@@ -60,6 +71,13 @@ const connect = (token, userInfo, callback) => {
const disconnect = () => { const disconnect = () => {
RongIMLib.disconnect() RongIMLib.disconnect()
// 移除提醒数量
// #ifdef APP-PLUS
plus.runtime.setBadgeNumber(0)
// #endif
uni.removeTabBarBadge({
index: 3
})
} }
// 允许通知的消息类型，触发更新消息列表操作 // 允许通知的消息类型，触发更新消息列表操作
@@ -103,9 +121,9 @@ const addListeners = () => {
// 监听通话呼入 // 监听通话呼入
CallLib.onCallReceived(({ CallLib.onCallReceived(({
data data
}) => { }) => {
console.log('onCallReceived', data) console.log('onCallReceived', data)
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' + url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
data.mediaType data.mediaType
@@ -113,7 +131,7 @@ const addListeners = () => {
}) })
// 通话建立成功 // 通话建立成功
CallLib.onCallConnected(() => { CallLib.onCallConnected(() => {
uni.$emit('onCallConnected'); uni.$emit('onCallConnected');
}) })