horzi_rai_wxa/pages/my/my.vue

<template>
  <view class="container my-container" v-if="haveData">
    <view class="my-top-info">
      <image :src="userInfo.Headimgurl" class="avatar" v-if="isLogin && userInfo.Headimgurl"></image>
      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/default_avatar.png" class="avatar" v-else></image>
      <view class="right-section">
        <template v-if="isLogin">
          <view class="info-item space-item text_oneLine" v-if="userInfo.Mobile || userInfo.Email">
            <view class="item-label" decode="true">{{ userInfo.Mobile ? "手机号" : "邮&nbsp;&nbsp;&nbsp;箱" }}</view>
            ：{{ userInfo.Mobile || userInfo.Email }}
          </view>
          <view class="info-item space-item text_oneLine"> <view class="item-label" decode="true">姓&nbsp;&nbsp;&nbsp;名</view>：{{ userInfo.RealName || "暂无" }} </view>
          <view class="info-item text_oneLine"> <view class="item-label" decode="true">公&nbsp;&nbsp;&nbsp;司</view>：{{ userInfo.CompanyName || "暂无" }} </view>
        </template>
        <button class="no-log" v-else @click="loginHandle">{{ login_txt }}</button>
      </view>
    </view>
    <view class="auth-cont">
      <image src="https://hzstatic.hzinsights.com/cygx/czbk/auth_bg.png" class="auth_bg"></image>
      <view class="auth-info">
        <template v-if="isLogin">
          <text class="info-label">我的权限：</text>
          <scroll-view scroll-x="true" scroll-with-animation class="auth-ul" v-if="userInfo.HasPermission === 0">
            <!-- <view class="auth-ul" > -->
            <text class="auth-li" v-for="item in authList" :key="item">{{ item }}</text>
            <!-- </view> -->
          </scroll-view>
          <block v-else>
            <text class="no-auth">{{ userInfo.HasPermission === 3 ? "权限申请已提交，请等待审核" : "暂未开通行业权限" }}</text>
            <button class="auth-btn" @click="applyAuth" v-if="userInfo.HasPermission != 3">申请开通</button>
          </block>
        </template>
        <text class="notlog-tip" v-else>让好的研究不再是奢侈品</text>
      </view>
    </view>
    <view class="my-bot-cont">
      <view class="list-item border_bottom" @click="itemClickHandle('外呼')">
        <text>外呼号码</text>
        <view class="my-bot-box">
          <text v-if="userInfo.OutboundCountryCode && userInfo.OutboundMobile" style="margin-right: 40rpx; font-size: 28rpx">{{ userInfo.OutboundCountryCode }}-{{ userInfo.OutboundMobile }}</text>
          <text v-else style="margin-right: 40rpx; font-size: 28rpx">未设置</text>
          <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
        </view>
      </view>
    </view>
    <view class="my-bot-cont">
      <view class="list-item border_bottom" @click="itemClickHandle('提问')">
        <text>我的提问</text>
        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
      </view>
      <view class="list-item border_bottom" v-for="type in typeArr" :key="type" @click="itemClickHandle(type)">
        <text>{{ type }}</text>
        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import { Mine, checkToken, User } from "@/config/api.js";
let app = getApp();
export default {
  data() {
    return {
      isLogin: false, //是否绑定且授权
      login_txt: "",
      haveData: null, //显示页面
      typeArr: ["我的收藏", "访谈申请", "浏览历史", "优化建议"],
      typeObj: new Map([
        ["我的收藏", "myCollection"],
        ["访谈申请", "applyInterview"],
        ["浏览历史", "browseHistory"],
        ["优化建议", "advice"],
      ]),
      userInfo: {},
      authList: [],
    };
  },
  async onShow() {
    await this.$store.dispatch("checkHandle", "noGO");
    this.haveData = true;
    if (!this.$store.state.isAuth && !this.$store.state.isBind) {
      //已授权已绑定
      this.isLogin = true;
      this.getUser();
    } else {
      this.login_txt = this.$store.state.isAuth ? "点击登录" : "绑定联系方式";
      this.isLogin = false;
    }
  },
  methods: {
    /* 检查状态 */
    /* 获取用户信息 */
    getUser() {
      Mine.getInfo().then((res) => {
        if (res.Ret === 200) {
          this.authList = res.Data.PermissionName && res.Data.PermissionName.split(",");
          this.userInfo = res.Data;
          res.Data.Mobile && this.$db.set("mobile", res.Data.Mobile);
        }
      });
    },
    /* 点击登录 检验是否绑定或是否授权*/
    loginHandle() {
      /* 先授权再绑定 */
      if (this.$store.state.isAuth) {
        uni.navigateTo({
          url: "/pageMy/authGuide/authGuide",
        });
      } else {
        this.$store.state.isBind &&
          uni.navigateTo({
            url: "/pageMy/login/login",
          });
      }
    },
    /* 申请开通权限 */
    applyAuth() {
      /* 查看是否是潜在用户 */
      this.userInfo.HasPermission === 1
        ? User.applyTry({
            ApplyMethod: 3,
          }).then((res) => {
            if (res.Ret === 200) {
              uni.navigateTo({
                url: "/pageMy/applyResult/applyResult",
              });
            }
          })
        : this.userInfo.HasPermission === 2
        ? uni.navigateTo({
            url: "/pageMy/applyTrial/applyTrial",
          })
        : this.userInfo.HasPermission === 3
        ? uni.showModal({
            title: "",
            content: "您已经提交过申请了，请耐心等待",
            showCancel: false,
            confirmColor: "#365595",
            success: function (res) {},
          })
        : "";
    },
    /* 路径跳转 */
    itemClickHandle(type) {
      /* 是否登录 */
      if (this.isLogin) {
        if (type == "外呼") {
          uni.navigateTo({
            url: "/activityPages/editOutbound/editOutbound?title=设置外呼号码&identification=我的",
          });
        } else if (type == "提问") {
          uni.navigateTo({
            url: "/reportPages/myAskPage/myAskPage",
          });
        } else {
          let path = this.typeObj.get(type);
          uni.navigateTo({
            url: `/pageMy/${path}/${path}`,
          });
        }
      } else {
        this.loginHandle();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my-container {
  background-color: #fff;
  .my-top-info {
    padding: 30rpx 34rpx;
    display: flex;
    align-items: center;
    .avatar {
      width: 168rpx;
      height: 168rpx;
      border-radius: 50%;
      margin-right: 45rpx;
      border: 1rpx solid #ccc;
    }
    .right-section {
      font-size: 34rpx;
      .info-item {
        width: 450rpx;
        .item-label {
          // text-align: justify;
          // text-align-last: justify;
          display: inline-block;
          // width: 110rpx;
        }
        &.space-item {
          margin-bottom: 10rpx;
        }
      }
      .no-log {
        padding: 0 20rpx;
        height: 56rpx;
        line-height: 52rpx;
        background-color: #fff;
        color: #3385ff;
        font-size: 24rpx;
        border: 2rpx solid #3385ff;
      }
    }
  }
  .auth-cont {
    width: 682rpx;
    height: 153rpx;
    margin: 38rpx auto;
    padding: 24rpx 36rpx;
    position: relative;
    color: #4a4a4a;
    .auth_bg {
      width: 682rpx;
      height: 153rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
    .auth-info {
      position: relative;
      .notlog-tip {
        font-size: 30rpx;
        color: #333333;
        line-height: 105rpx;
        text-align: center;
      }
      .info-label {
        font-size: 34rpx;
      }
      .auth-ul {
        width: 100%;
        white-space: nowrap;
        margin-top: 15rpx;
        color: #333;
        .auth-li {
          display: inline-block;
          padding: 6rpx 20rpx;
          border: 1rpx solid #333333;
          border-radius: 4rpx;
          font-size: 24rpx;
          margin-right: 20rpx;
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .no-auth {
        font-size: 28rpx;
        margin-top: 20rpx;
      }
      .auth-btn {
        width: 139rpx;
        height: 56rpx;
        background: rgba(255, 255, 255, 0.1);
        color: #3385ff;
        font-size: 24rpx;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        line-height: 56rpx;
        border: 2rpx solid #3385ff;
      }
    }
  }
  .my-bot-cont {
    .my-bot-box {
      display: flex;
    }
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 34rpx;
      color: #4a4a4a;
      padding: 33rpx 34rpx;
      .icon-area {
        width: 100rpx;
      }
    }
  }
}
</style>