chelvc-custom/src/pages/client/clientUser/mine/setting.vue

<template>
  <view class="container">
    <view class="main-out-box">
      <view class="main-inner-box">
        <u-cell-group :border="false">
          <u-cell
            size="large"
            :border="false"
            icon="account-fill"
            title="个人信息"
            isLink
            url="/pages/client/clientUser/mine/setting/personInfo"
          />
          <u-cell
            size="large"
            :border="false"
            icon="fingerprint"
            title="安全中心"
            isLink
            url="/pages/client/clientUser/mine/setting/personInfo"
          />
          <u-cell
            size="large"
            :border="false"
            icon="github-circle-fill"
            title="关于我们"
            isLink
            url="/pages/client/clientUser/mine/setting/aboutMine"
          />
          <u-cell
            size="large"
            :border="false"
            icon="file-text-fill"
            title="用户协议"
            isLink
            url="/pages/client/clientUser/mine/setting/agreement"
          />
          <u-cell
            size="large"
            :border="false"
            icon="file-text"
            title="隐私政策"
            isLink
            url="/pages/client/clientUser/mine/setting/privacyPolicy"
          />
          <u-cell icon="integral-fill" title="版本信息" value="V0.0.1" />
        </u-cell-group>
      </view>
    </view>
    <SwitchIdentityDialog v-if="showSwitchDialog" @confirm="confirmSwitch" @cancel="cancelSwitch">
      <p>您确定要从用户/商家端切换到商家段/用户端吗？</p>
      <br />
      <br />
    </SwitchIdentityDialog>
    <view class="policy-out-box">
      <view class="policy-inner-box">
        <u-cell-group :border="false">
          <u-cell
            size="large"
            :border="false"
            icon="level"
            title="切换身份"
            isLink
            @click="openSwitchDialog"
          />
        </u-cell-group>
      </view>
    </view>
    <view class="exit">
      <u-row class="button" justify="center" align="center">
        <u-col span="24">
          <u-button type="info" shape="circle" text="注销账号" :style="{ width: '500rpx' }" />
        </u-col>
      </u-row>
      <u-row class="button" justify="center" align="center">
        <u-col span="24">
          <u-button type="primary" shape="circle" text="退出登录" :style="{ width: '500rpx' }" />
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
import SwitchIdentityDialog from '@/components/SwitchIdentityDialog/SwitchIdentityDialog.vue';

export default {
  components: {
    SwitchIdentityDialog,
  },
  data() {
    return {
      showSwitchDialog: false,
    };
  },

  mounted() {},

  methods: {
    // 获取当前用户信息
    handlerInitUserMessage() {
      maintainUserInfo().then(res => {
        this.user_info = res.data;
      });
    },

    // 点击跳转到全部订单
    gotoOrder(item) {
      uni.navigateTo({
        url: `/pages/client/clientPackage/orderAll?type=${item.type}`,
      });
    },

    // 点击跳转到我的收益
    handlerSkipMyProfit() {
      uni.navigateTo({
        url: '/pages/client/clientUser/myProfit',
      });
    },
    // 点击身份切换
    openSwitchDialog() {
      // 打开切换身份确认弹框
      this.showSwitchDialog = true;
    },
    confirmSwitch() {
      // 点击确认切换身份
      // 处理身份切换逻辑
      uni.setStorageSync('tabbar_type', false);
      uni.navigateTo({
        url:'/pages/merchant/tabBar/extend/index'
      })
      // ... 其他操作
    },
    cancelSwitch() {
      // 点击取消切换身份
      this.showSwitchDialog = false;
      // ... 其他操作
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #efefef;
  .main-out-box {
    padding: 20rpx 16rpx;
    box-sizing: border-box;
    .main-inner-box {
      background-color: $uni-bg-color;
      border-radius: 20rpx;
    }
  }
  .policy-out-box {
    padding: 50rpx 16rpx;
    box-sizing: border-box;
    .policy-inner-box {
      background-color: $uni-bg-color;
      border-radius: 20rpx;
    }
  }
}
.exit {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button {
  margin-top: 35rpx;
}
</style>