<template>
    <div class="auth-page">
      <u-popup
        v-model="show"
        mode="center"
        :mask-close-able="false"
        custom-style="padding:0;background:none;"
      >
        <view class="contactInfor">
            <view class="contactInforTitle">
              联系方式
              <view class="contactInforClose">
                <u-icon name="close" color="#898989" size="40" @click="closeBtn" />
              </view>
            </view>
            <view>
                <view class="contactInforT">
                    <text>联系人</text>
                    <view>{{ infor.ContactName?infor.ContactName:'-' }}</view>
                </view>
                <view class="contactInforT">
                    <text>联系品牌</text>
                    <view @click="callPhone(infor.ContactPhone)"
                    :class="[infor.ContactPhone?'active':'']">{{ infor.ContactPhone?infor.ContactPhone:'-' }}</view>
                </view>
                <view class="contactInforT">
                    <text>线下合作</text>
                    <view @click="callPhone(infor.TongYiMobile)"
                    :class="[infor.TongYiMobile?'active':'']">{{ infor.TongYiMobile?infor.TongYiMobile:'-' }}</view>
                </view>
            </view>
            <!-- <view class="contactInfor_b"> -->
                <!-- <view class="contactInfor_b_item">
                    <text>取 消</text>
                </view> -->
                <!-- <view class="contactInfor_b_item" @click="closeBtn">
                    <text>确 认</text>
                </view> -->
            <!-- </view> -->
        </view>
      </u-popup>
    </div>
</template>
  
  <script>
  export default {
    props:['infor'],
    data() {
      return {
        show: true
      };
    },
    created() {
      
    },
    wacth: {
        infor: {
            handler: function(val, oldval) {
                
            },
            deep: true,
        },
    },
    methods: {
        callPhone(phone){
            if(phone){
              uni.makePhoneCall({
                  phoneNumber: phone
              })
            }
        },
        closeBtn(){
            this.$emit('closeBtn')
        }
    },
    onShow() {
        
    },
  };
  </script>
  
  <style>
.contactInforT:last-child{
    /* margin-bottom: 0rpx; */
}
.contactInforT view{
  color: #898989;
}
.contactInforT view.active{
  color: #017EDF;
}
.contactInforT text{
    
}
.contactInforT{
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
}
.contactInforClose{
  position: absolute;
  right: -15rpx;
  top: -15rpx;
}
.contactInforTitle{
    font-size: 32rpx;
    text-align: center;
    margin-bottom: 30rpx;
    font-weight: 500;
    position: relative;
}
.contactInfor{
    background: #fff;
    border-radius: 15px;
    padding: 40rpx;
    width: 516rpx;
}
.contactInfor_b_item text{
  font-weight: 500;
  font-size: 32rpx;
  color: #fff;
  line-height: 90rpx;
}
.contactInfor_b_item {
  width: 516rpx;
  height: 90rpx;
  background: #017EDF;
  border-radius: 18rpx;
  border: 2rpx solid #C6DEF1;
  text-align: center;
}
.contactInfor_b{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 57rpx;
  padding-bottom: 20rpx;
}
  .auth-page img {
    width: 650rpx;
    height: 700rpx;
  }
  
  .auth-page .hotsopt {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
  }
  
  .auth-page .hotsopt::after {
    border: none;
  }
  </style>