<template> <div class="member-info" ref="member-info" :style="{ 'padding-top':getPaddingList[0]['value']+'px', 'padding-bottom':getPaddingList[1]['value']+'px', 'padding-left':getPaddingList[2]['value']+'px', 'padding-right':getPaddingList[3]['value']+'px'}"> <div class="infoCard" v-if="loginFlag" :style="{ 'border-radius':boderRadius, 'background':backgroundColor, 'box-shadow':datas.componentData['shadowShow']?'0px 0px 5px '+datas.componentData['shadowSize']+'px #ccc':'' }"> <div class="bg-img"> <img :style="{'border-radius':boderRadius}" v-if="datas.componentData['backgroundImgShow']" :src="backgroundImage" alt /> </div> <div class="mainContent"> <div class="infoDetail flex"> <div class="infoCardLeft flex"> <div class="userPic" @click="toInfo"> <img v-if="userData.headPortraitUrl && userData.headPortraitUrl!=''" :src="userData.headPortraitUrl" class="Img" /> <img v-else src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/jpg/39ada9cc-aff3-4842-8376-9f49e36c5811.jpg" class="Img" alt /> </div> <div class="info flex" @click="toOpenNewCard(myCartList[0],0)"> <div class="infoTop flex"> <div class="name">{{userData.nickname || userData.mobilephone}}</div> <div class="vipType flex"> <img src="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/R7x3myNiHF.png" class="vipTypeIcon"> <div v-if="myCartList.length>0">{{myCartList[0].title}}</div> </div> </div> <div class="vipTip" v-if="myCartList.length>0"> <div>{{myCartList[0].recommendText}}</div> <!-- <div v-if="myCartList[0].receiveStatus==0"> <div class="ov_btn" :class="{'notMet':myCartList[0].receiveWay == 1}"> <template v-if="myCartList[0].receiveWay == 1">未满足条件</template> <template v-else>{{myCartList[0].openButtonText || '立即开通'}}</template> </div> </div> <div v-else-if="myCartList[0].receiveStatus==1"> <div class="ov_btn"> <template v-if="myCartList[0].receiveWay == 2">立即续费</template> <template v-else>查看权益</template> </div> </div> <div v-else-if="myCartList[0].receiveStatus==2"> <div class="ov_btn" :class="{'notMet':myCartList[0].receiveWay != 2}"> <template v-if="myCartList[0].receiveWay != 2">已失效</template> <template v-else>立即续费</template> </div> </div> --> </div> </div> </div> <div class="memberCode flex" v-show="datas.componentData.showStyle == 2 || datas.componentData.showStyle == 4" @click="toMobileCard()"> <div class="line"></div> <img class="code" src="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/HyGQDa5S4i.png" /> </div> </div> <div class="otherDetail flex" v-show="datas.componentData.showStyle == 3 || datas.componentData.showStyle == 4"> <div class="integral" v-show="datas.componentData.memberCodeShow == true" @click="handleClick(1)">我的积分:{{userData.cardBonus}}</div> <div class="ticket" v-show="datas.componentData.ticketShow == true" @click="handleClick(3)">我的券包:{{electronicCardNum}}</div> </div> </div> </div> <div class="noLogin" v-else> <div class="noLoginCard flex" :style="{ 'border-radius':boderRadius, 'background':backgroundColor, 'box-shadow':datas.componentData['shadowShow']?'0px 0px 5px '+datas.componentData['shadowSize']+'px #ccc':'' }"> <div class="bg-img"> <img :style="{'border-radius':boderRadius}" v-if="datas.componentData['backgroundImgShow']" :src="backgroundImage" alt /> </div> <div class="noLoginMain flex"> <div class="left flex"> <div class="bc2" v-if="shopInfo.logoUrl && datas.componentData.noLoginshowStyle == 1"> <img :src="shopInfo.logoUrl" alt /> </div> <div class="leftText"> <div class="text"> Hi~ </div> <div class="text">{{datas.componentData['noLoginText']}}</div> </div> </div> <div class="right" @click="toLogin" :style="{'color':datas.componentData['noLoginBtnTextColor']}"> 登录/注册 </div> </div> </div> </div> </div> </template> <script type="text/ecmascript-6"> import memberInfo from '@/api/memberInfo' import { DFSImg } from '@/utils/index' const app = getApp() export default { name: 'member-info', props: { //默认 //渲染环境 render: { type: Boolean, default: false, }, datas: { type: Object, default: () => { return { componentData: {}, } }, validator: (value) => { return true }, }, }, data() { return { //用户数据 userData: { type: Object, default: () => { return { belongToShopCode: 'shzb', belongToShopId: '89', belongToShopName: '真北店', birth: null, cardBonus: '53', certifiedStatus: '0', cityCode: '310100', cityId: '457', detailedAddress: '', districtCode: '310107', districtId: '2933', email: '', gender: '1', headPortraitUrl: 'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/jpg/39ada9cc-aff3-4842-8376-9f49e36c5811.jpg', mobilephone: '12345678900', nickname: '用户昵称', originName: '', electronicCardNum: 0, cardBonus: 0, } }, }, myCartList: [], certified: false, openVipLogoUrl: null, electronicCardNum: 0, loginFlag: false, shopInfo: { logoUrl: '', }, } }, components: {}, computed: { backgroundColor() { return this.datas.componentData['backgroundColorShow'] ? this.datas.componentData['backgroundColor'] : 'rgba(255, 255, 255, 1)' }, boderRadius() { return (2 * this.datas.componentData['radius']) / 100 + 'em' }, getPaddingList() { return this.datas.componentData.paddingList }, globalDataShopInfo() { return this.mpApp.globalData.shopInfo }, backgroundImage() { return DFSImg(this.datas.componentData.backgroundImage, 640, null, 1) }, }, watch: { globalDataShopInfo: { handler(newVal, oldVal) { if (newVal) { console.log(newVal, oldVal, '------------------globalDataShopInfo') this.shopInfo = this.mpApp.globalData.shopInfo if (this.shopInfo && this.shopInfo.logoUrl) { this.shopInfo.logoUrl = DFSImg(this.shopInfo.logoUrl, 400, 400) } console.log(this.shopInfo, 'this.shopInfo') } }, immediate: true, }, }, created() { if (wx.getStorageSync('sessionid')) { memberInfo.getUserInfo().then((res) => { console.log(res, ' this.userData ') if (res.data.code == 200) { this.userData = res.data.data console.log(this.userData, ' this.userData ') } }) // TODO 新版会员卡无列表 memberInfo.getV3PortalShopCard().then((res) => { this.myCartList = [] if (res.data.code == 200) { if (res.data.data) { this.myCartList.push(res.data.data) this.myCartList.forEach((item, index) => { if (item.receiveStatus == 1) { this.certified = true this.openVipLogoUrl = item.openVipLogo } }) } } }) // 是否开通会员积分 memberInfo.QueryIsOpen().then((res) => { if (res.data.code == 200) { this.integralStatus = res.data.data ? true : false } else { this.integralStatus = false } }) //获取电子卡卷 memberInfo .getUnUseElectronicCard({ pageNum: 1, pageSize: 1 }) .then((res) => { if (res.data.code == 200) { this.electronicCardNum = res.data.total || 0 } }) this.loginFlag = true } else { this.loginFlag = false } console.log(this.loginFlag, 'this.loginFlag') }, mounted() {}, methods: { DFSRightImg(systemCode, path, w, h) { if (path == null || path == '') { if (systemCode == 'FREE_SHIPPING') { return 'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/0a6acac3-31ee-46b2-80af-7e2e73b271ac.png' } else if (systemCode == 'DISCOUNT') { return 'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/efe72515-9a4e-4ca5-8773-248d3430a851.png' } else if (systemCode == 'DISTRIBUTION') { return 'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/effb2c9a-e661-4794-9412-664e4755b89e.png' } else if (systemCode == 'OPEN_VIP_LOGO') { return 'http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/d3b636a9-a269-46c2-8912-ac6cacba9171.png' } else { return '' } } return path }, toLogin() { // 跳转登录页 // let backUrl = '/home/main' let url = `/pages/login/main` wx.navigateTo({ url: url, }) }, // 新版会员卡跳转链接 toOpenNewCard(item, index) { console.log(this.userData, 'this.userData.mobilephone') let query = { cardId: item.id, userTel: this.userData.mobilephone, memberInfo: true, } app.$themeToLink({ type: 1, link: `/personalCenter/membershipCard?cardId=${query.cardId}&userTel=${query.userTel}&memberInfo=true`, }) }, toInfo() { app.$themeToLink({ type: 1, link: `/personalCenter/userInfo?memberInfo=true`, }) }, toMobileCard() { app.$themeToLink({ type: 1, link: `/personalCenter/vip/vipMobileCard`, }) // wx.navigateTo({ // url: '/pages/memberCode/main', // }) }, handleClick(id) { if (id == 0) { this.toPages('/personalCenter/coupon/myCoupon') } else if (id == 1) { app.$themeToLink({ type: 1, link: `/pointShop/pointCenter`, }) } else if (id == 2) { this.toPages('/giftCards/giftCardList') } else if (id == 3) { app.$themeToLink({ type: 1, link: `/myCoupon/electronicVolume`, }) } else { } }, }, } </script> <style lang="scss" scoped> .member-info { font-size: 12px; width: 100%; box-sizing: border-box; } .infoCard { background: #fff; border-radius: 2px; padding: 24px 18px 19px 13px; box-sizing: border-box; position: relative; .bg-img { height: 100%; img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } } .mainContent { width: 100%; height: 100%; position: relative; top: 0; left: 50%; transform: translateX(-50%); .infoDetail { align-items: center; justify-content: space-between; .infoCardLeft { align-items: center; .userPic { width: 44px; height: 44px; border-radius: 50%; // overflow: hidden; border: 1px solid #fff; position: relative; .Img { height: 100%; width: 100%; border-radius: 50%; } } .info { flex-direction: column; justify-content: space-between; margin-left: 10px; .infoTop { align-items: center; } .name { height: 16px; font-size: 12px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; line-height: 16px; } .vipType { align-items: center; height: 16px; background: linear-gradient(90deg, #61626b 0%, #323339 100%); padding: 0 8px; box-sizing: border-box; border-radius: 8px; font-size: 12px; font-weight: 400; color: #facf58; line-height: 16px; margin-left: 5px; .vipTypeIcon { height: 12px; width: 12px; margin-right: 2px; } } .vipTip { height: 16px; font-size: 12px; font-weight: 400; color: #999999; line-height: 16px; margin-top: 14px; } } } .memberCode { align-items: center; .line { width: 1px; height: 48px; background: #d8d8d8; } .code { width: 40px; height: 40px; margin-left: 13px; } } } .otherDetail { align-items: center; justify-content: space-between; margin-top: 21px; padding: 0px 24px; box-sizing: border-box; .integral { height: 17px; font-size: 12px; font-weight: 400; color: #333333; line-height: 17px; } .ticket { height: 17px; font-size: 12px; font-weight: 400; color: #333333; line-height: 17px; } } } } .noLogin { width: 100%; .noLoginCard { justify-content: space-between; align-items: center; padding: 24px 18px 19px 13px; box-sizing: border-box; position: relative; .bg-img { height: 100%; img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } } .noLoginMain { width: 100%; height: 100%; position: relative; top: 0; left: 50%; transform: translateX(-50%); align-items: center; justify-content: space-between; .left { align-items: center; .bc2 { width: 64px; height: 64px; img { width: 100%; height: 100%; } } .leftText { div { font-size: 13px; font-weight: 600; line-height: 21px; color: var(--main-color); width: 148px; max-width: 148px; } margin-left: 10px; } } .right { width: 86px; height: 32px; background: var(--main-color); border-radius: 16px; line-height: 32px; text-align: center; font-size: 12px; font-weight: 500; color: #333333; } } } } </style>