<!-- /components/JoinPopup.vue -->
<template>
  <uni-popup ref="popup" type="center" background-color="#fff">
    <view class="join-content">
      <view class="join-header">
        <view class="iconfont icon-hezuo"></view>
      </view>
      <view class="join-body">
        <view class="title">
          {{ title }}
        </view>
        <view class="subtitle">
          {{ subtitle }}
        </view>
      </view>
      <view class="join-footer" @click="handleConfirm">
        {{ confirmText }}
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: "JoinPopup",
  props: {
    // 弹窗标题
    title: {
      type: String,
      default: "您还未加盟为合伙人"
    },
    // 弹窗副标题
    subtitle: {
      type: String,
      default: "成为合伙人后，分享商品，好友购物得收益"
    },
    // 确认按钮文字
    confirmText: {
      type: String,
      default: "去加盟拿收益"
    }
  },
  methods: {
    // 打开弹窗
    open() {
      this.$refs.popup.open();
    },
    // 关闭弹窗
    close() {
      this.$refs.popup.close();
    },
    // 确认按钮点击事件
    handleConfirm() {
      this.$emit("confirm");
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.join-content {
  width: 500rpx;
  border-radius: 30rpx;
  background-color: #fff;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  
  .join-header {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: rgba(54, 57, 169, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    
    .icon-hezuo {
      font-size: 35rpx;
      color: #fff;
    }
  }
  
  .join-body {
    margin-bottom: 20rpx;
    text-align: center;
    
    .title {
      font-size: 30rpx;
      color: rgba(38, 41, 44, 1);
      font-weight: 600;
    }
    
    .subtitle {
      color: rgba(145, 144, 148, 1);
      font-size: 26rpx;
      margin-top: 10rpx;
    }
  }
  
  .join-footer {
    width: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20rpx 0;
    background: rgba(54, 57, 169, 1);
    border-radius: 60rpx;
    font-size: 28rpx;
  }
}
</style>