锶源昆仑会员+体验官
This commit is contained in:
89
pages/memberOpen/index.js
Normal file
89
pages/memberOpen/index.js
Normal file
@@ -0,0 +1,89 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
userLogin : false,
|
||||
identities : '', //身份信息
|
||||
userData : '', //用户信息
|
||||
tabType : 'season', //会员标签
|
||||
can : '', //操作按钮
|
||||
buttonText : '', //按钮名字
|
||||
notRules : '', //权益
|
||||
couponPrice : '' ,//抵值券
|
||||
newId : '' //会员id
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取登录状态
|
||||
if(wx.getStorageSync("token")){
|
||||
this.setData({
|
||||
userLogin: true
|
||||
})
|
||||
// 获取用户信息
|
||||
this.userInfo();
|
||||
}
|
||||
|
||||
// 获取身份前置
|
||||
this.identityInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户信息
|
||||
*/
|
||||
userInfo() {
|
||||
wx.$api.user.userIndex().then(res => {
|
||||
this.setData({
|
||||
userData: res.data.identity.order
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 身份前置
|
||||
*/
|
||||
identityInfo(){
|
||||
// 3为季卡,4为年卡
|
||||
let identityId = ''
|
||||
if(this.data.tabType == 'season') {
|
||||
identityId = 3
|
||||
} else {
|
||||
identityId = 4
|
||||
}
|
||||
wx.$api.member.identitySee(identityId).then(res => {
|
||||
this.setData({
|
||||
identities : res.data,
|
||||
couponPrice : res.data.coupon_price,
|
||||
notRules : res.data.not_rules,
|
||||
can : res.data.can,
|
||||
buttonText : res.data.buttonText,
|
||||
newId : res.data.identity_id
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换身份
|
||||
*/
|
||||
typeClick(e) {
|
||||
this.setData({
|
||||
tabType: e.currentTarget.dataset.type
|
||||
})
|
||||
// 获取身份前置
|
||||
this.identityInfo();
|
||||
}
|
||||
})
|
||||
4
pages/memberOpen/index.json
Normal file
4
pages/memberOpen/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "开通会员"
|
||||
}
|
||||
62
pages/memberOpen/index.wxml
Normal file
62
pages/memberOpen/index.wxml
Normal file
@@ -0,0 +1,62 @@
|
||||
<block wx:if="{{userData >= 3}}">
|
||||
<image class="memberBack" mode="aspectFill" src="https://api.siyuankunlun.com/storage/materials/2022/10/10/cc75bfc7fc6e06a0527253dd09adc373.png"></image>
|
||||
<view class="memberTips">
|
||||
<view class="memberTips-top">
|
||||
<view class="memberTips-name"><text>你已开通</text></view>
|
||||
<text>锶源昆仑天然饮用水会员</text>
|
||||
</view>
|
||||
<image class="memberTips-icon" mode="widthFix" src="https://api.siyuankunlun.com/storage/materials/2022/10/10/memberIcon.png"></image>
|
||||
<view class="memberTips-title">
|
||||
<text>都兰圣地 源水活取,饮水锶源 古海冰泉</text>
|
||||
<text>高镁高钙 富氢低氘,大地礼物 好水天成</text>
|
||||
</view>
|
||||
<navigator hover-class="none" url="/pages/user/index" open-type="switchTab" class="memberTips-brn">会员中心</navigator>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:else>
|
||||
<image class="member-back" src="{{tabType == 'season' ? 'http://api.siyuankunlun.com/storage/materials/2022/08/30/member_back.png' : 'http://api.siyuankunlun.com/storage/materials/2022/08/30/yearMember_back.png'}}" mode="aspectFill"></image>
|
||||
<view class="tab {{tabType == 'year' ? 'active' : ''}}">
|
||||
<view class="tab-item {{tabType == 'season' ? 'active' : ''}}" bindtap="typeClick" data-type="season">季卡会员</view>
|
||||
<view class="tab-item {{tabType == 'year' ? 'active' : ''}}" bindtap="typeClick" data-type="year">年卡会员</view>
|
||||
</view>
|
||||
<view class="rights">
|
||||
<view class="member-cont">
|
||||
<block wx:if="{{tabType == 'season'}}">
|
||||
<image class="member-title" src="{{couponPrice ? 'http://api.siyuankunlun.com/storage/materials/2022/08/30/quarterMember_title.png' : 'http://api.siyuankunlun.com/storage/materials/2022/08/30/quarterMember_price.png'}}" mode="widthFix"></image>
|
||||
<image wx:if="{{couponPrice}}" class="member-error" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_cost.png" mode="widthFix"></image>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<image class="member-title" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/yearMember_title.png" mode="widthFix"></image>
|
||||
<image class="member-error" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/yearMember_cost.png" mode="widthFix"></image>
|
||||
</block>
|
||||
</view>
|
||||
<view class="member-btn">
|
||||
<image class="member-btn-img" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_Btn.png" mode="widthFix"></image>
|
||||
<block wx:if="{{userLogin}}">
|
||||
<navigator hover-class="none" url="/pages/member/open/index?identity_id={{newId}}" class="member-btn-text" wx:if="{{can.open}}" >点击开通会员</navigator>
|
||||
<block wx:else>
|
||||
<navigator hover-class="none" url="/pages/member/open/index?identity_id={{newId}}" class="member-btn-text" wx:if="{{can.renew}}">
|
||||
立即续费
|
||||
</navigator>
|
||||
<view class="member-btn-text active" wx:else>
|
||||
{{buttonText}}
|
||||
</view>
|
||||
</block>
|
||||
<view class="member-btn-tips" wx:if="{{tabType == 'season'}}">
|
||||
<block wx:if="{{couponPrice}}">
|
||||
<image src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_choose.png" mode="aspectFill"></image>
|
||||
您有一张抵值券可抵(¥8640元)
|
||||
</block>
|
||||
</view>
|
||||
<view class="member-btn-tips" wx:else>
|
||||
<image src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_choose.png" mode="aspectFill"></image>
|
||||
开通年度会员享受5.25折
|
||||
</view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<navigator hover-class="none" url="/pages/login/index" class="member-btn-text">点击开通会员</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
188
pages/memberOpen/index.wxss
Normal file
188
pages/memberOpen/index.wxss
Normal file
@@ -0,0 +1,188 @@
|
||||
.tab {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
height: 90rpx;
|
||||
background-color: #2b0a58;
|
||||
font-weight: 600;
|
||||
border-bottom: 2rpx solid #402663;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background-color: #a92021;
|
||||
border-bottom: 2rpx solid #bd3335;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 90rpx;
|
||||
flex: 2;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
color: #efb480;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-item::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: calc(50% - 40rpx);
|
||||
bottom: 0;
|
||||
width: 80rpx;
|
||||
height: 6rpx;
|
||||
background-color: #efb480;
|
||||
border-radius: 30rpx;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.member-back {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rights {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.member-cont {
|
||||
padding: 140rpx 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: calc(70vh + 120rpx);
|
||||
}
|
||||
|
||||
.member-title {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.member-error {
|
||||
width: 40%;
|
||||
margin-top: -30rpx;
|
||||
}
|
||||
|
||||
.member-btn {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: calc(30vh + 80rpx);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.member-btn-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.member-btn-text {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 200;
|
||||
color: #fff;
|
||||
bottom: 42rpx;
|
||||
color: #a21a1e;
|
||||
left: 0;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.member-btn-text.active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.member-btn-tips {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
color: #f1c39a;
|
||||
font-size: 26rpx;
|
||||
bottom: -40rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.member-btn-tips image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
vertical-align: -4rpx;
|
||||
display: inline-block;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
/* 已是会员 */
|
||||
.memberBack {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.memberTips {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
padding: 120rpx 80rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.memberTips-icon {
|
||||
width: 45%;
|
||||
margin: 100rpx auto;
|
||||
}
|
||||
|
||||
.memberTips-top text {
|
||||
background-image:-webkit-linear-gradient(bottom,#826352,#3f404a);
|
||||
-webkit-background-clip:text;
|
||||
-webkit-text-fill-color:transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.memberTips-name {
|
||||
font-size: 50rpx;
|
||||
line-height: 84rpx;
|
||||
}
|
||||
|
||||
.memberTips-title {
|
||||
font-size: 28rpx;
|
||||
color: #4c5264;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.memberTips-title text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.memberTips-brn {
|
||||
background-color: #41424e;
|
||||
color: #fff;
|
||||
border-radius: 80rpx;
|
||||
height: 82rpx;
|
||||
line-height: 82rpx;
|
||||
color: #fff0c6;
|
||||
font-size: 28rpx;
|
||||
width: 55%;
|
||||
margin: 100rpx auto 0;
|
||||
}
|
||||
Reference in New Issue
Block a user