Main.vue

<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-05 14:05:30
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-28 15:44:01
 * @FilePath: \mcep-h5\src\views\main\MainView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="d-page d-flex flex-column" style="background-color: linear-gradient(to bottom, #0B54E0 50px , #ffffff); padding-bottom:20px;">
    <div class="rarle">
      <tools-bar :title="tatleName" style="width: 100%; height: calc(16vh)">
      </tools-bar>
    </div>
    <div class="roolsolt">
      <van-row
      type="flex" justify="space-between"
        class="roll"
        background="#ecf9ff"
        style="
          background: #ecf9ff;
          width: 90%;
          height: 34px;
         
          border-radius: 10px;
          position: absolute;
          top: 14vh;
          left: 5%;
        "
      >
        <van-col
          span="5"
          class="titleName"
          style="
            height: 34px;
            margin: 7px auto 0px 8px;
            border-radius: 12px;
            color: #a2d2f4;
          "
        >
          审批进度
        </van-col>
        <van-col span="18" class="notice">
          <van-notice-bar
            left-icon="volume-o"
            color="#1989fa"
            background="#ecf9ff"
            style="height: 34px; border-radius: 12px"
          >
            {{ notice }}
          </van-notice-bar>
        </van-col>
      </van-row>
    </div>

    <div  style=" box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;" >
      <div class="prudect" style="background-color: #ffffff;">


        <van-row type="flex" justify="space-between" align="center">
<!--
        <van-col span="10">
          <span color="#3672F1" style=" padding-left:10px; font-size: 16px; font-weight: 600;  " >推荐产品</span>
        </van-col> -->

       <!-- <van-col span="14"> -->
          <van-cell
        style="font-size: 12px;"


          :value="outcsinfo.place"
          @click="onAddress">

            <template #title>
              <span color="#3672F1" style="font-size: 16px; font-weight: 600;  " >推荐产品</span>
            </template>
          <template #right-icon>
            <van-icon name="location-o" size="14px"/>
         </template>
        </van-cell>
       <!-- </van-col> -->


        </van-row>
         <van-popup
          v-model="showAddress"
          round
          position="bottom"
          :style="{ height: '50%' }"
        >
          <van-area
            title="请选择地区"
            @confirm="changeAddress"
            :area-list="areaList"
            columns-num="3"
          />
        </van-popup>

        <!-- <van-area title="选择区域" :area-list="areaList" /> -->
      </div>
      <div >
        <!-- <van-tabs v-model="activeName">
          <van-tab title="综合排序" name="a"></van-tab>
          <van-tab title="金额" name="b"></van-tab>
          <van-tab title="期限" name="c"></van-tab>
          <van-tab title="利率" name="d"></van-tab>
        </van-tabs> -->
       <van-row type="flex" class="tab"  >

          <van-col span ="18">



             <van-tabs  @click="onClick" style="height: 44px;" title-active-color="black" title-inactive-color="black" line-width=0px >

      <van-tab v-for="index in tabsList" :key="index.name" >
    <template #title  >{{index.name}}



      <!-- <van-icon size="10px" class="iconfont" class-prefix="icon" :name="index.status===1? 'jiangxu' :'shengxu'"/>  -->

        <svg class="icon" aria-hidden="true" v-if = "index.status===1" >
          <use xlink:href="#icon-jiangxu"></use>
        </svg>

        <svg class="icon" aria-hidden="true" v-if = "index.status===0" >
          <use xlink:href="#icon-shengxu"></use>
        </svg>


    </template>
  </van-tab>

      </van-tabs>

          </van-col>
          <van-col span="6">
          <van-dropdown-menu style="height: 44px;" active-color="black" color="black">
                    <van-dropdown-item title="综合筛选" ref="item" >
            <div
              class="application"
              v-for="(item, index) in applicaList.slice(0, 1)"
              :key="index.name"
            >

              <van-row type="flex" class="applicationName">
                <van-col span="24">{{ item.name }}</van-col>
              </van-row>
              <van-row type="flex" class="applicationfale">
                <van-col span="10">
                  <div class="vandiv">{{ item.min }}</div>
                </van-col>
                <van-col span="2">-</van-col>
                <van-col span="10">
                  <div class="vandiv">{{ item.max }}</div>
                </van-col>
              </van-row>

              <van-row type="flex" gutter="10" class="applicationfole">
                <!-- div-->
                <van-col span="6">
                  <div :class="vanvcol11" @click="clickButton1(index, 1)">
                    {{ item.fristsize }}
                  </div>
                </van-col>
                <van-col span="6">
                  <div :class="vanvcol12" @click="clickButton1(index, 2)">
                    {{ item.secondsize }}
                  </div>
                </van-col>
                <van-col span="6">
                  <div :class="vanvcol13" @click="clickButton1(index, 3)">
                    {{ item.thirdsize }}
                  </div>
                </van-col>
                <van-col span="6">
                  <div :class="vanvcol14" @click="clickButton1(index, 4)">
                    {{ item.foursize }}
                  </div>
                </van-col>
              </van-row>
              </div>
              <div
                class="application"
                v-for="(item, index) in applicaList.slice(1, 2)"
                :key="index.name"
              >
                <van-row type="flex" class="applicationName">
                  <van-col span="24">{{ item.name }}</van-col>
                </van-row>
                <van-row type="flex" class="applicationfale">
                  <van-col span="10">
                    <div class="vandiv">{{ item.min }}</div>
                  </van-col>
                  <van-col span="2">-</van-col>
                  <van-col span="10">
                    <div class="vandiv">{{ item.max }}</div>
                  </van-col>
                </van-row>

                <van-row type="flex" gutter="10" class="applicationfole">
                  <!-- div-->
                  <van-col span="6">
                    <div :class="vanvcol21" @click="clickButton2(index, 1)">
                      {{ item.fristsize }}
                    </div>
                  </van-col>
                  <van-col span="6">
                    <div :class="vanvcol22" @click="clickButton2(index, 2)">
                      {{ item.secondsize }}
                    </div>
                  </van-col>
                  <van-col span="6">
                    <div :class="vanvcol23" @click="clickButton2(index, 3)">
                      {{ item.thirdsize }}
                    </div>
                  </van-col>
                  <van-col span="6">
                    <div :class="vanvcol24" @click="clickButton2(index, 4)">
                      {{ item.foursize }}
                    </div>
                  </van-col>
                </van-row>
              </div>

              <div
                class="application"
                v-for="(item, index) in applicaList.slice(3, 4)"
                :key="index.name"
              >
                <van-row type="flex" class="applicationName">
                  <van-col span="24">{{ item.name }}</van-col>
                </van-row>
                <van-row type="flex" class="applicationfale">
                  <van-col span="10">
                    <div class="vandiv">{{ item.min }}</div>
                  </van-col>
                  <van-col span="2">-</van-col>
                  <van-col span="10">
                    <div class="vandiv">{{ item.max }}</div>
                  </van-col>
                </van-row>

                <van-row type="flex" gutter="10" class="applicationfole">
                  <!-- div-->
                  <van-col span="6">
                    <div :class="vanvcol41" @click="clickButton4(index, 1)">
                      {{ item.fristsize }}
                    </div>
                  </van-col>
                  <van-col span="6">
                    <div :class="vanvcol42" @click="clickButton4(index, 2)">
                      {{ item.secondsize }}
                    </div>
                  </van-col>
                  <van-col span="6">
                    <div :class="vanvcol43" @click="clickButton4(index, 3)">
                      {{ item.thirdsize }}
                    </div>
                  </van-col>
                  <van-col span="6">
                    <div :class="vanvcol44" @click="clickButton4(index, 4)">
                      {{ item.foursize }}
                    </div>
                  </van-col>
                </van-row>
              </div>

              <div
                class="application"
                v-for="(item, index) in applicaList.slice(2, 3)"
                :key="index.name"
              >
                <van-row type="flex" class="applicationName">
                  <van-col span="24">{{ item.name }}</van-col>
                </van-row>
                <van-row type="flex" class="applicationfale">
                  <van-col span="10">
                    <div class="vandiv">{{ item.min }}</div>
                  </van-col>
                  <van-col span="2">-</van-col>
                  <van-col span="10">
                    <div class="vandiv">{{ item.max }}</div>
                  </van-col>
                </van-row>

                <van-row type="flex" gutter="10" class="applicationfole">
                  <!-- div-->
                  <van-col span="6">
                    <div :class="vanvcol31" @click="clickButton3(index, 1)">
                      {{ item.fristsize }}
                    </div>
                  </van-col>
                  <van-col span="6">
                    <div :class="vanvcol32" @click="clickButton3(index, 2)">
                      {{ item.secondsize }}
                    </div>
                  </van-col>
                  <van-col span="6">
                    <div :class="vanvcol33" @click="clickButton3(index, 3)">
                      {{ item.thirdsize }}
                    </div>
                  </van-col>
                  <van-col span="6">
                    <div :class="vanvcol34" @click="clickButton3(index, 4)">
                      {{ item.foursize }}
                    </div>
                  </van-col>
                </van-row>
              </div>

            <div style="margin-top: 4%">
              <van-row type="flex">
                <van-col span="12">
                  <van-button square block type="default" @click="resetData">重置</van-button>
                </van-col>
                <van-col span="12">
                  <van-button square block type="info" @click="confirmData">确定</van-button>
                </van-col>
              </van-row>
            </div>
          </van-dropdown-item>
            </van-dropdown-menu>


            </van-col>

      </van-row>

      </div>







      </div>
      <scroller-view v-calculate-height pulldown="true" pullup="true" :height="10000"  class="product"  >
        <div
          v-for="(item, index) in productList"
          :key="index"
        >
          <picket-bar
            :productname="item.productname"
            :describe="item.describe"
            :limitrange="item.limitrange"
            :interestrate="item.interestrate"
            :loanterm="item.loanterm"
            :crowd="item.crowd"
            :assureMeans="item.assureMeans"
            :type="item.type"
            @onClickPicket="onClickPicket"
          ></picket-bar>
        </div>

      </scroller-view>
    </div>

</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ProductData } from "@/model/entity/ProductData";
import { i, im } from "mathjs";
import { Toast } from 'vant';
import { Area } from "vant";
import { Cell, CellGroup } from 'vant';
import { Tabbar, TabbarItem } from 'vant';
import { Tab, Tabs } from 'vant';
import{area}from "../../model/domain/areaData";
import '../../assets/iconfont/iconfont.css'
import '../../assets/iconfont/iconfont.js'
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Area);
Vue.use(Toast);
Vue.use(Tab);
Vue.use(Tabs);
// import { areaList } from '@vant/area-data';

// export default {
//   data() {
//     return { areaList };
//   },
// };

@Component({
  name: "Main",
})
export default class Main extends Vue {
  tatleName = "线上金融服务平台";
  notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。";
  vanvcol11 = "vandilote";
  vanvcol12 = "vandilote";
  vanvcol13 = "vandilote";
  vanvcol14 = "vandilote";

  vanvcol21 = "vandilote";
  vanvcol22 = "vandilote";
  vanvcol23 = "vandilote";
  vanvcol24 = "vandilote";

  vanvcol31 = "vandilote";
  vanvcol32 = "vandilote";
  vanvcol33 = "vandilote";
  vanvcol34 = "vandilote";

  vanvcol41 = "vandilote";
  vanvcol42 = "vandilote";
  vanvcol43 = "vandilote";
  vanvcol44 = "vandilote";




  active=0;
  areaList = area;
  outcsinfo = {

			place:'请选择地区',//出行地点

		};
    showAddress=false;
  onAddress(){
			this.showAddress=true
		};
		// 点击地址选择框的确认
		changeAddress(event:any){
    		// console.log(event,'返回格式数组')
    		this.showAddress=false
			let st=''
			event.forEach((item:any)=>{
				st=st + item.name
			})
			this.outcsinfo.place=st
		};


//  created(){
  
//       document.addEventListener('touchmove', event => {    event.preventDefault()  }, { passive: false });
//   }

 activated(){

    document.addEventListener('touchmove', event => {    event.preventDefault()  }, { passive: false });
  }
     



  //测试
  demo() {
    this.$router.push({
      path: "/CustomerMgtView",
    });
  }

  //div列表
  tabsList: any=[
    {
       name: "金额",
       status:0,

    },
    {
       name: "期限",
       status:0,

    },
    {
       name: "利率",
       status:0,

    },

  ]
  applicaList: any = [
    {
      name: "产品金额（万元）",
      max: "最高",
      min: "最低",
      fristsize: "1~100",
      secondsize: "100~500",
      thirdsize: "500~1000",
      foursize: "1000~2000",
      select: null,
    },
    {
      name: "产品期限(月)",
      max: "最高",
      min: "最低",
      fristsize: "1~12",
      secondsize: "1~24",
      thirdsize: "12~24",
      foursize: "12~36",
      select: null,
    },
    {
      name: "产品利率(%)",
      max: "最高",
      min: "最低",
      fristsize: "1~3%",
      secondsize: "2~4%",
      thirdsize: "3~5%",
      foursize: "4~6%",
      select: null,
    },
    {
      name: "担保方式",
      max: "最高",
      min: "最低",
      fristsize: "抵押",
      secondsize: "质押",
      thirdsize: "信用",
      foursize: "保证",
      select: null,
    },

    // {
    //   name: "产品金额（万元）",
    //   max: "最高",
    //   min: "最低",
    //   fristsize: "1-100",
    //   secondsize: "100-500",
    //   thirdsize: "500-1000",
    //   foursize: "1000-2000"
    // },
    // {
    //   name: "产品金额（万元）",
    //   max: "最高",
    //   min: "最低",
    //   fristsize: "1-100",
    //   secondsize: "100-500",
    //   thirdsize: "500-1000",
    //   foursize: "1000-2000"
    // },
    // {
    //   name: "产品金额（万元）",
    //   max: "最高",
    //   min: "最低",
    //   fristsize: "1-100",
    //   secondsize: "100-500",
    //   thirdsize: "500-1000",
    //   foursize: "1000-2000"
    // }
  ];
  //金额
  // applicaform: any = [
  //   {
  //     name: "产品金额（万元）",
  //     max: "最高",
  //     min: "最低",
  //     fristsize: "1-100",
  //     secondsize: "100-500",
  //     thirdsize: "500-1000",
  //     foursize: "1000-2000",
  //   },
  // ];



    productList: any = [
    {
      productname: "小微企业抵押“一证通”贷款", //产品名称
      describe: "一次核定 三年有效 随用随贷 循环使用", //描述
      limitrange: "1~500万", //额度范围
      interestrate: "2%~4%", //利率
      loanterm: "1~36个月", //贷款期限
      crowd: "经营企业",//面向人群
      assureMeans: "抵押", // 担保方式
      type:"消费贷",//贷款种类
    },
    {
      productname: "“企业之星”流动资金贷款", //产品名称
      describe: "额度较大 利率优惠", //描述
      limitrange: "1~500万", //额度范围
      interestrate: "2%~4%", //利率
      loanterm: "1~36个月", //贷款期限
      crowd: "经营企业",//面向人群
      assureMeans: "抵押", // 担保方式
      type:"消费贷",//贷款种类
    },
     {
      productname: "白领贷", //产品名称
      describe: "手续简单  轻松操作  随用随贷  安全可靠", //描述
      limitrange: "1~500万", //额度范围
      interestrate: "2%~4%", //利率
      loanterm: "1~36个月", //贷款期限
      crowd: "个人",//面向人群
      assureMeans: "抵押", // 担保方式
      type:"金融贷",//贷款种类
    },

  ];



  //按钮
  tabbarlist: any = {
    name: "首页",
    flag: true,
  };





  //点击picket跳转界面
  onClickPicket() {
    this.$router.push({
      path: "/product",
      //路由传值
      // params:{
      //   data:""
      // }
    });
  }
  //重置选项
  resetData(){
    this.vanvcol11 = "vandilote";
    this.vanvcol12 = "vandilote";
    this.vanvcol13 = "vandilote";
    this.vanvcol14 = "vandilote";

    this.vanvcol21 = "vandilote";
    this.vanvcol22 = "vandilote";
    this.vanvcol23 = "vandilote";
    this.vanvcol24 = "vandilote";

    this.vanvcol31 = "vandilote";
    this.vanvcol32 = "vandilote";
    this.vanvcol33 = "vandilote";
    this.vanvcol34 = "vandilote";

    this.vanvcol41 = "vandilote";
    this.vanvcol42 = "vandilote";
    this.vanvcol43 = "vandilote";
    this.vanvcol44 = "vandilote";
  }
  //确认按钮
  confirmData(){
    let item: any = this.$refs.item;
    item.toggle(false);
  }
  //切换
  clickButton1(index: number, item: number) {
    var select = (this.applicaList[index].sellet = item);

    console.log(this.applicaList[index].sellet);
    if (item === 1) {
      this.vanvcol11 = "vancoll";

      this.vanvcol12 = "vandilote";
      this.vanvcol13 = "vandilote";
      this.vanvcol14 = "vandilote";
      console.log(this.applicaList[index].sellet);
    } else if (item === 2) {
      this.vanvcol11 = "vandilote";

      this.vanvcol12 = "vancoll";
      this.vanvcol13 = "vandilote";
      this.vanvcol14 = "vandilote";
    } else if (item === 3) {
      this.vanvcol11 = "vandilote";

      this.vanvcol12 = "vandilote";
      this.vanvcol13 = "vancoll";
      this.vanvcol14 = "vandilote";
    } else if (item === 4) {
      this.vanvcol11 = "vandilote";

      this.vanvcol12 = "vandilote";
      this.vanvcol13 = "vandilote";
      this.vanvcol14 = "vancoll";
    }
  }

  clickButton2(index: number, item: number) {
    var select = (this.applicaList[index].sellet = item);

    console.log(this.applicaList[index].sellet);
    if (item === 1) {
      this.vanvcol21 = "vancoll";
      this.vanvcol22 = "vandilote";
      this.vanvcol23 = "vandilote";
      this.vanvcol24 = "vandilote";
      // console.log(this.applicaList[index].sellet);
    } else if (item === 2) {
      this.vanvcol21 = "vandilote";
      this.vanvcol22 = "vancoll";
      this.vanvcol23 = "vandilote";
      this.vanvcol24 = "vandilote";
    } else if (item === 3) {
      this.vanvcol21 = "vandilote";
      this.vanvcol22 = "vandilote";
      this.vanvcol23 = "vancoll";
      this.vanvcol24 = "vandilote";
    } else if (item === 4) {
      this.vanvcol21 = "vandilote";
      this.vanvcol22 = "vandilote";
      this.vanvcol23 = "vandilote";
      this.vanvcol24 = "vancoll";
    }
  }

  clickButton3(index: number, item: number) {
    var select = (this.applicaList[index].sellet = item);

    console.log(this.applicaList[index].sellet);
    if (item === 1) {
      this.vanvcol31 = "vancoll";
      this.vanvcol32 = "vandilote";
      this.vanvcol33 = "vandilote";
      this.vanvcol34 = "vandilote";
      console.log(this.applicaList[index].sellet);
    } else if (item === 2) {
      this.vanvcol31 = "vandilote";
      this.vanvcol32 = "vancoll";
      this.vanvcol33 = "vandilote";
      this.vanvcol34 = "vandilote";
    } else if (item === 3) {
      this.vanvcol31 = "vandilote";
      this.vanvcol32 = "vandilote";
      this.vanvcol33 = "vancoll";
      this.vanvcol34 = "vandilote";
    } else if (item === 4) {
      this.vanvcol31 = "vandilote";
      this.vanvcol32 = "vandilote";
      this.vanvcol33 = "vandilote";
      this.vanvcol34 = "vancoll";
    }
  }

  clickButton4(index: number, item: number) {
    var select = (this.applicaList[index].sellet = item);

    console.log(this.applicaList[index].sellet);
    if (item === 1) {
      this.vanvcol41 = "vancoll";
      this.vanvcol42 = "vandilote";
      this.vanvcol43 = "vandilote";
      this.vanvcol44 = "vandilote";
      console.log(this.applicaList[index].sellet);
    } else if (item === 2) {
      this.vanvcol41 = "vandilote";
      this.vanvcol42 = "vancoll";
      this.vanvcol43 = "vandilote";
      this.vanvcol44 = "vandilote";
    } else if (item === 3) {
      this.vanvcol41 = "vandilote";
      this.vanvcol42 = "vandilote";
      this.vanvcol43 = "vancoll";
      this.vanvcol44 = "vandilote";
    } else if (item === 4) {
      this.vanvcol41 = "vandilote";
      this.vanvcol42 = "vandilote";
      this.vanvcol43 = "vandilote";
      this.vanvcol44 = "vancoll";
    }
  }

   onClick(index:any) {
     this.tabsList[index].status=this.tabsList[index].status === 1?0:1
     // Toast(this.tabsList[index].status===1?"升序":"降序");
    }
}
</script>
<style scoped lang="scss">
.roll {
  background: #ecf9ff;
}

.titleName {
  float: inline-end;
  height: 34px;
  margin: 7px auto 0px 8px;
  border-radius: 12px;
  color: #a2d2f4;
}
.vancoll {
  text-align: center;
  background-color: rgba(242, 242, 242, 1);
  font-size: 12px;
  line-height: 40px;
  border-radius: 4px;
  background: #1890ff;
}
.prudect {
  line-height: 100%;
  padding-top: 16px;
}
.van-row--align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 33px;
}




.vandiv {
  text-align: center;
  border-color: rgba(204, 204, 204, 1);
  font-size: 12px;
  color: #999999;
  border: 1px solid #999999;
  width: 80%;
  border-radius: 4px;
  //background-color: #a2d2f4;
}

.application {
  height: 20%;
}

.applicationName {
  //margin-left: 6%;
  margin: 2% 6%;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  font-kerning: normal;
}

.applicationfole {
  margin: 0 auto;
  font-size: 14px;
  color: #333333;
  // margin-top: 2%;
  // margin-left: 5%;
  // margin-right: 5%;
  margin: 4% 6% 0% 6%;
}

.applicationfale {
  //margin-left: 5%;
  margin: 4% 6%;
}

.vandilote {
  text-align: center;
  background-color: rgba(242, 242, 242, 1);
  font-size: 12px;
  line-height: 40px;
  border-radius: 4px;
  // color: #999999;
  // border: 1px solid #999999;
}

.applicationbutton {
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 72px;
}

::v-deep .van-dropdown-menu__bar {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 44px;
    background-color: #ffffff;
    box-shadow: none;
}

::v-deep .van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color:transparent;
}

.van-dropdown-item {
  position: relative;
  right: 0;
  left: 0;
  z-index: 10;

  overflow: hidden;
  height: 100%;
}
#fristsize {
  background-color: #1890ff;
}

.van-cell__value--alone {
    color: #1890ff;
    text-align: right;
}

::v-deep .van-cell__value {
    position: relative;
    overflow: hidden;
     color: #1890ff;
    text-align: right;
    vertical-align: middle;
    word-wrap: break-word;
}


::v-deep .van-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: black;
}

.icon{
    width: 14px;
    height: 14px;
}



</style>