chelvc-custom/src/pages/merchant/mine/setting/index.vue

<template>
  <view class="container">
    <view class="item-content">
      <view class="item-box" @click="handlerSkipAccountSafety">
        <view class="item-l"> 账号与安全 </view>
        <view class="item-r">
          <u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
        </view>
      </view>
    </view>

    <view class="item-content">
      <!-- <view class="item-box">
        <view class="item-l"> 新消息通知 </view>
        <view class="item-r">
          <u-switch v-model="value" activeColor="#5992BB"></u-switch>
        </view>
      </view> -->
      <view class="item-box">
        <view class="item-l"> 隐私政策 </view>
        <view class="item-r">
          <u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
        </view>
      </view>
      <!-- <view class="item-box">
        <view class="item-l"> 选择语言 </view>
        <view class="item-r">
          <p>简体中文</p><u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
        </view>
      </view> -->
    </view>

    <view class="item-content">
      <view
        class="item-box"
        v-for="(item, index) of privacy_list"
        :key="item.id"
        @click="handlerSkipPrivacy(item)"
      >
        <view class="item-l"> {{ item.name }} </view>
        <view class="item-r">
          <u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
        </view>
      </view>
    </view>

    <view class="btn-box">
      <!-- <button class="btn1" @click="showSwitchDialog = true">切换身份</button>
      <button class="btn2" @click="loginout_show = true">退出登录</button> -->
      <u-button class="btn1" @click="showSwitchDialog = true" text="切换身份"></u-button>
      <u-button
        class="btn2"
        @click="loginout_show = true"
        type="primary"
        text="退出登录"
      ></u-button>
    </view>
    <u-modal
      :show="showSwitchDialog"
      :showCancelButton="true"
      :title="title"
      :content="content"
      @confirm="confirmSwitch"
      @cancel="showSwitchDialog = false"
    ></u-modal>
    <u-modal
      :show="loginout_show"
      :content="content1"
      :title="title"
      :showCancelButton="true"
      @confirm="handlerLoginOutConfirm"
      @cancel="loginout_show = false"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: true,
      icon_size: 18,
      loginout_show: false,
      content: '您确定要从商家端切换到用户端吗',
      content1: '您确定要退出登录？确定将同时退出用户端哦',
      title: '温馨提示',
      privacy_list: [
        {
          name: '应用权限说明',
          id: 0,
        },
        {
          name: '个人信息收集清单',
          id: 1,
        },
        {
          name: '第三方共享个人信息清单',
          id: 2,
        },
        {
          name: '关于我们',
          id: 3,
        },
      ],
      showSwitchDialog: false,
    };
  },
  methods: {
    // 点击切换账号
    // handlerSwitchAccount(){

    // },
    confirmSwitch() {
      // 点击确认切换身份
      // 处理身份切换逻辑
      this.$store.dispatch('SwitchIdentity','CUSTOMER')
      uni.switchTab({
        url: '/pages/client/tabBar/mine/index',
      });
      // ... 其他操作
    },
    // 跳转到账号与安全
    handlerSkipAccountSafety() {
      uni.navigateTo({
        url: `/pages/tabBar/mine/setting/accountSafety`,
      });
    },
    // 点击跳转到隐私页面
    handlerSkipPrivacy(item) {
      uni.navigateTo({
        url: `/pages/tabBar/mine/setting/privacyPolicy?type=${item.id}`,
      });
    },
    //点击退出登录
    handlerLoginOutConfirm() {
      this.loginout_show = false;
      this.$store.dispatch('Logout').then(()=>{
        uni.navigateTo({
          url: `pages/login/index`,
        });
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: calc(100vh - 40rpx);
  padding-top: 40rpx;

  .item-content {
    margin-bottom: 40rpx;

    .item-box {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 20rpx 40rpx;
      font-size: 30rpx;

      .item-r {
        display: flex;
        font-size: 26rpx;
        color: #b0b0b0;
      }
    }
  }
}
.btn-box {
  width: 70%;
  margin: 100rpx auto 0;
  .btn1,
  .btn2 {
    padding: 20rpx;
    height: 80rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    border-radius: 35rpx;
  }
  .btn1 {
    // background-color: #5992bb;
    // color: #000;
  }
  .btn2 {
    margin-top: 50rpx;
    // background-color: #e2e2e2;
  }
}
::v-deep .u-modal__content__text.data-v-713d0fd3 {
  text-align: center;
}
</style>