Commit b2bb1b28 authored by 罗林杰's avatar 罗林杰

Merge remote-tracking branch 'origin/master'

parents 94192ac5 09a06ec4
...@@ -92,6 +92,20 @@ export const options = { ...@@ -92,6 +92,20 @@ export const options = {
{ label: '拉祜族', value: 54 }, { label: '拉祜族', value: 54 },
{ label: '仫佬', value: 55 } { label: '仫佬', value: 55 }
], ],
height: [
{ label: '不限', value: '不限' },
{ label: '150-160', value: '150-160' },
{ label: '160-170', value: '160-170' },
{ label: '170-180', value: '170-180' },
{ label: '180以上', value: '180以上' }
],
weight: [
{ label: '不限', value: '不限' },
{ label: '30-40', value: '30-40' },
{ label: '50-60', value: '50-60' },
{ label: '70-80', value: '70-80' },
{ label: '80以上', value: '80以上' }
],
residence: [ residence: [
{ {
label: '北京', label: '北京',
...@@ -1852,7 +1866,7 @@ export const options = { ...@@ -1852,7 +1866,7 @@ export const options = {
] ]
} }
// 获取整个options [{label: a,value: b }] // 获取整个options [{label: a,value: b }]
const opList = ['sex', 'education', 'marriage', 'constellation', 'nation', 'residence','realAuthen'] const opList = ['sex', 'education', 'marriage', 'constellation', 'nation', 'residence','realAuthen','height','weight']
export function getOptions(optionName) { export function getOptions(optionName) {
if (!opList.includes(optionName)) { if (!opList.includes(optionName)) {
return [] return []
......
...@@ -294,11 +294,11 @@ ...@@ -294,11 +294,11 @@
] ]
}, },
{ {
"root": "pagespreference", "root": "pagesUser",
"pages": [{ "pages": [{
"path": "preference/preference", "path": "userFilterPage",
"style": { "style": {
"navigationBarTitleText": "推荐设置", "navigationBarTitleText": "筛选设置",
"backgroundColor": "#ffffff", "backgroundColor": "#ffffff",
"backgroundColorTop": "#ffffff", "backgroundColorTop": "#ffffff",
"navigationBarBackgroundColor": "#ffffff" "navigationBarBackgroundColor": "#ffffff"
......
...@@ -4,10 +4,7 @@ ...@@ -4,10 +4,7 @@
<view class="content"> <view class="content">
<!-- 左上角搜索--> <!-- 左上角搜索-->
<u-navbar bgColor="white" :placeholder="true"> <u-navbar bgColor="white" :placeholder="true">
<view class="u-nav-slot" slot="left" @click="screen"> <view class="u-nav-slot" slot="left"></view>
<!-- <image :src="baseUrl+'/index/screen.png'" class="img" mode="aspectFill"></image>-->
<!-- <view class="text">搜索</view>-->
</view>
</u-navbar> </u-navbar>
<view> <view>
...@@ -182,13 +179,6 @@ ...@@ -182,13 +179,6 @@
url: '/pagesUser/userInfo?memberId='+item.businessId url: '/pagesUser/userInfo?memberId='+item.businessId
}) })
}, },
//左上角的搜索
async screen() {
//判断当前是否已登录
uni.navigateTo({
url: '/pagespreference/preference/preference'
});
},
}, },
}; };
</script> </script>
......
<template>
<view class="form">
<view>
<u--form
labelPosition="left"
:model="queryParams"
labelWidth="90"
ref="uForm"
>
<u-form-item
label="性别"
prop="memSexText"
borderBottom
@click="showSex = true; hideKeyboard()"
>
<u--input
v-model="queryParams.memSexText"
disabled
disabledColor="#ffffff"
placeholder="请选择性别"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
<u-form-item
label="身高"
prop="memHeight"
borderBottom
@click="showHeight = true; hideKeyboard()"
>
<u--input
v-model="queryParams.memHeight"
disabled
disabledColor="#ffffff"
placeholder="请选择身高"
border="none"
></u--input>
<span slot="right">cm</span>
</u-form-item>
<u-form-item
label="体重"
prop="memWeight"
borderBottom
@click="showWeight = true; hideKeyboard()"
>
<u--input
v-model="queryParams.memWeight"
disabled
disabledColor="#ffffff"
placeholder="请选择体重"
border="none"
></u--input>
<span slot="right">kg</span>
</u-form-item>
<u-form-item
label="居住地"
prop="memResidence"
borderBottom
@click="showResidence = true; hideKeyboard()"
>
<u--input
v-model="queryParams.memResidence"
disabled
disabledColor="#ffffff"
placeholder="请选择居住地"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
</u--form>
<u-button
type="primary"
text="提交"
customStyle="margin-top: 50px"
@click="submit"
></u-button>
<u-button
type="error"
text="重置"
customStyle="margin-top: 10px;margin-bottom:50px"
@click="reset"
></u-button>
<!-- 性别-->
<u-picker
:show="showSex"
:columns="sexActions"
keyName="label"
@cancel="showSex=false"
@confirm="confirmSex"
></u-picker>
<!-- 身高-->
<u-picker
:show="showHeight"
:columns="heightActions"
keyName="label"
@cancel="showHeight=false"
@confirm="confirmHeight"
></u-picker>
<!-- 体重-->
<u-picker
:show="showWeight"
:columns="weightActions"
keyName="label"
@cancel="showWeight=false"
@confirm="confirmWeight"
></u-picker>
<!-- 居住地-->
<u-picker
:show="showResidence"
:columns="residenceActions"
keyName="label"
@cancel="showResidence=false"
@change="changeResidence"
@confirm="confirmResidence"
></u-picker>
</view>
</view>
</template>
<script>
import UFormItem from "../uni_modules/uview-ui/components/u-form-item/u-form-item";
import {getOptions} from "../common/options";
export default {
components: {UFormItem},
data() {
return {
//数据选项
sexActions:[
getOptions('sex')
],
heightActions:[
getOptions('height')
],
weightActions:[
getOptions('weight')
],
residenceActions: [
getOptions('residence'),
[{
label: '北京',
value: '0101'
}]
],
//选择器显示
showSex: false,
showResidence: false,
showHeight:false,
showWeight:false,
//搜索参数
queryParams: {
memSex: '',//性别
memHeight:'',//身高
memWeight:'',//体重
memResidenceProvince:'',//居住地省份
memResidenceCity:'',//居住城市
},
}
},
methods: {
//性别确认
confirmSex(e){
this.showSex = false
this.queryParams.memSex = e.value[0].value
this.queryParams.memSexText = e.value[0].label
},
//身高确认
confirmHeight(e){
this.showHeight = false
this.queryParams.memHeight = e.value[0].value
this.queryParams.memHeightText = e.value[0].label
},
//体重确认
confirmWeight(e){
this.showWeight = false
this.queryParams.memWeight = e.value[0].value
this.queryParams.memWeightText = e.value[0].label
},
//地址确认
confirmResidence(e){
this.showResidence = false
this.queryParams.memResidence = e.value[0].label + '/' + e.value[1].label
this.queryParams.memResidenceProvince = e.value[0].value
this.queryParams.memResidenceCity = e.value[1].value
},
//地址改变
changeResidence(e) {
// 更新城市列表为当前选中省份的城市列表
this.$set(this.residenceActions, 1, e.value[0].children);
},
//点击提交
submit() {
let pages = getCurrentPages() // 获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
let prevPage = pages[pages.length - 2] //上一页页面实例
uni.navigateBack({
delta:1,
success:() => {
prevPage.$vm.filterSearch(this.queryParams) // 给上一页绑定方法filterSearch
this.queryParams = {}
}
})
},
//点击重置
reset() {
this.queryParams = {
memSex: '',//性别
memHeight:'',//身高
memWeight:'',//体重
memResidenceProvince:'',//居住地省份
memResidenceCity:'',//居住城市
}
},
//阻止键盘
hideKeyboard() {
uni.hideKeyboard()
},
},
}
</script>
<style lang="scss" scoped>
.form{
padding-top: 20rpx;
padding-left: 20rpx;
padding-right: 20rpx;
}
</style>
<template> <template>
<view style="background-color: #F4F5F9;min-height: 100vh;"> <view style="background-color: #F4F5F9;min-height: 100vh;">
<!-- 页头--> <!-- 页头-->
<u-navbar @leftClick="backbar" bgColor="#F4F5F9" title="会员信息"></u-navbar> <u-navbar bgColor="white" :placeholder="true" title="会员信息">
<view class="u-nav-slot" slot="left">
<u-icon name="arrow-left" color="black" size="20" @click="backbar"/>
<view @click="search" style="display: flex;align-items: center;justify-content: center">
<image :src="baseUrl+'/index/screen.png'" class="img" mode="aspectFill"></image>
<view class="text">筛选</view>
</view>
</view>
</u-navbar>
<view class="recommendation" :style="{'top':navHeight+'px'}"> <view class="recommendation" :style="{'top':navHeight+'px'}">
<view v-if="isdata" class="nodatacard"> <view v-if="isdata" class="nodatacard">
<view class="text">暂无数据</view> <view class="text">暂无数据</view>
...@@ -36,6 +44,7 @@ ...@@ -36,6 +44,7 @@
import {userList} from "../api/user"; import {userList} from "../api/user";
import {getCity, getValue} from "../common/options"; import {getCity, getValue} from "../common/options";
import {calculateAge, parseDate} from "../common"; import {calculateAge, parseDate} from "../common";
import {getOssUrl} from "../api/article";
export default { export default {
data() { data() {
return { return {
...@@ -52,9 +61,8 @@ export default { ...@@ -52,9 +61,8 @@ export default {
isdata: false, isdata: false,
//页面数据的数量 //页面数据的数量
num:'', num:'',
//距离表头 //距离表头高度
navHeight:'', navHeight:'',
share: false,
menuButtonInfo: '', menuButtonInfo: '',
}; };
}, },
...@@ -73,44 +81,84 @@ export default { ...@@ -73,44 +81,84 @@ export default {
statusBarHeight statusBarHeight
} = res; } = res;
const margin = top - statusBarHeight const margin = top - statusBarHeight
this.navHeight = (height + statusBarHeight + (margin * 3)) //导航栏总高 this.navHeight = (height + statusBarHeight + (margin * 5)) //导航栏总高
} }
}) })
//获取用户信息 //获取用户信息
this.getUserList() this.getUserList()
}, },
methods: { methods: {
filterSearch(value) {
let minHeight = ''
let maxHeight = ''
let minWeight = ''
let maxWeight = ''
if (value.memHeight != '' && value.memHeight != '不限'){
minHeight = value.memHeight.split('-')[0]
maxHeight = value.memHeight.split('-')[1]
}
if (value.memWeight != '' && value.memWeight != '不限'){
minWeight = value.memWeight.split('-')[0]
maxWeight = value.memWeight.split('-')[1]
}
console.log('======params======', value)
this.queryParam = {
page: 1,
rows: 10,
memSex: value.memSex,
minHeight: minHeight,
maxHeight: maxHeight,
minWeight: minWeight,
maxWeight: maxWeight,
memResidenceProvince: value.memResidenceProvince,
memResidenceCity: value.memResidenceCity
}
this.getUserList()
},
//左上角的搜索
search() {
//判断当前是否已登录
uni.navigateTo({
url: '/pagesUser/userFilterPage'
});
},
//跳转用户详情 //跳转用户详情
gotoDetail(item){ gotoDetail(item){
uni.navigateTo({ uni.navigateTo({
url: '/pagesUser/userInfo?id='+item.userId url: '/pagesUser/userInfo?id='+item.userId
}) })
}, },
//获取用户列表数据
getUserList() { getUserList() {
const query = { userList(this.queryParam).then(res =>{
page: this.queryParam.page,
rows: this.queryParam.rows
}
userList(query).then(res =>{
this.userList = res.data.data this.userList = res.data.data
//遍历this.userList //遍历this.userList
this.userList.forEach(item => { this.userList.forEach(item => {
//处理头像 //处理头像
item.avatarUrl = item.avatarUrl.replace(/\\/g, '/') // 替换 avatarUrl 中的所有 \ 为 / if (item.avatar != null && item.avatar != ''){
getOssUrl(item.avatar).then(res => {
item.avatarUrl = res.data.data
})
}
//处理性别 //处理性别
item.memSex = getValue('sex',item.memSex) if (item.memSex != null && item.memSex != ''){
item.memSex = getValue('sex',item.memSex)
}
//处理年龄 //处理年龄
const birthdayItem = parseDate(item.memBirthday) if (item.memBirthday != null && item.memBirthday != ''){
item.memAge = calculateAge(birthdayItem.year,birthdayItem.month,birthdayItem.day) const birthdayItem = parseDate(item.memBirthday)
item.memAge = calculateAge(birthdayItem.year,birthdayItem.month,birthdayItem.day)
}
//处理地址 //处理地址
item.city = getCity(item.memResidenceProvince,item.memResidenceCity) if (item.memResidenceProvince != null && item.memResidenceProvince != '' && item.memResidenceCity != null && item.memResidenceCity != ''){
item.city = getCity(item.memResidenceProvince,item.memResidenceCity)
}
}); });
}).catch(e => { }).catch(e => {
console.log(e) console.log(e)
}) })
}, },
//返回按钮
backbar() { backbar() {
uni.navigateBack({ uni.navigateBack({
delta: 1, //返回层数,2则上上页 delta: 1, //返回层数,2则上上页
...@@ -121,9 +169,29 @@ export default { ...@@ -121,9 +169,29 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-nav-slot {
display: flex;
align-items: center;
.text {
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
margin-left: 14rpx;
line-height: 44rpx;
}
.img {
width: 22rpx;
height: 28rpx;
margin-left: 32rpx;
}
}
.recommendation { .recommendation {
background-color: #F4F5F9; background-color: #F4F5F9;
position: relative; position: absolute;
padding: 0 34rpx; padding: 0 34rpx;
.nodatacard{ .nodatacard{
height: 100vh; height: 100vh;
......
<template>
<view clipchildren=false>
<!-- <text class="loading" :style="{opacity: lineLeft===0 ? '1' : '0'}">loading...</text> -->
<view class="fj-slider-box" :style="{opacity: lineLeft!==0 ? '1' : '0'}" clipchildren=false>
<!-- <view class="fj-value">
<text class="fj-v-l"
>{{fillMinValue}}</text>
<text class="fj-v-r" >{{fillValue}}</text>
</view> -->
<text class="tip" :style="{left:curValue==100?`${tipLeft-22}px`:`${tipLeft-16}px`,opacity: tipShow ? '1' : '0'}">{{curValue}}</text>
<view class="fj-slider" clipchildren=false>
<view class="fj-line" ref="fj-line"></view>
<view v-if="maxLeft-minLeft>=0" class="fj-line-pull"
:style="{left: `${minLeft + touchWidth/2}px`, width:`${Math.abs(maxLeft - minLeft)}px`}"></view>
<view v-else class="fj-line-pull"
:style="{left: `${minLeft + touchWidth/2- Math.abs(maxLeft - minLeft) }px`, width:`${Math.abs(maxLeft - minLeft)}px`}">
</view>
<view class="" style="width: 100rpx;height: 100rpx;position: absolute;display: flex;justify-content: flex-start;margin-top: -40rpx;
margin-left: -40rpx;"
ref="fjtouchleft" @touchstart="touchstart($event, 'min')" :style="{left:`${minLeft}px`}"
@touchmove="touchmove($event, 'min')" @touchend="touchend($event, 'min')">
<view class="fj-touch-left" style="margin-top: 40rpx;margin-left: 40rpx;margin-bottom: 20px;"> </view>
</view>
<view class="" style="width: 100rpx;height: 100rpx;position: absolute;display: flex;justify-content: flex-start;margin-top: -40rpx;
margin-right: -40rpx;" @touchstart="touchstart($event, 'max')" :style="{left:`${maxLeft-4}px`}"
@touchmove="touchmove($event, 'max')" @touchend="touchend($event, 'max')">
<view class="fj-touch-right"
style="margin-top: 40rpx;margin-right: 40rpx;margin-bottom: 20px;">
</view>
</view>
</view>
</view>
</view>
</template>
<script>
// #ifndef APP-PLUS
const createSelectorQuery = (that) => {
let query = uni.createSelectorQuery().in(that);
// #ifdef MP-ALIPAY
query = my.createSelectorQuery();
// #endif
return query;
}
// #endif
// #ifdef APP-PLUS
const dom = weex.requireModule('dom');
// #endif
export default {
name: 's-region-slider',
props: {
fillValue: {
type: Number,
default: 1000,
},
fillMinValue: {
type: Number,
default: 0,
},
minValue: {
type: Number,
default: 0,
},
maxValue: {
type: Number,
default: 1000,
},
step: {
type: Number,
default: 50,
},
},
watch: {
minValue(newVal, oldVla) {
if (newVal < this.fillMinValue || this.maxValue > this.fillValue) {
console.error(`请在${this.fillMinValue}-${this.fillValue}范围中设置`)
return;
}
this.sMinValue = newVal - this.fillMinValue;
this.showMinNum = newVal;
this.minLeft = this.sMinValue / this.percentage;
},
maxValue(newVal, oldVla) {
if (this.minValue < this.fillMinValue || newVal > this.fillValue) {
console.error(`请在${this.fillMinValue}-${this.fillValue}范围中设置`)
return;
}
this.sMaxValue = newVal - this.fillMinValue;
this.showMaxNum = newVal;
this.maxLeft = this.sMaxValue / this.percentage;
},
fillValue(newVal, oldVla) {
this.sFillValue = this.fillValue;
}
},
data() {
return {
tipShow: false,
tipLeft: 0,
minLeft: 0,
maxLeft: 0,
touchWidth: 30,
lineWidth: 0,
lineLeft: 0,
showMinNum: 0,
showMaxNum: 0,
curValue: 0,
sMinValue: 0,
sMaxValue: 0,
sFillValue: 0,
sFillMinValue: 0,
percentage: 0
};
},
mounted() {
this.$nextTick().then(() => {
this.envir({
classname: '.fj-touch-left',
refname: this.$refs.fjtouchleft,
fn: (ret) => {
this.touchWidth = ret.width;
}
})
this.envir({
classname: '.fj-line',
refname: this.$refs['fj-line'],
fn: (ret) => {
this.lineWidth = ret.width;
this.lineLeft = ret.left; //
this.sMinValue = (this.minValue - this.fillMinValue) > 0 ? this.minValue - this
.fillMinValue : 0;
this.sMaxValue = (this.maxValue - this.fillMinValue) > 0 ? this.maxValue - this
.fillMinValue : 0;
this.sFillValue = (this.fillValue - this.fillMinValue) > 0 ? this.fillValue -
this.fillMinValue : 0;
this.percentage = this.sFillValue / this.lineWidth;
this.minLeft = this.sMinValue / this.percentage;
this.maxLeft = this.sMaxValue / this.percentage;
this.showMaxNum = this.sMaxValue + this.fillMinValue;
this.showMinNum = this.sMinValue + this.fillMinValue;
}
})
})
},
methods: {
envir(opt) {
setTimeout(() => {
// #ifdef APP-PLUS
dom.getComponentRect(opt.refname, ret => {
const option = ret.size
opt.fn({
width: option.width,
height: option.height,
top: option.top,
bottom: option.bottom,
left: option.left,
right: option.right,
})
})
// #endif
// #ifndef APP-PLUS
createSelectorQuery(this).select(opt.classname).boundingClientRect().exec((data) => {
const option = data[0];
opt.fn({
width: option.width,
height: option.height,
top: option.top,
bottom: option.bottom,
left: option.left,
right: option.right,
})
})
// #endif
}, 200)
},
touchstart(e, type) {
this.$emit('down', {
...e,
custom: {
type,
minValue: this.showMinNum,
maxValue: this.showMaxNum
}
})
},
touchmove(e, type) {
// #ifndef APP-PLUS
const disX = e.touches[0].clientX - this.lineLeft
// #endif
// #ifdef APP-PLUS
const disX = e.touches[0].screenX - this.lineLeft
// #endif
if (disX < 0 || disX > this.lineWidth) {
return;
}
if (type === 'min') {
this.minLeft = Math.floor(disX);
if (this.minLeft < 0) {
this.minLeft = 0;
return;
}
if (this.maxLeft > this.lineWidth) {
this.maxLeft = this.lineWidth;
return;
}
//if(this.maxLeft - this.minLeft <= this.touchWidth ) {this.minLeft = this.maxLeft - this.touchWidth; return;}
this.curValue = Math.floor(this.minLeft * this.percentage);
}
if (type === 'max') {
this.maxLeft = Math.ceil(disX);
if (this.minLeft < 0) {
this.minLeft = 0;
return;
}
if (this.maxLeft > this.lineWidth) {
this.maxLeft = this.lineWidth;
return;
}
// if(this.maxLeft - this.minLeft <= this.touchWidth ) {this.maxLeft = this.minLeft + this.touchWidth;return;}
this.curValue = Math.round(this.maxLeft * this.percentage);
}
this.tipShow = true;
this.tipLeft = Math.round((this.curValue) / this.percentage);
this.tipLeft = this.tipLeft >= this.lineWidth ? this.lineWidth : this.tipLeft
this.tipLeft = this.tipLeft <= 0 ? 0 : this.tipLeft
this.curValue = this.curValue + this.fillMinValue;
this.$emit('move', {
...e,
custom: {
type,
minValue: this.showMinNum,
maxValue: this.showMaxNum,
curValue: this.curValue,
}
})
},
touchend(e, type) {
if (type === 'min') {
if (this.step === 1) {
this.sMinValue = this.curValue - this.fillMinValue;
} else {
const stepnum = Math.round((this.minLeft * this.percentage) / this.step);
this.sMinValue = stepnum * this.step;
this.minLeft = this.sMinValue / this.percentage;
}
}
if (type === 'max') {
if (this.step === 1) {
this.sMaxValue = this.curValue - this.fillMinValue;
} else {
const stepnum = Math.round((this.maxLeft * this.percentage) / this.step);
this.sMaxValue = stepnum * this.step;
if (this.sFillValue - this.sMaxValue < this.step) {
this.sMaxValue = this.sFillValue
}
this.maxLeft = this.sMaxValue / this.percentage;
}
}
this.tipShow = false;
if (this.sMinValue <= this.sMaxValue) {
this.showMaxNum = this.sMaxValue + this.fillMinValue;
this.showMinNum = this.sMinValue + this.fillMinValue;
} else {
this.showMaxNum = this.sMinValue + this.fillMinValue;
this.showMinNum = this.sMaxValue + this.fillMinValue;
}
this.$emit('up', {
...e,
custom: {
type,
minValue: this.showMinNum < this.fillMinValue ? this.fillMinValue : this.showMinNum,
maxValue: this.showMaxNum > this.fillValue ? this.fillValue : this.showMaxNum
}
})
},
},
};
</script>
<style scoped>
.fj-slider-box {
font-size: 12px;
position: relative;
}
.loading {
font-size: 12px;
}
.fj-value {
position: relative;
height: 50rpx;width: 686rpx;
display: flex;align-items: center;
}
.fj-v-l {
height: 50rpx;
font-size: 36rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 50rpx;
}
.fj-v-r {
height: 50rpx;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #446CD2;
line-height: 50rpx;
margin-left: 24rpx;
}
.fj-slider {
position: relative;
height: 30px;
}
.fj-touch-left,
.fj-touch-right {
position: absolute;
width: 20rpx;
height: 20rpx;
background: #EBEEF3;
border-radius: 50%;
z-index: 3;
}
.tip {
position: absolute;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
top: -60px;
border-radius: 10px;
z-index: 4;
font-size: 10px;
justify-content: center
}
.fj-line,
.fj-line-pull {
height: 5px;
position: absolute;
top: 3px;
left: 0px;
right: 15px;background: #E6E6E6;
width: 682rpx;
border-radius: 4rpx;
z-index: 1;
}
.fj-line-pull {
z-index: 2;
background: #446CD2;
}
</style>
<template>
<view class="" @touchmove.stop.prevent="() => {}">
<view class="" style="height: 56rpx;"></view>
<view class="" v-if="falg">
<view class="boot">
<view class="xuan">
<view class="div" v-for="(item, index) in list" :key="index" @click="clicks(index)">
<view class="name">{{ item.regionName2 }}</view>
<view class="" v-if="index == 0"><u-icon name="arrow-down" color="#434343" size="16"></u-icon></view>
<view class="" v-else><u-icon name="close" color="#434343" size="16"></u-icon></view>
<image :src="baseUrl+'/common/select.png'" v-if="index == 0" class="img" mode="aspectFill"></image>
</view>
<view class="div" @click="add"><view class="name" style="margin-left: 0rpx;">添加</view></view>
</view>
</view>
<view class="tabs">
<view class="ewrew">
年龄:
<view>{{ minValue }} - {{ maxValue }}</view>
</view>
<s-region-slider
:minValue="minValue"
:maxValue="maxValue"
:fillMinValue="16"
:fillValue="60"
:step="1"
@up="up"
@down="down"
@move="move"
:parentCode="parentCode"
:regionCode="regionCode"
:regionName="regionName"
/>
</view>
</view>
<view class="adding" @click="addcity">确定</view>
<level-linkage ref="levelLinkage" :pickerValueDefault="pickerValueDefault" :allData="treeData" @take="take" themeColor="#007AFF"></level-linkage>
<ELM ref="elm" :msg="tipMsg" :isConfirm="isConfirm" @confirm="confirm"></ELM>
</view>
</template>
<script>
import levelLinkage from '../components/three-level-linkage/linkage.vue';
import sRegionSlider from '../components/s-region-slider/s-region-slider.vue';
import ELM from '@/components/elm-toast/index.vue';
export default {
components: {
sRegionSlider,
levelLinkage,
ELM
},
data() {
return {
//图片路径
baseUrl: this.$IMG_URL,
falg: false,
minValue: 1,
maxValue: 100,
pickerValueDefault: [0, 0],
pickerText: '',
list: [],
parentCode: '',
regionCode: '',
regionName2: '',
tipMsg: '',
isConfirm: false
};
},
onShow() {
this.configInfo();
},
onLoad() {},
methods: {
async configInfo() {
const res = await this.$myRequest({
url: '/nostalgia/fruser/user/configInfo',
withToken: true,
method: 'GET'
});
console.log(res, 'delshoucang');
if (res.data.code == 200) {
this.maxValue = res.data.data.maxAge;
this.minValue = res.data.data.minAge;
this.list = [];
if (res.data.data.city) {
res.data.data.city.forEach((item, index) => {
var obj = {
regionName2: item
};
this.list.push(obj);
});
}
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
this.falg = true;
},
async addcity() {
uni.showLoading({
title: '设置中...'
});
let citydata = [];
this.list.forEach((item, index) => {
citydata.push(item.regionName2);
});
console.log(citydata);
const res = await this.$myRequest({
url: '/nostalgia/fruser/update/configInfo',
data: {
city: citydata,
maxAge: this.maxValue,
minAge: this.minValue
},
withToken: true,
method: 'PUT'
});
console.log(res, 'delshoucang');
uni.hideLoading();
if (res.data.code == 200) {
this.isConfirm = true;
this.tipMsg = "设置成功";
this.$refs.elm.showDialog();
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
},
clicks(e) {
if (e == 0) {
this.$refs.levelLinkage.open(1);
} else {
this.list.splice(e, 1);
}
},
take(e) {
console.log(e, '[[[[]]]]');
if (e.num == 1) {
this.list.forEach((item, index) => {
if (item.regionName2 == e.regionName2) {
this.list.splice(index, 1);
}
});
this.list.splice(e.index, 1);
this.list.unshift(e);
} else {
const index = this.list.findIndex(function(val) {
return val.regionName2 === e.regionName2;
});
// 如果有多个满足,返回第一个的index
console.log(index, '[[[[[[[[[[[]]]]]]]]]]]');
if (index == 0) {
this.tipMsg = "您已添加过该城市";
this.$refs.elm.showDialog();
} else {
this.list.push(e);
}
}
},
chage(minValue, maxValue) {
this.minValue = minValue;
this.maxValue = maxValue;
},
add() {
this.$refs.levelLinkage.open(2);
},
up(e) {
console.log(e); //// e中包含了原有的e信息, 并添加了custom对象
this.minValue = e.custom.minValue;
this.maxValue = e.custom.maxValue;
},
left() {
uni.navigateBack();
},
down(e) {},
move(e) {},
confirm() {
this.isConfirm = false;
uni.navigateBack();
}
}
};
</script>
<style lang="scss">
.adding {
width: 614rpx;
height: 84rpx;
background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
border-radius: 42rpx 42rpx 42rpx 42rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #415c9e;
line-height: 84rpx;
position: fixed;
bottom: 54rpx;
left: 68rpx;
text-align: center;
}
.xuan {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
.div {
// width: 170rpx;
height: 72rpx;
background: rgba(81, 81, 81, 0.08);
border-radius: 16rpx;
margin-bottom: 40rpx;
margin-right: 20rpx;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 32rpx;
.name {
font-size: 28rpx;
font-family: 'PingFang SC-Medium, PingFang SC';
font-weight: 500;
color: #434343;
line-height: 28rpx;
margin-right: 10rpx;
}
.img {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 0rpx;
top: 0rpx;
}
}
}
.boot {
width: 686rpx;
border-bottom: 2rpx solid #ececec;
margin: 0 auto;
}
.u-nav-slot {
display: flex;
align-items: center;
.text {
height: 44rpx;
font-size: 32rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
font-weight: bold;
color: #000000;
margin-left: 14rpx;
line-height: 44rpx;
}
.img {
width: 22rpx;
height: 28rpx;
margin-left: 12rpx;
}
}
page {
width: 100%;
height: 100%;
}
.ewrew {
display: flex;
height: 50rpx;
font-size: 36rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #333333;
line-height: 50rpx;
align-items: center;
margin-top: 50rpx;
margin-bottom: 42rpx;
view {
height: 50rpx;
font-size: 32rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
font-weight: bold;
color: #446cd2;
line-height: 50rpx;
margin-left: 24rpx;
}
}
.tabs {
// position: fixed;
width: 686rpx;
margin: 0 auto;
height: 300px;
}
.btn {
margin: 10px 0;
background-color: #f0ad4e;
width: 200px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment