You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
507 lines
11 KiB
507 lines
11 KiB
<template>
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<navbar title="个人中心"
|
|
leftClick
|
|
@leftClick="$utils.navigateBack"
|
|
bgColor="#E3441A" color="#fff" />
|
|
|
|
<!-- 头部 -->
|
|
<view class="head">
|
|
<view class="headImage">
|
|
<image :src="userInfo.headImage" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<view class="user-info">
|
|
<view class="user-base-info">
|
|
<view class="user-base-top">
|
|
<view class="user-name">{{ userInfo.nickName}}</view>
|
|
<view class="member-level">
|
|
<image v-if="userInfo.role == 1" :src="configList.vip_user" mode="aspectFill" class="level">
|
|
</image>
|
|
<image v-if="userInfo.role == 2" src="@/static/image/center/gold-min.png" mode="aspectFill"
|
|
class="level">
|
|
</image>
|
|
<image v-if="userInfo.role == 3" src="@/static/image/center/sliver-min.png"
|
|
mode="aspectFill" class="level">
|
|
</image>
|
|
</view>
|
|
<view class="user-tag">
|
|
{{ userRole[userInfo.isPay] }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="edit-user"
|
|
@click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')">
|
|
<image src="@/static/image/center/edit-icon.png" mode="aspectFill" class="edit-icon"></image>
|
|
<view class="edit-btn">
|
|
修改资料
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="user-phone">
|
|
手机号:{{ userInfo.phone }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 会员卡片 -->
|
|
<view @click="$utils.navigateTo({url : '/pages_order/mine/memberCenter' })"
|
|
v-if="userInfo.role"
|
|
class="earnings">
|
|
<view v-if="index + 1 == userInfo.role" v-for="(item,index) in vipList" :key="item.id" class="member-item">
|
|
<image :src="item.headImage" mode="aspectFill" class="member-image"></image>
|
|
|
|
<view class="member-info">
|
|
<view class="profile-photo">
|
|
<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
|
|
<view class="open-status">
|
|
开通时间：{{ riceInfo.openTime }}
|
|
</view>
|
|
</view>
|
|
<view class="open">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 佣金数据 -->
|
|
<view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="brokerage-data"
|
|
:class="{'brokerage-data-mt' : !userInfo.role}">
|
|
<view class="brokerage">
|
|
<image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image>
|
|
|
|
<div class="main">
|
|
<div class="title">我的佣金</div>
|
|
<div class="money">￥{{ riceInfo.canWithdraw || 0 }}</div>
|
|
</div>
|
|
</view>
|
|
|
|
<view class="balance">
|
|
<image :src="configList.price_image" mode="aspectFill" class="balance-img"></image>
|
|
|
|
<div class="main">
|
|
<div class="title">我的余额</div>
|
|
<div class="money">￥{{ riceInfo.balance || 0 }}</div>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的服务 -->
|
|
<view class="myServer">
|
|
<view class="server-title">
|
|
我的服务
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')">
|
|
<image src="@/static/image/center/1.png" mode="widthFix" />
|
|
<view class="title">我的订单</view>
|
|
</view>
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/partner')">
|
|
<image src="@/static/image/center/2.png" mode="widthFix" />
|
|
<view class="title">我的团队</view>
|
|
</view>
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')">
|
|
<image src="@/static/image/center/3.png" mode="widthFix" />
|
|
<view class="title">联系客服</view>
|
|
</view>
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/promotion')">
|
|
<image src="@/static/image/center/4.png" mode="widthFix" />
|
|
<view class="title">邀请好友</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')">
|
|
<image src="@/static/image/center/5.png" mode="widthFix" />
|
|
<view class="title">合伙人招募</view>
|
|
</view>
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
|
|
<image src="@/static/image/center/6.png" mode="widthFix" />
|
|
<view class="title">会员权益</view>
|
|
</view>
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/coupon')">
|
|
<image src="@/static/image/center/7.png" mode="widthFix" />
|
|
<view class="title">优惠券</view>
|
|
</view>
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')">
|
|
<image src="@/static/image/center/8.png" mode="widthFix" />
|
|
<view class="title">帮助与反馈</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
|
|
<image src="@/static/image/center/5.png" mode="widthFix" />
|
|
<view class="title">我的地址</view>
|
|
</view>
|
|
<view class="boxs" @click="$store.commit('logout')">
|
|
<image src="@/static/image/center/6.png" mode="widthFix" />
|
|
<view class="title">退出登录</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 广告 -->
|
|
<div v-if="showAdvertising" class="ad"
|
|
@click="$utils.navigateTo('/pages_order/mine/recruit')">
|
|
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
|
|
:duration="duration">
|
|
<swiper-item v-for="(item, index) in adList" :key="index">
|
|
<view class="swiper-main">
|
|
<view @click="closeAdvertising" class="close">
|
|
<image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image>
|
|
</view>
|
|
<image :src="item" mode="aspectFill" class="swiper-main-img"></image>
|
|
<div class="ad-tag">
|
|
<image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image>
|
|
</div>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</div>
|
|
|
|
<customerServicePopup ref="customerServicePopup" />
|
|
|
|
<tabber select="center" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import {
|
|
mapState
|
|
} from 'vuex'
|
|
import customerServicePopup from '@/components/config/customerServicePopup.vue'
|
|
|
|
export default {
|
|
components: {
|
|
tabber,
|
|
customerServicePopup,
|
|
},
|
|
computed: {
|
|
...mapState(['riceInfo']),
|
|
adList() {
|
|
let arr = [];
|
|
if (this.configList?.shop_get_image) {
|
|
arr = this.configList?.shop_get_image?.split(',')
|
|
}
|
|
return arr
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
vipType: ['普通会员', '黄金会员', '渠道商'],
|
|
vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
|
|
vipList: [],
|
|
showAdvertising: true,
|
|
userRole: ['会员', '用户', '渠道']
|
|
}
|
|
},
|
|
onShow() {
|
|
this.$store.commit('getUserInfo')
|
|
this.$store.commit('getRiceInfo')
|
|
this.getMemberCardData();
|
|
},
|
|
methods: {
|
|
clickNo() {
|
|
uni.showModal({
|
|
title: '暂未开放',
|
|
})
|
|
},
|
|
|
|
//关闭广告
|
|
closeAdvertising() {
|
|
this.showAdvertising = false;
|
|
},
|
|
|
|
//获取会员卡片数据
|
|
getMemberCardData() {
|
|
this.$api('getRiceVipList', res => {
|
|
if (res.code == 200) {
|
|
this.vipList = res.result
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
|
|
// 头部
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 60rpx 20rpx 120rpx 20rpx;
|
|
background: $uni-color;
|
|
|
|
.headImage {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
background-image: url(/static/image/center/head-img.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 50%, 50%;
|
|
background-size: 100%;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
width: calc(100% - 130rpx);
|
|
|
|
.user-base-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.user-base-top {
|
|
width: 65%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
color: white;
|
|
|
|
.user-name {
|
|
max-width: calc(100% - 240rpx);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.member-level {
|
|
margin-left: 10rpx;
|
|
|
|
.level {
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.user-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #000;
|
|
width: 100rpx;
|
|
height: 40rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.edit-user {
|
|
width: 35%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.edit-icon {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.edit-btn {
|
|
color: white;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-phone {
|
|
color: white;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 会员卡片
|
|
.earnings {
|
|
padding: 0rpx 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: -18%;
|
|
|
|
.member-item {
|
|
position: relative;
|
|
|
|
.member-image {
|
|
width: 100%;
|
|
height: 300rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.member-info {
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
left: 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0rpx 40rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
|
|
.profile-photo {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.pro-img {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.open-status {
|
|
color: #F8A95F;
|
|
border: 1px solid #F8A95F;
|
|
border-radius: 30rpx;
|
|
padding: 7rpx 20rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.open {
|
|
font-size: 26rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 佣金数据
|
|
.brokerage-data {
|
|
padding: 20rpx;
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
margin: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
.brokerage,
|
|
.balance {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 50%;
|
|
|
|
.brokerage-img,
|
|
.balance-img {
|
|
width: 50%;
|
|
height: auto;
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
padding: 30rpx 0rpx;
|
|
|
|
.title {
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.money {
|
|
font-size: 40rpx;
|
|
color: $uni-color;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.brokerage-data-mt {
|
|
margin-top: 50rpx;
|
|
}
|
|
|
|
// 我的服务
|
|
.myServer {
|
|
margin: 0rpx 20rpx 20rpx 20rpx;
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.server-title {
|
|
margin-bottom: 20rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-bottom: 20rpx;
|
|
|
|
.boxs {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: block;
|
|
margin: 0rpx auto 10rpx auto;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 广告
|
|
.ad {
|
|
margin: 0rpx 20rpx;
|
|
|
|
.swiper {
|
|
.swiper-main {
|
|
position: relative;
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
|
|
.close-img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-main-img {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.ad-tag {
|
|
position: absolute;
|
|
left: 20rpx;
|
|
bottom: 20rpx;
|
|
|
|
.ad-tag-img {
|
|
width: 120rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|