usky-web-mobile/src/pages/mine/info/index.vue

<template>
  <view :data-theme="'theme-' + proxy.$settingStore.themeColor.name" class="info-container">
    <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
      <u-tabs
        :list="tabsList"
        :current="tabsCurrent"
        @click="tabsClick"
        lineColor="#333"
        :activeStyle="{ color: '#333', fontSize: '14px' }"
        :inactiveStyle="{ color: '#909399', fontSize: '14px' }"
        :scrollable="false"
      ></u-tabs>
    </u-sticky>

    <view class="content-section" v-show="tabsCurrent == 0">
      <view class="menu-list mt0 mlr0">
        <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToAvatar(2)">
          <view class="menu-item">
            <view class="title">头像</view>
            <image style="margin: 0 15px 0 auto" v-if="avatar" :src="avatar" class="cu-avatar radius"> </image>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改昵称')">
          <view class="menu-item">
            <view class="title">昵称</view>
            <view class="text-right content">{{ user.nickName }}</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改手机号')">
          <view class="menu-item">
            <view class="title">手机号</view>
            <view class="text-right">{{ user.phonenumber }}</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改邮箱')">
          <view class="menu-item">
            <view class="title">邮箱</view>
            <view class="text-right">{{ user.email }}</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改性别')">
          <view class="menu-item">
            <view class="title">性别</view>
            <view class="text-right">{{ user.sex == "0" ? "男" : "女" }}</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <view class="menu-item">
            <view class="title">我的名片</view>
          </view>
        </view>
      </view>

      <view class="menu-list mt0 mlr0">
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <view class="menu-item">
            <view>个人实名认证</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <view class="menu-item">
            <view>更多</view>
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="user-section" :class="'bg-' + proxy.$settingStore.themeColor.name" :style="{ paddingTop: '44px' + proxy.$settingStore.StatusBarHeight }">
      <image class="bg" src="@/static/images/mine/user-bg.png"></image>
      <view class="portrait-box">
        <image v-if="!avatar" @click="proxy.$settingStore.handleToAvatar(1)" class="portrait" src="@/static/images/mine/missing-face.png"></image>
        <image v-if="avatar" @click="proxy.$settingStore.handleToAvatar(2)" :src="avatar" class="portrait cu-avatar xl round"> </image>
      </view>
    </view> -->

    <!-- <uni-list>
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称" :rightText="user.nickName" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'phone-filled' }" title="手机号" :rightText="user.phonenumber" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'email-filled' }" title="邮箱" :rightText="user.email" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="岗位" :rightText="postGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'staff-filled' }" title="角色" :rightText="roleGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期" :rightText="user.createTime" />
    </uni-list> -->

    <!-- <view class="example">
      <uni-forms ref="form" :model="user" labelWidth="80px">
        <uni-forms-item label="用户昵称" name="nickName">
          <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
        </uni-forms-item>
        <uni-forms-item label="手机号" name="phonenumber">
          <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号" />
        </uni-forms-item>
        <uni-forms-item label="邮箱" name="email">
          <uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" required>
          <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" class="round font30" @click="submit">修改资料</button>
    </view> -->
  </view>

  <u-modal :show="modalShow" :showConfirmButton="true" :showCancelButton="true" @cancel="modalShow = false" @confirm="handleConfirm">
    <view class="slot-content" style="width: 100%">
      <view class="mb15" style="text-align: center; color: #000; font-weight: 600">{{ modalTitle }}</view>

      <view v-if="modalTitle === '修改昵称'">
        <u--input v-model="userArr.nickName" :maxlength="5" :placeholder="modalTitle" border="bottom" clearable></u--input>
      </view>

      <view v-if="modalTitle === '修改手机号'">
        <u-input v-model="phone" placeholder="请输入手机号" :maxlength="11" border="bottom" />
        <u-input v-model="verify" placeholder="请输入验证码" :maxlength="6" border="bottom">
          <template #suffix>
            <button class="verify" @click="getVerifyCode">{{ !useStore.codeTime ? "获取验证码" : useStore.codeTime + "s" }}</button>
          </template>
        </u-input>
      </view>

      <view v-if="modalTitle === '修改邮箱'">
        <u--input v-model="userArr.email" :placeholder="modalTitle" border="bottom" clearable></u--input>
      </view>

      <view v-if="modalTitle === '修改性别'">
        <u-radio-group v-model="userArr.sex" placement="row">
          <u-radio v-for="se in sexs" :key="se" :activeColor="proxy.$settingStore.themeColor.color" :label="se.text" :name="se.value" style="margin-right: 15px"></u-radio>
        </u-radio-group>
      </view>
    </view>
  </u-modal>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { updateUserProfile, getUserProfile } from "@/api/system/user";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  tabsList: [{ name: "个人信息" }, { name: "企业/团队" }],
  tabsCurrent: 0,

  sexs: [
    { text: "男", value: "0" },
    { text: "女", value: "1" },
  ],

  modalShow: false,
  modalTitle: "",

  phone: undefined,
  verify: undefined,
});

const { tabsList, tabsCurrent, sexs, modalShow, modalTitle, phone, verify } = toRefs(state);
const { avatar, user, userArr, postGroup, roleGroup } = toRefs(useStore);

function handleUserModal(title) {
  state.modalShow = true;
  state.modalTitle = title;
}

function handleConfirm() {
  if (state.modalTitle == "修改昵称") {
    if (!userArr.value.nickName) {
      proxy.$modal.showToast("昵称不能为空");
      return;
    }

    updateUserProfile(userArr.value).then((response) => {
      proxy.$tab.reLaunch("/pages/mine");
      useStore.GetUser();
    });
  }

  if (state.modalTitle == "修改手机号") {
    useStore.PhoneVerify({
      data: {
        phone: phone.value,
        verify: verify.value,
      },
      success: (res) => {
        userArr.value.phonenumber = phone.value;

        updateUserProfile(userArr.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          proxy.$tab.reLaunch("/pages/mine");
          useStore.GetUser();
        });
      },
      error: (res) => {
        return false;
      },
    });
  }

  if (state.modalTitle == "修改邮箱") {
    if (!userArr.value.email) {
      proxy.$modal.showToast("邮箱不能为空");
      return;
    }

    if (!/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(userArr.value.email)) {
      proxy.$modal.showToast("请输入正确的邮箱地址");
      return;
    }

    updateUserProfile(userArr.value).then((response) => {
      proxy.$tab.reLaunch("/pages/mine");
      useStore.GetUser();
    });
  }

  if (state.modalTitle == "修改性别") {
    if (!userArr.value.sex) {
      proxy.$modal.showToast("请选择性别");
      return;
    }

    updateUserProfile(userArr.value).then((response) => {
      proxy.$tab.reLaunch("/pages/mine");
      useStore.GetUser();
    });
  }
}

/**
 * @点击发送验证码
 */
function getVerifyCode() {
  state.verify = undefined;
  useStore.GetCodeImg({
    phone: state.phone,
    success: (res) => {
      proxy.$modal.msgSuccess("发送成功");
    },
  });
}

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  state.tabsCurrent = e.index;
}

onLoad((options) => {
  useStore.GetUser();
});

onReady(() => {
  // const form = ref(null);
  // form.value.setRules(rules.value);
});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    proxy.$tab.navigateTo("/pages/mine/setting/index");
  }
});
</script>

<style lang="scss" scoped>
:deep(.uni-page-head__title) {
  opacity: 1 !important;
}

.info-container {
  .user-section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    padding-top: 44px;
    overflow: hidden;
    position: relative;

    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100vw;
      opacity: 0.84;
    }

    .portrait {
      position: relative;
      width: 104px;
      height: 104px;
      border-radius: 50%;
      border: 3px solid #fff;
    }
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }

  .segmented-control {
    margin-bottom: 15px;
  }

  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }
}
</style>