连云港陪玩陪聊
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/index/search.vue

413 lines
9.0 KiB

3 months ago
<template>
<view class="search">
<view class="search-hd">
<view class="a">
<image src="@/static/search.png"></image>
2 months ago
<input type="search" v-model="nickname" placeholder="请输入名称搜索" />
<view class="btn" v-if="type==1" @click="customerRecommendList()">搜索</view>
<view class="btn" v-else @click="customerRecommendList()">搜索</view>
3 months ago
</view>
<view class="b" @click="openPage(1)">
<image src="@/static/filter.png"></image>
</view>
</view>
<view class="search-bd">
2 months ago
<view class="item" v-for="(a,i) in commentList" :key="i">
<view class="pic" @click="openPage(4,a.id)">
<image :src="a.faceImage?a.faceImage:a.img"></image>
3 months ago
</view>
2 months ago
<view class="info" @click="openPage(4,a.id)">
<view class="name">{{a.nickname}}<view class="vip" v-if="a.memberflag>=1">VIP{{a.memberflag}}</view></view>
<view class="desc">{{a.age}}/{{a.height}}cm</view>
3 months ago
</view>
2 months ago
<view class="chat" v-if="type == 1" @click="openPage(5,a)">
3 months ago
<image src="@/static/xin.png"></image>
2 months ago
搭讪
</view>
2 months ago
<view class="chat" v-else @click="openPage(6,a)">
2 months ago
<image src="@/static/xin.png"></image>
约玩
3 months ago
</view>
</view>
2 months ago
<view class="empty" v-if="isShow">
3 months ago
<image src="@/static/empty.png"></image>
<view class="txt">暂无数据</view>
</view>
</view>
<unverified :isPopup="isPopup" />
<insufficient :isCoins="isCoins" />
2 months ago
<dashan :isDashan="isDashan" :info="info"></dashan>
3 months ago
<u-popup v-model="show" mode="center" border-radius="20">
<view class="filter">
<view class="title">筛选</view>
<view class="content">
<view class="a">
<view class="fl">年龄</view>
<view class="fr">18-80</view>
</view>
<view class="b">
<sliderRange
:value="rangeValue"
:min="18"
:max="80"
:step="1"
:bar-height="3"
:block-size="26"
background-color="#EEEEF6"
active-color="#222222"
:decorationVisible="false"
@change="handleRangeChange"
></sliderRange>
</view>
</view>
<view class="btns">
2 months ago
<view class="reset" @click="openPage(2)">重置</view>
<view class="sure" @click="openPage(3)">确定</view>
3 months ago
</view>
</view>
</u-popup>
</view>
</template>
<script>
import sliderRange from '@/components/sliderRange.vue'
export default {
components: {
sliderRange
},
data() {
return {
2 months ago
nickname: "",
isShow: true,
3 months ago
rangeValue: [18,80],
show: false,
isPopup: false,
2 months ago
isDashan: false,
3 months ago
isCoins: false,
2 months ago
type: 1,
startAge: "",
endAge: "",
commentList: [],
2 months ago
info: {},
page: 1,
total: 1
3 months ago
};
},
onLoad(o) {
2 months ago
const that = this;
that.type = o.type
uni.$on("closeSharePopup",res=>{
that.isPopup = false;
that.isDashan= false;
that.isCoins= false;
})
uni.$on("openCoinsPopup",res=>{
that.isCoins = res
})
},
2 months ago
onReachBottom() {
const that = this;
uni.showLoading({
title: "加载中"
})
if(that.commentList.length <= that.total){
that.page ++;
setTimeout(function() {
that.customerRecommendList(1);
}, 1000);
}
},
2 months ago
onShow() {
this.getUserInfo();
3 months ago
},
methods: {
2 months ago
//获取用户信息
async getUserInfo() {
const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
if(code == 200){
this.userInfo = data;
uni.setStorageSync("userInfo",data);
}else{
uni.showToast({
1 month ago
title: msg,
2 months ago
position: "bottom",
icon: "none",
})
}
},
2 months ago
//数组对象去重
arrayUnique (arr, name) {
var hash = {};
return arr.reduce(function (item, next) {
hash[next[name]]
? ""
: (hash[next[name]] = true && item.push(next));
return item;
}, []);
},
2 months ago
//首页附近
async customerRecommendList(){
const { code, data , msg } = await this.$api.customerRecommendList({
userId: uni.getStorageSync("userInfo").id,
nickname: this.nickname,
startAge: this.startAge,
2 months ago
endAge: this.endAge,
page: this.page,
limit: 20,
2 months ago
});
if(code == 200){
2 months ago
this.commentList = this.arrayUnique([...this.commentList,...data.list],'id')
this.total = data.total
this.isShow = data.total==0?true:false
2 months ago
}
},
openPage(index,id){
3 months ago
if(index == 1){
this.show = !this.show
}else if(index == 2){
2 months ago
this.rangeValue = [18,80]
}else if(index == 3){
this.show = false;
this.customerRecommendList();
}else if(index == 4){
uni.navigateTo({
url: "/pages/peiwan/detail?id="+id
})
}else if(index == 5){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
this.info = id
this.info.userid = id.id
this.isDashan = true;
2 months ago
}else if(index == 6){
if(this.userInfo.realnameFlag == 0){
this.isPopup = true
return ;
}
uni.navigateTo({
url: "/pages/peiwan/detail?id="+id
})
3 months ago
}
},
handleRangeChange(e){
2 months ago
this.rangeValue = e
this.startAge = e[0]
this.endAge = e[1]
3 months ago
},
}
}
</script>
<style scoped lang="scss">
.search{
.filter{
width: 630rpx;
height: 500rpx;
.title{
padding: 40rpx 0 30rpx;
font-weight: 500;
font-size: 36rpx;
color: #222222;
text-align: center;
border-bottom: 1px solid #EAEAEA;
}
.content{
padding: 40rpx;
overflow: hidden;
.a{
display: flex;
align-items: center;
font-weight: 500;
font-size: 30rpx;
color: #222222;
justify-content: space-between;
}
.b{
width: 100%;
display: flex;
align-items: center;
font-weight: bold;
font-size: 30rpx;
color: #222222;
justify-content: space-between;
position: relative;
margin-top: 45rpx;
}
}
.btns{
height: 90rpx;
border-top: 1px solid #EAEAEA;
display: flex;
align-items: center;
.reset{
flex: 1;
border-right: 1px solid #EAEAEA;
text-align: center;
font-size: 30rpx;
color: #222222;
font-weight: 500;
text-align: center;
line-height: 90rpx;
}
.sure{
flex: 1;
text-align: center;
font-size: 30rpx;
color: #222222;
font-weight: 500;
text-align: center;
line-height: 90rpx;
}
}
}
&-hd{
width: 100%;
height: 110rpx;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
box-sizing: border-box;
.a{
width: 620rpx;
height: 70rpx;
background: #F6F6F6;
border-radius: 70rpx;
border: 1px solid #EAEAEA;
display: flex;
align-items: center;
padding-left: 30rpx;
box-sizing: border-box;
image{
width: 30rpx;
height: 30rpx;
margin-right: 14rpx;
}
input{
height: 50rpx;
line-height: 50rpx;
font-weight: 500;
font-size: 24rpx;
color: #212121;
flex: 1;
}
.btn{
width: 100rpx;
line-height: 60rpx;
background: linear-gradient(0deg, #000000, #3D3B38);
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
border-radius: 60rpx;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
}
}
.b{
flex: 1;
text-align: center;
image{
width: 44rpx;
height: 44rpx;
}
}
}
&-bd{
padding: 0 25rpx 25rpx;
overflow: hidden;
.empty{
padding: 150rpx 0;
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #222222;
image{
display: block;
width: 460rpx;
height: 400rpx;
margin: 0 auto;
}
}
.item{
width: 100%;
height: 200rpx;
background: #FFFFFF;
box-shadow: 0px 4rpx 10rpx 0px rgba(0,0,0,0.06);
border-radius: 20rpx;
padding: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
.pic{
width: 140rpx;
height: 140rpx;
border-radius: 10rpx;
overflow: hidden;
margin-right: 20rpx;
image{
width: 100%;
height: 100%;
}
}
.info{
flex: 1;
.name{
font-weight: 500;
font-size: 32rpx;
color: #222222;
display: flex;
align-items: center;
.vip{
width: 60rpx;
line-height: 32rpx;
background: url(@/static/vip-bg.png) center top no-repeat;
background-size: contain;
text-align: center;
font-weight: 500;
font-size: 20rpx;
color: #FFFFFF;
overflow: hidden;
margin-left: 20rpx;
}
}
.desc{
width: 180rpx;
line-height: 40rpx;
background: #F2F2F2;
border-radius: 40rpx;
font-weight: 500;
font-size: 24rpx;
color: #000000;
text-align: center;
margin-top: 20rpx;
}
}
.chat{
width: 150rpx;
height: 90rpx;
background: linear-gradient(0deg, #000000, #3D3B38);
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
border-radius: 90rpx;
margin-left: 20rpx;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
image{
width: 65rpx;
height: 32rpx;
display: block;
margin: 15rpx auto 5rpx;
}
}
}
}
}
</style>