陶杰
2024-09-10 dd2922d3facbfba5add501f35de5649b80b6cf05
sub_pages/customer/self/member-center.vue
@@ -1,22 +1,194 @@
<template>
   <view>
   <view class="member-center">
      <image src="../../../static/images/customer/coupon/member/member-level-bg.png" mode="aspectFit"
         class="img100 member-level-image"></image>
      <view class="banner">
         <banner3d ref="banner3d" v-if="init" :banner-list="bannerList" :swiper-config="swiperConfig"></banner3d>
      </view>
      <view class="p20" style="padding-top: 0rpx;">
         <view class="info bg-white p20">
            <view class="flex">
               <view>成长值规则</view>
               <view class="m-l-a m-r-0 text-right desc-gray" @click="goto('/pages/help/content?id=会员协议',false)">
                  点击查看会员协议
               </view>
            </view>
         </view>
         <view class="info bg-white p20 m-t-20"
            v-if="currentInfo.customerDTO&&currentInfo.customerDTO.userGrowthRecord
         &&currentInfo.customerDTO.userGrowthRecord.targetMemberInfos&&currentInfo.customerDTO.userGrowthRecord.targetMemberInfos.length>=1">
            <view class="text-center desc-gray">
               ———————— 会员权益 ————————
            </view>
            <view>
               <view class="m-t-12">积分达到
                  {{currentInfo.customerDTO.userGrowthRecord.targetMemberInfos[0].targetStartPoint || '-'}}
               </view>
               <view class="m-t-12">优惠
                  {{currentInfo.customerDTO.userGrowthRecord.targetMemberInfos[0].targetDiscountAmount || '-'}}元/扎
               </view>
            </view>
         </view>
         <view class="info bg-white p20 m-t-20">
            <view class="text-center desc-gray">
               ————— 成长值获取规则 —————
            </view>
            <view class="m-t-12">
               每消费1元,即可获得1成长值。
               成长值将在订单交易完成后,根据实际交易金额进行赠送。
               消费越多,获得的成长值越多,享受更高等级的会员权益。
               快来参与消费,累积成长值,解锁更多专属福利吧!
            </view>
         </view>
      </view>
   </view>
   </view>
</template>
<script>
   import banner3d from '@/components/banner3d/banner3d'
   export default {
      data() {
         return {
      methods: {
      },
      onLoad() {
         if (this.currentInfo.customerDTO && this.currentInfo.customerDTO.userGrowthRecord && this.currentInfo
            .customerDTO.userGrowthRecord.currentMemberLevel) {
            // userGrowthRecord: {currentMemberLevel: "普通会员", currentGrowthValue: 6919,…}
            // currentGrowthValue: 6919
            // currentMemberLevel: "普通会员"
            //    targetMemberInfos: [{targetMemberLevel: "金卡会员", targetStartPoint: 15001, targetGap: 8082, targetDiscountAmount: 0.4},…]
            //       0: {targetMemberLevel: "金卡会员", targetStartPoint: 15001, targetGap: 8082, targetDiscountAmount: 0.4}
            //       targetDiscountAmount: 0.4
            //       targetGap: 8082
            //       targetMemberLevel: "金卡会员"
            //       targetStartPoint: 15001
            //       1: {targetMemberLevel: "钻石会员", targetStartPoint: 10001, targetGap: 3082, targetDiscountAmount: 0.5}
            //       targetDiscountAmount: 0.5
            //       targetGap: 3082
            //       targetMemberLevel: "钻石会员"
            //       targetStartPoint: 10001
            //计算下一个等级的差距
            let name = this.currentInfo.customerDTO.userGrowthRecord.currentMemberLevel
            for (var tmp of this.bannerList) {
               tmp.point = {
                  current: this.currentInfo.customerDTO.userGrowthRecord.currentGrowthValue || 0
               }
               tmp.currentMsg = ''
               if (tmp.title === name) {
                  //说明是当前等级,其他待定
                  tmp.currentMsg = '当前等级'
               }
            }
            if (this.currentInfo.customerDTO.userGrowthRecord.targetMemberInfos) {
               var t = -1
               for (var tmp of this.bannerList) {
                  t += 1
                  for (var k of this.currentInfo.customerDTO.userGrowthRecord.targetMemberInfos) {
                     if (tmp.title === k.targetMemberLevel) {
                        console.log('eq', k, tmp)
                        tmp.point = {
                           current: this.currentInfo.customerDTO.userGrowthRecord.currentGrowthValue || 0,
                           end: k.targetStartPoint || 0,
                        }
                     }
                  }
               }
            }
            this.init = true
            this.$nextTick(() => {
               // var name = this.currentInfo.customerDTO.userGrowthRecord.currentMemberLevel
               var index = -1
               for (var tmp of this.bannerList) {
                  index += 1
                  if (tmp.title === name) {
                     this.$refs.banner3d.swiperChange({
                        mp: {
                           detail: {
                              current: index
                           }
                        }
                     })
                     break
                  }
               }
            })
         }
      },
      methods: {
      }
      data() {
         return {
            init: false,
            bannerList: [{
               bg: 'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/74/74cae150ea44463f92abbe1f9dd3c561fKcsrp0hOcNYa1cfb5eb753e56876fddcba7ea1e1a32.png',
               picture: 'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/ef/ef96604518db467fbd344c08e48d1fac8jZdk1ED0Yq023d4f86c2ec36975c981ba522c2bfe3f.png',
               title: '普通会员',
               // description: '一万年太久,就现在,给你爱',
               path: '',
               point: undefined,
            }, {
               bg: 'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/25/2534864ad275400b9e8db4042b87bfeaBv7NbzOZG0ptc7fca5df83dcd97fd02b4027518cc593.png',
               picture: 'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/07/075db9222f7a41e981c5b263d7210ed5Ztljs5yDHKILd37c3399011f84f401b755477bb8a323.png',
               title: '银卡会员',
               // description: '花中樱,鱼乃鲷花中樱,鱼乃鲷',
               path: '',
               // currentMsg:''
            }, {
               bg: 'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/4d/4d8ab63e75ca462fa9e3bb480ff2da68ID5KnLIH9DwM23f9a04d99cc1f3306a8655c1eff34bf.png',
               picture: 'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/f1/f192b651606045ddba5c5f04a34a00c2R8MmH6mVsprH81cab47fbe889222f6088f4ca2cf20d5.png',
               title: '金卡会员',
               // description: '取材自湘西苗族传统的烟熏文化',
               path: ''
            }, {
               bg: 'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/db/db6b0cefdbb949cca9c8da824a5ebdebXsPsk2ROfxZu22f9b09e3feece76753b0df971fdc301.png',
               picture: 'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/c9/c94d8f444af94b899d1e1593cebb933eDyZyhyoyDxTRaf60a4d692f097e5d790cdb88fae9d0c.png',
               title: '钻石会员',
               // description: '在自己的小世界里,日日好日,夜夜好清宵',
               path: ''
            }],
            swiperConfig: {
               indicatorDots: true,
               indicatorColor: 'rgba(255, 255, 255, .4)',
               indicatorActiveColor: 'rgba(255, 255, 255, 1)',
               autoplay: false,
               interval: 3000,
               duration: 300,
               circular: true,
               previousMargin: '58rpx',
               nextMargin: '58rpx'
            }
         }
      },
      components: {
         banner3d
      },
   }
</script>
<style>
<style lang="scss" scoped>
   .member-center {
      position: relative;
</style>
      .banner {
         position: relative;
         z-index: 10;
         padding-top: 160rpx;
      }
      .member-level-image {
         width: 750rpx;
         min-height: 530rpx;
         position: absolute;
         left: 0;
         right: 0;
         top: 0;
         z-index: 1;
      }
   }
</style>