<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-05 14:05:30
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-22 18:18:30
 * @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: #ebedf0;     overflow-y: scroll;">
    <div class="rarl">
      <person-bar :title="tatleName" :param="param" :login="true" style="width:100%;    height: 255px">
      </person-bar>
    </div>
    <div style="margin-top: 160px; position: absolute; width: 100%">
      <van-row span="24">
        <van-col span="8" style="text-align: center;     color: #435983; font-weight: 600">2456</van-col>
        <van-col span="8" style="text-align: center;     color: #435983; font-weight: 600">12</van-col>
        <van-col span="8" style="text-align: center;     color: #435983; font-weight: 600">10</van-col>
      </van-row>
      <van-row span="24">
        <van-col span="8" style="text-align: center;     color: #435983;">我的积分</van-col>
        <van-col span="8" style="text-align: center;     color: #435983;">卡券</van-col>
        <van-col span="8" style="text-align: center;     color: #435983;">特权</van-col>
      </van-row>
    </div>
    <div>
      <card-bar class="card"></card-bar>
      <!-- <uncard-bar class="card"></uncard-bar> -->
    </div>
    <div class="prudect">
      <little-bar :litterParam="litterParam" @litterParamClick="litterParamClick"></little-bar>
    </div>
  </div>



</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ProductData } from '@/model/entity/ProductData'

@Component({
  name: "MyPage",
})
export default class MyPage extends Vue {
  tatleName = "个人中心"
  loginFlag = true;
  param: any = {}
  //判断是否登录
  created() {
    //判断登录登陆状态
    //this.loginFlag=localStorage.getItem("loginFlag")
    if (this.loginFlag) {
      this.param = {
        name: "孙旭东",
        live: "二星级",
        grow: "531"
      }
    } else {
      this.param = {
        name: "登录/注册"
      }
    }

  }
  //列表信息
  litterParam: any = [{
    productname: "个人信息",
    //个人信息
    img: "#icon-a-gerenxinxi16x16px",
    flag: "PersonLod"
  },
  {
    productname: "我的贷款",
    //图片信息
    img: "#icon-a-wodedaikuan16x16px",
    flag: "AccommodMain"
  },
  {
    productname: "兑换记录",
    //图片信息
    img: "#icon-a-duihuanjilu16x16px",
    flag: "ExchangeRecord",
  },
  {
    productname: "合作企业",
    //图片信息
    img: "#icon-a-hezuoqiye16x16px",
    flag: "CooperationBusiness",
  }]

  //点击事件
  litterParamClick(item: any) {

    if (item.flag === "PersonLod") {
      this.$router.push({
        name: "PersonLod"
        //参数
      })
    } else if (item.flag === "AccommodMain") {
      this.$router.push({
        name: "AccommodMain"
        //参数
      })
    } else if ( item.flag === "ExchangeRecord") {
      this.$router.push({
        name: "ExchangeRecord"
      })
    } else if ( item.flag === "CooperationBusiness") {
      this.$router.push({
        name: "CooperationBusiness"
      })
    }
  }
}
</script>
<style scoped lang="scss">
.roll {
  background: #ecf9ff;
}

.card {
  position: absolute;
  top: 200px;
  left: 3%;
  right: 3%;
  width: 90%;
  height: 140px;
  margin: 2% auto;
  border-radius: 15px;
  display: flex;
  font-weight: 400;
  font-style: normal
}

.titleName {
  float: inline-end;
  height: 34px;
  margin: 7px auto 0px 8px;
  border-radius: 12px;
  color: #a2d2f4;
}

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

.prudect {
  background: white;
  height: 100%;

}
</style>