569 lines
11 KiB
Vue
569 lines
11 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- -->
|
|
<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}}
|
|
</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 class="logo">
|
|
<image src="../../static/logo.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="login" @click="handleLogin">
|
|
登录/注册后查看更多，点击此处<text>登录/注册</text>
|
|
</view>
|
|
<!-- vip -->
|
|
<view class="vip" :class="[!token?'marginTop':'']">
|
|
<image src="../../static/h.png"></image>
|
|
<view>
|
|
<text v-if="!userInfo.vipname">加入我们，尊享多重特权</text>
|
|
<text v-else class="bold">会员有效期至：{{userInfo.vipendtime.substring(0,10)}}</text>
|
|
</view>
|
|
<!-- -->
|
|
<view class="btn" @click="navTo('/pageTwo/me/addVip')" v-if="!userInfo.vipname">加入我们</view>
|
|
</view>
|
|
<!-- 资料 -->
|
|
<view class="tools">
|
|
<view class="item" @click="navTo('/pageTwo/me/user')">
|
|
<image src="../../static/tools1.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/tools2.png"></image>
|
|
<view class="ml-15">
|
|
<text class="size18 bold">企业信息</text>
|
|
Company
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 更多功能 -->
|
|
<view class="tools tools2">
|
|
<view class="title">更多功能</view>
|
|
<view class="tools_item">
|
|
<view @click="navTo('/pageTwo/me/needs?type=3')">
|
|
<image src="../../static/q.png"></image>
|
|
<text>我的商品</text>
|
|
</view>
|
|
<view @click="navTo('/pageTwo/login/editPassword')">
|
|
<image src="../../static/w.png"></image>
|
|
<text>修改密码</text>
|
|
</view>
|
|
<view @tap="handleisVIP">
|
|
<image src="../../static/r.png"></image>
|
|
<text>联系人</text>
|
|
</view>
|
|
<view @tap="handleisCare">
|
|
<image src="../../static/t.png"></image>
|
|
<text>身份卡</text>
|
|
</view>
|
|
<view @click="navTo('/pageTwo/me/addVip')" v-if="!userInfo.vipname">
|
|
<image src="../../static/me4.png"></image>
|
|
<text>加入我们</text>
|
|
</view>
|
|
<view @click="handleOutLogin" v-if="token">
|
|
<image src="../../static/y.png"></image>
|
|
<text>退出</text>
|
|
</view>
|
|
</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://irdhdt.com/qr/get?appid='+appid+'&id='+userInfo.id"
|
|
show-menu-by-longpress="true"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 联系人 -->
|
|
<secratary></secratary>
|
|
<!-- 客服 -->
|
|
<message></message>
|
|
<!-- 底部 -->
|
|
<tabbar :tabInd="2"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
import tabbar from "@/components/tabBar.vue"
|
|
export default {
|
|
data() {
|
|
return {
|
|
isCard: false,
|
|
token: "",
|
|
appid: ""
|
|
}
|
|
},
|
|
components: {
|
|
tabbar,
|
|
},
|
|
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.setStorageSync('UserInfo', {})
|
|
that.$store.commit("changeLogout", false);
|
|
uni.reLaunch({
|
|
url: "/pageTwo/login/login"
|
|
})
|
|
})
|
|
} else if (res.cancel) {
|
|
that.$tools.msg("您已取消操作！");
|
|
}
|
|
},
|
|
})
|
|
},
|
|
handleisVIP() {
|
|
this.$store.commit("changeSecratary", true);
|
|
},
|
|
handleisCare() {
|
|
if (!uni.getStorageSync('token')) {
|
|
this.$tools.msg("注册/登录后查看更多")
|
|
return
|
|
}
|
|
this.isCard = !this.isCard
|
|
},
|
|
// 登录
|
|
handleLogin() {
|
|
let that = this
|
|
uni.navigateTo({
|
|
url: "/pageTwo/login/login"
|
|
})
|
|
},
|
|
navTo(url) {
|
|
if (!uni.getStorageSync('token')) {
|
|
this.$tools.msg("注册/登录后查看更多")
|
|
return
|
|
}
|
|
this.isCard = false
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
padding: 0;
|
|
background-color: #f7f7f7;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.vip {
|
|
font-size: 14px;
|
|
color: $blue;
|
|
margin: 45px 10px 0;
|
|
height: 200rpx;
|
|
position: relative;
|
|
|
|
|
|
view {
|
|
position: absolute;
|
|
left: 15px;
|
|
bottom: 8px;
|
|
}
|
|
|
|
.btn {
|
|
position: absolute;
|
|
font-size: 14px;
|
|
right: 15px;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
background-color: $blue;
|
|
width: fit-content;
|
|
color: #fff;
|
|
left: auto;
|
|
top: 15px;
|
|
bottom: auto;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute
|
|
}
|
|
}
|
|
|
|
.tools {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 15px 10px;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-left: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.title::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 5px;
|
|
height: 20px;
|
|
left: -10px;
|
|
border-radius: 5px;
|
|
background: $navColor;
|
|
}
|
|
|
|
.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: 45px;
|
|
height: 45px;
|
|
}
|
|
|
|
view {
|
|
color: #999;
|
|
width: calc(100% - 50px);
|
|
}
|
|
|
|
}
|
|
|
|
text {
|
|
width: 100%;
|
|
color: $blue;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.tools_item {
|
|
justify-content: left;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
background: #fff;
|
|
padding-top: 15px;
|
|
margin-top: 15px;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
|
|
|
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: 56rpx;
|
|
}
|
|
}
|
|
|
|
.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: 630rpx;
|
|
color: #333;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.Cardbg {
|
|
width: 560rpx;
|
|
height: 350rpx;
|
|
background: $navColor;
|
|
border-radius: 5px 5px 0 0;
|
|
|
|
image {
|
|
border-radius: 5px 5px 0 0;
|
|
background-color: rgba(225, 225, 255, 0.5);
|
|
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
width: 100%;
|
|
padding-top: 20px;
|
|
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: 355rpx;
|
|
|
|
.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: 8px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.phonetop {
|
|
width: 126% !important;
|
|
height: 120px !important;
|
|
left: -13% !important;
|
|
position: relative;
|
|
border-radius: 0 0 60% 60%;
|
|
background: $navColor;
|
|
|
|
.headbox {
|
|
left: 13%;
|
|
right: 13%;
|
|
top: 20px;
|
|
}
|
|
}
|
|
</style> |