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.
387 lines
7.8 KiB
387 lines
7.8 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="会员" />
|
|
|
|
<view class="swipe">
|
|
<uv-swiper
|
|
:list="bannerList"
|
|
indicator
|
|
height="320rpx"
|
|
keyName="image"></uv-swiper>
|
|
</view>
|
|
|
|
<view class="vip">
|
|
<view class="title1">
|
|
限时活动
|
|
</view>
|
|
<view class="title2">
|
|
会员套餐
|
|
</view>
|
|
<view class="box-content">
|
|
限时活动<text>{{ configList.vip_open_num }}</text>名
|
|
</view>
|
|
<view class="di">
|
|
<view class="pad">
|
|
{{ riceInfo.memberNum }}/{{ configList.vip_open_num }}
|
|
</view>
|
|
<view class="submitOpen"
|
|
@click="submitOpen">
|
|
开通会员
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="middle">
|
|
<view class="rights">会员权益</view>
|
|
<view class="middle-one">会员条件：{{ configList.vip_rloe }}</view>
|
|
|
|
<!-- <view class="middle-boxs">
|
|
<view class="middle-two-1">权益一</view>
|
|
<view class="middle-box">
|
|
<view class="middlex-minBox">
|
|
<view class="middle-box-one">
|
|
<view>赠送价值</view>
|
|
<view style="color: #D15206; font-size: 28rpx;">100元</view>
|
|
<view>的三诺血糖</view>
|
|
</view>
|
|
<view>检测仪*1台</view>
|
|
</view>
|
|
</view>
|
|
<view class="img">
|
|
<image src="../../static/image/member/1.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="middle-boxs">
|
|
<view style="padding: 20rpx;"></view>
|
|
<view class="middle-two-2">权益二</view>
|
|
<view class="middle-box">
|
|
<view class="middlex-minBox-2">
|
|
<view class="middle-box-one">
|
|
<view>会员推荐朋友购买会员，</view>
|
|
<view>第一个</view>
|
|
</view>
|
|
<view>返利10%、第二个返利20%、第三个返利30%、</view>
|
|
<view style="display: flex; align-items: center;">
|
|
<view>第四个返利40%、</view>
|
|
<text style="color: #474747; font-size: 24rpx;">四四循环</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="img-2">
|
|
<image src="../../static/image/member/2.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="middle-boxs">
|
|
<view class="middle-two-1">权益三</view>
|
|
<view class="middle-box">
|
|
<view class="middlex-minBox">
|
|
<view>所推荐朋友购买产品及今后产生复购</view>
|
|
<view class="middle-box-one">
|
|
<view>产品的</view>
|
|
<view style="color: #D15206; font-size: 28rpx;">返15%佣金</view>
|
|
<view>（体验价不计算在内）</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="img">
|
|
<image src="../../static/image/member/3.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view> -->
|
|
|
|
|
|
<template
|
|
v-for="(item, index) in vipInfoList">
|
|
<view class="middle-boxs"
|
|
v-if="index % 2 == 0"
|
|
:key="index">
|
|
<view class="middle-two-1">{{ item.title }}</view>
|
|
<view class="middle-box">
|
|
<view class="middlex-minBox">
|
|
<uv-parse :content="item.details"></uv-parse>
|
|
</view>
|
|
</view>
|
|
<view class="img">
|
|
<image :src="item.image" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="middle-boxs"
|
|
v-else
|
|
:key="index">
|
|
<view style="padding: 20rpx;"></view>
|
|
<view class="middle-two-2">{{ item.title }}</view>
|
|
<view class="middle-box">
|
|
<view class="middlex-minBox-2">
|
|
<uv-parse :content="item.details"></uv-parse>
|
|
</view>
|
|
</view>
|
|
<view class="img-2">
|
|
<image :src="item.image" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<!-- <view class="middle-bottom">
|
|
<view>*仅限前</view>
|
|
<text>1000名</text>
|
|
<view>充值会员</view>
|
|
</view> -->
|
|
|
|
<view class="middle-bottom">
|
|
{{ configList.vip_text }}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<tabber select="member" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
components: {
|
|
tabber,
|
|
},
|
|
data() {
|
|
return {
|
|
bannerList: [],
|
|
vipInfoList: [],
|
|
};
|
|
},
|
|
computed : {
|
|
...mapState(['userInfo', 'riceInfo']),
|
|
},
|
|
onShow() {
|
|
this.getBanner()
|
|
this.getRiceVipList()
|
|
this.$store.commit('getRiceInfo')
|
|
},
|
|
methods : {
|
|
// 获取轮播图
|
|
getBanner(){
|
|
this.$api('getRiceBanner', res => {
|
|
if(res.code == 200){
|
|
this.bannerList = res.result
|
|
}
|
|
})
|
|
},
|
|
// 获取轮播图
|
|
getRiceVipList(){
|
|
this.$api('getRiceVipList', res => {
|
|
if(res.code == 200){
|
|
this.vipInfoList = res.result
|
|
}
|
|
})
|
|
},
|
|
// 开通会员
|
|
submitOpen(){
|
|
this.$api('applyRiceVip', res => {
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title: '开通成功',
|
|
icon : 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page {
|
|
min-height: 100vh;
|
|
color: #F3F3F3;
|
|
z-index: 0;
|
|
|
|
.swipe {
|
|
overflow: hidden;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx;
|
|
}
|
|
|
|
.vip{
|
|
background: url(/static/image/member/a.png);
|
|
background-size: 100% 100%;
|
|
margin: 20rpx;
|
|
position: relative;
|
|
color: #000;
|
|
padding-bottom: 10rpx;
|
|
.title1{
|
|
padding: 10rpx 60rpx;
|
|
}
|
|
.title2{
|
|
position: absolute;
|
|
left: 300rpx;
|
|
top: 30rpx;
|
|
}
|
|
.box-content{
|
|
background-color: #00000013;
|
|
padding: 50rpx;
|
|
margin: 40rpx;
|
|
text-align: center;
|
|
border-radius: 20rpx;
|
|
font-size: 50rpx;
|
|
font-weight: 900;
|
|
margin-bottom: 0;
|
|
text{
|
|
color: #f40;
|
|
}
|
|
}
|
|
.di{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
align-items: flex-end;
|
|
.pad{
|
|
font-size: 26rpx;
|
|
}
|
|
.submitOpen{
|
|
padding: 20rpx 40rpx;
|
|
border-radius: 40rpx;
|
|
background-color: #F6CD59;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.middle {
|
|
margin: 20rpx;
|
|
border-radius: 16rpx;
|
|
background-color: #fff;
|
|
padding-top: 20rpx;
|
|
|
|
.rights {
|
|
margin-left: 20rpx;
|
|
padding: 0 20rpx;
|
|
color: #474747;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
border-left: 6rpx solid #A3D250;
|
|
}
|
|
|
|
.middle-one {
|
|
font-size: 28rpx;
|
|
padding: 10rpx 120rpx 10rpx 40rpx;
|
|
color: #D15206;
|
|
|
|
}
|
|
|
|
.middle-boxs {
|
|
padding: 40rpx 40rpx 20rpx 20rpx;
|
|
position: relative;
|
|
margin-top: 40rpx;
|
|
|
|
|
|
.middle-two-1,
|
|
.middle-two-2,
|
|
.middle-two-3 {
|
|
display: inline-block;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #474747;
|
|
padding: 10rpx 40rpx;
|
|
background-color: #F6CD59;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
.middle-two-2 {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 20rpx;
|
|
}
|
|
|
|
.middle-box {
|
|
margin-top: -30rpx;
|
|
min-height: 160rpx;
|
|
background-color: #FFFBF2;
|
|
|
|
.middlex-minBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 60rpx 0rpx 0rpx 40rpx;
|
|
font-size: 24rpx;
|
|
color: #474747;
|
|
|
|
.middle-box-one {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.middlex-minBox-2 {
|
|
display: flex;
|
|
padding: 80rpx 0rpx 30rpx 40rpx;
|
|
font-size: 24rpx;
|
|
color: #474747;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin-right: 10rpx;
|
|
|
|
.middle-box-one {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
view:nth-child(2) {
|
|
font-size: 28rpx;
|
|
color: #D15206;
|
|
}
|
|
|
|
view:nth-child(3) {
|
|
font-size: 28rpx;
|
|
color: #D15206;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img {
|
|
position: absolute;
|
|
height: 220rpx;
|
|
width: 180rpx;
|
|
top: -40rpx;
|
|
right: 80rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.img-2 {
|
|
position: absolute;
|
|
height: 220rpx;
|
|
width: 180rpx;
|
|
top: -40rpx;
|
|
left: 50rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.middle-bottom {
|
|
display: flex;
|
|
color: #CCCCCC;
|
|
padding: 10rpx 20rpx;
|
|
font-size: 24rpx;
|
|
text {
|
|
color: #D15206;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|