• filter函数排序


    <template>
      <div class="hello" ref="box">
    
        <div  class="top-hospital-cont">
          <div class="dengjis">{{hospitalObj.structureLevelName}}</div>
          <div class="hospital-cont-right">
            <div>{{hospitalObj.organizationName}}</div>
            <div>{{hospitalObj.structureCharacter}}{{hospitalObj.structureLevelName}}</div>
            <div style="font-size:12px;">可预约时间 {{hospitalObj.appointmentTime}}</div>
          </div>
        </div>
        <div class="title">
          套餐列表
        </div>
        <div class="shai-cont">
          <ul class="shai-ul">
            <li>
              <select placeholder="排序" class="public-choice" name="public-choice" v-model="couponSelected">
                <option :value="coupon.name" v-for="(coupon, index) in couponList" :key="index">{{ coupon.name }}</option>
              </select>
            </li>
    
            <li>
              <!-- @change="getCouponSelected" -->
              <select class="public-choice" name="public-choice" v-model="couponSelecteds">
                <option :value="coupon.name" v-for="(coupon, index) in couponsLists" :key="index">{{ coupon.name }}</option>
              </select>
            </li>
            <li class="last-li">
              <!-- @change="getCouponSelected" -->
              <select class="public-choice" name="public-choice" v-model="couponSelecteds2">
                <option :value="coupon.name" v-for="(coupon, index) in couponsLists2" :key="index">{{ coupon.name }}</option>
              </select>
            </li>
            <li>
              <!-- @change="getCouponSelected" -->
              <select class="public-choice" name="public-choice" v-model="couponSelected3">
                <option :value="coupon.name" v-for="(coupon, index) in couponsLists3" :key="index">{{ coupon.name }}</option>
              </select>
            </li>
          </ul>
        </div>
        <div class="list-item" v-for="(item,index) in fileterlist" :key="index">
       <div class="list-item-right">
         <div>{{item.name}}</div>
         <div class="name">适用人群:{{item.people}}</div>
         <div class="name">
           {{item.price}}元 <span class="list-item-right-sapn">已售{{item.sell}}</span>
         </div>
       </div>
        </div>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          search:"",
          couponsLists: [{
            id: "0",
            name: "筛选全部"
          }, {
            id: "1",
            name: ""
          }, {
            id: "2",
            name: ""
          }, ],
          couponList: [{
            id: "0",
            name: "排序全部"
          }, {
            id: "1",
            name: "销量↑"
          }, {
            id: "1",
            name: "金额↑"
          }],
          couponsLists2: [{
            id: "0",
            name: "金额全部"
          }, {
            id: "0",
            name: "200以下"
          }, {
            id: "1",
            name: "200-500"
          }, {
            id: "2",
            name: "500-1000"
          }, {
            id: "2",
            name: "1000以上"
          }],
         couponsLists3: [{
            id: "0",
            name: "入职体检"
          }, {
            id: "0",
            name: "婚前体检"
          }],
          couponSelecteds2: "金额全部",
          couponSelected: "排序全部",
          couponSelecteds: "筛选全部",
          couponSelected3:"入职体检",
       list: [
          {
             name:"高血压套餐",
             people:"使用人群男",
             price:200,
             sell:300
          },
        {
          name:"糖尿病套餐",
          people:"使用人群女",
          price:1000,
          sell:20000
        },
       {
         name:"心虚管套餐",
         people:"使用人群男女",
         price:400,
         sell:500
       },
       {
         name:"心虚管套餐",
         people:"使用人群男女",
         price:900,
         sell:20
       },
        ],
          hospitalObj: {}
        };
      },
    
      computed:{
        fileterlist:function(){
          var arr=this.list.filter((value)=>{
            var a=value.name.match(this.search);
             var b=false;
             /*性别*/
             if(this.couponSelecteds=="筛选全部"){
                b=true
             }else {
                b=value.people.match(this.couponSelecteds);
             }
            /*价格排序*/
             var xj=false;
             if(this.couponSelecteds2.match("金额全部")){
                xj=true
             }else if(this.couponSelecteds2.match("200以下")){
                xj=value.price<=200
             } else if(this.couponSelecteds2.match("200-500")){
                xj= value.price>=200&&value.price<=500
             }
             else if(this.couponSelecteds2.match("500-1000")){
                xj= value.price>=500&&value.price<=1000
             }
             else if(this.couponSelecteds2.match("1000以上")){
                xj=value.price>1000
             }
             /*销量金额排序*/
            return a&&b&&xj
          })
    
          var xlj=false;
          if(this.couponSelected.match("排序全部")){
            xlj=true;
          }else if(this.couponSelected.match("销量↑")){
            console.log(11)
              console.log(arr)
            for(var i=0;i<arr.length;i++){
              console.log(arr)
                    for(var j=i;j<arr.length;j++){
                     if(arr[i].sell>arr[j].sell){
                      var tmp=arr[i];
                      arr[i]=arr[j];
                      arr[j]=tmp;
                     }
                    }
                   }
    
              }else if(this.couponSelected.match("金额↑")){
                for(var i=0;i<arr.length;i++){
                  console.log(arr)
                        for(var j=i;j<arr.length;j++){
                         if(arr[i].price>arr[j].price){
                          var tmp=arr[i];
                          arr[i]=arr[j];
                          arr[j]=tmp;
                         }
                        }
                       }
                       console.log(arr)
    
    
    
    
          }
    
          return arr
    
        }
    
      },
    };
    </script>
  • 相关阅读:
    OpenCV 写入视频流
    Flyweight 模式
    Builder 模式
    MySQL插入数据
    MySQL新建表
    2's Power
    DeepID人脸识别算法之三代(转)
    FaceNet--Google的人脸识别(转)
    DeepFace--Facebook的人脸识别(转)
    leetcode6 Reverse Words in a String 单词取反
  • 原文地址:https://www.cnblogs.com/xzhce/p/13046728.html
Copyright © 2020-2023  润新知