Skip to content

A
Athena
Commit d18a8adc authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

更新个人中心页面

parent d20dd21a
Show whitespace changes
Inline Side-by-side
Showing with 1353 additions and 611 deletions
src/App.vue
View file @ d18a8adc
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
<style> <style>
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_863923_qby3muwdoh.css'; @import '//at.alicdn.com/t/font_863923_luoxdzztue.css';
@import './assets/global/global.css'; @import './assets/global/global.css';
body,html{ body,html{
padding: 0px; padding: 0px;
......
src/assets/css/newPersonalCenter/block/MemberCenter.css
View file @ d18a8adc
.MemberCenter .level_info{ .MemberCenter .level_info .left{
background:rgba(255,255,255,1);
border:1px solid rgba(230,230,230,1);
padding: 20px;
display: flex;
}
/* 左边css */
.MemberCenter .level_info .info{
width: 160px;
padding: 20px; padding: 20px;
background:linear-gradient(0deg,rgba(216,236,229,1),rgba(199,243,252,1)); background-color: #414352;
text-align: center;
} }
.MemberCenter .level_info .info .head_img{ .MemberCenter .level_info .left .head_img{
text-align: center; text-align: center;
} }
.MemberCenter .level_info .info .head_img img{ .MemberCenter .level_info .left .head_img img{
width: 88px; width: 88px;
} }
.MemberCenter .level_info .info .name{ .MemberCenter .level_info .left .name{
text-align: center; color: #FFFFFF;
} margin: 5px 0;
.MemberCenter .level_info .info ._exp{
display: flex;
align-items: center;
margin-top: 5px;
padding-top: 25px;
} }
.MemberCenter .level_info .info ._exp ._vip_level{ .MemberCenter .level_info .left p ._vip_level {
font-size:12px; font-size: 12px;
font-weight:bold; font-weight: 400;
color:rgba(152,124,83,1); color: rgba(152,124,83,1);
display: inline-block; display: inline-block;
padding: 0 8px 0 5px; padding: 0 8px 0 5px;
border-radius: 8px; border-radius: 8px;
background-color: #F4DCB8; background-color: #F4DCB8;
font-family: "PingFangR";
} }
.MemberCenter .level_info .info ._exp ._vip_level_gray{ .MemberCenter .level_info .chart .right{
background-color: #CCCCCC; padding: 20px;
color: #999999 background-color: #2C2E46;
}
.MemberCenter .level_info .info ._exp ._progress{
width: 100px;
position: relative; position: relative;
padding-bottom: 9px;
} }
.MemberCenter .level_info .info .value_number{ .MemberCenter .level_info .chart .right .tit{
margin-top: 5px;
}
.MemberCenter .level_info .info ._value{
font-size: 12px;
color: #585858
}
.MemberCenter .level_info .info ._number{
font-size: 12px;
padding-left: 5px;
color: #BB9B6D
}
.MemberCenter .level_info .info .start{
margin-top: 10px;
color: #585858;
font-size: 12px;
line-height: 20px;
}
.MemberCenter .level_info .info .start p span{
color: #333333;
}
.MemberCenter .level_info .info ._exp ._pointer{
position: absolute; position: absolute;
top: -35px;
left: 29%;
}
.MemberCenter .level_info .info ._exp ._pointer ._pointer_num{
background-color: #EFD7AC;
font-size: 12px; font-size: 12px;
color: #987C53; color: #FFFFFF;
padding: 0 2px; display: flex;
border-radius:2px; justify-content: space-between;
} width: 660px;
.MemberCenter .level_info .info ._exp ._pointer ._line{ z-index: 2019;
display: inline-block;
height: 12px;
width: 1px;
border-left: 1px solid #E7C588;
position: absolute;
bottom: -12px;
left: 50%;
}
/* 右 右上css */
.MemberCenter .level_info .level{
flex: 2;
margin-left: 40px;
padding: 10px 20px 0 0;
} }
.level .level_top>p,.level .level_bottom>p{ .MemberCenter .level_info .tequan {
font-size: 12px; padding: 25px 16px 20px 16px;
background:rgba(255,255,255,1);
border:1px solid rgba(230,230,230,1);
} }
.level .level_top .level_list{ .MemberCenter .level_info .tequan .tit{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative;
z-index: 2;
}
.level .level_top .level_list p{
text-align: center;
font-size: 12px; font-size: 12px;
color: #666666;
} }
.level .level_top .level_list li{ .MemberCenter .level_info .tequan .tit span:nth-child(2){
margin: 20px 0 10px 0; color: #EE4454;
} }
.level .level_top .level_list li ._raduis{ .MemberCenter .el-carousel{
position: relative; margin-top: 10px;
width: 52px;
height: 52px;
background: rgba(248,176,75,1);
border-radius: 50%;
color: white;
line-height: 40px;
text-align: center;
margin: 0 auto;
margin-bottom: 8px;
overflow: hidden;
}
.level .level_top .level_list li ._raduis .iconfont {
font-size: 30px;
} }
.level .level_top .level_list li ._raduis ._dot{ .MemberCenter ._icon_list {
border-radius: 50%; padding: 0 65px;
position: absolute; height: 70px;
display: inline-block; /* line-height: 70px; */
background-color: rgba(255,255,255,.6); display: flex;
}
.level .level_top .level_list li ._raduis ._dot._dot_m{
width: 4px;
height: 4px;
bottom: 18px;
right: 3px
}
.level .level_top .level_list li ._raduis ._dot._dot_l{
width: 5px;
height: 5px;
bottom: 20px;
left: 5px;
background-color: rgba(255,255,255,.3);
}
.level .level_top .level_list li ._raduis ._dot._dot_xl{
width: 6px;
height: 6px;
bottom: 4px;
left: 50%;
background-color: rgba(255,255,255,.4);
}
.level .level_top .level_list li ._raduis .number{
font-size: 30px;
position: absolute;
z-index: 2;
left: 30%;
} }
.level .level_top .level_list li ._raduis ._dot_xxl{ .MemberCenter ._icon_list ._item{
width: 80px; margin-right: 45px;
height: 80px;
border-radius: 100%;
background-color: #CF8230;
display: inline-block;
position: absolute;
bottom: -62px;
left: -14px;
} }
.level .level_top .level_list li ._raduis ._vip{ .MemberCenter ._icon_list ._item p{
width: 52px; position: relative;
text-align: center;
position: absolute;
bottom: -11px;
left: 0;
font-size: 12px; font-size: 12px;
color: #FFFFFF color: #333333;
} margin-top: 5px;
.level .level_top .level_list li ._raduis.no_color ._vip{ text-align: center;
color: #989898
}
.level .level_top .level_list li ._raduis.no_color{
background-color: #CECECE;
}
.level .level_top .level_list li ._raduis.no_color ._dot_xxl{
background-color: #BFBFBF;
}
.level .level_top .level_list li ._raduis ._dot_m._dot_m_t{
bottom: 9px;
right: 10px;
z-index: 2;
}
.level .level_top .line{
height: 2px;
width: 97%;
background-color: #E6E6E6;
position: absolute;
top: 62px;
z-index: 1;
}
/* 右 右下css */
.level .level_bottom>p{
margin-bottom: 15px;
}
.level .level_bottom {
margin-top: 15px;
padding-top: 15px;
} }
.level .level_bottom ._icon_list { .MemberCenter ._icon_list ._item p:nth-child(2){
padding: 0 65px; color: #666666;
height: 70px;
line-height: 70px;
display: flex;
} }
.level .level_bottom ._icon_list ._item{ .MemberCenter ._icon_list ._item>div{
height: 64px; height: 52px;
width: 64px; width: 52px;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
background-color: #E9C398; background-color: #E9C398;
position: relative; position: relative;
margin-right: 10px;
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
margin-top: 10px;
} }
.level .level_bottom ._icon_list i{ .MemberCenter ._icon_list i{
font-size: 46px; font-size: 30px;
color: #F8B04B; color: #F8B04B;
display: inline-block; display: inline-block;
height: 60px; height: 48px;
width: 60px; width: 48px;
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
z-index: 3; z-index: 3;
position: absolute; position: absolute;
left: 2px; left: 2px;
top: 2px; top: 2px;
line-height: 51px;
} }
.level .level_bottom ._icon_list ._item:hover ._raduis{ .MemberCenter ._icon_list ._item:hover ._raduis{
width: 64px; width: 52px;
} }
.level .level_bottom ._icon_list ._item:hover ._raduis{ .MemberCenter ._icon_list ._item:hover ._raduis{
width: 64px; width: 52px;
} }
.level .level_bottom ._icon_list ._raduis{ .MemberCenter ._icon_list ._raduis{
position: absolute; position: absolute;
width: 0px; width: 0px;
height: 32px; height: 26px;
background-color: #d58933; background-color: #d58933;
border-radius: 0 0 64px 64px; border-radius: 0 0 52px 52px;
margin-right: 10px; margin-right: 10px;
display: inline-block; display: inline-block;
bottom: 0; bottom: 0;
...@@ -254,91 +116,103 @@ ...@@ -254,91 +116,103 @@
z-index: 2; z-index: 2;
transition: all ease-in .5s ; transition: all ease-in .5s ;
} }
.level .level_bottom ._icon_list ._raduis._raduis2{ .MemberCenter ._icon_list ._raduis._raduis2{
right: -10px; right: -10px;
top: 0; top: 0;
left: inherit; left: inherit;
border-radius: 64px 64px 0 0; border-radius: 52px 52px 0 0;
transition: all .5s ease-out .5s; transition: all .5s ease-out .5s;
} }
/* 等级权益 */ .shangpin{
.level_equity{ margin-top: 20px;
margin: 20px 0;
background-color: white;
} }
.level_equity>p,.level_rule>p,.level_question>p{ .shangpin .tit>div{
display: flex;
justify-content: space-between;
padding: 16px;
background:rgba(255,255,255,1);
border:1px solid rgba(230,230,230,1);
align-items: center;
}
.shangpin .tit>div>p{
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
font-family: "PingFangR"; font-family: 'PingFangR';
font-weight: bold; font-weight: bold;
padding: 22px; }
.shangpin .tit>div .iconfont{
color:#FF6060
}
.shangpin .tit>div span{
font-size: 12px;
color: #EE4454;
}
.shangpin .content{
padding: 20px;
background:rgba(255,255,255,1);
border:1px solid rgba(230,230,230,1); border:1px solid rgba(230,230,230,1);
border-bottom: 0; border-top: 0;
margin-bottom: 20px;
} }
.level_equity>p span,.level_rule>p span,.level_question>p span{ .shangpin .content .left,.shangpin .content .right{
display: inline-block; height: 412px;
height: 14px;
width: 4px;
background-color: #DBA261;
margin-right: 5px;
} }
.MemberCenter .info_box table{ .shangpin .content .left>div{
border-collapse: collapse; background-color: gray;
border-spacing: 0; padding: 20px;
width: 100%; width: 183px;
height: 372px;
color: white;
} }
.MemberCenter .info_box table thead th{ .shangpin .content .left>div h4{
color: #909399; font-size: 16px;
font-family: 'PingFangR'
} }
.MemberCenter .info_box table tbody th{ .shangpin .content .left>div p{
font-weight: normal; font-size: 14px;
} }
.MemberCenter .info_box table tbody tr:hover{ .shangpin .content .right{
background-color: #FFF0F0 !important; padding-left: 15px;
} }
.MemberCenter .info_box th{ .shangpin .content .right .top .item{
background-color: #fff1f1 padding: 9px;
} }
.MemberCenter .info_box th, .MemberCenter .info_box td { .shangpin .content .right .item .name{
height: 38px; font-family: 'PingFangR';
border: 1px solid #e8e8e8;
text-align: center;
color: #666;
font-size: 14px; font-size: 14px;
font-weight: bold;
} }
.MemberCenter .info_box td i.icon-xuanzhong2{ .shangpin .content .right .item .jifen{
color: #666666;
font-size: 12px; font-size: 12px;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-block;
background-color: #67c93c;
text-align: center;
line-height: 18px;
color: white
} }
.level_rule{ .shangpin .content .right .item .line {
margin-bottom: 20px; line-height: 1px;
background-color: white;
} }
.level_rule td{ .shangpin .content .right .item .line span{
text-align: left !important; display: inline-block;
padding:5px 20px; width:16px;
height:2px;
background:rgba(66,66,66,1);
} }
.level_question{ .shangpin .content .right .top .item .img {
margin-bottom: 20px; width: 200px;
background-color: white; height: 164px;
background-color: gray;
margin-top: 13px;
} }
.level_question>p{ .shangpin .content .right .bottom{
border-bottom: 1px solid rgba(230,230,230,1); margin-top: 20px;
}
.shangpin .content .right .bottom .item{
display: flex;
align-items: center;
} }
.level_question .modu_con { .shangpin .content .right .bottom .item .img {
width: auto; width: 120px;
padding: 0 20px 0 22px; height: 120px;
color: #666; background-color: gray;
border: 1px solid rgba(230,230,230,1);
border-top: none;
} }
.level_question .modu_con p { .shangpin .content .right .bottom .item ._r{
padding: 16px 0 12px 0; margin-left: 20px
} }
\ No newline at end of file
src/assets/css/newPersonalCenter/integral.css
View file @ d18a8adc
...@@ -115,17 +115,17 @@ ...@@ -115,17 +115,17 @@
} }
/* 我的积分明细 */ /* 我的积分明细 */
.integralDetail .integralDetail_row{ .integralDetail .integralDetail_row,.exchange .integralDetail_row{
background-color: white; background-color: white;
padding: 13px 0; padding: 13px 0;
padding-left: 10px; padding-left: 10px;
display: flex; display: flex;
border-bottom: 1px solid #F2DADA; border-bottom: 1px solid #F2DADA;
} }
.integralDetail .integralDetail_row ._drop{ .integralDetail .integralDetail_row ._drop,.exchange .integralDetail_row ._drop{
margin-right: 20px; margin-right: 20px;
} }
.integralDetail .integralDetail_row .el-date-editor{ .integralDetail .integralDetail_row .el-date-editor,.exchange .integralDetail_row .el-date-editor{
width: 120px !important; width: 120px !important;
} }
.integralDetail .integralDetail_row .el-date-editor input{ .integralDetail .integralDetail_row .el-date-editor input{
...@@ -146,3 +146,17 @@ ...@@ -146,3 +146,17 @@
.integralDetail .el-table--enable-row-hover .el-table__body tr:hover>td{ .integralDetail .el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #FFF0F0 !important; background-color: #FFF0F0 !important;
} }
/* exchange */
.exchange .integralDetail_row ._drop{
min-width: 90px;
}
.exchange .list{
width: 100%;
background-color: white;
border:1px solid rgba(245,245,245,1);
padding: 20px;
}
.exchange .list li{
width: 220px;
position: relative;
}
\ No newline at end of file
src/components/newPersonalCenter/block/MemberCenter(作废).vue 0 → 100644
View file @ d18a8adc
<style>
.MemberCenter .level_info{
background:rgba(255,255,255,1);
border:1px solid rgba(230,230,230,1);
padding: 20px;
display: flex;
}
/* 左边css */
.MemberCenter .level_info .info{
width: 160px;
padding: 20px;
background:linear-gradient(0deg,rgba(216,236,229,1),rgba(199,243,252,1));
}
.MemberCenter .level_info .info .head_img{
text-align: center;
}
.MemberCenter .level_info .info .head_img img{
width: 88px;
}
.MemberCenter .level_info .info .name{
text-align: center;
}
.MemberCenter .level_info .info ._exp{
display: flex;
align-items: center;
margin-top: 5px;
padding-top: 25px;
}
.MemberCenter .level_info .info ._exp ._vip_level{
font-size:12px;
font-weight:bold;
color:rgba(152,124,83,1);
display: inline-block;
padding: 0 8px 0 5px;
border-radius: 8px;
background-color: #F4DCB8;
font-family: "PingFangR";
}
.MemberCenter .level_info .info ._exp ._vip_level_gray{
background-color: #CCCCCC;
color: #999999
}
.MemberCenter .level_info .info ._exp ._progress{
width: 100px;
position: relative;
}
.MemberCenter .level_info .info .value_number{
margin-top: 5px;
}
.MemberCenter .level_info .info ._value{
font-size: 12px;
color: #585858
}
.MemberCenter .level_info .info ._number{
font-size: 12px;
padding-left: 5px;
color: #BB9B6D
}
.MemberCenter .level_info .info .start{
margin-top: 10px;
color: #585858;
font-size: 12px;
line-height: 20px;
}
.MemberCenter .level_info .info .start p span{
color: #333333;
}
.MemberCenter .level_info .info ._exp ._pointer{
position: absolute;
top: -35px;
left: 29%;
}
.MemberCenter .level_info .info ._exp ._pointer ._pointer_num{
background-color: #EFD7AC;
font-size: 12px;
color: #987C53;
padding: 0 2px;
border-radius:2px;
}
.MemberCenter .level_info .info ._exp ._pointer ._line{
display: inline-block;
height: 12px;
width: 1px;
border-left: 1px solid #E7C588;
position: absolute;
bottom: -12px;
left: 50%;
}
/* 右 右上css */
.MemberCenter .level_info .level{
flex: 2;
margin-left: 40px;
padding: 10px 20px 0 0;
}
.level .level_top>p,.level .level_bottom>p{
font-size: 12px;
}
.level .level_top .level_list{
display: flex;
justify-content: space-between;
position: relative;
z-index: 2;
}
.level .level_top .level_list p{
text-align: center;
font-size: 12px;
color: #666666;
}
.level .level_top .level_list li{
margin: 20px 0 10px 0;
}
.level .level_top .level_list li ._raduis{
position: relative;
width: 52px;
height: 52px;
background: rgba(248,176,75,1);
border-radius: 50%;
color: white;
line-height: 40px;
text-align: center;
margin: 0 auto;
margin-bottom: 8px;
overflow: hidden;
}
.level .level_top .level_list li ._raduis .iconfont {
font-size: 30px;
}
.level .level_top .level_list li ._raduis ._dot{
border-radius: 50%;
position: absolute;
display: inline-block;
background-color: rgba(255,255,255,.6);
}
.level .level_top .level_list li ._raduis ._dot._dot_m{
width: 4px;
height: 4px;
bottom: 18px;
right: 3px
}
.level .level_top .level_list li ._raduis ._dot._dot_l{
width: 5px;
height: 5px;
bottom: 20px;
left: 5px;
background-color: rgba(255,255,255,.3);
}
.level .level_top .level_list li ._raduis ._dot._dot_xl{
width: 6px;
height: 6px;
bottom: 4px;
left: 50%;
background-color: rgba(255,255,255,.4);
}
.level .level_top .level_list li ._raduis .number{
font-size: 30px;
position: absolute;
z-index: 2;
left: 30%;
}
.level .level_top .level_list li ._raduis ._dot_xxl{
width: 80px;
height: 80px;
border-radius: 100%;
background-color: #CF8230;
display: inline-block;
position: absolute;
bottom: -62px;
left: -14px;
}
.level .level_top .level_list li ._raduis ._vip{
width: 52px;
text-align: center;
position: absolute;
bottom: -11px;
left: 0;
font-size: 12px;
color: #FFFFFF
}
.level .level_top .level_list li ._raduis.no_color ._vip{
color: #989898
}
.level .level_top .level_list li ._raduis.no_color{
background-color: #CECECE;
}
.level .level_top .level_list li ._raduis.no_color ._dot_xxl{
background-color: #BFBFBF;
}
.level .level_top .level_list li ._raduis ._dot_m._dot_m_t{
bottom: 9px;
right: 10px;
z-index: 2;
}
.level .level_top .line{
height: 2px;
width: 97%;
background-color: #E6E6E6;
position: absolute;
top: 62px;
z-index: 1;
}
/* 右 右下css */
.level .level_bottom>p{
margin-bottom: 15px;
}
.level .level_bottom {
margin-top: 15px;
padding-top: 15px;
}
.level .level_bottom ._icon_list {
padding: 0 65px;
height: 70px;
line-height: 70px;
display: flex;
}
.level .level_bottom ._icon_list ._item{
height: 64px;
width: 64px;
border-radius: 50%;
text-align: center;
background-color: #E9C398;
position: relative;
margin-right: 10px;
z-index: 1;
overflow: hidden;
}
.level .level_bottom ._icon_list i{
font-size: 46px;
color: #F8B04B;
display: inline-block;
height: 60px;
width: 60px;
border-radius: 50%;
background-color: white;
z-index: 3;
position: absolute;
left: 2px;
top: 2px;
}
.level .level_bottom ._icon_list ._item:hover ._raduis{
width: 64px;
}
.level .level_bottom ._icon_list ._item:hover ._raduis{
width: 64px;
}
.level .level_bottom ._icon_list ._raduis{
position: absolute;
width: 0px;
height: 32px;
background-color: #d58933;
border-radius: 0 0 64px 64px;
margin-right: 10px;
display: inline-block;
bottom: 0;
left: 0;
z-index: 2;
transition: all ease-in .5s ;
}
.level .level_bottom ._icon_list ._raduis._raduis2{
right: -10px;
top: 0;
left: inherit;
border-radius: 64px 64px 0 0;
transition: all .5s ease-out .5s;
}
/* 等级权益 */
.level_equity{
margin: 20px 0;
background-color: white;
}
.level_equity>p,.level_rule>p,.level_question>p{
font-size: 16px;
color: #333333;
font-family: "PingFangR";
font-weight: bold;
padding: 22px;
border:1px solid rgba(230,230,230,1);
border-bottom: 0;
}
.level_equity>p span,.level_rule>p span,.level_question>p span{
display: inline-block;
height: 14px;
width: 4px;
background-color: #DBA261;
margin-right: 5px;
}
.MemberCenter .info_box table{
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.MemberCenter .info_box table thead th{
color: #909399;
}
.MemberCenter .info_box table tbody th{
font-weight: normal;
}
.MemberCenter .info_box table tbody tr:hover{
background-color: #FFF0F0 !important;
}
.MemberCenter .info_box th{
background-color: #fff1f1
}
.MemberCenter .info_box th, .MemberCenter .info_box td {
height: 38px;
border: 1px solid #e8e8e8;
text-align: center;
color: #666;
font-size: 14px;
}
.MemberCenter .info_box td i.icon-xuanzhong2{
font-size: 12px;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-block;
background-color: #67c93c;
text-align: center;
line-height: 18px;
color: white
}
.level_rule{
margin-bottom: 20px;
background-color: white;
}
.level_rule td{
text-align: left !important;
padding:5px 20px;
}
.level_question{
margin-bottom: 20px;
background-color: white;
}
.level_question>p{
border-bottom: 1px solid rgba(230,230,230,1);
}
.level_question .modu_con {
width: auto;
padding: 0 20px 0 22px;
color: #666;
border: 1px solid rgba(230,230,230,1);
border-top: none;
}
.level_question .modu_con p {
padding: 16px 0 12px 0;
}
</style>
<template>
<el-row class="MemberCenter">
<!-- 会员信息 -->
<el-row class="level_info">
<!-- 左边 -->
<div class="info">
<div class="head_img">
<img src="../../../assets/img/head_normal1.png" alt="">
</div>
<p class="name">李晓敏</p>
<!-- vip 经验 -->
<div class="_exp">
<i class="_vip_level">V{{userInfo.vipRate}}</i>
<span class="_progress">
<!-- 指针 -->
<div class="_pointer" :style="{'left': ((userInfo.vipExperience/999)*100)-13 + '%'}" v-if="(userInfo.vipExperience/999)*100>0">
<span class="_pointer_num">{{userInfo.vipExperience}}</span>
<span class="_line"></span>
</div>
<!-- 进度条 -->
<el-progress :show-text="false" :percentage="userInfo.vipExperience > 0 ? (userInfo.vipExperience/999)*100 : 0" color="#E7C588"></el-progress>
</span>
<i class="_vip_level _vip_level_gray">V{{userInfo.vipRate+1}}</i>
</div>
<p class="value_number">
<span class="_value">成长值：</span>
<span class="_number">{{userInfo.vipExperience}}/999</span>
</p>
<div class="start">
<p>会员等级：<span>二星会员</span></p>
<p>我的成长值：<span>6666</span></p>
<p>等级有效期至：<span>2999-12-31</span></p>
</div>
</div>
<!-- 右边 -->
<div :span="17" :offset="1" class="level">
<!-- 右 上 -->
<el-row class="level_top">
<p>我的会员等级：</p>
<ul class="level_list">
<li>
<div class="_raduis">
<i class="iconfont icon-putonghuiyuan"></i>
<span class="_dot _dot_m"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
</div>
<p>普通</p>
<p>（注册）</p>
</li>
<li>
<div class="_raduis ">
<i class="number">1</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>一星会员</p>
<p>（1）</p>
</li>
<li>
<div class="_raduis">
<i class="number">2</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>二星会员</p>
<p>（2000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="number">3</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>三星会员</p>
<p>（7000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="number">4</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>四星会员</p>
<p>（15000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="number">5</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>五星会员</p>
<p>（50000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="iconfont icon-huangguan1"></i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>白金会员</p>
<p>（100000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="iconfont icon-zuanshi"></i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>钻石会员</p>
<p>（300000）</p>
</li>
</ul>
<div class="line"></div>
</el-row>
<!-- 右 下 ss-->
<el-row class="level_bottom">
<p>我的会员特权：</p>
<el-carousel indicator-position="none" arrow="always" :autoplay="false" height="70px">
<el-carousel-item v-for="(item, index) in iconList" :key="index">
<div class="_icon_list">
<div class="_item" v-for="son in item.list">
<span class="_raduis _raduis2"></span>
<i :class="['iconfont', son]"></i>
<span class="_raduis"></span>
</div>
</div>
</el-carousel-item>
</el-carousel>
</el-row>
</div>
</el-row>
<el-row class="info_box">
<!-- 等级权益 -->
<el-row class="level_equity">
<p><span></span>等级权益</p>
<table>
<thead>
<tr>
<th>权益\等级</th>
<th>注册会员</th>
<th>一星会员</th>
<th>二星会员</th>
<th>三星会员</th>
<th>四星会员</th>
<th>五星会员</th>
<th>白金会员</th>
<th>钻石会员</th>
</tr>
</thead>
<tbody>
<tr>
<th>抵用特权</th>
<td>1倍</td>
<td>1倍</td>
<td>1倍</td>
<td>1倍</td>
<td>1.5倍</td>
<td>2倍</td>
<td>2倍</td>
<td>2倍</td>
</tr>
<tr>
<th>预订奖励</th>
<td>1倍</td>
<td>1倍</td>
<td>1倍</td>
<td>1倍</td>
<td>1.5倍</td>
<td>2倍</td>
<td>2倍</td>
<td>2倍</td>
</tr>
<tr>
<th>签到特权</th>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
<tr>
<th>活动尊享</th>
<td></td>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
<tr>
<th>生日关怀</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
<tr>
<th>送机特权</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
<tr>
<th>贵宾室特权</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
</tbody>
</table>
</el-row>
<!-- 登记规则 -->
<el-row class="level_rule">
<p><span></span>等级规则</p>
<table class="group">
<tbody>
<tr>
<th rowspan="2" class="modu_level_tit" style="width: 80px">会员级别</th>
<th rowspan="2" width="15%">级别标准</th>
<th width="30%">升降级标准</th>
<th class="modu_level_tit" width="40%">星级有效期延长的条件</th>
</tr>
<tr>
<td>1、二星以上会员的星级有效期为1年，自完成升星之日<br>
算起；注册及一星会员的星级有效期长期有效<br>
2、当星级到期时，将扣除二星及以上会员不同数量的成<br>
长值，并根据剩余成长值重新计算会员星级<br>
3、若达到上一级别的级别标准，即可升级。若未达到，<br>
则根据星级有效期延长的条件判断<br>
说明：扣除成长值时，会员的成长值最低为0</td>
<td>当会员星级到期后，未能达到升级标准，<br>
1、只要符合以下条件，您的当前会员级别可以顺延一年<br>
2、若未能达到以下条件，将顺次下调一个会员级别，同时按照下调日更新会员星级有效期
</td>
</tr>
<tr>
<td>注册会员</td>
<td>注册但无消费记录</td>
<td colspan="2" style="text-align: center">永久有效</td>
</tr>
<tr>
<td>一星会员</td>
<td>成长值在1-1999，并有出游归来订单（指途牛旅游产品订单）</td>
<td colspan="2" style="text-align: center">永久有效</td>
</tr>
<tr>
<td>二星会员</td>
<td>成长值2000—6999</td>
<td>有效期1年，到期后扣除<span style="color: red">1000</span>成长值，根据剩余成长值重新计算会员星级。</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">100元</span></td>
</tr>
<tr>
<td>三星会员</td>
<td>成长值7000—14999</td>
<td>有效期1年，到期后扣除<span style="color: red">1500</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">600元</span></td>
</tr>
<tr>
<td>四星会员</td>
<td>成长值15000—49999</td>
<td>有效期1年，到期后扣除<span style="color: red">3500</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">1500元</span></td>
</tr>
<tr>
<td>五星会员</td>
<td>成长值50000—99999</td>
<td>有效期1年，到期后扣除<span style="color: red">7000</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">3单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">3000元</span></td>
</tr>
<tr>
<td>白金会员</td>
<td>成长值100000—299999</td>
<td>有效期1年，到期后扣除<span style="color: red">15000</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">3单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">5000元</span></td>
</tr>
<tr>
<td>钻石会员</td>
<td>成长值300000+</td>
<td>有效期1年，到期后扣除<span style="color: red">50000</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">4单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">8000元</span></td>
</tr>
</tbody>
</table>
</el-row>
<!-- 常见问题 -->
<el-row class="level_question">
<p><span></span>常见问题</p>
<div class="modu_con">
<p>1.会员星级有效期多久？<br>二星以上会员的星级有效期为1年，自完成升星之日算起；注册及一星会员的星级有效期长期有效。</p>
<p>2.二星及以上会员的星级有效期限能延长吗？<br>当会员星级到期后，如未能达到升级标准，按照对应星级的保级标准，达到顺延一年,未达到顺次下调一个会员星级（最低只降到一星会员，不会再降到普通会员）同时按照下调日更新会员级别有效期。</p>
</div>
</el-row>
</el-row>
</el-row>
</template>
<script>
import payURL from "../../global/pay.vue";
export default {
components: {
payurlItem: payURL,
},
data(){
return {
userInfo: {},
iconList: [
{
list: ['icon-qiandaotequan','icon-dikoutequan','icon-yudingjiangli']
},
{
list: ['icon-qiandaotequan','icon-dikoutequan','icon-yudingjiangli']
},
{
list: ['icon-qiandaotequan','icon-dikoutequan','icon-yudingjiangli']
},
{
list: ['icon-qiandaotequan','icon-dikoutequan','icon-yudingjiangli']
},
],
}
},
computed: {
},
created(){
},
mounted() {
let userInfo = this.getLocalStorage();
let account = userInfo.account
this.getSimpleUser(account)
},
methods: {
getSimpleUser: function (account) {
this.apiJavaPost('/api/b2b/user/getSimpleUser',{account: account},res=>{
if(res.data.resultCode==1){
this.userInfo= res.data.data
console.log(res.data.data)
}else{
this.Error(res.data.message);
}
},null)
},
}
}
</script>
\ No newline at end of file
src/components/newPersonalCenter/block/MemberCenter.vue
View file @ d18a8adc
<style> <style>
@import "../../../assets/css/newPersonalCenter/block/MemberCenter.css"; @import "../../../assets/css/newPersonalCenter/block/MemberCenter.css";
</style> </style>
<template> <template>
<el-row class="MemberCenter"> <el-row class="MemberCenter">
<!-- 会员信息 -->
<el-row class="level_info"> <el-row class="level_info">
<!-- 左边 --> <el-row class="chart">
<div class="info"> <el-col :span="6" class="left">
<div class="head_img"> <div class="head_img">
<img src="../../../assets/img/head_normal1.png" alt=""> <img src="../../../assets/img/head_normal1.png" alt="">
</div> </div>
<p class="name">李晓敏</p> <p class="name">李山田</p>
<!-- vip 经验 --> <p><i class="_vip_level">V0</i></p>
<div class="_exp"> </el-col>
<i class="_vip_level">V{{userInfo.vipRate}}</i> <el-col :span="18" class="right">
<span class="_progress"> <p class="tit"><span>会员成长值</span><span class="__cp">等级规则</span></p>
<!-- 指针 --> <div id="chartsMap" style="height:155px;width:100%;"></div>
<div class="_pointer" :style="{'left': ((userInfo.vipExperience/999)*100)-13 + '%'}" v-if="(userInfo.vipExperience/999)*100>0"> </el-col>
<span class="_pointer_num">{{userInfo.vipExperience}}</span>
<span class="_line"></span>
</div>
<!-- 进度条 -->
<el-progress :show-text="false" :percentage="userInfo.vipExperience > 0 ? (userInfo.vipExperience/999)*100 : 0" color="#E7C588"></el-progress>
</span>
<i class="_vip_level _vip_level_gray">V{{userInfo.vipRate+1}}</i>
</div>
<p class="value_number">
<span class="_value">成长值：</span>
<span class="_number">{{userInfo.vipExperience}}/999</span>
</p>
<div class="start">
<p>会员等级：<span>二星会员</span></p>
<p>我的成长值：<span>6666</span></p>
<p>等级有效期至：<span>2999-12-31</span></p>
</div>
</div>
<!-- 右边 -->
<div :span="17" :offset="1" class="level">
<!-- 右 上 -->
<el-row class="level_top">
<p>我的会员等级：</p>
<ul class="level_list">
<li>
<div class="_raduis">
<i class="iconfont icon-putonghuiyuan"></i>
<span class="_dot _dot_m"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
</div>
<p>普通</p>
<p>（注册）</p>
</li>
<li>
<div class="_raduis ">
<i class="number">1</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>一星会员</p>
<p>（1）</p>
</li>
<li>
<div class="_raduis">
<i class="number">2</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>二星会员</p>
<p>（2000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="number">3</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>三星会员</p>
<p>（7000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="number">4</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>四星会员</p>
<p>（15000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="number">5</i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>五星会员</p>
<p>（50000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="iconfont icon-huangguan1"></i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>白金会员</p>
<p>（100000）</p>
</li>
<li>
<div class="_raduis no_color">
<i class="iconfont icon-zuanshi"></i>
<span class="_dot _dot_m _dot_m_t"></span>
<span class="_dot _dot_l"></span>
<span class="_dot _dot_xl"></span>
<span class="_dot_xxl"></span>
<span class="_vip">VIP</span>
</div>
<p>钻石会员</p>
<p>（300000）</p>
</li>
</ul>
<div class="line"></div>
</el-row> </el-row>
<!-- 右 下 ss--> <el-row class="tequan">
<el-row class="level_bottom"> <p class="tit"><span>我的会员特权</span><span class="__cp">等级权益</span></p>
<p>我的会员特权：</p> <el-carousel indicator-position="none" arrow="always" :autoplay="false" height="110px">
<el-carousel indicator-position="none" arrow="always" :autoplay="false" height="70px">
<el-carousel-item v-for="(item, index) in iconList" :key="index"> <el-carousel-item v-for="(item, index) in iconList" :key="index">
<div class="_icon_list"> <div class="_icon_list">
<div class="_item" v-for="son in item.list"> <div class="_item" v-for="son in item.list">
<div>
<span class="_raduis _raduis2"></span> <span class="_raduis _raduis2"></span>
<i :class="['iconfont', son]"></i> <i :class="['iconfont', son]"></i>
<span class="_raduis"></span> <span class="_raduis"></span>
</div> </div>
<p>抵用特权</p>
<p>200积分</p>
</div>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</el-row> </el-row>
</div>
</el-row> </el-row>
<el-row class="info_box"> <el-row class="shangpin">
<!-- 登记权益 --> <el-row class="tit">
<el-row class="level_equity"> <div>
<p><span></span>等级权益</p> <p><i class="iconfont icon-mudedi"></i>热门兑换商品</p>
<table> <span>更多&nbsp;></span>
<thead> </div>
<tr>
<th>权益\等级</th>
<th>注册会员</th>
<th>一星会员</th>
<th>二星会员</th>
<th>三星会员</th>
<th>四星会员</th>
<th>五星会员</th>
<th>白金会员</th>
<th>钻石会员</th>
</tr>
</thead>
<tbody>
<tr>
<th>抵用特权</th>
<td>1倍</td>
<td>1倍</td>
<td>1倍</td>
<td>1倍</td>
<td>1.5倍</td>
<td>2倍</td>
<td>2倍</td>
<td>2倍</td>
</tr>
<tr>
<th>预订奖励</th>
<td>1倍</td>
<td>1倍</td>
<td>1倍</td>
<td>1倍</td>
<td>1.5倍</td>
<td>2倍</td>
<td>2倍</td>
<td>2倍</td>
</tr>
<tr>
<th>签到特权</th>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
<tr>
<th>活动尊享</th>
<td></td>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
<tr>
<th>生日关怀</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
<tr>
<th>送机特权</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
<tr>
<th>贵宾室特权</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
<td><i class="iconfont icon-xuanzhong2"></i></td>
</tr>
</tbody>
</table>
</el-row> </el-row>
<!-- 登记规则 --> <el-row class="content">
<el-row class="level_rule"> <el-col :span="6" class="left">
<p><span></span>等级规则</p> <div>
<table class="group"> <h4>观影立减25元</h4>
<tbody> <p>仅限猫眼、美团购电影票</p>
<tr> </div>
<th rowspan="2" class="modu_level_tit" style="width: 80px">会员级别</th> </el-col>
<th rowspan="2" width="15%">级别标准</th> <el-col :span="18" class="right">
<th width="30%">升降级标准</th> <el-row class="top" :gutter="16">
<th class="modu_level_tit" width="40%">星级有效期延长的条件</th> <el-col :span="8" class="item">
</tr> <p class="name">利仁电饼铛家用双面加热</p>
<tr> <p class="jifen">兑换价：1000积分</p>
<td>1、二星以上会员的星级有效期为1年，自完成升星之日<br> <p class="line"><span></span></p>
算起；注册及一星会员的星级有效期长期有效<br> <div class="img"></div>
2、当星级到期时，将扣除二星及以上会员不同数量的成<br> </el-col>
长值，并根据剩余成长值重新计算会员星级<br> <el-col :span="8" class="item">
3、若达到上一级别的级别标准，即可升级。若未达到，<br> <p class="name">利仁电饼铛家用双面加热</p>
则根据星级有效期延长的条件判断<br> <p class="jifen">兑换价：1000积分</p>
说明：扣除成长值时，会员的成长值最低为0</td> <p class="line"><span></span></p>
<td>当会员星级到期后，未能达到升级标准，<br> <div class="img"></div>
1、只要符合以下条件，您的当前会员级别可以顺延一年<br> </el-col>
2、若未能达到以下条件，将顺次下调一个会员级别，同时按照下调日更新会员星级有效期 <el-col :span="8" class="item">
</td> <p class="name">利仁电饼铛家用双面加热</p>
</tr> <p class="jifen">兑换价：1000积分</p>
<tr> <p class="line"><span></span></p>
<td>注册会员</td> <div class="img"></div>
<td>注册但无消费记录</td> </el-col>
<td colspan="2" style="text-align: center">永久有效</td>
</tr>
<tr>
<td>一星会员</td>
<td>成长值在1-1999，并有出游归来订单（指途牛旅游产品订单）</td>
<td colspan="2" style="text-align: center">永久有效</td>
</tr>
<tr>
<td>二星会员</td>
<td>成长值2000—6999</td>
<td>有效期1年，到期后扣除<span style="color: red">1000</span>成长值，根据剩余成长值重新计算会员星级。</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">100元</span></td>
</tr>
<tr>
<td>三星会员</td>
<td>成长值7000—14999</td>
<td>有效期1年，到期后扣除<span style="color: red">1500</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">600元</span></td>
</tr>
<tr>
<td>四星会员</td>
<td>成长值15000—49999</td>
<td>有效期1年，到期后扣除<span style="color: red">3500</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">1500元</span></td>
</tr>
<tr>
<td>五星会员</td>
<td>成长值50000—99999</td>
<td>有效期1年，到期后扣除<span style="color: red">7000</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">3单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">3000元</span></td>
</tr>
<tr>
<td>白金会员</td>
<td>成长值100000—299999</td>
<td>有效期1年，到期后扣除<span style="color: red">15000</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">3单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">5000元</span></td>
</tr>
<tr>
<td>钻石会员</td>
<td>成长值300000+</td>
<td>有效期1年，到期后扣除<span style="color: red">50000</span>成长值，根据剩余成长值重新计算星级</td>
<td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">4单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">8000元</span></td>
</tr>
</tbody>
</table>
</el-row> </el-row>
<!-- 常见问题 --> <el-row class="bottom" :gutter="16">
<el-row class="level_question"> <el-col :span="12" class="item">
<p><span></span>常见问题</p> <div class="img">
<div class="modu_con">
<p>1.会员星级有效期多久？<br>二星以上会员的星级有效期为1年，自完成升星之日算起；注册及一星会员的星级有效期长期有效。</p> </div>
<p>2.二星及以上会员的星级有效期限能延长吗？<br>当会员星级到期后，如未能达到升级标准，按照对应星级的保级标准，达到顺延一年,未达到顺次下调一个会员星级（最低只降到一星会员，不会再降到普通会员）同时按照下调日更新会员级别有效期。</p> <div class="_r">
<p class="name">利仁电饼铛家用双面加热</p>
<p class="jifen">兑换价：1000积分</p>
<p class="line"><span></span></p>
</div> </div>
</el-col>
<el-col :span="12" class="item">
<div class="img">
</div>
<div class="_r">
<p class="name">利仁电饼铛家用双面加热</p>
<p class="jifen">兑换价：1000积分</p>
<p class="line"><span></span></p>
</div>
</el-col>
</el-row>
</el-col>
</el-row> </el-row>
</el-row> </el-row>
</el-row> </el-row>
</template> </template>
<script> <script>
import payURL from "../../global/pay.vue";
export default { export default {
components: { components: {
payurlItem: payURL,
}, },
data(){ data(){
return { return {
...@@ -371,21 +130,116 @@ export default { ...@@ -371,21 +130,116 @@ export default {
}, },
mounted() { mounted() {
let userInfo = this.getLocalStorage(); this.userInfo = this.getLocalStorage();
let account = userInfo.account let myChart = this.$echarts.init(document.getElementById("chartsMap"));
this.getSimpleUser(account) myChart.setOption({
title: {
left: "left",
textStyle: {
fontWeight: "bold",
fontSize: 14,
color: "#333333",
height: "30px"
}, },
methods: { padding: [
getSimpleUser: function (account) { 20, // 上
this.apiJavaPost('/api/b2b/user/getSimpleUser',{account: account},res=>{ 20, // 右
if(res.data.resultCode==1){ 20, // 下
this.userInfo= res.data.data 20 // 左
console.log(res.data.data) ]
}else{ },
this.Error(res.data.message); tooltip: {
trigger: "item",
formatter: "{b} : {c}"
},
xAxis: {
type: "category",
axisLine: {
show: false,
lineStyle: {
width: 30
}
},
axisTick: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
},
grid: {
x: -100,
y: 20,
x2: 0,
y2: 0,
containLabel: true,
tooltip: {
textStyle:{
color: 'red'
} }
},null) }
},
yAxis: {
type: "value",
// axisLine: {
// show: false
// },
min: '10',
axisTick: false,
splitLine: {
show: false,
lineStyle: {
color: "rgba(245,245,245,1)"
}
}, //去除网格线
// axisLable: {
// show: false,
// }
},
series: [
{
name:'',
type: "line",
smooth: false,
data: [0, 1000, 2000, '-', '-','-'],
markPoint: {
data: [
{name: '周最低', value: 1000, xAxis: 1, yAxis: -1.5},
]
},
// data: then.dateList,
lineStyle: {
width: 3,
color: "#E5AF63"
}, },
itemStyle: {
borderWidth: 5,
color: "#FFFFFF"
},
},
{
name:'',
type: "line",
smooth: false,
data: ['-', '-', 2000, 4000, 6000, 8000],
markPoint: {
data: [
{name: '周最低', value: 1000, xAxis: 1, yAxis: -1.5},
]
},
// data: then.dateList,
lineStyle: {
width: 3,
color: "#808290",
type: 'dashed'
},
itemStyle: {
borderWidth: 5,
color: "#FFFFFF"
},
}
]
},true);
},
methods: {
} }
} }
</script> </script>
src/components/newPersonalCenter/integral/model/Coupon.vue 0 → 100644
View file @ d18a8adc
<style scoped>
._content_item{
display: flex;
flex-wrap: wrap;
}
._content_item ._item{
width: 220px;
position: relative;
transition: all linear .5s;
overflow: hidden;
margin: 5px 4px;
}
._content_item ._item:hover{
box-shadow: 0px 1px 13px 0px rgb(189, 189, 189);
}
._content_item ._top{
background-color: #F1BC69;
}
._content_item ._top ._time{
color: #A7711C;
}
._content_item ._top._blue{
background-color: #8794E2;
}
._content_item ._top._blue ._time{
color: #4C58A4;
}
._content_item div._top._gray{
background-color: #C3C3C3 !important;
}
._content_item div._top._gray ._overdue,._content_item div._top._gray ._info_bottom{
display: none
}
._content_item div._top._gray ._info_sale{
color: #FFFFFF !important;
}
._content_item div._top._gray ._time{
color: #777777 !important;
}
._top_raduis{
display: flex;
justify-content: space-between;
}
._top_raduis span{
display: inline-block;
width: 8px;
height: 8px;
margin: 3px;
border-radius: 50%;
background-color: white;
margin-top: -4px;
}
._item ._top ._overdue{
background-color: #B5E6A2;
color: #5CBA5E;
padding: 4px 6px;
position: absolute;
left: 0;
top: 0;
font-size: 12px;
}
._item ._top ._info_details{
padding: 15px 10px;
}
._item ._top ._info_details ._info_sale{
font-size: 30px;
color: white;
}
._item ._top ._info_details ._info_sale span{
font-size: 20px;
color: white;
}
._item ._top ._info_details ._info_full{
color: #FFFFFF;
font-size: 12px;
padding: 5px 0;
}
._item ._top ._info_details ._info_time{
font-size: 12px;
}
._item ._top ._info_details ._info_bottom{
padding: 1px 5px;
color: #A7711C;
font-size: 12px;
position: absolute;
border: 1px solid #A7711C;
border-radius: 4px;
right: 13px;
top: 24px;
cursor: pointer;
}
._item ._bottom{
padding: 15px 10px;
background-color: #F9F9F9;
}
._item ._bottom p{
font-size: 12px;
color: #333333;
font-weight: bold;
margin-bottom: 13px;
}
._item ._bottom ._bottom_info{
color: #666666;
font-weight: 300;
}
._item ._bottom p._margin_bt0{
margin-bottom: 0 !important;
}
p._info_coupon_name{
font-size: 18px !important;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: white;
}
</style>
<template>
<div class="_item">
<div class="_top" :class="{'_blue':item.couponsType===1,'_gray':item.couponEffectStatus===3,}">
<div class="_top_raduis">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="_overdue" v-if="item.warning">兑换成功</div>
<div class="_info_details">
<p class="_info_coupon_name" :title="item.couponsName">{{item.couponsName}}</p>
<p class="_info_sale" v-if="item.couponsType !== 1">
{{item.denomination}}
<span>折</span>
</p>
<p class="_info_sale" v-else>
<span>￥</span>
{{item.denomination}}
</p>
<p class="_info_full">满{{item.useCondition}}可用</p>
<p class="_info_time _time">有效时间：{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}</p>
<p class="_info_bottom" @click="goUrl('heel',true)">去使用</p>
</div>
</div>
<div class="_bottom">
<p class="_bottom_tit">可用线路及系列</p>
<p class="_bottom_info">{{item.lineName === '' ? '不限' : item.lineName}}-{{item.lineTeamName === '' ? '不限' : item.lineTeamName}}</p>
<p class="_bottom_tit _margin_bt0">兑换时间: <span class="_bottom_info">{{item.duiTime}}</span></p>
<!-- <p class="_bottom_info _margin_bt0">{{item.accessType === 1 ? '抽奖活动' : '其他'}}</p> -->
</div>
</div>
</template>
<script>
export default {
// props: ["item"],
data() {
return {
item: {
denomination: '250',
useCondition: 500,
lineName: '',
lineTeamName: '',
effectDate: '2019-5-7 11:04:42',
expirationDate: '2019-5-21 11:04:42',
warning: 1,
couponsName: '优惠券啊',
couponsType: 2,
couponEffectStatus: 2,
duiTime: '2019-5-1 11:04:42'
}
}
},
methods: {
goUrl(path) {
this.$router.push({ name: path });
}
},
mounted() {
}
};
</script>
src/components/newPersonalCenter/integral/model/exchange.vue
View file @ d18a8adc
...@@ -18,32 +18,104 @@ ...@@ -18,32 +18,104 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
<div class="__cp _drop">
<el-dropdown trigger="click" @command="handleCommandOne">
<span class="el-dropdown-link">
{{Name2}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<template v-for="item in StatuList">
<el-dropdown-item :command="item">{{item.Name}}</el-dropdown-item>
</template>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="__cp _drop">
<el-dropdown trigger="click" @command="handleCommandOne">
<span class="el-dropdown-link">
{{Name3}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<template v-for="item in TimeList">
<el-dropdown-item :command="item">{{item.Name}}</el-dropdown-item>
</template>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-row> </el-row>
<ul class="clearfix list">
<li class="_content_item">
<Coupon/>
</li>
</ul>
</div> </div>
</template> </template>
<script> <script>
import Coupon from './Coupon'
import Goods from './Goods'
export default { export default {
components: { components: {
Coupon: Coupon,
Goods: Goods,
}, },
props:{}, props:{},
data(){ data(){
return{ return{
Name: '全部', Name: '全部商品',
Name2: '所有状态',
Name3: '不限时间',
TypeList: [ TypeList: [
{ {
ID: -1, ID: -1,
Name: '全部' Name: '全部商品'
}, },
{ {
ID: 1, ID: 1,
Name: '收入' Name: '实物'
}, },
{ {
ID: 2, ID: 2,
Name: '支出' Name: '电子/虚拟'
}, },
], ],
StatuList: [
{
ID: -1,
Name: '所有状态'
},
{
ID: 1,
Name: '已兑换'
},
{
ID: 2,
Name: '未兑换'
},
{
ID: 3,
Name: '已发放'
},
{
ID: 3,
Name: '未发放'
},
],
TimeList: [
{
ID: -1,
Name: '不限时间'
},
{
ID: 2,
Name: '昨天'
},
{
ID: 3,
Name: '前天'
},
]
} }
}, },
mounted(){ mounted(){
......
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