kailin_mp/components/FollowPopup/FollowPopup.vue

<template>
  <view class="add_follow">
    <view class="close_area"><button class="close_btn" @click="closePopup">关闭</button></view>
    <view class="info_alter">
      <text v-show="follow_linkurl">{{ clickTitle }}</text>
      <text v-show="!follow_linkurl">{{ longTapTitle }}</text>
    </view>
    <view v-if="!picUrl" class="qr_code_area" @click="followLinkurl">
      <image :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress> </image>
    </view>
    <view v-if="picUrl">
      <view class="qr_code_area" @click="followLinkurl">
        <image :src="picUrl" class="qr_code" mode="" show-menu-by-longpress> </image>
      </view>
    </view>
    <view class="rule_info" v-if="showRule">
      <view class="">报单规则：</view>
      <view class="">1、预约报单需要添加客服人员</view>
      <view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
      <view class="">3、开始预约报单</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    //关闭弹窗
    closePopup: {
      type: Function,
      required: true,
    },
    showRule: {
      type: Boolean,
      default: true,
    },
    clickTitle: {
      type: String,
      default: "点击二维码添加客服",
    },
    longTapTitle: {
      type: String,
      default: "长按二维码添加客服",
    },
    picUrl: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      follow_linkurl: this.$checkAccess.getFollowLinkUrl(),
      followQrcode: this.$checkAccess.getFollowQrcode(),
    };
  },
  methods: {
    // 去往webview
    followLinkurl() {
      // 获取登录标识
      let userInfo = uni.getStorageSync("userInfo");
      // 如果不存在的话
      if (!userInfo) return "";
      // 未添加好友
      if (!userInfo.follow_linkurl) return "";
      // 获取Url
      let url = userInfo.follow_linkurl;
      // 没有路径，不跳转
      if (!url) return;
      // 判断是不是小程序链接
      if (url.includes("http")) {
        // 转码
        let link_url = encodeURIComponent(url);
        // 跳转到webview
        uni.redirectTo({
          url: `/pages/webview/index?link_url=${link_url}`,
        });
      } else {
        // 跳转到webview
        uni.navigateTo({
          url: url,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.add_follow {
  display: block;
  color: #ffffff;
  width: 700rpx;
  height: 800rpx;
  margin: 0 auto;
  font-size: 26rpx;
  border-radius: 40rpx;
  background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);

  .close_area {
    height: 80rpx;
    display: block;
    line-height: 80rpx;

    .close_btn {
      color: #ffffff;
      float: right;
      width: 80rpx;
      height: 80rpx;
      font-size: 26rpx;
      text-align: center;
      line-height: 80rpx;
      padding: 0rpx 0rpx;
      border: 0rpx solid transparent;
      background-color: transparent;
    }

    .close_btn::after {
      border: 0rpx solid transparent;
    }
  }

  .info_alter {
    display: block;
    height: 100rpx;
    font-size: 42rpx;
    font-weight: bold;
    text-align: center;
    line-height: 100rpx;
  }

  .qr_code_area {
    display: block;
    width: 300rpx;
    height: 300rpx;
    margin: 30rpx auto;

    .qr_code {
      float: left;
      width: 300rpx;
      height: 300rpx;
    }
  }

  .save_btn {
    color: #333333;
    display: block;
    width: 260rpx;
    height: 80rpx;
    font-size: 26rpx;
    text-align: center;
    line-height: 80rpx;
    padding: 0rpx 0rpx;
    margin: 40rpx auto;
    border-radius: 40rpx;
    background-color: #ffffff;
    border: 0rpx solid transparent;
  }

  .rule_info {
    width: 600rpx;
    display: block;
    font-size: 26rpx;
    margin: 20rpx auto;
    overflow: hidden;
    line-height: 40rpx;
  }
}
</style>