dianliang/dl_uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
79042c4fc6
dl_uniapp/pages/mine/mine-index.vue
Vinjor 79042c4fc6 1
2025-04-15 15:00:48 +08:00

721 lines
18 KiB
Vue
Raw Blame History

<template>
<view class="mine-container">
<!-- 切换身份 -->
<view :class="['dl-title',ifHasCard?'has-member-card':''] ">
<view class="left-search" @click="changeUserType('01'==localUserType?'02':'01')">
<image v-if="!ifHasCard" class="dl-image" src="@/static/mine/qiehuan.png" mode="aspectFit"></image>
<image v-else class="dl-image" src="@/static/mine/change_member.png" mode="aspectFit"></image>
<text class="dl-text">切换至{{'02'==localUserType?'通告主':'博主'}}</text>
</view>
</view>
<!-- 头像信息 -->
<view :class="['dl-person-box',ifHasCard?'has-member-card':''] ">
<view class="user-image-box">
<view class="dl-image-box">
<image v-if="!userInfo.avatar" class="touxiang" src="@/static/images/profile.jpg" mode="aspectFit">
</image>
<image v-else class="touxiang" :src="userInfo.avatar" mode="aspectFit"></image>
<image class="sex" src="@/static/mine/sex_girl.png" mode="aspectFit"></image>
</view>
<view class="name-box">
<view class="title-box">
{{userInfo.nickName || ''}}
<image v-if="ifHasCard" src="@/static/mine/huang.png" mode="aspectFit"></image>
</view>
<view class="bottom-box">
<view class="fans-box">
<image src="@/static/mine/fans.png" mode="aspectFit"></image>
<view class="fans-num">{{userInfo.tfansNum||'0'}}</view>
</view>
<view v-if="ifHasCard" class="member-box">会员2025-12-21日到期</view>
</view>
</view>
<view class="edit-box" @click="goEdit()">
<text style="margin-right: 10rpx;">编辑</text>
<uni-icons v-if="ifHasCard" type="right" color="#623109" size="12"></uni-icons>
<uni-icons v-else type="right" color="#929292" size="12"></uni-icons>
</view>
</view>
<!-- 会员开通 -->
<view v-if="!ifHasCard && '02'==localUserType" class="dl-member-box" @click="goMemberCard()">
<view class="dl-left">
<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
<text>开通会员 解锁更多权益</text>
</view>
<view class="dl-right">
<view class="dl-go-view">立即开通</view>
</view>
</view>
<!-- 会员开通--通告主 -->
<view v-if="!ifHasCard && '01'==localUserType" class="dl-member-box" @click="goMemberCard()">
<view class="dl-left">
<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
<text>获取通告主卡 体验高级特权</text>
</view>
<view class="dl-right">
<view class="dl-go-view">立即开通</view>
</view>
</view>
<!-- 积分 -->
<view class="points-box" v-if="'02'==localUserType">
<view class="item-box" @click="goPoints()">
<view class="item-text-box">
<view>积分<text class="red-text">{{userInfo.pointsBalance||'0'}}</text></view>
<view class="dl-little">赚积分<uni-icons type="right" size="10">{{item.unicode}}</uni-icons></view>
</view>
<image src="@/static/mine/baoming.png" mode="aspectFit"></image>
</view>
<view class="item-box">
<view class="item-text-box">
<view>报名<text class="red-text">{{userInfo.report||'0'}}</text>次</view>
<view class="dl-little">去提额<uni-icons type="right" size="10">{{item.unicode}}</uni-icons></view>
</view>
<image src="@/static/mine/jifen.png" mode="aspectFit"></image>
</view>
</view>
<!-- 发布通告 -->
<view class="public-notice-box" v-if="'01'==localUserType">
<view class="left-box">
<view style="margin-bottom: 20rpx;">发布通告额度剩余{{userInfo.coupon}}条</view>
<!-- <progress style="width: 90%;" border-radius="5" percent="40" activeColor="#FC1F3E"-->
<!-- backgroundColor="#DEDEDE" stroke-width="8" />-->
</view>
<!-- <view class="right-box">-->
<!-- 获取更多-->
<!-- <uni-icons type="right" color="#623109" size="12"></uni-icons>-->
<!-- </view>-->
</view>
</view>
<!-- 个人信息和其他信息 -->
<view class="other-box">
<view class="box-room">
<view class="detail-title">个人信息</view>
<view class="menu-box top-column">
<view class="menu-item" v-if="'01'==localUserType" @click="goAuth()">
<!-- <image src="@/static/mine/zuji.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/renzheng.png" mode="aspectFit"></image>
<view class="text-dom">通告主认证</view>
<uni-icons type="right" color="#623109" size="12"></uni-icons>
</view>
<view class="menu-item" v-if="'01'==localUserType" @click="goCoupon()">
<!-- <image src="@/static/mine/zuji.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/tonggaoquan.png" mode="aspectFit"></image>
<view class="text-dom">通告券</view>
<uni-icons type="right" color="#623109" size="12"></uni-icons>
</view>
<view class="menu-item" @click="goHistory()">
<!-- <image src="@/static/mine/zuji.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/zuji.png" mode="aspectFit"></image>
<view class="text-dom">足迹</view>
<uni-icons type="right" color="#623109" size="12"></uni-icons>
</view>
<view class="menu-item" v-if="'02'==localUserType" @click="goMyAddr()">
<!-- <image src="@/static/mine/dizhi.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/dizhi.png" mode="aspectFit"></image>
<view class="text-dom">地址</view>
<uni-icons type="right" color="#623109" size="12"></uni-icons>
</view>
<view class="menu-item" v-if="'02'==localUserType" @click="goMyCard()">
<!-- <image src="@/static/mine/mingpian.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/mingpian.png" mode="aspectFit"></image>
<view class="text-dom">名片</view>
<uni-icons type="right" color="#623109" size="12"></uni-icons>
</view>
</view>
</view>
</view>
<view class="other-box">
<view class="box-room">
<view class="detail-title">其他信息</view>
<view class="menu-box">
<view class="menu-item" @click="viewNewPeople()">
<!-- <image src="@/static/mine/xinrenshouce.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/shouce.png" mode="aspectFit"></image>
<view>新人手册</view>
</view>
<view class="menu-item" @click="toggle('center',customer_service)">
<!-- <image src="@/static/mine/kefu.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/kefu.png" mode="aspectFit"></image>
<view>联系客服</view>
</view>
<view class="menu-item" @click="toggle('center',wechat_img)">
<!-- <image src="@/static/mine/gognzhonghao.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/weixin.png" mode="aspectFit"></image>
<view>公众号</view>
</view>
<view class="menu-item" @click="toggle('center',customer_service)">
<!-- <image src="@/static/mine/jairushequ.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/shequ.png" mode="aspectFit"></image>
<view>加入社区</view>
</view>
<view class="menu-item" @click="goSuggest()">
<!-- <image src="@/static/mine/yijianfankui.png" mode="aspectFit"></image> -->
<image src="@/static/mine/caise/yijian.png" mode="aspectFit"></image>
<view>意见反馈</view>
</view>
</view>
</view>
</view>
<!-- 普通弹窗 -->
<uni-popup ref="popup" background-color="#fff">
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
<image :src="imageUrl+popupImgUrl" mode="aspectFit"></image>
</view>
</uni-popup>
</view>
</template>
<script>
import tabBarVue from '@/components/tabbar/tabBar.vue'
import storage from '@/utils/storage'
import constant from '@/utils/constant';
import {
changeUserType
} from '@/utils/common.js'
import config from '@/config'
import {
getJSONData,
getStrData
} from '@/utils/auth.js'
import {
queryDetail
} from '@/api/business/member.js'
export default {
props: {
nowUserType: {
type: String,
default: null
}
},
watch: {
// 'nowUserType': function(newVal, oldVal) {
// this.$emit('update:params', newVal);
// }
},
components: {
tabBarVue,
},
data() {
return {
localUserType: this.nowUserType,
globalConfig: getApp().globalData.config,
//是否已开通会员
ifHasCard: false,
userInfo: {
coupon: 0
},
imageUrl: config.baseUrl,
//公众号二维码
wechat_img: constant.wechat_img,
//客服二维码
customer_service: constant.customer_service,
//弹窗照片
popupImgUrl: "",
}
},
onShow() {},
onLoad() {},
mounted() {
if (null != getJSONData(constant.userInfo)) {
this.userInfo = getJSONData(constant.userInfo)
this.getDetail()
}
},
computed: {
windowHeight() {
return uni.getSystemInfoSync().windowHeight - 50
}
},
methods: {
toggle(type, key) {
this.type = type
this.popupImgUrl = getStrData(key)
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.open(type)
},
getDetail() {
queryDetail({
userId: this.userInfo.userId,
userType: this.localUserType
}).then(res => {
this.userInfo.tfansNum = res.data.tfansNum.toString()
this.userInfo.pointsBalance = res.data.pointsBalance.toString()
this.userInfo.report = res.data.report.toString()
this.userInfo.coupon = res.data.coupon.toString()
this.userInfo.avatar = this.imageUrl + res.data.avatar
})
},
/**
* 切换用户身份
*/
changeUserType(type) {
changeUserType(type)
this.localUserType = type
this.$emit("refreshUserType")
this.getDetail()
this.$forceUpdate()
},
handleToInfo() {
this.$tab.navigateTo('/pages/mine/info/index')
},
/**
* 跳转名片列表
*/
goMyCard() {
this.$tab.navigateTo('/pages/mine/card/my-card')
},
/**
* 跳转建议列表
*/
goSuggest() {
this.$tab.navigateTo('/pages/mine/set/suggest?userType=' + this.localUserType)
},
/**
* 跳转地址列表
*/
goMyAddr() {
this.$tab.navigateTo('/pages/mine/addr/addr-list')
},
goAuth() {
this.$tab.navigateTo('/pages/mine/auth/auth-choose')
},
goCoupon() {
this.$tab.navigateTo('/pages/mine/coupon/coupon-list?userId=' + this.userInfo.userId + '&coupon=' + this
.userInfo.coupon)
},
goHistory() {
this.$tab.navigateTo('/pages/mine/history/history')
},
goMemberCard() {
this.$tab.navigateTo('/pages/mine/member/member-card?userType=' + this.localUserType)
},
/**
* 去积分列表
*/
goPoints() {
this.$tab.navigateTo('/pages/mine/points/points')
},
/**
* 跳转编辑页
*/
goEdit() {
this.$tab.navigateTo('/pages/mine/set/my-info?userType=' + this.localUserType + '&userId=' + this.userInfo
.userId)
},
viewNewPeople() {
this.$tab.navigateTo(
`/pages/common/richview/index?title=${this.globalConfig.appInfo.agreements[3].title}&code=${this.globalConfig.appInfo.agreements[3].code}`
)
}
}
}
</script>
<style lang="scss">
.uni-popup {
top: 0 !important;
}
.vue-ref {
top: 0 !important;
}
.popup-content {
height: 100% !important;
}
.mine-container {
width: 100%;
color: #363636;
font-size: 38rpx;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
background-color: #F6F6F6;
.dl-title {
padding-top: calc(var(--status-bar-height) + 73rpx);
width: 100%;
background-color: #FC1F3E;
color: white;
display: flex;
position: relative;
z-index: 10;
font-size: 30rpx;
padding-right: 10rpx;
padding-bottom: 20rpx;
padding-left: 15rpx;
border-bottom: 1px solid #F4F4F4;
.left-search {
flex: 1;
display: flex;
align-items: center;
justify-content: left;
position: relative;
.dl-image {
width: 40rpx;
height: 40rpx;
}
.dl-text {
padding-left: 10rpx;
}
}
}
.dl-person-box {
width: 100%;
background-color: white;
padding: 20rpx 25rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.user-image-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.dl-image-box {
display: flex;
align-items: center;
justify-content: center;
width: 100rpx;
position: relative;
.touxiang {
border-radius: 50%;
width: 80rpx;
height: 80rpx;
}
.sex {
width: 30rpx;
height: 30rpx;
position: absolute;
bottom: 0rpx;
right: 0rpx;
border-radius: 50%;
}
}
.name-box {
display: flex;
padding-left: 20rpx;
flex: 1;
flex-direction: column;
align-items: self-start;
justify-content: center;
.title-box {
display: flex;
align-items: center;
justify-content: center;
image {
margin-left: 10rpx;
width: 50rpx;
height: 50rpx;
}
}
.bottom-box {
display: flex;
align-items: center;
justify-content: center;
.fans-box {
max-width: 200rpx;
margin-right: 10rpx;
font-size: 18rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FEF4EF;
padding: 5rpx 10rpx;
color: #FE9860;
border-radius: 20rpx;
image {
height: 20rpx;
width: 20rpx;
margin-right: 8rpx;
}
}
.member-box {
flex: 1;
font-size: 18rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FC1F3E;
color: white;
padding: 5rpx 10rpx;
border-radius: 20rpx;
}
}
.fans-num {}
}
.edit-box {
color: #929292;
text-align: right;
padding-right: 20rpx;
font-size: 22rpx;
width: 130rpx;
}
}
.dl-member-box {
display: flex;
align-items: center;
margin-top: 10rpx;
border-radius: 35rpx;
justify-content: center;
height: 100rpx;
width: 100%;
background: url('/static/index/member-bg.png');
background-size: 100% 100%;
background-position: center;
/* 图片居中显示 */
background-repeat: no-repeat;
/* 不重复背景图片 */
.dl-left {
display: flex;
flex: 1;
padding-left: 30rpx;
align-items: center;
font-size: 30rpx;
color: #623109;
justify-content: left;
.dl-icon {
width: 60rpx;
height: 56rpx;
}
}
.dl-right {
padding-right: 20rpx;
.dl-go-view {
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #F5D8A5;
color: #623109;
padding: 10rpx 25rpx;
float: right;
border-radius: 30rpx;
}
}
}
}
.has-member-card {
background-color: #FBE8CE !important;
color: #623109 !important;
border-bottom: 1px solid #F2E7D5 !important;
.points-box {
border-top: 1px solid #F2E7D5 !important;
padding-top: 10rpx;
.item-box {
background-color: white !important;
color: #623109 !important;
.dl-little {
background-color: #FED96E !important;
color: #363636;
}
}
}
.edit-box {
color: #623109 !important;
}
}
.points-box {
margin-top: 10rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.item-box {
flex: 1;
border-radius: 20rpx;
background-color: #FEF4EF;
margin: 8rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx;
.item-text-box {
font-size: 34rpx;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.dl-little {
font-size: 22rpx;
background-color: white;
border-radius: 20rpx;
padding: 5rpx 20rpx;
margin-top: 15rpx;
}
}
image {
width: 100rpx;
height: 100rpx;
}
.red-text {
color: #FC1F3E;
}
}
}
.public-notice-box {
width: 100%;
padding: 30rpx;
display: flex;
align-items: center;
margin-top: 20rpx;
border-radius: 20rpx;
background-color: #FEF4EF;
font-size: 33rpx;
justify-content: center;
.left-box {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.right-box {
font-size: 26rpx;
width: 200rpx;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
.other-box {
background-color: #F6F6F6;
width: 100%;
flex-direction: column;
padding: 30rpx 30rpx 0 30rpx;
display: flex;
align-items: center;
justify-content: center;
.box-room {
display: flex;
background-color: white;
border-radius: 20rpx;
width: 100%;
flex-direction: column;
padding: 25rpx 30rpx;
align-items: self-start;
justify-content: center;
.detail-title {
// border-left: 8rpx solid #FC1F3E;
font-weight: bold;
font-size: 29rpx;
// padding-left: 10rpx;
margin-bottom: 30rpx;
}
.menu-box {
padding-top: 15rpx;
border-top: 1rpx solid #F7F7F7;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.menu-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24rpx;
margin: 10rpx;
image {
width: 60rpx;
height: 60rpx;
margin-bottom: 10rpx;
}
}
}
.top-column {
flex-direction: column;
.menu-item {
width: 100%;
flex-direction: row;
border-bottom: 1rpx solid #F7F7F7;
padding-bottom: 10rpx;
image {
width: 60rpx;
height: 60rpx;
margin-bottom: 0 !important;
}
.text-dom {
display: flex;
align-items: center;
padding-left: 20rpx;
justify-content: flex-start;
font-size: 26rpx;
flex: 1;
}
.uni-icons {
width: 70rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink