<template>
  <view class="pb-base">
    <loading-view v-if="isFirstLoading"></loading-view>
    <view class="tops">
      <image class="w-full h-390rpx  " src="/static/images/member/member_top.png" mode="widthFix"></image>
    </view>
    <view @tap="jumpByOption(cpaceImage)" class="w-full" v-if="cpaceImage.image">
      <image class="w-full" :src="cpaceImage.image" mode="widthFix"></image>
    </view>
    <!-- -->
    <view class="bgs w-full mt-10rpx p-base" v-if="vip_coupon_bottom_banner.length!=0">
       <view class="text-lg text-hex-FFCFAB">会员直通车购买 立减40元</view>
        <scroll-view scroll-x="true" class="scroll mt-base">
         <view @tap="jumpByOption(item)" class="scroll-item fristChild p-25rpx  bg-white rounded-15rpx overflow-hidden" v-for="(item,index) in vip_coupon_bottom_banner" :key="index">
           <image class="w-240rpx "
             :src="item.image" mode="widthFix"></image>
         </view>
        </scroll-view>
       </scroll-view>
    </view>
    <!--  -->
    <view v-if="swiperList.length!=0" class="bgs w-full mt-base p-base ">
      <view class="text-lg text-hex-FFCFAB">会员补贴次次省  一年累计可省8000元左右</view>
      <swiper circular class="mt-30rpx h-380rpx" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item v-for="(item,index) in swiperList" :key="index" class="w-710rpx bg-white   rounded-15rpx p-base">
          <view class="w-full h-full" @tap="jumpByOption(item)">
            <image class="w-full h-full" :src="item.image" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!--  -->
    <block v-if="interestItem.image">
      <view class="bgs w-full mt-base p-base">
        <view class="text-lg text-hex-FFCFAB">会员积分权益</view>
        <view @tap="jumpByOption(interestItem)">
          <image class="w-full mt-base" :src="interestItem.image" mode="widthFix"></image>
        </view>
      </view>
    </block>
    <!--  -->
    <block v-if="rewardList.length!=0 || scrollList.length!=0">
      <view class="bgs w-full mt-base p-base">
        <view class="text-lg text-hex-FFCFAB">分享商品得奖励  一年累计可赚20000元左右</view>
        <block v-if="rewardList.length!=0">
          <scroll-view scroll-x="true" class="scroll mt-base">
           <view @tap="jumpByOption(item)" class="scroll-item fristChild" v-for="(item,index) in rewardList" :key="index">
             <image class=" w-226rpx h-289rpx"
               :src="item.image" mode=""></image>
           </view>
          </scroll-view>
        </block>
        <view class="mt-base" v-if="scrollList.length!=0">
          <scroll-view scroll-x="true" class="scroll">
           <view @tap="jumpByOption(item)" class="scroll-item fristChild" v-for="(item,index) in scrollList" :key="index">
             <image class="w-470rpx h-200rpx rounded-15rpx"
               :src="item.image" mode=""></image>
           </view>
          </scroll-view>
        </view>
      </view>
    </block>
    <!--  -->
    <view v-if="text" class="bgs w-full mt-base p-base pb-50rpx">
      <view class="text-center text-lg text-hex-FFCFAB">推广细则</view>
      <view class="line"></view>
      <view class=" bg-hex-fce3cf rounded-15rpx -mt-5rpx p-40rpx text-md text-txBase">
        <text>{{text}}</text>
      </view>
    </view>

    <view @tap="$u.route('pageA/special_area/index')" class="fixed z-50 top-700rpx right-0">
      <image class="w-184rpx h-196rpx" src="/static/images/member/suspension.png" mode=""></image>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isFirstLoading:true,
        vip_coupon_bottom_banner:[],
        interests:[],
        swiperList: [],
        list: [],
        text: '',
        scrollList: [],
        rewardList: []
      };
    },
    computed:{
      interestItem(){
        return this.interests.length>0?this.interests[0]:{}
      },
      cpaceImage(){
        return this.list.length>0?this.list[0]:{}
      },
    },
   onLoad() {
       this.getvipCouponBanner()
       this.getCpace()
       this.advertisement()
       this.getreward()
       this.province()
       this.promotionAward()
       this.getCoupon()
    },
    methods: {
      async getvipCouponBanner(){
        let resDate = await this.$api.get('/v1/ads', {
          params: {
            keys: 'wechat_mini_vip_coupon_bottom_banner'
          }
        })
        this.vip_coupon_bottom_banner=resDate.wechat_mini_vip_coupon_bottom_banner
      },
      //顶部广告位
     async getCpace(){
        let resDate = await this.$api.get('/v1/ads', {
          params: {
            keys: 'wechat_mini_vip_coupon_banner'
          }
        })
        this.list=resDate.wechat_mini_vip_coupon_banner
      },
      //会员就是省
     async province(){
        let resDate = await this.$api.get('/v1/ads', {
          params: {
            keys: 'wechat_mini_vip_will_cheap_banner'
          }
        })
        this.swiperList=resDate.wechat_mini_vip_will_cheap_banner
      },
      //会员推广奖励
     async promotionAward(){
       try{
         let resDate = await this.$api.get('/v1/ads', {
           params: {
             keys: 'wechat_mini_vip_award_bottom_banner'
           }
         })
         this.scrollList=resDate.wechat_mini_vip_award_bottom_banner
       }catch(err){}finally{
         // this.isFirstLoading=false
       }

     },
      //获取优惠卷
      async getCoupon() {
        try{
          let resDate = await this.$api.get('/v1/product/part-coupons', {
            params: {
              part: 'vip'
            }
          })
          // this.list = resDate.coupons
          this.text = resDate.description
        }catch(err){}finally{
          this.isFirstLoading=false
        }
      },
      //
      async advertisement() {
        let resDate = await this.$api.get('/v1/ads', {
          params: {
            keys: 'wechat_mini_vip_banner'
          }
        })
        this.interests = resDate.wechat_mini_vip_banner
      },
      async getreward() {
        let resDate = await this.$api.get('/v1/ads', {
          params: {
            keys: 'wechat_mini_vip_award_banner '
          }
        })
        this.rewardList = resDate.wechat_mini_vip_award_banner
      },
      jumpByOption(e) {
        if (!!e.jump_link) {
          if (e.jump_type == 1) {
             this.$u.route(e.jump_link);
          } else if (e.jump_type == 2) {
            this.$u.route(`/pages/web_view/index?url=${e.jump_link}`);
          }
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .tops {
    height: 350rpx;
    background: linear-gradient(180deg, rgba(50, 49, 55, 1) 0%, rgba(245, 245, 245, 1) 100%);
  }

  .mem_bg_one {
    width: 100%;
    height: 524rpx;
    background-image: url('../../static/images/member/member_1.png');
    background-size: auto 100%;
  }

  .men_bg_two {
    width: 210rpx;
    height: 210rpx;
    background-image: url('../../static/images/member/red.png');
    background-size: auto 100%;
  }

  .after {
    &::before {
      content: '￥';
      font-size: 60%;
    }
  }
.afters {
    &::after {
      content: '折';
      font-size: 60%;
    }
  }
  .bgs {
    background: linear-gradient(90deg, rgba(70, 68, 76, 1) 0%, rgba(47, 46, 51, 1) 100%);
    // @apply rounded-xs
    border-radius: 15rpx;
  }

  .fristChild:not(:first-child) {
    margin-left: 20rpx;
  }

  .line {
    width: 195rpx;
    height: 15rpx;
    margin: 0 auto;
    background-color: rgba(255, 207, 171, 1);
    border-radius: 90rpx;
  }
</style>
