Skip to content

M
mayi-mp-shop
Commit 38363d46 by 刘奕
Options

会员信息卡片

parent 968efd00
Showing with 537 additions and 0 deletions
src/api/memberInfo.js 0 → 100644
import { requestPOST } from "@/utils/request.js";
export default {
// 获取个人资料
getUserInfo() {
return requestPOST(`${process.env.OLSHOP_URL}/user/get_user_info`)
},
getV3PortalShopCard() {
return requestPOST(`${process.env.OLSHOP_URL}/user/portal_card`);
},
// 判断是否开启积分商城
QueryIsOpen(data) {
return requestPOST(`${process.env.OLSHOP_URL}/integralMallProductGoods/getIsOpen`, { data })
},
getUnUseElectronicCard(data) {
return requestPOST(`${process.env.OLSHOP_URL}/redeemCode/getUnUseElectronicCard`, { data })
},
}
\ No newline at end of file
src/components/basicTool/member-info/index.vue 0 → 100644
<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="../../../../static/images/vip.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="../../../../static/images/qrcode.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">
<p class="text">
Hi～
</p>
<p class="text">欢迎加入XX会员俱乐部</p>
<p class="text">快来领取新人专享礼包吧</p>
</div>
</div>
<div class="right" @click="toLogin">
登录/注册
</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() {
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 {
.bc2 {
width: 64px;
height: 64px;
img {
width: 100%;
height: 100%;
}
}
.leftText {
p {
height: 21px;
font-size: 13px;
font-weight: 600;
line-height: 21px;
color: var(--main-color);
}
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>
src/pages/home/index.vue
......@@ -102,6 +102,9 @@
<div v-if="item.componentCode == 'rich-text' && item.componentInfo.visible == 1">
<rich-text :datas="item"></rich-text>
</div>
<div v-if="item.componentCode == 'member-info' && item.componentInfo.visible == 1">
<member-info :datas="item"></member-info>
</div>
</div>
<bottomCont></bottomCont>
......@@ -156,6 +159,7 @@ import NewUser from "../../components/newCustomer/newUser";
import NewPolite from "../../components/newCustomer/newPolite";
import customList from "../../components/custom-list";
import richText from "../../components/basicTool/rich-text";
import memberInfo from "../../components/basicTool/member-info";
import { setTabBarActive, checkTabbarPage,themeColor, checkShowConditionIds } from "../../utils/mayi.js";
import indexApi from "@/api/index.js";
import { throttle, concatUrl } from "../../utils/index.js"
......@@ -215,6 +219,7 @@ export default {
woTimeout,
'custom-list':customList,
'rich-text':richText,
'member-info':memberInfo
},
onShareAppMessage(res) {
let {shopCode} = app.globalData.shopInfo;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment