zsw-farm-bxg/pages/user/UserVip/index.vue

<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.06);
		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>