no message

pages/index/model/screen-item.vue

@@ -4,9 +4,9 @@
 		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
 			<view class="screen-box">
 				<view class="age-name sys-size-32 sys-color-white">
-					距离 {{distance}}
+					距离 {{fromData.distance}}
 				</view>
-				<slider :value="distance" @changing="sliderChange" min="0" max="500" activeColor="#727272"
+				<slider :value="fromData.distance" @changing="sliderChange" min="0" max="500" activeColor="#727272"
 					backgroundColor="#727272" block-size="6" block-color="#FFC107" />
 				<view class="num-section sys-size-28 sys-color-5B ">
 					<view class="">
@@ -17,13 +17,13 @@
 					</view>
 				</view>
 				<view class="age-name sys-size-32 sys-color-white">
-					年龄 {{`${age[0]} - ${age[1]}`}}
+					年龄 {{`${fromData.age[0]} - ${fromData.age[1]}`}}
 				</view>
-				<cjSliderTwo v-model="age" :min="0" :max="35" :step="1" :blockWidth="18" @moving="blockMoving"
+				<cjSliderTwo v-model="fromData.age" :min="18" :max="35" :step="1" :blockWidth="18" @moving="blockMoving"
 					activeColor="#727272" inactiveColor="#727272" blockColor="#FFC107" />
 				<view class="num-section sys-size-28 sys-color-5B">
 					<view class="">
-						okm
+						18
 					</view>
 					<view class="">
 						35+
@@ -36,30 +36,41 @@
 						{{item.name}}
 					</view>
 				</view>
-				<view class="view-user">
+				<view class="view-user" @click="setPicker(1)">
 					<view class="view-user-left sys-color-white sys-size-32">
 						优先查看用户
 					</view>
 					<view class="view-user-right">
 						<view class="view-user-right-name sys-color-5B sys-size-28">
-							未设置
+              {{purposeName?purposeName:'未设置'}}
 						</view>
 						<uni-icons type="forward" size="20" color="#5B5B5B"></uni-icons>
 					</view>
 				</view>
-				<view class="view-user">
+				<view class="view-user"  @click="setPicker(2)">
 					<view class="view-user-left sys-color-white sys-size-32">
 						速配星座
 					</view>
 					<view class="view-user-right">
 						<view class="view-user-right-name sys-color-5B sys-size-28">
-							未设置
+              {{constellationName?constellationName:'未设置'}}
 						</view>
 						<uni-icons type="forward" size="20" color="#5B5B5B"></uni-icons>
 					</view>
 				</view>
-				<view class="placeholder-box"></view>
-				<view class="aim-box">
+        <view class="view-user"  @click="setPicker(3)">
+          <view class="view-user-left sys-color-white sys-size-32">
+            兴趣爱好
+          </view>
+          <view class="view-user-right">
+            <view class="view-user-right-name sys-color-5B sys-size-28">
+              {{hobbyName?hobbyName:'未设置'}}
+            </view>
+            <uni-icons type="forward" size="20" color="#5B5B5B"></uni-icons>
+          </view>
+        </view>
+				<view class="placeholder-box" v-if="false"></view>
+				<view class="aim-box" v-if="false">
 					<view class="aim-title">
 						<view class="title-box sys-radius-200 sys-background-FFC107"></view>
 						<view class="title-name sys-size-32 sys-color-white">
@@ -79,26 +90,41 @@
 						</view>
 					</view>
 				</view>
+        <view class="sys-selected-but sys-background-FFC107 sys-color-black" @click="setFilter">保存</view>
 			</view>
 		</scroll-view>
+    <uni-data-picker :popup-title="'选择'+label" :localdata="localData" ref="pickerObj" v-show="showPicker"
+                     @change="pickerChange" :border="false" :clear-icon="false" @popupclosed="setPopupClosed">
+    </uni-data-picker>
 	</view>
 </template>
 
 <script>
 	import cjSliderTwo from '@/components/jxs-slider/jxs-slider.vue'
-	import cjSlider from '@/components/cj-slider/cj-slider.vue'
-	import {
-		getFilter
-	} from "@/api/discovery";
+  import {
+    getFilter, setFilter
+  } from "@/api/discovery";
   import {getScreenDict} from "@/api/utility";
+  import tools from "@/service/tools";
 	export default {
 		components: {
 			cjSliderTwo
 		},
 		data() {
 			return {
-				distance: 50,
-				age: [18, 30],
+
+        fromData:{
+          distance: 50,
+          id: '',
+          userId: '',
+          ageMax: '',
+          ageMin: '',
+          gender: '',
+          prefer: '',
+          constellation: '',
+          interest: '',
+          age: [18, 30],
+        },
 				sex: [{
 					'name': '男生',
 					'id': 0
@@ -110,6 +136,16 @@
 					'id': 2
 				}],
 				sexId: 0,
+        label: 0,
+        localData: [],
+        showPicker: false,
+        pickerType: 1,
+        purposeArr: [],
+        purposeName:'',
+        constellationArr: [],
+        constellationName:'',
+        hobbyArr: [],
+        hobbyName:'',
 			};
 		},
 		mounted() {
@@ -117,14 +153,88 @@
 			this.getScreenDict()
 		},
 		methods: {
+      setFilter(){
+        this.fromData.ageMin=this.fromData.age[0]+''
+        this.fromData.ageMax=this.fromData.age[1]+''
+        setFilter(this.fromData).then((res)=>{
+          if(res.code===0){
+            tools.success('保存成功')
+            setTimeout(()=>{
+              tools.leftClick()
+            },1000)
+          }else {
+            tools.error(res.msg)
+          }
+        })
+      },
+      setPicker(pickerType){
+        this.pickerType=pickerType
+        if(pickerType===1){
+          this.localData =this.purposeArr
+        }else if(pickerType===2){
+          this.localData =this.constellationArr
+        }else {
+          this.localData =this.hobbyArr
+        }
+        this.$refs.pickerObj.show();
+        this.showPicker = true;
+      },
+      pickerChange(data) {
+        if(data.detail.value.length>0){
+          if(this.pickerType===1){
+            this.purposeName =data.detail.value[0].text;
+            this.fromData.prefer =data.detail.value[0].value;
+          }else if(this.pickerType===2){
+            this.constellationName =data.detail.value[0].text;
+            this.fromData.constellation =data.detail.value[0].value;
+          }else {
+            this.hobbyName =data.detail.value[0].text;
+            this.fromData.interest =data.detail.value[0].value;
+          }
+        }
+        this.$refs.pickerObj.clear();
+        this.showPicker = false;
+      },
       getScreenDict(){
         getScreenDict('app_user_filter_hobby,app_user_filter_constellation,app_user_filter_purpose').then((res)=>{
           console.log(res)
+          if(res.code===0){
+              if(res.data.app_user_filter_purpose){
+                res.data.app_user_filter_purpose.forEach((item)=>{
+                  this.purposeArr.push({'text':item.label,'value':item.value})
+                })
+              }
+            if(res.data.app_user_filter_constellation){
+              res.data.app_user_filter_constellation.forEach((item)=>{
+                this.constellationArr.push({'text':item.label,'value':item.value})
+              })
+            }
+            if(res.data.app_user_filter_hobby){
+              res.data.app_user_filter_hobby.forEach((item)=>{
+                this.hobbyArr.push({'text':item.label,'value':item.value})
+              })
+            }
+          }else {
+            tools.leftClick()
+          }
         })
       },
 			getFilter() {
 				getFilter().then((res) => {
-					console.log(res)
+          if(res.code===0){
+            this.fromData.distance=res.data.distance
+            this.fromData.id=res.data.id
+            this.fromData.userId=res.data.userId
+            this.fromData.ageMax=res.data.ageMax
+            this.fromData.ageMin=res.data.ageMin
+            this.fromData.gender=res.data.gender
+            this.fromData.prefer=res.data.prefer
+            this.fromData.constellation=res.data.constellation
+            this.fromData.interest=res.data.interest
+            this.fromData.age=[res.data.ageMin*1,res.data.ageMax*1]
+          }else {
+            tools.leftClick()
+          }
 				})
 			},
 			scroll() {},
@@ -133,7 +243,7 @@
 				console.log('正在滑动中', e)
 			},
 			sliderChange(e) {
-				this.distance = e.detail.value
+				this.fromData.distance = e.detail.value
 			},
 			selsectSex(id) {
 				//点击没反应
@@ -152,7 +262,9 @@
 	.screen-item {
 		width: 100%;
 		flex: 1;
-
+    .sys-selected-but{
+      margin-top: 100rpx;
+    }
 		.list-scroll {
 			width: 100%;
 			flex: 1;
@@ -163,6 +275,7 @@
 			flex-direction: column;
 
 			.screen-box {
+
 				.age-name {
 					margin: 0 0 20rpx 0;
 				}