[...修复会员中心成为会员样式及会员特权可切换显示]

pages.json

@@ -264,7 +264,7 @@
 			"name": "Vip",
 			"style": {
 				"navigationBarTitleText": "会员",
-				"navigationBarBackgroundColor": "#1f1b1c",
+				"navigationBarBackgroundColor": "#e93340",
 				"navigationBarTextStyle": "white",
 				"backgroundColor": "#fefaef"
 			}
@@ -273,7 +273,7 @@
 			"name": "vipAgree",
 			"style": {
 				"navigationBarTitleText": "用户协议",
-				"navigationBarBackgroundColor": "#1f1b1c",
+				"navigationBarBackgroundColor": "#e93340",
 				"navigationBarTextStyle": "white",
 				"backgroundColor": "#fefaef"
 			}

pages/vip/index.vue

@@ -3,10 +3,11 @@
 	<view class="content">
         <swiper class="vip-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
         	<swiper-item class="swiper-item" v-for="(item, index) in identities" :key="index">
+				<image class="swiper-item-bg" src="/static/imgs/account-bg.png" mode="widthFix" />
         		<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
         		    <view class="vip-top">
-        		        <view class="vip-name">
+        		        <view  :class="tabsIndex == index ? 'vip-name' : 'vip-name1'">
-                            <image class="vip-name-icon" src="../../static/icons/vip_icon.png" mode="aspectFill"></image>
+                            <image class="vip-name-icon" src="../../static/icons/vip_icon.png" mode="aspectFill" />
         		            {{item.name}}
         		        </view>
         		        <view class="vip-price">
@@ -121,6 +122,7 @@
 		created() {
             // 获取当前用户信息
 			identities().then(res => {
+				console.log(res)
 				this.loding		= false
 				this.user 		= res.user
 				this.description= res.description
@@ -142,8 +144,9 @@
             swiperChange(e) {
             	this.tabsIndex = e.detail.current
                 this.total     = this.identities[e.detail.current].price
-                this.sumNumber = 1
+                this.rights     = this.identities[e.detail.current].rights
                 this.totalData(this.identities[e.detail.current].identity_id);
+                this.sumNumber = 1
             },
             
 			// 开通会员
@@ -288,15 +291,24 @@
     	width: 630rpx;
     	height: 280rpx;
     	display: flex;
+		position: relative;
+		.swiper-item-bg{
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			z-index: 10;
+			bottom: 0;
+		}
     }
     
     .vip-item {
     	width: 630rpx;
     	height: 280rpx;
     	border-radius: 20rpx;
-        background-color: #c8c8c8;
+        background-color: #c7c7c7;
         padding: 0 40rpx;
         box-sizing: border-box;
+		color: #cacaca;
         .vip-top {
             display: flex;
             position: relative;
@@ -308,7 +320,7 @@
                 border-radius: 60rpx;
                 padding: 0 $padding;
                 box-sizing: border-box;
-                background: red;
+				background-image: linear-gradient(to bottom ,#e93340,#e8252f);
                 display: flex;
                 .vip-name-icon {
                     width: 50rpx;
@@ -316,6 +328,20 @@
                     margin: $margin - 15 $margin - 10 0 0;
                 }
             }
+			.vip-name1{
+				font-size: $title-size + 6;
+				border-radius: 60rpx;
+				padding: 0 $padding;
+				box-sizing: border-box;
+				background-image: linear-gradient(to bottom ,#cacaca,#cacaca);
+				display: flex;
+				color: #fff;
+				.vip-name-icon {
+				    width: 50rpx;
+				    height: 50rpx;
+				    margin: $margin - 15 $margin - 10 0 0;
+				}
+			}
             .vip-price {
                 font-size: $title-size + 10;
                 font-weight: 600;
@@ -331,9 +357,10 @@
     }
     
     .color-item-img {
-        background-color: #ff252f;
+        background-color: #e93340;
+		background-image: linear-gradient(to bottom ,#e93340,#e8252f);
         color: #FFFFFF;
-        box-shadow: 0 0 20rpx rgba(145,196,255,.5);
+        box-shadow: 0 0 20rpx 4rpx rgba($color: #e93340, $alpha: 1.0);
     }
     
     // 轮播点
@@ -363,7 +390,7 @@
         .vip-years-name {
             flex: 1;
             display: flex;
-            color: #c8c8c8;
+            color: #c2c2c2;
             .vip-years-icon {
                 width: 60rpx;
                 height: 60rpx;
@@ -397,21 +424,23 @@
         text-align: center;
         .privilege-img {
             height: 40rpx;
+			margin-top: 40rpx;
         }
         .privilege-list {
             padding: 0 $padding;
             box-sizing: border-box;
             text-align: left;
-            margin-top: $margin;
+            margin-top: $margin * 0.5;
             .privilege-label {
                 border-bottom: 2rpx #e6eaef dashed;
-                font-size: $title-size;
+                font-size: 30rpx;
-                padding: $padding + 10 0;
+                padding: $padding 0;
                 display: flex;
                 .privilege-label-tips {
                     width: 40rpx;
                     height: 40rpx;
                     margin-right: 20rpx;
+					margin-top: 10rpx;
                 }
                 .privilege-label-text {
                     width: calc(100% - 60rpx);
@@ -422,7 +451,6 @@
     
     // 支付方式
     .payWay {
-        margin-top: $margin * 4;
         .payWay-way {
             padding: 0 $padding;
             box-sizing: border-box;
@@ -466,7 +494,7 @@
         margin: $margin 0;
         text-align: center;
         .agree-tips {
-            background-color: #999999;
+            background-color: #d9d9d9;
             display: inline-block;
             padding: 14rpx $padding;
             color: #FFFFFF;
@@ -507,11 +535,11 @@
 		.footer-btn{
             padding: 0 $padding + 10;
             box-sizing: border-box;
-			background-color: #ff2828;
+			background-color: #e93340;
 			height: 90rpx;
 			line-height: 90rpx;
 			border-radius: 60rpx;
-			color: #FFFFFF;
+			color: #ececec;
 			font-size: $title-size;
 			font-weight: bold;
             text-align: left;
@@ -520,7 +548,7 @@
                 flex: 1;
             }
             .footer-btn-pay {
-                color: #f6ff00;
+                color: rgba($color: #ff0, $alpha: .8);
             }
             &[disabled] {
                 background-color: #b1b1b1;