<template>
  <div id="joinMemeber" class="joinMemberClass">
    <div class="joinMemberClass1">
      <div class="shopNameClass">
        {{shopName}}
      </div>
      <div class="inviteLogoClass">
        <img :src="userImg" />
      </div>
      <div class="inviteNameClass">{{nickName}}</div>
      <div class="inviteNameClass1">邀您加入滴露会员</div>
      <div class="inviteNameClass2">
        <img src="//img10.360buyimg.com/imgzone/jfs/t1/162394/22/9066/1452/6040483aE20f3325a/b2074254a123a5bc.png" />
        <span>免费正装，会员特惠等你拿！</span>
        <img src="//img10.360buyimg.com/imgzone/jfs/t1/162394/22/9066/1452/6040483aE20f3325a/b2074254a123a5bc.png" />
      </div>
      <div class="inviteBtnClass0">
        <img src="//img10.360buyimg.com/imgzone/jfs/t1/158481/34/9809/28189/6040483aEb67486ab/902154ef94c638cb.png" />
      </div>
      <div class="inviteBtnClass">
        <img v-lz-click="'4'"  @click="checkOpencard" src="//img10.360buyimg.com/imgzone/jfs/t1/155258/11/20871/33464/6040483aE1f3cc9a9/0aab0148ac407ab3.png" />
      </div>

      <component
        ref="dataRef"
        v-for="(value, key, index) in componentsData"
        :key="index"
        :is="key"
        :isTemplate="isTemplate"
        :styleData="value.styleData"
        :datas="value.datas"
        :keyData="value.keyData"
      ></component>

    </div>
  </div>
</template>

<script>
  import expoure from '../../logicalComponent/recommend/exposure.vue'
  import {goToOpenCard} from '../../../util/tools.js'
  import store from "../../../store/store";
import { getUrlQueryValueByKey } from '../../../util/tools.js';
export default{
  name:'JoinMemeber',
  props:[],
  components:{
    expoure
  },
  data(){
    return{
      isTemplate:false,
      shopName:"",
      nickName:'',
      userImg:"",

      componentsData:{
        expoure:{
          datas:{
            dataAll:this.allData,
            isShowTitle:false,
          },
          keyData:{},
          styleData:{}
        }
      }
    }
  },
  created() {
  // decodeURIComponent()
    var allData = JSON.parse(decodeURIComponent(getUrlQueryValueByKey('memberData',location.href)))
   
    this.shopName = allData.data.shopNmae
    this.nickName = allData.data.joinInfo.nickName
    this.userImg = allData.data.joinInfo.userImg
    this.memberUrl = allData.data.memberUrl
  },
  methods:{
    checkOpencard(){
      goToOpenCard(this.memberUrl.replace(/%/g, '%25'))
    }
  },

}
</script>

<style lang="scss" scoped="scoped">
  .joinMemberClass{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7.5rem;
    // min-height: 100vh;
    background-color: #22863A;
    .joinMemberClass1{
      background: url('//img10.360buyimg.com/imgzone/jfs/t1/167250/12/8423/677653/6040483bE3052c78e/5eb4c46cff240a37.png') no-repeat;
      background-size: 100% 100%;
      width: 7.5rem;
      height: 16.60rem;
      .shopNameClass{
        color: #584910;
        font-size: 0.28rem;
        padding: 0.24rem 0 0 1.42rem;
        text-align: left;
      }
      .inviteLogoClass{
        margin-top: 0.34rem;
        display: flex;
        justify-content: center;
        width: 100%;
        img{
          border-radius: 50%;
          width: 1.3rem;
          height: 1.3rem;
        }
      }
      .inviteNameClass{
        font-size: 0.26rem;
        color: #524318;
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 0.16rem;
      }
      .inviteNameClass1{
        color: #5e4e1b;
        font-size: 0.54rem;
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0 1.3rem;
        margin-top: 0.4rem;
      }
      .inviteNameClass2{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 0.18rem;
        color: #564615;
        font-size: 0.28rem;
          img{
            width: 0.2rem;
            height: 0.20rem;
            margin-right: 0.08rem;
          }
      }
      .inviteBtnClass0{
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0.5rem 0 0.38rem 0;
        img{
          width: 1.75rem;
          height: 3.72rem;
        }
      }
      .inviteBtnClass{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 1.14rem;
        img{
          width: 3.64rem;
          height: 0.94rem;
        }
      }
    }
  }
</style>
