Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
真食物配套的电商小程序.
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.
406 Commits
4 Branches
0 Tags
43 MiB
 
 
 
Tree: e8ad7b2d9f
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e8ad7b2d9f'
${ noResults }
zsw-farm-bxg/pages/user/UserVip/index.vue

434 lines
13 KiB
Raw Blame History

<template>
<view class="member-center">
<view class="header">
<cu-custom :isBack="true" :isCenter="true">
<block slot="backText">
<view class="backImg">
<image src="@/static/images/back-btn.png" mode=""></image>
</view>
</block>
<block slot="content">
<view class="tab-title">会员中心</view>
</block>
</cu-custom>
</view>
<view class="vip-info-box">
<view class="vip-box">
<!-- <image class="bg" src="@/static/images/vip-card.png" mode=""></image> -->
<image class="bg" :src="vipList[activeIndex].image" mode=""></image>
<view class="info-box">
<view class="user-info acea-row">
<view class="headImg">
<image class="image" v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
<view class="noAvatar acea-row row-middle row-center" v-else>
<image src="@/static/images/yanjie-logo.png" mode="widthFix"></image>
</view>
</view>
<view class="">
<view class="user-name">{{ userInfo.nickname || '微信用户' }}</view>
<view class="">账号：{{ userInfo.phone || userInfo.uid }}</view>
</view>
</view>
<view class="progress-bar-box">
<view class="progress-bar" :style="'width:'+ (growthPercent || 0) +'%;'"></view>
</view>
<view class="acea-row">
<!-- <view class="vip-icon"></view> -->
<image class="vip-icon" :src="vipList[activeIndex].icon" mode=""></image>
<view class="to-next-level">下一等级还需成长值 {{userInfo.growth}}/{{vipList[activeIndex+1].growthValue}}</view>
</view>
</view>
</view>
</view>
<!-- <view class="header">
<view class="slider-banner banner">
<swiper indicatorDots="true" @change="swiperChange">
<block v-for="(item, vipListIndex) in vipList" :key="vipListIndex">
<swiper-item>
<view class="swiper-slide" :style="{ backgroundImage: 'url(' + item.image + ')' }">
<image :src="item.icon" />
<view class="name">{{ item.name }}</view>
<view class="discount">
可享受商品折扣: {{ item.discount / 10 }}折
<text class="iconfont icon-zhekou"></text>
</view>
<view class="nav acea-row" v-if="item.grade == grade">
<view class="item" v-for="(val, indexn) in vipComplete" :key="indexn">
<view class="num">{{ val.newNumber }}</view>
<view>{{ val.realName }}</view>
</view>
</view>
<view class="lock" v-if="item.grade > grade">
<text class="iconfont icon-quanxianguanlisuozi"></text>该会员等级尚未解锁
</view>
<view class="lock" v-if="item.grade < grade">
<text class="iconfont icon-xuanzhong1"></text>已解锁更高等级
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view> -->
<view class="wrapper" :style="'min-height:calc(100vh - '+ topHeight +'px)'">
<view class="title">
会员权益
<!-- <view>
<text class="iconfont icon-jingyanzhi"></text>会员升级要求
</view>
<view class="num">
<text class="current">{{ taskCount }}</text>
/{{ vipRequire.length }}
</view> -->
</view>
<view class="vip-rights acea-row row-around">
<view class="rights-item">
<image src="../../../static/images/vip-rights1.png" mode=""></image>
<view class="text">专属优惠</view>
</view>
<view class="rights-item">
<image src="../../../static/images/vip-rights2.png" mode=""></image>
<view class="text">会员券</view>
</view>
<view class="rights-item">
<image src="../../../static/images/vip-rights3.png" mode=""></image>
<view class="text">生日福利</view>
</view>
<view class="rights-item">
<image src="../../../static/images/vip-rights4.png" mode=""></image>
<view class="text">积分回馈</view>
</view>
</view>
<view class="info-box">
<view class="info-title">权益说明</view>
<view class="" v-html="vipList[activeIndex].benefit"></view>
</view>
<view class="info-box">
<view class="info-title">会员规则说明</view>
<view class="" v-html="vipList[activeIndex].explain"></view>
</view>
<!-- <view class="list">
<view class="item" v-for="(item, vipCompleteIndex) in vipComplete" :key="vipCompleteIndex">
<view class="top acea-row row-between-wrapper">
<view class="name">
{{ item.name}}
<text class="iconfont icon-wenti" v-if="item.illustrate" @click="showGrow(item)"></text>
</view>
<view>{{ item.finish ? "已满足条件" : "未满足条件" }}</view>
</view>
<view class="cu-progress">
<view class="bg-red" :style="{ width: item.speed + '%' }"></view>
</view>
<view class="experience acea-row row-between-wrapper">
<view>{{ item.taskTypeTitle }}</view>
<view>
<text class="num">{{ item.newNumber }}</text>
/{{ item.number }}
</view>
</view>
</view>
</view> -->
</view>
<!-- <Recommend></Recommend> -->
<!-- <view class="growthValue" :class="growthValue === false ? 'on' : ''">
<view class="pictrue">
<image :src="`${$VUE_APP_RESOURCES_URL}/images/value.jpg`" />
<text class="iconfont icon-guanbi3" @click="growthTap"></text>
</view>
<view class="conter">{{ illustrate }}</view>
</view>
<view class="mask" :hidden="growthValue" @click="growthTap"></view> -->
</view>
</template>
<script>
import { mapGetters } from 'vuex'
import {
div,
mul
} from "@/utils/bc";
// import { swiper, swiperSlide } from "vue-awesome-swiper";
// import Recommend from "@/components/Recommend";
import { getVipInfo, getVipTask, setDetection } from "@/api/user";
export default {
name: "Poster",
components: {
// swiper,
// swiperSlide,
// Recommend
},
props: {},
data: function() {
return {
CustomBar: this.CustomBar,
topHeight: 0,
vipList: [], //等级列表
vipRequire: [], //等级要求
vipComplete: [], //完成情况
taskCount: 0, //任务数
grade: 0, //当前会员等级
swiperVip: {
speed: 1000,
effect: "coverflow",
slidesPerView: "auto",
centeredSlides: true,
// loop: true,
coverflowEffect: {
rotate: 0, // 旋转的角度
stretch: -20, // 拉伸 图片间左右的间距和密集度
depth: 100, // 深度 切换图片间上下的间距和密集度
modifier: 2, // 修正值 该值越大前面的效果越明显
slideShadows: false // 页面阴影效果
},
observer: true,
observeParents: true
},
loading: false,
growthValue: true,
illustrate: "",
activeIndex: 0,
growthPercent: 0,
};
},
watch: {
vipList: function() {
let that = this;
if (that.vipList.length > 0) {
that.vipList.forEach(function(item, index) {
if (item.isClear === false) {
// that.swiper.slideTo(index);
that.activeIndex = index;
that.grade = item.grade;
}
});
}
}
},
computed: {
...mapGetters(['userInfo']),
// swiper() {
// // return this.$refs.mySwiper.swiper;
// }
},
mounted: function() {
this.topHeight = this.CustomBar + 188;
let that = this;
setDetection();
that.getInfo();
// that.swiper.on("slideChange", function() {
// that.activeIndex = that.swiper.activeIndex;
// that.getTask();
// });
},
methods: {
swiperChange: function(e) {
let that = this;
that.activeIndex = e.mp.detail.current;
that.getTask();
},
growthTap: function() {
this.growthValue = true;
},
getInfo: function() {
let that = this;
getVipInfo().then(
res => {
that.vipList = res.data.list;
that.vipRequire = res.data.task.list;
that.vipComplete = res.data.task.task;
that.taskCount = res.data.task.reachCount;
that.vipList.forEach((val, index) => {
val.benefit = val.benefit.replace(/\n/g,"<br/>"); // /\r/g
val.explain = val.explain.replace(/\n/g,"<br/>"); // /\r/g
if (val.isClear === false) {
this.growthPercent = mul(div(this.userInfo.growth, this.vipList[index+1].growthValue), 100);
}
})
},
err => {
uni.showToast({
title:
err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
}
);
},
getTask: function() {
let that = this;
getVipTask(that.vipList[that.activeIndex].id).then(
res => {
that.vipRequire = res.data.list;
that.vipComplete = res.data.task;
that.taskCount = res.data.reachCount;
},
err => {
uni.showToast({
title:
err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
}
);
},
showGrow: function(item) {
if (this.illustrate != item.illustrate) this.illustrate = item.illustrate;
this.growthValue = false;
}
}
};
</script>
<style lang="less" scoped>
.header {
.tab-title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 600;
color: #2DB5AE;
line-height: 42rpx;
}
.backImg {
width: 88rpx;
height: 62rpx;
padding-left: 26rpx;
image {
width: 100%;
height: 100%;
}
}
}
.vip-info-box {
padding: 6rpx 18rpx;
.vip-box {
width: 100%;
height: 364rpx;
position: relative;
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.info-box {
padding: 180rpx 38rpx 0rpx;
.user-info {
padding-bottom: 10rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 32rpx;
.headImg {
width: 76rpx;
height: 76rpx;
box-shadow: 0rpx 0rpx 20rpx 10rpx rgba(0,0,0,0.08);
padding: 4rpx;
background-color: linear-gradient(135deg, rgba(27, 141, 204, 1), rgba(57, 211, 150, 1));
border-radius: 50%;
margin-right: 12rpx;
.image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.noAvatar {
width: 100%;
height: 100%;
border-radius: 50%;
background: #F1F1F1;
image {
width: 90%;
}
}
}
.user-name {
font-size: 30rpx;
font-weight: 600;
line-height: 42rpx;
}
}
.progress-bar-box {
width: 642rpx;
height: 8rpx;
background: #39D396;
border-radius: 4rpx;
margin-bottom: 14rpx;
.progress-bar {
// width: 330rpx;
height: 8rpx;
background: #1B8DCC;
border-radius: 4rpx;
}
}
.vip-icon {
width: 80rpx;
height: 26rpx;
// background-color: #FFFFFF;
}
.to-next-level {
padding-left: 10rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 26rpx;
}
}
}
}
.vip-rights {
padding: 6rpx 0rpx 20rpx;
.rights-item {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 600;
color: #2DB5AE;
line-height: 30rpx;
text-align: center;
image {
width: 76rpx;
height: 76rpx;
margin-bottom: 10rpx;
}
}
}
.member-center .wrapper .info-box {
padding: 20rpx;
background: #F5F6F8;
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
border-radius: 16rpx;
margin-bottom: 20rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #3A3A3C;
line-height: 32rpx;
.info-title {
font-size: 30rpx;
font-family: SourceHanSansSCVF;
font-weight: 600;
color: #3A3A3C;
line-height: 46rpx;
padding-bottom: 16rpx;
}
}
// .banner swiper {
// height: 328rpx;
// }
// .swiper-slide {
// margin: 0 auto;
// }
</style>