wanmeiyizhan/pages/userConfig/index.vue

<template>
  <view class="main">
    <view class="configList">
      <view class="configItem">
        <view class="itemLabel">修改手机号</view>
        <view class="itemRight">
          <text class="phoneText">{{ phone || "-" }}</text>
          <image class="rightImg" src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.svg" />
        </view>
      </view>

      <view class="configItem" v-if="false">
        <view class="itemLabel">切换账号</view>
        <view class="itemRight">
          <image class="rightImg" src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.svg" />
        </view>
      </view>

      <view class="configItem" v-if="loginType !== 'min'" @click="handleDeleteUser">
        <view class="itemLabel">注销账号</view>
        <view class="itemRight">
          <image class="rightImg" src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.svg" />
        </view>
      </view>

      <view class="configItem" v-if="loginType !== 'min'" @click="handleGoPrivaity">
        <view class="itemLabel">隐私管理</view>
        <view class="itemRight">
          <image class="rightImg" src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.svg" />
        </view>
      </view>
    </view>

    <view class="loginOut" v-if="loginType !== 'min'" @click="handleLoginOut">退出登录</view>
  </view>
</template>


<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      loginType: "",
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
    phone() {
      if (this.user && this.user.MEMBERSHIP_MOBILEPHONE) {
        let a = this.user.MEMBERSHIP_MOBILEPHONE.substring(0, 3);
        let b = this.user.MEMBERSHIP_MOBILEPHONE.substring(7, 11);
        return a + "****" + b;
      } else {
        return "";
      }
    },
  },
  onLoad() {
    console.log("user", this.user);

    let type = uni.getStorageSync("loginType");
    console.log("type", type);
    this.loginType = type;
    this.$utils.addUserBehaviorNew();
    // this.loginType = 'app';
  },
  methods: {
    // 退出登录
    handleLoginOut() {
      console.log("handleDeleteUser");
      let _this = this;
      uni.showModal({
        title: "确认退出登录?",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            // this.deleteAccount();
            _this.$store.commit("setUser", {});
            uni.setStorageSync("userInfo", {});
            setTimeout(() => {
              uni.showToast({
                title: "退出登录成功！",
                icon: "none",
              });
              uni.switchTab({
                url: "/pages/home/newIndex",
              });
            }, 500);
          }
        },
      });
    },
    // 注销账号
    handleDeleteUser() {
      console.log("handleDeleteUser");
      let _this = this;
      uni.showModal({
        title: "确认注销账号?",
        content: "注销账号后将永久丢失所有数据，此操作不可撤销",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            // this.deleteAccount();

            _this.$store.commit("setUser", {});
            uni.setStorageSync("userInfo", {});
            setTimeout(() => {
              uni.showToast({
                title: "注销成功！",
                icon: "none",
              });
              uni.switchTab({
                url: "/pages/home/newIndex",
              });
            }, 500);
          }
        },
      });

      // this.$store.commit("setUser", {});
      // uni.switchTab({
      //   url: "/pages/home/index",
      // });
    },
    // 跳转隐私策略的
    handleGoPrivaity() {
      uni.navigateTo({
        url: `/pages/thirdParty/newPage?url=http://saas.eshangtech.com/iosyinsi.html`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  min-height: 100vh;
  background: #ffffff;

  .configList {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;

    .configItem {
      width: 100%;
      padding: 36rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f0f0f0;

      .itemLabel {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 28rpx;
        color: #130f05;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .itemRight {
        .phoneText {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .rightImg {
          width: 24rpx;
          height: 24rpx;
          margin-left: 16rpx;
        }
      }
    }
  }

  .loginOut {
    width: calc(100vw - 64rpx);
    font-family: "PingFangSC";
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 44rpx;
    text-align: center;
    font-style: normal;
    padding: 22rpx 0;
    background: #ba922f;
    border-radius: 6rpx;
    position: fixed;
    left: 32rpx;
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}
</style>