kailin_mp/pages/user/follow.vue

<template>
  <view>
    <uni-popup ref="addFollow" type="center" class="center_popup" :mask-click="false">
      <view class="add_follow">
        <view class="close_area"> </view>
        <view class="qr_code_area" @click="followLinkurl">
          <image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress></image>
        </view>
        <view class="info_alter">
          <text v-if="follow_linkurl">点击二维码添加客服</text>
          <text v-if="!follow_linkurl">长按二维码添加客服</text>
        </view>
        <view class="rule_info">
          <view class="">规则：</view>
          <view class="">1、预约报单需要添加客服人员</view>
          <view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
          <view class="">3、开始预约报单</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      followQrcode: "",
      follow_linkurl: "",
    };
  },
  onShow() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 判断数据
    this.$http.request("api/custom/get_info").then((callback) => {
      if (callback.code == "success") {
        if (!callback.data.userpic) callback.data.userpic = "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png";
        // 存储登录标识
        uni.setStorageSync("userInfo", callback.data);
      }
    });
    this.openAddFollow();
  },
  methods: {
    // 客服显示
    openAddFollow() {
      // 返回结果
      this.followQrcode = this.$checkAccess.getFollowQrcode();
      // 返回结果
      this.follow_linkurl = this.$checkAccess.getFollowLinkUrl();
      // 有图才展示
      if (this.followQrcode) this.$refs.addFollow.open("center");
    },
    closeAddFollow() {
      this.$refs.addFollow.close();
    },
    // 去往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">
// 添加客服
.center_popup {
  .add_follow {
    display: block;
    color: #ffffff;
    width: 700rpx;
    height: 900rpx;
    margin: 0 auto;
    font-size: 26rpx;
    border-radius: 40rpx;
    background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
    .close_area {
      height: 30rpx;
      display: block;
      line-height: 30rpx;
    }
    .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: 60rpx 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: 60rpx;
    }
  }
}
</style>