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>
|