Skip to content

G
gxpt_wechat
Commit f934e0c6 by zhangzhen
Options

细节优化

parent 18b23e5b
Showing with 80 additions and 36 deletions
config/index.config.js
...@@ -2,8 +2,8 @@ const CONFIG = { ...@@ -2,8 +2,8 @@ const CONFIG = {
// 开发环境配置 // 开发环境配置
development: { development: {
// assetsPath: 'https://www.coujio.com/wechat_static', // 静态资源路径 // assetsPath: 'https://www.coujio.com/wechat_static', // 静态资源路径
assetsPath: 'http://coujiao.pseer.com:8888/wechat_static', // 静态资源路径 // assetsPath: 'http://coujiao.pseer.com:8888/wechat_static', // 静态资源路径
// assetsPath: 'http://10.24.5.63:8211/static', // 静态资源路径 assetsPath: 'http://10.24.5.63:8211/static', // 静态资源路径
// baseUrl: 'https://www.coujio.com/front-api', // 后台接口请求地址 // baseUrl: 'https://www.coujio.com/front-api', // 后台接口请求地址
// baseUrl: 'https://coujiao.pseer.com/front-api', // 后台接口请求地址 // baseUrl: 'https://coujiao.pseer.com/front-api', // 后台接口请求地址
baseUrl: 'https://coujiao.pseer.com/front-api', baseUrl: 'https://coujiao.pseer.com/front-api',
......
pages/my/myInfo.vue
...@@ -14,16 +14,22 @@ ...@@ -14,16 +14,22 @@
<view class="flex-col margin-left user-info-box"> <view class="flex-col margin-left user-info-box">
<text class="text-title text-lg text-bold text-xxl">{{userInfo.nickName||"凑角用户"}}</text> <text class="text-title text-lg text-bold text-xxl">{{userInfo.nickName||"凑角用户"}}</text>
<view class="flex-row" style="margin-top: 10rpx;"> <view class="flex-row" style="margin-top: 10rpx;">
<view class="relative" :class="userInfo.consumerMember&&userInfo.consumerMember.isRecharge?'':'grayscale'"> <view v-if="userInfo.consumerMember&&userInfo.consumerMember.isRecharge" class="relative">
<image class="img-icon" :src="assetsPath+'/tag_icon_1.png'" mode="widthFix"></image> <image class="img-icon" :src="assetsPath+'/tag_icon_1.png'" mode="widthFix"></image>
<view class="absolute"> <view class="absolute">
<text class="text-1">充值会员</text> <text class="text-1">充值会员</text>
</view> </view>
</view> </view>
<view class="relative" :class="userInfo.consumerMember&&userInfo.consumerMember.isRights?'':'grayscale'"> <view v-if="userInfo.consumerMember&&userInfo.consumerMember.isRights" class="relative" >
<image class="img-icon" :src="assetsPath+'/tag_icon_2.png'" mode="widthFix"></image> <image class="img-icon" :src="assetsPath+'/tag_icon_2.png'" mode="widthFix"></image>
<view class="absolute"> <view class="absolute">
<text class="text-1">权益会员</text> <text class="text-2">权益会员</text>
</view>
</view>
<view v-if="!userInfo.consumerMember || !(userInfo.consumerMember.isRights && userInfo.consumerMember.isRecharge) " class="relative" >
<image class="img-icon" :src="assetsPath+'/tag_icon_3.png'" mode="widthFix"></image>
<view class="absolute">
<text class="text-3">普通会员</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -39,11 +45,11 @@ ...@@ -39,11 +45,11 @@
<view class="remeber-info-box"> <view class="remeber-info-box">
<view class="relative flex-7"> <view class="relative flex-7">
<image v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===1" class="level-bg" :src="assetsPath+'/user/tj_bg_1.png'" mode="scaleToFill"></image>
<image v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="level-bg" :src="assetsPath+'/user/tongj_bg_1.png'" mode="scaleToFill"></image> <image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="level-bg" :src="assetsPath+'/user/tongj_bg_1.png'" mode="scaleToFill"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="level-bg" :src="assetsPath+'/user/yj_bg_1.png'" mode="scaleToFill"></image> <image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="level-bg" :src="assetsPath+'/user/yj_bg_1.png'" mode="scaleToFill"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===4" class="level-bg" :src="assetsPath+'/user/jj_bg_1.png'" mode="scaleToFill"></image> <image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===4" class="level-bg" :src="assetsPath+'/user/jj_bg_1.png'" mode="scaleToFill"></image>
<image v-else class="level-bg" :src="assetsPath+'/user/tj_bg_1.png'" mode="scaleToFill"></image> <view v-else class="level-bg level-bg-0"></view>
<view class="absolute level-content"> <view class="absolute level-content">
<view class="part-left"> <view class="part-left">
<view v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===4" class="level level-4"> <view v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===4" class="level level-4">
...@@ -55,7 +61,7 @@ ...@@ -55,7 +61,7 @@
</view> </view>
</view> </view>
<view v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="level level-3"> <view v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="level level-3">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text> <text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text> <text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row"> <view class="flex-row">
...@@ -64,7 +70,7 @@ ...@@ -64,7 +70,7 @@
</view> </view>
</view> </view>
<view v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="level level-2"> <view v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="level level-2">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text> <text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text> <text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row"> <view class="flex-row">
...@@ -73,7 +79,7 @@ ...@@ -73,7 +79,7 @@
</view> </view>
</view> </view>
<view v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===1" class="level level-1"> <view v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===1" class="level level-1">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text> <text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text> <text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row"> <view class="flex-row">
...@@ -81,7 +87,16 @@ ...@@ -81,7 +87,16 @@
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text> <text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view> </view>
</view> </view>
<view v-else class="level level-1"> <view v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel === 0" class="level level-0">
<text class="text-1">LV 0</text>
<!-- <text class="text-2">您还没有会员等级！</text> -->
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row">
<text class="text-3">当前积分</text>
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view>
</view>
<view v-else class="level level-0">
<text class="text-1">LV 0</text> <text class="text-1">LV 0</text>
<text class="text-2">您还不是会员哦，快来加入吧！</text> <text class="text-2">您还不是会员哦，快来加入吧！</text>
</view> </view>
...@@ -91,7 +106,8 @@ ...@@ -91,7 +106,8 @@
<image v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===4" class="tag-icon" :src="assetsPath+'/user/tag_icon_4.png'" mode="widthFix"></image> <image v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===4" class="tag-icon" :src="assetsPath+'/user/tag_icon_4.png'" mode="widthFix"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="tag-icon" :src="assetsPath+'/user/tag_icon_3.png'" mode="widthFix"></image> <image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="tag-icon" :src="assetsPath+'/user/tag_icon_3.png'" mode="widthFix"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="tag-icon" :src="assetsPath+'/user/tag_icon_2.png'" mode="widthFix"></image> <image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="tag-icon" :src="assetsPath+'/user/tag_icon_2.png'" mode="widthFix"></image>
<image v-else class="tag-icon" :src="assetsPath+'/user/tag_icon_1.png'" mode="widthFix"></image> <image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===1" class="tag-icon" :src="assetsPath+'/user/tag_icon_1.png'" mode="widthFix"></image>
<image v-else class="tag-icon" :src="assetsPath+'/user/tag_icon_0.png'" mode="widthFix"></image>
</view> </view>
</view> </view>
...@@ -851,6 +867,9 @@ ...@@ -851,6 +867,9 @@
.text-2{ .text-2{
color: #472F1E; color: #472F1E;
} }
.text-3{
color: #3E3A39;
}
} }
.grayscale{ .grayscale{
filter: grayscale(100%); filter: grayscale(100%);
...@@ -876,6 +895,11 @@ ...@@ -876,6 +895,11 @@
width: 100%; width: 100%;
height: 136rpx; height: 136rpx;
} }
.level-bg-0{
background: #F9F9F9;
border-radius: 14upx;
border: 1px solid #A9ACB4;
}
.level-content{ .level-content{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -921,52 +945,46 @@ ...@@ -921,52 +945,46 @@
} }
.level-4{ .level-4{
.text-1{ .text-1{
background: linear-gradient(104deg, #FFB875 0%, #FFEDC4 100%); color: #9D680D;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.text-2{ .text-2{
color: #F3E3C6; color: #BC8902;
} }
.flex-row{ .flex-row{
background: #615D73; background: #FDF4C4;
border: 1px solid #F9ECEC; border: 1px solid #CB8402;
.text-3{ .text-3{
color: #F3E3C6; color: #CB8402;
} }
.text-4{ .text-4{
color: #FFB875; color: #CB8402;
} }
} }
} }
.level-3{ .level-3{
.text-1{ .text-1{
background: linear-gradient(-90deg, #222A5E 0%, #4C559E 46.9482421875%, #222A5E 100%); color: #898E9D;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.text-2{ .text-2{
color: #5A63A5; color: #898E9D;
} }
.flex-row{ .flex-row{
background: #BAC6D2; background: #DDDEEB;
border: 1px solid #464F8E; border: 1px solid #81828A;
.text-3{ .text-3{
color: #5A63A5; color: #7A7B84;
} }
.text-4{ .text-4{
color: #464F8E; color: #81828A;
} }
} }
} }
.level-2{ .level-2{
.text-1{ .text-1{
background: linear-gradient(47deg, #FD7C01 0%, #FCAB00 100%); color: #FEEDE3;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.text-2{ .text-2{
color: #985E39; color: #FFFFFF;
} }
.flex-row{ .flex-row{
background: #FFEED9; background: #FFEED9;
...@@ -975,7 +993,7 @@ ...@@ -975,7 +993,7 @@
color: #985E39; color: #985E39;
} }
.text-4{ .text-4{
color: #701700; color: #6F4133;
} }
} }
} }
...@@ -989,13 +1007,38 @@ ...@@ -989,13 +1007,38 @@
color: #F1F6F4; color: #F1F6F4;
} }
.flex-row{ .flex-row{
display: flex;
flex-direction: row;
align-items: center;
background: #F5E0ED;
border: 1px solid #F46DB9;
.text-3{
color: #E40583;
}
.text-4{
color: #C72380;
}
}
}
.level-0{
.text-1{
color: #969696;
}
.text-2{
color: #969696;
}
.flex-row{
display: flex;
flex-direction: row;
align-items: center;
background: #E3E6E8; background: #E3E6E8;
border-radius: 4upx;
border: 1px solid #E3E6E8; border: 1px solid #E3E6E8;
.text-3{ .text-3{
color: #9D9D9D; color: #333333;
} }
.text-4{ .text-4{
color: #9D9D9D; color: #333333;
} }
} }
} }
...@@ -1008,6 +1051,7 @@ ...@@ -1008,6 +1051,7 @@
.tag-icon{ .tag-icon{
display: block; display: block;
width: 120upx; width: 120upx;
max-height: 100upx;
} }
} }
} }
......
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