330 lines
10 KiB
Vue
330 lines
10 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 会员信息 -->
|
|
<view class="user">
|
|
<image class="user-cover" src="/static/imgs/default_myHead.png" mode="aspectFill"></image>
|
|
<block v-if="userLogin">
|
|
<image class="user-cover" @click="updImg('license')" :src="avatar" mode="aspectFill"></image>
|
|
<view class="user-nickname" @click="nameClick">{{ nickName ? nickName : '请登录' }}<image v-if="nickName" src="/static/icons/useredit_icon.png" mode=""></image></view>
|
|
<view class="user-tags" v-if="userData.hasCase">
|
|
<view class="user-tags-label" @click="$Router.push({name: 'Attestation', params: { hasCase: userData.hasCase }})">
|
|
用户档案<image src="/static/icons/userForm_icon.png"></image>
|
|
</view>
|
|
<view class="user-tags-label" @click="$Router.push({name: 'UserCase'})">
|
|
健康档案<image src="/static/icons/userForm_icon.png"></image>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
暂未添加档案
|
|
</view>
|
|
</block>
|
|
<view v-else @click="$Router.push({name: 'Login'})">
|
|
<view class="user-login">请先登录</view>
|
|
<!-- <image class="user-login-img" src="@/static/icons/userLogin_icon.png" mode="widthFix"></image> -->
|
|
</view>
|
|
</view>
|
|
<!-- 订单 -->
|
|
<!-- <view class="orders">
|
|
<view class="title">我的订单<text @click="$Router.push({name: 'OrderIndex', params: { listType: 'paid' }})">全部订单</text></view>
|
|
<view class="orders-flex">
|
|
<view class="order-item">
|
|
<image src="@/static/icons/order_01.png" mode="widthFix"></image>
|
|
<view class="text-text">待付款</view>
|
|
</view>
|
|
<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'paid' }})">
|
|
<image src="@/static/icons/order_02.png" mode="widthFix"></image>
|
|
<view class="text-text">待发货</view>
|
|
</view>
|
|
<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'delivered' }})">
|
|
<image src="@/static/icons/order_03.png" mode="widthFix"></image>
|
|
<view class="text-text">已发货</view>
|
|
</view>
|
|
<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'signed' }})">
|
|
<image src="@/static/icons/order_04.png" mode="widthFix"></image>
|
|
<view class="text-text">已签收</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- 操作按钮 -->
|
|
<view class="tools">
|
|
<view class="tools-item" v-if="!userData.hasCase" @click="$Router.push({name: 'Attestation', params: { hasCase: userData.hasCase }})">添加档案<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
|
|
<view class="tools-item" @click="$Router.push({name: 'Friend'})">邀请记录<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
|
|
<view class="tools-item" @click="$Router.push({name: 'UserCode'})">邀请码<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
|
|
<view class="tools-item" v-if="userLogin" @click="outLogin">退出登录<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
|
|
</view>
|
|
|
|
<view class="nameBack" v-if="nameState"></view>
|
|
<view class="namePop" v-if="nameState">
|
|
<input type="text" class="namePop-input" placeholder="请输入新名字" @input="nameInput" />
|
|
<view class="namePop-btn" @click="nameSubmit">确定</view>
|
|
</view>
|
|
<image v-if="nameState" class="nameClose" @click="nameClick" src="/static/icons/nameClose_icon.png" mode=""></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { userIndex, setting } from '@/apis/interfaces/user'
|
|
import { uploads } from '@/apis/interfaces/uploading'
|
|
export default {
|
|
data() {
|
|
return {
|
|
userData : '', //用户信息
|
|
userLogin: '', //登录状态
|
|
avatar : '', //头像
|
|
nickName : '', //昵称
|
|
nameState: false
|
|
};
|
|
},
|
|
onShow() {
|
|
if(this.$store.getters.getToken) {
|
|
this.userLogin = true
|
|
// 获取用户信息
|
|
this.userInfo();
|
|
}
|
|
},
|
|
|
|
methods:{
|
|
// 退出登录
|
|
outLogin(){
|
|
this.$store.commit('setToken', '')
|
|
this.$Router.replaceAll({name: 'Index'})
|
|
},
|
|
|
|
// 用户信息
|
|
userInfo() {
|
|
userIndex().then(res => {
|
|
this.userData = res
|
|
this.avatar = res.avatar
|
|
this.nickName = res.nickname
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 上传图片
|
|
updImg(type){
|
|
uni.chooseImage({
|
|
count : 1,
|
|
success : path => {
|
|
uploads([{
|
|
uri : path.tempFilePaths[0]
|
|
}]).then(res => {
|
|
this.avatar = res.url[0]
|
|
// 上传头像
|
|
this.settingInfo('avatar', res.path[0]);
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 修改昵称弹出
|
|
nameClick() {
|
|
this.nameState = !this.nameState
|
|
},
|
|
|
|
// 输入昵称
|
|
nameInput(val) {
|
|
this.nickName = val.detail.value
|
|
},
|
|
|
|
// 修改提交
|
|
nameSubmit() {
|
|
// 上传头像
|
|
this.settingInfo('nickname', this.nickName);
|
|
},
|
|
|
|
// 上传用户信息
|
|
settingInfo(key, value) {
|
|
setting(key, {
|
|
value: value
|
|
}).then(res => {
|
|
this.nameState = false
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
|
|
// 退出登录
|
|
outLogin() {
|
|
this.$store.commit('setToken', '')
|
|
this.$Router.push({name: 'Index'})
|
|
this.userLogin = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content{
|
|
min-height: 80vh;
|
|
background: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .2), white);
|
|
overflow: hidden;
|
|
}
|
|
// 用户信息
|
|
.user{
|
|
position: relative;
|
|
margin: $margin + 20 $margin $margin + 20;
|
|
padding-left: 140rpx;
|
|
min-height: 118rpx;
|
|
.user-nickname {
|
|
font-size: 36rpx;
|
|
margin-bottom: 15rpx;
|
|
display: flex;
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin: 10rpx 15rpx;
|
|
}
|
|
}
|
|
.user-tags {
|
|
display: flex;
|
|
color: #FFFFFF;
|
|
font-size: 26rpx;
|
|
.user-tags-label {
|
|
background-color: #7e8aff;
|
|
border-radius: 30rpx;
|
|
padding-left: 20rpx;
|
|
line-height: 48rpx;
|
|
margin-right: 20rpx;
|
|
display: flex;
|
|
image{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-top: 3rpx;
|
|
}
|
|
}
|
|
}
|
|
.user-cover{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 118rpx;
|
|
height: 118rpx;
|
|
border-radius: 50%;
|
|
border:solid 5rpx white;
|
|
box-sizing: border-box;
|
|
}
|
|
.user-login {
|
|
line-height: 118rpx;
|
|
font-size: 36rpx;
|
|
}
|
|
.user-login-img {
|
|
position: absolute !important;
|
|
right: 0;
|
|
top: 35rpx;
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
// 订单
|
|
.orders{
|
|
background: white;
|
|
margin: $margin;
|
|
border-radius: $radius;
|
|
.title{
|
|
font-weight: bold;
|
|
color: $text-color;
|
|
line-height: 90rpx;
|
|
padding: 0 $padding;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text{
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.orders-flex{
|
|
display: flex;
|
|
padding: ($padding/2) ($padding/2) $padding;
|
|
.order-item{
|
|
width: 33.33%;
|
|
text-align: center;
|
|
image{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
.text-text{
|
|
font-size: $title-size-sm;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 操作按钮
|
|
.tools{
|
|
background: white;
|
|
margin: $margin;
|
|
border-radius: $radius;
|
|
overflow: hidden;
|
|
.tools-item{
|
|
line-height: 90rpx;
|
|
padding: 0 $padding;
|
|
border-bottom: solid 1rpx $border-color;
|
|
font-size: $title-size-lg;
|
|
color: $text-color;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&:last-child{
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 弹出
|
|
.nameBack {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba($color: #000000, $alpha: .4);
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
}
|
|
|
|
.namePop {
|
|
position: fixed;
|
|
left: 100rpx;
|
|
right: 100rpx;
|
|
top: 40%;
|
|
background-color: #FFFFFF;
|
|
z-index: 100;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
padding: 0 30rpx;
|
|
border-radius: 100rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
.namePop-input {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
.namePop-btn {
|
|
color: #6e79ec;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.nameClose {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
position: fixed;
|
|
left: calc(50% - 27rpx);
|
|
top: calc(40% + 140rpx);
|
|
z-index: 101;
|
|
}
|
|
</style>
|