i

src/pages/users/user_setting/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '个人资料',
+})

src/pages/users/user_setting/index.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import Taro from '@tarojs/taro'
+
+const toPage = (e: string) => {
+}
+
+const logOut = () => {
+  Taro.showModal({
+    title: '提示',
+    content: '确定退出登录吗？',
+    success: function (res) {
+      if (res.confirm) {
+        Taro.removeStorageSync('token')
+        Taro.removeStorageSync('userInfo')
+        Taro.reLaunch({
+          url: '/pages/index/index'
+        })
+      } else if (res.cancel) {
+        console.log('用户点击取消')
+      }
+    }
+  })
+}
+
+</script>
+
+<template>
+  <view class="app">
+    <view class="user-card">
+      <view>管理我的账号</view>
+      <view class="avatar-card">
+        <view class="left">
+          <nut-avatar size="large">
+            <img
+                src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+            />
+          </nut-avatar>
+          <view class="name">微信用户</view>
+        </view>
+      </view>
+    </view>
+    <nut-cell-group>
+      <nut-cell title="昵称" desc="微信用户" is-link></nut-cell>
+      <nut-cell title="ID" desc="1" is-link></nut-cell>
+      <nut-cell title="手机号码" desc="18888888888" is-link></nut-cell>
+      <nut-cell title="登录密码" desc="修改登录密码" is-link></nut-cell>
+      <nut-cell title="注销账号" desc="账号注销后不能恢复" is-link></nut-cell>
+    </nut-cell-group>
+    <view class="btn">
+      <nut-button block type="primary" @click="logOut">退出登录</nut-button>
+    </view>
+
+  </view>
+</template>
+
+<style lang="scss">
+.user-card {
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+  margin: auto;
+  position: relative;
+  top: 10px;
+  padding: 30px;
+
+  .avatar-card {
+    background-color: rgba(255, 0, 0, 0.1);
+    margin: 20px auto;
+    border-radius: 20px;
+    border: 1px solid #ff0000;
+    display: flex;
+    align-items: center;
+    padding: 30px;
+    position: relative;
+
+    .left {
+      margin-left: 10px;
+      display: flex;
+      align-items: center;
+      position: relative;
+      justify-content: space-between;
+
+      .name {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
+.btn {
+  padding: 0 40px;
+}
+
+</style>