cultivationApp/pages/index/personal.vue

121 lines
2.4 KiB
Vue
Raw Permalink Normal View History

2023-11-21 18:54:33 +08:00
<template>
<view class="head">
<view class="avater">
<u--image @click="previewImageFn" :src="url" width="130.28rpx" height="130.28rpx" shape="circle"></u--image>
</view>
<view class="">
<view class="head-li">
姓名: 咋还归纳
</view>
<view class="head-li">
电话: 15884967541
</view>
<view class="head-li">
公司: 里海弄农业科技有限公司
</view>
</view>
</view>
<view class="content">
<view class="card" style="border-radius: 20rpx;">
<view class="card-li" v-for="(item,index) in cardLiList" :key="index" @click="navto(item.nav)">
<view class="" style="display: flex;align-items: center;">
<view class="" style="margin-right: 20rpx;">
<u-icon size="20" :name="url"></u-icon>
</view>
<view class="">
{{item.text}}
</view>
</view>
<view class="">
<u-icon name="arrow-right" size="16"></u-icon>
</view>
</view>
</view>
<view class="out-btn">
<up-button @click="loginOutFn" type="primary" customStyle="border:none;height:90rpx" color="#34D190"
text="退出登录"></up-button>
</view>
</view>
</template>
<script setup lang="ts">
import {
reactive,
ref
} from 'vue';
const url = ref('https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg')
const previewImageFn = () => {
uni.previewImage({
urls: [
"https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg"
]
});
}
const cardLiList = reactive([{
text: "片区经s理"
},
{
text: "安全设置",
nav: "/pages/updatePassword/updatePassword"
},
])
const loginOutFn = () => {
uni.navigateTo({
url: "/pages/Login/login"
})
}
const navto = (url) => {
uni.navigateTo({
url
})
}
</script>
<style lang="scss" scoped>
.head {
height: 25vh;
background-color: $theme-main-color;
color: white;
display: flex;
align-items: center;
.head-li {
margin: 10rpx 0;
}
.avater {
margin: 0 40rpx;
}
}
.content {
height: 75vh;
background-color: $theme-bg-color;
padding-top: 30rpx;
.card {
background-color: white;
border-radius: 10rpx;
.card-li {
height: 80rpx;
line-height: 80rpx;
// background-color: red;
border-bottom: 1px solid #F5F5F5;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.out-btn {
width: 693.93rpx;
margin: auto;
}
}
</style>