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.
724 lines
17 KiB
724 lines
17 KiB
<template>
|
|
<view class="page">
|
|
|
|
<view class="flex flex-column header">
|
|
<view class="user">
|
|
<image class="user-avatar" :src="userInfo.headImage" mode="aspectFill"></image>
|
|
<view class="user-name">{{ userInfo.nickName }}</view>
|
|
</view>
|
|
<view class="member">
|
|
<view class="flex member-overview" :class="[role ? 'is-member' : '']">
|
|
<template v-if="role">
|
|
<!-- todo: 缺切图 "皇冠" -->
|
|
<image class="icon icon-crown" src="" mode="widthFix"></image>
|
|
<template v-if="role === 'member-personal'">
|
|
<image class="icon icon-role" src="@/static/image/center/icon-member-personal.png" mode="widthFix"></image>
|
|
</template>
|
|
<template v-else-if="role === 'member-business'">
|
|
<image class="icon icon-role" src="@/static/image/center/icon-member-business.png" mode="widthFix"></image>
|
|
</template>
|
|
<!-- todo: 换回接口字段 -->
|
|
<text class="member-tips">{{ `将于${'2026-12-12'} 到期` }}</text>
|
|
</template>
|
|
<template v-else>
|
|
<view class="flex">
|
|
<!-- todo: 缺切图 "皇冠" -->
|
|
<image class="icon icon-crown" src="" mode="widthFix"></image>
|
|
<!-- todo: 缺切图 "会员" -->
|
|
<image class="icon icon-member" src="" mode="widthFix"></image>
|
|
<text class="member-tips">成为会员可获得会员卡，享受会员福利哟~</text>
|
|
</view>
|
|
<button plain class="btn member-btn" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">立即开通</button>
|
|
</template>
|
|
</view>
|
|
<view class="member-rights">
|
|
<image class="member-rights-bg" src="@/static/image/center/member-bg.png" mode="top" ></image>
|
|
|
|
<view class="flex member-rights-content">
|
|
<view class="flex">
|
|
<image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image>
|
|
<view>
|
|
<view class="member-rights-label">会员福利</view>
|
|
<view class="member-rights-value">会员折扣</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex">
|
|
<!-- todo: 缺切图 -->
|
|
<image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image>
|
|
<view>
|
|
<view class="member-rights-label">会员积分</view>
|
|
<view class="member-rights-value">兑换礼品</view>
|
|
</view>
|
|
</view>
|
|
<!-- todo: 缺切图 -->
|
|
<view class="flex">
|
|
<image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image>
|
|
<view>
|
|
<view class="member-rights-label">会员优惠券</view>
|
|
<view class="member-rights-value">满减折扣</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- todo: check -> @click="$utils.navigateTo('/pages_order/mine/withdraw') -->
|
|
<view class="card flex account">
|
|
<view class="flex flex-column">
|
|
<view class="account-value">{{ riceInfo.balance || 0 }}<text class="account-unit">元</text></view>
|
|
<view class="account-label">我的余额</view>
|
|
</view>
|
|
<view class="flex flex-column">
|
|
<!-- todo: 字段对接 -->
|
|
<view class="account-value">{{ riceInfo.balance || 0 }}</view>
|
|
<view class="account-label">我的积分</view>
|
|
</view>
|
|
<view class="flex flex-column">
|
|
<view class="account-value">{{ riceInfo.canWithdraw || 0 }}<text class="account-unit">元</text></view>
|
|
<view class="account-label">推广佣金</view>
|
|
</view>
|
|
<view class="flex flex-column">
|
|
<!-- todo: 字段对接 -->
|
|
<view class="account-value">{{ riceInfo.balance || 0 }}<text class="account-unit">张</text></view>
|
|
<view class="account-label">优惠券</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card fun-common">
|
|
<view v-if="role === 'merchant'" class="fun-header">
|
|
<cardTitle>常用功能</cardTitle>
|
|
</view>
|
|
<view class="fun-content fun-common-content">
|
|
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
|
|
<image class="fun-common-icon" src="@/static/image/center/icon-member-center.png" mode="widthFix"></image>
|
|
<text class="fun-common-label">会员中心</text>
|
|
</view>
|
|
<!-- todo: navigateTo -->
|
|
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/partner')">
|
|
<image class="fun-common-icon" src="@/static/image/center/icon-team.png" mode="widthFix"></image>
|
|
<text class="fun-common-label">我的团队</text>
|
|
</view>
|
|
<!-- todo: navigateTo -->
|
|
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/promotion')">
|
|
<image class="fun-common-icon" src="@/static/image/center/icon-invite.png" mode="widthFix"></image>
|
|
<text class="fun-common-label">邀请好友</text>
|
|
</view>
|
|
<!-- todo: navigateTo -->
|
|
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
|
|
<image class="fun-common-icon" src="@/static/image/center/icon-coupon.png" mode="widthFix"></image>
|
|
<text class="fun-common-label">优惠券</text>
|
|
</view>
|
|
<!-- todo: navigateTo -->
|
|
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/coupon')">
|
|
<image class="fun-common-icon" src="@/static/image/center/icon-voucher.png" mode="widthFix"></image>
|
|
<text class="fun-common-label">代金券</text>
|
|
</view>
|
|
<!-- todo: navigateTo -->
|
|
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
|
|
<image class="fun-common-icon" src="@/static/image/center/icon-service.png" mode="widthFix"></image>
|
|
<text class="fun-common-label">联系客服</text>
|
|
</view>
|
|
<!-- todo: navigateTo -->
|
|
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
|
|
<image class="fun-common-icon" src="@/static/image/center/icon-sign-in.png" mode="widthFix"></image>
|
|
<text class="fun-common-label">每日签到</text>
|
|
</view>
|
|
<!-- todo: navigateTo -->
|
|
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
|
|
<image class="fun-common-icon" src="@/static/image/center/icon-cooperation.png" mode="widthFix"></image>
|
|
<text class="fun-common-label">商家合作</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="role === 'merchant'" class="card fun-merchant">
|
|
<view class="fun-header">
|
|
<cardTitle>商家功能</cardTitle>
|
|
</view>
|
|
<view class="flex fun-content fun-merchant-content">
|
|
<view class="left">
|
|
<image class="left-bg" src="@/static/image/center/bg-verify.png"></image>
|
|
|
|
<view class="flex left-content">
|
|
<text>核销明细</text>
|
|
<image class="left-icon" src="@/static/image/center/icon-arrow.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="right" @click="onScan">
|
|
<image class="right-bg" src="@/static/image/center/bg-scan.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- todo: delete -->
|
|
<template v-if="false">
|
|
|
|
<!-- 我的服务 -->
|
|
<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="aspectFill" />
|
|
<view class="title">我的订单</view>
|
|
</view>
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')">
|
|
<image src="@/static/image/center/3.png" mode="aspectFill" />
|
|
<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="aspectFill" />
|
|
<view class="title">合伙人招募</view>
|
|
</view>
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')">
|
|
<image src="@/static/image/center/8.png" mode="aspectFill" />
|
|
<view class="title">帮助与反馈</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
|
|
<image src="@/static/image/center/address.png" mode="aspectFill" />
|
|
<view class="title">我的地址</view>
|
|
</view>
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')">
|
|
<image src="@/static/image/center/9.png" mode="aspectFill" />
|
|
<view class="title">礼包列表</view>
|
|
</view>
|
|
<view class="boxs" @click="logout">
|
|
<image src="@/static/image/center/logout.png" mode="aspectFill" />
|
|
<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" />
|
|
|
|
</template>
|
|
|
|
<tabber select="center" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import cardTitle from '@/components/base/cardTitle.vue'
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import {
|
|
mapState
|
|
} from 'vuex'
|
|
import customerServicePopup from '@/components/config/customerServicePopup.vue'
|
|
|
|
export default {
|
|
components: {
|
|
cardTitle,
|
|
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 {
|
|
role: '', // member-personal | member-business | merchant
|
|
|
|
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: '暂未开放',
|
|
})
|
|
},
|
|
logout(){
|
|
uni.showModal({
|
|
title: '确认退出登录吗',
|
|
success : (r) => {
|
|
if (r.confirm) {
|
|
this.$store.commit('logout', true)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//关闭广告
|
|
closeAdvertising() {
|
|
this.showAdvertising = false;
|
|
},
|
|
|
|
//获取会员卡片数据
|
|
getMemberCardData() {
|
|
this.$api('getRiceVipList', res => {
|
|
if (res.code == 200) {
|
|
this.vipList = res.result
|
|
}
|
|
})
|
|
},
|
|
|
|
onScan() {
|
|
// todo
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
background-color: #F5F5F5;
|
|
|
|
.header {
|
|
height: 550rpx;
|
|
background-image: linear-gradient(#84A73F, #D8FF8F);
|
|
justify-content: flex-start;
|
|
position: relative;
|
|
}
|
|
|
|
// 佣金数据
|
|
.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: 30rpx 20rpx;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.server-title {
|
|
margin-bottom: 30rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
position: relative;
|
|
padding-left: 20rpx;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 8rpx;
|
|
height: 32rpx;
|
|
background: $uni-color;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-bottom: 30rpx;
|
|
gap: 20rpx;
|
|
.boxs {
|
|
width: 23%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-radius: 16rpx;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(227, 68, 26, 0.05);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
display: block;
|
|
margin: 0rpx auto 16rpx auto;
|
|
position: relative;
|
|
z-index: 2;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.title {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
position: relative;
|
|
z-index: 2;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
&:active {
|
|
image {
|
|
transform: translateY(-4rpx);
|
|
}
|
|
|
|
.title {
|
|
color: $uni-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user {
|
|
margin-top: 123rpx;
|
|
|
|
&-avatar {
|
|
width: 115rpx;
|
|
height: 115rpx;
|
|
border-radius: 50%;
|
|
}
|
|
&-name {
|
|
margin-top: 4rpx;
|
|
color: $uni-text-color-inverse;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.member {
|
|
width: calc(100vw - 13rpx*2);
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 13rpx;
|
|
|
|
color: #F5F5F5;
|
|
font-size: 22rpx;
|
|
|
|
background-color: #2B2C30;
|
|
border-top-left-radius: 20rpx;
|
|
border-top-right-radius: 20rpx;
|
|
|
|
&-overview {
|
|
min-height: 81rpx;
|
|
justify-content: space-between;
|
|
|
|
&.is-member {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
height: auto;
|
|
|
|
&-crown {
|
|
width: 35rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
&-member {
|
|
width: 62rpx;
|
|
}
|
|
|
|
&-role {
|
|
width: 156rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
&-rights {
|
|
width: 56rpx;
|
|
margin-right: 11rpx;
|
|
}
|
|
}
|
|
|
|
&-btn {
|
|
padding: 9rpx 17rpx;
|
|
color: #000000;
|
|
font-size: 22rpx;
|
|
background-image: linear-gradient(131deg, #F8EDE1, #B3997E);
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
|
|
border-radius: 24rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
&-tips {
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
&-rights {
|
|
background-color: #37393D;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 142rpx;
|
|
box-sizing: border-box;
|
|
|
|
&-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 35rpx 6rpx 35rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&-label {
|
|
color: #CBAD8F;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
}
|
|
&-value {
|
|
color: #F5F5F5;
|
|
font-size: 18rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
margin: 20rpx 13rpx 0 13rpx;
|
|
}
|
|
|
|
.account {
|
|
padding: 40rpx 40rpx 23rpx 40rpx;
|
|
justify-content: space-between;
|
|
|
|
&-label {
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
margin-top: 9rpx;
|
|
}
|
|
|
|
&-value {
|
|
color: #000000;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
&-unit {
|
|
color: #666666;
|
|
font-size: 18rpx;
|
|
margin-left: 2rpx;
|
|
}
|
|
}
|
|
|
|
.fun {
|
|
|
|
&-header {
|
|
text-align: left;
|
|
padding-left: 12rpx;
|
|
margin-bottom: 19rpx;
|
|
|
|
/deep/ .title__view {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
&-common {
|
|
padding: 30rpx 40rpx 67rpx 40rpx;
|
|
|
|
&-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-column-gap: 71rpx;
|
|
grid-row-gap: 81rpx;
|
|
}
|
|
|
|
&-icon {
|
|
width: 66rpx;
|
|
height: auto;
|
|
}
|
|
|
|
&-label {
|
|
color: #000000;
|
|
font-size: 28rpx;
|
|
margin-top: 5rpx;
|
|
}
|
|
}
|
|
|
|
&-merchant {
|
|
padding: 33rpx 30rpx 28rpx 30rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
&-content {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.left {
|
|
width: 198rpx;
|
|
height: 139rpx;
|
|
position: relative;
|
|
|
|
&-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&-content {
|
|
position: absolute;
|
|
top: 13rpx;
|
|
left: 14rpx;
|
|
|
|
color: $uni-text-color-inverse;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
&-icon {
|
|
width: 23rpx;
|
|
height: auto;
|
|
margin-left: 9rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 429rpx;
|
|
height: 164rpx;
|
|
margin-top: -25rpx;
|
|
&-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|