baokan_mp/pages/services/index.vue

<template>
  <view class="add_follow" catchtouchmove="true">
    <view class="info_alter">
      <text v-show="userInfo?.follow_linkurl">点击二维码添加客服</text>
      <text v-show="!userInfo?.follow_linkurl">长按二维码添加客服</text>
    </view>
    <view class="qr_code_area">
      <image :src="userInfo?.follow_qrcode" class="qr_code" mode="" show-menu-by-longpress> </image>
    </view>
    <!-- <view class="rule_info">
      <view class="">报单规则：</view>
      <view class="">1、预约报单需要添加客服人员</view>
      <view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
      <view class="">3、开始预约报单</view>
    </view> -->
  </view>
</template>

<script>
export default {
  onReady() {
    // 判断数据
    this.$http.request("api/custom/get_info").then((callback) => {
      if (callback.code == "success") {
        // 赋值
        this.userInfo = callback.data;
      }
    });
  },
  data() {
    return {
      userInfo: {
        follow_linkurl: this.$checkAccess.getFollowLinkUrl(),
        follow_qrcode: this.$checkAccess.getFollowQrcode(),
      },
    };
  },
};
</script>

<style lang="less" scoped>
.add_follow {
  display: block;
  color: #ffffff;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  font-size: 26rpx;
  background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
  padding-top: 200rpx;
  .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>