<template>
<view class="content">
<view class="top">
<view class="avater">
<image :src="userInfo.avatar" class="avater-img" mode=""></image>
</view>
<view class="name-box">
<view class="name-top">
{{userInfo.nickname}}
</view>
<view class="name-bottom" v-if="userInfo.is_jh">
<view class="nameInfo">
救在身边 志愿者
</view>
</view>
</view>
</view>
<view class="tt">
<view class="tt-box border-b" @click="tohelp">
<image src="../../static/icon/icon-04.png" class="tt-icon1" mode=""></image>
<view class="tt-txt">
求救记录
</view>
<image src="../../static/icon/next.png" class="next-icon" mode=""></image>
</view>
<view class="tt-box border-b" @click="torreco">
<image src="../../static/icon/icon-05.png" class="tt-icon1" mode=""></image>
<view class="tt-txt">
救援记录
</view>
<image src="../../static/icon/next.png" class="next-icon" mode=""></image>
</view>
<view class="tt-box border-b" @click="commonaddress">
<image src="../../static/icon/icon-06.png" class="tt-icon1" mode=""></image>
<view class="tt-txt">
常用地址
</view>
<image src="../../static/icon/next.png" class="next-icon" mode=""></image>
</view>
<!-- pages/form/certificates -->
<view class="tt-box border-b" @click="tocertificates" >
<image src="../../static/icon/icon-07.png" class="tt-icon1" mode=""></image>
<view class="tt-txt">
我的证书
</view>
<image src="../../static/icon/next.png" class="next-icon" mode=""></image>
</view>
</view>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
import {
saveUrl,
interceptor
} from '@/utils/loginUtils.js';
import { detail_training } from '@/api/train.js';
import {
userinfo
} from '@/api/user.js';
// #ifdef H5
import {
weixindata
} from '@/utils/wxAuthorized';
// #endif
export default {
data() {
return {
common_address:'',
name:'',
signDate:'',
id:0,
is_over:0
}
},
onShow() {
console.log(this);
// 判断是否已经登录
if (this.hasLogin) {
this.loadBaseData();
} else {
saveUrl();
uni.showModal({
title: '登录',
content: '您未登录，是否马上登陆?',
success: e => {
if (e.confirm) {
interceptor();
}
},
fail: e => {
console.log(e);
}
});
}
this.type = this.userInfo.type;
this.common_address = this.userInfo.common_address
console.log('点前保存的地址',this.common_address)
// 保存当前页面
},
onReady() {
console.log(99999)
detail_training({
id:this.id,
}).then(({data}) => {
console.log(999,data)
this.name = data.name
this.signDate = data.add_time
this.is_over = data.is_over
})
},
computed: {
...mapState('user', ['hasLogin', 'userInfo'])
},
methods: {
...mapMutations('user', ['setUserInfo']),
loadBaseData() {
userinfo({}).then(({
data
}) => {
this.setUserInfo(data);
});
// #ifdef H5
weixindata();
// #endif
detail_training({
id:this.id,
}).then(({data}) => {
console.log(9,data)
this.name = data.name
this.signDate = data.add_time
this.is_over = data.is_over
})
},
torreco() {
uni.navigateTo({
url: '/pages/applic/rescuerecords'
})
},
tohelp() {
uni.navigateTo({
url: '/pages/applic/helprecords'
})
},
commonaddress() {
uni.navigateTo({
url: '/pages/applic/commonaddress?add=' + this.common_address
})
},
tocertificates() {
uni.navigateTo({
// pages/form/certificatesList
// url: '/pages/form/certificates?name=' + this.name + '&signDate=' + this.signDate
url: '/pages/form/certificatesList'
})
}
}
}
</script>
<style lang="scss">
.content {
line-height: 1;
.top {
width: (750vw/7.5);
height: (370vw/7.5);
// background-color: #CB131B;
background: url(../../static/images/bgi2.png)no-repeat top left;
background-size: (750vw/7.5) (370vw/7.5);
display: flex;
align-items: center;
padding-left: (55vw/7.5);
.avater {
width: (150vw/7.5);
height: (150vw/7.5);
margin-right: (28vw/7.5);
.avater-img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.name-box {
// flex: 1;
.name-top {
font-size: (42vw/7.5);
font-weight: 400;
color: #FFFFFF;
margin-bottom: (15vw/7.5);
}
.name-bottom{
margin-top: (16vw/7.5);
display: flex;
align-items: center;
// justify-content: center;
.nameInfo{
color: #FFFFFF;
padding: (6vw/7.5) (16vw/7.5);
border: (1vw/7.5) solid #FFFFFF;
border-radius: (12vw/7.5);
// background-color: pink;
}
}
.name-footbox {
.name-foot {
text-align: center;
font-size: (22vw/7.5);
font-weight: 400;
color: #FFFFFF;
background: rgba(255, 255, 255, 0.2);
border: 1px solid #FFFFFF;
border-radius: (20vw/7.5);
padding: (3vw/7.5) (13vw/7.5);
}
}
}
}
.center-box {
width: (687vw/7.5);
// height: 235px;
background: #FFE8E8;
border-radius: (16vw/7.5);
margin: (-90vw/7.5) auto 0;
.center-top {
width: (687vw/7.5);
height: (80vw/7.5);
background: #FFFFFF;
border-radius: (16vw/7.5) (16vw/7.5) 0 0;
display: flex;
align-items: center;
padding-left: (30vw/7.5);
.top-left {
width: (126vw/7.5);
line-height: (32vw/7.5);
text-align: center;
background: linear-gradient(0deg, #C90F1B, #F14D33);
font-size: (22vw/7.5);
font-weight: 400;
color: #FFFFFF;
border-radius: (20vw/7.5);
margin-right: (10vw/7.5);
}
.top-right {
font-size: (22vw/7.5);
font-weight: 400;
color: #CB151D;
}
}
.center-foot {
height: (155vw/7.5);
display: flex;
.foot-list {
flex: 1;
text-align: center;
padding-top: (20vw/7.5);
.list-top {
font-size: (39vw/7.5);
font-weight: 400;
color: #CB141D;
line-height: (58vw/7.5);
}
.list-foot {
font-size: (39vw/7.5);
font-weight: 400;
color: #666666;
line-height: (58vw/7.5);
}
}
}
}
.tt {
margin: (20vw/7.5) auto 0;
width: (700vw/7.5);
box-shadow: 0px 0px (20vw/7.5) 0px rgba(49, 49, 52, 0.06);
border-radius: (10vw/7.5);
background-color: #ffffff;
.tt-box {
width: (700vw/7.5);
height: (100vw/7.5);
padding: 0 (30vw/7.5);
// margin-top: 37(vw/7.5);
display: flex;
align-items: center;
.tt-icon {
width: (40vw/7.5);
height: (40vw/7.5);
}
.tt-icon1 {
width: (40vw/7.5);
height: (36vw/7.5);
}
.tt-txt {
margin-left: (20vw/7.5);
font-size: (28vw/7.5);
font-weight: 300;
color: #000000;
flex: 1;
}
.next-icon {
width: (30vw/7.5);
height: (38vw/7.5);
}
}
.border-b {
border-bottom: 1px solid #F1F1F1;
}
}
}
</style>