1.1

陶杰

2024-09-12 0b060a89f0ace7672cc744a6db9c7dedde55c490

 sub_pages/customer/self/member-center.vue

@@ -6,7 +6,7 @@
         <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="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)">
@@ -14,33 +14,50 @@
               </view>
            </view>

         </view>
         <view class="info bg-white p20 m-t-20"
         </view> -->
         <view class="member-infos info bg-white p20 "
            v-if="currentInfo.customerDTO&&currentInfo.customerDTO.userGrowthRecord
         &&currentInfo.customerDTO.userGrowthRecord.targetMemberInfos&&currentInfo.customerDTO.userGrowthRecord.targetMemberInfos.length>=1">
            <view class="text-center desc-gray">
               ———————— 会员权益 ————————
            <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>
               <view class="m-t-12">积分达到
                  {{currentInfo.customerDTO.userGrowthRecord.targetMemberInfos[0].targetStartPoint || '-'}}
            <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.targetMemberInfos[0].targetStartPoint || '-'}}
                  </view>
               </view>
               <view class="m-t-12">优惠
                  {{currentInfo.customerDTO.userGrowthRecord.targetMemberInfos[0].targetDiscountAmount || '-'}}元/扎
               <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>

                  <view class="desc">
                     优惠
                     {{currentInfo.customerDTO.userGrowthRecord.targetMemberInfos[0].targetDiscountAmount || '-'}}元/扎
                  </view>
               </view>

            </view>
         </view>
         <view class="info bg-white p20 m-t-20">
            <view class="text-center desc-gray">
               ————— 成长值获取规则 —————
            <!--          </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">
            <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="16" color="#AD790F"></uni-icons>
         </view>
      </view>
   </view>
@@ -51,75 +68,84 @@
<script>
   import banner3d from '@/components/banner3d/banner3d'
   export default {
      async onPullDownRefresh() {
         await this.$store.dispatch('getCurrentInfo')
         uni.stopPullDownRefresh()
      },
      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
      async onLoad() {
         await this.$store.dispatch('getCurrentInfo')
         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

            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,
                  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
               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
                        })
                        break
                     }
                  }
               }
            })
               })

         }
            }
         })
      },
      data() {
         return {
@@ -175,6 +201,83 @@
   .member-center {
      position: relative;

      .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: 24rpx;
         color: #AD790F;
         line-height: 34rpx;
         text-align: center;
         margin-top: 32rpx;
      }

      .banner {
         position: relative;
         z-index: 10;