wx-qhb/pageC/accountSetup/accountSetup.vue

<template>
  <view class="page">
    <view class="set-top">
      <view
        class="information"
        @click="toNextPage('/pageC/personalInformation/personalInformation')"
      >
        <view class="information-lift">
          <image :src="userInfo.avatar" class="header-img" mode=""></image>
          <view class="name"> {{ userInfo.nickname }} </view>
        </view>
        <image
          class="right-icon"
          src="../../static/mine/325.png"
          mode=""
        ></image>
      </view>
      <view
        class="address"
        @click="
          toNextPage('/pageC/addressManagement/addressManagement?type=setup')
        "
      >
        <view class="address-manage">
          {{ i18n.address }}
        </view>
        <view class="text-right">
          <text>{{ i18n.addAndEdit }}</text>
          <image
            src="../../static/mine/325.png"
            class="right-icon"
            mode=""
          ></image>
        </view>
      </view>
    </view>

    <view class="set-center">
      <view
        class="security"
        @click="toNextPage('/pageC/accountSecurity/accountSecurity')"
      >
        <text>{{ i18n.account }}</text>
        <view class="text-right">
          <text>{{ i18n.password }}</text>
          <image
            src="../../static/mine/325.png"
            class="right-icon"
            mode=""
          ></image>
        </view>
      </view>
      <view
        class="switch"
        @click="toNextPage('/pageC/switchLanguage/switchLanguage')"
      >
        <text>{{ i18n.switch }}</text>
        <image
          src="../../static/mine/325.png"
          class="right-icon"
          mode=""
        ></image>
      </view>
    </view>

    <view class="set-bottom">
      <view class="text-1">
        <text>{{ i18n.user }}</text>
        <image
          src="../../static/mine/325.png"
          class="right-icon"
          mode=""
        ></image>
      </view>
      <view
        class="text-1"
        @click="toNextPage('/pageC/privacyPolicy/privacyPolicy')"
      >
        <text>{{ i18n.privacy }}</text>
        <image
          src="../../static/mine/325.png"
          class="right-icon"
          mode=""
        ></image>
      </view>
      <view class="text-1">
        <text>{{ i18n.platform }}</text>
        <image
          src="../../static/mine/325.png"
          class="right-icon"
          mode=""
        ></image>
      </view>
      <view class="text-2">
        <text>{{ i18n.merchant }}</text>
        <image
          src="../../static/mine/325.png"
          class="right-icon"
          mode=""
        ></image>
      </view>
    </view>

    <button class="layout" @click="layout">{{ i18n.layout }}</button>
  </view>
</template>

<script>
import AllRight from "../mineComponent/allRight/allRight.vue";
export default {
  components: {
    AllRight,
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.i18n.setup,
    });
  },
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    //退出登录
    layout() {
      uni.clearStorage();
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    toNextPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
    getUserInfo() {
      uni.getStorage({
        key: "user_info",
        success: ({ data }) => {
          this.userInfo = data;
        },
      });
    },
  },
  mounted() {
    this.getUserInfo();
    uni.setNavigationBarTitle({
      title: this.i18n.setup,
    });
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;

  .set-top {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 20rpx;

    .information {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 176rpx;

      .information-lift {
        display: flex;
        align-items: center;

        .header-img {
          border-radius: 50%;
          height: 116rpx;
          width: 116rpx;
          margin-right: 20rpx;
        }

        .name {
          font-size: 36rpx;
        }
      }
    }

    .address {
      display: flex;
      justify-content: space-between;
      height: 106rpx;
      align-items: center;
      border-top: 2rpx solid rgba(151, 151, 151, 0.2);
    }
  }

  .set-center {
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 20rpx;

    .security {
      display: flex;
      height: 102rpx;
      border-bottom: 2rpx solid rgba(151, 151, 151, 0.2);
      justify-content: space-between;
      align-items: center;
    }

    .switch {
      display: flex;
      justify-content: space-between;
      height: 104rpx;
      align-items: center;
    }
  }

  .set-bottom {
    border-radius: 16rpx;
    padding: 0 20rpx;
    background-color: #fff;
    margin-top: 20rpx;

    .text-1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 102rpx;
      border-bottom: 2rpx solid rgba(151, 151, 151, 0.2);
    }

    .text-2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 102rpx;
    }
  }

  .layout {
    border-radius: 16rpx;
    background-color: #fff;
    color: #f83224;
    font-size: 32rpx;
    height: 92rpx;
    margin-top: 20rpx;
  }

  .right-icon {
    width: 32rpx;
    height: 32rpx;
  }

  .text-right {
    display: flex;
    align-items: center;

    text {
      font-size: 30rpx;
      color: rgba(34, 34, 34, 0.5);
    }
  }
}
</style>