From 0b060a89f0ace7672cc744a6db9c7dedde55c490 Mon Sep 17 00:00:00 2001 From: 陶杰 <1378534974@qq.com> Date: 星期四, 12 九月 2024 18:35:16 +0800 Subject: [PATCH] 1.1 --- sub_pages/customer/self/member-center.vue | 245 ++++++++++++++++++++++++++++++++++-------------- 1 files changed, 174 insertions(+), 71 deletions(-) diff --git a/sub_pages/customer/self/member-center.vue b/sub_pages/customer/self/member-center.vue index 6d5edd4..999f936 100644 --- a/sub_pages/customer/self/member-center.vue +++ b/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&¤tInfo.customerDTO.userGrowthRecord &¤tInfo.customerDTO.userGrowthRecord.targetMemberInfos&¤tInfo.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; -- Gitblit v1.9.3