519 lines
14 KiB
Vue
519 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<view class="cards">
|
||
<image class="bg" :src="bjt" v-if="!name"></image>
|
||
<image class="bg" :src="imageInfo()" v-else-if="backgroundImage != ''"></image>
|
||
<image class="bg" :src="bjt2" v-else></image>
|
||
<view>
|
||
<view v-if="!name">
|
||
<view class="userInfoNot" @click="handleToLogin">
|
||
<up-avatar size="148rpx"></up-avatar>
|
||
<up-text text="请登录" size="44rpx" color="#FFFFFF" bold="400" margin="24rpx"></up-text>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view class="userInfoNot">
|
||
<view class="avatarInfo">
|
||
<up-avatar :src="avatar" size="148rpx"></up-avatar>
|
||
<image v-if="auditInfo == 3" class="official" :src="tu36"></image>
|
||
</view>
|
||
|
||
|
||
<view class="simpleInfo-text">
|
||
<view class="textgrid1">
|
||
<view class="grid11">{{ nickName }}</view>
|
||
<image :src="mupdate" style="width: 32rpx; height: 32rpx;" @click="handleToEditInfo"></image>
|
||
</view>
|
||
<view class="textgrid2">
|
||
<view class="textInfo grid21">{{ dictSex(sex) }}</view>
|
||
<view class="textInfo grid22">LV{{ infoRank }}</view>
|
||
<view class="textInfo grid23">ID:{{ name }}</view>
|
||
|
||
</view>
|
||
<view class="textgrid3">
|
||
<view class="grid31">[签名]{{ qm(remark) }}</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="school">
|
||
<view class="school1">
|
||
<image :src="tu51addres" style="width: 16rpx; height: 20rpx;"></image>
|
||
<view class="textInfo">{{ area }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="smallUserInfo">
|
||
<view class="small1">
|
||
<up-text :text="info(infoAssist)" size="36rpx" color="#FFFFFF" bold="400" align="center"></up-text>
|
||
<up-text text="点赞" size="28rpx" color="#FFFFFF" align="center"></up-text>
|
||
</view>
|
||
<view class="small1">
|
||
<up-text :text="info(followCount)" size="36rpx" color="#FFFFFF" bold="400" align="center"></up-text>
|
||
<up-text text="关注" size="28rpx" color="#FFFFFF" align="center"></up-text>
|
||
</view>
|
||
<view class="small1">
|
||
<up-text :text="info(fanCount)" size="36rpx" color="#FFFFFF" bold="400" align="center"></up-text>
|
||
<up-text text="粉丝" size="28rpx" color="#FFFFFF" align="center"></up-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cardz1">
|
||
<text class="text1">我的话题</text>
|
||
<view>
|
||
<up-grid :border="false" col="5" @click="grid1Click1">
|
||
<up-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex" customStyle="padding-top: 24rpx; ">
|
||
<image :src="listItem.icon" style="width: 66rpx; height: 66rpx;"></image>
|
||
<text style="font-size: 24rpx;color: #999999;margin-top: 20rpx;">{{ listItem.title }}</text>
|
||
</up-grid-item>
|
||
</up-grid>
|
||
</view>
|
||
</view>
|
||
<view class="cardz1">
|
||
<text class="text1">我的活动</text>
|
||
<view>
|
||
<up-grid :border="false" col="5" @click="grid1Click2">
|
||
<up-grid-item v-for="(listItem, listIndex) in list2" :key="listIndex" customStyle="padding-top: 24rpx; ">
|
||
<image :src="listItem.icon" style="width: 66rpx; height: 66rpx;"></image>
|
||
<text style="font-size: 24rpx;color: #999999;margin-top: 20rpx;">{{ listItem.title }}</text>
|
||
</up-grid-item>
|
||
</up-grid>
|
||
</view>
|
||
</view>
|
||
<view class="cardz3">
|
||
<text class="text1">更多功能</text>
|
||
<view>
|
||
<up-grid :border="false" col="4" @click="grid1Click3">
|
||
<up-grid-item v-for="(listItem, listIndex) in list3" :key="listIndex" customStyle="padding-top: 24rpx; ">
|
||
<image :src="listItem.icon" style="width: 66rpx; height: 66rpx;"></image>
|
||
<text style="font-size: 24rpx;color: #999999;margin-top: 20rpx;">{{ listItem.title }}</text>
|
||
</up-grid-item>
|
||
</up-grid>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<up-overlay :show="kfopen" @click="kfopen = false">
|
||
<view class="wrap">
|
||
|
||
<view class="kf">
|
||
<view class="kfInfo">联系客服</view>
|
||
<view class="card">
|
||
<view @click="zxkf">
|
||
<image :src="kfPhone2" style="width: 150rpx; height: 150rpx;"></image>
|
||
<view class="textkf">在线客服</view>
|
||
</view>
|
||
<view style="width: 150rpx; height: 150rpx;"></view>
|
||
<view @click="phonekf">
|
||
<image :src="kfPhone1" style="width: 150rpx; height: 150rpx;"></image>
|
||
<view class="textkf">电话客服</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</up-overlay>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useStore } from 'vuex'
|
||
import { useRouter } from 'vue-router'
|
||
import { ref, getCurrentInstance } from 'vue';
|
||
import { getDicts } from "@/api/system/dict/data";
|
||
import { onShow, onLoad ,onPullDownRefresh} from '@dcloudio/uni-app'
|
||
import image from 'uview-plus/libs/config/props/image';
|
||
const { proxy } = getCurrentInstance();
|
||
const QNDomain = proxy.$store.state.user.QNDomain
|
||
const isOfficial = ref(true)
|
||
const kfopen = ref(false)
|
||
const iconConfig = proxy.iconConfig;
|
||
const bjt = iconConfig.bjt;
|
||
const kfPhone1 = iconConfig.kfPhone1;
|
||
const kfPhone2 = iconConfig.kfPhone2;
|
||
const bjt2 = iconConfig.bjt2;
|
||
const mupdate = iconConfig.mupdate;
|
||
const tu36 = iconConfig.tu36;
|
||
//定位
|
||
const tu51addres = iconConfig.tu51addres;
|
||
//+更多
|
||
const gd11 = iconConfig.gd11;
|
||
const gd12 = iconConfig.gd12;
|
||
const gd13 = iconConfig.gd13;
|
||
const gd14 = iconConfig.gd14;
|
||
const gd21 = iconConfig.gd21;
|
||
const gd22 = iconConfig.gd22;
|
||
const gd23 = iconConfig.gd23;
|
||
const gd24 = iconConfig.gd24;
|
||
//+我的话题
|
||
const ht11 = iconConfig.ht11;
|
||
const ht12 = iconConfig.ht12;
|
||
const ht13 = iconConfig.ht13;
|
||
const ht14 = iconConfig.ht14;
|
||
const ht15 = iconConfig.ht15;
|
||
// +我的活动
|
||
const hd11 = iconConfig.hd11;
|
||
const hd12 = iconConfig.hd12;
|
||
const hd13 = iconConfig.hd13;
|
||
const hd14 = iconConfig.hd14;
|
||
const hd15 = iconConfig.hd15;
|
||
const list1 = ref([
|
||
{ icon: ht11, title: '全部话题' },
|
||
{ icon: ht12, title: '已发布' },
|
||
{ icon: ht13, title: '审核中' },
|
||
{ icon: ht14, title: '未通过' },
|
||
{ icon: ht15, title: '草稿箱' }
|
||
])
|
||
const list2 = ref([
|
||
{ icon: hd11, title: '全部活动' },
|
||
{ icon: hd12, title: '已发布' },
|
||
{ icon: hd13, title: '审核中' },
|
||
{ icon: hd14, title: '未通过' },
|
||
{ icon: hd15, title: '草稿箱' }
|
||
])
|
||
const list3 = ref([
|
||
{ icon: gd11, title: '外卖订单' },
|
||
{ icon: gd12, title: '我的兼职' },
|
||
{ icon: gd13, title: '证件证明' },
|
||
{ icon: gd14, title: '地址管理' },
|
||
{ icon: gd21, title: '优惠卡券' },
|
||
{ icon: gd22, title: '联系客服' },
|
||
{ icon: gd23, title: '邀请好友' },
|
||
{ icon: gd24, title: '系统设置' }
|
||
])
|
||
|
||
|
||
|
||
const auditInfo = ref(proxy.$store.state.userInfo.auditInfo)//审核状态
|
||
const name = ref(proxy.$store.state.user.name)
|
||
const nickName = ref(proxy.$store.state.user.nickName)
|
||
const sex = ref(uni.getStorageSync("SET_SEX"))
|
||
|
||
const infoSchool = ref(proxy.$store.state.userInfo.infoSchool)//学校
|
||
const area = ref(proxy.$store.state.userInfo.area)//学校
|
||
const backgroundImage = ref(proxy.$store.state.userInfo.backgroundImage)//背景
|
||
const infoRank = ref(proxy.$store.state.userInfo.infoRank)
|
||
const remark = ref(proxy.$store.state.userInfo.remark)//签名
|
||
const infoAssist = ref(proxy.$store.state.userInfo.infoAssist)//获赞
|
||
const followCount = ref(proxy.$store.state.userInfo.followCount)//关注
|
||
const fanCount = ref(proxy.$store.state.userInfo.fanCount)//粉丝
|
||
const qm = (e) => {
|
||
if (e === "" | e === null) {
|
||
return "这个人很懒什么都没有留下……"
|
||
} else {
|
||
return e
|
||
}
|
||
}
|
||
const dictSexInfo = ref('')
|
||
onLoad((options) => {
|
||
proxy.$store.dispatch('GetUserInfo');
|
||
getDicts('sys_user_sex').then(e => {
|
||
dictSexInfo.value = e.data
|
||
})
|
||
|
||
})
|
||
const dictSex = (state) => {
|
||
const dict = dictSexInfo.value.find((dict) => dict.dictValue == state);
|
||
return dict ? dict.dictLabel : '未知状态';
|
||
}
|
||
|
||
const version = ref(getApp().globalData.config.appInfo.version)
|
||
const avatar = ref(proxy.$store.state.user.avatar)
|
||
function handleLogout() {
|
||
proxy.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
||
proxy.$store.dispatch('LogOut').then(() => {
|
||
proxy.$tab.reLaunch('/pages/index')
|
||
})
|
||
})
|
||
}
|
||
|
||
onPullDownRefresh((options) => {
|
||
proxy.$router.go(0)
|
||
})
|
||
const grid1Click1 = (e) => {
|
||
console.log(e)
|
||
if (e == 4) {
|
||
proxy.$tab.navigateTo('/pages/mine/myPost/draft/draft')
|
||
} else {
|
||
proxy.$tab.navigateTo('/pages/mine/myPost/myPost?type=' + e)
|
||
}
|
||
}
|
||
const grid1Click2 = (e) => {
|
||
if (e == 4) {
|
||
proxy.$tab.navigateTo('/pages/mine/myActivity/draft')
|
||
} else {
|
||
proxy.$tab.navigateTo('/pages/mine/myActivity/index?type=' + e)
|
||
}
|
||
}
|
||
const grid1Click3 = (e) => {
|
||
if (e == 7) {
|
||
proxy.$tab.navigateTo('/pages/mine/setting/index')
|
||
}
|
||
else if (e == 2) {
|
||
proxy.$tab.navigateTo('/pages/mine/studentCard/index')
|
||
} else if (e == 5) {
|
||
kfopen.value = true;
|
||
}
|
||
|
||
}
|
||
|
||
const info = (e) => {
|
||
if (e >= 10000) {
|
||
return (e / 10000).toFixed(1) + '万';
|
||
} else {
|
||
return e;
|
||
}
|
||
}
|
||
|
||
|
||
const zxkf = () => {
|
||
console.log("在线客服");
|
||
}
|
||
const phonekf = () => {
|
||
console.log("电话客服");
|
||
}
|
||
|
||
function handleToLogin() {
|
||
proxy.$tab.reLaunch('/pages/login')
|
||
}
|
||
const handleToUserInfo = () => {
|
||
proxy.$tab.navigateTo('/pages/mine/info/userInfo')
|
||
}
|
||
|
||
function windowHeight() {
|
||
return uni.getSystemInfoSync().windowHeight - 50
|
||
}
|
||
|
||
function handleToInfo() {
|
||
proxy.$tab.navigateTo('/pages/mine/info/index')
|
||
}
|
||
function handleToEditInfo() {
|
||
proxy.$tab.navigateTo('/pages/mine/info/edit')
|
||
}
|
||
function handleToSetting() {
|
||
proxy.$tab.navigateTo('/pages/mine/setting/index')
|
||
}
|
||
|
||
function handleToAvatar() {
|
||
proxy.$tab.navigateTo('/pages/mine/avatar/index')
|
||
}
|
||
|
||
function handleHelp() {
|
||
proxy.$tab.navigateTo('/pages/mine/help/index')
|
||
}
|
||
function handleAbout() {
|
||
proxy.$tab.navigateTo('/pages/mine/about/index')
|
||
}
|
||
function handleJiaoLiuQun() {
|
||
proxy.$modal.showToast('QQ群：①133713780、②146013835')
|
||
}
|
||
function handleBuilding() {
|
||
proxy.$modal.showToast('模块建设中~')
|
||
}
|
||
const imageInfo = ()=> {
|
||
let info = QNDomain+ backgroundImage.value
|
||
return info
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F4F5F6;
|
||
}
|
||
|
||
.cards {
|
||
position: relative;
|
||
|
||
.userInfoNot {
|
||
position: absolute;
|
||
top: 200rpx;
|
||
left: 32rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.avatarInfo {
|
||
position: relative;
|
||
|
||
.official {
|
||
position: absolute;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.simpleInfo-text {
|
||
margin-left: 24rpx;
|
||
text-align: left;
|
||
|
||
.textgrid1 {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.grid11 {
|
||
font-weight: 600;
|
||
font-size: 44rpx;
|
||
color: #FFFFFF !important;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.textgrid2 {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.textInfo {
|
||
font-size: 24rpx;
|
||
|
||
color: #FFFFFF !important;
|
||
}
|
||
|
||
.grid21 {
|
||
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.grid22 {
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.grid23 {}
|
||
}
|
||
|
||
.textgrid3 {
|
||
.grid31 {
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
color: #FFFFFF !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.smallUserInfo {
|
||
position: absolute;
|
||
left: 47rpx;
|
||
bottom: 26rpx;
|
||
width: 656rpx;
|
||
height: 66rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
|
||
.small1 {}
|
||
}
|
||
|
||
}
|
||
|
||
.bg {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
}
|
||
|
||
.cardz1 {
|
||
width: 686rpx;
|
||
height: 212rpx;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
margin: 24rpx auto;
|
||
padding-top: 24rpx; // 在父元素上添加 padding
|
||
|
||
.text1 {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
color: #010101 !important;
|
||
margin: 0 24rpx; // 调整 margin 确保 top margin 不会折叠
|
||
}
|
||
}
|
||
|
||
.cardz3 {
|
||
width: 686rpx;
|
||
height: 356rpx;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
margin: 24rpx auto;
|
||
padding-top: 24rpx; // 在父元素上添加 padding
|
||
|
||
.text1 {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
color: #010101 !important;
|
||
margin: 0 24rpx; // 调整 margin 确保 top margin 不会折叠
|
||
}
|
||
}
|
||
|
||
.school {
|
||
position: absolute;
|
||
top: 362rpx;
|
||
right: 32rpx;
|
||
height: 28rpx;
|
||
border-radius: 14rpx;
|
||
opacity: 0.5;
|
||
background: #000000 !important;
|
||
display: flex;
|
||
/* 添加 flex 布局 */
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
justify-content: center;
|
||
/* 水平居中 */
|
||
|
||
.school1 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 4rpx 18rpx;
|
||
|
||
.textInfo {
|
||
margin-left: 8rpx;
|
||
font-size: 18rpx;
|
||
color: #FFFFFF !important;
|
||
line-height: 28rpx;
|
||
/* 确保文字垂直居中 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.kf {
|
||
width: 648rpx;
|
||
height: 396rpx;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
background: #ffffff;
|
||
|
||
.card{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.textkf {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
color: #000000 !important;
|
||
margin-top: 25rpx;
|
||
}
|
||
}
|
||
|
||
.kfInfo {
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
text-align: center;
|
||
color: #000000 !important;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 62rpx;
|
||
}
|
||
</style>
|