VAVABUY/pages/setting/index.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="设置" fixed border>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <view class="lists" v-for="(item, index) in lists" :key="index">
          <view
            class="_list"
            v-for="(val, num) in item"
            :key="num"
            @click="handleTo(val.url)"
          >
            <template v-if="index === 0 && num === 0">
              <view class="_list_left">
                <up-image
                  :src="userInfo.userimg"
                  shape="circle"
                  width="120rpx"
                  height="120rpx"
                >
                  <template #error>
                    <image
                      class="userInfo_avatar"
                      src="@/static/avatar.png"
                    ></image>
                  </template>
                </up-image>
                <view class="user_info">
                  <view class="user_name"> {{ userInfo.realname }}</view>
                  <view class="user_id">
                    <trans _t="ID" />: {{ userInfo.newid }}
                  </view>
                </view>
              </view>
            </template>
            <template v-else>
              <view class="_list_text">
                <trans :_t="val.text" />
              </view>
            </template>
            <i class="icon-font icon-left"></i>
          </view>
        </view>
      </view>

      <view class="logout_btn-box">
        <DeleteAccount></DeleteAccount>
      </view>
    </view>
    <SimpleAgreementModal ref="agreementModal" />
  </Theme>
</template>

<script setup>
import DeleteAccount from "./compoments/deleteAccount.vue";
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import { computed, ref } from "vue";
import { useUserStore } from "@/store";

import SimpleAgreementModal from "@/components/simpleAgreementModal";

const useUser = useUserStore();

const userInfo = computed(() => useUser.getuserInfo);
const agreementModal = ref(null);
const lists = [
  [
    {
      text: "用户信息",
      url: "/pages/user/edit_user",
    },
    {
      text: "收件地址",
      url: "/pages/address/index",
    },
    {
      text: "账户安全",
      url: "/pages/setting/account-safety",
    },{
      text: "语言/币种",
      url: "/pages/setting/language_currency",
    },
    {
      text: "关于vavabuy",
      url: "about",
    },
    {
      text: "隐私政策",
      url: "private",
    },
    {
      text: "服务条款",
      url: "agree",
    },
  ],
];

const handleTo = (url) => {
  if (url.includes("/")) {
    uni.navigateTo({ url });
  } else {
    agreementModal.value && agreementModal.value.open(url);
  }
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background: var(--bg);
  min-height: 100vh;

  .content {
    .lists {
      background: var(--light);
      border-radius: 16rpx;
      margin: 24rpx;
      padding: 32rpx 12rpx 32rpx 24rpx;

      ._list {
        .flex_position(space-between);
        margin-top: 40rpx;

        ._list_left {
          .ver();

          .userInfo_avatar {
            width: 120rpx;
            height: 120rpx;
          }

          .user_info {
            .hor();
            flex-direction: column;
            margin-left: 24rpx;
            color: var(--text);

            .user_name {
              .size();
              font-weight: 700;
              line-height: 60rpx;
            }

            .user_id {
              .size(24rpx);
              line-height: 40rpx;
            }
          }
        }

        .icon-left {
          color: var(--text-01);
          transform: rotate(180deg);
          .size();
        }

        ._list_text {
          flex: 1;
          .size(28rpx);
          font-weight: 500;
          line-height: 60rpx;
        }
      }

      ._list:first-child {
        margin-top: 0;
      }
    }
  }
}

.logout_btn-box {
  /* position: fixed;
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 60rpx);
	max-width: 1536rpx; */

  width: calc(100% - 60rpx);
  margin: auto;
}
</style>