<template>
|
<view class="member-center">
|
<image src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/81/81af45f51aef43f2bf490970e09a51edmember-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&¤tInfo.customerDTO.userGrowthRecord
|
&¤tInfo.customerDTO.userGrowthRecord.targetMemberInfos&¤tInfo.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="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/a4/a4adabdf9b1342fb8c3a28f3b8ad5dedicon-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="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/3a/3a6af67a278d4e46af5c6d802409457ficon-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">
|
<template v-if="bannerList[curIndex].point.growthValueDesc">
|
{{bannerList[curIndex].point.growthValueDesc}}
|
</template>
|
<template v-else>
|
<!-- 每消费1元，即可获得1成长值。
|
成长值将在订单交易完成后，根据实际交易金额进行赠送。
|
消费越多，获得的成长值越多，享受更高等级的会员权益。
|
快来参与消费，累积成长值，解锁更多专属福利吧! -->
|
</template>
|
</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 {
|
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 lang="scss" scoped>
|
.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: 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>
|
