|
|
|
@ -4,102 +4,190 @@ |
|
|
|
|
<u-navbar :title="title" back-icon-color="#ffffff" title-color="#ffffff" :background="background"></u-navbar> |
|
|
|
|
</view> |
|
|
|
|
<view class="tongcheng-content"> |
|
|
|
|
<view class="title" v-if="isSucess == false">正在寻找新朋友...</view> |
|
|
|
|
<view class="desc" v-if="isSucess == false">当前用户过多,请耐心等待</view> |
|
|
|
|
<view class="desc1" v-else>{{isJieshou?'':(isSucess?'你有一条新的缘分!':'匹配成功,马上开始这段缘分吧!')}}</view> |
|
|
|
|
<template v-if="isJieshou == false"> |
|
|
|
|
<view class="dian" v-if="isSucess == false"> |
|
|
|
|
<view class="user"> |
|
|
|
|
<view class="item"> |
|
|
|
|
<image class="avatar" src="@/static/nv.png"></image> |
|
|
|
|
<view class="txt">空白空白1</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="items"> |
|
|
|
|
<image src="@/static/yuyin-xin2.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="item"> |
|
|
|
|
<view class="pic"> |
|
|
|
|
<image class="avatar1" src="@/static/nan.png"></image> |
|
|
|
|
<image class="avatar2" src="@/static/nan.png"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="title" v-if="isSucess == 1">正在寻找新朋友...</view> |
|
|
|
|
<view class="desc" v-if="isSucess == 1">当前用户过多,请耐心等待</view> |
|
|
|
|
<view class="desc1" v-else>{{isSucess == 1?'你有一条新的缘分!':'匹配成功,马上开始这段缘分吧!'}}</view> |
|
|
|
|
<view class="dian" v-if="isSucess == 1"> |
|
|
|
|
<view class="user"> |
|
|
|
|
<view class="item"> |
|
|
|
|
<image class="avatar" :src="userInfo.faceImage?userInfo.faceImage:userInfo.img"></image> |
|
|
|
|
<view class="txt">{{userInfo.nickname}}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="dian-on" v-else> |
|
|
|
|
<view class="info"> |
|
|
|
|
<image src="@/static/nan.png"></image> |
|
|
|
|
<view class="name">张美丽</view> |
|
|
|
|
<view class="btn" v-if="isJieshou">+关注</view> |
|
|
|
|
<view class="txt">27岁/165cm</view> |
|
|
|
|
<view class="items"> |
|
|
|
|
<image src="@/static/yuyin-xin2.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="tag" v-if="isSucess == true"> |
|
|
|
|
<view class="titles">个性签名:</view> |
|
|
|
|
<view class="descs"> |
|
|
|
|
<text>们都会走上一条叫做青春的路,反复并疼痛地成长着。\n曾经的旧时光,感动过你我。\n在黎明来临的时刻,我选择了将你遗忘。\n思绪的风引起一阵阵叹息,成了来自我心的绝唱。\n用一季的花开季节,见证你我的生命轮回。</text> |
|
|
|
|
<view class="item"> |
|
|
|
|
<view class="pic"> |
|
|
|
|
<image class="avatar1" src="@/static/nan.png"></image> |
|
|
|
|
<image class="avatar2" src="@/static/nv.png"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
</view> |
|
|
|
|
<view class="dian-on" v-if="isSucess == 2"> |
|
|
|
|
<view class="info"> |
|
|
|
|
<image :src="info.faceImage?info.faceImage:info.img"></image> |
|
|
|
|
<view class="name">{{info.nickname}}</view> |
|
|
|
|
<view class="txt">{{info.age}}/{{info.height}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="tag"> |
|
|
|
|
<view class="titles">个性签名:</view> |
|
|
|
|
<view class="descs"> |
|
|
|
|
<text>{{info.declaration}}</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="tongcheng-end" v-if="isSucess == false"> |
|
|
|
|
<view class="tongcheng-end" v-if="isSucess == 1"> |
|
|
|
|
<view class="send">茫茫人海,今天和你相遇</view> |
|
|
|
|
<view class="todo"> |
|
|
|
|
<view class="todo" @click="toBack()"> |
|
|
|
|
<image src="@/static/yuyin-cha.png"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<template v-else> |
|
|
|
|
<view class="tongcheng-start" v-if="isJieshou"> |
|
|
|
|
<view class="item" @click="toggleMenu(1)"> |
|
|
|
|
<image src="@/static/yuyin-01.png" v-if="isMakefeng"></image><image v-else src="@/static/yuyin-01-on.png"></image>麦克风{{isMakefeng?'开启':'已关'}} |
|
|
|
|
</view> |
|
|
|
|
<view class="item" @click="toggleMenu(2)"> |
|
|
|
|
<image src="@/static/yuyin-03.png" v-if="isYangshengqi"></image><image v-else src="@/static/yuyin-03-on.png"></image>扬声器{{isYangshengqi?'开启':'已关'}} |
|
|
|
|
</view> |
|
|
|
|
<view class="item" @click="toggleMenu(6)"> |
|
|
|
|
<image src="@/static/yuyin-04.png" v-if="isShexiangtou"></image><image v-else src="@/static/yuyin-04-on.png"></image>摄像头{{isShexiangtou?'开启':'已关'}} |
|
|
|
|
</view> |
|
|
|
|
<view class="item"></view> |
|
|
|
|
<view class="items"> |
|
|
|
|
<image @click="toggleMenu(4)" src="@/static/yuyin-02.png"></image> |
|
|
|
|
<image @click="toggleMenu(5)" class="off" src="@/static/yuyin-off.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="item"></view> |
|
|
|
|
<!-- <view class="tongcheng-start"> --> |
|
|
|
|
<!-- <view class="item" @click="toggleMenu(1)"> |
|
|
|
|
<image src="@/static/yuyin-01.png" v-if="isMakefeng"></image><image v-else src="@/static/yuyin-01-on.png"></image>麦克风{{isMakefeng?'开启':'已关'}} |
|
|
|
|
</view> |
|
|
|
|
<view class="tongcheng-start" v-else> |
|
|
|
|
<view class="item" @click="toggleMenu(3)"> |
|
|
|
|
<image src="@/static/yuyin-02.png"></image>挂断 |
|
|
|
|
</view> |
|
|
|
|
<view class="item" @click="toggleMenu(3)"> |
|
|
|
|
<image src="@/static/yuyin-05.png"></image>接受 |
|
|
|
|
</view> |
|
|
|
|
<view class="item" @click="toggleMenu(2)"> |
|
|
|
|
<image src="@/static/yuyin-03.png" v-if="isYangshengqi"></image><image v-else src="@/static/yuyin-03-on.png"></image>扬声器{{isYangshengqi?'开启':'已关'}} |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
<view class="tongcheng-video"> |
|
|
|
|
<view class="item" @click="toggleMenu(6)"> |
|
|
|
|
<image src="@/static/yuyin-04.png" v-if="isShexiangtou"></image><image v-else src="@/static/yuyin-04-on.png"></image>摄像头{{isShexiangtou?'开启':'已关'}} |
|
|
|
|
</view> --> |
|
|
|
|
<!-- <view class="item"></view> --> |
|
|
|
|
<!-- <view class="items"> |
|
|
|
|
<image @click="toggleMenu(4)" src="@/static/yuyin-02.png"></image> |
|
|
|
|
<image @click="toggleMenu(5)" class="off" src="@/static/yuyin-off.png"></image> |
|
|
|
|
</view> --> |
|
|
|
|
<!-- <view class="item"></view> --> |
|
|
|
|
<!-- </view> --> |
|
|
|
|
<view class="tongcheng-start" v-if="isSucess == 2"> |
|
|
|
|
<view class="item" @click="toPage(1)"> |
|
|
|
|
<image src="@/static/yuyin-02.png"></image>换一个 |
|
|
|
|
</view> |
|
|
|
|
<view class="item"> |
|
|
|
|
<image src="@/static/yuyin-05.png"></image>{{isSucess == 2?'等待中':'立即进入'}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- <view class="tongcheng-video"> |
|
|
|
|
<view class="other"></view> |
|
|
|
|
<view class="content"></view> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
let timer = null; |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
isJieshou: true, |
|
|
|
|
info: {}, |
|
|
|
|
count: 10, |
|
|
|
|
userInfo: {}, |
|
|
|
|
isJieshou: false, |
|
|
|
|
title: "视频速配", |
|
|
|
|
isShexiangtou: true, |
|
|
|
|
isMakefeng: true, |
|
|
|
|
isYangshengqi: true, |
|
|
|
|
isSucess: true, |
|
|
|
|
isSucess: 1, |
|
|
|
|
background: { |
|
|
|
|
// 导航栏背景图 |
|
|
|
|
background: 'url(@/static/yuyin-bg.png) center top no-repeat', |
|
|
|
|
background: 'url(https://api.lyiyuan.cn/profile/upload/static/yuyin-bg.png) center top no-repeat', |
|
|
|
|
// 还可以设置背景图size属性 |
|
|
|
|
backgroundSize: '100 auto', |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
onLoad() { |
|
|
|
|
this.userInfo = uni.getStorageSync("userInfo"); |
|
|
|
|
this.count = Math.floor(Math.random() * (10 - 1 + 1)) + 1; |
|
|
|
|
this.toPage(1) |
|
|
|
|
}, |
|
|
|
|
onReady() { |
|
|
|
|
this.watchSocket(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
watchSocket() { |
|
|
|
|
const that = this; |
|
|
|
|
uni.onSocketMessage(function (res) { |
|
|
|
|
const obj = res.data?JSON.parse(res.data):{} |
|
|
|
|
console.log("watchSocket",obj) |
|
|
|
|
if(obj.topic == 'message'){ |
|
|
|
|
if(obj.type>= 8){ |
|
|
|
|
if(uni.getStorageSync("userInfo").id == obj.sellerId){ |
|
|
|
|
if(obj.type == 10){ |
|
|
|
|
that.toPage(2,obj.userId); |
|
|
|
|
}else if(obj.type == 11){ |
|
|
|
|
that.isSucess = 1 |
|
|
|
|
that.toPage(1); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}else{ |
|
|
|
|
console.log("挂断了") |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
toBack() { |
|
|
|
|
clearInterval(timer); |
|
|
|
|
uni.navigateBack({ |
|
|
|
|
delta: 1 |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
toPage(index,id){ |
|
|
|
|
const that = this; |
|
|
|
|
if(index == 1){ |
|
|
|
|
that.isSucess = 1; |
|
|
|
|
clearInterval(timer); |
|
|
|
|
timer = setInterval(()=>{ |
|
|
|
|
if(that.count == 0){ |
|
|
|
|
clearInterval(timer); |
|
|
|
|
that.count = Math.floor(Math.random() * (10 - 1 + 1)) + 1; |
|
|
|
|
that.userSpeedDating(); |
|
|
|
|
}else{ |
|
|
|
|
that.count -- |
|
|
|
|
} |
|
|
|
|
},1000) |
|
|
|
|
}else if(index == 2){ |
|
|
|
|
this.toChat(id); |
|
|
|
|
}else if(index == 3){ |
|
|
|
|
that.isSucess = 1; |
|
|
|
|
that.count = Math.floor(Math.random() * (10 - 1 + 1)) + 1; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//去视频聊天 |
|
|
|
|
async toChat(id) { |
|
|
|
|
console.log("toChat",uni.getStorageSync("userInfo").id , id) |
|
|
|
|
uni.redirectTo({ |
|
|
|
|
url: "/pages/pipei/shipin/detail?type=2&id="+id |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
async userSpeedDating() { |
|
|
|
|
const { code, data, msg } = await this.$api.userSpeedDating({ |
|
|
|
|
userId: uni.getStorageSync("userInfo").id, |
|
|
|
|
type: 1, |
|
|
|
|
lat: uni.getStorageSync("jingweiInfo").latitude, |
|
|
|
|
lon: uni.getStorageSync("jingweiInfo").longitude, |
|
|
|
|
city: uni.getStorageSync("jingweiInfo").new_city?uni.getStorageSync("jingweiInfo").new_city:uni.getStorageSync("jingweiInfo").city, |
|
|
|
|
}) |
|
|
|
|
if(code == 200){ |
|
|
|
|
this.isSucess = 2; |
|
|
|
|
this.info = data |
|
|
|
|
uni.sendSocketMessage({data:JSON.stringify({ |
|
|
|
|
"userId": uni.getStorageSync("userInfo").id, |
|
|
|
|
sellerId: data.id, |
|
|
|
|
type: 9, |
|
|
|
|
"topic":"message" |
|
|
|
|
})}) |
|
|
|
|
}else{ |
|
|
|
|
this.isSucess = 1; |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: msg, |
|
|
|
|
position: "bottom", |
|
|
|
|
icon: "none", |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
toggleMenu(index){ |
|
|
|
|
if(index == 1){ |
|
|
|
|
this.isMakefeng = !this.isMakefeng |
|
|
|
@ -122,7 +210,7 @@ |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.tongcheng{ |
|
|
|
|
background: #0d0b15 url(@/static/yuyin-bg.png) center top no-repeat; |
|
|
|
|
background: #0d0b15 url(https://api.lyiyuan.cn/profile/upload/static/yuyin-bg.png) center top no-repeat; |
|
|
|
|
background-size: 100% auto; |
|
|
|
|
overflow: hidden; |
|
|
|
|
min-height: 100vh; |
|
|
|
@ -336,6 +424,8 @@ |
|
|
|
|
border-radius: 50%; |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
} |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
.items{ |
|
|
|
|
width: 33.3%; |
|
|
|
|