intelligentGroup/pages/me/me.vue

507 lines
10 KiB
Vue

<template>
<view class="content bgfff">
<!-- -->
<view class="phonetop" v-if="token">
<view class="headbox">
<view class="head">
<view class="image">
<image :src="userInfo.avatarurl" mode="aspectFill"></image>
</view>
<view class="info">
<view class="name">
{{userInfo.name}}<text>{{userInfo.posname}}</text>
</view>
<view class="post">{{userInfo.orgname}}<text v-if="userInfo.place"
class="ml-5 mr-5">|</text>{{userInfo.place}}
</view>
<view class="phone">电话:{{userInfo.phone}}</view>
<view class="phone" v-if="userInfo.email">
{{userInfo.email}}
</view>
<view class="phone" @click="navTo('/pageTwo/me/user')" v-if="!userInfo.email"
:class="[!userInfo.email?'redcolor':'']">
请尽快完善个人资料
</view>
</view>
</view>
</view>
</view>
<view v-else class="login" @click="handleLogin">
登录后查看更多内容资讯,点击此处<text>登录</text>
</view>
<!-- vip -->
<view class="vip" :class="[!token?'marginTop':'']">
<view>
<image src="../../static/me1.png"></image>
<text v-if="!userInfo.vipname">开通会员,尊享多重特权</text>
<text v-else>会员有效期至:{{userInfo.vipendtime.substring(0,10)}}</text>
</view>
<view class="btn" v-if="!userInfo.vipname" @tap="handleisVIP">开通会员</view>
</view>
<!-- 资料 -->
<view class="tools">
<view class="item" @click="navTo('/pageTwo/me/user')">
<image src="../../static/me3.png"></image>
<view class="ml-15">
<text class="size18 bold">个人资料</text>
Personal Data
</view>
</view>
<view class="item" @click="navTo('/pageTwo/me/company')">
<image src="../../static/me2.png"></image>
<view class="ml-15">
<text class="size18 bold">企业信息</text>
Company
</view>
</view>
</view>
<!-- 更多功能 -->
<view class="tools tools2">
<view class="title">更多功能</view>
<view @click="navTo('/pageTwo/me/needs?type=9')">
<image src="../../static/me4.png"></image>
<text>我的供需</text>
</view>
<view @click="navTo('/pageTwo/me/needs?type=3')">
<image src="../../static/me5.png"></image>
<text>我的商品</text>
</view>
<view @click="navTo('/pageTwo/login/editPassword')">
<image src="../../static/me6.png"></image>
<text>修改密码</text>
</view>
<view @tap="handleisVIP">
<image src="../../static/me7.png"></image>
<text>联系秘书处</text>
</view>
<view @tap="handleisCare">
<image src="../../static/me8.png"></image>
<text>身份卡</text>
</view>
<view @click="handleOutLogin" v-if="token">
<image src="../../static/me10.png"></image>
<text>退出</text>
</view>
</view>
<!-- -->
<view class="foot">
<view class="logo">
<image src="../../static/logo.png"></image>
</view>
<view class="ercode">
<image :src="HomeContent.officialqrcode" show-menu-by-longpress="true"></image>
</view>
<view>
<text>长按识别二维码</text>
<text>关注智造团公众号接收最新动态</text>
</view>
</view>
<!-- 身份卡 -->
<view class="wrapper" v-if="isCard">
<view class="bg" @click="handleisCare">
<view class="edit Card" @click.stop>
<view class="Cardbg">
<image src="../../static/bg.jpg" mode="aspectFit"></image>
<view class="logo">
<image :src="userInfo.cominfo.logourl" mode="aspectFit"></image>
</view>
<view class="title">
{{userInfo.cominfo.name}}
</view>
<view class="address" v-if="userInfo.cominfo.province">
{{userInfo.cominfo.province}}{{userInfo.cominfo.city}}{{userInfo.cominfo.area}}{{userInfo.cominfo.address}}
</view>
<view class="address redcolor" v-else @click="navTo('/pageTwo/me/company')">
请尽快完善企业资料
</view>
</view>
<!-- -->
<view class="box">
<view class="mt-15 name">
<view class="size16">{{userInfo.name}}<text class="text">{{userInfo.posname}}</text></view>
<view class="c999 size12 mt-5">
<text>{{userInfo.orgname}}</text>
<text v-if="userInfo.place" class="ml-5 mr-5">|</text>{{userInfo.place}}
</view>
</view>
<view class="ercode">
<view class="left">
<text class="mb-5">电话:{{userInfo.phone}}</text>
<text v-if="userInfo.email">
{{userInfo.email}}
</text>
<text @click="navTo('/pageTwo/me/user')" v-if="!userInfo.email"
:class="[!userInfo.email?'redcolor':'']">
请尽快完善个人资料
</text>
</view>
<view class="right">
<!-- https://izzt.jt-sky.com/qr/get?appid=wxbbddd1888da43ab0&id=142307070910553 -->
<image :src="'https://izzt.jt-sky.com/qr/get?appid='+appid+'&id='+userInfo.id"
show-menu-by-longpress="true"></image>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 秘书处 -->
<secratary></secratary>
<!-- 客服 -->
<message></message>
</view>
</template>
<script>
import {
mapState
} from "vuex";
export default {
data() {
return {
isCard: false,
token: "",
appid: ""
}
},
computed: {
...mapState(['user', "HomeContent"]),
userInfo() {
return this.user.name ? this.user : uni.getStorageSync('UserInfo')
}
},
onLoad() {
let that = this
that.appid = uni.getStorageSync('appid')
that.token = uni.getStorageSync('token')
},
methods: {
handleOutLogin() {
let that = this
uni.showModal({
title: '友情提示',
content: '是否退出登录?',
success: function(res) {
if (res.confirm) {
that.$model.getoutlogin({
sessionid: uni.getStorageSync('sessionid')
}).then((res) => {
if (res.code != 0) return
console.log('确定退出', res)
uni.clearStorageSync()
uni.reLaunch({
url: "/pageTwo/login/login"
})
})
} else if (res.cancel) {
that.$tools.msg("您已取消操作!");
}
},
})
},
handleisVIP() {
this.$store.commit("changeSecratary", true);
},
handleisCare() {
if (!this.token) {
this.$tools.msg("登录后查看更多")
return
}
this.isCard = !this.isCard
},
// 登录
handleLogin() {
let that = this
uni.navigateTo({
url: "/pageTwo/login/login"
})
},
navTo(url) {
if (!this.token) {
this.$tools.msg("登录后查看更多")
return
}
this.isCard = false
uni.navigateTo({
url: url
})
},
}
}
</script>
<style scoped lang="scss">
.content {
padding: 0;
min-height: 100vh;
}
.vip {
font-size: 32rpx;
color: #F2D59C;
background-color: #2C2C34;
margin: 100px 10px 0;
border-radius: 5px;
display: flex;
justify-content: space-between;
padding: 15px 10px;
align-items: center;
view {
display: flex;
align-items: center;
}
.btn {
font-size: 14px;
color: #000;
padding: 5px 10px;
border-radius: 5px;
background-color: #E6C8A2;
}
image {
width: 30px;
height: 30px;
margin-right: 10px;
}
}
.tools {
display: flex;
flex-wrap: wrap;
margin: 15px 10px;
justify-content: space-between;
.item {
width: 43%;
padding: 15px 2%;
border-radius: 10px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
image {
width: 35px;
height: 35px;
}
view {
color: #999;
width: calc(100% - 50px);
}
}
text {
width: 100%;
color: #333;
text-align: left;
display: inline-block;
}
}
.login {
width: 100%;
text-align: center;
height: 45px;
line-height: 45px;
border-radius: 5px;
text {
color: $blue;
font-size: 16px;
font-weight: bold;
margin-left: 5px;
padding: 0 3px;
border-bottom: 1px solid $blue;
}
}
.tools2 {
justify-content: left;
view {
width: 25%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 15px;
}
image {
width: 40px;
height: 40px;
}
text {
text-align: center;
}
.title {
width: 100%;
justify-content: left;
font-size: 16px;
font-weight: bold;
margin-top: 5px;
}
}
.foot {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 50px;
.logo {
width: 100%;
text-align: center;
image {
width: 166rpx;
height: 54rpx;
}
}
.ercode {
width: 100%;
margin: 10px 0;
text-align: center;
image {
width: 100px;
height: 100px;
border: 1px solid #dfdfdf;
}
}
text {
width: 100%;
text-align: center;
display: inline-block;
margin-bottom: 5px;
}
}
.marginTop {
margin-top: 0px !important;
}
.Card {
width: 560rpx;
height: 800rpx;
position: relative;
image {
width: 100%;
height: 100%;
}
.Cardbg {
width: 560rpx;
height: 488rpx;
image {
border-radius: 5px 5px 0 0;
background-color: rgba(225, 225, 255, 0.5);
}
}
.logo {
width: 100%;
margin-top: -440rpx;
margin-bottom: 10px;
image {
width: 55px;
height: 55px;
padding: 5px;
border-radius: 50%;
background-color: #fff;
}
}
.title {
margin-top: 5px;
}
.address {
color: #fff;
margin-top: 10px;
}
.box {
position: absolute;
top: 489rpx;
.name {
width: auto;
text-align: left;
margin-left: 15px;
view {
width: 100%;
display: flex;
.text {
width: auto;
font-size: 12px;
background: $orange;
padding: 3px 10px;
border-radius: 5px;
color: #fff;
margin-left: 5px;
}
text {
display: inherit;
width: auto;
}
}
}
.ercode {
display: flex;
justify-content: space-between;
padding: 0 15px;
width: auto;
align-items: center;
.left {
width: calc(100% - 100rpx);
font-size: 12px;
margin-top: 20px;
text {
text-align: left;
}
}
.right {
width: 160rpx;
height: 160rpx;
position: absolute;
right: 10px;
bottom: 30px;
image {
width: 100%;
height: 100%;
}
}
}
}
}
</style>