布局更改
parent
706346f877
commit
2d32ba508b
@ -0,0 +1,511 @@
|
||||
<template>
|
||||
<view class="p-bind-inedx g_w_all g_h_all g_bg_f_5 g_kuaishou">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="m-top">
|
||||
<view class="m-search g_p_10 g_pb_0 g_position_rela g_p_12 g_bg_f_5">
|
||||
<u-search height="80" v-model="keyword" :placeholder="tabInfo.active == 0 ? '搜索已关注的发单号' : '搜索我的粉丝'" @btnSearch="getSearch" bg-color="#fff" :show-action="false" @change="getSearch" @clear="getSearch" @custom="getSearch" @search="getSearch" search-icon-color="#999999" :maxlength="20"></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-panel">
|
||||
<view class="center">
|
||||
<!-- 列表区 -->
|
||||
<view class="m-list">
|
||||
<view class="link" :class="isShow ? '' : ''">
|
||||
<view class="item g_flex_row_between g_pt_12 g_pb_12 g_pl_16 g_pr_16 g_bg_f" @click="goApply" style="border-bottom: 1rpx solid #eee" v-if="tabInfo.active == 1">
|
||||
<view class="g_flex_1 g_flex_row_start">
|
||||
<view class="g_flex_column_center g_pr_16 g_flex_none">
|
||||
<view class="g_w_48 g_h_48 g_radius_8 g_flex_c" style="background-color: #ffeceb">
|
||||
<i class="iconfont icon-xindeshenqing g_fs_22" style="color: #ff7b7b; font-size: 22px"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="g_flex_column_center g_flex_1">
|
||||
<view class="g_ell_1 g_fs_18 g_c_3">{{ tabInfo.active == 0 ? "新的关注" : "新的粉丝" }}</view>
|
||||
<view
|
||||
class="g_ell_1 g_fs_14 g_c_9 g_mt_4"
|
||||
v-if="tabInfo.active == 0"
|
||||
:style="{
|
||||
color: Number(waitNum_downs) == 0 ? '#fff' : '#999',
|
||||
}"
|
||||
>您有{{ waitNum_downs }}条信息等待对方通过</view
|
||||
>
|
||||
<view
|
||||
class="g_ell_1 g_fs_14 g_c_9 g_mt_4"
|
||||
v-else
|
||||
:style="{
|
||||
color: Number(waitNum_downs) == 0 ? '#fff' : '#999',
|
||||
}"
|
||||
>您有{{ waitNum_downs }}条新的粉丝申请</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="g_flex_none g_h_all g_flex_column_center g_pl_20 g_h_48" v-if="Number(waitNum_ups) > 0">
|
||||
<view class="tip g_w_16 g_h_16 g_bg_f0a g_c_f g_flex_c g_fs_14 g_radius_50">{{ waitNum_ups }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<g-loading :loading="loading" v-if="loading && speed == -1" />
|
||||
<view v-if="!loading && speed == 0 && inviteNum <= 0" class="g_pt_130" style="padding-top: 130px">
|
||||
<g-empty :text="isLogin ? '暂无数据' : '请登录'" />
|
||||
</view>
|
||||
<view v-if="speed > 0 || inviteNum > 0">
|
||||
<view v-if="inviteNum > 0" class="item g_flex_row_between flex_center g_pl_16 g_pr_16 g_pb_12 g_pt_12 g_bg_f g_border_e_b" @click="goInviteList">
|
||||
<view class="g_flex_row_start flex_center">
|
||||
<g-panel-image size="96" radius="6" />
|
||||
<view class="g_ml_16">
|
||||
<view class="g_ell_1 g_fs_18 g_c_0 g_flex_none" style="max-width: 460rpx">关注邀请</view>
|
||||
<view class="g_mt_4 g_text_c">有{{ inviteNum }}个发单号向你发出邀请</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="g_dot_18 g_bg_f40 g_c_f g_text_c" v-if="showDot">{{ inviteNum }}</view>
|
||||
</view>
|
||||
<div class="g_h_10"></div>
|
||||
<div class="r_box g_ml_10 g_mr_10" style="overflow: hidden">
|
||||
<view class="item g_flex_row_between g_pl_16 g_pr_16 g_pb_6 g_pt_6 g_bg_f" hover-class="g_bg_e" v-for="(item, index) in query.list" :key="index" @click="goMain(item)" :class="index == 0 ? 'g_pt_12' : ''" :style="{ 'border-bottom': index == query.list.length - 1 ? '1rpx solid #fff' : '1rpx solid #eee' }">
|
||||
<view class="g_flex_none g_flex_row_start">
|
||||
<view class="g_flex_column_center g_pr_16 g_flex_none" style="position: relative">
|
||||
<g-panel-image :url="item.logo || 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/qiyelogo0610.svg'" size="96" radius="50" />
|
||||
|
||||
<!-- <view v-if="item.supplierAccount == 1" style="position: absolute; left: 0; width: 48px; height: 48px" class="g_flex_row_end">
|
||||
<view class="g_flex_c" style="position: absolute; overflow: hidden; width: 20px; height: 10px; right: -2px; top: 0px">
|
||||
<image :src="cdnBaseImg + 'fadanhao.svg'" mode="widthFix" style="width: 16px; height: 13px"></image>
|
||||
</view>
|
||||
</view>-->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="g_flex_1 g_h_all g_flex_column_center g_h_60 _right">
|
||||
<view class="g_flex_row_between">
|
||||
<view class="g_flex_column_center g_flex_1 g_mr_12">
|
||||
<view class="g_flex_row_start flex_center">
|
||||
<view class="g_ell_1 g_fs_18 g_c_0 g_flex_none" style="max-width: 100%">{{ item.fullName || item.agencyName || "-" }}</view>
|
||||
<!-- <view class="g_ml_6 g_text_c g_flex_1">
|
||||
<view class="g_w_36 g_h_18 g_fs_12 g_redius_4" style="background-color: #f2f7ff; color: #1677ff" v-if="item.teamType == 2">团队</view>
|
||||
<view class="g_w_36 g_h_18 g_fs_12 g_redius_4" style="background-color: #fff5f5; color: #ff4d4f" v-if="item.teamType == 1">个人</view>
|
||||
</view>-->
|
||||
</view>
|
||||
<view class="g_fs_14 g_c_9 g_mt_4">
|
||||
<view class="g_flex_row_start">
|
||||
<view class="g_flex_row_start">
|
||||
<view>总职位</view>
|
||||
<view class="g_mr_8">{{ item.jobNum ? item.jobNum : "0" }}</view>
|
||||
</view>
|
||||
<view class="g_flex_row_start">
|
||||
<view>在招</view>
|
||||
<view class="g_mr_8">{{ item.recruitmentJobNum ? item.recruitmentJobNum : "0" }}</view>
|
||||
</view>
|
||||
<view class="g_flex_row_start">
|
||||
<view>粉丝</view>
|
||||
<view class="g_mr_8">{{ item.downNum ? item.downNum : "0" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="g_flex_column_center g_mb_12" v-if="tabInfo.active == 1">
|
||||
<view v-if="item.recordStatus == 1 && item.supplierAccount == 1 && item.recordStatus == 5">
|
||||
<view class="g_radius_14 g_h_28 g_border_e g_fs_14 g_c_main g_pr_8 g_pl_8 g_flex_row_center flex_center" @click.stop="goApplyForm(item, index)" hover-class="g_bg_f_5" hover-stop-propagation>
|
||||
<i class="iconfont icon-tianjia g_fsi_12 g_mr_6"></i>
|
||||
等待通过
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.recordStatus == 1 && item.supplierAccount == 1 && item.recordStatus == 6">
|
||||
<view class="g_radius_14 g_h_28 g_border_e g_fs_14 g_c_main g_pr_8 g_pl_8 g_flex_row_center flex_center" @click.stop="goApplyForm(item, index)" hover-class="g_bg_f_5" hover-stop-propagation>
|
||||
<i class="iconfont icon-tianjia g_fsi_12 g_mr_6"></i>
|
||||
已过期
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.recordStatus == 1 && item.supplierAccount == 1">
|
||||
<view class="g_radius_14 g_h_28 g_border_e g_fs_14 g_c_main g_pr_8 g_pl_8 g_flex_row_center flex_center" @click.stop="goApplyForm(item, index)" hover-class="g_bg_f_5" hover-stop-propagation>
|
||||
<i class="iconfont icon-tianjia g_fsi_12 g_mr_6"></i>
|
||||
关注
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.recordStatus == 2">
|
||||
<view class="g_radius_14 g_h_28 g_border_e g_fs_14 g_c_6 g_pr_8 g_pl_8 g_flex_row_center flex_center">
|
||||
<i class="iconfont icon-a-bianzu11beifen2 g_fsi_12 g_mr_6"></i>
|
||||
互相关注
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isShow && speed > 0" class="g_bg_f_5">
|
||||
<g-panel-hr :str="query.isFinish >= 0 && query.isFinish < query.size ? speed + '个发单号' : '加载中'" />
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<view style="height: 50px"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<g-tabbar class="tabbar"></g-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady() {
|
||||
this.G.setNavStyle();
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return this.G.shareFun();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cdnBaseImg: this.G.store().cdnBaseImg,
|
||||
isLogin: null,
|
||||
isShow: false,
|
||||
loading: true,
|
||||
showDot: true,
|
||||
speed: -1,
|
||||
query: {
|
||||
page: 1,
|
||||
size: 50,
|
||||
list: [],
|
||||
isFinish: -1,
|
||||
},
|
||||
keyword: "",
|
||||
scrollTop: 0,
|
||||
domHeight: 0,
|
||||
waitNum_downs: 0,
|
||||
waitNum_ups: 0,
|
||||
|
||||
cardTab: [
|
||||
{
|
||||
icon: "t-icon-xunzhaoshangyou",
|
||||
title: "搜索发单号",
|
||||
remark: "关注更多单子的更新",
|
||||
},
|
||||
{
|
||||
icon: "t-icon-fazhanxiayou",
|
||||
title: "发展代理",
|
||||
remark: "让更多代理关注我",
|
||||
},
|
||||
],
|
||||
tabInfo: {
|
||||
list: [
|
||||
{
|
||||
name: "关注(0)",
|
||||
num: 0,
|
||||
tip: 0,
|
||||
cate_count: 0,
|
||||
},
|
||||
{
|
||||
name: "粉丝(0)",
|
||||
num: 0,
|
||||
tip: 1,
|
||||
cate_count: 0,
|
||||
},
|
||||
],
|
||||
active: 0,
|
||||
},
|
||||
tabFansInfo: {
|
||||
list: [
|
||||
{
|
||||
name: "新的代理",
|
||||
},
|
||||
{
|
||||
name: "全部粉丝",
|
||||
},
|
||||
],
|
||||
active: 0,
|
||||
},
|
||||
inviteNum: 0, //邀请关注粉丝的数量
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this;
|
||||
// that.tabInfo.active = options.active
|
||||
// if (that.tabInfo.active == 0) {
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: "发单号",
|
||||
// });
|
||||
// } else {
|
||||
// if (that.tabInfo.active == 1) {
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: "我的粉丝",
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(".m-top")
|
||||
.boundingClientRect((data) => {
|
||||
that.domHeight = data.height + 34;
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
onShow() {
|
||||
let that = this;
|
||||
that.isLogin = uni.getStorageSync("apply-token");
|
||||
if (uni.getStorageSync("watch_invite")) {
|
||||
if (uni.getStorageSync("watch_invite") == 1) {
|
||||
that.showDot = false; // 小红点数字显示
|
||||
}
|
||||
}
|
||||
|
||||
if (!that.isLogin) {
|
||||
that.waitNum_downs = 0;
|
||||
that.waitNum_ups = 0;
|
||||
that.tabInfo.list[0].name = "关注(0)";
|
||||
that.tabInfo.list[1].name = "粉丝(0)";
|
||||
that.isShow = true;
|
||||
that.speed = 0;
|
||||
that.loading = false;
|
||||
that.query.list = [];
|
||||
} else {
|
||||
that.query.page = 1;
|
||||
that.getWaitNum();
|
||||
that.getNum();
|
||||
that.getList();
|
||||
that.getInviteNum();
|
||||
|
||||
that.getPoint();
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
let that = this;
|
||||
if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
|
||||
that.query.page++;
|
||||
that.getList("concat");
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
methods: {
|
||||
handleUpdateFensTab(e) {},
|
||||
getPoint() {
|
||||
let that = this;
|
||||
that.G.Get(
|
||||
that.api.bind_getWaitNum + "/2",
|
||||
{
|
||||
type: 2,
|
||||
},
|
||||
(res) => {
|
||||
that.tabInfo.list[1].cate_count = res.unread;
|
||||
}
|
||||
);
|
||||
},
|
||||
getWaitNum() {
|
||||
let that = this;
|
||||
that.G.Get(
|
||||
that.api.bind_getWaitNum + "/" + (that.tabInfo.active * 1 + 1),
|
||||
{
|
||||
type: that.tabInfo.active * 1 + 1,
|
||||
},
|
||||
(res) => {
|
||||
that.waitNum_downs = res.total;
|
||||
that.waitNum_ups = res.unread;
|
||||
console.log("获取指定数量：", res);
|
||||
that.$forceUpdate();
|
||||
}
|
||||
);
|
||||
},
|
||||
getNum() {
|
||||
let that = this;
|
||||
that.G.Post(
|
||||
that.api.bind_getListNum,
|
||||
{
|
||||
keys: that.keyword,
|
||||
},
|
||||
(res) => {
|
||||
that.tabInfo.list[0].name = "关注(" + res.ups + ")";
|
||||
that.tabInfo.list[1].name = "粉丝(" + res.downs + ")";
|
||||
}
|
||||
);
|
||||
},
|
||||
getInviteNum() {
|
||||
let that = this;
|
||||
that.G.Get(that.api.user_getInviteNum, {}, (res) => {
|
||||
console.log(res);
|
||||
that.inviteNum = res;
|
||||
});
|
||||
},
|
||||
getList($type = "init") {
|
||||
let that = this;
|
||||
that.isShow = false;
|
||||
that.G.Post(
|
||||
that.api.bind_list,
|
||||
{
|
||||
pageNum: that.query.page,
|
||||
pageSize: that.query.size,
|
||||
keys: that.keyword,
|
||||
platform: "pc",
|
||||
type: that.tabInfo.active * 1 + 1,
|
||||
formdata: true,
|
||||
},
|
||||
(res) => {
|
||||
that.isShow = true;
|
||||
that.speed = res.recordCount;
|
||||
if (that.speed == 0) {
|
||||
that.loading = false;
|
||||
} else {
|
||||
that.loading = true;
|
||||
}
|
||||
that.query.isFinish = res.recordList.length;
|
||||
if ($type == "init") {
|
||||
that.query.list = [];
|
||||
that.query.list = res.recordList;
|
||||
} else {
|
||||
that.query.list = that.query.list.concat(res.recordList);
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
getSearch(e) {
|
||||
if (e == "string") {
|
||||
this.keyword = e;
|
||||
}
|
||||
this.G.isLogin();
|
||||
if (this.G.isLogin()) {
|
||||
this.speed = -1;
|
||||
this.query.page = 1;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
|
||||
handleUpdateTab(e) {
|
||||
this.G.isLogin();
|
||||
if (this.G.isLogin()) {
|
||||
this.tabInfo.active = e;
|
||||
this.speed = -1;
|
||||
this.query.page = 1;
|
||||
this.getList();
|
||||
this.getWaitNum();
|
||||
this.getNum();
|
||||
this.getPoint();
|
||||
}
|
||||
},
|
||||
goMain($item) {
|
||||
let that = this;
|
||||
this.G.isLogin();
|
||||
if (this.G.isLogin()) {
|
||||
if ($item.supplierAccount == 1) {
|
||||
let params = {
|
||||
id: $item.agencyId,
|
||||
type: that.tabInfo.active * 1 + 1,
|
||||
bindid: $item.id,
|
||||
isShowMore: false,
|
||||
isShowJob: false,
|
||||
shareForm: "apply",
|
||||
};
|
||||
|
||||
if (that.tabInfo.active == 0) {
|
||||
// 关注
|
||||
params.isShowMore = true;
|
||||
params.isShowJob = true;
|
||||
} else {
|
||||
// 粉丝
|
||||
if ($item.recordStatus == 1) {
|
||||
// 已关注
|
||||
params.isShowMore = true;
|
||||
params.isShowJob = false;
|
||||
} else {
|
||||
// 相互关注
|
||||
params.isShowMore = true;
|
||||
params.isShowJob = true;
|
||||
}
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: "/root/detail/userShare?" + that.G.objToStr(params),
|
||||
});
|
||||
} else {
|
||||
// 直接前往操作页
|
||||
uni.navigateTo({
|
||||
url: "/root/bind/more?delta=1&id=" + $item.agencyId + "&himSee=" + $item.himSee + "&lookHim=" + $item.lookHim + "&type=" + 2 + "&hid=" + $item.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
goApply() {
|
||||
let that = this,
|
||||
str = "";
|
||||
this.G.isLogin();
|
||||
if (this.G.isLogin()) {
|
||||
uni.navigateTo({
|
||||
url: "/root/bind/applyList?active=2",
|
||||
});
|
||||
}
|
||||
},
|
||||
goSearch($item, $index) {
|
||||
let that = this;
|
||||
that.G.isLogin();
|
||||
if (that.G.isLogin()) {
|
||||
uni.navigateTo({
|
||||
url: "/root/bind/search?active=" + $index,
|
||||
});
|
||||
}
|
||||
},
|
||||
goApplyForm($item, $index) {
|
||||
let that = this;
|
||||
if ($item.recordStatus == 5 || $item.recordStatus == 6) {
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/root/bind/applyForm?code=" + $item.agencyId + "&form=1",
|
||||
});
|
||||
}
|
||||
},
|
||||
goInviteList() {
|
||||
uni.navigateTo({
|
||||
url: "/root/bind/inviteList?active=0",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.p-bind-inedx {
|
||||
.m-card {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
.item {
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
}
|
||||
|
||||
.showdoc {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 6px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.suffix {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
border-top-right-radius: 110rpx;
|
||||
border-bottom-right-radius: 110rpx;
|
||||
}
|
||||
|
||||
.tab-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.m-search {
|
||||
// .u-icon-wrap{
|
||||
// position: absolute;
|
||||
// left: 190rpx;
|
||||
// }
|
||||
}
|
||||
|
||||
.m-search-active {
|
||||
.u-icon-wrap {
|
||||
position: inherit;
|
||||
left: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,291 +1,265 @@
|
||||
<template>
|
||||
<div class="wrapper g_bg_f_5">
|
||||
<!-- <NavBar :title="t('FriendPageText')" /> -->
|
||||
<UserCard
|
||||
:account="userInfo && userInfo.accountId"
|
||||
:nick="userInfo && userInfo.name"
|
||||
></UserCard>
|
||||
<template v-if="relation === 'stranger'">
|
||||
<div class="userInfo-item-wrapper">
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t('addBlacklist') }}</div>
|
||||
<switch
|
||||
:checked="isInBlacklist"
|
||||
@change="(checked) => handleSwitchChange(checked)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper bg_page">
|
||||
<!-- <NavBar :title="t('FriendPageText')" /> -->
|
||||
<UserCard :account="userInfo && userInfo.accountId" :nick="userInfo && userInfo.name"></UserCard>
|
||||
<template v-if="relation === 'stranger'">
|
||||
<div class="userInfo-item-wrapper">
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t("addBlacklist") }}</div>
|
||||
<switch :checked="isInBlacklist" @change="(checked) => handleSwitchChange(checked)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button" :style="{ marginTop: '10px' }" @click="addFriend">
|
||||
{{ t('addFriendText') }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="userInfo-item-wrapper">
|
||||
<div class="userInfo-item" @tap="handleAliasClick">
|
||||
<div class="item-left">{{ t('remarkText') }}</div>
|
||||
<div class="item-right">
|
||||
<Icon iconClassName="more-icon" color="#999" type="icon-jiantou" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t('genderText') }}</div>
|
||||
<div class="item-right">
|
||||
{{
|
||||
userInfo && userInfo.gender === 0
|
||||
? t('unknow')
|
||||
: userInfo && userInfo.gender === 1
|
||||
? t('man')
|
||||
: t('woman')
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-shadow"></div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t('birthText') }}</div>
|
||||
<div class="item-right">
|
||||
{{ (userInfo && userInfo.birthday) || t('unknow') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-shadow"></div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t('mobile') }}</div>
|
||||
<div class="item-right">
|
||||
{{ (userInfo && userInfo.mobile) || t('unknow') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-shadow"></div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t('email') }}</div>
|
||||
<div class="item-right">
|
||||
{{ (userInfo && userInfo.email) || t('unknow') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t('sign') }}</div>
|
||||
<div class="item-right">
|
||||
{{ (userInfo && userInfo.sign) || t('unknow') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="userInfo-item-wrapper">
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t('addBlacklist') }}</div>
|
||||
<switch :checked="isInBlacklist" @change="handleSwitchChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="button" @click="gotoChat">{{ t('chatWithFriendText') }}</div>
|
||||
<div class="box-shadow"></div>
|
||||
<div class="button button-red" @click="deleteFriend">
|
||||
{{ t('deleteFriendText') }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="button" :style="{ marginTop: '10px' }" @click="addFriend">
|
||||
{{ t("addFriendText") }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="userInfo-item-wrapper">
|
||||
<div class="userInfo-item" @tap="handleAliasClick">
|
||||
<div class="item-left">{{ t("remarkText") }}</div>
|
||||
<div class="item-right">
|
||||
<Icon iconClassName="more-icon" color="#999" type="icon-jiantou" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t("genderText") }}</div>
|
||||
<div class="item-right">
|
||||
{{ userInfo && userInfo.gender === 0 ? t("unknow") : userInfo && userInfo.gender === 1 ? t("man") : t("woman") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-shadow"></div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t("birthText") }}</div>
|
||||
<div class="item-right">
|
||||
{{ (userInfo && userInfo.birthday) || t("unknow") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-shadow"></div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t("mobile") }}</div>
|
||||
<div class="item-right">
|
||||
{{ (userInfo && userInfo.mobile) || t("unknow") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-shadow"></div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t("email") }}</div>
|
||||
<div class="item-right">
|
||||
{{ (userInfo && userInfo.email) || t("unknow") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t("sign") }}</div>
|
||||
<div class="item-right">
|
||||
{{ (userInfo && userInfo.sign) || t("unknow") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="userInfo-item-wrapper">
|
||||
<div class="userInfo-item">
|
||||
<div class="item-left">{{ t("addBlacklist") }}</div>
|
||||
<switch :checked="isInBlacklist" @change="handleSwitchChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="button" @click="gotoChat">{{ t("chatWithFriendText") }}</div>
|
||||
<div class="box-shadow"></div>
|
||||
<div class="button button-red" @click="deleteFriend">
|
||||
{{ t("deleteFriendText") }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import UserCard from '../../../components/UserCard.vue'
|
||||
import { onUnmounted, ref } from '../../../utils/transformVue'
|
||||
import { t } from '../../../utils/i18n'
|
||||
import NavBar from '../../../components/NavBar.vue'
|
||||
import { autorun } from 'mobx'
|
||||
import {
|
||||
customRedirectTo,
|
||||
customNavigateTo,
|
||||
} from '../../../utils/customNavigate'
|
||||
import { deepClone } from '../../../utils'
|
||||
import type { Relation } from '@xkit-yx/im-store-v2'
|
||||
import { V2NIMUser } from 'nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK/V2NIMUserService'
|
||||
import { V2NIMConst } from 'nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK'
|
||||
import Icon from '../../../components/Icon.vue'
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import UserCard from "../../../components/UserCard.vue";
|
||||
import { onUnmounted, ref } from "../../../utils/transformVue";
|
||||
import { t } from "../../../utils/i18n";
|
||||
import NavBar from "../../../components/NavBar.vue";
|
||||
import { autorun } from "mobx";
|
||||
import { customRedirectTo, customNavigateTo } from "../../../utils/customNavigate";
|
||||
import { deepClone } from "../../../utils";
|
||||
import type { Relation } from "@xkit-yx/im-store-v2";
|
||||
import { V2NIMUser } from "nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK/V2NIMUserService";
|
||||
import { V2NIMConst } from "nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK";
|
||||
import Icon from "../../../components/Icon.vue";
|
||||
|
||||
const userInfo = ref<V2NIMUser>()
|
||||
const relation = ref<Relation>('stranger')
|
||||
const isInBlacklist = ref(false)
|
||||
const userInfo = ref<V2NIMUser>();
|
||||
const relation = ref<Relation>("stranger");
|
||||
const isInBlacklist = ref(false);
|
||||
|
||||
let account = ''
|
||||
let account = "";
|
||||
|
||||
const handleAliasClick = () => {
|
||||
customNavigateTo({
|
||||
url: `/pages/Friend/friend-info-edit?id=${account}`,
|
||||
})
|
||||
}
|
||||
let uninstallFriendWatch = () => {}
|
||||
let uninstallRelationWatch = () => {}
|
||||
customNavigateTo({
|
||||
url: `/pages/Friend/friend-info-edit?id=${account}`,
|
||||
});
|
||||
};
|
||||
let uninstallFriendWatch = () => {};
|
||||
let uninstallRelationWatch = () => {};
|
||||
|
||||
onLoad((props) => {
|
||||
account = props ? props.account : ''
|
||||
uni.$UIKitStore.userStore.getUserForceActive(account)
|
||||
uninstallFriendWatch = autorun(() => {
|
||||
userInfo.value = deepClone(
|
||||
uni.$UIKitStore.uiStore.getFriendWithUserNameCard(account)
|
||||
)
|
||||
})
|
||||
account = props ? props.account : "";
|
||||
uni.$UIKitStore.userStore.getUserForceActive(account);
|
||||
uninstallFriendWatch = autorun(() => {
|
||||
userInfo.value = deepClone(uni.$UIKitStore.uiStore.getFriendWithUserNameCard(account));
|
||||
});
|
||||
|
||||
uninstallRelationWatch = autorun(() => {
|
||||
const { relation: _relation, isInBlacklist: _isInBlacklist } =
|
||||
uni.$UIKitStore.uiStore.getRelation(account)
|
||||
relation.value = _relation
|
||||
isInBlacklist.value = _isInBlacklist
|
||||
})
|
||||
})
|
||||
uninstallRelationWatch = autorun(() => {
|
||||
const { relation: _relation, isInBlacklist: _isInBlacklist } = uni.$UIKitStore.uiStore.getRelation(account);
|
||||
relation.value = _relation;
|
||||
isInBlacklist.value = _isInBlacklist;
|
||||
});
|
||||
});
|
||||
|
||||
const handleSwitchChange = async (e: any) => {
|
||||
const isAdd = e.detail.value
|
||||
try {
|
||||
if (isAdd) {
|
||||
await uni.$UIKitStore.relationStore.addUserToBlockListActive(account)
|
||||
} else {
|
||||
await uni.$UIKitStore.relationStore.removeUserFromBlockListActive(account)
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: isAdd ? t('setBlackFailText') : t('removeBlackFailText'),
|
||||
icon: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
const isAdd = e.detail.value;
|
||||
try {
|
||||
if (isAdd) {
|
||||
await uni.$UIKitStore.relationStore.addUserToBlockListActive(account);
|
||||
} else {
|
||||
await uni.$UIKitStore.relationStore.removeUserFromBlockListActive(account);
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: isAdd ? t("setBlackFailText") : t("removeBlackFailText"),
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const deleteFriend = () => {
|
||||
uni.showModal({
|
||||
title: t('deleteFriendText'),
|
||||
content:
|
||||
t('deleteFriendConfirmText') +
|
||||
'“' +
|
||||
uni.$UIKitStore.uiStore.getAppellation({ account }) +
|
||||
'”?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.$UIKitStore.friendStore
|
||||
.deleteFriendActive(account)
|
||||
.then(() => {
|
||||
uni.showToast({
|
||||
title: t('deleteFriendSuccessText'),
|
||||
icon: 'success',
|
||||
})
|
||||
})
|
||||
.then(() => {
|
||||
const conversationId =
|
||||
uni.$UIKitNIM.V2NIMConversationIdUtil.p2pConversationId(account)
|
||||
return uni.$UIKitStore.conversationStore.deleteConversationActive(
|
||||
conversationId
|
||||
)
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({
|
||||
title: t('deleteFriendFailText'),
|
||||
icon: 'error',
|
||||
})
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
uni.showModal({
|
||||
title: t("deleteFriendText"),
|
||||
content: t("deleteFriendConfirmText") + "“" + uni.$UIKitStore.uiStore.getAppellation({ account }) + "”?",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.$UIKitStore.friendStore
|
||||
.deleteFriendActive(account)
|
||||
.then(() => {
|
||||
uni.showToast({
|
||||
title: t("deleteFriendSuccessText"),
|
||||
icon: "success",
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
const conversationId = uni.$UIKitNIM.V2NIMConversationIdUtil.p2pConversationId(account);
|
||||
return uni.$UIKitStore.conversationStore.deleteConversationActive(conversationId);
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({
|
||||
title: t("deleteFriendFailText"),
|
||||
icon: "error",
|
||||
});
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log("用户点击取消");
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const addFriend = async () => {
|
||||
try {
|
||||
await uni.$UIKitStore.friendStore.addFriendActive(account, {
|
||||
addMode: V2NIMConst.V2NIMFriendAddMode.V2NIM_FRIEND_MODE_TYPE_APPLY,
|
||||
postscript: '',
|
||||
})
|
||||
try {
|
||||
await uni.$UIKitStore.friendStore.addFriendActive(account, {
|
||||
addMode: V2NIMConst.V2NIMFriendAddMode.V2NIM_FRIEND_MODE_TYPE_APPLY,
|
||||
postscript: "",
|
||||
});
|
||||
|
||||
// 发送申请成功后解除黑名单
|
||||
await uni.$UIKitStore.relationStore.removeUserFromBlockListActive(account)
|
||||
uni.showToast({
|
||||
title: t('applyFriendSuccessText'),
|
||||
icon: 'success',
|
||||
})
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: t('applyFriendFailText'),
|
||||
icon: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
// 发送申请成功后解除黑名单
|
||||
await uni.$UIKitStore.relationStore.removeUserFromBlockListActive(account);
|
||||
uni.showToast({
|
||||
title: t("applyFriendSuccessText"),
|
||||
icon: "success",
|
||||
});
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: t("applyFriendFailText"),
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const gotoChat = async () => {
|
||||
const conversationId =
|
||||
uni.$UIKitNIM.V2NIMConversationIdUtil.p2pConversationId(
|
||||
userInfo.value?.accountId || ''
|
||||
)
|
||||
await uni.$UIKitStore.uiStore.selectConversation(conversationId)
|
||||
customRedirectTo({
|
||||
url: '/pages/Chat/index',
|
||||
})
|
||||
}
|
||||
const conversationId = uni.$UIKitNIM.V2NIMConversationIdUtil.p2pConversationId(userInfo.value?.accountId || "");
|
||||
await uni.$UIKitStore.uiStore.selectConversation(conversationId);
|
||||
customRedirectTo({
|
||||
url: "/pages/Chat/index",
|
||||
});
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
uninstallFriendWatch()
|
||||
uninstallRelationWatch()
|
||||
})
|
||||
uninstallFriendWatch();
|
||||
uninstallRelationWatch();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.bg_page {
|
||||
background-color: #ededed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
page {
|
||||
padding-top: var(--status-bar-height);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
padding-top: var(--status-bar-height);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
// background-color: rgb(245, 246, 247);
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 50px;
|
||||
// background-color: rgb(245, 246, 247);
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.userInfo-item-wrapper {
|
||||
background-color: #fff;
|
||||
margin: 10px 0;
|
||||
.userInfo-item-wrapper {
|
||||
background-color: #fff;
|
||||
margin: 10px 0;
|
||||
|
||||
.userInfo-item {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
.userInfo-item {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
|
||||
.item-left {
|
||||
font-size: 16px;
|
||||
}
|
||||
.item-left {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
font-size: 15px;
|
||||
width: 200px;
|
||||
text-align: right;
|
||||
color: #a6adb6;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-right {
|
||||
font-size: 15px;
|
||||
width: 200px;
|
||||
text-align: right;
|
||||
color: #a6adb6;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
// margin-top: 150px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #1890ff;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.button {
|
||||
// margin-top: 150px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #1890ff;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.button-red {
|
||||
color: #e6605c;
|
||||
}
|
||||
.button-red {
|
||||
color: #e6605c;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
height: 1px;
|
||||
background: none;
|
||||
padding: 0 25px;
|
||||
box-shadow: 0 0.5px 0 rgb(247, 244, 244);
|
||||
}
|
||||
.box-shadow {
|
||||
height: 1px;
|
||||
background: none;
|
||||
padding: 0 25px;
|
||||
box-shadow: 0 0.5px 0 rgb(247, 244, 244);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue