update

xuxueyang

2024-09-27 a82b34f3dad88a826b459660aecc0af77e353080

 sub_pages/customer/self/member-center.vue

@@ -1,22 +1,395 @@
<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 @changeIndex="changeIndex" 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> -->
         <!-- v-if="currentInfo.customerDTO&&currentInfo.customerDTO.userGrowthRecord
         &&currentInfo.customerDTO.userGrowthRecord.targetMemberInfos&&currentInfo.customerDTO.userGrowthRecord.targetMemberInfos.length>=1"
          -->
         <view class="member-infos info bg-white p20 ">
            <view class="text-center w-fit flex m-auto top-title ">
               <view class="left-line"></view>
               <view class="title">会员权益</view>
               <view class="right-line"></view>
            </view>
            <view class="desc-info flex m-t-12" style="padding: 42rpx;">
               <view class="m-t-12 flex1">
                  <image class="m-auto icon img100 " mode="scaleToFill"
                     src="../../../static/images/customer/coupon/member/icon-member-info-1.png"></image>
                  <view class="desc">
                     <!-- 积分达到{{currentInfo.customerDTO.userGrowthRecord.currentGrowthValue || '-'}} -->
                     积分达到{{bannerList[curIndex].point.startPoint || '0'}}
                  </view>
               </view>
               <view class="m-t-12 flex1">
                  <image class="m-auto icon img100" mode="scaleToFill"
                     src="../../../static/images/customer/coupon/member/icon-member-info-2.png"></image>

                  <!-- createName: "孙凯悦"
createTime: "2024-09-10 14:47:29"
discountAmount: null
discountRatio: 95
discountType: "ratio"
discountTypeStr: "百分比"
downgradeValue: 30
endPoint: 15000
growthValue: 1
id: 34
name: "金卡会员7"
startPoint: 10000
updateTime: "2024-09-12 14:09:19"
 -->


                  <view class="desc">
                     优惠
                     <span v-if="bannerList[curIndex].point.discountType=='ratio'">
                        <!-- currentInfo.customerDTO.userGrowthRecord.currentDiscountType=='ratio' -->
                        <!-- {{(currentInfo.customerDTO.userGrowthRecord.currentDiscountRatio) || '-'}}%/扎 -->
                        {{ ((bannerList[curIndex].point.discountRatio)/10).toFixed(1) || '-'}}折/扎
                     </span>
                     <span v-else>
                        {{bannerList[curIndex].point.discountAmount || '0'}}元/扎
                        <!-- {{currentInfo.customerDTO.userGrowthRecord.currentDiscountAmount || '-'}}元/扎 -->
                     </span>
                     <!--    serGrowthRecord: {currentMemberLevel: "银卡会员", currentGrowthValue: 4941, currentDiscountType:
                     "ratio",…}
                     currentDiscountAmount: 0
                     currentDiscountRatio: 5
                     currentDiscountType: "ratio"
                     currentDiscountTypeStr: "百分比"
                     currentGrowthValue: 4941
                     currentMemberLevel: "银卡会员" -->

                     <!-- {{currentInfo.customerDTO.userGrowthRecord.targetMemberInfos[0].targetDiscountAmount || '-'}}元/扎 -->

                  </view>
               </view>

            </view>
            <!--          </view>
         <view class="info bg-white p20 m-t-20 member-infos"> -->
            <view class="text-center w-fit flex m-auto top-title m-t-20">
               <view class="left-line"></view>
               <view class="title">成长值获取规则</view>
               <view class="right-line"></view>
            </view>
            <view class="m-t-12 desc-info">
               每消费1元，即可获得1成长值。
               成长值将在订单交易完成后，根据实际交易金额进行赠送。
               消费越多，获得的成长值越多，享受更高等级的会员权益。
               快来参与消费，累积成长值，解锁更多专属福利吧！
            </view>
         </view>
         <view class="protocol" @click="goto('/pages/help/content?id=会员协议',false)">会员协议 <uni-icons type="right"
               size="14" color="#AD790F"></uni-icons>
         </view>
      </view>
   </view>

   </view>
</template>

<script>
   import banner3d from '@/components/banner3d/banner3d'
   export default {
      data() {
         return {
				
         }
      async onPullDownRefresh() {
         await this.$store.dispatch('getCurrentInfo')
         uni.stopPullDownRefresh()
      },
      methods: {
			
      }
         changeIndex(index) {
            console.log('changeIndex', index, this.bannerList)
            this.curIndex = index || 0
            this.$forceUpdate()
         }
      },
      async onLoad() {
         await this.$store.dispatch('getCurrentInfo')
         const {
            code,
            data
         } = await this.$http.request('get', '/api/member/list')
         if (code == 0 && data && data.records) {
            console.log('member-data', data)
            //循环赋值吧。用name包含来兼容
            for (var tmp of this.bannerList) {
               for (var info of data.records) {
                  if (info.name && info.name.indexOf(tmp.title) >= 0) {
                     // 设置value
                     tmp.point = {
                        ...info,
                        current: this.currentInfo.customerDTO.userGrowthRecord
                           .currentGrowthValue || 0
                     }

                     break

                  }
               }
            }
         }
         consumptionAmount: 1

         this.$nextTick(() => {
            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
               var currentindex = -1
               var j = -1
               for (var tmp of this.bannerList) {
                  j += 1
                  // tmp.point = {
                  //    current: this.currentInfo.customerDTO.userGrowthRecord.currentGrowthValue || 0
                  // }
                  tmp.currentMsg = ''
                  if (tmp.title === name) {
                     //说明是当前等级，其他待定
                     tmp.currentMsg = '当前等级'
                     currentindex = j
                  }



               }
               //重新排序,当前等级第一个
               console.log('会员列表v0',this.bannerList)
               var newBannerSort = []
               for (var i = currentindex; i <= 2 * j; i++) {
                  newBannerSort.push(this.bannerList[i % (j + 1)])
                  if (newBannerSort.length >= this.bannerList.length) {
                     break
                  }
               }
               this.bannerList = newBannerSort
               console.log('会员列表',this.bannerList)
               // 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
               //          //       }
               //          //    }
               //          // })
               //          this.$refs.banner3d.swiperChangeIndex(index)

               //          break
               //       }
               //    }
               // })

            }
         })

      },
      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: {},
               key: '1',
            }, {
               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: '',
               key: '2',
               point: {},

               // 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: '',
               key: '3',
               point: {},

            }, {
               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: '',
               key: '4',
               point: {},

            }],
            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'
            },
            curIndex: 0,
         }
      },
      components: {
         banner3d
      },

   }
</script>

<style>
<style lang="scss" scoped>
   .member-center {
      position: relative;

</style>
      .member-infos {
         // width: 670rpx;
         padding: 32rpx 58rpx;
         background: linear-gradient(213deg, #F7ECC6 0%, #EEE5CE 100%);
         border-radius: 16rpx;

         .desc-info {
            background: #FFFFFF;
            border-radius: 16rpx;
            opacity: 0.55;
            font-size: 24rpx;
            color: #AD790F;
            line-height: 34rpx;
            text-align: left;
            font-style: normal;
            padding: 24rpx;

            .icon {
               width: 78rpx;
               height: 78rpx;
               margin: auto;
               display: block;
               margin-bottom: 10rpx;

            }

            .desc {
               text-align: center;

            }
         }

         .top-title {
            .left-line {
               min-width: 54rpx;
               height: 6rpx;
               background: linear-gradient(270deg, rgba(226, 157, 17, 0) 0%, #E39D10 100%);
               border-radius: 4rpx;
               display: inline-block;
               margin-right: 20rpx;
               vertical-align: middle;
               margin-top: 23rpx;
            }

            .right-line {
               min-width: 54rpx;
               height: 6rpx;
               background: linear-gradient(270deg, rgba(226, 157, 17, 0) 0%, #E39D10 100%);
               border-radius: 4rpx;
               margin-left: 20rpx;
               display: inline-block;
               vertical-align: middle;
               margin-top: 23rpx;


            }

            .title {
               font-weight: 600;
               font-size: 36rpx;
               color: #AD790F;
               line-height: 50rpx;
               text-align: left;
               font-style: normal;
            }
         }
      }

      .protocol {
         font-weight: 400;
         font-size: 28rpx;
         color: #AD790F;
         line-height: 34rpx;
         text-align: center;
         margin-top: 32rpx;
      }

      .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>