微信小程序橙色工作地点职位类别搜索页面制作设计模板下载

今天给大家带来橙色工作地点职位类别搜索页面制作设计模板，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="search_wrap">
    <view class="s_input">
        <view class="inputbox">
            <icon color="#fff" type="search" size="20"/>
            <input auto-focus="true"  bindinput="user_import" placeholder-class="placeholder" placeholder="请输入职位名或者公司名" />
        </view>
    </view>
    <view class="s_s_list">
        <navigator url="../workplace/workplace">
            <view class="title">
                <view class="s_til">工作地点</view>
                <view class="s_cont">
                    <text class="has_select">{{action}}</text>
                    <image class="image_jiantou" src="image/jiantou_tou.png"></image>
                </view>
            </view>
        </navigator>
        <navigator url="../worktype/worktype">
            <view class="title">
                <view class="s_til">职位类别</view>
                <view class="s_cont">
                    <text class="has_select">{{position_type}}</text>
                    <image class="image_jiantou" src="image/jiantou_tou.png"></image>
                </view>
            </view>
        </navigator>
        <button bindtap="search" class="s_search">搜索</button>
    </view>



    <view class="s_his"><image class="iamge_search" src="image/_03.png"></image>最进搜索记录</view>
    <view wx:if="{{search_history.length==0?false:true}}" class="s_his_box">
        <block wx:for="{{search_history}}">
            <view class="title" bindtap="history_search" data-search_id="{{item.search_id}}">
                <view class="s_til">
                {{item.position_name}}
                </view>
                <view class="s_cont">
                    <text class="has_select">约{{item.company_num}}个职位</text>
                    <image class="image_jiantou" src="image/jiantou_tou.png"></image>
                </view>
            </view>
        </block>
    </view>
    <view wx:if="{{search_history.length==0?false:true}}" bindtap="clear_his" class="clear_his">清空搜索记录</view>
</view>

二、wxss样式文件代码如下：

.s_input{
    background-color: #e58026;
    padding:0 0 15rpx 15rpx;
}
.inputbox{
  display: flex;
  background-color: #df6f00;
  border-radius:8rpx; 
  padding: 8rpx;
  width:94%;
  /*display: table;*/
}
.inputbox icon{
    /*display: table-cell;*/
    /*vertical-align: middle;*/
    padding-right: 8rpx;
    margin-top: 6rpx;
}
.inputbox input{
  color:  #fff;
}
.placeholder{
  color: #fff;
  font-size: 12pt;
}
.image_jiantou{
  width: 30rpx;
  height: 30rpx;
}
.iamge_search{
  width: 30rpx;
  height: 30rpx;
  padding-right: 10rpx;
}
.s_s_list{
  width: 94%;
  margin: 0 auto;
}
.s_s_list .title{
  border-bottom: 1px solid #e5e5e5;
  padding: 20rpx 0;
  display: flex;
  justify-content: space-between;
}
.s_s_list .title .s_til{
  width: 25%;
}
.s_cont{
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.has_select{
  font-size: 13pt;
  color: #888888;
  max-width: 92%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.s_search{
  background-color: #e58026;
  color: #fff;
  margin-top: 30rpx;
}
.s_his{
  margin-top: 30rpx;
  background-color: #efefef;
  font-size: 12pt;
  color: #b2b2b2;
  padding: 16rpx;
  display: flex;
  align-items: center;
}
.s_his_box{
  /*border: 1px solid red;*/
  width: 94%;
  margin: 0 auto;
  font-size: 12pt;
}
.s_his_box .title{
  padding: 10rpx 0;
  color: #b2b2b2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clear_his{
  font-size: 12pt;
  text-align: center;
  color: #888888;
  margin: 15rpx auto;
}

三、js页面代码如下：

const method = require('../../utils/methond.js');
var app = getApp()
Page({
  data:{
    action:'',
    position_type:'',
    search_history:[]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    
  },
  onReady:function(){
    // 页面渲染完成
    
  },
  onShow:function(){
    // 页面显示
    let _search_history;
    let has_select_temp = wx.getStorageSync('has_select') || [];     //选择的工作地点
    let has_post_tep = wx.getStorageSync('has_post') || [];          //选择的职位
    let search_history = wx.getStorageSync('search_history') || [];  //搜索的历史记录   
    
    _search_history = search_history.map(function(item){
      let city = item.city_arr.map(function(it){
          return it.city
      }).join()
      let post = item.post_arr.map(function(it){
          return it.post
      }).join()
      return {
        search_id:item.search_id,
        company_num:item.num,
        position_name:[item.user_import, city, post].join('+')
      }
    })
   
      this.setData({
        action:method.has_(has_select_temp,'city'),
        position_type:method.has_(has_post_tep,'post'),
        search_history:_search_history
      })
      wx.setStorage({
          key:"user_import",
          data:''
        })
  },
  onHide:function(){
    // 页面隐藏
    
  },
  onUnload:function(){
    // 页面关闭
    
  },
  user_import:(e)=>{
    let value = e.detail.value;
    wx.setStorage({
      key:"user_import",
      data:value
    })
  },
  search:(e)=>{
    let id = app.data.searchId;  // 全局数据
    try {
      let city_arr = wx.getStorageSync('has_select') || []; //用户选择的城市
      let post_arr = wx.getStorageSync('has_post') || [];   //用户选择的职位
      let user_import = wx.getStorageSync('user_import');   //用户输入的内容
      let city_id,post_id;
      if (city_arr =='' && post_arr == '' && user_import == '' ) {
          wx.showModal({
            showCancel:false,
            content: '请选择地点或职位名'
        })
      }else{

        city_id = city_arr.map(function(item){  //对应的职位id
            return item.id
        });
        
        post_id = post_arr.map(function(item){ //选择的城市id
            return item.id
        }); //用户选择的职位id
        wx.navigateTo({
          url:"../searchend/searchend?user_import="+user_import+"&city_id="+city_id+"&post_id="+post_id,
        })
      }
    } catch (e) {
      console.log(e);
    }
  },
  clear_his: function(){  //清空历史记录
      this.setData({
        search_history:''
      })
      wx.removeStorage({
        key: 'search_history',
        fail: function(res) {
          console.log('清除历史记录失败')
        } 
      })
  },
  history_search:function(e){
    let search_id = e.currentTarget.dataset.search_id;
    try {
        let  search_history = wx.getStorageSync('search_history')
        if (search_history) {
            
            let now_his=[];
            search_history.map(function(item){
                if( item.search_id == search_id ){
                  now_his.push(item)
                }
            })
            let city_arr = now_his[0].city_arr;
            let user_import = now_his[0].user_import;
            let post_arr = now_his[0].post_arr;
            let city_id,post_id;
            city_id = city_arr.map(function(item){
                return item.id
            }).join()
            post_id = post_arr.map(function(item){
                return item.id
            }).join()
            // console.log( user_import,city_id,post_id )
            wx.navigateTo({
                url:"../searchend/searchend?user_import="+user_import+"&city_id="+city_id+"&post_id="+post_id,
            })

        }
      } catch (e) {
      
    }
  }
})

模板简介：该模板名称为【微信小程序橙色工作地点职位类别搜索页面制作设计模板下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。