项目初始化
This commit is contained in:
jerry
356
components/search-modal/search-modal.vue
Normal file
356
components/search-modal/search-modal.vue
Normal file
@@ -0,0 +1,356 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user