168 lines
3.4 KiB
Vue
168 lines
3.4 KiB
Vue
<template>
|
||
<view class="informationWrap">
|
||
<view class="informationBox">
|
||
<view class="title">会员编号</view>
|
||
<view class="content">{{labourUnion.no}}</view>
|
||
</view>
|
||
<view class="informationBox">
|
||
<view class="title">入会日期</view>
|
||
<view class="content">{{dateFormat(labourUnion.createTime)}}</view>
|
||
</view>
|
||
<view class="informationBox">
|
||
<view class="title">入会申请书</view>
|
||
<view class="lookbtn" @click="status(true)">
|
||
<view>查看</view>
|
||
<image src="../../../static/img/right.svg" mode="" style="width: 19rpx;height: 32rpx;margin-left: 20rpx;margin-top: 4rpx;"></image>
|
||
</view>
|
||
</view>
|
||
<uniMask :maskShow="maskShow">
|
||
<view class="informationMask">
|
||
<view class="close" @click="status(false)">+</view>
|
||
<view class="bookBox">
|
||
<view class="title">入会申请书</view>
|
||
<view class="content">{{content}}</view>
|
||
<view class="time people">申请人：{{authInfo.realName}}</view>
|
||
<view class="time dayYear">
|
||
<view class="">日期：<i></i></view>
|
||
<view class="">{{dateFormat(labourUnion.createTime, 'yyyy年MM月dd日')}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- <image :src="labourUnion.contractUrl" class="img"></image> -->
|
||
</view>
|
||
</uniMask>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapGetters
|
||
} from 'vuex'
|
||
import uniMask from '@/components/uni-mask/mask.vue'
|
||
import {labourUnionInfo} from '@/api/federation.js'
|
||
import {dateFormat} from '@/untils/format.js'
|
||
export default{
|
||
data(){
|
||
return {
|
||
maskShow: false,
|
||
labourUnion: {},
|
||
content: ''
|
||
}
|
||
},
|
||
components:{uniMask},
|
||
onLoad() {
|
||
// this.labourUnionInfoInit()
|
||
},
|
||
methods: {
|
||
dateFormat,
|
||
status(status){
|
||
this.maskShow = status
|
||
},
|
||
labourUnionInfoInit(){
|
||
labourUnionInfo().then(e=>{
|
||
this.labourUnion = e.data.data
|
||
})
|
||
},
|
||
},
|
||
computed: {
|
||
...mapGetters(['authInfo'])
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.bookBox{
|
||
height: 691rpx;
|
||
background: #FFFFFF;
|
||
margin: 53rpx 30rpx;
|
||
padding: 60rpx 30rpx 0 30rpx;
|
||
position: relative;
|
||
.title{
|
||
font-size: 40rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
line-height: 56rpx;
|
||
text-align: center;
|
||
margin-bottom: 47rpx;
|
||
}
|
||
.content{
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 50rpx;
|
||
text-indent:2em;
|
||
}
|
||
.people{
|
||
position: absolute;
|
||
bottom: 203rpx;
|
||
left: 250rpx;
|
||
}
|
||
.dayYear{
|
||
position: absolute;
|
||
bottom: 128rpx;
|
||
left: 250rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.time{
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
}
|
||
}
|
||
.informationMask{
|
||
width: 690rpx;
|
||
// height: 750rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 4rpx;
|
||
margin: 0 auto;
|
||
margin-top: 30%;
|
||
position: relative;
|
||
.close{
|
||
width: 23px;
|
||
height: 23px;
|
||
color: #1B66FF;
|
||
position: fixed;
|
||
right: 60rpx;
|
||
transform: rotate(45deg);
|
||
font-size: 40px;
|
||
z-index: 9999;
|
||
}
|
||
.img{
|
||
width: 690rpx;
|
||
height: 1040rpx;
|
||
}
|
||
}
|
||
|
||
.informationWrap{
|
||
padding: 0 30rpx;
|
||
}
|
||
.informationBox{
|
||
height: 32rpx;
|
||
background: #FEFEFE;
|
||
padding: 64rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom:1px solid #F2F2F2;
|
||
}
|
||
.title{
|
||
height: 36rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
.content{
|
||
height: 32rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
.lookbtn{
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #1B66FF;
|
||
}
|
||
</style>
|