JM-MiniApp/pages/user/setting.vue
2023-10-19 23:23:22 +08:00

160 lines
4.3 KiB
Vue

<script setup>
import { onLoad } from "@dcloudio/uni-app"
// import mySwiper from "@/components/mySwiper.vue"
import {ref,onMounted,nextTick} from "vue"
import {useStore} from '@/store/index.js'
import api from "@/api/index.js"
onLoad(() => {
// console.log(useStore.userInfo)
userinfo.value = JSON.parse(uni.getStorageSync('userInfo'))
// console.log(userinfo.value)
avatar.value = uni.getStorageSync('avatarUrl')
})
const userinfo = ref(null)
const avatar = ref(null)
// 方法
function toDetail(type) {
}
</script>
<template>
<view class="userInfoBox page-box page-bg-gray">
<view class="row-box">
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="person" color="gray" size="26"></uni-icons> -->
用户协议</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="phone" color="gray" size="26"></uni-icons> -->
隐私政策摘要</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="calendar" color="gray" size="26"></uni-icons> -->
个人信息手机清单</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="paperplane" color="gray" size="26"></uni-icons> -->
关于我们</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="paperplane" color="gray" size="26"></uni-icons> -->
退出账号</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.avatar-box{
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
padding: 20rpx 0;
background: #26758d;
image{
width: 160rpx;
height: 160rpx;
background-color: white;
border-radius: 50%;
}
}
.rbc-content-right{
display: flex;
align-items: center;
background: white;
border-radius: 50%;
}
.rbc-content-left-box{
uni-icons{
margin-right: 20rpx;
}
display: flex;
align-items: center;
}
.row-box{
padding: 20rpx 0;
.rb-card{
padding: 20rpx;
background: white;
margin-bottom: 2rpx;
.rbc-title{
}
.rbc-content-box{
margin-top: 10rpx;
.rbc-content-row{
width: 50%;
text-align: center;
// padding: 40rpx 20rpx;
// box-shadow: 10rpx 10rpx 10rpx #cdcdcd;
border-radius: 10rpx;
}
}
.rbc-content{
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.btn-box{
text-align: center;
margin-top: 40rpx;
.btn{
display: inline-block;
padding: 10px 20px;
background: #e2e2e2;
color: #26758d;
border-radius: 10px;
width: 50%;
}
}
.userinfo-box{
position: relative;
image{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: white;
margin-right: 20rpx;
}
color: white;
background-color: #26758d;
display: flex;
align-items: center;
padding: 40rpx 20rpx;
}
.user-box{
background: #f6f6f6;
}
</style>