357 lines
6.7 KiB
Vue
357 lines
6.7 KiB
Vue
|
<template>
|
|||
|
|
<su-popup
|
|||
|
|
:show="modal.search"
|
|||
|
|
backgroundColor="#fff"
|
|||
|
|
round="5"
|
|||
|
|
:showClose="false"
|
|||
|
|
:isMaskClick="true"
|
|||
|
|
@close="closeModal"
|
|||
|
|
>
|
|||
|
|
<view class="s-form">
|
|||
|
|
<view class="s-title">筛选</view>
|
|||
|
|
<view class="s-box">
|
|||
|
|
<view class="s-label">年龄</view>
|
|||
|
|
<view class="age-box">
|
|||
|
|
<view class="s-tag" @click="ageChange(aindex)" :class="ageIndex == aindex ? 'active' : ''" v-for="(age, aindex) in ageList" :key="aindex">{{age.text}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="s-box">
|
|||
|
|
<view class="s-label">性别</view>
|
|||
|
|
<view class="age-box">
|
|||
|
|
<view class="s-tag" @click="sexChange(index)" :class="sexIndex == index ? 'active' : ''" v-for="(sex, index) in sexList" :key="index">{{sex.text}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="s-box">
|
|||
|
|
<view class="s-label">是否同城（会员特权）</view>
|
|||
|
|
<view class="age-box">
|
|||
|
|
<view class="s-tag" @click="cityChange(cindex)" :class="cityIndex == cindex ? 'active' : ''" v-for="(city, cindex) in cityList" :key="cindex">{{city.text}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="s-box">
|
|||
|
|
<view class="s-label">城市（会员特权）</view>
|
|||
|
|
<view class="age-box">
|
|||
|
|
<view class="s-tag" @click="query.city = ''">全部</view>
|
|||
|
|
<view class="s-tag" @click="cityShow = true" v-if="query.city">{{query.city}}</view>
|
|||
|
|
<view class="s-tag" @click="cityShow = true" v-else>切换城市</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="s-box">
|
|||
|
|
<view class="s-label">距离</view>
|
|||
|
|
<view class="age-box">
|
|||
|
|
<view class="s-tag" @click="miChange(mindex)" :class="miIndex == mindex ? 'active' : ''" v-for="(mi, mindex) in miList" :key="mindex">{{mi.text}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="btn-box" :class="(ageIndex < 0 && sexIndex < 0 && miIndex < 0) ? 'btn-disabled' : ''" @click="ok">确定</view>
|
|||
|
|
</view>
|
|||
|
|
</su-popup>
|
|||
|
|
|
|||
|
|
<su-region-picker :show="cityShow" @cancel="cityShow = false" @confirm="cityOk" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import sheep from '@/sheep';
|
|||
|
|
import $store from '@/sheep/store';
|
|||
|
|
export default {
|
|||
|
|
emits: ['query'],
|
|||
|
|
components: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
min: 18,
|
|||
|
|
max: 18,
|
|||
|
|
ageIndex: 0,
|
|||
|
|
sexIndex: 0,
|
|||
|
|
cityIndex: 0,
|
|||
|
|
miIndex: -1,
|
|||
|
|
ageList: [
|
|||
|
|
{
|
|||
|
|
text: '全部',
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '18~23',
|
|||
|
|
min: 18,
|
|||
|
|
max: 23,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '23~28',
|
|||
|
|
min: 23,
|
|||
|
|
max: 28,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '28~33',
|
|||
|
|
min: 28,
|
|||
|
|
max: 33,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '33~38',
|
|||
|
|
min: 33,
|
|||
|
|
max: 38,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '38~43',
|
|||
|
|
min: 38,
|
|||
|
|
max: 43,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '43~48',
|
|||
|
|
min: 43,
|
|||
|
|
max: 48,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '48~53',
|
|||
|
|
min: 48,
|
|||
|
|
max: 53,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
sexList: [
|
|||
|
|
{
|
|||
|
|
text: '全部',
|
|||
|
|
value: '',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '男',
|
|||
|
|
value: 2,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '女',
|
|||
|
|
value: 1,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
cityList: [
|
|||
|
|
{
|
|||
|
|
text: '否',
|
|||
|
|
value: '1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '是',
|
|||
|
|
value: '0',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
miList: [
|
|||
|
|
{
|
|||
|
|
text: '5KM',
|
|||
|
|
value: 5000,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '10KM',
|
|||
|
|
value: 10000,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '15KM',
|
|||
|
|
value: 15000,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '20KM',
|
|||
|
|
value: 20000,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '25KM',
|
|||
|
|
value: 25000,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '30KM',
|
|||
|
|
value: 30000,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '35KM',
|
|||
|
|
value: 35000,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '40KM',
|
|||
|
|
value: 40000,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
search: false,
|
|||
|
|
|
|||
|
|
cityShow: false,
|
|||
|
|
|
|||
|
|
query: {
|
|||
|
|
maxAge: 35,
|
|||
|
|
minAge: 18,
|
|||
|
|
sex: '',
|
|||
|
|
isCity: 1,
|
|||
|
|
city: '',
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
modal() {
|
|||
|
|
return sheep.$store('modal');
|
|||
|
|
},
|
|||
|
|
userInfo: {
|
|||
|
|
get() {
|
|||
|
|
return sheep.$store('user').userInfo;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
closeModal() {
|
|||
|
|
$store('modal').$patch((state) => {
|
|||
|
|
state.search = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
ageChange(i) {
|
|||
|
|
this.ageIndex = i;
|
|||
|
|
},
|
|||
|
|
sexChange(i) {
|
|||
|
|
this.sexIndex = i;
|
|||
|
|
},
|
|||
|
|
cityChange(i) {
|
|||
|
|
this.cityIndex = i;
|
|||
|
|
},
|
|||
|
|
miChange(i) {
|
|||
|
|
this.miIndex = i;
|
|||
|
|
},
|
|||
|
|
ok() {
|
|||
|
|
if(this.ageIndex < 0 && this.sexIndex < 0 && this.miIndex < 0){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(this.ageIndex > -1){
|
|||
|
|
this.query.maxAge = this.ageList[this.ageIndex].max;
|
|||
|
|
this.query.minAge = this.ageList[this.ageIndex].min;
|
|||
|
|
}
|
|||
|
|
if(this.sexIndex > -1){
|
|||
|
|
this.query.sex = this.sexList[this.sexIndex].value;
|
|||
|
|
}
|
|||
|
|
if(this.cityIndex > -1){
|
|||
|
|
this.query.isCity = this.cityList[this.cityIndex].value;
|
|||
|
|
}
|
|||
|
|
this.$emit('query', this.query);
|
|||
|
|
|
|||
|
|
this.closeModal();
|
|||
|
|
},
|
|||
|
|
handerChooseLocation () {
|
|||
|
|
uni.chooseLocation({
|
|||
|
|
success: (res) => {
|
|||
|
|
this.updateLocation(res.latitude, res.longitude);
|
|||
|
|
},
|
|||
|
|
fail: function (err) {
|
|||
|
|
console.log('取消按钮', err)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
doCity() {
|
|||
|
|
this.$u.route({
|
|||
|
|
url: '/pages/index/user/city',
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
updateLocation(lat,lng) {
|
|||
|
|
this.$u.put('/system/user/profile',{
|
|||
|
|
lat: lat,
|
|||
|
|
lon: lng,
|
|||
|
|
}).then(res => {
|
|||
|
|
this.doCity();
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
more() {
|
|||
|
|
this.$u.route({
|
|||
|
|
url: 'pages/index/user/menu',
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
open() {
|
|||
|
|
this.search = true;
|
|||
|
|
},
|
|||
|
|
cancel() {
|
|||
|
|
this.search = false;
|
|||
|
|
},
|
|||
|
|
minEnd() {
|
|||
|
|
if(this.max < this.min){
|
|||
|
|
this.max = this.min;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
maxEnd() {
|
|||
|
|
if(this.max < this.min){
|
|||
|
|
this.min = this.max;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
cityOk(e) {
|
|||
|
|
this.query.city = e.city_name;
|
|||
|
|
this.cityShow = false;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.s-form {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
.s-title {
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-weight: bold;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.s-label {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
.s-age {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 30px 0;
|
|||
|
|
}
|
|||
|
|
.s-slider {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.btn-box {
|
|||
|
|
background-color: #283242;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.sex-btn {
|
|||
|
|
background-color: #2979ff;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 3px 10px;
|
|||
|
|
color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
.more {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
background-color: #19be6b;
|
|||
|
|
}
|
|||
|
|
.s-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.age-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.s-tag {
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 40px;
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
height: 25px;
|
|||
|
|
width: 60px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.active {
|
|||
|
|
background-color: #283242;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1px solid #283242;
|
|||
|
|
}
|
|||
|
|
.btn-disabled {
|
|||
|
|
background-color: #ddd;
|
|||
|
|
}
|
|||
|
|
</style>
|