连云港陪玩陪聊
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
chunwan/pages/user/index.vue

944 lines
23 KiB

<template>
<view class="user">
<view class="user-navbar">
<u-navbar :is-back="false" title="我的" :background="background">
<view slot="right">
<view class="search" @click="openPage(1)">
<image src="@/static/icon-edit.png"></image>
</view>
</view>
</u-navbar>
</view>
<view class="user-info">
<view class="a">
<view class="pic" @click="openPage(2)">
<image v-if="userInfo.faceImage" :src="userInfo.faceImage"></image>
<image v-else :src="userInfo.img"></image>
</view>
<view class="info" @click="openPage(2)">
<view class="name">{{userInfo.realname?userInfo.realname:userInfo.nickname}}
<view class="vip" v-if="userInfo.memberflag>=1">vip{{userInfo.memberflag}}</view>
<view class="status" v-if="userInfo.acceptStatus == 1"><text></text>接单中</view>
<view class="status" v-if="userInfo.acceptStatus == 2"><text></text>忙碌中</view>
<view class="status" v-if="userInfo.acceptStatus == 0"><text></text>空闲中</view>
</view>
<view class="id">ID:{{userInfo.id}}</view>
</view>
<view class="sign" @click="openPage(3)" v-if="userInfo.isSign == 0">签到</view>
<view class="sign" v-if="userInfo.isSign == 1">已签到</view>
</view>
<view class="b">
<view class="li" @click="openPage(5)">{{userInfo.friendNum}}<text>好友</text></view>
<view class="li" @click="openPage(6)">{{userInfo.careNum}}<text>关注</text></view>
<view class="li" @click="openPage(7)">{{userInfo.fansNum}}<text>粉丝</text></view>
<view class="li" @click="openPage(8)">{{userInfo.visitorNum}}<text>访客</text></view>
</view>
<view class="c" @click="openPage(4)">
<view class="dt">VIP会员中心<text v-if="userInfo.memberflag>=1">{{userInfo.memberEndTime}}到期</text><text v-else>立即开通</text></view>
<view class="dd">
<view class="item">
<image src="@/static/hongbao.png"></image>
<view class="txt">每日礼包<text>福利礼包</text></view>
</view>
<view class="item">
<image src="@/static/libao.png"></image>
<view class="txt">每日礼包<text>专属特权</text></view>
</view>
</view>
</view>
<view class="d">
<view class="item" @click="openPage(9)">
<image src="@/static/qianbao.png"></image>我的钱包
</view>
<view class="item" @click="openPage(10)">
<image src="@/static/chongzhi.png"></image>充值
</view>
</view>
</view>
<view class="user-menu">
<view class="title">
我的订单
<view class="more" @click="openPage(11,0)">
全部订单
<image src="@/static/icon-arrow.png"></image>
</view>
</view>
<view class="content" >
<view class="item" @click="openPage(11,1)">
<image src="@/static/icon-order-01.png"></image>待支付<view class="num" v-if="userInfo.mePayNum">{{userInfo.mePayNum<=99?userInfo.mePayNum:"+99"}}</view>
</view>
<view class="item" @click="openPage(11,2)">
<image src="@/static/icon-order-02.png"></image>待接单<view class="num" v-if="userInfo.meAcceptNum">{{userInfo.meAcceptNum<=99?userInfo.meAcceptNum:"+99"}}</view>
</view>
<view class="item" @click="openPage(11,3)">
<image src="@/static/icon-order-03.png"></image>已接单<view class="num" v-if="userInfo.meAcceptingNum">{{userInfo.meAcceptingNum<=99?userInfo.meAcceptingNum:"+99"}}</view>
</view>
<view class="item" @click="openPage(11,4)">
<image src="@/static/icon-order-04.png"></image>服务中<view class="num" v-if="userInfo.meServiceNum">{{userInfo.meServiceNum<=99?userInfo.meFinishNum:"+99"}}</view>
</view>
<view class="item" @click="openPage(11,5)">
<image src="@/static/icon-order-05.png"></image>已完成<view class="num" v-if="userInfo.meFinishNum">{{userInfo.meFinishNum<=99?userInfo.meFinishNum:"+99"}}</view>
</view>
</view>
</view>
<view class="user-menu1" v-if="userInfo.role == 2">
<view class="title">
陪玩师订单
<view class="more" @click="openPage(12,0)">
全部订单
<image src="@/static/icon-arrow.png"></image>
</view>
</view>
<view class="content">
<view class="item" @click="openPage(12,1)">
<image src="@/static/icon-order-02.png"></image>待接单<view class="num" v-if="userInfo.sellerAcceptNum">{{userInfo.sellerAcceptNum<=99?userInfo.sellerAcceptNum:"+99"}}</view>
</view>
<view class="item" @click="openPage(12,2)">
<image src="@/static/icon-order-03.png"></image>已接单<view class="num" v-if="userInfo.sellerAcceptingNum">{{userInfo.sellerAcceptingNum<=99?userInfo.sellerAcceptingNum:"+99"}}</view>
</view>
<view class="item" @click="openPage(12,3)">
<image src="@/static/icon-order-04.png"></image>服务中<view class="num" v-if="userInfo.sellerServiceNum">{{userInfo.sellerServiceNum<=99?userInfo.sellerServiceNum:"+99"}}</view>
</view>
<view class="item" @click="openPage(12,4)">
<image src="@/static/icon-order-05.png"></image>已完成<view class="num" v-if="userInfo.sellerFinishNum">{{userInfo.sellerFinishNum<=99?userInfo.sellerFinishNum:"+99"}}</view>
</view>
</view>
</view>
<view class="user-menu1">
<view class="title">
常用功能
</view>
<view class="content">
<view class="item" @click="openPage(13)">
<image src="@/static/icon-user-01.png"></image>美颜设置
</view>
<view class="item" @click="openPage(14)">
<image src="@/static/icon-user-02.png"></image>认证中心<view v-if="userInfo.realnameFlag == 1" class="status">已认证</view>
</view>
<view class="item" @click="openPage(15)">
<image src="@/static/icon-user-03.png"></image>陪玩设置
</view>
<view class="item" @click="openPage(16)">
<image src="@/static/icon-user-04.png"></image>任务中心
</view>
</view>
</view>
<view class="user-menu1">
<view class="title">
其他
</view>
<view class="content">
<view class="item" @click="openPage(17)">
<image src="@/static/icon-user-05.png"></image>邀请好友
</view>
<view class="item" @click="openPage(18)">
<image src="@/static/icon-user-06.png"></image>我的团队
</view>
<view class="item" @click="openPage(19)">
<image src="@/static/icon-user-07.png"></image>系统设置
</view>
<view class="item" @click="openPage(20)">
<image src="@/static/icon-user-08.png"></image>帮助中心
</view>
<view class="item" @click="openPage(21)">
<image src="@/static/icon-user-09.png"></image>城市合作
</view>
<view class="item" @click="openPage(22)">
<image src="@/static/icon-user-10.png"></image>意见反馈
</view>
<view class="item" @click="openPage(23)">
<image src="@/static/icon-user-11.png"></image>客服
</view>
</view>
</view>
<view class="invite" v-if="show">
<view class="body">
<view class="poster">
<image mode="widthFix" :src="poster"></image>
</view>
<!-- <view class="content">
<image class="avatar" :src="userInfo.faceImage?userInfo.faceImage:userInfo.img"></image>
<view class="name">{{userInfo.nickname}}</view>
<image class="txt" src="@/static/txt.png"></image>
<image class="code" :src="qrcode" show-menu-by-longpress="true"></image>
<view class="txt1">-长按识别图中二维码-</view>
<view class="id">邀请码{{userInfo.invitationCode}}</view>
<image class="zw" src="@/static/zw.png"></image>
</view> -->
<view class="btns">
<view class="cancle" @click="toCancle()">取消</view>
<view class="sure" @click="toSave()">保存</view>
</view>
</view>
</view>
<unverified :isPopup="isPopup" />
<share :isShare="isShare" :type="type" :info="info" />
</view>
</template>
<script>
import { createQrCodeImg } from '@/api/qrcode'
export default {
data() {
return {
type: 1,
isShare: false,
isPopup: false,
show: false,
background: {
// 导航栏背景图
background: 'url(https://api.lyiyuan.cn/profile/upload/static/user-bg.png) center top no-repeat',
// 还可以设置背景图size属性
backgroundSize: '100 auto',
},
userInfo: {},
baseUrl: "",
info: {},
qrcode: "",
poster: ""
}
},
onReady() {
const that = this;
uni.$on("closeSharePopup",res=>{
that.isPopup = false;
that.isShare = false;
that.baseUrl = that.$baseUrl;
})
uni.$on("openHaibaoPopup",res=>{
that.createPoster();
that.show = true;
})
if( uni.getStorageSync("isOpen") && uni.getStorageSync("userInfo").id){
this.watchSocket();
}
},
onShow() {
this.getUserInfo();
},
methods: {
watchSocket() {
uni.onSocketMessage(function (res) {
const obj = res.data?JSON.parse(res.data):{}
if(obj.topic == 'message'){
if(obj.type <= 7){
if(uni.getStorageSync("userInfo").id == obj.sellerId){
if(obj.userMsgVoice == 1){
console.log(222)
uni.$emit("playAudio")
}
if(obj.userMsgShock == 1){
console.log(2233)
uni.vibrateLong({
complete: function (res) {
console.log('success',res);
}
});
}
uni.showModal({
title: "温馨提示",
content: "来自"+obj.userNickname+(obj.type==1?"语音":obj.type==2?"视频":obj.type==3?"文字":obj.type==4?"图片":obj.type==5?"礼物":"搭讪")+"消息,请立即处理!",
confirmText: "立即查看",
success(data) {
if(data.confirm){
uni.navigateTo({
url: "/pages/xiaoxi/index"
})
}else{
// uni.sendSocketMessage({
// data: JSON.stringify({event: 3, "room_id": obj.room_id, "to_id": obj.from_user_data.fromUserId,'from_id':0})
// });
}
}
})
}
}else{
console.log("挂断了")
}
}
});
},
toCancle() {
this.show = false;
},
//字典查询
async createPoster() {
const that = this;
const {code, data} = await that.$api.createPoster({userId: uni.getStorageSync("userInfo").id});
if(code == 200){
that.poster = data
}
},
toSave() {
if(!this.poster){
return ;
}
uni.showLoading({
title: "正在保存"
})
uni.downloadFile({
url: this.poster,
complete:(res)=>{
uni.hideLoading();
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success: function() {
uni.showToast({
title: "保存成功",
icon: "none"
});
},
fail: function() {
uni.showToast({
title: "保存失败",
icon: "none"
});
}
})
}
})
this.show = false;
},
//字典查询
async getConfigData() {
const that = this;
let res1 = await that.$api.getConfigData({dictType: 'CONFIG_CUSTOMER_SERVICE_USERID'});
if(res1.data.content){
that.toChat(res1.data.content)
}
},
//去聊天
async toChat(sellerId) {
const { code, data } = await this.$api.findZegoToken({
userId: uni.getStorageSync("userInfo").id,
sellerId
})
if(code == 200){
uni.setStorageSync("chatToken",data.token);
uni.navigateTo({
url: "/pages/users/chat/index?id="+sellerId+"&roomId="+data.roomId
})
}
},
openPage(index,id){
if(index == 1){
uni.navigateTo({
url: "/pages/users/edit/index"
})
}else if(index == 2){
uni.navigateTo({
url: "/pages/users/personal/index"
})
}else if(index == 3){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
this.toSign();
}else if(index == 4){
uni.navigateTo({
url: "/pages/users/center/index"
})
}else if(index == 5){
uni.navigateTo({
url: "/pages/xiaoxi/haoyou"
})
}else if(index == 6){
uni.navigateTo({
url: "/pages/xiaoxi/guanzhu"
})
}else if(index == 7){
uni.navigateTo({
url: "/pages/xiaoxi/fensi"
})
}else if(index == 8){
uni.navigateTo({
url: "/pages/xiaoxi/fangke"
})
}else if(index == 9){
uni.navigateTo({
url: "/pages/users/wallet/index"
})
}else if(index == 10){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
uni.navigateTo({
url: "/pages/users/recharge/index"
})
}else if(index == 11){
uni.navigateTo({
url: "/pages/users/order/index?type="+id
})
}else if(index == 12){
uni.navigateTo({
url: "/pages/users/order/peiwan?type="+id
})
}else if(index == 13){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
uni.navigateTo({
url: "/pages/users/meiyan/index"
})
}else if(index == 14){
uni.navigateTo({
url: "/pages/users/renzheng/index"
})
}else if(index == 15){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
uni.navigateTo({
url: "/pages/peiwan/apply"
})
}else if(index == 16){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
uni.navigateTo({
url: "/pages/users/task/index"
})
}else if(index == 17){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
this.info.id = this.userInfo.id
this.info.invitationCode = this.userInfo.invitationCode
this.info.imageUrl = this.userInfo.faceImage
this.isShare = true;
}else if(index == 18){
uni.navigateTo({
url: "/pages/users/team/index"
})
}else if(index == 19){
uni.navigateTo({
url: "/pages/users/site/index"
})
}else if(index == 20){
uni.navigateTo({
url: "/pages/users/help/index"
})
}else if(index == 21){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
uni.navigateTo({
url: "/pages/users/chengshi/index"
})
}else if(index == 22){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
uni.navigateTo({
url: "/pages/users/feedback/add"
})
}else if(index == 23){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
this.getConfigData();
}
},
//签到
async toSign() {
const { code, data , msg } = await this.$api.sign({userId: uni.getStorageSync("userInfo").id});
if(code == 200){
uni.showToast({
title: data,
position: "bottom",
icon: "none",
})
this.getUserInfo();
}else{
uni.showToast({
title: msg,
position: "bottom",
icon: "none",
})
}
},
//查询个人信息
async getUserInfo() {
const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
if(code == 200){
this.userInfo = data;
this.qrcode = createQrCodeImg(this.$userShareUrl+this.userInfo.invitationCode, { 'size': 500 });
uni.setStorageSync("userInfo",data);
}else{
uni.showToast({
title: msg,
position: "bottom",
icon: "none",
})
}
},
}
}
</script>
<style scoped lang="scss">
.user{
background: url(https://api.lyiyuan.cn/profile/upload/static/user-bg.png) center top no-repeat;
background-size: 100% auto;
overflow: hidden;
padding-bottom: 30rpx;
.invite{
width: 100%;
height: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 12;
background-color: rgba(0, 0, 0, 0.6);
.body{
width: 680rpx;
height: 1200rpx;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
margin-left: -340rpx;
margin-top: -600rpx;
}
.btns{
text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30rpx;
.cancle{
width: 300rpx;
height: 90rpx;
background: #7B7B7B;
border-radius: 90rpx;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
line-height: 90rpx;
}
.sure{
width: 300rpx;
height: 90rpx;
background: linear-gradient(0deg, #000000, #3D3B38);
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
border-radius: 90rpx;
font-size: 30rpx;
color: #FFFFFF;
line-height: 90rpx;
}
}
.poster{
width: 100%;
height: 980rpx;
background: #FFFFFF;
border-radius: 20rpx;
text-align: center;
}
.content{
width: 100%;
height: 980rpx;
background: #FFFFFF;
border-radius: 20rpx;
text-align: center;
font-weight: 500;
font-size: 30rpx;
color: #333333;
padding-top: 50rpx;
.avatar{
width: 160rpx;
height: 160rpx;
display: block;
margin: 0 auto;
border-radius: 50%;
}
.name{
font-weight: 500;
font-size: 30rpx;
color: #333333;
margin-top: 30rpx;
}
.code{
width: 250rpx;
height: 250rpx;
margin: 0 auto;
margin-top: 40rpx;
image{
width: 100%;
height: 100%;
}
}
.txt{
width: 435rpx;
height: 117rpx;
display: block;
margin: 0 auto;
margin-top: 70rpx;
}
.txt1{
font-weight: 500;
font-size: 28rpx;
color: #999999;
margin-top: 10rpx;
}
.id{
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-top: 20rpx;
}
.zw{
width: 76rpx;
height: 76rpx;
margin: 0 auto;
margin-top: 40rpx;
}
}
}
&-navbar{
image{
width: 45rpx;
height: 45rpx;
margin-right: 30rpx;
}
}
&-info{
padding: 0 25rpx;
overflow: hidden;
.d{
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
.item{
width: 340rpx;
height: 120rpx;
background: #F9F4D8;
border-radius: 20rpx;
&:first-child{
background: #FFEADF;
}
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 32rpx;
color: #222222;
image{
width: 70rpx;
height: 70rpx;
margin-right: 20rpx;
}
}
}
.c{
width: 100%;
height: 185rpx;
background: url(@/static/vipcardbg.png) center top no-repeat;
background-size: cover;
margin-top: 20rpx;
.dt{
font-weight: 500;
font-size: 22rpx;
color: #5B3216;
line-height: 50rpx;
padding: 0 20rpx;
text{
margin-left: 30rpx;
color: #E8BE7F;
}
}
.dd{
display: flex;
justify-content: center;
align-items: center;
margin-top: 25rpx;
.item{
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-weight: 500;
font-size: 32rpx;
color: #E8BE7F;
text{
display: block;
font-weight: 500;
font-size: 24rpx;
color: #E8BE7F;
margin-top: 10rpx;
}
}
image{
width: 70rpx;
height: 70rpx;
margin-right: 20rpx;
}
}
}
.b{
display: flex;
align-items: center;
margin-top: 30rpx;
overflow: hidden;
justify-content: space-between;
.li{
width: 120rpx;
text-align: center;
font-weight: bold;
font-size: 36rpx;
color: #222222;
text{
display: block;
font-weight: 500;
font-size: 24rpx;
color: #666666;
}
}
}
.a{
display: flex;
align-items: flex-start;
.pic{
width: 110rpx;
height: 110rpx;
margin-right: 20rpx;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.sign{
width: 100rpx;
line-height: 50rpx;
background: #000000;
border-radius: 50rpx;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
margin-top: 20rpx;
}
.info{
flex: 1;
margin-top: 20rpx;
.name{
font-weight: 500;
font-size: 34rpx;
color: #222222;
display: flex;
align-items: center;
.vip{
width: 97rpx;
height: 42rpx;
line-height: 42rpx;
margin-left: 10rpx;
background: url(@/static/vipbg.png) center top no-repeat;
background-size: contain;
font-weight: 500;
font-size: 20rpx;
color: #E4C0A3;
padding-left: 45rpx;
box-sizing: border-box;
}
.status{
width: 100rpx;
line-height: 30rpx;
background: #CDF1D1;
border-radius: 30rpx;
text-align: center;
font-weight: 500;
font-size: 20rpx;
color: #27A93A;
margin-left: 15rpx;
display: flex;
align-items: center;
justify-content: center;
text{
display: block;
width: 10rpx;
height: 10rpx;
background-color: #27A93A;
border-radius: 50%;
margin-right: 10rpx;
}
}
}
.id{
font-weight: 500;
font-size: 24rpx;
color: #999999;
margin-top: 15rpx;
}
}
}
}
&-menu{
width: 700rpx;
background: #FFFFFF;
box-sizing: border-box;
border-radius: 20rpx;
margin: 0 auto;
margin-top: 20rpx;
.title{
border-bottom: 1px dashed #EAEAEA;
height: 75rpx;
display: flex;
padding: 0 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 30rpx;
color: #333333;
.more{
font-size: 24rpx;
color: #999999;
display: flex;
align-items: center;
image{
width: 30rpx;
height: 30rpx;
margin-left: 5rpx;
}
}
}
.content{
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 20rpx;
.item{
width: 20%;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #333333;
position: relative;
margin-top: 20rpx;
image{
width: 56rpx;
height: 56rpx;
display: block;
margin: 0 auto 10rpx;
}
.num{
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
background: #FC2C2C;
border-radius: 50%;
font-weight: 500;
font-size: 18rpx;
color: #FFFFFF;
text-align: center;
position: absolute;
right: 30rpx;
top: -10rpx;
z-index: 2;
}
}
}
}
&-menu1{
width: 700rpx;
background: #FFFFFF;
box-sizing: border-box;
border-radius: 20rpx;
margin: 0 auto;
margin-top: 20rpx;
.title{
height: 75rpx;
display: flex;
padding: 0 20rpx;
box-sizing: border-box;
font-weight: 500;
font-size: 30rpx;
color: #333333;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
.more{
font-size: 24rpx;
color: #999999;
display: flex;
align-items: center;
image{
width: 30rpx;
height: 30rpx;
margin-left: 5rpx;
}
}
}
.content{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
padding-bottom: 20rpx;
.item{
width: 25%;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #333333;
position: relative;
margin-top: 20rpx;
image{
width: 56rpx;
height: 56rpx;
display: block;
margin: 0 auto 10rpx;
}
.num{
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
background: #FC2C2C;
border-radius: 50%;
font-weight: 500;
font-size: 18rpx;
color: #FFFFFF;
text-align: center;
position: absolute;
right: 40rpx;
top: -10rpx;
z-index: 2;
}
.status{
width: 66rpx;
line-height: 26rpx;
background: #FFE7E6;
border-radius: 4px;
font-weight: 500;
font-size: 18rpx;
color: #F82C20;
text-align: center;
position: absolute;
right: 0;
top: -10rpx;
z-index: 2;
}
}
}
}
}
</style>