
 <template>
   <uni-popup ref="popup" type="center" background-color="#fff" v-if="visible">
     <!-- 你的弹窗内容 -->
     <view class="joinContent">
       <view class="title">{{ title }}</view>
	   <view class="joinHeader"  >
	     <view class="iconfont icon-exclamation" ></view>
	   </view>
       <view class="joinCon">
         <view class="one">{{ content }}</view>
		 <view class="qrCode" v-if="showCode">
		 	<image src="@/static/images/customer.jpg" mode="widthFix"></image>
		 </view>
       </view>
       <view class="joinFotter">
         <view @click="handleConfirm">{{ confirmText }}</view>
       </view>
     </view>
   </uni-popup>
 </template>
 
 <script>
 import {shareURL} from "@/environments/environment";
 export default {
   name: 'restrictedTip',
   props: {
     title: String,
     content: {
       type: String,
       default: '您的账号处在不可用状态，请扫码添加客服咨询情况'
     },
	 showCode: {
	   type: Boolean,
	   default: true
	 },
     confirmText: {
       type: String,
       default: '我知道了'
     }
   },
   data() {
     return {
       visible: false
     }
   },
   methods: {
     open() {
       this.visible = true
       this.$nextTick(() => {
         this.$refs.popup.open() // 确保DOM渲染后再打开
       })
     },
     close() {
       this.visible = false
     },
     handleConfirm() {
       this.close()
       this.$emit('confirm')
     }
   }
 }
 </script>

<style lang="scss" scoped>
::v-deep .uni-popup .uni-popup__wrapper{
		 margin: 0 !important;
		 border-radius: 30rpx;
	 }
.joinContent {
  width: 550rpx;
  border-radius: 30rpx;
  background-color: #ffff;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  .title{
	  text-align: center;
	  width: 100%;
  }
  .joinHeader {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #FFC300;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
	.icon-exclamation{
		color: #fff;
		font-size: 30rpx;
	}
  }
  
  .joinCon {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
    padding: 10rpx;
	box-sizing: border-box;
    .one {
      font-size: 28rpx;
      color: #F43530;
      text-align: center;
	  margin-bottom: 10rpx;
    }
    .qrCode{
		width: 50%;
		
		image{
			width: 100rpx;
		}
	}
    .two {
      color: rgba(145, 144, 148, 1);
      font-size: 26rpx;
      text-align: center;
      margin-top: 10rpx;
      margin-bottom: 20rpx;
    }
  }
  
  .joinFotter {
    width: 100%;
    color: #fff;
    display: flex;
    align-items: center;
	flex-direction: column;
    box-sizing: border-box;
    font-size: 26rpx;
    
    view {
	  width: 80%;
      background: rgba(54, 57, 169, 1);
      border-radius: 40rpx;
      padding: 20rpx;
	  text-align: center;
	  margin-top: 20rpx;
    }
  }
  .horizontal{
	  flex-direction: row;
	  justify-content: space-between;
	  view{
		 width: auto; 
		 border-radius:15rpx;
	  }
  }
}
</style>