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.
444 lines
9.9 KiB
444 lines
9.9 KiB
<!-- 会员中心页面 -->
|
|
<template>
|
|
<view class="member-center">
|
|
<!-- 导航栏 -->
|
|
<navbar title="会员中心" leftClick @leftClick="$utils.navigateBack"
|
|
bgColor="#000" color="#fff" />
|
|
|
|
<!-- 会员卡片 -->
|
|
<!-- <swiper class="swiper"
|
|
circular
|
|
:indicator-dots="indicatorDots"
|
|
:autoplay="autoplay"
|
|
:interval="interval"
|
|
:duration="duration" :current="current" style="height: 380rpx;">
|
|
<swiper-item v-for="(item,index) in list" :key="item.id">
|
|
<view class="member-item">
|
|
<image :src="item.headImage" mode="widthFix" 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">
|
|
{{ index + 1 == userInfo.role ? '已开通' : '暂未开通'}}
|
|
</view>
|
|
</view>
|
|
<view class="open">
|
|
累计消费满{{ item.money }}元自动开通
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper> -->
|
|
|
|
<view class=""
|
|
style="width: 100%;height: 150rpx;position: absolute;z-index: -1;background-color: #000;">
|
|
|
|
</view>
|
|
|
|
<uv-swiper
|
|
:list="list"
|
|
previousMargin="60rpx"
|
|
nextMargin="60rpx"
|
|
circular
|
|
:autoplay="false"
|
|
radius="20rpx"
|
|
indicator
|
|
height="290rpx"
|
|
bgColor="transparent"
|
|
keyName="headImage"></uv-swiper>
|
|
|
|
<!-- <esc-swiper ref="swiper" :autoplay="true" :circular="true" :current.sync="current" :size="list.length"
|
|
:plus="2" :width="750" :height="290" :itemWidth="600" :space="30">
|
|
<esc-swiper-item class="member-item" v-for="(item, idx) in list" :index="idx" :key="item.id">
|
|
<view class="item" style="width: 100%;height: 100%;">
|
|
<image :src="item.headImage" mode="widthFix" 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">
|
|
暂未开通
|
|
</view>
|
|
</view>
|
|
<view class="open">
|
|
累计消费满{{ item.money }}元自动开通
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</esc-swiper-item>
|
|
</esc-swiper> -->
|
|
|
|
<!-- 充值套餐 -->
|
|
<!-- <view class="top-up-package">
|
|
<view class="title">
|
|
充值套餐
|
|
</view>
|
|
<view class="set-meal-list">
|
|
<view v-for="item in cardList" :key="item.id"
|
|
:class="{'active-set-meal-item' : item.id == userInfo.role }"
|
|
class="set-meal-item">
|
|
<view class="card-tag">
|
|
限时折扣
|
|
</view>
|
|
<view class="card-title">{{ item.title }}</view>
|
|
<view class="money">
|
|
<text class="unit">￥</text>{{ item.money }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="member-descript">
|
|
（不同会员等级商品价格不一样，可以设置给与推荐人佣金。）
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 会员权益 -->
|
|
<view class="member-equity-title">
|
|
<image :src="configList.vip_qy_image" mode="widthFix" class="eqyity-img"></image>
|
|
</view>
|
|
|
|
<view class="equity-card-list">
|
|
<view v-for="(item, index) in list" :key="item.id" class="equity-card">
|
|
<view class="equity-title">累计消费满{{ item.money }}，将获得{{ item.title }}</view>
|
|
<view class="equity-descript-list">
|
|
<!-- <view class="equity-descript-icon">
|
|
<image :src="item.icon" mode="widthFix" class="equity-descript-img"></image>
|
|
</view> -->
|
|
<view class="equity-descript-item">
|
|
<uv-parse :content="item.details"></uv-parse>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="equity-card-list">
|
|
<view v-for="(item,index) in equityList" :key="item.id" class="equity-card">
|
|
<view class="equity-title">{{ item.title }}</view>
|
|
<view class="equity-descript-list">
|
|
<view class="equity-descript-icon">
|
|
<image :src="item.icon" mode="widthFix" class="equity-descript-img"></image>
|
|
</view>
|
|
<view v-for="(litem,lindex) in item.list" :key="lindex" class="equity-descript-item">
|
|
<view class="num">
|
|
{{ lindex + 1 }}
|
|
</view>
|
|
<view class="content">
|
|
{{ litem }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinsList from '@/mixins/list.js'
|
|
import {
|
|
mapState
|
|
} from 'vuex'
|
|
|
|
export default {
|
|
name: "MemberCenter",
|
|
mixins: [mixinsList],
|
|
data() {
|
|
return {
|
|
cardList: [{
|
|
id: 1,
|
|
title: "金卡",
|
|
money: "39"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "银卡",
|
|
money: "29"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "钻石卡",
|
|
money: "99"
|
|
}
|
|
],
|
|
equityList: [{
|
|
id: 1,
|
|
title: "权益1·专属推广码",
|
|
icon: "/pages_order/static/memberCenter/descript1.png",
|
|
list: [
|
|
"购买会员卡或者购物金额满500元！有专属推广码。",
|
|
"显示直推，间推人员信息及下单佣金明细。"
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "权益2·直推奖励",
|
|
icon: "/pages_order/static/memberCenter/descript2.png",
|
|
list: [
|
|
"通过扫专属推广码进来的用户下单，享受30%的直推奖励！（比例可调）",
|
|
"显示直推，间推人员信息及下单佣金明细。"
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "权益3·间推奖励",
|
|
icon: "/pages_order/static/memberCenter/descript1.png",
|
|
list: [
|
|
"下级发展的用户下单，享受20%的间推奖励！（比例可调）",
|
|
]
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "权益4·会员等级奖励",
|
|
icon: "/pages_order/static/memberCenter/descript2.png",
|
|
list: [
|
|
"银，金，钻不同会员等级，同一个商品分佣比例不一样，等级越高，佣金比例越高！"
|
|
]
|
|
}
|
|
],
|
|
mixinsListApi: "getRiceVipList",
|
|
current: 0
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo'])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.member-center {
|
|
|
|
//会员卡片
|
|
.member-image {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.member-info {
|
|
position: absolute;
|
|
bottom: 40rpx;
|
|
left: 0rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
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 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #F8A95F;
|
|
color: white;
|
|
border-radius: 30rpx;
|
|
padding: 7rpx 20rpx;
|
|
}
|
|
}
|
|
|
|
// 充值套餐
|
|
.top-up-package {
|
|
padding: 0rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.set-meal-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 20rpx;
|
|
|
|
.set-meal-item {
|
|
position: relative;
|
|
width: 30%;
|
|
margin-right: calc(9% / 2);
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
background: white;
|
|
margin-bottom: 20rpx;
|
|
padding: 40rpx;
|
|
|
|
&:nth-child(3n) {
|
|
margin-right: 0rpx;
|
|
}
|
|
|
|
.card-tag {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: #FF9633;
|
|
border-bottom-right-radius: 10rpx;
|
|
color: white;
|
|
padding: 5rpx 10rpx;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.card-title {
|
|
text-align: center;
|
|
font-size: 38rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.money {
|
|
color: #FF9633;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
|
|
.unit {}
|
|
}
|
|
}
|
|
|
|
.active-set-meal-item {
|
|
border: 2rpx solid #FF9633;
|
|
background: #FFF5EB;
|
|
}
|
|
}
|
|
|
|
.member-descript {
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// 会员权益
|
|
.member-equity-title {
|
|
margin: 30rpx 0rpx;
|
|
padding: 0rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.eqyity-img {
|
|
width: 240rpx;
|
|
}
|
|
}
|
|
|
|
.equity-card-list {
|
|
padding: 0rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.equity-card {
|
|
background: white;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 40rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.equity-title {
|
|
color: #F18F09;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.equity-descript-list {
|
|
position: relative;
|
|
|
|
.equity-descript-icon {
|
|
.equity-descript-img {
|
|
width: 150rpx;
|
|
}
|
|
}
|
|
|
|
.equity-descript-item {
|
|
position: relative;
|
|
background: #FDF9EF;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #F7C47B;
|
|
margin: 20rpx 0rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
color: #BA7E2B;
|
|
font-size: 24rpx;
|
|
|
|
.num {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: -15rpx;
|
|
left: -15rpx;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 50%;
|
|
background: #F18F09;
|
|
border: 2px solid #F8CB8E;
|
|
box-sizing: border-box;
|
|
color: white;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// &:nth-child(1) {
|
|
// .equity-descript-list {
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// flex-wrap: wrap;
|
|
|
|
// .equity-descript-icon {
|
|
// position: absolute;
|
|
// bottom: 100%;
|
|
// right: 0rpx;
|
|
// z-index: 200;
|
|
// }
|
|
|
|
// .equity-descript-item {
|
|
// width: 49%;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// &:nth-child(2) {
|
|
// .equity-descript-icon {
|
|
// position: absolute;
|
|
// bottom: -10%;
|
|
// right: 0rpx;
|
|
// z-index: 200;
|
|
// }
|
|
|
|
// .equity-descript-item {
|
|
// &:nth-child(3) {
|
|
// width: calc(100% - 160rpx);
|
|
// margin-right: 10rpx;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// &:nth-child(3),
|
|
// &:nth-child(4) {
|
|
// .equity-descript-icon {
|
|
// position: absolute;
|
|
// bottom: 100%;
|
|
// right: 0rpx;
|
|
// z-index: 200;
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
</style>
|